/* ============================================================
   WE MAKE TREASURES — HOME PAGE
   Built on system.css tokens. Two tonal directions via
   [data-tone="precise"|"loud"]; hero variants via [data-hero].
   ============================================================ */

/* ---------- reveal / motion base ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
[data-motion="on"] .reveal { transition: opacity .9s cubic-bezier(.16,.84,.3,1), transform .9s cubic-bezier(.16,.84,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }
[data-motion="off"] .reveal { opacity: 1; transform: none; }
/* Failsafe visibility in frozen iframes — lock the end state only.
   (Must NOT kill transitions, or hover animations on .reveal rows die.) */
.no-anim .reveal { opacity: 1 !important; transform: none !important; }
.no-anim .hl-shuffle .sh-ch { opacity: 1 !important; transform: none !important; }

body { background: var(--paper); overflow-x: clip;
  /* per user direction: unify all type into the Neue Corp brand face (no monospace) */
  --mono: "Neue Corp", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* brand rule: never heavier than 600 (Neue Corp Medium) */
b, strong { font-weight: 600; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* per-letter hover cross-fade on buttons (echoes the shuffle, in random order):
   no clipping — top copy drifts up & fades out, bottom copy rises in & fades in,
   both anchored to the same spot so nothing travels far enough to look masked. */
.tsplit { display: inline-flex; white-space: nowrap; vertical-align: middle; }
.tch { display: inline-block; }
.tch-roll { display: inline-block; position: relative; }
.tch-roll .g-top { display: inline-block; will-change: transform, opacity; }
.tch-roll .g-bot { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }

/* ---------- NAV (transparent, theme-adaptive, fixed) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(13px, 1.8vw, 22px) clamp(16px, 2.4vw, 32px); pointer-events: none; }
.nav > * { pointer-events: auto; }

.nav .brand { display: flex; align-items: center; }
.nav .brand-mark { height: 19px; width: auto; display: block; transition: filter .3s ease; }
.nav .brand-icon { display: none; }
@media (max-width: 540px){ .nav .brand-full { display: none; } .nav .brand-icon { display: block; height: 26px; } }
.nav[data-theme="dark"] .brand-mark { filter: invert(1); }
.nav[data-theme="light"] .brand-mark { filter: none; }

.nav-actions { display: flex; align-items: stretch; gap: 10px; }
.menu-btn, .contact-btn { display: inline-flex; align-items: center; gap: 14px; height: 46px;
  padding: 0 20px; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: -0.005em;
  border: 1px solid transparent; text-decoration: none;
  transition: background .35s ease, color .25s ease, border-color .25s ease; }

/* MENU: transparent at top → black bg fades in on scroll → coral on hover */
.menu-btn { background: transparent; cursor: pointer; }
.nav[data-theme="dark"] .menu-btn { color: #fff; border-color: #fff; }
.nav[data-theme="light"] .menu-btn { color: var(--ink); border-color: rgba(16,18,22,.30); }
.nav.scrolled .menu-btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav[data-theme="dark"].scrolled .menu-btn { border-color: rgba(255,255,255,.22); }
.menu-btn:hover { background: var(--coral) !important; color: var(--ink) !important; border-color: var(--coral) !important; }
/* light-background sections: hover inverts to white bg + black text (both buttons) */
.nav[data-theme="light"] .menu-btn:hover { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; }
.menu-btn .menu-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-btn .menu-burger span { width: 18px; height: 1.5px; background: currentColor; transition: background .25s; }

/* CONTACT: solid, theme-aware, coral on hover */
.nav[data-theme="dark"] .contact-btn { background: #fff; color: var(--ink); border-color: #fff; }
.nav[data-theme="light"] .contact-btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.contact-btn:hover { background: var(--coral); color: var(--ink); border-color: var(--coral); }
.nav[data-theme="light"] .contact-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.contact-btn .arr { font-family: var(--sans); }
@media (max-width: 540px) { .contact-btn .arr { display: none; } .menu-btn, .contact-btn { padding: 0 15px; gap: 10px; white-space: nowrap; } .menu-label { display: none; } }

/* ---------- MENU OVERLAY ---------- */
.menu-overlay { position: fixed; inset: 0; z-index: 120; visibility: hidden; transition: visibility 0s linear .46s; }
.menu-overlay.open { visibility: visible; transition: visibility 0s; }
.menu-overlay .mo-scrim { position: absolute; inset: 0; background: rgba(16,18,22,.42);
  opacity: 0; transition: opacity .4s ease; backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); }
.menu-overlay.open .mo-scrim { opacity: 1; }
.menu-overlay .mo-sheet { position: absolute; top: 0; right: 0; height: 100%; width: min(620px, 100vw);
  background: var(--paper); display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform .45s cubic-bezier(.16,.84,.3,1); }
.menu-overlay.open .mo-sheet { transform: none; }
.mo-top { display: flex; align-items: center; justify-content: space-between; padding: clamp(20px,2.4vw,30px) clamp(24px,3vw,44px); }
.mo-brand img { height: 22px; width: auto; display: block; }
.mo-close { font-size: 26px; line-height: 1; color: var(--ink); background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center; transition: color .2s, transform .3s; }
.mo-close:hover { color: var(--coral); transform: rotate(90deg); }
.mo-nav { display: flex; flex-direction: column; padding: clamp(16px,2.4vw,40px) 0 0; }
.mo-link { display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: clamp(15px,1.7vw,21px) clamp(24px,3vw,44px); border: 0; border-top: 1px solid var(--line);
  font-family: var(--sans); font-weight: 600; font-size: clamp(26px, 3.3vw, 40px); letter-spacing: -0.02em;
  color: var(--ink); background: none; text-align: left; cursor: pointer; transition: color .2s, padding-left .25s; }
.mo-link:hover { color: var(--coral); padding-left: clamp(30px,3.6vw,54px); }
.mo-toggle .mo-plus { font-weight: 400; font-size: 0.66em; transition: transform .3s; }
.mo-group.open .mo-toggle .mo-plus { transform: rotate(45deg); }
.mo-sub { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.16,.84,.3,1); display: flex; flex-direction: column; }
.mo-group.open .mo-sub { max-height: 560px; }
.mo-sub a { padding: 8px clamp(24px,3vw,44px); font-size: 17px; font-weight: 500; color: var(--graphite); transition: color .15s, padding-left .2s; }
.mo-sub a:first-child { padding-top: 6px; }
.mo-sub a:last-child { padding-bottom: 22px; }
.mo-sub a:hover { color: var(--ink); padding-left: clamp(32px,3.6vw,54px); }
.mo-sub a.mo-viewall { color: var(--coral); display: flex; align-items: center; gap: 8px; }
.mo-sub a.mo-viewall .arr { transition: transform .2s; }
.mo-sub a.mo-viewall:hover { color: var(--coral); }
.mo-sub a.mo-viewall:hover .arr { transform: translateX(4px); }
.mo-foot { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.mo-foot-col { padding: clamp(20px,2.4vw,30px) clamp(24px,3vw,44px); display: flex; flex-direction: column; gap: 10px; min-height: 150px; }
.mo-foot-col:last-child { border-left: 1px solid var(--line); }
.mo-foot-col a { font-size: 14px; color: var(--graphite); transition: color .15s; }
.mo-foot-col a:hover { color: var(--ink); }
.mo-lang { font-size: 14px; color: var(--graphite); margin-top: auto; }
.mo-lang b { color: var(--ink); }

/* ============================================================
   HERO  — three treatments
   ============================================================ */
.hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero .reel { position: absolute; inset: 0; z-index: 0; }
.hero .reel image-slot, .hero .reel .reel-fill { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero .reel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,18,22,.60) 0%, rgba(16,18,22,.28) 32%, rgba(16,18,22,.15) 58%, rgba(16,18,22,.32) 100%); }
.hero .grid-bg { position: absolute; inset: 0; z-index: 1; opacity: .35; pointer-events: none;
  background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size: 84px 84px; mask-image: radial-gradient(120% 90% at 20% 0%, #000 30%, transparent 80%); }
.hero .grid-bg { display: none; }
.hero .inner { position: relative; z-index: 2; }

/* frosted logo-gem bleeding in from the right: blurs the video behind its silhouette */
.hero .hero-frost {
  position: absolute; top: 50%; right: 0; transform: translate(42%, -50%);
  height: min(79%, 58vh); aspect-ratio: 1 / 1; z-index: 1; pointer-events: none;
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(12px) brightness(1.07) saturate(1.04);
  backdrop-filter: blur(12px) brightness(1.07) saturate(1.04);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20214.86%20214.86'%3E%3Cpath%20d='M106.72,0L14.23,54.07v106.72l92.49,54.07,93.91-54.07v-52.65l-93.91,52.65V54.07l93.91,54.07v-54.07L106.72,0Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20214.86%20214.86'%3E%3Cpath%20d='M106.72,0L14.23,54.07v106.72l92.49,54.07,93.91-54.07v-52.65l-93.91,52.65V54.07l93.91,54.07v-54.07L106.72,0Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 760px){ .hero .hero-frost { transform: translate(50%, -50%); height: min(58%, 37vh); opacity: .9; } }

/* hero panel wipes in left→right on load */
.panel-wipe { animation: panel-wipe 1s cubic-bezier(.16,.84,.3,1) .35s both; }
@keyframes panel-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[data-motion="off"] .panel-wipe { animation: none; }
@media (prefers-reduced-motion: reduce) { .panel-wipe { animation: none; } }

.hero .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); }
.hero .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--coral); }
.hero h1 { font-family: var(--sans); font-weight: 600; line-height: 0.92; letter-spacing: -0.02em; text-wrap: balance; }
.hero h1 .hl { color: var(--coral); }
.hero .sub { color: rgba(255,255,255,.74); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; max-width: 46ch; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* play button */
.play-btn { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: 15px; color: var(--paper); }
.play-btn .disc { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s; }
.play-btn .disc svg { margin-left: 3px; }
.play-btn:hover .disc { background: var(--coral); border-color: var(--coral); transform: scale(1.06); }
.play-btn:hover .disc svg path { fill: var(--ink); }

.hero .hero-meta { display: flex; gap: var(--s8); border-top: 1px solid var(--line-d); padding-top: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite-d); }
.hero .hero-meta b { color: var(--coral); font-weight: 500; }

/* ============================================================
   HERO — composition matched to reference:
   full-bleed video, white eyebrow + giant white headline upper-left,
   coral panel card (sub-headline · divider · glyph · body · CTAs)
   bottom-left, stats bottom-right.
   ============================================================ */
.hero .eyebrow { color: #fff; font-weight: 600; }
.hero .eyebrow::before { display: none; }
.hero h1 { color: #fff; }

.hero .inner { min-height: 92vh; padding: clamp(104px, 13vh, 150px) var(--s6) clamp(26px, 4vh, 48px);
  display: flex; flex-direction: column; }
.hero .hero-copy { max-width: 1180px; }
.hero h1 { font-size: clamp(40px, 6.2vw, 90px); line-height: 0.98; letter-spacing: -0.025em;
  max-width: 16ch; margin-top: var(--s4); }

.hero .hero-lower { margin-top: auto; padding-top: var(--s7);
  display: grid; grid-template-columns: minmax(0, 740px) 1fr; gap: var(--s6); align-items: end; }

.hero-panel { background: var(--coral); color: var(--ink); display: grid; grid-template-columns: 1fr; }
.hero-panel .panel-main { padding: clamp(24px, 2.6vw, 40px); position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s7);
  min-height: clamp(260px, 26vw, 340px); }
/* scroll-cue arrow — bottom-right of the panel, periodic downward stroke-draw */
.hero-panel .scroll-cue { position: absolute; right: clamp(18px,1.8vw,30px); bottom: clamp(18px,1.8vw,30px);
  width: 46px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer; z-index: 3;
  background: transparent; border: 1px solid rgba(16,18,22,.28); border-radius: 50%; color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.hero-panel .scroll-cue:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(2px); }
.hero-panel .scroll-cue svg { width: 17px; height: 26px; display: block; overflow: visible; }
.hero-panel .scroll-cue path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: cueDraw 3.2s ease-in-out infinite; }
@keyframes cueDraw {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  12%  { opacity: 1; }
  42%  { stroke-dashoffset: 0; opacity: 1; }
  64%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 0; }
  81%  { stroke-dashoffset: 1; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .hero-panel .scroll-cue path { animation: none; stroke-dashoffset: 0; opacity: 1; } }
@media (max-width: 860px){ .hero-panel .scroll-cue { display: none; } }
.hero-panel .panel-head { font-family: var(--sans); font-weight: 600; font-size: clamp(23px, 2.5vw, 38px);
  line-height: 1.04; letter-spacing: -0.02em; }
.hero-panel .panel-lead { display: flex; flex-direction: column; gap: var(--s4); }
.hero-panel .panel-body { font-size: 14.5px; line-height: 1.5; max-width: 46ch; }
.hero-panel .cta-row { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); }
.hero-panel .panel-glyph { display: grid; place-items: center; padding: clamp(18px, 2vw, 34px); }
.hero-panel .glyph-square { width: clamp(92px, 8.5vw, 140px); aspect-ratio: 1; background: var(--ink);
  display: grid; place-items: center; }
.hero-panel .glyph-square svg { width: 40%; height: auto; display: block; }

/* play + solid buttons sitting on coral */
.hero-panel .play-btn { color: var(--ink); }
.hero-panel .play-btn .disc { border-color: rgba(16,18,22,.42); }
.hero-panel .play-btn .disc svg path { fill: var(--ink); }
.hero-panel .play-btn:hover .disc { background: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.hero-panel .play-btn:hover .disc svg path { fill: var(--coral); }

/* solid button sits on coral → hover to white w/ black text (coral hover would vanish) */
.hero-panel .btn--solid:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hero-panel .btn--solid:hover .arr { color: var(--ink); }

/* stats column, bottom-right over video */
.hero .hero-lower .hero-meta { display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  text-align: right; border-top: none; padding: 0; color: rgba(255,255,255,.82); justify-self: end; }
.hero .hero-lower .hero-meta b { color: var(--coral); }

@media (max-width: 900px) {
  .hero .hero-lower { grid-template-columns: 1fr; gap: var(--s5); }
  .hero .hero-lower .hero-meta { flex-direction: row; flex-wrap: wrap; gap: var(--s5);
    align-items: flex-start; text-align: left; justify-self: start; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-panel .panel-main { border-right: none; min-height: 0; }
  .hero-panel .panel-glyph { display: none; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(34px, 11vw, 58px); }
  .hero .hero-lower .hero-meta { flex-direction: column; flex-wrap: nowrap; gap: var(--s4); align-items: flex-start; }
}
/* keep hero-panel CTAs side-by-side on mobile */
@media (max-width: 460px) {
  .hero-panel .cta-row { flex-wrap: nowrap; align-items: center; gap: var(--s5); }
  .hero-panel .cta-row .play-btn { gap: 10px; font-size: 14px; flex: none; }
  .hero-panel .cta-row .play-btn .disc { width: 42px; height: 42px; }
  .hero-panel .cta-row .btn { padding: 14px 16px; white-space: nowrap; min-width: 0; }
}

/* ============================================================
   GENERIC SECTION SCAFFOLD
   ============================================================ */
.s { padding: clamp(64px, 9vw, 128px) 0; border-top: 1px solid var(--line); position: relative; }
.s--ink { background: var(--ink); color: var(--paper); border-top-color: var(--line-d); }
.s--mist { background: var(--mist); }
.s--coral { background: var(--coral); color: var(--ink); border-top-color: rgba(16,18,22,.2); }

.s-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5); align-items: baseline; margin-bottom: var(--s8); }
.s-head .ix { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--coral); }
.s-head h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 4.2vw, 60px);
  letter-spacing: -0.02em; line-height: 0.98; text-wrap: balance; }
.s-head .aside { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--graphite); text-align: right; max-width: 22ch; }
.s--ink .s-head .aside { color: var(--graphite-d); }
@media (max-width: 720px){ .s-head { grid-template-columns: auto 1fr; } .s-head .aside { display: none; } }

/* ---------- TAGLINE BEAT ---------- */
.beat-sec { background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-d); }
.beat { text-align: center; padding: clamp(44px, 6vw, 84px) 0; }
@media (max-width: 600px){ .beat { padding-left: var(--s5); padding-right: var(--s5); } }
.beat .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin-bottom: var(--s6); }
.beat h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(34px, 6.6vw, 104px); line-height: 0.96;
  letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch; margin: 0 auto; color: var(--coral); }
.beat h2 .hl { color: #fff; }
.beat .pun { margin-top: var(--s6); font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--coral); }
.hl-shuffle { white-space: nowrap; }   /* keep the per-letter word whole — never break mid-word */
.hl-shuffle .sh-ch { display: inline-block; transform: translateY(0.9em); opacity: 0;
  transition: transform .5s cubic-bezier(.2,.85,.2,1), opacity .45s ease; }
.hl-shuffle .sh-ch.sh-in { transform: none; opacity: 1; }

/* ---------- FEATURED WORK (editorial rows, sticky-stack on coral) ---------- */
.feat-work { --cl: rgba(16,18,22,.26);
  --fwpad: clamp(19px, 2.1vw, 31px); /* top padding inside each row */
  --strip: calc(var(--fwpad) * 2 + 20px); /* collapsed-row height = equal space above/below the label line */
  --fwgut: clamp(16px, 2.5vw, 44px); /* horizontal inset from the screen edge */
  --navh: clamp(70px, 7.5vw, 90px);  /* offset so the stack pins below the nav */
}
.feat-work .s-head { grid-template-columns: 1fr auto; }
#pricing .s-head { grid-template-columns: 1fr auto; }
#services .s-head, #industries .s-head { grid-template-columns: 1fr auto; }
#industries .s-head h2 { font-size: clamp(34px, 5.2vw, 80px); }
.feat-work .s-head .ix { color: var(--ink); }
.feat-work .s-head .aside { color: rgba(16,18,22,.6); }

.fw-list { border-top: 1px solid var(--cl); }
/* sticky-stack: each row pins below the previous one; earlier rows stay as strips */
.fw-row { position: sticky; top: calc(var(--navh) + var(--strip) * var(--i, 0));
  background: var(--coral); border-top: 1px solid var(--cl);
  display: grid; grid-template-columns: clamp(70px,7vw,110px) minmax(240px, 0.92fr) 1.32fr;
  border-bottom: 1px solid var(--cl); color: var(--ink); text-decoration: none; }
.fw-cell { padding: var(--fwpad) clamp(20px,2.2vw,44px) clamp(28px,3vw,52px); border-left: 1px solid var(--cl); }
.fw-cell.fw-idx { border-left: 0; padding-left: var(--fwgut); font-family: var(--mono); font-weight: 600;
  font-size: clamp(13px,1vw,15px); letter-spacing: 0.04em; color: var(--ink); }
.fw-media { display: flex; align-items: flex-start; }
.fw-media image-slot, .fw-media .fw-img { width: 100%; max-width: none; aspect-ratio: 16 / 9; height: auto;
  display: block; object-fit: cover; background: rgba(16,18,22,.08); outline: 1px solid var(--cl); }
.fw-img { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.16,.84,.3,1); }
.fw-img.drawn { clip-path: inset(0 0 0 0); }
[data-motion="off"] .fw-img { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .fw-img { clip-path: inset(0 0 0 0); } }
.fw-body { border-right: 1px solid var(--cl); padding-right: var(--fwgut); display: flex; flex-direction: column;
  justify-content: space-between; gap: clamp(34px,5vw,80px); min-height: clamp(340px,28vw,480px); }
.fw-eyebrow { font-family: var(--mono); font-weight: 600; font-size: clamp(12px,0.95vw,14px);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  height: calc(var(--strip) - var(--fwpad)); margin: 0; }   /* band ends exactly at the strip line */
.fw-title { font-family: var(--sans); font-weight: 600; font-size: clamp(28px,3.3vw,52px);
  line-height: 1.02; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.fw-bottom { display: flex; flex-direction: column; gap: clamp(18px,2vw,28px); }
.fw-desc { font-size: clamp(15px,1.15vw,18px); line-height: 1.5; color: var(--ink); max-width: 46ch; }
.fw-row .link-arr { color: var(--ink); align-self: flex-start; }
.fw-row:hover .fw-title { opacity: .68; }
.fw-row:hover .fw-media image-slot { outline-color: var(--ink); }

.fw-allbtn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fw-allbtn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.fw-allbtn:hover .arr { color: var(--ink); }

@media (max-width: 820px){
  .fw-row { position: static; grid-template-columns: 1fr; }
  .fw-cell { border-left: 0; padding-left: var(--fwgut); padding-right: var(--fwgut); }
  .fw-cell.fw-idx { padding-bottom: 0; }
  .fw-eyebrow { height: auto; margin-bottom: var(--s4); }
  .fw-body { border-right: 0; min-height: 0; gap: var(--s5); }
  .fw-media image-slot, .fw-media .fw-img { max-width: none; aspect-ratio: 16 / 9; height: auto; }
}

/* ---------- SERVICES (3 pillars) ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-bottom: 0; }
.pillar { border-right: 1px solid var(--line); padding: var(--s7) var(--s6) var(--s6);
  display: flex; flex-direction: column; min-height: 380px; transition: background .3s, color .3s; position: relative; }
.pillar:last-child { border-right: 0; }
.pillar .pnum { font-family: var(--mono); font-size: 12px; color: var(--coral); letter-spacing: 0.1em; }
.pillar h3 { font-weight: 600; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.02em; margin: 0 0 var(--s4); line-height: 1; }
.pillar .lead { font-weight: 600; }
.pillar .disc { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--graphite); line-height: 1.9;
  text-transform: uppercase; margin-top: var(--s5); padding-top: 0; }
.pillar p { color: var(--graphite); font-size: 15px; margin-top: var(--s3); max-width: 34ch; }
.pillar .go { margin-top: auto; padding-top: var(--s7); }
.pillar .go:hover { border-color: transparent; }
.pillar:hover { background: var(--ink); color: var(--paper); }
.pillar:hover p, .pillar:hover .disc { color: var(--graphite-d); }
.pillar .flagtag { position: absolute; top: var(--s6); right: var(--s6); }
@media (max-width: 860px){ .pillars { grid-template-columns: 1fr; border-left: 0; border-right: 0; } .pillar { border-right: 0; border-bottom: 1px solid var(--line-d); min-height: 0; } }

/* pillars mask in left→right; a retracting overlay carries the leading border line */
.pillar.reveal { opacity: 1; transform: none; position: relative; overflow: hidden; }
.pillar.reveal::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -1px;
  background: var(--ink); border-left: 1px solid var(--line-d); z-index: 6; pointer-events: none;
  transition: transform .9s cubic-bezier(.16,.84,.3,1); }
.pillar.reveal.in::after { transform: translateX(101%); }
[data-motion="off"] .pillar.reveal::after, .no-anim .pillar.reveal::after { transform: translateX(101%); transition: none; }
@media (prefers-reduced-motion: reduce) { .pillar.reveal::after { transform: translateX(101%); } }

/* ---------- SERVICES top: stacked head + architectural mark box ---------- */
.services-top { display: grid; grid-template-columns: 1.12fr 0.88fr; align-items: stretch; }
.svc-head { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(22px,2.6vw,38px);
  padding: clamp(56px,8vw,104px) var(--s6) clamp(40px,5vw,72px) var(--s6); }
.svc-head h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(34px, 5.2vw, 80px); letter-spacing: -0.025em; line-height: 0.98; text-wrap: balance; }
.svc-head .aside { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }

.arch-box { position: relative; overflow: hidden; background: transparent; border-left: 1px solid var(--line); min-height: clamp(280px, 26vw, 360px); }
.arch-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 860px){ .services-top { grid-template-columns: 1fr; } .arch-box { min-height: 240px; border-left: 0; border-top: 1px solid var(--line); } .svc-head { padding-bottom: var(--s6); } }

/* services inverted (dark) — flip borders, secondary text, lines, pillar hover */
#services { --cl-svc: var(--line-d); }
#services .svc-head .aside { color: var(--graphite-d); }
#services .arch-box { border-left-color: var(--line-d); }
#services .arch-lines { stroke: #ffffff; }
#services .arch-svg path:not(.arch-mark) { fill: #ffffff; }
#services .pillars { border-color: var(--line-d); }
#services .pillar { border-right-color: var(--line-d); }
#services .pillar p, #services .pillar .disc { color: var(--graphite-d); }
#services .pillar:hover { background: var(--paper); color: var(--ink); }
#services .pillar:hover p, #services .pillar:hover .disc { color: var(--graphite); }
@media (max-width: 860px){ #services .arch-box { border-top-color: var(--line-d); } }

/* ---------- SPECIALTY APPLICATIONS (endless marquee, no gaps) ---------- */
.apps-marquee { overflow-x: clip; overflow-y: visible; border-block: 1px solid var(--line); }
.apps-track { display: flex; width: max-content; }
[data-motion="on"] .apps-track { animation: scroll-x 125s linear infinite; }
[data-motion="on"] .apps-track--rev { animation-direction: reverse; }
.apps-marquee--rev { border-top: 0; }
.apps-marquee:hover .apps-track { animation-play-state: paused; }
.app { flex: 0 0 clamp(250px, 23vw, 320px); border: 1px solid var(--line); border-block: 0;
  background: var(--paper); padding: var(--s5); min-height: 230px; text-decoration: none; position: relative;
  display: flex; flex-direction: column; gap: 14px; }
.app + .app { border-left: 0; }                       /* shared 1px divider, no gaps */
.app:hover { background: var(--coral); }
.app h4 { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; line-height: 1.06; margin-top: 0; color: var(--ink); }
.app-desc { font-size: 13.5px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; margin-top: auto; }
.app:hover .app-desc { color: var(--ink); }
.apps-note { margin-top: var(--s5); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--graphite); text-align: center; }

/* applications — black section with red (coral) text */
#pricing .s-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s4); }
#pricing .s-head h2 { color: var(--coral); }
#pricing .s-head .aside { color: var(--coral); }
#pricing .apps-marquee { border-color: rgba(255,89,73,.42); }
#pricing .app { background: transparent; border-color: rgba(255,89,73,.42); }
#pricing .app h4 { color: var(--coral); }
#pricing .app .app-desc { color: rgba(255,89,73,.74); }
#pricing .app:hover { background: var(--coral); }
#pricing .app:hover h4 { color: var(--ink); }
#pricing .app:hover .app-desc { color: var(--ink); }
#pricing { padding-bottom: clamp(40px,6vw,80px); }
#pricing .apps-note { color: var(--coral); text-align: center; font-size: 14.5px; margin-top: var(--s5); }
.apps-note-icon { display: block; width: 54px; margin: clamp(40px,6vw,80px) auto 0; }
.apps-note-icon svg { display: block; width: 100%; height: auto; overflow: visible; }
#pricing .apps-note-icon .tag-mark { fill: var(--coral); }
#pricing .section-foot-cta { margin-top: var(--s4); }
#pricing .section-foot-cta .btn { background: var(--coral); border-color: var(--coral); color: var(--ink); }
#pricing .section-foot-cta .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
#pricing .section-foot-cta .btn:hover .arr { color: var(--ink); }

/* ---------- INDUSTRIES ---------- */
.inds { border-top: 1px solid var(--line-d); }
.ind { display: grid; grid-template-columns: 64px 1fr auto auto; gap: var(--s6); align-items: center;
  padding: var(--s6) var(--s2); border-bottom: 1px solid var(--line-d); cursor: pointer;
  transition: padding .55s cubic-bezier(.16,.84,.3,1), background .55s cubic-bezier(.16,.84,.3,1),
    opacity .9s cubic-bezier(.16,.84,.3,1), transform .9s cubic-bezier(.16,.84,.3,1); position: relative; }
.ind::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff;
  transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.16,.84,.3,1); }
.ind:hover::after { transform: scaleX(1); }
.ind .inum { font-family: var(--mono); font-size: 13px; color: var(--coral); transition: transform .55s cubic-bezier(.16,.84,.3,1), color .45s cubic-bezier(.16,.84,.3,1); }
.ind h3 { font-weight: 600; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.02em; line-height: 1;
  transition: color .45s cubic-bezier(.16,.84,.3,1), transform .55s cubic-bezier(.16,.84,.3,1); }
.ind .flag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--graphite-d); }
.ind .arr { font-family: var(--mono); font-size: 20px; color: var(--graphite-d); transition: transform .55s cubic-bezier(.16,.84,.3,1), color .45s cubic-bezier(.16,.84,.3,1); }
.s--ink .ind:hover { background: transparent; }

/* industries hover background image swap */
#industries { position: relative; isolation: isolate; }
#industries > .wrap { position: relative; z-index: 2; }
.ind-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ind-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ind-video-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(16,18,22,.9) 0%, rgba(16,18,22,.76) 50%, rgba(16,18,22,.62) 100%); }
.ind-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .6s ease; will-change: opacity, transform; z-index: 3; }
.ind-img.active { opacity: 1; animation: ind-kenburns 7s ease-out forwards; }
@keyframes ind-kenburns { from { transform: scale(1.05) translate(0,0); } to { transform: scale(1.16) translate(-1.5%, -1%); } }
[data-motion="off"] .ind-img.active { animation: none; }
@media (prefers-reduced-motion: reduce) { .ind-img.active { animation: none; } }
.ind-scrim { position: absolute; inset: 0; z-index: 4; background: linear-gradient(90deg, rgba(16,18,22,.92) 0%, rgba(16,18,22,.78) 45%, rgba(16,18,22,.62) 100%); opacity: 0; transition: opacity .6s ease; }
#industries.img-on .ind-scrim { opacity: 1; }
.ind:hover .inum, .ind:hover h3 { transform: translateX(16px); }
.ind:hover h3 { color: var(--coral); }
.ind:hover .arr { transform: translateX(8px); color: var(--coral); }
@media (max-width: 720px){ .ind { grid-template-columns: 40px 1fr auto; gap: var(--s4); } .ind .flag { display: none; } }
/* industries rows full-bleed (lifted out of .wrap), content aligned to page gutter */
#industries .inds-full { position: relative; z-index: 2; }
#industries .ind { padding-left: var(--s6); padding-right: var(--s6); }
/* ---------- LOGO WALL (marquee) ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: var(--s6) 0; }
.marquee .track { display: flex; gap: var(--s9); width: max-content; align-items: center; }
[data-motion="on"] .marquee .track { animation: scroll-x 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .logo { font-family: var(--sans); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; color: var(--graphite); white-space: nowrap; opacity: .7; transition: opacity .2s, color .2s; }
.marquee .logo:hover { opacity: 1; color: var(--ink); }
@keyframes scroll-x { to { transform: translateX(-50%); } }
.logos-cap { text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); margin-bottom: var(--s6); }

/* ---------- NEWSROOM (resources / news / events / careers) ---------- */
.newsroom { padding-top: var(--s8); padding-bottom: 0; border-top: 0; }
/* images mask in left→right when scrolled into view */
.nr-mask { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path .9s cubic-bezier(.16,.84,.3,1), -webkit-clip-path .9s cubic-bezier(.16,.84,.3,1); }
.nr-mask.in { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
[data-motion="off"] .nr-mask, .no-anim .nr-mask { clip-path: none !important; -webkit-clip-path: none !important; }
@media (prefers-reduced-motion: reduce){ .nr-mask { clip-path: none; -webkit-clip-path: none; } }
.newsroom .s-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s4); }
.newsroom .s-head h2 { font-size: clamp(34px, 5.2vw, 80px); }
.newsroom .s-head .aside { max-width: none; white-space: nowrap; color: var(--coral); }
.nr-head { padding: 0 var(--s6); }

/* inverted (dark) newsroom — flip hairlines, text, buttons */
.newsroom.s--ink .news-rows,
.newsroom.s--ink .nr-row--6535 { border-top-color: var(--line-d); }
.newsroom.s--ink .news-col { border-left-color: var(--line-d); }
.newsroom.s--ink .news-col + .news-col { border-top-color: var(--line-d); }
.newsroom.s--ink .nc-label,
.newsroom.s--ink .nc-title,
.newsroom.s--ink .nc-post a,
.newsroom.s--ink .nc-event,
.newsroom.s--ink .nc-item a { color: var(--paper); }
.newsroom.s--ink .nc-post,
.newsroom.s--ink .nc-item { border-top-color: var(--line-d); }
.newsroom.s--ink .nc-meta,
.newsroom.s--ink .nc-cap { color: var(--graphite-d); }
.newsroom.s--ink .nc-thumb { background: var(--ink-soft); }
.newsroom.s--ink .nc-post a:hover,
.newsroom.s--ink .nc-event:hover,
.newsroom.s--ink .nc-item a:hover,
.newsroom.s--ink .nc-post a:hover .nc-meta,
.newsroom.s--ink .nc-event:hover .nc-meta,
.newsroom.s--ink .nc-item a:hover .nc-cap { color: var(--coral); }
.newsroom.s--ink .nc-btn { border-color: var(--line-d-strong); color: var(--paper); }
.newsroom.s--ink .nc-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.news-rows { border-top: 1px solid var(--line); }
.nr-row { display: grid; }
.nr-row--split { grid-template-columns: 1fr 1fr; }
.nr-row--6535 { grid-template-columns: 65fr 35fr; border-top: 1px solid var(--line); }
.news-col { display: flex; flex-direction: column; border-left: 1px solid var(--line); padding: var(--s6) var(--s5); }
.news-col:first-child { border-left: 0; padding-left: var(--s6); }
.news-col:last-child { padding-right: var(--s6); }
.nc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s6); }
.nc-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.nc-sq { width: 7px; height: 7px; background: var(--coral); flex: none; }
.nc-title { font-family: var(--sans); font-weight: 500; font-size: clamp(16px, 1.25vw, 19px); letter-spacing: -0.015em; line-height: 1.12; text-wrap: pretty; }
.nc-meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); transition: color .18s ease; }
.nc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--coral); flex: none; }
.nc-thumb { display: block; background: var(--mist-deep); overflow: hidden; }
.nc-thumb image-slot { display: block; width: 100%; aspect-ratio: 4 / 3; }
.nc-thumb--wide image-slot { aspect-ratio: auto; height: clamp(160px, 15vw, 230px); }

/* resources feature card — image background + scrim + meta/excerpt overlay */
.res-card { position: relative; display: flex; flex: 1; overflow: hidden; text-decoration: none;
  color: #fff; min-height: clamp(300px, 26vw, 380px); margin-bottom: var(--s6); background: var(--ink); }
.res-bg { position: absolute; inset: 0; }
.res-bg image-slot { display: block; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.16,.84,.3,1); }
.res-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,18,22,.12) 0%, rgba(16,18,22,.5) 52%, rgba(16,18,22,.92) 100%); }
.res-content { position: relative; align-self: flex-end; display: flex; flex-direction: column; gap: 12px; padding: var(--s5); }
.res-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.res-title { font-family: var(--sans); font-weight: 600; font-size: clamp(21px, 1.9vw, 28px); letter-spacing: -0.02em; line-height: 1.04; transition: color .18s ease; }
.res-excerpt { font-size: 14px; line-height: 1.46; color: rgba(255,255,255,.82); max-width: 46ch; text-wrap: pretty; }
.res-card:hover .res-bg image-slot { transform: scale(1.045); }
.res-card:hover .res-title { color: var(--coral); }

/* posts (resources + news): thumb left, meta + title right */
.nc-posts { list-style: none; display: flex; flex-direction: column; margin-bottom: var(--s6); }
.nc-post { border-top: 1px solid var(--line); }
.nc-post:first-child { border-top: 0; }
.nc-post a { display: grid; grid-template-columns: 118px 1fr; gap: var(--s5); padding: var(--s5) 0;
  text-decoration: none; color: var(--ink); align-items: center; transition: color .18s ease; }
.nc-body { display: flex; flex-direction: column; gap: 10px; }
.nc-post a:hover { color: var(--coral); }
.nc-post a:hover .nc-meta { color: var(--coral); }
.nc-post a:hover .nc-dot { background: currentColor; }

/* events: two featured cards — image background + scrim + overlaid meta/title */
.nc-events { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-bottom: var(--s6); }
.nc-event { position: relative; display: flex; overflow: hidden; text-decoration: none; color: #fff;
  min-height: clamp(220px, 22vw, 300px); background: var(--ink); }
.ev-bg { position: absolute; inset: 0; }
.ev-bg image-slot { display: block; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.16,.84,.3,1); }
.ev-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,18,22,.1) 0%, rgba(16,18,22,.5) 55%, rgba(16,18,22,.92) 100%); }
.ev-content { position: relative; align-self: flex-end; display: flex; flex-direction: column; gap: 10px; padding: var(--s5); }
.nc-event .ev-content .nc-meta { color: rgba(255,255,255,.82); }
.nc-event:hover .ev-bg image-slot { transform: scale(1.045); }
.nc-event:hover .nc-title { color: var(--coral); }

/* careers: compact list (caption + title) */
.nc-list { list-style: none; display: flex; flex-direction: column; margin-bottom: var(--s6); }
.nc-item { border-top: 1px solid var(--line); }
.nc-item:first-child { border-top: 0; }
.nc-item a { display: flex; flex-direction: column; gap: 6px; padding: var(--s4) 0; text-decoration: none; color: var(--ink);
  transition: color .18s ease, padding-left .25s cubic-bezier(.16,.84,.3,1); }
.nc-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); transition: color .18s ease; }
.nc-item a:hover { color: var(--coral); padding-left: 8px; }
.nc-item a:hover .nc-cap { color: var(--coral); }

.nc-btn { align-self: flex-start; width: auto; min-width: 0; margin-top: auto; }
/* slim arrow-link variant for newsroom column footers */
.nc-link { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; color: var(--paper);
  text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease; }
.nc-link .arr { font-family: var(--mono); transition: transform .2s ease; }
.nc-link:hover { color: var(--coral); }
.nc-link:hover .arr { transform: translateX(4px); }
@media (max-width: 920px){
  .nr-row--split, .nr-row--6535 { grid-template-columns: 1fr; }
  .news-col { border-left: 0; padding: var(--s6); }
  .news-col + .news-col { border-top: 1px solid var(--line); }
}
@media (max-width: 560px){
  .nc-post a { grid-template-columns: 96px 1fr; gap: var(--s4); }
  .nc-events { grid-template-columns: 1fr; }
}
.clients-flush { border-top: 0; padding-top: clamp(32px, 4.5vw, 64px); padding-bottom: 0; }
.clients-flush .marquee { border-bottom: 0; }
#industries { padding-bottom: clamp(64px, 9vw, 128px); }
.s--ink .marquee { border-block-color: var(--line-d); }
.s--ink .marquee .logo { color: var(--graphite-d); }
.s--ink .marquee .logo:hover { color: var(--paper); }
.s--coral .marquee { border-block-color: rgba(16,18,22,.22); }
.s--coral .marquee .logo { color: rgba(16,18,22,.5); }
.s--coral .marquee .logo:hover { color: var(--ink); }
.s--coral .logos-cap { color: rgba(16,18,22,.6); }
/* image logos: uniform ink silhouette on coral, lift to full on hover */
.marquee .logo { display: flex; align-items: center; }
.marquee .logo img { height: 56px; width: auto; display: block; object-fit: contain; }
.s--coral .marquee .logo img { filter: brightness(0); opacity: 1; }
.s--ink .logos-cap { color: var(--graphite-d); }

/* ---------- STATS ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid rgba(16,18,22,.2); }
.s--ink .stats { border-left-color: var(--line-d); }
.stat { border-right: 1px solid rgba(16,18,22,.2); padding: var(--s6) var(--s5); text-align: center; }
.s--ink .stat { border-right-color: var(--line-d); }
.stat .big { font-family: var(--sans); font-weight: 600; font-size: clamp(40px, 5.4vw, 86px); line-height: 0.9; letter-spacing: -0.03em; }
.stat .lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--s4); opacity: .7; }
.stats-flush { padding-top: 0; padding-bottom: 0; }
.stats-flush > .wrap { max-width: none; padding: 0; }
.services-flush { padding-top: 0; padding-bottom: 0; }
@media (max-width: 760px){ .stats { grid-template-columns: 1fr; border-left: 0; }
  .stats-flush > .wrap { padding-left: 0; padding-right: 0; }
  .stat { border-right: 0; border-bottom: 1px solid rgba(16,18,22,.2); }
  .stat:last-child { border-bottom: 0; } }

/* ---------- CLOSING CTA BAND ---------- */.cta-band { background: var(--coral); color: var(--ink); text-align: center; padding: clamp(44px, 6vw, 88px) 0; position: relative; overflow: hidden; border-top: 1px solid rgba(16,18,22,.28); }
.cta-band .big { font-family: var(--sans); font-weight: 600; font-size: clamp(40px, 8vw, 128px); line-height: 0.9; letter-spacing: -0.03em; text-wrap: balance; }
.cta-band .sub { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--s6); }
.cta-band .btn { margin-top: var(--s7); }
.cta-band .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cta-band .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- FOOTER ---------- */
.foot { background: var(--coral); color: var(--ink); }
/* low-profile subscribe + social bar */
.foot-sub { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap;
  padding: var(--s5) var(--s6); border-top: 1px solid rgba(16,18,22,.2); border-bottom: 1px solid rgba(16,18,22,.2); }
.foot-sub-lead { display: flex; flex-direction: column; gap: 3px; }
.foot-sub-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(16,18,22,.6); }
.foot-sub-title { font-family: var(--sans); font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -0.012em; color: var(--ink); }
.foot-sub-field { display: flex; align-items: stretch; flex: 1 1 320px; max-width: 440px; min-width: 240px; border: 1px solid rgba(16,18,22,.34); background: transparent; }
.foot-sub-field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.foot-sub-field input::placeholder { color: rgba(16,18,22,.5); }
.foot-sub-field input:focus { outline: none; }
.foot-sub-field button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--ink); color: var(--paper);
  padding: 11px 16px; font-family: var(--sans); font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background .18s, color .18s; }
.foot-sub-field button:hover { background: var(--paper); color: var(--ink); }
.foot-sub-field button .arr { font-family: var(--mono); transition: transform .2s; }
.foot-sub-field button:hover .arr { transform: translateX(3px); }
.foot-sub.done .foot-sub-field { border-color: rgba(16,18,22,.2); align-items: center; padding: 11px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.foot-social { display: flex; align-items: center; gap: var(--s5); }
.foot-social a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(16,18,22,.7); transition: color .15s; }
.foot-social a:hover { color: var(--ink); }
@media (max-width: 760px){ .foot-sub { gap: var(--s4); } .foot-sub-lead { flex: 1 1 100%; } .foot-sub-field { max-width: none; flex-basis: 100%; } }
.foot .cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s6); padding: var(--s8) 0; }
.foot .brandcol img { height: 22px; width: auto; filter: none; margin-bottom: var(--s5); }
.foot .brandcol p { color: rgba(16,18,22,.72); font-size: 14px; max-width: 30ch; }
.foot .brandcol .backed { margin-top: var(--s6); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(16,18,22,.7); }
.foot .col h5 { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s5); }
.foot .col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot .col ul a { font-size: 14px; color: rgba(16,18,22,.72); transition: color .15s; }
.foot .col ul a:hover { color: var(--ink); }
.ext-arr { width: 0.72em; height: 0.72em; display: inline-block; vertical-align: -0.04em; margin-left: 4px; }
.foot .legal { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s5) var(--s6); border-top: 1px solid rgba(16,18,22,.2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(16,18,22,.7); }
.foot .legal .gama { border: 1px solid rgba(16,18,22,.3); padding: 5px 10px; }
.foot .bigword { padding: 0 0 var(--s6); }
.foot .bigword img { width: 100%; display: block; filter: none; opacity: 1; }
@media (max-width: 900px){ .foot .cols { grid-template-columns: 1fr 1fr; } .foot .brandcol { grid-column: 1 / -1; } }
@media (max-width: 600px){ .foot .legal { flex-direction: column; align-items: flex-start; gap: var(--s3); } }

/* ============================================================
   TONE: LOUD overrides  [data-tone="loud"]
   bigger, more coral fills, more attitude
   ============================================================ */
[data-tone="loud"] { --hl-weight: 800; }
[data-tone="loud"] .hero h1 { letter-spacing: -0.03em; }
[data-tone="loud"] .s-head h2 { font-size: clamp(32px, 5.4vw, 76px); }
[data-tone="loud"] .beat h2 { font-size: clamp(40px, 8.4vw, 128px); }
/* loud: tagline beat goes full coral */
[data-tone="loud"] .beat-sec { background: var(--coral); color: var(--ink); border-top-color: rgba(16,18,22,.2); }
[data-tone="loud"] .beat-sec .kicker, [data-tone="loud"] .beat-sec .pun { color: rgba(16,18,22,.7); }
[data-tone="loud"] .beat-sec h2 .hl { color: var(--ink); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
/* loud: services strip gets coral hover -> stays energetic; apps lift more */
[data-tone="loud"] .app:hover { background: var(--coral); border-color: var(--coral); }
[data-tone="loud"] .app:hover .ai, [data-tone="loud"] .app:hover .meta { color: var(--ink); }
[data-tone="loud"] .app:hover .meta .dot { color: var(--ink); }
/* loud: section index labels become coral chips */
[data-tone="loud"] .s-head .ix { background: var(--coral); color: var(--ink); padding: 3px 8px; }
[data-tone="loud"] .s--ink .s-head .ix { color: var(--ink); }
/* loud: stat numbers in coral on light */
[data-tone="loud"] .s:not(.s--ink):not(.s--coral) .stat .big { color: var(--coral); }
/* loud: punchier buttons */
[data-tone="loud"] .nav .start { font-size: 15px; }
[data-tone="loud"] .marquee .logo { font-size: 30px; }

/* precise: tagline beat is dark (set in base .beat-sec) */

/* ---------- small shared bits ---------- */
.eyebrow-rule { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); }
.eyebrow-rule::before { content: ""; width: 26px; height: 1px; background: var(--coral); }
.section-foot-cta { margin-top: var(--s7); display: flex; justify-content: center; }

/* ---------- REEL LIGHTBOX ---------- */
.reel-lightbox { position: fixed; inset: 0; z-index: 200; display: none; }
.reel-lightbox.open { display: block; }
.reel-lightbox .rl-scrim { position: absolute; inset: 0; background: rgba(10,11,14,.86); backdrop-filter: blur(6px);
  animation: rl-fade .3s ease; }
.reel-lightbox .rl-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  gap: var(--s4); padding: clamp(20px, 5vw, 80px); pointer-events: none; }
.reel-lightbox .rl-inner > * { pointer-events: auto; }
.reel-lightbox .rl-close { align-self: flex-end; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper); border: 1px solid var(--line-d-strong); padding: 9px 14px; background: transparent; }
.reel-lightbox .rl-close:hover { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.reel-lightbox .rl-frame { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; border: 1px solid var(--line-d);
  animation: rl-rise .45s cubic-bezier(.16,.84,.3,1); }
.reel-lightbox .rl-frame image-slot, .reel-lightbox .rl-frame .rl-video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; border: 0; }
.reel-lightbox .rl-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.reel-lightbox .rl-play .disc { width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  display: grid; place-items: center; background: rgba(16,18,22,.4); }
.reel-lightbox .rl-cap { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; width: 100%;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite-d); }
@keyframes rl-fade { from { opacity: 0; } }
@keyframes rl-rise { from { opacity: 0; transform: translateY(24px) scale(.985); } }
@media (max-width: 640px){ .reel-lightbox .rl-cap span:last-child { display: none; } }

/* ---------- CARD CURSOR (white circle + up-right arrow on clickable cards) ---------- */
#cursor { position: fixed; left: 0; top: 0; z-index: 1400; pointer-events: none;
  transform: translate3d(-200px, -200px, 0); will-change: transform; }
.cursor-dot { width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: #fff; color: var(--ink); display: grid; place-items: center;
  transform: scale(0); opacity: 0;
  transition: transform .34s cubic-bezier(.16,.84,.3,1), opacity .22s ease;
  box-shadow: 0 8px 30px rgba(16,18,22,.22); }
#cursor.active .cursor-dot { transform: scale(1) !important; opacity: 1 !important; }
.cursor-dot svg { width: 28px; height: 28px; }
.cursor-dot .cur-ico-play { width: 22px; height: 22px; margin-left: 3px; }
#cursor .cur-ico-play { display: none; }
#cursor.cursor-play .cur-ico-arrow { display: none; }
#cursor.cursor-play .cur-ico-play { display: block; }
.cursor-card-hover, .cursor-card-hover * { cursor: none !important; }
@media (hover: none), (pointer: coarse) { #cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-dot { transition: opacity .2s ease; } }

/* ---------- PAGE TRANSITION CURTAIN ---------- */
.pcurtain { position: fixed; inset: 0; z-index: 9999; background: var(--ink); display: grid; place-items: center;
  pointer-events: none; transform: translateY(0); animation: pc-out .72s cubic-bezier(.76,0,.24,1) .05s forwards; will-change: transform; }
.pcurtain-mark { width: 46px; height: auto; animation: pc-mark 1s ease both; }
@keyframes pc-out { 0%, 26% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes pc-mark { 0% { opacity: 0; transform: scale(.9); } 28% { opacity: 1; transform: none; } 66% { opacity: 1; } 100% { opacity: 0; } }
.pcurtain.is-nav { pointer-events: all; animation: pc-in .4s cubic-bezier(.76,0,.24,1) forwards; }
.pcurtain.is-nav .pcurtain-mark { animation: pc-mark-in .4s ease both; }
@keyframes pc-in { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes pc-mark-in { 0% { opacity: 0; transform: scale(.92); } 60% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pcurtain { display: none; } }


/* curtain — transition-based for SPA (overrides earlier animation rules) */
.pcurtain { transform: translateY(-100%); transition: transform .55s cubic-bezier(.76,0,.24,1); animation: none; }
.pcurtain.cover { transform: translateY(0); pointer-events: all; animation: pc-failsafe 0s linear 2.6s forwards; }
.pcurtain .pcurtain-mark { opacity: 0; transition: opacity .35s ease; animation: none; }
.pcurtain.cover .pcurtain-mark { opacity: 1; }
@keyframes pc-failsafe { to { transform: translateY(-100%); pointer-events: none; } }


/* SPA content transition — viewport slide (old slides out top, new slides in from bottom) */
.swup-leaving { position: fixed; inset: 0; height: 100vh; overflow: hidden; z-index: 9000; background: var(--ink); will-change: transform; }
/* freeze the leaving snapshot to its final state so cloned wipe/typewriter/reveal nodes don't re-animate (titles vanishing on click) */
.swup-leaving .cs-wipe-ink { opacity: 1 !important; }
.swup-leaving .cs-wipe-line::after { display: none !important; }
.swup-leaving .tw-caret { display: none !important; }
.swup-leaving .tw-rest { visibility: visible !important; }
.swup-leaving .reveal { opacity: 1 !important; transform: none !important; }
.swup-leaving .cs-deliv-item > * { opacity: 1 !important; }
.swup-leaving .cs-deliv-item::after { display: none !important; }
.swup-leaving.go { transform: translateX(-100vw); transition: transform .62s cubic-bezier(.76,0,.24,1); }
#swup.swup-entering { transform: translateX(100vw); }
#swup.swup-enter-go { transform: translateX(0); transition: transform .62s cubic-bezier(.76,0,.24,1); }
@media (prefers-reduced-motion: reduce) { .swup-leaving { display: none; } #swup.swup-entering, #swup.swup-enter-go { transform: none; transition: none; } }
/* touch devices: a horizontal slide pushes the entering page to translateX(100vw),
   which momentarily makes the layout 200vw wide — mobile browsers shrink-to-fit that
   (the "two pages side by side at half scale" pop). Swap the slide for a dissolve so
   nothing is ever translated off-canvas. */
@media (pointer: coarse) {
  #swup.swup-entering, #swup.swup-enter-go { transform: none !important; transition: none !important; }
  .swup-leaving { transition: opacity .34s ease; }
  .swup-leaving.go { transform: none !important; opacity: 0; transition: opacity .34s ease; }
}