/* ==========================================================================
   Novum Marketing: new site
   Brand (locked): Qurova Bold = wordmark only · Aileron = all text ·
   DM Mono = small labels/numbers · teal #349fa8 · black · white.
   ========================================================================== */

@font-face { font-family: 'Qurova'; src: url('../fonts/Qurova-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('../fonts/Aileron-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/DMMono-Regular-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/DMMono-Regular-latinext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* brand */
  --teal: #349fa8;
  --teal-dim: #1d6269;
  --black: #000;
  --white: #fff;
  --surface: #0c0c0c;
  --surface-2: #141414;
  --surface-3: #1c1c1c;

  /* text on dark */
  --fg: #fff;
  --fg-85: rgba(255,255,255,.85);
  --fg-60: rgba(255,255,255,.6);
  --fg-50: rgba(255,255,255,.5);
  --fg-30: rgba(255,255,255,.3);
  --line: rgba(255,255,255,.12);

  /* type */
  --ff-logo: 'Qurova', 'Aileron', system-ui, sans-serif;
  --ff: 'Aileron', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1: clamp(2.5rem, .6rem + 8.8vw, 10rem);
  --fs-statement: clamp(2.75rem, 1rem + 5.6vw, 6.5rem);
  --fs-h2: clamp(2.5rem, 1rem + 5.2vw, 5.75rem);
  --fs-row: clamp(1.9rem, .9rem + 3.1vw, 4rem);
  --fs-list: clamp(1.75rem, .8rem + 3.6vw, 4.25rem);
  --fs-step: clamp(1.6rem, .8rem + 2.4vw, 3.2rem);
  --fs-display: clamp(2.75rem, 1rem + 6vw, 7rem);     /* case, service and About page titles; work chapter titles */
  --fs-card: clamp(2rem, 1rem + 2.7vw, 3.75rem);      /* large card titles */
  --fs-quote: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);    /* quotes and large statements in lists */
  --fs-h3: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  --fs-h4: clamp(1.4rem, 1rem + 1vw, 2rem);           /* card, step and question titles */
  --track-mid: -.03em;
  --fs-lead: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-body: .9375rem;
  --fs-small: .875rem;
  --fs-label: .75rem;
  --track-display: -.045em;

  /* layout */
  --gutter: clamp(1rem, .6rem + 1.8vw, 2.5rem);
  --edge: max(var(--gutter), calc((100vw - 1680px) / 2));   /* content edge: caps the layout at 1680px on very wide screens */
  --col-gap: clamp(1rem, 2.2vw, 2rem);
  --sec-pad: clamp(6rem, 3rem + 9vw, 11rem);
  --header-h: 4.5rem;
  --r-section: clamp(28px, 3.3vw, 48px);
  --r-card: 14px;
  --r-box: 20px;

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --dur: .6s;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: clip; }  /* nothing can push the page sideways (iOS lets you pan into overflow); clip keeps position: sticky working */
body { margin: 0; background: var(--black); color: var(--fg); font-family: var(--ff); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--teal); color: var(--black); }

.skip-link { position: fixed; left: var(--gutter); top: -100px; z-index: 200; background: var(--white); color: var(--black); padding: .75rem 1rem; border-radius: 999px; font-size: var(--fs-small); }
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; padding-inline: var(--edge); }
.accent { color: var(--teal); }
.accent-ink { color: var(--white); }

/* ---------- shared type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-60); line-height: 1.33; }
.eyebrow .dot, .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }
.eyebrow--ink { color: rgba(0,0,0,.85); }
.eyebrow--ink .dot { background: var(--black); }
.eyebrow--dark { color: rgba(0,0,0,.6); }

.h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1; letter-spacing: var(--track-display); }
.statement { font-size: var(--fs-statement); line-height: .95; letter-spacing: -.045em; }
.section-lead { font-size: var(--fs-lead); line-height: 1.63; color: var(--fg-60); max-width: 26rem; }

/* ---------- buttons ---------- */
/* Pill button: a colour circle grows out of the arrow chip on hover and floods
   the pill; label nudges right, chip turns translucent and rotates 45°. */
.btn { --h: 52px; --icon: 42px; --bg: var(--white); --fg-btn: var(--black); --fill: var(--teal); --fill-fg: var(--black); --origin: calc(100% - var(--h) / 2); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 1rem; height: var(--h); padding: 0 calc((var(--h) - var(--icon)) / 2) 0 1.5rem; border-radius: 999px; background: var(--bg); color: var(--fg-btn); font-size: .8125rem; letter-spacing: .01em; white-space: nowrap; transition: color .5s var(--ease), box-shadow .5s var(--ease), scale .3s var(--ease); }
.btn--sm { --h: 40px; --icon: 32px; gap: .75rem; padding-left: 1.125rem; font-size: .75rem; }
.btn--md { --h: 52px; }
.btn:active { scale: .97; }
.btn:not(:has(.btn-icon)) { --origin: 50%; padding-right: 1.125rem; }
.btn-fill { position: absolute; inset: 0; z-index: -1; background: var(--fill); clip-path: circle(0 at var(--origin) 50%); transition: clip-path .7s var(--ease); pointer-events: none; }
.btn-label { position: relative; }
.btn-icon { width: var(--icon); height: var(--icon); border-radius: 50%; display: grid; place-items: center; flex: none; transition: background-color .5s var(--ease), color .5s var(--ease), rotate .6s var(--ease); }
.btn:is(:hover, :focus-visible) { color: var(--fill-fg); }
.btn:is(:hover, :focus-visible) .btn-fill { clip-path: circle(150% at var(--origin) 50%); }
.btn:is(:hover, :focus-visible) .btn-icon { background: color-mix(in oklab, var(--fill-fg) 14%, transparent); color: var(--fill-fg); rotate: 45deg; }

/* variants (Novum colours) */
.btn--light { --bg: var(--white); --fg-btn: var(--black); --fill: var(--teal); --fill-fg: var(--black); }
.btn--ghost { --bg: transparent; --fg-btn: var(--fg); --fill: var(--white); --fill-fg: var(--black); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.btn--ghost:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px transparent; }
.btn--dark { --bg: var(--black); --fg-btn: var(--white); --fill: var(--teal); --fill-fg: var(--black); }
.section--accent .btn--dark { --fill: var(--white); }

.btn-icon--accent { background: var(--teal); color: var(--black); }
.btn-icon--dark { background: var(--black); color: var(--white); }
.btn-icon--light { background: var(--white); color: var(--black); }

/* arrow glyph: two copies so standalone arrows can swap (exit top-right, enter bottom-left) */
.arrow { position: relative; width: 14px; height: 14px; overflow: hidden; display: block; }
.arrow svg { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.arrow svg:last-child { transform: translate(-120%, 120%); }
.btn-icon svg, .round-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:is(a, button):not(.btn):is(:hover, :focus-visible) .arrow svg:first-child { transform: translate(120%, -120%); }
:is(a, button):not(.btn):is(:hover, :focus-visible) .arrow svg:last-child { transform: none; }

.round-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); flex: none; transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.round-btn--outline:hover { background: var(--white); color: var(--black); }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--edge); color: var(--fg); transition: background-color .5s var(--ease), color .5s var(--ease), opacity .8s var(--ease); }
.site-header.is-solid { background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 var(--line); }
.site-header.is-light { color: var(--black); }
.site-header.is-light.is-solid { background: rgba(255,255,255,.78); box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); }
.site-header.is-accent.is-solid { background: rgba(52,159,168,.8); box-shadow: inset 0 -1px 0 rgba(0,0,0,.1); }
@media (max-width: 900px) { .site-header.is-solid { background: rgba(0,0,0,.9); } .site-header.is-light.is-solid { background: rgba(255,255,255,.92); } .site-header.is-accent.is-solid { background: rgba(52,159,168,.94); } }
.site-header.is-accent { color: var(--black); }
.header-left { display: flex; align-items: center; gap: 1rem; }
.wordmark { font-family: var(--ff-logo); font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.status-dot--ink { background: var(--black); }
.header-nav { display: flex; gap: 2.2rem; font-size: .875rem; }
.header-nav a { position: relative; display: flex; align-items: center; opacity: .75; transition: opacity .3s; }
.header-nav a:hover, .header-nav a:focus-visible { opacity: 1; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; }
.site-header.is-light .btn--light, .site-header.is-accent .btn--light { --bg: var(--black); --fg-btn: var(--white); }
.site-header.is-accent .btn--light { --fill: var(--white); }
.menu-toggle { width: 40px; height: 40px; display: grid; align-content: center; justify-items: end; gap: 7px; }
.menu-toggle span { display: block; width: 30px; height: 1.5px; background: currentColor; transform-origin: right center; transition: transform .5s var(--ease); }
.menu-toggle span:last-child { transform: scaleX(.667); }
.menu-toggle:hover span:last-child { transform: none; }
.menu-open .menu-toggle span { transform-origin: center; }
.menu-open .menu-toggle span:first-child { transform: translateY(4.25px) rotate(45deg) scaleX(.87); }
.menu-open .menu-toggle span:last-child { transform: translateY(-4.25px) rotate(-45deg) scaleX(.87); }

/* ---------- menu overlay ---------- */
.site-menu { position: fixed; inset: calc(var(--header-h) - 4px) 10px 10px; z-index: 90; border-radius: var(--r-box); background: rgba(22,22,22,.72); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem) 1.25rem; opacity: 0; transform: translateY(-12px); transition: opacity .5s var(--ease), transform .6s var(--ease); overflow-y: auto; }
.site-menu.is-open { opacity: 1; transform: none; }
.menu-inner { display: grid; grid-template-columns: minmax(280px, 380px) 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.menu-card { background: var(--white); color: var(--black); border-radius: var(--r-box); padding: 1.75rem; display: grid; gap: 1rem; justify-items: start; }
.menu-card-title { font-size: 1.9rem; line-height: 1.05; letter-spacing: -.035em; }
.menu-card-text { font-size: var(--fs-small); color: rgba(0,0,0,.6); }
.menu-card-alt { font-size: .8125rem; color: rgba(0,0,0,.6); }
.menu-card-alt a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.menu-col { display: grid; gap: .35rem; }
.menu-label { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.menu-col a { font-size: var(--fs-quote); line-height: 1.15; letter-spacing: var(--track-mid); color: var(--fg-60); transition: color .4s var(--ease), transform .5s var(--ease); width: fit-content; }
.menu-col a:hover { color: var(--fg); transform: translate3d(10px, 0, 0); }
.menu-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--fg-50); padding-top: 1.25rem; margin-top: 2rem; border-top: 1px solid var(--line); }
.menu-foot a:hover { color: var(--fg); }

/* ---------- sections: stacked cards with rounded tops ---------- */
.section { position: relative; padding-block: var(--sec-pad); }
.section + .section { margin-top: calc(var(--r-section) * -1); border-radius: var(--r-section) var(--r-section) 0 0; padding-top: calc(var(--sec-pad) + var(--r-section)); }
.section--dark { background: var(--black); color: var(--fg); }
.section--light { background: var(--white); color: var(--black); }
.section--accent { background: var(--teal); color: var(--black); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.section--light .section-lead { color: rgba(0,0,0,.6); text-align: right; }
.section--light .eyebrow { color: rgba(0,0,0,.6); }
.section-head--cta { align-items: center; }
.section-aside { display: grid; gap: 1.5rem; justify-items: start; max-width: 26rem; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding-block: calc(var(--header-h) + 3rem) calc(var(--r-section) + 9rem); background: var(--black); }
.hero-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.hero-paths g { transition: transform 1.2s var(--ease); will-change: transform; }
.hero-paths path { fill: none; stroke-linecap: round; }
.hero-glow { position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 42%, rgba(255,255,255,.06), transparent); pointer-events: none; }
.hero-content { position: relative; text-align: center; display: grid; justify-items: center; padding-inline: var(--gutter); }
.hero-title { font-size: var(--fs-h1); font-weight: 400; line-height: .95; letter-spacing: -.045em; margin: 1.6rem 0 2rem; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }  /* room for descenders (g) inside the reveal mask */
.hero-title .line-inner { display: inline-block; transition: transform 1.2s var(--ease); }
.hero-lead { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.63; color: var(--fg-60); }
.hero-ctas { display: flex; gap: .75rem; margin-top: 2.5rem; flex-wrap: wrap; justify-content: center; }
.hero-bar { position: absolute; inset: auto var(--edge) calc(var(--r-section) + 1.5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; }
.scroll-cue { grid-column: 2; display: grid; justify-items: center; gap: .75rem; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-60); }
.scroll-line { width: 1px; height: 44px; background: var(--line); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--fg); transform: translateY(-100%); animation: scroll-cue 2.2s var(--ease) infinite; }
.scroll-cue .cue-mobile { display: none; }

/* ---------- hero on phones ----------
   Poster-style: the headline fills the screen over full-screen flowing lines; one
   compact button with "View Our Work" as a text link beside it; a "Swipe up" cue. */
@media (max-width: 640px) {
  .hero { place-items: center stretch; padding-block: calc(var(--header-h) + 1rem) calc(var(--r-section) + 5rem); }
  .hero-paths { opacity: 1; transform: scale(1.3); transform-origin: 50% 50%; }
  .hero-glow { background: radial-gradient(90% 50% at 50% 45%, rgba(52,159,168,.16), transparent); }
  .hero-content { text-align: left; justify-items: start; width: 100%; }
  .hero .eyebrow { display: block; text-align: left; line-height: 1.7; }
  .hero .eyebrow .dot { display: inline-block; vertical-align: middle; margin: 0 .6rem .15em 0; }
  .hero-title { font-size: 22vw; line-height: .84; letter-spacing: -.06em; margin: 0 0 2rem; }
  .hero-lead { display: none; }
  .hero-ctas { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1rem 1.5rem; margin-top: 0; }
  .hero-ctas .btn--ghost { background: none; box-shadow: none; padding: 0; min-height: 0; }
  .hero-ctas .btn--ghost .btn-fill, .hero-ctas .btn--ghost .btn-icon { display: none; }
  .hero-ctas .btn--ghost .btn-label { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
  .hero-bar { grid-template-columns: 1fr; justify-items: center; bottom: calc(var(--r-section) + 1.1rem); }
  .scroll-cue { grid-column: 1; gap: .55rem; }
  .scroll-cue .cue-desktop { display: none; }
  .scroll-cue .cue-mobile { display: inline; }
  .scroll-line { height: 30px; }
  .scroll-line::after { animation-name: swipe-cue; }
}
@media (max-width: 640px) and (max-height: 720px) { .hero-bar { display: none; } }  /* short phones: no room for the cue */
@keyframes swipe-cue { 0% { transform: translateY(100%); } 55%, 100% { transform: translateY(-100%); } }

/* intro sequence */
.js body.is-loading .hero-title .line-inner { transform: translateY(105%); }
.js .intro-fade { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js body.is-loading .intro-fade { opacity: 0; transform: translateY(14px); }
.js body.is-loading .site-header { opacity: 0; }
.hero-title .line:nth-child(2) .line-inner { transition-delay: .08s; }
.hero-lead.intro-fade { transition-delay: .35s; }
.hero-ctas.intro-fade { transition-delay: .45s; }
.hero-bar.intro-fade { transition-delay: .6s; }
.site-header { transition-delay: 0s; }

/* ---------- services ---------- */
.service-list { border-top: 1px solid var(--line); }
.service-row { border-bottom: 1px solid var(--line); }
.service-link { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1.25fr) minmax(0, 1fr) 52px; gap: var(--col-gap); align-items: center; padding: clamp(2rem, 3.5vw, 3.25rem) 0; isolation: isolate; }
.service-link::before { content: ''; position: absolute; inset: 0 auto 0 calc(var(--gutter) * -1); width: calc(100% + var(--gutter)); background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); z-index: -1; }
.service-link:hover::before, .service-link:focus-visible::before { transform: scaleX(1); }
.service-num { font-family: var(--ff-mono); font-size: .75rem; color: var(--fg-50); }
.service-name { display: grid; gap: .6rem; }
.service-title { display: flex; align-items: center; font-size: var(--fs-row); line-height: 1; letter-spacing: var(--track-display); transition: transform .6s var(--ease); }
.service-title { position: relative; }
.service-dot { position: absolute; left: -.55em; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--teal); transform: scale(0); transition: transform .5s var(--ease); }
.service-link:hover .service-title, .service-link:focus-visible .service-title { transform: translateX(.55em); }
.service-link:hover .service-dot, .service-link:focus-visible .service-dot { transform: scale(1); }
.service-sub { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); }
.service-desc { display: block; font-size: var(--fs-small); line-height: 1.6; color: var(--fg-60); grid-column: 3; grid-row: 1; align-self: start; }
.service-tags { grid-column: 3; grid-row: 1; align-self: end; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .8125rem; color: var(--fg-85); margin-top: 1rem; }
.service-link { grid-template-rows: auto; }
.service-link .service-desc + .service-tags { grid-row: 2; align-self: start; margin-top: 0; }
.service-link .service-num, .service-link .service-name, .service-link .round-btn { grid-row: 1 / span 2; }
.service-link .round-btn { grid-column: 4; }
.service-link:hover .round-btn, .service-link:focus-visible .round-btn { background: var(--white); color: var(--black); box-shadow: none; }
.round-btn svg { transition: transform .6s var(--ease); }
.service-link:hover .round-btn svg { transform: rotate(45deg); }

/* ---------- services bento (homepage, HOME_SERVICES = 'bento') ----------
   Tiles slide up into a grid one after another, each with its own looping icon. */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(15.5rem, auto)); gap: 12px;
  grid-template-areas: "social social social social brand brand" "social social social social web web" "video video video launch launch launch" "ai ai ai ai ai ai"; }
.bento-tile { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--r-box); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.bento-tile--social { grid-area: social; background: var(--white); color: var(--black); box-shadow: none; }
.bento-tile--brand { grid-area: brand; }
.bento-tile--web { grid-area: web; }
.bento-tile--launch { grid-area: launch; }
.bento-tile--video { grid-area: video; }
.bento-tile--ai { grid-area: ai; background: var(--white); color: var(--black); box-shadow: none; }
.bento-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.bento-num { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-60); }
.bento-tile--social .bento-num, .bento-tile--ai .bento-num { color: rgba(0,0,0,.85); }
.bento-tile .round-btn { width: 44px; height: 44px; }
.bento-tile--social .round-btn, .bento-tile--ai .round-btn { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); color: var(--black); }
.bento-body { margin-top: auto; display: grid; gap: .75rem; max-width: 34rem; }
.bento-title { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--track-mid); }
.bento-tile--social .bento-title { font-size: var(--fs-card); }
.bento-desc { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-60); max-width: 30rem; }
.bento-tile--social .bento-desc, .bento-tile--ai .bento-desc { color: rgba(0,0,0,.72); }
.bento .service-tags { grid-column: auto; grid-row: auto; margin-top: .25rem; gap: .4rem; }
.bento .service-tags span { padding: .35rem .7rem; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font-size: .75rem; opacity: .8; }
.bento-tile--social .service-tags, .bento-tile--ai .service-tags { color: var(--black); }
.bento-tile:hover, .bento-tile:focus-visible { background: var(--surface-3); }
.bento-tile--social:hover, .bento-tile--social:focus-visible { background: #eef3f4; }
.bento-tile--ai:hover, .bento-tile--ai:focus-visible { background: #eef3f4; }
.bento-tile:hover .round-btn, .bento-tile:focus-visible .round-btn { background: var(--white); color: var(--black); box-shadow: none; }
.bento-tile--social:hover .round-btn, .bento-tile--ai:hover .round-btn, .bento-tile--social:focus-visible .round-btn, .bento-tile--ai:focus-visible .round-btn { background: var(--black); color: var(--white); }
.bento-tile:hover .round-btn svg, .bento-tile:focus-visible .round-btn svg { transform: rotate(45deg); }

/* icons */
.bento-icon { position: absolute; right: clamp(1.25rem, 2vw, 1.75rem); top: 50%; translate: 0 -50%; width: clamp(5rem, 9vw, 8rem); height: auto; z-index: -1; overflow: visible; }
.bento-tile--social .bento-icon { width: clamp(8rem, 15vw, 13rem); top: 42%; }
.bento-tile--ai .bento-icon { width: clamp(7rem, 12vw, 11rem); }
.icon-social rect { fill: rgba(0,0,0,.08); }
.icon-social rect:nth-child(odd) { animation: post-in 4.8s var(--ease) infinite; }
.icon-social rect:nth-child(even) { animation: post-in 4.8s var(--ease) infinite 1.2s; }
.icon-social rect:nth-child(3n) { animation-delay: 2.4s; }
@keyframes post-in { 0%, 100% { fill: rgba(0,0,0,.08); } 20%, 55% { fill: var(--teal); } }
.icon-brand .sw { stroke: var(--surface-2); stroke-width: 3; transition: transform .8s var(--ease); }
.icon-brand .sw1 { fill: var(--white); } .icon-brand .sw2 { fill: var(--teal); } .icon-brand .sw3 { fill: #2a2a2a; }
.icon-brand .sw1 { animation: sw-a 5s var(--ease) infinite; } .icon-brand .sw3 { animation: sw-c 5s var(--ease) infinite; }
@keyframes sw-a { 0%, 100% { transform: translateX(0); } 40%, 70% { transform: translateX(18px) rotate(-6deg); } }
@keyframes sw-c { 0%, 100% { transform: translateX(0); } 40%, 70% { transform: translateX(-18px) rotate(6deg); } }
.icon-brand .sw1, .icon-brand .sw3 { transform-box: fill-box; transform-origin: 50% 100%; }
.icon-video .frame, .icon-video .corner { fill: none; stroke: var(--fg-30); stroke-width: 2; stroke-linecap: round; }
.icon-video .corner { stroke: var(--teal); stroke-width: 3; }
.icon-video .play { fill: var(--teal); transform-box: fill-box; transform-origin: center; animation: play 3.6s var(--ease) infinite; }
.icon-video .rec { fill: #e5484d; animation: rec 1.8s steps(1) infinite; }
@keyframes play { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.18); } }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.icon-web .frame, .icon-web .bar { fill: none; stroke: var(--fg-30); stroke-width: 2; }
.icon-web .blk { fill: var(--teal); transform-box: fill-box; transform-origin: left center; animation: blk 4.5s var(--ease) infinite; }
.icon-web .b2 { animation-delay: .35s; fill: var(--fg-30); } .icon-web .b3 { animation-delay: .7s; fill: var(--fg-30); }
@keyframes blk { 0% { transform: scaleX(0); } 25%, 80% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.icon-launch .axis { stroke: var(--fg-30); stroke-width: 2; }
.icon-launch .line { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; animation: rise 4s var(--ease) infinite; }
.icon-launch .tip { fill: var(--teal); animation: tip 4s var(--ease) infinite; }
@keyframes rise { 0% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes tip { 0%, 35% { opacity: 0; transform: scale(.4); } 45%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.icon-launch .tip { transform-box: fill-box; transform-origin: center; }
.icon-ai .link { fill: none; stroke: rgba(0,0,0,.18); stroke-width: 2; }
.icon-ai .pulse { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .14 1; animation: pulse 3.2s linear infinite; }
.icon-ai .p2 { animation-delay: 1.6s; }
@keyframes pulse { from { stroke-dashoffset: .14; } to { stroke-dashoffset: -1; } }
.icon-ai .node { fill: var(--white); stroke: var(--black); stroke-width: 2.5; }
.icon-ai .hub { fill: var(--teal); stroke: none; animation: hub 3.2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hub { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* entrance: tiles slide up one after another */
.js .bento[data-reveal] { opacity: 1; transform: none; }
.js .bento-tile { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform 1s var(--ease), background-color .5s var(--ease); }
.js .bento.is-in .bento-tile { opacity: 1; transform: none; }
.js .bento.is-in .bento-tile:nth-child(2) { transition-delay: .08s, .08s, 0s; }
.js .bento.is-in .bento-tile:nth-child(3) { transition-delay: .16s, .16s, 0s; }
.js .bento.is-in .bento-tile:nth-child(4) { transition-delay: .24s, .24s, 0s; }
.js .bento.is-in .bento-tile:nth-child(5) { transition-delay: .32s, .32s, 0s; }
.js .bento.is-in .bento-tile:nth-child(6) { transition-delay: .4s, .4s, 0s; }
.bento-icon * { animation-play-state: paused; }
.bento.is-in .bento-icon * { animation-play-state: running; }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(14rem, auto);
    grid-template-areas: "social social" "video video" "brand web" "launch launch" "ai ai"; }
  .bento-tile--social { min-height: 26rem; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "social" "video" "brand" "web" "launch" "ai"; }
  /* Phones: tiles fit their content; the icon sits small in the top row beside the arrow, clear of the text. */
  .bento-tile, .bento-tile--social { min-height: 0; }
  .bento-body { margin-top: 1.75rem; }
  .bento-icon, .bento-tile--social .bento-icon, .bento-tile--ai .bento-icon { top: clamp(1.25rem, 2vw, 1.75rem); translate: none; right: calc(1.25rem + 44px + .9rem); width: 2.9rem; }
  .bento-tile--ai .bento-icon { width: 3.6rem; }
}

/* ---------- work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(4rem, 8vw, 8rem); align-items: start; }
/* Homepage: staggered portrait cards (dedicated project photos, 3:4) */
.work-grid .work-card:nth-child(1) { grid-column: 1 / 6; }
.work-grid .work-card:nth-child(2) { grid-column: 8 / 13; margin-top: clamp(4rem, 14vw, 14rem); }
.work-grid .work-card:nth-child(3) { grid-column: 3 / 8; }
.work-grid .work-card:nth-child(4) { grid-column: 9 / 13; margin-top: clamp(3rem, 9vw, 9rem); }
.work-grid .work-card:nth-child(5) { grid-column: 1 / 6; }
.work-grid .work-card:nth-child(6) { grid-column: 7 / 12; margin-top: clamp(4rem, 12vw, 12rem); }
.work-grid .work-card:nth-child(7) { grid-column: 4 / 9; }
.work-media { aspect-ratio: 3 / 4; }
.work-media { position: relative; overflow: hidden; border-radius: var(--r-card); background: #eceff0; cursor: none; }
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.work-link:hover .work-media img, .work-link:focus-visible .work-media img { transform: scale(1.04); }

/* ---------- work chapters (homepage, HOME_WORK = 'chapters') ----------
   Each project is a full-height panel pinned to the top; the next one slides up
   over it while the one underneath dims and eases back (--cover, set in main.js). */
.chapters { display: grid; }
.chapter { position: sticky; top: calc(var(--header-h) + .5rem); height: calc(100svh - var(--header-h) - .5rem - var(--gutter)); min-height: 26rem; margin-bottom: var(--gutter); }
.chapter:last-child { margin-bottom: 0; }
.chapter-link { position: relative; display: block; height: 100%; border-radius: var(--r-box); overflow: hidden; background: #0c0c0c; color: var(--white); cursor: none;
  transform: scale(calc(1 - var(--cover, 0) * .06)); transform-origin: 50% 0; }
.chapter-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.chapter-link::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 45%, rgba(0,0,0,.88) 100%), rgba(0,0,0, calc(var(--cover, 0) * .65)); }
.chapter-link:hover .chapter-img, .chapter-link:focus-visible .chapter-img { transform: scale(1.03); }
.chapter-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .9rem; padding: clamp(1.5rem, 3.5vw, 3.25rem); }
.chapter-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-85); }
.chapter-num { color: var(--teal); }
.chapter .chapter-title { font-size: var(--fs-display); font-weight: 400; line-height: .95; letter-spacing: var(--track-display); }
.chapter-services { font-size: var(--fs-small); color: var(--fg-85); }
.chapters + .work-more { margin-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 640px) {
  /* Phones get the portrait card photo (<picture> in the partial), shown whole: the panel takes its 3:4 shape. */
  /* Block layout + explicit width: iOS Safari sizes a grid item with aspect-ratio from its row height,
     which made the cards wider than the screen (and the photos zoomed). Width first, height from it. */
  .chapters { display: block; }
  .chapter { width: 100%; min-width: 0; height: auto; min-height: 0; aspect-ratio: 3 / 4; }
  .chapter-link { width: 100%; }
}
.work-meta { display: grid; grid-template-columns: auto 1fr auto; column-gap: .9rem; align-items: baseline; margin-top: 1.25rem; }
@media (max-width: 360px) {
  /* Very narrow phones: the sector label drops under the project name instead of squeezing beside it. */
  .work-meta { grid-template-columns: auto minmax(0, 1fr); }
  .work-meta .work-sector { grid-column: 2; text-align: left; margin-top: .35rem; }
}
.work-num { font-family: var(--ff-mono); font-size: .6875rem; color: rgba(0,0,0,.6); }
.work-title { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; letter-spacing: var(--track-mid); }
.work-sector { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.6); text-align: right; }
.work-services { grid-column: 2 / -1; font-size: .8125rem; color: rgba(0,0,0,.6); margin-top: .35rem; }

.cursor-view { position: fixed; left: 0; top: 0; z-index: 150; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(0); transition: transform .35s var(--ease); will-change: transform; }
.cursor-view.is-on { transform: translate3d(var(--x), var(--y), 0) scale(1); }
@media (hover: none), (pointer: coarse) { .cursor-view { display: none; } .work-media { cursor: pointer; } }

/* ---------- process ---------- */
.sub-block { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); }
.sub-block:first-of-type { margin-top: 0; }
.sub-label { display: flex; gap: 1rem; font-size: var(--fs-lead); letter-spacing: -.01em; color: var(--fg-60); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sub-num { color: var(--teal); }
.word-list { font-size: var(--fs-list); line-height: 1.3; letter-spacing: var(--track-display); max-width: 20ch; max-width: min(100%, 64rem); }
.word-list .w { color: rgba(255,255,255,.45); transition: color .4s var(--ease-std); }
.word-list .w.is-lit { color: var(--fg); }
.word-list .sep { color: var(--teal); padding-inline: .2em; font-size: .6em; vertical-align: .25em; }

.steps-block { height: 220vh; border-top: 0; padding-top: 0; }
.steps-sticky { position: sticky; top: calc(var(--header-h) + 2rem); border-top: 1px solid var(--line); padding-top: 1.5rem; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); counter-reset: step; }
.step { position: relative; display: grid; align-content: start; gap: .9rem; }
.step-track { position: relative; height: 14px; margin-bottom: 1.5rem; }
.step-track::before { content: ''; position: absolute; left: 0; right: calc(var(--col-gap) * -1); top: 50%; height: 1px; background: var(--line); }
.step:last-child .step-track::before { right: 0; }
.step-track::after { content: ''; position: absolute; left: 0; top: 50%; height: 1px; width: calc(100% + var(--col-gap)); background: var(--teal); transform: scaleX(var(--p, 0)); transform-origin: left; }
.step:last-child .step-track::after { width: 100%; }
.step-node { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--black); box-shadow: inset 0 0 0 1px var(--fg-30); z-index: 1; transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.step.is-active .step-node, .step.is-done .step-node { background: var(--teal); box-shadow: 0 0 0 5px rgba(52,159,168,.2); }
.step-num { font-family: var(--ff-mono); font-size: .6875rem; color: var(--fg-50); }
.step-title { font-size: var(--fs-step); font-weight: 400; line-height: 1; letter-spacing: var(--track-display); color: rgba(255,255,255,.45); transition: color .6s var(--ease); }
.step-text { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-50); max-width: 22rem; transition: color .6s var(--ease); }
.step.is-active .step-title, .step.is-done .step-title { color: var(--fg); }
.step.is-active .step-text { color: var(--fg-85); }
.step-tag { width: fit-content; font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .08em; color: var(--teal); box-shadow: inset 0 0 0 1px rgba(52,159,168,.4); border-radius: 999px; padding: .35rem .8rem; }

.stack { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.stack-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.stack-title { grid-column: 1 / span 3; font-size: .9375rem; font-weight: 400; color: var(--fg-60); }
.stack-tools { grid-column: 4 / span 9; display: flex; flex-wrap: wrap; gap: .625rem; }
.tool { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-radius: 999px; font-size: .9375rem; line-height: 1.4; color: var(--fg-85); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s, background-color .4s; }
.tool-icon { width: 1.1rem; height: 1.1rem; flex: none; color: rgba(255,255,255,.7); transition: color .4s; }
@media (hover: hover) {
  .tool:hover { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
  .tool:hover .tool-icon { color: var(--brand, #fff); }
}

/* ---------- results (accent wall) ---------- */
.results { min-height: 100svh; overflow: hidden; display: flex; align-items: center; }
.results-copy { position: relative; z-index: 2; max-width: calc(46% + var(--gutter)); }
.results .statement { color: var(--black); }
.results-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem var(--col-gap); margin: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem); max-width: 34rem; }
.results-stats div { display: flex; flex-direction: column-reverse; gap: .35rem; border-top: 1px solid rgba(0,0,0,.2); padding-top: 1rem; }
.results-stats dd { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.results-stats dt { font-size: .8125rem; line-height: 1.5; color: rgba(0,0,0,.72); }
.wall { position: absolute; top: 0; bottom: 0; right: 0; width: 58%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.wall-tilt { position: absolute; inset: -30% -10% -30% 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; transform: rotate(-10deg); }
.wall-col { display: grid; gap: 1.1rem; align-content: start; animation: wall-up 48s linear infinite; }
.wall-col--down { animation-name: wall-down; }
.wall-col--slow { animation-duration: 62s; }
.wall-col img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }

/* ---------- results: giant numbers (HOME_RESULTS = 'stack') ----------
   Statement + button pinned on the left; each number sits under a hairline with
   its description and counts up as it scrolls into view. */
.results--stack { display: block; min-height: 0; overflow: visible; }
.rs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.rs-head { align-self: stretch; }  /* full height, so the statement can stay pinned */
.rs-sticky { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; justify-items: start; gap: clamp(2rem, 4vw, 3rem); }
.rs-sticky .statement { margin-top: 0; }
.rs-sticky .eyebrow { margin-bottom: -1rem; }
.rs-list { display: grid; }
.rs-item { display: flex; flex-direction: column-reverse; gap: .75rem; padding-block: clamp(1.75rem, 3.5vw, 3rem); border-top: 1px solid rgba(0,0,0,.28); }
.rs-item:last-child { border-bottom: 1px solid rgba(0,0,0,.28); }
.rs-num { font-size: clamp(4.5rem, 2rem + 9vw, 11rem); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: var(--black); }
.rs-suf { font-size: .55em; letter-spacing: -.02em; margin-left: .04em; vertical-align: .62em; }
.rs-item dt { font-size: var(--fs-body); line-height: 1.55; color: rgba(0,0,0,.78); max-width: 26rem; }
.rs-tag { display: block; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--black); margin-bottom: .5rem; }
@media (max-width: 900px) {
  .rs-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); }
  .rs-sticky { position: static; }
  /* The old wall variant zeroes .results bottom padding on small screens; the stack needs room before the next section. */
  .results.results--stack { padding-bottom: calc(var(--r-section) + clamp(3rem, 10vw, 4.5rem)); }
}

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.quote-person { grid-column: 1 / 4; padding-top: .6rem; }
.quote-name { font-size: 1.125rem; }
.quote-role { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); margin-top: .4rem; }
.quote-main { grid-column: 4 / 13; }
.quote-text { font-size: var(--fs-quote); line-height: 1.3; letter-spacing: var(--track-mid); min-height: 3.6em; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.quote-text.is-swapping { opacity: 0; transform: translateY(12px); }
.quote-controls { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.quote-progress { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.quote-progress span { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(.25); transition: transform .6s var(--ease); }
.quote-count { font-family: var(--ff-mono); font-size: .75rem; color: var(--fg-50); margin-right: .5rem; }
.logos { margin-top: clamp(4rem, 8vw, 7rem); }
.logos-label { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); margin-bottom: 2rem; }
/* Client logo marquees: two rows, opposite directions. Each row holds two
   identical tracks; each track slides one full width, so the loop is seamless. */
.marquees { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { --gap: clamp(1.5rem, .75rem + 2.5vw, 3.5rem); flex: none; display: flex; align-items: center; gap: var(--gap); padding-right: var(--gap); animation: logos-scroll 40s linear infinite; }
.marquee--reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { flex: none; display: grid; place-items: center; height: clamp(4.5rem, 3rem + 3.5vw, 6.5rem); }
.marquee-item img { height: clamp(4.5rem, 3rem + 3.5vw, 6.5rem); width: auto; max-width: none; filter: brightness(0) invert(1); opacity: .68; transition: opacity .4s var(--ease); }  /* thin-stroke emblem logos need more presence */
.marquee-item img.logo--invert { filter: invert(1) grayscale(1); }
.marquee-item img.logo--sm { height: clamp(1.75rem, 1.2rem + 1.2vw, 2.6rem); }
.marquee-item img.logo--md { height: clamp(2.75rem, 1.9rem + 1.8vw, 3.6rem); }  /* Rotunda: wide wordmark with built-in padding */
.marquee-item:hover img { opacity: 1; }

/* ---------- contact ---------- */
.contact { border-radius: var(--r-section); position: relative; z-index: 2; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 33rem); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.contact .statement { color: var(--black); }
.contact-lead { font-size: var(--fs-lead); line-height: 1.63; color: rgba(0,0,0,.75); max-width: 30rem; margin-top: 1.75rem; }
.contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 2rem clamp(2rem, 5vw, 4rem); margin-top: clamp(3rem, 8vw, 7rem); }
.detail-label { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.85); margin-bottom: .6rem; }
.detail-email { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .9375rem; }
.detail-email a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.detail-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.detail-status { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; font-size: .875rem; }
.copy-btn { height: 26px; padding: 0 .7rem; border-radius: 999px; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); transition: background-color .3s, color .3s; }
.copy-btn:hover { background: var(--black); color: var(--white); }
.copy-btn--light { box-shadow: inset 0 0 0 1px var(--line); }
.copy-btn--light:hover { background: var(--white); color: var(--black); }

.contact-card { background: var(--white); color: var(--black); border-radius: var(--r-box); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.5rem; box-shadow: 0 40px 80px -40px rgba(0,0,0,.45); }
.card-title { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--track-mid); }
.card-sub { font-size: var(--fs-small); color: rgba(0,0,0,.6); margin-top: -1rem; }
.chip-field { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-field legend { font-size: .9375rem; color: rgba(0,0,0,.78); margin-bottom: .75rem; padding: 0; }  /* full questions read better in sentence case */
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; height: 34px; padding: 0 .9rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); font-size: .8125rem; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.chip span:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.chip input:checked + span { background: var(--black); color: var(--white); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: grid; gap: .35rem; }
.field-label { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.6); }
.field-label em { font-style: normal; text-transform: none; letter-spacing: 0; }
.field input, .field textarea { font: inherit; font-size: .9375rem; color: var(--black); background: transparent; border: 0; border-bottom: 1px solid rgba(0,0,0,.18); padding: .6rem 0; border-radius: 0; resize: vertical; transition: border-color .3s; }
.field input::placeholder, .field textarea::placeholder { color: rgba(0,0,0,.6); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--black); }
.contact-card .btn { justify-self: start; }
.form-status { font-size: var(--fs-small); min-height: 1.2em; }
.form-status.is-ok { color: var(--teal-dim); }
.form-status.is-err { color: #b3261e; }
.form-status a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; }

/* ---------- footer (revealed from under the contact section) ---------- */
main { position: relative; z-index: 2; background: transparent; }
.site-footer { position: sticky; bottom: 0; z-index: 1; background: var(--black); color: var(--fg); padding-top: calc(var(--r-section) + clamp(4rem, 8vw, 7rem)); margin-top: calc(var(--r-section) * -1); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--col-gap); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.footer-tagline { font-size: var(--fs-quote); line-height: 1.05; letter-spacing: -.04em; }
.footer-desc { font-size: var(--fs-small); color: var(--fg-60); max-width: 24rem; margin-top: 1rem; }
.footer-label { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); margin-bottom: 1.1rem; }
.footer-col { display: grid; gap: .55rem; align-content: start; }
.footer-col a { font-size: .875rem; color: var(--fg-85); width: fit-content; transition: color .3s; }
.footer-col a:hover { color: var(--teal); }
.footer-mid { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.75rem; }
.footer-cta { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; }
.footer-cta svg, .back-top svg { width: 13px; height: 13px; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.footer-cta:hover svg { transform: rotate(45deg); }
.footer-wordmark { font-family: var(--ff-logo); font-weight: 700; line-height: .78; letter-spacing: -.02em; white-space: nowrap; text-align: center; padding: clamp(1.5rem, 3vw, 3rem) var(--gutter) clamp(1.5rem, 2.5vw, 2.5rem); font-size: 28vw; user-select: none; }
.footer-wordmark span { display: inline-block; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--fg-50); }
.footer-bottom a:hover { color: var(--fg); }
.footer-bottom > span { display: inline-flex; align-items: center; gap: .35em; }
.back-top { display: inline-flex; align-items: center; gap: .45rem; color: var(--fg-85); }
.back-top:hover svg { transform: translateY(-3px); }

/* ---------- footer, Terminal-style layout (FOOTER = 'terminal') ---------- */
.site-footer--t { isolation: isolate; }
.footer-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.footer-lines path { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1.2; }
.footer-lines path.t { stroke: rgba(52,159,168,.22); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(2rem, 4vw, 4rem) var(--col-gap); padding-bottom: clamp(4rem, 9vw, 8rem); }
.footer-logo { font-family: var(--ff-logo); font-weight: 700; font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -.01em; display: inline-block; }
.site-footer--t .footer-desc { margin-top: 1.5rem; max-width: 20rem; }
.site-footer--t .footer-label { margin-bottom: 1.6rem; color: var(--fg-60); }
.site-footer--t .footer-col { gap: .7rem; }
.site-footer--t .footer-col a { font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); line-height: 1.25; color: var(--fg); }
.site-footer--t .footer-col a:hover, .site-footer--t .footer-col a:focus-visible { color: var(--teal); }
.footer-reach { display: grid; align-content: start; }
.reach-q { font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); line-height: 1.3; }
.reach-email { font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); line-height: 1.3; margin-top: .35rem; width: fit-content; overflow-wrap: anywhere; transition: color .3s; }
.reach-email:hover, .reach-email:focus-visible { color: var(--teal); }
.reach-note { font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); line-height: 1.3; color: var(--fg-60); margin-top: .35rem; }
.footer-social { display: flex; gap: 1.1rem; margin-top: 2rem; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); transition: background-color .4s var(--ease), color .4s var(--ease); }
.footer-social a:hover, .footer-social a:focus-visible { background: var(--teal); color: var(--black); box-shadow: none; }
.footer-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer--t .footer-bottom { border-top: 0; padding-block: 0 clamp(1.5rem, 3vw, 2.25rem); }
.site-footer--t .footer-bottom > span { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; }
.site-footer--t .footer-bottom > span a { display: inline-flex; }  /* centre the roll-link box against the plain text */
.site-footer--t .footer-bottom a { color: var(--fg-60); }
.site-footer--t .footer-bottom a:hover { color: var(--fg); }
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* Phones: compact footer, just the logo, one line about Novum and the social links (legal row stays). */
  .site-footer--t .footer-col, .footer-reach .footer-label, .reach-q, .reach-email, .reach-note { display: none; }
  .footer-grid { padding-bottom: 2.5rem; gap: 1.5rem; }
  .footer-social { margin-top: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-footer--t .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- cookie ---------- */
.cookie { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 120; max-width: 25rem; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0,0,0,.8); border-radius: var(--r-box); padding: 1.25rem; font-size: .8125rem; color: var(--fg-85); display: grid; gap: 1rem; }
.cookie a { text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: .5rem; }
.cookie .btn--sm { padding-right: 1.125rem; }

/* ==========================================================================
   Inner pages
   ========================================================================== */
.section--grey { background: #eceeef; color: var(--black); }
.section--grey .eyebrow { color: rgba(0,0,0,.6); }

/* inner hero */
.page-hero { background: var(--black); padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); }
.page-hero--full { min-height: 100svh; display: grid; align-items: center; }
.page-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.eyebrow--right { margin-left: auto; }
.page-title { font-size: clamp(3rem, 1rem + 7.4vw, 8.5rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; margin: 1.5rem 0 0; }
.page-title .count { font-size: .22em; letter-spacing: 0; vertical-align: super; margin-left: .3em; color: var(--fg-60); font-family: var(--ff-mono); }
.page-hero--case .page-title, .page-hero--service .page-title, .page-hero--contact .page-title { font-size: var(--fs-display); }
.page-hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 4rem; flex-wrap: wrap; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.page-lead { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.63; color: var(--fg-60); }
.page-hero .hero-ctas { margin-top: 0; justify-content: flex-start; }
.back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--fg-60); margin-bottom: 1.5rem; transition: color .3s; }
.back-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.back-link:hover { color: var(--fg); }
.page-stats { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); }
.page-stats dt { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); }
.page-stats dd { font-size: var(--fs-h4); letter-spacing: var(--track-mid); margin-top: .35rem; }
.page-hero--contact .contact-details { margin-top: 0; }
.page-hero--contact .detail-label { color: var(--fg-50); }
.page-hero--contact .copy-btn { box-shadow: inset 0 0 0 1px var(--line); }
.page-hero--contact .copy-btn:hover { background: var(--white); color: var(--black); }
.page-hero--contact .status-dot--ink { background: var(--teal); }
.page-hero--contact .detail-status { color: var(--fg-60); }

/* split: sticky heading left, content right */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.split-head { grid-column: 1 / span 5; }
.split-sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
.split-body { grid-column: 6 / -1; }
.case-num { font-family: var(--ff-mono); font-size: .75rem; color: var(--teal); margin-bottom: 1rem; }
.section--light .case-num { color: var(--teal-dim); }

/* case study */
.page-hero--case, .page-hero--service { padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-hero--case { padding-bottom: clamp(2rem, 3vw, 2.5rem); }
.section.case-glance { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.glance-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); align-items: end; }
.glance-list { display: grid; }
.glance-list div { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.glance-list dt { display: flex; gap: .75rem; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); margin-bottom: .5rem; }
.glance-num { color: var(--teal); }
.glance-list dd { font-size: 1rem; }
.pill-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill-list li { padding: .35rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: .8125rem; color: var(--fg-85); }
.glance-media { border-radius: var(--r-box); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.8); }
.glance-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-brief .split-body p { font-size: var(--fs-lead); line-height: 1.7; color: rgba(0,0,0,.72); max-width: 44rem; }
.case-brief .split-body p + p { margin-top: 1.25rem; }
.case-brief .brief-lead { font-size: var(--fs-quote) !important; line-height: 1.3 !important; letter-spacing: -.02em; color: var(--black) !important; margin-bottom: 2rem; }
.did-label { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.6) !important; margin-top: 3rem !important; }
.did-list li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.4rem 0; border-top: 1px solid rgba(0,0,0,.1); }
.did-num { font-family: var(--ff-mono); font-size: .75rem; color: var(--teal-dim); padding-top: .3rem; }
.did-title { font-size: 1.25rem; font-weight: 400; letter-spacing: -.02em; }
.did-list li p { grid-column: 2; margin-top: .4rem; font-size: .9375rem !important; }
.closer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.closer-note { font-size: var(--fs-small); color: rgba(0,0,0,.6); }
.closer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
.closer-grid figure { min-width: 0; width: 100%; margin: 0; border-radius: var(--r-card); overflow: hidden; background: #dfe3e4; }
.closer-grid img { width: 100%; height: 100%; object-fit: cover; }
.closer-wide { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.closer-tall { grid-column: 1 / span 6; grid-row: span 2; }
.closer-sq { grid-column: 7 / -1; aspect-ratio: 1; }
.impact-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.impact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.impact-item { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.impact-value { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.045em; }
.impact-label { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-top: 1rem; }
.impact-text { font-size: var(--fs-small); color: var(--fg-60); margin-top: .75rem; max-width: 22rem; }
.next-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 1.5rem var(--col-gap); }
.next-link .eyebrow { grid-column: 1 / -1; color: rgba(0,0,0,.6); }
.next-title { display: flex; align-items: center; gap: 1.25rem; font-size: var(--fs-h2); line-height: 1; letter-spacing: -.045em; }
@media (max-width: 360px) { .next-title { font-size: 2rem; gap: 1rem; } }  /* long names (Malta Rugby Championship) fit 320px phones */
.next-arrow { width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px); flex: none; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; transition: background-color .5s var(--ease), color .5s var(--ease); }
.next-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.next-link:hover .next-arrow { background: var(--teal); color: var(--black); }
.next-media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3 / 4; width: min(100%, 26rem); justify-self: end; }
.next-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-link:hover .next-media img { transform: scale(1.04); }

/* work index */
.filters { position: sticky; top: calc(var(--header-h) + .75rem); z-index: 5; display: flex; flex-wrap: wrap; gap: .4rem; width: fit-content; padding: .4rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); border-radius: 999px; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06); }
.filter { height: 36px; padding: 0 1rem; border-radius: 999px; font-size: .8125rem; color: rgba(0,0,0,.7); transition: background-color .3s, color .3s; }
.filter sup { font-family: var(--ff-mono); font-size: .625rem; margin-left: .3rem; opacity: .6; }
.filter:hover { color: var(--black); }
.filter.is-active { background: var(--black); color: var(--white); }
.work-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 4.5rem) var(--col-gap); }
.work-card--grid .work-media { aspect-ratio: 3 / 4; }
.work-card.is-hidden { display: none; }

/* services overview */
.svc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.svc-card { display: grid; align-content: start; gap: .75rem; min-height: clamp(22rem, 32vw, 30rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-box); background: #f3f5f6; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); color: var(--black); transition: background-color .5s var(--ease); }
/* Hover: black rises from the bottom and fills the card; text turns white; the arrow button fills teal and turns. */
.svc-card { position: relative; isolation: isolate; overflow: hidden; }
.svc-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--black); opacity: 0; transition: opacity .7s var(--ease); }
.svc-card:hover::before, .svc-card:focus-visible::before { opacity: 1; }
/* Hover: the card fades to black and the site's flowing lines draw across it */
.svc-lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.svc-lines path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease); }
.svc-card:hover .svc-lines path, .svc-card:focus-visible .svc-lines path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) calc(.15s + var(--d)); }
.svc-card, .svc-card-desc, .svc-card-num, .svc-card-tags span { transition: color .45s var(--ease), box-shadow .45s var(--ease); }
.svc-card:hover, .svc-card:focus-visible { color: var(--white); }
.svc-card:hover .svc-card-desc, .svc-card:focus-visible .svc-card-desc { color: var(--fg-60); }
.svc-card:hover .svc-card-num, .svc-card:focus-visible .svc-card-num { color: var(--teal); }
.svc-card:hover .svc-card-tags span, .svc-card:focus-visible .svc-card-tags span { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.svc-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; min-height: 3.5rem; }
.svc-card-num { font-family: var(--ff-mono); font-size: .75rem; color: var(--teal-dim); }
.round-btn--ink { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); color: var(--black); }
.svc-card:hover .round-btn--ink, .svc-card:focus-visible .round-btn--ink { background: var(--teal); color: var(--black); box-shadow: none; }
.svc-card:hover .round-btn--ink svg, .svc-card:focus-visible .round-btn--ink svg { transform: rotate(45deg); }
.svc-card-title { font-size: var(--fs-card); line-height: 1; letter-spacing: -.045em; margin-top: clamp(3rem, 7vw, 6rem); }
.svc-card-desc { font-size: var(--fs-small); color: rgba(0,0,0,.65); max-width: 34rem; margin-top: .5rem; }
.svc-card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.svc-card-tags span { padding: .35rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); font-size: .75rem; }
.problem-list li { font-size: var(--fs-quote); line-height: 1.15; letter-spacing: var(--track-mid); color: var(--fg-50); }
.problem-list li + li { margin-top: .4rem; }
.loop-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem var(--col-gap); margin-top: clamp(2.5rem, 5vw, 4rem); }
.loop-list li { border-top: 1px solid var(--line); padding-top: 1rem; font-size: var(--fs-small); color: var(--fg-60); }
.loop-list span { display: block; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: .35rem; }
.loop-note { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--fg-60); }

/* stack builder (Growth Stack quiz) */
.builder-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.builder .section-lead { margin-top: 1.5rem; }
.stack-builder { border-radius: var(--r-box); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(1.5rem, 3vw, 2.5rem); }
.sb-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.sb-progress { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.sb-back, .sb-restart { font-size: .8125rem; color: var(--fg-60); transition: color .3s; }
.sb-back:hover, .sb-restart:hover { color: var(--fg); }
.sb-q { font-size: var(--fs-h4); line-height: 1.15; letter-spacing: var(--track-mid); }
.sb-hint { font-size: var(--fs-small); color: var(--fg-60); margin: .5rem 0 1.5rem; }
.sb-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sb-opt { display: grid; gap: .25rem; text-align: left; padding: 1rem 1.1rem; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, background-color .3s; }
.sb-opt:hover { box-shadow: inset 0 0 0 1px rgba(52,159,168,.6); background: rgba(52,159,168,.06); }
.sb-opt.is-picked { box-shadow: inset 0 0 0 1px var(--teal); background: rgba(52,159,168,.12); }
.sb-opt-title { font-size: .9375rem; }
.sb-opt-sub { font-size: .8125rem; color: var(--fg-50); }
.sb-items { display: grid; gap: .6rem; margin: 1.25rem 0 2rem; }
.sb-items li { display: flex; gap: .75rem; align-items: baseline; font-size: .9375rem; color: var(--fg-85); }
.sb-items li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; transform: translateY(-2px); }
.sb-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* FAQ accordion */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; list-style: none; font-size: clamp(1rem, .9rem + .35vw, 1.2rem); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: transform .5s var(--ease), background-color .3s; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: currentColor; }
.faq-icon::after { transform: rotate(90deg); transition: transform .5s var(--ease); }
.faq-item[open] .faq-icon { background: var(--white); color: var(--black); }
.faq-item[open] .faq-icon::after { transform: rotate(0); }
.faq-answer { padding: 0 3.5rem 1.5rem 0; font-size: var(--fs-body); line-height: 1.7; color: var(--fg-60); }

/* service detail */
.feature-grid, .principle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.feature-grid li, .principle-grid li { border-top: 1px solid rgba(0,0,0,.12); padding-top: 1.4rem; }
.feature-grid h3, .principle-grid h3 { font-size: 1.25rem; font-weight: 400; letter-spacing: -.02em; }
.feature-grid p, .principle-grid p { font-size: var(--fs-small); color: rgba(0,0,0,.62); margin-top: .6rem; }
.principle-grid h3 { margin-top: .6rem; }
.process--static .steps-static { position: static; }
.fit-list li { position: relative; padding: 1.3rem 0 1.3rem 2.5rem; border-top: 1px solid rgba(0,0,0,.1); font-size: var(--fs-h3); letter-spacing: var(--track-mid); line-height: 1.3; }
.fit-list li::before { content: ''; position: absolute; left: 0; top: 1.8rem; width: 1.2rem; height: 1.5px; background: var(--teal-dim); }
.deliver-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem var(--col-gap); }
.deliver-list li { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.deliver-num { font-family: var(--ff-mono); font-size: .75rem; color: var(--teal); }
.section--light .deliver-num { color: var(--teal-dim); }
.deliver-list h3 { font-size: var(--fs-h4); font-weight: 400; letter-spacing: var(--track-mid); margin-top: .75rem; }
.deliver-list p { font-size: var(--fs-small); color: var(--fg-60); margin-top: .6rem; max-width: 24rem; }

/* about */
.page-hero--about .page-title { font-size: var(--fs-display); }
.about-strip { padding-block: 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.image-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--col-gap); padding-inline: var(--edge); }
.image-strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-card); }
.image-strip img:nth-child(even) { margin-top: clamp(2rem, 5vw, 4rem); }
.about-reach .logos { margin-top: clamp(2rem, 4vw, 3rem); }

/* contact page */
.contact-page { color: var(--black); }
.next-steps { margin-top: clamp(2rem, 4vw, 3rem); }
.next-steps li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.4rem 0; border-top: 1px solid rgba(0,0,0,.1); }
.next-steps h3 { font-size: 1.25rem; font-weight: 400; letter-spacing: -.02em; }
.next-steps p { grid-column: 2; font-size: var(--fs-small); color: rgba(0,0,0,.62); margin-top: .4rem; }
.contact-page .contact-card { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 40px 80px -40px rgba(0,0,0,.3); }

/* legal */
.legal-toc-label { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.6); margin-bottom: 1rem; }
.legal-toc { display: grid; gap: .5rem; counter-reset: toc; }
.legal-toc a { font-size: .9375rem; color: rgba(0,0,0,.62); transition: color .3s; }
.legal-toc a:hover { color: var(--black); }
.legal-body { color: rgba(0,0,0,.75); font-size: var(--fs-body); line-height: 1.75; }
.legal-body .pp-highlight { font-size: var(--fs-lead); color: var(--black); padding: 1.5rem; border-radius: var(--r-card); background: #f1f4f5; margin-bottom: 2.5rem; }
.legal-body .pp-section { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(0,0,0,.1); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal-body .pp-section:first-of-type { margin-top: 0; }
.legal-body h2 { font-size: var(--fs-h4); font-weight: 400; letter-spacing: var(--track-mid); color: var(--black); margin-bottom: 1rem; }
.legal-body p + p, .legal-body ul, .legal-body ol, .legal-body ul + p, .legal-body ol + p { margin-top: 1rem; }
.legal-body ul { list-style: disc; padding-left: 1.25rem; }
.legal-body li + li { margin-top: .4rem; }
.legal-body a { color: var(--teal-dim); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--black); font-weight: 400; }

@media (max-width: 1100px) {
  .work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid, .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deliver-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .split, .glance-grid, .builder-grid, .faq-grid, .next-link { grid-template-columns: 1fr; }
  .split-head, .split-body { grid-column: 1 / -1; }
  .split-head { margin-bottom: 2rem; }
  .split-sticky { position: static; }
  .impact-list, .svc-cards, .sb-options, .loop-list { grid-template-columns: 1fr; }
  .feature-grid, .principle-grid, .deliver-list { grid-template-columns: 1fr; }
  .closer-tall, .closer-sq { grid-column: 1 / -1; }
  .closer-tall { grid-row: auto; aspect-ratio: 3 / 4; }
  .closer-wide { aspect-ratio: 4 / 3; }
  .image-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .image-strip img:nth-child(n+4) { display: none; }
  .impact-head, .closer-head { flex-direction: column; align-items: flex-start; }
  .page-stats { flex-wrap: wrap; }
  .page-hero-top { flex-direction: column; align-items: flex-start; }
  .eyebrow--right { margin-left: 0; }
  .filters { border-radius: 999px; width: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; height: 32px; padding: 0 .85rem; }
}

/* ---------- rolling link text (letters slide up, staggered) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.roll { display: inline-flex; vertical-align: top; }
.roll-inner { display: inline-flex; height: 1.2em; line-height: 1.2; overflow: clip; }
.roll-char { display: inline-block; text-shadow: 0 1.2em currentColor; transition: transform .6s var(--ease) calc(var(--i) * 14ms); }
:is(a, button):focus-visible .roll-char { transform: translateY(-1.2em); }
@media (hover: hover) { :is(a, button):hover .roll-char { transform: translateY(-1.2em); } }

/* ---------- link groups: hovering one link fades the others (LINK_HOVER = 'dim') ---------- */
.header-nav a, .menu-col a, .menu-foot a, .footer-col a, .footer-bottom a, .detail-links a, .footer-social a { transition: opacity .35s var(--ease), color .35s var(--ease); }
.menu-col a { transition: opacity .45s var(--ease), color .45s var(--ease), transform .7s var(--ease); will-change: transform; backface-visibility: hidden; }  /* keep the slide smooth */
@media (hover: hover) {
  :is(.header-nav, .menu-col, .menu-foot, .footer-col, .footer-bottom > span, .detail-links, .footer-social):hover a:not(:hover) { opacity: .4; }
}

/* ---------- page transition ---------- */
.page-transition { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; overflow: hidden; }
.page-transition.is-active { visibility: visible; pointer-events: auto; }
.pt-paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.pt-paths path { fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.pt-arriving .pt-paths path { stroke-dashoffset: 0; }
.pt-solid { position: absolute; inset: 0; background: var(--black); opacity: 0; }
html.pt-arriving .page-transition { visibility: visible; }
html.pt-arriving .pt-solid { opacity: 1; }

/* ---------- reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- keyframes ---------- */
@keyframes scroll-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes logos-scroll { to { transform: translateX(-100%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .stack-group { row-gap: .9rem; }
  .stack-title, .stack-tools { grid-column: 1 / -1; }
  .header-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .service-link { grid-template-columns: 2.5rem minmax(0, 1fr) 52px; }
  .service-link .service-desc, .service-link .service-tags { grid-column: 2; }
  .service-link .service-name { grid-row: 1; }
  .service-link .service-desc { grid-row: 2; margin-top: .5rem; }
  .service-link .service-desc + .service-tags { grid-row: 3; }
  .service-link .service-num, .service-link .round-btn { grid-row: 1; }
  .service-link .round-btn { grid-column: 3; }
  .menu-inner { grid-template-columns: 1fr 1fr; }
  .menu-card { grid-column: 1 / -1; max-width: 30rem; }
}

@media (max-width: 800px) {
  .header-right .btn span:first-child { font-size: .75rem; }
  .section-head, .section-head--cta { flex-direction: column; align-items: flex-start; }
  .section--light .section-lead { text-align: left; }
  .hero-bar { grid-template-columns: 1fr; gap: 1.25rem; }
  .work-grid { grid-template-columns: 1fr; row-gap: 3.5rem; }
  .work-grid .work-card { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .steps-block { height: auto; }
  .steps-sticky { position: static; }
  .steps { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .step { grid-template-columns: 14px 1fr; column-gap: 1.25rem; }
  .step > :not(.step-track) { grid-column: 2; }
  .step-track { grid-row: 1 / span 4; height: auto; margin: 0; }
  .step-track::before, .step-track::after { display: none; }
  .step-title, .step-text { color: var(--fg); }
  .step-text { color: var(--fg-60); }
  .step .step-node { background: var(--teal); box-shadow: none; }
  .results { display: block; padding-bottom: 0; }
  .results-copy { max-width: none; }
  .wall { position: relative; width: auto; height: 420px; margin-top: 3rem; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%); mask-image: linear-gradient(180deg, transparent, #000 25%); }
  .quotes { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .quote-person, .quote-main { grid-column: 1; }
  .quote-person { order: 2; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-details { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .menu-inner { grid-template-columns: 1fr; }
  .site-footer { position: relative; }
}

@media (max-width: 480px) {
  .work-list { grid-template-columns: minmax(0, 1fr); }
  .header-right .btn { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bento-icon * { animation: none !important; }
  .js .bento-tile { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .wall-col { animation: none !important; }
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marquee-track[aria-hidden] { display: none; }
}
/* About: where the name comes from */
.origin-word { font-size: clamp(4rem, 2rem + 8vw, 10rem); line-height: .9; letter-spacing: -.05em; }
.origin-def { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .08em; color: var(--fg-60); margin-top: 1.25rem; }
.origin .h2 { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.origin-text { color: var(--fg-60); max-width: 38rem; }
.origin-text + .origin-text { margin-top: 1.1rem; }
@media (max-width: 900px) { .origin .split-head, .origin .split-body { grid-column: 1 / -1; } .origin .split-body { margin-top: clamp(2.5rem, 8vw, 3.5rem); } }

/* About: principles with big numbers */
.principle-grid .deliver-num { display: block; overflow: hidden; padding-bottom: .08em; font-family: var(--ff); font-size: clamp(3.5rem, 1.5rem + 4.5vw, 6.5rem); line-height: .9; letter-spacing: -.055em; color: var(--teal-dim); font-variant-numeric: tabular-nums; }
.principle-grid .deliver-num > span { display: block; }
.principle-grid h3 { margin-top: 1.4rem; }
/* Draw & rise: the rule draws across, the number rises out of its mask, then the text fades up; staggered on wide screens */
.principle-grid li { position: relative; border-top: 0; --d: calc(var(--i, 0) * .15s); }
.principle-grid li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(0,0,0,.12); }
.js .principle-grid li[data-reveal] { opacity: 1; transform: none; }
.js .principle-grid li::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) var(--d); }
.js .principle-grid .deliver-num > span { transform: translateY(105%); transition: transform 1.1s var(--ease) calc(.35s + var(--d)); }
.js .principle-grid li h3, .js .principle-grid li p { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease) calc(.55s + var(--d)), transform .8s var(--ease) calc(.55s + var(--d)); }
.js .principle-grid li.is-in::before, .js .principle-grid li.is-in .deliver-num > span, .js .principle-grid li.is-in h3, .js .principle-grid li.is-in p { transform: none; opacity: 1; }
@media (max-width: 900px) { .principle-grid li { --d: 0s; } }
@media (prefers-reduced-motion: reduce) { .js .principle-grid li::before, .js .principle-grid .deliver-num > span, .js .principle-grid li h3, .js .principle-grid li p { transform: none; opacity: 1; } }
.work-more { display: flex; justify-content: center; margin-top: clamp(4rem, 8vw, 7rem); }
.nowrap { white-space: nowrap; }
.services .section-head > div:first-child { flex: 1 1 auto; }
.services .section-lead { max-width: 21rem; flex: none; }
.sb-options .sb-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }

.legal-body--full { max-width: 46rem; }