/* ==========================================================================
   Bay House Concierge: design system
   Warm coastal: sand, shell, oyster, salt-marsh green, aged brass.
   Type: Cormorant Garamond (display, >=31px only) + Hanken Grotesk (text).
   All text pairings verified WCAG 2.1 AA; most AAA. See NOTES.md.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  color-scheme: light dark;

  /* Grounds */
  --paper:#FAF6EF; --paper-2:#F3EDE2; --paper-3:#EAE2D4;
  /* Ink */
  --ink:#17140F; --ink-inverse:#FAF6EF; --muted:#625A4D;
  /* Brand */
  --primary:#2C4A43; --primary-strong:#1F352F; --primary-tint:#E6EAE5;
  /* Metallic */
  --accent:#9C7B43; --accent-text:#7A5C2C; --accent-tint:#D9C9A3;
  /* Panel: deliberately does NOT invert. Dark surfaces stay dark in both modes,
     so gold accents on them keep their contrast. */
  --panel:#2C4A43; --panel-ink:#FAF6EF; --panel-accent:#D9C9A3; --panel-rule:rgba(250,246,239,.18);
  /* Lines */
  --rule:#DFD7C7; --rule-strong:#C7BCA6; --border-field:#8F836A; --focus:#2C4A43;
  /* States */
  --danger:#8C3A2E; --success:#3A5A46;

  /* Type */
  --font-display:"Cormorant Garamond","Cormorant","EB Garamond","Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --font-text:"Hanken Grotesk",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --step--2:.75rem;
  --step--1:.875rem;
  --step-0:1.0625rem;
  --step-1:clamp(1.125rem,1.08rem + .19vw,1.25rem);
  --step-2:clamp(1.25rem,1.16rem + .38vw,1.5rem);
  --step-3:clamp(1.375rem,1.18rem + .85vw,1.9375rem);
  --step-4:clamp(1.75rem,1.49rem + 1.13vw,2.5rem);
  --step-5:clamp(2.125rem,1.73rem + 1.69vw,3.25rem);
  --step-6:clamp(2.75rem,1.60rem + 4.88vw,6rem);
  --step-7:clamp(3.5rem,1.56rem + 8.26vw,9rem);

  /* Space: 8pt */
  --space-1:.5rem;  --space-2:1rem;   --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem;   --space-6:4rem;   --space-7:6rem;   --space-8:8rem;

  --wrap:1200px; --wrap-narrow:760px;
  --measure-prose:66ch; --measure-lead:46ch; --measure-display:18ch;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.35s;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E2A1E; --paper-2:#163223; --paper-3:#1F3A27;
    --ink:#F2ECE2; --ink-inverse:#121010; --muted:#A69C8C;
    --primary:#8FB5A8; --primary-strong:#A8C7BC; --primary-tint:#1C2622;
    --accent:#C9A468; --accent-text:#C9A468; --accent-tint:#E0C79A;
    --rule:#2F2B25; --rule-strong:#443E35; --border-field:#7A7060; --focus:#C9A468;
    --panel:#1B2A26; --panel-ink:#F2ECE2; --panel-accent:#D9C9A3; --panel-rule:rgba(242,236,226,.16);
    --danger:#E0A093; --success:#9FC4A0;
  }
}
:root[data-theme="dark"]{
  --panel:#1B2A26; --panel-ink:#F2ECE2; --panel-accent:#D9C9A3; --panel-rule:rgba(242,236,226,.16);
  --paper:#0E2A1E; --paper-2:#163223; --paper-3:#1F3A27;
  --ink:#F2ECE2; --ink-inverse:#121010; --muted:#A69C8C;
  --primary:#8FB5A8; --primary-strong:#A8C7BC; --primary-tint:#1C2622;
  --accent:#C9A468; --accent-text:#C9A468; --accent-tint:#E0C79A;
  --rule:#2F2B25; --rule-strong:#443E35; --border-field:#7A7060; --focus:#C9A468;
  --danger:#E0A093; --success:#9FC4A0;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:var(--step-0); font-weight:400; line-height:1.75;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
img,svg,video{max-width:100%;height:auto;display:block;}
[hidden]{display:none !important;} /* the hidden attribute must beat .btn's display:inline-flex */
ul,ol{margin:0;padding:0;list-style:none;}
p{margin:0 0 1.15em;max-width:var(--measure-prose);text-wrap:pretty;}
a{color:var(--primary);text-decoration:none;text-underline-offset:.22em;
  text-decoration-thickness:1px;transition:color var(--dur) var(--ease);}
a:hover{color:var(--primary-strong);text-decoration:underline;}
strong{font-weight:600;}
hr{border:0;border-top:1px solid var(--rule);margin:var(--space-5) 0;}

h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;font-weight:400;}
h1,.h1{font-family:var(--font-display);font-size:var(--step-5);font-weight:300;letter-spacing:-.02em;line-height:1.08;}
h2,.h2{font-family:var(--font-display);font-size:var(--step-4);font-weight:400;letter-spacing:-.015em;line-height:1.14;}
h3,.h3{font-family:var(--font-display);font-size:var(--step-3);font-weight:400;letter-spacing:-.01em;line-height:1.22;}
h4,.h4{font-family:var(--font-text);font-size:var(--step-2);font-weight:500;letter-spacing:-.005em;line-height:1.35;}
.display{font-family:var(--font-display);font-size:var(--step-6);font-weight:300;letter-spacing:-.03em;line-height:1.02;}

.lead{font-size:var(--step-1);font-weight:300;line-height:1.55;max-width:var(--measure-lead);color:var(--ink);}
.muted{color:var(--muted);}
.micro{font-size:var(--step--2);letter-spacing:.12em;line-height:1.5;color:var(--muted);}

.eyebrow{
  display:block;font-family:var(--font-text);font-size:var(--step--1);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;line-height:1.4;color:var(--muted);
  margin:0 0 var(--space-3);margin-inline-end:-.16em;
}
.eyebrow--rule{display:flex;align-items:center;gap:var(--space-2);}
.eyebrow--rule::before{content:"";width:24px;height:1px;background:var(--accent);flex:none;}

/* ---------- 3. LAYOUT ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--space-3);}
.wrap-narrow{max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--space-3);}
@media (min-width:48rem){.wrap,.wrap-narrow{padding-inline:var(--space-4);}}

.section{padding-block:var(--space-6);}
@media (min-width:48rem){.section{padding-block:var(--space-7);}}
.section--tight{padding-block:var(--space-5);}
.section--alt{background:var(--paper-2);}
.section--deep{background:var(--paper-3);}
.section--ink{background:var(--panel);color:var(--panel-ink);}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:var(--panel-ink);}
.section--ink .eyebrow{color:var(--panel-accent);}
.section--ink a:not(.btn){color:var(--panel-accent);}
.section--ink p{color:var(--panel-ink);}

.stack > * + *{margin-top:var(--space-3);}
.stack-lg > * + *{margin-top:var(--space-5);}

.grid{display:grid;gap:var(--space-4);}
@media (min-width:40rem){ .cols-2{grid-template-columns:repeat(2,1fr);} }
@media (min-width:56rem){
  .cols-3{grid-template-columns:repeat(3,1fr);}
  .cols-4{grid-template-columns:repeat(4,1fr);}
  .split{grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start;}
  .split--wide-left{grid-template-columns:1.25fr 1fr;}
  .split--wide-right{grid-template-columns:1fr 1.25fr;}
}

.section-head{max-width:var(--measure-prose);margin-bottom:var(--space-5);}

/* ---------- 4. HEADER ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--primary);color:var(--ink-inverse);padding:.75rem 1.25rem;}
.skip-link:focus{left:1rem;top:1rem;}

:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;border-radius:1px;
}

.site-header{
  position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--rule);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);padding-block:var(--space-2);}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;}
.brand:hover{color:var(--ink);text-decoration:none;}
.brand svg{flex:none;}
.brand-logo{height:56px;width:auto;display:block;border-radius:4px;}
.brand-name{font-family:var(--font-display);font-size:1.32rem;font-weight:400;
  letter-spacing:.02em;line-height:1;white-space:nowrap;}
@media (max-width:26rem){.brand img+.brand-name{display:none;}}
.brand-sub{display:block;font-family:var(--font-text);font-size:.6rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-top:.32rem;margin-inline-end:-.2em;}

.nav{display:none;}
@media (min-width:64rem){
  .nav{display:flex;align-items:center;gap:var(--space-3);}
  .nav a{font-size:var(--step--1);font-weight:400;text-transform:uppercase;
    letter-spacing:.1em;line-height:1;color:var(--ink);}
  .nav a:hover{color:var(--accent-text);text-decoration:none;}
  .nav a[aria-current="page"]{color:var(--accent-text);}
}
.header-inner .header-cta{display:none;} /* .btn also sets display:inline-flex at the
   same specificity (0,1,0) and is defined later, so this must outrank it or the desktop
   CTA renders on mobile and pushes the header to ~533px. Verified at a real 390px viewport. */
@media (min-width:64rem){.header-inner .header-cta{display:inline-flex;}}

/* Mobile nav: CSS-only disclosure */
.nav-toggle{display:inline-flex;align-items:center;gap:.55rem;background:none;border:0;
  padding:.55rem .25rem;cursor:pointer;color:var(--ink);font-family:var(--font-text);
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;}
@media (min-width:64rem){.nav-toggle{display:none;}}
.nav-toggle svg{width:20px;height:14px;}
.mobile-nav{border-top:1px solid var(--rule);background:var(--paper);}
.mobile-nav[hidden]{display:none;}
.mobile-nav ul{padding-block:var(--space-2) var(--space-3);}
.mobile-nav li + li{border-top:1px solid var(--rule);}
.mobile-nav a:not(.btn){display:block;padding:.85rem 0;font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);}
.mobile-nav .btn{margin-top:var(--space-3);width:100%;justify-content:center;}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-text);font-size:var(--step--1);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;line-height:1;
  padding:1.05rem 1.85rem;border:1px solid transparent;border-radius:2px;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--primary);color:var(--ink-inverse);border-color:var(--primary);}
.btn--primary:hover{background:var(--primary-strong);border-color:var(--primary-strong);color:var(--ink-inverse);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong);}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn--onink{background:var(--panel-accent);color:#1F352F;border-color:var(--panel-accent);}
.btn--onink:hover{background:#fff;border-color:#fff;color:#1F352F;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;}

.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--step--1);
  font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text);}
.link-arrow::after{content:"";width:18px;height:1px;background:currentColor;
  transition:width var(--dur) var(--ease);}
.link-arrow:hover{text-decoration:none;color:var(--accent-text);}
.link-arrow:hover::after{width:28px;}

/* ---------- 6. HERO ---------- */
.hero{position:relative;padding-block:var(--space-6) var(--space-6);overflow:hidden;}
@media (min-width:48rem){.hero{padding-block:var(--space-8) var(--space-7);}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb,var(--accent-tint) 40%,transparent) 0%, transparent 58%),
    radial-gradient(100% 80% at 8% 100%, color-mix(in srgb,var(--primary-tint) 85%,transparent) 0%, transparent 60%),
    linear-gradient(176deg, var(--paper) 0%, var(--paper-2) 100%);
}
.hero h1{max-width:var(--measure-display);}
.hero .lead{margin-top:var(--space-3);}
.hero .btn-row{margin-top:var(--space-4);}
.hero-note{margin-top:var(--space-2);font-size:var(--step--2);letter-spacing:.06em;color:var(--muted);}

/* Ornamental arch: the "bay house" rooflines, pure CSS/SVG, no photography (404 page) */
.arch{width:100%;max-width:420px;margin-inline:auto;color:var(--accent);opacity:.85;}

/* Hero mark: the full crest lockup, transparent PNG */
.hero-logo{width:100%;max-width:380px;margin-inline:auto;display:block;height:auto;}

/* ---------- 7. CARDS ---------- */
.card{
  padding:var(--space-4);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
  display:flex;flex-direction:column;height:100%;
}
.card:hover{border-color:var(--rule-strong);}
.card h3,.card h4{margin-bottom:var(--space-2);}
.card p{margin-bottom:var(--space-2);}
.card > :last-child{margin-bottom:0;margin-top:auto;padding-top:var(--space-2);}
.card--flat{border:0;padding:0;background:none;}
.card--flat:hover{border:0;}
.card__num{font-family:var(--font-display);font-size:var(--step-3);font-weight:300;
  color:var(--accent);line-height:1;display:block;margin-bottom:var(--space-2);}

.section--alt .card{background:var(--paper);}
.section--deep .card{background:var(--paper);}

/* Trust band: four columns, hairline separated, no badge graphics */
.trust-band{display:grid;gap:var(--space-4);border-top:1px solid var(--rule);padding-top:var(--space-4);}
@media (min-width:56rem){
  .trust-band{grid-template-columns:repeat(4,1fr);gap:0;}
  .trust-band > *{padding-inline:var(--space-3);border-left:1px solid var(--rule);}
  .trust-band > *:first-child{padding-left:0;border-left:0;}
  .trust-band > *:last-child{padding-right:0;}
}
.trust-band h3{font-family:var(--font-text);font-size:var(--step--1);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:var(--space-2);}
.trust-band p{font-size:var(--step--1);line-height:1.6;color:var(--muted);}

/* People */
.person{text-align:left;}
.person__avatar{width:100%;aspect-ratio:4/5;border:1px solid var(--rule);border-radius:2px;
  background:linear-gradient(160deg,var(--paper-3),var(--paper-2));
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-3);
  overflow:hidden;}
.person__avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.person__initials{font-family:var(--font-display);font-size:var(--step-4);font-weight:300;
  color:var(--accent-text);letter-spacing:.04em;}
.person__name{font-family:var(--font-text);font-size:var(--step-2);font-weight:500;
  line-height:1.3;margin-bottom:.25rem;}
.person__role{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent-text);margin-bottom:var(--space-2);display:block;}
.person p{font-size:var(--step--1);line-height:1.62;color:var(--muted);}

/* ---------- 8. STEPS / PROCEDURE ---------- */
.steps{counter-reset:step;display:grid;gap:var(--space-4);}
@media (min-width:56rem){.steps--3{grid-template-columns:repeat(3,1fr);}}
.steps li{counter-increment:step;position:relative;padding-top:var(--space-4);
  border-top:1px solid var(--rule-strong);}
.steps li::before{
  content:counter(step,decimal-leading-zero);position:absolute;top:var(--space-3);left:0;
  font-family:var(--font-display);font-size:var(--step--1);font-weight:400;
  letter-spacing:.1em;color:var(--accent-text);
}
.steps li > *:first-child{margin-top:var(--space-3);}
.steps h3{margin-bottom:var(--space-2);}
.steps .cost{display:block;font-size:var(--step--2);text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-top:var(--space-2);}

/* Numbered protocol: the key/money procedures */
.protocol{counter-reset:pstep;border-top:1px solid var(--rule);}
.protocol li{counter-increment:pstep;display:grid;grid-template-columns:2.75rem 1fr;
  gap:var(--space-2);padding-block:var(--space-3);border-bottom:1px solid var(--rule);}
.protocol li::before{content:counter(pstep);font-family:var(--font-display);
  font-size:var(--step-2);font-weight:300;color:var(--accent-text);line-height:1.4;}
.protocol p{margin:0;}

/* ---------- 9. TABLES ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);border-radius:2px;}
table{width:100%;border-collapse:collapse;font-size:var(--step--1);min-width:34rem;}
caption{text-align:left;font-size:var(--step--2);text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);padding:var(--space-3) var(--space-3) var(--space-2);}
th,td{text-align:left;padding:.95rem var(--space-3);border-bottom:1px solid var(--rule);
  vertical-align:top;}
thead th{font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  font-size:var(--step--2);color:var(--muted);background:var(--paper-2);}
tbody tr:last-child td{border-bottom:0;}
td strong{font-weight:600;}
.num{white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---------- 10. PRICING TIERS ---------- */
.tier{display:flex;flex-direction:column;height:100%;padding:var(--space-4);
  border:1px solid var(--rule);border-radius:2px;background:var(--paper);}
.tier--feature{border-color:var(--accent);}
.tier__name{font-family:var(--font-display);font-size:var(--step-3);font-weight:400;
  margin-bottom:var(--space-1);}
.tier__price{font-family:var(--font-display);font-size:var(--step-4);font-weight:300;
  line-height:1;margin-block:var(--space-2);letter-spacing:-.015em;}
.tier__price span{font-family:var(--font-text);font-size:var(--step--1);font-weight:400;
  letter-spacing:.06em;color:var(--muted);text-transform:none;}
.tier__meta{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent-text);margin-bottom:var(--space-3);display:block;}
.tier ul{margin-block:var(--space-2) var(--space-4);}
.tier ul li{position:relative;padding-left:1.4rem;margin-bottom:.7rem;
  font-size:var(--step--1);line-height:1.6;color:var(--muted);}
.tier ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--accent);}
.tier .btn{margin-top:auto;}

/* Included / excluded lists */
.ticklist li{position:relative;padding-left:1.7rem;margin-bottom:.65rem;}
.ticklist li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:1px;
  background:var(--accent);}
.ticklist--no li::before{background:var(--muted);}

/* ---------- 11. QUOTES / NOTE ---------- */
.pullquote{background:var(--paper-3);padding:var(--space-5) var(--space-4);border-radius:2px;}
.pullquote blockquote{margin:0;font-family:var(--font-display);font-size:var(--step-3);
  font-weight:300;line-height:1.34;letter-spacing:-.01em;max-width:34ch;}
.pullquote cite{display:block;margin-top:var(--space-3);font-family:var(--font-text);
  font-style:normal;font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);}

.note{border-left:2px solid var(--accent);padding-left:var(--space-3);}
.signature{font-family:var(--font-display);font-size:var(--step-3);font-weight:300;
  font-style:italic;color:var(--accent-text);margin-top:var(--space-3);}

.callout{background:var(--primary-tint);border:1px solid var(--rule);border-radius:2px;
  padding:var(--space-4);}
.callout p:last-child{margin-bottom:0;}

/* ---------- 12. FAQ ---------- */
.faq{border-top:1px solid var(--rule-strong);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
  padding-block:var(--space-3);cursor:pointer;list-style:none;
  font-family:var(--font-text);font-size:var(--step-1);font-weight:400;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.45em;
  background:
    linear-gradient(var(--accent),var(--accent)) center/14px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1px 14px no-repeat;
  transition:transform var(--dur) var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg);
  background:linear-gradient(var(--accent),var(--accent)) center/14px 1px no-repeat;}
.faq summary:hover{color:var(--accent-text);}
.faq__body{padding-bottom:var(--space-4);max-width:var(--measure-prose);}
.faq__body p:last-child{margin-bottom:0;}

/* ---------- 13. FORMS ---------- */
.field{margin-bottom:var(--space-3);}
.field label{display:block;font-size:var(--step--1);font-weight:500;margin-bottom:.5rem;}
.field .hint{display:block;font-size:var(--step--2);color:var(--muted);margin-top:.4rem;letter-spacing:.04em;}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;font-family:var(--font-text);font-size:var(--step-0);color:var(--ink);
  background:var(--paper);border:1px solid var(--border-field);border-radius:2px;
  padding:.85rem 1rem;transition:border-color var(--dur) var(--ease);
}
input:hover,select:hover,textarea:hover{border-color:var(--ink);}
textarea{min-height:8rem;resize:vertical;}
::placeholder{color:var(--muted);opacity:1;}
fieldset{border:0;padding:0;margin:0 0 var(--space-3);}
legend{font-size:var(--step--1);font-weight:500;padding:0;margin-bottom:.5rem;}

/* ---------- 14. FOOTER ---------- */
.site-footer{background:var(--panel);color:var(--panel-ink);padding-block:var(--space-6) var(--space-4);margin-top:var(--space-7);}
.site-footer h2,.site-footer h3{color:var(--panel-ink);}
.site-footer a:not(.btn){color:var(--panel-ink);opacity:.86;}
.site-footer a:not(.btn):hover{color:#fff;opacity:1;}
.footer-grid{display:grid;gap:var(--space-5);}
@media (min-width:56rem){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-4);}}
.footer-grid h3{font-family:var(--font-text);font-size:var(--step--1);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--panel-accent);margin-bottom:var(--space-3);}
.footer-grid li{margin-bottom:.6rem;font-size:var(--step--1);}
.site-footer p{color:var(--panel-ink);opacity:.86;font-size:var(--step--1);}
.footer-bottom{border-top:1px solid var(--panel-rule);margin-top:var(--space-5);
  padding-top:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  justify-content:space-between;align-items:center;}
.footer-bottom p,.footer-bottom li{font-size:var(--step--2);letter-spacing:.08em;
  color:var(--panel-ink);opacity:.72;margin:0;}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.wo-badge{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--step--2);
  text-transform:uppercase;letter-spacing:.14em;color:var(--panel-accent);
  border:1px solid var(--panel-rule);border-radius:2px;padding:.5rem .8rem;}

/* ---------- 15. BREADCRUMB ---------- */
.breadcrumb{padding-top:var(--space-3);}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5rem;font-size:var(--step--2);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.breadcrumb li + li::before{content:"/";margin-right:.5rem;color:var(--rule-strong);}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--accent-text);}

/* ---------- 16. UTILITIES ---------- */
.center{text-align:center;margin-inline:auto;}
.center p,.center .lead{margin-inline:auto;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.hairline{height:1px;background:var(--rule);border:0;margin-block:var(--space-5);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.stat{font-family:var(--font-display);font-size:var(--step-5);font-weight:300;
  line-height:1;letter-spacing:-.02em;color:var(--accent-text);display:block;}
.stat + .stat-label{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-top:var(--space-2);display:block;}

/* ---------- 17. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ---------- 18. PRINT ---------- */
@media print{
  .site-header,.site-footer,.btn,.nav-toggle,.mobile-nav{display:none !important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .faq details{border-bottom:1px solid #ccc;} .faq__body{display:block !important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}

/* ---------- 19. LIST BUILDER (/request/) ---------- */
.wrap-mid{max-width:960px;margin-inline:auto;padding-inline:var(--space-3);}
@media (min-width:48rem){.wrap-mid{padding-inline:var(--space-4);}}
.lb-step{padding-block:var(--space-5);border-top:1px solid var(--rule-strong);}
.lb-step:first-child{border-top:0;padding-top:0;}
.lb-step > h2{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-3);}
.lb-step__n{font-family:var(--font-display);font-size:var(--step-2);font-weight:300;color:var(--accent-text);
  letter-spacing:.06em;flex:none;}
.lb-step > p{margin-bottom:var(--space-3);}
.lb-picker{margin-top:var(--space-3);}
.chip-group{margin-bottom:var(--space-3);}
.chip-group__label{display:block;font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:.5rem;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{font-family:var(--font-text);font-size:var(--step--1);line-height:1;padding:.7rem 1rem;
  border:1px solid var(--rule-strong);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.chip:hover{border-color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--ink-inverse);border-color:var(--primary);}
.chip[aria-pressed="true"]::before{content:"\2713\00a0";}
.lb-stores{margin-top:var(--space-2);}
.lb-empty{color:var(--muted);font-size:var(--step--1);padding:var(--space-3);border:1px dashed var(--rule-strong);
  border-radius:2px;text-align:center;margin:0;}
.lb-store{border:1px solid var(--rule-strong);border-radius:2px;background:var(--paper);padding:var(--space-3);
  margin-top:var(--space-3);}
.lb-store__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
.lb-store__head h3{font-family:var(--font-text);font-size:var(--step-1);font-weight:500;margin:0;}
.lb-store__count{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
.lb-store__note{flex:1 1 14rem;padding:.55rem .75rem;font-size:var(--step--1);}
.lb-remove{background:none;border:0;color:var(--muted);cursor:pointer;font-family:var(--font-text);
  font-size:var(--step--2);text-transform:uppercase;letter-spacing:.1em;padding:.5rem .25rem;margin-left:auto;}
.lb-remove:hover{color:var(--danger);}
.lb-store .hint{margin-top:.6rem;}
.hint--warn{color:var(--danger);font-weight:500;}
.lb-add{display:flex;gap:.5rem;margin-top:var(--space-2);}
.lb-add input{flex:1;min-width:0;}
.lb-add .btn{padding-inline:1.1rem;flex:none;}
.lb-section{margin-top:var(--space-3);}
.lb-section h4{font-family:var(--font-text);font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent-text);margin:0 0 .25rem;font-weight:500;}
.lb-item{display:grid;grid-template-columns:4.5rem 1fr auto;gap:.4rem .5rem;padding:.6rem 0;
  border-top:1px solid var(--rule);align-items:center;}
.lb-item input,.lb-item select{padding:.5rem .6rem;font-size:var(--step--1);}
.lb-item__row2{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;}
.lb-item__section{flex:1 1 11rem;}
.lb-item__note{flex:2 1 14rem;}
.lb-item__nosub{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--step--2);letter-spacing:.06em;
  white-space:nowrap;cursor:pointer;}
.lb-item__nosub input{accent-color:var(--danger);}
.lb-item__remove{background:none;border:0;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1;
  padding:.25rem .5rem;}
.lb-item__remove:hover{color:var(--danger);}
.lb-paste{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px dashed var(--rule-strong);}
.lb-paste label{display:block;font-size:var(--step--1);font-weight:500;margin-bottom:.5rem;}
.lb-paste textarea{min-height:7rem;font-family:var(--font-text);}
.lb-paste__row{display:flex;flex-wrap:wrap;gap:.5rem var(--space-2);align-items:center;margin-top:.6rem;}
.lb-paste__store{width:auto;max-width:100%;padding:.55rem .75rem;font-size:var(--step--1);}
.lb-summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);align-items:baseline;
  margin-top:var(--space-4);padding-top:var(--space-2);border-top:1px solid var(--rule-strong);}
.lb-summary > span:first-child{font-weight:500;}
.lb-summary .hint{flex:1 1 20rem;max-width:44ch;}
.radios li{display:flex;gap:.65rem;align-items:flex-start;padding:.4rem 0;}
.radios input{margin-top:.45em;flex:none;accent-color:var(--primary);}
.radios label{font-size:var(--step--1);line-height:1.55;}
#form-msg{color:var(--danger);}
html:not(.js) #store-picker,html:not(.js) #stores,html:not(.js) #paste-store,html:not(.js) #paste-sort,
html:not(.js) .lb-summary,html:not(.js) #reuse-last{display:none;}
.ref{font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ---------- 20. SHOPPING SHEET (/r/<ref>) ---------- */
.sheet{padding-block:var(--space-4) var(--space-7);}
.sheet__ref{font-family:var(--font-display);font-size:var(--step-5);font-weight:300;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;margin-bottom:var(--space-2);}
.sheet__meta{display:grid;gap:.35rem;margin:var(--space-3) 0 0;font-size:var(--step--1);}
.sheet__meta div{display:grid;grid-template-columns:7.5rem 1fr;gap:.5rem;}
.sheet__meta dt{color:var(--muted);font-weight:500;}
.sheet__meta dd{margin:0;}
.sheet__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-3);}
.sheet__actions .btn{padding:.85rem 1.2rem;}
.sheet__group{margin-top:var(--space-5);}
.sheet__store{font-family:var(--font-text);font-size:var(--step-2);font-weight:500;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:var(--space-2);border-bottom:2px solid var(--primary);padding-bottom:.4rem;margin:0;}
.sheet__count{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:400;}
.sheet__storenote{color:var(--muted);font-size:var(--step--1);margin:.5rem 0 0;}
.sheet__section{font-family:var(--font-text);font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent-text);margin:var(--space-3) 0 .15rem;font-weight:500;}
.sheet__items li{display:flex;align-items:stretch;gap:.4rem;border-top:1px solid var(--rule);}
.sheet__item{display:flex;align-items:flex-start;gap:.8rem;padding:.75rem 0;flex:1;cursor:pointer;
  font-size:var(--step-0);line-height:1.45;}
.sheet__item input{width:1.4rem;height:1.4rem;margin:.1rem 0 0;flex:none;accent-color:var(--primary);}
.sheet__item:has(input:checked) .sheet__name,.sheet__item:has(input:checked) .sheet__qty{text-decoration:line-through;color:var(--muted);}
.sheet__qty{font-weight:600;font-variant-numeric:tabular-nums;}
.sheet__note{color:var(--muted);}
.sheet__nosub{display:inline-block;font-size:var(--step--2);text-transform:uppercase;letter-spacing:.12em;
  color:var(--danger);border:1px solid currentColor;border-radius:2px;padding:.05rem .4rem;margin-left:.3rem;
  vertical-align:middle;}
.sheet__sms{align-self:center;font-size:var(--step--2);text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent-text);padding:.6rem .35rem;white-space:nowrap;}
.sheet__notes{white-space:pre-wrap;font:inherit;background:var(--paper-2);padding:var(--space-3);border-radius:2px;
  margin:0;max-width:var(--measure-prose);}
.sheet-body .site-header .micro{margin-left:auto;}
@media print{
  .sheet__sms,.sheet__actions,.sheet .micro{display:none !important;}
  .sheet__item input{appearance:none;-webkit-appearance:none;border:1px solid #000;border-radius:2px;background:#fff;}
  .sheet__group{break-inside:avoid;}
  .sheet__items li{border-top-color:#ccc;}
}

/* ---------- 21. HEADER WITH SIX NAV ITEMS ----------
   "Send a list" made the desktop nav wrap between 64rem and 76rem while the
   header CTA is also showing. Keep links on one line, tighten type and gap,
   and drop the wordmark (the logo stays) until there is room for all three. */
.nav a{white-space:nowrap;}
@media (min-width:64rem) and (max-width:75.99rem){
  .nav{gap:var(--space-2);}
  .nav a{font-size:.78rem;letter-spacing:.08em;}
  .brand img+.brand-name{display:none;}
}

/* ---------- 22. SLOT PICKER (/request/sent/) ---------- */
.slots{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));margin-top:var(--space-2);}
.slot-day{border:1px solid var(--rule);border-radius:2px;background:var(--paper);padding:var(--space-3);margin:0;}
.slot-day h3{font-family:var(--font-text);font-size:var(--step-0);font-weight:500;margin:0 0 .85rem;}
.slot-times{display:flex;flex-wrap:wrap;gap:.5rem;}
.slot{font-family:var(--font-text);font-size:var(--step--1);font-variant-numeric:tabular-nums;padding:.7rem .95rem;
  border:1px solid var(--rule-strong);border-radius:2px;background:var(--paper);color:var(--ink);cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.slot:hover{border-color:var(--primary);color:var(--primary);}