/* ==========================================================================
   Sarto, "Editorial Color"
   --------------------------------------------------------------------------
   Warm gallery bone, near black, high contrast Didone display, clean sans
   body, and one saturated accent that moves as you scroll.

   Accent tokens are written by js/main.js every frame:
     --accent       true palette colour. Fills, rules, markers, swatches.
     --accent-ink   hue matched, contrast safe. ALL text, focus rings, and
                    any button fill carrying light text. Never below 4.6:1
                    on the bone base.
     --accent-tint  7 percent accent over bone. Section bands.
     --accent-soft  28 percent accent over bone. Hairlines.

   No em dashes or en dashes anywhere in this file, including comments.
   ========================================================================== */

/* ------------------------------------------------------------ 1. tokens */

:root {
  --bg:        #F5F2EC;
  --bg-deep:   #EFEBE2;
  --ink:       #16151A;
  --muted:     #6A6761;
  --line:      rgba(22, 21, 26, .13);
  --line-firm: rgba(22, 21, 26, .22);

  /* Seeded so the page is never unpainted. JS takes over on first frame. */
  --accent:      #B4553C;
  --accent-ink:  #A54E37;
  --accent-tint: #F1E9E2;
  --accent-soft: #DFC4B8;
  --accent-rgb:  180 85 60;

  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --sans:    'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-hero: clamp(3.1rem, 11.5vw, 10.5rem);
  --fs-dl:   clamp(2.5rem, 6.4vw, 5.75rem);
  --fs-dm:   clamp(2rem, 4vw, 3.4rem);
  --fs-ds:   clamp(1.45rem, 2.4vw, 2.1rem);
  --fs-lede: clamp(1.1rem, 1.45vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .8125rem;
  --fs-xs:   .6875rem;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --sec: clamp(5.5rem, 13vh, 10rem);
}

/* ------------------------------------------------------------- 2. reset */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  /* Faint plaster tooth. A painting company should not sit on flat colour. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.26'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; background: var(--ink); color: var(--bg);
  padding: .8rem 1.2rem; text-decoration: none;
  font-family: var(--mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .12em;
}
.skip:focus { top: 1rem; }

.noscript {
  max-width: 42rem; margin: 6rem auto; padding: 0 var(--pad);
  display: grid; gap: 1rem;
}

/* -------------------------------------------------------- 3. primitives */

.shell {
  width: 100%; max-width: 82rem;
  margin-inline: auto; padding-inline: var(--pad);
}
.shell--narrow { max-width: 54rem; }
.shell--mid    { max-width: 68rem; }
.shell--wide   { max-width: 94rem; }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -.021em;
  font-optical-sizing: auto;
}
.display--l { font-size: var(--fs-dl); }
.display--m { font-size: var(--fs-dm); }
.display em { font-style: italic; }
.display { text-wrap: balance; }
p, blockquote, figcaption { text-wrap: pretty; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--muted);
  max-width: 52ch;
}

.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent-ink);
  margin-bottom: 1.5rem;
}
.eyebrow--light { color: rgba(245, 242, 236, .88); }
.eyebrow--center { justify-content: center; text-align: center; }

.section-head { margin-bottom: clamp(2.75rem, 6vh, 4.5rem); }
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(1rem, 5vw, 5rem);
}
.section-head--split .eyebrow { margin-bottom: 0; }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
/* Headings that must read on one line where the width allows. The size is
   capped by viewport width so the line fits, and balance keeps any wrap on
   narrow phones to an even split with no lone word. */
.display--one { font-size: clamp(1.65rem, 6.1vw, var(--fs-dl)); text-wrap: balance; }

/* ------------------------------------------------ soft wash blots (depth) */
.wash-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wash {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(15rem, 30vw, 28rem); height: auto; aspect-ratio: 1;
  mix-blend-mode: multiply;
  overflow: visible; /* blots near the viewBox edge must not show a hard cut */
}
.wash--tl { left: 0; top: 0; transform: translate(-22%, -8%); }
.wash--br { right: 0; bottom: 0; transform: translate(22%, 14%); }
.wash--color { right: 0; top: clamp(38vh, 46vh, 30rem); transform: translate(26%, -30%); }
.wash--stage { left: 0; bottom: 0; transform: translate(-28%, 6%); }
.wash--why-tr { right: 0; top: 0; transform: translate(24%, -12%); }
.wash--why-bl { left: 0; bottom: 0; transform: translate(-26%, 20%); }
.wash--quotes { right: 0; top: 0; transform: translate(26%, -20%); width: clamp(14rem, 26vw, 24rem); }
.statement, .color, .why, .testimonials { position: relative; overflow-x: clip; }
.statement > .shell, .why > .shell, .testimonials > .shell, .color__intro, .color__grid { position: relative; z-index: 1; }

/* Brush stroke seam between Services and Selected Work, edge to edge. */
.stroke-sep { position: relative; height: clamp(1.4rem, 2.4vw, 2.4rem); margin-top: calc(var(--sec) * -1); margin-bottom: var(--sec); transform: translateY(-50%); }
.stroke-sep svg { display: block; width: 100%; height: 100%; }

.btn {
  display: inline-flex; align-items: center; gap: .8em;
  background: var(--accent-ink); color: #FDFCF9;
  border: 0; border-radius: 0; cursor: pointer;
  padding: 1.1em 2em;
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em; text-decoration: none;
  transition: background .45s ease, color .45s ease, transform .35s ease;
}
.btn::after {
  content: ''; width: .45em; height: .45em; flex: none;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .35s ease;
}
.btn:hover { background: var(--ink); transform: translateY(-2px); }
.btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.btn--sm { padding: .85em 1.5em; font-size: .75rem; }
.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: var(--accent-ink); color: #FDFCF9; }

/* ------------------------------------------------------------- 4. chrome */

.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120;
  background: transparent; pointer-events: none;
}
.progress__bar {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}

.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  transition: background .5s ease, border-color .5s ease, color .5s ease,
              transform .45s cubic-bezier(.4, 0, .2, 1);
  border-bottom: 1px solid transparent;
  color: var(--bg);
}
/* Retreats while reading down, returns the moment you scroll back up. */
.masthead.is-hidden { transform: translateY(-102%); }
.masthead__inner {
  max-width: 82rem; margin-inline: auto;
  padding: clamp(1rem, 2.2vh, 1.6rem) var(--pad);
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem);
}
.wordmark {
  display: inline-flex; align-items: center; gap: .58rem;
  font-family: var(--display); font-size: 1.6rem; letter-spacing: .02em;
  text-decoration: none; line-height: 1; margin-right: auto;
}
/* The chip is filled with var(--accent-ink), so the mark repaints along with
   the page and stays legible at every step of the palette. */
.wordmark__mark { width: 1.1em; height: 1.1em; flex: none; display: block; }
.wordmark__mark svg { width: 100%; height: 100%; display: block; }
.wordmark__text { display: block; }
.masthead__nav { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.masthead__nav a {
  font-family: var(--mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; opacity: .82;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: opacity .3s ease, border-color .3s ease;
}
.masthead__nav a:hover { opacity: 1; border-bottom-color: currentColor; }

.masthead.is-stuck {
  background: rgba(245, 242, 236, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  color: var(--ink);
}
.masthead__cta { background: transparent; color: currentColor; border: 1px solid currentColor; }
.cta-short { display: none; }
.masthead__cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #FDFCF9; transform: none; }

/* --------------------------------------------------------------- 5. hero */
/* Full bleed sticky video. Text sits above it on z-index, the parent clips,
   and the 260vh wrapper gives the sweep somewhere to travel. */

.hero { position: relative; height: 260vh; }
.hero__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: #2A2418;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 48% 50%;   /* center the big window in the frame */
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(16, 13, 10, .74) 0%, rgba(16, 13, 10, .34) 34%,
                    rgba(16, 13, 10, .04) 58%, rgba(16, 13, 10, .30) 100%),
    linear-gradient(to right, rgba(16, 13, 10, .34) 0%, rgba(16, 13, 10, 0) 55%);
}
.hero__content {
  position: absolute; z-index: 2;
  left: var(--pad); right: var(--pad);
  bottom: clamp(4.5rem, 13vh, 8.5rem);
  max-width: 60rem; color: var(--bg);
}
.hero__title {
  font-family: var(--display); font-weight: 400;
  font-size: var(--fs-hero);
  line-height: .855; letter-spacing: -.03em;
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}
.hero__title em { font-style: italic; }
.hero__sub {
  font-size: var(--fs-lede); line-height: 1.55;
  max-width: 34ch; color: rgba(245, 242, 236, .9);
  margin-bottom: clamp(2rem, 4vh, 2.75rem);
}
.hero__hint {
  position: absolute; z-index: 2;
  right: var(--pad); bottom: clamp(2rem, 5vh, 3rem);
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: .5625rem;
  text-transform: uppercase; letter-spacing: .2em;
  color: rgba(245, 242, 236, .62);
}
.hero__hint span {
  width: 2.5rem; height: 1px; background: rgba(245, 242, 236, .45);
  transform-origin: 0 50%; animation: sweep 3.2s ease-in-out infinite;
}
@keyframes sweep {
  0%, 100% { transform: scaleX(.25); opacity: .4; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/* ---------------------------------------------------------- 6. statement */
/* Narrow, contained, one idea. The body offsets right for asymmetry. */

.statement { padding-block: var(--sec); text-align: center; }
.statement__lead {
  font-family: var(--display); font-weight: 400;
  font-size: min(var(--fs-dl), 8.6vw); line-height: 1.0; letter-spacing: -.025em;
  white-space: nowrap;
}
.statement__lead em { font-style: italic; }
.statement__body {
  font-size: var(--fs-lede); line-height: 1.66; color: var(--muted);
  max-width: 46ch; margin: clamp(2.25rem, 5vh, 3.5rem) auto 0;
  text-wrap: pretty;
}

/* ------------------------------------------- 7. color, the signature */

.color { padding-bottom: clamp(2.5rem, 5vh, 3.5rem); }

.color__plate { width: 100%; height: clamp(38vh, 46vh, 30rem); overflow: hidden; }
.color__plate-img { width: 100%; height: 100%; object-fit: cover; }

.color__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  padding-block: var(--sec) clamp(1.25rem, 2.5vh, 2rem);
}
.color__intro .eyebrow { grid-column: 1 / -1; }
.color__intro { text-align: center; row-gap: clamp(1.25rem, 3vh, 2rem); }
.color__intro .eyebrow { justify-content: center; margin-bottom: 0; }
.color__intro .color__title { grid-column: 1 / -1; }
.color__intro .lede { grid-column: 1 / -1; margin-inline: auto; }
.color__intro .lede { padding-bottom: .4rem; }

/* The stage is tall so the traverse is unhurried. Its sticky child is one
   viewport tall, which is the geometry the accent anchors are derived from. */
.color__stage { position: relative; height: 320vh; }
/* Content height, pinned so it sits centred in the viewport. Being no taller
   than the wall itself, it follows the intro with no dead viewport above,
   and releases with no dead viewport below. */
.color__sticky {
  position: sticky; top: max(4.5rem, calc(50vh - 18.5rem));
  display: flex; align-items: center;
}
.color__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 2.05fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center; width: 100%;
}
.color__aside { grid-column: 1; grid-row: 1 / 3; }
.color__aside-text {
  font-size: var(--fs-sm); line-height: 1.7; color: var(--muted);
  max-width: 30ch; padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.color__now {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-size: var(--fs-ds);
  font-style: italic; margin-top: 1.75rem;
}
.color__now-dot {
  width: .62em; height: .62em; flex: none;
  background: var(--accent);
}
.color__hint {
  font-family: var(--mono); font-size: .5625rem;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin-top: 1.25rem;
}
.color__note {
  grid-column: 2; grid-row: 2; text-align: center;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  color: var(--muted); margin-top: 1.6rem;
}

.color__wall {
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.4rem, 1vw, 1rem);
  height: min(54vh, 30rem);
}
.swatch {
  display: flex; flex-direction: column;
  background: none; border: 0; padding: 0; cursor: pointer;
  text-align: left; height: 100%;
}
.swatch__chip {
  position: relative; flex: 1; overflow: hidden;
  /* The unpainted well. It fills, it does not just change colour. */
  background: rgba(22, 21, 26, .055);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.swatch__fill { position: absolute; inset: 0; will-change: clip-path; }
.swatch:hover .swatch__chip { transform: translateY(-6px); }
.swatch.is-active .swatch__chip {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(22, 21, 26, .2), 0 12px 30px -12px rgba(var(--accent-rgb) / .55);
}
.swatch:focus-visible { outline: none; }
.swatch:focus-visible .swatch__chip { outline: 2px solid var(--ink); outline-offset: 4px; }

.swatch__label {
  display: flex; flex-direction: column; gap: .1rem;
  padding-top: .8rem; align-items: center; text-align: center;
}
.swatch__name {
  font-family: var(--display); font-size: clamp(.72rem, 1.02vw, 1.05rem);
  line-height: 1.15;
}
.swatch__hex {
  font-family: var(--mono); font-size: .5625rem;
  letter-spacing: .08em; color: var(--muted);
}

/* ----------------------------------------------------------- 8. services */
/* Contained twelve column logic, which is deliberately unlike the split
   above it and the full bleed below it. */

.services { padding-block: var(--sec); background: var(--bg-deep); }
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.25rem, 4vh, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
}
/* Native 16:9. The source frames are 1672x941, so anything squarer than this
   is throwing away a quarter of the photograph. */
.card__media { overflow: hidden; aspect-ratio: 16 / 9; background: var(--line); }
.card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .card__img { transform: scale(1.045); }
.card__index {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .16em; color: var(--accent-ink);
  margin-top: 1.15rem;
}
.card__index::after { content: ''; flex: 1; height: 1px; background: var(--accent-soft); }
.card__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 1.75vw, 1.65rem); line-height: 1.15;
  margin-top: .55rem;
}
.card__body { color: var(--muted); font-size: .96rem; margin-top: .65rem; max-width: 36ch; }

/* ---------------------------------------------------------- 9. portfolio */
/* Full bleed. Rows are ORIENTATION PURE: a row holds either two landscapes or
   two portraits, never one of each. Two plates of equal width and equal aspect
   are necessarily equal height, so the dead column that appears when a 16:9
   sits beside a 3:4 cannot occur at any viewport width, and no photograph has
   to be cropped to force the match. */

.portfolio { padding-block: var(--sec); position: relative; }
.plates {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Row gap carries the rhythm between captioned rows, column gap stays tight. */
  gap: clamp(2rem, 4vw, 3.5rem) clamp(.5rem, 1vw, 1rem);
  align-items: start;
}
.plate__img {
  width: 100%; height: 100%; object-fit: cover;
  /* Crop is set per plate from content.js, so it stays tunable as data. */
  aspect-ratio: var(--plate-ratio, 16 / 9);
}
.plate--lead,
.plate--full { grid-column: 1 / -1; }
.plate--half { grid-column: span 6; }

.plate__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; text-align: center;
  gap: .45rem 1rem;
  padding: .95rem clamp(.5rem, 1vw, 1rem) 0;
}
.plate__title { font-family: var(--display); font-size: 1.05rem; }
.plate__place {
  font-family: var(--mono); font-size: .625rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}

/* ------------------------------------------------------------ 10. process */
/* Asymmetric split with a sticky rail, so it does not repeat the services
   grid logic or the portfolio bleed. */

.process { padding-block: var(--sec); }
/* The rail is as tall as the steps: the image grows to fill whatever the
   heading leaves, so its bottom edge lands on the bottom of the last step. */
.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;
}
.process__rail, .process__rail-inner { display: flex; flex-direction: column; height: 100%; }
.process__rail-inner .display--m { font-size: clamp(2rem, 3.3vw, 3.1rem); text-wrap: balance; }
.process__media { margin-top: clamp(2rem, 4vh, 3rem); flex: 1 1 auto; min-height: 22rem; overflow: hidden; position: relative; }
.process__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.steps { display: grid; gap: clamp(2.5rem, 6vh, 4.5rem); }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  border-top: 1px solid var(--line); padding-top: 1.75rem;
}
.step__n {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: .78;
  color: var(--accent-ink);
}
.step__title { font-family: var(--display); font-weight: 400; font-size: var(--fs-ds); line-height: 1.1; }
.step__body { color: var(--muted); margin-top: .7rem; max-width: 48ch; }

/* --------------------------------------------------------------- 11. why */

/* Top trimmed on review: the band seam already separates it from Process. */
.why { --why-pt: clamp(3.75rem, 8vh, 5.5rem); padding-block: var(--why-pt) var(--sec); }
.band-sep {
  position: relative; height: clamp(1.5rem, 2.5vw, 2.5rem);
  margin-top: calc(var(--why-pt) * -1); margin-bottom: var(--why-pt);
  transform: translateY(-50%); z-index: 1;
}
.band-sep svg { display: block; width: 100%; height: 100%; }
/* A ruled two by two, like a spec sheet: hairlines cross in the middle,
   each reason centered in its quadrant under its own line icon. */
.reasons {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 68rem; margin-inline: auto;
}
.reason {
  text-align: center;
  padding: clamp(2.25rem, 5vh, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; align-items: center;
}
.reason:nth-child(odd)  { border-right: 1px solid var(--line); }
.reason:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
/* Each icon sits on a paint chip: a tinted card with its colour strip
   along the foot, one palette colour per reason, like the swatch wall. */
.reason {
  --chip-bg: color-mix(in oklab, var(--chip, #B4553C) 8%, #F7F4EE);
}
.reason__badge {
  position: relative; overflow: hidden;
  width: 4.9rem; height: 5.6rem; display: grid; place-items: center;
  padding-bottom: .7rem;
  border-radius: 3px; color: var(--chip-ink, var(--accent-ink));
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--chip, #B4553C) 26%, transparent),
              0 14px 28px -18px color-mix(in oklab, var(--chip, #B4553C) 60%, transparent);
  margin-bottom: 1.5rem;
}
.reason__badge::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .7rem;
  background: var(--chip, var(--accent));
}
.reason__icon { width: 3rem; height: 3rem; }
.reason__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 1.95rem); line-height: 1.12; text-wrap: balance;
}
.reason__body { color: var(--muted); margin-top: .7rem; max-width: 40ch; text-wrap: pretty; }

/* ------------------------------------------------------ 12. testimonials */
/* Full bleed band tinted by the live accent, so the section itself repaints. */

.testimonials {
  padding-block: var(--sec);
  background: var(--accent-tint);
  transition: background .1s linear;
}
.quotes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.quote { text-align: center; display: flex; flex-direction: column; }
.quote::before {
  content: '\201C';
  display: block; font-family: var(--display); font-size: 4rem;
  line-height: .62; color: var(--accent); margin-bottom: .75rem;
}
.quote__text {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 1.85vw, 1.62rem); line-height: 1.42;
  flex: 1;
}
.quote__by { display: flex; flex-direction: column; gap: .15rem; margin-top: 1.5rem; align-items: center; }
.quote__name { font-size: .875rem; font-weight: 500; }
.quote__role {
  font-family: var(--mono); font-size: .625rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}

/* ----------------------------------------------------------- 13. contact */
/* Full bleed image band. The form sits in the photograph's own copy space. */

.contact {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(5rem, 13vh, 9.5rem);
  background: #413D2C;
}
.contact__media { position: absolute; inset: 0; z-index: -2; }
.contact__img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.contact__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(30, 27, 18, .22) 0%, rgba(30, 27, 18, .52) 42%, rgba(30, 27, 18, .74) 100%);
}
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.contact__panel { grid-column: 2; color: var(--bg); }
.contact__title { color: var(--bg); }
.contact__body {
  font-size: var(--fs-lede); line-height: 1.6;
  color: rgba(245, 242, 236, .82); max-width: 42ch; margin-top: 1.25rem;
}

.form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: clamp(2.25rem, 5vh, 3rem);
}
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--wide, .form__actions { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono); font-size: .5625rem;
  text-transform: uppercase; letter-spacing: .16em;
  color: rgba(245, 242, 236, .68);
}
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(245, 242, 236, .34);
  color: var(--bg); font-family: var(--sans); font-size: 1rem; font-weight: 300;
  padding: .55rem 0;
  transition: border-color .35s ease;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field select option { color: var(--ink); background: var(--bg); }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: rgba(245, 242, 236, .6); }
.field :focus-visible {
  outline: 2px solid var(--bg); outline-offset: 4px;
  border-bottom-color: var(--bg);
}
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: .75rem; }
.form__note {
  font-family: var(--mono); font-size: .5625rem;
  text-transform: uppercase; letter-spacing: .12em; line-height: 1.7;
  color: rgba(245, 242, 236, .6); max-width: 34ch;
}
.form__note.is-flagged { color: var(--bg); }

/* ------------------------------------------------------------ 14. footer */

.footer { padding-block: clamp(4rem, 9vh, 7rem) clamp(2rem, 4vh, 3rem); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 4vw, 3.5rem);
}
.footer__wordmark {
  font-family: var(--display); font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: .9; letter-spacing: -.02em;
}
.footer__line { color: var(--muted); margin-top: 1rem; max-width: 26ch; font-size: .9375rem; }
.footer__ct {
  font-family: var(--mono); font-size: .5625rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin-bottom: 1.1rem;
}
.footer__col li + li { margin-top: .55rem; }
.footer__col a, .footer__nap a {
  text-decoration: none; font-size: .9375rem;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.footer__col a:hover, .footer__nap a:hover { border-bottom-color: var(--accent); }
.footer__nap address {
  font-style: normal; display: flex; flex-direction: column;
  gap: .55rem; color: var(--muted); font-size: .9375rem;
}
.footer__bottom {
  margin-top: clamp(3rem, 7vh, 5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem;
}
.footer__fiction {
  font-family: var(--mono); font-size: .5625rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  white-space: nowrap;
}
.footer__credit {
  font-family: var(--mono); font-size: .5625rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent-ink);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.footer__credit .soak-mark {
  display: inline-block; width: 20px; height: 20px; flex: none;
  background-color: var(--accent);
  -webkit-mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat;
          mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat;
  opacity: .9; transition: opacity .2s ease;
}
.footer__credit:hover .soak-mark { opacity: 1; }
.footer__credit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 760px) {
  .footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
  .footer__fiction { white-space: normal; }
}

/* -------------------------------------------------------- 15. responsive */

@media (max-width: 1024px) {
  .process__rail, .process__rail-inner { height: auto; }
  .process__media { flex: none; aspect-ratio: 4 / 3; min-height: 0; max-width: none !important; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__grid { grid-template-columns: 1fr; }
  .process__rail-inner { position: static; }
  .process__media { max-width: 24rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__panel { grid-column: 1; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .color__grid { grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); }
}

@media (max-width: 860px) {
  .masthead__nav { display: none; }
  .color__intro { grid-template-columns: 1fr; align-items: start; }
  .color__intro .lede { grid-column: 1; }
  .color__stage { height: 290vh; }
  .color__sticky { top: 4.5rem; align-items: flex-start; }
  .color__grid { grid-template-columns: 1fr; }
  .color__aside { grid-column: 1; grid-row: 1; margin-bottom: 2rem; }
  .color__wall { grid-column: 1; grid-row: 2; height: min(42vh, 20rem); }
  .color__note { grid-column: 1; grid-row: 3; }
  .quotes { grid-template-columns: 1fr; }
  .reasons { grid-template-columns: 1fr; }
  .reason:nth-child(odd) { border-right: 0; }
  .reason:not(:last-child) { border-bottom: 1px solid var(--line); }
  .reason { padding-inline: .5rem; }
  .reason__title { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
  /* The 6+6 pairing still works here, about 380px a plate at 768. */
}

@media (max-width: 620px) {
  .hero { height: 240vh; }
  .cards { grid-template-columns: 1fr; }
  .card__body { max-width: none; }
  .form { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { grid-template-columns: 1fr; }
  .section-head--split { grid-template-columns: 1fr; gap: 1.25rem; }
  .plate--half { grid-column: 1 / -1; }
  .plate__cap { flex-direction: column; align-items: center; gap: .3rem; }
  .cta-full { display: none; }
  .cta-short { display: inline; }
  .masthead__cta { padding: .8em 1.1em; letter-spacing: .07em; }
  .wordmark { font-size: 1.4rem; }
  .swatch__hex { display: none; }
  .swatch__name { font-size: .625rem; letter-spacing: -.01em; }
  .color__wall { gap: .3rem; }
  .plate--lead .plate__img, .plate--full .plate__img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------- 16. reduced motion */
/* Accent holds one colour, swatches show filled, no scrub, no reveals, and
   the hero rests on the finished room rather than the drab poster. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero { height: 100vh; height: 100dvh; }
  .hero__sticky { position: relative; }
  .hero__hint { display: none; }
  .masthead.is-hidden { transform: none; }
  .color__stage { height: auto; }
  .color__sticky { position: relative; height: auto; }
  .swatch:hover .swatch__chip, .swatch.is-active .swatch__chip { transform: none; }
}

/* GSAP unavailable. Nothing may stay hidden. */
.no-gsap [data-reveal], .no-gsap [data-reveal-stagger] > * { opacity: 1 !important; }
.no-gsap .hero { height: 100vh; }
.no-gsap .color__stage { height: auto; }
.no-gsap .color__sticky { position: relative; height: auto; }

/* Mobile: two-column footer (list beside contact) to cut height; brand spans full width. */
@media (max-width: 619px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}