/* ============================================================================
   Blinds Maitland — "the planner's document"
   Deep spruce + warm paper + soft oat, moss the single accent, counts in mono.
   The look is a builder's handover ledger made warm: ledger rules, mono counts,
   the order of works. Diverges hard from every sibling (no slate-blue/cream, no
   dusk editorial, no charcoal/gold). One family (Archivo) + a mono for the counts.
   ============================================================================ */

/* ---- Fonts (self-hosted, no Google link) --------------------------------- */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 750; font-display:swap;
  src:url(/assets/fonts/archivo-var.woff2) format("woff2");
}
@font-face{
  font-family:"Spline Sans Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/assets/fonts/splinemono-var.woff2) format("woff2");
}

/* ---- Reset (small, deliberate) ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:where(h1,h2,h3,h4){text-wrap:balance}
p{text-wrap:pretty}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --paper:#FAF7EF;        /* page — warm paper-white, new-house light */
  --paper-2:#F4EFE1;      /* soft oat surface */
  --oat:#EAE1CD;          /* deeper oat — borders, card edges */
  --oat-line:#DCD1B7;     /* ledger rule */
  --spruce:#1E3B2C;       /* deep eucalypt anchor — logo ink */
  --spruce-800:#173026;   /* darker band */
  --spruce-900:#122419;
  --moss:#5F8F6C;         /* accent — morning-lit, sparing (logo stroke) */
  --moss-deep:#4A7657;    /* moss text on paper (AA) */
  --moss-lift:#8FBB9C;    /* moss on dark */
  --first-light:#C4863A;  /* WARM morning accent — used ONLY for "do-first" priority */
  --ink:#20261D;          /* body text — warm near-black, faint green */
  --ink-soft:#4C5347;     /* secondary text */
  --ink-faint:#727968;    /* captions, meta */
  --paper-on-dark:#F3EFE3;
  --soft-on-dark:#C3CEBE;

  --wrap:1160px;
  --wrap-narrow:760px;
  --r:14px;               /* card radius */
  --r-sm:9px;
  --shadow:0 1px 0 var(--oat), 0 18px 40px -28px rgba(30,59,44,.42);
  --shadow-lg:0 24px 60px -32px rgba(18,36,25,.5);

  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Base ---------------------------------------------------------------- */
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  font-weight:420;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--spruce);line-height:1.06;font-weight:680;letter-spacing:-.014em}
h1{font-size:clamp(2.2rem,1.5rem + 3.1vw,3.85rem)}
h2{font-size:clamp(1.7rem,1.28rem + 1.9vw,2.6rem)}
h3{font-size:clamp(1.22rem,1.06rem + .7vw,1.5rem);font-weight:640}
h4{font-size:1.06rem;font-weight:640}
a{text-decoration-thickness:1px;text-underline-offset:3px}
strong{font-weight:640;color:var(--spruce)}
:focus-visible{outline:3px solid var(--moss);outline-offset:2px;border-radius:3px}
::selection{background:var(--moss);color:#fff}
::placeholder{color:hsl(95 8% 45% / .45)}

/* ---- Layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.narrow{max-width:var(--wrap-narrow)}
.section{padding-block:clamp(3.2rem,2.2rem + 4vw,5.8rem)}
.section-tight{padding-block:clamp(2.2rem,1.6rem + 2.4vw,3.4rem)}
.stack>*+*{margin-top:1.05rem}
.grid{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.6rem)}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:880px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.surface-oat{background:var(--paper-2)}
.surface-spruce{background:var(--spruce);color:var(--paper-on-dark)}
.surface-spruce h1,.surface-spruce h2,.surface-spruce h3,.surface-spruce h4{color:var(--paper-on-dark)}

/* ---- Eyebrow / schedule label (the mono list-maker motif) ---------------- */
.eyebrow{
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--moss-deep);
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.85rem;
}
.eyebrow::before{content:attr(data-n);color:var(--ink-faint);font-weight:600}
.surface-spruce .eyebrow{color:var(--moss-lift)}
.surface-spruce .eyebrow::before{color:var(--soft-on-dark)}
.lede{font-size:clamp(1.1rem,1.02rem + .5vw,1.32rem);color:var(--ink-soft);line-height:1.55;font-weight:440}
.surface-spruce .lede{color:var(--soft-on-dark)}

/* ---- Buttons (container link rules always exclude .btn — kernel gotcha) --- */
.btn{
  --bg:var(--spruce);--fg:var(--paper-on-dark);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.005em;
  padding:.82rem 1.4rem;border-radius:999px;border:1.5px solid transparent;
  background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  line-height:1;
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-primary{--bg:var(--spruce);--fg:var(--paper-on-dark);box-shadow:0 12px 24px -14px rgba(30,59,44,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(30,59,44,.7)}
.btn-moss{--bg:var(--moss);--fg:#0f2016}
.btn-moss:hover{transform:translateY(-2px);background:var(--moss-deep)}
.btn-ghost{--bg:transparent;--fg:var(--spruce);border-color:var(--oat-line)}
.btn-ghost:hover{background:var(--paper-2);transform:translateY(-2px)}
.surface-spruce .btn-ghost{--fg:var(--paper-on-dark);border-color:rgba(243,239,227,.32)}
.surface-spruce .btn-ghost:hover{background:rgba(243,239,227,.08)}
.btn-lg{padding:.98rem 1.7rem;font-size:1.06rem}
.btn-block{display:flex;width:100%}

/* text link with moss underline */
.tlink{color:var(--moss-deep);font-weight:560;text-decoration:underline;text-decoration-color:var(--moss);text-underline-offset:4px}
.tlink:hover{color:var(--spruce)}
.surface-spruce .tlink{color:var(--moss-lift);text-decoration-color:var(--moss-lift)}

/* ============================================================================
   HEADER — a slim schedule bar over a lean masthead
   ============================================================================ */
.topline{
  background:var(--spruce);color:var(--soft-on-dark);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
}
.topline .wrap{display:flex;gap:1rem;justify-content:space-between;align-items:center;padding-block:.42rem;flex-wrap:wrap}
.topline b{color:var(--paper-on-dark);font-weight:500}
.topline .dot{color:var(--moss-lift)}

.site-head{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--oat);backdrop-filter:saturate(1.1)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.logo{display:inline-flex;align-items:center}
.logo img{height:38px;width:auto}
.nav{display:none}
@media(min-width:940px){
  .nav{display:flex;align-items:center;gap:.35rem}
  .nav a:not(.btn){
    font-family:var(--font-display);font-weight:540;font-size:.98rem;color:var(--ink-soft);
    text-decoration:none;padding:.5rem .72rem;border-radius:8px;transition:color .15s,background .15s;
  }
  .nav a:not(.btn):hover{color:var(--spruce);background:var(--paper-2)}
  body[data-page="fit-out"] a[data-nav="fit-out"],
  body[data-page="coverings"] a[data-nav="coverings"],
  body[data-page="order"] a[data-nav="order"],
  body[data-page="areas"] a[data-nav="areas"],
  body[data-page="guides"] a[data-nav="guides"],
  body[data-page="about"] a[data-nav="about"]{color:var(--spruce);background:var(--paper-2);box-shadow:inset 0 -2px 0 var(--moss)}
}
.nav-cta{margin-left:.4rem}
.burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;background:none;border:0;padding:.6rem;cursor:pointer;border-radius:8px}
.burger span{width:24px;height:2px;background:var(--spruce);border-radius:2px;transition:transform .2s var(--ease),opacity .2s}
@media(min-width:940px){.burger{display:none}}
body.drawer-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.drawer-open .burger span:nth-child(2){opacity:0}
body.drawer-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:55;background:var(--paper);padding:5.4rem 1.4rem 2rem;display:flex;flex-direction:column;gap:.2rem;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
body.drawer-open .drawer{opacity:1;transform:none;pointer-events:auto}
.drawer a:not(.btn){font-family:var(--font-display);font-weight:560;font-size:1.28rem;color:var(--spruce);text-decoration:none;padding:.72rem .2rem;border-bottom:1px solid var(--oat)}
.drawer .btn{margin-top:1rem}
.drawer .drawer-note{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);margin-top:1.1rem;letter-spacing:.03em}
@media(min-width:940px){.drawer{display:none}}

/* ============================================================================
   HERO
   ============================================================================ */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero .wrap{display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem);align-items:center;padding-block:clamp(2.4rem,1.6rem + 3vw,4.4rem)}
@media(min-width:920px){.hero .wrap{grid-template-columns:1.02fr .98fr}}
.hero h1{margin-top:.5rem}
.hero-sub{margin-top:1.15rem;max-width:34ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.hero-figure{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--oat);background:var(--paper-2);aspect-ratio:16/11}
.hero-figure img{width:100%;height:100%;object-fit:cover}
/* the counted tag over the hero image */
.hero-tag{
  position:absolute;left:1rem;bottom:1rem;right:1rem;
  background:rgba(18,36,25,.82);color:var(--paper-on-dark);
  border-radius:var(--r-sm);padding:.7rem .95rem;display:flex;align-items:center;gap:.8rem;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.02em;backdrop-filter:blur(4px)
}
.hero-tag .count{font-size:1.5rem;font-weight:600;color:var(--moss-lift);line-height:1}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.2rem 1.6rem;margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid var(--oat)}
.hero-trust div{display:flex;align-items:flex-start;gap:.55rem;max-width:22ch;font-size:.9rem;color:var(--ink-soft)}
.hero-trust .tick{color:var(--moss-deep);flex:0 0 auto;margin-top:.15rem}

/* ============================================================================
   THE TALLY BULLET + SCHEDULE ROW motifs
   ============================================================================ */
.tally{display:inline-flex;gap:3px;align-items:flex-end;height:1em}
.tally i{width:3px;height:.85em;background:var(--moss);border-radius:2px;display:block}
.tally i:nth-child(5){width:1.6em;height:3px;transform:rotate(-32deg);transform-origin:left;margin-left:-.2em}

/* a "ledger row": label left, count/mono right, dotted rule between */
.ledger{border-top:1px solid var(--oat-line)}
.ledger li{display:flex;align-items:baseline;gap:.8rem;padding:.85rem 0;border-bottom:1px solid var(--oat-line)}
.ledger .lname{font-weight:560;color:var(--spruce)}
.ledger .lfill{flex:1;border-bottom:1px dotted var(--oat-line);transform:translateY(-3px)}
.ledger .lval{font-family:var(--font-mono);font-size:.86rem;color:var(--ink-soft);white-space:nowrap}

/* ============================================================================
   CARDS
   ============================================================================ */
.card{background:var(--paper);border:1px solid var(--oat);border-radius:var(--r);padding:clamp(1.2rem,1rem + .6vw,1.6rem);box-shadow:var(--shadow);position:relative;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card-link{text-decoration:none;color:inherit;display:block}
.card-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--ink-soft);font-size:.98rem}
.card .num{position:absolute;top:1rem;right:1.15rem;font-family:var(--font-mono);font-size:.8rem;color:var(--ink-faint);font-weight:500}
.card-more{margin-top:.9rem;font-family:var(--font-display);font-weight:560;color:var(--moss-deep);font-size:.95rem;display:inline-flex;gap:.35rem;align-items:center}
.card-link:hover .card-more{gap:.6rem}

/* room card — for the coverings / room-by-room grid */
.room{background:var(--paper);border:1px solid var(--oat);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.room-media{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.room-media img{width:100%;height:100%;object-fit:cover}
.room-body{padding:1.15rem 1.25rem 1.35rem}
.room-body .job{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss-deep)}
.room-body h3{margin:.3rem 0 .45rem;font-size:1.18rem}
.room-body p{color:var(--ink-soft);font-size:.95rem}

/* step / order-of-works */
.steps{counter-reset:step;display:grid;gap:1rem}
.step{position:relative;background:var(--paper);border:1px solid var(--oat);border-radius:var(--r);padding:1.3rem 1.4rem 1.3rem 3.9rem;box-shadow:var(--shadow)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;left:1.25rem;top:1.3rem;font-family:var(--font-mono);font-weight:600;color:var(--moss-deep);font-size:1.05rem}
.step h3{font-size:1.15rem;margin-bottom:.3rem}
.step p{color:var(--ink-soft);font-size:.97rem}

/* pull quote / POV band */
.pov{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1.5vw,2.15rem);line-height:1.24;color:var(--spruce);letter-spacing:-.01em;max-width:24ch}
.surface-spruce .pov{color:var(--paper-on-dark)}

/* chips / meta */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--oat);border-radius:999px;padding:.32rem .7rem}
.surface-spruce .chip{background:rgba(243,239,227,.08);border-color:rgba(243,239,227,.18);color:var(--soft-on-dark)}

/* prose */
.prose{max-width:68ch}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.7rem;margin-bottom:.2rem}
.prose p,.prose ul,.prose ol{margin-top:.9rem;color:var(--ink)}
ul.bullets{list-style:none;padding:0}
ul.bullets li{position:relative;padding-left:1.6rem;margin-top:.55rem}
ul.bullets li::before{content:"";position:absolute;left:0;top:.62em;width:.7rem;height:.7rem;border:2px solid var(--moss);border-radius:2px}
.prose a{color:var(--moss-deep);text-decoration:underline;text-decoration-color:var(--moss);text-underline-offset:3px}
.prose a:hover{color:var(--spruce)}
figure.inline-fig{margin:1.8rem 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--oat);box-shadow:var(--shadow)}
figure.inline-fig img{width:100%}
figure.inline-fig figcaption{font-size:.82rem;color:var(--ink-faint);padding:.6rem .9rem;background:var(--paper-2);font-family:var(--font-mono);letter-spacing:.01em}

/* callout */
.note{border-left:3px solid var(--moss);background:var(--paper-2);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1rem 1.2rem;font-size:.95rem;color:var(--ink-soft)}
.note strong{color:var(--spruce)}

/* ============================================================================
   ENQUIRY / FORM
   ============================================================================ */
.form-card{background:var(--paper);border:1px solid var(--oat);border-radius:var(--r);padding:clamp(1.3rem,1rem + 1.4vw,2rem);box-shadow:var(--shadow-lg)}
.field{display:block;margin-top:1rem}
.field:first-child{margin-top:0}
.field .lab{display:block;font-family:var(--font-display);font-weight:560;font-size:.92rem;color:var(--spruce);margin-bottom:.35rem}
.field .hint{font-weight:420;color:var(--ink-faint);font-size:.82rem}
.field input,.field select,.field textarea{
  width:100%;padding:.72rem .85rem;border:1.5px solid var(--oat-line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);transition:border-color .15s,box-shadow .15s;font-size:1rem;
}
.field textarea{min-height:118px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(95,143,108,.18)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-row{display:grid;gap:1rem}
@media(min-width:560px){.form-row.two{grid-template-columns:1fr 1fr}}
[data-lead-success],[data-lead-error]{margin-top:1rem;border-radius:var(--r-sm);padding:.9rem 1.1rem;font-size:.95rem}
[data-lead-success]{background:#e7f1e8;border:1px solid var(--moss);color:#1f4a30}
[data-lead-error]{background:#fbeceb;border:1px solid #d9a29c;color:#7a2b23}

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-foot{background:var(--spruce-900);color:var(--soft-on-dark);padding-block:clamp(2.6rem,2rem + 2vw,3.6rem) 1.6rem}
.site-foot .wrap{display:grid;gap:2rem}
.foot-grid{display:grid;gap:2rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}}
.site-foot .foot-logo img{height:40px;margin-bottom:.9rem}
.site-foot p{color:var(--soft-on-dark);font-size:.93rem;max-width:38ch}
.foot-col h4{color:var(--paper-on-dark);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:.9rem}
.foot-col a:not(.btn){display:block;color:var(--soft-on-dark);text-decoration:none;padding:.32rem 0;font-size:.95rem}
.foot-col a:not(.btn):hover{color:var(--paper-on-dark)}
.foot-base{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(243,239,227,.14);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--soft-on-dark)}
.foot-base a:not(.btn){color:var(--soft-on-dark)}
.foot-disclose{font-size:.8rem;color:#8a9585;max-width:70ch;line-height:1.5;margin-top:1rem}

/* ============================================================================
   ENQUIRY CTA band (shared partial)
   ============================================================================ */
.cta-band{position:relative;overflow:hidden}
.cta-band .wrap{display:grid;gap:1.4rem;align-items:center}
@media(min-width:820px){.cta-band .wrap{grid-template-columns:1.3fr 1fr}}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* ============================================================================
   SIGNATURE — The Move-In Order planner
   ============================================================================ */
.wsb{display:grid;gap:1.4rem}
@media(min-width:960px){.wsb{grid-template-columns:1fr 1fr}}
.wsb-panel{background:var(--paper);border:1px solid var(--oat);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(1.1rem,.9rem + .8vw,1.5rem)}
.wsb-panel h3{font-size:1.15rem}
.wsb-hint{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-faint);letter-spacing:.02em;margin-top:.2rem}

/* room chooser */
.room-add{display:grid;gap:.65rem;margin-top:1rem}
.room-types{display:flex;flex-wrap:wrap;gap:.5rem}
.rt{font-family:var(--font-display);font-weight:540;font-size:.92rem;padding:.5rem .8rem;border:1.5px solid var(--oat-line);border-radius:999px;background:var(--paper);cursor:pointer;transition:.15s;display:inline-flex;gap:.45rem;align-items:center}
.rt:hover{border-color:var(--moss);background:var(--paper-2)}
.rt .plus{color:var(--moss-deep);font-weight:600}

/* the schedule (list of added rooms) */
.sched{margin-top:.4rem}
.sched-empty{font-family:var(--font-mono);font-size:.84rem;color:var(--ink-faint);padding:1.4rem 1rem;text-align:center;border:1px dashed var(--oat-line);border-radius:var(--r-sm)}
.sched-row{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--oat-line)}
.sched-row .prio{font-family:var(--font-mono);font-weight:600;font-size:.78rem;width:2.4rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--oat)}
.sched-row.first .prio{background:var(--first-light);color:#3a2409;border-color:transparent}
.sched-row .rm-name{font-weight:560;color:var(--spruce)}
.sched-row .rm-job{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-faint);letter-spacing:.02em;display:block;margin-top:.1rem}
.sched-row .rm-ctrls{display:flex;align-items:center;gap:.5rem}
.qbtn{width:1.9rem;height:1.9rem;border-radius:7px;border:1.5px solid var(--oat-line);background:var(--paper);cursor:pointer;font-weight:600;color:var(--spruce);display:inline-flex;align-items:center;justify-content:center;line-height:1}
.qbtn:hover{border-color:var(--moss);background:var(--paper-2)}
.qty{font-family:var(--font-mono);min-width:1.4rem;text-align:center;font-weight:600}
.rm-del{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:1.1rem;padding:.2rem .3rem}
.rm-del:hover{color:#a2453b}

.sched-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:1rem;padding-top:.9rem;border-top:2px solid var(--spruce);font-family:var(--font-mono)}
.sched-total .big{font-size:1.9rem;font-weight:600;color:var(--spruce)}
.sched-total .lab{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* the do-first / do-later legend */
.prio-key{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:1rem;font-family:var(--font-mono);font-size:.76rem;color:var(--ink-soft)}
.prio-key span{display:inline-flex;align-items:center;gap:.4rem}
.prio-key .sw{width:.85rem;height:.85rem;border-radius:3px;display:inline-block}
.sw.first{background:var(--first-light)}
.sw.later{background:var(--paper-2);border:1px solid var(--oat)}

.wsb-out{margin-top:1.2rem}
.rec-list{display:grid;gap:.55rem;margin-top:.6rem}
.rec{background:var(--paper-2);border:1px solid var(--oat);border-radius:var(--r-sm);padding:.7rem .9rem}
.rec b{color:var(--spruce)}
.rec span{color:var(--ink-soft);font-size:.9rem}

/* ============================================================================
   Misc: FAQ, area facts, map-ish list
   ============================================================================ */
.faq details{border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper);margin-top:.7rem;overflow:hidden}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-family:var(--font-display);font-weight:600;color:var(--spruce);list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--moss-deep);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 1.2rem 1.1rem;color:var(--ink-soft);font-size:.97rem}

.factgrid{display:grid;gap:.9rem}
@media(min-width:560px){.factgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.factgrid.four{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--paper);border:1px solid var(--oat);border-radius:var(--r-sm);padding:1.05rem 1.15rem}
.fact .n{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;color:var(--spruce);line-height:1}
.fact .l{font-size:.86rem;color:var(--ink-soft);margin-top:.35rem}
.surface-spruce .fact{background:rgba(243,239,227,.06);border-color:rgba(243,239,227,.16)}
.surface-spruce .fact .n{color:var(--moss-lift)}
.surface-spruce .fact .l{color:var(--soft-on-dark)}

.breadcrumb{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);letter-spacing:.02em;padding-top:1.4rem}
.breadcrumb a{color:var(--moss-deep);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* references block */
.refs{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--oat);font-size:.86rem;color:var(--ink-soft)}
.refs h4{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.7rem}
.refs li{margin-top:.5rem;line-height:1.45}
.refs a{color:var(--moss-deep)}

/* section heading block */
.sec-head{max-width:60ch;margin-bottom:1.8rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .lede{margin-top:.7rem}

/* two-col feature (image + text) */
.feature{display:grid;gap:clamp(1.4rem,1rem + 2vw,2.6rem);align-items:center}
@media(min-width:860px){.feature{grid-template-columns:1fr 1fr}.feature.rev>*:first-child{order:2}}
.feature-media{border-radius:var(--r);overflow:hidden;border:1px solid var(--oat);box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--paper-2)}
.feature-media img{width:100%;height:100%;object-fit:cover}

/* ---- Motion ---------------------------------------------------------------
   The hidden resting state is gated behind html.js (set by a synchronous inline
   script in _head-tags). No JS = no hiding: crawlers and no-JS visitors always
   see the whole page. Never author an opacity:0 resting state outside .js. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}

/* node-motion refinement — ease the few hovers whose changed property had no
   transition (they snapped), and give keyboard focus the same lift cue as hover on
   the enquiry-path controls. Behaviour only: nothing at rest changes; colour tweens
   are GPU-cheap and no layout property is animated. */
.tlink,.rm-del{transition:color .16s var(--ease)}
.prose a{transition:color .16s var(--ease)}
.foot-col a:not(.btn){transition:color .16s var(--ease)}
.qbtn{transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease)}
.btn-primary:focus-visible{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(30,59,44,.7)}
.btn-ghost:focus-visible,.btn-moss:focus-visible{transform:translateY(-2px)}
.card-link:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .btn:hover,.btn:focus-visible,.card-link:hover,.card-link:focus-visible{transform:none!important}
}

/* ---- Print (the schedule leave-behind) ---------------------------------- */
@media print{
  .site-head,.topline,.site-foot,.cta-band,.burger,.drawer,.hero-actions,.no-print{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wsb-panel,.card,.step{box-shadow:none;border-color:#bbb}
  a{color:#000;text-decoration:none}
  .section{padding-block:1rem}
}