/* ==========================================================================
   Iterate
   Palette, type and motifs carried over from the Evolve HI Squarespace site:
   cream, navy, coral, the tall condensed headings, the rounded corners and the
   hand-drawn coral underline. The build method is the Elevate Media site's.

   Contents
     01  Tokens
     02  Reset and base
     03  Type scale
     04  Buttons, links, the marker underline
     05  Motion primitives
     06  Nav
     07  Hero
     08  Photo sections (washes, the swoosh)
     09  Split and intro (making AI practical)
     10  Process and steps
     11  Build cards (tilt)
     12  Case studies (pinned rail)
     13  Why choose us
     14  Services in depth (What We Do)
     15  Examples
     16  Team
     17  Contact
     18  Footer
     19  Sub pages and legal
     20  Reduced motion
   ========================================================================== */

/* 01  Tokens ============================================================== */

:root {
  /* Sampled from the old site's pixels. See harvest/tokens.md. */
  --bg: #f0eee8;            /* cream, the page ground */
  --bg-1: #e7e4dc;          /* one step down, for panels on cream */
  --paper: #ffffff;
  --ink: #181d38;           /* navy, dark sections and all type on cream */
  --ink-1: #1f2547;
  --ink-2: #272d55;
  --accent: #ed7470;        /* coral */
  --accent-rgb: 237, 116, 112;
  --accent-deep: #d95f5b;
  --slate: #43475b;

  --text: var(--ink);
  --muted: rgba(24, 29, 56, .74);
  --on-ink: #ffffff;
  --on-ink-muted: rgba(255, 255, 255, .74);
  --line: rgba(24, 29, 56, .16);
  --line-ink: rgba(255, 255, 255, .14);

  /* Coral is never text on cream: 2.5 to 1. It is text on navy (5.8 to 1),
     a fill, an underline or an icon. Buttons are navy on coral (5.8 to 1). */

  --head: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --btn: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --wide: 1480px;
  --gutter: clamp(20px, 4vw, 64px);
  --nav-h: 92px;

  --r: 12px;                /* buttons */
  --r-lg: clamp(22px, 2.6vw, 40px);  /* cards and photos */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* 02  Reset and base ====================================================== */

@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/oswald.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/roboto-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw + 8px, 18px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
img { height: auto; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto; }

section { position: relative; }
.sec { padding-block: clamp(76px, 9vw, 136px); }
.sec-tight { padding-block: clamp(56px, 7vw, 100px); }

.on-ink { background: var(--ink); color: var(--on-ink); }

[hidden] { display: none !important; }

::selection { background: var(--accent); color: var(--ink); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-ink :where(a, button):focus-visible { outline-color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--ink); padding: 10px 18px;
  font-family: var(--btn); font-weight: 600; text-decoration: none;
  border-radius: var(--r); transition: top .2s;
}
.skip:focus { top: 12px; }

/* 03  Type scale ========================================================== */

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

.display { font-size: clamp(2.7rem, 5.4vw, 5.3rem); line-height: .98; }
.h1 { font-size: clamp(2.3rem, 5vw, 4.6rem); }
.h2 { font-size: clamp(2.1rem, 4.4vw, 4.2rem); }
.h3 { font-size: clamp(1.45rem, 2.2vw, 2.1rem); }
.h4 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.15; }

.center { text-align: center; }

/* Headings that carry a marker underline need room between lines for it. */
:is(.display, .h1, .h2):has(.ul) { line-height: 1.14; }
.center > .h2, .center > .h1 { margin-inline: auto; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.subhead {
  font-family: var(--head);
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 34ch;
  margin: 0;
}

.lede { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.65; max-width: 58ch; }
.muted { color: var(--muted); }
.coral { color: var(--accent); }   /* on navy only */

/* A small kicker above a heading. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--btn);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.kicker::before {
  content: "";
  width: 22px; height: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.on-ink .kicker { color: var(--on-ink); }

/* 04  Buttons, links, the marker underline ================================ */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink);
  --btn-wipe: var(--ink);
  --btn-wipe-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px clamp(28px, 3.4vw, 54px);
  /* The fill wipes up from the bottom, as on the Elevate site, but painted as
     a background rather than a ::before layer. A separate layer inside a
     rounded, overflow-hidden button that the magnetic effect is moving gets
     drawn out of place in Safari for a few frames and then slides back: the
     offset block Kawika saw. A background has nothing to fall behind. */
  background:
    linear-gradient(var(--btn-wipe), var(--btn-wipe)) left bottom / 100% 0% no-repeat,
    var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--btn);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: color .35s var(--ease), background-size .45s var(--ease);
}
.btn:hover, .btn:focus-visible {
  color: var(--btn-wipe-fg);
  background-size: 100% 100%, auto;
}

.btn-light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-wipe: var(--accent); --btn-wipe-fg: var(--ink); }
.on-ink .btn { --btn-wipe: var(--paper); --btn-wipe-fg: var(--ink); }
.on-ink .btn-light { --btn-wipe: var(--accent); }

.btn-sm { min-height: 48px; padding: 10px 24px; font-size: .95rem; }

.arrow { width: 1em; height: 1em; flex: none; transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.tlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .25s, color .25s;
}
.tlink:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* The marker underline. The old site's one designed flourish: a coral brush
   stroke under key words. Here it draws itself in when it scrolls into view.
   The stroke is a clip that opens left to right, not a dash animation, so it
   stays crisp at any width. Without JS it is simply there. */
.ul {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.ul > svg {
  position: absolute;
  left: -3%;
  bottom: -.2em;
  width: 106%;
  height: .32em;
  min-height: 8px;
  overflow: visible;
  pointer-events: none;
  color: var(--accent);
}
.ul > svg path { fill: none; stroke: currentColor; stroke-linecap: round; }
.ul > svg path:first-child { stroke-width: 5; }
.ul > svg path:last-child { stroke-width: 3.6; opacity: .9; }
.js .ul > svg { clip-path: inset(0 100% 0 0); }
.js .ul.drawn > svg {
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s var(--ease-out);
  transition-delay: var(--ud, 0ms);
}

/* 05  Motion primitives =================================================== */

/* Nothing is hidden until JS says it can be. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.94); }

/* Set by the script when the reveal finishes, so later transforms on the same
   element (the tilt cards) do not fight a leftover transition. */
.js [data-reveal].in.settled { transition: none; transition-delay: 0s; }

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

/* 06  Nav ================================================================= */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: var(--nav-h);
  padding-inline: var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), min-height .4s var(--ease);
}
.nav.stuck {
  min-height: 70px;
  background: rgba(240, 238, 232, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav-inner {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* The lockup, as the old site had it: wordmark, then the mark on the right.
   The wordmark is one file, assets/img/wordmark.svg, swapped when the new
   type logo lands. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
/* Drawn through a mask so it takes the text color: navy on cream, white in
   the mobile menu. A new wordmark is a new file plus, if its proportions
   differ, a new aspect-ratio here. */
.wordmark {
  display: block;
  aspect-ratio: 451.591 / 45.7222;
  background: currentColor;
  -webkit-mask: url("../img/wordmark.svg") center / contain no-repeat;
  mask: url("../img/wordmark.svg") center / contain no-repeat;
}
.brand .wordmark { height: clamp(15px, 1.45vw, 21px); }
.brand .mark { height: clamp(34px, 3.4vw, 50px); width: auto; transition: transform .6s var(--ease); }
.brand:hover .mark { transform: rotate(-6deg) scale(1.04); }
.nav.stuck .brand .mark { height: 36px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.02rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }

.burger {
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 0;
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  position: relative;
  transition: background-color .2s;
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background-color: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .nav-links, .nav-right .btn { display: none; }

  .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--ink);
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 4px;
    padding: 0 var(--gutter);
  }
  .nav-menu[hidden] { display: none !important; }
  .nav-menu a:not(.btn) {
    color: var(--on-ink);
    text-decoration: none;
    font-family: var(--head);
    font-size: clamp(2.4rem, 11vw, 3.6rem);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .nav-menu a:not(.btn):hover { color: var(--accent); }
  .nav-menu .btn { margin-top: 28px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav { background: transparent; border-color: transparent; }
  body.menu-open .brand { color: var(--on-ink); }
}
@media (min-width: 901px) { .nav-menu { display: none !important; } }

/* 07  Hero ================================================================ */

.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + 30px) clamp(60px, 7vw, 100px);
  overflow: hidden;
  isolation: isolate;
}

/* The explicit width and height are load bearing. A canvas is a replaced
   element with an intrinsic 300x150, and an absolutely positioned replaced
   element with auto sizing keeps it, so without these the field only ever
   drew into a corner. Learned on the Elevate build. */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Soft coral light behind the mark, so the network feels like it gathers
   there. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  right: -8%; top: 12%;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), transparent 70%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 90px);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; justify-self: center; order: -1; }
}

.hero-copy { display: grid; gap: clamp(28px, 3.4vw, 46px); justify-items: start; }
.hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 44ch; margin: 0; color: var(--muted); }

/* The banyan-filled HI. Floats a few pixels and follows the pointer a little,
   both from site.js, both off under reduced motion. */
/* Explicit width and ratio so the grid never waits on the image to size
   itself. Without them the whole hero jumped when it loaded on phones. */
.hero-art { position: relative; width: 100%; }
.hero-art img {
  width: 100%;
  aspect-ratio: 900 / 861;
  filter: drop-shadow(0 22px 26px rgba(24, 29, 56, .12));
}

/* Page heroes on the sub pages (What We Do, About). */
.page-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(50px, 7vw, 110px)) clamp(60px, 7vw, 110px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 70px);
}
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; justify-items: start; } }

/* 08  Photo sections (washes, the swoosh) ================================= */

/* Oahu under a wash, as the old site did it. The photo sits in its own layer
   so it can drift a little against the scroll (site.js, section 07). */
.photo { position: relative; overflow: hidden; isolation: isolate; }
.photo-bg {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.wash-cream::before { background: rgba(240, 238, 232, .80); }
.wash-cream-heavy::before { background: rgba(240, 238, 232, .86); }
.wash-ink::before { background: linear-gradient(rgba(24, 29, 56, .86), rgba(24, 29, 56, .9)); }
.wash-light::before {
  background:
    radial-gradient(60% 45% at 50% 52%, rgba(240, 238, 232, .72), transparent 100%),
    linear-gradient(to bottom, rgba(240, 238, 232, .82) 0%, rgba(240, 238, 232, .55) 60%, rgba(240, 238, 232, .25) 100%);
}

.bg-road   { background-image: url("../img/road.webp"); }
.bg-ridge  { background-image: url("../img/ridge.webp"); }
.bg-wave   { background-image: url("../img/wave.webp"); }
.bg-hiker  { background-image: url("../img/hiker.webp"); background-position: center 60%; }

/* The long curve where the navy partners band meets the cream footer. */
.swoosh-sec { padding-bottom: clamp(120px, 14vw, 220px); }
.swoosh {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: clamp(70px, 10vw, 160px);
  color: var(--bg);
  pointer-events: none;
}

/* 09  Split and intro ===================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split-media { display: grid; gap: clamp(28px, 3vw, 44px); justify-items: center; }
.photo-frame {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo-frame:hover img { transform: scale(1.03); }

.intro-copy { text-align: center; display: grid; gap: 22px; justify-items: center; }
.intro-copy h3 { max-width: 26ch; }
.intro-copy p { max-width: 54ch; margin: 0; }

/* 10  Process and steps =================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 70px);
  margin: clamp(44px, 5vw, 70px) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.step h3 { margin-bottom: 22px; }
.step p { margin: 0; max-width: 40ch; }
.steps-center .step { text-align: center; }
.steps-center .step p { margin-inline: auto; }

/* A thin coral line that runs through the three steps and draws as the
   section scrolls in, standing in for the road in the photo behind. */
.steps-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  width: 100%;
  height: 120px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
  opacity: .5;
}
.steps-line path { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.steps-wrap { position: relative; }
.steps-wrap > .steps { position: relative; z-index: 1; }
@media (max-width: 900px) { .steps-line { display: none; } }

/* 11  Build cards (tilt) ================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(44px, 5vw, 70px);
}
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.card {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  gap: 20px;
  min-height: clamp(360px, 30vw, 440px);
  padding: clamp(40px, 4vw, 70px) clamp(24px, 2.6vw, 44px);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background: var(--bg) center / cover no-repeat;
  transform-style: preserve-3d;
  will-change: transform;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(247, 246, 242, .8);
  transition: background-color .5s var(--ease);
}
.card:hover::before { background: rgba(247, 246, 242, .72); }
.card h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.card p { margin: 0; max-width: 28ch; font-size: 1.06rem; }
.card-body { display: grid; gap: 20px; justify-items: center; transform: translateZ(28px); }

/* With preserve-3d on the card, Chrome stops clipping children to the
   rounded corners, so every layer inside carries the radius itself. */
.card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  mix-blend-mode: soft-light;
}

.card-icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
}
.card-icon svg { width: 26px; height: 26px; }

/* 12  Case studies (pinned rail) ========================================== */

.work { overflow: hidden; }

.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.work-head p { max-width: 46ch; margin: 0; color: var(--muted); }

.hscroll { position: relative; }

/* Pinned, the whole section has to fit one screen: heading, cards and the
   progress bar, under the stuck nav. */
.hscroll.pinned {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(70px + clamp(16px, 3vh, 40px)) clamp(20px, 3vh, 40px);
}
.hscroll.pinned .work-head { margin-bottom: clamp(20px, 3.4vh, 44px); }
.hscroll.pinned .work-head .h1 { font-size: clamp(2.2rem, 6.4vh, 4.2rem); }
.hscroll.pinned .hs-bar { margin-top: clamp(18px, 3vh, 36px); }
@media (max-height: 940px) {
  .hscroll.pinned .cs { padding: 28px 36px; gap: 18px; }
  .hscroll.pinned .cs-head h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
  .hscroll.pinned .cs-body dd { font-size: .92rem; line-height: 1.6; }
}
.hs-track {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2vw, 30px);
  padding-inline: var(--gutter);
  will-change: transform;
}

.cs {
  position: relative;
  flex: none;
  width: clamp(300px, 62vw, 860px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(22px, 2.4vw, 34px);
  padding: clamp(28px, 3.4vw, 54px);
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgba(24, 29, 56, .35);
  overflow: hidden;
}

.cs-no {
  position: absolute;
  top: clamp(16px, 2vw, 26px);
  right: clamp(22px, 2.6vw, 40px);
  font-family: var(--head);
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), .7);
  pointer-events: none;
}

.cs-head { display: grid; gap: 14px; padding-right: clamp(70px, 9vw, 130px); }
.cs-head .kicker { margin-bottom: 0; }
.cs-head h3 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }

.cs-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--btn);
  font-size: .78rem;
  font-weight: 600;
}
.cs-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2e9e6a;
  box-shadow: 0 0 0 0 rgba(46, 158, 106, .5);
  animation: live 2.2s var(--ease-out) infinite;
}
.cs-status.is-built::before { background: var(--slate); animation: none; }
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(46, 158, 106, .5); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(46, 158, 106, 0); }
}

.cs-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  margin: 0;
}
.cs-body dt {
  font-family: var(--btn);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--accent);
  width: max-content;
}
.cs-body dd { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--muted); }
@media (max-width: 1100px) { .hscroll:not(.pinned) .cs-body { grid-template-columns: 1fr; } }
.hscroll.pinned .cs { width: min(860px, 74vw); }

.cs-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-stack li {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--muted);
}

/* The closing card. Coral, navy type, points at the contact page. */
.cs-cta {
  flex: none;
  width: clamp(260px, 30vw, 420px);
  display: grid;
  align-content: space-between;
  gap: 30px;
  padding: clamp(28px, 3.4vw, 54px);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
}
.cs-cta h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.cs-cta .mark { width: 64px; height: auto; color: var(--accent); transition: transform .6s var(--ease); }
.cs-cta:hover .mark { transform: rotate(90deg); }
.cs-cta .btn { justify-self: start; }

.hs-bar {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  margin: clamp(30px, 4vw, 48px) 0 0;
  overflow: hidden;
}
.hs-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 14%;
  border-radius: 4px;
  background: var(--accent);
  transform-origin: left;
}

/* The pin only exists when site.js sets .pinned (desktop, real pointer,
   motion allowed, GSAP loaded). Everywhere else, including with JS off, the
   same markup is a real scroll row, far more reliable on touch than
   hijacking the scroll. */
.hscroll:not(.pinned) .hs-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 30px;
}
.hscroll:not(.pinned) .hs-track::-webkit-scrollbar { display: none; }
.hscroll:not(.pinned) :is(.cs, .cs-cta) { scroll-snap-align: center; }
.hscroll:not(.pinned) .hs-bar { display: none; }
@media (max-width: 900px) {
  .cs { width: min(86vw, 640px); }
  .cs-cta { width: min(76vw, 420px); }
}

/* 13  Why choose us ======================================================= */

.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 70px);
  margin: clamp(48px, 6vw, 80px) 0 clamp(48px, 5vw, 70px);
  padding: 0;
  list-style: none;
  text-align: center;
}
@media (max-width: 900px) { .reasons { grid-template-columns: 1fr; } }
.reason { display: grid; justify-items: center; gap: 22px; }
.reason p { margin: 0; max-width: 34ch; }
.reason-icon {
  width: clamp(110px, 11vw, 160px);
  height: clamp(110px, 11vw, 160px);
  color: var(--accent);
}
.reason-icon path, .reason-icon circle, .reason-icon polyline { vector-effect: non-scaling-stroke; }

/* 14  Services in depth (What We Do) ====================================== */

.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 110px);
  align-items: center;
}
.service + .service { margin-top: clamp(80px, 10vw, 150px); }
.service.flip .service-art { order: -1; }
@media (max-width: 900px) {
  .service { grid-template-columns: 1fr; }
  .service.flip .service-art { order: 0; }
}

.service-copy h2 { text-align: center; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--ink); }
.service-copy ul {
  display: grid;
  gap: 12px;
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
}
.service-copy li { position: relative; padding-left: 30px; }
.service-copy li::before {
  content: "";
  position: absolute;
  left: 4px; top: .72em;
  width: 12px; height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

/* The three illustrations that replace the lost stock images. Navy panels
   with coral and white linework that draw themselves in. */
.service-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 20% 10%, var(--ink-2), var(--ink) 60%);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.service-art svg { width: 84%; height: 84%; overflow: visible; }
.art-line { fill: none; stroke: rgba(255, 255, 255, .82); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art-soft { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-linecap: round; }
.art-coral { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-fill { fill: var(--accent); }
.art-panel { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; }
.art-dot { fill: var(--paper); }

/* Pieces that pop in after the lines draw. */
.js .service-art [data-pop] { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.js .service-art.drawn [data-pop] {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease);
  transition-delay: var(--pd, 0ms);
}

/* 15  Examples ============================================================ */

.examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 70px);
  margin-top: clamp(44px, 5vw, 70px);
}
@media (max-width: 900px) { .examples { grid-template-columns: 1fr; } }
.example h3 { margin-bottom: 24px; }
@media (min-width: 901px) { .example h3 { min-height: 2.04em; } }
.example p { margin: 0; color: var(--accent); }

/* 16  Team ================================================================ */

.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 70px);
  margin-top: clamp(44px, 5vw, 70px);
}
@media (max-width: 960px) { .team { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.person h3 { text-align: center; margin: 28px 0 6px; font-size: clamp(1.6rem, 2.1vw, 2rem); }
.person .role { text-align: center; margin: 0 0 24px; color: var(--muted); }
.person .photo-frame { aspect-ratio: 4 / 5; }

/* 17  Contact ============================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-meta { display: grid; gap: 14px; margin-top: 34px; font-size: 1.15rem; }

.form { display: grid; gap: 22px; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 12px; font-size: 1.05rem; }
.field { display: grid; gap: 8px; }
.field label, .field-label { font-size: .98rem; }
.opt { color: var(--muted); font-size: .9em; }
.field input, .field textarea {
  width: 100%;
  padding: 16px 22px;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.field textarea { border-radius: var(--r-lg); resize: vertical; min-height: 150px; line-height: 1.6; }
.field input:focus, .field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .35);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(24, 29, 56, .5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.check, .radio {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: .98rem;
  line-height: 1.55;
  cursor: pointer;
}
.check input, .radio input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 24px; height: 24px;
  margin: 1px 0 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.check input { border-radius: 7px; }
.check input::after, .radio input::after {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform .25s var(--ease);
}
.check input::after { border-radius: 3px; }
.check input:checked::after, .radio input:checked::after { transform: scale(1); }
.radios { display: grid; gap: 12px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .92rem; color: var(--muted); margin: 0; }
.form-note b { color: var(--ink); font-weight: 600; }
.form-status {
  font-size: .98rem;
  padding: 14px 18px;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--paper);
  margin: 0;
}

/* 18  Footer ============================================================== */

.footer { background: var(--bg); padding-block: clamp(56px, 6vw, 90px) 36px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr) minmax(0, .8fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .brand .wordmark { height: clamp(18px, 1.9vw, 26px); }
.footer .brand .mark { height: clamp(44px, 4.4vw, 64px); }
.footer-blurb { margin: 26px 0 0; max-width: 46ch; }
.footer-links { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.footer-contact { display: grid; gap: 12px; justify-items: end; text-align: right; }
@media (max-width: 860px) { .footer-contact { justify-items: start; text-align: left; } }
.footer-bot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 30px;
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--muted);
}
.footer-bot p { margin: 0; }

/* 19  Sub pages and legal ================================================= */

.legal { max-width: 74ch; }
.legal > .h1 { margin-bottom: 30px; }
.legal h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 60px 0 20px; }
.legal h3 {
  font-family: var(--body);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  margin: 34px 0 10px;
}
.legal p, .legal li { color: var(--muted); }
.legal ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.legal li { position: relative; padding-left: 24px; line-height: 1.7; }
.legal li::before {
  content: "";
  position: absolute;
  left: 2px; top: .8em;
  width: 10px; height: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.legal blockquote {
  margin: 18px 0;
  padding: 18px 22px;
  background: var(--paper);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
}
.legal blockquote p { margin: 0; font-size: .96rem; }
.legal .eff { font-family: var(--btn); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.legal .hairline { margin: 52px 0 0; }

/* 20  Reduced motion ====================================================== */
/* The script bails out on its own; this kills anything it might miss.
   Nothing here is allowed to hide content. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .ul > svg { clip-path: none !important; }
  .js .service-art [data-pop] { opacity: 1 !important; transform: none !important; }
  .photo-bg { transform: none !important; }
}