/* Contained, normal-flow heroes. The shared site's navigation and section styles remain. */
html {scroll-behavior:auto}
.demo-page{background:#f2f5f5;color:#203740}
.home.demo-page .hdr{position:relative;top:auto;left:auto;right:auto;margin:16px 32px 0;width:auto;background:#19333f;backdrop-filter:none;border-radius:14px;box-shadow:none}
.demo-hero{max-width:1600px;margin:auto;padding:64px 48px 32px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);align-items:center;gap:40px}
.demo-copy{min-width:0}
.demo-copy .hp-eyebrow{color:#506973;font-size:11px}
.demo-copy h1{color:#203740;font-size:clamp(36px,3.6vw,62px);letter-spacing:-.045em;line-height:1.04;margin:18px 0 22px;text-wrap:balance;max-width:15ch}
.demo-copy .hp-hero-body{color:#4b626a;font-size:16px;line-height:1.65;max-width:55ch;margin:0}
.demo-copy .hp-hero-actions{display:flex;align-items:center;gap:18px;margin:28px 0 0}
.demo-copy .hp-acts{margin:0;flex:none}
.demo-copy .btn{min-height:52px;border-radius:12px;padding:0 24px}
.demo-copy .hp-act-note{font-size:12px;line-height:1.5;max-width:22ch;color:#596d76;margin:0}
.demo-film{position:relative;min-width:0;overflow:hidden;border-radius:20px;background:#e6edef;border:1px solid #cedbde;box-shadow:0 24px 55px -30px #304b5466}
.demo-play{position:absolute;inset:0;border:0;background:#10283215;color:white;cursor:pointer;display:grid;place-items:center;width:100%;height:100%}
.demo-play[hidden]{display:none}
.demo-play svg{width:70px;height:70px;padding:22px;border-radius:50%;background:#17343feb;box-shadow:0 4px 24px #10283244}
.demo-play:focus-visible{outline:4px solid #a6332c;outline-offset:-4px}
.demo-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#e9eef0}
.demo-support{grid-column:1/-1;border-top:1px solid #d1dddf;padding:26px 0 0;margin-top:12px}
.demo-support .hp-hero-support{color:#4b626a;font-size:13px;margin:0;display:flex;justify-content:space-between;gap:24px}
.demo-support .hp-hero-support>span{border:0!important;padding:0!important;display:flex;align-items:center;gap:10px}
.demo-support svg{width:20px;height:20px;color:#a6332c}
.home.demo-page main>.hp-est{margin:0;padding:64px 32px;background:#e6eeef}
.home.demo-page main>.hp-est .hp-est-plan-background{display:none}
.home.demo-page main>.hp-est::before{display:none}
.home.demo-page main>.hp-est :is(.hp-est-lead,.hp-plan-summary) .hp-eyebrow{color:#506973}
.home.demo-page main>.hp-est>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;grid-template-areas:none}
.home.demo-page main>.hp-est :is(.hp-est-lead,.hp-plan-summary){--card-eyebrow-ink:#506973;grid-area:auto;max-width:none;margin:0;padding:32px;min-height:0;background:#f8fafa;border:1px solid #d2dfe2;border-radius:18px;box-shadow:none;backdrop-filter:none}
.home.demo-page main>.hp-est :is(.hp-est-lead,.hp-plan-summary)::before{display:none}
.home.demo-page .hp-est h2{font-size:clamp(28px,3vw,40px)}
.demo-page[data-mode="wide"] .demo-hero{grid-template-columns:1fr;padding-top:44px;gap:28px;max-width:1280px}
.demo-page[data-mode="wide"] .demo-copy{display:grid;grid-template-columns:1.05fr 1fr;column-gap:56px;align-items:start}
.demo-page[data-mode="wide"] .demo-copy .hp-eyebrow{grid-column:1/-1;margin-bottom:14px}
.demo-page[data-mode="wide"] .demo-copy h1{grid-column:1;grid-row:2/4;margin:0;max-width:17ch;font-size:clamp(36px,3.4vw,54px)}
.demo-page[data-mode="wide"] .demo-copy .hp-hero-actions{grid-column:2;margin-top:18px}
.demo-page[data-mode="wide"] .demo-film{width:100%;max-width:1080px;justify-self:center}
.demo-page[data-mode="wide"] .demo-support{margin-top:0}
.demo-page[data-mode="still"] .demo-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.demo-page[data-mode="still"] .demo-film{border-radius:8px;box-shadow:none}
.home.demo-page[data-mode="bleed"] .hdr{margin:0;border-radius:0}
.demo-page[data-mode="bleed"] .demo-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;width:100%;max-width:none;min-height:600px;height:calc(100svh - 72px);padding:0;background:#142c35;overflow:hidden}
.demo-page[data-mode="bleed"] .demo-film{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none}
.demo-page[data-mode="bleed"] .demo-film video{width:100%;height:100%;object-fit:cover;object-position:center;background:#142c35}
.demo-page[data-mode="bleed"] .demo-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(12,30,39,0) 20%,rgba(12,30,39,.025) 30%,rgba(12,30,39,.10) 40%,rgba(12,30,39,.23) 50%,rgba(12,30,39,.40) 60%,rgba(12,30,39,.59) 70%,rgba(12,30,39,.76) 80%,rgba(12,30,39,.88) 90%,rgba(12,30,39,.94) 100%)}
.demo-page[data-mode="bleed"] .demo-copy{position:relative;z-index:2;pointer-events:none;width:100%;padding:40px clamp(24px,4vw,72px);background:none;display:grid;grid-template-columns:1fr;gap:20px;align-items:end}
.demo-page[data-mode="bleed"] .demo-copy .hp-eyebrow{grid-column:1/-1;color:#eef5f7;margin:0}
.demo-page[data-mode="bleed"] .demo-copy h1{color:white;font-size:clamp(32px,3.65vw,70px);max-width:none;white-space:nowrap;margin:0;line-height:1.04}
.demo-page[data-mode="bleed"] .demo-copy .hp-hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0 0 4px}
.demo-page[data-mode="bleed"] .demo-copy .hp-act-note{color:#e5edf0;max-width:28ch;font-size:13px}
.demo-page[data-mode="bleed"] .demo-copy a{pointer-events:auto}
.demo-toggle{position:absolute;z-index:3;top:24px;right:28px;border:1px solid #ffffff80;border-radius:24px;padding:10px 20px;background:#16313be8;color:white;font:600 13px system-ui;cursor:pointer;min-width:80px;min-height:44px}
.demo-toggle:focus-visible{outline:3px solid white;outline-offset:3px}
.demo-after{padding:32px clamp(24px,4vw,72px);max-width:1600px;margin:auto}
.demo-after .hp-hero-body{font-size:17px;line-height:1.65;color:#4b626a;max-width:85ch;margin:0}
.demo-after .demo-support{margin-top:26px}
@media(max-width:980px){
 .demo-hero{padding:40px 28px 28px;gap:28px;grid-template-columns:1fr!important;max-width:820px}
 .demo-copy h1{font-size:46px;max-width:22ch}
 .demo-copy .hp-hero-body{max-width:70ch}
 .demo-page[data-mode="wide"] .demo-copy{display:block}
 .demo-page[data-mode="wide"] .demo-copy h1{margin-bottom:20px;max-width:22ch}
 .demo-support .hp-hero-support{flex-wrap:wrap;justify-content:flex-start}
 .home.demo-page .hdr{margin:12px 20px 0}
}
@media(max-width:600px){
 .home.demo-page .hdr{margin:10px 12px 0}
 .demo-hero,.demo-page[data-mode="wide"] .demo-hero{padding:30px 20px 24px;gap:26px}
 .demo-copy h1,.demo-page[data-mode="wide"] .demo-copy h1{font-size:38px;max-width:17ch;margin:14px 0 18px}
 .demo-copy .hp-hero-body{font-size:15px;line-height:1.6}
 .demo-copy .hp-hero-actions{margin-top:22px;align-items:flex-start;flex-direction:column;gap:10px}
 .demo-copy .hp-act-note{max-width:34ch}
 .demo-film{border-radius:12px}
 .demo-support{margin:0;padding-top:22px}
 .demo-support .hp-hero-support{gap:12px;font-size:12px;flex-direction:column}
 .home.demo-page main>.hp-est{padding:36px 20px}
 .home.demo-page main>.hp-est>.wrap{display:block;padding:0}
 .home.demo-page main>.hp-est :is(.hp-est-lead,.hp-plan-summary){padding:24px;margin:0 0 20px}
}
@media(max-width:980px){
 .demo-page[data-mode="bleed"] .demo-copy{grid-template-columns:1fr;gap:18px;padding-top:100px;padding-bottom:30px}
.demo-page[data-mode="bleed"] .demo-copy h1{max-width:20ch;font-size:46px;white-space:normal}
 .demo-page[data-mode="bleed"] .demo-copy .hp-hero-actions{flex-direction:row;align-items:center;gap:20px}
}
@media(max-width:600px){
 .demo-page[data-mode="bleed"] .demo-hero{height:calc(100svh - 60px);min-height:620px}
 .demo-page[data-mode="bleed"] .demo-film video{object-position:50% 36%}
 .demo-page[data-mode="bleed"] .demo-hero.is-playing video{object-fit:contain;object-position:50% 10%}
 .demo-page[data-mode="bleed"] .demo-copy{padding:90px 22px 26px;gap:16px}
 .demo-page[data-mode="bleed"] .demo-copy h1{font-size:38px;max-width:17ch}
 .demo-page[data-mode="bleed"] .demo-copy .hp-hero-actions{align-items:flex-start;flex-direction:column;gap:10px}
 .demo-page[data-mode="bleed"] .demo-copy .hp-act-note{font-size:12px;max-width:34ch}
 .demo-page[data-mode="bleed"] .demo-play{align-items:start;padding-top:160px}
 .demo-toggle{top:18px;right:18px}
 .demo-after{padding:28px 22px}
 .demo-after .hp-hero-body{font-size:15px}
}

/* Reference E: transparent navigation and a restrained left-hand copy column. */
.home.demo-page[data-mode="reference"]{background:#071214}
.home.demo-page[data-mode="reference"] .hdr{position:absolute;inset:0 0 auto;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;z-index:20}
.home.demo-page[data-mode="reference"] .hdr-in{max-width:1400px;margin:auto;min-height:88px;padding-inline:clamp(24px,6vw,112px)}
.home.demo-page[data-mode="reference"] .hdr-right{border:0;padding:0;margin:0}
/* The header phone shows on every page from tablet width up (Eugene, 2026-10-17); phones hide it (home-presentation.css). */
.home.demo-page[data-mode="reference"] .hdr .demo-header-cta{background:#fff;color:#12292f;border-color:#fff;border-radius:30px;font-size:14px;white-space:nowrap}
.demo-page[data-mode="reference"] .demo-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;width:100%;max-width:none;height:86svh;min-height:720px;max-height:1040px;padding:0;overflow:hidden;background:#071214}
.demo-page[data-mode="reference"] .demo-film{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none}
.demo-page[data-mode="reference"] .demo-film video{height:100%;width:100%;object-fit:cover;background:#071214}
.demo-page[data-mode="reference"] .demo-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,12,15,.77),rgba(3,12,15,.47) 48%,rgba(3,12,15,.14)),linear-gradient(180deg,rgba(3,12,15,.54),transparent 24%,transparent 64%,rgba(3,12,15,.46))}
.demo-page[data-mode="reference"] .demo-copy{position:relative;z-index:2;pointer-events:none;width:100%;max-width:1400px;margin:auto auto 0;padding:140px clamp(24px,6vw,112px) 70px;background:none;display:block}
.demo-page[data-mode="reference"] .demo-copy .hp-eyebrow{font-size:11px;color:#e4ecee;margin:0 0 24px}
.demo-page[data-mode="reference"] .demo-copy h1{font-size:clamp(52px,5.1vw,88px);line-height:1.04;font-weight:400;letter-spacing:-.045em;color:#fff;max-width:16ch;margin:0 0 28px;text-wrap:balance}
.demo-page[data-mode="reference"] .demo-copy .hp-act-note{font-size:20px;line-height:1.4;color:#f0f3f4;max-width:33ch;margin:0 0 28px}
.demo-page[data-mode="reference"] .demo-copy .hp-hero-actions{margin:0}
.demo-page[data-mode="reference"] .demo-copy a{pointer-events:auto}
.demo-page[data-mode="reference"] .demo-copy .btn{border-radius:30px;background:white;border-color:white;color:#142b32;padding:0 28px;min-height:54px}
.demo-page[data-mode="reference"] .demo-copy .btn:hover,.home.demo-page[data-mode="reference"] .demo-header-cta:hover{background:#e1ebed;border-color:#e1ebed}
.demo-page[data-mode="reference"] .demo-toggle{top:auto;bottom:32px;right:32px;background:#06161988}
.demo-page[data-mode="reference"] .demo-after{max-width:1400px;padding:64px clamp(24px,6vw,112px);margin:auto;background:#071214}
.demo-page[data-mode="reference"] .demo-after .hp-hero-body{font-size:clamp(25px,2.6vw,40px);font-weight:400;line-height:1.3;letter-spacing:-.025em;color:#adbabd;max-width:48ch}
.demo-page[data-mode="reference"] .demo-after .demo-support{border-color:#304345;margin-top:36px}
.demo-page[data-mode="reference"] .demo-after .hp-hero-support{color:#d2dfe0}
@media(max-width:980px){
 .home.demo-page[data-mode="reference"] .hdr-in{min-height:76px;padding-inline:24px}
 .home.demo-page[data-mode="reference"] .hdr-right{margin-left:auto}
 .demo-page[data-mode="reference"] .demo-copy{padding-inline:40px}
 .demo-page[data-mode="reference"] .demo-hero{min-height:740px}
 .demo-page[data-mode="reference"] .demo-copy h1{font-size:64px}
}
@media(max-width:600px){
 .home.demo-page[data-mode="reference"] .hdr-in{min-height:70px;padding-inline:20px}
 .home.demo-page[data-mode="reference"] .hdr .demo-header-cta{display:none}
 .demo-page[data-mode="reference"] .demo-hero{min-height:700px;height:94svh;max-height:none}
 .demo-page[data-mode="reference"] .demo-copy{padding:220px 24px 76px}
 .demo-page[data-mode="reference"] .demo-copy h1{font-size:46px;max-width:16ch;margin-bottom:24px}
 .demo-page[data-mode="reference"] .demo-copy .hp-act-note{font-size:17px;max-width:30ch;margin-bottom:24px}
 .demo-page[data-mode="reference"] .demo-copy .hp-eyebrow{margin-bottom:18px}
 .demo-page[data-mode="reference"] .demo-toggle{bottom:18px;right:20px}
 .demo-page[data-mode="reference"] .demo-play{align-items:start;padding-top:120px}
 .demo-page[data-mode="reference"] .demo-hero.is-playing video{object-fit:contain;object-position:center 10%}
 .demo-page[data-mode="reference"] .demo-after{padding:38px 24px}
}

/* The right-side specifications must survive a narrower hero crop. */
.demo-page[data-mode="reference"] .demo-film video{object-position:right center}
@media(max-width:980px){
 .demo-page[data-mode="reference"] .demo-hero.is-playing video{position:absolute;top:76px;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center}
 .demo-page[data-mode="reference"] .demo-hero.is-playing .demo-copy h1{font-size:46px}
}

/* Word-by-word headline: a fixed line box keeps the copy and CTA stationary. */
.demo-title-fixed,.demo-title-cycle{display:block}
.demo-title-cycle{position:relative;white-space:normal;text-wrap:wrap;font:inherit;letter-spacing:inherit;line-height:1.18;min-height:1.18em;margin-top:.08em}
/* The rotating ending is the hero's one colour (Eugene, 2026-10-03): the ice blue used across the dark sections. */
.demo-title-cycle{color:#7cc7df}
.demo-phrase{display:block}
.demo-phrase[hidden]{display:none}
.demo-word-window{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.18}
.demo-word{display:inline-block;padding-bottom:.12em;will-change:transform}
.demo-page[data-mode="reference"] .demo-copy .hp-act-note{margin:18px 0 0}
.demo-page[data-mode="reference"] .demo-copy .btn,.home.demo-page[data-mode="reference"] .hdr .demo-header-cta{background:var(--red,#b7352d);border-color:var(--red,#b7352d);color:#fff}
.demo-page[data-mode="reference"] .demo-copy .btn:hover,.home.demo-page[data-mode="reference"] .hdr .demo-header-cta:hover{background:#962c25;border-color:#962c25;color:#fff}
@media(min-width:981px){
 .demo-page[data-mode="reference"] .demo-copy h1{width:min(60vw,100%);max-width:none}
}

/* Mobile reference: full-bleed film, elevated headline, wide action and rounded next section. */
@media(max-width:600px){
 .home.demo-page[data-mode="reference"] .hdr-in{padding-inline:20px;min-height:76px}
 .home.demo-page[data-mode="reference"] .hdr .demo-header-cta{display:inline-flex;font-size:12px;min-height:40px;padding:0 14px}
 .home.demo-page[data-mode="reference"] .menu-btn{font-size:0;width:44px;height:44px;min-width:44px;border:0;background:transparent;position:relative;padding:12px}
 .home.demo-page[data-mode="reference"] .menu-btn::before{content:"";display:block;height:2px;width:20px;background:#fff;box-shadow:0 -6px #fff,0 6px #fff}
 .demo-page[data-mode="reference"] .demo-hero{height:90svh;min-height:680px;max-height:900px;align-items:stretch}
 .demo-page[data-mode="reference"] .demo-copy{height:100%;margin:0;padding:clamp(132px,18svh,180px) 22px 96px;display:flex;flex-direction:column}
 .demo-page[data-mode="reference"] .demo-copy h1,.demo-page[data-mode="reference"] .demo-hero.is-playing .demo-copy h1{font-size:clamp(38px,11.3vw,54px);max-width:none;width:100%;margin:0 0 auto}
 .demo-page[data-mode="reference"] .demo-copy .hp-hero-actions,.demo-page[data-mode="reference"] .demo-copy .hp-acts{width:100%}
 .demo-page[data-mode="reference"] .demo-copy .btn{width:100%;justify-content:center;min-height:54px}
 .demo-page[data-mode="reference"] .demo-copy .hp-act-note{font-size:16px;line-height:1.4;max-width:32ch;margin:16px 0 0}
 .demo-page[data-mode="reference"] .demo-hero.is-playing video,.demo-page[data-mode="reference"] .demo-film video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:60% center}
 .demo-page[data-mode="reference"] .demo-hero::after{background:linear-gradient(180deg,rgba(3,12,15,.5),rgba(3,12,15,.27) 24%,rgba(3,12,15,.32) 48%,rgba(3,12,15,.72)),linear-gradient(90deg,rgba(3,12,15,.38),transparent)}
 .demo-page[data-mode="reference"] .demo-toggle{bottom:42px;right:22px;min-width:64px;padding:8px 14px}
 .demo-page[data-mode="reference"] .demo-after{position:relative;z-index:4;margin-top:-32px;border-radius:38px 38px 0 0;padding:44px 22px 36px}
 .demo-page[data-mode="reference"] .demo-after .hp-hero-body{font-size:30px;line-height:1.15;letter-spacing:-.035em}
}
@media(min-width:601px){
 .demo-page[data-mode="reference"] .demo-after{position:relative;z-index:4;max-width:none;margin-top:-32px;border-radius:38px 38px 0 0}
 .demo-page[data-mode="reference"] .demo-after>div{max-width:1176px;margin-inline:auto}
}

.demo-page[data-mode="reference"] .demo-after>.demo-gallery{max-width:none;margin-top:36px}
.demo-gallery-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#59686c transparent;padding-bottom:14px;overscroll-behavior-x:contain}
.demo-gallery-track figure{flex:0 0 clamp(300px,38vw,560px);margin:0;scroll-snap-align:start}
.demo-gallery-frame{border-radius:14px;overflow:hidden;background:#26383b;aspect-ratio:4/3}
.demo-gallery-track figcaption{margin:18px 4px 0;max-width:46ch;font-size:16px;line-height:1.5;color:#adbabd}
.demo-gallery-track figcaption strong{display:block;margin-bottom:4px;font-size:17px;font-weight:600;color:#fff}
.demo-gallery-track img{display:block;width:100%;height:100%;object-fit:cover}
.demo-gallery-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.demo-gallery-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #647478;border-radius:50%;background:transparent;color:#fff;font-size:24px;cursor:pointer}
.demo-gallery-controls button:disabled{opacity:.3;cursor:default}
.demo-gallery-track:focus-visible,.demo-gallery-controls button:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:600px){
 .demo-page[data-mode="reference"] .demo-after>.demo-gallery{margin-top:28px;margin-right:-22px}
 .demo-gallery-track{gap:12px;padding-right:22px}
 .demo-gallery-track figure{flex-basis:82vw}
 .demo-gallery-frame{border-radius:10px}
 .demo-gallery-track figcaption{margin-top:14px;font-size:15px}
 .demo-gallery-controls{padding-right:22px}
}
/* Detail framing uses existing source photography; the final room ties the parts together. */
.demo-gallery-track [data-detail="hinge"] img{object-position:50% 38%}
.demo-gallery-track [data-detail="evaporator"] img{transform:scale(2.35);transform-origin:65% 0%}
.demo-gallery-track [data-detail="plant"] img{object-position:100% 50%;transform:scale(2.6);transform-origin:100% 60%}
.demo-gallery-track [data-detail="racking"] img{object-position:100% 50%;transform:scale(1.8);transform-origin:100% 40%}

/* Navigation stays above the film and becomes opaque over the first 100px of scroll. */
.home.demo-page[data-mode="reference"] .hdr{position:fixed;background:rgba(7,18,20,var(--nav-opacity,0))}

/* LOWER HOMEPAGE, aligned to the inner pages (2026-10-02). After the dark system story the page uses the same two
   surfaces as the content pages: squared paper (#f9fbfa, 24px grid) and dark #071214, each new band overlapping the
   last with 38px rounded top corners. No glass, no floating cards; regular-weight headings, fine rules, a 1120px
   content width. Copy and markup are unchanged. Scoped to the approved reference mode. */
.home.demo-page[data-mode="reference"]{--paper:#f9fbfa;--paper-grid:linear-gradient(#dbe4df45 1px,transparent 1px),linear-gradient(90deg,#dbe4df45 1px,transparent 1px);--rule:#bfcccb;--ink:#182e34;--ink-2:#4b6064;--dark:#071214;--frame:1120px}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service,#answers,#refrigeration,#contact){position:relative;margin:0;border:0;box-shadow:none;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service,#answers,#refrigeration,#contact)>.wrap{box-sizing:border-box;width:100%;max-width:calc(var(--frame) + 56px);margin-inline:auto;padding:0 28px}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service,#answers,#refrigeration,#contact) :is(h2,h3){font-weight:400;letter-spacing:-.035em;text-shadow:none}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service,#refrigeration,#contact) .hp-eyebrow{display:block;margin:0 0 12px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#53686d;text-shadow:none}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service,#answers,#refrigeration,#contact) .hp-eyebrow::before{display:none}
.home.demo-page[data-mode="reference"] main .btn-primary{border-radius:30px;min-height:52px;padding-inline:28px;font-size:16px;font-weight:600;box-shadow:none}

/* Paper: equipment, installation and service read as three ruled chapters on one sheet. */
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service,#refrigeration,#contact){background-color:var(--paper);background-image:var(--paper-grid);background-size:24px 24px}
.home.demo-page[data-mode="reference"] main>#equipment{z-index:5;margin-top:-32px;border-radius:38px 38px 0 0;padding:64px 0 0}
.home.demo-page[data-mode="reference"] main>#equipment>.wrap{display:block}
.home.demo-page[data-mode="reference"] main>#service{z-index:5;padding:0 0 96px;min-height:0;height:auto}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card){
 position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eye eye" "head body" "head act";column-gap:56px;align-items:start;
 width:auto;max-width:none;min-height:0;margin:0;padding:40px 0;background:none;border:0;border-top:1px solid var(--rule);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.home.demo-page[data-mode="reference"] main>#equipment .hp-est-lead{border-top:0;padding-top:0}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card)::before,
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card)::after{display:none!important;content:none!important}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .hp-eyebrow{grid-area:eye}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) h2{grid-area:head;margin:0;max-width:16ch;font-size:clamp(28px,2.6vw,36px);line-height:1.12;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .promise{grid-area:body;margin:6px 0 0;max-width:60ch;font-size:17px;line-height:1.65;color:var(--ink-2)}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .hp-est-intro-actions{grid-area:act;margin:24px 0 0}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .hp-acts{margin:0}
/* Chapters 1.3-1.5 (Eugene, 2026-10-03): blue eyebrows like the 1.2 captions; desktop = drawing on the left,
   eyebrow / heading / paragraph stacked beside it.
   The three drawings sit straight on the grid paper, one size and one palette: ink lines, ice blue, a muted warm for heat/limits. */
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card){grid-template-columns:minmax(0,140px) minmax(0,1fr);grid-template-areas:"art eye" "art head" "art body";grid-template-rows:auto auto 1fr}
@media(min-width:981px){
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) h2{max-width:none;margin-bottom:16px}
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .promise{margin-top:0}
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .hp-chapter-art{margin-top:0;align-self:center}
 /* Balance: each chapter is one centred column, narrower than the frame. */
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card){max-width:920px;margin-inline:auto;column-gap:48px}
}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .hp-eyebrow{margin:0 0 18px;font-size:17px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ice-ink,#1F7A99)}
.home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .hp-eyebrow::before{background:var(--ice-ink,#1F7A99)}
/* One button after all three chapters, centred, not tied to any one (Eugene, 2026-10-03). */
/* Sizes for the hero and chapter buttons; their look is the site button (assets/look.css PART 3). */
.home.demo-page[data-mode="reference"] :is(main>#service .hp-chapters-action,.demo-hero .hp-hero-actions) .btn-primary{min-width:min(100%,320px);min-height:60px;padding-inline:32px;font-size:19px!important;font-weight:700}
.home.demo-page[data-mode="reference"] main>#service .hp-chapters-action{display:flex;justify-content:center;padding:40px 0 0;border-top:1px solid var(--rule);max-width:920px;margin-inline:auto}
.hp-chapter-art{grid-area:art;margin:28px 0 0;max-width:140px}
/* Pencil (Eugene, 2026-10-03): graphite lines with a hand wobble (#pencil filter), hatching for shade,
   colour only as light coloured pencil on the cold and warm parts. */
.hp-pencil-defs{position:absolute;width:0;height:0;overflow:hidden}
.hp-chapter-art svg{display:block;width:100%;height:auto;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.hp-chapter-art svg>:not(defs):not(text){filter:url(#pencil)}
.hp-chapter-art :is(rect,circle,path){stroke:#4a5559;stroke-width:1.3;stroke-opacity:.85}
.hp-chapter-art .ice{fill:url(#hatch-ice)}
.hp-chapter-art .heat{fill:url(#hatch-warm)}
.hp-chapter-art .plain{fill:none}
.hp-chapter-art .fan{stroke:#5f8fa0}
.hp-chapter-art .warm-line{stroke:#c98a6f}
.hp-chapter-art :is(.cold,.warm){stroke-width:2.6;stroke-opacity:.75}
.hp-chapter-art .cold{stroke:#5f8fa0}
.hp-chapter-art .warm{stroke:#c98a6f}
.hp-chapter-art .tick{stroke:#5f8fa0;stroke-width:3}
.hp-chapter-art .wear{stroke:#5f8fa0;stroke-width:2.2}
.hp-chapter-art .limit{stroke:#c98a6f;stroke-dasharray:6 5}
.hp-chapter-art defs path{stroke:none}
.hp-chapter-art text{font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.08em;fill:#6b7578;stroke:none}
.hp-chapter-art .warm-text{fill:#c98a6f}

/* Dark: the reviews / answers band, built like the system-story gallery. */
.home.demo-page[data-mode="reference"] main>#answers{z-index:6;margin-top:-32px;border-radius:38px 38px 0 0;padding:88px 0 96px;background:var(--dark);color:#fff;overflow:hidden}
.home.demo-page[data-mode="reference"] main>#answers :is(.hp-holds-head,.hp-holds-action){box-sizing:border-box;max-width:calc(var(--frame) + 56px);margin-inline:auto;padding-inline:28px}
.home.demo-page[data-mode="reference"] main>#answers .hp-eyebrow{display:block;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#c2d0d0}
.home.demo-page[data-mode="reference"] main>#answers h2{font-size:clamp(30px,3vw,44px);line-height:1.12;color:#fff}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn{width:44px;height:44px;border:1px solid #647478;background:transparent;font-size:22px}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn:hover{background:#ffffff14}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-track{margin-top:40px;padding:0 max(28px,calc((100vw - var(--frame))/2)) 8px;scroll-padding-inline:max(28px,calc((100vw - var(--frame))/2));gap:20px}
.home.demo-page[data-mode="reference"] main>#answers .hp-hold{--hold-pad:28px;flex-basis:min(380px,82vw);min-height:0;padding:28px;border:1px solid #22363a;border-radius:14px;background:#0d1d20;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.home.demo-page[data-mode="reference"] main>#answers .hp-hold::before,.home.demo-page[data-mode="reference"] main>#answers .hp-hold::after{display:none!important;content:none!important}
.home.demo-page[data-mode="reference"] main>#answers .hp-hold .hp-hold-q{font-size:13px;font-weight:500;letter-spacing:.06em;color:#c2d0d0;text-shadow:none}
.home.demo-page[data-mode="reference"] main>#answers .hp-hold h3{font-size:24px;line-height:1.2;color:#fff}
.home.demo-page[data-mode="reference"] main>#answers .hp-hold p:not(.hp-hold-q){font-size:16px;line-height:1.6;color:#c9d5d5}
.home.demo-page[data-mode="reference"] main>#answers .hp-review-img{margin:-28px -28px 24px;background:#26383b}
.home.demo-page[data-mode="reference"] main>#answers .hp-review blockquote p{font-size:19px!important;font-weight:400;line-height:1.5!important;letter-spacing:-.01em;color:#fff!important}
.home.demo-page[data-mode="reference"] main>#answers .hp-review footer{border-top:1px solid #2c4246}
.home.demo-page[data-mode="reference"] main>#answers .hp-review footer .who{font-weight:500;color:#fff}
.home.demo-page[data-mode="reference"] main>#answers .hp-review footer .where{color:#a9b9ba}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-action{margin-top:40px}
/* 1.6 (Eugene, 2026-10-03): the 1.2 colour (ice blue lifted for the dark band) on the heading's key
   words (no eyebrow) and each card's question; eyebrow and heading stay left; the button centred and sized like the 1.3-1.5 button. */
.home.demo-page[data-mode="reference"] main>#answers{--ice-on-dark:#7cc7df}
.home.demo-page[data-mode="reference"] main>#answers h2 em{font-style:normal;color:var(--ice-on-dark)}
.home.demo-page[data-mode="reference"] main>#answers .hp-hold .hp-hold-q{color:var(--ice-on-dark)}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-action{display:flex;justify-content:center}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-action .btn-primary{min-width:min(100%,320px);min-height:60px;padding-inline:32px;font-size:19px!important;font-weight:700}

/* Paper again: the three rooms as unboxed columns, then contact on the same sheet. */
.home.demo-page[data-mode="reference"] main>#refrigeration{z-index:7;margin-top:-32px;border-radius:38px 38px 0 0;padding:88px 0 72px}
.home.demo-page[data-mode="reference"] main>#refrigeration::before{display:none}
.home.demo-page[data-mode="reference"] main>#refrigeration h2{margin:0;font-size:clamp(30px,3vw,44px);line-height:1.12;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-two-intro{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--ink-2)}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build-grid{gap:32px;margin-top:40px}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build{padding:0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build::before,.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build::after{display:none!important;content:none!important}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build-img{margin:0 0 20px;border-radius:14px;aspect-ratio:4/3}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build h3{margin-top:0;font-size:24px;line-height:1.2}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build h3 a{color:var(--ice-ink,#1F7A99);text-decoration:none}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build a.go{margin-top:16px;font-size:15px;font-weight:600;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-two-action{margin-top:40px}
/* 1.7 (Eugene, 2026-10-03): no eyebrow; heading split colour like 1.2 and 1.6 (on paper the darker ice blue);
   no labels under the pictures; no intro line; no Build button here: each card ends in its own "Explore …" link
   with an arrow, pinned to the card's bottom so the three line up; even padding. */
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build{display:flex;flex-direction:column}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build a.go{margin-top:auto;align-self:flex-start}
.home.demo-page[data-mode="reference"] main>#refrigeration .hp-build p{margin-bottom:24px}
.home.demo-page[data-mode="reference"] main>#refrigeration{padding-bottom:88px}
.home.demo-page[data-mode="reference"] main>#refrigeration h2 em{font-style:normal;color:var(--ice-ink,#1F7A99)}


.home.demo-page[data-mode="reference"] main>#contact{z-index:7;padding:0 0 96px}
.home.demo-page[data-mode="reference"] main>#contact::before,.home.demo-page[data-mode="reference"] main>#contact::after{display:none}
.home.demo-page[data-mode="reference"] main>#contact>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
.home.demo-page[data-mode="reference"] main>#contact>.wrap::before{content:"";grid-column:1/-1;border-top:1px solid var(--rule);margin-bottom:-16px}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-copy{padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-copy::before,.home.demo-page[data-mode="reference"] main>#contact .hp-close-copy::after{display:none!important;content:none!important}
.home.demo-page[data-mode="reference"] main>#contact h2{margin:0;font-size:clamp(30px,3vw,44px);line-height:1.12;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-body{margin-top:16px;font-size:18px;line-height:1.6;color:var(--ink-2)}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-action{margin-top:28px}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-phone{margin-top:32px;font-size:32px;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>#contact .hp-ledger{margin-top:20px;border-top:1px solid var(--rule)}
.home.demo-page[data-mode="reference"] main>#contact .hp-ledger>div{border-bottom:1px solid var(--rule)}
.home.demo-page[data-mode="reference"] main>#contact .hp-ledger :is(.k,span,a){color:var(--ink-2)}
.home.demo-page[data-mode="reference"] main>#contact .hp-ledger a{color:var(--ink);font-weight:500}
.home.demo-page[data-mode="reference"] main>#contact .form-card{margin:0;padding:32px;background:#fff;border:1px solid #718487;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.home.demo-page[data-mode="reference"] main>#contact .form-card::before,.home.demo-page[data-mode="reference"] main>#contact .form-card::after{display:none!important;content:none!important}
.home.demo-page[data-mode="reference"] main>#contact .hp-form-title{margin:0;font-size:24px;line-height:1.25;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>#contact .form-card .field{border-radius:6px;border-color:#bfcccb;background:#fff}
.home.demo-page[data-mode="reference"] main>#contact .form-card .btn-primary{border-radius:30px}
.home.demo-page[data-mode="reference"] .foot{background:#071214}

@media(max-width:980px){
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card){grid-template-columns:1fr;grid-template-areas:"eye" "head" "body" "act";column-gap:0}
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) h2{max-width:20ch}
 /* Phones/tablets: small icon on the eyebrow's line, then heading and paragraph full width. */
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card){grid-template-columns:64px minmax(0,1fr);grid-template-areas:"art eye" "head head" "body body";grid-template-rows:none;column-gap:14px}
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .hp-eyebrow{align-self:center;margin:0}
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) h2{margin-top:16px}
 .hp-chapter-art{margin:0;max-width:64px;align-self:center}
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .promise{margin-top:16px}
 .home.demo-page[data-mode="reference"] main>#contact>.wrap{grid-template-columns:1fr;gap:40px}
}
@media(max-width:600px){
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service,#answers,#refrigeration,#contact)>.wrap,
 .home.demo-page[data-mode="reference"] main>#answers :is(.hp-holds-head,.hp-holds-action){padding-inline:24px}
 .home.demo-page[data-mode="reference"] main>#equipment{padding-top:44px}
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card){padding:32px 0}
 .home.demo-page[data-mode="reference"] main>:is(#equipment,#service) .promise{font-size:16px}
 .home.demo-page[data-mode="reference"] main>#service{padding-bottom:72px}
 .home.demo-page[data-mode="reference"] main>:is(#answers,#refrigeration){padding:56px 0 64px}
 .home.demo-page[data-mode="reference"] main>#answers .hp-holds-track{padding-inline:24px;scroll-padding-inline:24px;gap:12px}
 .home.demo-page[data-mode="reference"] main>#answers .hp-hold{--hold-pad:22px;padding:22px}
 .home.demo-page[data-mode="reference"] main>#answers .hp-review-img{margin:-22px -22px 20px}
 .home.demo-page[data-mode="reference"] main>#refrigeration .hp-build-grid{gap:40px}
 .home.demo-page[data-mode="reference"] main>#contact{padding-bottom:64px}
 .home.demo-page[data-mode="reference"] main>#contact .form-card{padding:22px}
 .home.demo-page[data-mode="reference"] main>#contact .frow-2{row-gap:16px}
 .home.demo-page[data-mode="reference"] main .btn-primary{width:100%;justify-content:center}
 .home.demo-page[data-mode="reference"] main>#contact .hp-close-phone{font-size:28px}
}

/* Header button is a white outline on every page (Eugene, 2026-10-03: two red buttons side by side don't work).
   Red stays for the page's own main action. */

/* Gallery arrows (Eugene, 2026-10-03): one button everywhere, a white disc with a drawn chevron, both arrows
   always shown (the one with nowhere to go is faded). Wider than 600px they sit on the row's left and right
   edges, centred on the pictures; phones swipe and show no arrows. */
.demo-gallery{position:relative}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-stage{position:relative;margin-top:40px}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-track{margin-top:0}
.demo-gallery-controls button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#0b1a1d;font-size:0;line-height:0;cursor:pointer;box-shadow:0 2px 4px #0000001f,0 8px 24px #00000040;transition:transform .15s ease,background-color .15s ease,opacity .15s ease;pointer-events:auto}
.demo-gallery-controls button::before{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.demo-gallery-controls button[data-gallery-step="-1"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.demo-gallery-controls button:hover:not(:disabled){transform:scale(1.06);background:#eef3f3}
.demo-gallery-controls button:disabled{opacity:.4;cursor:default;box-shadow:0 2px 4px #0000001f;visibility:visible}
.demo-gallery-controls button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(min-width:601px){.demo-gallery-controls button{width:52px;height:52px}}
@media(max-width:600px){.demo-gallery-controls{display:none}}
/* Breathing room above and below the statement and gallery (Eugene, 2026-10-03). */
.demo-page[data-mode="reference"] .demo-after:has(>.demo-gallery){padding-top:112px;padding-bottom:176px}
.demo-page[data-mode="reference"] .demo-after>.demo-gallery{margin-top:64px}
@media(max-width:600px){
 .demo-page[data-mode="reference"] .demo-after:has(>.demo-gallery){padding-top:72px;padding-bottom:112px}
 .demo-page[data-mode="reference"] .demo-after>.demo-gallery{margin-top:40px}
 .demo-page[data-mode="reference"] .demo-after .demo-after-title{font-size:32px}
 .demo-page[data-mode="reference"] .demo-after .demo-after-title+.hp-hero-body{font-size:17px}
}
/* Heading + paragraph, one touch of colour (Eugene, 2026-10-03): the site's ice blue, lifted for the dark band,
   on the heading's key words and the caption labels only. Red stays for actions. */
.demo-page[data-mode="reference"] .demo-after{--ice-on-dark:#7cc7df}
.demo-page[data-mode="reference"] .demo-after .demo-after-title{margin:0;max-width:22ch;font-size:clamp(34px,3.6vw,56px);font-weight:500;line-height:1.08;letter-spacing:-.035em;color:#fff}
.demo-page[data-mode="reference"] .demo-after .demo-after-title em{font-style:normal;color:var(--ice-on-dark)}
.demo-page[data-mode="reference"] .demo-after .demo-after-title+.hp-hero-body{margin-top:22px;max-width:52ch;font-size:clamp(18px,1.5vw,21px);line-height:1.55;letter-spacing:0;color:#adbabd}
.demo-page[data-mode="reference"] .demo-gallery-track figcaption strong{color:var(--ice-on-dark)}
/* Desktop: heading on top, paragraph under it, both across the full frame (Eugene, 2026-10-03). */
@media(min-width:901px){
 .demo-page[data-mode="reference"] .demo-after .demo-after-title,
 .demo-page[data-mode="reference"] .demo-after .demo-after-title+.hp-hero-body{max-width:none}
}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#0b1a1d;font-size:0;line-height:0;cursor:pointer;box-shadow:0 2px 4px #0000001f,0 8px 24px #00000040;transition:transform .15s ease,background-color .15s ease,opacity .15s ease;pointer-events:auto}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn::before{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn[data-holds="-1"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn:hover:not(:disabled){transform:scale(1.06);background:#eef3f3}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn:disabled{opacity:.4;cursor:default;box-shadow:0 2px 4px #0000001f;visibility:visible}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(min-width:601px){.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn{width:52px;height:52px}}
.home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn[disabled]{opacity:.4;cursor:default}
@media(min-width:601px){
 .demo-gallery-controls{position:absolute;inset:0 0 auto;height:calc(clamp(300px,38vw,560px)*.75);margin:0;padding-inline:20px;justify-content:space-between;align-items:center;pointer-events:none}
 .home.demo-page[data-mode="reference"] main>#answers .hp-holds-nav{position:absolute;inset:0 0 8px;display:flex;justify-content:space-between;align-items:center;padding-inline:max(16px,calc((100vw - var(--frame))/4 - 26px));pointer-events:none}
}

/* "Start your project" is the calculator's front door (Eugene, 2026-10-03): its first question as three ways in,
   then the site's email box (assets/lead-capture.css) under a rule. No contact form here. */
.home.demo-page[data-mode="reference"] main>#contact .hp-start{margin:0;padding:32px;background:#fff;border:1px solid #718487;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-q{margin:0 0 16px;font-size:24px;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-options{display:grid;gap:10px}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-options a{position:relative;display:flex;align-items:center;min-height:60px;padding:14px 56px 14px 18px;border:1px solid #bfcccb;border-radius:10px;background:#f9fbfa;color:var(--ink);font-size:17px;font-weight:500;text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-options a::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-options a:hover{border-color:#b7352d;background:#fff}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-options a:focus-visible{outline:3px solid #b7352d;outline-offset:2px}
.home.demo-page[data-mode="reference"] main>#contact .lead-box{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.home.demo-page[data-mode="reference"] main>#contact .lead-box .field{border:1px solid #bfcccb;background:#fff;color:var(--ink)}
@media(max-width:600px){
 .home.demo-page[data-mode="reference"] main>#contact .hp-start{padding:22px}
 .home.demo-page[data-mode="reference"] main>#contact .hp-start-q{font-size:21px}
}

/* Desktop carousels, 1.2 gallery and 1.6 cards (Eugene, 2026-10-03): no full bleed. Each row sits inside the
   frame, three items across, and the arrows sit under the row on the right, never over a picture.
   Phones keep the swipe row (1.2 bleeds to the edge there; arrows hidden). */
@media(min-width:601px){
 .demo-page[data-mode="reference"] .demo-after>.demo-gallery{max-width:1176px;margin-inline:auto}
 .demo-gallery-track figure{flex-basis:calc((100% - 40px)/3)}
 .demo-gallery-controls{position:static;height:auto;inset:auto;margin:20px 0 0;padding:0;justify-content:flex-end;pointer-events:auto}
 .home.demo-page[data-mode="reference"] main>#answers .hp-holds-track{box-sizing:border-box;max-width:calc(var(--frame) + 56px);margin-inline:auto;padding:0 28px 8px;scroll-padding-inline:28px}
 .home.demo-page[data-mode="reference"] main>#answers .hp-hold{flex-basis:calc((100% - 40px)/3)}
 .home.demo-page[data-mode="reference"] main>#answers .hp-holds-nav{position:static;inset:auto;box-sizing:border-box;max-width:calc(var(--frame) + 56px);margin:20px auto 0;padding:0 28px;justify-content:flex-end;gap:10px;pointer-events:auto}
}
/* Wide screens: the arrows move out to the left and right of the contained row, in the margin beside it,
   centred on the pictures (1.2) or the cards (1.6). Narrower desktops keep them under the row. */
@media(min-width:1340px){
 .demo-page[data-mode="reference"] .demo-after>.demo-gallery{container-type:inline-size}
 .demo-gallery-controls{position:absolute;inset:0 -72px auto;height:calc((100cqw - 40px)/3*.75);margin:0;justify-content:space-between;align-items:center;pointer-events:none}
 .demo-gallery-controls button{pointer-events:auto}
 .home.demo-page[data-mode="reference"] main>#answers .hp-holds-nav{position:absolute;top:0;bottom:8px;left:50%;width:calc(var(--frame) + 56px + 144px);max-width:none;margin:0;padding:0;transform:translateX(-50%);justify-content:space-between;align-items:center;pointer-events:none}
 .home.demo-page[data-mode="reference"] main>#answers .hp-holds-btn{pointer-events:auto}
}

/* 1.8 is a dark band (Eugene, 2026-10-03), so the page alternates: chapters light, 1.6 dark, 1.7 light, 1.8 dark.
   Built like 1.6: rounded top over the section above, the start box as a dark card, a rule above the footer. */
.home.demo-page[data-mode="reference"] main>#contact{z-index:8;margin-top:-32px;border-radius:38px 38px 0 0;padding:88px 0 96px;background:var(--dark);background-image:none;color:#fff}
.home.demo-page[data-mode="reference"] main>#contact>.wrap::before{display:none}
.home.demo-page[data-mode="reference"] main>#contact .hp-eyebrow{color:#c2d0d0}
.home.demo-page[data-mode="reference"] main>#contact h2{color:#fff}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-body{color:#c9d5d5}
.home.demo-page[data-mode="reference"] main>#contact .hp-start{background:#0d1d20;border:1px solid #22363a;border-radius:14px;color:#fff}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-q{color:#fff}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-options a{background:transparent;border-color:#2c4246;color:#fff}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-options a:hover{border-color:var(--red,#B7352D);background:rgba(183,53,45,.12)}
.home.demo-page[data-mode="reference"] main>#contact .hp-start-options a:focus-visible{outline-color:#7cc7df}
.home.demo-page[data-mode="reference"] main>#contact .lead-box{border-top-color:#22363a}
.home.demo-page[data-mode="reference"] main>#contact .lead-box .field{border-color:#33494d;background:#071214;color:#fff}
.home.demo-page[data-mode="reference"] main>#contact .lead-box .field::placeholder{color:#8a9a9c}
.home.demo-page[data-mode="reference"] main>#contact :is(.lead-note,.lead-done){color:#c9d5d5}
.home.demo-page[data-mode="reference"] main>#contact .lead-error{color:#f2948a}
.home.demo-page[data-mode="reference"] .foot{border-top:1px solid #1d2f33}
/* One centred column: heading, paragraph, the Build button (1.3 size), then the email box. */
.home.demo-page[data-mode="reference"] main>#contact>.wrap{display:block}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-copy{max-width:920px;margin-inline:auto;text-align:center}
.home.demo-page[data-mode="reference"] main>#contact h2{max-width:none;margin-inline:auto;font-size:clamp(30px,3vw,44px);font-weight:400;line-height:1.12;letter-spacing:-.035em;color:#fff}
.home.demo-page[data-mode="reference"] main>#contact h2 em{font-style:normal;color:#7cc7df}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-body{max-width:none;margin-inline:auto;text-wrap:balance}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-action{display:flex;justify-content:center;margin-top:32px}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-action .btn-primary{min-width:min(100%,320px);min-height:60px;padding-inline:32px;font-size:19px!important;font-weight:700}
.home.demo-page[data-mode="reference"] main>#contact .hp-close-or{margin:48px 0 0;padding-top:32px;border-top:1px solid #22363a;font-size:17px;font-weight:600;color:#c9d5d5}
.home.demo-page[data-mode="reference"] main>#contact .lead-box{max-width:520px;margin:16px auto 0;padding:0;border:0;text-align:left}
@media(max-width:600px){.home.demo-page[data-mode="reference"] main>#contact{padding:56px 0 64px}}