/* ============================================================
   LAND OWNERS GROUP
   Typeface pairing: IBM Plex Serif (display) + Inter (body/UI).
   Both OFL, both self-hosted — the page makes zero external requests.

   Palette is derived from the existing logo mark:
     #197D29 deep green · #AACD2F lime · #279AD1 sky · #464749 charcoal
   Every text pair in here has a measured WCAG ratio. Re-run
   `python3 tools/contrast.py` before changing any colour.

   v2 (28 Aug 2026) — design review fixes: button font-family, type-scale
   collision, unified grid gaps, project-card subgrid, featured project card.
   v3 (28 Aug 2026) — contact form takes first name and surname separately.
   v4 (28 Aug 2026) — full-bleed bands and the featured project image made
   taller.
   v10 (31 Aug 2026) — space after a list in prose.
   v9 (31 Aug 2026) — long-form prose styles for the privacy policy.
   v8 (31 Aug 2026) — .sr-only, for section headings that belong in the
   document outline but not in the design.
   v7 (28 Aug 2026) — analytics consent bar (inert until a GA id is set).
   v6 (28 Aug 2026) — featured project card: stop the description stretching.
   v5 (28 Aug 2026) — band height doubled again, to a near-full-viewport hero.
   The sources are 1600x470, so at 1120px on a retina display the browser is
   magnifying roughly 4.8x. The arithmetic says that should look bad and it
   does not: these are soft-focus, heavily grained, warm-graded photographs
   where magnification costs very little and composition gains a lot. Checked
   side by side at 1:1 before committing, not inferred. A crisp, detailed
   photograph would NOT survive this treatment, so if the photography is ever
   replaced, re-check this height against the new frames.

   ⚠ VERSIONED FILE. Served immutable/1yr via netlify.toml.
   NEVER edit in place once deployed — copy to .v2 and update the
   <link> in every HTML file. `tools/verify-build.py` checks that
   the links and the file on disk agree.
   ============================================================ */

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter.var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plex Serif';
  src:url('../fonts/plexserif-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plex Serif';
  src:url('../fonts/plexserif-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

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

/* <button> inherits neither font-family nor colour from body. The submit
   button was rendering in Arial at 49.2px while every <a class="btn"> was
   Inter at 54px: same class, two typefaces, two heights. */
button,input,select,textarea{font-family:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

:root{
  /* ---- Colour. Warm neutrals; the ground is paper, not white. ---------- */
  --bone:#F7F5F0;      /* page ground */
  --bone-2:#EFEBE2;    /* alternating section */
  --bone-3:#E4DFD3;    /* rules, inset fills */
  --ink:#1B1D18;       /* 15.60:1 on bone */
  --ink-2:#4A4E45;     /*  7.81:1 on bone — secondary prose */
  --ink-3:#5C6156;     /*  5.84:1 on bone — meta, the lightest text allowed */
  --green:#197D29;     /* brand mark green, fills only */
  --green-t:#146024;   /*  7.06:1 on bone — the green used for TEXT and links */
  --lime:#AACD2F;      /* brand lime. 1.9:1 on bone — DECORATIVE ONLY, never text */
  --sky:#279AD1;       /* brand sky. Decorative only. */
  --clay:#8F3D1B;      /*  6.76:1 on bone — ploughed-earth accent */
  --line:rgba(27,29,24,.14);
  --line-2:rgba(27,29,24,.28);

  /* ---- Type. Six steps, referenced everywhere. Eight steps drift. ------ */
  --t-micro:clamp(11px,.72vw,12.5px);   /* overlines, tracked caps */
  --t-small:clamp(13.5px,.95vw,15px);   /* meta, fine print, captions */
  --t-body:clamp(16px,1.05vw,17.5px);   /* body prose */
  --t-lead:clamp(19px,1.5vw,22px);     /* section ledes */
  /* --t-lead and --t-h3 used to resolve to 19px and 20px at 1024, and 19 /
     20.4 at 1200. A 1px difference is noise, not a hierarchy step. h3 now
     stays 13-31% above the lede at every width, and 25px keeps the longest
     project title ("Bruce Highway Bypass") on one line in a card. */
  --t-h3:clamp(22px,2vw,25px);
  --t-h2:clamp(28px,3.2vw,42px);
  --t-h1:clamp(38px,5.6vw,78px);

  --serif:'Plex Serif',Iowan Old Style,Palatino,Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  /* ---- Rhythm. Five steps; grouping is what makes a page readable. ----- */
  --sp-1:clamp(.5rem,1.1vh,.75rem);     /* bind a label to what it labels */
  --sp-2:clamp(.9rem,2vh,1.4rem);       /* within a group */
  --sp-3:clamp(1.5rem,3.2vh,2.4rem);    /* between groups */
  --sp-4:clamp(2.4rem,5vh,3.8rem);      /* before a major break */
  --sp-5:clamp(3.5rem,9vh,7rem);        /* between sections */

  /* One gap scale. The grids used to run on four separate clamps that
     resolved to 40 / 45 / 48 / 72px, three of them within 8px of each other. */
  --gap:clamp(1.5rem,2.8vw,2.5rem);     /* 24 -> 40  cards, values, footer */
  --gap-lg:clamp(2rem,5vw,4.5rem);      /* 32 -> 72  two-column splits */

  --pad:clamp(1.25rem,5vw,5rem);        /* page gutter */
  --shell:1200px;                       /* max content width */
  --measure:34rem;                      /* ~72 chars — prose caps here, and so
                                           must the CONTAINERS holding prose */
  --r:4px;                              /* one radius; this brand is not round */
  --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:76px;
}

/* ---- ORPHAN CONTROL -----------------------------------------------------
   Standing rule: this block goes in the base stylesheet before any content.
   balance = short blocks of 2–3 lines (headings, labels, captions)
   pretty  = long-form prose
   Audited on the rendered output with tools/check-orphans.py, not by eye. */
h1,h2,h3,h4,summary,figcaption,
.overline,.card h3,.svc h3,
.note,.stat-l,.foot-h,label{text-wrap:balance}
p,li,.prose p,.prose li,
.lead,.hero-sub,.rec-role,.svc p,.val p,.form-note{text-wrap:pretty}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
svg{display:block}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.015em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);line-height:1.12}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.005em}

a{color:var(--green-t);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:2.5px solid var(--green-t);outline-offset:3px;border-radius:2px}

/* Available to assistive technology, absent from the visual design. Used for
   section headings that keep the document outline intact: the services and
   projects grids are top-level sections, but their headings are set as cards
   and the page would look wrong with a visible h2 above them. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bone);
  padding:.7rem 1.1rem;border-radius:0 0 var(--r) 0;font-size:var(--t-small)}
.skip:focus{left:0}

/* ---- Layout primitives -------------------------------------------------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);width:100%}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:var(--sp-2)}

/* ---- Long-form prose (the privacy policy) -------------------------------
   A legal page nobody wants to read is a page nobody reads. Generous
   spacing, a capped measure and real hierarchy so it can be skimmed for the
   one section a person actually came for. */
.prose h2{
  font-size:var(--t-h3);margin-top:var(--sp-5);margin-bottom:var(--sp-2);
  padding-top:var(--sp-3);border-top:1px solid var(--line);
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{
  font-size:var(--t-body);font-family:var(--sans);font-weight:600;
  letter-spacing:0;margin-top:var(--sp-3);margin-bottom:var(--sp-1);
}
.prose ul{margin:var(--sp-2) 0 0;padding-left:0;list-style:none}
.prose li{
  position:relative;padding-left:1.25rem;margin-top:.5rem;
  color:var(--ink-2);line-height:1.6;
}
.prose li::before{
  content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;
  background:var(--lime);border-radius:50%;
}
.prose ul+p{margin-top:var(--sp-2)}
.prose p{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose .note{
  margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border-left:2px solid var(--clay);background:var(--bone-2);
  color:var(--ink);font-size:var(--t-small);line-height:1.6;
}
.alt .prose .note{background:var(--bone)}
.updated{
  margin-top:var(--sp-3);font-size:var(--t-small);color:var(--ink-3);
}
section{padding-block:var(--sp-5)}
.alt{background:var(--bone-2)}
.rule{border:0;border-top:1px solid var(--line)}

.overline{
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);
  display:flex;align-items:center;gap:.7em;
}
.overline::after{content:"";flex:1;height:1px;background:var(--line);max-width:5rem}
.lead{font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:var(--measure)}

/* ---- Header ------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bone) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  min-height:var(--nav-h);display:flex;align-items:center;gap:1.5rem;
}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:42px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem)}
.nav a{
  font-size:var(--t-small);font-weight:500;color:var(--ink-2);
  text-decoration:none;letter-spacing:.01em;padding-block:.4rem;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--green)}

.call{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--green);color:#fff;text-decoration:none;
  font-size:var(--t-small);font-weight:600;letter-spacing:.01em;
  padding:.62rem 1.1rem;border-radius:var(--r-pill);white-space:nowrap;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.nav a.call,.call{color:#fff}
.nav a.call:hover,.call:hover{background:#146024;transform:translateY(-1px);color:#fff}
.call svg{width:1em;height:1em;flex:0 0 auto;fill:currentColor}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--line-2);
  border-radius:var(--r);width:44px;height:40px;cursor:pointer;
  align-items:center;justify-content:center;color:var(--ink);
}
.burger span{display:block;width:19px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:1.5px;background:currentColor;
  transition:transform .25s var(--ease),top .25s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:860px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bone);border-bottom:1px solid var(--line);
    padding:var(--pad) var(--pad) calc(var(--pad) + .5rem);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease);
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  }
  .nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav a{font-size:var(--t-lead);font-family:var(--serif);padding-block:.7rem;
    border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line);color:var(--green-t)}
  .nav .call{margin-top:var(--sp-2);justify-content:center;font-size:var(--t-body);padding-block:.85rem}
}

/* ---- Hero --------------------------------------------------------------- */
.hero{padding-block:clamp(3rem,9vh,7rem) clamp(2rem,5vh,3.5rem)}
.hero h1{max-width:18ch}
.hero .overline{margin-bottom:var(--sp-3)}
.hero-sub{
  margin-top:var(--sp-3);font-size:var(--t-lead);line-height:1.45;
  color:var(--ink-2);max-width:38rem;
}
.hero-act{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--ink);color:var(--bone);text-decoration:none;
  font-size:var(--t-body);font-weight:600;padding:.85rem 1.5rem;
  /* explicit: a <button> defaults to line-height:normal and would sit 5px
     shorter than the same class on an <a> */
  line-height:1.65;border-radius:var(--r-pill);
  /* An inline element with a ::before fill needs its own stacking context,
     or the transform drops the fill on top of the label and hides it. */
  isolation:isolate;position:relative;overflow:hidden;
  transition:transform .25s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--green);
  transform:translateY(101%);transition:transform .3s var(--ease);
}
.btn:hover::before{transform:none}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1em;height:1em;fill:currentColor}
.btn-2{
  display:inline-flex;align-items:center;gap:.5em;color:var(--ink);
  font-size:var(--t-body);font-weight:500;text-decoration:none;
  border-bottom:1.5px solid var(--line-2);padding-bottom:.15rem;
  transition:border-color .2s,gap .2s var(--ease);
}
.btn-2:hover{border-bottom-color:var(--green);gap:.85em}

/* ---- Full-bleed image band ---------------------------------------------- */
.band{position:relative;width:100%;overflow:hidden;background:var(--bone-3)}
.band img{width:100%;height:clamp(440px,78vw,1120px);object-fit:cover;object-position:center 62%}
.band-cap{
  position:absolute;left:0;right:0;bottom:0;padding:var(--sp-3) var(--pad);
  background:linear-gradient(to top,rgba(27,29,24,.72),rgba(27,29,24,0));
  color:#EDEAE3;font-size:var(--t-small);
}
.band-cap span{max-width:var(--shell);margin-inline:auto;display:block}

/* ---- Section heading block ---------------------------------------------- */
.sec-h{margin-bottom:var(--sp-4);max-width:var(--measure)}
.sec-h .overline{margin-bottom:var(--sp-2)}
.sec-h h2+p{margin-top:var(--sp-2)}

/* ---- Services ----------------------------------------------------------- */
.svc-grid{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:760px){.svc-grid{grid-template-columns:1fr 1fr}}
.svc{background:var(--bone);padding:var(--sp-4) clamp(1.25rem,2.5vw,2.25rem)}
.alt .svc{background:var(--bone-2)}
.svc-n{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;color:var(--green-t);display:block;margin-bottom:var(--sp-2);
}
.svc h3{margin-bottom:var(--sp-2)}
.svc p{color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.svc ul{margin-top:var(--sp-2);padding-left:0;list-style:none}
.svc li{
  font-size:var(--t-small);color:var(--ink-2);line-height:1.5;
  padding-left:1.1rem;position:relative;margin-top:.45rem;
}
.svc li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--lime);border-radius:50%;
}
.svc .flag{
  margin-top:var(--sp-2);font-size:var(--t-small);color:var(--clay);
  border-left:2px solid var(--clay);padding-left:.8rem;line-height:1.5;
}

/* ---- Project records ---------------------------------------------------- */
.rec-grid{display:grid;gap:var(--gap)}
@media (min-width:680px){.rec-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.rec-grid{grid-template-columns:repeat(3,1fr)}}
/* The home page previews exactly three projects. Two columns would leave the
   third alone in its row, so this grid skips the two-column step entirely. */
.rec-grid.is-3{grid-template-columns:1fr}
@media (min-width:900px){.rec-grid.is-3{grid-template-columns:repeat(3,1fr)}}
.rec{display:flex;flex-direction:column;background:var(--bone);border:1px solid var(--line)}

/* Cards stretch to equal height and the meta block is bottom-aligned, so the
   rule above COUNTERPARTY floated wherever the meta happened to start: three
   rules at three heights across a row (meta blocks measured 188/130/111px at
   1440). Subgrid puts image, title, description and meta on shared tracks so
   all four align across the row. Supported in Chromium, Firefox and WebKit;
   the flex layout above remains the fallback. */
@supports (grid-template-rows:subgrid){
  @media (min-width:680px){
    .rec-grid{grid-auto-rows:auto}
    .rec:not(.rec-feat){display:grid;grid-row:span 4;grid-template-rows:subgrid}
    .rec:not(.rec-feat) .rec-b{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:var(--sp-2)}
    .rec:not(.rec-feat) .rec-role{flex:none}
  }
}

/* Seven projects never divide evenly: the grid ended 3+3+1 above 1040px and
   2+2+2+1 below it, leaving a lone card beside empty cells at every
   multi-column width. The first project runs full width as a featured record,
   which leaves six to fill two clean rows of three (or three of two). */
.rec-feat{grid-column:1 / -1}
@media (min-width:680px){
  .rec-feat{display:grid;grid-template-columns:2fr 3fr;align-items:stretch}
  .rec-feat .rec-img{aspect-ratio:auto;height:100%;min-height:460px}
  .rec-feat .rec-b{justify-content:center;padding:var(--sp-4) clamp(1.4rem,2.5vw,2.4rem)}
  .rec-feat h3{font-size:var(--t-h2)}
  /* .rec-role carries flex:1 so that in a normal card the meta block is
     pushed to the bottom. On the featured card the body is centred instead, so
     the same rule just stretched a three-line paragraph into a 202px box with
     a void under the text. */
  .rec-feat .rec-role{flex:none;font-size:var(--t-body);max-width:46ch}
  .rec-feat .rec-meta{max-width:52ch}
}
.alt .rec{background:var(--bone-2)}
.rec-img{aspect-ratio:4/3;overflow:hidden;background:var(--bone-3)}
.rec-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rec:hover .rec-img img{transform:scale(1.035)}
.rec-b{padding:var(--sp-3) clamp(1.1rem,2vw,1.6rem) var(--sp-3);display:flex;
  flex-direction:column;gap:var(--sp-2);flex:1}
.rec h3{font-size:var(--t-h3)}
.rec-role{font-size:var(--t-small);color:var(--ink-2);line-height:1.55;flex:1}
.rec-meta{
  display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;
  font-size:var(--t-micro);border-top:1px solid var(--line);padding-top:var(--sp-2);
}
.rec-meta dt{
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-3);
  white-space:nowrap;
}
.rec-meta dd{color:var(--ink);font-size:var(--t-small);line-height:1.4}

/* ---- Values / people ---------------------------------------------------- */
.val-grid{display:grid;gap:var(--gap);margin-top:var(--sp-4)}
/* Three columns at 760 gave each value a ~220px measure, which ran the
   longer ones to eight lines and stranded the last word. Two up on tablet,
   three only when there is width to carry them. */
@media (min-width:620px){.val-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.val-grid{grid-template-columns:repeat(3,1fr)}}
.val h3{font-size:var(--t-h3);margin-bottom:var(--sp-2)}
.val h3::before{
  content:"";display:block;width:2.2rem;height:3px;background:var(--lime);
  margin-bottom:var(--sp-2);
}
.val p{color:var(--ink-2);font-size:var(--t-small);line-height:1.62}

/* ---- Split (text + image) ----------------------------------------------- */
.split{display:grid;gap:var(--gap-lg);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split img{width:100%;border:1px solid var(--line)}

/* ---- Callout / CTA band ------------------------------------------------- */
.cta{background:var(--ink);color:var(--bone)}
.cta h2{color:var(--bone);max-width:18ch}
.cta p{color:#C9CCC2;max-width:var(--measure);margin-top:var(--sp-2)}
.cta .overline{color:#9AA093}
.cta .overline::after{background:rgba(247,245,240,.22)}
.cta .btn{background:var(--bone);color:var(--ink)}
.cta .btn::before{background:var(--lime)}
.cta .btn-2{color:var(--bone);border-bottom-color:rgba(247,245,240,.4)}
.cta .btn-2:hover{border-bottom-color:var(--lime)}
.cta-act{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center}

/* ---- Contact ------------------------------------------------------------ */
.contact-grid{display:grid;gap:var(--gap-lg)}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}

.dial{
  display:flex;align-items:center;gap:1rem;max-width:26rem;text-decoration:none;color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);padding:1.1rem 1.3rem;
  transition:border-color .2s,background .2s;
}
.dial:hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 5%,transparent)}
.dial-ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;
}
.dial-ic svg{width:19px;height:19px;fill:#fff}
.dial-t{display:block;font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.dial-v{display:block;font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;margin-top:.15rem}

/* Two fields side by side. Below 560px they stack, because two half-width
   text inputs on a phone are worse than two full-width ones. */
.fld-row{display:grid;gap:0 var(--sp-2)}
@media (min-width:560px){.fld-row{grid-template-columns:1fr 1fr}}

form{max-width:var(--measure)}
@media (min-width:900px){form{max-width:none}}
.fld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--sp-3)}
.fld label{font-size:var(--t-micro);letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2)}
.fld .req{color:var(--clay)}
.fld input,.fld textarea,.fld select{
  font-family:var(--sans);font-size:var(--t-body);color:var(--ink);
  background:var(--bone);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.75rem .9rem;width:100%;transition:border-color .2s,box-shadow .2s;
}
.alt .fld input,.alt .fld textarea,.alt .fld select{background:var(--bone)}
.fld textarea{min-height:9rem;resize:vertical;line-height:1.55}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)}
.fld .hint{font-size:var(--t-small);color:var(--ink-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:var(--t-small);color:var(--ink-3);margin-top:var(--sp-2);max-width:var(--measure)}

/* ---- Footer ------------------------------------------------------------- */
.foot{background:var(--ink);color:#C9CCC2;padding-block:var(--sp-5) var(--sp-4);font-size:var(--t-small)}
.foot a{color:#E4E1D9}
.foot-grid{display:grid;gap:var(--gap)}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-h{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:#9AA093;font-weight:600;margin-bottom:var(--sp-2)}
.foot ul{list-style:none}
.foot li{margin-bottom:.15rem}
.foot li a{display:inline-block;padding-block:.35rem;min-height:24px}
.foot img{height:38px;width:auto;margin-bottom:var(--sp-2)}
.foot-b{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid rgba(247,245,240,.14);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:var(--t-micro);color:#9AA093;
}

/* ---- Reveal on scroll (opt-in, and inert without JS) -------------------- */
.rv{opacity:0;transform:translateY(14px)}
.js .rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in,.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---- Print -------------------------------------------------------------- */
@media print{
  .hdr,.burger,.band,.cta,.rv{position:static}
  .rv{opacity:1;transform:none}
  body{background:#fff;color:#000;font-size:11pt}
  .hdr,.foot{background:none;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}


/* ---- Analytics consent -------------------------------------------------
   Only rendered when a GA measurement id is actually configured. With no id
   the site sets no cookies, so there is nothing to consent to and the bar
   never appears. Nothing is sent to Google before the visitor accepts. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink);color:#C9CCC2;
  border-top:3px solid var(--lime);
  padding:var(--sp-3) var(--pad);
  font-size:var(--t-small);line-height:1.55;
}
.consent[hidden]{display:none}
.consent-in{
  max-width:var(--shell);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
}
.consent p{flex:1 1 22rem;margin:0;max-width:46rem}
.consent a{color:#E4E1D9}
.consent-act{display:flex;gap:.7rem;flex-wrap:wrap}
.consent button{
  font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  padding:.6rem 1.2rem;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid transparent;white-space:nowrap;min-height:40px;
}
#consent-yes{background:var(--bone);color:var(--ink)}
#consent-yes:hover{background:var(--lime)}
#consent-no{background:none;color:#C9CCC2;border-color:rgba(247,245,240,.35)}
#consent-no:hover{border-color:var(--bone);color:var(--bone)}
@media (max-width:620px){
  .consent-act{width:100%}
  .consent button{flex:1}
}