/* ==========================================================================
   Country Web Design — countrywebdesign.com
   Design language: "Earthmorphism" / Woodmorphism
   Panels of milled oak, birch and clay floating over scenic backdrops.
   Depth comes from layered shadow + grain, never from frosted glass.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- tokens */
:root{
  /* soil & bark — the structural darks */
  --soil-950:#241a12;
  --soil-900:#2f231a;
  --soil-800:#3f2f22;
  --bark-700:#4f3a29;
  --bark-600:#6b4f36;

  /* milled lumber — the panel surfaces */
  --oak-500:#a9855c;
  --oak-400:#c9a982;
  --birch-300:#dcc7a8;
  --birch-200:#e7d8c2;
  --birch-100:#f0e5d4;

  /* clay & sun — the accents */
  --clay-700:#8f4622;
  --clay-600:#a8552a;
  --clay-500:#c1652f;
  --clay-400:#d4804a;
  --sun-400:#e8a94f;
  --sun-300:#f2c476;

  /* pasture greens — the secondary */
  --moss-700:#46512f;   /* pill text: 5.5:1, was 4.32:1 */
  --moss-600:#6f7d54;
  --moss-500:#8a9a6b;

  /* paper */
  --cream-100:#f4efe6;
  --cream-50:#faf6ef;

  /* type */
  --ink:#2f231a;
  --ink-soft:#5f5040;   /* 5.7:1 on birch, 6.6:1 on paper */
  --ink-faint:#6b5b49;  /* 4.8:1 on birch — #8d7c69 was 2.98:1 */

  /* elevation — contact shadow + ambient shadow, always paired */
  --lift-1: 0 1px 2px rgba(36,26,18,.14), 0 4px 10px -3px rgba(36,26,18,.16);
  --lift-2: 0 2px 4px rgba(36,26,18,.16), 0 14px 28px -10px rgba(36,26,18,.30);
  --lift-3: 0 3px 6px rgba(36,26,18,.18), 0 28px 56px -18px rgba(36,26,18,.40);
  /* the "milled edge": bright top bevel, soft bottom pooling */
  --bevel: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 20px -12px rgba(36,26,18,.45);
  --bevel-dark: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -12px 24px -14px rgba(0,0,0,.5);

  --r-lg:24px;
  --r-md:16px;
  --r-sm:10px;

  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap:1160px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  /* A warm, worked ground rather than flat paper: low sun washes at the
     corners, a faint contour survey across the middle, linen tooth on top. */
  background-color:#f3ece0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.32 0 0 0 0 0.24 0 0 0 0 0.15 0.45 0 0 0 -0.2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(148deg, rgba(122,88,52,.028) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(148deg, rgba(122,88,52,.020) 0 1px, transparent 1px 53px),
    radial-gradient(70% 46% at 8% -4%, rgba(232,169,79,.20), transparent 62%),
    radial-gradient(58% 42% at 96% 10%, rgba(193,101,47,.14), transparent 64%),
    radial-gradient(80% 50% at 50% 104%, rgba(111,125,84,.14), transparent 62%),
    linear-gradient(180deg, #f8f3ea 0%, #f1e9dc 55%, #ece2d2 100%);
  background-attachment:fixed;
}

/* Ambient three.js field — above the paper ground, under everything else.
   A negative z-index keeps it there without content needing to opt in, so a
   stray positioned element can never end up behind it.
   NB: do not add .skip-link here — it must keep its own absolute positioning
   or it drops into flow and pushes the whole page down. */
#ambient-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}
body > header,
body > main,
body > footer{ position:relative; z-index:1; }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--soil-900);
  margin:0 0 .55em;
}
h1{ font-size:clamp(2.3rem,5.2vw,3.9rem); }
h2{ font-size:clamp(1.85rem,3.6vw,2.7rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1.1em; color:var(--ink-soft); }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 26px; }
section{ padding:clamp(64px,9vw,110px) 0; }

/* ============================================================== TEXTURES
   The grain is a tiling feTurbulence stretched on one axis so the noise
   reads as long fibres rather than static. Multiply-blended over the
   panel gradient so highlights stay warm instead of going grey.
   ------------------------------------------------------------------- */
/* Fibre, not stripes.
   A seamless high-frequency turbulence tile stretched hard on one axis: the
   isotropic noise becomes long, fine grain. Because it is still the same
   stitched tile, stretching it cannot introduce a seam — and at this opacity
   it reads as the tooth of polished veneer rather than a pattern. */
.grain::after,
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:var(--fibre-strength,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.3 0 0 0 0 0.21 0 0 0 0 0.13 0.62 0 0 0 -0.26'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:var(--fibre-size,820px 74px);
}

/* fine speckle for paper-ish surfaces */
.speckle{ position:relative; }
.speckle::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0 0.14 0.5 0 0 0 -0.24'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* =============================================================== PANELS */
/* ---------------------------------------------------------------------------
   The timber material.
   Long fibre is drawn with five repeating gradients whose periods are coprime
   (7 / 11 / 17 / 23 / 29px), so the combined pattern only repeats after ~870k
   pixels — there is no tile and therefore no seam. Cathedral figure comes from
   two large off-panel radial gradients, and each board in a row is re-angled
   by :nth-child so no two look alike.
   ------------------------------------------------------------------------- */
/* A panel should read as one quiet, well-finished surface. All the character
   lives in a broad raking light, one soft figure, and a crisp milled edge —
   the fibre itself stays barely above the threshold of noticing. */
.panel{
  position:relative;
  border-radius:var(--r-lg);
  padding:36px;
  isolation:isolate;

  --sheen:104deg;
  --figure-x:22%; --figure-y:112%;
  --gloss:rgba(255,255,255,.30);
  --shade:rgba(74,47,26,.04);
  --arc:rgba(103,72,42,.07);
  --fibre-strength:.16;
  --fibre-size:820px 74px;

  --timber:linear-gradient(158deg, #f3ebdd 0%, #e9dcc7 52%, #dfceb2 100%);

  background:
    linear-gradient(var(--sheen),
      var(--gloss) 0%,
      rgba(255,255,255,.07) 32%,
      rgba(255,255,255,0) 60%,
      var(--shade) 100%),
    radial-gradient(150% 90% at var(--figure-x) var(--figure-y), var(--arc), transparent 72%),
    var(--timber);

  /* milled edge: warm hairline, bright top arris, shadow pooling underneath */
  border:1px solid rgba(126,96,62,.20);
  box-shadow:
    0 1px 2px rgba(36,26,18,.07),
    0 10px 24px -14px rgba(36,26,18,.30),
    0 28px 56px -34px rgba(36,26,18,.34),
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(96,70,44,.10);
}
.panel > *{ position:relative; z-index:1; }

/* boards from the same tree, cut differently — light angle and figure only */
.grid > .panel:nth-child(2){ --sheen:66deg;  --figure-x:76%; --figure-y:108%; }
.grid > .panel:nth-child(3){ --sheen:128deg; --figure-x:48%; --figure-y:-14%; }
.grid > .panel:nth-child(4){ --sheen:84deg;  --figure-x:14%; --figure-y:-10%; }

/* planed oak — mid tone, for feature cards */
.panel--oak{
  --timber:linear-gradient(158deg, #e3cfae 0%, #cfae85 52%, #b8935f 100%);
  color:var(--ink);
  --arc:rgba(88,58,28,.09);
  --gloss:rgba(255,248,235,.30);
  border-color:rgba(126,96,62,.26);
}
/* mid-tone timber needs full-strength ink — --ink-soft lands at 3.07:1 here */
.panel--oak p,.panel--oak li{ color:var(--ink); }

/* stained walnut — dark panels, light type */
.panel--walnut{
  --timber:linear-gradient(158deg, #6a4c34 0%, #4c3625 48%, #33241a 100%);
  --arc:rgba(0,0,0,.14);
  --gloss:rgba(255,226,184,.13);
  --shade:rgba(0,0,0,.16);
  --fibre-strength:.24;
  color:var(--birch-200);
  border-color:rgba(255,236,208,.11);
  box-shadow:
    0 1px 2px rgba(0,0,0,.20),
    0 14px 30px -16px rgba(20,12,6,.50),
    0 34px 64px -38px rgba(20,12,6,.55),
    inset 0 1px 0 rgba(255,231,196,.16),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
.panel--walnut h2,.panel--walnut h3,.panel--walnut h4{ color:var(--birch-100); }
.panel--walnut p{ color:rgba(231,216,194,.82); }

/* fired clay — the accent panel */
/* fired clay — smooth thrown earthenware, not timber */
.panel--clay{
  --timber:
    radial-gradient(130% 95% at 26% 8%, rgba(255,240,215,.16), transparent 62%),
    linear-gradient(158deg, #d1783f 0%, #b25a2a 55%, #92451f 100%);
  --arc:rgba(96,32,4,.09);
  --gloss:rgba(255,240,212,.22);
  --shade:rgba(96,32,4,.12);
  --fibre-strength:.13;
  --fibre-size:300px 300px;   /* clay has tooth, not grain */
  color:var(--birch-100);
  border-color:rgba(255,238,214,.20);
  box-shadow:
    0 1px 2px rgba(70,26,6,.24),
    0 14px 30px -16px rgba(70,26,6,.44),
    0 34px 64px -38px rgba(70,26,6,.48),
    inset 0 1px 0 rgba(255,236,206,.24),
    inset 0 -1px 0 rgba(80,28,6,.22);
}
.panel--clay h2,.panel--clay h3,.panel--clay h4{ color:#fff8ec; }
.panel--clay p{ color:rgba(255,248,236,.90); }

/* wide surfaces: one soft seam, generously spaced, barely there */
.panel--planks{
  --timber:
    repeating-linear-gradient(180deg,
      transparent 0 148px,
      rgba(112,84,54,.09) 148px 149px,
      rgba(255,255,255,.30) 149px 150px,
      transparent 150px 298px),
    linear-gradient(158deg, #f3ebdd 0%, #e9dcc7 52%, #dfceb2 100%);
}

/* translucent tan panel for use over the hero / scenery */
.panel--tan{
  --timber:linear-gradient(158deg, rgba(240,229,212,.9), rgba(201,169,130,.82));
  backdrop-filter:blur(2px);
  border-color:rgba(255,255,255,.4);
}

/* a panel that lifts on hover */
.panel--lift{ transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease; }
.panel--lift:hover{
  transform:translateY(-5px);
  box-shadow:
    0 2px 4px rgba(36,26,18,.09),
    0 18px 36px -16px rgba(36,26,18,.34),
    0 44px 76px -40px rgba(36,26,18,.40),
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 0 -1px 0 rgba(96,70,44,.10);
}
.panel--walnut.panel--lift:hover{
  box-shadow:
    0 2px 4px rgba(0,0,0,.24),
    0 22px 42px -18px rgba(20,12,6,.55),
    0 50px 84px -44px rgba(20,12,6,.60),
    inset 0 1px 0 rgba(255,231,196,.18),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
.panel--clay.panel--lift:hover{
  box-shadow:
    0 2px 4px rgba(70,26,6,.26),
    0 22px 42px -18px rgba(70,26,6,.50),
    0 50px 84px -44px rgba(70,26,6,.54),
    inset 0 1px 0 rgba(255,236,206,.26),
    inset 0 -1px 0 rgba(80,28,6,.22);
}
@media (prefers-reduced-motion: reduce){ .panel--lift:hover{ transform:none; } }

/* ================================================================ BADGES */
.badge{
  width:58px;height:58px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  background:linear-gradient(158deg, rgba(255,255,255,.34), rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px rgba(36,26,18,.5);
  color:var(--sun-300);
}
.panel .badge{ color:var(--clay-600); background:linear-gradient(158deg,#fff,rgba(255,255,255,.35)); }
/* on dark timber and clay the badge stays part of the material, not a sticker */
.panel--walnut .badge,.band--soil .badge{
  color:var(--sun-300);
  background:linear-gradient(158deg, rgba(255,255,255,.20), rgba(255,255,255,.04));
}
.panel--clay .badge{
  color:#fff3dd;
  background:linear-gradient(158deg, rgba(255,255,255,.26), rgba(255,255,255,.06));
}
.badge svg{ width:28px;height:28px; }

.eyebrow{
  display:inline-block;
  font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay-700);
  margin-bottom:14px;
}
.eyebrow--light{ color:var(--sun-300); }

.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:999px;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(111,125,84,.14);
  color:var(--moss-700);
  border:1px solid rgba(111,125,84,.22);
}

/* =============================================================== BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;
  border:0;border-radius:999px;
  font-family:var(--font-body);font-size:1rem;font-weight:800;letter-spacing:.005em;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background .22s ease;
}
.btn svg{ width:18px;height:18px; }
.btn--primary{
  background:linear-gradient(158deg, #f2be6e, #d4763a 70%, #c26a33);
  color:#24120a;   /* 4.7:1 against the darkest stop */
  box-shadow:0 1px 2px rgba(36,26,18,.2), 0 10px 22px -8px rgba(168,85,42,.65), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(36,26,18,.2), 0 16px 30px -10px rgba(168,85,42,.7), inset 0 1px 0 rgba(255,255,255,.45); }
.btn--wood{
  background:linear-gradient(158deg, #7a5a3d, #4a3527);
  color:var(--birch-100);
  box-shadow:var(--lift-2), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--wood:hover{ transform:translateY(-2px); }
.btn--ghost{
  background:rgba(30,20,12,.44);
  color:#fdf8ee;
  border:1.5px solid rgba(244,239,230,.55);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:rgba(30,20,12,.58); transform:translateY(-2px); }
.btn--outline{
  background:transparent;color:var(--bark-600);
  border:1.5px solid rgba(107,79,54,.4);
}
.btn--outline:hover{ background:rgba(107,79,54,.08); }
/* timber reads muddy against clay — swap to pale birch there */
.panel--clay .btn--wood{
  background:linear-gradient(158deg, var(--birch-100), var(--birch-300));
  color:var(--soil-900);
}
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ==================================================================== NAV */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(244,239,230,.86);
  backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(107,79,54,.16);
}
.nav__inner{
  max-width:var(--wrap);margin:0 auto;padding:13px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{ display:flex;align-items:center;gap:11px; }
.brand__mark{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(158deg, var(--sun-300), var(--clay-600));
  box-shadow:var(--lift-1), inset 0 1px 0 rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.brand__mark svg{ width:100%;height:100%; }
.brand__name{
  font-family:var(--font-display);font-weight:700;font-size:1.16rem;line-height:1.05;
  color:var(--soil-900);letter-spacing:-.02em;
}
.brand__name span{
  display:block;font-family:var(--font-body);
  font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-700);margin-top:3px;
}

.nav__links{ display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0; }
.nav__links a{
  display:block;padding:9px 17px;border-radius:999px;
  font-weight:700;font-size:.94rem;color:var(--bark-700);
  transition:background .2s ease,color .2s ease;
}
.nav__links a:hover{ background:rgba(169,133,92,.18); color:var(--soil-900); }
.nav__links a[aria-current="page"]{
  /* dark timber only — the pale end of the oak gradient left cream text at 1.7:1 */
  background:linear-gradient(158deg,#6b4f36,#4a3527);
  color:var(--birch-100);
  box-shadow:var(--lift-1), inset 0 1px 0 rgba(255,255,255,.25);
}
.nav__links .btn{ padding:11px 22px;font-size:.94rem;margin-left:8px; }
.nav__links .btn:hover{ background:linear-gradient(158deg, #f2be6e, #d4763a 70%, #c26a33); color:#24120a; }

.nav__toggle{
  display:none;background:none;border:0;padding:10px;cursor:pointer;border-radius:10px;
}
.nav__toggle:hover{ background:rgba(169,133,92,.18); }
.nav__toggle span{
  display:block;width:23px;height:2.5px;border-radius:2px;background:var(--soil-900);
  transition:transform .28s ease, opacity .2s ease;
}
.nav__toggle span + span{ margin-top:5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:5px;
    padding:14px 22px 22px;
    background:var(--cream-100);
    border-bottom:1px solid rgba(107,79,54,.16);
    box-shadow:var(--lift-2);
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ text-align:center;padding:13px; }
  .nav__links .btn{ margin:6px 0 0; }
}

/* =================================================================== HERO */
.hero{
  position:relative;
  height:100svh;
  min-height:600px;
  max-height:1000px;
  overflow:hidden;
  /* painted fallback for browsers without WebGL */
  background:linear-gradient(180deg,#3b2b46 0%,#764746 30%,#bd5f3b 55%,#e6a052 76%,#f2c476 100%);
}
#hero-canvas{ position:absolute;inset:0;width:100%;height:100%;display:block; }

.hero__shade{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    /* a pool of shade under the headline — the scene behind it changes colour,
       so the copy cannot rely on the artwork for its contrast */
    radial-gradient(56% 44% at 50% 46%, rgba(26,16,9,.52) 0%, rgba(26,16,9,.34) 58%, transparent 100%),
    radial-gradient(125% 85% at 50% 45%, transparent 34%, rgba(36,26,18,.34) 100%),
    linear-gradient(180deg, rgba(36,26,18,.26) 0%, transparent 18%, transparent 48%, rgba(36,26,18,.32) 78%, rgba(36,26,18,.60) 100%);
}
.hero__content{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:90px 26px 120px;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 20px;border-radius:999px;margin-bottom:24px;
  background:rgba(36,26,18,.32);
  border:1px solid rgba(244,239,230,.28);
  backdrop-filter:blur(8px);
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun-300);
}
.hero__eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--sun-300);box-shadow:0 0 10px var(--sun-400);
}
.hero h1{
  color:#fdf8ee;
  max-width:15ch;
  margin-bottom:.35em;
  text-shadow:0 2px 4px rgba(36,26,18,.3), 0 16px 44px rgba(36,26,18,.5);
}
.hero h1 em{
  font-style:normal;
  color:var(--sun-300);
}
.hero__lead{
  color:rgba(250,246,239,.9);
  font-size:clamp(1.03rem,1.7vw,1.25rem);
  max-width:50ch;
  margin:0 auto;
  text-shadow:0 2px 14px rgba(36,26,18,.55);
}
.hero__actions{ display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px; }
.hero__scroll{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,246,239,.72);
}
.hero__scroll i{
  display:block;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(45deg); } 50%{ transform:translateY(7px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce){ .hero__scroll i{ animation:none; } }
@media (max-width:600px){ .hero{ min-height:560px; } .hero__scroll{ display:none; } }

/* --------------------------------------------- inner-page header banner */
.pagehead{
  position:relative;
  overflow:hidden;
  min-height:clamp(380px,44vh,520px);
  display:flex;
  align-items:center;
  padding:clamp(64px,8vw,96px) 0;
  /* painted fallback for browsers without WebGL */
  background:linear-gradient(180deg,#4a3350 0%,#8d5147 28%,#c4653a 56%,#e6a052 82%,#f2c476 100%);
}
.pagehead__canvas{ position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1; }
.pagehead__shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(62% 58% at 50% 50%, rgba(26,16,9,.52) 0%, rgba(26,16,9,.32) 60%, transparent 100%),
    radial-gradient(120% 90% at 50% 44%, transparent 32%, rgba(36,26,18,.34) 100%),
    linear-gradient(180deg, rgba(36,26,18,.26) 0%, transparent 22%, transparent 60%, rgba(36,26,18,.48) 100%);
}
.pagehead .wrap{ position:relative;z-index:3;width:100%; }
.pagehead__inner{ text-align:center; }
.pagehead h1{ color:#fdf8ee;text-shadow:0 2px 4px rgba(36,26,18,.3), 0 14px 38px rgba(36,26,18,.5);margin-bottom:.3em; }
.pagehead p{ color:rgba(250,246,239,.92);max-width:56ch;margin:0 auto;font-size:1.08rem;text-shadow:0 2px 12px rgba(36,26,18,.6); }

/* =============================================================== SECTIONS */
.sec-head{ max-width:660px;margin:0 auto clamp(40px,5vw,62px);text-align:center; }
.sec-head p{ font-size:1.08rem; }

.grid{ display:grid;gap:26px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--sidebar{ grid-template-columns:1.15fr .85fr;align-items:start;gap:34px; }
@media (max-width:940px){
  .grid--3,.grid--2,.grid--sidebar{ grid-template-columns:1fr; }
}
/* cards in a row share a baseline — trailing actions sit flush at the bottom */
.grid--3 > .panel,.grid--2 > .panel{ display:flex;flex-direction:column; }
.grid--3 > .panel > p.mt-md:last-child,
.grid--2 > .panel > p.mt-md:last-child{ margin-top:auto;padding-top:22px; }

/* Bands are translucent so the ambient field drifts through them. */
.band--cream{
  background:linear-gradient(180deg, rgba(238,229,214,.72), rgba(232,221,203,.62));
}
.band--soil{
  position:relative;
  background:linear-gradient(180deg, rgba(47,35,26,.95), rgba(36,26,18,.97));
  color:var(--birch-200);
}
.band--soil h2,.band--soil h3{ color:var(--birch-100); }
.band--soil p{ color:rgba(231,216,194,.78); }

/* list with hand-drawn check marks */
.checks{ list-style:none;margin:18px 0 0;padding:0; }
.checks li{
  position:relative;padding-left:30px;margin-bottom:11px;
  font-size:.97rem;line-height:1.6;
}
.checks li::before{
  content:"";position:absolute;left:2px;top:.45em;
  width:13px;height:7px;
  border-left:2.5px solid var(--clay-500);
  border-bottom:2.5px solid var(--clay-500);
  transform:rotate(-45deg);
  border-radius:1px;
}
.panel--walnut .checks li,.panel--clay .checks li,.band--soil .checks li{ color:rgba(231,216,194,.88); }
.panel--walnut .checks li::before,.band--soil .checks li::before{ border-color:var(--sun-400); }
.panel--clay .checks li::before{ border-color:#ffe6b8; }

/* numbered process steps */
.step__num{
  font-family:var(--font-display);font-size:2.6rem;font-weight:700;
  line-height:1;color:var(--clay-500);opacity:.55;margin-bottom:14px;display:block;
}
.panel--walnut .step__num{ color:var(--sun-400);opacity:.7; }

/* stat block */
.stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center; }
@media (max-width:700px){ .stats{ grid-template-columns:1fr; } }
.stat__n{
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(2.1rem,4vw,2.9rem);color:var(--sun-400);margin-bottom:6px;
}
.stat__l{ font-size:.82rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(231,216,194,.72); }

/* ------------------------------------------------------------ SCENERY
   Strips of living landscape between sections. Each one fades into the
   colour of whatever follows it, so the silhouettes root into that ground
   instead of being sheared off at the canvas edge.
   -------------------------------------------------------------------- */
.scene-strip{
  position:relative;
  pointer-events:none;
  overflow:hidden;
  height:clamp(96px,11vw,152px);
  margin-bottom:-1px;
}
.scene-strip canvas{ position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1; }

/* Where a strip runs into a section with a known solid colour, paint that
   colour as ground — the silhouettes root into it. */
.scene-strip--to-cream::after,
.scene-strip--to-soil::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:60%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--ground) 88%);
}
.scene-strip--to-cream{ --ground:rgba(238,229,214,.94); }
.scene-strip--to-soil{ --ground:rgba(47,35,26,.97); }

/* Against the page's own fixed gradient there is no colour to match, so mask
   the canvas away instead of washing it out with an approximate cream. */
.scene-strip--to-page canvas{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.38) 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.38) 80%,transparent 100%);
}

/* the clothesline needs headroom for the line and the hems */
.scene-strip--tall{ height:clamp(140px,16vw,215px); }
.scene-strip--tall::after{ height:40%; }

/* fireflies live inside the dark band, behind its content */
.band--soil{ overflow:hidden; }
.scene-fill{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.scene-fill canvas{ width:100%;height:100%;display:block; }
.band--soil > .wrap{ position:relative;z-index:1; }

/* CTA strip */
.cta{ position:relative;overflow:hidden; }
.cta .panel{ text-align:center;padding:clamp(38px,6vw,66px); }
.cta h2{ max-width:20ch;margin-left:auto;margin-right:auto; }
.cta p{ max-width:52ch;margin-left:auto;margin-right:auto; }
.cta__actions{ display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px; }

/* ================================================================ FOOTER */
.footer{
  position:relative;
  background:linear-gradient(180deg,var(--soil-900),var(--soil-950));
  color:rgba(231,216,194,.76);
  padding:70px 0 26px;
  font-size:.95rem;
}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--moss-600),var(--sun-400),var(--clay-500),var(--moss-600));
}
.footer__grid{ display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:46px;margin-bottom:44px; }
@media (max-width:800px){ .footer__grid{ grid-template-columns:1fr;gap:34px; } }
.footer h4{
  color:var(--birch-100);font-family:var(--font-body);
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:16px;
}
.footer .brand__name{ color:var(--birch-100); }
.footer p{ color:rgba(231,216,194,.66);max-width:38ch; }
.footer a{ color:rgba(231,216,194,.78);transition:color .2s ease; }
.footer a:hover{ color:var(--sun-300); }
.footer ul{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px; }
/* social — icon-only links, so each carries its own aria-label */
.social{ display:flex;gap:10px;margin-top:22px;flex-wrap:wrap; }
.social--center{ justify-content:center;margin:0 0 24px; }
.social a{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(231,216,194,.10);
  border:1px solid rgba(231,216,194,.22);
  color:var(--birch-100);
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.social a:hover{
  background:rgba(232,169,79,.22);
  border-color:rgba(232,169,79,.55);
  color:#fff8ec;
  transform:translateY(-2px);
}
.social svg{ width:21px;height:21px;display:block; }
@media (prefers-reduced-motion: reduce){ .social a:hover{ transform:none; } }

.footer__bottom{
  border-top:1px solid rgba(231,216,194,.14);padding-top:24px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.85rem;color:rgba(231,216,194,.55);
}

/* ================================================================== FORM */
.field{ margin-bottom:20px; }
.field label{
  display:block;margin-bottom:8px;
  font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bark-700);
}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(107,79,54,.28);
  border-radius:var(--r-sm);
  box-shadow:inset 0 2px 5px rgba(36,26,18,.07);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea{ min-height:150px;resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;
  border-color:var(--clay-500);
  box-shadow:inset 0 2px 5px rgba(36,26,18,.05), 0 0 0 3px rgba(193,101,47,.2);
}
.field__row{ display:grid;grid-template-columns:1fr 1fr;gap:18px; }
@media (max-width:640px){ .field__row{ grid-template-columns:1fr; } }
.form-note{ font-size:.85rem;color:var(--ink-faint);margin-top:14px; }
.form-status{
  margin-top:16px;padding:13px 16px;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:600;display:none;
}
.form-status.is-shown{ display:block; }
.form-status--ok{ background:rgba(111,125,84,.16);color:var(--moss-700);border:1px solid rgba(111,125,84,.3); }
.form-status--err{ background:rgba(168,85,42,.14);color:#7c3c1c;border:1px solid rgba(168,85,42,.34); }

/* honeypot — off-canvas for people, irresistible to bots. Absolute, so it
   never takes part in layout (a relative one would push the page down). */
.hp{
  position:absolute !important;
  left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* contact rows */
.contact-row{ display:flex;gap:16px;align-items:flex-start;margin-bottom:26px; }
.contact-row:last-child{ margin-bottom:0; }
.contact-row .badge{ width:46px;height:46px;border-radius:14px;margin:0;flex-shrink:0; }
.contact-row .badge svg{ width:22px;height:22px; }
.contact-row h4{ margin:0 0 3px;font-size:1.02rem; }
.contact-row a,.contact-row p{ margin:0;font-size:.97rem; }
.contact-row a:hover{ text-decoration:underline; }

/* map frame */
.map-frame{
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--lift-2);border:5px solid var(--birch-200);
  line-height:0;
}
.map-frame iframe{ width:100%;height:340px;border:0;display:block;filter:sepia(.22) saturate(1.05); }

/* ============================================================ ANIMATIONS */
/* Gated behind .js so content is never hidden when scripts don't run. */
.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-in{ opacity:1;transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1;transform:none;transition:none; }
}

/* ============================================================== UTILITIES */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.mt-md{ margin-top:24px; }
.mt-lg{ margin-top:44px; }
.mb-0{ margin-bottom:0; }
.lead{ font-size:1.1rem; }
.muted{ color:var(--ink-faint); }
.stack > * + *{ margin-top:20px; }
.divider{
  height:1px;border:0;margin:30px 0;
  background:linear-gradient(90deg,transparent,rgba(107,79,54,.3),transparent);
}
.panel--walnut .divider,.band--soil .divider{ background:linear-gradient(90deg,transparent,rgba(231,216,194,.25),transparent); }

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 20px;background:var(--soil-900);color:var(--birch-100);
  border-radius:0 0 var(--r-sm) 0;font-weight:700;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--clay-500);outline-offset:3px;border-radius:4px; }