/* =========================================================
   UBOLD — creative design studio
   Brand: blue #004FFF (primary) · ink #3C3C3B · mint #A6FFD6 (accent)
   Fonts: BD Colonius (primary/display) · Articulat CF (secondary/headings)
          Poppins (complementary/body)
   ========================================================= */

/* ---------------------------------------------------------
   Self-hosted brand fonts.
   BD Colonius (Buro Destruct) and Articulat CF (Connary Fagen) are
   licensed foundry fonts — not free web fonts. Buy/license them, export
   web formats (woff2/woff) and drop the files in /public/fonts/ using the
   names below. Until then the fallback stacks keep the site looking right.
   --------------------------------------------------------- */
@font-face {
  font-family: "BD Colonius";
  src: url("/fonts/BDColonius.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("/fonts/ArticulatCF-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("/fonts/ArticulatCF-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("/fonts/ArticulatCF-DemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("/fonts/ArticulatCF-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("/fonts/ArticulatCF-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("/fonts/ArticulatCF-Heavy.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("/fonts/ArticulatCF-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("/fonts/ArticulatCF-MediumItalic.woff2") format("woff2");
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --blue: #004fff;
  --blue-deep: #0038b8;
  --ink: #3c3c3b;
  --mint: #a6ffd6;
  --paper: #f3f4f7;
  --white: #ffffff;
  --muted: #8a8a86;
  --line: rgba(60, 60, 59, 0.14);
  --rule: rgba(60, 60, 59, 0.17); /* blueprint guide lines */

  /* Primary — signature/logo display font */
  --font-display: "BD Colonius", "Articulat CF", "Poppins", sans-serif;
  /* Secondary — headlines */
  --font-head: "Articulat CF", "Poppins", "Helvetica Neue", Arial, sans-serif;
  /* Complementary — body & UI */
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  /* Contrast — editorial italic, paired against the sans (hero, accents) */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* ---- Page frame — one source of truth, so every page shares a margin ----
     --edge    where the dashed blueprint guides sit, in from the page box
     --gutter  where the content column sits (guides stay outside it)
     --wrap    widest the page box ever gets; past it the guides and the
               content shift together, so they can never drift apart     */
  --wrap: 1960px;
  --edge: clamp(16px, 4vw, 92px);
  --gutter: calc(var(--edge) * 1.6);
  --radius: 14px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Ambient aurora background (light) ----------
   Glowing blue + cyan mesh over the paper base, inspired by dark
   "next level" hero backgrounds but inverted to a light ground so
   the dark text stays readable. Fixed, so it stays behind everything. */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(58% 48% at 80% 8%, rgba(0, 79, 255, 0.20), transparent 70%),
    radial-gradient(50% 44% at 12% 22%, rgba(96, 165, 255, 0.22), transparent 72%),
    radial-gradient(60% 55% at 62% 74%, rgba(166, 255, 214, 0.22), transparent 74%),
    radial-gradient(46% 42% at 30% 96%, rgba(0, 79, 255, 0.12), transparent 72%),
    var(--paper);
}
/* Drifting blurred blobs give the glow some life */
.site-bg::before,
.site-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.site-bg::before {
  width: 60vw;
  height: 60vw;
  right: -12vw;
  top: -14vw;
  background: radial-gradient(circle, rgba(0, 79, 255, 0.45), transparent 66%);
  animation: bgdrift1 30s ease-in-out infinite;
}
.site-bg::after {
  width: 52vw;
  height: 52vw;
  left: -10vw;
  top: 34vh;
  background: radial-gradient(circle, rgba(120, 195, 255, 0.5), transparent 66%);
  animation: bgdrift2 34s ease-in-out infinite;
}
@keyframes bgdrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vw, 5vh) scale(1.12); }
}
@keyframes bgdrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(7vw, -4vh) scale(1.1); }
}

/* Headlines use the secondary font (Articulat CF) */
.hero-title, .page-title, .section-title, .intro-lead, .work-name,
.service-name, .service-detail-title, .next-title, .stat-num,
.process-step h3, .approach-item h3, .contact-big, .form-success h2,
.about-lead p, .project-intro {
  font-family: var(--font-head);
}

/* Accent word — the serif italic set against the sans, as in the hero */
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: clamp(64px, 10vw, 140px) 0; }
.pt-0 { padding-top: 0; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 15px 26px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s;
  cursor: pointer;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--ink); transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }

.link-arrow {
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.link-arrow:hover { color: var(--blue); border-color: var(--blue); }

/* ---------- Logo intro splash ---------- */
.logo-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  pointer-events: none;
  transition: background 0.6s var(--ease);
}
.logo-splash.is-animating { background: transparent; }
.logo-splash.is-done { visibility: hidden; }
/* The mark keeps the wordmark's own ratio, so the glyph strips — absolutely
   positioned at their original x-offsets — rebuild it exactly. */
.logo-splash-mark {
  position: relative;
  width: clamp(200px, 42vw, 340px);
  aspect-ratio: 1024 / 201;
  will-change: transform;
}
.splash-glyph {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  opacity: 0;
  transform: translateY(26%);
  /* cubic-bezier is GSAP's power3.out (ease-out quart); the stagger is what
     SplitText's `delay` prop does, one step per glyph */
  transition:
    opacity 0.75s cubic-bezier(0.165, 0.84, 0.44, 1) calc(var(--i) * 70ms),
    transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1) calc(var(--i) * 70ms);
}
.logo-splash.is-split-in .splash-glyph {
  opacity: 1;
  transform: translateY(0);
}
body.is-intro-active { overflow: hidden; }
body.is-intro-active .site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 0;
  transition: transform 0.4s var(--ease);
  /* the specular canvas bleeds past the header so the glow can spill; clip
     that sideways so it never adds a horizontal scrollbar. `clip` (not
     `hidden`) keeps the vertical spill and leaves sticky working. */
  overflow-x: clip;
}
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}
.brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  line-height: 0;
}
.brand-logo {
  display: block;
  height: clamp(22px, 3vw, 27px);
  width: auto;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.brand-logo.is-visible { opacity: 1; }
.brand:hover .brand-logo { opacity: 0.85; }
.nav {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 9px;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.nav.is-visible { opacity: 1; }
.nav-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(60, 60, 59, 0.14);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease);
}
.nav-label,
.nav-arrow { position: relative; z-index: 1; }
.nav-arrow {
  font-size: 0.9em;
  line-height: 1;
  color: var(--blue);
  opacity: 0.9;
  transition: transform 0.3s var(--ease), opacity 0.3s, color 0.3s;
}
.nav-pill:hover {
  border-color: transparent;
  background: var(--blue);
  color: var(--white);
}
.nav-pill:hover .nav-arrow {
  color: var(--white);
  opacity: 1;
  transform: translate(2px, -2px);
}
/* current page — darker frosted glass, like the reference active pill */
.nav-pill.is-active {
  background: rgba(60, 60, 59, 0.16);
  border-color: rgba(60, 60, 59, 0.22);
  color: var(--ink);
}
.nav-pill.is-active .nav-arrow { color: var(--ink); }
.nav-pill.is-active:hover {
  background: var(--blue);
  color: var(--white);
}
.nav-pill.is-active:hover .nav-arrow { color: var(--white); }

.nav-toggle {
  display: none;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  background: none;
  border: 0;
  cursor: pointer;
  width: 34px;
  height: 34px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.nav-toggle.is-visible { opacity: 1; }
.nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 3px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Staggered menu ----------
   Ported from React Bits' <StaggeredMenu /> without GSAP: the timeline is
   rebuilt as CSS transitions whose delays reproduce the original offsets
   (prelayers at i x 0.07s, panel at 0.15s, items at 0.248s + i x 0.1s, and so
   on). Easings map GSAP's names onto their bezier equivalents —
   power4.out is ease-out quint, power3.in is ease-in quart. */
:root {
  --sm-open: cubic-bezier(0.23, 1, 0.32, 1);     /* power4.out */
  --sm-close: cubic-bezier(0.895, 0.03, 0.685, 0.22); /* power3.in */
  --sm-width: clamp(280px, 40vw, 460px);
}
/* phones take the whole screen, as in the original */
@media (max-width: 640px) {
  :root { --sm-width: 100%; }
}

.sm-prelayers,
.sm-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--sm-width);
  pointer-events: none;
  transform: translateX(101%);   /* 101 hides the sub-pixel seam at the edge */
  visibility: hidden;
}
.sm-prelayers { z-index: 88; }
.sm-panel { z-index: 89; }

.sm-prelayer {
  position: absolute;
  inset: 0;
  transform: translateX(101%);
  transition: transform 0.32s var(--sm-close) calc((1 - var(--i)) * 0.04s);
}
.sm-prelayer-1 { background: var(--mint); }
.sm-prelayer-2 { background: var(--blue); }

.sm-panel {
  display: flex;
  flex-direction: column;
  padding: calc(72px + clamp(28px, 6vw, 64px)) var(--gutter) clamp(28px, 5vw, 48px);
  background: var(--paper);
  overflow-y: auto;
  transition:
    transform 0.32s var(--sm-close),
    visibility 0s linear 0.32s;
}
.sm-prelayers { transition: visibility 0s linear 0.32s; }

/* --- open state --- */
body.is-menu-open .sm-prelayers,
body.is-menu-open .sm-panel { visibility: visible; pointer-events: auto; }
body.is-menu-open .sm-prelayers { transition: visibility 0s; }
body.is-menu-open .sm-prelayer {
  transform: translateX(0);
  transition: transform 0.5s var(--sm-open) calc(var(--i) * 0.07s);
}
body.is-menu-open .sm-panel {
  transform: translateX(0);
  transition: transform 0.65s var(--sm-open) 0.15s, visibility 0s;
}

.sm-panel-inner { flex: 1; display: flex; flex-direction: column; }
.sm-panel-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.sm-panel-itemWrap { position: relative; overflow: hidden; line-height: 1; }

.sm-panel-item {
  position: relative;
  /* block, not inline-block: the number is pinned to `right: 0`, so letting
     each row span the panel lines every number up in one column instead of
     trailing each word at a different x */
  display: block;
  padding-right: 2.6em;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.sm-panel-item:hover { color: var(--blue); }

.sm-panel-itemLabel {
  display: inline-block;
  will-change: transform;
  transform-origin: 50% 100%;
  transform: translateY(140%) rotate(10deg);
  transition: transform 1s var(--sm-close);
}
body.is-menu-open .sm-panel-itemLabel {
  transform: none;
  transition: transform 1s var(--sm-open) calc(0.248s + var(--i) * 0.1s);
}

/* numbering, in the same blue as the services list */
.sm-panel-list[data-numbering] { counter-reset: smItem; }
.sm-panel-list[data-numbering] .sm-panel-item::after {
  counter-increment: smItem;
  content: counter(smItem, decimal-leading-zero);
  position: absolute;
  top: 0.15em;
  right: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--blue);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
body.is-menu-open .sm-panel-list[data-numbering] .sm-panel-item::after {
  opacity: 1;
  transition: opacity 0.6s var(--ease) calc(0.348s + var(--i) * 0.08s);
}

/* socials — serif italic label over the sans links, same pairing as the cards */
.sm-socials { margin-top: auto; padding-top: 2.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.sm-socials-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
body.is-menu-open .sm-socials-title { opacity: 1; transition: opacity 0.5s var(--ease) 0.41s; }

.sm-socials-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.sm-socials-link {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), color 0.25s;
}
body.is-menu-open .sm-socials-link {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--sm-open) calc(0.45s + var(--i) * 0.08s),
    transform 0.55s var(--sm-open) calc(0.45s + var(--i) * 0.08s),
    color 0.25s;
}
.sm-socials-list:hover .sm-socials-link { opacity: 0.35; }
.sm-socials-list:hover .sm-socials-link:hover { opacity: 1; color: var(--blue); }

/* Close control, top-right of the panel — lands where the hamburger was, and
   replaces it, so there is exactly one affordance rather than two stacked in
   the same corner. */
.sm-close {
  position: absolute;
  top: 26px;
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.4s var(--ease), color 0.25s var(--ease);
}
body.is-menu-open .sm-close { opacity: 1; transition: opacity 0.4s var(--ease) 0.35s; }
.sm-close:hover { color: var(--blue); }
.sm-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 3px; }
.sm-close-icon { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.sm-close-icon::before,
.sm-close-icon::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.sm-close-icon::before { transform: translateY(-50%) rotate(45deg); }
.sm-close-icon::after { transform: translateY(-50%) rotate(-45deg); }

body.is-menu-open { overflow: hidden; }
body.is-menu-open .site-header { transform: none !important; }
/* The panel is a CHILD of the header, so the header's own z-index only stacks
   it against the page — inside, the panel's z-index beat the toggle's `auto`
   and painted over it, swallowing the clicks. Lift the bar above the panel,
   then make the bar itself transparent to the pointer (it is only a layout
   container, and full-width) so it doesn't swallow the panel's Close in turn.
   Same trick the original component uses on its header. */
.header-inner { position: relative; z-index: 95; pointer-events: none; }
.header-inner > * { pointer-events: auto; }
/* ...and with the panel carrying its own Close, the hamburger steps aside */
body.is-menu-open .nav-toggle { opacity: 0; pointer-events: none; }

/* The logo is centred, so it only lands on the panel once the panel covers the
   whole screen. Above that width it stays over the page and keeps its own
   treatment — un-inverting it there would make it vanish against the hero. */
@media (max-width: 640px) {
  body.is-menu-open .site-header.on-dark .brand-logo { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-prelayer, .sm-panel, .sm-panel-itemLabel, .sm-socials-link { transition: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(50px, 9vw, 110px) 0 clamp(40px, 6vw, 80px); }
.hero-kicker {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(20px, 4vw, 40px);
}
.hero-title {
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.hero-title span { display: block; }
.hero-title .amp { color: var(--blue); font-family: var(--font-display); font-weight: 700; }
.hero-title em { color: var(--blue); }
.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(28px, 4vw, 48px);
}
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.4rem); max-width: 30ch; color: var(--ink); }

.hero-grid {
  margin-top: clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
.hero-tile {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform 0.6s var(--ease);
}
.hero-tile:hover { transform: translateY(-6px); }
.tile-blue { background: var(--blue); }
.tile-blue-2 { background: var(--blue-deep); }
.tile-mint { background: var(--mint); }
.tile-ink { background: var(--ink); }
.tile-tag {
  position: absolute;
  left: 14px; bottom: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(0,0,0,0.28);
  padding: 5px 12px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}
.tile-mint .tile-tag { color: var(--ink); background: rgba(255,255,255,0.55); }

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  overflow: hidden;
  background: var(--blue);
  color: var(--white);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
  animation: scroll 26s linear infinite;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.marquee-track .dot { color: var(--mint); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Section heads ---------- */
.section-label { font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 28px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(30px, 4vw, 54px); flex-wrap: wrap; }
.section-title { font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }

.intro-lead {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.intro-section { padding-bottom: clamp(40px, 6vw, 80px); }

/* ---------- Work grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.work-grid-full { grid-template-columns: repeat(2, 1fr); }
.work-card { display: block; }
.work-card.span-2 { grid-column: span 2; }
.work-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform 0.6s var(--ease);
}
.span-2 .work-thumb { aspect-ratio: 16 / 8; }
.work-card:hover .work-thumb { transform: scale(0.985); }
.work-index {
  position: absolute;
  top: 18px; left: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.tint-mint .work-index { color: rgba(60,60,59,0.6); }
.work-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px 0;
}
.work-name { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; transition: color 0.3s; }
.work-card:hover .work-name { color: var(--blue); }
.work-client { color: var(--muted); font-size: 0.92rem; margin-top: 2px; }
.work-service {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  white-space: nowrap;
}

.tint-blue { background: var(--blue); }
.tint-ink { background: var(--ink); }
.tint-mint { background: var(--mint); }

/* ---------- Services teaser (home) ---------- */
.services-teaser { border-top: 1px solid var(--line); }
.service-list { list-style: none; }
.service-row { border-bottom: 1px solid var(--line); }
.service-row:first-child { border-top: 1px solid var(--line); }
.service-row a {
  display: grid;
  grid-template-columns: 60px 1.2fr 2fr 30px;
  align-items: center;
  gap: 20px;
  padding: clamp(20px, 3vw, 34px) 8px;
  transition: padding 0.4s var(--ease), color 0.3s;
}
.service-row a:hover { padding-left: 22px; color: var(--blue); }
.service-num { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.service-name { font-size: clamp(1.3rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: -0.02em; }
.service-desc { color: var(--muted); font-size: 1rem; }
.service-arrow { justify-self: end; font-size: 1.2rem; transition: transform 0.3s; }
.service-row a:hover .service-arrow { transform: translate(3px, -3px); }

/* ---------- Page heads ---------- */
.page-head { padding: clamp(56px, 9vw, 120px) 0 clamp(30px, 4vw, 56px); }
.page-title { font-size: clamp(2.1rem, 5.2vw, 4.4rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; max-width: 19ch; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4vw, 50px); }
.filter {
  padding: 9px 20px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.filter:hover { border-color: var(--ink); }
.filter.is-active { background: var(--blue); color: var(--white); border-color: var(--blue); }
.work-card.is-hidden { display: none; }

/* ---------- Project page ---------- */
.project-head { padding: clamp(50px, 8vw, 100px) 0 clamp(24px, 3vw, 40px); }
.back-link { display: inline-block; font-weight: 600; color: var(--muted); margin-bottom: 30px; transition: color 0.3s; }
.back-link:hover { color: var(--blue); }
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 6vw, 80px);
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.project-meta > div { display: flex; flex-direction: column; gap: 4px; }
.meta-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.project-intro { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; max-width: 26ch; }
.project-hero-img { aspect-ratio: 16 / 9; border-radius: var(--radius); margin-top: clamp(24px, 4vw, 48px); }
.project-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); margin-top: clamp(14px, 2vw, 24px); }
.gallery-img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.project-gallery-wide { margin-top: clamp(14px, 2vw, 24px); }
.project-gallery-wide .gallery-img { aspect-ratio: 16 / 7; }
.write-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.write-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); font-weight: 700; margin-bottom: 14px; }
.write-block p { font-size: 1.08rem; line-height: 1.55; }

.next-project { display: block; padding: clamp(50px, 8vw, 110px) 0; margin-top: clamp(40px, 6vw, 80px); color: var(--white); transition: filter 0.4s; }
.next-project.tint-mint { color: var(--ink); }
.next-project:hover { filter: brightness(1.08); }
.next-inner { display: flex; flex-direction: column; gap: 10px; }
.next-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; opacity: 0.8; }
.next-title { font-size: clamp(2rem, 6vw, 5rem); font-weight: 400; letter-spacing: -0.03em; }

/* ---------- Services detail ---------- */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 5vw, 70px);
  padding: clamp(36px, 5vw, 60px) 0;
  border-top: 1px solid var(--line);
}
.service-detail:last-of-type { border-bottom: 1px solid var(--line); }
.service-detail-head { display: flex; flex-direction: column; gap: 14px; }
.service-num-lg { font-size: 1rem; font-weight: 700; color: var(--blue); }
.service-detail-title { font-size: clamp(1.9rem, 4.2vw, 3.6rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.service-detail-lead { font-size: 1.15rem; line-height: 1.5; margin-bottom: 26px; max-width: 46ch; }
.service-includes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.service-includes li { position: relative; padding-left: 22px; font-weight: 500; }
.service-includes li::before { content: "→"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* ---------- Process ---------- */
.process { border-top: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 50px); margin-top: 20px; }
.process-step { padding-top: 24px; border-top: 2px solid var(--ink); }
.process-num { font-size: 0.9rem; font-weight: 700; color: var(--blue); }
.process-step h3 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500; margin: 12px 0; letter-spacing: -0.02em; }
.process-step p { color: var(--ink); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.about-lead p { font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 400; line-height: 1.35; letter-spacing: -0.01em; }
.about-lead p + p { margin-top: 24px; font-size: 1.1rem; font-weight: 400; line-height: 1.55; color: var(--ink); }
.about-img { aspect-ratio: 3 / 4; border-radius: var(--radius); }
.approach { border-top: 1px solid var(--line); }
.approach-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 50px); }
.approach-item { padding-top: 22px; border-top: 1px solid var(--line); }
.approach-item h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 500; margin-bottom: 12px; letter-spacing: -0.02em; }
.approach-item p { color: var(--muted); }
.stats { background: var(--ink); color: var(--white); border-radius: var(--radius); margin: 0 var(--gutter) clamp(60px,8vw,100px); padding: clamp(50px,7vw,90px) clamp(28px,4vw,64px); }
.stats > .wrap { max-width: none; padding: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; letter-spacing: -0.03em; color: var(--mint); line-height: 1; }
.stat-label { color: rgba(255,255,255,0.75); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 90px); }
.contact-block { padding: 24px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.contact-block:first-child { border-top: 0; padding-top: 0; }
.contact-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.contact-big { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: -0.02em; transition: color 0.3s; }
.contact-big:hover { color: var(--blue); }
.contact-socials { display: flex; flex-direction: column; gap: 8px; }
.contact-socials a { font-size: 1.1rem; font-weight: 600; transition: color 0.3s; }
.contact-socials a:hover { color: var(--blue); }
.contact-muted { color: var(--muted); font-size: 1.05rem; }

.contact-form-wrap { background: var(--white); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); }
.field { margin-bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 600; font-size: 0.9rem; }
.field input, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.3s, background 0.3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: var(--white); }
.form-success h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 14px; }
.form-success p { color: var(--muted); margin-bottom: 24px; }

.error-page .btn { margin-top: 30px; }

/* ---------- Footer ----------
   Pared back to the reference: a "scroll to top" control sitting above a
   hairline, then the mark + address on the left and two right-aligned
   link columns. No CTA, no column labels, no bottom bar. */
.site-footer {
  background: var(--ink); color: var(--white);
  padding: clamp(26px, 3vw, 40px) 0 clamp(34px, 4.5vw, 60px);
}
.footer-top {
  display: flex; justify-content: flex-end;
  padding-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.to-top {
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; font-weight: 500;
  color: var(--white);
  transition: color 0.3s var(--ease);
}
.to-top-icon {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.to-top-icon svg { width: 15px; height: 15px; display: block; }
.to-top:hover { color: var(--mint); }
.to-top:hover .to-top-icon { background: var(--mint); transform: translateY(-2px); }

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: clamp(36px, 14vw, 240px);
  align-items: start;
  padding-top: clamp(26px, 3vw, 40px);
}
.footer-logo {
  display: block; width: auto;
  height: clamp(20px, 2.4vw, 25px);
  filter: brightness(0) invert(1);   /* the mark ships blue; the footer is dark */
}
.footer-address {
  margin-top: 16px;
  font-size: 0.95rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
}
.footer-address a { color: inherit; transition: color 0.3s var(--ease); }
.footer-address a:hover { color: var(--mint); }

.footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.footer-links a {
  font-size: 0.95rem; font-weight: 500; color: var(--white);
  transition: color 0.3s var(--ease);
}
.footer-links a:hover { color: var(--mint); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-pill {
    padding: 7px 14px;
    font-size: 0.64rem;
  }
  .nav { gap: 7px; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .write-grid { grid-template-columns: 1fr; gap: 30px; }
  .service-detail { grid-template-columns: 1fr; }
  .process-grid, .approach-list, .stats-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-img { aspect-ratio: 16 / 10; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-row a { grid-template-columns: 40px 1fr 24px; }
  .service-desc { display: none; }
}
@media (max-width: 620px) {
  .footer-main { grid-template-columns: 1fr 1fr; row-gap: 34px; column-gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-links { align-items: flex-start; }
  .work-grid, .work-grid-full { grid-template-columns: 1fr; }
  .work-card.span-2 { grid-column: auto; }
  .span-2 .work-thumb { aspect-ratio: 4 / 3; }
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .project-gallery { grid-template-columns: 1fr; }
  .service-includes { grid-template-columns: 1fr; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .logo-splash { display: none; }
  .brand-logo, .nav, .nav-toggle { opacity: 1; }
}

/* =========================================================
   HOMEPAGE REDESIGN — aurora hero, services tabs, works, partners
   ========================================================= */

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

/* ---------- Section marker: ✦ LABEL ---------- */
.tag { display: inline-flex; align-items: center; gap: 10px; }
.tag-diamond { width: 15px; height: 15px; flex: none; color: var(--blue); }
.tag-text {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
}

/* ---------- Vector wordmark hero (WebGL) ---------- */
.wm-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  margin-top: -72px; /* sit behind the transparent header — no white bar */
  overflow: hidden;
  isolation: isolate;
  /* black -> deep navy -> brand blue -> white, landing on the page ground
     exactly at the hero's bottom edge so Services starts clean */
  background: linear-gradient(
    180deg,
    #000000 0%,
    #000c24 20%,
    #001749 40%,
    #002a9e 58%,
    #0040e0 70%,
    var(--blue) 80%,
    #6f9bff 89%,
    #cfdcf5 96%,
    var(--paper) 100%
  );
}
.ht-canvas,
.wm-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.ht-canvas { z-index: 0; }  /* halftone backdrop */
.wm-canvas { z-index: 1; }  /* wordmark rides on top */
/* coordinate readouts that ride along with the drifting handles */
.wm-label {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  opacity: 0.6;
  pointer-events: none;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  will-change: transform;
}
/* if WebGL is unavailable, fall back to the static brand artwork */
.wm-hero.no-webgl {
  background-image: url("/images/hero-bg.jpg");
  background-size: cover;
  background-position: center 20%;
}
.wm-hero.no-webgl .wm-label { display: none; }

/* WebGL specular rim drawn over the nav pills */
.nav-specular {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  display: block;
  transition: opacity 0.3s var(--ease);
}

/* Header inverts while it sits over the dark top of the gradient */
.site-header.on-dark .nav-pill {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}
.site-header.on-dark .nav-arrow { color: var(--white); }
.site-header.on-dark .nav-pill:hover {
  background: var(--white);
  color: var(--blue);
  border-color: transparent;
}
.site-header.on-dark .nav-pill:hover .nav-arrow { color: var(--blue); }
.site-header.on-dark .nav-pill.is-active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.site-header.on-dark .brand-logo { filter: brightness(0) invert(1); }
.site-header.on-dark .nav-toggle { color: var(--white); }

/* ---------- Blueprint grid guides ----------
   Dotted rules tracing the content column, with sparkle markers at the
   crossings. Decorative only — pointer-events off, sits under the content. */
.section-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* how far the vertical guides sit in from the page box (see --edge) */
.section-grid { --grid-edge: calc((100% - min(100%, var(--wrap))) / 2 + var(--edge)); }

.rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  border-top: 1px dashed var(--rule);
}

.rule-mark {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0c1.1 7 4 9.9 12 12-8 2.1-10.9 5-12 12-1.1-7-4-9.9-12-12 8-2.1 10.9-5 12-12Z' fill='%233c3c3b' fill-opacity='0.45'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.rule-mark-l { left: var(--grid-edge); }
.rule-mark-r { right: var(--grid-edge); transform: translate(50%, -50%); }

.guide {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1px dashed var(--rule);
}
.guide-l { left: var(--grid-edge); }
.guide-r { right: var(--grid-edge); }

/* the grid is absolute, so each section must be its own containing block */
.section { position: relative; }
/* keep section content above the guides */
.section > .wrap { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .guide, .rule-mark { display: none; }
}

/* ---------- Services ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(30px, 4vw, 56px);
  align-items: start;
}
.svc-list {
  list-style: none; display: flex; flex-direction: column;
  /* shared so the underline can start exactly where the title starts */
  --num-col: 22px;
  --num-gap: clamp(22px, 3.5vw, 46px);
}
.svc-item {
  position: relative;
  /* flex-start puts the number up at the title's cap line, not on its baseline */
  display: flex; align-items: flex-start; gap: var(--num-gap); width: 100%;
  background: none; border: 0;
  padding: clamp(16px, 2.2vw, 30px) 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
/* underline is a pseudo-element, not a border, so it can sweep out from the
   left on select — a border-bottom can only fade, never grow */
.svc-item::after {
  content: "";
  position: absolute;
  left: calc(var(--num-col) + var(--num-gap)); right: 0; bottom: 0;
  height: 1px;
  background: rgba(0, 79, 255, 0.55);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.svc-item.is-active::after { transform: scaleX(1); }
.svc-num {
  font-size: 0.72rem; font-weight: 400; color: var(--blue);
  flex: none; width: var(--num-col);
  margin-top: 0.35em;   /* nudge down onto the title's cap line */
}
.svc-title {
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 3.3vw, 4.15rem);
  font-weight: 400; letter-spacing: -0.025em; line-height: 1.02;
  color: var(--ink); opacity: 0.34;
  transition: opacity 0.35s var(--ease);
}
.svc-item:hover .svc-title { opacity: 0.62; }
.svc-item.is-active .svc-title { opacity: 1; }

.svc-detail { position: relative; }
.svc-panel { display: none; }
.svc-panel.is-active { display: block; animation: svcIn 0.5s var(--ease); }
@keyframes svcIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.svc-heading {
  font-family: var(--font-head);
  font-size: clamp(1.18rem, 1.6vw, 1.6rem);
  font-weight: 600; line-height: 1.3; letter-spacing: -0.015em;
  max-width: 34ch;
}
.svc-body {
  margin-top: 22px; font-size: clamp(1rem, 1.25vw, 1.3rem); line-height: 1.55;
  color: var(--ink); max-width: 54ch;
}
.svc-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  border: 1px solid rgba(0, 79, 255, 0.28);
  background: rgba(255, 255, 255, 0.45);
  color: var(--ink);
  border-radius: 100px; padding: 8px 16px;
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.01em;
}
.chip-hot {
  background: var(--mint);
  border-color: #86e6bb;
  color: var(--ink);
}

/* ---------- Works ---------- */
.works-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: clamp(28px, 4vw, 50px);
}
.works-all { font-weight: 600; }
.works-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 42px); align-items: start;
}
/* varied heights kept for the editorial feel, but no vertical offset —
   `align-items: start` on the grid then lines all three tops up */
.works-grid .work-thumb {
  border-radius: 0; aspect-ratio: 4 / 3;
  transition: transform 0.6s var(--ease);
}
.works-grid .work-pos-0 .work-thumb { aspect-ratio: 3 / 4; }
.works-grid .work-pos-1 .work-thumb { aspect-ratio: 4 / 3; }
.works-grid .work-pos-2 .work-thumb { aspect-ratio: 1 / 1; }
.works-grid .work-thumb { overflow: hidden; }

/* Image loop — frames stacked in the thumb, one visible at a time.
   The first frame carries `is-on` from the server, so the card shows real
   artwork before JS runs and stays on that still under reduced motion. */
.work-loop { position: absolute; inset: 0; }
.work-frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.work-frame.is-on { opacity: 1; }
.works-grid .work-thumb picture,
.works-grid .work-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.works-grid .work-card:hover .work-thumb { transform: scale(0.985); }
.work-cap { padding-top: 16px; }
.works-grid .work-name {
  font-size: clamp(1.1rem, 1.7vw, 1.42rem); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.03em;
  transition: color 0.3s;
}
.works-grid .work-card:hover .work-name { color: var(--blue); }
.work-tags { color: var(--muted); font-size: 0.92rem; margin-top: 3px; }
/* Card caption pairs the two voices, same as the hero: the name in the
   grotesque, the descriptive line in the serif italic. */
.work-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  /* Sits almost as large as the name — the two are told apart by case and
     style, not scale. Instrument Serif also runs a small x-height, so it needs
     the extra px to hold its own next to the uppercase grotesque. */
  font-size: clamp(1.1rem, 1.42vw, 1.32rem);
  line-height: 1.35;
  color: rgba(60, 60, 59, 0.75);
  margin-top: 9px;
}

/* ---------- Brand partners — logo marquee ----------
   Ported from React Bits' <LogoLoop /> stylesheet. The row runs full bleed so
   it reads as continuous; the edge fades are exactly one gutter wide, so the
   logos reach full strength right where the rest of the page begins. */
.logoloop {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: clamp(30px, 4vw, 52px);
  z-index: 1;                       /* clear of the blueprint guides */
  --logoloop-gap: 96px;
  --logoloop-logoHeight: 64px;
  --logoloop-fade: var(--paper);
}
.logoloop--scale-hover {
  padding-top: calc(var(--logoloop-logoHeight) * 0.1);
  padding-bottom: calc(var(--logoloop-logoHeight) * 0.1);
}
.logoloop__track {
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
  position: relative;
  z-index: 0;
}
.logoloop__list { display: flex; align-items: center; list-style: none; }
.logoloop__item {
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  font-size: var(--logoloop-logoHeight);
  line-height: 1;
}
.logoloop__item img {
  height: var(--logoloop-logoHeight);
  width: auto; display: block; object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;            /* so :hover lands on the <li>, not the img */
  opacity: 0.55;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s var(--ease);
}
.logoloop--scale-hover .logoloop__item:hover img {
  transform: scale(1.12);
  transform-origin: center center;
}
.logoloop__item:hover img { opacity: 0.95; }

/* the transparent stop repeats --paper rather than using `transparent`,
   which some engines interpolate through black and smears the fade grey */
.logoloop--fade::before,
.logoloop--fade::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: var(--gutter); pointer-events: none; z-index: 10;
}
.logoloop--fade::before {
  left: 0;
  background: linear-gradient(to right, var(--logoloop-fade) 0%, rgba(243, 244, 247, 0) 100%);
}
.logoloop--fade::after {
  right: 0;
  background: linear-gradient(to left, var(--logoloop-fade) 0%, rgba(243, 244, 247, 0) 100%);
}

/* text fallback for a partner with no logo file yet */
.partner-name {
  font-family: var(--font-head);
  font-weight: 700; letter-spacing: 0.02em; font-size: 1.25rem;
  color: #b6b7bb; text-transform: uppercase;
  transition: color 0.3s;
}
.logoloop__item:hover .partner-name { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .logoloop__track { transform: translate3d(0, 0, 0) !important; }
  .logoloop__item img { transition: none !important; }
}

/* ---------- Homepage responsive ---------- */
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; gap: 36px; }
  .works-grid { grid-template-columns: 1fr; gap: 30px; }
  .works-grid .work-pos-0 .work-thumb,
  .works-grid .work-pos-1 .work-thumb,
  .works-grid .work-pos-2 .work-thumb { aspect-ratio: 4 / 3; }
  .wm-hero { height: clamp(420px, 70vh, 640px); }
  .logoloop { --logoloop-logoHeight: 46px; --logoloop-gap: 56px; }
}