/* =====================================================================
   GRAPEFRUIT SUNSET — public site
   Layout concept: a gray, ink-on-paper world that Chelsea paints into
   color as you scroll. Scroll progress per section arrives as --p (0→1)
   from site.js; every effect below is derived from it.
   Deliberately single-theme: it is a watercolor-paper world in any OS theme.
   ===================================================================== */

:root {
  color-scheme: light;
  /* Chelsea's palette (brand board) */
  --pink: #ffbaba;
  --pink-soft: #fbdad9;
  --teal: #42747b;
  --teal-soft: #b1cfc9;
  --brown: #5a2f15;
  --yellow: #ffa318;
  /* derived neutrals and accessible text tints */
  --paper: #faf6f0;        /* warm watercolor paper */
  --paper-deep: #f2ebe2;
  --ink: #5a2f15;          /* text color: Chelsea's brand brown */
  --body: #5a2f15;
  --gray: #9b9590;
  --grapefruit: #c4554a;   /* pink deepened for text contrast */
  --teal-ink: #2f5a60;

  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --p: 1;                  /* progress default: fully painted (no-JS / reduced motion) */

  --tex-pink: url("../textures/watercolor-pink.webp");
  --tex-teal: url("../textures/watercolor-teal.webp");
  --m-reveal-1: url("../fx/bloom-reveal-1.webp");
  --m-reveal-2: url("../fx/bloom-reveal-2.webp");
  --m-reveal-3: url("../fx/bloom-reveal-3.webp");
  --m-reveal-4: url("../fx/bloom-reveal-4.webp");
  --m-wash-1: url("../fx/bloom-wash-1.webp");
  --m-wash-2: url("../fx/bloom-wash-2.webp");
  --m-wash-3: url("../fx/bloom-wash-3.webp");
  --m-swash: url("../fx/brush-swash.webp");
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.72;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* watercolor-paper tooth lives in the page background, so it never sits on top of photography */
body, .work.is-horizontal .work__stage { background: url("../fx/paper-grain.webp") repeat, var(--paper); }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
.br-sm { display: none; }
main > section { position: relative; z-index: 3; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.eyebrow {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--font-subheading); font-weight: 500;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--brown); margin-bottom: 1.6rem;
}
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .6; }
.display-h {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.02; letter-spacing: -.012em;
  color: var(--ink); text-wrap: balance;
}
.display-h--md { font-size: clamp(2.2rem, 4.4vw, 4rem); }
.display-h em { font-family: var(--font-subtitle); font-style: italic; color: var(--teal-ink); }
.lede { font-family: var(--font-subtitle); font-size: 1.28rem; line-height: 1.5; color: var(--ink); font-weight: 400; }
.gray-word { color: var(--gray); }

/* brush swash painted behind a word; amount = --sw (0..1) */
.swash { position: relative; isolation: isolate; padding-inline: .1em; }
.swash::before {
  content: ""; position: absolute; z-index: -1;
  left: -.18em; right: -.18em; top: .16em; bottom: -.04em;
  background: var(--swash-bg, var(--tex-pink)) center / cover;
  -webkit-mask: var(--m-swash) center / 100% 100% no-repeat; mask: var(--m-swash) center / 100% 100% no-repeat;
  transform: scaleX(var(--sw, 1)); transform-origin: left center;
}
.swash--pink { --swash-bg: var(--tex-pink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: 999px; text-decoration: none;
  font-family: var(--font-subheading); font-weight: 500; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; line-height: 1;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #43210e; transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(196, 85, 74, .7); }
.btn--line { border: 1px solid currentColor; color: var(--ink); }
.btn--line:hover { background: rgba(255, 255, 255, .45); }
.btn--lg { padding: 1.15rem 2rem; font-size: .8rem; }

/* ---------- watercolor primitives ---------- */
.wash {
  position: absolute; pointer-events: none; aspect-ratio: 1;
  -webkit-mask: var(--m-wash-1) center / contain no-repeat; mask: var(--m-wash-1) center / contain no-repeat;
}
.wash--pink { background: var(--tex-pink) center / cover; }
.wash--teal { background: var(--tex-teal) center / cover; -webkit-mask-image: var(--m-wash-2); mask-image: var(--m-wash-2); }
.wash--yellow { background: var(--yellow); -webkit-mask-image: var(--m-wash-3); mask-image: var(--m-wash-3); mix-blend-mode: multiply; }
.wash--soft { background: var(--pink-soft); -webkit-mask-image: var(--m-wash-2); mask-image: var(--m-wash-2); }

/* mono → color reveal: used ONLY for portfolio placeholder illustrations, never for Chelsea's photos */
.reveal { position: relative; overflow: hidden; background: var(--paper-deep); }
.reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal__mono { filter: grayscale(1) contrast(1.04) brightness(1.03); }
.reveal__color {
  -webkit-mask: var(--m-reveal-2) no-repeat; mask: var(--m-reveal-2) no-repeat;
  -webkit-mask-position: var(--origin, 50% 50%); mask-position: var(--origin, 50% 50%);
  -webkit-mask-size: calc(var(--r, 1) * 280%); mask-size: calc(var(--r, 1) * 280%);
}

/* line drawings: pathLength=1 strokes drawn by --draw */
.draw path, .draw line { fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1)); }

/* parallax: children drift against their section's progress */
.par { transform: translate3d(0, calc((.5 - var(--p)) * var(--depth, 0) * 1px), 0); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav { position: fixed; z-index: 80; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 14px); padding-inline: 16px; pointer-events: none; }
.nav__bar {
  pointer-events: auto; max-width: 1240px; margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .5rem .5rem .5rem 1rem; border-radius: 999px;
  background: rgba(250, 246, 240, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(90, 47, 21, .12);
  box-shadow: 0 8px 30px -18px rgba(43, 27, 18, .35);
}
.nav__brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.nav__brand img { height: 30px; width: auto; }
.nav__name { font-family: var(--font-brand); font-size: 1rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brown); white-space: nowrap; }
.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-inline: auto; }
.nav__links a {
  position: relative; text-decoration: none; color: var(--ink);
  font-family: var(--font-subheading); font-weight: 500; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  padding-block: .4rem;
}
.nav__links a::after { content: ""; position: absolute; left: 0; right: .24em; bottom: 0; height: 2px; background: var(--grapefruit); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }

.portal-btn {
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .78rem 1.2rem .78rem 1rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--brown); color: var(--brown);
  font-family: var(--font-subheading); font-weight: 500; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; line-height: 1;
}
.portal-btn::before {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: var(--tex-pink) center / cover;
  -webkit-mask: var(--m-reveal-4) center / contain no-repeat; mask: var(--m-reveal-4) center / contain no-repeat;
  transform: scale(var(--lit, 0)); transition: transform .7s var(--ease);
}
/* keep the watercolor inside the pill in every browser (Safari ignores overflow + radius on masked/animated layers) */
.portal-btn { clip-path: inset(0 round 999px); }
.portal-btn:focus-visible { outline-offset: -4px; }
.nav.is-lit .portal-btn { --lit: 1.05; }
.portal-btn:hover { --lit: 1.6; }
.portal-btn__icon { width: 22px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.nav__menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; place-items: center; }
.nav__menu-lines, .nav__menu-lines::before { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; transition: transform .3s var(--ease); }
.nav__menu-lines::before { content: ""; position: absolute; top: 6px; }
.nav__menu[aria-expanded="true"] .nav__menu-lines { transform: translateY(3px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-lines::before { transform: translateY(-6px) rotate(-90deg); }
.nav__sheet {
  pointer-events: auto; max-width: 1240px; margin: .6rem auto 0; padding: 1.4rem 1.6rem;
  border-radius: 28px; background: rgba(250, 246, 240, .96); border: 1px solid rgba(90, 47, 21, .12);
  display: flex; flex-direction: column; gap: .2rem;
}
.nav__sheet a { font-family: var(--font-heading); font-size: 1.8rem; color: var(--ink); text-decoration: none; padding-block: .3rem; }

/* =====================================================================
   THREAD (desktop only, drawn by site.js)
   ===================================================================== */
.thread { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 1; pointer-events: none; display: none; }
.thread__clip { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; will-change: transform; }
.thread__svg { display: block; will-change: transform; overflow: visible; }
.thread__wash { stroke-width: 24; opacity: .38; }
.thread__core { stroke-width: 7; opacity: .5; transform: translate(6px, 2px); }
.thread__head {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  background: radial-gradient(circle at 42% 40%, #ffd8c9, #ff9d8e 55%, #ffa318);
  -webkit-mask: var(--m-reveal-4) center / contain no-repeat; mask: var(--m-reveal-4) center / contain no-repeat;
  opacity: .85; will-change: transform;
}
@media (min-width: 900px) { .js .thread { display: block; } }
.thread-m { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) { .js .thread-m { display: block; } }

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero {
  height: 270svh; z-index: 2 !important;
  /* choreography, all from --p */
  --a:  clamp(0, (var(--p) - .04) / .30, 1);   /* pigment blooms inside the grapefruit */
  --a2: clamp(0, (var(--p) - .16) / .24, 1);   /* warm core */
  --b:  clamp(0, (var(--p) - .30) / .14, 1);   /* a drop gathers */
  --c:  clamp(0, (var(--p) - .44) / .24, 1);   /* the drop lets go */
  --d:  clamp(0, (var(--p) - .66) / .30, 1);   /* it hits the paper and blooms */
  --d2: clamp(0, (var(--p) - .74) / .26, 1);
  --d3: clamp(0, (var(--p) - .82) / .18, 1);
}
.hero__stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(.55rem, 1.7svh, 1.25rem);
  padding: calc(72px + 2svh) var(--gutter) 3svh;
  transform: translate3d(0, calc(var(--d) * -7svh), 0);
}
.hero__wordmark { width: min(480px, 74vw); height: auto; transform: translate3d(0, calc(var(--p) * -36px), 0); }
.hero__mark { width: min(390px, 64vw, calc(34svh * 1.465)); }
.hero__tagline { width: min(320px, 60vw); height: auto; opacity: .9; }
.hero__statement {
  font-family: var(--font-subtitle); font-style: italic;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.35; color: var(--ink);
  margin-top: clamp(.2rem, 1.2svh, .8rem);
}
.paint-word {
  --sw: var(--a);
  color: color-mix(in oklab, var(--ink) calc((1 - var(--a)) * 100%), var(--grapefruit));
}
.paint-word.swash::before { top: .28em; bottom: .02em; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: clamp(.4rem, 1.4svh, 1rem); }

.scroll-cue {
  position: absolute; z-index: 2; left: 50%; bottom: 3.2svh; transform: translateX(-50%);
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--font-subheading); font-size: .64rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gray);
  opacity: calc(1 - var(--p) * 9);
}
.scroll-cue i { position: relative; width: 1px; height: 34px; background: rgba(43, 27, 18, .2); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: -1px; top: -8px; width: 3px; height: 8px; border-radius: 3px; background: var(--grapefruit); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { to { transform: translateY(44px); } }

/* the grapefruit mark: ink linework over a pigment layer */
.gmark { position: relative; aspect-ratio: 1450 / 990; }
.gmark__pig {
  position: absolute; left: 15.2%; top: 14.5%; width: 69.6%; height: 52.5%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; overflow: hidden;
}
.gmark__pig::before {
  content: ""; position: absolute; inset: -12%;
  background: var(--tex-pink) center / cover;
  -webkit-mask: var(--m-reveal-1) 50% 78% / calc(var(--a, 1) * 210%) auto no-repeat;
  mask: var(--m-reveal-1) 50% 78% / calc(var(--a, 1) * 210%) auto no-repeat;
}
.gmark__pig::after {
  content: ""; position: absolute; inset: 0;
  background: var(--yellow); opacity: .5; mix-blend-mode: multiply;
  -webkit-mask: var(--m-wash-2) 50% 120% / calc(var(--a2, 1) * 105%) auto no-repeat;
  mask: var(--m-wash-2) 50% 120% / calc(var(--a2, 1) * 105%) auto no-repeat;
}
.gmark__ink {
  position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: translateY(-3px) scale(1.006); } }
.drop {
  position: absolute; z-index: 3; left: 50%; top: 61%;
  width: clamp(16px, 1.9vw, 26px); height: auto; overflow: visible;
  transform-origin: 50% 0;
  transform: translate(-50%, calc(var(--c) * var(--c) * 64svh)) scale(calc(var(--b) * (1 - var(--c) * .12)), calc(var(--b) * (1 + var(--c) * .55)));
  opacity: calc(1.2 - var(--d) * 14);
  filter: drop-shadow(0 3px 4px rgba(196, 85, 74, .25));
}

.splash {
  position: absolute; z-index: 0; left: 50%; bottom: 0; aspect-ratio: 1; pointer-events: none;
  -webkit-mask: var(--m-wash-1) center / contain no-repeat; mask: var(--m-wash-1) center / contain no-repeat;
}
.splash--pink { width: 118vmax; background: var(--tex-pink) center / cover; transform: translate(-50%, 54%) scale(var(--d)); }
.splash--teal {
  left: 12%; width: 40vmax; background: var(--tex-teal) center / cover; opacity: .42;
  -webkit-mask-image: var(--m-wash-2); mask-image: var(--m-wash-2);
  transform: translate(-50%, 58%) scale(var(--d2));
}
.splash--sun {
  left: 84%; bottom: 6svh; width: 20vmax; background: var(--yellow); opacity: .42; mix-blend-mode: multiply;
  -webkit-mask-image: var(--m-wash-3); mask-image: var(--m-wash-3);
  transform: translate(-50%, 50%) scale(var(--d3));
}

/* =====================================================================
   2. PHILOSOPHY
   ===================================================================== */
.philosophy {
  padding-block: clamp(7rem, 15vw, 13rem) clamp(5rem, 10vw, 9rem);
  --sw: clamp(0, (var(--p) - .2) / .2, 1);
  --r: clamp(0, (var(--p) - .12) / .34, 1);
  --draw: clamp(0, (var(--p) - .08) / .34, 1);
}
.philosophy__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.philosophy__words { min-width: 0; }
.philosophy .line { display: block; }
.line--paint { font-family: var(--font-subtitle); font-style: italic; margin-top: .22em; color: var(--ink); }
.philosophy__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 48rem; }

/* PROTECTED PHOTOGRAPHY
   Chelsea's photos sit on their own layer above every watercolor effect.
   The ONLY thing allowed is the outer ink-blot silhouette (--blot) on the frame itself: the interior
   of each mask is fully opaque, so the photo inside is shown exactly as supplied. No filters, blends,
   tints or overlays ever touch the image. */
.photo {
  position: relative; z-index: 2; overflow: hidden; background: var(--paper-deep);
  -webkit-mask: var(--blot) center / 100% 100% no-repeat; mask: var(--blot) center / 100% 100% no-repeat;
}
.blot { position: relative; z-index: 2; }
/* pigment rim: same blot family, sits BEHIND the photo and peeks out around its edge */
.blot-rim {
  position: absolute; z-index: 1; inset: -4.5% -5%; pointer-events: none;
  background: var(--rim-tex, var(--tex-pink)) center / cover; opacity: .82;
  -webkit-mask: var(--blot-rim) center / 100% 100% no-repeat; mask: var(--blot-rim) center / 100% 100% no-repeat;
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; mix-blend-mode: normal; -webkit-mask: none; mask: none; }

.arch { position: relative; isolation: isolate; margin: 0; justify-self: end; width: 100%; max-width: 430px; }
.arch__world { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.arch { --blot: url("../fx/blot-portrait-pink.webp"); --blot-rim: url("../fx/blot-portrait-pink-rim.webp"); }
.arch__frame { aspect-ratio: 1000 / 1470; }
.arch__frame img { object-position: 50% 14%; }
.rays { position: absolute; left: -16%; top: -12%; width: 132%; overflow: visible; }
.rays line { stroke-width: 1.3; stroke-linecap: round; stroke: color-mix(in oklab, var(--ink) calc((1 - var(--r)) * 100%), var(--yellow)); }
.arch__bloom { width: 128%; left: -14%; top: -20%; opacity: .7; transform: scale(calc(.2 + .8 * var(--r))); transform-origin: 50% 60%; }
.arch__wash { width: 86%; left: -36%; bottom: -14%; opacity: .55; mix-blend-mode: multiply; transform: scale(calc(.25 + .75 * clamp(0, (var(--r) - .15) / .85, 1))) rotate(-12deg); }
.arch__caption {
  position: relative; z-index: 3; margin: 1.3rem 0 0 -12%;
  font-family: var(--font-brand); font-size: clamp(1.5rem, 2.5vw, 2.3rem); line-height: 1.12; color: var(--ink);
}
.arch__caption em { font-family: var(--font-subtitle); color: color-mix(in oklab, var(--ink) calc((1 - var(--r)) * 100%), var(--grapefruit)); }

/* =====================================================================
   3. SERVICES
   ===================================================================== */
.services { padding-block: clamp(6rem, 12vw, 10rem); --g: clamp(0, (var(--p) - .04) / .4, 1); }
.services__wash-a { width: min(70vw, 900px); left: -16vw; top: 2%; opacity: .55; transform: scale(calc(.3 + .7 * var(--g))) translate3d(0, calc((.5 - var(--p)) * 80px), 0); }
.services__wash-b { width: min(34vw, 460px); right: -6vw; bottom: 4%; opacity: .32; transform: scale(calc(.2 + .8 * clamp(0, (var(--p) - .25) / .35, 1))); }
.services__grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.services__intro { position: sticky; top: 22svh; min-width: 0; }
.services__intro > p { margin-top: 1.6rem; max-width: 26rem; }
.waves { width: 200px; margin-top: 2.2rem; --draw: var(--g); }
.waves path { stroke: var(--teal); stroke-width: 1.3; stroke-linecap: round; }
.service-list { list-style: none; margin: 0; padding: 0; }
.svc { padding-block: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid rgba(90, 47, 21, .16); min-width: 0; }
.svc:last-child { border-bottom: 1px solid rgba(90, 47, 21, .16); }
.svc__name {
  display: inline; font-family: var(--font-heading); font-size: clamp(1.7rem, 3.3vw, 2.8rem); line-height: 1.12; color: var(--ink);
  --sw: 0;
}
.svc__name.swash::before { transition: transform 1.3s var(--ease); }
.svc.is-in .svc__name { --sw: 1; }
.svc:nth-child(5n+1) .svc__name { --swash-bg: var(--tex-pink); }
.svc:nth-child(5n+2) .svc__name { --swash-bg: var(--teal-soft); }
.svc:nth-child(5n+3) .svc__name { --swash-bg: rgba(255, 163, 24, .55); }
.svc:nth-child(5n+4) .svc__name { --swash-bg: var(--pink-soft); }
.svc:nth-child(5n+5) .svc__name { --swash-bg: var(--tex-teal); }
.svc:nth-child(5n+5) .svc__name.swash::before { opacity: .45; }
.svc__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin-top: .85rem;
  font-family: var(--font-subheading); font-weight: 500; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--grapefruit);
}
.svc__label i { width: 1.6rem; height: 1px; background: currentColor; opacity: .55; }
@media (max-width: 520px) { .svc__label { flex-direction: column; align-items: flex-start; gap: .3rem; } .svc__label i { display: none; } }
.svc__intro { max-width: 34rem; margin-top: .85rem; }
.svc__intro p + p { margin-top: .75rem; }

/* "How it works" dropdown inside each service */
.svc__how { margin-top: 1.1rem; max-width: 34rem; }
.svc__how summary {
  display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; list-style: none;
  font-family: var(--font-subheading); font-weight: 500; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brown); padding-block: .45rem; min-height: 44px; border-radius: 4px;
}
.svc__how summary::-webkit-details-marker { display: none; }
.svc__how summary > span { background: linear-gradient(var(--grapefruit), var(--grapefruit)) left bottom / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease); }
.svc__how summary:hover > span, .svc__how[open] summary > span { background-size: 100% 1.5px; }
.svc__how summary:focus-visible { outline: 2px solid var(--grapefruit); outline-offset: 4px; }
.svc__how summary i { position: relative; width: 11px; height: 11px; flex: none; }
.svc__how summary i::before, .svc__how summary i::after { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 1.5px; background: var(--grapefruit); transition: transform .35s var(--ease); }
.svc__how summary i::after { transform: rotate(90deg); }
.svc__how[open] summary i::after { transform: rotate(0deg); }
.svc__fruit { width: 30px; height: 30px; flex: none; --c: var(--svc); }
.svc__how summary:hover .svc__fruit { transform: rotate(18deg); }
.svc__fruit { transition: transform .6s var(--ease); }
.svc__body { padding-bottom: .4rem; }
.how { list-style: none; margin: .7rem 0 .2rem; padding: 0; }
.how__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1.1rem; padding-bottom: 1.6rem; position: relative; }
.how__step::after { content: ""; position: absolute; left: 22px; top: 50px; bottom: 6px; border-left: 1.2px dotted rgba(90, 47, 21, .35); }
.how__step:last-child { padding-bottom: .4rem; }
.how__step:last-child::after { display: none; }
.how__step .wheel { width: 44px; height: 44px; grid-row: span 3; }
.how__n { font-family: var(--font-subheading); font-weight: 500; font-size: .64rem; letter-spacing: .28em; color: var(--grapefruit); margin-top: .2rem; }
.how__step h4 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.15; color: var(--ink); margin: .2rem 0 0; text-wrap: balance; }
.how__step p { font-size: .95rem; line-height: 1.65; margin-top: .4rem; }
.how__step a { color: var(--teal-ink); text-decoration-color: rgba(47, 90, 96, .4); text-underline-offset: 3px; }
.svc__extra {
  position: relative; isolation: isolate; margin: 1.2rem 0 .4rem calc(44px + 1.1rem); padding: 1.15rem 1.3rem 1.25rem;
}
.svc__extra::before {
  content: ""; position: absolute; z-index: -1; inset: 0; background: var(--pink-soft); opacity: .55;
  -webkit-mask: var(--m-wash-1) center / 140% 160% no-repeat; mask: var(--m-wash-1) center / 140% 160% no-repeat;
}
.svc__extra h4 { font-family: var(--font-subtitle); font-style: italic; font-weight: 400; font-size: 1.25rem; color: var(--ink); margin: 0; }
.svc__extra p { font-size: .95rem; line-height: 1.65; margin-top: .45rem; }
.svc__outro { margin: 1rem 0 .4rem calc(44px + 1.1rem); font-family: var(--font-subtitle); font-style: italic; font-size: 1.15rem; line-height: 1.45; color: var(--ink); }

/* ---- grapefruits: grayscale until their service is read, then they bloom into color ----
   --bloom (0 → 1) is a registered number so it can transition smoothly. Without JS everything is in color. */
@property --bloom { syntax: "<number>"; inherits: true; initial-value: 1; }
.svc .wheel { --gray: calc(1 - var(--bloom)); }
/* Scroll-linked: site.js sets --bloom on each grapefruit from its position on screen, so the color
   arrives only as you scroll (and goes back if you scroll up). The short transition just smooths it. */
.js .svc__fruit, .js .how__step .wheel { --bloom: 0; transition: --bloom .3s linear, transform .6s var(--ease); }

/* ---- text reveals: a gentle rise, staggered ---- */
.js .svc > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .svc > :nth-child(2) { transition-delay: .1s; }
.js .svc > :nth-child(3) { transition-delay: .2s; }
.js .svc > :nth-child(4) { transition-delay: .3s; }
.js .svc.is-in > *, .js .svc:focus-within > * { opacity: 1; transform: none; }
.js .how__step > :not(.wheel), .js .svc__extra, .js .svc__outro {
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .6s var(--ease) calc(.15s + var(--i, 0) * .18s), transform .7s var(--ease) calc(.15s + var(--i, 0) * .18s);
}
.js .svc__extra, .js .svc__outro { --i: 3; }
.js .svc__how[open] .how__step > :not(.wheel), .js .svc__how[open] .svc__extra, .js .svc__how[open] .svc__outro { opacity: 1; transform: none; }
.svc__how.is-animating { overflow: hidden; }
.no-anim .svc, .no-anim .svc * { transition: none !important; }

/* =====================================================================
   4. SELECTED WORK — vertical by default, horizontal track on desktop
   ===================================================================== */
.work { padding-block: clamp(5rem, 10vw, 8rem); }
.work__stage { position: relative; }
.work__track { display: flex; flex-direction: column; gap: 4.5rem; padding-inline: var(--gutter); max-width: 1240px; margin-inline: auto; }
.work__intro { max-width: 34rem; }
.work__intro > p { margin-top: 1.4rem; }
.work__hint { display: none; }
.work__projects { display: flex; flex-direction: column; gap: 5rem; }
.proj { position: relative; margin: 0; --r: clamp(0, (var(--cp, 1) - .12) / .42, 1); }
.proj__media { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; }
.proj--wide .proj__media { aspect-ratio: 5 / 4.2; }
.proj__wash { z-index: 0; width: 78%; top: -9%; left: -12%; opacity: .6; transform: scale(calc(.25 + .75 * var(--r))); }
.proj:nth-child(even) .proj__wash { left: auto; right: -12%; top: auto; bottom: 8%; }
.proj__tag {
  position: absolute; z-index: 3; top: .9rem; left: .9rem;
  font-family: var(--font-subheading); font-weight: 500; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .45rem .7rem; border-radius: 999px; color: var(--brown); background: rgba(250, 246, 240, .88); border: 1px dashed rgba(90, 47, 21, .5);
}
.proj__cap {
  position: relative; z-index: 2; margin: -2.6rem 0 0 1.4rem; max-width: 23rem;
  background: var(--paper); padding: 1.1rem 1.3rem 1.25rem;
}
.proj__meta { font-family: var(--font-subheading); font-weight: 500; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brown); }
.proj__title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.2vw, 1.95rem); line-height: 1.1; color: var(--ink); margin-top: .4rem; }
.proj__rooms { font-family: var(--font-subtitle); font-style: italic; color: var(--teal-ink); margin-top: .3rem; }
.proj__summary { font-size: .95rem; line-height: 1.6; margin-top: .55rem; }
.work__end { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }

/* ---------- project gallery: the front photo bumps out, the rest wait blurred behind ---------- */
.gallery { position: relative; isolation: isolate; touch-action: pan-y; }
.gallery__track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.gallery__slide {
  position: absolute; inset: 0; margin: 0; background: var(--paper-deep);
  transition: transform .75s var(--ease), filter .75s var(--ease), opacity .6s var(--ease), box-shadow .75s var(--ease);
}
.gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__slide[data-pos="0"] { z-index: 3; transform: scale(1.03); box-shadow: 0 36px 60px -32px rgba(90, 47, 21, .55), 0 2px 0 rgba(90, 47, 21, .05); }
.gallery__slide[data-pos="1"], .gallery__slide[data-pos="-1"] { z-index: 2; opacity: .78; filter: blur(4px) saturate(.9); cursor: pointer; }
.gallery__slide[data-pos="1"] { transform: translateX(var(--peek, 30%)) scale(.82); }
.gallery__slide[data-pos="-1"] { transform: translateX(calc(-1 * var(--peek, 30%))) scale(.82); }
.gallery__slide[data-pos="2"], .gallery__slide[data-pos="-2"] { z-index: 1; opacity: 0; filter: blur(6px); pointer-events: none; }
.gallery__slide[data-pos="2"] { transform: translateX(calc(var(--peek, 30%) * 1.5)) scale(.7); }
.gallery__slide[data-pos="-2"] { transform: translateX(calc(var(--peek, 30%) * -1.5)) scale(.7); }
.gallery__slide[data-pos="far"] { display: none; }

.gallery__btn {
  position: absolute; z-index: 6; top: 50%; width: 52px; height: 52px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; overflow: hidden; isolation: isolate;
  background: #fff4ec; color: var(--brown); border: 1.5px solid var(--brown);
  box-shadow: 0 10px 22px -12px rgba(90, 47, 21, .6);
  transform: translateY(-50%); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.gallery__btn svg { position: relative; z-index: 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gallery__btn--prev { left: -26px; }
.gallery__btn--next { right: -26px; }
.gallery__btn:hover { background: var(--brown); color: #fff4ec; }
.gallery__btn:active { transform: translateY(-50%) scale(.92); }
.gallery__btn:focus-visible { outline: 2px solid var(--grapefruit); outline-offset: 4px; }
.gallery__btn.is-splashed { animation: g-btn .6s var(--ease); }
@keyframes g-btn { 30% { color: var(--brown); transform: translateY(-50%) scale(1.08); } }
.gallery__count {
  position: absolute; z-index: 5; top: .9rem; right: .9rem; margin: 0;
  font-family: var(--font-subheading); font-weight: 500; font-size: .62rem; letter-spacing: .22em;
  padding: .45rem .7rem; border-radius: 999px; color: var(--brown); background: rgba(255, 244, 236, .9);
}
/* the grapefruit splash lives in its own circular clipping layer inside the arrow button, so it can
   never paint outside the circle on any browser (desktop Safari ignores overflow + border-radius on
   masked, animated layers; clip-path and the mask below are honored everywhere) */
.gallery__ink {
  position: absolute; inset: 0; z-index: 0; border-radius: 50%; overflow: hidden; pointer-events: none;
  clip-path: circle(50% at 50% 50%);
  -webkit-mask-image: radial-gradient(circle, #000 69%, transparent 70.5%); mask-image: radial-gradient(circle, #000 69%, transparent 70.5%);
  transform: translateZ(0);
}
/* the grapefruit splash: blooms inside the arrow button, then fades back to cream */
.g-splash {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, #ff7a59 0%, #ff8f7a 34%, rgba(255, 163, 24, .8) 58%, rgba(255, 186, 186, .9) 74%),
    var(--tex-pink) center / cover;
  -webkit-mask: var(--m-reveal-1) center / contain no-repeat; mask: var(--m-reveal-1) center / contain no-repeat;
  translate: -50% -50%;
  animation: g-splash .85s var(--ease) forwards;
}
@keyframes g-splash {
  0% { transform: scale(.1) rotate(var(--rot, 0deg)); opacity: 1; }
  55% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
  100% { transform: scale(1.05) rotate(var(--rot, 0deg)); opacity: 0; }
}


@media (max-width: 899px) {
  .proj:nth-child(odd) { margin-right: 10%; }
  .proj:nth-child(even) { margin-left: 10%; }
}

.work.is-horizontal { height: var(--work-h, 420svh); padding-block: 0; }
.work.is-horizontal .work__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.work.is-horizontal .work__track {
  flex-direction: row; align-items: center; gap: 7vw; max-width: none; margin: 0;
  padding-inline: 8vw 10vw; padding-top: 4svh;
  transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform;
}
.work.is-horizontal .work__intro { flex: 0 0 min(30rem, 32vw); }
.work.is-horizontal .work__hint {
  display: flex; align-items: center; gap: .9rem; margin-top: 2.4rem;
  font-family: var(--font-subheading); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gray);
}
.work__hint i { width: 56px; height: 1px; background: currentColor; position: relative; }
.work__hint i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.work.is-horizontal .work__projects { flex-direction: row; align-items: center; gap: 7vw; }
.work.is-horizontal .proj { flex: 0 0 auto; }
.work.is-horizontal .proj__media { height: 56svh; width: auto; }
.work.is-horizontal .proj--wide .proj__media { height: 48svh; }
/* all cards on one line (orderly gallery, Oct 2026) — was a staggered -10svh / +14svh */
.work.is-horizontal .proj { margin-top: -10svh; top: -6svh; }
.work.is-horizontal .proj__cap { position: absolute; left: 1.4rem; top: calc(100% - 2.6rem); margin: 0; width: min(23rem, 100%); }
.work.is-horizontal .proj--wide .proj__cap { left: auto; right: -2.4rem; top: auto; bottom: calc(100% - 2.4rem); }
.work.is-horizontal .proj--wide .proj__tag { top: auto; bottom: .9rem; }
.work.is-horizontal .work__end { flex: 0 0 auto; padding-right: 4vw; }
.work.is-horizontal .proj--gallery { margin-inline: 6vw; }

/* =====================================================================
   5. ABOUT
   ===================================================================== */
.about { padding-block: clamp(6rem, 12vw, 11rem); --r: clamp(0, (var(--p) - .12) / .36, 1); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.portrait { position: relative; isolation: isolate; margin: 0; }
.portrait__world { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.portrait { --blot: url("../fx/blot-portrait-floral.webp"); --blot-rim: url("../fx/blot-portrait-floral-rim.webp"); --rim-tex: var(--tex-pink); }
.portrait__frame { aspect-ratio: 1100 / 1649; }
.portrait__frame img { object-position: 50% 30%; }
/* teal pigment starts hidden behind the photo, then spills out to the right */
.portrait__spill {
  width: 82%; right: -6%; top: 16%; opacity: .4;
  transform: translate3d(calc(-40% + var(--r) * 92%), 0, 0) scale(calc(.55 + .45 * var(--r))) rotate(18deg);
}
.portrait__sun { width: 44%; left: -16%; top: -8%; opacity: .45; transform: scale(calc(.2 + .8 * clamp(0, (var(--r) - .2) / .8, 1))); }
.portrait__wash { width: 70%; left: -18%; bottom: -10%; opacity: .7; transform: scale(calc(.3 + .7 * var(--r))); }
.about__words { position: relative; z-index: 2; min-width: 0; }
.about__words > p { margin-top: 1.3rem; max-width: 34rem; }
.about__words > .lede { margin-top: 2rem; }
.about__hello { line-height: .9; color: var(--ink); }
.about__hello span { display: block; font-family: var(--font-subtitle); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.6rem); margin-left: .2em; }
.about__hello em {
  display: block; font-style: normal; font-family: var(--font-brand); font-size: clamp(3.4rem, 9vw, 8rem); letter-spacing: .04em;
  color: color-mix(in oklab, var(--ink) calc((1 - var(--r)) * 100%), var(--grapefruit));
}
.signature { display: flex; flex-direction: column; gap: .2rem; margin-top: 2.2rem !important; }
.signature__name { font-family: var(--font-brand); font-size: 1.7rem; letter-spacing: .1em; color: var(--brown); }
.signature__role { font-family: var(--font-subheading); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gray); }

/* =====================================================================
   6. PROCESS
   ===================================================================== */
/* Choreography is driven per element by site.js: --lit on each stop (0→1, in order),
   --draw on the line (pigment front), --field / --fx / --fy for the wash. Defaults = fully painted. */
.process { padding-block: clamp(6rem, 12vw, 10rem); }
.process__stage { position: relative; }
.process .wrap { position: relative; z-index: 1; }
.process__field {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: min(140vw, 1700px); aspect-ratio: 1.6; pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask: var(--m-wash-3) center / 100% 100% no-repeat; mask: var(--m-wash-3) center / 100% 100% no-repeat;
}
.process__field-ink {
  position: absolute; inset: 0; background: var(--teal-soft); opacity: .38;
  -webkit-mask: var(--m-reveal-1) no-repeat; mask: var(--m-reveal-1) no-repeat;
  -webkit-mask-position: var(--fx, 50%) var(--fy, 50%); mask-position: var(--fx, 50%) var(--fy, 50%);
  -webkit-mask-size: calc(var(--field, 1) * 230%) auto; mask-size: calc(var(--field, 1) * 230%) auto;
}
.process.is-pinned { height: 360svh; padding-block: 0; }
.process.is-pinned .process__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.process.is-pinned .process__stage > .wrap { width: 100%; }
.process__head { max-width: 40rem; }
.river { position: relative; margin-top: clamp(3rem, 6vw, 5rem); }
.river__line { position: absolute; left: 0; top: 2px; width: 100%; height: 60px; overflow: visible; --draw: inherit; }
.river__line path { fill: none; stroke-linecap: round; }
.river__base { stroke: rgba(90, 47, 21, .32); stroke-width: 1.2; stroke-dasharray: 1.5 5; }
.river__wash, .river__ink { stroke: url(#river-pigment); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1)); }
.river__wash { stroke-width: 7; opacity: .26; }
.river__ink { stroke-width: 1.8; opacity: .9; }
.river__stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); position: relative; }
.stop { min-width: 0; position: relative; isolation: isolate; }
.stop__bloom { z-index: -1; width: 150px; left: -43px; top: -43px; transform: scale(calc(.12 + .88 * var(--lit, 1))); opacity: calc(var(--lit, 1) * 1.6); }
.stop__bloom.wash--yellow { opacity: calc(var(--lit, 1) * .5); }
.stop__bloom.wash--teal { opacity: calc(var(--lit, 1) * .55); }
.wheel { width: 64px; height: 64px; display: block; overflow: visible; background: var(--paper); border-radius: 50%; }
.wheel__fill { fill: color-mix(in oklab, #ddd6d0 calc(var(--gray, 0) * 100%), var(--c)); opacity: var(--lit, 1); transform-box: fill-box; transform-origin: center; transform: scale(calc(.35 + .65 * var(--lit, 1))); }
.wheel__rind, .wheel__seg path { fill: none; stroke: color-mix(in oklab, #9a928b calc(var(--gray, 0) * 100%), color-mix(in oklab, var(--ink) calc((1 - var(--lit, 1)) * 100%), #fff4ec)); stroke-width: 1.5; }
.wheel__seg path { stroke-width: 1.2; }
.stop__n { display: block; margin-top: 1.2rem; font-family: var(--font-subheading); font-weight: 500; font-size: .68rem; letter-spacing: .28em; color: color-mix(in oklab, var(--brown) calc((1 - var(--lit, 1)) * 100%), var(--grapefruit)); }
.stop h3 { font-family: var(--font-heading); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.15; color: var(--ink); margin-top: .35rem; }
.stop p { font-size: .95rem; line-height: 1.6; margin-top: .55rem; }
.stop a { color: var(--teal-ink); text-decoration-color: rgba(47, 90, 96, .4); text-underline-offset: 3px; }

/* =====================================================================
   7. FINALE
   ===================================================================== */
.finale { overflow: hidden; padding-block: clamp(7rem, 13vw, 11rem) 1.6rem; --g: clamp(0, (var(--p) - .02) / .36, 1); --a: clamp(0, (var(--p) - .1) / .3, 1); --a2: var(--a); }
.finale__paint { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.finale__tex {
  position: absolute; inset: 0; background: var(--tex-pink) center / cover;
  opacity: calc(.2 + .8 * var(--g));
  -webkit-mask: linear-gradient(to bottom, transparent, #000 26%); mask: linear-gradient(to bottom, transparent, #000 26%);
}
.finale__wash-a { width: min(56vw, 760px); left: -14vw; top: 10%; opacity: .55; mix-blend-mode: multiply; transform: scale(calc(.3 + .7 * var(--g))); }
.finale__wash-b { width: min(40vw, 560px); left: 50%; top: 4%; opacity: .5; transform: translateX(-50%) scale(calc(.2 + .8 * var(--g))); }
.finale__wash-c { width: min(50vw, 640px); right: -12vw; bottom: 2%; opacity: .9; transform: scale(calc(.3 + .7 * var(--g))); }
.finale__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.finale__mark { width: min(340px, 62vw); }
.finale__title { font-family: var(--font-heading); font-size: clamp(2.7rem, 7vw, 6.2rem); line-height: 1; color: var(--ink); margin-top: 2rem; text-wrap: balance; }
.finale__title em { font-family: var(--font-subtitle); color: var(--teal-ink); }
.finale__lede { margin-top: 1.4rem; max-width: 30rem; color: var(--ink); font-weight: 400; }
.finale__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2.2rem; }
.finale .btn--line { background: rgba(250, 246, 240, .5); }
.socials { list-style: none; padding: 0; margin: 3rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.socials a {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--fg); transition: transform .35s var(--ease);
}
.socials a:hover { transform: translateY(-3px) rotate(-6deg); }
.socials svg { width: 20px; height: 20px; }
.footer {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(4rem, 8vw, 7rem); padding-top: 1.4rem; border-top: 1px solid rgba(90, 47, 21, .25);
  font-family: var(--font-subheading); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brown);
}
.footer img { height: 52px; width: auto; }
.footer__area { display: inline-block; margin-top: .5rem; letter-spacing: .16em; opacity: .85; }
.footer a { text-decoration-color: rgba(90, 47, 21, .35); text-underline-offset: 4px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) { .nav__name { display: none; } }
@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
  .nav__bar { gap: .6rem; }
  .portal-btn { margin-left: auto; }
  .hero { height: 210svh; }
  .philosophy__grid, .services__grid, .about__grid { grid-template-columns: minmax(0, 1fr); }
  .philosophy__body { grid-template-columns: minmax(0, 1fr); }
  .arch { justify-self: center; max-width: min(290px, 70vw); margin-top: 4.5rem; }
  .arch__caption { margin-left: 0; text-align: center; font-size: 1.6rem; }
  .services__intro { position: relative; top: 0; }
  .portrait { width: min(400px, 82vw); margin-inline: auto; }
  /* calmer blot edges on phones/tablets so less of each photo is trimmed */
  .arch { --blot: url("../fx/blot-portrait-pink-m.webp"); }
  .portrait { --blot: url("../fx/blot-portrait-floral-m.webp"); }
  .river__line { display: none; }
  .river__stops { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stop { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 1.3rem; padding-bottom: 2.2rem; position: relative; }
  /* vertical connector: faint neutral thread, with pigment flowing down it toward the next stage */
  .stop::after { content: ""; position: absolute; left: 32px; top: 64px; bottom: 0; width: 0; border-left: 1.2px dotted rgba(90, 47, 21, .35); }
  .stop::before { content: ""; position: absolute; z-index: 1; left: 30.5px; top: 64px; bottom: 0; width: 4px; border-radius: 4px; background: linear-gradient(var(--c), var(--teal)); opacity: .55; transform-origin: top; transform: scaleY(var(--link, 1)); }
  .stop:last-child::before, .stop:last-child::after { display: none; }
  .stop__bloom { width: 120px; left: -28px; top: -28px; }
  .stop .wheel { grid-row: span 3; }
  .stop__n { margin-top: .3rem; }
}
@media (max-width: 520px) {
  .br-sm { display: inline; }
  .portal-btn { padding: .7rem .9rem; font-size: .64rem; letter-spacing: .16em; }
  .hero__cta .btn { padding: .9rem 1.25rem; }
  .proj:nth-child(odd), .proj:nth-child(even) { margin-inline: 0; }
  .proj__cap { margin-left: .8rem; }
  .gallery { --peek: 24%; }
  .gallery__slide[data-pos="0"] { transform: scale(.84); }
  .gallery__slide[data-pos="1"] { transform: translateX(var(--peek)) scale(.68); }
  .gallery__slide[data-pos="-1"] { transform: translateX(calc(-1 * var(--peek))) scale(.68); }
  .gallery__slide[data-pos="2"] { transform: translateX(calc(var(--peek) * 1.5)) scale(.58); }
  .gallery__slide[data-pos="-2"] { transform: translateX(calc(var(--peek) * -1.5)) scale(.58); }
  .gallery__btn { width: 46px; height: 46px; }
  .gallery__btn--prev { left: 2px; }
  .gallery__btn--next { right: 2px; }
  .proj--gallery .gallery__count { top: 9%; right: 10%; }
}
@media (max-height: 700px) and (min-width: 900px) { .hero__tagline { display: none; } }

/* =====================================================================
   REDUCED MOTION — keep the story, drop the movement
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero { height: auto; }
  .hero__stage { position: relative; height: auto; min-height: 92svh; padding-block: 2rem 4rem; }
  .scroll-cue, .drop, .splash, .g-splash { display: none; }
  .par, .hero__wordmark, .hero__inner { transform: none; }
  .js .svc > *, .js .how__step > :not(.wheel), .js .svc__extra, .js .svc__outro { opacity: 1; transform: none; }
}