/* ==========================================================================
   SOCIAL HONEY
   Palette + type live at the top. Change a value here, it updates sitewide.
   ========================================================================== */

:root {
  /* --- Frame + neutrals --- (brand blue + brand beige) */
  --frame:  #ACC6D4;   /* BRAND — the blue border the whole site sits inside */
  --cream:  #F8F6EC;
  --white:  #FFFFFF;
  --beige:  #EBE9D6;   /* BRAND */
  --sand:   #DEDBC3;
  --ink:    #1C1917;
  --ink-mid:#524A45;

  /* --- Maroon (statement blocks) --- */
  --maroon:      #590F27;   /* BRAND */
  --maroon-deep: #430A1C;
  --maroon-soft: #7A1B3A;

  /* --- Pinks --- */
  --pink:      #F6D1D5;   /* BRAND */
  --pink-mid:  #F2A7B8;
  --pink-hot:  #EE6E8E;
  --pink-lt:   #FCEDEF;

  /* --- Greens --- */
  --brand-green: #B6B04C;  /* BRAND — the olive from your palette */
  --lime:    #D6DE52;      /* brighter sibling of the brand green, for buttons + bars */
  --lime-lt: #E9EE9C;
  --olive:   #3D4720;      /* deep olive, used sparingly */
  --plum:    #3A1120;      /* deep maroon-brown band */
  --outline: #5A2434;      /* warm dark outline — softer than black */
  --moss:    #6E7D3C;
  --sage:    #CBD08A;   /* tint of the brand green, not an off-palette sage */
  --sage-lt: #E6E9C9;

  /* --- Yellow --- */
  --yellow:    #FFF9A2;   /* BRAND */
  --yellow-mid:#FFF3C4;
  --yellow-lt: #FFFCE2;

  /* --- Type --- */
  --sans:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:  "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Homemade Apple", "Segoe Script", cursive;

  /* --- Layout --- */
  --max:   1320px;
  --gut:   clamp(1.25rem, 4vw, 3.5rem);
  --pad:   clamp(8px, 1.1vw, 16px);   /* thickness of the blue frame */
  --nav-h: 66px;
}

/* --------------------------------------------------------- reset + base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--pad) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: var(--pad);
  background: var(--frame);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.075rem);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.frame { background: var(--cream); }

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

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 800; line-height: 1.0; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 960px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--olive); color: #fff; padding: .75rem 1.25rem; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ==========================================================================
   THE SIGNATURE HEADLINE
   Bold uppercase sans, with <em> switching to elegant italic serif.
   <h2 class="mix">We cut through <em>the</em> noise</h2>
   ========================================================================== */
.mix {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 1.0;
}
.mix em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 1.12em;
  line-height: 0.9;
}
/* Second color for the two-tone statement blocks */
.mix .alt { color: var(--pink-hot); }
.mix em.alt { color: var(--pink-mid); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--maroon); margin: 0 0 1.1rem;
}
.eyebrow--center { text-align: center; }

/* Marker highlight. Painted as a background image so it can wipe across
   from nothing to full width when the line scrolls into view, and so it
   still works when a phrase wraps onto a second line. */
.mark {
  --mark: rgba(255, 249, 162, .72);
  color: var(--ink);
  padding: 0 .14em; margin: 0 -.14em;
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition: background-size .95s cubic-bezier(.2,.8,.3,1) .3s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mark--pink { --mark: rgba(246, 209, 213, .62); }
.anim-words.is-in .mark, .reveal.is-in .mark, .mark.is-in { background-size: 100% 100%; }

.script { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; }
.lede { font-size: 1.08em; color: var(--ink-mid); max-width: 62ch; }
.strike {
  position: relative; opacity: .5; font-weight: 400; text-decoration: none;
  font-family: var(--serif); font-style: italic; text-transform: none;
}
.strike::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%;
  height: .09em; background: var(--pink-hot); transform: rotate(-3deg);
}

/* --------------------------------------------------------- buttons */
.btn {
  position: relative; display: inline-block; isolation: isolate;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none;
  padding: 0.85rem 1.6rem; border: 2px solid var(--lime); border-radius: 999px;
  background: var(--lime); color: var(--ink); cursor: pointer; overflow: hidden;
  transition: color .28s ease, border-color .28s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--maroon); transform: translateY(101%);
  transition: transform .38s cubic-bezier(.2,.8,.3,1);
}
.btn:hover { color: var(--lime); border-color: var(--maroon); transform: translateY(-2px); }
.btn:hover::before { transform: translateY(0); }

.btn--dark  { background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
.btn--dark::before { background: var(--lime); }
.btn--dark:hover { color: var(--maroon); border-color: var(--lime); }

.btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.btn--outline::before { background: var(--lime); }
.btn--outline:hover { color: var(--ink); border-color: var(--lime); }

.btn--pink { background: var(--pink-hot); border-color: var(--maroon); color: #fff; }
.btn--pink::before { background: var(--maroon); }
.btn--pink:hover, .btn--pink:focus-visible { color: #fff; border-color: var(--maroon); }
.btn--pink:active { transform: translateY(0); }

/* Label swap: the second line rides up into place on hover. */
.btn--swap .btn__swap {
  display: block; position: relative; overflow: hidden;
  height: 1.15em; line-height: 1.15em;
}
.btn--swap .btn__swap span {
  display: block; height: 1.15em; line-height: 1.15em;
  transition: transform .42s cubic-bezier(.2,.8,.3,1);
}
.btn--swap:hover .btn__swap span,
.btn--swap:focus-visible .btn__swap span { transform: translateY(-100%); }

/* keep every button legible while it is being clicked */
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; padding-bottom: .35rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s cubic-bezier(.2,.8,.3,1);
}
.link-arrow::after { content: "\2192"; transition: transform .3s ease; }
.link-arrow:hover::after { transform: translateX(5px); }

/* --------------------------------------------------------- progress + nav */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--lime); z-index: 300; pointer-events: none;
}

.site-header {
  position: sticky; top: var(--pad); z-index: 200;
  background: var(--cream);
  border-bottom: 1.5px solid var(--outline);
  transition: transform .35s ease;
}
.site-header.is-hidden { transform: translateY(calc(-100% - var(--pad))); }

.nav { display: flex; align-items: center; gap: 1.5rem; min-height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; margin-right: auto; }
.brand img { width: 26px; transition: transform .4s cubic-bezier(.2,.8,.3,1); }
.brand:hover img { transform: rotate(-10deg) scale(1.1); }
.brand span {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); letter-spacing: .01em;
}

.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav-links > li > a {
  position: relative; font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none; padding-bottom: 3px;
}
.nav-links > li > a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--lime); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.nav-links > li > a:hover::after, .nav-links > li > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav-toggle {
  display: none; background: var(--lime); border: 2px solid var(--maroon); border-radius: 999px;
  font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: .55rem 1.05rem; cursor: pointer; color: var(--ink);
}

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1.5px solid var(--ink);
    padding: .25rem var(--gut) 1.5rem;
  }
  .nav-links[hidden] { display: none; }
  .nav-links li { border-top: 1px solid rgba(28,25,23,.15); }
  .nav-links > li > a { display: block; padding: 1rem 0; font-size: .95rem; }
  .nav-links > li > a::after { display: none; }
  .nav-links .btn { margin-top: 1rem; display: block; text-align: center; }
  .nav .btn--desktop { display: none; }
}
@media (min-width: 941px) { .nav-cta-mobile { display: none; } }

/* --------------------------------------------------------- sections */
.section { position: relative; padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--cream  { background: var(--cream); }
.section--beige  { background: var(--cream); }
/* One off-white across the site. A hairline separates neighbouring
   sections that share it, instead of a second near-identical cream. */
.section--paper  { background: var(--cream); border-top: 1.5px solid rgba(90,36,52,.16); }
/* true white, so it lifts off the cream page instead of blending into it */
.section--white  { background: var(--white); border-block: 1.5px solid rgba(90,36,52,.16); }

/* candy stripe divider */
.stripes {
  height: clamp(26px, 3.4vw, 40px);
  background: repeating-linear-gradient(90deg,
    var(--pink) 0 11px, var(--cream) 11px 22px);
  border-block: 1.5px solid var(--outline);
}
.hscroll.section--cream { border-top: 1.5px solid rgba(90,36,52,.16); }
.section--sand   { background: var(--sand); }
.section--pink   { background: var(--cream); }
.section--sage   { background: var(--cream); }
.section--blue   { background: var(--frame); }
.section--blue-lt{ background: var(--cream); }
.section--yellow { background: var(--cream); }
.section--butter { background: var(--yellow-mid); }
.section--lime   { background: var(--lime); }
.section--green  { background: var(--brand-green); }
.section--maroon { background: var(--maroon); color: var(--pink-lt); }
.section--olive  { background: var(--cream); }
.section--forest { background: var(--olive);  color: var(--sage-lt); }

.section--maroon h1, .section--maroon h2, .section--maroon h3,
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--cream); }
.section--maroon .eyebrow { color: var(--pink-mid); }
.section--forest .eyebrow { color: var(--lime); }
.section--maroon .lede, .section--forest .lede { color: inherit; opacity: .9; }

.section-head { max-width: 52ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head h2 { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.6rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   HERO — full-bleed photo, headline overlaid
   ========================================================================== */
.hero { position: relative; }   /* emblem overhangs onto the bar below */
.hero__media { position: relative; }
.hero__media img {
  width: 100%; height: clamp(440px, 76vh, 760px); object-fit: cover; object-position: 50% 42%;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,25,23,.62) 0%, rgba(28,25,23,.24) 42%, rgba(28,25,23,0) 72%);
}
.hero__inner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-bottom: clamp(1.75rem, 4vw, 3.25rem);
}
.hero h1 {
  color: var(--cream);
  font-size: clamp(2.4rem, 0.6rem + 7.4vw, 6.4rem);
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem;
}
.hero__kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); margin: 0; max-width: 22ch; line-height: 1.7;
}

/* Rotating circular sticker */
.sticker {
  position: absolute; right: clamp(1rem, 4vw, 3.5rem); bottom: clamp(-2.2rem, -3vw, -1.5rem);
  width: clamp(88px, 11vw, 130px); height: clamp(88px, 11vw, 130px);
  z-index: 12; border-radius: 50%; background: var(--cream);
  display: grid; place-items: center;
  /* struck-medal rings: thin dark edge, cream gap, dark outer keyline */
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 3.5px var(--cream), 0 0 0 5px var(--ink), 0 6px 22px rgba(28,25,23,.28);
}
.sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.sticker text { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; fill: var(--ink); }
.sticker__logo { width: 42%; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sticker svg { animation: none; } }

/* Interior page hero */
.page-hero { position: relative; background: var(--maroon); color: var(--pink-lt); padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem,5vw,4rem); }
.page-hero h1 { font-size: clamp(2.2rem, 1rem + 5.4vw, 5rem); color: var(--cream); margin: 0 0 1rem; }
.page-hero p { max-width: 60ch; margin: 0; opacity: .9; }
.page-hero .eyebrow { color: var(--pink-mid); }

/* ==========================================================================
   STATEMENT BLOCK — huge two-tone type on maroon
   ========================================================================== */
.statement { padding: clamp(3rem, 7vw, 6rem) 0; }
.statement p {
  font-size: clamp(1.5rem, 0.5rem + 3.9vw, 3.5rem);
  line-height: 1.06; margin: 0;
  color: var(--pink-hot);
}
.statement .alt { color: var(--cream); }
.statement em    { color: var(--pink); }
.statement em.alt{ color: var(--cream); }

/* --- Statement with a stack of prints ------------------------------- */
.statement--photos .wrap {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center;
}
.statement--photos p.mix { font-size: clamp(1.4rem, .7rem + 2.7vw, 2.9rem); }
@media (max-width: 900px) {
  .statement--photos .wrap { grid-template-columns: 1fr; }
}

/* small labels under the statement */
.stmt-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.4rem, 3vw, 2.1rem); }
.stmt-tag {
  display: inline-block; padding: .42rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--pink-mid); color: var(--pink);
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .28s ease, color .28s ease;
}
.stmt-tag:hover { background: var(--pink-mid); color: var(--maroon); }

/* prints, dropped on the band at angles */
.polas { position: relative; aspect-ratio: 1 / .92; }
@media (max-width: 900px) { .polas { aspect-ratio: 1 / .8; max-width: 520px; margin-inline: auto; } }

.pola-wrap { position: absolute; width: 50%; will-change: transform; }
.pola-wrap--1 { left: 0;     top: 8%;    z-index: 1; }
.pola-wrap--2 { right: 0;    top: 0;     z-index: 3; }
.pola-wrap--3 { left: 24%;   bottom: 0;  z-index: 2; }

.pola {
  margin: 0; background: var(--cream);
  padding: .55rem .55rem 2.3rem; border-radius: 2px;
  box-shadow: 0 16px 38px rgba(0,0,0,.38);
  transform: rotate(var(--r, 0deg));
  transition: transform .45s cubic-bezier(.2,.8,.3,1);
}
.pola-wrap--1 .pola { --r: -6.5deg; }
.pola-wrap--2 .pola { --r:  5deg; }
.pola-wrap--3 .pola { --r: -1.5deg; }
.pola:hover { transform: rotate(var(--r, 0deg)) translateY(-8px) scale(1.03); }
.pola img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pola figcaption {
  position: absolute; left: .55rem; right: .55rem; bottom: .55rem;
  text-align: center; line-height: 1.2;
  font-family: var(--script); font-weight: 400;
  font-size: clamp(.66rem, .6rem + .3vw, .84rem); color: var(--ink);
}

/* pressed wax seal */
/* a real pressed wax seal, recoloured into the brand */
.seal {
  position: absolute; left: -1%; bottom: 4%; z-index: 4;
  width: clamp(76px, 8.8vw, 112px);
  transform: rotate(-7deg);
  filter: drop-shadow(0 7px 16px rgba(0,0,0,.42));
  pointer-events: none;
}
.seal img { width: 100%; height: auto; }
@media (max-width: 900px) { .seal { left: 2%; } }

/* --------------------------------------------------------- marquee */
.marquee {
  background: var(--lime); color: var(--ink);
  padding: .85rem 0; overflow: hidden; white-space: nowrap;
  border-block: 1.5px solid var(--outline);
}
.marquee--pink   { background: var(--pink-mid); }
.marquee--blue   { background: var(--frame); }
.marquee--quiet  { background: var(--cream); }
.marquee--green  { background: var(--brand-green); }
.marquee--yellow { background: var(--yellow); }
.marquee--olive  { background: var(--olive); color: var(--lime); border-color: var(--lime); }
.marquee__track { display: inline-flex; gap: 2.25rem; will-change: transform; }
.marquee span { font-size: clamp(.8rem, .74rem + .3vw, .98rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.marquee em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.15em; }
.marquee .sep { opacity: .5; }

/* --------------------------------------------------------- file folders */
.folders {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) 1rem;
  max-width: 940px; margin: 0 auto;
}
@media (max-width: 820px) { .folders { grid-template-columns: repeat(2, 1fr); } }

.folder { display: block; text-decoration: none; text-align: center; }

.folder__icon {
  display: block; width: clamp(78px, 9.4vw, 112px); margin: 0 auto .75rem;
  filter: drop-shadow(0 4px 8px rgba(90,36,52,.16));
  transition: transform .4s cubic-bezier(.2,.8,.3,1), filter .25s ease;
}
.folder:hover .folder__icon {
  transform: translateY(-8px) rotate(-3deg);
  filter: drop-shadow(0 9px 14px rgba(90,36,52,.28));
}

.folder__label {
  display: inline-flex; align-items: flex-start; gap: .45rem;
  font-size: clamp(.76rem, .72rem + .25vw, .88rem); font-weight: 600;
  line-height: 1.3; text-align: left; color: var(--ink);
}
.folder__label::before {
  content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .38em;
  border-radius: 50%; background: var(--maroon);
}
.folder:nth-child(3n) .folder__label::before   { background: var(--pink-hot); }
.folder:nth-child(3n+2) .folder__label::before { background: var(--brand-green); }

/* hand-placed rhythm — margin, so it never fights the scroll reveal */
.folder:nth-child(1) { margin-top: 6px; }
.folder:nth-child(2) { margin-top: 38px; }
.folder:nth-child(3) { margin-top: 0; }
.folder:nth-child(4) { margin-top: 30px; }
.folder:nth-child(5) { margin-top: 26px; }
.folder:nth-child(6) { margin-top: 0; }
.folder:nth-child(7) { margin-top: 34px; }
.folder:nth-child(8) { margin-top: 10px; }
@media (max-width: 820px) { .folder { margin-top: 0 !important; } }

.folders__hint {
  grid-column: 1 / -1; justify-self: center; margin: 1.6rem 0 0;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.15rem; border-radius: 999px;
  background: var(--maroon); border: 2px solid var(--maroon);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream);
  animation: nudge 2.4s ease-in-out infinite;
}
.folders__hint::before { content: "\2192"; }
@keyframes nudge { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }
@media (prefers-reduced-motion: reduce) { .folders__hint { animation: none; } }

/* --------------------------------------------------------- partner strip */
.partners { background: var(--lime); border-block: 1.5px solid var(--ink); padding: clamp(1.5rem,3vw,2.25rem) 0; }
.partners__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.partners__head p { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.partners__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; align-items: center; }
.partners__row img { max-height: 34px; width: auto; margin-inline: auto; filter: grayscale(1) contrast(1.2); opacity: .85; }
.partner-slot {
  display: grid; place-items: center; min-height: 46px;
  border: 1.5px dashed rgba(28,25,23,.35); border-radius: 4px;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(28,25,23,.5); text-align: center; padding: .4rem;
}

/* --------------------------------------------------------- numbers band */
.numbers {
  position: relative; overflow: hidden;
  background: var(--cream); border-top: 1.5px solid rgba(90,36,52,.16);
}
.numbers > .wrap { position: relative; z-index: 1; }
.numbers__head { max-width: 46ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.numbers__head h2 { font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.2rem); margin: 0; }

/* --------------------------------------------------------- stats */
.stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1.5px solid currentColor; }
.stat {
  position: relative; overflow: hidden;
  padding: clamp(1.7rem,3.2vw,2.7rem) clamp(1rem,2vw,2rem) clamp(1.5rem,3vw,2.5rem);
  border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
}
.stat:last-child { border-right: 0; }

/* A brand-colour rule draws itself across each cell as it scrolls in */
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 7px;
  background: var(--maroon); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .85s cubic-bezier(.2,.8,.3,1);
  transition-delay: calc(var(--d, 0ms) + 120ms);
}
.stat.is-in::before { transform: scaleX(1); }
.stat:nth-child(2)::before { background: var(--pink-hot); }

/* labels in Playfair italic, the way prices and taglines are set everywhere else */
.numbers .stat__label {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(.95rem, .9rem + .35vw, 1.2rem);
  letter-spacing: 0; text-transform: none;
  color: var(--maroon); opacity: 1;
}

.stat__num { font-size: clamp(3rem, 1.6rem + 5.6vw, 6.2rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; margin: 0 0 .45rem; color: var(--maroon); font-variant-numeric: tabular-nums; }
.stat__label { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0; opacity: .75; }
@media (max-width: 640px) { .stat { border-right: 0; } }
@media (prefers-reduced-motion: reduce) { .stat::before { transform: scaleX(1); transition: none; } }

/* --------------------------------------------------------- numbered list */
.numbered { border-top: 1.5px solid currentColor; }
.numbered__item {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem 1.5rem;
  padding: clamp(1.25rem,2.5vw,1.9rem) 0; border-bottom: 1.5px solid currentColor;
  transition: padding-left .35s cubic-bezier(.2,.8,.3,1);
}
.numbered__item:hover { padding-left: .75rem; }
.numbered__num { font-size: .95rem; font-weight: 700; letter-spacing: .04em; opacity: .6; }
.numbered h3 { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .5rem; }
.numbered p { margin: 0; font-size: .95rem; color: inherit; opacity: .82; max-width: 62ch; }
@media (max-width: 560px) { .numbered__item { grid-template-columns: 1fr; gap: .4rem; } }

/* --------------------------------------------------------- split w/ overlay */
.duo { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

/* Copy on the left, photo on the right */
.duo--flip .duo__media { order: 2; }
.duo--flip .duo__panel { order: 1; }
@media (max-width: 900px) {
  .duo--flip .duo__media { order: 1; }
  .duo--flip .duo__panel { order: 2; }
}

.duo__media { position: relative; overflow: hidden; min-height: 420px; }
.duo__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.duo__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: space-between; padding: clamp(1.5rem,3vw,2.75rem);
}
.duo__overlay h2 { font-size: clamp(2rem, 1rem + 4vw, 4rem); color: var(--cream); margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.duo__overlay .foot { text-align: right; margin: 0; }
.duo__stamp {
  display: inline-block;
  background: var(--lime); color: var(--ink);
  border: 1.5px solid var(--maroon); border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(28,25,23,.35);
}

/* price line on the service rows */
.service__price {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, .92rem + .4vw, 1.25rem);
  color: var(--maroon); margin: 0 0 .6rem;
}
.section--maroon .service__price,
.section--forest .service__price { color: var(--lime); }
.duo__panel { padding: clamp(2rem, 4vw, 3.75rem); display: flex; flex-direction: column; justify-content: center; }

/* --------------------------------------------------------- cards */
.grid { display: grid; gap: 1.15rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

.card {
  background: var(--cream); border: 1.5px solid var(--outline); border-radius: 6px;
  padding: clamp(1.5rem, 2.5vw, 2.1rem);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 6px 6px 0 var(--outline); }
.card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .7rem; }
.card p { margin: 0; font-size: .95rem; color: var(--ink-mid); }
.card__num { font-family: var(--serif); font-style: italic; font-size: 2.2rem; line-height: 1; margin: 0 0 .7rem; color: var(--maroon); }
/* ONE definition — chartreuse pill, dark type. Never light-on-light,
   never dark-on-dark, whatever the card or section behind it. */
.card__role {
  display: inline-block; max-width: 100%;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.35;
  padding: .38rem .8rem; border-radius: 999px;
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--outline);
  margin: 0 0 .9rem;
}
/* Four brand fills, used identically on light and dark sections so nothing
   ever ends up as light text on a light card. */
/* One card, repeated. Recurring elements look identical on every page. */
.card--c1, .card--c2, .card--c3, .card--c4 { background: var(--pink); }

.card--c1, .card--c2, .card--c3, .card--c4 { color: var(--ink); border-color: var(--outline); }
.card--c1 h3, .card--c2 h3, .card--c3 h3, .card--c4 h3,
.section--olive .card--c1 h3, .section--olive .card--c2 h3,
.section--olive .card--c3 h3, .section--olive .card--c4 h3,
.section--maroon .card--c1 h3, .section--maroon .card--c2 h3,
.section--maroon .card--c3 h3, .section--maroon .card--c4 h3 { color: var(--ink); }
.card--c1 p, .card--c2 p, .card--c3 p, .card--c4 p,
.section--olive .card--c1 p, .section--olive .card--c2 p,
.section--olive .card--c3 p, .section--olive .card--c4 p,
.section--maroon .card--c1 p, .section--maroon .card--c2 p,
.section--maroon .card--c3 p, .section--maroon .card--c4 p { color: #2A2520; opacity: 1; }

.card--c1 .card__num { color: var(--maroon); }
.card--c2 .card__num { color: var(--maroon); }
.card--c3 .card__num { color: var(--maroon); }
.card--c4 .card__num { color: var(--maroon); }

/* an unstyled card on a dark band stays outlined, not filled */
.section--maroon .card:not([class*="card--c"]) { background: transparent; border-color: currentColor; }
.section--maroon .card:not([class*="card--c"]) p { color: inherit; opacity: .88; }
.section--maroon .card:hover { box-shadow: 6px 6px 0 var(--lime); }

/* --------------------------------------------------------- expertise blocks */
.expertise { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1rem; }
.exp {
  display: flex; flex-direction: column; min-height: 205px;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1.5px solid var(--outline); border-radius: 6px;
  color: var(--ink);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.exp:hover { transform: translateY(-6px); box-shadow: 6px 6px 0 var(--outline); }
.exp__num { font-family: var(--serif); font-style: italic; font-size: 2rem; line-height: 1; margin: 0 0 auto; }
.exp h3 { font-size: clamp(.95rem, .9rem + .25vw, 1.1rem); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 1.6rem 0 .5rem; }
.exp p { font-size: .89rem; line-height: 1.55; margin: 0; color: #2A2520; opacity: 1; }
.exp h3, .exp .exp__num { color: var(--ink); }

/* Calm default: cream card, maroon numeral, one short chartreuse rule.
   Used on light sections so the grid reads as one family, not six colors. */
.exp--plain { background: var(--pink); border-color: var(--outline); }
.exp--plain .exp__num { position: relative; padding-bottom: .6rem; color: var(--maroon); }
.exp--plain .exp__num::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.1rem; height: 3px; background: var(--maroon);
  transition: width .4s cubic-bezier(.2,.8,.3,1);
}
.exp--plain:hover .exp__num::after { width: 3.6rem; }
.exp--plain h3 { color: var(--ink); }
.exp--plain p  { color: #2A2520; }

.exp--plain:hover { box-shadow: 7px 7px 0 var(--maroon); }

.exp--lime   { background: var(--lime); }
.exp--pink   { background: var(--pink); }
.exp--maroon { background: var(--maroon); border-color: var(--plum); }
.exp--maroon h3, .exp--maroon .exp__num { color: var(--cream); }
.exp--maroon p  { color: var(--pink-lt); }
.exp--maroon:hover { box-shadow: 6px 6px 0 var(--lime); }

/* --------------------------------------------------------- file folder */
/* Real paper: a seamless grain tile multiplied over a brand colour, so the
   texture is photographic but the colour stays ours. --tone sets the stock. */
.papered {
  background-color: var(--tone, var(--beige));
  background-image: url("../img/paper-grain.jpg");
  background-size: 340px 340px;
  background-blend-mode: multiply;
}

.tabs { max-width: 1020px; }

.tabs__row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  margin: 0 0 -1.5px; padding-left: clamp(.5rem, 2vw, 1.75rem);
}

.tab {
  position: relative; z-index: 1;
  font-family: var(--script); font-weight: 400;
  font-size: clamp(.78rem, .72rem + .35vw, .98rem); line-height: 1;
  color: var(--ink); cursor: pointer;
  --tone: var(--beige);
  background-color: var(--tone);
  background-image: url("../img/paper-grain.jpg");
  background-size: 340px 340px; background-blend-mode: multiply;
  border: 1.5px solid var(--outline); border-radius: 10px 10px 0 0;
  padding: .9rem 1.2rem .75rem;
  margin-right: -1.5px;
  box-shadow: 0 -2px 5px rgba(90,36,52,.07);
  transition: background-color .25s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.tab:nth-child(1) { margin-bottom: 0; }
.tab:nth-child(2) { margin-bottom: 5px; }
.tab:nth-child(3) { margin-bottom: 2px; }
.tab:nth-child(4) { margin-bottom: 7px; }
.tab:nth-child(5) { margin-bottom: 1px; }
.tab:nth-child(6) { margin-bottom: 4px; }
.tab:hover { --tone: var(--pink-lt); }
.tab[aria-selected="true"] {
  z-index: 5; --tone: var(--pink);
  border-bottom-color: var(--pink);
  margin-bottom: 0 !important; transform: translateY(-3px);
}
.tab:focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; z-index: 6; }

/* the folder itself */
.tabs__body {
  position: relative; z-index: 2;
  perspective: 1700px;
  border-radius: 0 10px 10px 10px;
}

/* the sheet of paper inside */
.tabs__inside {
  --tone: var(--cream);
  border: 1.5px solid var(--outline); border-radius: 0 10px 10px 10px;
  padding: clamp(1.7rem, 3.6vw, 2.9rem) clamp(1.4rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(190px, 22vw, 262px);
  grid-template-rows: auto auto;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
  box-shadow: inset 0 2px 14px rgba(90,36,52,.08);
}
.tabs__stack { grid-column: 1; grid-row: 1; display: grid; }
.tabs__notes { grid-column: 2; grid-row: 1 / span 2; display: grid; }
@media (max-width: 760px) {
  .tabs__inside { grid-template-columns: minmax(0,1fr); }
  .tabs__stack, .tabs__notes { grid-column: 1; grid-row: auto; }
}
.tabpanel {
  grid-area: 1 / 1; max-width: 58ch;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.3,1);
}
.tabs[data-open="true"] .tabpanel[data-active] {
  opacity: 1; visibility: visible; transform: none; transition-delay: .3s;
}
.tabpanel__num {
  font-family: var(--serif); font-style: italic; font-size: 1.7rem;
  line-height: 1; color: var(--maroon); margin: 0 0 .9rem;
}
.tabpanel h3 {
  font-size: clamp(1.1rem, .95rem + .8vw, 1.6rem); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink); margin: 0 0 .7rem;
}
.tabpanel p { margin: 0; color: #2A2520; font-size: 1rem; line-height: 1.6; }

.tabs__close {
  grid-column: 1; grid-row: 2; justify-self: start;
  font-family: var(--script); font-size: .9rem; color: var(--maroon);
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  border-bottom: 1.5px solid var(--maroon);
  opacity: 0; visibility: hidden; transition: opacity .4s ease .35s;
}
.tabs[data-open="true"] .tabs__close { opacity: 1; visibility: visible; }
.tabs__close:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* the cover that swings open */
.tabs__cover {
  position: absolute; inset: 0; z-index: 4;
  --tone: var(--beige);
  border: 1.5px solid var(--outline); border-radius: 0 10px 10px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: 2rem;
  transform-origin: 50% 0%; transform: rotateX(0deg);
  backface-visibility: hidden;
  box-shadow: 0 10px 26px rgba(90,36,52,.16);
  transition: transform .85s cubic-bezier(.34,.9,.32,1), opacity .45s ease .3s;
}
/* the crease along the bottom of the cover */
.tabs__cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: clamp(.7rem, 1.5vw, 1.1rem);
  height: 1px; background: rgba(90,36,52,.3); box-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.tabs[data-open="true"] .tabs__cover {
  transform: rotateX(-114deg); opacity: 0; pointer-events: none;
}
/* a real bulldog clip, pinned to the corner of the folder */
.tabs__clip {
  position: absolute; z-index: 7; pointer-events: none;
  top: clamp(-30px, -2.4vw, -18px);
  right: clamp(2.5rem, 9vw, 5.5rem);
  width: clamp(72px, 8vw, 108px); height: auto;
  filter: drop-shadow(0 5px 11px rgba(90,36,52,.34));
}
@media (max-width: 620px) { .tabs__clip { right: 1rem; width: 64px; } }

/* the sheet the clip is holding */
.note {
  grid-area: 1 / 1;
  --tone: var(--cream);
  background-color: var(--tone);
  background-image: url("../img/paper-grain-coarse.jpg");
  background-size: 300px 300px; background-blend-mode: multiply;
  border: 1.5px solid var(--outline); border-radius: 3px;
  padding: clamp(1.9rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.3rem);
  transform: rotate(-1.4deg);
  box-shadow: 0 8px 20px rgba(90,36,52,.17);
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease;
}
.tabs[data-open="true"] .note[data-active] { opacity: 1; visibility: visible; transition-delay: .42s; }
.note p {
  margin: 0; font-family: var(--script); font-weight: 400;
  font-size: clamp(.76rem, .7rem + .3vw, .92rem); line-height: 1.85; color: var(--ink);
}
.note__tag {
  display: block; margin: 0 0 .7rem;
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--maroon);
}
@media (max-width: 760px) { .note { transform: none; } }

.tabs__mark { width: clamp(44px, 5vw, 62px); height: auto; opacity: .9; }
.tabs__hint {
  margin: 0; font-family: var(--script); font-size: clamp(.9rem, .85rem + .3vw, 1.1rem);
  color: var(--maroon);
}

@media (max-width: 620px) {
  .tab { padding: .75rem .85rem .6rem; margin-bottom: 0 !important; }
  .tabs__inside, .tabs__cover { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tab, .tabpanel, .tabs__cover, .tabs__close { transition: none; }
  .tab[aria-selected="true"] { transform: none; }
  .tabs__cover { display: none; }
  .tabs .tabpanel[data-active] { opacity: 1; visibility: visible; transform: none; }
  .tabs .tabs__close { opacity: 1; visibility: visible; }
}

/* --------------------------------------------------------- services rows */
.service {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem clamp(1rem,3vw,2.5rem);
  align-items: start; padding: clamp(1.6rem,3.5vw,2.6rem) 0; border-top: 1.5px solid currentColor;
  transition: padding-left .35s cubic-bezier(.2,.8,.3,1);
}
.service:last-child { border-bottom: 1.5px solid currentColor; }
.service:hover { padding-left: .9rem; }
.service__num { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem,2.5vw,2.3rem); line-height: 1; color: var(--maroon); }
.service:nth-child(2n) .service__num { color: var(--maroon); }
.section--maroon .service__num,
.section--maroon .service:nth-child(2n) .service__num { color: var(--lime); }
.service h3 { font-size: clamp(1.3rem, .95rem + 1.6vw, 2.1rem); font-weight: 800; text-transform: uppercase; margin-bottom: .6rem; }
.service p { max-width: 60ch; opacity: .9; }
.service .tagline { font-family: var(--serif); font-style: italic; font-size: 1.15rem; text-transform: none; margin: .55rem 0 0; opacity: 1; }
/* perforated stamp edge. If a browser skips the mask it just renders as a
   plain cream-bordered photo, so nothing breaks. */
.service__thumb {
  --s: 7px;
  width: 142px; padding: 9px; background: var(--cream); border-radius: 0;
  -webkit-mask:
    radial-gradient(circle closest-side, #000 98%, #0000) 0 0 / var(--s) var(--s) round,
    linear-gradient(#000 0 0) 50% / calc(100% - var(--s)) calc(100% - var(--s)) no-repeat;
  mask:
    radial-gradient(circle closest-side, #000 98%, #0000) 0 0 / var(--s) var(--s) round,
    linear-gradient(#000 0 0) 50% / calc(100% - var(--s)) calc(100% - var(--s)) no-repeat;
}
.service__thumb img { aspect-ratio: 1/1; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.service:hover .service__thumb img { transform: scale(1.07); }
@media (max-width: 780px) { .service { grid-template-columns: 1fr; } .service__thumb { width: 100%; max-width: 210px; } }

/* --------------------------------------------------------- media + lists */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.split--center { align-items: center; }

.media { position: relative; overflow: hidden; border-radius: 6px; }
.media img { width: 100%; object-fit: cover; }
.media--tall img { aspect-ratio: 3/4; }
.media--wide img { aspect-ratio: 3/2; }
.media--arch { border-radius: 999px 999px 6px 6px; }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.strip img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.tick-list li { position: relative; padding-left: 1.6rem; opacity: .88; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .7rem; height: .7rem;
  background: url("../img/pearl.png") center/contain no-repeat;
}

.sticky-col { position: sticky; top: calc(var(--nav-h) + var(--pad) + 2rem); }
@media (max-width: 900px) { .sticky-col { position: static; } }

/* --------------------------------------------------------- FAQ */
.faq { border-top: 1.5px solid currentColor; }
.faq details { border-bottom: 1.5px solid currentColor; }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  font-size: clamp(1rem,.92rem+.4vw,1.2rem); font-weight: 700; letter-spacing: .02em;
  padding: 1.35rem 3rem 1.35rem 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: .95rem; height: 2px; background: currentColor; transform: translateY(-50%); }
.faq summary::before { content: ""; position: absolute; right: .875rem; top: 50%; width: 2px; height: .95rem; background: currentColor; transform: translateY(-50%); transition: transform .3s ease, opacity .3s ease; }
.faq details[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq details p { padding: 0 0 1.4rem; opacity: .82; max-width: 72ch; }

/* --------------------------------------------------------- form */
.form { display: grid; gap: 1.1rem; max-width: 560px; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; padding: .85rem 1rem;
  border: 1.5px solid var(--outline); border-radius: 4px; background: var(--cream); color: var(--ink);
  transition: box-shadow .2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--lime); }
.form-note { font-size: .85rem; opacity: .75; }
.hp { position: absolute; left: -9999px; }

/* --------------------------------------------------------- CTA + footer */
.cta-band { text-align: center; padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--cream); border-top: 1.5px solid rgba(90,36,52,.16); }
.cta-band h2 { font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); }
.cta-band p { max-width: 52ch; margin-inline: auto; }
.cta-band .btn { margin-top: 1.6rem; }

.site-footer { background: var(--frame); color: var(--ink); padding: clamp(3rem,6vw,4.5rem) 0 1.75rem; }
.site-footer a { text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: var(--maroon); }
/* oversized wordmark, clipped by its own box so it runs off the edges */
.footer-mark {
  pointer-events: none; text-align: center;
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
}
.footer-mark span {
  display: block; white-space: nowrap; line-height: 1.05;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  text-transform: none;
  /* sized to sit inside the viewport — nothing is cut off */
  font-size: min(11.5vw, 9rem); letter-spacing: -.01em;
  color: rgba(89, 15, 39, .085);
}

.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.site-footer h4 { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--maroon); margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .92rem; }
.footer-brand img { width: 40px; margin-bottom: 1rem; }
.footer-brand p { font-size: .92rem; max-width: 32ch; color: #2A2520; }
.footer-bottom {
  margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid rgba(28,25,23,.25);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #2A2520;
}

/* ==========================================================================
   SCROLL ANIMATION
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.8,.3,1), transform .75s cubic-bezier(.2,.8,.3,1); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--left  { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--scale { transform: scale(.95); }
.reveal--left.is-in, .reveal--right.is-in, .reveal--scale.is-in { transform: none; }

/* Words rise into place, one after another */
.w-rise {
  display: inline-block; opacity: 0;
  transform: translateY(.42em);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.85,.25,1);
  transition-delay: var(--d, 0ms);
}
.anim-words.is-in .w-rise { opacity: 1; transform: none; }

/* Photo curtain wipe */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after {
  content: ""; position: absolute; inset: 0; background: var(--curtain, var(--cream));
  transform-origin: 100% 50%; transform: scaleX(1); z-index: 2;
  transition: transform .95s cubic-bezier(.75,0,.2,1);
}
.img-reveal.is-in::after { transform: scaleX(0); }
.img-reveal img { transform: scale(1.15); transition: transform 1.4s cubic-bezier(.2,.8,.3,1); }
.img-reveal.is-in img { transform: scale(1); }

.section--maroon .img-reveal { --curtain: var(--maroon); }
.section--beige  .img-reveal { --curtain: var(--cream); }
.section--pink   .img-reveal { --curtain: var(--cream); }
.section--sage   .img-reveal { --curtain: var(--cream); }
.section--sand   .img-reveal { --curtain: var(--sand); }

.parallax { will-change: transform; }

/* ==========================================================================
   SCROLL-DRIVEN SECTIONS
   ========================================================================== */

/* --- 1. Video bands ------------------------------------------------- */
.vband { position: relative; overflow: hidden; background: var(--plum); }
.vband--img img.vband__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.vband--tall  { height: clamp(420px, 68vh, 660px); }
.vband--short { height: clamp(300px, 44vh, 440px); }
.vband video, .vband img.vband__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.vband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(58,17,32,.78) 0%, rgba(58,17,32,.30) 45%, rgba(58,17,32,.10) 100%);
}
.vband__inner {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.vband h2 { color: var(--cream); font-size: clamp(1.9rem, 1rem + 4vw, 4.2rem); margin: 0 0 .6rem; }
.vband p  { color: var(--pink-mid); max-width: 46ch; margin: 0;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.vband__tag {
  position: absolute; top: clamp(1rem,3vw,2rem); left: 0; right: 0; z-index: 2;
}
.vband__pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--lime); color: var(--ink);
  border-radius: 999px; padding: .45rem 1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.vband__pill::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--maroon);
  animation: blip 1.6s ease-in-out infinite;
}
@keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* --- 2. Horizontal rail driven by vertical scroll -------------------- */
.hscroll { position: relative; }
.hscroll__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hscroll__track { display: flex; gap: clamp(.8rem, 2vw, 1.4rem); padding-inline: var(--gut); will-change: transform; }
.hscroll__item { flex: 0 0 clamp(230px, 26vw, 380px); }
.hscroll__item img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px;
  border: 1.5px solid var(--outline);
}
.hscroll__item figcaption {
  margin-top: .7rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mid);
}
.hscroll__lead { flex: 0 0 clamp(260px, 30vw, 420px); align-self: center; }
.hscroll__lead h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.2rem); margin-bottom: .8rem; }
.hscroll__lead p { color: var(--ink-mid); }
@media (max-width: 760px) {
  /* on phones a plain swipe rail beats a pinned one */
  .hscroll__pin { position: static; height: auto; }
  .hscroll__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 1rem; transform: none !important; }
  .hscroll__item { scroll-snap-align: start; }
}

/* --- 3. Statement text that colors in as you scroll ----------------- */
.statement .fill-word { color: rgba(238,110,142,.22); transition: color .25s linear; }
.statement .fill-word.lit { color: var(--pink-hot); }
.statement .fill-word.lit.is-alt { color: var(--cream); }
.statement em.fill-word.lit { color: var(--pink); }

/* --- 4. Sticky media column ------------------------------------------ */
.stickypair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
@media (max-width: 900px) { .stickypair { grid-template-columns: 1fr; } }
.stickypair__media { position: sticky; top: calc(var(--nav-h) + var(--pad) + 2rem); }
@media (max-width: 900px) { .stickypair__media { position: static; } }
.stickypair__media .frame-img { position: relative; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--outline); }
.stickypair__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.stickypair__steps > * + * { margin-top: clamp(2rem, 6vw, 4.5rem); }

/* --- 5. Tilt-in cards ------------------------------------------------ */
.reveal--tilt { opacity: 0; transform: translateY(30px) rotate(-2deg) scale(.97); }
.reveal--tilt.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hscroll__pin { position: static; height: auto; }
  .hscroll__track { transform: none !important; overflow-x: auto; }
  .statement .fill-word { color: var(--pink-hot); }
  .statement .fill-word.is-alt { color: var(--cream); }
  .vband__pill::before { animation: none; }
  .reveal--tilt { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .w-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .img-reveal::after { display: none; }
  .img-reveal img { transform: none !important; }
  .marquee__track { transform: none !important; }
  html { scroll-behavior: auto; }
  .card:hover, .btn:hover, .scatter a:hover { transform: none; }
}

/* ==========================================================================
   SPOTLIGHT
   A soft warm pool of light that trails the pointer and gently lifts
   whatever sits under it — strongest over the maroon band and the photo
   sections, almost invisible on cream, which is the point. The real cursor
   stays visible, so nothing about clicking or reading changes.
   Mouse only; js adds .has-spot.
   ========================================================================== */
.spotlight {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 420px; height: 420px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  transform: translate3d(-50%, -50%, 0); will-change: transform;
  background: radial-gradient(circle closest-side,
    rgba(255, 252, 226, .58) 0%,
    rgba(255, 249, 162, .30) 36%,
    rgba(255, 249, 162, .11) 62%,
    rgba(255, 249, 162, 0)   100%);
  mix-blend-mode: soft-light;
  transition: opacity .4s ease, width .35s cubic-bezier(.2,.8,.3,1),
              height .35s cubic-bezier(.2,.8,.3,1);
}
.has-spot .spotlight { opacity: 1; }
/* widens over anything clickable */
.spotlight.is-hot { width: 540px; height: 540px; }

@media (prefers-reduced-motion: reduce) {
  .spotlight { display: none; }
  .mark { background-size: 100% 100%; transition: none; }
}