/* =====================================================================
   Sidesuites: the shared system for every public page
   (home, team, Check My Lot, the guides, FAQ, resources, city pages).

   v5. Mid-century modern carried by proportion, the photographs and the
   wood, not by ornament:
   - a sun-washed white ground and a warm concrete band (--paper-2),
   - deep navy ink drawn from the brand blue; navy is the inverse ground of
     the product story (the walkthrough and plan band, the how-it-works
     frame, a pressed use tile, the footer),
   - walnut (--walnut) is the inverse ground of the OFFER and the call to
     act: the hero's title box and the closing card, the two places that
     carry the same pair of buttons. Walnut stays walnut in dark mode,
   - ONE warm accent: the butter yellow of the Sidesuite's own front door,
     kept for the primary action, focus on dark grounds, and a few marks,
   - Newsreader for display (one serif on the page: roman 400 for headings
     and figures, italic for "Neighbors with benefits.", 500 for the slogan
     pill) over Hanken Grotesk for everything people read and press, and
     the price note's type (Hanken 400, sentence case) as the one label style; no all caps anywhere,
   - hairline rules, a 12-column 1280px container, calm motion.
   The walnut top bar with the logo's five-colour stripe along its bottom,
   and its one-colour plaster lockup, stay until the owner's new logo arrives.

   Interaction rules (owner's brief, these win over any other guidance):
   - Nothing is ever underlined: not at rest, on hover, on press, or visited.
   - Words (links) lift 2px and change colour on hover.
   - Buttons never lift. Hover shifts the fill; a press scales to .97 and
     deepens the fill.
   - Hover effects only where a real pointer can hover. Reduced motion keeps
     the colour changes and drops the lift and the press scale.

   Fonts (put in <head> of every page, before this file):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400..700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&display=swap">
   Until a page's link is swapped, the stacks below fall back to the old
   DM Sans / Fraunces link, so nothing breaks mid-rollout.

   Dark grounds: put .on-walnut on a walnut block (it paints the ground and
   remaps every text role, outline and focus colour) and .on-navy inside a
   navy block (it remaps the roles; the block paints var(--navy) itself).

   Layout: .wrap is the one container (1280px of content at 1440, fluid
   gutters 24px on a phone to 80px on a desktop). Page sections pad with
   --pad. Radii: --r-sm 10 (fields, chips), --r 16 (cards, panels),
   --r-lg 24 (photo frames, bands), --pill (buttons, tags). A box set
   inside a frame takes the concentric radius: calc(var(--r-lg) - inset).

   The nav, footer and logo markup every page uses is documented beside
   each block below. Page-specific styles live in the page (home, team),
   in css/pages.css (guides) or in tools/adu/app_template.html (Check My Lot).
   ===================================================================== */

:root{
  /* ---- brand swatches (the logo sheet). Fills only; text on them uses --dark. ---- */
  --blue:#2F6B9A;     /* brand blue. White on it 5.62:1 */
  --yellow:#F2D479;   /* the door. Navy on it 10.31:1, walnut ink on it 11.93:1 */
  --orange:#E8782A;   /* navy on it 4.93:1 */
  --tan:#C9A27A;      /* navy on it 6.40:1 */
  --red:#C8402F;      /* the house mark on light grounds */
  --cream:#F6EEDC;    /* the bar's one-colour lockup and words */
  --on-red:#FFF8EA; --on-blue:#FFFFFF;

  /* ---- grounds and type (light) ---- */
  --paper:#FFFFFF;    /* page ground: sun-washed white */
  --paper-2:#F4F3EF;  /* the concrete band (the plinth in the photos) */
  --card:#FFFFFF;     /* cards sit on --paper-2, or on --paper with a hairline */
  --ink:#14283E;      /* navy ink: 14.97:1 on paper, 13.48:1 on paper-2 */
  --text-2:#3D5066;   /* body text: 8.28:1 on paper, 7.45:1 on paper-2 */
  --muted:#5D6D7E;    /* labels and meta only: 5.31:1 on paper, 4.78:1 on paper-2 */
  --line:rgba(20,40,62,.14);        /* the hairline: 1px, inside the content edges */
  --line-2:rgba(20,40,62,.26);      /* a firmer hairline (table heads, step rules) */
  --field-line:rgba(20,40,62,.52);  /* input borders: 3.1:1 on white (WCAG 1.4.11) */
  --link:#245A88;     /* words you can click: 7.26:1 on paper, 6.54:1 on paper-2; 600 weight is the non-colour cue */
  --link-hover:#14283E;
  --red-ink:#A8321F;  /* red words on light grounds (guides): 5.79:1 */
  --dark:#14283E;     /* fixed navy: text on yellow/orange/tan, never flips with the appearance */
  --tint:rgba(20,40,62,.05);  --tint-2:rgba(20,40,62,.09);   /* hover / press fills on light grounds */

  /* the product's inverse ground: deep navy (walkthrough band, how-it-works frame, pressed tiles, footer) */
  --navy:#13283F; --navy-2:#1A3550;       /* --navy-2: a card on navy */
  --inv-ink:#FFFFFF;  /* 14.97:1 on navy */
  --inv-2:#C9D3DE;    /* 9.88:1 on navy, 8.30:1 on navy-2 */
  --inv-muted:#A9B7C6;/* 7.32:1 on navy, 6.16:1 on navy-2 */
  --inv-line:rgba(255,255,255,.16);
  --inv-link:#9CC3E4; /* 8.08:1 on navy */

  /* the offer's inverse ground: walnut (the hero's title box, the closing card). Walnut in dark mode too (a step lifted). */
  --walnut:#2B2019;
  --on-walnut:#F5F2EB;        /* plaster words: 14.19:1 on walnut */
  --on-walnut-2:#DCD0BF;      /* body text: 10.44:1 */
  --on-walnut-muted:#BDAE9A;  /* labels: 7.32:1 */
  --walnut-line:rgba(245,242,235,.16);
  --walnut-line-2:rgba(245,242,235,.42);   /* outline buttons: 3.66:1 against walnut */
  --walnut-ink:#211912;       /* the door's yellow carries walnut-dark words inside a walnut block: 11.93:1 */

  /* the one accent: the door's butter yellow, for the primary action */
  --accent:#F2D479; --accent-ink:#14283E;   /* 10.31:1 */
  --accent-h:#EDC85C; --accent-a:#E3BC48;   /* hover 9.28:1, press 8.24:1 */

  /* footer */
  --foot:#0C1724; --foot-text:#FFFFFF; --foot-2:#B9C6D3; --foot-hover:#F2D479;   /* the home hero's night navy: 18.05 / 10.38 / 12.43:1 */

  /* the top bar: walnut, the same wood as the hero box and the closing card, with the logo's five colours
     as a stripe along its bottom edge. Plaster words and lockup 14.19:1 (12.57 dark, 15.49 Increase Contrast), the yellow
     hover / dot / focus ring 10.93:1 (9.69 dark, 11.93 Increase Contrast); the yellow pill carries walnut-ink words */
  --nav-bg:#2B2019; --nav-edge:#1E1611; --nav-fg:#F5F2EB; --nav-accent:#F2D479;
  --nav-line:rgba(245,242,235,.16);
  --nav-bd:rgba(245,242,235,.45);    /* every outline control in the bar (waitlist, ES, menu): 3.98:1 against it, 3.78 dark */
  --nav-fill-h:rgba(245,242,235,.08);
  --nav-fill-a:rgba(245,242,235,.13);

  --focus:#14283E;
  --shadow:0 1px 2px rgba(20,40,62,.06),0 12px 32px -14px rgba(20,40,62,.22);

  /* form messages (the home's waitlist, Check My Lot): a sent note and an error, each a pale ground with its own ink */
  --ok-bg:#E4F2E8; --ok-ink:#1D5A35;    /* 7.08:1 */
  --err-bg:#FBE6E1; --err-ink:#8A2A18;  /* 7.22:1; the error ink is also the field-error line and its "!" disc */

  /* shape, measure, rhythm */
  --r-sm:10px; --r:16px; --r-md:16px; --r-lg:24px; --pill:999px;
  --max:1440px; --nav-h:68px;
  --gut:clamp(24px,5.556vw,80px);   /* 24 on a phone, 43 at 768, 57 at 1024, 80 from 1440 */
  --gut-l:max(var(--gut),env(safe-area-inset-left,0px)); --gut-r:max(var(--gut),env(safe-area-inset-right,0px));
  --pad:clamp(4.5rem,3rem + 6vw,8.5rem);   /* section padding: 72 on a phone, 136 at 1440 */
  --measure:38rem;
  --ease:cubic-bezier(.2,.8,.2,1);          /* UI steps: settles, never overshoots */
  --ease-apple:cubic-bezier(.25,.1,.25,1);
  --ease-enter:cubic-bezier(.22,1,.36,1);   /* an entrance settling */
  --spring:cubic-bezier(.32,.72,0,1);

  /* type: Newsreader (display) over Hanken Grotesk (text) */
  --font:"Hanken Grotesk","DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Newsreader","Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --t-h1:clamp(2.75rem,1.9rem + 3.4vw,4.75rem);   /* 44 → 76 */
  --t-h2:clamp(2.2rem,1.25rem + 3.3vw,4rem);      /* 35 → 64 */
  --t-h3:clamp(1.45rem,1.2rem + .8vw,1.9rem);     /* 23 → 30 */
  /* the article scale: the long-form guides set their long titles and many section heads a step down, by choice */
  --t-h1-article:clamp(2.6rem,1.7rem + 3.1vw,4.25rem);   /* 42 → 68 */
  --t-h2-article:clamp(2.1rem,1.45rem + 1.9vw,3.1rem);   /* 34 → 50 */
  /* every page's title block (eyebrow + h1) starts the same distance under the bar: the team title, Check My Lot's
     intro and the guides' header */
  --title-top:clamp(2.75rem,1.6rem + 4.4vw,5.5rem);       /* 44 → 88 */
  --t-lead:clamp(1.125rem,1.06rem + .3vw,1.3rem); /* 18 → 21 */
  --t-small:.9375rem;
  --t-label:clamp(1rem,.95rem + .25vw,1.1rem);   /* the label: the price note's size, 16 → 17.6 (never all caps) */
  --track-label:0;
  --track-display:-.022em; /* headings and figures */
  color-scheme:light dark;
}
/* Dark appearance: a night-sky navy ground; the accent, the swatches and walnut stay. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0C1724; --paper-2:#101E2E; --card:#142436;
    --ink:#EEF2F6;    /* 16.04:1 on paper */
    --text-2:#C2CDD8; /* 11.19:1 */
    --muted:#9AA9B9;  /* 7.52:1 on paper, 7.02:1 on paper-2, 6.55:1 on card */
    --line:rgba(238,242,246,.14); --line-2:rgba(238,242,246,.26); --field-line:rgba(238,242,246,.45);
    --link:#9CC3E4; --link-hover:#F2D479; --red-ink:#F08A6E;
    --tint:rgba(238,242,246,.06); --tint-2:rgba(238,242,246,.11);
    --navy:#183350; --navy-2:#1F3D5D;   /* lifted off the ground: white 12.90:1 */
    --walnut:#36291F;                    /* a step lifted off the night ground, still walnut: plaster 12.57, muted 6.48, yellow 9.69:1 */
    --foot:#08121C; --focus:#F2D479;
    --nav-bg:#36291F; --nav-edge:#271D16;   /* the dark walnut of the hero box: plaster 12.57:1, yellow 9.69:1 */
    --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.65);
    --ok-bg:rgba(111,191,138,.16); --ok-ink:#B4E3C2; --err-bg:rgba(240,138,110,.16); --err-ink:#F8BFAE;   /* 8.08 / 7.57:1 on the card */
  }
}
/* Increase Contrast: firmer text, hairlines and outlines; a deeper bar */
@media (prefers-contrast:more){
  :root{--text-2:#24384E; --muted:#3D5066; --line:rgba(20,40,62,.3); --line-2:rgba(20,40,62,.5); --field-line:rgba(20,40,62,.75);
    --on-walnut-2:#E8DFD2; --on-walnut-muted:#D3C7B7; --walnut-line:rgba(245,242,235,.3); --walnut-line-2:rgba(245,242,235,.66);
    --inv-2:#DCE3EA; --inv-muted:#C2CDD8; --inv-line:rgba(255,255,255,.3);
    --nav-bg:#211912; --nav-edge:#160F0A; --nav-bd:rgba(245,242,235,.7); --nav-line:rgba(245,242,235,.3)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root{--text-2:#E1E7EE; --muted:#C2CDD8; --line:rgba(238,242,246,.3); --line-2:rgba(238,242,246,.5); --field-line:rgba(238,242,246,.7);
    --nav-bg:#2B2019; --nav-edge:#1E1611}
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent;font-synthesis-weight:none}
img,svg,video,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
strong,b{font-weight:600}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.nobr{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}

/* display type: Newsreader at its display optical size, regular weight; size and tight tracking carry the hierarchy */
h1,h2,.display{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;letter-spacing:var(--track-display);line-height:1.04;font-variant-numeric:lining-nums;font-synthesis:none}
/* the one label style: the type of the price note ("+ installation costs that vary by location"), Hanken 400 in
   sentence case, never all caps. .eyebrow sits above a heading with a 28px rule before it; .label is the same type without the rule. */
.eyebrow,.label{font:400 var(--t-label)/1.45 var(--font);letter-spacing:0;color:var(--text-2)}
.eyebrow{display:flex;align-items:center;gap:.85rem;margin:0 0 1.1rem}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none;opacity:.7}
@media (forced-colors:active){.eyebrow::before{forced-color-adjust:none;background:CanvasText}}   /* else forced to Canvas: a blank indent */

/* the dark grounds. .on-walnut paints the walnut and remaps every role (keep it walnut in dark mode too);
   .on-navy remaps the roles on a navy block (the block paints var(--navy) itself). */
.on-walnut{--paper:var(--walnut); --paper-2:#241A14; --card:#352920; --ink:var(--on-walnut); --text-2:var(--on-walnut-2); --muted:var(--on-walnut-muted);
  --line:var(--walnut-line); --line-2:var(--walnut-line-2); --field-line:var(--walnut-line-2); --red-ink:#F0A27E;
  --link:var(--yellow); --link-hover:var(--on-walnut); --focus:var(--yellow); --accent-ink:var(--walnut-ink);
  --tint:rgba(245,242,235,.08); --tint-2:rgba(245,242,235,.14);
  background:var(--walnut);color:var(--ink);color-scheme:dark}
.on-navy{--ink:var(--inv-ink); --text-2:var(--inv-2); --muted:var(--inv-muted); --line:var(--inv-line); --line-2:rgba(255,255,255,.26);
  --link:var(--inv-link); --link-hover:var(--yellow); --focus:var(--yellow);
  --tint:rgba(255,255,255,.08); --tint-2:rgba(255,255,255,.14);
  color:var(--ink);color-scheme:dark}

/* focus: a 2px ring off the control, navy on light grounds, yellow on navy, walnut and the bar; it never animates */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.footer :focus-visible{outline-color:var(--yellow)}
/* the skip link appears over the walnut bar: a yellow pill with a plaster ring */
.skip{position:fixed;left:var(--gut-l);top:.5rem;z-index:60;transform:translateY(-200%);background:var(--yellow);color:var(--dark);font-weight:600;padding:.75rem 1.1rem;border-radius:var(--pill);min-height:44px;display:inline-flex;align-items:center}
.skip:focus-visible{transform:none;outline-color:var(--nav-fg)}   /* plaster ring: 14.19:1 on the bar, and distinct from the yellow pill */

/* ============ LINKS: words ============
   Never underlined. Clickable words are brand blue at 600 (the weight is the non-colour cue);
   on hover they lift 2px and turn navy (yellow on navy, plaster on walnut). The rule has zero specificity
   (:where), so any class (nav, footer, cards) can restyle a link; add .no-lift to opt out of the lift. */
a,a:hover,a:focus,a:active,a:visited{text-decoration:none}
:where(a){color:inherit}
:where(a:not(.btn,.brand,.skip,.no-lift)){color:var(--link);font-weight:600;position:relative;top:0;transition:top .15s var(--ease),color .15s var(--ease-apple)}
@media (hover:hover){
  :where(a:not(.btn,.brand,.skip,.no-lift)):hover{top:-2px;color:var(--link-hover)}
}
:where(a:not(.btn,.brand,.skip,.no-lift)):active{color:var(--link-hover)}
/* an arrow after a standalone link nudges 3px right on hover */
.arr{display:inline-block;transition:transform .15s var(--ease)}
@media (hover:hover){a:hover .arr,.btn:hover .arr{transform:translateX(3px)}}

/* ============ BUTTONS ============
   .btn + one of .btn-primary (the door yellow: the main action), .btn-dark (navy), .btn-secondary and
   .btn-ghost (one outline look), .btn-yellow (= primary, kept for old markup). Sizes: default 48px,
   .btn-sm 44px, .btn-lg 56px. Labels in Hanken 600. On a dark block (.on-navy, .on-walnut, the bar, the
   footer) the outline turns light.
   <a class="btn btn-primary btn-lg" href="/check-my-lot/"><span>Check my lot</span><span class="btn-ic" aria-hidden="true"><svg viewBox="0 0 16 16"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5"/></svg></span></a> */
.btn{--bg:transparent;--fg:var(--ink);--bg-h:var(--tint);--bg-a:var(--tint-2);--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 1.4rem;border-radius:var(--pill);
  border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);font:600 1rem/1.15 var(--font);letter-spacing:0;text-align:center;text-decoration:none;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:background-color .15s var(--ease-apple),color .15s var(--ease-apple),border-color .15s var(--ease-apple),transform .12s var(--ease-apple)}
@media (hover:hover){.btn:hover{background:var(--bg-h)}}
.btn:active{background:var(--bg-a);transform:scale(.97);transition-duration:.09s}
.btn:visited{color:var(--fg)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:default;transform:none}
/* the primary: the door's yellow with navy words; a navy hairline inside defines it on white (yellow alone is 1.45:1 there) */
.btn-primary,.btn-yellow{--bg:var(--accent);--fg:var(--accent-ink);--bg-h:var(--accent-h);--bg-a:var(--accent-a);--bd:rgba(20,40,62,.14)}
.btn-dark{--bg:var(--navy);--fg:#FFFFFF;--bg-h:#1D3958;--bg-a:#25456A}
/* one secondary look: an outline that takes a faint fill on hover */
.btn-secondary,.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--field-line);--bg-h:var(--tint);--bg-a:var(--tint-2)}
@media (prefers-color-scheme:dark){
  .btn-primary,.btn-yellow{--bd:transparent}
  .btn-dark{--bg:#EEF2F6;--fg:var(--dark);--bg-h:#FFFFFF;--bg-a:#DCE3EA}
}
/* on navy: white outline (4.85:1 on navy), white words */
.on-navy .btn-secondary,.on-navy .btn-ghost{--fg:#FFFFFF;--bd:rgba(255,255,255,.5);--bg-h:rgba(255,255,255,.08);--bg-a:rgba(255,255,255,.14)}
/* on walnut: a plaster outline (3.6:1 on walnut), plaster words */
.on-walnut .btn-secondary,.on-walnut .btn-ghost{--fg:var(--on-walnut);--bd:var(--walnut-line-2);--bg-h:rgba(245,242,235,.08);--bg-a:rgba(245,242,235,.14)}
.on-walnut .btn-dark{--bg:var(--on-walnut);--fg:var(--walnut-ink);--bg-h:#FFFDF8;--bg-a:#E6E0D4}
.on-navy .btn-primary,.on-walnut .btn-primary,.on-walnut .btn-yellow{--bd:transparent}
.btn-sm{min-height:44px;padding:0 1.1rem;font-size:.9375rem}
.btn-lg{min-height:56px;padding:0 1.65rem;font-size:1.0625rem;gap:.75rem}
/* the round arrow chip inside a button: the label's colour at 14% */
.btn-ic{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:-.75rem;border-radius:50%;background:rgba(20,40,62,.1);background:color-mix(in srgb,currentColor 14%,transparent);flex:none;transition:transform .15s var(--ease)}
.btn-lg .btn-ic{width:32px;height:32px;margin-right:-1rem}
.btn-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.btn:hover .btn-ic{transform:translateX(3px)}}
/* reduced motion: see the REDUCED MOTION block at the end (it must follow every :active rule) */

/* ============ LOGO ============
   Put this sprite once, right after <body>, then reference it in the nav and footer:
   <svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false"><defs>
     <symbol id="ss-mark" viewBox="0 0 205.4 168.5"><path d="M0 .2 205.4 26.1V40.8L0 15Z M29.2 12H54.5V143.3H152.5V30H177.7V168.5H29.2Z"/></symbol>
     <symbol id="ss-wordmark" viewBox="0 0 639.6 100"><path d="(img/brand/sidesuites-wordmark.svg path)"/></symbol>
   </defs></svg>
   <a class="brand" href="/" aria-label="Sidesuites, home">
     <svg class="mark" viewBox="0 0 205.4 168.5" aria-hidden="true" focusable="false"><use href="#ss-mark"/></svg>
     <svg class="wordmark" viewBox="0 0 639.6 100" aria-hidden="true" focusable="false"><use href="#ss-wordmark"/></svg>
   </a> */
.brand{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;flex:none;color:var(--ink);transition:opacity .15s var(--ease-apple)}
.brand .mark{height:26px;width:auto;aspect-ratio:205.4/168.5;fill:var(--red);flex:none;transform:translateY(-1px)}
.brand .wordmark{height:20px;width:auto;aspect-ratio:639.6/100;fill:currentColor;flex:none}
@media (hover:hover){.brand:hover{opacity:.78}}
.brand:active{opacity:.6}

/* ============ NAV ============
   <header class="nav" id="nav"><div class="wrap nav-bar">
     a.brand
     <nav class="menu" id="site-menu" aria-label="Main"><ul class="nav-links"> li>a … (li.menu-only>a "Join the waitlist") </ul> (button.lang#langBtn on home/team) </nav>
     <div class="nav-actions">
       <a class="btn btn-ghost btn-sm nav-wait" href="/#reserve">Join the waitlist</a>
       <a class="btn btn-primary btn-sm nav-cta" href="/check-my-lot/">Check my lot</a>
     </div>
     <button type="button" class="menu-btn" id="menuBtn" aria-expanded="false" aria-controls="site-menu" aria-label="Menu"> svg.bars svg.x </button>
   </div></header>
   The opaque walnut bar with the logo's five colours as a 4px stripe along its foot, links centred, the two actions on
   the right (the prominent one trailing). On the walnut: plaster words and a one-colour plaster lockup until the new logo
   arrives, so yellow keeps its jobs in the bar: the primary action, hover, the current page and focus. Links turn yellow
   and lift 2px on hover; the current page is plaster with a yellow dot; "Join the waitlist" is a plaster outline,
   "Check my lot" the yellow pill with walnut-ink words. The bar is opaque (no blur), so Reduce Transparency sees
   the same bar. Below 900px the links fold into a panel under the bar; "Join the waitlist" moves into it, and the
   five-colour stripe moves from the bar's foot to the open panel's foot (its bottom border, outside the panel's scroll). */
.nav{
  --ink:var(--nav-fg); --text-2:var(--nav-fg); --line:var(--nav-line); --red-ink:var(--nav-accent);
  --link:var(--nav-fg); --link-hover:var(--nav-accent); --focus:var(--nav-accent);
  --nav-stripe:linear-gradient(90deg,var(--blue) 0 20%,var(--yellow) 20% 40%,var(--orange) 40% 60%,var(--tan) 60% 80%,var(--red) 80%);
  position:sticky;top:0;z-index:30;color:var(--nav-fg);background:var(--nav-bg);border-bottom:0;padding-top:env(safe-area-inset-top,0px);color-scheme:dark}
/* the logo's five colours, edge to edge along the bar's bottom (the footer closes with the same five) */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;pointer-events:none;background:var(--nav-stripe)}
@media (forced-colors:active){.nav{border-bottom:1px solid CanvasText}.nav:not(:has(.menu.open))::after{display:none}}   /* the open menu's scrim stays (a tap on it closes the menu) */
.nav-bar{display:flex;align-items:center;gap:1rem;min-height:var(--nav-h);position:relative}
.menu{display:flex;align-items:center;gap:.75rem;margin-inline:auto}
/* the html scroll-padding must not apply to the nav's own controls (focusing one would scroll the page) */
.nav-bar > *,.nav-bar .btn,.nav-links a,.lang{scroll-margin-top:calc(-1 * var(--nav-h) - env(safe-area-inset-top,0px) - 16px)}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 .8rem;border-radius:10px;font-weight:500;font-size:15px;letter-spacing:0;color:var(--nav-fg);white-space:nowrap}
@media (hover:hover){.nav-links a:hover{color:var(--nav-accent)}}
.nav-links a:active{color:var(--nav-accent)}
.nav-links a[aria-current]{font-weight:600}
.nav-links a[aria-current]::after{content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--nav-accent)}
.menu-only{display:none}
.lang{min-height:44px;min-width:44px;padding:0 .8rem;border-radius:var(--pill);border:1.5px solid var(--nav-bd);background:transparent;color:var(--nav-fg);font:600 .8125rem/1 var(--font);letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background-color .15s var(--ease-apple),transform .12s var(--ease-apple)}
.nav-actions{display:flex;align-items:center;gap:.5rem;flex:none}
.nav-cta,.nav-wait{white-space:nowrap}
.nav .brand{color:var(--nav-fg)}
.nav .brand .mark{fill:currentColor}
@media (hover:hover){.nav .brand:hover{opacity:.85}}
.nav .brand:active{opacity:.72}
.nav .btn-ghost,.nav .btn-secondary{--fg:var(--nav-fg);--bd:var(--nav-bd);--bg-h:var(--nav-fill-h);--bg-a:var(--nav-fill-a)}
.nav .nav-cta{--bg:var(--nav-accent);--fg:var(--walnut-ink);--bd:transparent;--bg-h:#E9C95F;--bg-a:#DDBB4C}
.nav .btn-ic{background:rgba(20,40,62,.1)}
@media (min-width:900px) and (max-width:1099.98px){
  .nav-bar{gap:.5rem}
  .menu{gap:.4rem}
  .nav-links a{padding:0 clamp(.45rem,2.8vw - 18px,.8rem)}
}
.menu-btn{display:none;width:44px;height:44px;flex:none;border-radius:12px;border:1.5px solid var(--nav-bd);background:transparent;color:var(--nav-fg);cursor:pointer;place-items:center;padding:0;transition:background-color .15s var(--ease-apple),transform .12s var(--ease-apple)}
@media (hover:hover){.lang:hover,.menu-btn:hover{background:var(--nav-fill-h)}}
.lang:active,.menu-btn:active{background:var(--nav-fill-a);transform:scale(.97)}
.menu-btn svg{width:22px;height:22px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .bars{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
@media (max-width:899.98px){
  .menu-btn{display:grid}
  .nav-wait{display:none}
  .nav-actions{margin-left:auto}
  .menu-only{display:list-item}
  .js .menu{display:none}
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.75rem;margin:0;background:var(--nav-bg);padding:1rem var(--gut-r) 1.25rem var(--gut-l);border-bottom:4px solid var(--nav-edge);border-image:var(--nav-stripe) 0 0 1;box-shadow:0 24px 40px -8px rgba(30,22,17,.4);max-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:1rem 1.25rem}
  .js .menu.open{display:flex}
  .menu,.menu .nav-links a,.menu .lang{scroll-margin-top:0}
  /* dim the page under the open panel; a tap on the dim closes the menu (see the menu script). The bar's stripe is this
     same pseudo-element, so it leaves the bar's foot while the panel's own stripe edges the panel */
  .nav:has(.menu.open)::after{content:"";position:absolute;top:100%;left:0;right:0;height:calc(100dvh - 100%);background:rgba(20,40,62,.35);z-index:-1;pointer-events:auto;cursor:default}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links li{border-bottom:1px solid var(--nav-line)}
  .nav-links a{display:flex;justify-content:flex-start;min-height:56px;padding:0 .25rem;font-size:1.15rem;font-weight:500;color:var(--nav-fg);border-radius:0}
  .nav-links a[aria-current]::after{left:auto;right:.5rem;bottom:auto;top:50%;margin:-2.5px 0 0}
  .lang{align-self:flex-start}
  html:not(.js) .menu{position:static;box-shadow:none;border:0;padding-inline:0;width:100%;order:3;max-height:none;background:none}
  html:not(.js) .nav-bar{flex-wrap:wrap}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .nav{position:relative}   /* not sticky, and still the stripe's containing block */
}
@media (max-width:899.98px) and (hover:hover){.nav-links a:hover{color:var(--nav-accent)}}
@media (max-width:899.98px) and (prefers-color-scheme:dark){.nav:has(.menu.open)::after{background:rgba(0,0,0,.5)}}
@media (max-width:899.98px) and (forced-colors:active){.menu{border-image:none;border-bottom:1px solid CanvasText}}
/* small phones: smaller lockup and pill so every gap stays >= 8px and the menu button keeps its gutter */
@media (max-width:399.98px){
  .nav-bar{gap:.5rem}
  .brand{gap:.4rem}
  .brand .mark{height:22px}
  .brand .wordmark{height:15px}
  .nav-cta{padding:0 .85rem;font-size:.88rem}
}
@media (max-width:359.98px){
  .brand .wordmark{display:none}
  .nav .brand{min-width:44px}   /* the mark alone is 27px wide: keep the home link a 44px target */
}

/* ============ STRIPE ============
   The five swatches in the logo-sheet order, as one slim rule: the only place the whole palette shows.
   <div class="stripe" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div> */
.stripe{display:flex;gap:6px}
.stripe i{flex:1;height:6px;border-radius:var(--pill)}
.stripe i:nth-child(1){background:var(--blue)}.stripe i:nth-child(2){background:var(--yellow)}.stripe i:nth-child(3){background:var(--orange)}.stripe i:nth-child(4){background:var(--tan)}.stripe i:nth-child(5){background:var(--red)}

/* ============ FOOTER ============
   <footer class="footer"><div class="wrap">
     .foot-top ( a.brand.brand-lg · p.foot-kicker "Neighbors with benefits." · p.foot-tag )
     .foot-grid ( nav.foot-nav[aria-label=Footer] > div>h2+ul (Explore) · div>h2+ul (Guides) · .foot-contact )
     .stripe · p.foot-legal
   </div></footer>
   Deep navy ground, white words, the one-colour white lockup; the kicker in the display italic (as in the hero),
   the column heads in the label style (the price note's type, sentence case, no tracking). */
.footer{background:var(--foot);color:var(--foot-text);padding-block:clamp(4rem,8vw,6.5rem) 2rem;padding-bottom:max(2rem,env(safe-area-inset-bottom,0px));font-size:15px;--line:rgba(255,255,255,.14);--focus:var(--yellow);color-scheme:dark}
.footer p{margin:0}
.foot-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;padding-bottom:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid var(--line);margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.footer .brand{color:var(--foot-text)}
.footer .brand .mark{fill:currentColor}
.brand-lg .mark{height:clamp(40px,5vw,56px)}
.brand-lg .wordmark{height:clamp(30px,3.9vw,43px)}
.brand-lg{gap:clamp(.6rem,1.2vw,1rem)}
.foot-kicker{font:italic 400 clamp(1.75rem,1.4rem + 1.4vw,2.5rem)/1.1 var(--font-display);letter-spacing:-.012em;color:var(--foot-text);text-align:right}
.foot-tag{color:var(--foot-2);margin-top:.5rem!important;text-align:right}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2.5rem clamp(1.5rem,5vw,4.5rem);align-items:start}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}
.foot-nav h2{font:400 var(--t-label)/1.4 var(--font);letter-spacing:0;color:var(--foot-2);margin:0 0 .5rem}
.foot-nav ul{list-style:none;margin:0;padding:0}
.footer a:not(.btn){color:var(--foot-text);font-weight:500}
@media (hover:hover){.footer a:not(.btn):hover{color:var(--foot-hover)}}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.foot-nav a[aria-current="page"]{color:var(--foot-hover);font-weight:600}
@media (hover:hover){.foot-nav a[aria-current="page"]:hover{color:var(--foot-text)}}
.foot-contact{display:grid;gap:.6rem;color:var(--foot-2)}
.copyline{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.copyline a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;word-break:break-all}
.copy-btn{min-height:44px;min-width:44px;padding:0 1rem;border-radius:var(--pill);border:1.5px solid rgba(255,255,255,.45);background:transparent;color:var(--foot-text);font:600 .88rem/1 var(--font);cursor:pointer;transition:background-color .15s var(--ease-apple),color .15s var(--ease-apple),transform .12s var(--ease-apple)}
@media (hover:hover){.copy-btn:hover{background:rgba(255,255,255,.1)}}
.copy-btn:active{background:rgba(255,255,255,.18);transform:scale(.97)}
html:not(.js) .copy-btn,html:not(.js) .lang{display:none}
.footer .stripe{margin:clamp(3rem,6vw,4rem) 0 1.25rem}
.foot-legal{font-size:13px;color:var(--foot-2)}
@media (max-width:759.98px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-kicker,.foot-tag{text-align:left}
}
/* from 1024px the footer sits on the page's 12 columns: Explore on 1-3, Guides on 4-7 and the contact block on the
   column-8 line the page's ledes and the closing actions use */
@media (min-width:1024px){
  .foot-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .foot-nav{grid-column:1/span 7;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:24px}
  .foot-nav>:first-child{grid-column:1/span 3}
  .foot-nav>:nth-child(2){grid-column:4/span 4}
  .foot-contact{grid-column:8/-1}
}
@media (max-width:359.98px){
  .foot-nav{grid-template-columns:minmax(0,1fr)}
}

/* ============ FIELD ERRORS ============
   An error sits under its own field: the error ink at 500 after a small "!" disc (the home's waitlist, Check My Lot).
   <p class="field-err" id="…Err" hidden></p>, referenced by the field's aria-describedby */
.field-err{display:flex;gap:.45rem;align-items:baseline;font-size:.9375rem;font-weight:500;color:var(--err-ink);line-height:1.4}
.field-err::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--err-ink);color:var(--card);font-size:.75rem;font-weight:700;display:grid;place-items:center;transform:translateY(2px)}

/* ============ CLOSING CARD ============
   The offer once more, on walnut, between the owner's two brand shapes: one recipe for the home, the team page and
   the guides (the guides add .cta-strip in css/pages.css, which only places the card on the content lines).
   <div class="close-card on-walnut">
     <div class="close-copy"> h2 · (p) </div>          (or a bare h2, as on the home)
     <div class="close-ctas"> a.btn.btn-primary.btn-lg "Check my lot" · a.btn.btn-ghost.btn-lg … </div>
   </div>
   The orange circle rises out of the bottom-left corner and the yellow quarter-circle sits in the top-right corner
   (it needs the square corner, so this card has no roof slope). Words never sit on a shape: the copy at the top
   left, the actions at the bottom right; narrow cards pad the top and bottom to make room for the shapes.
   --c-vis is how much of the orange circle shows (it is set 1/2.6 of its size out of the corner) plus --c-drift,
   room for its drift (a card whose heading carries a line under it sets more). .close-wide lets the copy run across
   both columns, padded clear of the quarter-circle. A page may set --c-drift, --c-p-gap and --c-p-max. */
.close-card{--c-o:clamp(180px,26vw,320px);--c-y:clamp(120px,16vw,200px);--c-drift:40px;--c-vis:calc(var(--c-o) * .615 + var(--c-drift));
  --c-pad:clamp(3rem,7vw,6rem);--c-px:clamp(1.5rem,6vw,5.5rem);
  position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);
  padding:var(--c-pad) var(--c-px);display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto minmax(max(56px,calc(var(--c-vis) - 2rem - var(--c-pad))),1fr);gap:2rem 3rem}
.close-card::before{content:"";position:absolute;z-index:-1;width:var(--c-o);aspect-ratio:1;border-radius:50%;background:var(--orange);left:calc(var(--c-o) / -2.6);bottom:calc(var(--c-o) / -2.6)}
.close-card::after{content:"";position:absolute;z-index:-1;width:var(--c-y);aspect-ratio:1;border-radius:0 0 0 100%;background:var(--yellow);right:0;top:0}
.close-card>h2,.close-copy{grid-column:1;grid-row:1}
/* the bookend speaks at the section-heading size (never above the page's h1), with room for a long guide closer to sit
   on two or three balanced lines instead of a four-line tower */
.close-card h2{margin:0;font-size:var(--t-h2);max-width:min(20ch,100%);line-height:1.02;color:var(--ink)}
.close-copy p{margin:var(--c-p-gap,clamp(1rem,2vw,1.35rem)) 0 0;max-width:var(--c-p-max,32rem);font-size:var(--t-lead);line-height:1.55;color:var(--text-2)}
.close-wide .close-copy{grid-column:1/-1;padding-right:max(0px,calc(var(--c-y) - var(--c-px) + 1.5rem))}
.close-ctas{grid-column:2;grid-row:2;align-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}
/* one column from 899px: the copy, then the actions at the lower right, still clear of the orange circle */
@media (max-width:899.98px){
  .close-card{grid-template-columns:minmax(0,1fr)}
  .close-ctas{grid-column:1}
}
/* below 760px the actions run along the card's foot, so the card makes room above and below for the two shapes */
@media (max-width:759.98px){
  .close-card{--c-o:150px;--c-y:92px;grid-template-rows:auto auto;padding-top:calc(var(--c-y) + 1.25rem);padding-bottom:calc(var(--c-o) * .615 + 2.75rem)}
  .close-wide .close-copy{padding-right:0}
  .close-ctas{justify-content:flex-start}
}
@media (max-width:519.98px){.close-ctas{display:grid;grid-template-columns:minmax(0,1fr);width:100%}.close-ctas .btn{width:100%}}

/* ============ BRAND CIRCLES: motion ============
   The owner's colour circles (the home's lending panel, every closing card) glide out of their corners when the card
   scrolls into view, then drift a little with the scroll. /js/circles.js (deferred) adds .circ-ready only when it can
   watch the card, and .circ-in at 30% visible (removed when the card is fully out, so it replays); without the script,
   or under Reduce Motion, the shapes simply sit in place. The drift uses the `translate` property and the entrance
   `transform`, so the two never fight. --p runs 0 (card entering at the bottom) to 1 (leaving at the top). */
@media (prefers-reduced-motion:no-preference){
  .circ-ready::before,.circ-ready::after{transition:transform 1.15s cubic-bezier(.22,1,.36,1);will-change:transform,translate}
  .circ-ready::after{transition-delay:.14s}
  .circ-ready.lend-media::before{transform-origin:0 0;translate:calc((var(--p,.5) - .5) * 44px) calc((var(--p,.5) - .5) * 64px)}
  .circ-ready.lend-media::after{transform-origin:50% 100%;translate:calc((var(--p,.5) - .5) * -56px) calc(var(--p,.5) * 26px)}
  .circ-ready.close-card::before{transform-origin:0 100%;translate:calc((var(--p,.5) - .5) * 40px) calc((var(--p,.5) - .5) * -60px)}
  .circ-ready.close-card::after{transform-origin:100% 0;translate:0 calc(var(--p,.5) * -34px)}
  .circ-ready.lend-media:not(.circ-in)::before{transform:translate(-26%,-26%) scale(.45)}
  .circ-ready.lend-media:not(.circ-in)::after{transform:translateY(100%)}
  .circ-ready.close-card:not(.circ-in)::before{transform:translate(-26%,26%) scale(.45)}
  .circ-ready.close-card:not(.circ-in)::after{transform:translate(30%,-30%) scale(.35)}
}

/* ============ PRINT ============ */
@media print{
  .nav,.skip,.menu-btn,.copy-btn,.stripe{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000!important}
  .on-walnut,.on-navy{background:#fff!important;color:#000!important}
  .close-card::before,.close-card::after{display:none}
}

/* ============ REDUCED MOTION ============
   Last, so it follows every :active rule above (same specificity). The colour and fill changes stay;
   the word lift, the press scale and the arrow nudges go. */
@media (prefers-reduced-motion:reduce){
  :where(a:not(.btn,.brand,.skip,.no-lift)),.btn,.btn-ic,.arr{transition-property:color,background-color,border-color,box-shadow}
  .lang,.menu-btn,.copy-btn{transition-property:background-color,color,border-color}
  :where(a:not(.btn,.brand,.skip,.no-lift)):hover{top:0}
  .btn:active,.lang:active,.menu-btn:active,.copy-btn:active{transform:none}
  .btn:hover .btn-ic,a:hover .arr,.btn:hover .arr{transform:none}
}