/* ===== FONTS ===== */
@font-face{
  font-family:'Sora';
  src:url('../fonts/Sora-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ===== TOKENS ===== */
:root{
  --bg:#FFFFFF;
  --red:#E31E24;
  --red-deep:#8E1116;
  --black:#0A0A0A;
  --panel:#F4F5F7;
  --panel-2:#EDEEF1;
  --ink:#151515;
  --ink-2:#6B6F76;
  --ink-3:#9AA0A6;
  --line:#E5E7EA;
  /* square everywhere — no rounded corners on any section, card, chip or button */
  --r:0;
  --r-lg:0;
  --r-img:0;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --sec:clamp(4.5rem,10vw,9rem);

  --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* SORA — display scale. px targets: 96 / 80 / 64 / 56 / 44 / 32 / 24
     clamp() floors them for small screens; the max is the spec value. */
  --d-xl:clamp(2.75rem,6.2vw,6rem);      /* Display XL  96 / .95 / 600 */
  --d-l:clamp(2.5rem,5.4vw,5rem);        /* Display L   80 / .98 / 600 */
  --d-m:clamp(2.1rem,4.4vw,4rem);        /* Display M   64 / 1.00 / 600 */
  --t-h1:clamp(2rem,3.9vw,3.5rem);       /* H1          56 / 1.05 / 600 */
  --t-h2:clamp(1.7rem,3vw,2.75rem);      /* H2          44 / 1.10 / 600 */
  --t-h3:clamp(1.35rem,2.2vw,2rem);      /* H3          32 / 1.15 / 500 */
  --t-h4:clamp(1.15rem,1.6vw,1.5rem);    /* H4          24 / 1.20 / 500 */

  /* INTER — text scale. px: 20 / 17 / 15 / 15 / 12 / 12 */
  --body-l:1.25rem;                      /* Body Large  20 / 1.55 / 400 */
  --body-m:1.0625rem;                    /* Body Medium 17 / 1.55 / 400 */
  --body-s:.9375rem;                     /* Body Small  15 / 1.50 / 400 */
  --btn:.9375rem;                        /* Button      15 / 1.00 / 500 */
  --label:.75rem;                        /* Label       12 / 1.20 / 500 */
  --caption:.75rem;                      /* Caption     12 / 1.40 / 400 */
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:var(--body-m);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* hidden first as the fallback: browsers that know `clip` take it, and clip
     does not create a scroll container, which is what keeps sticky working */
  overflow-x:hidden;overflow-x:clip;
}
body.is-loading{overflow:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--red);color:#fff;}

/* ===== TYPE ===== */
h1,h2,h3,h4,.display{font-family:var(--display);letter-spacing:-.03em;}
h1{font-size:var(--d-xl);line-height:.95;font-weight:600;}
h2{font-size:var(--d-l);line-height:.98;font-weight:600;}
h2.d-m{font-size:var(--d-l);line-height:.98;}
h3{font-size:var(--t-h3);line-height:1.15;font-weight:500;letter-spacing:-.02em;}
h4{font-size:var(--t-h4);line-height:1.2;font-weight:500;letter-spacing:-.02em;}
.lede{font-size:var(--body-m);line-height:1.55;color:var(--ink-2);max-width:52ch;}
.caption{font-size:var(--caption);line-height:1.4;font-weight:400;color:var(--ink-3);}
h1 em,h2 em,h3 em,h4 em{font-style:normal;color:var(--red);}

/* ===== IMAGE SLOT (developer marker — deleted when real media lands) ===== */
.slot{
  background:var(--panel-2);border-radius:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.slot-label{
  font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;padding:.6rem 1rem;
}
.slot-label b{display:block;color:var(--ink-2);font-weight:500;margin-bottom:.35rem;}

/* --- placeholder media ---------------------------------------------------
   Swap each <img>/<video> src for the real asset. The .slot-label badge
   still carries the original brief; delete the rule below to hide them all. */
.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;}
/* a landscape clip in a portrait frame is letterboxed rather than cropped */
.slot video.is-landscape{object-fit:contain;background:#000;}
/* inner-content parallax: media is taller than its frame so it can drift
   inside it as the card moves through the viewport */
.fthumb img,.fthumb video{
  height:118%;top:-9%;bottom:auto;will-change:transform;}
/* Cards carry no text over the image. The briefs stay in the DOM so you can
   still see which asset each slot wants — add class="briefs" to <body> to
   reveal them while swapping, remove it to go back to clean cards. */
.slot-label{display:none;}
body.briefs .slot-label{
  display:block;position:absolute;left:0;bottom:0;z-index:2;text-align:left;
  background:rgba(10,10,10,.72);color:rgba(255,255,255,.82);
  padding:.42rem .6rem;max-width:100%;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
body.briefs .slot-label b{color:#fff;}

/* ===== EYEBROW PILL ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--panel);border-radius:0;padding:.45rem .9rem;
  font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.02em;color:var(--ink);
}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--red);flex-shrink:0;}
.eyebrow + h2{margin-top:1.2rem;}

/* ===== ARROW LINK ===== */
.alink{display:inline-flex;flex-direction:column;gap:.45rem;align-items:flex-start;}
.alink .row{display:inline-flex;align-items:center;gap:.9rem;
  font-size:var(--btn);line-height:1;font-weight:500;}
.alink .ar{font-size:1rem;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.alink:hover .ar{transform:translate(3px,-3px);}
.alink .mk{display:flex;align-items:center;gap:4px;}
.alink .mk::before{content:"";width:3px;height:3px;background:var(--red);}
.alink .mk::after{content:"";width:18px;height:2px;background:var(--red);transition:width .35s cubic-bezier(.16,1,.3,1);}
.alink:hover .mk::after{width:30px;}

/* ===== TAG / BUTTON ===== */
.tag{
  display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:0;
  padding:.4rem .85rem;font-size:var(--label);line-height:1.2;font-weight:500;
  color:var(--ink-2);white-space:nowrap;
}
.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:0;
  padding:.9rem 1.6rem;font-size:var(--btn);line-height:1;font-weight:500;
  border:1px solid var(--ink);transition:all .3s;}
.btn.solid{background:var(--red);color:#fff;border-color:var(--red);}
.btn.solid:hover{background:#C41419;border-color:#C41419;}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--red);color:var(--red);}

/* ===== REVEALS ===== */
.r{opacity:1;transform:none;}
body.reveals-ready .r{opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
body.reveals-ready .r.in{opacity:1;transform:none;}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
@media(prefers-reduced-motion:reduce){
  body.reveals-ready .r{opacity:1;transform:none;transition:none;}
  .tick-track{animation:none !important;}
  #loader .ldr-bar::after{animation:none;transform:translateX(0);}
  .hero-meta .rec{animation:none;}
}

/* ===== LOADER ===== */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;}
.ldr-word{font-family:var(--display);font-size:var(--t-h4);line-height:1.2;font-weight:600;letter-spacing:-.02em;}
/* match the nav wordmark: .ai upright and red, not italic and black */
.ldr-word em{font-style:normal;color:var(--red);}
.ldr-bar{width:110px;height:2px;background:var(--line);overflow:hidden;border-radius:0;}
.ldr-bar::after{content:"";display:block;height:100%;background:var(--red);
  transform:translateX(-100%);animation:ldrFill 1.7s cubic-bezier(.6,0,.2,1) forwards;}
@keyframes ldrFill{to{transform:translateX(0);}}
.ldr-count{font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.1em;color:var(--ink-3);}
.ldr-count b{font-weight:500;color:var(--red);}

/* ===== NAV ===== */
#nav{position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem var(--pad);
  background:rgba(255,255,255,0);border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;}
#nav.solid{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);}
.brand{font-family:var(--display);font-size:var(--t-h4);line-height:1.2;font-weight:600;letter-spacing:-.025em;}
.brand em{font-style:normal;color:var(--red);}
/* ===== SITE SWITCH (.ai / .com) ===== */
.brand-group{display:flex;align-items:center;gap:.7rem;min-width:0;}
.site-switch{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  font-size:var(--label);line-height:1;font-weight:500;letter-spacing:.01em;
  transition:border-color .4s ease;}
.site-switch span,.site-switch a{display:inline-flex;align-items:center;
  padding:.34rem .5rem;transition:background .25s,color .25s;}
.site-switch .on{background:var(--red);color:#fff;cursor:default;}
.site-switch a{color:var(--ink-2);}
.site-switch a:hover{background:var(--panel);color:var(--ink);}
/* over the red hero the filled state would vanish, so it inverts to white */
#nav:not(.solid) .site-switch{border-color:rgba(255,255,255,.5);}
#nav:not(.solid) .site-switch .on{background:#fff;color:var(--black);}
#nav:not(.solid) .site-switch a{color:rgba(255,255,255,.75);}
#nav:not(.solid) .site-switch a:hover{background:rgba(255,255,255,.15);color:#fff;}

/* ===== LOGOMARK ===== */
/* sized in em so it tracks the wordmark at every breakpoint. Decorative:
   the text beside it already carries the name for screen readers. */
.brand,.ldr-word{display:inline-flex;align-items:center;gap:.5rem;}
.brand .mark,.ldr-word .mark{height:1.25em;width:auto;flex-shrink:0;
  transition:filter .4s ease;}
/* the mark is near-black on transparent, so over the red hero it is knocked
   out to white — the same move .brand em makes. */
#nav:not(.solid) .brand .mark{filter:brightness(0) invert(1);}

.navlinks{display:flex;gap:1.9rem;align-items:center;
  font-size:var(--btn);line-height:1;font-weight:500;}
.navlinks a{color:var(--ink);transition:opacity .25s,color .4s ease,border-color .4s ease,background .3s;}
.navlinks a:not(.nav-cta):hover{color:var(--red);opacity:1;}
.nav-cta{border:1px solid var(--red);color:var(--red);padding:.6rem 1.1rem;transition:all .3s;}
.nav-cta:hover{background:var(--red);color:#fff;}
/* over the red hero, before the nav goes solid */
/* the em must be named explicitly: .brand em sets red directly on it, and a
   rule that matches an element always beats a colour inherited from .brand,
   whatever the specificity. Red on the red hero left the ampersand invisible. */
#nav:not(.solid) .brand,
#nav:not(.solid) .brand em{color:#fff;}
/* links sit at 75% so hover has somewhere to go. The plain
   .navlinks a:not(.nav-cta):hover rule above cannot reach here — an #id
   outweighs it — so the hover state has to be restated at this specificity.
   Red is not an option on the red field anyway: it would vanish, not respond. */
#nav:not(.solid) .navlinks a:not(.nav-cta){color:rgba(255,255,255,.75);}
#nav:not(.solid) .navlinks a:not(.nav-cta):hover{color:#fff;}
#nav:not(.solid) .nav-cta{color:#fff;border-color:rgba(255,255,255,.5);}
#nav:not(.solid) .nav-cta:hover{background:#fff;color:var(--black);border-color:#fff;}
.brand,.brand em{transition:color .4s ease;}
/* below ~520px the wordmark + switch + CTA stop fitting on one line and the
   CTA wraps, so all three tighten together rather than any one being dropped */
@media(max-width:520px){
  .brand-group{gap:.45rem;}
  .brand{font-size:.86rem;}
  .site-switch span,.site-switch a{padding:.3rem .38rem;}
  .nav-cta{white-space:nowrap;padding:.5rem .7rem;font-size:.8rem;}
  .navlinks{gap:.6rem;}
}
@media(max-width:860px){
  #nav{padding:.9rem var(--pad);}
  .brand{font-size:1rem;white-space:nowrap;}
  .navlinks{gap:1rem;}
  .navlinks a:not(.nav-cta){display:none;}
}
/* On the narrowest phones the filled half of the switch only says "you are
   here", which the wordmark already implies. Dropping it buys ~28px and
   leaves the half that actually does something. */
@media(max-width:360px){
  .site-switch .on{display:none;}
}
@media(max-width:380px){
  /* the page gutter is generous for reading but costs the nav 40px it needs */
  #nav{padding-left:.85rem;padding-right:.85rem;}
  .brand{gap:.32rem;}
  .brand .mark{height:1.1em;}
  /* group + CTA measured 293px against 293px of room at 320w — the switch
     gives back the ~13px that stops them touching */
  .brand-group{gap:.3rem;}
  .site-switch span,.site-switch a{padding:.26rem .28rem;}
  .brand{font-size:.8rem;}
  .nav-cta{padding:.5rem .6rem;font-size:.75rem;}
}

/* ===== SECTION SHELL ===== */
/* .62 because adjacent sections stack top+bottom padding — keeps the visible
   gap between sections at ~1.25x --sec rather than 2x */
section{padding:calc(var(--sec)*.62) var(--pad);scroll-margin-top:72px;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;}
.sec-head h2{margin-top:1.1rem;}

/* ===== HERO — red gradient field ===== */
/* Two gradient layers only — a soft bloom over a red→deep-red ramp. It stays
   in brand red rather than crashing to black, and carries no shader canvas,
   no scrim and no backdrop-blur, so the weight is paint-only. */
.hero{
  position:relative;color:#fff;
  padding:clamp(7.5rem,16vh,11rem) var(--pad) clamp(3.5rem,8vh,5.5rem);
  background:
    radial-gradient(120% 90% at 8% -10%,rgba(255,96,80,.42) 0%,transparent 60%),
    linear-gradient(158deg,var(--red) 0%,#C41419 46%,var(--red-deep) 100%);
}
.hero ::selection{background:#fff;color:var(--red);}
/* meta row — flat label, replaces the blurred pill */
.hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;
  font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.72);}
.hero-meta span{display:inline-flex;align-items:center;gap:.55rem;}
/* white, not red — a red marker on the red field would disappear */
.hero-meta .rec{width:6px;height:6px;background:#fff;flex-shrink:0;
  animation:blink 1.6s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

.hero h1{margin-top:clamp(1.6rem,3vw,2.4rem);color:#fff;}
.hero h1 em{font-style:normal;color:#fff;} /* same reason as the marker above */

/* rule, then copy left / actions right, both sitting on the same baseline */
.hero-foot{margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid rgba(255,255,255,.28);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.6rem,4vw,4rem);align-items:end;}
.hero-entity{max-width:62ch;font-size:var(--body-s);line-height:1.6;
  color:rgba(255,255,255,.78);}
.hero-entity strong{color:#fff;font-weight:600;}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;}
/* inverted pair: red-on-white would vanish, so solid goes white and ghost
   takes a plain white hairline — no blur backdrop needed without the shader */
.hero .btn.solid{background:#fff;color:var(--black);border-color:#fff;}
.hero .btn.solid:hover{background:rgba(255,255,255,.86);color:var(--black);}
.hero .btn.ghost{background:none;color:#fff;border-color:rgba(255,255,255,.6);}
.hero .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;}
@media(max-width:900px){
  .hero-foot{grid-template-columns:1fr;align-items:start;}
}

/* ===== WHY AI (centred statement) ===== */
.why{text-align:center;}
.why h2{margin:1.2rem auto 0;max-width:18ch;}
.why .lede{margin:1.3rem auto 0;max-width:44ch;}
.tools{margin-top:clamp(2rem,4vw,2.6rem);display:flex;gap:.45rem;
  justify-content:center;flex-wrap:wrap;align-items:center;}
/* the label stays quiet — the model names are the point of the row */
.tools .tl{font-size:var(--label);line-height:1.2;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  margin-right:.55rem;}
/* filled, not outlined: these are the credibility line, and hairline-on-white
   left them reading lighter than the body copy above them. Same ink fill the
   card category chips already use, so it stays inside the existing system. */
.tools .tag{background:var(--ink);border-color:var(--ink);color:#fff;
  padding:.5rem 1rem;font-size:var(--btn);font-weight:500;letter-spacing:-.01em;}

/* ===== WHY LIST (3 pillars) ===== */
.why-list{padding-top:0;}
/* icon over title, hairline rules between the columns */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.why-item{border-left:1px solid var(--line);padding:0 clamp(1.5rem,3.5vw,3.5rem);}
.why-item:first-child{border-left:0;padding-left:0;}
.pill-icon{width:clamp(70px,6vw,96px);height:auto;color:var(--red);
  display:block;margin-bottom:clamp(1.6rem,3vw,2.6rem);}
.why-item h3{font-size:var(--t-h3);line-height:1.2;font-weight:500;max-width:16ch;}
.why-item p{margin-top:1rem;color:var(--ink-2);font-size:var(--body-s);line-height:1.5;max-width:32ch;}
@media(max-width:800px){
  .why-grid{grid-template-columns:1fr;gap:2.6rem;}
  .why-item{border-left:0;padding:0;}
}

/* ===== CARDS (films + services share this format) ===== */
/* chip row -> title -> optional description, image 4:3, View on hover */
.card-chip,.fmeta .cat,.sbody .idx,.strip-cap .cat,.fp-head .cat{
  display:inline-flex;align-items:center;background:var(--ink);color:#fff;
  font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.01em;
  padding:.34rem .62rem;}
.card-view{position:absolute;top:50%;right:1.1rem;z-index:3;
  transform:translateY(-50%) translateX(10px);opacity:0;
  background:var(--red);color:#fff;padding:.65rem 1rem;
  font-size:var(--btn);line-height:1;font-weight:500;
  display:inline-flex;align-items:center;gap:.55rem;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);}
.film-card:hover .card-view{opacity:1;transform:translateY(-50%) translateX(0);}
.card-view .ar{transition:transform .3s;}
.film-card:hover .card-view .ar{transform:translateX(4px);}
/* no hover on touch — show it outright */
@media(hover:none){.card-view{opacity:1;transform:translateY(-50%);}}

.film-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem);
  position:sticky;top:72px;z-index:500;      /* 72px = nav height; nav is z-900 */
  background:var(--bg);
  /* bleed to the section edges so cards never show beside the pinned row */
  margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
  padding:.9rem var(--pad);
  border-bottom:1px solid var(--line);}
@media(max-width:860px){
  .film-filters{top:60px;}                   /* shorter nav on small screens */
}
.chip{border:1px solid var(--line);background:none;
  padding:.45rem 1rem;font-family:var(--body);font-size:var(--label);line-height:1.2;font-weight:500;
  color:var(--ink-2);cursor:pointer;transition:all .25s;}
.chip:hover{border-color:var(--red);color:var(--red);}
.chip.on{background:var(--red);border-color:var(--red);color:#fff;}

.film-grid{margin-top:1.8rem;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(2.5rem,4vw,3.5rem) 6px;}
@media(max-width:1100px){.film-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.film-grid{grid-template-columns:repeat(2,1fr);}}

.film-card{display:block;position:relative;}
/* set by the filter chips in index.html */
.film-card.hidden{display:none;}
/* 2/3 rather than the sources' native 9/16 — a full-height 9:16 card made the
   grid very tall. cover crops ~8% off the top and bottom, which on these clips
   mostly takes letterbox bar rather than picture. */
.film-card .fthumb{aspect-ratio:2/3;}
.fmeta{margin-top:1rem;}
.fmeta h3{margin-top:.55rem;font-size:var(--body-m);line-height:1.3;
  font-family:var(--body);font-weight:600;letter-spacing:-.01em;}
.spec-tag{position:absolute;top:0;left:0;z-index:4;
  background:var(--red);color:#fff;padding:.36rem .7rem;
  font-size:var(--label);line-height:1.2;font-weight:500;}
.film-note{margin-top:2.4rem;font-size:var(--body-s);line-height:1.5;color:var(--ink-3);}
.film-note a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}


/* ===== SERVICES — plain card grid ===== */
.svc-grid{margin-top:clamp(2.5rem,5vw,4rem);display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.5vw,2rem);}
.svc{background:var(--panel);color:var(--ink);position:relative;
  padding:clamp(1.5rem,2.6vw,2.2rem);}
/* number and title share a line, description spans both — no extra markup */
.sbody{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;
  align-items:baseline;}
.sbody .idx{grid-row:1;grid-column:1;background:none;color:var(--ink-3);padding:0;
  font-family:var(--display);font-size:var(--t-h4);line-height:1.2;font-weight:500;}
.sbody h3{grid-row:1;grid-column:2;font-size:var(--t-h4);line-height:1.2;
  font-weight:500;letter-spacing:-.02em;color:var(--ink);
  border-left:1px solid var(--line);padding-left:1.1rem;}
.sbody p{grid-column:2;margin-top:.7rem;padding-left:1.1rem;
  color:var(--ink-2);font-size:var(--body-s);line-height:1.5;max-width:44ch;}
@media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr;}
  .sbody p{max-width:none;}
}


/* ===== ENGAGE ===== */
.eng-grid{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.2rem);}
.eng{background:var(--panel);border-radius:0;padding:clamp(1.5rem,2.5vw,2.2rem);
  min-height:clamp(150px,16vw,195px);display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;}
.eng .k{font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.02em;color:var(--ink-3);}
.eng p{font-family:var(--display);font-size:var(--t-h4);line-height:1.2;
  font-weight:500;letter-spacing:-.02em;}
.eng p strong{font-weight:600;}
@media(max-width:800px){.eng-grid{grid-template-columns:1fr;}.eng{min-height:0;gap:1.2rem;}}

/* ===== FAQ ===== */
.faq-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start;}
/* heading pins to the top while the questions scroll past it */
.faq-head{position:sticky;top:110px;align-self:start;}
.faq-wrap{display:flex;flex-direction:column;gap:.7rem;}
details{background:var(--panel);border-radius:0;overflow:hidden;}
summary{list-style:none;cursor:pointer;padding:1.2rem 1.4rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  font-size:var(--body-m);line-height:1.55;font-weight:400;}
summary::-webkit-details-marker{display:none;}
summary .m{flex-shrink:0;width:14px;height:14px;position:relative;
  transition:transform .35s cubic-bezier(.16,1,.3,1);font-size:0;}
summary .m::before,summary .m::after{content:"";position:absolute;top:6px;
  width:9px;height:1.5px;background:var(--red);}
summary .m::before{left:0;transform:rotate(45deg);}
summary .m::after{right:0;transform:rotate(-45deg);}
details[open] summary .m{transform:rotate(180deg);}
details p{padding:0 1.4rem 1.35rem;color:var(--ink-2);
  font-size:var(--body-s);line-height:1.5;max-width:58ch;}
@media(max-width:860px){
  .faq-grid{grid-template-columns:1fr;gap:2rem;}
  .faq-head{position:static;}
}

/* ===== CONTACT ===== */
.contact{padding-bottom:clamp(2.5rem,5vw,4rem);}

.contact-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,5vw,5rem);align-items:end;}
.contact-inner h2{max-width:18ch;}
@media(max-width:900px){.contact-inner{grid-template-columns:1fr;gap:2.6rem;}}
.contact-links{display:flex;flex-direction:column;gap:.6rem;font-size:var(--body-s);line-height:1.5;}
.contact-links a,.contact-links span{display:flex;gap:.9rem;align-items:baseline;}
.contact-links a:hover{color:var(--red);}
.contact-links .lab{width:56px;flex-shrink:0;
  font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.02em;color:var(--ink-3);}

/* ===== FOOTER ===== */
/* ===== FOOTER ===== */
footer{background:var(--red);color:#fff;overflow:hidden;
  padding:clamp(3.5rem,7vw,6rem) var(--pad) clamp(1.8rem,3vw,2.4rem);}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1.2fr;
  gap:clamp(2rem,5vw,5rem);align-items:start;}
.foot-brand p{margin-top:.55rem;color:rgba(255,255,255,.78);font-size:var(--body-s);line-height:1.5;}
.foot-brand p:first-of-type{margin-top:0;}
/* wordmark spans the full footer width — vw sizing so it always fills edge to edge */
.foot-wordmark{display:block;margin-top:clamp(3rem,7vw,6rem);
  font-family:var(--display);font-weight:700;color:#fff;
  /* derived from the real content width (viewport minus the page gutters),
     with a little slack for the scrollbar, so it fills without overflowing */
  font-size:calc((100vw - 2 * var(--pad) - 20px) / 8.15);
  line-height:.82;letter-spacing:-.045em;white-space:nowrap;}
.foot-wordmark em{font-style:normal;color:#fff;}
.foot-col{display:flex;flex-direction:column;gap:.75rem;
  font-size:var(--body-s);line-height:1.5;}
.foot-col a{color:#fff;transition:opacity .25s;width:fit-content;}
.foot-col a:hover{opacity:.65;}
.foot-base{margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.28);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:var(--caption);line-height:1.4;color:rgba(255,255,255,.72);}
footer .sig i{font-style:normal;color:#fff;}
footer ::selection{background:#fff;color:var(--red);}
@media(max-width:800px){.foot-top{grid-template-columns:1fr 1fr;gap:2.4rem;}
  .foot-brand{grid-column:1/-1;}
  .foot-wordmark{font-size:calc((100vw - 2 * var(--pad) - 12px) / 8.5);}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr;}}

/* ===== FILM PAGE ===== */
/* Paths inside this file resolve against the document, so /films/*.html
   re-declares the two @font-face rules with ../ prefixes. Everything else
   here is path-free and shared. */
.fp-head{position:relative;color:#fff;
  padding:clamp(7rem,14vh,9.5rem) var(--pad) clamp(2.5rem,5vw,4rem);
  background:
    radial-gradient(120% 90% at 8% -10%,rgba(255,96,80,.42) 0%,transparent 60%),
    linear-gradient(158deg,var(--red) 0%,#C41419 46%,var(--red-deep) 100%);}
.fp-head ::selection{background:#fff;color:var(--red);}
.fp-crumb{display:flex;align-items:center;gap:.6rem;
  font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.7);}
.fp-crumb a{transition:color .25s;}
.fp-crumb a:hover{color:#fff;}
/* inline-flex ignores vertical margin against the crumb above it */
.fp-head .cat{display:inline-flex;margin-top:1.4rem;
  background:rgba(255,255,255,.16);color:#fff;}
.fp-head h1{margin-top:1rem;font-size:var(--d-l);color:#fff;}
.fp-log{margin-top:1.2rem;max-width:36ch;
  font-family:var(--display);font-size:var(--t-h4);line-height:1.25;
  font-weight:400;letter-spacing:-.02em;color:rgba(255,255,255,.86);}

/* the film itself — dark stage, letterboxed, never cropped */
.fp-stage{padding:0;background:var(--black);}
.fp-stage video{display:block;width:100%;max-height:82vh;object-fit:contain;background:#000;}

.fp-info{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;}
.fp-syn{font-size:var(--body-l);line-height:1.6;color:var(--ink-2);max-width:56ch;}
.fp-syn strong{color:var(--ink);font-weight:600;}
.fp-specs{list-style:none;border-top:1px solid var(--line);}
.fp-specs li{display:flex;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);
  font-size:var(--body-s);line-height:1.4;}
.fp-specs li span{flex:0 0 104px;font-size:var(--label);font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3);padding-top:.15rem;}
.fp-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem;}
@media(max-width:900px){
  .fp-info{grid-template-columns:1fr;gap:2.4rem;}
  .fp-syn{font-size:var(--body-m);}
}

/* live-site entries: a screenshot where a film has a video, plus a small
   badge so the grid says which cards leave the site */
.fthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;}
.live-tag{position:absolute;top:0;left:0;z-index:4;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--ink);color:#fff;padding:.36rem .7rem;
  font-size:var(--label);line-height:1.2;font-weight:500;}
.live-tag::before{content:"";width:6px;height:6px;background:var(--red);
  animation:blink 1.6s infinite;}
/* the site page shows a still, not a player. Full-bleed: a screenshot has no
   "correct" letterbox the way a film does, so it fills the width and crops
   from the bottom if the viewport is shorter than the capture. */
.fp-stage.is-site{background:none;}
.fp-stage.is-site img{display:block;width:100%;height:auto;
  max-height:88vh;object-fit:cover;object-position:top center;}
.fp-stage.is-site a{display:block;}

/* more projects */
.fp-more{border-top:1px solid var(--line);}
.fp-more .film-grid{margin-top:clamp(2rem,4vw,3rem);}