/* ==========================================================================
   Watermore v2 · plug-in marketing team
   Palette: deck colours. Type: Playfair Display + Archivo Black.
   ========================================================================== */

:root {
  --cream: #ece2c6;
  --paper: #f4ecd8;
  --ink: #111111;
  --red: #bf3527;
  --red-hot: #e0573f;
  --sand: #e2d4ad;

  --line: rgba(17, 17, 17, 0.15);
  --muted: rgba(17, 17, 17, 0.64);
  --cream-muted: rgba(236, 226, 198, 0.7);
  --cream-line: rgba(236, 226, 198, 0.22);

  --serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;

  --gutter: clamp(16px, 3.2vw, 44px);
  --max: 1440px;
  --section-y: clamp(88px, 11vw, 168px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 68px;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

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

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 10px 14px;
}
.skip:focus { top: 12px; }

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

/* ---------- Type primitives ---------- */

.label {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 17ch;
  margin-top: 18px;
}
.lead {
  margin-top: 24px;
  max-width: 38ch;
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--muted);
}
.num {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn span { transition: transform .35s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn--sm { min-height: 38px; padding: 0 18px; font-size: 14px; }

.btn--red { background: var(--red); color: var(--cream); }
.btn--red:hover { background: var(--ink); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--red); }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--cream:hover { background: var(--paper); }
.btn--line { border: 1px solid var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--cream); }

/* ---------- Nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  height: 68px;
  padding-inline: var(--gutter);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(236, 226, 198, 0.96);
  border-bottom-color: var(--line);
}
.nav__mark {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.nav__links { display: flex; gap: 22px; }
.nav__links a {
  font-family: var(--display);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__menu {
  display: none;
  font-family: var(--display);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  min-height: 44px; padding: 0 2px;
}

.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: center; gap: 40px;
  padding: 96px var(--gutter) 48px;
  visibility: hidden; opacity: 0;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.menu a:not(.btn) {
  font-family: var(--serif);
  font-size: clamp(48px, 13vw, 72px);
  line-height: 1.05;
}
.menu .btn { align-self: flex-start; }
.nav.on-image { background: transparent; border-bottom-color: transparent; color: #fff; }
body.menu-open { overflow: hidden; }
body.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .4s var(--ease); }
body.menu-open .nav { background: transparent; border-bottom-color: transparent; }

@media (max-width: 819px) {
  :root { --nav-h: 60px; }
  .nav { height: 60px; gap: 16px; }
  .nav__links { display: none; }
  .nav__menu { display: inline-block; }
}
@media (max-width: 419px) {
  .nav__cta { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 120px var(--gutter) 140px;
  overflow: hidden;
  isolation: isolate;
}
@supports (overflow: clip) { .hero { overflow-x: clip; overflow-y: visible; } }
.hero__orb {
  position: absolute; z-index: -1;
  left: 50%; bottom: 0;
  width: min(1180px, 130vw);
  aspect-ratio: 1;
  translate: -50% 64%;
  pointer-events: none;
}
.hero__orb-core { position: relative; width: 100%; height: 100%; will-change: transform; }
/* The blur lives on a child of the moving core, so it's drawn once and then just moved */
/* The glow is a gradient with the soft, blurred falloff worked into its stops: computed from
   the original (this gradient clipped to the orb's circle, then blur(28px)). It sits in a box 10%
   larger on every side so the fade reaches zero well inside its own edge, like the blur did.
   A live CSS blur this size cost the graphics card ~150ms the first time it was drawn. */
.hero__orb-glow {
  position: absolute; inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgb(219, 82, 59) 0.0%,
    rgb(218, 81, 58) 2.4%,
    rgb(215, 78, 57) 4.8%,
    rgb(212, 75, 54) 7.2%,
    rgb(209, 71, 52) 9.6%,
    rgb(205, 68, 49) 12.0%,
    rgb(202, 64, 47) 14.4%,
    rgba(198, 60, 44, 0.999) 16.8%,
    rgba(195, 57, 42, 0.991) 19.2%,
    rgba(193, 55, 40, 0.969) 21.6%,
    rgba(191, 53, 39, 0.926) 24.0%,
    rgba(191, 53, 39, 0.868) 26.4%,
    rgba(191, 53, 39, 0.805) 28.8%,
    rgba(191, 53, 39, 0.740) 31.2%,
    rgba(191, 53, 39, 0.676) 33.6%,
    rgba(191, 53, 39, 0.611) 36.0%,
    rgba(191, 53, 39, 0.544) 38.4%,
    rgba(191, 53, 39, 0.476) 40.7%,
    rgba(191, 53, 39, 0.407) 43.1%,
    rgba(191, 53, 39, 0.337) 45.5%,
    rgba(191, 53, 39, 0.268) 47.9%,
    rgba(191, 53, 39, 0.203) 50.3%,
    rgba(191, 53, 39, 0.144) 52.7%,
    rgba(191, 53, 39, 0.094) 55.1%,
    rgba(191, 53, 39, 0.051) 57.5%,
    rgba(191, 53, 39, 0.020) 59.9%,
    rgba(191, 53, 39, 0.005) 62.3%,
    rgba(191, 53, 39, 0.000) 64.7%);
}

.hero__inner {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  max-width: 1200px;
}
.hero__title {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 7.6vw, 128px);
  line-height: 1;
  letter-spacing: -0.03em;
}
/* Playfair's descenders (the g in "marketing" and "hiring") drop about 0.2em below the line box,
   so the clipping window reaches that far down */
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.hero__title .line > span { display: inline-block; }
.hero__sub {
  margin-top: 28px;
  max-width: 46ch;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--muted);
}
.hero__actions {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px;
}
.avail {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500;
}
.avail i {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
}
/* The pulse is a copy of the dot that grows and fades. Scale and opacity run on the GPU;
   an animated box-shadow would repaint on every frame. */
.avail i::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(3.5); opacity: 0; }
}

.hero__corner { position: absolute; top: 92px; left: var(--gutter); color: var(--muted); }
.hero__scroll {
  position: absolute; left: 0; right: 0; bottom: 28px;
  text-align: center;
  color: var(--ink);
}
.hero__stamp { position: absolute; right: var(--gutter); bottom: 28px; }

@media (max-width: 819px) {
  .hero { padding: 104px var(--gutter) 128px; }
  .hero__title { font-size: min(10.4vw, 80px); }
  .hero__corner { top: 76px; }
  .hero__orb { width: 165vw; translate: -50% 60%; }
  .hero__stamp { width: 84px; height: 84px; bottom: 20px; }
  .hero__scroll { display: none; }
}

/* ---------- Stamp ---------- */

.stamp {
  display: block;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease);
}
.stamp:hover { transform: scale(1.06); }
/* The whole badge turns (the centre dot is round, so it looks the same). Turning the <svg>
   lets the GPU rotate it; turning the text group inside would repaint it every frame. */
.stamp svg { width: 100%; height: 100%; overflow: visible; animation: spin 18s linear infinite; }
.stamp text {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  fill: var(--ink);
}
.stamp circle { fill: var(--red); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .stamp svg, .avail i::after { animation: none; }
}

/* ---------- Grain (on full-screen images) ---------- */

.grain {
  position: absolute; inset: -8%; z-index: 1;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}
.js .grain { animation-play-state: paused; }
.js .is-live > .grain { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* Shared: split lines that rise into place */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: inline-block; }
.opener__text .line > span { text-wrap: balance; } /* phones wrap each line; keep the halves even */

/* ---------- Opener: image window that scrolls open ---------- */

.opener {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: #fff;
}
.opener__frame {
  position: absolute; inset: 0;
  overflow: hidden;
}
/* The photo is sized to cover the screen exactly (the same crop object-fit: cover with
   object-position 50% 45% gave) rather than using object-fit. That lets the browser zoom it as a
   finished picture during the reveal; with object-fit it redrew the whole photo on almost every
   frame of the zoom and parts of it showed up late. */
.opener__img {
  position: absolute;
  max-width: none;
  aspect-ratio: 1;
  height: auto;
  width: max(100vw, 100vh, 560px);
  width: max(100vw, 100svh, 560px);
  left: calc((100vw - max(100vw, 100vh, 560px)) / 2);
  left: calc((100vw - max(100vw, 100svh, 560px)) / 2);
  top: calc((max(100vh, 560px) - max(100vw, 100vh, 560px)) * 0.45);
  top: calc((max(100svh, 560px) - max(100vw, 100svh, 560px)) * 0.45);
}
.opener__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12, 8, 6, 0.6) 0%, rgba(12, 8, 6, 0.1) 50%, rgba(12, 8, 6, 0.05) 100%);
}
.opener__text {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) clamp(40px, 7vw, 96px);
  text-align: center;
  font-family: var(--display);
  font-size: clamp(30px, 5.2vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.opener__sub {
  display: block;
  margin: clamp(18px, 2.4vw, 30px) auto 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section-y); }

/* Who we're for */
.who__statement {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.who__statement .w { display: inline-block; }
.who__grid {
  margin-top: clamp(56px, 7vw, 112px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
}
.who__card { border-top: 1px solid var(--line); padding-top: 24px; }
.who__card h3 {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 52px);
  line-height: 1;
}
.who__card p { margin-top: 14px; color: var(--muted); max-width: 40ch; font-size: clamp(16px, 1.25vw, 19px); }
@media (max-width: 719px) { .who__grid { grid-template-columns: 1fr; } }

/* The problem: sticky stacking cards */
.problem { padding-top: var(--section-y); }
.problem__intro { margin-bottom: clamp(48px, 6vw, 88px); }
.stack { padding-bottom: 14vh; }
.stack__card {
  position: sticky;
  margin-inline: var(--gutter);
  min-height: min(76vh, 760px);
  border-radius: 28px;
  display: flex; align-items: center;
  transform-origin: 50% 0;
  /* soft shadow along the top edge as each card slides over the last (a gradient, not a
     blurred box-shadow, which was slow to draw at this size) */
}
.stack__card::before {
  content: ""; position: absolute; z-index: -1;
  left: -24px; right: -24px; top: -64px; height: 64px;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.055), rgba(17, 17, 17, 0.02) 45%, rgba(17, 17, 17, 0));
  /* fade out at both ends, so the shadow has no visible edges or corners */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  pointer-events: none;
}
.stack__card--1 { top: 88px; background: var(--paper); }
.stack__card--2 { top: 104px; background: var(--sand); }
.stack__card--3 { top: 120px; background: var(--red); color: var(--cream); }
.stack__card + .stack__card { margin-top: 10vh; }
.stack__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
  padding-block: clamp(40px, 6vw, 88px);
}
.stack__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(110px, 18vw, 300px);
  line-height: 0.8;
  color: var(--red);
}
.stack__card--3 .stack__num { color: var(--cream); opacity: 0.9; }
/* Giant type is shown as a high-res picture of itself (assets/type/*.png, rendered from this
   exact type at 2x). The real text stays in place, transparent, so layout and screen readers
   are unchanged. Live type this big was slow for the graphics card to draw and stuttered as the
   section came on screen. The ::before boxes are in em, so they scale with the type. */
.stack__num,
.stack__card--3 .stack__num { position: relative; color: transparent; }
.stack__num::before {
  content: ""; position: absolute; left: -0.12em; top: -0.3em; height: 1.4em;
  background: 0 0 / 100% 100% no-repeat;
}
.stack__card--1 .stack__num::before { width: 1.207em; background-image: url("../assets/type/num-01.png"); }
.stack__card--2 .stack__num::before { width: 1.368em; background-image: url("../assets/type/num-02.png"); }
.stack__card--3 .stack__num::before { width: 1.335em; background-image: url("../assets/type/num-03.png"); }
.stack__title {
  font-family: var(--serif);
  font-size: clamp(44px, 6.2vw, 108px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.stack__inner p { margin-top: 22px; max-width: 36ch; font-size: clamp(17px, 1.45vw, 21px); color: var(--muted); }
.stack__card--3 .stack__inner p { color: var(--cream-muted); }
@media (max-width: 819px) {
  .stack__card { min-height: 68vh; border-radius: 22px; }
  .stack__card--1 { top: 76px; } .stack__card--2 { top: 88px; } .stack__card--3 { top: 100px; }
  .stack__inner { grid-template-columns: 1fr; align-items: start; gap: 28px; }
}

/* Services: sticky split */
.services { padding-bottom: clamp(48px, 5vw, 80px); }
.services__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.services__aside { position: sticky; top: 120px; }
.services__list { border-top: 1px solid var(--line); }
.svc {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--line);
}
.svc .num { padding-top: 14px; }
.svc h3 {
  font-family: var(--serif);
  font-size: clamp(36px, 3.8vw, 60px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.svc p { margin-top: 16px; color: var(--muted); max-width: 48ch; font-size: clamp(16px, 1.25vw, 19px); }
@media (max-width: 899px) {
  .services__layout { grid-template-columns: 1fr; }
  .services__aside { position: static; }
  .svc { grid-template-columns: 40px 1fr; }
}

/* ---------- Work ---------- */

/* Placeholder frames until real images land */
.ph {
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(191, 53, 39, 0.10), rgba(17, 17, 17, 0.06)),
    var(--paper);
  border: 1px dashed rgba(17, 17, 17, 0.22);
  color: var(--muted);
  text-align: center;
  padding: 16px;
}
.ph--dark {
  border: 0;
  background:
    radial-gradient(ellipse at 72% 78%, rgba(191, 53, 39, 0.55), rgba(191, 53, 39, 0) 58%),
    radial-gradient(ellipse at 18% 20%, rgba(224, 87, 63, 0.18), rgba(224, 87, 63, 0) 50%),
    #181412;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Work index: one screen of image strips. Each row pairs the name and
   Client/Concept with a strip of that piece's imagery running off the right edge, and
   opens its project right below it (main.js). ---------- */

.work-index {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(24px, 6vh, 64px));
  padding-bottom: clamp(24px, 3vw, 40px);
}
.work-index .h2 { margin-top: 12px; }
.work-index__list { margin-top: clamp(24px, 3.4vw, 48px); }
.work-item:first-child .strip { border-top: 1px solid var(--ink); }
.strip {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: stretch;
  gap: 0 16px;
  height: clamp(88px, 12.5vh, 160px);
  border-bottom: 1px solid var(--line);
}
.strip__num {
  align-self: center;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--red);
}
.strip__text { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.strip__name {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.strip__meta { display: flex; align-items: center; gap: 12px; }
.strip__view { color: var(--muted); transition: color .3s var(--ease); }
.strip:hover .strip__view { color: var(--red); }
.strip__img { position: relative; overflow: hidden; margin-right: calc(-1 * var(--gutter)); }
.strip__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.strip__img.ph { border: 0; }
.strip:hover .strip__name { color: var(--red); }
.strip:hover .strip__img img { transform: scale(1.04); }

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill--client { background: var(--red); color: var(--cream); border: 1px solid var(--red); }
.pill--concept { border: 1px solid var(--ink); color: var(--ink); }

/* ---------- Piece bar: the title strip above each piece. It docks under the nav
   while you're inside that piece, and the next piece's bar pushes it out. ---------- */

.piece-bar {
  position: sticky; top: var(--nav-h); z-index: 50;
  background: var(--cream);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.piece-bar__inner {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding-block: 10px;
}
.piece-bar__num {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--red);
}
.piece-bar__name {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.piece-bar__close {
  min-height: 44px;
  padding: 0 0 0 8px;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.piece-bar__close:hover { color: var(--red); }

@media (max-width: 819px) {
  .strip { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 0.9fr); gap: 0 12px; height: 104px; }
  .strip__name { font-size: clamp(17px, 5vw, 24px); }
  .piece-bar__inner { grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; min-height: 52px; }
  .strip__view { display: none; }
}

/* Rooted: full-screen opener */
.case__hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
}
.case__hero-media,
.case__hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 42%;
}

.case__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}
.case__meta dt { color: var(--muted); }
.case__meta dd { margin-top: 6px; font-size: 15px; font-weight: 500; max-width: 30ch; }

.case__strategy {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-block: var(--section-y);
}
.case__strategy-aside { position: sticky; top: 120px; }
.points { border-top: 1px solid var(--line); }
.points li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--line);
}
.points .num { padding-top: 10px; }
.points h5 {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.02;
}
.points p { margin-top: 14px; color: var(--muted); max-width: 50ch; font-size: clamp(16px, 1.2vw, 18px); }

.case__handles { padding-bottom: clamp(24px, 3vw, 48px); }
.handled {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--line);
}
.handled li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.handled .num { color: var(--red); flex: none; }

.case__creative {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-block: clamp(64px, 8vw, 128px) var(--section-y);
}
.case__creative figure { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; }
.case__creative figure:nth-child(2) { margin-top: 12vh; }
.case__creative--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); max-width: 1180px; }
.case__creative img { width: 100%; height: 100%; object-fit: cover; }

.quote { padding-bottom: var(--section-y); text-align: center; }
.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.08;
  max-width: 24ch;
  margin-inline: auto;
}
.quote figcaption { margin-top: 22px; color: var(--muted); }

@media (max-width: 899px) {
  .case__meta { grid-template-columns: 1fr 1fr; }
  .case__meta div:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .case__strategy { grid-template-columns: 1fr; }
  .case__strategy-aside { position: static; }
  .points li { grid-template-columns: 40px 1fr; }
  .handled { grid-template-columns: 1fr 1fr; }
  .case__creative { grid-template-columns: 1fr 1fr; }
  .case__creative figure:nth-child(2) { margin-top: 8vh; }
  .case__creative figure:nth-child(3) { display: none; }
}

/* Rooted: how we work together */
.together { padding-bottom: clamp(48px, 6vw, 96px); }
.together__text {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 62px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
.together__text .w { display: inline-block; }

/* ---------- Concepts ---------- */

/* Each concept opens on one full-screen image; its title lives in the piece bar above */
.world { padding-bottom: clamp(72px, 8vw, 140px); }
.world__hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
}
.world__hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Edge-to-edge spreads (Strava × Crumbl, Maison Sable, Life is Sweet): full-width
   frames on a five-column grid with thin seams, each image drifting inside its frame */
.world__spread {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)); /* tenths, so rows can split 2/3, 3/2 or half and half */
  gap: 6px;
}
.world__spread figure {
  position: relative;
  overflow: hidden;
  height: min(86vh, 900px);
  background: var(--ink);
}
.world__spread .span-2 { grid-column: span 4; }
.world__spread .span-3 { grid-column: span 6; }
.world__spread .span-half { grid-column: span 5; }
.world__spread .span-5 { grid-column: 1 / -1; }
.world__spread .spread-pano { height: auto; aspect-ratio: 2000 / 894; }
/* Product shots that must show whole (the Life is Sweet boxes fill their photos edge to edge):
   the frame takes the photo's own shape, and the photo doesn't drift, so nothing is trimmed */
.world__spread .spread-whole { height: auto; aspect-ratio: 1386 / 1400; }
.world__spread .spread-whole img { top: 0; height: 100%; }
.world__spread img {
  position: absolute; left: 0; top: -6%;
  width: 100%; height: 112%;
  max-width: none;
  object-fit: cover;
}
@media (max-width: 819px) {
  .world__spread { grid-template-columns: 1fr; }
  .world__spread .span-2,
  .world__spread .span-3,
  .world__spread .span-half,
  .world__spread .span-5 { grid-column: auto; }
  .world__spread figure { height: 72vh; height: 72svh; }
  .world__spread .spread-pano,
  .world__spread .spread-whole { height: auto; }
}

/* Duracell: one continuous black flow you scroll through freely. Each frame fills the screen and
   fades out to black before the next fades in, so shots blend without ever overlapping. */
.ad__flow { position: relative; background: #000; color: #fff; }
.ad__flow figure { position: relative; margin: 0; padding-block: 10vh; overflow: hidden; }
.ad__flow .ad__group:first-child figure:first-of-type { padding-top: 0; }
.ad__flow img {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  max-width: none;
  object-fit: cover;
}
/* Each frame dips to black at its top and bottom. Black gradients laid over the frame look the
   same as masking the photo on this black background, and are far cheaper to draw while scrolling. */
.ad__flow figure::before,
.ad__flow figure::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0;
  height: 26vh;
  pointer-events: none;
}
.ad__flow figure::before { top: 0; background: linear-gradient(#000 10vh, rgba(0, 0, 0, 0)); }
.ad__flow figure::after { bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0), #000 16vh); }
.ad__flow .ad__group:first-child figure:first-of-type::before { content: none; }
.ad__group { position: relative; }
/* The line rides along with the first stretch of frames. An absolute layer the size of
   the group holds a sticky child, so the line stops exactly where the group ends. */
.ad__sticky { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ad__pin {
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0) 50%);
}
.ad__copy {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.ad__card {
  height: 80vh;
  height: 80svh;
  display: grid; place-items: center;
  padding-inline: var(--gutter);
  text-align: center;
}
.ad__card .ad__copy { font-size: clamp(34px, 5.4vw, 92px); }
.ad__end { padding-bottom: 0 !important; }
.ad__end::after { content: none !important; }
.ad__end img { object-position: 50% 50%; }
/* On portrait screens show the whole logo card instead of cropping it to fill the height */
@media (max-aspect-ratio: 1/1) {
  .ad__end { display: grid; align-items: center; }
  .ad__end img { min-height: 0; height: auto; }
}
@media (max-width: 819px) {
  .ad__pin { align-items: flex-end; padding-bottom: 72px; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%); }
}

/* Image wipe reveals (JS sets the hidden state) */
.reveal-img { overflow: hidden; }

/* Everything that moves while you scroll keeps its own GPU layer for as long as it's shown.
   Without this the browser builds and drops a layer each time an animation starts and ends,
   and has to redraw big photos at those moments, which is where frames got dropped. */
.hero__inner,
.opener__img,
.stack__card,
.case__hero-media,
.case__hero-img,
.world__hero-img,
.world__spread img,
.strip__img img { will-change: transform; }
.stack__inner,
.strip__img { will-change: opacity; }
.ad__flow img { will-change: transform, opacity; }

/* Pricing: one statement, Mapo-style */
.pricing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--red);
  color: var(--cream);
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: var(--section-y);
  text-align: center;
}
.pricing__orb {
  position: absolute; z-index: -1;
  left: 50%; bottom: -40vh;
  width: 110vw; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  /* Pre-softened like the hero glow (was a live blur(30px), the biggest stutter on the page:
     ~190ms of drawing as the work list came on screen with this section right below it) */
  background: radial-gradient(circle,
    rgba(224, 87, 63, 0.899) 0%,
    rgba(224, 87, 63, 0.823) 7.8%,
    rgba(224, 87, 63, 0.708) 15.6%,
    rgba(224, 87, 63, 0.591) 23.3%,
    rgba(224, 87, 63, 0.472) 31.1%,
    rgba(224, 87, 63, 0.353) 38.9%,
    rgba(224, 87, 63, 0.233) 46.7%,
    rgba(224, 87, 63, 0.114) 54.5%,
    rgba(224, 87, 63, 0.014) 62.3%,
    rgba(224, 87, 63, 0) 70%);
  pointer-events: none;
}
.pricing .label { color: var(--cream-muted); }
.pricing__inner { display: flex; flex-direction: column; align-items: center; }
.pricing__title {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.pricing__amount {
  margin-top: 6px;
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 14px;
  font-family: var(--serif);
  line-height: 1.05;
}
.pricing__amount span { font-size: clamp(104px, 19vw, 320px); letter-spacing: -0.04em; position: relative; color: transparent; }
.pricing__amount span::before { /* picture of the type, see .stack__num */
  content: ""; position: absolute; left: -0.12em; top: -0.3em; width: 3.065em; height: 1.65em;
  background: url("../assets/type/price.png") 0 0 / 100% 100% no-repeat;
}
.pricing__amount small { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 24px); color: var(--cream-muted); }
.pricing__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.avail--light { color: var(--cream); }
.avail--light i { background: var(--cream); }

/* Team */
.team__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.team__aside { position: sticky; top: 120px; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.person__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
  object-fit: cover;
}
.person__photo span {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(48px, 6vw, 96px);
  color: rgba(17, 17, 17, 0.14);
}
.person h3 { margin-top: 18px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.person .label { margin-top: 4px; color: var(--muted); }
.person__bio { margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 46ch; }
@media (max-width: 899px) {
  .team__layout { grid-template-columns: 1fr; }
  .team__aside { position: static; }
}
@media (max-width: 479px) { .people { grid-template-columns: 1fr; } }

/* ---------- Closing CTA + footer (one cream panel, orb behind both) ---------- */

.finale {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.cta__orb {
  position: absolute; z-index: -1;
  left: 50%; bottom: 0;
  width: min(1180px, 150vw);
  aspect-ratio: 1;
  translate: -50% 58%;
  pointer-events: none;
}
.cta__orb-core { position: relative; width: 100%; height: 100%; will-change: transform, opacity; }
.cta__orb-glow { /* same pre-softened gradient as the hero glow */
  position: absolute; inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgb(219, 82, 59) 0.0%,
    rgb(218, 81, 58) 2.4%,
    rgb(215, 78, 57) 4.8%,
    rgb(212, 75, 54) 7.2%,
    rgb(209, 71, 52) 9.6%,
    rgb(205, 68, 49) 12.0%,
    rgb(202, 64, 47) 14.4%,
    rgba(198, 60, 44, 0.999) 16.8%,
    rgba(195, 57, 42, 0.991) 19.2%,
    rgba(193, 55, 40, 0.969) 21.6%,
    rgba(191, 53, 39, 0.926) 24.0%,
    rgba(191, 53, 39, 0.868) 26.4%,
    rgba(191, 53, 39, 0.805) 28.8%,
    rgba(191, 53, 39, 0.740) 31.2%,
    rgba(191, 53, 39, 0.676) 33.6%,
    rgba(191, 53, 39, 0.611) 36.0%,
    rgba(191, 53, 39, 0.544) 38.4%,
    rgba(191, 53, 39, 0.476) 40.7%,
    rgba(191, 53, 39, 0.407) 43.1%,
    rgba(191, 53, 39, 0.337) 45.5%,
    rgba(191, 53, 39, 0.268) 47.9%,
    rgba(191, 53, 39, 0.203) 50.3%,
    rgba(191, 53, 39, 0.144) 52.7%,
    rgba(191, 53, 39, 0.094) 55.1%,
    rgba(191, 53, 39, 0.051) 57.5%,
    rgba(191, 53, 39, 0.020) 59.9%,
    rgba(191, 53, 39, 0.005) 62.3%,
    rgba(191, 53, 39, 0.000) 64.7%);
}

.cta {
  position: relative;
  padding: clamp(120px, 16vw, 220px) 0 clamp(120px, 14vw, 200px);
  text-align: center;
}
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta .label { color: var(--muted); }
.cta__title {
  margin-top: 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.cta__sub { margin-top: 26px; max-width: 40ch; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); }
.cta__actions { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta__stamp { position: absolute; right: var(--gutter); bottom: 32px; }
@media (max-width: 819px) { .cta__stamp { width: 84px; height: 84px; bottom: 20px; } }

/* Footer */

.footer { position: relative; padding-bottom: 28px; color: var(--ink); }
.footer__mark {
  font-family: var(--display);
  font-size: 13.6vw; /* "WATERMORE" is ~6.94em wide, so this fills ~94% of the screen */
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--ink);
  white-space: nowrap;
  padding-top: 0.06em;
  user-select: none;
  position: relative;
  color: transparent; /* drawn from a picture of itself, see .stack__num */
}
.footer__mark::before {
  content: ""; position: absolute; top: -0.24em; height: 1.42em;
  left: calc(50% - 3.549em); width: 7.118em;
  background: url("../assets/type/wordmark.png") 0 0 / 100% 100% no-repeat;
}
.footer__row {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(17, 17, 17, 0.25);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a { transition: opacity .3s var(--ease); }
@media (max-width: 819px) {
  /* comfortable thumb-sized tap areas, same look */
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav__mark { display: inline-flex; align-items: center; min-height: 44px; }
}
.footer__links a:hover { opacity: 0.6; }