/* --- fonts.css --- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/999bb767bb0e5aa8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/f49f83effead8795.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/999bb767bb0e5aa8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/f49f83effead8795.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/999bb767bb0e5aa8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/f49f83effead8795.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/055f596ea5875407.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/8c3cbed783d7ece8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/055f596ea5875407.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/8c3cbed783d7ece8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face{font-family:"Thunder LC";src:url(/assets/d9789720537fc9dc.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ROQA on the Nakula system.
   Committed dark. Nakula's ground, display-grey and two-tone text,
   with ROQA's own orange and grey scales substituted throughout. */
:root{
  --ground:#000000;
  --raise:#0D0E13;
  --raise-2:#111218;
  --rule:#20212B;
  --rule-soft:#16171F;

  --ink:#DCDDE4;        /* readable primary */
  --ink-display:#BFC0CC;/* giant display grey, Nakula's restraint */
  --ink-dim:#67697C;    /* de-emphasised half of a two-tone line, 3.89:1 on Studio Black */
  --muted:#85889C;      /* body copy and labels */

  --orange:#FE3902;     /* Revival Orange, marks and large type */
  --orange-cta:#C82C01; /* carries white text at AA */
  --orange-hi:#FF6030;
  --green:#3DBDBD;

  --display:"Thunder LC","Anton","Impact","Arial Narrow",sans-serif;
  --body:"Geist",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(18px,4.4vw,64px);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{list-style:none; padding:0; margin:0}
:focus-visible{outline:2px solid var(--orange); outline-offset:4px}

/* Skip link. It exists for keyboard and screen reader users, who need a way
   past the nav on every page, so it stays in the markup. It should be seen
   only while focused: it shipped unstyled, which is why it was sitting in
   the top left of every page in plain sight. */
.skip{
  position:fixed; top:10px; left:10px; z-index:200;
  transform:translateY(-300%);
  background:var(--orange-cta); color:#FFFFFF;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 18px; border-radius:999px; text-decoration:none;
}
.skip:focus{transform:translateY(0)}

.wrap{padding-inline:var(--gut); max-width:1440px; margin-inline:auto}
section{padding-block:clamp(72px,10vw,150px)}

/* ---- type roles ---- */
.label{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.display{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  line-height:.82; letter-spacing:.005em; color:var(--ink-display); text-wrap:balance;
}
.d-xl{font-size:clamp(58px,12.5vw,170px)}
.d-lg{font-size:clamp(46px,9.5vw,128px)}
.dim{color:var(--ink-dim)}
.dot{color:var(--orange)}
.two-tone{
  font-size:clamp(23px,3.5vw,46px); line-height:1.24; font-weight:500;
  letter-spacing:-.018em; color:var(--ink); text-wrap:pretty;
}
.note{color:var(--muted); font-size:15px; line-height:1.55}

/* ---- buttons ---- */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:500; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; padding:15px 26px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; background:transparent; color:inherit;
}
.pill-solid{background:var(--orange-cta); color:#FFFFFF}
.pill-solid:hover{background:var(--orange)}
.pill-line{border-color:var(--rule); color:var(--ink)}
.pill-line:hover{border-color:var(--orange); color:var(--orange)}
.pill-wide{width:100%; padding-block:22px; border-color:var(--rule); color:var(--orange); font-size:14px}
.pill-wide:hover{border-color:var(--orange); background:rgba(254,57,2,.06)}
.arrow{width:13px; height:13px; flex:0 0 auto}

/* ---- topbar ---- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:60;
  background:rgba(0,0,0,.72); backdrop-filter:blur(14px) saturate(1.3);
}
.topbar-in{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,34px);
  padding-block:13px; padding-inline:var(--gut); max-width:1440px; margin-inline:auto;
}
.mark{margin-right:auto; display:flex; align-items:center}
.mark img{height:24px; width:auto; vertical-align:middle}
.status{display:flex; align-items:center; gap:9px}
.blip{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(61,189,189,.55); animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(61,189,189,0)}100%{box-shadow:0 0 0 0 rgba(61,189,189,0)}}
.status b{font-size:12px; font-weight:500; color:var(--ink); display:block; line-height:1.3}
.status span{font-size:10px; color:var(--muted); letter-spacing:.07em; text-transform:uppercase; font-family:var(--mono)}
.clock{text-align:left}
.clock b{font-size:12px; font-weight:500; color:var(--ink); display:block; line-height:1.3; font-variant-numeric:tabular-nums}
.clock span{font-size:10px; color:var(--muted); font-family:var(--mono)}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; background:var(--ground); padding-block:clamp(60px,10vw,132px) clamp(40px,5vw,72px)}
/* Showreel cut from the films on this site. Muted, looping, and sitting under
   the field so the headline keeps its contrast. */
.hero-video{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
/* The still is a real <img>, not the video's poster attribute, so the preload
   scanner finds it in the first pass and fetches it at high priority. As the
   poster attribute on a preload="none" video it was discovered late and became
   a 5.8s LCP on throttled mobile. The video, when it loads, covers it. */
.hero-video .hero-still,
.hero-video video{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; opacity:.95;
}
.hero-video .hero-still img,
.hero-video video{width:100%; height:100%; object-fit:cover; display:block}
.hero-field{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Retuned for the behind the scenes cut, which is much darker than the golf
     footage it replaced: interiors, a green wall, a lit cyc in a dark room.
     The old scrim was built for white sky and left this frame at a mean
     luminance of 0.016, which is a black rectangle with type on it. The pools
     are shallower and the copy still measures far above threshold, because
     the footage was doing the darkening already. */
  background:
    radial-gradient(62% 52% at 80% 28%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.48) 46%, rgba(0,0,0,.06) 80%),
    radial-gradient(58% 48% at 16% 64%, rgba(0,0,0,.74) 0%, rgba(0,0,0,.50) 48%, rgba(0,0,0,.06) 84%),
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.22) 56%, rgba(0,0,0,.90) 100%);
}
.hero .wrap{position:relative; z-index:2}
/* The strip sits over the hero footage, which is bright now. Deepened from
   .55 so the marks do not rely on the frame behind them. Worst measured
   pixel is 3.37:1 against the 3.0 non-text minimum, and that figure is
   pessimistic: it includes the antialiased edge of each mask. The solid
   body of a mark is 3.89:1. */
.hero .marquee{position:relative; z-index:2; background:rgba(0,0,0,.74)}
@media (max-width:900px){
  .hero-field{
    background:linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.44) 45%, rgba(0,0,0,.88) 100%);
  }
  .hero-video .hero-still,.hero-video video{opacity:.88}
}
@media (prefers-reduced-motion:reduce){ .hero-video .hero-still,.hero-video video{opacity:.62} }
.giant-sub{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-top:clamp(10px,1.2vw,16px);
}
.hero-head{
  text-align:right; margin-left:auto; max-width:8.51em;
  font-size:clamp(38px,6.6vw,88px); line-height:1.04; font-weight:500; letter-spacing:-.028em;
}
.hero-head .dim{display:block; color:#9A9CAD}
.hero-head .lit{display:block; color:var(--ink)}
.hero-copy{
  margin-top:clamp(56px,9vw,150px); max-width:28.56em;
  font-size:clamp(17px,2.1vw,25px); line-height:1.35; font-weight:500; letter-spacing:-.015em;
}
.hero-foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap;
  margin-top:clamp(34px,4.4vw,64px);
}
/* The 11px eyebrow is the line that fails first over footage: it needs 4.5
   where the headline needs 3.0. Over the hero it goes to full ink, which is
   what buys the lighter scrim behind it. Muted grey measured 3.41 against
   the darkest frame of the loop at 390px. */
.hero-foot .label{color:var(--ink)}
/* A photographic page head. The shot sits underneath .page-head-field, which
   keeps doing the darkening, so the text contrast is governed by the same
   layer on every page rather than by whatever photo is behind it. */
.page-head-shot{position:absolute; inset:0; z-index:0; overflow:hidden}
.page-head-shot img{
  width:100%; height:100%; display:block; object-fit:cover;
  object-position:var(--focus, 50% 50%);
}
/* Measured against the glyph runs, not the element boxes, at 1440, 1024 and
   390. Worst case with this scrim: label 5.08, headline 4.62, body 5.47,
   against thresholds of 4.5, 3.0 and 4.5. Loosen it and the label goes first,
   because the light trails in the photo run straight through that line. */
.page-head.has-shot .page-head-field{
  background:
    radial-gradient(66% 74% at 18% 48%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.32) 78%),
    linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 34%, rgba(0,0,0,.74) 70%, #000000 100%);
}
@media (max-width:900px){
  .page-head.has-shot .page-head-field{
    background:linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.88) 44%, #000000 100%);
  }
}
/* The eyebrow is 11px, so it needs 4.5 where the headline needs 3.0, and it
   is the line that fails first over any photo. Over a picture it goes to full
   ink. That one change is what lets the scrim stay light enough to see the
   photograph. */
.page-head.has-shot .label{color:var(--ink)}
/* A frame that is already dark does not need the full scrim, and drowning it
   wastes the picture. This is the lighter setting, for photos whose own
   values are low. It is a choice per page, made from a measurement, never a
   guess: every page that carries it was checked at 1440 and 390. */
.page-head.has-shot.scrim-light .page-head-field{
  background:
    radial-gradient(64% 72% at 18% 48%, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 44%, rgba(0,0,0,.16) 80%),
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.40) 34%, rgba(0,0,0,.52) 70%, #000000 100%);
}
@media (max-width:900px){
  .page-head.has-shot.scrim-light .page-head-field{
    background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.72) 44%, #000000 100%);
  }
}

/* ---- trusted by marquee ---- */
.marquee{
  position:relative; overflow:hidden; margin-top:clamp(26px,3.4vw,46px);
  border-block:1px solid var(--rule); padding-block:clamp(13px,1.7vw,20px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee-run{display:flex}
.marquee-track{display:flex; width:max-content; animation:marquee 42s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-item{
  display:inline-flex; align-items:center; gap:clamp(20px,2.8vw,40px);
  padding-right:clamp(20px,2.8vw,40px); white-space:nowrap;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(19px,2.4vw,32px); color:var(--ink-dim);
  transition:color var(--dur-fast,240ms) ease;
}
.marquee-item::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange); flex:0 0 auto;
}
.marquee:hover .marquee-item{color:var(--muted)}
/* A client mark is drawn as a mask filled with the row color, so logos and
   names sit at the same weight and lift together on hover. The file's own
   palette never reaches the page, which is what makes a strip of marks from
   eleven different brand guides look like one set. */
.mlogo{
  display:block; width:var(--lw, 3em); height:var(--lh, 1em);
  background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;
          mask:var(--m) center/contain no-repeat;
}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
}

/* ---- section head ---- */
.shead{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}
.count{font-family:var(--mono); font-size:12px; color:var(--muted)}

/* ---- statement ---- */
.statement{max-width:16em; margin-left:auto; margin-right:auto}
.statement-grid{display:grid; grid-template-columns:120px minmax(0,1fr); gap:clamp(18px,3vw,54px); align-items:start}

/* ---- works ---- */
.works-grid{display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:clamp(20px,3.4vw,56px); align-items:start; margin-top:clamp(34px,5vw,80px)}
.wnum{font-family:var(--display); font-size:clamp(52px,7vw,104px); line-height:.8; color:var(--ink-display)}
.windex{margin-top:26px; display:flex; flex-direction:column; gap:3px}
.windex button{
  display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:13px; color:var(--muted); padding:5px 0; text-align:left;
  width:100%;
}
.windex button::before{content:""; width:14px; height:1px; background:currentColor; flex:0 0 auto}
.windex button:hover{color:var(--ink)}
.windex button[aria-current="true"]{color:var(--ink); font-weight:500}
.windex button[aria-current="true"]::before{background:var(--orange); width:22px}
.wstage{position:relative}
.wshot{
  position:relative; aspect-ratio:16/10.4; max-width:100%; border-radius:12px; overflow:hidden;
  background:
    radial-gradient(70% 90% at 30% 10%, rgba(255,96,48,.15) 0%, rgba(0,0,0,0) 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 13px),
    linear-gradient(160deg, #16171F 0%, #0D0E13 62%, #000000 100%);
  border:1px solid var(--rule); display:grid; place-items:center;
}
.wshot .ghost{font-family:var(--display); font-size:clamp(34px,5.6vw,84px); color:rgba(255,255,255,.045); text-transform:uppercase; letter-spacing:.02em}
.wshot .tag{
  position:absolute; left:16px; bottom:16px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--rule); border-radius:999px; padding:6px 11px; background:rgba(0,0,0,.55);
}
.wview{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(10,10,10,.8); border:1px solid var(--rule); backdrop-filter:blur(8px);
}
.pcard-static{cursor:default}
.pcard-static:hover{background:inherit}
.pcard-static .arrow{display:none}
.wpane{display:none}
.wpane.is-on{display:grid}
.wshot.has-img{overflow:hidden}
.wshot.has-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  /* --focus picks which part of the photo survives the crop.
     Set it per tile, for example style="--focus:50% 68%". */
  object-position:var(--focus, 50% 50%);
}
.wshot.has-img .wview{opacity:0; transition:opacity var(--dur-fast,240ms) ease}
.wshot.has-img:hover .wview,.wshot.has-img:focus-visible .wview{opacity:1}
.wmeta{margin-top:24px}
.wmeta h3{font-size:clamp(28px,3.8vw,48px); font-weight:500; letter-spacing:-.025em; line-height:1.1}
.wmeta p{color:var(--muted); font-size:15px; margin-top:8px; max-width:26.91em}

/* ---- numbers ---- */
.numbers-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr); gap:clamp(20px,4vw,60px); align-items:end}
.numbers-head .note{text-align:right; margin-left:auto; max-width:25.57em}
.ticks{height:9px; margin-top:clamp(28px,3.4vw,46px);
  background-image:repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 13px);
}
.nrow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--rule)}
.nrow-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nrow > div{padding:clamp(22px,2.6vw,34px) clamp(14px,1.8vw,26px) clamp(26px,3vw,40px); border-right:1px solid var(--rule)}
.nrow > div:last-child{border-right:0}
.nrow > div:first-child{padding-left:0}
.nrow dd{
  font-size:clamp(40px,5.2vw,74px); font-weight:500; letter-spacing:-.035em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.nrow dd i{font-style:normal; color:var(--orange)}
.nrow dt{margin-top:14px; font-size:13px; color:var(--muted); line-height:1.35}

/* ---- services ---- */
.svc{border-top:1px solid var(--rule)}
.svc-row{border-bottom:1px solid var(--rule)}
.svc-btn{
  width:100%; background:none; border:0; cursor:pointer; color:inherit; text-align:left;
  display:grid; grid-template-columns:minmax(90px,.36fr) minmax(0,1fr); gap:clamp(14px,3vw,48px);
  align-items:center; padding-block:clamp(22px,2.6vw,34px);
  font-family:var(--body);
}
.svc-btn .n{font-family:var(--display); font-size:clamp(30px,4vw,56px); line-height:.9; color:var(--ink-dim)}
.svc-btn .t{font-size:clamp(19px,2.3vw,30px); font-weight:500; letter-spacing:-.02em; color:var(--muted)}
.svc-row[data-open="true"]{background:var(--raise)}
.svc-row[data-open="true"] .svc-btn .n{color:var(--ink-display)}
.svc-row[data-open="true"] .svc-btn .t{color:var(--ink)}
.svc-body{
  display:grid; grid-template-columns:minmax(90px,.36fr) minmax(0,1fr); gap:clamp(14px,3vw,48px);
  padding-bottom:clamp(26px,3.2vw,44px);
}
.svc-body .pad{min-height:1px}
.svc-body p{color:var(--muted); font-size:15px; max-width:37.68em}
.tags{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px}
.tag{
  font-size:12px; color:var(--muted); border:1px solid var(--rule); border-radius:999px;
  padding:7px 13px;
}

/* ---- testimonial ---- */
/* proof band: four outcomes, each linking to the case study that earned it */
.proof{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.pf{background:var(--ground); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:12px;
    transition:background var(--dur-fast,240ms) ease}
.pf:hover{background:var(--raise)}
.pf b{font-family:var(--display); font-weight:400; font-size:clamp(30px,4vw,54px); line-height:.98;
      letter-spacing:-.01em; color:var(--ink-display)}
.pf:hover b{color:var(--orange)}
.pf p{font-size:14px; color:var(--muted); line-height:1.5; flex:1}
.pf span{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--orange)}
@media (max-width:980px){ .proof{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .proof{grid-template-columns:1fr} }
.quote-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(28px,4.4vw,72px); align-items:center}
.qmark{
  font-family:var(--display); font-size:clamp(46px,6vw,86px); line-height:.7; color:var(--orange);
  display:block; margin-bottom:clamp(10px,1.2vw,18px);
}
.qtext{
  font-size:clamp(23px,3.3vw,44px); line-height:1.24; font-weight:500; letter-spacing:-.022em;
  color:var(--ink); text-wrap:pretty;
}
.qby{display:flex; align-items:center; gap:14px; margin-top:clamp(26px,3vw,40px); padding-top:22px; border-top:1px solid var(--rule)}
.qby span.qav{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--raise-2); border:1px solid var(--rule);
  font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--muted);
}
.qby b{display:block; font-size:15px; font-weight:500; color:var(--ink)}
.qby span{display:block; font-size:13px; color:var(--muted)}
.qswitch{display:flex; gap:3px; flex-direction:column; margin-top:22px}
.qswitch button{
  display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:13px; color:var(--ink-dim); padding:5px 0; text-align:left;
}
.qswitch button::before{content:""; width:14px; height:1px; background:currentColor; flex:0 0 auto}
.qswitch button:hover{color:var(--muted)}
.qswitch button[aria-current="true"]{color:var(--ink); font-weight:500}
.qswitch button[aria-current="true"]::before{background:var(--orange); width:22px}
.qshot{
  aspect-ratio:4/4.6; max-width:100%; border-radius:12px; border:1px solid var(--rule); position:relative;
  background:
    radial-gradient(64% 58% at 44% 26%, rgba(255,96,48,.18) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(170deg,#16171F 0%, #0D0E13 60%, #000000 100%);
  display:grid; place-items:center;
}
.qshot .ghost{font-family:var(--display); font-size:clamp(26px,3.4vw,46px); color:rgba(255,255,255,.05); text-transform:uppercase; text-align:center; line-height:.9}
.qshot .tag{
  position:absolute; left:14px; bottom:14px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--rule); border-radius:999px; padding:6px 11px; background:rgba(0,0,0,.55);
}

/* ---- process ---- */
.proc-grid{display:grid; grid-template-columns:minmax(0,.46fr) minmax(0,1fr); gap:clamp(24px,3.4vw,54px); align-items:start}
.steps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.step{background:var(--ground); padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:12px; min-height:100%}
.step .s{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.step h3{font-size:clamp(21px,2.4vw,30px); font-weight:500; letter-spacing:-.024em; line-height:1.08; color:var(--ink-display)}
.step p{font-size:14px; color:var(--muted); line-height:1.5}

/* ---- closer ---- */
.closer{position:relative; overflow:hidden; background:var(--ground)}
/* Behind the sign off: a frame from the video village, held at 25 percent so it
   reads as texture. The field above it keeps the headline at full contrast. */
.closer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("/assets/512873e7229ac11e.jpg");
  background-size:cover; background-position:50% 44%;
  opacity:.25;
}
.closer-field{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(46% 58% at 44% 62%, rgba(255,96,48,.30) 0%, rgba(122,26,0,.14) 40%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.76) 100%);
}
.closer .wrap{position:relative; z-index:2}
.closer-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(26px,4vw,64px); align-items:end}
.closer-side{text-align:right}
.closer-side .note{margin-left:auto; max-width:22.88em}
.closer-side .pill{margin-top:22px}

/* ---- footer ---- */
/* Footer sits on its own lifted dark surface so it reads as a distinct zone
   rather than continuing the page ground. */
footer{background:var(--ground); border-top:1px solid var(--rule); color:var(--ink)}
footer .fcol a{color:var(--muted)}
footer .fcol a:hover{color:var(--ink)}
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.52fr) minmax(0,.88fr) minmax(0,.62fr) minmax(0,.95fr);
  gap:clamp(24px,3.2vw,52px); padding-block:clamp(44px,5.4vw,78px);
}
/* Tablet landscape kept the four column footer while the contact column was
   too narrow for the address, so the email ran under the Links column.
   Two columns from 1180 down, and the value cell can never be clipped. */
@media (max-width:1180px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .sign{grid-column:1 / -1}
}
.fline{display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; align-items:baseline; margin-bottom:14px}
.fline > *:last-child{min-width:0; overflow-wrap:anywhere}
.fline a.big{font-size:clamp(19px,2.1vw,28px); color:var(--orange); letter-spacing:-.02em; display:inline-block; max-width:100%}
.fline a.big:hover{color:var(--orange-hi)}
.fline .val{font-size:16px; color:var(--ink)}
.fcol h4{margin-bottom:16px}
.fcol li{margin-bottom:9px}
.fcol a{font-size:16px; color:var(--muted); display:inline-flex; align-items:center; gap:7px}
.fcol a:hover{color:var(--ink)}
.sign{max-width:21.53em}
.sign img{height:26px; width:auto; vertical-align:top}
.sign p{font-size:13px; color:var(--muted); margin-top:14px}
.foot-bar{
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center;
  border-top:1px solid var(--rule); padding-block:20px; margin-inline:calc(-1 * var(--gut));
  padding-inline:var(--gut); background:var(--ground);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}

/* ---- endcap ---- */
/* Studio Black, with Revival Orange kept as a hairline accent and on the
   signoff line, matching the footer signoff used across the ROQA system. */
.endcap{background:var(--ground); color:#FFFFFF; overflow:hidden; border-top:2px solid var(--orange)}
.endcap .wrap{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-block:clamp(34px,4.6vw,64px)}
/* Rebirth of Quality Art wordmark, the approved expressive variant, in its
   light artwork so it reads white on Revival Orange. Capped near its native
   height so the raster never softens. */
.endcap-mark img{height:clamp(46px,6.4vw,96px); width:auto; display:block}
.endcap .giant-sub{color:var(--orange); margin-top:14px}
.endcap-tag{color:var(--ink-display)}
.endcap-tag{
  text-align:right; font-size:clamp(20px,3.2vw,44px); line-height:1.1; font-weight:500;
  letter-spacing:-.025em; max-width:4.39em; margin-left:auto;
}

/* ---- responsive ---- */
@media (max-width:980px){
  .statement-grid,.works-grid,.numbers-head,.closer-grid{grid-template-columns:1fr}
  .numbers-head .note,.closer-side{text-align:left}
  .numbers-head .note,.closer-side .note{margin-left:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sign{grid-column:1 / -1}
  .hero-head{text-align:left; margin-left:0; max-width:none; margin-top:14px}
}
@media (max-width:980px){
  .quote-grid,.proc-grid{grid-template-columns:1fr}
  .qswitch{display:flex; gap:3px; flex-direction:column; margin-top:22px}
.qswitch button{
  display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:13px; color:var(--ink-dim); padding:5px 0; text-align:left;
}
.qswitch button::before{content:""; width:14px; height:1px; background:currentColor; flex:0 0 auto}
.qswitch button:hover{color:var(--muted)}
.qswitch button[aria-current="true"]{color:var(--ink); font-weight:500}
.qswitch button[aria-current="true"]::before{background:var(--orange); width:22px}
.qshot{aspect-ratio:16/9}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr}
  .nrow{grid-template-columns:1fr 1fr}
  .nrow > div:nth-child(2n){border-right:0}
  .nrow > div:nth-child(3),.nrow > div:nth-child(4){border-top:1px solid var(--rule)}
  .nrow > div:nth-child(odd){padding-left:0}
  .foot-grid{grid-template-columns:1fr}
  .status-hide{display:none}
  .svc-btn,.svc-body{grid-template-columns:1fr}
  .svc-body .pad{display:none}
  .endcap-tag{text-align:left; margin-left:0}
}

/* ---- primary nav ---- */
.mark{margin-right:0}
.nav{display:flex; align-items:center; gap:clamp(12px,1.8vw,26px); margin-right:auto; margin-left:clamp(16px,2.6vw,40px)}
.nav > a,.nav-svc-btn{
  font-family:var(--body); font-size:13px; font-weight:400; line-height:1;
  color:var(--muted); background:none; border:0; padding:6px 0; cursor:pointer;
  letter-spacing:.005em; white-space:nowrap;
  transition:color var(--dur-fast,240ms) var(--ease-standard,ease);
}
.nav > a:hover,.nav-svc-btn:hover,.nav-svc:hover .nav-svc-btn{color:var(--ink)}
.nav > a:focus-visible,.nav-svc-btn:focus-visible{outline:2px solid var(--orange); outline-offset:3px; color:var(--ink)}
.nav [aria-current="page"]{color:var(--ink); position:relative}
.nav [aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--orange);
}
.nav-svc{position:relative; display:flex; align-items:center}
.nav-svc-btn{display:inline-flex; align-items:center; gap:6px}
.nav-svc-btn .caret{
  width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform var(--dur-fast,240ms) ease;
}
.nav-svc:hover .caret,.nav-svc:focus-within .caret,.nav-svc.open .caret{transform:rotate(-135deg) translate(-2px,-2px)}
.nav-svc-menu{
  position:absolute; top:calc(100% + 12px); left:-16px; min-width:232px; z-index:60;
  background:var(--raise); border:1px solid var(--rule);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-5px);
  transition:opacity var(--dur-fast,240ms) ease, transform var(--dur-fast,240ms) ease, visibility 0s linear .24s;
}
.nav-svc:hover .nav-svc-menu,.nav-svc:focus-within .nav-svc-menu,.nav-svc.open .nav-svc-menu{
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}
/* keeps the pointer from falling through the gap between button and panel */
.nav-svc::after{content:""; position:absolute; top:100%; left:0; right:0; height:14px}
.nav-svc-menu a{
  font-size:13px; color:var(--muted); padding:11px 16px; border-bottom:1px solid var(--rule);
  transition:color var(--dur-fast,240ms) ease, background var(--dur-fast,240ms) ease;
}
.nav-svc-menu a:last-child{border-bottom:0}
.nav-svc-menu a:hover{color:var(--ink); background:var(--ground)}
.nav-svc-menu a:focus-visible{outline:2px solid var(--orange); outline-offset:-2px; color:var(--ink)}
.nav-svc-menu [aria-current="page"]{color:var(--ink)}
.nav-svc-menu [aria-current="page"]::before{content:""; display:inline-block; width:12px; height:1px; background:var(--orange); vertical-align:middle; margin-right:8px}

/* burger, hidden until the inline nav collapses */
.nav-burger{
  display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto;
  flex-direction:column; gap:4px; width:38px;
}
.nav-burger span{display:block; height:1px; background:var(--ink); transition:transform .24s ease, opacity .24s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-burger:focus-visible{outline:2px solid var(--orange); outline-offset:2px}

.nav-panel{display:none}

@media (max-width:900px){
  .nav{display:none}
  .nav-burger{display:flex}
  .topbar .status-hide{display:none}
  .topbar .pill-line{display:none}
  .nav-panel{
    display:block; position:fixed; inset:56px 0 auto 0; z-index:55;
    background:var(--ground); border-bottom:1px solid var(--rule);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-panel.open{max-height:calc(100vh - 56px); overflow-y:auto}
  .nav-panel-in{padding:8px var(--gut) 26px}
  .nav-panel a{
    display:block; padding:15px 0; border-bottom:1px solid var(--rule);
    font-size:17px; color:var(--ink);
  }
  .nav-panel a[aria-current="page"]{color:var(--orange)}
  .nav-panel .np-label{
    font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--muted); padding:20px 0 4px; display:block;
  }
  .nav-panel .np-sub{padding-left:16px; font-size:15px; color:var(--muted)}
  .nav-panel .np-cta{
    display:inline-flex; margin-top:22px; border:1px solid var(--orange); color:var(--orange);
    padding:13px 22px; border-radius:999px; font-size:14px; border-bottom:1px solid var(--orange);
  }
}
@media (prefers-reduced-motion:reduce){
  .nav-svc-menu,.nav-panel,.nav-burger span{transition:none}
}

/* Two-tone display type falls below 24px here, so it stops counting as
   large text and needs 4.5:1 rather than 3.0. */
@media (max-width:720px){
  :root{--ink-dim:#85889C}
}

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

/* ============================================================
   ROQA motion layer
   Tokens per ROQA_Motion_Spec.md. Nothing animates from an
   invisible resting state: JS adds the pre-animation classes,
   so with JS off or broken every page renders finished.
   ============================================================ */
:root{
  --dur-instant:120ms;
  --dur-fast:240ms;
  --dur-base:480ms;
  --dur-slow:720ms;
  --ease-standard:cubic-bezier(.22,1,.36,1);
  --ease-entrance:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --rise:24px;
  --rise-lg:48px;
  --slide:64px;
}

/* ---- two tone scroll fill ---- */
/* .fill-ready is applied by JS after it splits words, so untouched
   text keeps its normal color and stays legible without JS. */
.fill-ready .fw{color:var(--ink-dim); transition:color 200ms linear}
/* One two-tone element renders at 15px. Body size needs 4.5:1, not the
   3.0 large-text minimum, so it gets the lifted grey. */
.note.fill-ready .fw{color:var(--muted)}
.note.fill-ready .fw.lit{color:var(--ink)}
.fill-ready .fw.lit{color:var(--ink)}
/* Words inside a static .dim span fill too. The scroll fill replaces the
   static two tone; hierarchy now comes from fill ORDER, not a locked dim. */
.fill-ready .dim{color:inherit}

/* ---- rise and mask reveal ---- */
.pre{opacity:0; transform:translate3d(0,var(--rise),0)}
.pre-lg{opacity:0; transform:translate3d(0,var(--rise-lg),0)}
/* numbered full width rows come in from the side rather than rising */
.pre-x{opacity:0; transform:translate3d(calc(var(--slide) * -1),0,0)}
.pre,.pre-lg,.pre-x{transition:opacity var(--dur-base) var(--ease-entrance),
                        transform var(--dur-base) var(--ease-entrance)}
.display.pre-lg{transition-duration:var(--dur-slow)}
.in{opacity:1!important; transform:none!important}

/* ---- button label slide ---- */
.lab{position:relative; display:inline-block; overflow:hidden; vertical-align:top}
.lab i{display:block; font-style:inherit; font-weight:inherit;
       transition:transform var(--dur-base) var(--ease-entrance)}
.lab i + i{position:absolute; left:0; top:0; width:100%; transform:translate3d(105%,0,0)}
.pill:hover .lab i,.pill:focus-visible .lab i{transform:translate3d(-105%,0,0)}
.pill:hover .lab i + i,.pill:focus-visible .lab i + i{transform:translate3d(0,0,0)}

/* ---- hover lift on rows and cards ---- */
.inc-item,.member,.rel a,.wcard,.step{transition:transform var(--dur-fast) var(--ease-standard)}
.rel a:hover,.wcard:hover{transform:translate3d(0,-4px,0)}
.svc-btn{transition:padding-left var(--dur-fast) var(--ease-standard)}
.svc-row:hover .svc-btn{padding-left:8px}
.pill{transition:background var(--dur-fast) var(--ease-standard),
                 color var(--dur-fast) var(--ease-standard),
                 border-color var(--dur-fast) var(--ease-standard),
                 transform var(--dur-fast) var(--ease-standard)}
.pill:hover{transform:translate3d(0,-2px,0)}
.pill .arrow{transition:transform var(--dur-fast) var(--ease-standard)}
.pill:hover .arrow{transform:translate3d(3px,-3px,0)}
.windex button,.qswitch button,.filters button{transition:color var(--dur-fast) var(--ease-standard)}

/* ---- counters ---- */
.nrow dd{font-variant-numeric:tabular-nums}

/* ---- reduced motion: everything resolves instantly ---- */
@media (prefers-reduced-motion:reduce){
  .pre,.pre-lg{opacity:1!important; transform:none!important; transition:none!important}
  .fill-ready .fw,.fill-ready .dim .fw{transition:none}
  .lab i{transition:none}
  .lab i + i{display:none}
  .pill:hover,.rel a:hover,.wcard:hover{transform:none}
  .blip{animation:none}
}


/* --- loader.css --- */
/* ============================================================
   Wordmark curtain
   Shows on first load and as a buffer between pages.

   Hidden by default. Only JavaScript ever shows it, so a visitor
   with JavaScript off or failing never meets a black screen, and
   the page underneath paints on its own schedule either way.
   ============================================================ */
.curtain{
  position:fixed; inset:0; z-index:9999;
  display:none; place-items:center;
  background:#000000;
  pointer-events:none;
}
/* js opts in */
.curtain-on .curtain{display:grid}

.curtain-mark{
  width:min(42vw, 320px); height:auto; display:block;
  opacity:0; transform:translate3d(0,10px,0) scale(.98);
}
.curtain-in{display:grid; place-items:center}

/* enter: mark settles, then the whole curtain lifts away */
.curtain-on .curtain-mark{
  animation:curtain-mark 620ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes curtain-mark{
  from{opacity:0; transform:translate3d(0,10px,0) scale(.98)}
  to  {opacity:1; transform:translate3d(0,0,0) scale(1)}
}

/* leaving: fade the curtain, do not move the page underneath */
.curtain-out .curtain{
  animation:curtain-lift 620ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes curtain-lift{
  from{opacity:1}
  to  {opacity:0; visibility:hidden}
}

/* between pages the curtain drops back in */
.curtain-nav .curtain{
  display:grid; opacity:0;
  animation:curtain-drop 260ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes curtain-drop{ from{opacity:0} to{opacity:1} }

/* Reduced motion keeps the curtain but removes the travel, and shortens it
   so it is a brief hold rather than a performance. */
@media (prefers-reduced-motion:reduce){
  .curtain-on .curtain-mark{animation:none; opacity:1; transform:none}
  .curtain-out .curtain{animation-duration:200ms}
  .curtain-nav .curtain{animation-duration:120ms}
}