/* ===== 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 */

  /* Height of the fixed nav. nav.js measures the real bar and writes
     --nav-real, because the height moves with base font size, zoom and
     breakpoint - a hard-coded value drifts and leaves a gap or an overlap.
     The 74px here is only the pre-JS fallback. */
  --nav-real:74px;
  --nav-h:var(--nav-real);
}
*{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 16:9 clip in the 2:3 card left ~40% black, which reads as broken. The card
   is a teaser, so it crops to fill; the detail page still shows the full frame. */
.slot video.is-landscape{object-fit:cover;}
/* 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:transparent;
  /* always on: the bar and the header below it are the same flat red, so
     without this line there is nothing separating them at the top */
  border-bottom:1px solid rgba(255,255,255,.45);
  transition:background .35s ease,transform .35s cubic-bezier(.16,1,.3,1);}
/* solid brand red once you leave the top */
#nav.solid{background:var(--red);}
/* reading downward: clear the bar out of the way. it comes straight back on
   any upward scroll, so the CTA is never more than a flick away */
#nav.hide{transform:translateY(-100%);}
/* set on <html> alongside #nav.hide */
html.nav-hidden{--nav-h:0px;}
.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 */
.site-switch{border-color:rgba(255,255,255,.5);}
.site-switch .on{background:#fff;color:var(--black);}
.site-switch a{color:rgba(255,255,255,.75);}
.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. */
.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 .brand,
#nav .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 .navlinks a:not(.nav-cta){color:rgba(255,255,255,.75);}
#nav .navlinks a:not(.nav-cta):hover{color:#fff;}
#nav .nav-cta{color:#fff;border-color:rgba(255,255,255,.5);}
#nav .nav-cta:hover{background:#fff;color:var(--red);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){
  :root{--nav-real:60px;}   /* fallback only; JS measures */
  #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. */
/* flat, not a gradient: the fixed nav is solid var(--red), and any ramp
   underneath it showed as a seam where the two met */
.hero{
  position:relative;color:#fff;
  padding:clamp(7.5rem,16vh,11rem) var(--pad) clamp(3.5rem,8vh,5.5rem);
  background:var(--red);
}
.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 */

/* subhead: says plainly what the poetic H1 implies, and carries the phrase
   people actually type. Sized well under the H1 so it reads as a caption. */
.hero-sub{margin-top:clamp(1rem,2vw,1.5rem);max-width:34ch;
  font-size:var(--t-h4);line-height:1.25;font-weight:400;letter-spacing:-.02em;
  color:rgba(255,255,255,.88);}
@media(max-width:900px){.hero-sub{max-width:none;font-size:var(--body-l);}}

/* 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:var(--nav-h);z-index:500;   /* nav is z-900 */
  transition:top .35s cubic-bezier(.16,1,.3,1);
  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){
  /* 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;}
/* cards past the fold limit; the button below reveals them */
.film-card.over{display:none;}
/* centred and solid: this is the one action in the section, so it should read
   as loudly as the hero CTAs rather than as a footnote */
.film-more{display:flex;justify-content:center;
  margin-top:clamp(2.4rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.8rem);border-top:1px solid var(--line);}
.film-more[hidden]{display:none;}
.film-more .btn{cursor:pointer;font-family:var(--body);
  padding:1.15rem 2.6rem;font-size:var(--body-m);letter-spacing:.01em;}
.film-more .ar{transition:transform .3s;}
.film-more .btn:hover .ar{transform:translateY(3px);}
@media(max-width:600px){
  .film-more .btn{width:100%;justify-content:center;padding:1.05rem 1.4rem;}
}
.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);}

/* ===== CONTACT FORM ===== */
.cform{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);
  padding-top:clamp(2rem,4vw,3rem);}
.cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);}
.cf-field{display:flex;flex-direction:column;gap:.5rem;margin:0;}
.cf-wide{grid-column:1/-1;}
.cf-field label{font-size:var(--label);line-height:1.2;font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3);}
.cf-field input,.cf-field textarea{
  font-family:var(--body);font-size:var(--body-m);line-height:1.5;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:0;
  padding:.85rem 1rem;width:100%;
  transition:border-color .25s,background .25s;}
.cf-field textarea{resize:vertical;min-height:130px;}
.cf-field input:focus,.cf-field textarea:focus{
  outline:none;border-color:var(--red);background:#fff;}
/* off-screen rather than display:none — some bots skip hidden inputs */
.cf-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.cf-foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  margin-top:clamp(1.2rem,2.5vw,1.8rem);}
.cf-foot .btn{cursor:pointer;font-family:var(--body);}
.cf-status{font-size:var(--body-s);line-height:1.4;margin:0;}
.cf-status.err{color:var(--red);}
.cform.sending .btn{opacity:.55;pointer-events:none;}
@media(max-width:760px){.cf-grid{grid-template-columns:1fr;}}

/* ===== CLIENT LOGO STRIP ===== */
/* A marquee rather than a grid: sixteen marks in a static wall reads as a
   directory, while one slow lap reads as a reel - and it fits the strip into
   a band instead of a screenful.
   --logo-scale sizes every mark by the same factor. The PNGs are exported at
   2x and optically area-matched, so halving them keeps a long wordmark and a
   round crest looking the same visual weight; a plain height rule would not. */
.clients{background:var(--panel);border-block:1px solid var(--line);
  padding:clamp(1.5rem,2.6vw,2rem) 0;overflow:hidden;--logo-scale:.4;}
/* a label, not a section heading: this band is a credential line between the
   hero and the work, so it should cost a strip of height, not a screenful */
.clients-lab{padding:0 var(--pad);margin-bottom:clamp(.9rem,1.8vw,1.3rem);
  font-size:var(--label);line-height:1.2;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}

.logo-strip{display:flex;width:max-content;
  /* the marks fade out at both edges instead of being chopped by the viewport */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
/* The gap is wide because the list is short. One lap must be wider than the
   viewport or the duplicate track catches up and the same logo shows twice on
   screen at once, which reads as a bug. Six marks total only 555px at strip
   scale, so the spacing carries the difference; narrow this back toward 5vw
   once there are ten or more. */
.logo-track{display:flex;align-items:center;flex:none;
  gap:clamp(2.4rem,13vw,13rem);padding-right:clamp(2.4rem,13vw,13rem);
  animation:logo-marquee 64s linear infinite;}
/* both laps are the same width, so -100% of one lands exactly on the next */
@keyframes logo-marquee{from{transform:translateX(0);}
  to{transform:translateX(-100%);}}
.logo-strip:hover .logo-track{animation-play-state:paused;}

.logo{flex:none;display:block;}
.logo img{display:block;height:auto;width:calc(var(--w) * var(--logo-scale));
  opacity:.7;transition:opacity .3s ease;}
.logo:hover img{opacity:1;}

@media(max-width:760px){.clients{--logo-scale:.32;}
  .logo-track{animation-duration:48s;}}

@media(prefers-reduced-motion:reduce){
  /* no lap: the strip becomes a static, centred wall and the duplicate goes */
  .logo-strip{width:auto;flex-wrap:wrap;justify-content:center;
    padding:0 var(--pad);-webkit-mask-image:none;mask-image:none;}
  /* flex:none is what lets the moving track stay wider than the viewport;
     released here so the wall can actually wrap instead of being clipped */
  .logo-track{animation:none;flex:1 1 auto;min-width:0;
    flex-wrap:wrap;justify-content:center;
    row-gap:clamp(1.6rem,3vw,2.4rem);padding-right:0;}
  .logo-track[aria-hidden="true"]{display:none;}
  .logo img{opacity:.7;}
}

/* ===== FLOATING WHATSAPP CTA ===== */
/* WhatsApp green and round: this is a platform affordance people recognise on
   sight, so it follows WhatsApp's convention rather than the site's squares. */
.wa-fab{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  z-index:880;display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;box-shadow:0 6px 22px rgba(10,10,10,.30);
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .25s;}
.wa-fab:hover{background:#1FB855;transform:translateY(-2px) scale(1.04);}
.wa-fab svg{width:30px;height:30px;fill:#fff;}
@media(max-width:620px){.wa-fab{width:52px;height:52px;}
  .wa-fab svg{width:27px;height:27px;}}
@media print{.wa-fab{display:none;}}

/* ===== 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;}
/* contact column: an icon sits inline ahead of each line, so the icons label
   the links rather than repeating them in a separate row */
.foot-contact a{display:inline-flex;align-items:center;gap:.65rem;}
.foot-contact svg{width:17px;height:17px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.foot-contact svg .fill{fill:currentColor;stroke:none;}
.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:var(--red);}
.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, with suggestions beside it */
/* ===== FILM PAGE: TWO-COLUMN SHELL ===== */
/* The rail runs the whole height of the page rather than stopping at the
   bottom edge of the film. .fp-rail must stretch for that - a sticky inner
   wrapper inside a column that only fits its content unpins immediately. */
.fp-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  align-items:stretch;background:#0E0E0E;}
.fp-main{min-width:0;background:var(--bg);}
.fp-rail{min-width:0;background:#0E0E0E;color:#fff;
  border-left:1px solid rgba(255,255,255,.14);}
/* Flows with the page rather than sticking: a sticky rail with its own
   max-height becomes a second scroll box inside the page, and the details
   at its foot can only be reached by scrolling the rail instead of the page.
   A player page's rail is simply a long column. */
/* Desktop: the rail pins under the nav and scrolls on its own, so the whole
   list is reachable without the column ever driving the page height. The
   max-width:1000px block below resets this, leaving mobile in normal flow. */
.fp-rail-inner{position:sticky;top:var(--nav-h);
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  padding:1.1rem 1.1rem 1.6rem;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;}
.fp-rail-inner::-webkit-scrollbar{width:8px;}
.fp-rail-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);}
.next-all{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;
  padding:.55rem .1rem;font-size:var(--body-s);font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .25s;}
.next-all:hover{border-color:#fff;}
/* the scrollable rail already reaches everything, so the link is redundant */
@media(min-width:1001px){.next-all{display:none;}}

.fp-stage{padding:0;background:var(--black);display:block;}
/* The stage row is as tall as the suggestions panel. A 9:16 film fills it
   exactly, but the one 16:9 film (Bidyut) is shorter - centre it so it
   letterboxes evenly instead of hanging from the top. */
.fp-player{min-width:0;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;}
.fp-stage video{display:block;width:100%;max-height:82vh;object-fit:contain;background:#000;}


.fp-next-head{font-size:var(--label);line-height:1.2;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);
  margin:0 0 .9rem;}
.next-item{display:flex;gap:.7rem;padding:.4rem .5rem;margin:0 -.5rem;
  align-items:flex-start;transition:background .25s;}
.next-item:hover{background:rgba(255,255,255,.08);}
/* 16:9 like a video player's own suggestion rail. The posters are 9:16, so
   they are centre-cropped rather than pillarboxed - a 9:16 still letterboxed
   into a 16:9 slot is a 50px sliver in a 160px box, which reads as an error. */
.next-thumb{flex:0 0 160px;aspect-ratio:16/9;overflow:hidden;background:#111;}
.next-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;}
.next-meta{display:flex;flex-direction:column;gap:.25rem;min-width:0;}
/* clamped so one long title cannot push the row twice as tall as its
   neighbours and break the rhythm of the rail */
.next-title{font-size:var(--body-s);line-height:1.3;font-weight:600;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;}
.next-cat{font-size:var(--caption);line-height:1.3;color:rgba(255,255,255,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media(max-width:1000px){
  /* not enough width for a rail — it moves under the film */
  .fp-shell{grid-template-columns:1fr;}
  .fp-rail{border-left:0;border-top:1px solid rgba(255,255,255,.14);}
  .fp-rail-inner{position:static;max-height:none;
    padding:1.4rem var(--pad) 1.8rem;}
  .next-item{max-width:520px;}
}

.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;}
/* A site page shows a still where a film shows a player, but the stage around
   it behaves identically: same black backing, same 82vh ceiling, same
   suggestions panel. Every rule is scoped to .fp-player - an unscoped
   `.is-site a{display:block}` also hit the suggestion links in the panel
   beside it and blew their thumbnails up to full width. */
.fp-stage.is-site .fp-player{position:relative;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  max-height:82vh;overflow:hidden;}
.fp-stage.is-site .fp-player a{display:block;width:100%;}
.fp-stage.is-site .fp-player img{display:block;width:100%;height:auto;
  max-height:82vh;object-fit:contain;}

/* ===== FILM PAGE: DISCLAIMER + LONG-FORM BODY ===== */
/* the notice rides in the red header beside the title, so it is read before
   the film rather than after it */
.fp-head.with-note{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(260px,26vw,360px));
  gap:clamp(1.6rem,4vw,4rem);align-items:end;}
.fp-head-main{min-width:0;}
.film-disclaimer{margin:0;border-left:2px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.12);padding:.9rem 1.1rem;
  font-size:var(--caption);line-height:1.55;color:rgba(255,255,255,.82);}
.film-disclaimer strong{color:#fff;font-weight:600;}
@media(max-width:900px){
  .fp-head.with-note{grid-template-columns:1fr;gap:1.8rem;align-items:start;}
}

.fp-detail{border-top:1px solid var(--line);}
.fd-body{max-width:72ch;min-width:0;}
.fd-body h2{font-size:var(--t-h3);line-height:1.15;margin-top:clamp(2.2rem,4vw,3rem);}
.fd-body h2:first-child{margin-top:0;}
.fd-body p{margin-top:1rem;font-size:var(--body-m);line-height:1.65;color:var(--ink-2);}
.fd-scenes,.fd-list{margin-top:1.2rem;padding-left:0;list-style:none;}
.fd-scenes li,.fd-list li{position:relative;padding-left:2.4rem;margin-top:.8rem;
  font-size:var(--body-s);line-height:1.6;color:var(--ink-2);}
.fd-scenes{counter-reset:scene;}
.fd-scenes li{counter-increment:scene;}
.fd-scenes li::before{content:counter(scene,decimal-leading-zero);
  position:absolute;left:0;top:.1rem;
  font-family:var(--display);font-size:var(--label);font-weight:600;
  letter-spacing:.02em;color:var(--red);}
.fd-list li::before{content:"";position:absolute;left:.35rem;top:.62rem;
  width:6px;height:6px;background:var(--red);}
.fd-scenes li strong,.fd-list li strong{color:var(--ink);font-weight:600;}
.fd-details{margin-top:0;border-top:1px solid var(--line);}
.fd-sec-body > .fd-details{border-top:0;}
.fd-details dt{float:left;clear:left;width:120px;padding:.7rem 0;
  font-size:var(--label);font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-3);}
.fd-details dd{margin:0;padding:.7rem 0;padding-left:132px;
  border-bottom:1px solid var(--line);
  font-size:var(--body-s);line-height:1.5;color:var(--ink-2);}
.fd-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,2.8rem);}
@media(max-width:600px){
  .fd-details dt{float:none;width:auto;padding-bottom:0;}
  .fd-details dd{padding-left:0;padding-top:.2rem;}
}
/* expandable article sections: the FAQ affordance, but not the FAQ card.
   The global details{} rules give a grey panel, inset padding and small text,
   which suit short answers and fight long-form prose - undone here. */
.fd-sec{border-bottom:1px solid var(--line);background:none;overflow:visible;}
.fd-sec > .fd-sec-body > p{padding:0;font-size:var(--body-m);line-height:1.65;
  max-width:none;}
.fd-sec > .fd-sec-body > ol,
.fd-sec > .fd-sec-body > ul,
.fd-sec > .fd-sec-body > div{padding:0;}
.fd-sec > summary{list-style:none;cursor:pointer;display:flex;
  justify-content:space-between;align-items:center;gap:1.5rem;
  padding:clamp(1.1rem,2vw,1.5rem) 0;}
.fd-sec > summary::-webkit-details-marker{display:none;}
.fd-sec > summary h2{margin:0;font-size:var(--t-h3);line-height:1.15;}
.fd-sec > summary .m{flex-shrink:0;width:14px;height:14px;position:relative;
  font-size:0;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.fd-sec > summary .m::before,.fd-sec > summary .m::after{content:"";
  position:absolute;top:6px;width:9px;height:1.5px;background:var(--red);}
.fd-sec > summary .m::before{left:0;transform:rotate(45deg);}
.fd-sec > summary .m::after{right:0;transform:rotate(-45deg);}
.fd-sec[open] > summary .m{transform:rotate(180deg);}
.fd-sec-body{padding-bottom:clamp(1.2rem,2.5vw,1.8rem);}
.fd-sec-body > p:first-child{margin-top:0;}
.fd-body h2{margin-top:0;}

.fd-faq{margin-top:0;display:flex;flex-direction:column;gap:.7rem;}
.fd-faq details{background:var(--panel);}
@media(max-width:760px){
  .fd-scenes li,.fd-list li{padding-left:1.9rem;}
}

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