/* HSA new site - the series page stylesheet.
   Extracted verbatim from the SETTLED design master (GATE 2, 2026-10-22):
     design\mockups\quiet-luxury-v2-series.html
     sha256 5c9291da6bee2604551f2e6dd182c409938a8072310f8c1522eaabd26d73bb8d
   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 — wordmark set as type, nav is the top rule */
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)}

/* PAGE HEAD — the same ruled-index opening as the home page hero */
.hero{padding:clamp(56px,8vh,104px) 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.page{font-size:var(--fs-page);line-height:1.02;letter-spacing:-.02em;margin:34px 0 0;max-width:24ch}
h1.page em{font-style:italic}
.hero .grid{display:grid;grid-template-columns:1.35fr .65fr;gap:0;margin-top:52px;border-top:1px solid var(--rule)}
.hero .grid .left{padding:38px 52px 38px 0}
.hero .grid .right{padding:38px 0 38px 44px;border-left:1px solid var(--rule)}
.lede{font-size:20px;color:var(--ink-muted);max-width:50ch;font-weight:300}
.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)}
.stack div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14px}
.stack div:last-child{border-bottom:0}
.stack .k{color:var(--ink-muted)}
.stack .v{font-family:var(--label-font);font-size:13px}

/* fact strip — a hairline ledger, no boxes */
.facts{border-top:1px solid var(--rule);margin-top:0}
.facts .fr{display:grid;grid-template-columns:repeat(8,1fr)}
.facts .fr div{padding:20px 12px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.facts .fr div:last-child{border-right:0}
.facts .n{font-family:var(--display-font);font-size:1.35rem;display:block;line-height:1}
.facts .k{margin-top:8px;font-size:10px;letter-spacing:.16em}

/* 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)}

/* series index — two editorial columns of rows */
.cols2{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.srow{display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:16px;padding:17px 0;border-bottom:1px solid var(--rule);scroll-margin-top:120px}
.srow:hover .nm{color:var(--accent-text)}
.srow .i{font:400 11px/1 var(--label-font);color:var(--ink-muted)}
.srow .nm{font-family:var(--display-font);font-size:1.22rem;transition:color 200ms var(--ease)}
.srow .ct{font:400 12px/1 var(--label-font);color:var(--ink-muted)}
.srow:target{background:var(--surface-2)}

/* depth views — a single ruled band */
.depth{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.depth a{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;padding:30px 32px 30px 0}
.depth a+a{border-left:1px solid var(--rule);padding-left:32px}
.depth .path{font:400 11px/1.7 var(--label-font);color:var(--ink-muted);grid-column:1/-1}
.depth h3{font-size:var(--fs-h3)}
.depth .go{margin-top:14px;grid-column:1/-1;font:500 11px/1 var(--label-font);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}

/* models — editorial list rows, small letterboxed plates */
.frow{display:grid;grid-template-columns:280px 1fr;gap:44px;padding:44px 0;border-bottom:1px solid var(--rule);align-items:start}
.frow .plate{border:1px solid var(--rule);background:var(--surface-2);padding:22px}
.frow .plate img{height:210px;width:100%;object-fit:contain}
.frow .meta{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.frow .meta .dot{width:6px;height:6px;background:var(--accent);border-radius:50%}
.frow h3{font-size:var(--fs-h3);margin-bottom:12px}
.frow .desc{color:var(--ink-muted);font-size:15.5px;max-width:62ch}
.rq{display:inline-flex;align-items:center;gap:10px;margin-top:20px;min-height:44px;
  font:500 11px/1 var(--label-font);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
  border-bottom:1px solid currentColor;padding-bottom:8px}
.rq:hover{opacity:.7}

/* 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:1fr auto;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.olist .n{font-family:var(--display-font);font-size:1.08rem}
.olist .s{font:400 11px/1.5 var(--label-font);color:var(--ink-muted);text-align:right}

/* finishes — an inline sentence-plus-index */
.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}

/* 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}

/* closing request block */
.request{margin-top:6px;border-top:1px solid var(--rule);padding-top:34px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}

/* 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){
  .hero .grid{grid-template-columns:1fr}
  .hero .grid .left{padding:30px 0}
  .hero .grid .right{border-left:0;border-top:1px solid var(--rule);padding:26px 0 0}
  .facts .fr{grid-template-columns:repeat(2,1fr)}
  .facts .fr div:nth-child(2n){border-right:0}
  .cols2{grid-template-columns:1fr;column-gap:0}
  .depth{grid-template-columns:1fr}
  .depth a+a{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .frow{grid-template-columns:1fr;gap:24px}
  .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}
  .facts .fr{grid-template-columns:1fr}
  .facts .fr 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 — same toggling vocabulary as the home page; 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} }

/* 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 series list in TWO columns (it ran as one long column) */
.sec.series2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 36px;align-items:start}
.sec.series2 > .sec-head{grid-column:1 / -1}
.sec.series2 .frow{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:0 0 30px;
  border-bottom:1px solid var(--rule)}
.sec.series2 .frow .plate{padding:16px}
.sec.series2 .frow .plate img{height:190px}
@media (max-width:900px){
  .sec.series2{grid-template-columns:minmax(0,1fr)}
}

/* 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}
}