/* =====================================================================
   GRATE MAKE FILMS — template v3 "call sheet"
   White and light grey surfaces, one blue accent, no auto-scrolling,
   hairline rules, a 12-column grid with section labels in the margin.
   ===================================================================== */
/* ---------- fonts: Marfa (licensed, self-hosted) with metric-matched fallbacks ---------- */
@font-face{ font-family:"Marfa"; src:url("fonts/Marfa-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Marfa"; src:url("fonts/Marfa-Variable-Italic.woff2") format("woff2"); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face{ font-family:"Marfa Fallback"; src:local("Arial"); font-weight:100 900; font-style:normal; font-display:swap; size-adjust:107.2228%; ascent-override:89.2534%; descent-override:26.7667%; line-gap-override:0%; }

:root{
  /* palette: white-first, Grate Blue as the single accent */
  --bg:#FFFFFF;
  --bg-alt:#F5F5F6;
  --line:#E4E4E7;
  --line-strong:#0A0A0A;
  --ink:#0A0A0A;
  --text:#212529;
  --muted:#6B7075;
  --accent:#77D0F4;
  --accent-deep:#0E8ED6;
  --error:#D92D20;

  /* type */
  --font-sans:"Marfa","Instrument Sans","Marfa Fallback",Arial,sans-serif;
  --font-mono:var(--font-sans); /* one family site-wide, as on vjus.no */
  --fs-hero:clamp(2.5rem,1.4rem + 4vw,5rem);
  --fs-h1:clamp(2.25rem,1.4rem + 3vw,4rem);
  --fs-h2:clamp(1.75rem,1.2rem + 1.8vw,2.75rem);
  --fs-h3:clamp(1.125rem,1rem + .4vw,1.375rem);
  --fs-lead:clamp(1.125rem,1rem + .5vw,1.375rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-label:.75rem;

  /* rhythm */
  --gutter:clamp(1.25rem,5vw,5em);   /* page padding: header and every non-fluid section */
  --gap:clamp(1rem,2vw,2rem);
  --block:clamp(4rem,8vw,7.5rem);
  --content:1800px;                  /* max width of every non-fluid section */
  --bg-blue-tint:#EEF8FD;              /* very light tint of the brand blue */
  --header-h:100px;
  --radius:4px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 1rem); overflow-x:hidden; overflow-x:clip; }
body{
  margin:0; font-family:var(--font-sans); font-size:var(--fs-body); font-weight:400; line-height:1.55;
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; position:relative; min-width:0;
}
main,section,footer{ min-width:0; max-width:100%; }
img,video,iframe,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; }
::selection{ background:var(--accent); color:var(--ink); }

/* ---------- type ---------- */
.t-hero{ font-size:var(--fs-hero); font-weight:700; line-height:1.02; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.t-h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.05; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.t-h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.1; letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
.t-h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.25; letter-spacing:-.015em; color:var(--ink); }
.t-lead{ font-size:var(--fs-lead); font-weight:400; line-height:1.45; color:var(--text); }
.t-small{ font-size:var(--fs-small); }
.t-label{ font-family:var(--font-mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1.3; color:var(--muted); }
.muted{ color:var(--muted); }
.ink{ color:var(--ink); }
.measure{ max-width:60ch; }
.measure-sm{ max-width:44ch; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter); }
.site-header .container{ max-width:none; }   /* header stays full width */
.section{ padding-block:var(--block); border-top:1px solid var(--line); }
.section--flush{ border-top:0; }
.section--alt{ background:var(--bg-alt); }
.grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(12,minmax(0,1fr)); }
.grid > *{ min-width:0; }
.col-3{ grid-column:span 12; } .col-4{ grid-column:span 12; } .col-6{ grid-column:span 12; } .col-8{ grid-column:span 12; } .col-9{ grid-column:span 12; } .col-12{ grid-column:span 12; }
@media (min-width:900px){
  .col-3{ grid-column:span 3; } .col-4{ grid-column:span 4; } .col-6{ grid-column:span 6; } .col-8{ grid-column:span 8; } .col-9{ grid-column:span 9; }
  .col-start-4{ grid-column:4 / span 9; }
}
/* section label in the margin, with the one accent mark */
.sec-label{ display:flex; align-items:center; gap:.6rem; align-self:start; }
.sec-label::before{ content:""; width:8px; height:8px; background:var(--accent); flex:none; }
@media (min-width:900px){ .sec-label{ position:sticky; top:calc(var(--header-h) + 1.5rem); } }
.sec-head{ display:grid; gap:var(--gap); margin-bottom:clamp(2rem,4vw,3.5rem); }
@media (min-width:900px){ .sec-head{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:end; } .sec-head > p{ justify-self:end; } }
.stack{ display:grid; gap:var(--gap); }
.stack-sm{ display:grid; gap:.75rem; }
.row{ display:flex; flex-wrap:wrap; gap:var(--gap); align-items:center; }
.between{ justify-content:space-between; }
.hr{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- links & buttons ---------- */
.arrow{ display:inline-flex; align-items:center; gap:.4em; font-weight:500; color:var(--ink); }
.arrow::after{ content:"→"; transition:transform .2s; }
.arrow:hover{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; }
.arrow:hover::after{ transform:translateX(.2em); }
.link{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; color:var(--ink); }
.link:hover{ color:var(--accent-deep); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.6rem 1.25rem;
  background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:var(--radius); font-weight:500; font-size:var(--fs-small);
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{ background:#2a2a2e; border-color:#2a2a2e; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--sm{ min-height:44px; padding:.5rem 1.15rem; font-size:1rem; }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:60; height:var(--header-h); background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:0; }
.site-header .container{ height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--gap); }
.header-right{ justify-self:end; display:flex; align-items:center; gap:.75rem; height:100%; }
.header-cta{
  display:none; position:relative; overflow:hidden; isolation:isolate;
  text-transform:uppercase; letter-spacing:.08em; font-size:.8125rem; font-weight:600;
  min-height:48px; padding:.8rem 1.5rem; gap:0;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,color .3s ease,border-color .3s ease;
}
@media (min-width:900px){ .header-cta{ display:inline-flex; } }
.site-header.is-scrolled .header-cta{ opacity:1; transform:none; pointer-events:auto; }
.header-cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); border-radius:inherit; transform:translateY(101%); transition:transform .38s cubic-bezier(.2,.7,.2,1); }
.site-header .header-cta:hover,.site-header .header-cta:focus-visible{ background:var(--accent); border-color:var(--ink); color:#fff; }
.header-cta:hover::before,.header-cta:focus-visible::before{ transform:translateY(0); }
.header-cta .arr{ display:inline-block; width:0; opacity:0; overflow:hidden; white-space:nowrap; transform:translateX(-8px); transition:width .3s ease,opacity .3s ease,transform .3s ease,margin .3s ease; }
.header-cta:hover .arr,.header-cta:focus-visible .arr{ width:1.1em; opacity:1; transform:none; margin-left:.5em; }
.btn--accent{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.btn--accent:hover{ background:#5FC3EC; border-color:#5FC3EC; color:var(--ink); }
.brand{ font-weight:700; letter-spacing:-.02em; color:var(--ink); font-size:1.0625rem; display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; }
@media (max-width:899px){ .site-header .container{ grid-template-columns:1fr auto; } }
.brand img{ height:48px; width:auto; display:block; }
.brand small{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.nav{ display:none; justify-self:center; align-items:center; gap:clamp(1.25rem,2.5vw,2.5rem); font-size:.9375rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.nav a{ position:relative; padding:.35rem 0; color:var(--text); }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav .arrow{ margin-left:.5rem; }
@media (min-width:900px){ .nav{ display:flex; } }
.menu-toggle{ width:52px; height:52px; min-width:52px; min-height:52px; aspect-ratio:1/1; flex:0 0 52px; padding:0; box-sizing:border-box; display:grid; place-items:center; position:relative; z-index:80; align-self:center; border:1.5px solid var(--ink); border-radius:50%; background:#fff; transition:background .3s,transform .4s cubic-bezier(.2,.7,.2,1); }
.menu-toggle:hover{ background:var(--ink); }
.menu-toggle:hover span,.menu-toggle:hover span::before,.menu-toggle:hover span::after{ background:#fff; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--ink); position:relative; border-radius:2px; transition:background .2s; }
.menu-toggle span::before,.menu-toggle span::after{ content:""; position:absolute; left:0; width:22px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s,top .25s,width .25s,background .2s; }
.menu-toggle span::before{ top:-7px; } .menu-toggle span::after{ top:7px; width:14px; }
.menu-toggle:hover span::after{ width:22px; }
.menu-toggle[aria-expanded="true"] span{ background:transparent; }
.menu-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after{ top:0; width:22px; transform:rotate(-45deg); }
/* open state: the cross spins a quarter turn and fills on hover, before the click closes the menu */
.menu-toggle[aria-expanded="true"]:hover{ transform:rotate(90deg) scale(1.08); background:var(--ink); }
.menu-toggle[aria-expanded="true"]:hover span::before,.menu-toggle[aria-expanded="true"]:hover span::after{ background:#fff; }
.menu-toggle[aria-expanded="true"]:active{ transform:rotate(90deg) scale(.96); }
.menu-backdrop{ position:fixed; inset:0; z-index:65; background:rgba(10,10,10,.35); opacity:0; visibility:hidden; transition:opacity .35s ease,visibility 0s .35s; }
.menu-backdrop[data-open="true"]{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.menu{
  position:fixed; top:0; right:0; bottom:0; z-index:70; width:min(520px,100%);
  background:var(--bg); border-left:1px solid var(--line);
  padding:calc(var(--header-h) + 1rem) var(--gutter) var(--gutter);
  display:grid; align-content:space-between; gap:var(--block); overflow:auto;
  transform:translateX(100%); visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s .45s;
}
.menu[data-open="true"]{ transform:none; visibility:visible; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.menu-lists{ display:grid; gap:1.25rem; }
.menu-list{ display:grid; }
.menu-list--primary{ display:none; }                 /* main items live in the header on desktop */
@media (max-width:899px){
  .menu-list--primary{ display:grid; }               /* on phones both lists sit together, main items first */
  .menu-lists{ gap:1rem; }
  .menu-list--secondary{ padding-top:1rem; border-top:2px solid var(--ink); }
  .menu .menu-list a{ font-size:clamp(1.375rem,5.6vw,1.75rem); padding:.45rem 0; }
  .menu{ padding-top:calc(var(--header-h) + .25rem); gap:1.5rem; }
  .menu-meta{ font-size:.9rem; }
}
.menu-list a{ display:block; padding:.55rem 0; font-size:clamp(2.25rem,5vw,3.75rem); font-weight:700; letter-spacing:-.03em; line-height:1.05; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line); transition:padding-left .25s; }
.menu-list a:hover{ padding-left:.35em; }
.menu-list a[aria-current="page"]{ color:var(--accent-deep); }
.menu-meta{ display:grid; gap:.5rem; overflow-wrap:anywhere; }
.menu-close{
  position:absolute; top:calc((var(--header-h) - 52px) / 2); right:var(--gutter); width:52px; height:52px; min-width:52px; min-height:52px; aspect-ratio:1/1; padding:0; box-sizing:border-box;
  display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:50%; background:#fff;
  transition:background .3s,transform .4s cubic-bezier(.2,.7,.2,1);
}
.menu-close span{ display:block; width:22px; height:2px; background:transparent; position:relative; }
.menu-close span::before,.menu-close span::after{ content:""; position:absolute; left:0; top:0; width:22px; height:2px; border-radius:2px; background:var(--ink); transition:background .2s; }
.menu-close span::before{ transform:rotate(45deg); } .menu-close span::after{ transform:rotate(-45deg); }
/* hover: the cross spins a quarter turn and the circle fills, before the click closes the menu */
.menu-close:hover,.menu-close:focus-visible{ transform:rotate(90deg) scale(1.08); background:var(--ink); }
.menu-close:hover span::before,.menu-close:hover span::after,.menu-close:focus-visible span::before,.menu-close:focus-visible span::after{ background:#fff; }
.menu-close:active{ transform:rotate(90deg) scale(.94); }
body.menu-open{ overflow:hidden; }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(3rem,8vh,6rem) clamp(2rem,5vh,4rem); }
.hero .t-hero{ max-width:18ch; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:clamp(1.5rem,3vw,2.5rem); }
.hero-meta span::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--accent); margin-right:.6rem; vertical-align:middle; }
.hero-side{ display:grid; gap:1.25rem; align-content:end; }
@media (min-width:900px){ .hero-side{ padding-top:.75rem; } }

/* ---------- showreel panel ---------- */
.reel{ position:relative; aspect-ratio:16/9; background:var(--bg-alt) center/cover no-repeat; border-radius:var(--radius); overflow:clip; isolation:isolate; }
@media (min-width:900px){ .reel--wide{ aspect-ratio:21/9; } }
.reel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.reel-play{ position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:flex-end; padding:var(--gap); background:linear-gradient(to top,rgba(0,0,0,.35),transparent 40%); }
.reel .pill{ display:inline-flex; align-items:center; gap:.6rem; background:#fff; color:var(--ink); border-radius:999px; padding:.55rem 1rem .55rem .6rem; font-size:var(--fs-small); font-weight:500; transition:transform .2s; }
.reel-play:hover .pill,.reel-sound:hover .pill{ transform:translateY(-2px); }
.reel .pill i{ width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; }
.reel-play .pill svg{ width:12px; height:12px; margin-left:2px; }
.reel-sound .pill svg{ width:14px; height:14px; }

/* ---------- client logos (static) ---------- */
.logo-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:640px){ .logo-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1000px){ .logo-grid{ grid-template-columns:repeat(6,1fr); } }
.logo-grid li{ aspect-ratio:5/3; display:grid; place-items:center; padding:1.25rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.logo-grid img{ max-height:40px; width:auto; filter:grayscale(1); opacity:.7; transition:opacity .2s,filter .2s; }
.logo-grid li:hover img{ filter:none; opacity:1; }

/* ---------- work cards: image, caption below ---------- */
.card{ display:grid; gap:.9rem; align-content:start; color:var(--ink); }
.card figure{ aspect-ratio:4/3; border-radius:var(--radius); overflow:clip; background:var(--bg-alt); }
.card figure img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.card:hover figure img{ transform:scale(1.03); }
.card .card-title{ font-size:var(--fs-h3); font-weight:600; letter-spacing:-.015em; line-height:1.25; }
.card:hover .card-title{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; }
.card .card-meta{ display:flex; justify-content:space-between; gap:1rem; }
.card[hidden]{ display:none; }
.card-grid{ display:grid; gap:clamp(1.5rem,3vw,2.5rem) var(--gap); grid-template-columns:1fr; }
@media (min-width:640px){ .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.card-grid--2{ grid-template-columns:1fr; }
@media (min-width:700px){ .card-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- manual rail (the only horizontal component) ---------- */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:var(--gap); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:none; cursor:grab;
}
.rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ flex:0 0 clamp(260px,30vw,420px); scroll-snap-align:start; }
.rail-controls{ display:flex; align-items:center; gap:.75rem; margin-top:var(--gap); }
.rail-progress{ flex:1; height:1px; background:var(--line); position:relative; overflow:hidden; }
.rail-progress span{ position:absolute; inset:0; background:var(--ink); transform-origin:left; transform:scaleX(var(--progress,0)); transition:transform .12s linear; }
.rail-btn{ width:40px; height:40px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; transition:background .2s,color .2s,opacity .2s; }
.rail-btn:hover{ background:var(--ink); color:#fff; }
.rail-btn[disabled]{ opacity:.25; pointer-events:none; }
.rail-btn svg{ width:16px; height:16px; }

/* ---------- numbered lists (services, process, values) ---------- */
.num-list{ border-top:1px solid var(--line); }
.num-row{ display:grid; gap:.75rem var(--gap); padding-block:clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--line); grid-template-columns:3rem 1fr; }
.num-row .num{ font-family:var(--font-mono); font-size:var(--fs-label); color:var(--muted); padding-top:.5rem; }
.num-row .num{ grid-column:1; grid-row:1; }
.num-row .t-h3{ grid-column:2; }
.num-row .body,.num-row .side{ grid-column:2; }
.num-row .body{ display:grid; gap:.6rem; }
.num-row .body p{ max-width:56ch; }
.num-row ul{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; color:var(--muted); font-size:var(--fs-small); }
.num-row ul li::before{ content:"—"; margin-right:.4rem; color:var(--line-strong); }
.num-row .side{ padding-top:.25rem; }
@media (min-width:900px){
  .num-row{ grid-template-columns:3rem minmax(0,1.1fr) minmax(0,1.4fr) auto; align-items:start; }
  .num-row .t-h3{ grid-column:2; grid-row:1; }
  .num-row .body{ grid-column:3; grid-row:1; }
  .num-row .side{ grid-column:4; grid-row:1; justify-self:end; padding-top:.35rem; }
}

/* three-column grid of short items */
.cols{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:700px){ .cols{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cols-2{ grid-template-columns:1fr; }
@media (min-width:700px){ .cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.item{ display:grid; gap:.6rem; align-content:start; padding-top:1rem; border-top:1px solid var(--line); }
.item p{ color:var(--muted); font-size:var(--fs-small); }
.item ul{ color:var(--muted); font-size:var(--fs-small); display:grid; gap:.25rem; }
.item ul li::before{ content:"—"; margin-right:.4rem; color:var(--line-strong); }

/* ---------- numbers ---------- */
.numbers{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
@media (min-width:800px){ .numbers{ grid-template-columns:repeat(4,1fr); } }
.numbers li{ padding-top:1rem; border-top:1px solid var(--line-strong); display:grid; gap:.4rem; }
.numbers .val{ font-size:clamp(2.25rem,1.5rem + 2.5vw,3.75rem); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink); }

/* ---------- quotes ---------- */
.quote{ display:grid; gap:1.25rem; align-content:start; padding-top:1rem; border-top:1px solid var(--line); }
.quote p{ font-size:var(--fs-lead); line-height:1.4; color:var(--ink); letter-spacing:-.01em; text-wrap:pretty; }
.quote footer{ display:grid; gap:.15rem; }
.quote footer b{ font-weight:600; color:var(--ink); }
.big-quote{ display:grid; gap:1.5rem; max-width:52ch; }
.big-quote p{ font-size:var(--fs-h2); font-weight:600; line-height:1.2; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }

/* ---------- media ---------- */
.media{ aspect-ratio:4/3; border-radius:var(--radius); overflow:clip; background:var(--bg-alt); }
.media img{ width:100%; height:100%; object-fit:cover; }
.media--3-2{ aspect-ratio:3/2; }
.media--16-9{ aspect-ratio:16/9; }

/* ---------- key/value lists ---------- */
.kv{ display:grid; }
.kv li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--gap); padding:.85rem 0; border-top:1px solid var(--line); align-items:baseline; }
.kv li > *{ min-width:0; overflow-wrap:anywhere; }
.kv li:last-child{ border-bottom:1px solid var(--line); }
.kv .v{ color:var(--ink); font-weight:500; }
.kv .v small{ display:block; font-weight:400; color:var(--muted); font-size:var(--fs-small); }
.kv--right li{ grid-template-columns:minmax(0,1fr) auto; }
.kv--right .v{ text-align:right; }
.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
@media (min-width:800px){ .facts{ grid-template-columns:repeat(4,1fr); } }
.facts li{ padding-top:.75rem; border-top:1px solid var(--line); display:grid; gap:.3rem; min-width:0; overflow-wrap:anywhere; }
.facts .v{ color:var(--ink); font-weight:500; }

/* ---------- filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filters button{ padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px; font-size:var(--fs-small); font-weight:500; color:var(--text); transition:border-color .2s,background .2s,color .2s; }
.filters button:hover{ border-color:var(--ink); }
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.empty-note{ padding:var(--block) 0; text-align:center; color:var(--muted); }

/* ---------- forms ---------- */
.form{ display:grid; gap:1.25rem; }
.form .two{ display:grid; gap:1.25rem; }
@media (min-width:600px){ .form .two{ grid-template-columns:1fr 1fr; } }
.form label{ display:grid; gap:.45rem; }
.form input,.form textarea,.form select{ width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); font:inherit; transition:border-color .2s; }
.form input:hover,.form textarea:hover,.form select:hover{ border-color:var(--muted); }
.form input:focus,.form textarea:focus,.form select:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(119,208,244,.45); }
.form textarea{ min-height:9rem; resize:vertical; }
.form .actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ---------- footer ---------- */
.site-footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding-block:var(--block) 2rem; }
.footer-cta{ display:grid; gap:1rem; margin-bottom:var(--block); }
.footer-cta .t-h1{ max-width:16ch; }
.footer-cta a.big{ font-size:clamp(1.25rem,1rem + 1.2vw,1.75rem); font-weight:500; color:var(--ink); text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; }
.footer-cta a.big:hover{ color:var(--accent-deep); }
.footer-grid{ display:grid; gap:var(--gap); padding-top:var(--gap); border-top:1px solid var(--line); }
@media (min-width:800px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer-grid li{ padding:.2rem 0; font-size:var(--fs-small); overflow-wrap:anywhere; }
.footer-grid a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.footer-grid .t-label{ margin-bottom:.6rem; }
.footer-brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.footer-brand img{ height:28px; width:auto; }
.footer-bottom{ margin-top:var(--block); padding-top:1rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; color:var(--muted); font-size:var(--fs-label); font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }

/* ---------- page headers (inner pages) ---------- */
.page-head{ padding-block:clamp(2.5rem,6vh,5rem) clamp(2rem,5vh,4rem); }
.page-head .lede{ display:grid; gap:1rem; align-content:end; max-width:52ch; }
.page-head .eyebrow{ margin-bottom:1rem; }
.prose{ display:grid; gap:1rem; max-width:64ch; }
.prose ul li{ padding-left:1.1em; position:relative; }
.prose ul li::before{ content:"—"; position:absolute; left:0; color:var(--line-strong); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* =====================================================================
   HERO v4 — centred statement over a row of vertical film cards.
   Header + hero = 100svh.
   ===================================================================== */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hero-v4{ height:calc(100svh - var(--header-h)); min-height:560px; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; }
.hero-v4-center{ display:grid; justify-items:center; align-content:center; text-align:center; gap:clamp(.9rem,2vh,1.4rem); padding:clamp(.5rem,2vh,2rem) var(--gutter); }
.pill{ display:inline-flex; align-items:center; gap:.6rem; padding:.45rem 1rem .45rem .8rem; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:var(--fs-small); font-weight:500; color:var(--text); }
.pill .stars{ color:var(--accent-deep); font-size:.8em; letter-spacing:.08em; }
.pill b{ font-weight:600; color:var(--ink); }
.hero-v4 h1{ font-size:clamp(2.35rem,1.2rem + 4.4vw,5.25rem); font-weight:700; line-height:1.04; letter-spacing:-.035em; color:var(--ink); max-width:16ch; text-wrap:balance; }
.hl{ position:relative; background:none; color:inherit; white-space:nowrap; isolation:isolate; }
.hl::before{ content:""; position:absolute; left:-.05em; right:-.05em; top:.2em; bottom:.04em; background:var(--accent); opacity:.55; z-index:-1; border-radius:.06em; transform:rotate(-.8deg); }
.hero-v4 .sub{ max-width:58ch; color:var(--muted); font-size:var(--fs-lead); line-height:1.45; text-wrap:pretty; }
.hero-v4 .actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:.25rem; }
.reel-row{ position:relative; overflow:hidden; padding-bottom:6em; --reel-duration:180s; }
.reel-track{ display:flex; width:max-content; animation:reel-scroll var(--reel-duration) linear infinite; will-change:transform; }
.reel-row:hover .reel-track{ animation-play-state:paused; }
.reel-group{ display:flex; gap:var(--reel-gap,1rem); padding-right:var(--reel-gap,1rem); flex:none; }
@keyframes reel-scroll{ to{ transform:translateX(-50%); } }
.reel-card{ flex:none; width:clamp(240px,24vw,420px); aspect-ratio:16/11.5; border-radius:10px; overflow:clip; position:relative; background:var(--bg-alt); filter:grayscale(1); transition:filter .45s ease; }
.reel-card:hover{ filter:grayscale(0); }
.reel-card img,.reel-card video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-card::after{ content:""; position:absolute; inset:auto 0 0 0; height:55%; background:linear-gradient(to top,rgba(0,0,0,.6),transparent); pointer-events:none; opacity:0; transition:opacity .35s ease; }
.reel-card:hover::after{ opacity:1; }
.reel-card .cap{ position:absolute; left:.8rem; right:.8rem; bottom:.7rem; z-index:1; color:#fff; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.3; font-weight:600; opacity:0; transform:translateY(6px); transition:opacity .35s ease,transform .35s ease; }
.reel-card:hover .cap{ opacity:1; transform:none; }
.reel-card .cap b{ display:block; font-weight:600; font-size:.85rem; letter-spacing:-.01em; text-transform:none; margin-bottom:.1rem; }
@media (max-width:899px){
  .reel-row{ padding-bottom:3em; --reel-duration:115s; --reel-gap:.75rem; }
  .reel-card{ width:clamp(200px,58vw,320px); }
}
@media (prefers-reduced-motion:reduce){
  .reel-track{ animation:none; overflow-x:auto; width:100%; }
  .reel-card{ filter:none; }
  .reel-card video{ display:none; }
}


/* ---------- hero buttons: rising fill, arrow motion ---------- */
.hero-v4 .hero-btn{
  position:relative; overflow:hidden; isolation:isolate; min-height:52px; padding:.85rem 1.6rem; gap:0;
  transition:color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.hero-v4 .hero-btn::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; transform:translateY(101%); transition:transform .38s cubic-bezier(.2,.7,.2,1); }
.hero-v4 .hero-btn:hover,.hero-v4 .hero-btn:focus-visible{ transform:translateY(-2px); }
.hero-v4 .hero-btn:active{ transform:translateY(0) scale(.98); }
.hero-v4 .hero-btn:hover::before,.hero-v4 .hero-btn:focus-visible::before{ transform:translateY(0); }
/* primary: brand blue rises over the black, label turns ink, arrow pushes right */
.hero-v4 .hero-btn--primary::before{ background:var(--accent); }
.hero-v4 .hero-btn--primary:hover,.hero-v4 .hero-btn--primary:focus-visible{ background:var(--ink); border-color:var(--ink); color:var(--ink); }
.hero-v4 .hero-btn--primary .arr-fixed{ display:inline-block; margin-left:.6em; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.hero-v4 .hero-btn--primary:hover .arr-fixed,.hero-v4 .hero-btn--primary:focus-visible .arr-fixed{ transform:translateX(.4em); }
/* ghost: black rises inside the outline, label turns white, arrow slides in */
.hero-v4 .hero-btn--ghost::before{ background:var(--ink); }
.hero-v4 .hero-btn--ghost:hover,.hero-v4 .hero-btn--ghost:focus-visible{ background:transparent; border-color:var(--ink); color:#fff; }
.hero-v4 .hero-btn--ghost .arr{ display:inline-block; width:0; opacity:0; overflow:hidden; white-space:nowrap; transform:translateX(-8px); transition:width .3s ease,opacity .3s ease,transform .3s ease,margin .3s ease; }
.hero-v4 .hero-btn--ghost:hover .arr,.hero-v4 .hero-btn--ghost:focus-visible .arr{ width:1.1em; opacity:1; transform:none; margin-left:.5em; }

/* ---------- showreel: fixed layer revealed as the hero scrolls away ---------- */
.showreel{ position:relative; height:100svh; clip-path:inset(0); background:var(--bg-blue-tint); }
.showreel-fixed{
  position:fixed; inset:0; display:grid; place-items:center;
  background:var(--bg-blue-tint); padding:var(--gutter);   /* symmetric, so the reel centres on the true viewport centre */
}
.showreel-fixed .reel{
  width:min(100%, calc(var(--content) - 2 * var(--gutter)), calc((100svh - 2 * (var(--header-h) + 1rem)) * 16 / 9));   /* clears the header top and bottom */
  margin-inline:auto; background:var(--ink); border-radius:6px;
}
.reel .reel-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.reel .reel-play{ z-index:1; }
@media (prefers-reduced-motion:reduce){ .reel .reel-video{ display:none; } }

/* ---------- showreel YouTube player: placeholder loop until ready, sound toggle ---------- */
.reel--yt #yt-showreel{ position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition:opacity .5s ease; }
.reel--yt.is-playing #yt-showreel{ opacity:1; }
.reel--yt.is-playing .reel-video{ opacity:0; transition:opacity .5s ease; }
.reel-sound{ position:absolute; left:var(--gap); bottom:var(--gap); z-index:2; }
.reel-sound .ico-on{ display:none; }
.reel-sound[aria-pressed="true"] .ico-off{ display:none; }
.reel-sound[aria-pressed="true"] .ico-on{ display:block; }
.reel-sound[aria-pressed="true"] .pill i{ background:var(--accent-deep); }
.reel-ext{ position:absolute; right:var(--gap); bottom:calc(var(--gap) + .5rem); z-index:2; color:#fff; opacity:.75; text-decoration:none; }
.reel-ext:hover{ opacity:1; text-decoration:underline; text-underline-offset:.2em; }
@media (max-width:600px){ .reel-ext{ display:none; } }

/* ---------- who we are ---------- */
.who-grid{ row-gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.who-grid .sec-label{ align-self:start; }
.who-text{ display:grid; gap:1.25rem; }
.who-text .t-lead{ max-width:52ch; }
.who-text .muted{ max-width:56ch; }
.col-5{ grid-column:span 12; }
@media (min-width:900px){
  .col-5{ grid-column:span 5; }
  .who-text{ padding-right:clamp(0rem,2vw,2rem); }
  .who-grid .statement{ grid-column:span 3; align-self:start; padding-right:clamp(0rem,2vw,1.5rem); }
  .who-grid .intro-points{ grid-column:span 9; }
}
@media (min-width:1100px){
  .who{ min-height:100svh; display:flex; align-items:center; padding-block:clamp(2.5rem,5vh,4.5rem); }
  .who > .container{ width:100%; }
}
.intro-media{ position:relative; }
.intro-media figure{ margin:0; overflow:clip; border-radius:10px; background:var(--bg-alt); position:relative; }
.intro-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.intro-media .main{ aspect-ratio:4/5; }
.intro-media .main figcaption{ position:absolute; right:.9rem; bottom:.8rem; color:#fff; opacity:.9; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.intro-media .chip{ position:absolute; top:1rem; right:1rem; background:#fff; border-radius:999px; padding:.5rem .95rem; font-size:.8125rem; font-weight:500; color:var(--text); white-space:nowrap; }
.intro-media .chip b{ font-weight:700; color:var(--ink); }
@media (max-width:899px){ .intro-media .main{ aspect-ratio:16/10; } }
.intro-points{ margin-bottom:0; }
.statement{ padding-top:clamp(1rem,2vw,1.5rem); border-top:1px solid var(--line); font-size:clamp(1.25rem,1rem + .9vw,1.75rem); font-weight:600; line-height:1.25; letter-spacing:-.02em; color:var(--ink); text-wrap:pretty; }

/* ---------- tablet range (iPad Pro and similar, 900–1199px) ---------- */
.header-cta{ white-space:nowrap; }
@media (min-width:900px) and (max-width:1199px){
  .site-header .container{ gap:1rem; grid-template-columns:auto 1fr auto; }
  .nav{ font-size:.75rem; gap:clamp(.9rem,1.6vw,1.4rem); letter-spacing:.06em; }
  .header-cta{ font-size:.75rem; padding:.7rem 1.1rem; min-height:44px; letter-spacing:.06em; }
  .header-right{ gap:.6rem; }

  /* who we are: label on its own row, text 7 / image 5, statement full width, points in three columns */
  .who-grid{ row-gap:clamp(2rem,4vw,3rem); align-items:start; }
  .who-grid .sec-label{ grid-column:span 12; position:static; }
  .who-text{ grid-column:span 7; padding-right:clamp(0rem,2vw,2rem); }
  .who-media{ grid-column:span 5; }
  .intro-media .main{ aspect-ratio:3/4; }
  .who-grid .statement{ grid-column:span 12; max-width:36ch; padding-right:0; font-size:clamp(1.375rem,1rem + 1.2vw,1.75rem); }
  .who-grid .intro-points{ grid-column:span 12; }
  .who{ min-height:0; }
}
/* in the narrow statement column the highlight may wrap: use a line-safe background instead of the tilted block */
.statement .hl{ white-space:normal; padding:0 .06em; background:linear-gradient(transparent 16%, rgba(119,208,244,.55) 16%, rgba(119,208,244,.55) 94%, transparent 94%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.statement .hl::before{ display:none; }

/* ---------- services: stacked cards by default ---------- */
.svc{ border-top:1px solid var(--line); padding-block:var(--block); background:var(--bg); }
.svc-inner{ display:grid; gap:clamp(2rem,4vw,3rem); }
.svc-head{ display:grid; gap:1rem; align-content:start; }
.svc-head .muted{ max-width:44ch; }
.svc-progress{ display:none; }
.svc-row{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:700px){ .svc-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.svc-card{ display:grid; gap:1rem; align-content:start; color:var(--ink); border-radius:12px; background:var(--bg); }
.svc-card figure{ margin:0; aspect-ratio:4/3; border-radius:12px; overflow:clip; background:var(--bg-alt); position:relative; }
.svc-card figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.svc-card:hover figure img{ transform:scale(1.04); }
.svc-card figure .num{ position:absolute; top:.9rem; left:.9rem; background:#fff; color:var(--ink); border-radius:999px; padding:.35rem .7rem; }
.svc-body{ display:grid; gap:.6rem; padding-inline:.15rem; }
.svc-body p{ color:var(--text); }
.svc-body ul{ display:grid; gap:.25rem; color:var(--muted); font-size:var(--fs-small); }
.svc-body li::before{ content:"—"; margin-right:.4rem; color:var(--line-strong); }
.svc-body .arrow{ margin-top:.25rem; }
.svc-card:hover .arrow{ text-decoration:underline; text-underline-offset:.2em; }
.svc-card:hover .arrow::after{ transform:translateX(.2em); }

/* large screens: reveal behind the intro, pin, and travel horizontally */
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .who{ position:relative; z-index:2; background:var(--bg); }
  .svc{ position:relative; z-index:1; margin-top:-100svh; height:calc(100svh + var(--svc-travel,160vh)); padding:0; border:0; }
  .svc-stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; }
  .svc-inner{ width:100%; grid-template-columns:minmax(0,3fr) minmax(0,9fr); align-items:center; gap:var(--gap); }
  .svc-head{ padding-top:var(--header-h); }
  .svc-progress{ display:grid; gap:.6rem; margin-top:1.5rem; max-width:220px; }
  .svc-progress b{ color:var(--ink); }
  .svc-bar{ height:1px; background:var(--line); position:relative; overflow:hidden; }
  .svc-bar span{ position:absolute; inset:0; background:var(--ink); transform-origin:left; transform:scaleX(var(--p,0)); }
  .svc-viewport{ min-width:0; overflow:visible; padding-top:var(--header-h); }
  .svc-row{ display:flex; gap:var(--gap); width:max-content; transform:translate3d(calc(var(--p,0) * var(--shift,0px) * -1),0,0); will-change:transform; }
  .svc-card{ width:clamp(360px,34vw,560px); flex:none; }
  .svc-card figure{ aspect-ratio:4/3; }
}

/* ---------- selected work: six tiles + lightbox ---------- */
.work-grid{ display:grid; gap:clamp(1.25rem,2.5vw,2rem) var(--gap); grid-template-columns:1fr; }
@media (min-width:640px){ .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .work-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.work-tile{ display:grid; gap:.7rem; align-content:start; text-align:left; color:var(--ink); width:100%; }
.work-tile figure{ margin:0; aspect-ratio:16/9; border-radius:10px; overflow:clip; background:var(--bg-alt); position:relative; }
.work-tile figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.work-tile:hover figure img,.work-tile:focus-visible figure img{ transform:scale(1.04); }
.play-badge{ position:absolute; left:.9rem; bottom:.9rem; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; transition:background .25s,color .25s,transform .25s; }
.play-badge svg{ width:16px; height:16px; margin-left:2px; }
.work-tile:hover .play-badge,.work-tile:focus-visible .play-badge{ background:var(--accent); color:var(--ink); transform:scale(1.08); }
.work-tile .card-meta{ display:block; }
.work-tile .card-title{ display:block; font-size:var(--fs-h3); font-weight:600; letter-spacing:-.015em; line-height:1.25; }
.work-tile:hover .card-title{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; }
.work-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.5rem,3vw,2rem); border-top:1px solid var(--line); }

/* rising-fill button, reusable */
.btn-rise{ position:relative; overflow:hidden; isolation:isolate; min-height:52px; padding:.85rem 1.6rem; gap:0; transition:color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1); }
.btn-rise::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--accent); transform:translateY(101%); transition:transform .38s cubic-bezier(.2,.7,.2,1); }
.btn-rise:hover,.btn-rise:focus-visible{ background:var(--ink); border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }
.btn-rise:hover::before,.btn-rise:focus-visible::before{ transform:translateY(0); }
.btn-rise .arr-fixed{ display:inline-block; margin-left:.6em; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.btn-rise:hover .arr-fixed,.btn-rise:focus-visible .arr-fixed{ transform:translateX(.4em); }

/* lightbox */
.lightbox{ border:0; padding:0; background:transparent; width:min(1200px,92vw); max-width:none; max-height:none; margin:auto; overflow:visible; }
.lightbox::backdrop{ background:rgba(10,10,10,.88); }
.lightbox-frame{ aspect-ratio:16/9; width:100%; background:#000; border-radius:10px; overflow:hidden; }
.lightbox-frame iframe{ width:100%; height:100%; border:0; display:block; }
.lightbox-close{ position:absolute; right:0; top:-60px; width:48px; height:48px; border-radius:50%; border:1.5px solid #fff; background:transparent; display:grid; place-items:center; transition:background .25s,transform .35s cubic-bezier(.2,.7,.2,1); }
.lightbox-close span{ display:block; width:20px; height:2px; position:relative; }
.lightbox-close span::before,.lightbox-close span::after{ content:""; position:absolute; left:0; top:0; width:20px; height:2px; background:#fff; border-radius:2px; transition:background .2s; }
.lightbox-close span::before{ transform:rotate(45deg); } .lightbox-close span::after{ transform:rotate(-45deg); }
.lightbox-close:hover{ background:#fff; transform:rotate(90deg); }
.lightbox-close:hover span::before,.lightbox-close:hover span::after{ background:var(--ink); }
@media (max-width:600px){ .lightbox{ width:100vw; } .lightbox-frame{ border-radius:0; } .lightbox-close{ right:.75rem; top:-56px; } }

/* selected work spans the full content width: label row, then heading and grid */
.work-wrap{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.work-wrap .sec-label{ position:static; }
@media (min-width:900px){ .work-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- partners: open logo wall, no top border ---------- */
.partners{ padding-block:clamp(3rem,6vw,5.5rem) var(--block); }
.partners-head{ display:grid; gap:1.25rem clamp(2rem,4vw,4rem); margin-bottom:clamp(2rem,4vw,3.5rem); }
.partners-head .sec-label{ position:static; margin-bottom:1rem; }
.partners-head .t-h2{ max-width:22ch; }
.partners-note{ max-width:44ch; }
@media (min-width:900px){ .partners-head{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:end; } .partners-note{ justify-self:end; } }
.logo-wall{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .logo-wall{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .logo-wall{ grid-template-columns:repeat(6,1fr); } }
.logo-cell{ position:relative; display:grid; place-items:center; min-height:clamp(130px,12vw,180px); padding:1.5rem 1.25rem 2.25rem; }
.logo-cell img{ max-height:56px; max-width:76%; width:auto; filter:grayscale(1); opacity:.6; transition:opacity .3s,filter .3s,transform .4s cubic-bezier(.2,.7,.2,1); }
.logo-cell:hover img{ filter:none; opacity:1; transform:translateY(-4px); }
.logo-cap{ position:absolute; left:0; right:0; bottom:.9rem; text-align:center; color:var(--muted); opacity:0; transform:translateY(4px); transition:opacity .3s,transform .3s; padding-inline:.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo-cell:hover .logo-cap{ opacity:1; transform:none; }

/* ---------- testimonials: compact strip on the brand blue ---------- */
.testi{ background:var(--accent); color:var(--ink); padding-block:clamp(1.5rem,3vw,2.25rem); }
.testi-inner{ display:grid; gap:1.25rem clamp(1.5rem,3vw,3rem); align-items:center; }
@media (min-width:900px){ .testi-inner{ grid-template-columns:auto minmax(0,1fr) auto; } }
.testi-side{ display:flex; align-items:center; gap:1rem; }
.testi-side .t-label{ color:var(--ink); opacity:.7; white-space:nowrap; }
.testi-mark{ font-size:clamp(3rem,5vw,4.5rem); font-weight:700; line-height:.4; letter-spacing:-.05em; opacity:.35; transform:translateY(.15em); }
@media (min-width:900px){ .testi-side{ flex-direction:column; align-items:flex-start; gap:.5rem; min-width:9rem; } }
.testi-quotes{ min-width:0; position:relative; }
.testi-q{ margin:0; display:grid; gap:.5rem; animation:testi-in .45s cubic-bezier(.2,.7,.2,1) both; }
.testi-q[hidden]{ display:none; }
.testi-q blockquote{ font-size:clamp(1.0625rem,1rem + .5vw,1.375rem); font-weight:500; line-height:1.4; letter-spacing:-.01em; text-wrap:pretty; max-width:72ch; }
.testi-q figcaption{ display:flex; flex-wrap:wrap; gap:.25rem .75rem; font-size:var(--fs-small); }
.testi-q figcaption b{ font-weight:700; }
.testi-q figcaption span{ opacity:.7; }
.testi-q figcaption span::before{ content:"·"; margin-right:.6rem; }
.testi-nav{ display:flex; align-items:center; gap:.75rem; justify-self:end; }
.testi-count{ color:var(--ink); opacity:.75; white-space:nowrap; }
.testi-btn{ width:40px; height:40px; min-width:40px; aspect-ratio:1; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; transition:background .25s,color .25s,transform .25s; }
.testi-btn svg{ width:16px; height:16px; }
.testi-btn:hover,.testi-btn:focus-visible{ background:var(--ink); color:var(--accent); transform:scale(1.06); }
@keyframes testi-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .testi-q{ animation:none; } }
@media (max-width:899px){
  .testi-inner{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"side nav" "quote quote"; gap:1rem; }
  .testi-side{ grid-area:side; }
  .testi-nav{ grid-area:nav; }
  .testi-quotes{ grid-area:quote; }
  .testi-mark{ display:none; }
}

/* testimonials: autoplay with pause and a progress line */
.testi{ position:relative; }
.testi-progress{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(10,10,10,.12); }
.testi-progress span{ display:block; height:100%; width:100%; background:var(--ink); transform-origin:left; transform:scaleX(0); }
.testi.is-playing .testi-progress span{ animation:testi-progress var(--testi-interval,6s) linear forwards; }
.testi.is-paused .testi-progress span{ animation-play-state:paused; }
@keyframes testi-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.testi-play .ico-play{ display:none; }
.testi-play[aria-pressed="false"] .ico-pause{ display:none; }
.testi-play[aria-pressed="false"] .ico-play{ display:block; margin-left:2px; }
.testi-play svg{ width:14px; height:14px; }

/* ---------- footer v2: end-of-reel sign-off ---------- */
.site-footer{ padding-bottom:0; overflow:hidden; }
.footer-top{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1000px){ .footer-top{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; } }
.footer-cta{ margin-bottom:0; }
.footer-slate{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.footer-hint{ max-width:40ch; margin-top:.75rem; }
.footer-cols{ display:grid; gap:2rem 1.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:640px){ .footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.footer-cols .t-label{ margin-bottom:.7rem; }
.footer-cols li{ padding:.2rem 0; font-size:var(--fs-small); }
.footer-cols a{ position:relative; }
.footer-cols a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.footer-cols a:hover::after{ transform:scaleX(1); }
.footer-meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:var(--block); padding-top:1.25rem; border-top:1px solid var(--line); }
.footer-brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink); margin:0; }
.footer-brand img{ height:26px; width:auto; }
.footer-clock{ display:inline-flex; align-items:center; gap:.6rem; }
.footer-clock b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-deep); display:inline-block; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(14,142,214,.45); } 50%{ box-shadow:0 0 0 6px rgba(14,142,214,0); } }
.to-top{ width:44px; height:44px; min-width:44px; aspect-ratio:1; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; transition:background .25s,color .25s,transform .35s cubic-bezier(.2,.7,.2,1); }
.to-top svg{ width:16px; height:16px; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.to-top:hover,.to-top:focus-visible{ background:var(--ink); color:#fff; transform:translateY(-3px); }
.to-top:hover svg{ transform:translateY(-2px); }
.footer-wordmark{
  margin-top:clamp(1.5rem,3vw,2.5rem); font-size:clamp(4.5rem,15.5vw,17rem); font-weight:700; line-height:.8; letter-spacing:-.045em; white-space:nowrap;
  height:.62em; overflow:hidden; color:var(--bg-alt); -webkit-text-stroke:1.5px rgba(10,10,10,.34); paint-order:stroke fill;
  user-select:none; transition:color .6s ease;
}
.footer-wordmark:hover{ color:var(--ink); }
.footer-bottom{ margin-top:0; padding:1rem 0 1.25rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; }
@media (prefers-reduced-motion:reduce){ .dot{ animation:none; } }

/* =====================================================================
   WHO WE ARE (about.html) — hero statement, numbers, story timeline,
   working principles, open set, visit.
   ===================================================================== */
.about .sec-label{ position:static; }
@media (min-width:900px){ .about .grid > .sec-label{ position:sticky; top:calc(var(--header-h) + 1.5rem); } }

/* hero: copy on top, one wide frame filling the rest of the first screen */
.about-hero{ --pad-t:clamp(2rem,5vh,4rem); --pad-b:clamp(2rem,4vh,3.5rem); padding-top:var(--pad-t); }
.about-hero-inner{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
.about-hero-top{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:end; }
.about-hero-copy{ display:grid; gap:1.25rem; }
.about-hero-copy .t-hero{ max-width:20ch; font-size:clamp(2.35rem,1.1rem + 3.8vw,5rem); line-height:1.02; letter-spacing:-.035em; }
.about-hero-side{ display:grid; gap:1.5rem; }
.about-hero-side .t-lead{ max-width:50ch; color:var(--text); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.facts{ display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; padding-top:1rem; border-top:1px solid var(--line); }
.facts li{ display:inline-flex; gap:.6rem; align-items:baseline; }
.facts span{ color:var(--muted); }
.facts b{ color:var(--ink); font-weight:600; }
.about-hero-media{ margin:0; position:relative; border-radius:12px; overflow:clip; background:var(--bg-alt); aspect-ratio:16/10; }
.about-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-hero-media figcaption{ position:absolute; left:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:.6rem; background:#fff; color:var(--ink); border-radius:999px; padding:.55rem .95rem; }
@media (min-width:900px){
  .about-hero-top{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(2rem,5vw,6rem); }
  .about-hero-media{ aspect-ratio:21/9; }
}
@media (min-width:1100px){
  /* first screen: header + hero fill the viewport, the frame takes whatever height is left */
  .about-hero{ padding-bottom:var(--pad-b); }
  .about-hero-inner{ min-height:calc(100svh - var(--header-h) - var(--pad-t) - var(--pad-b)); grid-template-rows:auto minmax(340px,1fr); }
  .about-hero-media{ aspect-ratio:auto; min-height:340px; }
  .about-hero-media img{ position:absolute; inset:0; }
}

/* numbers row */
.about-numbers{ padding-block:clamp(2.5rem,5vw,4.5rem) 0; }
.about-story{ border-top:0; padding-top:clamp(4rem,9vw,8.5rem); }
.numbers--about li{ border-top-color:var(--line-strong); }
.numbers--about .val{ font-size:clamp(2.75rem,2rem + 3vw,5rem); font-variant-numeric:tabular-nums; }

/* story timeline */
.story-wrap{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
.story-head{ display:grid; gap:1.25rem; }
.story-head .t-h2{ max-width:18ch; }
.story-head .t-lead{ max-width:56ch; }
.timeline{ border-top:1px solid var(--line); counter-reset:tl; }
.tl-row{ display:grid; gap:.5rem var(--gap); grid-template-columns:1fr; padding-block:clamp(1.5rem,3vw,2.25rem); border-bottom:1px solid var(--line); position:relative; }
.tl-year{ font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.tl-body{ display:grid; gap:.5rem; }
.tl-body p{ color:var(--muted); max-width:58ch; }
.tl-row::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--ink); transition:width .6s cubic-bezier(.2,.7,.2,1); }
.tl-row:hover::before{ width:100%; }
@media (min-width:700px){ .tl-row{ grid-template-columns:minmax(0,3fr) minmax(0,9fr); align-items:start; } }

/* how we work */
.about-values{ border-top:0; background:var(--bg-alt); }
.values-head{ display:grid; gap:.75rem; margin-bottom:clamp(2rem,4vw,3rem); }
.values-head .muted{ max-width:44ch; }
.values-list .num-row{ grid-template-columns:3rem 1fr; }
.values-list .t-h3{ font-size:clamp(1.25rem,1rem + .8vw,1.75rem); font-weight:600; letter-spacing:-.02em; }
.values-list .body p{ color:var(--muted); max-width:52ch; }
.values-list .num-row:first-child{ border-top:1px solid var(--line); }
.about-values .num-row{ border-bottom-color:rgba(10,10,10,.1); }
.about-values .num-row:first-child{ border-top-color:rgba(10,10,10,.1); }
.values-list.num-list{ border-top:0; }
@media (min-width:900px){ .values-list .num-row{ grid-template-columns:3rem minmax(0,1fr) minmax(0,1.3fr); } .values-list .num-row .body{ grid-column:3; grid-row:1; } }

/* open set: light blue tint band, copy and one frame */
.open-set{ background:var(--bg-blue-tint); padding-block:var(--block); }
.open-set-inner{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
.open-set-copy{ display:grid; gap:1.25rem; }
.open-set-copy .t-h2{ max-width:16ch; margin-top:.5rem; }
.open-set-copy .t-lead{ max-width:52ch; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.open-set-copy .row{ gap:1.5rem; margin-top:.5rem; }
.open-set-media{ margin:0; position:relative; border-radius:12px; overflow:clip; background:#fff; aspect-ratio:4/3; }
.open-set-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.open-set-media figcaption{ position:absolute; left:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:.6rem; background:#fff; color:var(--ink); border-radius:999px; padding:.55rem .95rem; }
@media (min-width:900px){ .open-set-inner{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); } .open-set-media{ aspect-ratio:5/4; } }

/* visit */
.about-visit{ border-top:0; }
.visit-inner{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
.visit-media{ margin:0; border-radius:12px; overflow:clip; background:var(--bg-alt); aspect-ratio:4/3; }
.visit-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.visit-copy{ display:grid; gap:1.25rem; }
.visit-copy .t-h2{ margin-top:.25rem; }
.visit-copy .muted{ max-width:44ch; }
.visit-copy .kv{ margin-top:.5rem; }
.visit-copy .row{ gap:1.5rem; margin-top:.75rem; }
@media (min-width:900px){ .visit-inner{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(3rem,6vw,7rem); } .visit-media{ aspect-ratio:4/5; } }
@media (min-width:1200px){ .visit-media{ aspect-ratio:1; } }

/* reveal on scroll (opt-in with data-reveal), safe without JS and under reduced motion */
.js [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js [data-reveal]{ opacity:1; transform:none; } }

/* =====================================================================
   FILM & TVCs (services.html) — three offers explained simply:
   hero chooser, one section per offer, side-by-side table, four steps, CTA.
   ===================================================================== */
.svp .sec-label{ position:static; }
@media (min-width:900px){ .svp .grid > .sec-label{ position:sticky; top:calc(var(--header-h) + 1.5rem); } }

/* hero: statement, lead, then the three-card chooser */
.svp-hero{ --pad-t:clamp(2rem,5vh,4rem); --pad-b:clamp(2rem,4vh,3.5rem); padding-top:var(--pad-t); padding-bottom:var(--pad-b); }
.svp-hero-inner{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-content:space-between; }
.svp-hero-top{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:end; }
.svp-hero-copy{ display:grid; gap:1.25rem; }
.svp-hero-copy .t-hero{ max-width:18ch; font-size:clamp(2.35rem,1.1rem + 3.8vw,5rem); line-height:1.02; letter-spacing:-.035em; }
.svp-hero-side{ display:grid; gap:1.5rem; }
.svp-hero-side .t-lead{ max-width:48ch; color:var(--text); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.svp-hero-side .row{ gap:1.5rem; }
@media (min-width:900px){ .svp-hero-top{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(2rem,5vw,6rem); } }
@media (min-width:1100px){ .svp-hero-inner{ min-height:calc(100svh - var(--header-h) - var(--pad-t) - var(--pad-b)); } }

.choose{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:700px){ .choose{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.choose-card{
  display:grid; gap:.75rem; align-content:start; position:relative; min-height:100%;
  padding:clamp(1.25rem,2vw,1.75rem); border-radius:12px; background:var(--bg-alt); color:var(--ink);
  transition:background .3s ease,transform .35s cubic-bezier(.2,.7,.2,1);
}
.choose-card:hover,.choose-card:focus-visible{ background:var(--bg-blue-tint); transform:translateY(-3px); }
.choose-num{ color:var(--muted); }
.choose-title{ font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem); font-weight:700; letter-spacing:-.025em; line-height:1.1; }
.choose-line{ color:var(--text); max-width:28ch; }
.choose-meta{ display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin-top:.5rem; padding-top:.75rem; border-top:1px solid rgba(10,10,10,.1); color:var(--muted); }
.choose-arrow{ position:absolute; top:clamp(1.25rem,2vw,1.75rem); right:clamp(1.25rem,2vw,1.75rem); width:36px; height:36px; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; font-size:1rem; transition:background .25s,color .25s,transform .35s cubic-bezier(.2,.7,.2,1); }
.choose-card:hover .choose-arrow{ background:var(--ink); color:#fff; transform:translateY(3px); }

/* one section per offer: image beside copy, alternating */
.offer{ padding-block:var(--block); scroll-margin-top:var(--header-h); outline:none; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
.offer--alt{ background:var(--bg-alt); }
.offer-inner{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
.offer-media{ margin:0; position:relative; border-radius:12px; overflow:clip; background:var(--bg-alt); aspect-ratio:4/3; }
.offer--alt .offer-media{ background:#fff; }
.offer-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.offer-media figcaption{ position:absolute; left:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:.6rem; background:#fff; color:var(--ink); border-radius:999px; padding:.55rem .95rem; }
.offer-copy{ display:grid; gap:1.25rem; }
.offer-copy .t-h2{ max-width:18ch; margin-top:.25rem; }
.offer-lead{ font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); line-height:1.5; color:var(--text); max-width:52ch; }
.offer-facts{ display:grid; gap:1.5rem var(--gap); grid-template-columns:1fr; margin-top:.5rem; }
@media (min-width:520px){ .offer-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fact{ display:grid; gap:.6rem; align-content:start; padding-top:.9rem; border-top:1px solid var(--line-strong); }
.fact ul{ display:grid; gap:.35rem; color:var(--muted); font-size:var(--fs-small); }
.fact li{ display:flex; gap:.6rem; align-items:baseline; }
.fact li::before{ content:""; width:6px; height:6px; flex:none; background:var(--accent); transform:translateY(-.15em); }
.offer-links{ gap:1.5rem; margin-top:.75rem; }
@media (min-width:900px){
  .offer-inner{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(3rem,6vw,7rem); }
  .offer-inner--flip .offer-media{ order:2; }
  .offer-media{ aspect-ratio:4/5; }
}
@media (min-width:1300px){ .offer-media{ aspect-ratio:1; } }

/* side by side table: rows on desktop, stacked cards on small screens */
.compare-sec{ padding-block:var(--block); border-top:1px solid var(--line); }
.compare-head{ display:grid; gap:.75rem; margin-bottom:clamp(2rem,4vw,3rem); }
.compare-head .t-h2{ margin-top:.5rem; }
.compare-head .muted{ max-width:48ch; }
.compare{ display:grid; }
.compare-row{ display:grid; gap:.5rem var(--gap); padding-block:clamp(1.25rem,2.5vw,1.75rem); border-top:1px solid var(--line); }
.compare-row:last-child{ border-bottom:1px solid var(--line); }
.compare-row--head{ display:none; }
.compare-name{ font-size:clamp(1.25rem,1rem + .8vw,1.75rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--ink); }
.compare-row [role="cell"]{ display:grid; gap:.2rem; align-content:start; color:var(--text); }
.compare-row [role="cell"] b{ display:block; }
@media (min-width:900px){
  .compare-row{ grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.3fr); align-items:start; }
  .compare-row--head{ display:grid; border-top:0; padding-block:0 .9rem; }
  .compare-row [role="cell"] b{ display:none; }
  .compare-row:first-child + .compare-row{ border-top:1px solid var(--line-strong); }
}
@media (max-width:899px){ .compare-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } .compare-name{ grid-column:1 / -1; margin-bottom:.35rem; } }

/* four steps */
.steps-sec{ padding-block:var(--block); background:var(--bg-alt); }
.steps-head{ display:grid; gap:.75rem; margin-bottom:clamp(2rem,4vw,3rem); }
.steps-head .muted{ max-width:44ch; }
.steps{ display:grid; gap:var(--gap); grid-template-columns:1fr; counter-reset:step; }
@media (min-width:600px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step{ display:grid; gap:.6rem; align-content:start; padding-top:1rem; border-top:1px solid var(--line-strong); }
.step p{ color:var(--muted); font-size:var(--fs-small); max-width:30ch; }

/* closing CTA on the blue tint */
.svp-cta{ background:var(--bg-blue-tint); padding-block:var(--block); }
.svp-cta-inner{ display:grid; gap:clamp(1.5rem,3vw,3rem); align-items:center; }
.svp-cta-inner .t-h2{ max-width:16ch; margin-top:.5rem; margin-bottom:.75rem; }
.svp-cta-inner .muted{ max-width:44ch; }
.svp-cta-actions{ gap:.75rem; }
@media (min-width:900px){ .svp-cta-inner{ grid-template-columns:minmax(0,1.3fr) auto; } .svp-cta-actions{ justify-self:end; } }
.btn-rise--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-rise--ghost::before{ background:var(--ink); }
.btn-rise--ghost:hover,.btn-rise--ghost:focus-visible{ background:transparent; color:#fff; }

/* =====================================================================
   CREATIVE SPACE (studio.html) — hero, made for, the room, rates, booking.
   The booking form is front end only; it is wired to a booking plugin in WordPress later.
   ===================================================================== */
.cs .sec-label{ position:static; }

/* hero: statement, then a photo mosaic of the space (swipe strip on phones) */
.cs-hero{ --pad-t:clamp(2rem,5vh,4rem); --pad-b:clamp(2rem,4vh,3.5rem); padding-top:var(--pad-t); padding-bottom:var(--pad-b); }
.cs-hero-inner{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
.cs-hero-top{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:end; }
.cs-hero-copy{ display:grid; gap:1.25rem; }
.cs-hero-copy .t-hero{ max-width:18ch; font-size:clamp(2.35rem,1.1rem + 3.8vw,5rem); line-height:1.02; letter-spacing:-.035em; }
.cs-hero-side{ display:grid; gap:1.5rem; }
.cs-hero-side .t-lead{ max-width:48ch; color:var(--text); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.cs-hero-side .row{ gap:1.5rem; }
@media (min-width:900px){ .cs-hero-top{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(2rem,5vw,6rem); } }

/* gallery tiles */
.gal-item{ min-width:0; }
.gal-btn{ display:block; width:100%; height:100%; position:relative; border-radius:12px; overflow:clip; background:var(--bg-alt); text-align:left; }
.gal-btn img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.6,.2,1); }
.gal-btn:hover img,.gal-btn:focus-visible img{ transform:scale(1.04); }
.gal-btn:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; }
.gal-cap{ position:absolute; left:.9rem; bottom:.85rem; display:inline-flex; align-items:center; gap:.6rem; background:#fff; color:var(--ink); border-radius:999px; padding:.5rem .9rem; max-width:calc(100% - 1.8rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gal-item:not(.gal-item--main) .gal-cap{ opacity:0; transform:translateY(6px); transition:opacity .3s,transform .3s; }
.gal-btn:hover .gal-cap,.gal-btn:focus-visible .gal-cap{ opacity:1; transform:none; }
.gal-more{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,10,10,.55); color:#fff; font-size:clamp(1.5rem,1rem + 1.5vw,2.25rem); font-weight:700; letter-spacing:-.03em; }
.gal-more[hidden]{ display:none; }

/* phones and small tablets: one swipe strip, every photo, snap to each */
@media (max-width:899px){
  .cs-gallery{ display:flex; gap:.75rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); }
  .cs-gallery::-webkit-scrollbar{ display:none; }
  .gal-item{ flex:0 0 min(78vw,420px); aspect-ratio:4/3; scroll-snap-align:start; }
  .gal-item:not(.gal-item--main) .gal-cap{ opacity:1; transform:none; }
}
/* tablets and up: mosaic, one large frame and four small ones; anything after the fifth is folded into the "+N" tile */
@media (min-width:900px){
  .cs-gallery{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); }
  .gal-item--main{ grid-column:1; grid-row:1 / 3; }
  .gal-item--main .gal-btn{ aspect-ratio:16/10; }
  .gal-item:not(.gal-item--main) .gal-btn{ aspect-ratio:auto; min-height:0; }
  .gal-item:nth-child(n+6){ display:none; }
}
/* large screens: header + hero fill the viewport, the mosaic takes the height that is left */
@media (min-width:1100px){
  .cs-hero-inner{ min-height:calc(100svh - var(--header-h) - var(--pad-t) - var(--pad-b)); grid-template-rows:auto minmax(360px,1fr); }
  .gal-item--main .gal-btn{ aspect-ratio:auto; }
  .gal-btn img{ position:absolute; inset:0; }
}

/* photo viewer */
.lightbox--photo{ width:min(1400px,94vw); }
.photobox-frame{ margin:0; display:grid; gap:.9rem; }
.photobox-frame img{ width:100%; max-height:min(80svh,900px); object-fit:contain; border-radius:10px; background:#000; display:block; }
.photobox-frame figcaption{ display:flex; justify-content:space-between; gap:1rem; color:#fff; opacity:.85; }
.photobox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1.5px solid #fff; color:#fff; display:grid; place-items:center; background:rgba(10,10,10,.35); transition:background .25s,color .25s; }
.photobox-nav svg{ width:20px; height:20px; }
.photobox-nav:hover,.photobox-nav:focus-visible{ background:#fff; color:var(--ink); }
.photobox-prev{ left:-64px; } .photobox-next{ right:-64px; }
@media (max-width:1540px){ .photobox-prev{ left:.75rem; } .photobox-next{ right:.75rem; } }
@media (max-width:600px){ .photobox-nav{ width:40px; height:40px; top:auto; bottom:-56px; transform:none; } .photobox-prev{ left:auto; right:3.5rem; } .photobox-next{ right:0; } .lightbox--photo{ width:92vw; } .photobox-frame img{ max-height:70svh; } }

/* made for: three plain cards */
.cs-for{ padding-block:var(--block); }
.cs-for-head{ display:grid; gap:1rem; margin-bottom:clamp(2rem,4vw,3rem); }
.cs-for-head .t-h2{ max-width:22ch; }
.use-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:700px){ .use-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.use{ display:grid; gap:.75rem; align-content:start; padding:clamp(1.25rem,2vw,1.75rem); border-radius:12px; background:var(--bg-alt); transition:background .3s ease; }
.use:hover{ background:var(--bg-blue-tint); }
.use .t-label{ color:var(--muted); }
.use p{ color:var(--text); max-width:34ch; }

/* the room */
.cs-room{ padding-block:var(--block); background:var(--bg-alt); }
.cs-room-inner{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
.cs-room-media{ margin:0; border-radius:12px; overflow:clip; background:#fff; aspect-ratio:4/3; }
.cs-room-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-room-copy{ display:grid; gap:1.25rem; }
.cs-room-copy .t-h2{ max-width:18ch; margin-top:.25rem; }
.cs-kv{ margin-top:.5rem; }
.cs-kv li{ border-top-color:rgba(10,10,10,.12); }
.cs-kv li:last-child{ border-bottom-color:rgba(10,10,10,.12); }
@media (min-width:900px){ .cs-room-inner{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(3rem,6vw,7rem); } .cs-room-media{ aspect-ratio:4/5; } }
@media (min-width:1300px){ .cs-room-media{ aspect-ratio:1; } }

/* rates: three tiers */
.cs-rates{ padding-block:var(--block); }
.cs-rates-head{ display:grid; gap:1.25rem clamp(2rem,4vw,4rem); margin-bottom:clamp(2rem,4vw,3rem); }
.cs-rates-head .t-h2{ max-width:18ch; margin-top:1rem; }
.cs-rates-head .muted{ max-width:44ch; }
@media (min-width:900px){ .cs-rates-head{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:end; } .cs-rates-head .muted{ justify-self:end; } }
.rate-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:700px){ .rate-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.rate{ display:grid; gap:.75rem; align-content:start; padding:clamp(1.5rem,2.5vw,2.25rem) clamp(1.25rem,2vw,1.75rem); border:1px solid var(--line); border-radius:12px; background:#fff; transition:border-color .3s,transform .35s cubic-bezier(.2,.7,.2,1); }
.rate:hover{ border-color:var(--ink); transform:translateY(-3px); }
.rate--hot{ background:var(--bg-blue-tint); border-color:transparent; }
.rate-val{ font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ink); }
.rate p{ color:var(--muted); font-size:var(--fs-small); max-width:30ch; }
.cs-rates-note{ margin-top:1.25rem; max-width:60ch; }

/* booking: form beside a sticky summary */
.cs-book{ padding-block:var(--block); background:var(--bg-alt); scroll-margin-top:var(--header-h); outline:none; }
.cs-book-head{ display:grid; gap:.75rem; margin-bottom:clamp(2rem,4vw,3rem); }
.cs-book-head .t-h2{ max-width:22ch; margin-top:.5rem; }
.cs-book-head .muted{ max-width:48ch; }
.book-inner{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (min-width:1000px){ .book-inner{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } .book-summary{ position:sticky; top:calc(var(--header-h) + 1.5rem); } }
.book-form{ gap:clamp(1.75rem,3vw,2.5rem); }
.book-step{ border:0; padding:0; margin:0; min-width:0; display:grid; gap:1rem; padding-top:1.25rem; border-top:1px solid rgba(10,10,10,.12); }
.book-step legend{ padding:0; margin-bottom:.25rem; float:left; width:100%; }   /* float keeps the legend inside the grid flow */
.book-step legend + *{ clear:both; }
.book-form input,.book-form select,.book-form textarea{ background:#fff; }
.book-form select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:2.5rem; }
.book-form textarea{ min-height:7rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ position:relative; display:inline-flex; }
.chip input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chip span{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:var(--fs-small); font-weight:500; line-height:1; white-space:nowrap; transition:background .25s,border-color .25s,color .25s,transform .25s; user-select:none; }
.chip input:hover + span{ border-color:var(--muted); }
.chip input:focus-visible + span{ outline:2px solid var(--accent-deep); outline-offset:3px; }
.chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip--check span::before{ content:"+"; font-weight:600; }
.chip--check input:checked + span::before{ content:"✓"; }
.form-error{ color:var(--error); }
.book-form .actions{ gap:1.25rem; }
.book-card{ background:#fff; border-radius:12px; padding:clamp(1.25rem,2vw,1.75rem); display:grid; gap:1rem; }
.book-card-media{ margin:0 0 .25rem; aspect-ratio:16/9; border-radius:8px; overflow:clip; background:var(--bg-alt); }
.book-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.book-card-label{ display:inline-flex; align-items:center; gap:.6rem; }
.book-lines{ margin:0; display:grid; }
.book-lines > div{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--gap); padding:.7rem 0; border-top:1px solid var(--line); align-items:baseline; }
.book-lines > div:last-child{ border-bottom:1px solid var(--line); }
.book-lines dd{ margin:0; color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.book-lines dd.is-empty{ color:var(--muted); font-weight:400; }
.book-done{ background:var(--ink); color:#fff; border-radius:12px; padding:clamp(1.5rem,2.5vw,2.25rem); display:grid; gap:1rem; margin-top:var(--gap); }
.book-done[hidden]{ display:none; }
.book-done .t-label{ color:var(--accent); display:inline-flex; align-items:center; gap:.6rem; }
.book-done .t-label .dot{ background:var(--accent); animation:none; }
.book-done .t-h3{ color:#fff; font-size:clamp(1.25rem,1rem + .8vw,1.625rem); }
.book-done .muted{ color:rgba(255,255,255,.7); }
.book-done .link{ color:#fff; }
.book-form.is-sent{ opacity:.55; pointer-events:none; }
.form .is-invalid{ border-color:var(--error); }

/* =====================================================================
   OUR WORKS / MUSIC VIDEOS (work.html, music.html) — hero with filters,
   a live-preview showreel card, the front-page tile grid, every film in the lightbox.
   ===================================================================== */
.wk .sec-label{ position:static; }
.wk-hero{ --pad-t:clamp(2rem,5vh,4rem); --pad-b:clamp(2rem,4vh,3.5rem); padding-top:var(--pad-t); padding-bottom:var(--pad-b); }
.wk-hero-inner{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
.wk-hero-top{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:end; }
.wk-hero-copy{ display:grid; gap:1.25rem; }
.wk-hero-copy .t-hero{ max-width:16ch; font-size:clamp(2.35rem,1.1rem + 3.8vw,5rem); line-height:1.02; letter-spacing:-.035em; }
.wk-hero-side{ display:grid; gap:1.25rem; }
.wk-hero-side .t-lead{ max-width:46ch; color:var(--text); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.wk-count{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); }
.wk-filters .cnt{ opacity:.55; margin-left:.3em; font-variant-numeric:tabular-nums; }
.filters button{ min-height:40px; }
@media (min-width:900px){ .wk-hero-top{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(2rem,5vw,6rem); } }

/* showreel / featured card: poster with a muted loop preview, opens the lightbox */
.wk-reel{ display:block; width:100%; position:relative; border-radius:12px; overflow:clip; background:var(--ink); aspect-ratio:16/9; text-align:left; color:#fff; isolation:isolate; }
.wk-reel-video,.wk-reel-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.wk-reel-video{ z-index:1; }
.wk-reel::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 45%,rgba(0,0,0,0) 75%,rgba(0,0,0,.25)); pointer-events:none; }
.wk-reel-top,.wk-reel-bottom{ position:absolute; left:clamp(1rem,2vw,1.75rem); right:clamp(1rem,2vw,1.75rem); z-index:3; display:flex; align-items:center; gap:.75rem; }
.wk-reel-top{ top:clamp(1rem,2vw,1.75rem); justify-content:space-between; }
.wk-reel-bottom{ bottom:clamp(1rem,2vw,1.75rem); }
.wk-chip{ display:inline-flex; align-items:center; gap:.6rem; background:#fff; color:var(--ink); border-radius:999px; padding:.5rem .9rem; white-space:nowrap; }
.wk-reel-title{ font-size:clamp(1.125rem,1rem + 1vw,1.75rem); font-weight:600; letter-spacing:-.02em; line-height:1.2; text-shadow:0 1px 12px rgba(0,0,0,.4); max-width:26ch; text-wrap:balance; }
.play-badge--lg{ width:64px; height:64px; min-width:64px; }
.play-badge--lg svg{ width:22px; height:22px; margin-left:3px; }
.wk-reel:hover .play-badge,.wk-reel:focus-visible .play-badge{ background:var(--accent); color:var(--ink); transform:scale(1.08); }
.wk-reel:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; }
.wk-reel .wk-reel-video{ transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.wk-reel:hover .wk-reel-video,.wk-reel:hover .wk-reel-poster{ transform:scale(1.02); }
@media (min-width:900px){ .wk-reel{ aspect-ratio:21/9; } }
@media (min-width:1100px){
  .wk-hero-inner{ min-height:calc(100svh - var(--header-h) - var(--pad-t) - var(--pad-b)); grid-template-rows:auto minmax(360px,1fr); }
  .wk-reel{ aspect-ratio:auto; min-height:360px; }
}
@media (prefers-reduced-motion:reduce){ .wk-reel-video{ display:none; } }

/* the grid */
.wk-grid-sec{ padding-block:clamp(2rem,4vw,3.5rem) var(--block); }
.work-tile[hidden]{ display:none; }
@media (min-width:640px) and (max-width:899px){ .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* closing band */
.wk-cta{ background:var(--bg-blue-tint); padding-block:var(--block); }
.wk-cta-inner{ display:grid; gap:clamp(1.5rem,3vw,3rem); align-items:center; }
.wk-cta-inner .t-h2{ max-width:18ch; margin-top:.5rem; margin-bottom:.75rem; }
.wk-cta-inner .muted{ max-width:44ch; }
.wk-cta-actions{ gap:.75rem; }
@media (min-width:900px){ .wk-cta-inner{ grid-template-columns:minmax(0,1.3fr) auto; } .wk-cta-actions{ justify-self:end; } }
.wk-reel .play-badge{ position:static; flex:none; transform:none; }
.wk-grid-head{ display:grid; gap:1rem; margin-bottom:clamp(1.5rem,3vw,2.5rem); padding-top:clamp(1.5rem,3vw,2.5rem); border-top:1px solid var(--line); }
@media (min-width:700px){ .wk-grid-head{ grid-template-columns:auto 1fr; align-items:center; } .wk-grid-head .filters{ justify-self:end; justify-content:flex-end; } }

/* =====================================================================
   CONTACTS (contact.html) — three ways to reach us, the brief form, the map.
   ===================================================================== */
.ct .sec-label{ position:static; }
.ct-hero{ padding-block:clamp(2rem,5vh,4rem) clamp(2.5rem,5vw,4.5rem); }
.ct-hero-inner{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:end; }
.ct-hero-copy{ display:grid; gap:1.25rem; }
.ct-hero-copy .t-hero{ max-width:16ch; font-size:clamp(2.35rem,1.1rem + 3.8vw,5rem); line-height:1.02; letter-spacing:-.035em; }
.ct-hero-copy .t-lead{ max-width:44ch; color:var(--text); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.ct-ways{ display:grid; gap:0; }
.ct-way{ display:grid; gap:.35rem; padding-block:1.1rem; border-top:1px solid var(--line); }
.ct-way:last-child{ border-bottom:1px solid var(--line); }
.ct-big{ font-size:clamp(1.25rem,1rem + 1vw,1.75rem); font-weight:600; letter-spacing:-.02em; line-height:1.2; color:var(--ink); overflow-wrap:anywhere; position:relative; width:fit-content; }
.ct-big::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.ct-big:hover::after,.ct-big:focus-visible::after{ transform:scaleX(1); }
@media (min-width:900px){ .ct-hero-inner{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(2rem,5vw,6rem); } }

/* the brief */
.ct-form-sec{ padding-block:var(--block); background:var(--bg-alt); }
.ct-form-inner{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:start; }
.ct-form-head{ display:grid; gap:1.25rem; }
.ct-form-head .t-h2{ max-width:16ch; margin-top:.25rem; }
.ct-steps{ display:grid; gap:1rem; margin-top:.75rem; }
.ct-steps li{ display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.5rem; padding-top:.9rem; border-top:1px solid rgba(10,10,10,.12); }
.ct-steps li p{ color:var(--muted); font-size:var(--fs-small); max-width:40ch; }
.ct-steps li b{ color:var(--ink); font-weight:600; }
.ct-form{ gap:1.25rem; background:#fff; border-radius:12px; padding:clamp(1.25rem,2.5vw,2.25rem); }
.ct-form input,.ct-form textarea{ background:#fff; }
.ct-need{ border:0; padding:0; margin:0; min-width:0; display:grid; gap:.75rem; }
.ct-need legend{ padding:0; float:left; width:100%; margin-bottom:.25rem; }
.ct-need legend + *{ clear:both; }
.ct-form .actions{ gap:1.25rem; }
.ct-done{ background:var(--ink); color:#fff; border-radius:10px; padding:clamp(1.25rem,2.5vw,2rem); display:grid; gap:.75rem; }
.ct-done[hidden]{ display:none; }
.ct-done .t-label{ color:var(--accent); display:inline-flex; align-items:center; gap:.6rem; }
.ct-done .t-label .dot{ background:var(--accent); animation:none; }
.ct-done .t-h3{ color:#fff; }
.ct-done .muted{ color:rgba(255,255,255,.7); }
.ct-done .link{ color:#fff; }
.ct-form.is-sent > :not(.ct-done){ opacity:.45; pointer-events:none; }
@media (min-width:1000px){ .ct-form-inner{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); } .ct-form-head{ position:sticky; top:calc(var(--header-h) + 1.5rem); } }

/* the map: embed with a place card, greyscale until hovered */
.ct-map-sec{ padding-block:var(--block); }
.ct-map-head{ display:grid; gap:1.25rem clamp(2rem,4vw,4rem); margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.ct-map-head .t-h2{ margin-top:1rem; }
.ct-map-head .muted{ max-width:44ch; }
@media (min-width:900px){ .ct-map-head{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:end; } .ct-map-head .muted{ justify-self:end; } }
.ct-map{ position:relative; border-radius:12px; overflow:clip; background:var(--bg-alt); height:clamp(320px,50vw,560px); }
.ct-map-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(1); transition:filter .5s ease; }
.ct-map:hover .ct-map-frame,.ct-map:focus-within .ct-map-frame{ filter:none; }
@media (hover:none){ .ct-map-frame{ filter:none; } }
.ct-place{ position:absolute; left:1rem; top:1rem; max-width:min(320px,calc(100% - 2rem)); background:#fff; border-radius:12px; padding:1.1rem 1.2rem 1.2rem; display:grid; gap:.6rem; box-shadow:0 10px 30px rgba(10,10,10,.12); }
.ct-place .t-label{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); }
.ct-place-addr{ color:var(--text); font-size:var(--fs-small); line-height:1.45; }
.ct-place-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:.25rem; }
.ct-place .btn--sm.btn-rise{ min-height:42px; padding:.6rem 1.1rem; font-size:.9375rem; }
@media (max-width:599px){ .ct-place{ left:.75rem; right:.75rem; top:auto; bottom:.75rem; max-width:none; } .ct-map{ height:clamp(380px,110vw,520px); } }

/* =====================================================================
   CASE STUDIES — list (case-studies.html) and detail pages (case-*.html)
   ===================================================================== */
.csl .sec-label,.cd .sec-label{ position:static; }
@media (min-width:900px){ .cd .grid > .sec-label{ position:sticky; top:calc(var(--header-h) + 1.5rem); } }

/* list hero */
.csl-hero{ padding-block:clamp(2rem,5vh,4rem) clamp(1rem,3vw,2.5rem); }
.csl-hero-inner{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:end; }
.csl-hero-copy{ display:grid; gap:1.25rem; }
.csl-hero-copy .t-hero{ max-width:16ch; font-size:clamp(2.35rem,1.1rem + 3.8vw,5rem); line-height:1.02; letter-spacing:-.035em; }
.csl-hero-side{ display:grid; gap:1.25rem; }
.csl-hero-side .t-lead{ max-width:46ch; color:var(--text); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
@media (min-width:900px){ .csl-hero-inner{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(2rem,5vw,6rem); } }

/* the list: editorial rows, image and text swap sides on even rows */
.csl-list-sec{ padding-block:clamp(2rem,4vw,3.5rem) var(--block); }
.case-list{ border-top:1px solid var(--line); }
.case-row{ border-bottom:1px solid var(--line); }
.case-link{ display:grid; gap:1.25rem var(--gap); padding-block:clamp(1.75rem,4vw,3.5rem); color:var(--ink); position:relative; }
.case-num{ color:var(--muted); }
.case-media{ margin:0; position:relative; aspect-ratio:16/10; border-radius:12px; overflow:clip; background:var(--bg-alt); }
.case-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.case-link:hover .case-media img,.case-link:focus-visible .case-media img{ transform:scale(1.04); }
.case-stat{ position:absolute; left:.9rem; bottom:.85rem; gap:.4rem; max-width:calc(100% - 1.8rem); overflow:hidden; text-overflow:ellipsis; }
.case-stat b{ font-weight:700; }
.case-body{ display:grid; gap:.75rem; align-content:center; }
.case-meta{ color:var(--muted); }
.case-title{ font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem); font-weight:700; letter-spacing:-.03em; line-height:1.08; text-wrap:balance; max-width:18ch; }
.case-summary{ color:var(--text); max-width:48ch; }
.case-cta{ margin-top:.5rem; }
.case-link:hover .case-title{ text-decoration:underline; text-underline-offset:.12em; text-decoration-thickness:2px; text-decoration-color:var(--accent); }
.case-link:hover .case-cta::after{ transform:translateX(.3em); }
.case-link:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:-4px; border-radius:12px; }
@media (min-width:900px){
  .case-link{ grid-template-columns:3rem minmax(0,6fr) minmax(0,5fr); column-gap:clamp(1.5rem,3vw,3rem); align-items:center; }
  .case-row:nth-child(even) .case-link{ grid-template-columns:3rem minmax(0,5fr) minmax(0,6fr); }
  .case-row:nth-child(even) .case-media{ order:3; }
  .case-row:nth-child(even) .case-body{ order:2; }
}
@media (min-width:1300px){ .case-link{ column-gap:clamp(2rem,4vw,5rem); } }

/* detail hero: title beside overview and facts, then the film */
.cd-hero{ --pad-t:clamp(2rem,5vh,4rem); --pad-b:clamp(2rem,4vh,3.5rem); padding-top:var(--pad-t); padding-bottom:var(--pad-b); }
.cd-hero-inner{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
.cd-hero-top{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:end; }
.cd-hero-copy{ display:grid; gap:1.25rem; }
.cd-hero-copy .sec-label a{ color:var(--muted); }
.cd-hero-copy .sec-label a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:.2em; }
.cd-hero-copy .t-hero{ max-width:16ch; font-size:clamp(2.25rem,1rem + 3.6vw,4.75rem); line-height:1.02; letter-spacing:-.035em; }
.cd-hero-side{ display:grid; gap:1.25rem; }
.cd-hero-side .t-lead{ max-width:50ch; color:var(--text); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.cd-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem var(--gap); padding-top:1rem; border-top:1px solid var(--line); }
.cd-facts li{ display:grid; gap:.2rem; min-width:0; }
.cd-facts .v{ color:var(--ink); font-weight:500; font-size:var(--fs-small); overflow-wrap:anywhere; }
@media (min-width:900px){ .cd-hero-top{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); column-gap:clamp(2rem,5vw,6rem); } }
@media (min-width:1100px){ .cd-hero-inner{ min-height:calc(100svh - var(--header-h) - var(--pad-t) - var(--pad-b)); grid-template-rows:auto minmax(340px,1fr); } }

/* detail sections */
.cd-sec{ padding-block:var(--block); }
.cd-sec--alt{ background:var(--bg-alt); }
.cd-brief{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.cd-brief .t-h2{ max-width:18ch; }
.cd-brief-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:700px){ .cd-brief-grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); } }
.cd-brief .fact p{ font-size:var(--fs-small); max-width:34ch; }
.cd-h2{ margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.steps--3{ grid-template-columns:1fr; }
@media (min-width:700px){ .steps--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cd-sec--alt .step{ border-top-color:rgba(10,10,10,.5); }
.cd-impact{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); }
.cd-impact .t-h2{ max-width:18ch; }
.cd-impact .t-lead{ max-width:60ch; color:var(--text); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.numbers--5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){ .numbers--5{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .numbers--5{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.numbers--5 .val{ font-size:clamp(2rem,1.4rem + 1.8vw,3.25rem); }
.cd-bts-head{ display:grid; gap:1rem; margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.cd-sec--alt .gal-btn{ background:#fff; }
/* free-standing gallery (outside the studio hero): the main tile sets the height */
@media (min-width:1100px){ .cs-gallery--free .gal-item--main .gal-btn{ aspect-ratio:16/10; } .cs-gallery--free .gal-btn img{ position:static; } .cs-gallery--free .gal-item:not(.gal-item--main) .gal-btn{ position:relative; } .cs-gallery--free .gal-item:not(.gal-item--main) .gal-btn img{ position:absolute; inset:0; } }

/* next case study */
.cd-next{ padding-block:var(--block); border-top:1px solid var(--line); }
.cd-next-link{ display:grid; gap:1.5rem var(--gap); align-items:center; color:var(--ink); border-radius:12px; }
.cd-next-copy{ display:grid; gap:.6rem; }
.cd-next-title{ font-size:clamp(1.75rem,1.2rem + 2vw,3rem); font-weight:700; letter-spacing:-.03em; line-height:1.05; max-width:16ch; text-wrap:balance; }
.cd-next-copy .arrow{ margin-top:.5rem; }
.cd-next-media{ display:block; aspect-ratio:16/10; border-radius:12px; overflow:clip; background:var(--bg-alt); }
.cd-next-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.cd-next-link:hover .cd-next-media img{ transform:scale(1.04); }
.cd-next-link:hover .cd-next-title{ text-decoration:underline; text-underline-offset:.12em; text-decoration-thickness:2px; text-decoration-color:var(--accent); }
.cd-next-link:hover .arrow::after{ transform:translateX(.3em); }
.cd-back{ margin-top:clamp(1.5rem,3vw,2.5rem); padding-top:1.25rem; border-top:1px solid var(--line); }
@media (min-width:900px){ .cd-next-link{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); column-gap:clamp(2rem,5vw,6rem); } }
/* chips on the film card never run past the frame */
.wk-reel-top{ flex-wrap:wrap; }
.wk-chip{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:600px){ .cd .wk-reel-top .wk-chip:last-child{ display:none; } }

/* =====================================================================
   HERO v5 — the big mark beside (or above) the statement, strip unchanged.
   Sizes follow the viewport height so header + hero stay one screen.
   ===================================================================== */
.hero-v5 .hero-v4-center{ grid-template-columns:minmax(0,1fr); gap:clamp(.9rem,2.2vh,1.5rem); }
.hero-logo{ display:grid; justify-items:center; gap:clamp(.4rem,1.2vh,.8rem); animation:hero-logo-in .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-logo img{ height:clamp(120px,24vh,220px); width:auto; display:block; }
.hero-copy{ display:grid; justify-items:center; gap:clamp(.7rem,1.8vh,1.2rem); min-width:0; }
.hero-v5 .pill{ display:none; }
.hero-v5 h1{ font-size:clamp(1.6rem,1rem + 3vw,2.25rem); max-width:18ch; }
.hero-v5 .sub{ font-size:clamp(.9375rem,.9rem + .3vw,1.0625rem); max-width:44ch; }
@keyframes hero-logo-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hero-logo{ animation:none; } }
@media (max-width:899px) and (max-height:700px){ .hero-v5 .sub{ display:none; } }
@media (max-width:899px) and (max-height:600px){ .hero-logo img{ height:118px; } }

@media (min-width:900px){
  /* mark on the left, statement on the right, the pair centred as one group */
  .hero-v5 .hero-v4-center{ grid-template-columns:auto minmax(0,34rem); justify-content:center; align-items:center; justify-items:start; text-align:left; column-gap:clamp(2.5rem,6vw,7rem); }
  .hero-logo img{ height:clamp(200px,38vh,440px); }
  .hero-copy{ justify-items:start; }
  .hero-v5 h1{ font-size:clamp(1.75rem,5.2vh,3.25rem); max-width:16ch; }
  .hero-v5 .sub{ font-size:clamp(1rem,2.2vh,1.1875rem); max-width:40ch; }
  .hero-v5 .actions{ justify-content:flex-start; }
}
@media (min-width:900px) and (min-height:860px){ .hero-v5 .pill{ display:inline-flex; } }

/* =====================================================================
   BLUE GROUND — site-wide. Everything that was white takes one tint of the
   brand blue; alternate sections and the footer step deeper; special bands
   step lighter. Small controls and cards (pills, chips, forms) stay white.
   ===================================================================== */
:root{
  --bg:#D3EAF8;              /* page, header, fly-out menu, showreel */
  --bg-alt:#C4E0F3;          /* alternate sections, quiet cards, image placeholders */
  --bg-blue-tint:#E7F4FC;    /* highlight bands and card hovers: a step lighter than the page */
  --line:#B7D4E6;            /* hairlines tuned to sit on the blue */
  --muted:#55646F;           /* secondary text, darkened to keep its contrast on blue */
}
.site-header{ background:rgba(211,234,248,.92); }
.showreel,.showreel-fixed{ background:var(--bg); }   /* the showreel sits on the page ground */
/* menu toggle and its close twin take the page ground instead of white (white pages are unaffected) */
.menu-toggle,.menu-close{ background:var(--bg); }
/* footer: the deepest step of the same blue, so every page lands on a grounded base */
.site-footer{
  --bg-alt:#BDDCF1;          /* footer ground, and the fill behind the outlined wordmark */
  --line:#A3C8E0;
  --muted:#4D5F6C;
  background:var(--bg-alt);
}

/* =====================================================================
   BLUE SURFACES — forms, cards and the map lose their white.
   Lightness steps: section #C4E0F3 < card #DFF0FA < field #EEF7FD,
   with a firmer blue border so every edge still reads.
   ===================================================================== */
:root{
  --surface:#DFF0FA;         /* cards: booking summary, brief form, map place card */
  --field:#EEF7FD;           /* inputs, selects, textareas, choice pills */
  --field-line:#8FB7D2;      /* their border */
}
.form input,.form textarea,.form select,
.book-form input,.book-form select,.book-form textarea,
.ct-form input,.ct-form textarea{ background-color:var(--field); border-color:var(--field-line); }
.form input:hover,.form textarea:hover,.form select:hover{ border-color:#5E8FAF; }
.form input:focus,.form textarea:focus,.form select:focus{ border-color:var(--ink); background-color:#F6FBFE; }
.form ::placeholder{ color:#6E8798; opacity:1; }
.chip span{ background:var(--field); border-color:var(--field-line); }
.chip input:hover + span{ border-color:#5E8FAF; }
.chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:#fff; }
.book-card,.ct-form{ background:var(--surface); }
.book-lines > div{ border-top-color:#B4D3E6; }
.book-lines > div:last-child{ border-bottom-color:#B4D3E6; }
.book-card-media{ background:var(--bg-alt); }

/* map: a blue wash over the greyscale tiles, lifted when the map is hovered or focused */
.ct-map{ background:var(--bg-alt); }
.ct-map::after{ content:""; position:absolute; inset:0; background:#BFDDF1; mix-blend-mode:multiply; pointer-events:none; transition:opacity .5s ease; }
.ct-map:hover::after,.ct-map:focus-within::after{ opacity:0; }
@media (hover:none){ .ct-map::after{ display:none; } }
.ct-place{ z-index:1; background:var(--surface); box-shadow:0 10px 30px rgba(14,60,90,.18); }