/* ============================================================
   CINEBROS — campaign studio
   Restraint is the brand. Yellow is spent sparingly, never on a
   button. Dark is the default identity; light is a full swap.
   ============================================================ */
:root{
  --ink:      #070706;
  --surface:  #0E0D0B;
  --surface-2:#171512;
  --bone:     #EFECE4;
  --mute:     #9B9284;
  --faint:    #6E6759;
  --rule:     rgba(239,236,228,.13);
  --rule-hi:  rgba(239,236,228,.30);
  --stock:    #F4E56C;      /* accent as a fill / marker */
  --stock-ink:#F4E56C;      /* accent as text */
  --on-stock: #14120E;

  --grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2833' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.4 0.4 0.4 0 -0.56'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --display: "Big Shoulders Display", "Arial Narrow", "Haettenschweiler", sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: clamp(1.35rem, 5vw, 5.5rem);
  --gap: clamp(4rem, 11vw, 11rem);
  --max: 1480px;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:      #F5F3EE;
    --surface:  #ECE9E1;
    --surface-2:#E1DDD2;
    --bone:     #17140F;
    --mute:     #67604F;
    --faint:    #8C8471;
    --rule:     rgba(23,20,15,.15);
    --rule-hi:  rgba(23,20,15,.34);
    --stock:    #E3D54B;
    --stock-ink:#6E6300;
    --on-stock: #14120E;
  }
}
:root[data-theme="light"]{
  --ink:      #F5F3EE;
  --surface:  #ECE9E1;
  --surface-2:#E1DDD2;
  --bone:     #17140F;
  --mute:     #67604F;
  --faint:    #8C8471;
  --rule:     rgba(23,20,15,.15);
  --rule-hi:  rgba(23,20,15,.34);
  --stock:    #E3D54B;
  --stock-ink:#6E6300;
  --on-stock: #14120E;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:1px solid var(--stock-ink); outline-offset:5px}
img,video{max-width:100%; display:block}

/* ---------- shared ---------- */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}

.eyebrow{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); margin:0 0 clamp(1.75rem,3.5vw,2.75rem);
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::before{content:""; width:.3rem; height:.3rem; background:var(--stock); flex:none}

.h-xl{
  font-family:var(--display); font-weight:500;
  font-size:clamp(3rem,9.5vw,9.5rem);
  line-height:.88; letter-spacing:.005em; text-transform:uppercase;
  margin:0; text-wrap:balance;
}
.h-lg{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.25rem,5.4vw,4.75rem);
  line-height:.92; letter-spacing:.01em; text-transform:uppercase;
  margin:0; text-wrap:balance;
}
.h-sm{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.45rem,2.3vw,2.05rem);
  line-height:1; letter-spacing:.015em; text-transform:uppercase;
  margin:0;
}
.bang{color:var(--stock-ink)}
.lede{font-size:clamp(1.05rem,.98rem + .45vw,1.25rem); line-height:1.55; max-width:42ch; color:var(--mute)}
.lede strong{color:var(--bone); font-weight:500}
.prose{max-width:52ch; color:var(--mute)}
.prose strong{color:var(--bone); font-weight:500}

/* quiet text link — the only "action" on the page */
.link{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--bone);
  border-bottom:1px solid var(--rule-hi); padding-bottom:.28rem;
  transition:border-color .2s ease, color .2s ease;
}
.link:hover{color:var(--stock-ink); border-color:var(--stock-ink)}

/* ---------- header ---------- */
.bar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.bar__in{
  max-width:var(--max); margin-inline:auto; padding:1.05rem var(--pad);
  display:flex; align-items:center; gap:1.75rem; flex-wrap:wrap;
}
.mark{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.75rem,2.4vw,2.5rem); letter-spacing:.05em;
  text-decoration:none; line-height:1;
  margin-right:auto;
}
.nav{display:flex; gap:1.9rem; flex-wrap:wrap}
.nav a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--mute); transition:color .18s ease;
}
.nav a:hover{color:var(--bone)}
@media (max-width:860px){ .nav a:not(.nav__last){display:none} }

/* ---------- hero ---------- */
.hero{padding-top:clamp(2.53125rem,6.75vw,5.625rem)}
.hero__slate{
  display:flex; gap:1.75rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin:0 0 clamp(2rem,5vw,3.5rem);
}
.hero__foot{
  display:grid; gap:clamp(1.75rem,4vw,4rem);
  margin-top:clamp(2rem,4.5vw,3.25rem); align-items:end;
}
@media (min-width:900px){ .hero__foot{grid-template-columns:1fr auto} }

/* ---------- media frames ---------- */
.frame{
  position:relative;
  aspect-ratio:16/9;
  background:
    radial-gradient(130% 100% at 28% 12%, rgba(244,229,108,.06), transparent 60%),
    linear-gradient(158deg, var(--surface-2), var(--surface) 58%, var(--ink));
  border:1px solid var(--rule);
  display:grid; place-items:center;
  overflow:hidden;
}
.frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grit); opacity:.42; mix-blend-mode:normal;
}
@media (min-width:900px){ .frame--reel{aspect-ratio:2.39/1} }

.ticks{position:absolute; inset:.75rem; pointer-events:none}
.ticks i{position:absolute; width:14px; height:14px; border:0 solid var(--rule-hi)}
.ticks i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.ticks i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.ticks i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.ticks i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

.frame__label{
  position:relative; z-index:2; text-align:center;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); display:grid; gap:1rem; justify-items:center; padding:1rem;
}
.frame__play{
  width:clamp(2.75rem,4.5vw,3.75rem); aspect-ratio:1;
  border:1px solid var(--rule-hi); border-radius:50%;
  display:grid; place-items:center; color:var(--mute);
}
.frame__play svg{width:34%; height:auto; display:block; translate:8% 0}
.frame__meta{
  position:absolute; z-index:2; bottom:1.5rem; left:1.6rem; right:1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}

/* ---------- output spec (drawn to true aspect ratios) ---------- */
.spec{
  display:flex; align-items:flex-end; gap:clamp(1.75rem,4vw,4rem);
  margin-top:clamp(2.5rem,5vw,4rem);
  overflow-x:auto; padding-bottom:1.25rem;
  scrollbar-width:thin;
}
.spec__item{flex:none; display:grid; gap:1rem; justify-items:start}
.spec__box{
  height:clamp(84px,11vw,138px);
  border:1px solid var(--rule-hi);
  background:linear-gradient(158deg, var(--surface-2), var(--surface));
  position:relative;
}
.spec__box::after{
  content:attr(data-ratio); position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--faint);
}
.spec__box--stills{box-shadow:6px -6px 0 -1px var(--surface), 6px -6px 0 0 var(--rule)}
.spec__meta{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); line-height:1.9;
}
.spec__meta b{display:block; color:var(--mute); font-weight:400}

/* ---------- real media inside frames ---------- */
.frame > .media{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  background:var(--ink);
}
.frame:has(.media)::after{opacity:.3}
.reel__btn{
  position:absolute; z-index:4; right:1.1rem; bottom:1.1rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); background:rgba(7,7,6,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(239,236,228,.34); padding:.65rem 1rem;
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.reel__btn:hover{background:var(--stock); color:var(--on-stock); border-color:var(--stock)}
.reel__btn svg{width:.72rem; height:.72rem; flex:none}

/* ---------- client strip ---------- */
.clients{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:flex; align-items:baseline; gap:clamp(1.25rem,3.5vw,2.75rem); flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
  border-top:1px solid var(--rule); padding-top:1.4rem;
}
.clients{display:grid; grid-template-columns:auto 1fr; gap:.9rem clamp(1.5rem,4vw,3.5rem); align-items:baseline}
.clients__lb{color:var(--faint); font-size:.68rem; white-space:nowrap}
.clients__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.85rem clamp(1.25rem,2.6vw,2.25rem); line-height:1.5}
.clients__list li{white-space:nowrap}
@media (max-width:640px){
  .clients{grid-template-columns:1fr}
  .clients__list{gap:.7rem 1.4rem}
  .clients__list li{white-space:normal}
}
/* breathing room between the client list and the rule into the next section */
.hero{padding-bottom:clamp(1.75rem,3.5vw,3.25rem)}
.foot__clients{max-width:66ch; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 1.6em}
.foot__clients>span{white-space:nowrap}
@media (max-width:760px){ .foot__clients{justify-content:flex-start; gap:0 1.3em} }


.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- skip link (WCAG 2.4.1) ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--stock); color:var(--on-stock);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.4rem; text-decoration:none;
}
.skip:focus{left:0}

/* stronger, always-visible focus (WCAG 2.4.7) */
:focus-visible{outline:3px solid var(--stock-ink); outline-offset:3px}
.contact :focus-visible{outline-color:var(--on-stock)}

/* ---------- work lead-in + campaign description ---------- */
.sec__intro{
  margin:1.25rem 0 0; color:var(--mute); max-width:46ch;
  font-size:clamp(1rem,.96rem + .3vw,1.125rem);
}
.case__desc{
  margin:.1rem 0 0; color:var(--mute); max-width:56ch;
  font-size:1rem; line-height:1.6;
}

/* native video controls need room to be reachable */
.frame > video.media{cursor:pointer}

/* ---------- legal pages ---------- */
.legal{max-width:70ch; margin-inline:auto; padding:clamp(3rem,7vw,6rem) var(--pad)}
.legal h1{font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(2.25rem,5vw,3.5rem); line-height:.95; letter-spacing:.01em; margin:0 0 .5rem}
.legal h2{font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1; letter-spacing:.015em; margin:2.5rem 0 .75rem}
.legal p, .legal li{color:var(--mute); line-height:1.7}
.legal a{color:var(--stock-ink)}
.legal__meta{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 2.5rem}
.legal__note{border:1px solid var(--rule-hi); padding:1.25rem 1.5rem; margin:2rem 0;
  font-size:.95rem; color:var(--bone)}


/* real frames inside the deliverables diagram */
.spec__box{position:relative; overflow:hidden}
.spec__box img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78}
.spec__box em{
  position:absolute; inset:auto 0 .5rem 0; text-align:center; font-style:normal;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; color:var(--bone);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.spec__box::after{content:none}

/* stills get their own grid so the asset band can't overflow */
.case__stills{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(1rem,2vw,1.5rem);
}
@media (max-width:760px){ .case__stills{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .case__stills{grid-template-columns:1fr} }
.case__stills .frame{width:100%; height:auto}

/* the band now holds the two format videos - give them more presence */
.case__row{height:clamp(300px,36vw,520px)}


/* still 01 fills the leftover width of the band at the band's height */
.case__row .frame.frame--fill{
  flex:1 1 auto; min-width:240px; width:auto; height:100%;
  aspect-ratio:auto;
}
.case__row .frame.frame--fill .media{width:100%; height:100%; object-fit:cover}

/* the remaining two stills split the row evenly */
.case__stills{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){ .case__stills{grid-template-columns:1fr} }


/* name / address / phone block - kept consistent with the Google listing */
.nap{
  margin-top:2.25rem; font-style:normal;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); line-height:2;
}


/* ============================================================
   FILM BEHAVIOUR
   Four effects, all drawn from how film actually works.
   Every one is disabled under prefers-reduced-motion.
   ============================================================ */

/* --- 1. live grain: cycle the noise so frames feel projected --- */
@keyframes grainshift{
  0%  {transform:translate(0,0)}
  20% {transform:translate(-2%,1%)}
  40% {transform:translate(1%,-2%)}
  60% {transform:translate(-1%,-1%)}
  80% {transform:translate(2%,1%)}
  100%{transform:translate(0,0)}
}
.frame::after{
  width:106%; height:106%; left:-3%; top:-3%;
  animation:grainshift .7s steps(5,end) infinite;
  will-change:transform;
}

/* --- 2. hover-to-scrub: cursor becomes a playhead --- */
.frame--scrub{cursor:ew-resize}
.frame__scrub{
  position:absolute; z-index:5; left:0; right:0; bottom:0; height:2px;
  background:var(--rule); pointer-events:none; opacity:0;
  transition:opacity .25s ease;
}
.frame--scrub:hover .frame__scrub, .frame--scrub:focus-within .frame__scrub{opacity:1}
.frame__scrub i{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:var(--stock); display:block;
}
.frame__hint{
  position:absolute; z-index:5; right:1.1rem; bottom:1rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); text-shadow:0 1px 6px rgba(0,0,0,.95);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.frame--scrub:hover .frame__hint{opacity:.85}

/* --- 3. running timecode in the header --- */
.tc{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.16em;
  color:var(--bone); font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; gap:.6rem;
  margin-right:1.5rem; padding:.35rem .7rem;
  border:1px solid var(--rule); background:var(--surface);
}
.tc::before{
  content:""; width:.45rem; height:.45rem; border-radius:50%;
  background:var(--signal); flex:none;
  animation:recblink 1.6s steps(1,end) infinite;
}
@keyframes recblink{0%,60%{opacity:1}61%,100%{opacity:.18}}
@media (prefers-reduced-motion:reduce){ .tc::before{animation:none} }
/* (timecode shows on phones too - compact styles further down) */

/* --- 4. frame-up: letterbox bars pull back off the hero --- */
.frame--reel{position:relative}
.bars{position:absolute; inset:0; z-index:6; pointer-events:none}
.bars i{
  position:absolute; left:0; right:0; height:50%;
  background:var(--ink);
  transition:transform 1.1s cubic-bezier(.76,0,.24,1);
}
.bars i:first-child{top:0;    transform:translateY(0)}
.bars i:last-child {bottom:0; transform:translateY(0)}
.framed-up .bars i:first-child{transform:translateY(-100%)}
.framed-up .bars i:last-child {transform:translateY(100%)}

@media (prefers-reduced-motion:reduce){
  .frame::after{animation:none; width:100%; height:100%; left:0; top:0}
  .bars{display:none}
  .frame__scrub{display:none}
}


/* ============================================================
   REVEALS - cuts and wipes, not fades.
   Hidden states apply ONLY under html.anim, which JS adds.
   No JS (or a thrown error) = everything visible. Never a blank page.
   ============================================================ */

/* headlines wipe up from behind an edge, like a title card */
html.trg .rv-head{
  clip-path:inset(0 0 102% 0);
  transform:translateY(.2em);
  will-change:clip-path, transform;
}
html.trg .rv-head.in{
  clip-path:inset(0 0 -10% 0);
  transform:none;
  filter:blur(0);
  transition:clip-path 1.15s cubic-bezier(.16,1,.3,1),
             transform 1.15s cubic-bezier(.16,1,.3,1),
             filter .9s ease-out;
}

/* body copy: a short lift, nothing showy */
html.trg .rv-soft{opacity:0; transform:translateY(1rem); will-change:opacity, transform}
html.trg .rv-soft.in{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .95s ease, transform 1.05s cubic-bezier(.16,1,.3,1), filter .85s ease-out;
}

/* mono eyebrows type on like a slate being written */
html.trg .eyebrow__t{
  display:inline-block; overflow:hidden; white-space:nowrap;
  vertical-align:bottom; width:0;
}
html.trg .eyebrow.in .eyebrow__t{width:var(--tw); transition-delay:var(--bd, 0ms)}

/* per-line masking - each line rises out from behind its own edge */
html.trg .ln{display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em}
html.trg .ln__i{display:block; transform:translateY(105%)}
html.trg .rv-lines.in .ln__i{
  transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--bd, 0ms) + var(--ld, 0ms));
}

/* work tiles wipe in like frames landing on a light table */
html.anim .rv-tile{
  clip-path:inset(0 100% 0 0);
  transform:scale(1.025);
  will-change:clip-path, transform;
}
html.anim .rv-tile.in{
  clip-path:inset(0 0 0 0);
  transform:none;
  transition:clip-path 1.15s cubic-bezier(.16,1,.3,1),
             transform 1.15s cubic-bezier(.16,1,.3,1);
}


@media (prefers-reduced-motion:reduce){
  html.trg .rv-head, html.trg .rv-soft, html.trg .rv-text .tw,
  html.anim .rv-tile{
    clip-path:none !important; transform:none !important; opacity:1 !important;
  }
  html.trg .eyebrow__t{width:auto !important; overflow:visible}
  html.trg .ln__i{transform:none !important}
  html.trg .ln{overflow:visible}

}


/* ============================================================
   SCROLL-LINKED REVEALS
   Where the browser supports scroll-driven animations, progress is
   tied to the element's position in the scrollport - so the motion
   tracks the scroll wheel exactly instead of firing a timer and
   running on its own clock. html.sda is set by feature detection;
   browsers without it fall back to the timed version below.
   ============================================================ */
@keyframes sdaSoft{
  from{opacity:0; transform:translateY(1rem)}
  to  {opacity:1; transform:none}
}
@keyframes sdaTile{
  from{clip-path:inset(0 100% 0 0); transform:scale(1.025)}
  to  {clip-path:inset(0 0 0 0);    transform:none}
}
@keyframes sdaHead{
  from{clip-path:inset(0 0 102% 0); transform:translateY(.2em); opacity:.2}
  to  {clip-path:inset(0 0 -10% 0); transform:none;             opacity:1}
}
@keyframes sdaLine{
  from{transform:translateY(105%)}
  to  {transform:translateY(0)}
}
@keyframes sdaRow{
  from{opacity:0; transform:translateX(-1.1rem)}
  to  {opacity:1; transform:none}
}

html.sda .rv-tile{
  animation-timeline:view();
  animation-fill-mode:both;
  animation-timing-function:linear;   /* scroll position IS the easing */
  animation-duration:1ms;             /* ignored on a view timeline */
}
/* each element finishes well before it reaches the middle of the screen */
/* Ranges end in `cover`, not `entry`: an entry range is only as tall as the
   element itself, so a one-line paragraph would finish in ~16px of scroll and
   snap. A cover range is viewport-relative, giving every element the same
   comfortable reveal distance no matter its size. */
html.sda .rv-tile{animation-name:sdaTile;
  animation-range:entry calc(0% + (var(--i, 0) * 3.5%)) cover calc(30% + (var(--i, 0) * 3.5%))}


@media (prefers-reduced-motion:reduce){
  html.sda .rv-tile{animation:none !important}
}


/* ============================================================
   PAGE TEXTURE
   Grain over the whole page, not just inside the frames, the way
   a projected print carries it everywhere. Sits under the header
   so the nav stays crisp, and never intercepts a click.
   ============================================================ */
:root{ --vignette:rgba(0,0,0,.42); }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --vignette:rgba(60,50,35,.12); } }
:root[data-theme="light"]{ --vignette:rgba(60,50,35,.12); }

/* The texture IS the background. It sits behind every element (z-index -1)
   so it never lands on text or footage, its average brightness is locked to
   the exact ground colour so it cannot read as grey, and it is static - real
   grain is even and dense, not twinkling specks. */
:root{ --grain-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.24 0 0 0 -0.0925 0.24 0 0 0 -0.0925 0.24 0 0 0 -0.0965 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --grain-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.09 0 0 0 0.9158 0.09 0 0 0 0.9079 0.09 0 0 0 0.8883 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); } }
:root[data-theme="light"]{ --grain-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.09 0 0 0 0.9158 0.09 0 0 0 0.9079 0.09 0 0 0 0.8883 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); }

body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(130% 100% at 50% 40%, transparent 58%, var(--vignette) 100%),
    var(--grain-bg);
  background-size:100% 100%, var(--grain-size,240px) var(--grain-size,240px);
  background-repeat:no-repeat, repeat;
}

/* no grain on footage or images - background only */
.frame::after{content:none !important; animation:none !important}

/* Film stock. Real per-pixel grain (generated in JS, mean-locked to the
   ground colour) that changes every frame at 24fps, plus rare, faint print
   damage. Lives behind everything; the vignette in body::after sits above it. */
.film{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:strict}
.film__grain{position:absolute; inset:0; width:100%; height:100%}
.film__dmg{position:absolute; inset:0; width:100%; height:100%}
html.film-on body::after{
  background-image:radial-gradient(130% 100% at 50% 40%, transparent 58%, var(--vignette) 100%);
  background-size:100% 100%; background-repeat:no-repeat;
}



/* ---------- sections ---------- */
.sec{padding-block:var(--gap)}
.sec--rule{border-top:1px solid var(--rule)}
.split{display:grid; gap:clamp(2rem,5vw,5rem); grid-template-columns:1fr}
@media (min-width:960px){ .split{grid-template-columns:1fr .85fr; align-items:start} }
.stack{display:grid; gap:1.5rem}

/* ---------- work: one campaign, shown as its full asset set ---------- */
.case{display:grid; gap:clamp(1.25rem,2.5vw,1.75rem); margin-top:clamp(2.5rem,5vw,4rem)}
.case__line{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
  border-bottom:1px solid var(--rule); padding-bottom:.9rem;
}
.case__title{margin:0 0 .5rem}
.case__tag{
  position:absolute; z-index:3; top:.75rem; left:.75rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); border:1px solid var(--rule); padding:.25rem .5rem;
}
.frame__tag{
  position:absolute; z-index:2; top:.9rem; left:1.1rem; right:1.1rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); text-shadow:0 1px 6px rgba(0,0,0,.95);
}
/* the asset band: every frame shares one height, width follows its ratio */
.case__row{
  display:flex; align-items:stretch; gap:clamp(1rem,2vw,1.5rem);
  height:clamp(250px,29vw,440px);
  overflow-x:auto; padding-bottom:.75rem; scrollbar-width:thin;
}
.case__row .frame{height:100%; width:auto; flex:none}

/* ---------- the month ---------- */
.month{display:grid; margin-top:clamp(2.5rem,5vw,4rem)}
.phase{
  display:grid; gap:.65rem 3rem; padding-block:clamp(1.75rem,3.5vw,2.75rem);
  border-top:1px solid var(--rule); grid-template-columns:1fr;
}
.phase:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:860px){ .phase{grid-template-columns:18rem 1fr; align-items:baseline} }
.phase__what{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.4rem,2.2vw,1.9rem); line-height:1; letter-spacing:.015em;
}
.phase__body{color:var(--mute); max-width:48ch; margin:0}

/* ---------- capabilities ---------- */
.caps{
  list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0;
  display:grid; grid-template-columns:1fr;
}
@media (min-width:640px){ .caps{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .caps{grid-template-columns:repeat(3,1fr)} }
.caps li{
  border-top:1px solid var(--rule);
  padding:1rem 2rem 1rem 0;
  font-size:.98rem; color:var(--mute);
}

/* ---------- studio ---------- */
.bio{display:grid; gap:.4rem}
.bio__name{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.35rem,2.1vw,1.85rem); line-height:1; letter-spacing:.015em; margin:0;
}
.bio__role{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--stock-ink); margin:0 0 .5rem;
}
.quote{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.85rem,4vw,3.2rem); line-height:1; letter-spacing:.015em;
  margin:0; text-wrap:balance;
}

/* ---------- contact ---------- */
.contact{padding-block:clamp(4.5rem,10vw,9rem); border-top:1px solid var(--rule)}
.mail{
  display:inline-block; margin-top:clamp(1.75rem,4vw,2.75rem);
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.9rem,6vw,5rem); line-height:1; letter-spacing:.01em;
  text-decoration:none; color:var(--bone);
  border-bottom:1px solid var(--rule-hi); padding-bottom:.15em;
  transition:color .2s ease, border-color .2s ease;
  word-break:break-word;
}
.mail:hover{color:var(--stock-ink); border-color:var(--stock-ink)}

/* ---------- footer ---------- */
.foot{padding-block:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--rule)}
.foot__grid{display:flex; gap:1.75rem clamp(2rem,6vw,5rem); flex-wrap:wrap; justify-content:space-between; align-items:baseline}
.foot__nav{display:flex; gap:1.5rem; flex-wrap:wrap}
.foot a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); text-decoration:none;
}
.foot a:hover{color:var(--bone)}
.foot .mark{margin:0}
.foot__note{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.4rem; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; line-height:1.8; color:var(--faint);
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between;
}
.chip{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--rule); padding:.3rem .6rem}
.chip::before{content:""; width:.3rem; height:.3rem; background:var(--stock)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* ============================================================
   CALL SHEET (contact) + END CARD (footer)
   Appended last so it wins the cascade over the older rules.
   ============================================================ */
.contact.contact--sheet{
  padding-block:clamp(5rem,11vw,10rem) clamp(3.5rem,7vw,6rem);
  border-top:1px solid var(--rule);
}
.cs__title{max-width:none; margin:0 0 clamp(2.75rem,5.5vw,4.5rem)}

.cs{
  margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule-hi); border-left:1px solid var(--rule);
}
.cs__cell{
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:clamp(1.25rem,2.4vw,2.1rem);
  display:flex; flex-direction:column; gap:1rem; min-width:0;
  transition:background-color .25s ease;
}
.cs__cell:hover{background:color-mix(in srgb, var(--surface) 70%, transparent)}
.cs__cell--wide{grid-column:span 2}
.cs dt{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint);
}
.cs dd{margin:0; color:var(--bone); font-size:1.05rem; line-height:1.45; overflow-wrap:anywhere}
.cs__sub{display:block; margin-top:.35rem; color:var(--mute); font-size:.92rem}
.cs__base{font-style:normal}

.cs__phone{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.75rem,7vw,6rem); line-height:.92; letter-spacing:.01em;
  color:var(--bone); text-decoration:none; font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
.cs__phone:hover{color:var(--stock-ink)}
.cs__link{
  color:var(--bone); text-decoration:none;
  border-bottom:1px solid var(--rule-hi); padding-bottom:.18rem;
  transition:color .2s ease, border-color .2s ease;
}
.cs__link:hover{color:var(--stock-ink); border-color:var(--stock-ink)}

.cs__live{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone);
}
.cs__dot{width:.55rem; height:.55rem; border-radius:50%; background:var(--faint); flex:none}
.cs__live[data-open="true"] .cs__dot{
  background:var(--stock);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--stock) 55%, transparent);
  animation:livepulse 2.4s ease-out infinite;
}
@keyframes livepulse{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb, var(--stock) 55%, transparent)}
  70% {box-shadow:0 0 0 .55rem color-mix(in srgb, var(--stock) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--stock) 0%, transparent)}
}
@media (prefers-reduced-motion:reduce){ .cs__live[data-open="true"] .cs__dot{animation:none} }

@media (max-width:900px){ .cs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .cs{grid-template-columns:1fr} .cs__cell--wide{grid-column:auto} }

/* end card */
.foot.foot--credits{padding:clamp(2.75rem,5vw,3.75rem) 0 0; border-top:1px solid var(--rule); overflow:hidden}
.foot__top{display:flex; justify-content:space-between; align-items:baseline; gap:1.25rem 2.5rem; flex-wrap:wrap}
.foot--credits .foot__nav{gap:1.6rem}
.foot__totop{color:var(--bone) !important}
.foot--credits .foot__note{margin-top:clamp(2rem,4vw,3rem)}
.foot__mark{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  margin-bottom:0;                    /* fully visible: a crop would depend on the exact font metrics */
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  line-height:.92; letter-spacing:.005em; white-space:nowrap;
  color:var(--surface-2); user-select:none; pointer-events:none;
  font-size:22vw;                      /* fallback; JS fits it to the exact width */
}
.foot__mark span{display:inline-block}

/* ============================================================
   TEXT REVEALS - triggered, not scrubbed.
   A scroll-scrubbed fade parks text half-faded whenever you stop
   scrolling, which reads as haze. These fire once as a block comes
   into view and always land fully legible.
   ============================================================ */
html.trg .rv-text .tw{
  display:inline-block; opacity:0; transform:translateY(.42em);
}
html.trg .rv-text.in .tw{
  opacity:1; transform:none;
  transition:opacity .9s ease, transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--bd, 0ms) + var(--li, 0) * 95ms);
}
html.trg .rv-soft.in{transition-delay:var(--bd, 0ms) !important}

/* entering from the top edge (scrolling back up): the same gestures, mirrored */
html.trg .rv-head.rv-up:not(.in){clip-path:inset(102% 0 0 0); transform:translateY(-.2em)}
html.trg .rv-soft.rv-up:not(.in){transform:translateY(-1rem)}
html.trg .rv-text.rv-up:not(.in) .tw{transform:translateY(-.42em)}
html.trg .rv-lines.rv-up:not(.in) .ln__i{transform:translateY(-105%)}

/* process rows: the rule draws across, then the step, title and copy rise
   in a short cascade. Triggered (plays fully) and replays like the text. */
.phase{position:relative}
html.trg .rv-row{border-top-color:transparent}
html.trg .rv-row::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--rule); transform:scaleX(0); transform-origin:left center;
}
html.trg .rv-row.in::after{transform:none; transition:transform 1.1s cubic-bezier(.65,0,.35,1) var(--bd, 0ms)}
html.trg .rv-row > *{opacity:0; transform:translateY(.9rem)}
html.trg .rv-row.rv-up:not(.in) > *{transform:translateY(-.9rem)}
html.trg .rv-row.in > *{
  opacity:1; transform:none;
  transition:opacity .9s ease, transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--bd, 0ms) + 160ms);
}
html.trg .rv-row.in > .phase__body{transition-delay:calc(var(--bd, 0ms) + 280ms)}
@media (prefers-reduced-motion:reduce){
  html.trg .rv-row > *{opacity:1 !important; transform:none !important}
  html.trg .rv-row::after{transform:none !important}
}

/* ============================================================
   CONTRAST PASS - the near-black ground needs brighter mid-tones.
   Secondary copy, labels and hairlines step up; yellow marks the
   structure (process steps, section markers, hovers) in small doses.
   ============================================================ */
:root{
  --mute:#C4BCAD;                    /* secondary copy  ~10.5:1 on ground */
  --faint:#999080;                   /* labels          ~6.3:1  */
  --rule:rgba(239,236,228,.20);
  --rule-hi:rgba(239,236,228,.42);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --mute:#4E4738; --faint:#686150;
    --rule:rgba(23,20,15,.22); --rule-hi:rgba(23,20,15,.44);
  }
}
:root[data-theme="light"]{
  --mute:#4E4738; --faint:#686150;
  --rule:rgba(23,20,15,.22); --rule-hi:rgba(23,20,15,.44);
}

/* small mono labels: still quiet, now legible */
.eyebrow{font-size:.72rem; color:var(--mute)}
.eyebrow::before{width:.36rem; height:.36rem}
.hero__slate, .case__line{font-size:.72rem}
.case__line > :first-child{color:var(--bone)}
.case__tag, .frame__tag{font-size:.64rem}
.spec__box::after{font-size:.64rem}
.spec__meta, .bio__role, .foot__note{font-size:.7rem}
.cs dt{font-size:.7rem}
.clients__lb{font-size:.7rem}

/* secondary copy a touch larger */
.phase__body{font-size:1.05rem; line-height:1.6}
.caps li{font-size:1rem}
.cs__sub{font-size:.95rem}

/* yellow, spent on structure */
.month{counter-reset:phase}
.phase__what{position:relative; padding-left:2.9rem}
.phase__what::before{
  counter-increment:phase; content:counter(phase, decimal-leading-zero);
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:.74rem; font-weight:400; letter-spacing:.2em; line-height:1;
  color:var(--stock-ink);
}
@media (min-width:860px){ .phase{grid-template-columns:21rem 1fr} }
.nav a{transition:color .18s ease, box-shadow .18s ease}
.nav a:hover{box-shadow:inset 0 -1px 0 var(--stock)}
.caps li{transition:color .2s ease, border-color .2s ease}
.caps li:hover{color:var(--bone); border-top-color:var(--stock)}
.foot a:hover{color:var(--stock-ink)}
/* take counter: which visit this is, slate-style, beside the timecode */
.tc__take{
  display:inline-flex; align-items:center; gap:.45em;
  padding-left:.75rem; margin-left:.1rem; border-left:1px solid var(--rule);
  color:var(--faint);
}
.tc__take b{font-weight:400; color:var(--bone)}
.tc__take.is-new b{animation:takeIn .7s cubic-bezier(.16,1,.3,1) both .5s}
@keyframes takeIn{from{opacity:0; transform:translateY(-.5em)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .tc__take.is-new b{animation:none} }
/* header: wordmark left, timecode chip dead centre, menu right.
   The side columns can grow but never shrink below their content, so the
   chip sits at true centre whenever there is room and never overlaps. */
.bar__in{
  display:grid; grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
  align-items:center; column-gap:1.25rem;
}
.bar__in > .mark{justify-self:start; margin-right:0}
.bar__in > .tc{justify-self:center; margin-right:0}
.bar__in > .nav{justify-self:end}

/* timecode + take: quieter - smaller, greyer, the red dot does the talking */
.tc{
  display:inline-flex; font-size:.68rem; letter-spacing:.14em; gap:.5rem;
  padding:.26rem .58rem; color:var(--mute);
  border-color:color-mix(in srgb, var(--rule) 80%, transparent);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
}
.tc::before{width:.38rem !important; height:.38rem !important;
  box-shadow:0 0 .3rem color-mix(in srgb, var(--signal) 40%, transparent) !important}
.tc__take{padding-left:.55rem; gap:.4em}
.tc__take b{color:var(--mute)}

@media (max-width:1199px){ .nav a:not(.nav__last){display:none} }
@media (max-width:860px){
  .bar__in{column-gap:.75rem}
  .tc{font-size:.6rem; letter-spacing:.08em; gap:.4rem; padding:.24rem .45rem}
  .tc__take{padding-left:.42rem}
}
@media (max-width:400px){
  .bar__in{column-gap:.6rem}
  .bar .mark{font-size:1.6rem}          /* timecode also drops its hours digits here */
  .tc{font-size:.56rem; letter-spacing:.05em; gap:.35rem; padding:.22rem .4rem}
  .tc__take{padding-left:.36rem}
}
@media (max-width:350px){ .bar .mark{font-size:1.3rem} .nav a{letter-spacing:.06em; font-size:.64rem} .bar__in{column-gap:.5rem} }
/* phones only: a larger Contact link so the right side balances the wordmark */
@media (max-width:700px){ .nav a.nav__last{font-size:.86rem; letter-spacing:.12em} }
@media (max-width:400px){ .nav a.nav__last{font-size:.8rem; letter-spacing:.1em} }
@media (max-width:350px){ .nav a.nav__last{font-size:.72rem; letter-spacing:.08em} }

/* local-SEO link rows in the footer */
.foot__grp{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-top:1.1rem; color:var(--faint)}
.foot__grp b{font-weight:400; opacity:.8; margin-right:.3rem}
.foot__grp a{color:var(--mute)}
/* header wordmark: heavier cut */
.bar .mark{font-weight:700; letter-spacing:.04em}
/* the tagline's three words echo the headline's yellow "!" */
/* Same yellow as the "!", tuned for small type. A big flat glyph shows its
   colour at full strength; small text is mostly antialiased edge pixels that
   blend with the black and read darker and browner. Matching the *rendered*
   average (measured against the "!") needs a slightly brighter tint and a
   hairline of stroke - on dark only; light mode uses the deep gold as before. */
.lede .hl{color:#FFF076; font-weight:600; -webkit-text-stroke:.5px currentColor}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .lede .hl{color:var(--stock-ink); -webkit-text-stroke:0} }
:root[data-theme="light"] .lede .hl{color:var(--stock-ink); -webkit-text-stroke:0}
/* record tally: camera-red dot beside the timecode. Slow, soft blink -
   on for most of the beat, a short fade out and back, never a strobe. */
:root{--signal:#E3392E}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--signal:#C9281D} }
:root[data-theme="light"]{--signal:#C9281D}
.tc::before{
  width:.5rem; height:.5rem;
  box-shadow:0 0 .45rem color-mix(in srgb, var(--signal) 55%, transparent);
  animation:recpulse 2.7s linear infinite;
}
/* film-lamp flicker, not a metronome: a quick stutter, then a short dim, then steady */
@keyframes recpulse{
  0%,44%{opacity:1}
  46%{opacity:.18}
  49%{opacity:1}
  51%{opacity:.35}
  54%{opacity:.95}
  56%,68%{opacity:.16}
  71%{opacity:1}
  100%{opacity:1}
}
@media (prefers-reduced-motion:reduce){ .tc::before{animation:none} }
/* anchor jumps land with breathing room below the sticky header on small screens */
@media (max-width:860px){ section[id]{scroll-margin-top:1.75rem} }
/* crew: names a touch larger, each on its own ruled line so the pair
   fills the column instead of huddling at the bottom */
.cols2{display:grid}
.cols2 .bio{gap:.75rem; padding-block:clamp(1.5rem,2.8vw,2.25rem); border-top:1px solid var(--rule)}
.cols2 .bio:last-child{border-bottom:1px solid var(--rule)}
.bio__mail{
  justify-self:start; margin-top:.15rem; color:var(--mute); text-decoration:none;
  font-size:.98rem; overflow-wrap:anywhere;
  border-bottom:1px solid var(--rule-hi); padding-bottom:.12rem;
  transition:color .2s ease, border-color .2s ease;
}
.bio__mail:hover{color:var(--stock-ink); border-color:var(--stock-ink)}
.bio__name{font-size:clamp(1.6rem,2.6vw,2.35rem); letter-spacing:.02em}
.bio__role{font-size:.76rem; letter-spacing:.2em; margin:0}
/* end-card wordmark: one shade above the panel tone */
.foot__mark{color:#1D1B17}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .foot__mark{color:var(--surface-2)} }
:root[data-theme="light"] .foot__mark{color:var(--surface-2)}


/* ---- content pages ---- */
.pg{padding-block:clamp(2.25rem,5vw,4.25rem) clamp(2.25rem,5vw,4rem)}
.crumbs{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.crumbs a{text-decoration:none; color:var(--mute)} .crumbs a:hover{color:var(--stock-ink)}
.crumbs i{font-style:normal; margin:0 .6em; opacity:.6}
.pg__h1{font-family:var(--display); font-weight:500; text-transform:uppercase; margin:0; text-wrap:balance;
  font-size:clamp(2.7rem,7.4vw,6.75rem); line-height:.9; letter-spacing:.005em}
.pg .lede{margin:clamp(1.25rem,2.6vw,2rem) 0 0; max-width:48ch}
.pg__cta .link{overflow-wrap:anywhere}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pg__cta{align-items:center; display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:clamp(1.5rem,3vw,2.25rem)}
.blk{border-top:1px solid var(--rule); padding-block:clamp(2.5rem,6vw,5rem)}
.blk__grid{display:grid; gap:clamp(1.5rem,4vw,4rem)}
@media (min-width:900px){ .blk__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.blk h2{font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.01em; line-height:.95; margin:0 0 1rem;
  font-size:clamp(2rem,4.2vw,3.6rem); text-wrap:balance}
.blk p{color:var(--mute); max-width:56ch; margin:0 0 1.1rem}
.blk p strong{color:var(--bone); font-weight:500}
.blk p a, .faq p a{color:var(--bone); text-decoration-color:var(--stock-ink); text-underline-offset:.2em}
.blk p a:hover, .faq p a:hover{color:var(--stock-ink)}
.rows{list-style:none; margin:0; padding:0}
.rows li{display:grid; gap:.3rem; padding:1.15rem 0; border-top:1px solid var(--rule)}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.rows b{font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.015em; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1; color:var(--bone)}
.rows span{color:var(--mute); max-width:60ch}
.faq h3{font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.015em; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.05; margin:0 0 .5rem}
.faq .q{padding:1.25rem 0; border-top:1px solid var(--rule)}
.faq .q:last-child{border-bottom:1px solid var(--rule)}
.faq p{margin:0; color:var(--mute); max-width:60ch}
.chips{display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:0; padding:0}
.chips a{display:inline-block; text-decoration:none; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); border:1px solid var(--rule-hi); padding:.6rem .9rem; transition:color .18s, border-color .18s}
.chips a:hover{color:var(--stock-ink); border-color:var(--stock-ink)}
.cta{border-top:1px solid var(--rule); padding-block:clamp(3rem,7vw,6rem)}
.cta h2{font-family:var(--display); font-weight:500; text-transform:uppercase; line-height:.92; margin:0 0 1.25rem; font-size:clamp(2.2rem,5.4vw,4.75rem); text-wrap:balance}
.cta p{color:var(--mute); margin:0 0 1.5rem; max-width:48ch}
.cta .pg__cta{margin-top:0}
.cta .link{font-size:1rem}
.cta__phone{font-family:var(--display); font-weight:500; font-size:clamp(2rem,4vw,3.25rem); text-decoration:none; letter-spacing:.02em}
.cta__phone:hover{color:var(--stock-ink)}
.foot__grp{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-top:1.1rem; color:var(--faint)}
.foot__grp b{font-weight:400; color:var(--faint); opacity:.8; margin-right:.3rem}
.foot__grp a{color:var(--mute)}
.case.case--pg{margin-top:0}
/* links inside word-split paragraphs: the underline is a background that
   draws left-to-right after the words have landed (a text-decoration would
   underline only the gaps between the animated words) */
html.trg .rv-text a{
  text-decoration:none; padding-bottom:.1em;
  background:linear-gradient(var(--stock-ink),var(--stock-ink)) 0 100% / 0% 1px no-repeat;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size .8s cubic-bezier(.16,1,.3,1) .7s, color .18s;
}
html.trg .rv-text.in a{background-size:100% 1px}
@media (prefers-reduced-motion:reduce){ html.trg .rv-text a{transition:none; background-size:100% 1px} }

.rows a{color:var(--bone); text-decoration-color:var(--stock-ink); text-underline-offset:.2em}
.rows a:hover{color:var(--stock-ink)}