/* ==========================================================
   EZIO — custom layer on top of the Matias template.
   Loaded last. Keep all bespoke changes here so main.css and
   theme-light.css stay replaceable.
   ========================================================== */

/* ---------- Theme toggle ---------- */
.theme-toggle{
  position:relative;
  width:46px;height:46px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--cusborder);
  background:transparent;
  color:var(--white);
  cursor:pointer;padding:0;margin-right:14px;
  transition:border-color .3s ease,color .3s ease,transform .3s ease;
}
.theme-toggle:hover{
  border-color:var(--base);
  color:var(--base);
  transform:rotate(18deg);
}
.theme-toggle:focus-visible{outline:2px solid var(--base);outline-offset:3px}
.theme-toggle svg{width:20px;height:20px;display:block}
.theme-toggle .ttg-sun{display:block}
.theme-toggle .ttg-moon{display:none}
[data-theme="light"] .theme-toggle .ttg-sun{display:none}
[data-theme="light"] .theme-toggle .ttg-moon{display:block}

/* keep it visible next to the burger on small screens */
@media (max-width:575px){
  .theme-toggle{width:40px;height:40px;margin-right:10px}
  .theme-toggle svg{width:17px;height:17px}
}

/* ---------- Smooth theme change ----------
   Only a handful of elements used to fade, so everything else — the
   header divider lines especially — snapped to its new colour against
   the old background and flashed. This fades EVERY element together,
   pseudo-elements included, and only while the theme is changing. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after{
  transition:background-color .30s ease,
             border-color .30s ease,
             color .30s ease,
             fill .30s ease,
             stroke .30s ease,
             box-shadow .30s ease !important;
  transition-delay:0s !important;
}
@media (prefers-reduced-motion:reduce){
  html.theme-anim,html.theme-anim *,
  html.theme-anim *::before,html.theme-anim *::after{
    transition:none !important;
  }
}

/* ==========================================================
   EZIO BRAND — from the Brand Guidelines, V1.0 / May 2024
   Palette 04, Typography 05. Dark-first, as the system is.
   Accent is used sparingly: the guide allocates ~5% to green.
   ========================================================== */
:root{
  /* primary */
  --body:#0B0B0B;            /* deep black   */
  --white:#FFFFFF;           /* foreground   */
  --pra:#A0A0A0;             /* body copy — N300 */
  --cusborder:#333333;       /* slate        */
  --border1:#2B2B2B;         /* N600         */
  --bgsection:#0B0B0B;
  --footer:#0B0B0B;
  /* accent */
  --base:#00FF88;            /* neon green   */
  --deep-green:#00CC6A;
  --hover:rgba(0,255,136,.62);
  /* neutrals, straight from the chart */
  --n900:#0D0D0D; --n800:#141414; --n700:#1F1F1F; --n600:#2B2B2B;
  --n500:#464646; --n400:#6A6A6A; --n300:#A0A0A0; --n200:#D1D1D1;
  --charcoal:#1A1A1A; --slate:#333333; --silver:#E6E6E6;
}
:root[data-theme="light"]{
  --body:#FFFFFF;
  --white:#0B0B0B;
  --pra:#464646;
  --cusborder:#E6E6E6;
  --border1:#D1D1D1;
  --bgsection:#FFFFFF;
  --footer:#F4F4F4;
  /* #00FF88 is unreadable on white (~1.4:1). Deepened for the light
     theme only, so the accent stays legible and stays the same hue. */
  --base:#007A40;
  --hover:rgba(0,122,64,.6);
}

/* ---------- Typography: Inter everywhere ---------- */
body,h1,h2,h3,h4,h5,h6,p,a,span,li,button,input,textarea,select,
.hero-title,.card-title,.cmn--btn,.common__sub,.ptext{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
[class^="bi-"],[class*=" bi-"]{ font-family:"bootstrap-icons" !important; }

/* the guide's letterspaced uppercase labels */
.common__sub,.ptext,.spec dt,.reel__meta .ptext,.card-client{
  letter-spacing:.08em;
}

/* ---------- Accent used sparingly ----------
   The brand's own website board shows an outlined green button,
   not a filled slab. Fill only on hover. */
.cmn--btn{
  background:transparent !important;
  border:1px solid var(--base) !important;
  color:var(--base) !important;
  transition:background .25s ease,color .25s ease;
}
.cmn--btn:hover{
  background:var(--base) !important;
  color:#0B0B0B !important;
}
.cmn--btn .get__text,.cmn--btn i{ color:inherit !important; }

/* the light build used a placeholder JPG as the banner backdrop */
[data-theme="light"] .banner__section{
  background:linear-gradient(180deg,#ffffff 0%,#f2f4f7 100%) !important;
}

/* ---------- Logo (the supplied mark from EZIO LOGO.ai — never redraw it) -------
   The artwork is inlined in each page as <svg class="ezio-mark">, carrying its own
   width/height attributes. That is deliberate: it draws even if this stylesheet is
   stale in cache or missing, which a CSS mask did not. Header takes the monogram;
   the offcanvas panel has the height for the full stacked lockup.
   `fill:currentColor` is what makes it flip with the theme. */
.ezio-mark{
  display:block;
  height:34px; width:auto;
  color:var(--white);
  fill:currentColor;
  transition:color .35s ease;
}
.side-logo .ezio-mark{ height:72px }
@media (max-width:575px){ .ezio-mark{height:28px} }

/* ---------- Marquee as real text (template shipped it as flat PNGs) ---------- */
.marquee-item .mq{
  font-size:clamp(34px,6vw,72px);
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  padding:0 26px;
  color:var(--white);
}
/* ---------- Outlined display type ----------
   `-webkit-text-stroke` traces every contour a glyph is built from.
   Inter is a variable font whose glyphs carry internal overlaps, and
   some browsers stroke those too — which is the doubled letters with
   lines running through them. Every outlined word on this site sits on
   a known solid ground, so the outline is drawn instead as a ring of
   text-shadows around a letter filled with the colour behind it. One
   clean edge, identical in every browser, and it still flips with the
   theme because both colours are tokens.
   RULE: never reintroduce -webkit-text-stroke on display type. */
.ezio-outline{
  -webkit-text-stroke-width:0;
  text-shadow:
     1px 0    0 var(--white), -1px 0    0 var(--white),
     0    1px 0 var(--white),  0   -1px 0 var(--white),
     .7px  .7px 0 var(--white), -.7px -.7px 0 var(--white),
     .7px -.7px 0 var(--white), -.7px  .7px 0 var(--white);
}

/* the marquee words are cut out of the green band */
.marquee-item .stroke-text.mq{
  color:var(--base);
  -webkit-text-stroke-width:0;
  text-shadow:
     1px 0    0 var(--white), -1px 0    0 var(--white),
     0    1px 0 var(--white),  0   -1px 0 var(--white),
     .7px  .7px 0 var(--white), -.7px -.7px 0 var(--white),
     .7px -.7px 0 var(--white), -.7px  .7px 0 var(--white);
}

/* the hero's second line is cut out of the page ground */
.banner__content .designers{
  color:var(--body);
  -webkit-text-stroke-width:0;
  text-shadow:
     1px 0    0 var(--white), -1px 0    0 var(--white),
     0    1px 0 var(--white),  0   -1px 0 var(--white),
     .7px  .7px 0 var(--white), -.7px -.7px 0 var(--white),
     .7px -.7px 0 var(--white), -.7px  .7px 0 var(--white);
}
/* the green sweep that runs across it stays a solid fill, no outline */
.banner__content .designers::before{
  color:var(--base);
  -webkit-text-stroke-width:0;
  text-shadow:none;
}

/* the preloader wordmark, same treatment in the accent colour */
.preloader__matias .mati{
  color:var(--body);
  -webkit-text-stroke-width:0;
  text-shadow:
     1px 0    0 var(--base), -1px 0    0 var(--base),
     0    1px 0 var(--base),  0   -1px 0 var(--base),
     .7px  .7px 0 var(--base), -.7px -.7px 0 var(--base),
     .7px -.7px 0 var(--base), -.7px  .7px 0 var(--base);
}

/* ---------- Client case study: video frames ---------- */
.work__video-head h3{margin:0;font-size:clamp(20px,2.4vw,28px)}
.work__frame{
  position:relative;width:100%;padding-top:56.25%;
  background:var(--surface,#111);border-radius:6px;overflow:hidden;
  border:1px solid var(--cusborder);
}
.work__frame.is-vertical{padding-top:177.78%;max-width:420px}
.work__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.work__frame.is-empty{
  display:grid;place-items:center;padding-top:0;height:220px;
}
.work__frame.is-empty span{
  font-size:14px;opacity:.6;color:var(--white);
}
.work__frame.is-vertical.is-empty{height:340px;padding-top:0}
.work__video{margin-bottom:60px}

/* ---------- Vimeo Showcase embed (a client's whole case) ---------- */
.work__showcase{
  position:relative;width:100%;
  height:clamp(460px,64vh,760px);
  border-radius:6px;overflow:hidden;
  border:1px solid var(--cusborder);
  background:var(--surface,#0d1015);
}
.work__showcase iframe{width:100%;height:100%;border:0;display:block}

/* ==========================================================
   REEL — one video per screen, centred, scroll to the next
   ========================================================== */
.reel{position:relative}
.reel__item{
  min-height:86vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 0;
}
.reel__stage{width:100%;max-width:1120px;margin:0 auto}
.reel__stage.is-vertical{max-width:430px}

.reel__frame{
  position:relative;width:100%;padding-top:56.25%;
  border-radius:8px;overflow:hidden;
  background:#000;border:1px solid var(--cusborder);
}
.reel__frame.is-vertical{padding-top:177.78%}
.reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel__frame.is-empty{
  padding-top:0;height:340px;display:grid;place-items:center;
  background:var(--surface,#0d1015);
}
.reel__frame.is-vertical.is-empty{height:520px}
.reel__frame.is-empty span{font-size:14px;opacity:.55;color:var(--white)}

.reel__meta{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:20px;
}
.reel__meta h3{margin:0;font-size:clamp(19px,2.2vw,26px)}
.reel__meta .ptext{white-space:nowrap}

/* sticky progress counter */
/* height:0 and no float — a floated counter makes each flex band
   shrink to avoid it, which pushed every video off-centre. */
.reel__count{
  position:sticky;top:50vh;z-index:5;
  height:0;overflow:visible;
  display:flex;justify-content:flex-end;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.1em;color:var(--white);
  opacity:.75;pointer-events:none;
}
.reel__count i{display:block;width:22px;height:1px;background:var(--base);opacity:.8}
@media (max-width:991px){
  .reel__count{display:none}
  .reel__item{min-height:auto;padding:26px 0}
  .reel__stage.is-vertical{max-width:340px}
}

/* ---------- Emails must never be title-cased by the template ---------- */
a[href^="mailto:"],
.get__content a,
.about__contbox__item a{
  text-transform:none !important;
}

/* ---------- Header divider lines removed ----------
   The template draws two vertical rules across the header at fixed
   percentages. They line up with nothing and flashed on theme change. */
.header-section::before,
.header-section::after{ display:none !important; content:none !important; }

/* ---------- Header gutter ----------
   The template left the header 12px off the edge while the body sections sit
   at 55px on a 1440 screen, so the logo read as pinned to the bezel. This pads
   both ends of the header equally: at 1440 the logo lands on the same vertical
   line as the About and Contact copy below it, and the right-hand cluster keeps
   its matching gap. The clamp keeps it from eating the row on small screens. */
.header-section .container{
  padding-left:clamp(20px,3.8vw,68px);
  /* the right cluster sits nearer the corner than the logo does — EZIO's call */
  padding-right:clamp(14px,1.8vw,30px);
}
/* the toggle carried an extra 14px on top of the cluster's 16px gap */
.theme-toggle{margin-right:0}

/* ---------- Hero portrait ----------
   Keep the full-resolution transparent artwork large enough for retina
   displays and position it inside the desktop safe area. */
.banner__thumb .ezio-hero-portrait{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
}
@media (min-width:992px){
  .banner__thumb{
    left:42%;
    bottom:-8px;
    width:min(42vw,820px);
    max-width:none;
  }
}

/* Phones and small tablets: the template pinned the portrait to the
   bottom-right corner at ~115px wide, half off the screen with its ring
   cut (EZIO, 2026-10-09). Below the desktop layout he stands centred
   under the text instead, large, on the section's floor — the ring stays
   centred on his body as on desktop. */
@media (max-width:991px){
  .banner__thumb{
    position:relative;left:auto;bottom:auto;
    width:min(88vw,460px);max-width:none;
    margin:0 auto;
  }
  .banner__content{ padding-bottom:8px }
}

/* ==========================================================
   WORK PAGE — the dense grid
   Eight cards a row on a wide screen, stepping down with the
   viewport. The card markup is the same one the homepage uses;
   only the wrapper and the type scale change, so a card never
   needs a second set of styles.
   ========================================================== */
.work-grid{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  column-gap:14px;
  row-gap:30px;
}
@media (max-width:1199px){ .work-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:992px){  .work-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:768px){  .work-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;row-gap:22px} }
@media (max-width:520px){  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.work-grid .project__item{margin-bottom:0}
.work-grid .thumb{margin-bottom:12px !important;display:block;border-radius:4px;overflow:hidden}
.work-grid .thumb img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/11;object-fit:cover;
}
.work-grid .content{gap:8px !important}
.work-grid .project__item .content .left__cont span,
.work-grid .base{
  font-size:9px;letter-spacing:.09em;line-height:1;
  margin-bottom:5px !important;
}
.work-grid .project__item .content .left__cont h3,
.work-grid .project__item .content h3,
.work-grid .project__item h3{
  font-size:clamp(11px,.85vw,14px);
  line-height:1.2;
  letter-spacing:-.005em;
  margin:0;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.work-grid .common__icon{
  width:26px;height:26px;min-width:26px;flex:none;
  display:grid;place-items:center;border-radius:4px;
}
.work-grid .common__icon i{font-size:12px}

/* ---------- Phone header on one line ----------
   The template fixes the logo link at 150px (100px small), sized for its
   own wordmark. The EZ monogram is ~37px, so on a phone the box pushed the
   button cluster onto a second line. Below 992px (menu hidden) the link
   shrinks to the mark; desktop keeps 150px because it centres the menu. */
@media (max-width:991px){
  .header-wrapper .main__logo .logo{ width:auto }
  .header-wrapper .main__logo{ flex:none }
  /* two identical burgers sat side by side here: the nav toggle and the
     side-panel button. The panel only repeats the footer's contact details,
     so below desktop the nav toggle is the only one. */
  .header-wrapper .menu__components .remove__click{ display:none !important }
}
@media (max-width:420px){
  .header-wrapper .menu__components{ gap:10px }
}
@media (max-width:359px){
  /* no room — Contact is still one tap away in the nav menu */
  .header-wrapper .menu__components .cmn--btn{ display:none !important }
}

/* ---------- Work card names on a phone ----------
   Two cards a row leaves ~170px; "VOLKSWAGEN" at 20px was 142px and pushed
   the arrow off the screen (the page scrolled sideways by 10px). */
.project__item .content .left__cont{ min-width:0 }
.project__item .content .common__icon{ flex:none }
@media (max-width:575px){
  .project__item .content .left__cont h3{ font-size:clamp(13px,4.1vw,20px) }
  .project__item .content .common__icon{ min-width:36px;width:36px;height:36px }
}

/* ==========================================================
   HERO — the role cycle
   The headline runs through EZIO's roles. Both lines move as one
   block so the swap reads as a single cut, not two. Words come from
   assets/js/hero.js; the green sweep on the second line is the
   template's own `.designers` effect, restarted on every swap.
   ========================================================== */
.role__cycle .hone,
.role__cycle .designers{
  display:block;
  transition:opacity .18s ease, transform .18s ease;
}
.role__cycle.is-out .hone,
.role__cycle.is-out .designers{
  opacity:0;
  transform:translateY(-14px);
}
.role__cycle.is-out .designers{ transition-delay:.04s }

@media (prefers-reduced-motion:reduce){
  .role__cycle .hone,
  .role__cycle .designers{ transition:none }
  .role__cycle.is-out .hone,
  .role__cycle.is-out .designers{ opacity:1;transform:none }
}

/* ==========================================================
   FIXES — three collisions the template shipped with
   ========================================================== */

/* 1. Nothing may paint over the hero headline.
   `.banner__thumb` (the portrait) comes later in the DOM than the
   headline, so on any window narrow enough for the two to meet, the
   photo was drawn across the outlined letters. Lifting the text gives
   it its own layer; the portrait can pass behind it but never over. */
.banner__content{position:relative;z-index:3}
.banner__thumb{z-index:1}

/* 2. Section eyebrows ("Need a Project?", "Selected work"…).
   `.common__sub` was a fixed 333px box with a green hairline pinned to
   each end. Any label wider than the gap between the hairlines ran
   underneath them — which is the green line crossing "Need". Sizing the
   box to its own text keeps the rules outside the words, whatever the
   label says. 104px = the 80px rule plus its 24px gap. */
.common__sub{
  width:max-content;
  max-width:100%;
  padding-left:104px;
  padding-right:104px;
}
@media (max-width:575px){
  /* no room for the rules on a phone — drop them, keep the label */
  .common__sub{padding-left:0;padding-right:0}
  .common__sub::before,.common__sub::after{display:none}
}

/* 3. Contact values must stay inside their box.
   The About column is 159px wide and the email set at 20px was 173px,
   so it hung past the underline that turns green on hover. The value
   now scales with the column and wraps as a last resort. */
.abox .about__contbox__item{min-width:0}
.abox .about__contbox__item a{
  display:block;
  max-width:100%;
  font-size:clamp(14px,1.15vw,20px);
  line-height:1.35;
  overflow-wrap:anywhere;
}

/* ---------- Creative Approach loop ----------
   The supplied animation replaces the static 496 x 515 artwork. */
.about__onethumb .creative-approach-video{
  display:block;
  width:100%;
  aspect-ratio:496 / 515;
  object-fit:cover;
  background:#0b0b0b;
  border-radius:4px;
  pointer-events:none;
}

/* ==========================================================
   GLOW — the lighting system
   The whole site is lit like an eclipse: a dark ground, light
   arriving from behind things rather than sitting on them, and
   surfaces as dark glass that catch that light at their edges.
   Reference: the "RedSun" scroll-lighting board EZIO picked.

   Accent discipline still holds. Green is only ever LIGHT here —
   a rim, a bloom, a hairline — never a fill. Every alpha is
   multiplied by --glow-k so the light theme can run it softer.

   Driven by assets/js/glow.js, which adds `.glow-js` to <html>
   (so nothing starts dark without the script), `.is-lit` once
   the preloader has gone, `--hero-p` for the hero's scroll, and
   `--mx/--my` for the pointer spotlight on glass panels.
   ========================================================== */
:root{
  --glow:0,255,136;
  --glow-k:1;
  --glass-top:rgba(255,255,255,.045);
  --glass-bot:rgba(255,255,255,.012);
  --glass-line:rgba(255,255,255,.08);
  --glass-hi:rgba(255,255,255,.07);
  --glass-shadow:0 30px 60px -30px rgba(0,0,0,.85);
  --glass-r:18px;
  --glass-r-sm:12px;
  --rim-a:.26;            /* the portrait's back-light */
}
:root[data-theme="light"]{
  --glow:0,122,64;
  --glow-k:.55;
  --glass-top:rgba(255,255,255,.9);
  --glass-bot:rgba(255,255,255,.62);
  --glass-line:rgba(11,11,11,.08);
  --glass-hi:rgba(255,255,255,1);
  --glass-shadow:0 24px 50px -30px rgba(11,11,11,.28);
  --rim-a:0;              /* a green halo on white reads as a fringe, not light */
}

/* the spotlight's strength animates, so it is a typed property */
@property --spot{syntax:"<number>";inherits:false;initial-value:0}

/* ---------- Glass panels ---------- */
.about__onecontent .about__contactwrap .abox,
.process__item,
.contact__item,
.service__rightbox,
.service__rightbox .link__box,
.replay__box,
.contact__rightside,
.price__item,
.footer__top .get__rightcontetn .social__footer{
  background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
      rgba(var(--glow),calc(.10 * var(--spot) * var(--glow-k))), transparent 62%),
    linear-gradient(180deg,var(--glass-top),var(--glass-bot)) !important;
  border:1px solid var(--glass-line) !important;
  border-radius:var(--glass-r) !important;
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  transition:--spot .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.service__rightbox .link__box,
.footer__top .get__rightcontetn .social__footer{ border-radius:var(--glass-r-sm) !important }

.about__onecontent .about__contactwrap .abox:hover,
.process__item:hover,
.contact__item:hover,
.service__rightbox .link__box:hover,
.price__item:hover,
.footer__top .get__rightcontetn .social__footer:hover{
  --spot:1;
  border-color:rgba(var(--glow),calc(.32 * var(--glow-k))) !important;
  box-shadow:inset 0 1px 0 var(--glass-hi),
             0 0 0 1px rgba(var(--glow),calc(.06 * var(--glow-k))),
             0 24px 60px -28px rgba(var(--glow),calc(.45 * var(--glow-k)));
}
/* the big About panel and the footer's GET IN TOUCH plate: glass, no spotlight */
.about__v1wrap,
[data-theme="light"] .about__v1wrap,
.footer__top .fl{
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)) !important;
  border:1px solid var(--glass-line) !important;
  border-radius:calc(var(--glass-r) + 6px) !important;
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}

/* the template's corner blob reads as a black hole on glass */
.process__item::before{ display:none }

/* contact page: the info column was a flat square slab beside the glass form
   and stopped 24px short of it — both columns now glass, same height */
.contact__section .contact__box,
.contact__section .contact__box .replay__box,
.contact__section .contact__rightside{ height:100% }

/* footer socials: three across, so WhatsApp no longer sits alone beside a hole */
.footer__top .get__rightcontetn .social__footer{ gap:12px;padding-left:20px !important;padding-right:20px !important }
@media (max-width:575px){
  .footer__top .get__rightcontetn .social__footer{ padding:12px 12px;font-size:16px }
}

/* form fields sit inside glass, so they become recessed glass */
.replay__box form textarea,
.replay__box form input{
  background:rgba(0,0,0,.28) !important;
  border:1px solid var(--glass-line) !important;
  border-radius:var(--glass-r-sm) !important;
  transition:border-color .3s ease, box-shadow .3s ease;
}
[data-theme="light"] .replay__box form textarea,
[data-theme="light"] .replay__box form input{ background:rgba(11,11,11,.035) !important }
.replay__box form textarea:focus,
.replay__box form input:focus{
  border-color:rgba(var(--glow),calc(.5 * var(--glow-k))) !important;
  box-shadow:0 0 0 4px rgba(var(--glow),calc(.08 * var(--glow-k)));
}

/* ---------- Rows (service list, experience) ----------
   No light of their own. A spotlight on a row painted the row's box as a
   lit rectangle, and the beam ran up into the row above — EZIO found both
   odd. On hover only the icon lights up and the title turns green. */

.service__unique__item:hover,
.exri__item:hover{ border-color:rgba(var(--glow),calc(.35 * var(--glow-k))) !important }

/* ---------- The cursor follower ----------
   A small eclipse that trails the pointer: a ring with its lit rim turned
   toward the direction of travel, a green core, and a faint pool of light.
   glow.js positions the three outer elements; the inner spans carry the
   look and the scale-out, so the hide never fights the per-frame transform.
   It steps aside (scales to nothing) over anything you can click or hover. */
.ezio-cur{
  position:fixed;left:0;top:0;width:0;height:0;
  pointer-events:none;z-index:2147483000;will-change:transform;
}
.ezio-cur > i{
  position:absolute;display:block;border-radius:50%;
  opacity:0;transform:scale(.3);
  transition:opacity .28s ease, transform .35s cubic-bezier(.2,.9,.3,1.2);
}
html.cur-on .ezio-cur > i{ opacity:1;transform:scale(1) }
html.cur-on.cur-hide .ezio-cur > i{ opacity:0;transform:scale(0) }
.ezio-cur--ring > i{
  width:34px;height:34px;left:-17px;top:-17px;
  border:1px solid rgba(var(--glow),calc(.22 * var(--glow-k)));
  box-shadow:0 -1.5px 0 rgba(var(--glow),calc(.95 * var(--glow-k))),
             0 -6px 16px -4px rgba(var(--glow),calc(.6 * var(--glow-k))),
             inset 0 6px 10px -6px rgba(var(--glow),calc(.55 * var(--glow-k)));
}
.ezio-cur--core > i{
  width:6px;height:6px;left:-3px;top:-3px;
  background:var(--base);
  box-shadow:0 0 10px rgba(var(--glow),calc(.85 * var(--glow-k)));
}
.ezio-cur--pool > i{
  width:320px;height:320px;left:-160px;top:-160px;
  background:radial-gradient(closest-side,rgba(var(--glow),calc(.07 * var(--glow-k))),transparent);
}
html.cur-on .ezio-cur--pool > i{ transform:scale(1) }

/* service numbers: Inter's digits are proportional, so "01" vs "11" shifted
   each title by up to 9px — fixed-width figures in a fixed box line them up */
.service__unique__item .serial__adjust > span{
  flex:none;width:2.6ch;font-variant-numeric:tabular-nums;
}

/* ---------- Icon tiles and buttons ---------- */
.common__icon{
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)) !important;
  border:1px solid var(--glass-line);
  border-radius:var(--glass-r-sm) !important;
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.common__icon:hover,
.project__item:hover .content .common__icon,
.service__unique__item:hover .common__icon{
  background:rgba(var(--glow),calc(.12 * var(--glow-k))) !important;
  border-color:rgba(var(--glow),calc(.55 * var(--glow-k)));
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 24px -4px rgba(var(--glow),calc(.55 * var(--glow-k)));
}
.common__icon:hover i,
.project__item:hover .content .common__icon i,
.service__unique__item:hover .common__icon i{ color:var(--base) !important }

.cmn--btn{
  border-radius:12px !important;
  overflow:hidden;
  transition:background .25s ease,color .25s ease,box-shadow .35s ease !important;
}
.cmn--btn::before{ display:none }
.cmn--btn:hover{
  box-shadow:0 0 0 4px rgba(var(--glow),calc(.10 * var(--glow-k))),
             0 10px 34px -8px rgba(var(--glow),calc(.6 * var(--glow-k)));
}
.theme-toggle{ background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)) }

/* ---------- About cards fill their panel ----------
   The template makes `.about__contactwrap` a flex box, so the Bootstrap row
   inside shrank to fit its content. With one skill card it collapsed to a
   75px sliver with "95%" spilling out. The row now takes the full width. */
.about__contactwrap > .row{ flex:1 1 auto; min-width:0 }

/* the About Me / Skills tabs were removed (EZIO, 2026-10-08); the intro's
   60px margin was spacing for them and left it off-centre in its section */
#about .personal__head{ margin-bottom:0 }

/* ---------- About tabs: glass pills, the open one lit ----------
   theme-light.css carries two conflicting rules for these and the
   dark one won, so light mode drew black text on a black pill. */
.about__section .singletab .tablinks li button,
[data-theme="light"] .about__section .singletab .tablinks li button{
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)) !important;
  border:1px solid var(--glass-line) !important;
  border-radius:var(--glass-r-sm) !important;
  color:var(--white) !important;
  box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:border-color .35s ease, box-shadow .35s ease, color .35s ease;
}
.about__section .singletab .tablinks li button:hover{
  border-color:rgba(var(--glow),calc(.35 * var(--glow-k))) !important;
}
.about__section .singletab .tablinks li.active button,
[data-theme="light"] .about__section .singletab .tablinks li.active button{
  background:rgba(var(--glow),calc(.10 * var(--glow-k))) !important;
  border-color:rgba(var(--glow),calc(.6 * var(--glow-k))) !important;
  color:var(--base) !important;
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 8px 28px -10px rgba(var(--glow),calc(.6 * var(--glow-k)));
}

/* ---------- Work cards ---------- */
.project__item .thumb{
  border-radius:var(--glass-r-sm);
  border:1px solid var(--glass-line);
  transition:border-color .45s ease, box-shadow .45s ease;
}
.project__item .thumb img{ border-radius:0 !important }
/* on the homepage the previews are always lit — the work page's dense grid
   stays quiet (EZIO asked for the first page only) */
.row[data-work-grid] .project__item .thumb{
  border-color:rgba(var(--glow),calc(.30 * var(--glow-k)));
  box-shadow:0 0 0 1px rgba(var(--glow),calc(.05 * var(--glow-k))),
             0 0 34px -6px rgba(var(--glow),calc(.38 * var(--glow-k))),
             0 26px 60px -30px rgba(var(--glow),calc(.45 * var(--glow-k)));
}
.row[data-work-grid] .project__item:hover .thumb{
  border-color:rgba(var(--glow),calc(.6 * var(--glow-k)));
  box-shadow:0 0 0 1px rgba(var(--glow),calc(.12 * var(--glow-k))),
             0 0 46px -4px rgba(var(--glow),calc(.55 * var(--glow-k))),
             0 30px 70px -26px rgba(var(--glow),calc(.6 * var(--glow-k)));
}
.project__item:hover .thumb{
  border-color:rgba(var(--glow),calc(.35 * var(--glow-k)));
  box-shadow:0 26px 60px -30px rgba(var(--glow),calc(.55 * var(--glow-k)));
}

/* a card still waiting on its poster: a dark lit frame, not a grey box */
.project__item .thumb__empty{
  display:grid;place-items:center;width:100%;
  aspect-ratio:630/440;
  background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(var(--glow),calc(.10 * var(--glow-k))),transparent 70%),
             linear-gradient(180deg,var(--glass-top),var(--glass-bot));
}
.work-grid .project__item .thumb__empty{ aspect-ratio:16/11 }
.thumb__mark{
  width:20%;height:auto;color:var(--white);opacity:.16;
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.project__item:hover .thumb__mark{ opacity:.32;transform:scale(1.04) }

/* a Drive poster fades in over the dark frame once Drive has made one;
   until then (or if it never loads) the frame with the EZ mark stays */
.project__item .thumb{ position:relative }
.project__item .thumb .thumb__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .6s ease, transform .4s ease;
}
.project__item .thumb .thumb__poster.is-loaded{ opacity:1 }
.project__item:hover .thumb .thumb__poster{ transform:scale(1.025) }

/* ==========================================================
   PLAYER — Drive films in EZIO's frame
   Drive won't play inside a custom player, so the frame does the
   design work: black stage, a rim of light along the top edge (the
   eclipse again), a soft green floor-glow under it, and a corner cap
   carrying the EZ mark. The cap is also functional — it covers Drive's
   pop-out button, so playing a film never sends anyone to Drive.
   ========================================================== */
.reel__frame.is-drive{
  background:#000;
  border:1px solid rgba(var(--glow),calc(.22 * var(--glow-k)));
  border-radius:var(--glass-r);
  box-shadow:
    0 -1px 0 rgba(var(--glow),calc(.75 * var(--glow-k))),
    0 -14px 40px -18px rgba(var(--glow),calc(.55 * var(--glow-k))),
    0 50px 110px -50px rgba(var(--glow),calc(.45 * var(--glow-k))),
    0 30px 60px -30px rgba(0,0,0,.9);
  transition:box-shadow .5s ease, border-color .5s ease;
}
.reel__frame.is-drive:hover{
  border-color:rgba(var(--glow),calc(.4 * var(--glow-k)));
  box-shadow:
    0 -1px 0 rgba(var(--glow),calc(.95 * var(--glow-k))),
    0 -18px 50px -16px rgba(var(--glow),calc(.7 * var(--glow-k))),
    0 60px 130px -50px rgba(var(--glow),calc(.6 * var(--glow-k))),
    0 30px 60px -30px rgba(0,0,0,.9);
}
.reel__frame.is-drive iframe{ background:#000 }
/* the slate: a title card over Drive's first frame until the film starts.
   pointer-events:none — the click goes straight through to Drive's play
   button, which sits exactly under the ring. */
.drive-slate{
  position:absolute;inset:0;z-index:1;
  text-align:center;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%,rgba(var(--glow),calc(.10 * var(--glow-k))),transparent 70%),
    radial-gradient(circle 900px at 50% calc(100% + 820px),transparent 0 898px,rgba(var(--glow),calc(.55 * var(--glow-k))) 899px,transparent 901px),
    linear-gradient(180deg,#0d0d0d,#050505);
  transition:opacity .6s ease, visibility 0s linear .6s;
}
.reel__frame.is-drive.is-playing .drive-slate{ opacity:0;visibility:hidden }
.drive-slate__idx{
  position:absolute;top:22px;left:26px;
  font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.55);
}
.drive-slate__play{
  /* dead centre — Drive's own play button is exactly here */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(var(--glow),.22),transparent 70%),rgba(255,255,255,.03);
  box-shadow:0 -1.5px 0 rgba(var(--glow),.95),
             0 -10px 34px -10px rgba(var(--glow),.7),
             inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .45s cubic-bezier(.2,.9,.3,1.2), box-shadow .45s ease;
}
.drive-slate__play svg{ width:30px;height:30px;margin-left:4px }
.reel__frame.is-drive:hover .drive-slate__play{
  transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 -1.5px 0 rgb(var(--glow)),
             0 -14px 46px -8px rgba(var(--glow),.85),
             inset 0 0 0 1px rgba(var(--glow),.35);
}
.drive-slate__title{
  position:absolute;left:50%;top:calc(50% + 66px);transform:translateX(-50%);width:80%;
  font-size:clamp(18px,2.2vw,30px);font-weight:600;letter-spacing:-.01em;
  color:#fff;line-height:1.15;
}
.drive-slate__meta{
  position:absolute;bottom:22px;left:26px;right:90px;text-align:left;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
@media (max-width:575px){
  /* the horizon arc is sized for desktop; on a phone it ran between the
     ring and the title, so the small slate keeps only the glow */
  .drive-slate{
    background:radial-gradient(ellipse 60% 55% at 50% 52%,rgba(var(--glow),calc(.10 * var(--glow-k))),transparent 70%),
               linear-gradient(180deg,#0d0d0d,#050505);
  }
  .drive-cap{width:48px;height:48px;border-bottom-left-radius:12px}
  .drive-cap__mark{width:18px}
  .drive-slate__play{width:62px;height:62px}
  .drive-slate__title{top:calc(50% + 42px);font-size:15px}
  .drive-slate__play svg{width:24px;height:24px}
  .drive-slate__idx{top:14px;left:16px}
  .drive-slate__meta{bottom:14px;left:16px}
}

/* the film's own frame (Drive's thumbnail), shown the way Drive shows it —
   whole, pillarboxed on black — with a soft shade so the ring and title
   stay readable. The horizon arc is only for films with no frame yet. */
.drive-slate__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;
}
.drive-slate.has-thumb{ background:#000 }
/* no shade over the packshot — it greyed out white end cards; the index,
   label and ring carry their own dark glass instead */
.drive-slate > span{ z-index:1 }
/* on a real frame (often a white slate) the ring needs its own dark glass */
.drive-slate.has-thumb .drive-slate__play{
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(var(--glow),.25),transparent 70%),rgba(8,8,8,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.drive-slate.has-thumb .drive-slate__idx,
.drive-slate.has-thumb .drive-slate__meta{
  color:#fff;padding:4px 8px;margin:-4px -8px;border-radius:6px;background:rgba(8,8,8,.5);
}
.drive-slate.has-thumb .drive-slate__meta{ right:auto;max-width:calc(100% - 100px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.drive-slate.has-thumb .drive-slate__title{ top:auto;bottom:46px;text-shadow:0 2px 14px rgba(0,0,0,.6) }

/* ---------- 3 or more films: three to a row ---------- */
.reel.is-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:28px;row-gap:44px;
}
.reel.is-grid .reel__item{ min-height:0;padding:0;display:block }
.reel.is-grid .reel__stage{ max-width:none }
.reel.is-grid .reel__meta{ margin-top:14px }
.reel.is-grid .reel__meta h3{ font-size:clamp(14px,1.1vw,17px) }
.reel.is-grid .drive-slate__play{ width:62px;height:62px }
.reel.is-grid .drive-slate__play svg{ width:24px;height:24px }
.reel.is-grid .drive-slate__title{ display:none }       /* the title sits right under the frame */
.reel.is-grid .drive-slate__idx{ top:14px;left:16px;font-size:11px }
.reel.is-grid .drive-slate__meta{ bottom:14px;left:16px;font-size:11px }
.reel.is-grid .drive-cap{ width:48px;height:48px;border-bottom-left-radius:12px }
.reel.is-grid .drive-cap__mark{ width:18px }
@media (max-width:991px){ .reel.is-grid{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:32px } }
@media (max-width:575px){ .reel.is-grid{ grid-template-columns:1fr } }

/* ---------- previews are buttons now ---------- */
/* on a tile the ring moves to the corner so the packshot's logo stays
   clear; it only has to be centred in the theater, over Drive's button */
.reel__frame.is-preview .drive-slate__play{
  left:auto;top:auto;right:16px;bottom:14px;transform:none;
  width:52px;height:52px;
}
.reel__frame.is-preview .drive-slate__play svg{ width:20px;height:20px;margin-left:3px }
.reel__frame.is-preview:hover .drive-slate__play{ transform:scale(1.1) }
.reel.is-grid .reel__frame.is-preview .drive-slate__play{ width:44px;height:44px;right:12px;bottom:10px }
.reel.is-grid .reel__frame.is-preview .drive-slate__play svg{ width:17px;height:17px }
.reel__frame.is-preview .drive-slate__title{ display:none }
button.reel__frame.is-preview{
  display:block;width:100%;height:0;margin:0;
  cursor:pointer;font:inherit;color:inherit;text-align:inherit;
  -webkit-appearance:none;appearance:none;
}
.reel__frame.is-preview .drive-slate__img{ transition:transform .7s cubic-bezier(.2,.8,.2,1) }
.reel__frame.is-preview:hover .drive-slate__img{ transform:scale(1.035) }
.reel__frame.is-preview:focus-visible{ outline:2px solid var(--base);outline-offset:4px }

/* ==========================================================
   THEATER — a film opens out of its tile into one big player
   Always the dark room, in both themes: it is a screening.
   ========================================================== */
html.theater-lock,html.theater-lock body{ overflow:hidden }
.theater{
  position:fixed;inset:0;z-index:100000;
  display:grid;place-items:center;padding:24px;
}
.theater[hidden]{ display:none }
.theater__backdrop{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(0,255,136,.07),transparent 70%),rgba(4,4,4,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .45s ease;
}
.theater.is-open .theater__backdrop{ opacity:1 }
.theater__stage{
  position:relative;
  width:min(100%, calc((100vh - 170px) * 16 / 9), 1400px);
}
.theater__frame{
  height:0;padding-top:56.25%;
  transform-origin:0 0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  border-color:rgba(0,255,136,.3) !important;
  box-shadow:0 -1px 0 rgba(0,255,136,.9),
             0 -18px 60px -18px rgba(0,255,136,.6),
             0 70px 160px -60px rgba(0,255,136,.5),
             0 40px 90px -30px rgba(0,0,0,.9) !important;
}
.theater__frame iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;background:#000 }
.theater__frame .drive-slate__play{ width:96px;height:96px }
.theater__frame .drive-slate__play svg{ width:34px;height:34px }
.theater__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:20px;color:#fff;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease .25s, transform .4s ease .25s;
}
.theater.is-open .theater__bar{ opacity:1;transform:none }
.theater__info{ min-width:0 }
.theater__idx,.theater__meta{ font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55) }
.theater__title{ margin:4px 0;font-size:clamp(18px,2vw,26px);color:#fff }
.theater__nav{ display:flex;gap:10px;flex:none }
.theater__btn{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  transition:border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.theater__btn:hover{ border-color:rgba(0,255,136,.6);color:#00FF88;box-shadow:0 0 22px -4px rgba(0,255,136,.6) }
.theater__btn[hidden]{ display:none }
.theater__btn:focus-visible{ outline:2px solid #00FF88;outline-offset:3px }
@media (max-width:575px){
  .theater{ padding:12px }
  .theater__bar{ flex-direction:column;align-items:flex-start }
  .theater__frame .drive-slate__play{ width:68px;height:68px }
}
@media (prefers-reduced-motion:reduce){
  .theater__frame,.theater__bar,.theater__backdrop{ transition:none }
}

.drive-cap{
  position:absolute;top:0;right:0;z-index:2;
  width:58px;height:58px;
  display:grid;place-items:center;
  background:#000;
  border-bottom-left-radius:16px;
  box-shadow:-1px 1px 0 rgba(var(--glow),calc(.28 * var(--glow-k)));
  cursor:default;
}
.drive-cap__mark{ width:22px;height:auto;color:#fff;opacity:.55;transition:opacity .4s ease }
.reel__frame.is-drive:hover .drive-cap__mark{ opacity:.85 }

/* "See all work" becomes a small eclipse instead of a green slab */
.hover__circle{
  background:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(var(--glow),calc(.22 * var(--glow-k))),transparent 70%),
             var(--body) !important;
  box-shadow:0 -1px 0 rgba(var(--glow),calc(.95 * var(--glow-k))),
             0 -10px 34px -10px rgba(var(--glow),calc(.6 * var(--glow-k))),
             inset 0 0 0 1px var(--glass-line);
  transition:box-shadow .5s ease, transform .5s ease;
}
.hover__circle:hover{
  transform:translateY(-4px);
  box-shadow:0 -1px 0 rgba(var(--glow),1),
             0 -14px 50px -8px rgba(var(--glow),calc(.8 * var(--glow-k))),
             inset 0 0 0 1px rgba(var(--glow),calc(.3 * var(--glow-k)));
}
.hover__circle .box i,
.hover__circle .box .textmore{ color:var(--white) !important }
.hover__circle::before{ border-color:var(--glass-line) !important }

/* ---------- Header: glass once it sticks ---------- */
.header-section{ border-bottom-color:var(--glass-line) !important }
.menu-fixed,
[data-theme="light"] .menu-fixed{
  background:rgba(11,11,11,.55) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
          backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 var(--glass-line), 0 20px 40px -30px rgba(0,0,0,.8) !important;
}
[data-theme="light"] .menu-fixed{ background:rgba(255,255,255,.7) !important }

/* ---------- Ambient light in every section ----------
   Pure background layers, no pseudo-elements, so nothing the
   template draws is disturbed: a horizon hairline across the top,
   a pool of light falling from it, and on some sections the rim of
   a large ring sitting just off the edge of the screen. */
[data-theme] .about__section,
[data-theme] .project__section,
[data-theme] .project__metting,
[data-theme] .service__section,
[data-theme] .process__section,
[data-theme] .pricing__section,
[data-theme] .service__details,
[data-theme] .contact__section,
[data-theme] .footer__section{
  background-image:
    linear-gradient(90deg,transparent 8%,rgba(var(--glow),calc(.28 * var(--glow-k))) 50%,transparent 92%),
    radial-gradient(55% 340px at 50% 0%,rgba(var(--glow),calc(.075 * var(--glow-k))),transparent 100%);
  background-size:100% 1px,100% 100%;
  background-position:top center,top center;
  background-repeat:no-repeat;
}
[data-theme] .service__section,
[data-theme] .contact__section{
  background-image:
    linear-gradient(90deg,transparent 8%,rgba(var(--glow),calc(.28 * var(--glow-k))) 50%,transparent 92%),
    radial-gradient(55% 340px at 50% 0%,rgba(var(--glow),calc(.075 * var(--glow-k))),transparent 100%),
    radial-gradient(circle 420px at 104% 38%,transparent 0 418px,rgba(var(--glow),calc(.22 * var(--glow-k))) 419px,transparent 421px),
    radial-gradient(circle 420px at 104% 38%,transparent 0 360px,rgba(var(--glow),calc(.07 * var(--glow-k))) 420px,transparent 520px);
  background-size:100% 1px,100% 100%,100% 100%,100% 100%;
}
[data-theme] .process__section,
[data-theme] .about__section{
  background-image:
    linear-gradient(90deg,transparent 8%,rgba(var(--glow),calc(.28 * var(--glow-k))) 50%,transparent 92%),
    radial-gradient(55% 340px at 50% 0%,rgba(var(--glow),calc(.075 * var(--glow-k))),transparent 100%),
    radial-gradient(circle 380px at -4% 42%,transparent 0 378px,rgba(var(--glow),calc(.20 * var(--glow-k))) 379px,transparent 381px),
    radial-gradient(circle 380px at -4% 42%,transparent 0 320px,rgba(var(--glow),calc(.06 * var(--glow-k))) 380px,transparent 480px);
  background-size:100% 1px,100% 100%,100% 100%,100% 100%;
}

/* below desktop there are no margins for the rings to sit in, so they
   would run through the copy — keep only the horizon and the pool */
@media (max-width:1199px){
  [data-theme] .service__section,[data-theme] .contact__section,
  [data-theme] .process__section,[data-theme] .about__section{
    background-image:
      linear-gradient(90deg,transparent 8%,rgba(var(--glow),calc(.28 * var(--glow-k))) 50%,transparent 92%),
      radial-gradient(55% 340px at 50% 0%,rgba(var(--glow),calc(.075 * var(--glow-k))),transparent 100%);
    background-size:100% 1px,100% 100%;
  }
}

/* ---------- Inner-page heroes: the arc on the horizon ---------- */
.breadcrumnd__section{
  position:relative;
  background-image:
    radial-gradient(ellipse 22% 60px at 50% calc(100% - 64px),rgba(var(--glow),calc(.30 * var(--glow-k))),transparent 100%),
    radial-gradient(circle 1100px at 50% calc(100% + 1040px),transparent 0 1098px,rgba(var(--glow),calc(.9 * var(--glow-k))) 1099px,transparent 1101px),
    radial-gradient(circle 1100px at 50% calc(100% + 1040px),transparent 0 1040px,rgba(var(--glow),calc(.10 * var(--glow-k))) 1100px,transparent 1220px),
    radial-gradient(circle 1100px at 50% calc(100% + 1040px),rgba(var(--glow),calc(.05 * var(--glow-k))) 0,transparent 1099px) !important;
  background-repeat:no-repeat !important;
}

/* ---------- The hero eclipse ----------
   A ring of light rises behind the portrait and lights him from
   behind. Two layers on purpose: .ezio-eclipse carries the one-off
   rise on load, the orb inside carries the scroll, so the two
   transforms never fight. */
.banner__thumb .ezio-eclipse{
  /* CENTRED ON HIM: left is his body's centre line, measured from the
     portrait's own pixels (x 620 of 1152 = 53.8%) — not the image's middle,
     which sits off his axis. Width and top were then searched against every
     role word in hero.js and the right rail so the ring clears all of them
     by 45px+ at every width. Re-measure if the portrait image changes. */
  position:absolute;left:53.8%;top:42%;
  width:96%;aspect-ratio:1;
  transform:translate(-50%,0);
  z-index:-1;pointer-events:none;
}
/* past ~1800px the portrait stops growing (820px cap) while the headline
   keeps scaling, so the ring tucks in tighter to keep its clearance */
@media (min-width:1800px){
  .banner__thumb .ezio-eclipse{left:53.8%;top:44%;width:85%}
}
.ezio-eclipse__orb{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse 62% 42% at 50% 0%,rgba(var(--glow),calc(.13 * var(--glow-k))),transparent 70%);
  box-shadow:
    0 -1.5px 0 rgba(var(--glow),calc(.95 * var(--glow-k))),
    0 -10px 30px -8px rgba(var(--glow),calc(.55 * var(--glow-k))),
    0 -30px 90px -30px rgba(var(--glow),calc(.28 * var(--glow-k))),
    inset 0 18px 40px -22px rgba(var(--glow),calc(.55 * var(--glow-k)));
  transform:translateY(calc(var(--hero-p,0) * 14%)) scale(calc(1 + var(--hero-p,0) * .06));
  will-change:transform;
}
/* the hot spot where the rim is brightest */
.ezio-eclipse__orb::before{
  content:"";position:absolute;left:50%;top:-2px;
  width:46%;height:6%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(230,255,242,calc(.85 * var(--glow-k))) 0,
    rgba(var(--glow),calc(.55 * var(--glow-k))) 30%,transparent 72%);
  filter:blur(6px);
}
/* the light catches his outline from behind */
.banner__thumb .ezio-hero-portrait{
  filter:drop-shadow(0 -3px 7px rgba(var(--glow),var(--rim-a)));
}

/* the same back-light on the portrait in the "Let's work together" block */
.ezio-cta-portrait{ filter:drop-shadow(0 -3px 7px rgba(var(--glow),var(--rim-a))) }

/* right edge on the same line as every other block (1381 at 1440) — it sat
   108px short of it, floating in its column */
@media (min-width:992px){
  .pro__mettingthumb{ margin-left:auto;padding-left:0 }
  /* a cut-out portrait stands on the section's floor, as he does in the hero;
     it used to float with its hem sliced off mid-section */
  .project__metting{ padding-bottom:0 !important }
  .project__metting .row > .col-lg-5{ align-self:flex-end }
  .project__metting .pro__metting__content{ padding-bottom:120px }
  .pro__mettingthumb img{ display:block }
}

/* the reveal: only when the script is there to finish it */
html.glow-js .banner__thumb .ezio-eclipse{
  opacity:0;transform:translate(-50%,26%);
  transition:transform 2.4s cubic-bezier(.16,1,.3,1),opacity 1.6s ease;
}
html.glow-js .banner__thumb .ezio-hero-portrait{
  filter:brightness(.12) drop-shadow(0 -2px 8px rgba(var(--glow),0));
  transition:filter 2.2s cubic-bezier(.33,0,.2,1) .35s;
}
html.glow-js.is-lit .banner__thumb .ezio-eclipse{ opacity:1;transform:translate(-50%,0) }
html.glow-js.is-lit .banner__thumb .ezio-hero-portrait{
  filter:brightness(1) drop-shadow(0 -3px 7px rgba(var(--glow),var(--rim-a)));
}


/* ---------- Preloader: the mark inside a ring of light ---------- */
.preloader__matias .matias{
  border:1px solid rgba(var(--glow),calc(.7 * var(--glow-k))) !important;
  padding:0 !important;display:grid !important;place-items:center;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(var(--glow),calc(.2 * var(--glow-k))),transparent 70%);
  box-shadow:0 -8px 40px -8px rgba(var(--glow),calc(.6 * var(--glow-k))),
             inset 0 1px 0 rgba(var(--glow),calc(.6 * var(--glow-k)));
}
.preloader__matias .matias .ezio-mark{ height:auto;width:46%;color:var(--white) }

@media (prefers-reduced-motion:reduce){
  html.glow-js .banner__thumb .ezio-eclipse,
  html.glow-js .banner__thumb .ezio-hero-portrait{ transition:none }
  .ezio-eclipse__orb{ transform:none }
}

/* ==========================================================
   SERVICES — names only (EZIO, 2026-10-08)
   No descriptions, not links: a 3-across board of names. Each
   name rises through its own mask as the rows reveal, a hairline of
   light draws under it, and a green shine passes over the letters —
   once on arrival, again on hover.
   ========================================================== */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--glass-line);
}
.svc{
  position:relative;overflow:hidden;cursor:default;
  display:flex;align-items:baseline;gap:18px;
  padding:38px 24px 38px 0;
  border-bottom:1px solid var(--glass-line);
}
.svc:not(:nth-child(3n+1)){ border-left:1px solid var(--glass-line);padding-left:28px }
.svc__num{
  flex:none;font-size:13px;letter-spacing:.12em;color:var(--base);
  font-variant-numeric:tabular-nums;
}
.svc__name{
  display:inline-block;
  font-size:clamp(20px,1.95vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.1;
  background:linear-gradient(100deg,var(--white) 0 42%,var(--base) 50%,var(--white) 58% 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position 1.1s cubic-bezier(.2,.8,.2,1);
}
.svc:hover .svc__name{ background-position:0 0 }
.svc::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--glow),calc(.9 * var(--glow-k))),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.2,.8,.2,1) var(--d,0s), opacity .6s ease;
}
.svc:hover::after{ transform:scaleX(1) }
/* arrival */
.svc.rv .svc__name{ transform:translateY(115%) }
.svc.rv.is-in .svc__name{
  transform:none;
  transition:transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s), background-position 1.4s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .35s);
  background-position:0 0;
}
.svc.rv.is-in::after{ transform:scaleX(1);opacity:.35 }
@media (max-width:991px){
  .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .svc:not(:nth-child(3n+1)){ border-left:0;padding-left:0 }
  .svc:nth-child(2n){ border-left:1px solid var(--glass-line);padding-left:22px }
}
@media (max-width:575px){
  .svc-grid{ grid-template-columns:1fr }
  .svc:nth-child(2n){ border-left:0;padding-left:0 }
  .svc{ padding:26px 0 }
}

/* ==========================================================
   ROW REVEAL — grids arrive a row at a time (EZIO, 2026-10-08)
   glow.js groups the items of a grid into rows when it scrolls into
   view: row one moves first, every other row 0.3s later, so nothing
   waits for more scrolling. Used by the work cards (home + work
   page), the folder video grids and the services board. Only set by
   the script, so without it everything is simply visible.
   ========================================================== */
.rv{
  opacity:0;transform:translateY(34px);
  transition:opacity .7s ease var(--d,0s), transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
.rv.is-in{ opacity:1;transform:none }

/* ==========================================================
   HERO HEADLINE — the role cut (EZIO, 2026-10-08: "much more powerful")
   hero.js splits each role into letters. They arrive like a title
   card: each letter punches up out of its line, staggered, landing
   with a slight overshoot; the outlined word ignites — the letters
   flash solid green with a bloom, then cool back to the outline —
   and a blade of light cuts across the whole headline. The old word
   leaves the same way it came, upward, blurred. The template's
   looping green sweep is retired.
   ========================================================== */
.banner__content .designers::before{ display:none !important }
.role__cycle{ position:relative }
.role__cycle .hone,
.role__cycle .designers{
  /* the line is a mask: letters rise from below it; the extra room lets
     the bloom and the outline ring breathe without being clipped */
  clip-path:inset(-60% -30% -.3em -30%);
  white-space:nowrap;            /* a word never breaks between its letters */
  transition:none;
}
/* landed: the mask lifts so the ignition bloom spreads freely */
.role__cycle.rc-settled .hone,
.role__cycle.rc-settled .designers{ clip-path:none }
.role__cycle .is-out .hone,.role__cycle.is-out .hone,
.role__cycle.is-out .designers{ opacity:1;transform:none }
.rc-ch{
  display:inline-block;white-space:pre;
  transform:translateY(130%) rotate(7deg);
  transform-origin:0 100%;
  opacity:0;
}
.rc-in .rc-ch{
  transform:none;opacity:1;
  transition:transform .85s cubic-bezier(.17,1.18,.32,1) calc(var(--i) * 38ms),
             opacity .35s ease calc(var(--i) * 38ms);
}
.rc-out .rc-ch{
  transform:translateY(-70%);opacity:0;filter:blur(8px);
  transition:transform .45s cubic-bezier(.6,0,.8,.3) calc(var(--i) * 22ms),
             opacity .45s ease calc(var(--i) * 22ms),
             filter .45s ease calc(var(--i) * 22ms);
}
/* ignition of the outlined word */
.designers .rc-ch.is-hot{
  color:var(--base) !important;
  text-shadow:0 0 22px rgba(var(--glow),calc(.75 * var(--glow-k))),
              0 0 60px rgba(var(--glow),calc(.35 * var(--glow-k))) !important;
}
.designers.rc-in .rc-ch{
  transition:transform .85s cubic-bezier(.17,1.18,.32,1) calc(var(--i) * 38ms),
             opacity .35s ease calc(var(--i) * 38ms),
             color .9s ease, text-shadow .9s ease;
}
/* the blade of light */
.role__cycle::after{
  content:"";position:absolute;top:-6%;bottom:-6%;left:0;width:18%;
  background:linear-gradient(90deg,transparent,rgba(var(--glow),calc(.28 * var(--glow-k))) 45%,rgba(230,255,242,calc(.5 * var(--glow-k))) 50%,rgba(var(--glow),calc(.28 * var(--glow-k))) 55%,transparent);
  mix-blend-mode:screen;transform:translateX(-120%) skewX(-18deg);
  opacity:0;pointer-events:none;
}
.role__cycle.rc-blade::after{ animation:rc-blade .9s cubic-bezier(.5,0,.2,1) forwards }
@keyframes rc-blade{
  0%{ opacity:0;transform:translateX(-120%) skewX(-18deg) }
  15%{ opacity:1 }
  100%{ opacity:0;transform:translateX(620%) skewX(-18deg) }
}
@media (prefers-reduced-motion:reduce){
  .rc-ch,.rc-in .rc-ch,.rc-out .rc-ch{ transform:none !important;opacity:1 !important;filter:none !important;transition:none !important }
  .rv,.svc.rv .svc__name{ opacity:1;transform:none;transition:none }
  .role__cycle::after{ display:none }
}

/* ---------- Theater on a phone (2026-10-08) ----------
   The player takes the film's own shape (--ar from work.js), as large as
   the screen allows under the caption, so a vertical film fills the phone.
   The corner cap shrinks to what Drive's pop-out button needs; this sits
   after the base .drive-cap rule on purpose, so it wins. */
@media (max-width:767px){
  .theater__stage{ width:min(100%, calc((100dvh - 200px) * var(--ar, 1.7778))) }
  .theater__frame{ padding-top:calc(100% / var(--ar, 1.7778)) }
  .drive-cap{ width:46px;height:46px;border-bottom-left-radius:12px }
  .drive-cap__mark{ width:17px }
}

/* ---------- Theater on a phone = a flat full-screen sheet (2026-10-09) ----------
   On EZIO's iPhone, Drive's player kept its controls up and its fullscreen
   button only paused/played. iOS WebKit misroutes taps and fullscreen for a
   video inside composited layers — transforms, backdrop blur, rounded
   clipping — so on phones (portrait, or landscape on a touch screen) the
   player sits on a flat black sheet with none of them: title and buttons in
   a strip at the top, Drive's player filling everything below. Overrides
   the 4:5 box above. */
@media (max-width:767px), (pointer:coarse) and (max-height:500px){
  .theater{ padding:0;place-items:stretch }
  .theater__backdrop{ background:#000;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none }
  .theater__stage{ width:100%;height:100dvh;display:flex;flex-direction:column-reverse }
  .theater__bar{
    flex:none;margin:0;padding:10px 12px;
    flex-direction:row;align-items:center;gap:12px;
    transform:none;transition:opacity .25s ease;
  }
  .theater__title{ margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
  .theater__btn{ width:40px;height:40px }
  .theater__frame{
    flex:1;height:auto;padding-top:0;
    border:0 !important;border-radius:0;overflow:visible;
    box-shadow:none !important;transform:none !important;transition:none;
  }
  /* Drive's pop-out button sits a little lower-left on a full-height
     player; the cap grows to cover all of it */
  .theater .drive-cap{ width:64px;height:60px;border-bottom-left-radius:14px }
}

/* ---------- Work page on a phone: three across (EZIO, 2026-10-08) ----------
   Two big cards a row read oddly on a phone; three small ones show more of
   the roster. The arrow tile goes (the whole card is the link) and the type
   steps down so names fit. */
@media (max-width:575px){
  .work-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important;column-gap:8px;row-gap:18px }
  .work-grid .project__item .content .common__icon{ display:none }
  .work-grid .thumb{ margin-bottom:8px !important }
  .work-grid .project__item .content .left__cont span,
  .work-grid .base{ font-size:8px;margin-bottom:3px !important }
  .work-grid .project__item .content .left__cont h3,
  .work-grid .project__item h3{ font-size:10.5px }
}

/* ---------- Headline effects stay behind EZIO (EZIO, 2026-10-08) ----------
   The blade of light and the green bloom used to cross his portrait. The
   headline box is now only as wide as its words, so the blade sweeps the
   text and stops there, and the portrait sits above the headline layer, so
   any glow that does reach him passes behind him. The portrait ignores
   the pointer, so the buttons under it stay clickable. This replaces the
   earlier rule that lifted the headline above the portrait. */
.role__cycle{ width:max-content;max-width:100% }
.banner__content{ z-index:2 }
.banner__thumb{ z-index:3;pointer-events:none }

/* ==========================================================
   LANGUAGES — EN (main) / FR / AR (i18n.js, 2026-10-08)
   ========================================================== */
/* the switcher, next to the theme button: same 46px circle */
.lang-switch{ position:relative;flex:none;margin-right:10px }
.lang-switch__btn{
  height:46px;min-width:46px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:999px;border:1px solid var(--cusborder);
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bot));
  color:var(--white);cursor:pointer;
  font:600 12px/1 "Inter",sans-serif;letter-spacing:.08em;
  transition:border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.lang-switch__btn svg{ width:17px;height:17px;flex:none }
.lang-switch__btn:hover,.lang-switch.is-open .lang-switch__btn{
  border-color:var(--base);color:var(--base);
  box-shadow:0 0 18px -4px rgba(var(--glow),calc(.55 * var(--glow-k)));
}
.lang-switch__btn:focus-visible{ outline:2px solid var(--base);outline-offset:3px }
.lang-switch__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:200;
  min-width:170px;margin:0;padding:6px;list-style:none;
  border-radius:var(--glass-r-sm);
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)),var(--body);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 50px -20px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;
}
.lang-switch.is-open .lang-switch__menu{ opacity:1;visibility:visible;transform:none;transition-delay:0s }
.lang-switch__menu button{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:0;border-radius:8px;background:transparent;
  color:var(--white);font:500 15px/1.2 "Inter","IBM Plex Sans Arabic",sans-serif;
  text-align:start;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.lang-switch__menu button:hover{ background:rgba(var(--glow),calc(.10 * var(--glow-k))) }
.lang-switch__menu button[aria-selected="true"]{ color:var(--base) }
.lang-switch__k{ font-size:11px;letter-spacing:.1em;opacity:.6;min-width:2.2ch }
@media (max-width:575px){
  .lang-switch{ margin-right:0 }
  .lang-switch__btn{ height:40px;min-width:40px;padding:0 9px }
  .lang-switch__btn svg{ display:none }
}

/* ---------- Arabic: its own face, right-to-left ---------- */
html[lang="ar"] body,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6,
html[lang="ar"] p,html[lang="ar"] a,html[lang="ar"] span,html[lang="ar"] li,html[lang="ar"] button,
html[lang="ar"] input,html[lang="ar"] textarea,
html[lang="ar"] .cmn--btn,html[lang="ar"] .common__sub,html[lang="ar"] .ptext{
  font-family:"IBM Plex Sans Arabic","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}
html[lang="ar"] .common__sub,html[lang="ar"] .ptext,html[lang="ar"] .svc__num{ letter-spacing:0 }
html[lang="ar"] .rc-ch{ white-space:pre }
/* the hero keeps its composition: words on the left, EZIO on the right */
html[dir="rtl"] .banner__section .row{ direction:ltr }
html[dir="rtl"] .banner__content{ direction:rtl;text-align:left }
html[dir="rtl"] .banner__content .bn__currently{ direction:rtl }
/* blocks only as wide as their words would hug the right edge in RTL and
   slide behind EZIO — pin the headline and the showreel row to the left */
html[dir="rtl"] .banner__content .role__cycle{ margin-left:0;margin-right:auto }
html[dir="rtl"] .banner__content .video__area{ direction:ltr;justify-content:flex-start }
html[dir="rtl"] .banner__content .video__area .proces{ direction:rtl }
/* the marquees scroll the same way in every language */
html[dir="rtl"] .marquee-wrapper{ direction:ltr }
/* arrows point the way the page reads */
html[dir="rtl"] .bi-arrow-right,html[dir="rtl"] .bi-arrow-left,
html[dir="rtl"] .bi-arrow-up-right{ display:inline-block;transform:scaleX(-1) }
/* bullets sit on the reading side */
html[dir="rtl"] .process__item ul li{ padding-left:0;padding-right:20px }
html[dir="rtl"] .process__item ul li::before{ left:auto;right:0 }
/* services board: column rules on the reading side */
html[dir="rtl"] .svc{ padding:38px 0 38px 24px }
html[dir="rtl"] .svc:not(:nth-child(3n+1)){ border-left:0;border-right:1px solid var(--glass-line);padding-left:24px;padding-right:28px }
@media (max-width:991px){
  html[dir="rtl"] .svc:not(:nth-child(3n+1)){ border-right:0;padding-right:0 }
  html[dir="rtl"] .svc:nth-child(2n){ border-left:0;border-right:1px solid var(--glass-line);padding-right:22px }
}
@media (max-width:575px){
  html[dir="rtl"] .svc:nth-child(2n){ border-right:0;padding-right:0 }
}
/* the header mirrors: the logo keeps the wide gutter, the buttons the narrow one */
html[dir="rtl"] .header-section .container{
  padding-left:clamp(14px,1.8vw,30px);padding-right:clamp(20px,3.8vw,68px);
}
html[dir="rtl"] .lang-switch{ margin-right:0;margin-left:10px }
html[dir="rtl"] .lang-switch__menu{ right:auto;left:0 }