/* SunFlow v2 staging. Tokens mirror design-kit/tokens.json. Dennis, Oct 27 2026. */
@font-face{font-family:"Manrope";src:url(../fonts/manrope-var-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-display-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-display-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* colour: taken from the logo */
  --navy:#0C427B; --teal:#00768A; --teal-text:#006475; --deep:#368C76; --green:#59C47A; --mint:#47C3A3;
  /* neutrals */
  --night:#07182B; --ink:#0B1F35; --slate:#4A5B6E; --slate-2:#9FB0C2; --mist:#E3E9EE; --snow:#F5F7F6; --white:#FFFFFF;
  --line:rgba(11,31,53,.14); --line-dark:rgba(245,247,246,.16);
  /* type */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step--1:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .45vw,1.5rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.25rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.75rem);
  --step-4:clamp(2.6rem,1.8rem + 4.2vw,5.75rem);
  /* space */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:144px;
  --gutter:clamp(20px,5vw,64px); --max:1240px; --measure:62ch;
  --radius-s:4px; --radius-m:10px; --radius-pill:999px;
  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:160ms; --dur-2:320ms; --dur-3:640ms; --dur-4:1200ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--snow);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;font-feature-settings:"lnum" 1}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}
.dark :focus-visible{outline-color:var(--green)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-1);font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.3}
em{font-style:italic}
p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--snow);padding:10px 16px;z-index:100;border-radius:var(--radius-s)}
.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.label{font-family:var(--font-body);font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text);margin:0 0 var(--s-4)}
.dark .label{color:var(--green)}
.lede{font-size:var(--step-1);line-height:1.45;color:var(--slate)}
.dark .lede{color:var(--slate-2)}
.muted{color:var(--slate)} .dark .muted{color:var(--slate-2)}
.small{font-size:1rem}
.dark{background:var(--night);color:var(--snow)}
section{padding-block:clamp(64px,10vw,144px)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(245,247,246,.92);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .brand-logo{display:block;flex:none}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.nav a{text-decoration:none;font-size:1rem;font-weight:500;padding:12px 2px;color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--teal)}
.menu-btn{display:none}
@media (max-width:900px){
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;background:none;border:1px solid var(--line);border-radius:var(--radius-pill);font:inherit;font-weight:600;color:var(--ink);padding:0 16px}
  .nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--snow);border-bottom:1px solid var(--line);padding:8px var(--gutter) 24px;display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 0;min-height:56px;display:flex;align-items:center;border-bottom:1px solid var(--line);font-size:1.0625rem}
  .nav{max-height:calc(100svh - 68px);overflow-y:auto;overscroll-behavior:contain}
  .nav .btn{margin-top:16px;justify-content:center}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--radius-pill);font-weight:600;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--snow)}
.btn-primary:hover{background:var(--navy)}
.dark .btn-primary{background:var(--green);color:var(--night)}
.dark .btn-primary:hover{background:var(--mint)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost:hover{background:rgba(11,31,53,.06)}
.dark .btn-ghost:hover{background:rgba(245,247,246,.08)}
.nav .btn{padding:0 18px;color:var(--snow)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-6)}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(72px,12vw,168px) clamp(56px,8vw,112px);isolation:isolate}
.hero h1{max-width:13ch}
.hero .lede{margin-top:var(--s-5);max-width:46ch}
.hero canvas.snow{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero .ground{position:absolute;left:0;right:0;bottom:0;height:22%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(71,195,163,.10) 60%,rgba(89,196,122,.16));}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.plane{width:100%;height:auto}
.plane .loop{stroke-dasharray:7 93;stroke-dashoffset:100}
html.live .plane .loop{animation:pulse 7s linear infinite}
@keyframes pulse{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
html.live .plane .loop-glow{animation:breathe 4s var(--ease-in-out) infinite alternate}
html.live .plane .plane-flakes circle{animation:settle 5s var(--ease-in-out) infinite alternate}
.plane .plane-flakes circle:nth-child(2n){animation-delay:-2.5s}
@keyframes breathe{from{stroke-opacity:.08}to{stroke-opacity:.26}}
@keyframes settle{from{opacity:.9}to{opacity:0}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.plane{max-height:240px;margin-top:8px}}
.page-hero{padding-block:clamp(56px,9vw,128px) clamp(40px,6vw,80px)}
.page-hero h1{font-size:var(--step-3);max-width:18ch}
.page-hero .lede{margin-top:var(--s-5)}

/* melt: sticky scroll story */
.melt{padding:0;position:relative}
.melt-track{height:340vh;position:relative}
.melt-stage{position:sticky;top:68px;height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,5vw,72px)}
.melt-steps{list-style:none;margin:0;padding:0;position:relative;min-height:15em;display:grid;align-content:start}
/* the outgoing step clears in 120 ms before the incoming one fades in, so two steps never show at once */
.melt-steps li{grid-area:1/1;position:relative;opacity:0;transform:translateY(12px);transition:opacity 120ms ease,transform 120ms ease}
.melt-steps li.on{opacity:1;transform:none;transition:opacity var(--dur-2) ease 130ms,transform var(--dur-3) var(--ease-out) 130ms}
.melt-steps .n{font-family:var(--font-display);font-size:var(--step-2);color:var(--green)}
.melt-steps h3{font-family:var(--font-display);font-weight:400;font-size:var(--step-2);line-height:1.1;margin:.2em 0 .5em}
.melt-progress{display:flex;gap:6px;margin-top:var(--s-5)}
.melt-progress span{height:3px;flex:1;background:var(--line-dark);border-radius:2px;overflow:hidden}
.melt-progress span i{display:block;height:100%;width:100%;background:var(--green);transform-origin:left;transform:scaleX(var(--f,0))}
.cut{width:100%;height:auto;max-height:72vh}
.cut .snowcap{transform-origin:50% 100%;transform:scaleY(calc(1 - var(--melt,0)));transition:transform 120ms linear}
.cut .flow{stroke-dasharray:14 22;animation:flow 1.6s linear infinite;animation-play-state:var(--flow-state,paused);opacity:calc(.25 + var(--heat,0)*.75)}
.cut .glow{opacity:var(--heat,0)}
.cut .vapour{opacity:calc(var(--melt,0) * (1 - var(--dry,0)))}
.cut .sensor-ping{opacity:var(--sense,0)}
.cut .flakes{opacity:calc(1 - var(--melt,0))}
.cut text{font-family:var(--font-body)}
@media (max-width:600px){.cut text{display:none}}
@keyframes flow{to{stroke-dashoffset:-72}}
@media (max-width:900px){
  .melt-steps h3{font-size:var(--step-1)}
}
/* phones and small tablets (Oct 27 mobile pass): tap-through, nothing pinned. Drawing first, the step bar under it
   (stepper.js), then the step text. The steps stack in one grid cell, so the block keeps the height of the longest
   step and nothing below it jumps when the step changes. Space for the bar is reserved before the script runs. */
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .melt-track{height:auto}
  .melt-stage{position:static;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:56px 64px}
  .melt-stage>div{display:contents}
  .melt-stage #how-h{order:0;margin-bottom:var(--s-4)}
  .melt-stage .cut{order:1;max-height:none;width:100%;touch-action:pan-y}
  .melt-stage .stepper{order:2}
  .melt-track:not(.has-stepper) .cut{margin-bottom:96px}
  .melt-steps{order:3;min-height:0}
  .melt-steps p{font-size:1rem}
}

/* generic layout */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.stack>*+*{margin-top:var(--s-5)}
.facts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.facts li{padding:var(--s-5) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-5)}
.dark .facts,.dark .facts li{border-color:var(--line-dark)}
.facts b{font-weight:600}
@media (max-width:640px){.facts li{grid-template-columns:1fr;gap:4px}}
.big-figure{font-family:var(--font-display);font-size:var(--step-3);line-height:1;letter-spacing:-.02em}
.note{font-size:1rem;color:var(--slate);border-top:1px solid var(--line);padding-top:var(--s-3);margin-top:var(--s-5)}
.dark .note{color:var(--slate-2);border-color:var(--line-dark)}
.placeholder{border:1px dashed var(--slate);border-radius:var(--radius-m);padding:var(--s-6);color:var(--slate);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(11,31,53,.035) 14px 28px)}
.placeholder strong{display:block;color:var(--ink);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.tbd{display:inline-block;font-size:max(.8em,1rem);font-weight:600;color:var(--ink);background:#FFF3C4;border:1px dashed #8A6D00;border-radius:4px;padding:0 6px;white-space:nowrap}

/* steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.steps li{counter-increment:s;padding:var(--s-6) var(--s-5) var(--s-6) 0;border-right:1px solid var(--line)}
.steps li:last-child{border-right:0}
.steps li::before{content:"0" counter(s);display:block;font-family:var(--font-display);font-size:var(--step-2);color:var(--teal-text);margin-bottom:var(--s-4)}
.steps li+li{padding-left:var(--s-5)}
@media (max-width:900px){.steps{grid-template-columns:1fr}.steps li{border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}}

/* compare table */
.compare{width:100%;border-collapse:collapse;font-size:1rem}
.compare th,.compare td{text-align:left;vertical-align:top;padding:18px 16px 18px 0;border-bottom:1px solid var(--line)}
.compare thead th{font-family:var(--font-display);font-weight:400;font-size:var(--step-1);border-bottom:2px solid var(--ink)}
.compare thead th.ours{color:var(--teal-text)}
.compare tbody th{font-weight:600;width:22%}
.compare td.ours{background:rgba(71,195,163,.08);padding-left:12px}
.compare thead th.ours{padding-left:12px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  .compare thead{display:none}
  .compare caption{display:block;width:100%}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
  .compare tr{border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:8px}
  .compare tbody th{border:0;padding:16px 0 4px;width:100%;font-size:1.05rem}
  .compare td{border:0;padding:6px 0 6px 0;display:grid;grid-template-columns:8.5em 1fr;gap:8px}
  .compare td.ours{padding-left:8px}
  .compare td::before{content:attr(data-col);font-weight:600;font-size:1rem;color:var(--slate)}
}

/* exploded cutaway (technology page) */
.layers{width:100%;height:auto}
.layers .ly{transition:transform var(--dur-4) var(--ease-out)}
.layers.open .ly{transform:translateY(var(--dy))}
.layers .lbl{opacity:0;transition:opacity var(--dur-3) var(--dur-2)}
.layers.open .lbl{opacity:1}
/* material textures (build/textures.py); the PEX layer warms up once the stack has opened */
.layers text{font-family:var(--font-body)}
.layers .heat-glow,.layers .heat-wash{opacity:0;transition:opacity var(--dur-4) var(--ease-out) var(--dur-4)}
.layers.open .heat-glow{opacity:1}
.layers.open .heat-wash{opacity:.22}
.layers-key{display:none}
@media (max-width:600px){.layers .mat{display:none}.layers .lbl{display:none}
  .layers{width:166.7%;max-width:none}
  .layers-key{display:block;margin:12px 0 0;padding:0 8px 4px 1.6em;color:var(--ink);font-size:1rem;line-height:1.5}
  .layers-key li{padding:2px 0}.layers-key li.pex{font-weight:600}}
.cut .warm{opacity:var(--heat,0)}

/* estimator */
.est{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--white);overflow:hidden}
.est form{padding:clamp(20px,4vw,40px)}
.est .out{padding:clamp(20px,4vw,40px);background:var(--night);color:var(--snow)}
@media (max-width:900px){.est{grid-template-columns:1fr}}
fieldset{border:0;margin:0 0 var(--s-6);padding:0}
legend,.field>label{display:block;font-weight:600;margin-bottom:var(--s-2)}
.hint{font-size:1rem;color:var(--slate);margin:2px 0 8px}
.dims{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.dims span{padding-bottom:14px;color:var(--slate)}
input[type=number],input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font:inherit;font-size:max(1rem,16px);color:var(--ink);background:var(--white);border:1px solid #8796A6;border-radius:var(--radius-s);min-height:48px;padding:10px 12px}
/* iOS Safari draws its own short select and ignores min-height: take the native look off and draw the arrow */
select{-webkit-appearance:none;appearance:none;height:48px;padding-right:44px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B1F35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center}
textarea{min-height:120px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--teal);outline-offset:1px}
.unit{font-size:1rem;color:var(--slate)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid #8796A6;border-radius:var(--radius-pill);font-size:1rem;transition:background var(--dur-1),color var(--dur-1)}
.chips input:checked+span{background:var(--ink);color:var(--snow);border-color:var(--ink)}
.chips input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.out .area{font-family:var(--font-display);font-size:var(--step-3);line-height:1}
.out .range{font-family:var(--font-display);font-size:var(--step-2);line-height:1.1;margin:.2em 0 .4em;color:var(--green)}
.out dl{margin:var(--s-5) 0 0;display:grid;gap:14px}
.out dt{font-size:1rem;font-weight:600;color:var(--slate-2)}
.out .btn-primary{background:var(--green);color:var(--night)}
.out .btn-primary:hover{background:var(--mint)}
.out dd{margin:2px 0 0}
.out .note{color:var(--slate-2)}
.out .label{color:var(--green)}
.out .tbd{color:var(--night)}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:600;font-size:var(--step-1);position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform var(--dur-2) var(--ease-out)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 24px}

/* form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.form-grid .full{grid-column:1/-1}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.req{color:var(--teal-text);font-weight:600}
.form-status{margin-top:16px;font-weight:600}

/* finishes */
.finishes{columns:2;column-gap:48px;list-style:none;padding:0;margin:0}
.finishes li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:var(--step-1)}
@media (max-width:640px){.finishes{columns:1}}

/* cta band */
.cta-band h2{max-width:16ch}

/* footer */
.site-footer{background:var(--night);color:var(--slate-2);padding-block:64px 40px;font-size:1rem}
.site-footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.site-footer a{color:var(--snow)}
.site-footer h2{font-family:var(--font-body);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--snow);margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.site-footer ul a{display:inline-flex;align-items:center;min-height:48px;min-width:48px;padding:4px 0;overflow-wrap:anywhere}
.site-footer .legal{grid-column:1/-1;border-top:1px solid var(--line-dark);padding-top:20px;font-size:1rem}
@media (max-width:760px){.site-footer .wrap{grid-template-columns:1fr}}

/* reveal on scroll (JS adds .rv only when motion is allowed) */
.rv{opacity:0;transform:translateY(18px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* splash rev 2: the full lockup fades in centred, holds, then floats into the navbar logo (site.js, FLIP).
   Same file as the navbar logo. Navbar logo is visibility:hidden while it flies, so its space stays reserved. */
#splash{display:none}
html.splash #splash{display:grid;place-items:center;position:absolute;left:0;top:0;width:100%;height:100vh;z-index:2;animation:autohide 1ms 2.6s forwards}
#splash .splash-bg{position:absolute;inset:0;background:var(--snow)}
#splash .splash-logo{position:relative;width:min(72vw,460px);height:auto;opacity:0;animation:logo-in 450ms var(--ease-out) forwards}
/* once the script has taken over, the CSS fallback timers are cancelled so they can never cut in mid-flight */
html.splash #splash.fly{pointer-events:none;animation:none}
html.splash.sf-fly .brand-logo{animation:none}
#splash.fly .splash-logo{position:absolute;margin:0;transform-origin:0 0;opacity:1;animation:none}
html.splash .brand-logo{visibility:hidden;animation:brand-show 1ms 2.6s forwards}
#splash .skip-splash{position:absolute;right:20px;bottom:20px;background:none;border:1px solid var(--slate);color:var(--ink);border-radius:var(--radius-pill);min-height:44px;padding:0 18px;font:inherit;font-size:.9rem;cursor:pointer}
#splash.fly .skip-splash{visibility:hidden}
@keyframes logo-in{to{opacity:1}}
@keyframes autohide{to{opacity:0;visibility:hidden}}
@keyframes brand-show{to{visibility:visible}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .melt-track{height:auto}
  .melt-stage{position:static;height:auto;padding-block:64px}
  .melt-steps{min-height:0}
  .melt-steps li{grid-area:auto;position:static;opacity:1;transform:none;margin-bottom:24px}
  .melt-progress{display:none}
  .cut .flow{animation:none}
  #splash{display:none}
}

/* project-photo strip (home, technology, installation): pictures from the gallery set. Phones swipe a row of
   photos with the next one peeking in; from 700 px it is a grid. Oct 27 mobile pass. */
.ph-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s-4) var(--s-6);margin-bottom:var(--s-5)}
.ph-title{font-family:var(--font-display);font-weight:400;font-size:var(--step-2);line-height:1.1}
.ph-sub{margin:var(--s-2) 0 0}
.ph-row{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;overscroll-behavior-x:contain}
.ph-row::-webkit-scrollbar{display:none}
.ph-item{scroll-snap-align:start;min-width:0}
.ph-link{display:block;border-radius:var(--radius-m);overflow:hidden;background:var(--mist)}
.ph-link img{width:100%;height:auto;aspect-ratio:800/537;object-fit:cover}
.ph-cap{font-size:1rem;line-height:1.5;color:var(--slate);margin:var(--s-2) 0 0}
.ph-dark .ph-cap{color:var(--slate-2)}
.ph-dark .ph-link{background:var(--ink)}
@media (min-width:700px){.ph-row{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));overflow:visible}}
/* touch screens keep :hover after a tap; never let that make a live button look disabled */
@media (hover:none){.btn-primary:hover{background:var(--ink)}.dark .btn-primary:hover{background:var(--green)}.btn-ghost:hover,.dark .btn-ghost:hover{background:transparent}.g-link:hover img{transform:none}}

/* go-live pass, Nov 4 2026 */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-msg{border-radius:var(--radius-s);padding:16px 20px;font-size:1rem;line-height:1.5}
.form-msg p+p{margin-top:8px}
.form-err{background:#FDECEA;color:#5F1410;border:2px solid #B3261E}
.form-err a{color:#5F1410;text-decoration:underline}
.form-ok{background:#E8F4EC;color:#0E3B1F;border:2px solid #1E7A3C;margin-top:8px}
.form-ok h2{font-size:1.5rem;margin:0 0 8px;color:#0E3B1F}
.form-ok a:not(.btn){color:#0E3B1F;text-decoration:underline}
.form-ok .btn{margin-top:8px}
button[aria-busy=true]{opacity:.7;cursor:progress}
.site-footer .legal a{color:inherit;text-decoration:underline}
.prose h2{margin-top:32px}
.prose ul{padding-left:1.25em;list-style:disc}.prose li{margin:6px 0}.prose p{margin:12px 0;max-width:68ch}
[hidden]{display:none!important}
/* Karen pass 1 fixes */
button,input,select,textarea{font:inherit}
.btn{font-family:inherit}
a[href^="tel:"]{white-space:nowrap}
.form-err{margin-top:24px}
.field-err{color:#5F1410;font-size:1rem;margin-top:6px}
.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true]{border:2px solid #B3261E;background:#FDECEA}
.form-status.is-err{color:#5F1410}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);line-height:1.2;margin:32px 0 12px}
.site-footer .legal{max-width:none}
#to-quote{justify-content:center;text-align:center}
@media (max-width:767px){.lb-cap{padding-left:20px!important;padding-right:20px!important}}