/* =========================================================================
   STONE & FELL — Design & Build
   Palette "Limewash & Lakeland Slate", sampled from the approved logo
   (stoneandfell_logo_v3.png). Light-dominant; dark used as punctuation.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root{
  /* Limewash — the ground. Sampled from the logo mark fill. */
  --limewash:    #F1ECE3;
  --limewash-2:  #E6E0D4;
  --limewash-3:  #D7D0C1;

  /* Lakeland slate — the ink. Sampled from the logo background. */
  --slate:       #232C32;
  --slate-2:     #33404A;
  --slate-3:     #4A555C;

  /* Green. Three steps, and they are NOT interchangeable:
     --sage-logo is the logo's own ampersand green, sampled from the artwork.
       Mark fills and decoration only — as text on slate it reaches just 4.14:1.
     --sage is the text-safe version for anything on a dark ground (4.8:1).
     --westmorland is the text-safe version on a light ground (5.35:1).
       On limewash the logo green manages only 2.95:1, so never use it there. */
  --sage-logo:   #7F906E;
  --sage:        #8B9C7A;
  --westmorland: #55684F;
  --westmorland-d:#405039;

  /* Bracken — the warm second note. Deep variant for small text. */
  --bracken:     #A05A2C;
  --bracken-d:   #8A4A22;

  /* Tarn — captions and metadata. Already darkened to clear AA. */
  /* Darkened from #5E6B70, which cleared AA on limewash but dropped to 4.19:1
     on the deeper --limewash-2 ground. This value clears both. */
  --tarn:        #556166;
  --tarn-pale:   #9AA5A9;

  --serif: "Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --roman: "Marcellus","Palatino Linotype",Palatino,Georgia,serif;
  --sans:  "Hanken Grotesk","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  /* Fluid scale, 360 → 1600 */
  --fs-display: clamp(2.5rem,1.1rem + 6vw,6rem);
  --fs-h1:      clamp(2.1rem,1.2rem + 4vw,4.4rem);
  --fs-h2:      clamp(1.7rem,1.15rem + 2.4vw,3.1rem);
  --fs-h3:      clamp(1.15rem,1rem + .8vw,1.6rem);
  --fs-lede:    clamp(1.05rem,.98rem + .55vw,1.4rem);
  --fs-body:    clamp(.97rem,.94rem + .2vw,1.05rem);
  --fs-small:   clamp(.8rem,.78rem + .1vw,.87rem);
  --fs-micro:   .68rem;

  --gutter:    clamp(1.25rem,.4rem + 3.6vw,4.5rem);
  --section-y: clamp(4rem,2rem + 8vw,9.5rem);
  --maxw:      1440px;
  --measure:   64ch;

  --ease:    cubic-bezier(.22,1,.36,1);
  --dur:     .7s;
  --header-h: clamp(62px,5vw,84px);
}

/* ---------- 2. Reset ----------------------------------------------------- */

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

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

body{
  background:var(--limewash);
  color:var(--slate);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }

:focus-visible{ outline:2px solid var(--westmorland); outline-offset:3px; border-radius:1px; }
::selection{ background:var(--sage); color:var(--slate); }

/* Paper tooth */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.032;mix-blend-mode:multiply;
  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:1000;
  background:var(--slate);color:var(--limewash);padding:.7rem 1.2rem;
  font-size:var(--fs-small);transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. Layout ---------------------------------------------------- */

.shell{ width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y);position:relative; }
.section--deep{ background:var(--limewash-2); }
.section--slate{ background:var(--slate);color:var(--limewash); }
.section--slate .lede,.section--slate .body-text{ color:rgba(241,236,227,.74); }
.section--slate .eyebrow,.section--slate .sec-head__n{ color:var(--sage); }
.section--slate .sec-head__rule{ background:rgba(241,236,227,.2); }

/* ---------- 4. Type primitives ------------------------------------------ */

.eyebrow{
  font-size:var(--fs-micro);font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bracken-d);line-height:1;
}
.display{
  font-family:var(--serif);font-size:var(--fs-display);font-weight:300;
  line-height:1;letter-spacing:-.024em;
}
.h1{ font-family:var(--serif);font-size:var(--fs-h1);font-weight:300;line-height:1.04;letter-spacing:-.02em; }
.h2{ font-family:var(--serif);font-size:var(--fs-h2);font-weight:300;line-height:1.1;letter-spacing:-.018em; }
.h3{ font-family:var(--serif);font-size:var(--fs-h3);font-weight:400;line-height:1.24;letter-spacing:-.008em; }
.lede{ font-size:var(--fs-lede);line-height:1.52;color:var(--slate-3);max-width:52ch; }
.body-text{ color:var(--slate-3);max-width:var(--measure); }
.num{ font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-weight:300; }

/* One word per headline in the italic, in green. The signature typographic move. */
.accent{ font-style:italic;color:var(--westmorland); }
.section--slate .accent{ color:var(--sage); }

/* ---------- 5. Strata motif (stone courses) ----------------------------- */

.strata{ display:grid;gap:3px;width:100%;max-width:130px; }
.strata i{ display:block;height:2px;background:currentColor;opacity:.85; }
.strata i:nth-child(2){ width:62%;opacity:.5; }
.strata i:nth-child(3){ width:86%;opacity:.26; }

.sec-head{ margin-bottom:clamp(2.2rem,1.2rem + 3.4vw,4.5rem); }
.sec-head__top{ display:flex;align-items:baseline;gap:1.3rem;margin-bottom:clamp(1.2rem,2.4vw,2rem); }
.sec-head__n{ font-family:var(--serif);font-size:var(--fs-small);color:var(--bracken-d);flex:none; }
.sec-head__rule{ flex:1;height:1px;background:var(--limewash-3);align-self:center; }
.sec-head__body{ display:grid;gap:clamp(1rem,2vw,2rem);align-items:end; }
@media (min-width:900px){ .sec-head__body{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:4rem; } }

/* ---------- 6. Buttons --------------------------------------------------- */

.btn{
  position:relative;display:inline-flex;align-items:center;gap:.8rem;
  padding:1.05rem 1.9rem;font-size:var(--fs-small);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  background:var(--westmorland);color:var(--limewash);
  border:1px solid var(--westmorland);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--westmorland-d);border-color:var(--westmorland-d); }
.btn__arrow{ transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--ghost{ background:transparent;color:var(--slate);border-color:rgba(35,44,50,.28); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--slate);border-color:var(--slate);color:var(--limewash); }
.section--slate .btn--ghost{ color:var(--limewash);border-color:rgba(241,236,227,.32); }
.section--slate .btn--ghost:hover{ background:var(--limewash);color:var(--slate);border-color:var(--limewash); }

.tlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-small);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--westmorland);padding-bottom:.3rem;
  background-image:linear-gradient(var(--westmorland),var(--westmorland));
  background-size:0% 1px;background-repeat:no-repeat;background-position:left bottom;
  transition:background-size .45s var(--ease);
}
.tlink:hover,.tlink:focus-visible{ background-size:100% 1px; }
.section--slate .tlink{ color:var(--sage);background-image:linear-gradient(var(--sage),var(--sage)); }

/* ---------- 7. Utility strip + header ------------------------------------ */

/* The region lives here, never in the logo — so it reassures and helps local
   search without capping perceived reach at a county boundary. */
.utility{
  background:var(--slate);color:rgba(241,236,227,.82);
  font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;
}
.utility__inner{
  max-width:var(--maxw);margin-inline:auto;padding:.6rem var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.utility a:hover{ color:var(--sage); }
.utility__right{ display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap; }
@media (max-width:639px){ .utility__inner{ justify-content:center;text-align:center; } }

.header{
  position:sticky;top:0;z-index:500;
  background:rgba(241,236,227,.92);
  backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.header.is-stuck{ border-bottom-color:var(--limewash-3);box-shadow:0 4px 24px rgba(35,44,50,.06); }
.header__inner{
  max-width:var(--maxw);margin-inline:auto;padding:.75rem var(--gutter);
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}

.logo{ display:inline-flex;align-items:center;gap:.8rem;flex:none; }
.logo__mark{ width:clamp(26px,2.4vw,34px);height:auto;color:var(--westmorland);flex:none; }
.logo__txt{ display:grid;gap:.24rem; }
.logo__name{
  font-family:var(--roman);text-transform:uppercase;letter-spacing:.19em;line-height:1;
  font-size:clamp(.86rem,.74rem + .38vw,1.08rem);white-space:nowrap;
}
.logo__name .amp{ font-family:var(--serif);font-style:italic;color:var(--westmorland);letter-spacing:0; }
.logo__sub{
  font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--tarn);line-height:1;white-space:nowrap;
}

.nav{ display:none; }
@media (min-width:1080px){ .nav{ display:flex;align-items:center;gap:clamp(1.2rem,1.8vw,2.3rem); } }
.nav a{
  font-size:var(--fs-small);letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate-3);position:relative;padding-block:.3rem;transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--westmorland);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover,.nav a:focus-visible{ color:var(--slate); }
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1);transform-origin:left; }

.header__cta{ display:none; }
@media (min-width:1080px){ .header__cta{ display:inline-flex;padding:.85rem 1.4rem; } }

.burger{ display:grid;gap:5px;padding:.55rem;margin-right:-.55rem; }
@media (min-width:1080px){ .burger{ display:none; } }
.burger span{
  display:block;width:26px;height:1.5px;background:var(--slate);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(2){ width:18px;margin-left:auto; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.menu{
  position:fixed;inset:0;z-index:480;background:var(--limewash);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--ease);
  visibility:hidden;overflow-y:auto;
}
.menu.is-open{ clip-path:inset(0 0 0 0);visibility:visible; }
.menu__list{ display:grid;gap:clamp(.3rem,1.2vw,.8rem); }
.menu__list li{ overflow:hidden;transform:translateY(110%);transition:transform .75s var(--ease); }
.menu.is-open .menu__list li{ transform:translateY(0); }
.menu.is-open .menu__list li:nth-child(1){ transition-delay:.08s; }
.menu.is-open .menu__list li:nth-child(2){ transition-delay:.14s; }
.menu.is-open .menu__list li:nth-child(3){ transition-delay:.20s; }
.menu.is-open .menu__list li:nth-child(4){ transition-delay:.26s; }
.menu.is-open .menu__list li:nth-child(5){ transition-delay:.32s; }
.menu.is-open .menu__list li:nth-child(6){ transition-delay:.38s; }
.menu__link{
  display:flex;align-items:baseline;gap:1rem;font-family:var(--serif);
  font-size:clamp(1.9rem,1.1rem + 4.8vw,3.1rem);font-weight:300;line-height:1.24;
  letter-spacing:-.02em;transition:color .3s var(--ease);
}
.menu__link:hover{ color:var(--westmorland); }
.menu__idx{ font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.2em;color:var(--bracken-d);flex:none; }
.menu__foot{ margin-top:clamp(2rem,5vw,3.5rem);display:grid;gap:1rem; }
.menu__foot .dim{ height:1px;background:var(--limewash-3); }
.menu__contact{ display:grid;gap:.3rem;font-size:var(--fs-small);color:var(--slate-3); }

/* ---------- 7b. Breadcrumbs ------------------------------------------------ */

.crumbs{ border-bottom:1px solid var(--limewash-3);background:var(--limewash); }
.crumbs ol{ display:flex;flex-wrap:wrap;gap:.5rem;padding-block:.85rem;
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--tarn); }
.crumbs li{ display:flex;align-items:center;gap:.5rem; }
.crumbs li + li::before{ content:"/";color:var(--tarn-pale); }
.crumbs a{ color:var(--tarn); }
.crumbs a:hover{ color:var(--westmorland); }
.crumbs [aria-current]{ color:var(--slate); }

/* Current page in the nav */
.nav a[aria-current="page"]{ color:var(--slate); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.menu__link[aria-current="page"]{ color:var(--westmorland); }

/* ---------- 8. Media plates ---------------------------------------------- */

.plate-wrap{ display:block;position:relative;overflow:hidden;background:var(--limewash-2); }
.plate{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.plate-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(35,44,50,0) 45%,rgba(35,44,50,.6) 100%);
}

/* ---------- 9. Hero ------------------------------------------------------ */

.hero{ position:relative;overflow:hidden;background:var(--slate); }
.hero__media{ position:absolute;inset:0;z-index:0; }
.hero__media .plate{ height:100%;animation:drift 32s var(--ease) infinite alternate; }
@keyframes drift{ from{ transform:scale(1.02); } to{ transform:scale(1.09) translate3d(-1%,-1%,0); } }
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(35,44,50,.62) 0%,rgba(35,44,50,.3) 34%,rgba(35,44,50,.86) 100%),
    linear-gradient(90deg,rgba(35,44,50,.8) 0%,rgba(35,44,50,.24) 62%,transparent 100%);
}
/* Padding tightened when the counters went back in: at 1440x900 the hero was
   982px tall, which put the counters below the fold and defeated the point of
   having them. */
.hero__inner{
  position:relative;z-index:2;color:var(--limewash);
  padding-block:clamp(3.25rem,2rem + 6.5vw,6rem);
  min-height:clamp(500px,70vh,720px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__eyebrow{ display:flex;align-items:center;gap:1rem;margin-bottom:clamp(1.2rem,2.4vw,2rem);color:var(--sage); }
.hero__eyebrow .strata{ max-width:52px;color:var(--sage); }
.hero__title{ max-width:19ch;margin-bottom:clamp(1.4rem,2.4vw,2.2rem); }
.hero__title .accent{ color:var(--sage); }
.hero__lede{ color:rgba(241,236,227,.82);max-width:48ch; }
.hero__actions{ display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.8rem,3vw,2.6rem); }
@media (max-width:559px){
  .hero__actions{ display:grid;gap:.7rem; }
  .hero__actions .btn{ justify-content:space-between; }
}
.hero__reassure{
  margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:1.1rem;
  border-top:1px solid rgba(241,236,227,.16);
  display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,236,227,.7);
}
.hero__reassure span{ display:inline-flex;align-items:center;gap:.5rem; }
.hero__reassure span::before{ content:"";width:4px;height:4px;background:var(--sage-logo);transform:rotate(45deg);flex:none; }

/* Counters. Animate on first view, and are readable immediately if the count
   never runs (reduced motion, no IntersectionObserver, JS blocked). */
.hero__creds{
  margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:1.3rem;
  border-top:1px solid rgba(241,236,227,.16);
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem 1rem;
}
@media (min-width:760px){ .hero__creds{ grid-template-columns:repeat(4,1fr); } }
.cred__k{
  font-family:var(--serif);font-weight:300;line-height:1;
  font-size:clamp(1.6rem,1.1rem + 1.9vw,2.6rem);
  display:block;margin-bottom:.45rem;color:var(--limewash);
  font-variant-numeric:tabular-nums lining-nums;
}
.cred__v{
  display:block;font-size:var(--fs-micro);letter-spacing:.17em;
  text-transform:uppercase;color:rgba(241,236,227,.72);line-height:1.4;
}

/* ---------- 10. Statement ------------------------------------------------ */

.statement__grid{ display:grid;gap:clamp(1.6rem,1rem + 3vw,4rem); }
@media (min-width:900px){ .statement__grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } }
.statement__text{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,.95rem + 1.9vw,2.5rem);
  line-height:1.3;letter-spacing:-.015em;max-width:24ch;
}
.statement__aside{ display:grid;gap:1.3rem;align-content:start; }
.sig{ display:grid;gap:.25rem;padding-top:1.2rem;border-top:1px solid var(--limewash-3); }
.sig__name{ font-family:var(--serif);font-size:1.05rem; }
.sig__role{ font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase;color:var(--tarn); }

/* ---------- 11. Process (the centrepiece) -------------------------------- */

/* Numbered accordion. Seven stages read as a scannable list first, with the
   detail a click away, rather than seven paragraphs you have to wade through.
   All copy stays in the DOM when collapsed, so it is still indexed. */

.stages{ border-top:1px solid rgba(241,236,227,.16); }
.stage{ border-bottom:1px solid rgba(241,236,227,.16); }

.stage__btn{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(.9rem,2vw,2.2rem);
  padding-block:clamp(1.15rem,.85rem + 1.2vw,1.85rem);
  text-align:left;color:var(--limewash);
  transition:color .35s var(--ease);
}
.stage__btn:hover,.stage__btn:focus-visible{ color:var(--sage); }
.stage__btn[aria-expanded="true"]{ color:var(--sage); }

.stage__n{
  font-family:var(--serif);font-size:var(--fs-small);
  color:var(--sage);letter-spacing:.08em;flex:none;
  font-variant-numeric:tabular-nums lining-nums;
}
.stage__t{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,.95rem + 1.5vw,2.1rem);
  line-height:1.16;letter-spacing:-.016em;
}
.stage__plus{ position:relative;width:20px;height:20px;flex:none; }
.stage__plus::before,.stage__plus::after{
  content:"";position:absolute;background:currentColor;
  transition:transform .45s var(--ease),opacity .35s var(--ease);
}
.stage__plus::before{ top:50%;left:0;width:100%;height:1px;transform:translateY(-50%); }
.stage__plus::after{ left:50%;top:0;height:100%;width:1px;transform:translateX(-50%); }
.stage__btn[aria-expanded="true"] .stage__plus::after{ transform:translateX(-50%) scaleY(0); }

.stage__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.stage__panel.is-open{ grid-template-rows:1fr; }
.stage__panel > div{ overflow:hidden; }
.stage__inner{
  display:grid;gap:1rem;
  padding-bottom:clamp(1.4rem,1rem + 1.8vw,2.3rem);
}
@media (min-width:860px){
  /* Line the copy up under the title, clear of the number column. */
  .stage__inner{ padding-left:clamp(2.6rem,5vw,4.4rem);max-width:78ch; }
}
.stage__d{ color:rgba(241,236,227,.74);font-size:var(--fs-small);line-height:1.75; }
.stage__d a{ color:var(--sage);text-decoration:underline;text-underline-offset:3px; }
.stage__tag{
  justify-self:start;font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);
  border:1px solid rgba(139,156,122,.45);padding:.32rem .62rem;
}

/* On a light ground (the home page teaser sits on limewash). */
.section--deep .stages,
.section--deep .stage{ border-color:var(--limewash-3); }
.section--deep .stage__btn{ color:var(--slate); }
.section--deep .stage__btn:hover,
.section--deep .stage__btn:focus-visible,
.section--deep .stage__btn[aria-expanded="true"]{ color:var(--westmorland); }
.section--deep .stage__n{ color:var(--bracken-d); }
.section--deep .stage__d{ color:var(--slate-3); }
.section--deep .stage__d a{ color:var(--westmorland); }
.section--deep .stage__tag{ color:var(--westmorland);border-color:rgba(85,104,79,.4); }

/* ---------- 11b. Video (YouTube facade) ----------------------------------
   A standard YouTube iframe pulls ~1.5MB and sets third-party cookies on page
   load, whether or not anyone presses play. This is a facade: our own poster
   plus a button, and the real iframe is only injected on click. Nothing at all
   is requested from Google until the visitor chooses to watch. */

/* Asymmetric so it reads as a composed element rather than a slab. The film
   sits in the wider column with a chapter list beside it, which also gives
   someone a reason to look at it before deciding to press play. */
.video-layout{ display:grid;gap:clamp(1.4rem,1rem + 2.4vw,3rem);align-items:start; }
@media (min-width:900px){
  .video-layout{ grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); }
}
.video{ position:relative; }
/* A thin offset rule behind the frame, echoing the strata motif. */
.video::before{
  content:"";position:absolute;left:-10px;top:-10px;width:56px;height:1px;
  background:var(--westmorland);
}
@media (max-width:899px){ .video::before{ display:none; } }

.video-aside{ display:grid;gap:1.1rem;align-content:start; }
.chapters{ border-top:1px solid var(--limewash-3); }
.chapters li{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  padding-block:.7rem;border-bottom:1px solid var(--limewash-3);
  font-size:var(--fs-small);color:var(--slate-3);
}
.chapters b{
  font-family:var(--serif);font-weight:400;font-size:var(--fs-micro);
  letter-spacing:.08em;color:var(--westmorland);font-variant-numeric:tabular-nums;
}
.video__frame{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  overflow:hidden;background:var(--slate);border:0;padding:0;cursor:pointer;
  color:var(--limewash);
}
.video__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease),filter .5s var(--ease);
}
.video__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,44,50,.34) 0%,rgba(35,44,50,.15) 45%,rgba(35,44,50,.78) 100%);
  transition:background .4s var(--ease);
}
.video__frame:hover .video__poster,
.video__frame:focus-visible .video__poster{ transform:scale(1.035); }

.video__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(64px,7vw,84px);height:clamp(64px,7vw,84px);
  display:grid;place-items:center;border-radius:50%;
  background:rgba(241,236,227,.94);color:var(--slate);
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.video__frame:hover .video__play,
.video__frame:focus-visible .video__play{ transform:translate(-50%,-50%) scale(1.07);background:var(--limewash); }
.video__play svg{ width:26px;height:26px;margin-left:3px; }

.video__label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1rem,2.4vw,1.8rem);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;text-align:left;
}
.video__title{
  font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.05rem,.95rem + .7vw,1.45rem);
}
.video__meta{
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,236,227,.78);flex:none;
}
@media (max-width:520px){
  .video__label{ flex-direction:column;align-items:flex-start;gap:.3rem; }
}

/* Injected player fills the same box, so nothing shifts when it swaps in. */
.video__frame iframe{ position:absolute;inset:0;width:100%;height:100%;border:0; }

.video__note{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(35,44,50,.94);color:var(--limewash);
  padding:1.5rem;text-align:center;font-size:var(--fs-small);line-height:1.6;
}

/* ---------- 12. Services -------------------------------------------------- */

.svc-grid{ display:grid;gap:clamp(1rem,.6rem + 1.6vw,1.8rem); }
@media (min-width:640px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc{
  display:grid;gap:.85rem;align-content:start;
  padding:clamp(1.4rem,1rem + 1.6vw,2.1rem);
  border:1px solid var(--limewash-3);background:var(--limewash);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.svc:hover{ border-color:var(--westmorland);transform:translateY(-3px);box-shadow:0 12px 34px rgba(35,44,50,.07); }
.svc__ico{ width:30px;height:30px;color:var(--westmorland); }
.svc p{ font-size:var(--fs-small);color:var(--slate-3);line-height:1.7; }

/* ---------- 13. Comparison — one team, not three ------------------------- */

.compare{ display:grid;gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(1.6rem,3vw,2.4rem); }
@media (min-width:820px){ .compare{ grid-template-columns:repeat(2,1fr); } }
.compare__col{ padding:clamp(1.4rem,1rem + 1.8vw,2.2rem);border:1px solid var(--limewash-3); }
.compare__col--them{ background:transparent; }
.compare__col--us{ background:var(--slate);color:var(--limewash);border-color:var(--slate); }
.compare__h{
  font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:1.2rem;color:var(--tarn);
}
.compare__col--us .compare__h{ color:var(--sage); }
.compare__col .h3{ margin-bottom:1.1rem; }
.compare li{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  padding-block:.65rem;font-size:var(--fs-small);line-height:1.6;
  border-top:1px solid var(--limewash-3);
}
.compare__col--us li{ border-top-color:rgba(241,236,227,.16);color:rgba(241,236,227,.8); }
.compare li:first-child{ border-top:0; }
.compare li i{ font-style:normal;font-weight:600;flex:none;line-height:1.5; }
.compare__col--them li i{ color:var(--bracken-d); }
.compare__col--us li i{ color:var(--sage); }

/* ---------- 14. Design fee ------------------------------------------------ */

.fee{ display:grid;gap:clamp(1.4rem,1rem + 2.6vw,3.4rem); }
@media (min-width:900px){ .fee{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center; } }
.fee__card{
  border:1px solid var(--westmorland);padding:clamp(1.6rem,1.2rem + 2vw,2.6rem);
  background:var(--limewash);display:grid;gap:1rem;
}
.fee__figure{ font-family:var(--serif);font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);font-weight:300;line-height:1;color:var(--westmorland); }
.fee__list{ display:grid;gap:0;margin-top:.4rem;border-top:1px solid var(--limewash-3); }
.fee__list li{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding-block:.7rem;
  border-bottom:1px solid var(--limewash-3);font-size:var(--fs-small);color:var(--slate-3);
}
.fee__list i{ font-style:normal;color:var(--westmorland);font-weight:600; }

/* ---------- 15. Projects -------------------------------------------------- */

.filters{ display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.8rem,1.2rem + 2.4vw,3rem); }
.filter{
  font-size:var(--fs-micro);letter-spacing:.15em;text-transform:uppercase;
  padding:.6rem 1.05rem;border:1px solid var(--limewash-3);color:var(--slate-3);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.filter:hover{ color:var(--slate);border-color:var(--slate-3); }
.filter[aria-pressed="true"]{ background:var(--slate);border-color:var(--slate);color:var(--limewash); }

.projects__grid{ display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.1rem,.6rem + 2.2vw,2.8rem); }
.project{ grid-column:1/-1;display:block;width:100%;text-align:left; }
.project.is-hidden{ display:none; }
@media (min-width:760px){
  .project{ grid-column:span 6; }
  .project:nth-child(1){ grid-column:span 7; }
  .project:nth-child(2){ grid-column:span 5; }
  .project:nth-child(3){ grid-column:span 5; }
  .project:nth-child(4){ grid-column:span 7; }
  .project:nth-child(5){ grid-column:span 7; }
  .project:nth-child(6){ grid-column:span 5; }
}
@media (min-width:1100px){
  .project:nth-child(2),.project:nth-child(4),.project:nth-child(6){ margin-top:clamp(2rem,5vw,5rem); }
}
/* A filtered view has no reliable nth-child rhythm — fall back to an even grid. */
@media (min-width:760px){
  .projects__grid.is-filtered .project{ grid-column:span 6;margin-top:0; }
  .projects__grid.is-filtered .project__media{ aspect-ratio:4/3; }
}

.project__media{
  display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--limewash-2);margin-bottom:1.2rem;
}
.project:nth-child(2) .project__media,
.project:nth-child(3) .project__media{ aspect-ratio:3/4; }
@media (max-width:759px){ .project__media{ aspect-ratio:4/3!important; } }
.project:hover .plate,.project:focus-visible .plate{ transform:scale(1.05); }

.project__badge{
  position:absolute;z-index:4;left:0;bottom:0;background:var(--westmorland);color:var(--limewash);
  font-size:var(--fs-micro);letter-spacing:.15em;text-transform:uppercase;padding:.55rem .9rem;
  transform:translateY(100%);transition:transform .5s var(--ease);
}
.project:hover .project__badge,.project:focus-visible .project__badge{ transform:translateY(0); }

.project__meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding-bottom:.75rem;border-bottom:1px solid var(--limewash-3);
  transition:border-color .4s var(--ease);
}
.project:hover .project__meta{ border-bottom-color:var(--westmorland); }
.project__name{
  font-family:var(--serif);font-size:clamp(1.1rem,.95rem + .85vw,1.55rem);font-weight:400;
  line-height:1.2;letter-spacing:-.01em;transition:color .35s var(--ease);
}
.project:hover .project__name{ color:var(--westmorland); }
.project__loc{ font-size:var(--fs-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--tarn);flex:none; }
.project__sub{ margin-top:.75rem;font-size:var(--fs-small);color:var(--tarn);display:flex;gap:.55rem;flex-wrap:wrap; }
.project__sub span:not(:last-child)::after{ content:" ·";color:var(--westmorland); }

/* Case-study overlay */
.case{
  position:fixed;inset:0;z-index:700;background:var(--limewash);color:var(--slate);
  overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;
  transform:translateY(2%);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s;
}
.case.is-open{ opacity:1;visibility:visible;transform:none; }
.case__close{
  position:fixed;top:clamp(1rem,2.4vw,2rem);right:var(--gutter);z-index:3;
  display:inline-flex;align-items:center;gap:.7rem;font-size:var(--fs-micro);
  letter-spacing:.2em;text-transform:uppercase;background:var(--slate);color:var(--limewash);
  padding:.85rem 1.2rem;transition:background .4s var(--ease);
  box-shadow:0 0 0 1px rgba(241,236,227,.2),0 10px 30px rgba(35,44,50,.3);
}
.case__close:hover{ background:var(--westmorland); }
.case__hero{ position:relative;aspect-ratio:16/9;max-height:74svh;overflow:hidden;background:var(--limewash-2); }
@media (max-width:700px){ .case__hero{ aspect-ratio:4/3; } }
.case__body{ padding-block:clamp(2.2rem,1.4rem + 4vw,4.5rem) clamp(3rem,2rem + 5vw,7rem); }
.case__head{ display:grid;gap:1.5rem;margin-bottom:clamp(2rem,1.4rem + 3vw,3.6rem); }
@media (min-width:900px){
  .case__head{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:4rem;align-items:end; }
  .case__lead{ padding-right:7rem; }
}
.spec{ border-top:1px solid var(--limewash-3); }
.spec div{
  display:grid;grid-template-columns:minmax(90px,30%) 1fr;gap:1.2rem;padding-block:.8rem;
  border-bottom:1px solid var(--limewash-3);font-size:var(--fs-small);
}
.spec dt{ font-size:var(--fs-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--tarn); }
.spec dd{ margin:0;color:var(--slate); }
.case__cols{ display:grid;gap:clamp(1.6rem,1rem + 2.4vw,3.2rem); }
@media (min-width:900px){ .case__cols{ grid-template-columns:repeat(2,1fr); } }
.case__prose p{ color:var(--slate-3); }
.case__prose p + p{ margin-top:1.1em; }
.case__gallery{ display:grid;gap:clamp(.8rem,1.4vw,1.5rem);margin-top:clamp(2rem,1.4rem + 3vw,3.6rem);grid-template-columns:repeat(2,1fr); }
.case__gallery .plate-wrap{ aspect-ratio:1/1; }
.case__gallery .plate-wrap:first-child{ grid-column:1/-1;aspect-ratio:3/2; }

/* ---------- 15b. Testimonial carousel --------------------------------------
   Scroll-snap rather than a JS slider, and deliberately NOT auto-advancing.
   Auto-rotating carousels move content out from under people who are still
   reading it, and they are a well-known accessibility problem. This one only
   moves when someone asks it to, by drag, arrow button, or keyboard. */

.carousel{ position:relative; }
.carousel__track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(280px,86%);
  gap:clamp(1rem,2vw,1.6rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:.5rem;
}
@media (min-width:760px){ .carousel__track{ grid-auto-columns:minmax(300px,46%); } }
@media (min-width:1180px){ .carousel__track{ grid-auto-columns:minmax(320px,31.5%); } }
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track > *{ scroll-snap-align:start; }

.carousel__controls{
  display:flex;align-items:center;gap:.6rem;margin-top:clamp(1.2rem,2.4vw,1.8rem);
}
.carousel__btn{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--limewash-3);color:var(--slate);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),opacity .3s;
}
.carousel__btn:hover:not(:disabled){ background:var(--slate);border-color:var(--slate);color:var(--limewash); }
.carousel__btn:disabled{ opacity:.32;cursor:default; }
.carousel__btn svg{ width:16px;height:16px; }
.section--slate .carousel__btn{ border-color:rgba(241,236,227,.28);color:var(--limewash); }
.section--slate .carousel__btn:hover:not(:disabled){ background:var(--limewash);color:var(--slate); }
.carousel__count{
  margin-left:.6rem;font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tarn);font-variant-numeric:tabular-nums;
}
.section--slate .carousel__count{ color:rgba(241,236,227,.6); }

/* ---------- 15c. Repeating CTA band ---------------------------------------
   The same component on every page, so there is always a way to start a
   conversation within a screen or so of wherever someone stops reading. */

.cta-band{ background:var(--slate);color:var(--limewash); }
.cta-band__grid{ display:grid;gap:clamp(1.8rem,1.2rem + 3vw,4rem);align-items:start; }
@media (min-width:900px){ .cta-band__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.cta-band .h2{ color:var(--limewash); }
.cta-band .lede{ color:rgba(241,236,227,.76); }
.cta-band .eyebrow{ color:var(--sage); }
.cta-band .field label{ color:rgba(241,236,227,.72); }
/* --bracken-d only reaches 2.09:1 on slate, so the required marker switches. */
.cta-band .field label .req{ color:var(--sage); }
.cta-band .field input,
.cta-band .field textarea{ color:var(--limewash);border-bottom-color:rgba(241,236,227,.3); }
.cta-band .field input::placeholder,
.cta-band .field textarea::placeholder{ color:rgba(241,236,227,.36); }
.cta-band .field input:focus,
.cta-band .field textarea:focus{ border-bottom-color:var(--sage); }
.cta-band .btn{ background:var(--sage);border-color:var(--sage);color:var(--slate); }
.cta-band .btn:hover{ background:var(--limewash);border-color:var(--limewash);color:var(--slate); }
.cta-band .form__note{ color:rgba(241,236,227,.58); }
.cta-band .form__status{ border-color:var(--sage);background:rgba(139,156,122,.14);color:var(--limewash); }
.cta-band .form__status.is-error{ border-color:#D98A78;background:rgba(217,138,120,.14); }
.cta-band .field__err{ color:#E8A897; }
.cta-band__reassure{
  display:grid;gap:.7rem;margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid rgba(241,236,227,.16);
}
.cta-band__reassure li{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:baseline;
  font-size:var(--fs-small);color:rgba(241,236,227,.76);
}
.cta-band__reassure li::before{
  content:"";width:5px;height:5px;background:var(--sage);transform:rotate(45deg);
}
.cta-band__or{
  margin-top:1.4rem;font-size:var(--fs-small);color:rgba(241,236,227,.76);
}
.cta-band__or a{ color:var(--sage);text-decoration:underline;text-underline-offset:3px; }

/* ---------- 16. Testimonials ---------------------------------------------- */

.quotes{ display:grid;gap:clamp(1.1rem,.6rem + 2vw,2.2rem); }
@media (min-width:880px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quote{
  display:grid;gap:1.3rem;align-content:start;
  padding:clamp(1.5rem,1rem + 1.8vw,2.3rem);
  border:1px solid var(--limewash-3);background:var(--limewash);
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.quote:hover{ border-color:var(--westmorland);transform:translateY(-4px); }
.quote__mark{ font-family:var(--serif);font-size:2.6rem;line-height:.6;color:var(--westmorland);height:1rem; }
.quote__text{ font-family:var(--serif);font-size:clamp(1rem,.95rem + .45vw,1.2rem);font-weight:300;line-height:1.5; }
.quote__by{ display:grid;gap:.2rem;padding-top:1rem;border-top:1px solid var(--limewash-3); }
.quote__n{ font-size:var(--fs-small);font-weight:500; }
.quote__r{ font-size:var(--fs-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--tarn); }

/* ---------- 17. Instagram -------------------------------------------------- */

.ig__grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.2vw,.9rem); }
@media (min-width:700px){ .ig__grid{ grid-template-columns:repeat(4,1fr); } }
.ig__tile{ position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--limewash-2);display:block; }
.ig__tile:hover .plate{ transform:scale(1.06); }
.ig__tile::after{
  content:"";position:absolute;inset:0;background:rgba(35,44,50,.0);
  transition:background .4s var(--ease);
}
.ig__tile:hover::after{ background:rgba(35,44,50,.22); }
.ig__head{ display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.6rem; }

/* ---------- 18. Journal ---------------------------------------------------- */

.journal__grid{ display:grid;gap:clamp(1.3rem,.8rem + 2vw,2.4rem); }
@media (min-width:820px){ .journal__grid{ grid-template-columns:repeat(3,1fr); } }
.post__media{ display:block;position:relative;aspect-ratio:3/2;overflow:hidden;margin-bottom:1.1rem; }
.post:hover .plate{ transform:scale(1.05); }
.post__cat{ font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase;color:var(--bracken-d); }
.post__t{
  font-family:var(--serif);font-size:clamp(1.05rem,.98rem + .65vw,1.35rem);font-weight:400;
  line-height:1.26;margin-block:.6rem .5rem;transition:color .35s var(--ease);
}
.post:hover .post__t{ color:var(--westmorland); }
.post__d{ font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--tarn); }

/* ---------- 19. Forms ------------------------------------------------------ */

.contact__grid{ display:grid;gap:clamp(2.2rem,1.4rem + 4vw,5rem); }
@media (min-width:980px){ .contact__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); } }

.form{ display:grid;gap:clamp(1rem,.8rem + .9vw,1.5rem); }
.form__row{ display:grid;gap:inherit; }
@media (min-width:620px){ .form__row{ grid-template-columns:repeat(2,1fr); } }
.field{ display:grid;gap:.5rem; }
.field label{ font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase;color:var(--slate-3); }
.field label .req{ color:var(--bracken-d); }
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(35,44,50,.24);
  padding:.65rem 0;font-size:var(--fs-body);color:var(--slate);border-radius:0;
  transition:border-color .35s var(--ease);
}
.field select{ appearance:none;cursor:pointer; }
.select-wrap{ position:relative;display:block; }
.select-wrap::after{
  content:"";position:absolute;right:4px;top:44%;width:7px;height:7px;
  border-right:1px solid var(--tarn);border-bottom:1px solid var(--tarn);
  transform:translateY(-50%) rotate(45deg);pointer-events:none;
}
.field textarea{ resize:vertical;min-height:110px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-bottom-color:var(--westmorland); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(74,85,92,.45); }
.field.has-error input,.field.has-error textarea,.field.has-error select{ border-bottom-color:#A33A28; }
.field__err{ font-size:var(--fs-micro);color:#8F3122;display:none; }
.field.has-error .field__err{ display:block; }

/* Honeypot. Moved off-screen rather than display:none, which some bots skip. */
.hp{ position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden; }

.form__note{ font-size:var(--fs-micro);color:var(--tarn);line-height:1.65; }
.form__status{
  font-size:var(--fs-small);padding:.95rem 1.1rem;border:1px solid var(--westmorland);
  background:rgba(85,104,79,.09);display:none;
}
.form__status.is-shown{ display:block; }
.form__status.is-error{ border-color:#A33A28;background:rgba(163,58,40,.08); }

.contact__aside{ display:grid;gap:1.7rem;align-content:start; }
.contact__block{ display:grid;gap:.4rem;padding-top:1.2rem;border-top:1px solid var(--limewash-3); }
.contact__block h4{ font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase;color:var(--tarn);font-weight:500; }
.contact__block p,.contact__block a{ font-size:var(--fs-small);color:var(--slate);line-height:1.6; }
.contact__block a:hover{ color:var(--westmorland); }

.visit{ border:1px solid var(--westmorland);padding:clamp(1.3rem,1rem + 1.4vw,1.9rem);display:grid;gap:.8rem;background:var(--limewash); }
.visit ol{ display:grid;gap:.55rem;counter-reset:v; }
.visit li{ display:grid;grid-template-columns:auto 1fr;gap:.75rem;font-size:var(--fs-small);color:var(--slate-3);line-height:1.6; }
.visit li::before{
  counter-increment:v;content:counter(v);font-family:var(--serif);color:var(--westmorland);
  font-size:.9rem;line-height:1.6;
}

/* ---------- 20. Footer ------------------------------------------------------ */

.footer{ background:var(--slate);color:var(--limewash);padding-block:clamp(3rem,2rem + 4vw,5rem) 2rem; }
.footer__top{ display:grid;gap:clamp(1.8rem,1.2rem + 3vw,3.5rem); }
@media (min-width:900px){ .footer__top{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); } }
.footer__brand{ display:grid;gap:1.3rem;align-content:start;max-width:36ch; }
.footer .logo__mark{ color:var(--sage-logo); }
.footer .logo__name{ color:var(--limewash); }
.footer .logo__name .amp{ color:var(--sage); }
.footer .logo__sub{ color:rgba(241,236,227,.6); }
.footer__col h5{ font-size:var(--fs-micro);letter-spacing:.19em;text-transform:uppercase;color:var(--sage);font-weight:500;margin-bottom:1rem; }
.footer__col li + li{ margin-top:.5rem; }
.footer__col a,.footer__col li{ font-size:var(--fs-small);color:rgba(241,236,227,.74);transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--limewash); }

.socials{ display:flex;gap:.7rem;margin-top:.4rem; }
.socials a{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(241,236,227,.24);color:var(--limewash);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.socials a:hover{ background:var(--sage);border-color:var(--sage);color:var(--slate); }
.socials svg{ width:17px;height:17px; }

.footer__bottom{
  margin-top:clamp(2.2rem,1.5rem + 3vw,3.5rem);padding-top:1.5rem;
  border-top:1px solid rgba(241,236,227,.14);
  display:grid;gap:.8rem;font-size:var(--fs-micro);letter-spacing:.09em;color:rgba(241,236,227,.6);
}
@media (min-width:720px){ .footer__bottom{ grid-template-columns:1fr auto;align-items:center; } }
.footer__legal{ display:flex;flex-wrap:wrap;gap:1.3rem; }
.footer__legal a:hover{ color:var(--limewash); }

.mock-note{
  background:var(--bracken-d);color:var(--limewash);font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;text-align:center;padding:.65rem 1rem;line-height:1.55;
}

/* ---------- 20b. Document pages (policies) --------------------------------- */

.doc-head{ padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) clamp(1.5rem,3vw,2.5rem); }
.doc-head .eyebrow{ display:block;margin-bottom:1.2rem; }
.doc-meta{ margin-top:1.2rem;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--tarn); }

.doc{ padding-bottom:clamp(3rem,2rem + 5vw,7rem);max-width:76ch; }
.doc h2{
  font-family:var(--serif);font-weight:400;line-height:1.2;letter-spacing:-.012em;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.65rem);
  margin-top:clamp(2rem,4vw,3rem);margin-bottom:.9rem;
  padding-top:1.4rem;border-top:1px solid var(--limewash-3);
}
.doc h3{
  font-family:var(--serif);font-weight:400;font-size:1.05rem;
  margin-top:1.6rem;margin-bottom:.5rem;
}
.doc p,.doc li{ color:var(--slate-3);line-height:1.75; }
.doc p{ margin-bottom:1rem; }
.doc ul{ margin:0 0 1.2rem;display:grid;gap:.5rem; }
.doc ul li{ display:grid;grid-template-columns:auto 1fr;gap:.8rem; }
.doc ul li::before{ content:"";width:5px;height:5px;background:var(--westmorland);transform:rotate(45deg);margin-top:.62rem; }
.doc a{ color:var(--westmorland);text-decoration:underline;text-underline-offset:3px; }
.doc a:hover{ color:var(--westmorland-d); }
.doc dl{ margin:0 0 1.2rem;border-top:1px solid var(--limewash-3); }
.doc dl div{
  display:grid;gap:.3rem 1.4rem;padding-block:.85rem;
  border-bottom:1px solid var(--limewash-3);
}
@media (min-width:640px){ .doc dl div{ grid-template-columns:minmax(150px,26%) 1fr; } }
.doc dt{ font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--tarn); }
.doc dd{ margin:0;color:var(--slate-3);font-size:var(--fs-small);line-height:1.7; }

/* Unmissable, because publishing unreviewed legal text is a real risk. */
.legal-warning{
  border:1px solid var(--bracken-d);border-left-width:3px;
  background:rgba(160,90,44,.07);
  padding:clamp(1.1rem,2.4vw,1.6rem);margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.legal-warning strong{ color:var(--bracken-d);display:block;margin-bottom:.4rem;
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase; }
.legal-warning p{ margin:0;font-size:var(--fs-small);color:var(--slate-3);line-height:1.7; }

/* Slim header for document pages: no nav furniture, just a way back. */
.doc-bar{ border-bottom:1px solid var(--limewash-3); }
.doc-bar__inner{
  max-width:var(--maxw);margin-inline:auto;padding:1rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}

/* ---------- 21. Scroll reveal ---------------------------------------------- */

[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms);will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1;transform:none; }

/* ---------- 22. Reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{ opacity:1;transform:none; }
  .hero__media .plate{ animation:none;transform:scale(1.02); }
}