/* Generated by tools/fonts.py: the Latin subset of each family, self-hosted.
   SIL Open Font License. */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url(/assets/fonts/newsreader-normal-300.7b51fc658f.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/newsreader-normal-400.725d78a558.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url(/assets/fonts/newsreader-italic-300.f2ca430bd9.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/newsreader-italic-400.2bf0dbb1a4.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url(/assets/fonts/hanken-grotesk-normal.e9201eddf1.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/marcellus-normal.8a539799d1.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================================
   STONE & FELL — Design & Build
   Palette "Limewash & Lakeland Slate". Navy, cream and sage are the brand
   colours sampled from the supplied logo (assets/brand). Light-dominant;
   dark used as punctuation.
   ========================================================================= */

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

/* The web fonts arrive after first paint (font-display: swap). Until then
   text uses a local font scaled to the web font's measurements, so nothing
   moves when it swaps in: Georgia for Newsreader (width at the heading
   weight, ascent 0.74em, descent 0.27em) and Arial for Hanken Grotesk
   (ascent 1.0em, descent 0.3em). Overrides are divided by size-adjust,
   which scales them too. Measured in the browser. */
@font-face{
  font-family:"Newsreader Fallback";font-style:normal;
  src:local("Georgia");
  size-adjust:96.69%;ascent-override:76.53%;descent-override:27.92%;line-gap-override:0%;
}
@font-face{
  font-family:"Hanken Grotesk Fallback";font-style:normal;
  src:local("Arial"),local("Helvetica");
  size-adjust:100.6%;ascent-override:99.4%;descent-override:29.82%;line-gap-override:0%;
}
@font-face{
  font-family:"Newsreader Fallback";font-style:italic;
  src:local("Georgia Italic"),local("Georgia-Italic");
  size-adjust:85.72%;ascent-override:86.33%;descent-override:31.5%;line-gap-override:0%;
}

:root,:root[data-theme="light"]{
  /* Limewash: the ground. The logo's cream. */
  --limewash:    #F8EFE3;
  --limewash-2:  #E6E0D4;
  --limewash-3:  #D7D0C1;

  /* Lakeland slate: the ink. The logo's navy. */
  --slate:       #1F2930;
  --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.
       Decoration only. It reaches 5.73:1 on slate but just 2.27:1 on
       limewash, so it is never used for text.
     --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:   #98A685;
  --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","Newsreader Fallback","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --roman: "Marcellus","Palatino Linotype",Palatino,Georgia,serif;
  --sans:  "Hanken Grotesk","Hanken Grotesk Fallback","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);

  /* Bands: the slate sections (stages, enquiry band, hero, footer, utility
     strip). They stay dark in both themes, so they have their own tokens and
     never use --slate/--limewash, which swap meaning in the dark theme. */
  --band:        #1F2930;
  --band-ink:    #F8EFE3;

  /* Roles that need a different value per theme. */
  --btn:         #55684F;
  --btn-ink:     #F8EFE3;
  --btn-hover:   #405039;
  --header-bg:   rgba(248,239,227,.92);
  --field-line:  rgba(31,41,48,.24);
  --ghost-line:  rgba(31,41,48,.28);
  --placeholder: rgba(74,85,92,.45);
  --error:       #8F3122;
  --error-line:  #A33A28;

  color-scheme: light;
}

/* ---------- 1b. Dark theme --------------------------------------------------
   Built from the same brand colours: navy ground, cream ink, sage accents.
   Applied by the toggle (data-theme on <html>, set before first paint by the
   script in <head>) or, with no saved choice and no script, by the system
   setting. The two blocks are deliberately identical. Every text pair passes
   WCAG AA; see tests/test_contrast.py. */

:root[data-theme="dark"]{
  --limewash:    #1F2930;   /* page ground */
  --limewash-2:  #27333C;   /* alternate sections, cards on the deep ground */
  --limewash-3:  #3B4851;   /* rules and borders */
  --slate:       #F8EFE3;   /* ink */
  --slate-2:     #E4DCD0;
  --slate-3:     #CDC6BA;   /* secondary text */
  --westmorland: #A9B796;   /* accent text */
  --westmorland-d:#C2CEB1;
  --bracken:     #E3A57C;
  --bracken-d:   #DB9A6D;
  --tarn:        #A3AEB1;   /* captions */
  --tarn-pale:   #6F7B80;
  --band:        #151C21;   /* a step darker than the page, so bands still read */
  --btn:         #98A685;
  --btn-ink:     #151C21;
  --btn-hover:   #B4C1A2;
  --header-bg:   rgba(31,41,48,.92);
  --field-line:  rgba(248,239,227,.3);
  --ghost-line:  rgba(248,239,227,.32);
  --placeholder: rgba(248,239,227,.42);
  --error:       #F2A08B;
  --error-line:  #E0846C;
  color-scheme: dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --limewash:    #1F2930;
    --limewash-2:  #27333C;
    --limewash-3:  #3B4851;
    --slate:       #F8EFE3;
    --slate-2:     #E4DCD0;
    --slate-3:     #CDC6BA;
    --westmorland: #A9B796;
    --westmorland-d:#C2CEB1;
    --bracken:     #E3A57C;
    --bracken-d:   #DB9A6D;
    --tarn:        #A3AEB1;
    --tarn-pale:   #6F7B80;
    --band:        #151C21;
    --btn:         #98A685;
    --btn-ink:     #151C21;
    --btn-hover:   #B4C1A2;
    --header-bg:   rgba(31,41,48,.92);
    --field-line:  rgba(248,239,227,.3);
    --ghost-line:  rgba(248,239,227,.32);
    --placeholder: rgba(248,239,227,.42);
    --error:       #F2A08B;
    --error-line:  #E0846C;
    color-scheme: dark;
  }
}

/* ---------- 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%; }
/* <picture> only chooses a file; the <img> inside keeps the layout rules. */
picture{ display:contents; }
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(--band); }
/* On the navy bands the moss ring is too dark to see in the light theme. */
.utility :focus-visible,.hero :focus-visible,.section--slate :focus-visible,
.cta-band :focus-visible,.footer :focus-visible{ outline-color:var(--sage); }

/* Theme-specific artwork (logo files, the toggle icon). Rules only ever hide,
   so each element keeps its own display value when it is on show. With no
   data-theme (no JavaScript at all) the system setting decides. */
:root[data-theme="light"] .when-dark,
:root[data-theme="dark"] .when-light{ display:none; }
@media not all and (prefers-color-scheme:dark){ :root:not([data-theme]) .when-dark{ display:none; } }
@media (prefers-color-scheme:dark){ :root:not([data-theme]) .when-light{ display:none; } }

/* 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(--band);color:var(--band-ink);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(--band);color:var(--band-ink); }
.section--slate .lede,.section--slate .body-text{ color:rgba(248,239,227,.74); }
.section--slate .eyebrow,.section--slate .sec-head__n{ color:var(--sage); }
.section--slate .sec-head__rule{ background:rgba(248,239,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(--btn);color:var(--btn-ink);
  border:1px solid var(--btn);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--btn-hover);border-color:var(--btn-hover); }
.btn__arrow{ transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--ghost{ background:transparent;color:var(--slate);border-color:var(--ghost-line); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--slate);border-color:var(--slate);color:var(--limewash); }
.section--slate .btn--ghost{ color:var(--band-ink);border-color:rgba(248,239,227,.32); }
.section--slate .btn--ghost:hover{ background:var(--band-ink);color:var(--band);border-color:var(--band-ink); }

.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(--band);color:rgba(248,239,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:var(--header-bg);
  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(31,41,48,.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;
}

/* The supplied logo, traced to SVG. The horizontal lockup stays at 32px tall
   or more (the pack's minimum); below 340px wide it would not fit at that
   size, so the mark stands in on its own, as the brand pack says. */
.logo{ display:inline-flex;align-items:center;flex:none; }
.logo__full{ display:block;height:32px;width:auto; }
@media (min-width:560px){ .logo__full{ height:40px; } }
@media (min-width:1080px){ .logo__full{ height:46px; } }
.logo__mark{ display:none;height:32px;width:auto; }
@media (max-width:339px){
  .logo__full{ display:none; }
  .logo__mark{ display:block; }
}

.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__actions{ display:flex;align-items:center;gap:.6rem; }
@media (min-width:1080px){ .header__actions{ gap:1rem; } }
.header__cta{ display:none; }
@media (min-width:1080px){ .header__cta{ display:inline-flex;padding:.85rem 1.4rem; } }

/* Theme switch: a 44px square, like the social icons. In the header from
   560px up (below that it would crowd the logo), and always in the menu. */
.theme-toggle{
  display:inline-grid;place-items:center;width:44px;height:44px;flex:none;
  border:1px solid var(--ghost-line);color:var(--slate);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.theme-toggle:hover{ border-color:var(--slate); }
.theme-toggle svg{ width:20px;height:20px; }
.header__theme{ display:none; }
@media (min-width:560px){ .header__theme{ display:inline-grid; } }
.theme-toggle--wide{
  width:auto;justify-self:start;grid-auto-flow:column;gap:.7rem;padding-inline:.9rem 1.1rem;
  font-size:var(--fs-small);letter-spacing:.06em;
}

.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(31,41,48,0) 45%,rgba(31,41,48,.6) 100%);
}

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

.hero{ position:relative;overflow:hidden;background:var(--band); }
.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(31,41,48,.62) 0%,rgba(31,41,48,.3) 34%,rgba(31,41,48,.86) 100%),
    linear-gradient(90deg,rgba(31,41,48,.8) 0%,rgba(31,41,48,.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(--band-ink);
  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(248,239,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; }
}

/* 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(248,239,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(--band-ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.cred__v{
  display:block;font-size:var(--fs-micro);letter-spacing:.17em;
  text-transform:uppercase;color:rgba(248,239,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(248,239,227,.16); }
.stage{ border-bottom:1px solid rgba(248,239,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(--band-ink);
  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(248,239,227,.74);font-size:var(--fs-small);line-height:1.75; }
.stage__d a{ color:var(--sage);text-decoration:underline;text-underline-offset:3px; }
/* Each stage is a short list of commitments the client has signed off, so a
   reader can check exactly what is promised. Marker is positioned rather than
   a grid column, so mixed inline content (bold lead-ins) flows normally. */
.stage__list{ display:grid;gap:.75rem; }
.stage__list li{
  position:relative;padding-left:1.35rem;
  color:rgba(248,239,227,.74);font-size:var(--fs-small);line-height:1.75;
}
.stage__list li::before{
  content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;
  background:var(--sage);transform:rotate(45deg);
}
.stage__list strong{ color:var(--band-ink);font-weight:500; }
.stage__cta{ justify-self:start;font-size:var(--fs-small); }
.stage__note{ font-size:var(--fs-micro);color:rgba(248,239,227,.62);line-height:1.65; }
.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(--band);border:0;padding:0;cursor:pointer;
  color:var(--band-ink);
}
.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(31,41,48,.34) 0%,rgba(31,41,48,.15) 45%,rgba(31,41,48,.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(248,239,227,.94);color:var(--band);
  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(--band-ink); }
.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(248,239,227,.78);flex:none;
}
@media (max-width:520px){
  .video__label{ flex-direction:column;align-items:flex-start;gap:.3rem; }
  /* A short frame: lift the button clear of the two-line label. */
  .video__play{ top:38%;width:56px;height:56px; }
}

/* 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; }
/* A self-hosted file: the browser's own controls in the same 16:9 box. */
.video__box{ position:relative;aspect-ratio:16/9;background:var(--band); }
.video__box video{ position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--band); }

/* ---------- 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(31,41,48,.07); }
.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(--band);color:var(--band-ink);border-color:var(--band); }
.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(248,239,227,.16);color:rgba(248,239,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(--btn);color:var(--btn-ink);
  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__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__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; }
}
.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(248,239,227,.28);color:var(--band-ink); }
.section--slate .carousel__btn:hover:not(:disabled){ background:var(--band-ink);color:var(--band); }
.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(248,239,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(--band);color:var(--band-ink); }
.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(--band-ink); }
.cta-band .lede{ color:rgba(248,239,227,.76); }
.cta-band .eyebrow{ color:var(--sage); }
.cta-band .field label{ color:rgba(248,239,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(--band-ink);border-bottom-color:rgba(248,239,227,.3); }
.cta-band .field input::placeholder,
.cta-band .field textarea::placeholder{ color:rgba(248,239,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(--band); }
.cta-band .btn:hover{ background:var(--band-ink);border-color:var(--band-ink);color:var(--band); }
.cta-band .form__note{ color:rgba(248,239,227,.58); }
.cta-band .form__status{ border-color:var(--sage);background:rgba(139,156,122,.14);color:var(--band-ink); }
.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(248,239,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(248,239,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(248,239,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(3,1fr); } }
@media (min-width:1100px){ .ig__grid{ grid-template-columns:repeat(6,1fr); } }
/* Video posts: a small play mark in the corner. */
.ig__play{
  position:absolute;top:.55rem;right:.55rem;z-index:2;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(31,41,48,.72);color:var(--band-ink);pointer-events:none;
}
.ig__play svg{ width:15px;height:15px;margin-left:2px; }
.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(31,41,48,.0);
  transition:background .4s var(--ease);
}
.ig__tile:hover::after{ background:rgba(31,41,48,.22); }
.ig__head{ display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.6rem; }

/* ---------- 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 var(--field-line);
  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:var(--placeholder); }
.field.has-error input,.field.has-error textarea,.field.has-error select{ border-bottom-color:var(--error-line); }
.field__err{ font-size:var(--fs-micro);color:var(--error);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__note a,.form__status a{ text-decoration:underline;text-underline-offset:3px; }
.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:var(--error-line);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 h3{ 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); }
/* Social icons on a light ground (the footer's are on slate). */
/* Share buttons on project pages: the same squares as the social icons. */
.share{
  margin-top:clamp(1.8rem,3vw,2.6rem);padding-top:1.4rem;border-top:1px solid var(--limewash-3);
  display:flex;align-items:center;gap:.9rem 1.4rem;flex-wrap:wrap;
}
.share__list{ display:flex;flex-wrap:wrap;gap:.6rem; }
.share__list [hidden]{ display:none; }
.share__list a,.share__list button{
  width:44px;height:44px;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);
}
.share__list a:hover,.share__list button:hover{ background:var(--btn);border-color:var(--btn);color:var(--btn-ink); }
.share__list svg{ width:18px;height:18px; }
.share__status{ font-size:var(--fs-small);color:var(--westmorland); }
.share__status:empty{ display:none; }

.contact__block .socials{ margin-top:.3rem; }
.contact__block .socials a{ border-color:var(--limewash-3);color:var(--slate); }
.contact__block .socials a:hover{ background:var(--btn);border-color:var(--btn);color:var(--btn-ink); }

.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(--band);color:var(--band-ink);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{ justify-self:start; }
.footer__logo img{ display:block;width:220px;height:auto; }  /* stacked lockup: 200px minimum */
.footer__col .footer__h{ 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(248,239,227,.74);transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--band-ink); }

.socials{ display:flex;gap:.7rem;margin-top:.4rem; }
.socials a{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(248,239,227,.24);color:var(--band-ink);
  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(--band); }
.socials svg{ width:17px;height:17px; }
.footer__follow{ font-size:var(--fs-small);color:rgba(248,239,227,.82);text-decoration:underline;text-underline-offset:3px; }
.footer__follow:hover{ color:var(--band-ink); }

.footer__bottom{
  margin-top:clamp(2.2rem,1.5rem + 3vw,3.5rem);padding-top:1.5rem;
  border-top:1px solid rgba(248,239,227,.14);
  display:grid;gap:.8rem;font-size:var(--fs-micro);letter-spacing:.09em;color:rgba(248,239,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(--band-ink); }

/* ---------- 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; }

/* ---------- 21. Scroll reveal ---------------------------------------------- */
/* Only when the script that shows them again is running: the inline script in
   <head> adds .js. Without JavaScript everything is simply visible. */

.js [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;
}
.js [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;
  }
  .js [data-reveal]{ opacity:1;transform:none; }
  .hero__media .plate{ animation:none;transform:scale(1.02); }
}