/* HSA new site - the model page stylesheet.
   Extracted verbatim from the SETTLED design master (GATE 2, 2026-10-22):
     design\mockups\quiet-luxury-v2-model.html
     sha256 f93192a5a5e33dcb3cc9520fc392ab510dfadffc242bd0e06bd08415ace0ecc3
   Generated by newsite\build\extract_theme_css.py - do not hand-edit;
   edit the master and re-run, so the site cannot drift from the design. */
:root{
  --surface:#F7F2EA;
  --surface-2:#EFE8DC;
  --ink:#17130F;
  --ink-muted:#6E655A;
  --rule:rgba(23,19,15,.18);
  --accent:#990000;
  --accent-text:#990000;
  --accent-ink:#F7F2EA;
  --max:1120px;
  --display-font:Georgia,"Iowan Old Style","Times New Roman",serif;
  --body-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --label-font:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --fs-display:clamp(2.6rem,6.5vw,5.5rem);
  --fs-page:clamp(2.1rem,4.6vw,3.6rem);
  --fs-h2:clamp(1.4rem,2.4vw,2rem);
  --fs-h3:clamp(1.02rem,1.4vw,1.18rem);
  --fs-body:17px;
  --fs-label:11px;
  --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:560ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);
  font:300 var(--fs-body)/1.72 var(--body-font);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display-font);font-weight:400;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.lbl{font:500 var(--fs-label)/1 var(--label-font);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--accent);color:var(--accent-ink);padding:12px 16px;z-index:60}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* MASTHEAD */
header.site{border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--surface);z-index:40}
.top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:22px 0 18px}
.brand{display:flex;align-items:baseline;gap:16px}
.brand .wm{font-family:var(--display-font);font-size:1.9rem;letter-spacing:.02em;line-height:1}
.brand .tag{font:500 10px/1 var(--label-font);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-muted)}

/* BREADCRUMB + PAGE HEAD */
.crumbs{padding:26px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;
  font:500 11px/1.9 var(--label-font);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.crumbs a{color:var(--ink-muted)}
.crumbs a:hover{color:var(--accent-text)}
.crumbs .sep{color:var(--ink-muted)}
.crumbs [aria-current="page"]{color:var(--ink)}
.hero{padding:34px 0 0}
.hero .rule-row{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:16px}
.hero .rule-row .lbl{flex:1}
h1{font-size:var(--fs-page);line-height:1.02;letter-spacing:-.02em;margin:34px 0 0;max-width:22ch}
h1 em{font-style:italic}
.lede{font-size:19px;color:var(--ink-muted);max-width:62ch;font-weight:300;margin-top:26px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;background:var(--accent);color:var(--accent-ink);
  font:500 11px/1 var(--label-font);letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius)}
.btn:hover{opacity:.88}
.tlink{display:inline-flex;align-items:center;min-height:44px;font:500 11px/1 var(--label-font);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink)}
.tlink:hover{color:var(--accent-text);border-color:var(--accent-text)}

/* gallery + spec, one ruled spread */
.spread{display:grid;grid-template-columns:1.15fr .85fr;gap:0;margin-top:56px;border-top:1px solid var(--rule)}
.spread .galcol{padding:38px 48px 38px 0}
.spread .speccol{padding:38px 0 38px 44px;border-left:1px solid var(--rule)}
.plates{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.plate{border:1px solid var(--rule);background:var(--surface-2);padding:18px}
.plate img{height:196px;width:100%;object-fit:contain}
.plate .cap{margin-top:12px;font:400 10px/1.5 var(--label-font);color:var(--ink-muted);letter-spacing:.1em;text-transform:uppercase}
.spec{border-collapse:collapse;width:100%;font-size:14.5px}
.spec caption{text-align:left;font:500 var(--fs-label)/1 var(--label-font);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-muted);padding-bottom:14px}
.spec th,.spec td{text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);padding:13px 0}
.spec th{font-weight:400;color:var(--ink-muted);width:44%;padding-right:16px}
.spec td{font-family:var(--label-font);font-size:13px;letter-spacing:.02em}

/* SECTION */
.sec{padding:clamp(64px,8vw,116px) 0}
.sec-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:0}
.sec-head .num{font:500 12px/1 var(--label-font);letter-spacing:.16em;color:var(--accent-text)}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head .note{margin-left:auto;font:400 12px/1 var(--label-font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
[id]{scroll-margin-top:120px}

/* options — long ruled list in 2 columns */
.olist{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;list-style:none;margin:0;padding:0}
.olist li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.olist .i{font:400 11px/1.6 var(--label-font);color:var(--ink-muted)}
.olist .n{font-family:var(--display-font);font-size:1.08rem}

/* paired-with strip */
.paired{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.paired div{padding:22px 20px;border-right:1px solid var(--rule)}
.paired div:last-child{border-right:0}
.paired .n{font-family:var(--display-font);font-size:1.02rem}
.paired .k{margin-top:8px;font:400 10px/1.5 var(--label-font);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}

/* finishes */
.finline{font-family:var(--display-font);font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.5;max-width:100%}
.finline span{white-space:normal}
.finline .sep{color:var(--ink-muted);margin:0 .25em}
.finline .hl{color:var(--accent-text);font-style:italic}
.fingrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:34px}
.fingrid div{padding:16px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--display-font);font-size:1.02rem}
.fingrid div:nth-child(4n){border-right:0}

/* faq */
.faq{border-bottom:1px solid var(--rule)}
.faq details{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:44px 1fr 24px;gap:18px;align-items:baseline;padding:24px 0;min-height:56px;overflow-x:clip}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qn{font:400 11px/1 var(--label-font);color:var(--ink-muted)}
.faq summary h3{font-size:var(--fs-h3);font-weight:400}
.faq summary .pm{font-size:20px;color:var(--accent-text);justify-self:end}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 0 28px 62px;color:var(--ink-muted);max-width:76ch}

/* request block */
.request{border-top:1px solid var(--rule);margin-top:6px;padding-top:34px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.request .big{font-family:var(--display-font);font-size:clamp(1.3rem,2.6vw,2rem);max-width:30ch;line-height:1.3}

/* footer */
footer{border-top:1px solid var(--rule);padding:70px 0 46px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
footer h4{font:500 11px/1 var(--label-font);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 18px}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:5px 0}
footer li a:hover{color:var(--accent-text)}
.how{margin-top:52px;border-top:1px solid var(--rule);padding-top:32px}
.how ol{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.how .n{font:500 12px/1 var(--label-font);color:var(--accent-text)}
.how h4{margin:12px 0 8px;color:var(--ink)}
.how p{color:var(--ink-muted);font-size:14.5px}
.quote-only{border-top:1px solid var(--rule);margin-top:50px;padding-top:26px;display:flex;gap:30px;flex-wrap:wrap}
.quote-only p{color:var(--ink-muted);font-size:14.5px;max-width:60ch}
.legal{margin-top:44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink-muted);font:400 12px/1.7 var(--label-font)}

.rise{opacity:0;transform:translateY(12px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rise.in{opacity:1;transform:none}

@media(max-width:920px){
  .spread{grid-template-columns:1fr}
  .spread .galcol{padding:30px 0}
  .spread .speccol{border-left:0;border-top:1px solid var(--rule);padding:30px 0 0}
  .paired{grid-template-columns:1fr 1fr}
  .paired div:nth-child(2n){border-right:0}
  .fingrid{grid-template-columns:1fr 1fr}
  .fingrid div:nth-child(2n){border-right:0}
  .olist{grid-template-columns:1fr;column-gap:0}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .how ol{grid-template-columns:1fr;gap:24px}
  .faq .ans{padding-left:0}
  .wrap{padding:0 20px}
}
@media(max-width:420px){
  .sec{overflow-x:clip}
  .plates{grid-template-columns:1fr}
  .paired{grid-template-columns:1fr}
  .paired div{border-right:0}
  .fgrid{grid-template-columns:1fr}
  .brand .tag{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}

/* ============ shared demo navigation + theme switcher (contract) ============ */
:root{--nav-ink:var(--ink-muted);--menu-bg:var(--surface);--menu-shadow:0 20px 44px rgba(23,19,15,.10)}
.navx{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px);font-family:var(--label-font);
  font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase}
.navx-item{position:relative;display:flex;align-items:center}
.navx-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--nav-ink);white-space:nowrap}
.navx-link:hover,.navx-link[aria-current="page"]{color:var(--ink)}
.navx-caret{appearance:none;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;min-width:30px;min-height:44px;color:var(--nav-ink);padding:0}
.navx-caret::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--dur) var(--ease)}
.navx-caret[aria-expanded="true"]::before{transform:rotate(-135deg) translateY(-2px)}
.navx-menu{position:absolute;top:100%;left:0;z-index:90;min-width:290px;max-width:min(380px,92vw);
  background:var(--menu-bg);border:1px solid var(--rule);box-shadow:var(--menu-shadow);padding:6px 0;
  display:none;text-transform:none;letter-spacing:0;font-family:var(--body-font);font-size:14px}
.navx-menu.is-open{display:block}
@media (hover:hover) and (min-width:901px){
  .navx-item:hover > .navx-menu,.navx-item:focus-within > .navx-menu{display:block}
}
.navx-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;
  padding:0 18px;text-decoration:none;color:var(--ink-muted)}
.navx-menu a:hover{background:var(--surface-2);color:var(--ink)}
.navx-menu a.is-current{color:var(--ink);font-weight:600}
.navx-menu .n{flex:0 0 auto;font-family:var(--label-font);font-size:11px;letter-spacing:.1em;color:var(--ink-muted)}
.navx-menu .all{font-family:var(--label-font);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--rule)}
/* ---------- nav v2 (owner decision 2026-10-21) ---------- */
.navx-menu--mega{min-width:min(560px,92vw);max-width:min(660px,94vw);padding:6px 0 10px}
.navx-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.navx-grp{margin:10px 18px 2px;font-family:var(--label-font);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:600}
.navx-menu .navx-grp{border:0}
.navx-band{margin-top:10px;border-top:1px solid var(--rule);padding-top:2px}
.navx-band .navx-grp{margin-top:8px}
.navx-req{white-space:nowrap}
@media (min-width:901px){
  .navx-menu{max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
}
/* ---------- masthead orientation (owner 2026-10-21) ----------
   Both templates now read the same way: a top row with the brand and its tag on the LEFT and
   the Day/Night control on the far RIGHT, then the nav on its own row below, flush right.
   The day template already had the brand in a .top block; the night template's brand was a
   direct child of .masthead-inner and the control sat beside the nav. The rules use an `html`
   prefix so they outrank the template's own `header.site > .wrap > ...` rules, which are
   declared later in the sheet and would otherwise win at equal specificity. */
html header.site > .wrap, html .masthead-inner{flex-wrap:wrap}
html header.site > .wrap > .top, html .masthead-inner > .brand{flex:1 1 auto;margin-right:auto}
html header.site > .wrap > .themebtn, html .masthead-inner > .themebtn{order:1;flex:0 0 auto}
html header.site > .wrap > .navx, html .masthead-inner > .navx{order:2;flex:0 0 100%;width:100%}
/* The nav sits flush right, so the menus belonging to the last items have no room to open
   to the right of their own item. Measured 2026-10-21: on the day template at 1024 the
   Company menu ran 7px past the viewport edge. Anchor those menus to the item's right edge
   instead. The CTA carries no menu, so the last three children cover Installs and Company. */
@media (min-width:901px){
  .navx > .navx-item:nth-last-child(-n+3) > .navx-menu{left:auto;right:0}
}
/* The night masthead is now two rows (brand row, then the nav row) and is taller than the
   64px it was when the brand, nav and control shared a single row. Measured 2026-10-21 on
   the built pages at 901-1920px: 107-119px. The night pages that sit underneath it use
   calc(var(--hsa-mast) + ...) for their top padding, kept in step by this one token.
   Below 920px the masthead returns to the flow - it must, because the nav is a vertical
   list there and a pinned 389px header covered 234px of the page - so the offset is zero.
   (The token is inert in the day template, whose header is sticky and needs no offset.) */
html{--hsa-mast:124px}
@media (max-width:920px){
  html{--hsa-mast:0px}
  html .masthead{position:relative;top:auto;left:auto;right:auto}
  html .masthead-inner{min-height:0;padding-top:10px;padding-bottom:10px}
}
/* ---- tap targets (WCAG 2.2 AA, 2.5.8) ----------------------------------
   Measured on the packaged pages at 390px: the AA floor (24x24) was already
   met everywhere except the option checkboxes, which were 18x18. These rules
   put every standalone control at 24 as a floor and the short ones at the
   comfortable 44. Inline links inside a sentence are exempt and are left alone. */
input[type="checkbox"],input[type="radio"]{width:24px;height:24px}
.skip,.brand,select,input[type="text"],input[type="email"],input[type="tel"]{min-height:44px}
.cfg-opt{min-height:44px}
/* ---------- end nav v2 ---------- */
.navx-req{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);font-family:var(--label-font);font-size:var(--fs-label);
  letter-spacing:.13em;text-transform:uppercase}
.navx-req:hover{background:var(--accent-hover,var(--accent))}
.themebtn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
  background:none;border:1px solid var(--rule);color:var(--nav-ink);font-family:var(--label-font);
  font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase}
.themebtn:hover{color:var(--ink);border-color:var(--rule-strong,var(--rule))}
.themebtn-ic{display:inline-flex;line-height:0}
[data-theme="dark"] .themebtn .ic-sun,
[data-theme="light"] .themebtn .ic-moon{display:none}
@media (max-width:900px){
  header .wrap,header > div{flex-wrap:wrap}
  .navx{order:3;flex-direction:column;align-items:stretch;width:100%;gap:0;border-top:1px solid var(--rule)}
  .navx-item{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
    border-bottom:1px solid var(--rule);width:100%}
  .navx-link{flex:1 1 auto;min-height:50px;white-space:normal}
  .navx-caret{flex:0 0 auto;min-width:56px;min-height:50px}
  .navx-menu{position:static;min-width:0;max-width:none;width:100%;border:0;border-top:1px solid var(--rule);
    box-shadow:none;background:transparent;order:3}
  .navx-menu a{min-height:48px;padding:0 14px}
  .navx-item--req{border-bottom:0;padding:10px 0}
  .navx-req{width:100%;justify-content:center;min-height:50px}
  .themebtn{order:2}
  header.site{position:relative;top:auto}

  .navx-cols{grid-template-columns:1fr;gap:0}
  .navx-menu--mega{min-width:0;max-width:none}
  .navx-grp{margin:10px 14px 2px}
}
/* dark mode — every text use of the accent goes through --accent-text (#E9A9A9)
   so #990000 is never text on the near-black ground */
:root[data-theme="dark"]{--surface:#16130F;--surface-2:#1E1A15;--rule:rgba(243,237,227,.18);
  --ink:#F3EDE3;--ink-muted:#BFB4A4;--accent-text:#E9A9A9;--accent-ink:#F3EDE3;
  --menu-bg:var(--surface);--menu-shadow:0 20px 44px rgba(0,0,0,.45)}

/* desktop: balance the header by pushing Series-through-Request to the right edge
   of the layout area (the theme switcher rides with them, outermost) */
@media (min-width:901px){
  .navx{margin-left:auto;justify-content:flex-end}
}

/* the request-list chip: quiet by default, only appears when there is a draft */
.reqchip{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;gap:8px;align-items:center;
  background:var(--accent);color:#fff;text-decoration:none;border-radius:999px;
  padding:11px 18px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.22);max-width:calc(100vw - 32px)}
.reqchip[hidden]{display:none}
.reqchip .reqchip-n{background:rgba(255,255,255,.24);border-radius:999px;padding:1px 8px;font-size:.78rem}
.reqchip:hover{filter:brightness(1.12)}
.reqchip:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:520px){ .reqchip{right:10px;bottom:10px;padding:10px 14px} .reqchip .reqchip-t{display:none} }

/* configure-and-request panel: neutral greys so it reads on light AND dark */
.cfgbox{margin:20px 0 8px;padding:16px 18px;border:1px solid rgba(128,128,128,.38);
  border-radius:4px;background:rgba(128,128,128,.06);max-width:660px}
.cfgbox .cfg-h{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px;font-weight:600}
.cfgbox .cfg-note{margin:0 0 14px;font-size:.82rem;line-height:1.5;opacity:.78}
/* one field per row, every label starting at the same left edge.  Side by side
   they overlapped at the widths this panel is actually used at. */
.cfg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:start}
.cfg-field{display:flex;flex-direction:column;gap:6px;width:100%;max-width:330px}
.cfg-field>span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.cfg-field select,.cfg-field input{font:inherit;color:inherit;background:transparent;
  border:1px solid rgba(128,128,128,.45);border-radius:3px;padding:8px 10px;min-height:42px}
.cfg-field select option{color:#111;background:#fff}
.cfg-opts{grid-column:1/-1;border:0;padding:0;margin:2px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px}
.cfg-opts>legend{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75;padding:0 0 6px}
.cfg-opt{display:flex;align-items:center;gap:8px;font-size:.9rem;min-height:34px}
.cfg-opt input{width:24px;height:24px;accent-color:var(--accent)}
@media (max-width:520px){ .cfgbox{padding:14px} }

/* the control offers the OTHER mode, so the icon shows what you'd switch to */
html[data-mode="day"] .themebtn .ic-sun{display:none}
html[data-mode="night"] .themebtn .ic-moon{display:none}

/* the red HSA mark in place of the set wordmark */
.wm-mark{height:34px;width:auto;display:block;align-self:center}

/* the mode control sits in the nav row, right of Request - the same place it holds
   in the night template.  The header row is now a flex row of brand | nav | control,
   which is what the order rules further up were written for. */
header.site > .wrap{display:flex;align-items:center;gap:clamp(10px,2vw,30px);
  justify-content:space-between;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
header.site > .wrap > .top{padding:0;flex:0 1 auto}
header.site > .wrap > .themebtn{flex:0 0 auto}
@media (max-width:900px){
  header.site > .wrap > .themebtn{order:2}
  header.site > .wrap > .navx{order:3}
}