/* ============================================================
   SOCIAL CURRENCY MARKETING CO.
   Palette supplied by client. Logo + typefaces are PLACEHOLDERS.
   ============================================================ */
:root{
  --ground:#8B0519;        /* client hex 1 */
  --ink:#F2E5C5;           /* client hex 2 */
  --wine:#A81E33;          /* client hex 3 */
  --deep:#5E0311;          /* client hex 4 */

  --ground-deep:#45020D;   /* derived: darker ground for panel contrast */
  --ink-muted:rgba(242,229,197,.80);
  --ink-faint:rgba(242,229,197,.62);
  --hair:rgba(242,229,197,.20);

  /* Archivo carries the bold voice; Fraunces is the elevated accent, used sparingly */
  --display:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui:"Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --serif:"Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* wordmark face — closest available match to the supplied logo */
  --logo:"Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  /* Condensed heavy display. Every fallback is also condensed on purpose:
     the statement's font-size is width-critical, so a wide fallback would
     break the one-line rule before the webfont lands. */
  --impact:"Anton", "Archivo Narrow", "Haettenschweiler", "Arial Narrow", "Impact", sans-serif;

  --shell:clamp(20px, 5vw, 76px);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.6;
  /* clip, not hidden: hidden turns body into its own scroll box, which
     silently breaks every position:sticky element on the site (founder
     portrait, service names, the home statement band). html keeps
     overflow-x:hidden, which goes to the viewport and stops sideways scroll. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* ---- grain + ambient glow, the reference's atmosphere ---- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.07;mix-blend-mode:overlay;
}
.glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}

/* ---- type scale ---- */
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}

/* the elevated accent — italic Fraunces, never more than a line at a time */
.serif{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.005em;text-transform:none;
}
/* small refined line sitting above a heavy caps statement */
.lead-in{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:.34em;line-height:1.1;letter-spacing:-.01em;
  text-transform:none;margin-bottom:.18em;color:var(--ink);
}
.d-xl{font-size:clamp(1.7rem, 7vw, 6.8rem)}
.d-lg{font-size:clamp(1.7rem, 5.4vw, 4.6rem)}
.d-md{font-size:clamp(1.7rem, 4.2vw, 3.3rem)}
.d-sm{font-size:clamp(1.4rem, 3vw, 2.2rem)}
/* The standalone positioning line carries the page on its own, so it sits
   between d-md and d-lg rather than at body-heading size. */
.pos-line{font-size:clamp(2.3rem, 5.8vw, 5rem);line-height:1.02}

.eyebrow{
  font-family:var(--ui);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin:0;
}
.lede{
  font-size:clamp(.82rem,1.1vw,.94rem);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.9;color:var(--ink-muted);margin:0;
}
.body{font-size:1.02rem;line-height:1.75;color:var(--ink-muted);margin:0}

/* ---- shared layout ---- */
.wrap{position:relative;z-index:1;padding-inline:var(--shell)}
section{position:relative;z-index:1}
.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ---- bracket link, lifted from the reference's [ LABEL ] motif ---- */
.brk{
  font-family:var(--ui);font-size:.74rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  display:inline-flex;gap:.6em;align-items:center;cursor:pointer;
  background:none;border:0;padding:6px 0;transition:color .2s var(--ease);
}
.brk::before{content:"[";color:var(--ink-faint);transition:color .2s var(--ease),transform .25s var(--ease)}
.brk::after{content:"]";color:var(--ink-faint);transition:color .2s var(--ease),transform .25s var(--ease)}
.brk:hover::before{color:var(--ink);transform:translateX(-3px)}
.brk:hover::after{color:var(--ink);transform:translateX(3px)}

a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:var(--shell);top:12px;background:var(--ink);color:var(--ground);padding:10px 16px;font-weight:700}

/* ---- header ---- */
header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  padding:26px var(--shell) 0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);
  pointer-events:none;
}
header > *{pointer-events:auto}
.logo-slot{display:block;text-decoration:none;line-height:1}
/* PLACEHOLDER LOGO — swap this block for the real mark */
/* Real wordmark, extracted from the supplied brand artwork and cut out to
   transparency. Two colourways: cream for the dark ground, near-black for
   the white opening band. */
.logo-mark{display:block}
.logo-img{display:block;width:132px;height:auto}
nav.nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);
}
/* Nav links drop the [bracket] motif for a hairline rule that draws in from
   the left on hover and stays put on the current page. */
nav.nav .brk{
  font-size:.72rem;letter-spacing:.22em;gap:0;
  color:var(--ink-muted);position:relative;
  transition:color .3s var(--ease);
}
nav.nav .brk::before{content:none}
nav.nav .brk::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--ease);
}
nav.nav .brk:hover,
nav.nav .brk:focus-visible{color:var(--ink)}
nav.nav .brk:hover::after,
nav.nav .brk:focus-visible::after{transform:scaleX(1);transform-origin:left center}
nav.nav [aria-current="page"]{color:var(--ink)}
nav.nav [aria-current="page"]::after{transform:scaleX(1)}
.navtoggle{display:none}

/* ---- hero ---- */
.hero{overflow:hidden;min-height:80svh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 var(--s3);text-align:center}
.hero .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.swap{display:inline-grid;vertical-align:baseline}
.swap span{
  grid-area:1/1;opacity:0;transform:translateY(.18em);white-space:nowrap;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.swap span.on{opacity:1;transform:none;transition:opacity .55s .22s var(--ease),transform .55s .22s var(--ease)}
.scrollcue{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:var(--s3)}
.scrollcue i{display:block;width:7px;height:7px;background:var(--ink);animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(9px);opacity:1}}

/* ---- statement ---- */
.statement{padding:var(--s7) 0;text-align:center}

/* ---- marquee ---- */
.marquee{overflow:hidden;padding:var(--s6) 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-word{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;font-size:clamp(2.2rem,5.6vw,4.8rem);
  line-height:1;padding-inline:.18em;color:var(--ink);opacity:.82;white-space:nowrap;
}

/* ---- image placeholder frame ---- */
.frame{
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(168,30,51,.85), transparent 62%),
    linear-gradient(150deg, var(--deep), #3E020C 78%);
  border:1px solid var(--hair);
}
.frame::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.6'/%3E%3C/svg%3E");
  opacity:.12;mix-blend-mode:overlay;
}
.frame span{
  position:relative;z-index:2;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center;padding:0 18px;
}
/* A real photograph fills the frame, sitting above the placeholder gradient
   and its noise overlay (.frame::after), so no treatment shows through. */
.frame img{
  position:absolute;inset:0;z-index:2;
  display:block;width:100%;height:100%;object-fit:cover;
}
.r-4x5{aspect-ratio:4/5} .r-1x1{aspect-ratio:1/1} .r-16x9{aspect-ratio:16/9} .r-3x2{aspect-ratio:3/2}

/* ---- method steps ---- */
.step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,90px);align-items:center;padding:var(--s5) 0}
/* Landscape, not portrait: five tall 4:5 frames made this section roughly
   twice as long to scroll through as it needed to be. */
.step-media .frame{aspect-ratio:3/2}
.step:nth-of-type(even) .step-media{order:-1}
.step-num{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.7rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 var(--s3)}
.step-copy{max-width:34ch}

/* ---- quote ---- */
.quote{padding:var(--s7) 0;text-align:center;overflow:hidden}
blockquote{margin:0 auto;max-width:20ch}

/* ---- contact ---- */
.contact{background:var(--deep);padding:var(--s7) 0}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,90px)}
form{display:flex;flex-direction:column;gap:var(--s3)}
.field{display:flex;flex-direction:column;gap:8px}
label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
input,textarea,select{
  font-family:var(--ui);font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--ink-faint);padding:12px 2px;border-radius:0;
  transition:border-color .25s var(--ease);
}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--ink)}
select option{background:var(--deep);color:var(--ink)}
textarea{resize:vertical;min-height:104px}
.hint{font-size:.74rem;color:var(--ink-faint);letter-spacing:.04em;text-transform:none}
.btn{
  align-self:flex-start;margin-top:var(--s2);cursor:pointer;
  font-family:var(--ui);font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);
  padding:16px 34px;transition:background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink)}
.contact-lines{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.contact-lines a{text-decoration:none;border-bottom:1px solid var(--ink-faint);padding-bottom:3px;transition:border-color .2s}
.contact-lines a:hover{border-color:var(--ink)}

/* ---- footer ---- */
footer{padding:var(--s5) 0 var(--s4);border-top:1px solid var(--hair)}
.foot-grid{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;align-items:flex-end}
.foot-note{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- scroll reveal ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media (max-width:900px){
  header{align-items:center}
  .navtoggle{
    display:inline-flex;align-items:center;gap:10px;
    background:none;border:0;color:var(--ink);
    font-family:var(--ui);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
    padding:12px 2px;min-height:44px;cursor:pointer;
  }
  .navtoggle::after{
    content:"";width:22px;height:7px;
    border-top:1px solid currentColor;border-bottom:1px solid currentColor;
    transition:width .35s var(--ease);
  }
  .navtoggle[aria-expanded="true"]::after{width:13px}
  nav.nav{
    position:fixed;inset:0;background:var(--ground);z-index:25;
    align-items:center;justify-content:center;
    padding:calc(var(--shell) + 60px) var(--shell) var(--shell);
    width:100%;max-width:100vw;overflow-y:auto;overscroll-behavior:contain;display:none;
  }
  nav.nav.open{display:flex}
  nav.nav ul{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  nav.nav .brk{font-size:1.15rem}
  .step{grid-template-columns:1fr;gap:var(--s4)}
  .step:nth-of-type(even) .step-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .svc-tag{display:none}
}
@media (max-width:420px){
  .swap span{white-space:normal}
}
@media (max-width:520px){
  }

@media (prefers-reduced-motion:reduce){
  .stmt-video{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .swap span{opacity:0}
  .swap span.on{opacity:1}
  .marquee-track{animation:none}
}

/* ---- interior page hero (shorter than the home hero) ---- */
.page-hero{overflow:hidden;padding:clamp(150px,20vh,230px) 0 var(--s6)}
.page-hero .wrap{display:flex;flex-direction:column;gap:var(--s3);max-width:1100px}
.breadcrumb{display:flex;gap:.6em;align-items:center;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}

/* ---- case study grid ---- */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.case{background:var(--ground);display:flex;flex-direction:column;text-decoration:none;position:relative;transition:background .4s var(--ease)}
.case:hover,.case:focus-visible{background:var(--deep)}
.case .frame{border:0;border-bottom:1px solid var(--hair)}
.case-body{padding:var(--s4) var(--s3) var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.case-client{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted)}
.case-title{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.06;letter-spacing:-.03em;margin:0;text-wrap:balance}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--s2)}
.tag{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);border:1px solid var(--hair);padding:5px 9px;white-space:nowrap}
.case-result{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.case-result small{display:block;font-family:var(--ui);font-weight:400;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);margin-top:7px}

/* ---- home teaser strip ---- */
.teaser-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3);margin-top:var(--s4)}
.teaser{text-decoration:none;display:flex;flex-direction:column;gap:var(--s2)}
.teaser .frame{transition:border-color .35s var(--ease)}
.teaser:hover .frame,.teaser:focus-visible .frame{border-color:var(--ink-faint)}
.teaser-name{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.1;letter-spacing:-.03em}
.teaser-meta{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

@media (max-width:520px){
  .work-grid{grid-template-columns:1fr}
}

/* ============================================================
   WORK — full-bleed case rows with scroll-linked media scaling
   ============================================================ */
.rows{border-top:1px solid var(--hair)}
.row{
  border-bottom:1px solid var(--hair);
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(0,1.95fr);
  grid-template-rows:auto 1fr;
  gap:var(--s4) clamp(28px,5vw,80px);
  padding:clamp(40px,6vw,90px) var(--shell) clamp(56px,8vw,130px);
  align-items:start;
}
.row-head{grid-column:1;grid-row:1}
.row-copy{grid-column:1;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:var(--s4);max-width:38ch}
.row-media{grid-column:2;grid-row:1 / span 2;align-self:start}

.row-name{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,3.9vw,3.1rem);line-height:.98;letter-spacing:-.038em;margin:0;
}
.row-statement{
  font-family:var(--ui);font-weight:500;
  font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.4;letter-spacing:-.005em;
  color:var(--ink);margin:0;text-wrap:pretty;
}

/* stat block — badge + figure in sans, caption in the display serif */
.row-stat{display:flex;flex-direction:column;gap:6px}
.stat-line{display:flex;align-items:center;gap:10px}
.stat-badge{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--ink);color:var(--ground);
  display:grid;place-items:center;
}
.stat-figure{
  font-family:var(--ui);font-weight:700;font-size:1.42rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stat-caption{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.05rem;line-height:1.35;
  color:var(--ink-muted);margin:0;max-width:30ch;
}

/* media: scales up as the row scrolls into view (--p driven by app.js) */
.media-inner{
  position:relative;overflow:hidden;
  transform:scale(calc(.9 + .1 * var(--p, 1)));
  opacity:calc(.55 + .45 * var(--p, 1));
  transform-origin:50% 50%;
  will-change:transform;
}
.media-inner .frame{border:0}

/* cursor-tracking "More" pill */
.more-pill{
  position:absolute;z-index:3;pointer-events:none;
  left:var(--mx,88%);top:var(--my,86%);
  transform:translate(-50%,-50%) scale(.55);opacity:0;
  background:var(--ink);color:var(--ground);
  font-family:var(--ui);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:11px 20px;border-radius:999px;white-space:nowrap;
  transition:opacity .28s var(--ease),transform .28s var(--ease),
             left .5s var(--ease),top .5s var(--ease);
}
.row-media:hover .more-pill,.row-media:focus-within .more-pill{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* touch / coarse pointers: no hover, so pin the pill and always show it */
@media (hover:none),(pointer:coarse){
  .more-pill{left:auto;right:16px;top:auto;bottom:16px;transform:none;opacity:1;transition:none}
  .row-media:hover .more-pill{transform:none}
}

@media (max-width:860px){
  .row{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:var(--s3)}
  .row-head{grid-column:1;grid-row:1}
  .row-media{grid-column:1;grid-row:2}
  .row-copy{grid-column:1;grid-row:3;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .media-inner{transform:none;opacity:1}
  .more-pill{transition:opacity .2s}
}

/* ============================================================
   INTRO SPLASH — the wordmark alone, then the site
   CSS drives the auto-dismiss so the overlay still clears
   if JavaScript never runs. JS only makes it leave sooner.
   ============================================================ */
.splash{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:var(--ground);
  animation:splashOut .85s var(--ease) 2.6s forwards;
}
.splash::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 40% at 18% 22%, rgba(168,30,51,.30), transparent 68%);
}
@keyframes splashOut{
  to{opacity:0;visibility:hidden}
}
.splash.gone{
  animation:none;opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),visibility 0s linear .6s;
}
.splash-mark{
  position:relative;z-index:2;text-align:center;
  animation:markIn 1.1s var(--ease) both;
}
@keyframes markIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.splash-img{
  display:block;width:clamp(230px,36vw,460px);height:auto;margin:0 auto;
}
/* scroll is locked only while JS holds the splash open */
body.splash-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .splash{animation:splashOut .01s linear 1.4s forwards}
  .splash-mark{animation:none}
  .splash.gone{transition:none}
}

/* ---- founder page ---- */
.founder-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,80px);align-items:start;padding-top:var(--s3);
}
.founder-media{position:sticky;top:var(--s5)}
.founder-copy{display:flex;flex-direction:column;gap:var(--s3);max-width:62ch}
.founder-body{font-size:1.04rem;line-height:1.72;color:var(--ink-muted);margin:0}
.founder-quote{
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.3;
  color:var(--ink);margin:var(--s2) 0;padding-left:var(--s3);
  border-left:1px solid var(--ink-faint);
}

.principles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--hair);border-block:1px solid var(--hair);
}
.principle{background:var(--ground);padding:var(--s4) var(--s3) var(--s5);display:flex;flex-direction:column;gap:12px}
.principle-title{
  font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.2;
  letter-spacing:-.03em;margin:0;text-wrap:balance;
}
.principle-body{font-size:.95rem;line-height:1.65;color:var(--ink-muted);margin:0}

@media (max-width:860px){
  .founder-grid{grid-template-columns:1fr}
  .founder-media{position:static}
}

/* ---- services page: name + tagline left, detail right ---- */
.svc-rows{border-top:1px solid var(--hair)}
.svc-detail{
  border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);
  gap:var(--s3) clamp(28px,5vw,80px);
  padding:clamp(36px,5vw,72px) var(--shell);
  align-items:start;
}
.svc-detail-head{display:flex;flex-direction:column;gap:10px;position:sticky;top:var(--s5)}
.svc-detail-name{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.038em;margin:0;
}
.svc-detail-tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted)}
.svc-detail-body{display:flex;flex-direction:column;gap:var(--s3)}
.svc-detail-body p{font-size:1.02rem;line-height:1.7;color:var(--ink-muted);margin:0;max-width:56ch}
.svc-includes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px var(--s3);
}
.svc-includes li{
  position:relative;padding-left:18px;font-size:.92rem;line-height:1.5;color:var(--ink);
}
.svc-includes li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;background:var(--ink-faint);
}
/* ---- services page: closing prompt box ---- */
.svc-prompt{
  margin:clamp(36px,5vw,72px) var(--shell) 0;
  background:var(--deep);border:1px solid var(--hair);
  padding:clamp(30px,4.2vw,54px) clamp(24px,3.6vw,52px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s3) clamp(28px,5vw,64px);align-items:center;
}
.svc-prompt-title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.45rem,2.7vw,2.15rem);line-height:1.05;letter-spacing:-.032em;margin:0;
}
.svc-prompt-body{
  font-size:1rem;line-height:1.7;color:var(--ink-muted);
  margin:14px 0 0;max-width:54ch;
}
.svc-prompt .btn{align-self:center;margin-top:0;white-space:nowrap;text-decoration:none}
@media (max-width:820px){
  .svc-prompt{grid-template-columns:1fr}
  .svc-prompt .btn{justify-self:start}
}

.svc-note{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.02rem;line-height:1.5;color:var(--ink-muted);margin:0;
}

@media (max-width:860px){
  .svc-detail{grid-template-columns:1fr}
  .svc-detail-head{position:static}
}

/* ============================================================
   FONT-FLIP WORD (hero)
   The base face stays in normal flow so it alone sets the box
   width — alternates are absolutely positioned over it, so the
   headline never reflows mid-flip no matter how wide a face is.
   ============================================================ */
.fontflip{position:relative;display:inline-block;white-space:nowrap;vertical-align:baseline}
.fontflip .ff{visibility:hidden}            /* hidden but still measured */
.fontflip .ff-alt{position:absolute;left:50%;top:0;transform:translateX(-50%)}
.fontflip .ff.show{visibility:visible}

@media (prefers-reduced-motion:reduce){
  .fontflip .ff-alt{display:none}
  .fontflip .ff-base{visibility:visible}
}

/* ============================================================
   COIN SCENE
   The canvas is sticky and the panels flow past it, so the copy
   scrolls up the page normally while the coin stays put and turns
   — rather than the copy cross-fading in place.
   ============================================================ */
.coin-stage{position:relative}
/* Viewport-fixed rather than sticky: a sticky element pulled to zero height
   with a negative margin collapses its own sticky range, so the canvas
   scrolled away after the first panel. Fixed has no such subtlety. */
#coin-canvas{
  /* inset:0 rather than 100vw — vw units include the scrollbar and would
     push the page sideways on desktop */
  position:fixed;inset:0;z-index:0;
  display:block;width:100%;height:100%;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease);
}
.coin-stage.coin-live #coin-canvas{opacity:1;visibility:visible}

.coin-panel{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s6) var(--shell);
  max-width:68%;
}
.coin-index{
  font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-muted);display:block;margin-bottom:var(--s3);
}
.coin-line{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.5rem,6.2vw,8.5rem);line-height:1.02;letter-spacing:-.035em;
  text-transform:uppercase;margin:0;text-wrap:balance;
}
.coin-sub{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.24rem,2.1vw,2.15rem);line-height:1.55;
  color:rgba(242,229,197,.88);margin:var(--s3) 0 0;max-width:44ch;
}
.coin-rail{
  position:fixed;left:var(--shell);bottom:34px;z-index:2;
  display:flex;gap:8px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease);
}
.coin-stage.coin-live .coin-rail{opacity:1;visibility:visible}
.coin-rail i{
  display:block;width:26px;height:2px;background:var(--ink-faint);
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.coin-rail i.on{background:var(--ink);transform:scaleY(2)}

/* no webgl, or the script never ran: panels just read as normal sections */
.coin-stage[data-coin="off"] #coin-canvas{display:none}
.coin-stage[data-coin="off"] .coin-panel{min-height:0;padding-block:var(--s5)}
.coin-stage[data-coin="off"] .coin-rail{display:none}

@media (max-width:900px){
  .coin-panel{max-width:none;min-height:88svh}
  #coin-canvas{opacity:.34}
}
@media (prefers-reduced-motion:reduce){
  .coin-rail i{transition:none}
}

/* ---- FAQ (native <details>, keyboard-operable without JS) ---- */
.faq{padding-block:var(--s7)}
.faq-list{border-top:1px solid var(--hair);margin-top:var(--s5)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:clamp(20px,2.6vw,30px) 0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1.25;letter-spacing:-.025em;
  transition:color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--ink)}
.faq-item summary::after{
  content:"";flex:none;width:13px;height:13px;margin-top:.35em;
  background:
    linear-gradient(var(--ink-faint),var(--ink-faint)) center/100% 1.5px no-repeat,
    linear-gradient(var(--ink-faint),var(--ink-faint)) center/1.5px 100% no-repeat;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-a{padding:0 0 clamp(22px,2.6vw,32px);max-width:70ch}
.faq-a p{font-size:1.02rem;line-height:1.72;color:var(--ink-muted);margin:0 0 var(--s2)}
.faq-a p:last-child{margin-bottom:0}
.faq-a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .faq-item summary::after{transition:none}
}

/* ============================================================
   iPHONE / SMALL-SCREEN CORRECTIONS
   ============================================================ */
@media (max-width:900px){
  /* The panels go full-width on mobile, so copy sits over the coin.
     This needs to out-specify .coin-stage.coin-live #coin-canvas, which
     was winning at opacity:1 and leaving cream text on bright gold. */
  .coin-stage.coin-live #coin-canvas{opacity:.26}
  .coin-panel{padding-block:var(--s5)}
  .coin-rail{bottom:22px}
}

/* Touch targets: Apple's minimum is 44px. Nav links, the menu button
   and the text inputs were all landing between 31px and 43px. */
@media (hover:none),(pointer:coarse),(max-width:900px){
  .brk{padding-block:13px}
  .navtoggle{padding-block:15px;padding-inline:0}
  input,select,textarea{padding-block:14px}
  .foot-grid > div{gap:var(--s2)}
}

/* ============================================================
   OPENING STATEMENT — full-bleed hero video, words light up as you scroll
   ============================================================ */
.stmt{
  height:180vh;position:relative;z-index:1;
  background:var(--ground-deep);
}
.stmt-inner{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-content:center;justify-items:start;
  padding-inline:var(--shell);
  /* shows through until the video loads, and if it never does */
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(168,30,51,.55), transparent 60%),
    linear-gradient(160deg, var(--deep), #2A0208 78%);
}
.stmt-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);
}
.stmt.has-video .stmt-video{opacity:1}
/* scrim: footage is unpredictable, so the type always gets a dark bed */
.stmt-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(8,4,6,.62) 0%, rgba(8,4,6,.52) 45%, rgba(8,4,6,.78) 100%);
}
.stmt-line{
  position:relative;z-index:2;
  font-family:var(--impact);font-weight:400;
  /* One sentence per line, sized so the longest ("ONE PARTNER ACCOUNTABLE
     FOR BOTH.") still clears the shell padding. Anton needs ~13.1px of
     width per 1px of font-size for that line, and the usable width is
     90vw, so 6.6vw keeps headroom. */
  font-size:clamp(1.9rem,6.6vw,7rem);
  line-height:.94;letter-spacing:-.025em;text-transform:uppercase;
  text-align:left;margin:0;max-width:100%;
  color:#FFFFFF;                       /* readable with no JS at all */
  text-shadow:0 2px 28px rgba(0,0,0,.45);
}
.stmt-line .ln{display:block}
/* JS opts in to the reveal; unlit words stay bright enough to read over
   the scrim even mid-animation */
.stmt[data-anim="on"] .w{color:rgba(255,255,255,.62);transition:color .55s var(--ease)}
.stmt[data-anim="on"] .w.lit{color:#FFFFFF}

/* Red band behind the header, so the logo and nav sit on brand red rather
   than on the white statement band below them. Header content bottoms out
   at 84px; 26px below it mirrors the 26px above. The logo is a fixed size,
   so this needs no breakpoints. */
.top-strip{background:var(--ground);height:110px}

@media (max-width:900px){
  .stmt{height:150vh}
  .stmt-inner{place-items:center start}
}
/* One line holds down to 640px (≈11px type). Below that it would be
   unreadable, so the statement wraps and left-aligns instead. */
@media (max-width:640px){
  .stmt-line{
    font-size:clamp(1.75rem,8.4vw,2.9rem);
    line-height:.98;text-align:left;
  }
  .stmt-inner{place-items:center start}
}
@media (prefers-reduced-motion:reduce){
  .stmt[data-anim="on"] .w{color:#24060D;transition:none}
}

/* ============================================================
   LET'S CHAT — enquiry form
   Structure follows the supplied reference: label above, rounded
   outlined field, (required) set quietly beside the label.
   ============================================================ */
.form-wrap{max-width:820px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.f{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--s4)}
.f > label,.f legend{
  font-family:var(--ui);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
  color:var(--ink);padding:0;
}
.req{font-weight:400;font-size:.86rem;color:var(--ink-faint);margin-left:.5em;letter-spacing:0}
.f input,.f select,.f textarea{
  font-family:var(--ui);font-size:1rem;color:var(--ink);
  background:transparent;border:1px solid var(--ink-faint);border-radius:10px;
  padding:15px 16px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.f textarea{min-height:150px;resize:vertical;line-height:1.6}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-faint)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(242,229,197,.18);
}
.f select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%,var(--ink-faint) 56%,transparent 56%),
    linear-gradient(-45deg,transparent 50%,var(--ink-faint) 50%,var(--ink-faint) 56%,transparent 56%);
  background-position:calc(100% - 24px) 55%, calc(100% - 16px) 55%;
  background-size:8px 8px;background-repeat:no-repeat;
}
.f select option{background:var(--deep);color:var(--ink)}
.f fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}

/* validation */
.f.invalid input,.f.invalid select,.f.invalid textarea{border-color:#FFC9C9}
.f-err{font-size:.86rem;color:#FFC9C9;min-height:0}
.f:not(.invalid) .f-err{display:none}
.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;
}
#formstatus{margin-top:var(--s3);font-size:.95rem;color:var(--ink-muted)}

@media (max-width:640px){
  .field-row{grid-template-columns:1fr}
}

/* ============================================================
   FOUNDER BIO — emphasis, and lines that arrive as you read
   Everything is visible by default; app.js sets data-anim="on"
   only when motion is allowed, and that is what hides lines
   until they scroll in.
   ============================================================ */
.bio strong{font-weight:700;color:var(--ink)}
.bio-punch{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.25;letter-spacing:-.02em;
  color:var(--ink);margin:0;
}
.bio-qs{
  list-style:none;margin:0;padding:0 0 0 var(--s3);
  display:flex;flex-direction:column;gap:10px;
  border-left:1px solid var(--ink-faint);
}
.bio-qs li{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,1.75vw,1.45rem);line-height:1.3;color:var(--ink);
}
/* sequenced inline pieces need a box so they can rise into place */
.bio-list > span,
.bio-brands > strong{display:inline-block}
.bio-close{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:-.035em;
  color:var(--ink);margin:var(--s3) 0 0;
}

/* highlighted phrases carry a cream rule underneath */
.bio .hl{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;
  background-size:100% 2px;padding-bottom:2px;
}
.bio-close .hl{background-size:100% .09em;padding-bottom:.04em}

/* --- motion (opt-in) --- */
.bio[data-anim="on"] [data-bio]{
  opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.bio[data-anim="on"] [data-bio].is-in{opacity:1;transform:none}

.bio[data-anim="on"] [data-bio-seq] > *{
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i, 0) * 120ms);
}
.bio[data-anim="on"] [data-bio-seq].is-in > *{opacity:1;transform:none}

/* the rule draws left to right just after its line lands */
.bio[data-anim="on"] .hl{background-size:0% 2px;transition:background-size .9s var(--ease) .35s}
.bio[data-anim="on"] .is-in .hl{background-size:100% 2px}
.bio[data-anim="on"] .bio-close .hl{background-size:0% .09em;transition-duration:1.1s}
.bio[data-anim="on"] .bio-close.is-in .hl{background-size:100% .09em}

/* ---- legal pages: plain, readable prose ---- */
.legal{display:flex;flex-direction:column;gap:var(--s5);max-width:72ch}
.legal h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.2;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 var(--s2);
}
.legal p,.legal li{font-size:1rem;line-height:1.75;color:var(--ink-muted);margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal a{color:var(--ink)}
.legal .updated{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}

/* the step photos are moved by app.js as you scroll; hint the compositor */
.step-media{will-change:transform}
@media (prefers-reduced-motion:reduce){ .step-media{transform:none!important} }

/* ---- case studies: work type under the name, structured detail below ---- */
.row-kicker{
  font-family:var(--ui);font-size:.66rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-muted);margin:12px 0 0;
}
.case-detail{margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.case-detail dt{
  font-family:var(--ui);font-size:.64rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px;
}
.case-detail dd{margin:0;font-size:.97rem;line-height:1.7;color:var(--ink-muted)}

/* ---- case study detail pages ---- */
.case-grid{
  display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
  gap:clamp(28px,5vw,80px);align-items:start;
}
.case-stat{position:sticky;top:var(--s5)}
.case-body{display:flex;flex-direction:column;gap:var(--s5);max-width:60ch}
.case-block h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-.02em;
  color:var(--ink);margin:0 0 10px;
}
.case-block p{margin:0;font-size:1.02rem;line-height:1.75;color:var(--ink-muted)}
.case-media{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s3);margin-top:var(--s4);
}
/* the whole cover becomes the link through to the case page */
.media-link{display:block;text-decoration:none;color:inherit}
@media (max-width:900px){
  .case-grid{grid-template-columns:1fr}
  .case-stat{position:static}
}

/* ---- case study: round-by-round figures ---- */
.case-table{border-collapse:collapse;width:100%;margin-top:var(--s3);font-size:.92rem}
.case-table th,.case-table td{
  text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--hair);color:var(--ink-muted);font-weight:400;
}
.case-table thead th{
  font-family:var(--ui);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.case-table tbody th{color:var(--ink);font-weight:600}

/* ---- embedded case study video ---- */
.video-frame{
  position:relative;width:100%;overflow:hidden;
  background:#000;border:1px solid var(--hair);
}
.video-frame.r-16x9{aspect-ratio:16/9}
.video-frame.r-9x16{aspect-ratio:9/16}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-hero{margin-top:var(--s4);max-width:880px}
.case-caption{
  font-family:var(--ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:var(--s5) 0 0;
}
.video-shorts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3)}
/* portrait video gets a hard width cap, or it runs the height of the screen */
.video-shorts .video-frame{width:min(300px,100%)}
.watch-link{margin:10px 0 0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.watch-link a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px}
.watch-link a:hover{color:var(--ink);border-color:var(--ink)}