@font-face {
  font-family: "Epilogue";
  src: url("../fonts/Epilogue-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "Epilogue";
  src: url("../fonts/Epilogue-Medium.ttf") format("truetype");
  font-display: swap;
  font-weight: 500;
}

@font-face {
  font-family: "Epilogue";
  src: url("../fonts/Epilogue-SemiBold.ttf") format("truetype");
  font-display: swap;
  font-weight: 600;
}

@font-face {
  font-family: "Epilogue";
  src: url("../fonts/Epilogue-Bold.ttf") format("truetype");
  font-display: swap;
  font-weight: 700;
}

:root {
  --amber: #f4ae17;
  --amber-soft: #ffc84f;
  --ink: #11110f;
  --ink-soft: #1b1b18;
  --paper: #f7f4ec;
  --white: #fffdf8;
  --blue: #194bd6;
  --muted: #6d6b64;
  --line: rgba(17, 17, 15, 0.16);
  --radius: 1.4rem;
  --shadow: 0 24px 80px rgba(17, 17, 15, 0.14);
  --ease: cubic-bezier(.2, .75, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Epilogue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
p, h1, h2, h3, blockquote, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }

::selection { color: var(--ink); background: var(--amber); }
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .75rem 1rem; color: var(--white); background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.page-shell { width: min(100% - 3rem, 1380px); margin-inline: auto; }
.section { padding: clamp(6rem, 10vw, 10rem) 0; }

.announcement {
  position: relative;
  z-index: 20;
  height: 2rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.18);
  background: var(--amber);
  color: var(--ink);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 2rem;
  text-transform: uppercase;
}
.announcement-track { display: flex; width: max-content; align-items: center; white-space: nowrap; will-change: transform; animation: ticker 30s linear infinite; animation-delay: -12s; }
.announcement-group { display: flex; flex: 0 0 auto; align-items: center; gap: 1.6rem; padding-right: 1.6rem; }
.announcement-group a { display: inline-flex; gap: .45rem; align-items: center; transition: opacity .2s ease; }
.announcement-group a:hover { opacity: .62; }
.announcement-group a:focus-visible { border-radius: .25rem; outline: 2px solid var(--ink); outline-offset: 2px; }
.announcement-group b { display: grid; width: 1.05rem; height: 1.05rem; place-items: center; border-radius: 50%; color: var(--amber); background: var(--ink); font-size: .55rem; line-height: 1; }
.announcement-group i { width: .34rem; height: .34rem; flex: 0 0 auto; border-radius: 50%; background: var(--ink); }
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  padding: .8rem 0;
  pointer-events: none;
  transition: padding .35s var(--ease);
}
.site-header.is-scrolled { padding: .55rem 0; }
.nav-shell {
  width: min(100% - 3rem, 1380px);
  height: 4.8rem;
  margin-inline: auto;
  padding: .48rem .55rem .48rem 1.3rem;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  gap: 1rem;
  align-items: center;
  border: 1px solid rgba(17,17,15,.12);
  border-radius: 1.45rem;
  background: rgba(255,253,248,.86);
  box-shadow: 0 14px 45px rgba(17,17,15,.09), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(1.15);
  pointer-events: auto;
  transition: height .35s var(--ease), border-radius .35s var(--ease), background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled .nav-shell { height: 4.25rem; border-radius: 1.25rem; background: rgba(255,253,248,.93); box-shadow: 0 16px 50px rgba(17,17,15,.14), inset 0 1px 0 rgba(255,255,255,.9); }
.brand { width: 7.2rem; display: inline-flex; align-items: center; transition: transform .3s var(--ease); }
.brand img { width: 100%; height: auto; }
.brand:hover { transform: translateY(-2px); }
.desktop-nav { display: flex; gap: .12rem; align-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 99px; padding: .32rem; background: var(--ink); box-shadow: 0 10px 25px rgba(17,17,15,.16), inset 0 1px 0 rgba(255,255,255,.08); }
.desktop-nav a { position: relative; border-radius: 99px; padding: .62rem 1.05rem; color: rgba(255,255,255,.68); font-size: .72rem; font-weight: 600; transition: color .25s ease, background .25s ease, transform .25s var(--ease); }
.desktop-nav a::after { display: none; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a.is-active { color: var(--ink); background: var(--amber); transform: translateY(-1px); outline: none; }
.desktop-nav a:focus-visible { box-shadow: 0 0 0 2px var(--amber); }
.nav-actions { justify-self: end; display: flex; gap: .6rem; align-items: center; }
.nav-email { display: inline-flex; gap: .55rem; align-items: center; border-radius: 99px; padding: .7rem .85rem; font-size: .62rem; font-weight: 600; transition: color .25s, background .25s, transform .3s var(--ease); }
.nav-email b { font-weight: 600; white-space: nowrap; }
.nav-email:hover, .nav-email:focus-visible { color: var(--white); background: var(--ink); outline: none; transform: translateY(-2px); }
.nav-email-icon { position: relative; width: 1.05rem; height: .76rem; flex: 0 0 auto; border: 1.5px solid currentColor; border-radius: .13rem; }
.nav-email-icon::after { position: absolute; top: -.17rem; left: 50%; width: .58rem; height: .58rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateX(-50%) rotate(45deg); }
.nav-cta { display: inline-flex; align-items: center; gap: 1.2rem; border: 1px solid rgba(17,17,15,.14); border-radius: 99px; padding: .53rem .56rem .53rem 1.15rem; background: var(--amber); box-shadow: 0 10px 24px rgba(244,174,23,.24); font-size: .74rem; font-weight: 700; white-space: nowrap; transition: color .25s, background .25s, transform .3s var(--ease), box-shadow .3s ease; }
.nav-cta span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--white); background: var(--ink); transition: color .3s, background .3s, transform .3s var(--ease); }
.nav-cta:hover { color: var(--white); background: var(--ink); }
.nav-cta:hover { box-shadow: 0 14px 30px rgba(17,17,15,.18); transform: translateY(-2px); }
.nav-cta:hover span { color: var(--ink); background: var(--amber); transform: rotate(45deg); }
.menu-toggle, .mobile-nav { display: none; }

@media (max-width: 1320px) {
  .nav-email { width: 2.65rem; height: 2.65rem; justify-content: center; padding: 0; }
  .nav-email b { display: none; }
}

.hero { position: relative; min-height: calc(100svh - 2rem); padding: clamp(3rem, 5vw, 6rem) 0 2rem; overflow: hidden; }
.hero::before { position: absolute; z-index: -2; inset: 0; content: ""; opacity: .15; background-image: radial-gradient(rgba(17,17,15,.8) .65px, transparent .65px); background-size: 14px 14px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.hero-glow { position: absolute; z-index: -1; top: -35rem; right: -24rem; width: 68rem; height: 68rem; border-radius: 50%; background: radial-gradient(circle, rgba(244,174,23,.4), transparent 65%); filter: blur(10px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(32rem, 1.12fr); gap: clamp(3rem, 6vw, 7rem); align-items: center; }
.eyebrow { display: flex; gap: .7rem; align-items: center; margin-bottom: 1.5rem; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { width: 1.6rem; height: 2px; content: ""; background: var(--amber); }
.hero h1 { max-width: 780px; font-size: clamp(3.65rem, 7.25vw, 7.8rem); font-weight: 600; letter-spacing: -.075em; line-height: .88; }
h1 em, h2 em { position: relative; color: var(--amber); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.06em; }
.hero-lede { max-width: 650px; margin-top: 2rem; color: #4f4d47; font-size: clamp(1rem, 1.2vw, 1.2rem); }
.hero-actions { display: flex; gap: 1.7rem; align-items: center; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6rem; border-radius: 99px; padding: 1rem 1.1rem 1rem 1.45rem; font-size: .77rem; font-weight: 700; transition: transform .3s var(--ease), background .3s, color .3s; }
.button span { transition: transform .3s var(--ease); }
.button:hover { transform: translateY(-3px); }
.button:hover span { transform: rotate(45deg); }
.button-primary { background: var(--amber); box-shadow: 0 12px 30px rgba(244,174,23,.22); }
.button-primary:hover { color: var(--white); background: var(--ink); }
.text-link { display: inline-flex; gap: 1rem; align-items: center; border-bottom: 1px solid var(--ink); padding: .5rem 0 .25rem; font-size: .8rem; font-weight: 700; }
.text-link span { transition: transform .3s var(--ease); }
.text-link:hover span { transform: translate(3px, -3px); }
.hero-proof { display: flex; gap: clamp(1.2rem, 3vw, 3.2rem); margin-top: clamp(2.8rem, 5vw, 5.2rem); }
.hero-proof div { display: flex; min-width: 0; flex-direction: column; gap: .2rem; }
.hero-proof div + div { border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 3vw, 3.2rem); }
.hero-proof strong { font-size: 1.35rem; font-weight: 600; letter-spacing: -.04em; }
.hero-proof span { color: var(--muted); font-size: .62rem; line-height: 1.35; text-transform: uppercase; }

.hero-visual { position: relative; min-height: min(690px, 66vw); transform-style: preserve-3d; }
.visual-frame { position: absolute; inset: 2rem 0 1rem 2rem; overflow: hidden; border-radius: 50% 50% 1.6rem 1.6rem; background: var(--ink); box-shadow: var(--shadow); }
.visual-frame::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.35); border-radius: inherit; }
.visual-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 54% center; filter: saturate(.88) contrast(1.06); transform: scale(1.03); animation: heroBreath 12s ease-in-out infinite alternate; }
@keyframes heroBreath { to { transform: scale(1.1) translate3d(-1%, -1%, 0); } }
.visual-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45)); }
.floating-card { position: absolute; z-index: 2; border: 1px solid rgba(255,255,255,.24); box-shadow: 0 22px 60px rgba(0,0,0,.2); backdrop-filter: blur(15px); }
.card-status { right: -1rem; bottom: 4.5rem; display: flex; gap: .8rem; align-items: center; min-width: 12rem; border-radius: 1.1rem; padding: .85rem 1rem; color: var(--white); background: rgba(17,17,15,.76); animation: float 5s ease-in-out infinite; }
.card-status small, .card-status strong { display: block; }
.card-status small { color: rgba(255,255,255,.6); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.card-status strong { margin-top: .1rem; font-size: .75rem; }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #63dc87; box-shadow: 0 0 0 5px rgba(99,220,135,.14); }
.card-sprint { top: 12%; left: -.5rem; padding: 1.1rem 1.3rem; border-radius: .9rem; transform: rotate(-5deg); background: rgba(255,253,248,.87); animation: floatTwo 6s ease-in-out infinite; }
.card-sprint span { color: var(--muted); font-size: .5rem; font-weight: 700; letter-spacing: .12em; }
.card-sprint strong { display: block; margin-top: .5rem; font-size: .76rem; line-height: 1.3; }
.orbit-mark { position: absolute; z-index: 3; right: -1.5rem; top: 7%; display: grid; width: 6.8rem; height: 6.8rem; place-items: center; border-radius: 50%; color: var(--ink); background: var(--amber); box-shadow: 0 16px 44px rgba(244,174,23,.28); animation: spin 18s linear infinite; }
.orbit-mark::before { position: absolute; width: 5.25rem; height: 5.25rem; border: 1px dashed var(--ink); border-radius: 50%; content: ""; }
.orbit-mark span { font-size: .78rem; font-weight: 700; }
@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes floatTwo { 50% { transform: rotate(-2deg) translateY(9px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-bottom { display: flex; gap: 1.5rem; align-items: center; margin-top: 2.5rem; color: var(--muted); font-size: .59rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hero-line { height: 1px; flex: 1; background: var(--line); }

.logo-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem max(1.5rem, calc((100vw - 1380px) / 2)); background: var(--white); }
.logo-strip p { color: var(--muted); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tech-marquee-window { min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tech-marquee-track { display: flex; width: max-content; will-change: transform; animation: techTicker 28s linear infinite; animation-delay: -9s; }
.tech-marquee-group { display: flex; flex: 0 0 auto; gap: clamp(3.5rem, 6vw, 7rem); align-items: center; padding-right: clamp(3.5rem, 6vw, 7rem); }
.tech-item { display: inline-flex; min-width: 9rem; gap: .8rem; align-items: center; color: #4e4d48; }
.tech-item img { width: 2.7rem; height: 2.7rem; flex: 0 0 auto; object-fit: contain; }
.tech-item b { font-size: clamp(.78rem, 1vw, 1rem); font-weight: 600; white-space: nowrap; }
@keyframes techTicker { to { transform: translate3d(-50%, 0, 0); } }

.section-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(3rem, 8vw, 8rem); align-items: end; margin-bottom: clamp(3.5rem, 6vw, 6.2rem); }
.section-heading h2, .capabilities-heading h2, .impact h2, .industries h2, .people h2, .faq h2, .contact h2, .cta h2 { font-size: clamp(2.8rem, 5.7vw, 6.1rem); font-weight: 500; letter-spacing: -.065em; line-height: .96; }
.section-heading > p, .impact-copy > p, .people-copy > p, .faq-intro > p { max-width: 34rem; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.heading-action { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.heading-action > p { max-width: 34rem; color: var(--muted); font-size: 1rem; line-height: 1.75; }

.services { background: var(--white); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.service-card { position: relative; min-height: 34rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.7vw, 2.6rem); padding-bottom: 6rem; background: var(--paper); transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s; }
.service-card::before { position: absolute; right: -6rem; bottom: -8rem; width: 17rem; height: 17rem; border: 1px solid rgba(17,17,15,.12); border-radius: 50%; content: ""; box-shadow: 0 0 0 2.4rem rgba(17,17,15,.03), 0 0 0 4.8rem rgba(17,17,15,.025); transition: transform .6s var(--ease); }
.service-card:hover { z-index: 2; transform: translateY(-12px); box-shadow: var(--shadow); }
.service-card:hover::before { transform: scale(1.2); }
.service-card-featured { background: var(--amber); }
.card-number { position: absolute; top: 1.4rem; right: 1.6rem; color: rgba(17,17,15,.48); font-size: .6rem; font-weight: 700; }
.service-icon { display: grid; width: 4.2rem; height: 4.2rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-size: 1.55rem; }
.service-card h3 { margin-top: 5rem; font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 600; letter-spacing: -.05em; }
.service-card p { min-height: 7.4rem; margin-top: 1.1rem; color: #55534d; font-size: .88rem; line-height: 1.7; }
.service-card ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.service-card li { border: 1px solid rgba(17,17,15,.2); border-radius: 99px; padding: .4rem .7rem; font-size: .58rem; font-weight: 600; }
.service-card a { position: absolute; right: 2rem; bottom: 2rem; left: 2rem; display: flex; justify-content: space-between; border-top: 1px solid rgba(17,17,15,.18); padding-top: 1rem; font-size: .72rem; font-weight: 700; }
.service-card a span { transition: transform .3s var(--ease); }
.service-card:hover a span { transform: rotate(45deg); }

.ambient-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scale(1.015); transition: opacity .8s ease, filter .8s ease, transform 10s linear; }
.video-overlay { position: absolute; inset: 0; pointer-events: none; }
.service-card.has-video { isolation: isolate; color: var(--white); background: var(--ink); }
.service-card.has-video::before { z-index: 2; border-color: rgba(255,255,255,.16); box-shadow: 0 0 0 2.4rem rgba(255,255,255,.035), 0 0 0 4.8rem rgba(255,255,255,.025); }
/* Stacking lift for card content. Must exclude the elements that are meant to
   stay absolutely positioned (the corner number and the bottom link) — this
   selector is (0,4,0) and would otherwise beat their own rules below. */
.service-card.has-video > *:not(.ambient-video):not(.video-overlay):not(.card-number):not(a) { position: relative; z-index: 3; }
.service-card.has-video .ambient-video { z-index: 0; opacity: .42; filter: saturate(.72) contrast(1.08) brightness(.72); }
.service-card.has-video .video-overlay { z-index: 1; background: linear-gradient(180deg, rgba(17,17,15,.28), rgba(17,17,15,.84) 78%, rgba(17,17,15,.96)); }
.service-card.has-video.is-video-playing .ambient-video,
.service-card.has-video:hover .ambient-video { opacity: .76; filter: saturate(.95) contrast(1.08) brightness(.82); transform: scale(1.08); }
.service-card.has-video .card-number { position: absolute; z-index: 3; color: rgba(255,255,255,.62); }
.service-card.has-video .service-icon { border-color: rgba(255,255,255,.28); color: var(--ink); background: rgba(255,255,255,.9); box-shadow: 0 10px 35px rgba(0,0,0,.16); backdrop-filter: blur(8px); }
.service-card.has-video p { color: rgba(255,255,255,.76); }
.service-card.has-video li { border-color: rgba(255,255,255,.34); background: rgba(17,17,15,.2); backdrop-filter: blur(8px); }
.service-card.has-video a { position: absolute; z-index: 3; border-color: rgba(255,255,255,.28); color: var(--white); }

.capabilities { color: var(--white); background: #0b0b0a; border-bottom: 1px solid rgba(255,255,255,.12); }
.capabilities-heading { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(3rem, 8vw, 8rem); align-items: end; margin-bottom: clamp(3.5rem, 6vw, 6rem); }
.capabilities-heading > p { max-width: 34rem; color: rgba(255,255,255,.58); font-size: 1rem; line-height: 1.75; }
.capabilities h2 em { color: var(--amber); }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
.capability-card { position: relative; display: flex; min-height: 34rem; flex-direction: column; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); padding: clamp(1.5rem, 2.6vw, 2.5rem); overflow: hidden; background: var(--ink); transition: background .35s ease, transform .35s var(--ease); }
.capability-card::after { position: absolute; right: -5rem; top: -5rem; width: 12rem; height: 12rem; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; box-shadow: 0 0 0 2rem rgba(255,255,255,.018), 0 0 0 4rem rgba(255,255,255,.012); transition: transform .6s var(--ease); }
.capability-card:hover { z-index: 2; background: #20201c; transform: translateY(-5px); }
.capability-card:hover::after { transform: scale(1.18); }
.capability-card-accent { color: var(--ink); background: var(--amber); }
.capability-card-accent::after { border-color: rgba(17,17,15,.12); box-shadow: 0 0 0 2rem rgba(17,17,15,.025), 0 0 0 4rem rgba(17,17,15,.02); }
.capability-card-accent:hover { background: var(--amber-soft); }
.capability-number { position: relative; z-index: 1; color: rgba(255,255,255,.42); font-size: .6rem; font-weight: 700; }
.capability-card-accent .capability-number { color: rgba(17,17,15,.52); }
.capability-card h3 { position: relative; z-index: 1; max-width: 17rem; margin-top: 4.2rem; font-size: clamp(1.55rem, 2.4vw, 2.25rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.capability-card > p { position: relative; z-index: 1; margin-top: 1.2rem; color: rgba(255,255,255,.6); font-size: .79rem; line-height: 1.75; }
.capability-card-accent > p { color: rgba(17,17,15,.7); }
.stack-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem .75rem; margin-top: auto; padding-top: 2.4rem; list-style: none; }
.stack-list li { display: flex; min-width: 0; flex-direction: column; gap: .55rem; align-items: center; text-align: center; }
.stack-list img, .stack-text b { width: 3rem; height: 3rem; object-fit: contain; }
.stack-list span { color: rgba(255,255,255,.7); font-size: .52rem; font-weight: 600; line-height: 1.2; }
.capability-card-accent .stack-list span { color: rgba(17,17,15,.78); }
.stack-text b { display: grid; place-items: center; border-radius: 50%; color: var(--white); background: rgba(109,109,109,.5); font-size: .78rem; }
.capability-card-accent .stack-text b { color: var(--ink); background: rgba(255,255,255,.58); }

.work { color: var(--white); background: var(--ink); }
.eyebrow-light { color: rgba(255,255,255,.7); }
.button-outline { border: 1px solid rgba(255,255,255,.3); color: var(--white); }
.button-outline:hover { color: var(--ink); background: var(--amber); }
.project-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem) 1.25rem; }
.project-large { grid-column: 1 / -1; }
.project-art { position: relative; display: grid; min-height: clamp(25rem, 47vw, 42rem); place-items: center; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.project:not(.project-large) .project-art { min-height: clamp(23rem, 38vw, 35rem); }
.project-art img { position: relative; z-index: 2; width: min(78%, 680px); max-height: 78%; object-fit: contain; filter: drop-shadow(0 25px 35px rgba(0,0,0,.2)); transition: transform .7s var(--ease); }
.project:hover .project-art img { transform: scale(1.055) rotate(-1deg); }
.project-art-amber { background: var(--amber); }
.project-art-ivory { background: #e9e2d5; }
.project-art-blue { background: var(--blue); }
.project-badge { position: absolute; z-index: 4; top: 1.5rem; left: 1.5rem; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; padding: .45rem .75rem; color: var(--white); background: rgba(17,17,15,.15); font-size: .58rem; font-weight: 700; text-transform: uppercase; backdrop-filter: blur(8px); }
.project-badge-dark { border-color: rgba(17,17,15,.25); color: var(--ink); }
.project-orbit { position: absolute; z-index: -1; border: 1px solid rgba(17,17,15,.25); border-radius: 50%; }
.orbit-one { width: 38rem; height: 38rem; }
.orbit-two { width: 58rem; height: 58rem; }
.project-meta { display: flex; justify-content: space-between; align-items: end; padding-top: 1.4rem; }
.project-meta h3 { font-size: clamp(1.45rem, 2.5vw, 2.5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.08; }
.project-meta p { margin-top: .7rem; color: rgba(255,255,255,.48); font-size: .68rem; }
.project-arrow { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; transition: color .3s, background .3s, transform .3s; }
.project:hover .project-arrow { color: var(--ink); background: var(--amber); transform: rotate(45deg); }

.impact { background: var(--amber); }
.impact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(4rem, 10vw, 10rem); align-items: start; }
.impact-copy > p { margin: 2rem 0; color: rgba(17,17,15,.67); }
.impact-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(17,17,15,.3); border-left: 1px solid rgba(17,17,15,.3); }
.impact-stats div { min-height: 12rem; border-right: 1px solid rgba(17,17,15,.3); border-bottom: 1px solid rgba(17,17,15,.3); padding: 1.5rem; }
.impact-stats strong { display: block; font-size: clamp(3rem, 5.8vw, 6rem); font-weight: 500; letter-spacing: -.075em; line-height: 1; }
.impact-stats span { display: block; max-width: 11rem; margin-top: 1.2rem; font-size: .66rem; font-weight: 600; line-height: 1.45; text-transform: uppercase; }

.industries { color: var(--white); background: var(--ink); }
.industries-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.industries-copy { position: sticky; top: 8rem; }
.industries-copy > p { max-width: 32rem; margin: 2rem 0 2.4rem; color: rgba(255,255,255,.6); font-size: 1rem; line-height: 1.75; }
.industries .button-light { color: var(--ink); }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.15); border-left: 1px solid rgba(255,255,255,.15); }
.industry-card { position: relative; display: flex; min-height: 12rem; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); padding: 1.3rem; transition: color .3s, background .3s, transform .35s var(--ease); }
.industry-card:hover { z-index: 2; color: var(--ink); background: var(--amber); transform: translateY(-4px); }
.industry-card img { width: 3.2rem; height: 3.2rem; object-fit: contain; filter: brightness(0) invert(1); transition: filter .3s, transform .35s var(--ease); }
.industry-card:hover img { filter: brightness(0); transform: scale(1.08) rotate(-3deg); }
.industry-card h3 { max-width: 10rem; font-size: .7rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.industry-card span { position: absolute; top: 1rem; right: 1rem; color: rgba(255,255,255,.35); font-size: .55rem; font-weight: 700; }
.industry-card:hover span { color: rgba(17,17,15,.5); }

.process { background: var(--paper); }
.process-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.process-grid::before { position: absolute; top: 4.35rem; right: 0; left: 0; height: 1px; content: ""; background: var(--line); }
.process-grid li { position: relative; min-height: 20rem; border-left: 1px solid var(--line); padding: 0 clamp(1.1rem, 2vw, 2rem); }
.process-grid li:last-child { border-right: 1px solid var(--line); }
.process-grid li > span { color: var(--muted); font-size: .6rem; font-weight: 700; }
.process-mark { position: relative; z-index: 2; display: grid; width: 4.2rem; height: 4.2rem; margin-top: 1.6rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-size: 1rem; transition: transform .4s var(--ease), color .3s, background .3s; }
.process-grid li:hover .process-mark { color: var(--white); background: var(--ink); transform: rotate(12deg) scale(1.08); }
.process-grid h3 { margin-top: 2.7rem; font-size: 1.55rem; font-weight: 600; letter-spacing: -.04em; }
.process-grid p { margin-top: .85rem; color: var(--muted); font-size: .8rem; line-height: 1.7; }

.people { overflow: hidden; background: var(--white); }
.people-grid { display: grid; grid-template-columns: 1.14fr .86fr; gap: clamp(4rem, 9vw, 9rem); align-items: center; }
.people-collage { position: relative; min-height: clamp(37rem, 57vw, 50rem); }
.photo { position: absolute; overflow: hidden; border: .55rem solid var(--white); box-shadow: 0 20px 50px rgba(17,17,15,.18); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.photo:hover img { transform: scale(1.08); }
.photo-main { inset: 5% 6% 9% 2%; transform: rotate(-3deg); }
.photo-main img { object-position: center; }
.photo-one { z-index: 2; top: 0; right: -6%; width: 31%; height: 31%; transform: rotate(7deg); animation: photoFloat 7s ease-in-out infinite; }
.photo-two { z-index: 3; right: -2%; bottom: 0; width: 28%; height: 31%; transform: rotate(-7deg); animation: photoFloatTwo 8s ease-in-out infinite; }
.photo-three { z-index: 3; bottom: -2%; left: -3%; width: 25%; height: 29%; transform: rotate(5deg); animation: photoFloat 9s ease-in-out infinite reverse; }
@keyframes photoFloat { 50% { translate: 0 -12px; rotate: 2deg; } }
@keyframes photoFloatTwo { 50% { translate: -8px 10px; rotate: 3deg; } }
.collage-note { position: absolute; z-index: 5; right: 3%; top: 42%; display: grid; width: 8.4rem; height: 8.4rem; place-items: center; border-radius: 50%; background: var(--amber); text-align: center; font-size: .7rem; font-weight: 700; line-height: 1.35; transform: rotate(8deg); }
.people-copy > p { margin: 2rem 0 2.5rem; }
.people blockquote { border-left: 3px solid var(--amber); padding-left: 1.4rem; font-family: Georgia, serif; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.55; }
.people cite { display: block; margin-top: 1rem; color: var(--muted); font-family: "Epilogue", sans-serif; font-size: .62rem; font-style: normal; font-weight: 600; text-transform: uppercase; }
.button-dark { margin-top: 2.2rem; color: var(--white); background: var(--ink); }
.button-dark:hover { color: var(--ink); background: var(--amber); }

.testimonials { background: var(--paper); }
.review-summary { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: center; justify-self: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; background: var(--white); }
.review-summary strong { grid-row: 1 / 3; font-size: 2.2rem; font-weight: 600; letter-spacing: -.06em; }
.review-summary span { color: var(--amber); font-size: .7rem; letter-spacing: .15em; }
.review-summary small { color: var(--muted); font-size: .58rem; font-weight: 600; text-transform: uppercase; }
.quote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.quote-card { display: flex; min-height: 25rem; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2.4rem); background: var(--white); transition: transform .4s var(--ease); }
.quote-card:hover { transform: translateY(-8px) rotate(-.5deg); }
.quote-card-accent { background: var(--amber); }
.stars { color: var(--amber); font-size: .72rem; letter-spacing: .2em; }
.quote-card-accent .stars { color: var(--ink); }
.quote-card blockquote { margin: auto 0; font-family: Georgia, serif; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.55; }
.quote-card figcaption span, .quote-card figcaption small { display: block; }
.quote-card figcaption span { font-size: .72rem; font-weight: 700; }
.quote-card figcaption small { margin-top: .25rem; color: var(--muted); font-size: .61rem; }

.faq { background: var(--white); }
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(4rem, 10vw, 10rem); }
.faq-intro > p { margin: 2rem 0; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; min-height: 6rem; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 2rem; font-size: clamp(.95rem, 1.3vw, 1.2rem); font-weight: 600; letter-spacing: -.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; }
.faq-list summary span::before, .faq-list summary span::after { position: absolute; top: 50%; left: 50%; width: .65rem; height: 1px; content: ""; background: var(--ink); transform: translate(-50%,-50%); transition: transform .3s; }
.faq-list summary span::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-list details[open] summary span { background: var(--amber); }
.faq-list details[open] summary span::after { transform: translate(-50%,-50%); }
.faq-list details p { max-width: 44rem; padding: 0 3rem 2rem 0; color: var(--muted); font-size: .83rem; line-height: 1.75; }

.contact { background: var(--amber); }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.contact-copy { position: sticky; top: 8rem; }
.contact-copy > p { max-width: 37rem; margin: 2rem 0; color: rgba(17,17,15,.68); font-size: 1rem; line-height: 1.75; }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; max-width: 42rem; border-top: 1px solid rgba(17,17,15,.24); border-left: 1px solid rgba(17,17,15,.24); }
.contact-details > * { min-height: 7.5rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(17,17,15,.24); border-bottom: 1px solid rgba(17,17,15,.24); padding: 1rem; }
.contact-details > :last-child { grid-column: 1 / -1; }
.contact-details small { color: rgba(17,17,15,.52); font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contact-details span { font-size: .78rem; font-weight: 600; line-height: 1.55; }
.contact-copy .button-dark { margin-top: 2rem; }
.contact-form { border: 1px solid rgba(17,17,15,.14); border-radius: calc(var(--radius) * 1.25); padding: clamp(1.3rem, 3.5vw, 3rem); background: var(--white); box-shadow: 0 24px 70px rgba(17,17,15,.14); }
.form-intro { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
.form-intro span { font-size: 1.1rem; font-weight: 700; letter-spacing: -.035em; }
.form-intro small { color: var(--muted); font-size: .57rem; font-weight: 600; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem 1rem; margin-top: 2rem; }
.contact-form label { display: flex; flex-direction: column; gap: .55rem; }
.contact-form label > span { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.form-wide { grid-column: 1 / -1; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: .85rem; padding: 1rem; outline: none; color: var(--ink); background: var(--paper); font: inherit; font-size: .78rem; transition: border-color .2s, box-shadow .2s, background .2s; }
.contact-form textarea { min-height: 9rem; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--amber); background: var(--white); box-shadow: 0 0 0 3px rgba(244,174,23,.18); }
.form-submit { display: flex; width: 100%; cursor: pointer; justify-content: space-between; align-items: center; margin-top: 1.3rem; border: 0; border-radius: 99px; padding: .78rem .82rem .78rem 1.35rem; color: var(--white); background: var(--ink); font-size: .75rem; font-weight: 700; transition: transform .3s var(--ease), color .3s, background .3s; }
.form-submit span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; color: var(--ink); background: var(--amber); transition: transform .3s var(--ease); }
.form-submit:hover { color: var(--ink); background: var(--amber); transform: translateY(-2px); }
.form-submit:hover span { color: var(--white); background: var(--ink); transform: rotate(45deg); }
.calculator-link { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: center; margin-top: 1rem; border: 1px solid var(--line); border-radius: 1rem; padding: .9rem 3.7rem .9rem 1rem; background: var(--paper); transition: border-color .25s, background .25s, transform .3s var(--ease); }
.calculator-link:hover { border-color: var(--amber); background: var(--white); transform: translateY(-2px); }
.calculator-link span { grid-column: 1; color: var(--muted); font-size: .55rem; font-weight: 600; text-transform: uppercase; }
.calculator-link strong { grid-column: 1; font-size: .72rem; }
.calculator-link b { position: absolute; right: .8rem; top: 50%; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; color: var(--white); background: var(--ink); font-size: .7rem; transform: translateY(-50%); transition: color .25s, background .25s, rotate .3s var(--ease); }
.calculator-link:hover b { color: var(--ink); background: var(--amber); rotate: 45deg; }
.form-status { min-height: 1.4rem; margin-top: .7rem; color: var(--muted); font-size: .65rem; text-align: center; }

/* Multi-page screens */
.subpage-page { background: var(--paper); }
.subpage-hero { position: relative; overflow: hidden; padding: clamp(5rem, 9vw, 9rem) 0 clamp(6rem, 10vw, 10rem); background: var(--paper); }
.subpage-hero::before { position: absolute; z-index: 0; inset: 0; content: ""; opacity: .13; background-image: radial-gradient(rgba(17,17,15,.75) .65px, transparent .65px); background-size: 14px 14px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.subpage-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(28rem, 1.08fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.subpage-hero-copy h1, .career-hero h1, .contact-page-main h1 { max-width: 900px; font-size: clamp(3.4rem, 6.9vw, 7.5rem); font-weight: 600; letter-spacing: -.075em; line-height: .9; }
.subpage-hero-copy > p:not(.eyebrow), .career-hero-copy > p:not(.eyebrow) { max-width: 43rem; margin-top: 2rem; color: #4f4d47; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.75; }
.subpage-hero-copy .hero-actions { margin-top: 2.5rem; }

.service-hero-art { position: relative; min-height: clamp(32rem, 48vw, 43rem); }
.service-art-card { position: absolute; display: grid; place-items: center; overflow: hidden; border: .5rem solid var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.service-art-card img { width: 78%; height: 78%; object-fit: contain; }
.art-card-one { inset: 7% 21% 17% 1%; background: var(--amber); transform: rotate(-4deg); }
.art-card-two { z-index: 2; top: 0; right: 0; width: 39%; height: 43%; background: var(--blue); transform: rotate(5deg); }
.art-card-three { z-index: 3; right: 2%; bottom: 0; width: 42%; height: 43%; background: #e9e2d5; transform: rotate(-4deg); }
.service-art-label { position: absolute; z-index: 5; left: 3%; bottom: 7%; border-radius: 99px; padding: .75rem 1rem; color: var(--white); background: var(--ink); font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.section-tight { padding: clamp(4.5rem, 7vw, 7rem) 0; }
.why-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.mini-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }
.mini-heading h2 { max-width: 44rem; font-size: clamp(2rem, 3.5vw, 3.6rem); font-weight: 500; letter-spacing: -.055em; line-height: 1; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.why-card { min-height: 16rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem; }
.why-card img { width: 3.2rem; height: 3.2rem; object-fit: contain; }
.why-card h3 { margin-top: 2.5rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; }
.why-card p { margin-top: .65rem; color: var(--muted); font-size: .73rem; line-height: 1.65; }

.simple-cta { background: var(--blue); }
.simple-cta::after { opacity: .8; }

.about-hero-collage { position: relative; min-height: clamp(34rem, 49vw, 44rem); }
.about-hero-collage figure { position: absolute; overflow: hidden; border: .5rem solid var(--white); box-shadow: var(--shadow); }
.about-hero-collage figure img { width: 100%; height: 100%; object-fit: cover; }
.about-hero-collage figure:first-child { inset: 8% 7% 8% 9%; transform: rotate(-3deg); }
.about-hero-collage figure:nth-child(2) { z-index: 2; top: 0; right: 0; width: 35%; height: 37%; transform: rotate(6deg); }
.about-hero-collage figure:nth-child(3) { z-index: 3; right: -1%; bottom: 0; width: 34%; height: 37%; transform: rotate(-5deg); }
.about-hero-collage > span { position: absolute; z-index: 5; left: 0; bottom: 10%; display: grid; width: 8rem; height: 8rem; place-items: center; border-radius: 50%; background: var(--amber); font-size: .62rem; font-weight: 700; line-height: 1.4; text-align: center; transform: rotate(8deg); }
.story { background: var(--white); }
.story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(4rem, 9vw, 9rem); align-items: start; }
.story-title h2, .office-copy h2, .culture-copy h2, .career-proof-intro h2, .review-conversation h2 { font-size: clamp(2.6rem, 5.4vw, 5.7rem); font-weight: 500; letter-spacing: -.065em; line-height: .96; }
.story-copy > p { max-width: 46rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.28rem); line-height: 1.8; }
.story-copy > p + p { margin-top: 1.4rem; }
.story-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.story-metrics div { min-height: 10rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem; }
.story-metrics strong { display: block; font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 500; letter-spacing: -.06em; }
.story-metrics span { display: block; max-width: 9rem; margin-top: 1rem; color: var(--muted); font-size: .56rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; }
.about-process { background: var(--paper); }
.about-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.about-process-grid article { min-height: 20rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem; }
.about-process-grid span, .value-list article > span, .benefit-grid article > span, .principle-grid article > span, .client-value-grid article > span { color: var(--muted); font-size: .57rem; font-weight: 700; }
.about-process-grid h3 { margin-top: 6rem; font-size: 1.45rem; letter-spacing: -.04em; }
.about-process-grid p { margin-top: .8rem; color: var(--muted); font-size: .75rem; line-height: 1.7; }
.values { color: var(--white); background: var(--ink); }
.values-heading { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
.values-heading h2 { font-size: clamp(2.8rem, 5.7vw, 6rem); font-weight: 500; letter-spacing: -.065em; line-height: .96; }
.value-list { border-top: 1px solid rgba(255,255,255,.18); }
.value-list article { display: grid; grid-template-columns: .2fr .7fr 1.1fr; gap: 2rem; align-items: center; min-height: 8rem; border-bottom: 1px solid rgba(255,255,255,.18); transition: color .3s, background .3s, padding .3s; }
.value-list article:hover { color: var(--ink); background: var(--amber); padding-inline: 1.2rem; }
.value-list article > span { color: rgba(255,255,255,.45); }
.value-list article:hover > span { color: rgba(17,17,15,.55); }
.value-list h3 { font-size: 1.2rem; letter-spacing: -.03em; }
.value-list p { color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.7; }
.value-list article:hover p { color: rgba(17,17,15,.7); }
.team-section { overflow: hidden; background: var(--white); }
.team-carousel { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.team-track { display: flex; width: max-content; will-change: transform; animation: teamScrollLeft 44s linear infinite; }
.team-group { display: flex; flex: 0 0 auto; gap: 1rem; padding-right: 1rem; }
.team-card { width: clamp(16rem, 21vw, 23.5rem); flex: 0 0 auto; }
.team-card > div { height: clamp(16rem, 24vw, 24rem); overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.team-card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .7s var(--ease); }
.team-card:hover img { transform: scale(1.04); }
.team-card h3 { margin-top: 1rem; font-size: 1rem; font-weight: 700; }
.team-card p { margin-top: .2rem; color: var(--muted); font-size: .65rem; }
@keyframes teamScrollLeft { to { transform: translate3d(-50%, 0, 0); } }
.team-cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 5rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.team-cta p { max-width: 35rem; font-size: 1.1rem; }
.team-cta .button { margin-top: 0; }
.office-section { background: var(--paper); }
.office-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(4rem, 9vw, 9rem); align-items: center; }
.office-map { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.office-map img { width: 100%; max-height: 37rem; object-fit: cover; }
.office-copy > p:not(.eyebrow) { margin: 2rem 0; color: var(--muted); line-height: 1.8; }

.work-page-hero { color: var(--white); background: var(--ink); }
.work-page-hero::before { opacity: .08; background-image: radial-gradient(rgba(255,255,255,.8) .65px, transparent .65px); }
.work-page-hero .subpage-hero-copy > p:not(.eyebrow) { color: rgba(255,255,255,.62); }
.work-page-hero .text-link { border-color: rgba(255,255,255,.45); }
.project-hero-media { position: relative; min-height: clamp(31rem, 46vw, 42rem); overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 48% 48% var(--radius) var(--radius); background: var(--blue); isolation: isolate; }
.project-hero-media .ambient-video { z-index: 0; opacity: .72; filter: contrast(1.05) brightness(.78); }
.project-hero-media .video-overlay { z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(17,17,15,.7)); }
.project-hero-media > span { position: absolute; z-index: 3; left: 2rem; bottom: 2rem; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.work-page-section { border-top: 1px solid rgba(255,255,255,.12); }
.work-page-grid { display: grid; gap: clamp(6rem, 12vw, 12rem); }
.work-case { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.work-case-reverse { grid-template-columns: .8fr 1.2fr; }
.work-case-reverse .work-case-art { order: 2; }
.work-case-art { position: relative; display: grid; min-height: clamp(28rem, 49vw, 44rem); place-items: center; overflow: hidden; border-radius: var(--radius); }
.work-case-art img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 25px 45px rgba(0,0,0,.22)); transition: transform .7s var(--ease); }
.work-case:hover .work-case-art img { transform: scale(1.05) rotate(-1deg); }
.work-case-art > span { position: absolute; top: 1.5rem; left: 1.5rem; border-radius: 99px; padding: .5rem .8rem; color: var(--white); background: rgba(17,17,15,.32); font-size: .58rem; font-weight: 700; backdrop-filter: blur(8px); }
.work-case-amber { background: var(--amber); }
.work-case-ivory { background: #e9e2d5; }
.work-case-blue { background: var(--blue); }
.work-case-cloud { background: #1d332e; }
.work-case-copy > p { color: var(--amber); font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.work-case-copy h2 { margin-top: 1.2rem; font-size: clamp(2.3rem, 4.2vw, 4.7rem); font-weight: 500; letter-spacing: -.06em; line-height: .98; }
.work-case-copy ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; list-style: none; }
.work-case-copy li { border: 1px solid rgba(255,255,255,.24); border-radius: 99px; padding: .45rem .7rem; color: rgba(255,255,255,.65); font-size: .57rem; }
.text-link-light { margin-top: 2.2rem; border-color: rgba(255,255,255,.38); }
.project-principles { background: var(--paper); }
.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.principle-grid article { min-height: 16rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.4rem; }
.principle-grid h3 { margin-top: 4rem; font-size: 1.05rem; letter-spacing: -.03em; }
.principle-grid p { margin-top: .7rem; color: var(--muted); font-size: .72rem; line-height: 1.7; }

.career-hero { padding-bottom: 0; }
.career-hero .page-shell { position: relative; z-index: 1; }
.career-hero-copy { position: relative; z-index: 3; max-width: 75rem; }
.career-hero-copy > p:not(.eyebrow) { max-width: 55rem; }
.career-hero-copy .button { margin-top: 2.5rem; }
.career-hero-copy h1 em { color: transparent; background: linear-gradient(100deg, var(--amber) 10%, #ffd876 40%, var(--amber) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: careerWordGlow 6s linear infinite; }
.career-hero-orbit { position: absolute; z-index: 1; top: 2rem; right: 0; width: clamp(22rem, 32vw, 34rem); aspect-ratio: 1; border: 1px solid rgba(17,17,15,.1); border-radius: 50%; background: radial-gradient(circle, rgba(244,174,23,.13), transparent 66%); pointer-events: none; }
.career-hero-orbit::before, .career-hero-orbit::after { position: absolute; border: 1px solid rgba(17,17,15,.1); border-radius: 50%; content: ""; }
.career-hero-orbit::before { inset: 12%; }
.career-hero-orbit::after { inset: 25%; }
.career-orbit-ring { position: absolute; inset: 5%; border: 1px dashed rgba(17,17,15,.24); border-radius: 50%; animation: careerOrbitSpin 26s linear infinite; }
.career-orbit-ring::before { position: absolute; top: 50%; left: -.45rem; width: .9rem; height: .9rem; border-radius: 50%; content: ""; background: var(--amber); box-shadow: 0 0 0 .45rem rgba(244,174,23,.14); }
.career-orbit-core { position: absolute; z-index: 2; inset: 34%; display: grid; place-content: center; border-radius: 50%; color: var(--white); background: var(--ink); text-align: center; box-shadow: 0 20px 50px rgba(17,17,15,.18); animation: careerCorePulse 5s ease-in-out infinite; }
.career-orbit-core small { color: var(--amber); font-size: .55rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.career-orbit-core strong { margin-top: .2rem; font-family: Georgia, serif; font-size: clamp(1rem, 1.6vw, 1.45rem); font-weight: 400; }
.career-hero-orbit > span { position: absolute; z-index: 3; border: 1px solid rgba(17,17,15,.13); border-radius: 99px; padding: .65rem .9rem; background: rgba(255,253,248,.82); box-shadow: 0 12px 28px rgba(17,17,15,.09); backdrop-filter: blur(12px); font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; animation: careerTagFloat 5s ease-in-out infinite; }
.career-hero-orbit > span:nth-of-type(1) { top: 12%; left: 4%; }
.career-hero-orbit > span:nth-of-type(2) { top: 21%; right: -2%; animation-delay: -1.7s; }
.career-hero-orbit > span:nth-of-type(3) { right: 9%; bottom: 12%; animation-delay: -3.3s; }
.career-hero-image { position: relative; height: min(65vw, 48rem); margin-top: 5rem; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.career-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.04); transform: scale(1.035); animation: careerPhotoDrift 16s ease-in-out infinite alternate; }
.career-hero-image::before { position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -35%; width: 20%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transform: skewX(-18deg); animation: careerPhotoShine 11s ease-in-out infinite; pointer-events: none; }
.career-hero-image::after { position: absolute; z-index: 1; inset: 0; content: ""; background: linear-gradient(180deg, transparent 48%, rgba(17,17,15,.74)); }
.career-hero-image figcaption { position: absolute; z-index: 2; right: 2rem; bottom: 2rem; left: 2rem; display: flex; justify-content: space-between; align-items: end; color: var(--white); }
.career-hero-image figcaption span { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.career-hero-image figcaption strong { font-family: Georgia, serif; font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 400; }
.career-ticker { overflow: hidden; border-block: 1px solid rgba(17,17,15,.2); color: var(--ink); background: var(--amber); }
.career-ticker-track { display: flex; width: max-content; will-change: transform; animation: careerTicker 28s linear infinite; }
.career-ticker-group { display: flex; flex: 0 0 auto; gap: 1.6rem; align-items: center; padding: 1.25rem 1.6rem 1.2rem 0; white-space: nowrap; }
.career-ticker-group span { font-size: clamp(.72rem, 1.1vw, .95rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.career-ticker-group i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink); }
@keyframes careerWordGlow { to { background-position: -220% 0; } }
@keyframes careerOrbitSpin { to { transform: rotate(360deg); } }
@keyframes careerCorePulse { 50% { box-shadow: 0 24px 70px rgba(244,174,23,.28); transform: scale(1.045); } }
@keyframes careerTagFloat { 50% { translate: 0 -10px; } }
@keyframes careerPhotoDrift { to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
@keyframes careerPhotoShine { 0%, 55% { translate: 0 0; opacity: 0; } 68% { opacity: 1; } 88%, 100% { translate: 780% 0; opacity: 0; } }
@keyframes careerTicker { to { transform: translate3d(-50%, 0, 0); } }
.culture-section { background: var(--white); }
.culture-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(4rem, 9vw, 9rem); align-items: center; }
.culture-copy > p:not(.eyebrow) { margin: 2rem 0; color: var(--muted); line-height: 1.8; }
.culture-collage { position: relative; min-height: clamp(30rem, 50vw, 44rem); }
.culture-collage img { position: absolute; width: 54%; height: 72%; object-fit: cover; border: .5rem solid var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.culture-collage img:first-child { top: 0; left: 1%; transform: rotate(-4deg); animation: cultureFloatOne 7s ease-in-out infinite; }
.culture-collage img:nth-child(2) { right: 0; bottom: 0; transform: rotate(5deg); animation: cultureFloatTwo 8s ease-in-out infinite; }
.culture-collage > span { position: absolute; z-index: 3; left: 38%; top: 42%; display: grid; width: 8rem; height: 8rem; place-items: center; border-radius: 50%; background: var(--amber); box-shadow: 0 18px 45px rgba(244,174,23,.28); font-size: .62rem; font-weight: 700; line-height: 1.4; text-align: center; animation: cultureBadgePulse 5s ease-in-out infinite; }
@keyframes cultureFloatOne { 50% { translate: 0 -14px; } }
@keyframes cultureFloatTwo { 50% { translate: 0 14px; } }
@keyframes cultureBadgePulse { 50% { transform: rotate(5deg) scale(1.06); } }
.benefits-section { color: var(--white); background: var(--ink); }
.benefits-section .section-heading > p { color: rgba(255,255,255,.56); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.benefit-grid article { position: relative; min-height: 19rem; overflow: hidden; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); padding: 1.5rem; transition: opacity .8s var(--ease), color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
.benefit-grid article::after { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; content: "↗"; color: rgba(255,255,255,.46); transform: rotate(-12deg); transition: color .35s, background .35s, transform .45s var(--ease); }
.benefit-grid article:hover { z-index: 2; color: var(--ink); background: var(--amber); transform: translateY(-8px); }
.benefit-grid article:hover::after { color: var(--white); background: var(--ink); transform: rotate(45deg); }
.benefit-grid article > span { color: rgba(255,255,255,.42); }
.benefit-grid h3 { margin-top: 5rem; font-size: 1.2rem; }
.benefit-grid p { margin-top: .8rem; color: rgba(255,255,255,.57); font-size: .74rem; line-height: 1.7; }
.benefit-grid article:hover > span, .benefit-grid article:hover p { color: rgba(17,17,15,.66); }
.opportunities { background: var(--paper); }
.role-list { border-top: 1px solid var(--line); }
.role-card.reveal { position: relative; display: grid; grid-template-columns: .3fr .7fr 1fr auto; gap: 2rem; align-items: center; min-height: 7rem; overflow: hidden; border-bottom: 1px solid var(--line); transition: opacity .8s var(--ease), padding .35s var(--ease), background .35s, transform .35s var(--ease); }
.role-card::before { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ""; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.role-card.reveal:hover { padding-inline: 1.2rem; background: var(--amber); transform: translateX(.45rem); }
.role-card:hover::before { background: var(--ink); transform: scaleX(1); }
.role-card > span { color: var(--muted); font-size: .57rem; font-weight: 700; text-transform: uppercase; }
.role-card h3 { font-size: 1.15rem; letter-spacing: -.03em; }
.role-card p { color: var(--muted); font-size: .72rem; }
.role-card b { font-size: .65rem; transition: transform .35s var(--ease); }
.role-card:hover b { transform: translate(4px, -4px); }
.career-note { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 3rem; border-radius: var(--radius); padding: 1.5rem; background: var(--white); }
.career-note strong { font-size: 1rem; }
.career-note p { margin-top: .25rem; color: var(--muted); font-size: .72rem; }
.career-note .button { margin-top: 0; }
.career-proof { background: var(--amber); }
.career-proof .page-shell { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(4rem, 9vw, 9rem); align-items: end; }
.career-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(17,17,15,.28); border-left: 1px solid rgba(17,17,15,.28); }
.career-proof-grid div { min-height: 13rem; border-right: 1px solid rgba(17,17,15,.28); border-bottom: 1px solid rgba(17,17,15,.28); padding: 1.2rem; transition: opacity .8s var(--ease), color .35s, background .35s, transform .35s var(--ease); }
.career-proof-grid div:hover { z-index: 2; color: var(--white); background: var(--ink); transform: translateY(-6px); }
.career-proof-grid strong { display: block; font-size: clamp(2.5rem, 4.5vw, 4.8rem); font-weight: 500; letter-spacing: -.07em; }
.career-proof-grid span { display: block; max-width: 8rem; margin-top: 1rem; font-size: .58rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; }

.reviews-hero { background: var(--paper); }
.reviews-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.rating-orbit { position: relative; display: grid; min-height: clamp(28rem, 42vw, 39rem); place-items: center; }
.rating-orbit::before, .rating-orbit::after, .rating-orbit > i { position: absolute; border: 1px solid rgba(17,17,15,.18); border-radius: 50%; content: ""; }
.rating-orbit::before { width: 70%; aspect-ratio: 1; }
.rating-orbit::after { width: 94%; aspect-ratio: 1; }
.rating-orbit > i:nth-of-type(1) { top: 11%; right: 14%; width: 1.2rem; height: 1.2rem; background: var(--blue); }
.rating-orbit > i:nth-of-type(2) { bottom: 13%; left: 10%; width: 2.2rem; height: 2.2rem; background: var(--amber); }
.rating-orbit > i:nth-of-type(3) { right: 4%; bottom: 28%; width: .7rem; height: .7rem; background: var(--ink); }
.rating-orbit > div { position: relative; z-index: 2; display: flex; width: 52%; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); background: var(--ink); box-shadow: var(--shadow); }
.rating-orbit strong { font-size: clamp(4rem, 7vw, 7rem); font-weight: 500; letter-spacing: -.08em; line-height: 1; }
.rating-orbit span { margin-top: .8rem; color: var(--amber); letter-spacing: .15em; }
.rating-orbit small { margin-top: .5rem; color: rgba(255,255,255,.52); font-size: .52rem; font-weight: 700; text-transform: uppercase; }
.review-stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.review-stats .page-shell { display: grid; grid-template-columns: repeat(4, 1fr); }
.review-stats .page-shell > div { min-height: 9rem; border-left: 1px solid var(--line); padding: 1.3rem; }
.review-stats .page-shell > div:last-child { border-right: 1px solid var(--line); }
.review-stats strong { display: block; font-size: 2rem; font-weight: 600; letter-spacing: -.06em; }
.review-stats span { display: block; margin-top: .6rem; color: var(--muted); font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.reviews-page { background: var(--paper); }
.reviews-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.review-story { display: flex; min-height: 31rem; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.8rem); background: var(--white); }
.review-story-amber { background: var(--amber); }
.review-story-blue { color: var(--white); background: var(--blue); }
.review-story-top { display: flex; justify-content: space-between; align-items: center; }
.review-story-top small { color: var(--muted); font-size: .55rem; font-weight: 700; text-transform: uppercase; }
.review-story-blue .review-story-top small { color: rgba(255,255,255,.55); }
.review-story blockquote { max-width: 39rem; margin: auto 0; font-family: Georgia, serif; font-size: clamp(1.45rem, 2.3vw, 2.3rem); line-height: 1.45; }
.review-story figcaption strong, .review-story figcaption span { display: block; }
.review-story figcaption strong { font-size: .78rem; }
.review-story figcaption span { margin-top: .2rem; color: var(--muted); font-size: .62rem; }
.review-story-blue figcaption span { color: rgba(255,255,255,.62); }
.client-values { color: var(--white); background: var(--ink); }
.client-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.client-value-grid article { min-height: 19rem; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); padding: 1.5rem; }
.client-value-grid article > span { color: rgba(255,255,255,.42); }
.client-value-grid h3 { margin-top: 5rem; font-size: 1.2rem; }
.client-value-grid p { margin-top: .8rem; color: rgba(255,255,255,.58); font-size: .76rem; line-height: 1.7; }
.review-conversation { background: var(--amber); }
.review-conversation-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 8vw, 8rem); align-items: end; }
.review-conversation-grid > div:first-child > p:not(.eyebrow) { max-width: 42rem; margin-top: 2rem; color: rgba(17,17,15,.68); line-height: 1.8; }
.review-conversation-actions { display: flex; flex-direction: column; align-items: stretch; }

.contact-page-main { padding-top: clamp(5rem, 9vw, 9rem); }
.contact-page-main .contact-copy { top: 7rem; }
.contact-options { background: var(--paper); }
.contact-option-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.contact-option { display: flex; min-height: 22rem; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem; transition: color .3s, background .3s, transform .3s; }
.contact-option:hover { z-index: 2; color: var(--ink); background: var(--amber); transform: translateY(-5px); }
.contact-option > span { color: var(--muted); font-size: .57rem; font-weight: 700; }
.contact-option h3 { margin-top: 5rem; font-size: 1.35rem; letter-spacing: -.04em; }
.contact-option p { margin-top: .8rem; color: var(--muted); font-size: .75rem; line-height: 1.7; }
.contact-option b { margin-top: auto; font-size: .65rem; }

.cta { position: relative; overflow: hidden; padding: clamp(7rem, 13vw, 12rem) 0; color: var(--white); background: var(--blue); isolation: isolate; }
.cta::after { position: absolute; z-index: 2; right: -12rem; bottom: -24rem; width: 50rem; height: 50rem; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ""; box-shadow: 0 0 0 5rem rgba(255,255,255,.025), 0 0 0 10rem rgba(255,255,255,.02); pointer-events: none; }
.cta .cta-video { z-index: 0; opacity: .38; filter: saturate(.9) contrast(1.08) brightness(.64); }
.cta.is-video-playing .cta-video, .cta:hover .cta-video { opacity: .7; filter: saturate(1.02) contrast(1.08) brightness(.7); transform: scale(1.07); }
.cta-video-overlay { z-index: 1; background: linear-gradient(90deg, rgba(17,17,15,.83) 0%, rgba(25,75,214,.52) 58%, rgba(17,17,15,.32) 100%); }
.cta-marquee { position: absolute; z-index: 2; top: 8%; width: 100%; overflow: hidden; color: rgba(255,255,255,.08); font-size: clamp(5rem, 11vw, 11rem); font-weight: 700; letter-spacing: -.06em; line-height: .8; white-space: nowrap; }
.cta-marquee span { display: block; animation: ctaTicker 36s linear infinite; }
@keyframes ctaTicker { to { transform: translateX(-50%); } }
.cta-inner { position: relative; z-index: 3; }
.cta .eyebrow::before { background: var(--amber); }
.cta h2 { max-width: 70rem; font-size: clamp(3.3rem, 7.5vw, 8rem); }
.cta h2 em { color: var(--amber-soft); }
.cta-actions { display: flex; gap: 2rem; align-items: center; margin-top: 3rem; }
.button-light { color: var(--ink); background: var(--white); }
.button-light:hover { background: var(--amber); }
.cta-actions > a:last-child { border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: .25rem; font-size: .78rem; font-weight: 600; }

.site-footer { padding: 5rem 0 1.5rem; color: var(--white); background: var(--ink); }
.footer-top { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 3rem; }
.footer-top img { width: 11rem; height: auto; }
.footer-top p { color: rgba(255,255,255,.55); font-family: Georgia, serif; font-size: 1.3rem; line-height: 1.35; text-align: right; }
.footer-grid { display: grid; grid-template-columns: 1.25fr .65fr .65fr 1.25fr; gap: 2rem; padding: 3.5rem 0 5rem; }
.footer-grid > div { display: flex; flex-direction: column; align-items: start; gap: .55rem; }
.footer-grid small { margin-bottom: .7rem; color: rgba(255,255,255,.4); font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-grid p, .footer-grid a { color: rgba(255,255,255,.7); font-size: .73rem; line-height: 1.65; }
.footer-grid a:hover { color: var(--amber); }
.footer-cta { border-left: 1px solid rgba(255,255,255,.14); padding-left: 2rem; }
.footer-cta a { display: flex; width: 100%; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.28); padding: .5rem 0 1rem; color: var(--white); font-size: .95rem; }
.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem; color: rgba(255,255,255,.38); font-size: .57rem; text-transform: uppercase; }
.footer-bottom div { display: flex; gap: 1.5rem; }
.footer-bottom a:hover { color: var(--white); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.services-grid .reveal:nth-child(2), .quote-grid .reveal:nth-child(2), .process-grid .reveal:nth-child(2) { transition-delay: .08s; }
.services-grid .reveal:nth-child(3), .quote-grid .reveal:nth-child(3), .process-grid .reveal:nth-child(3) { transition-delay: .16s; }
.process-grid .reveal:nth-child(4) { transition-delay: .24s; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 54rem; }
  .hero-visual { width: min(100%, 58rem); min-height: 42rem; margin-inline: auto; }
  .visual-frame { inset: 1rem 1rem 0; border-radius: 20rem 20rem 1.5rem 1.5rem; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card:last-child { grid-column: 1 / -1; min-height: 28rem; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .industries-layout { grid-template-columns: 1fr; }
  .industries-copy { position: static; max-width: 55rem; }
  .people-grid { grid-template-columns: 1fr; }
  .people-collage { width: min(100%, 52rem); }
  .people-copy { max-width: 45rem; }
  .quote-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-copy { position: static; }
  .subpage-hero-grid, .reviews-hero-grid { grid-template-columns: 1fr; }
  .subpage-hero-copy { max-width: 58rem; }
  .service-hero-art, .about-hero-collage, .rating-orbit { width: min(100%, 54rem); margin-inline: auto; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .story-grid, .office-grid, .culture-grid, .career-proof .page-shell, .review-conversation-grid { grid-template-columns: 1fr; }
  .story-title, .office-copy, .culture-copy, .career-proof-intro { max-width: 48rem; }
  .career-hero-orbit { display: none; }
  .work-case, .work-case-reverse { grid-template-columns: 1fr; }
  .work-case-reverse .work-case-art { order: 0; }
  .work-case-copy { max-width: 48rem; }
  .culture-collage { width: min(100%, 54rem); }
}

@media (max-width: 960px) {
  .page-shell, .nav-shell { width: min(100% - 2rem, 1380px); }
  .desktop-nav, .nav-actions { display: none; }
  .site-header, .site-header.is-scrolled { padding: .55rem 0; }
  .nav-shell, .site-header.is-scrolled .nav-shell { height: 4.25rem; grid-template-columns: 1fr auto; gap: .5rem; border-radius: 1.15rem; padding: .4rem .44rem .4rem 1rem; }
  .brand { width: 6.4rem; }
  .menu-toggle { display: grid; width: 3rem; height: 3rem; cursor: pointer; place-content: center; gap: .35rem; border: 0; border-radius: .85rem; color: var(--amber); background: var(--ink); box-shadow: 0 9px 20px rgba(17,17,15,.16); }
  .menu-toggle span { width: 1.05rem; height: 1px; background: var(--amber); transition: background .3s, transform .3s; }
  .menu-toggle[aria-expanded="true"] { background: var(--amber); }
  .menu-toggle[aria-expanded="true"] span { background: var(--ink); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(.18rem) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-.18rem) rotate(-45deg); }
  .mobile-nav { position: fixed; z-index: -1; inset: 5.25rem 1rem 1rem; display: flex; visibility: hidden; flex-direction: column; gap: .3rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: 1.5rem; opacity: 0; background: rgba(255,253,248,.96); box-shadow: 0 25px 70px rgba(17,17,15,.18); backdrop-filter: blur(20px); transform: translateY(-1rem) scale(.98); transform-origin: top; transition: opacity .3s, transform .3s, visibility .3s; }
  .mobile-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .mobile-nav a { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: .9rem .55rem; font-size: clamp(1.35rem, 6.4vw, 2.2rem); font-weight: 500; letter-spacing: -.04em; }
  .mobile-nav a::after { content: "↗"; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: var(--amber); font-size: .75rem; }
  .mobile-nav .mobile-email { margin-top: .45rem; border: 0; border-radius: .85rem; padding: .8rem .9rem; color: var(--white); background: var(--ink); font-size: clamp(.78rem, 3.4vw, 1rem); letter-spacing: 0; }
  .hero { padding-top: 3rem; }
  .hero h1 { font-size: clamp(3.3rem, 15vw, 6rem); }
  .hero-visual { min-height: 34rem; }
  .card-status { right: 0; }
  .orbit-mark { right: 0; width: 5.5rem; height: 5.5rem; }
  .orbit-mark::before { width: 4.3rem; height: 4.3rem; }
  .logo-strip { display: block; overflow: hidden; padding-block: 1rem; }
  .logo-strip p { margin-bottom: 1.3rem; }
  .tech-marquee-window { margin-inline: -1.5rem; }
  .tech-marquee-group { gap: 3rem; padding-right: 3rem; }
  .tech-item { min-width: 8.5rem; }
  .section-heading { grid-template-columns: 1fr; gap: 2rem; }
  .capabilities-heading { grid-template-columns: 1fr; gap: 2rem; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card, .service-card:last-child { grid-column: auto; min-height: 30rem; }
  .service-card p { min-height: 5rem; }
  .project-list { grid-template-columns: 1fr; }
  .project-large { grid-column: auto; }
  .project-art, .project:not(.project-large) .project-art { min-height: 30rem; }
  .process-grid { grid-template-columns: 1fr 1fr; row-gap: 3rem; }
  .process-grid::before { display: none; }
  .process-grid li { min-height: 17rem; }
  .process-grid li:nth-child(3) { border-top: 1px solid var(--line); padding-top: 2rem; }
  .process-grid li:nth-child(4) { border-top: 1px solid var(--line); padding-top: 2rem; }
  .industry-grid { grid-template-columns: 1fr 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote-card { min-height: 21rem; }
  .faq-grid { grid-template-columns: 1fr; }
  .cta-actions { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-cta { border-left: 0; padding-left: 0; }
  .about-process-grid, .benefit-grid, .principle-grid, .review-stats .page-shell { grid-template-columns: 1fr 1fr; }
  .values-heading { grid-template-columns: 1fr; }
  .value-list article { grid-template-columns: .2fr .8fr; padding-block: 1.5rem; }
  .value-list article p { grid-column: 2; }
  .role-card { grid-template-columns: .35fr 1fr auto; gap: 1rem; padding-block: 1.2rem; }
  .role-card p { grid-column: 2; }
  .career-proof-grid { width: min(100%, 48rem); }
  .reviews-page-grid { grid-template-columns: 1fr; }
  .client-value-grid, .contact-option-grid { grid-template-columns: 1fr; }
  .client-value-grid article, .contact-option { min-height: 16rem; }
  .contact-option h3, .client-value-grid h3 { margin-top: 3rem; }
}

@media (max-width: 560px) {
  .section { padding: 5.5rem 0; }
  .announcement-track { gap: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-proof { gap: .8rem; }
  .hero-proof div + div { padding-left: .8rem; }
  .hero-proof strong { font-size: 1.05rem; }
  .hero-proof span { font-size: .5rem; }
  .hero-visual { min-height: 28rem; margin-top: 1rem; }
  .visual-frame { inset: 1rem 0 0; border-radius: 12rem 12rem 1rem 1rem; }
  .card-sprint { left: -.25rem; top: 7%; transform: scale(.85) rotate(-5deg); }
  .card-status { bottom: 1rem; transform: scale(.82); transform-origin: bottom right; }
  .orbit-mark { top: 1%; width: 4.6rem; height: 4.6rem; }
  .orbit-mark::before { width: 3.6rem; height: 3.6rem; }
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: .6rem; }
  .hero-line { width: 100%; flex: none; }
  .section-heading h2, .capabilities-heading h2, .impact h2, .industries h2, .people h2, .faq h2, .contact h2, .cta h2 { font-size: clamp(2.5rem, 12.5vw, 4rem); }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 31rem; }
  .industry-grid { grid-template-columns: 1fr; }
  .industry-card { min-height: 10rem; }
  .project-art, .project:not(.project-large) .project-art { min-height: 22rem; }
  .project-meta { align-items: start; }
  .project-arrow { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
  .impact-stats div { min-height: 9rem; padding: 1rem; }
  .impact-stats span { font-size: .53rem; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid li, .process-grid li:nth-child(3), .process-grid li:nth-child(4) { min-height: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); padding: 1.5rem 1.2rem 2rem; }
  .process-mark { margin-top: 1rem; }
  .process-grid h3 { margin-top: 1.5rem; }
  .people-collage { min-height: 32rem; }
  .photo-main { inset: 4% 2% 10%; }
  .photo-one { right: -4%; width: 36%; height: 32%; }
  .photo-two { width: 34%; }
  .photo-three { width: 31%; }
  .collage-note { right: 0; width: 6.5rem; height: 6.5rem; font-size: .6rem; }
  .contact-details, .form-grid { grid-template-columns: 1fr; }
  .contact-details > :last-child, .form-wide { grid-column: auto; }
  .form-intro { align-items: flex-start; flex-direction: column; gap: .4rem; }
  .footer-top { align-items: flex-start; flex-direction: column; gap: 2rem; }
  .footer-top p { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; padding-bottom: 3rem; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .subpage-hero { padding-top: 3.5rem; }
  .subpage-hero-copy h1, .career-hero h1, .contact-page-main h1 { font-size: clamp(3rem, 14vw, 4.9rem); }
  .subpage-hero-copy .hero-actions { align-items: flex-start; flex-direction: column; }
  .service-hero-art, .about-hero-collage, .rating-orbit { min-height: 27rem; }
  .why-grid, .about-process-grid, .benefit-grid, .principle-grid, .review-stats .page-shell { grid-template-columns: 1fr; }
  .why-card, .about-process-grid article, .benefit-grid article, .principle-grid article { min-height: 14rem; }
  .about-process-grid h3, .benefit-grid h3 { margin-top: 3rem; }
  .story-metrics { grid-template-columns: 1fr; }
  .team-card { width: min(76vw, 19rem); }
  .team-card > div { height: 17rem; }
  .team-cta, .career-note { align-items: flex-start; flex-direction: column; }
  .value-list article { grid-template-columns: auto 1fr; gap: 1rem; }
  .office-map img { min-height: 20rem; }
  .work-case-art { min-height: 24rem; }
  .career-hero-image { height: 31rem; margin-top: 3rem; }
  .career-hero-image figcaption { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .culture-collage { min-height: 29rem; }
  .culture-collage > span { left: 32%; width: 6.5rem; height: 6.5rem; }
  .role-card { grid-template-columns: 1fr auto; }
  .role-card > span, .role-card p { grid-column: 1; }
  .career-proof-grid { grid-template-columns: 1fr; }
  .career-proof-grid div { min-height: 9rem; }
  .rating-orbit > div { width: 58%; }
  .review-story { min-height: 26rem; }
  .review-conversation-actions .calculator-link { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .ambient-video { display: none; }
  .team-carousel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .team-track { animation: none; }
}

/* ============================================================
   2026-08 additions. Appended so source order does the
   overriding — nothing above this line is modified.
   ============================================================ */

/* Work-page hero video: a square box, not the arch. */
.project-hero-media {
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: var(--radius);
}

/* Accent words on amber grounds were amber-on-amber — measured 1.00:1, the
   word simply vanished (contact hero "build.", impact "Big ambition."). */
.contact h1 em, .contact h2 em,
.impact h1 em, .impact h2 em,
.quote-card-accent em,
.service-card-featured em,
.capability-card-accent em,
.project-art-amber em { color: #6b4400; }

@media (max-width: 960px) {
  /* .role-card.reveal (0,2,0) outranks the plain .role-card overrides above,
     so the four-column desktop grid survived on phones while the children
     were still being pushed into column 1 (.3fr) — one word per line. */
  .role-card.reveal { grid-template-columns: .35fr 1fr auto; gap: 1rem; padding-block: 1.2rem; }
  /* Eyebrow and heading sat side by side, squeezing both. */
  .mini-heading { display: grid; grid-template-columns: 1fr; gap: .9rem; align-items: start; }
}

@media (max-width: 560px) {
  .role-card.reveal { grid-template-columns: 1fr auto; }
  /* NB: do not hide <br> in headings here. The markup is written
     "Tell us what<br>you want to" with no surrounding whitespace, so
     display:none joins the words ("whatyou"). The authored breaks sit on
     phrase boundaries and read fine at phone width. */
  /* Footer links measured 14–19px tall; short of a comfortable thumb target. */
  .footer-grid a { padding-block: .4rem; }
  .footer-bottom div { gap: 1.2rem; }
  .footer-bottom a { display: inline-block; padding-block: .55rem; }
}

/* Section rhythm. Every band sat at clamp(6rem,10vw,10rem) top AND bottom, so
   two adjacent sections stacked into a 270-300px empty strip — measured on all
   7 pages. Tightened so the gap reads as a break, not a hole. */
.section { padding: clamp(3.5rem, 5.5vw, 5.5rem) 0; }
.section-tight { padding: clamp(2.75rem, 4.25vw, 4.25rem) 0; }
.cta { padding: clamp(4rem, 7vw, 7rem) 0; }
.section-heading { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.capabilities-heading { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.mini-heading { margin-bottom: 2rem; }

/* Scroll motion layer (js/scroll-fx.js). */
.sfx-progress { position: fixed; z-index: 999; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.sfx-progress span { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.reveal.sfx-from-left  { transform: translate(-34px, 22px); }
.reveal.sfx-from-right { transform: translate( 34px, 22px); }
.reveal.sfx-from-left.is-visible,
.reveal.sfx-from-right.is-visible { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  .sfx-progress { display: none; }
  .reveal.sfx-from-left, .reveal.sfx-from-right { transform: none; }
}


/* ============================================================
   Client feedback, 2026-08-11: "make the image blocks small,
   it covers more space and causes negative spacing".
   Appended so source order does the overriding — nothing above
   this line is modified.
   ============================================================ */

/* THE ACTUAL CAUSE. The panels only ever had a `min-height`, so their real
   height came from the artwork inside them — and the artwork is sized by WIDTH
   (`width: 78%`). On an ~800px-wide panel, 78% of the width of a SQUARE render
   is ~620px tall, far past the min-height, so the panel stretched to fit it and
   every min-height reduction was silently overridden. */
.project-art, .work-case-art {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;
  height: auto;
}
.project-large .project-art { aspect-ratio: 16 / 9; }

/* Positioned AND sized. An absolutely-positioned <img> with `inset` but auto
   width/height falls back to its intrinsic size — a 1254px render inside a
   438px panel. Explicit percentages resolve against the panel box, which
   aspect-ratio has already made definite, so the artwork is genuinely bounded. */
.project-art img, .work-case-art img {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
/* The corner tag has to stay above the now-absolute artwork. */
.work-case-art > span, .project-art .project-badge { z-index: 3; }

/* Gaps and bands were scaled for the old, much taller cards. */
.project-list { gap: clamp(1.25rem, 2.2vw, 2.25rem) 1.25rem; }
.work-case { gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1fr 1fr; }
.work-page-grid { gap: clamp(1.75rem, 3.5vw, 3.5rem); }
.work-page-section, .project-principles { padding: clamp(2.5rem, 4vw, 4rem) 0; }

@media (max-width: 960px) {
  .work-case { grid-template-columns: 1fr; }
  .project-art, .work-case-art, .project-large .project-art { aspect-ratio: 16 / 11; }
}

/* ---------------------------------------------------------------------------
   Why-Brewapps cards — hover motion
   The four icons are inline SVG (`.why-icon`) so their internals can animate.
   Every animation is driven from `.why-card:hover`, so nothing moves until the
   pointer is on the box, and all of it is disabled under reduced-motion.
--------------------------------------------------------------------------- */

.why-card { position: relative; transition: background .4s var(--ease), transform .4s var(--ease); }
.why-card::after { position: absolute; top: -1px; right: -1px; left: -1px; height: 2px; background: var(--amber); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.why-card:hover { background: #faf7ef; }
.why-card:hover::after { transform: scaleX(1); }
.why-card h3 { transition: transform .4s var(--ease); }
.why-card:hover h3 { transform: translateX(3px); }

.why-icon { display: block; width: 3.2rem; height: 3.2rem; overflow: visible; color: var(--ink); }
.why-icon * { transform-box: fill-box; transform-origin: center; }

/* --- 1. Faster delivery : the truck pulls away, speed lines streak ---------- */
.why-card:hover .i-truck      { animation: truck-go 1.6s var(--ease) infinite; }
.why-card:hover .i-wheel      { animation: wheel-spin .55s linear infinite; }
.why-card:hover .i-speed line { animation: speed-streak 1.6s ease-in-out infinite; }
.why-card:hover .i-speed line:nth-child(2) { animation-delay: .12s; }
.why-card:hover .i-speed line:nth-child(3) { animation-delay: .24s; }
.why-card:hover .i-hand-clock { animation: clock-sweep 1.6s linear infinite; }

@keyframes truck-go {
  0%   { transform: translateX(0) translateY(0); }
  18%  { transform: translateX(-1.5px) translateY(0); }
  60%  { transform: translateX(4px) translateY(-.4px); }
  100% { transform: translateX(0) translateY(0); }
}
@keyframes wheel-spin { to { transform: rotate(360deg); } }
@keyframes speed-streak {
  0%, 15% { opacity: 0; transform: translateX(5px) scaleX(.3); }
  45%     { opacity: 1; transform: translateX(0) scaleX(1); }
  85%,100%{ opacity: 0; transform: translateX(-5px) scaleX(.4); }
}
@keyframes clock-sweep { to { transform: rotate(360deg); } }

/* --- 2. Strict NDA terms : the pen travels and the signature writes itself -- */
.why-card:hover .i-pen { animation: pen-write 2s var(--ease) infinite; }
.why-card:hover .i-sign { animation: sign-draw 2s var(--ease) infinite; }
.i-sign { stroke-dasharray: 26; stroke-dashoffset: 0; }

@keyframes pen-write {
  0%       { transform: translate(-11px, 1.5px) rotate(-4deg); }
  12%      { transform: translate(-11px, 0) rotate(0deg); }
  62%      { transform: translate(0, 0) rotate(0deg); }
  78%,100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes sign-draw {
  0%, 8%   { stroke-dashoffset: 26; }
  62%      { stroke-dashoffset: 0; }
  86%      { stroke-dashoffset: 0; opacity: 1; }
  96%,100% { stroke-dashoffset: 0; opacity: 0; }
}

/* --- 3. Lean investment : the coin drops into the palm --------------------- */
.why-card:hover .i-coin       { animation: coin-drop 1.9s var(--ease) infinite; }
.why-card:hover .i-palm       { animation: palm-catch 1.9s var(--ease) infinite; }
.why-card:hover .i-spark line { animation: spark-rise 1.9s ease-out infinite; }
.why-card:hover .i-spark line:nth-child(2) { animation-delay: .08s; }
.why-card:hover .i-spark line:nth-child(3) { animation-delay: .16s; }

@keyframes coin-drop {
  0%      { transform: translateY(-7px) scale(.82); opacity: 0; }
  22%     { transform: translateY(-7px) scale(.82); opacity: 1; }
  52%     { transform: translateY(1.5px) scale(1); opacity: 1; }
  64%     { transform: translateY(-1px) scale(1); }
  76%,100%{ transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes palm-catch {
  0%, 40%  { transform: translateY(0); }
  56%      { transform: translateY(1.6px); }
  72%,100% { transform: translateY(0); }
}
@keyframes spark-rise {
  0%, 30%  { opacity: 0; transform: translateY(3px) scaleY(.4); }
  55%      { opacity: 1; transform: translateY(0) scaleY(1); }
  85%,100% { opacity: 0; transform: translateY(-3px) scaleY(.5); }
}

/* --- 4. Agile delivery : the loop runs and the check lands ----------------- */
.why-card:hover .i-gear  { animation: gear-turn 2.6s linear infinite; }
.why-card:hover .i-node  { animation: node-pulse 2.1s ease-in-out infinite; }
.why-card:hover .i-node:nth-of-type(2) { animation-delay: .22s; }
.why-card:hover .i-node:nth-of-type(3) { animation-delay: .44s; }
.why-card:hover .i-check { animation: check-draw 2.1s var(--ease) infinite; }
.i-check { stroke-dasharray: 12; stroke-dashoffset: 0; }

@keyframes gear-turn { to { transform: rotate(360deg); } }
@keyframes node-pulse {
  0%, 55%, 100% { opacity: .45; }
  22%           { opacity: 1; }
}
@keyframes check-draw {
  0%, 55%  { stroke-dashoffset: 12; }
  78%      { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .why-card:hover .i-truck, .why-card:hover .i-wheel, .why-card:hover .i-speed line,
  .why-card:hover .i-hand-clock, .why-card:hover .i-pen, .why-card:hover .i-sign,
  .why-card:hover .i-coin, .why-card:hover .i-palm, .why-card:hover .i-spark line,
  .why-card:hover .i-gear, .why-card:hover .i-node, .why-card:hover .i-check {
    animation: none;
  }
  .why-card, .why-card::after, .why-card h3 { transition: none; }
}

/* ---------------------------------------------------------------------------
   Site-wide icon motion, batch 2.
   Service-card icons, process-step icons, and the tech/stack logo chips.
   Everything keys off the parent's :hover and is disabled under reduced-motion.
--------------------------------------------------------------------------- */

.svc-icon, .proc-icon { display: block; overflow: visible; color: currentColor; }
.svc-icon { width: 2rem; height: 2rem; }
.proc-icon { width: 1.85rem; height: 1.85rem; }
.svc-icon *, .proc-icon * { transform-box: fill-box; transform-origin: center; }

/* the badge itself now carries an animated icon, so drop the old tilt and
   let the icon supply the motion */
.process-grid li:hover .process-mark { transform: scale(1.08); }

/* --- Mobile apps : screen scrolls, tap ripples --------------------------- */
.service-card:hover .m-line   { animation: m-scroll 2s var(--ease) infinite; }
.service-card:hover .m-line:nth-child(2) { animation-delay: .1s; }
.service-card:hover .m-line:nth-child(3) { animation-delay: .2s; }
.service-card:hover .m-ripple { animation: m-tap 2s ease-out infinite; }

@keyframes m-scroll {
  0%, 12%  { transform: translateY(0); opacity: 1; }
  38%      { transform: translateY(-4px); opacity: 0; }
  39%      { transform: translateY(5px); opacity: 0; }
  62%,100% { transform: translateY(0); opacity: 1; }
}
@keyframes m-tap {
  0%, 55%  { transform: scale(1); opacity: 1; }
  75%      { transform: scale(1.55); opacity: .25; }
  90%,100% { transform: scale(1); opacity: 1; }
}

/* --- Product design : the curve draws, handles pop ---------------------- */
.d-curve { stroke-dasharray: 34; stroke-dashoffset: 0; }
.service-card:hover .d-curve { animation: d-draw 2.2s var(--ease) infinite; }
.service-card:hover .d-node  { animation: d-pop 2.2s var(--ease) infinite; }
.service-card:hover .d-node:nth-of-type(2) { animation-delay: .5s; }

@keyframes d-draw {
  0%, 8%   { stroke-dashoffset: 34; }
  58%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; opacity: 1; }
  97%,100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes d-pop {
  0%, 20%  { transform: scale(1); }
  32%      { transform: scale(1.45); }
  46%,100% { transform: scale(1); }
}

/* --- Web & cloud : cloud drifts, upload arrow cycles -------------------- */
.service-card:hover .c-cloud { animation: c-drift 3s ease-in-out infinite; }
.service-card:hover .c-lift  { animation: c-up 1.8s var(--ease) infinite; }

@keyframes c-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(1.2px); }
}
@keyframes c-up {
  0%, 10%  { transform: translateY(3px); opacity: 0; }
  35%      { transform: translateY(0); opacity: 1; }
  70%      { transform: translateY(-2px); opacity: 1; }
  90%,100% { transform: translateY(-5px); opacity: 0; }
}

/* --- Discover : the lens sweeps ---------------------------------------- */
.process-grid li:hover .p-lens { animation: p-sweep 2.2s var(--ease) infinite; }
.process-grid li:hover .p-find line { animation: p-reveal 2.2s ease-out infinite; }
.process-grid li:hover .p-find line:nth-child(2) { animation-delay: .12s; }
.process-grid li:hover .p-find line:nth-child(3) { animation-delay: .24s; }

@keyframes p-sweep {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%      { transform: translate(-2.5px, 1px) scale(1.06); }
  65%      { transform: translate(2px, -1px) scale(1.06); }
}
@keyframes p-reveal {
  0%, 25%  { opacity: 0; transform: scaleX(.4); }
  50%      { opacity: 1; transform: scaleX(1); }
  85%,100% { opacity: 0; transform: scaleX(.5); }
}

/* --- Design : the nib travels, the stroke follows ----------------------- */
.p-stroke { stroke-dasharray: 22; stroke-dashoffset: 0; }
.process-grid li:hover .p-stroke { animation: p-write 2.1s var(--ease) infinite; }
.process-grid li:hover .p-nib    { animation: p-travel 2.1s var(--ease) infinite; }

@keyframes p-write {
  0%, 10%  { stroke-dashoffset: 22; }
  62%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; opacity: 1; }
  97%,100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes p-travel {
  0%, 10%  { transform: translate(-10px, 2px); }
  62%      { transform: translate(0, 0); }
  100%     { transform: translate(0, 0); }
}

/* --- Build : brackets breathe, caret blinks ---------------------------- */
.process-grid li:hover .b-left  { animation: b-open-l 1.8s var(--ease) infinite; }
.process-grid li:hover .b-right { animation: b-open-r 1.8s var(--ease) infinite; }
.process-grid li:hover .b-caret { animation: b-blink 1.8s steps(1, end) infinite; }

@keyframes b-open-l {
  0%, 100% { transform: translateX(0); }
  45%      { transform: translateX(-2px); }
}
@keyframes b-open-r {
  0%, 100% { transform: translateX(0); }
  45%      { transform: translateX(2px); }
}
@keyframes b-blink {
  0%, 45%  { opacity: 1; }
  46%, 72% { opacity: 0; }
  73%,100% { opacity: 1; }
}

/* --- Grow : bars rise, arrow shoots up --------------------------------- */
.g-bar { transform-origin: bottom; }
.process-grid li:hover .g-bar { animation: g-rise 2.1s var(--ease) infinite; }
.process-grid li:hover .g-bar:nth-child(2) { animation-delay: .12s; }
.process-grid li:hover .g-bar:nth-child(3) { animation-delay: .24s; }
.process-grid li:hover .g-arrow { animation: g-shoot 2.1s var(--ease) infinite; }

@keyframes g-rise {
  0%, 8%   { transform: scaleY(.15); }
  45%      { transform: scaleY(1); }
  100%     { transform: scaleY(1); }
}
@keyframes g-shoot {
  0%, 30%  { transform: translate(-2px, 2px); opacity: 0; }
  55%      { transform: translate(0, 0); opacity: 1; }
  85%      { transform: translate(0, 0); opacity: 1; }
  96%,100% { transform: translate(2px, -2px); opacity: 0; }
}

/* --- Tech + stack logo chips : lift, and hold the marquee still --------- */
.tech-item img, .stack-list img {
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.tech-item:hover img { transform: translateY(-4px) scale(1.14) rotate(-4deg); }
.stack-list li:hover img { transform: translateY(-3px) scale(1.12); }
.tech-item b, .stack-list span { transition: color .3s var(--ease); }
.tech-item:hover b { color: var(--ink); }
.tech-marquee-window:hover .tech-marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .service-card:hover .m-line, .service-card:hover .m-ripple,
  .service-card:hover .d-curve, .service-card:hover .d-node,
  .service-card:hover .c-cloud, .service-card:hover .c-lift,
  .process-grid li:hover .p-lens, .process-grid li:hover .p-find line,
  .process-grid li:hover .p-stroke, .process-grid li:hover .p-nib,
  .process-grid li:hover .b-left, .process-grid li:hover .b-right,
  .process-grid li:hover .b-caret,
  .process-grid li:hover .g-bar, .process-grid li:hover .g-arrow {
    animation: none;
  }
  .tech-item img, .stack-list img, .tech-item b, .stack-list span { transition: none; }
}

/* ---------------------------------------------------------------------------
   Footer polish.
   Three problems being fixed:
     1. ~80px of dead padding under the link columns, so the footer trailed off
        into nothing before the bottom bar.
     2. The "Start here" rule ran the full column height while its link was only
        a third of that — a long orphaned line hanging into the void.
     3. Nothing in the footer responded to the pointer, unlike the rest of the
        site.
--------------------------------------------------------------------------- */

.site-footer { padding: 4.5rem 0 1.5rem; }

/* --- masthead row -------------------------------------------------------
   These rules are appended after the site's own mobile media queries, so any
   layout property here must be scoped to the width it is meant for — an
   unconditional rule would silently beat the ≤960px / ≤560px blocks above. */
.footer-top { padding-bottom: 2.5rem; }
@media (min-width: 561px) { .footer-top { align-items: center; } }
.footer-top p { color: rgba(255,255,255,.62); font-size: 1.45rem; }
.footer-top a { display: inline-block; transition: transform .45s var(--ease); }
.footer-top a:hover { transform: translateY(-3px); }

/* --- link columns ------------------------------------------------------- */
.footer-grid {
  gap: 2.5rem 3rem;
  align-items: start;              /* stops every column stretching to the tallest */
  padding: 3rem 0 2.75rem;         /* was 3.5rem 0 5rem — that 5rem was the void */
}
/* the rebalanced four-column layout is desktop only; below 960px the site's
   own rules take it to two columns and then to one at 560px */
@media (min-width: 961px) {
  .footer-grid { grid-template-columns: 1.05fr .8fr .8fr 1.15fr; }
}

/* links: amber, a small step right, and a rule that wipes in under the text */
.footer-grid > div:not(.footer-cta) a { position: relative; transition: color .3s var(--ease), transform .3s var(--ease); }
.footer-grid > div:not(.footer-cta) a::after {
  position: absolute; bottom: .12rem; left: 0; width: 100%; height: 1px;
  background: currentColor; content: "";
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.footer-grid > div:not(.footer-cta) a:hover { color: var(--amber); transform: translateX(3px); }
.footer-grid > div:not(.footer-cta) a:hover::after { transform: scaleX(1); }

/* --- "Start here" call to action ---------------------------------------- */
.footer-cta { align-self: start; }          /* rule now ends with the content */
.footer-cta a {
  position: relative;
  align-items: baseline;
  padding: .6rem 0 1rem;
  border-bottom-color: rgba(255,255,255,.22);
  font-size: 1.05rem;
  font-weight: 600;
  transition: color .3s var(--ease);
}
.footer-cta a::after {
  position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px;
  background: var(--amber); content: "";
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.footer-cta a span { transition: transform .4s var(--ease); }
.footer-cta a:hover { color: var(--amber); }
.footer-cta a:hover::after { transform: scaleX(1); }
.footer-cta a:hover span { transform: translate(4px, -4px); }

/* --- bottom bar --------------------------------------------------------- */
.footer-bottom a { position: relative; transition: color .3s var(--ease); }
.footer-bottom a::after {
  position: absolute; bottom: -.15rem; left: 0; width: 100%; height: 1px;
  background: currentColor; content: "";
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.footer-bottom a:hover::after { transform: scaleX(1); }

@media (max-width: 560px) {
  /* re-assert the site's single column, which sits earlier in the file */
  .footer-grid { grid-template-columns: 1fr; padding-bottom: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-top a,
  .footer-grid > div:not(.footer-cta) a, .footer-grid > div:not(.footer-cta) a::after,
  .footer-cta a, .footer-cta a::after, .footer-cta a span,
  .footer-bottom a, .footer-bottom a::after { transition: none; }
}


/* ===========================================================================
   Footer redesign.
   Three problems with the previous layout:
     1. The masthead split logo hard-left and tagline hard-right, leaving a
        ~1000px void down the middle.
     2. "Visit" occupied a 500px column for three short address lines while
        Explore/Connect were cramped.
     3. The main call to action sat in a column like a fourth link list, so
        the most important thing in the footer read as the least important.

   Fix: promote the CTA to a full-width band across the top of the grid, then
   let the three link columns share the width evenly beneath it. Markup is
   untouched — this is a re-placement of the existing boxes.
=========================================================================== */
@media (min-width: 961px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top: 0;
  }

  /* the call to action becomes the headline band.
     grid-row: 1 matters — it is the 4th child in the DOM, so without it the
     band auto-places *below* the three link columns instead of above them. */
  .footer-cta {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3.2rem;
    padding: 2.4rem 0;
    border-top: 1px solid rgba(255,255,255,.14);
    border-bottom: 1px solid rgba(255,255,255,.14);
    border-left: 0;
    padding-left: 0;
  }
  .footer-cta small { margin: 0; flex: 0 0 auto; }
  .footer-cta a {
    width: 100%; flex: 1 1 auto;
    justify-content: space-between;   /* keeps the arrow pinned to the far right */
    border-bottom: 0;
    padding: 0;
    font-size: clamp(1.5rem, 3.2vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -.04em;
  }
  .footer-cta a::after { display: none; }
  .footer-cta a span { font-size: 1.1rem; }
  .footer-cta a:hover span { transform: translate(6px, -6px); }

  /* the three link columns, evenly weighted */
  .footer-grid > div:not(.footer-cta) { grid-row: 2; padding-right: 2rem; }

  /* masthead: give the tagline enough presence to hold its side */
  .footer-top p { max-width: 22rem; font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.3; }
}

/* below the breakpoint the CTA simply returns to the flow, above the columns */
@media (max-width: 960px) {
  .footer-cta { order: -1; border-left: 0; padding-left: 0; padding-bottom: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   Scroll motion — headline word reveals, eyebrow draw, counting stats,
   staggered grids and artwork wipes.

   The display type is this site's strongest asset, so it carries the motion:
   every h1/h2 is split into words that rise out from behind a mask as the
   section enters the viewport. Everything else is timed to support that.
   All of it is off under prefers-reduced-motion.
--------------------------------------------------------------------------- */

:root { --sm-ease: cubic-bezier(.16, 1, .3, 1); }

/* --- 1. headline words rise from behind a mask -------------------------- */
.rt-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* the mask would otherwise clip descenders (p, g, y) */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.rt-i {
  display: inline-block;
  opacity: 0;
  transform: translateY(108%) rotate(3deg);
  transform-origin: left bottom;
  transition: transform .95s var(--sm-ease), opacity .6s ease;
}
.rt-on .rt-i { opacity: 1; transform: translateY(0) rotate(0); }

/* a heading carries its own motion, so its wrapper only fades */
.rt-host { transform: none !important; transition: opacity .5s ease !important; }

/* --- 2. eyebrow: the amber dash draws, then the label slides in --------- */
.sm-eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--sm-ease); }
.sm-eyebrow > .sm-label { display: inline-block; opacity: 0; transform: translateX(-8px); transition: opacity .6s ease .18s, transform .6s var(--sm-ease) .18s; }
.sm-eyebrow.rt-on::before { transform: scaleX(1); }
.sm-eyebrow.rt-on > .sm-label { opacity: 1; transform: none; }

/* --- 3. stats: the number counts up, the rule under it draws ------------ */
.hero-proof div { position: relative; }
.hero-proof div + div::before {
  position: absolute; top: 0; left: -1px; width: 1px; height: 100%;
  background: var(--amber); content: "";
  transform: scaleY(0); transform-origin: top;
  transition: transform .8s var(--sm-ease);
}
.hero-proof.rt-on div + div::before { transform: scaleY(1); }
.sm-count { font-variant-numeric: tabular-nums; }

/* --- 4. grids: children arrive one after another ------------------------ */
.sm-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s var(--sm-ease); }
.sm-stagger.rt-on > * { opacity: 1; transform: none; }

/* --- 5. artwork wipes open instead of just fading ----------------------- */
.sm-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--sm-ease); }
.sm-wipe.rt-on { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .rt-i, .sm-eyebrow::before, .sm-eyebrow > .sm-label,
  .hero-proof div + div::before, .sm-stagger > *, .sm-wipe {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* --- 6. scroll-linked word fill -----------------------------------------
   Lead paragraphs start dimmed and light up word by word as the block
   crosses the viewport — and dim again if you scroll back up. Opacity only,
   so it inherits whatever colour the section already uses (works on the
   light sections and the dark ones without touching the palette).
------------------------------------------------------------------------ */
.sf-w { opacity: .22; transition: opacity .45s var(--sm-ease); }
.sf-w.is-lit { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sf-w { opacity: 1 !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Scroll sections shipped into the site: pinned steps, stacking work cards,
   and a horizontal gallery. Classes are `bx-` prefixed so nothing collides
   with the existing stylesheet.
--------------------------------------------------------------------------- */

/* ===== 1. pinned process steps (Services) ================================ */
.bx-pin { position: relative; height: 440vh; }
.bx-pin-inner {
  position: sticky; top: 0; display: grid; grid-template-columns: 1fr 1.02fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center; height: 100vh;
}
.bx-steps { list-style: none; margin: 0; padding: 0; }
.bx-step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding: 1.1rem 0; border-top: 1px solid var(--line);
  opacity: .34; transition: opacity .5s var(--sm-ease);
}
.bx-step:last-of-type { border-bottom: 1px solid var(--line); }
.bx-step.is-active { opacity: 1; }
.bx-step .process-mark { width: 3.1rem; height: 3.1rem; margin-top: 0; }
.bx-step .proc-icon { width: 1.5rem; height: 1.5rem; }
.bx-step h3 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 600; letter-spacing: -.04em; }
.bx-step p { margin: .35rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.bx-step b { display: block; margin-bottom: .3rem; font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.bx-step::after {
  grid-column: 1 / -1; height: 2px; width: 0; margin-top: .85rem;
  background: var(--amber); content: ""; transition: width .65s var(--sm-ease);
}
.bx-step.is-active::after { width: 100%; }

/* The renders carry their own flat background colour, so the panel takes that
   same colour per step — otherwise the artwork reads as a box inside a box. */
.bx-stage {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); background: var(--paper);
}
.bx-pane {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.04);
  transition: opacity .6s var(--sm-ease), transform .9s var(--sm-ease);
}
.bx-pane.is-active { opacity: 1; transform: none; }
.bx-pane img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bx-pane span {
  position: absolute; bottom: 1.4rem; left: 1.6rem;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  opacity: .72;
}
.bx-pane-dark span { color: #11110f; }
.bx-pane-light span { color: #fdfbf6; }

/* ===== 2. stacking work cards (home) ===================================== */
.bx-stack { display: block; }
.bx-stack-card {
  position: sticky; top: 15vh;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center; min-height: 60vh; margin-bottom: 2.5rem;
  padding: clamp(1.8rem, 3.6vw, 3.2rem);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 -14px 44px rgba(17,17,15,.16);
  transform-origin: center top; will-change: transform;
}
.bx-stack-card b { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.bx-stack-card h3 { margin: .7rem 0 0; font-size: clamp(1.7rem, 3.2vw, 2.9rem); font-weight: 600; letter-spacing: -.05em; }
.bx-stack-card p { margin: .8rem 0 0; font-size: .82rem; line-height: 1.7; opacity: .78; }
.bx-stack-card .bx-go { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1.6rem; font-size: .74rem; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: .25rem; }
.bx-stack-card .bx-go span { transition: transform .35s var(--sm-ease); }
.bx-stack-card:hover .bx-go span { transform: translate(3px, -3px); }
.bx-stack-art { display: grid; place-items: center; }
.bx-stack-art img { width: 90%; max-height: 320px; object-fit: contain; }

/* ===== 3. horizontal gallery (Work) ====================================== */
.bx-h { position: relative; height: 340vh; background: var(--ink); color: var(--white); }
.bx-h-inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.bx-h-head { padding: 0 0 2rem; }
.bx-h-head p { color: rgba(255,255,255,.55); font-size: .8rem; margin: .5rem 0 0; }
.bx-track { display: flex; gap: 1.6rem; will-change: transform; }
.bx-card {
  flex: 0 0 auto;
  /* deliberately large — the smaller cards read as cramped while travelling */
  width: min(88vw, 620px); aspect-ratio: 5 / 4;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.9rem; border-radius: var(--radius); overflow: hidden;
}
.bx-card img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
/* The titles sat straight on the artwork — white type over the light renders
   was unreadable. A bottom scrim keeps the image clean at the top and gives
   the text something to sit on. */
.bx-card::after {
  position: absolute; inset: 0; z-index: 1; content: "";
  background: linear-gradient(180deg,
    rgba(17,17,15,0)    38%,
    rgba(17,17,15,.42) 66%,
    rgba(17,17,15,.80) 88%,
    rgba(17,17,15,.90) 100%);
}
.bx-card span { position: relative; z-index: 2; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.bx-card h3 { position: relative; z-index: 2; margin: .35rem 0 0; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.04em; text-shadow: 0 2px 18px rgba(17,17,15,.5); }

@media (max-width: 960px) {
  /* Keep the pin on phones. Unpinning it made pinProgress() return 0 forever,
     so the active step never advanced and the artwork was stuck on step one —
     the section simply did nothing. Single column, shorter travel. */
  .bx-pin { height: 340vh; }
  .bx-pin-inner {
    position: sticky; top: 0; height: 100vh;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.25rem;
    padding: 0;
  }
  .bx-steps { order: 2; }
  .bx-stage { order: 1; aspect-ratio: 16 / 10; }
  .bx-step { padding: .75rem 0; opacity: .32; }
  .bx-step.is-active { opacity: 1; }
  .bx-step::after { width: 0; margin-top: .5rem; }
  .bx-step.is-active::after { width: 100%; }
  .bx-step .process-mark { width: 2.5rem; height: 2.5rem; }
  .bx-step .proc-icon { width: 1.2rem; height: 1.2rem; }
  .bx-step h3 { font-size: 1.25rem; }
  .bx-step p { font-size: .76rem; }
  .bx-card { width: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
  .bx-pin, .bx-h { height: auto; }
  .bx-pin-inner, .bx-h-inner { position: static; height: auto; overflow: visible; }
  .bx-step { opacity: 1; }
  .bx-pane { position: relative; opacity: 1; transform: none; }
  .bx-stage { aspect-ratio: auto; }
  .bx-stack-card { position: static; }
  .bx-track { flex-wrap: wrap; transform: none !important; }
}

/* ===== card grids that had no hover =======================================
   .principle-grid (Work), .about-process-grid (About) and .client-value-grid
   were the only number-card grids with no pointer feedback. Matching the
   amber fill the site already uses on .benefit-grid / .value-list rather
   than inventing a new treatment.
========================================================================== */
.principle-grid article,
.about-process-grid article,
.client-value-grid article {
  position: relative;
  transition: color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.principle-grid article h3,
.about-process-grid article h3,
.client-value-grid article h3 { transition: transform .4s var(--ease); }

.principle-grid article:hover,
.about-process-grid article:hover,
.client-value-grid article:hover {
  z-index: 2; color: var(--ink); background: var(--amber); transform: translateY(-6px);
}
.principle-grid article:hover > span,
.about-process-grid article:hover > span,
.client-value-grid article:hover > span { color: rgba(17,17,15,.58); }
.principle-grid article:hover p,
.about-process-grid article:hover p,
.client-value-grid article:hover p { color: rgba(17,17,15,.72); }
.principle-grid article:hover h3,
.about-process-grid article:hover h3,
.client-value-grid article:hover h3 { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .principle-grid article, .about-process-grid article, .client-value-grid article,
  .principle-grid article h3, .about-process-grid article h3, .client-value-grid article h3 {
    transition: none;
  }
  .principle-grid article:hover,
  .about-process-grid article:hover,
  .client-value-grid article:hover { transform: none; }
}

/* ===== testimonial cards: one colour for all ==============================
   The wall mixed white / amber / blue. Neutralising the two variants onto the
   base card. The blue variant also set light text and light captions, so those
   have to come back to ink or the copy would be white-on-white.
========================================================================== */
.review-story-amber,
.review-story-blue { color: var(--ink); background: var(--white); }
.review-story-blue .review-story-top small,
.review-story-blue figcaption span { color: var(--muted); }

/* the quote itself uses the scroll-linked word fill */
.review-story blockquote .sf-w,
.quote-card blockquote .sf-w { opacity: .2; }
.review-story blockquote .sf-w.is-lit,
.quote-card blockquote .sf-w.is-lit { opacity: 1; }

/* ===== the testimonial wall travels sideways ==============================
   Same driver as the Work gallery, on a light section. The grid is flipped to
   a flex track and each card gets a fixed width so it has something to travel.
========================================================================== */
.bx-h-light { background: var(--paper); color: var(--ink); }
.bx-h-light .bx-h-inner { justify-content: center; }
.bx-h-light .section-heading { margin-bottom: 2.2rem; }

.reviews-page-grid.bx-track {
  display: flex; grid-template-columns: none; gap: 1.6rem; align-items: stretch;
}
.reviews-page-grid.bx-track .review-story {
  flex: 0 0 auto; width: min(88vw, 620px); min-height: 26rem;
}

@media (max-width: 960px) {
  .reviews-page-grid.bx-track .review-story { width: 84vw; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-page-grid.bx-track { flex-wrap: wrap; }
  .reviews-page-grid.bx-track .review-story { width: 100%; }
}

/* The track stopped with the last card still on the right of the screen, so it
   never entered the fill band and its quote stayed grey. This trailing spacer
   gives the track enough extra travel for the final card to reach the left. */
.reviews-page-grid.bx-track::after {
  content: ""; flex: 0 0 auto; width: min(40vw, 420px);
}
@media (prefers-reduced-motion: reduce) {
  .reviews-page-grid.bx-track::after { display: none; }
}

/* ===========================================================================
   Mobile / tablet behaviour for the scroll sections.

   Two things break below the breakpoint:
     · the stacking cards keep `position: sticky` while their min-height
       collapses to 0, so all three pin at the same offset and pile up
     · scroll-jacked horizontal travel is hostile on touch

   So: cards return to normal flow, and the horizontal rows become natively
   swipeable with scroll-snap, which is what a phone user expects anyway.
=========================================================================== */
@media (max-width: 860px) {
  /* Keep the pin-and-stack on phones too — it is the whole point of the
     section. The earlier attempt set position:static with min-height:0, which
     both flattened the effect AND made the cards pile at one offset. A real
     min-height is what makes sticky stacking behave. */
  .bx-stack-card {
    position: sticky;
    top: 11vh;
    min-height: 64vh;
    grid-template-columns: 1fr;
    align-content: center;
    margin-bottom: 1.25rem;
    padding: 1.6rem 1.4rem;
  }
  /* the artwork is the best part of these cards — show it, don't hide it */
  .bx-stack-art { display: grid; margin-top: 1rem; }
  .bx-stack-art img { width: auto; max-width: 78%; max-height: 30vh; }
  .bx-stack-card h3 { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .bx-stack-card p { font-size: .82rem; }
  .bx-stack-card .bx-go { margin-top: 1rem; }

  /* keep the scroll-driven sideways travel on phones, just shorter */
  .bx-h { height: 200vh; }
  .bx-h-inner { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .reviews-page-grid.bx-track::after { width: min(30vw, 200px); }

}

/* ===========================================================================
   Mobile menu: make it actually tappable.

   The base rule parks the panel at `z-index: -1` with `pointer-events: none`,
   and the `.is-open` rule only restores visibility/opacity/transform — it
   never puts those two back. Result: the menu appears, sits behind the page,
   and every tap lands on the content underneath. elementFromPoint over a menu
   item returned `.hero-copy`, not the link.
=========================================================================== */
.mobile-nav.is-open {
  /* visibility is the one that actually blocks taps — a hidden element is not
     hit-testable, so every tap fell through to the hero underneath. Forced,
     because the open state was still losing to the base rule at runtime. */
  visibility: visible !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
  z-index: 60;
  pointer-events: auto;
}
.mobile-nav.is-open a,
.mobile-nav.is-open .mobile-email {
  pointer-events: auto;
}
/* the toggle has to stay above the open panel so it can be closed again */
.menu-toggle { position: relative; z-index: 70; }

/* ===========================================================================
   LEGAL PAGES — privacy policy and terms
   Long-form reading rather than marketing: a contents list beside the text so
   the page is navigable, a comfortable measure, and larger type.
   =========================================================================== */
/* Enough to clear the overlaying header and no more — .subpage-hero's own
   padding is sized for a hero with a photo beside it, which left a large empty
   band above the seal here. */
.legal-hero { padding: clamp(5.5rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem); }
.legal-hero-in { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.legal-hero-in h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.045em; line-height: 1; }
.legal-updated { margin: 0; color: var(--muted); font-size: .9rem; }

/* --- the seal ------------------------------------------------------------ */
.legal-seal { width: clamp(3.6rem, 7vw, 4.8rem); height: auto; color: var(--amber-ink, #8f5d04); }
/* The ring turns slowly; the shield eases in; the tick draws itself once. */
.seal-ring { transform-origin: 50% 50%; animation: sealSpin 26s linear infinite; }
.seal-shield { opacity: 0; animation: sealIn .8s var(--ease) .15s forwards; }
.seal-tick { stroke-dasharray: 22; stroke-dashoffset: 22; animation: sealDraw .7s var(--ease) .75s forwards; }

@keyframes sealSpin { to { transform: rotate(360deg); } }
@keyframes sealIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes sealDraw { to { stroke-dashoffset: 0; } }

/* --- the document -------------------------------------------------------- */
.legal-body { padding-top: 0; }
.legal-doc { max-width: none; }

/* Heading left, body right — the document fills the page instead of sitting in
   a narrow centred column, and the body still keeps a readable line length. */
.legal-clause {
  display: grid; gap: clamp(1rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  align-items: start;
  scroll-margin-top: 7.5rem;
}
.legal-clause + .legal-clause { margin-top: clamp(2.6rem, 4.5vw, 4rem); padding-top: clamp(2.6rem, 4.5vw, 4rem); border-top: 1px solid var(--line); }
.legal-clause h2 {
  margin: 0; font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
}
.legal-clause-body > *:first-child { margin-top: 0; }
.legal-clause h3 { margin: 1.7rem 0 .65rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.legal-clause p { margin: 0 0 1.05rem; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
.legal-clause ul { margin: 0 0 1.15rem; padding-left: 1.2rem; list-style: none; }
.legal-clause li { position: relative; margin-bottom: .55rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.legal-clause li::before { position: absolute; left: -1.2rem; color: var(--amber); content: "—"; font-weight: 700; }
.legal-clause a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  /* Side by side stops working here; the heading sits above its own text. */
  .legal-clause { grid-template-columns: 1fr; gap: .85rem; }
}
@media (max-width: 560px) {
  .legal-clause p, .legal-clause li { font-size: .99rem; }
}

@media (prefers-reduced-motion: reduce) {
  .seal-ring, .seal-shield, .seal-tick { animation: none; }
  .seal-shield { opacity: 1; }
  .seal-tick { stroke-dashoffset: 0; }
}

/* The footer's bottom row was .57rem — smaller than anything else on the site
   and genuinely hard to read at arm's length. */
.footer-bottom { font-size: .78rem; letter-spacing: .03em; }

/* The bottom row is three slots: copyright, legal links, closing note. With
   space-between, an empty note (or a short one) drags the links off centre.
   A 1fr / auto / 1fr grid pins the middle slot to the true centre of the page
   whatever the two sides contain. */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.footer-bottom > :last-child { justify-self: end; text-align: right; }

@media (max-width: 760px) {
  .footer-bottom { grid-template-columns: 1fr; justify-items: start; text-align: left; }
  .footer-bottom > :last-child { justify-self: start; text-align: left; }
}