/* magnusroof.com · Samara canvas + Ada nav/mega menu + Samara layered parallax hero. See website/DESIGN.md.
   Ported from the live v2 styles.css (2026-09-03), unchanged above the "generator additions" line except the
   self-hosted font and the footer grid (any number of link columns). */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 500;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --parchment:#fdfdf7; --paper-2:#f7f7f0; --sand:#f5f2de; --driftwood:#e7e3e1; --ash:#d3d3d3;
  --stone:#999999; --graphite:#666666; --ink:#000000; --white:#ffffff;
  --plume:#d0702f; --plume-deep:#b85f24; --helmet:#303030;
  --inkstone:#0a0b0c;                     /* Ada nav surface */
  --font:"Plus Jakarta Sans","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px; --r-lg:18px; --r-pill:24px;
  --sh-subtle:rgba(0,0,0,.12) 0 .5px 2px 0; --sh-md:rgba(0,0,0,.08) 0 2px 10px 0;
  --wrap:1280px; --gutter:clamp(20px,4vw,48px);
  --sec:clamp(80px,9vw,120px);
  --nav-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--parchment);color:var(--ink);font-family:var(--font);font-weight:400;font-size:18px;line-height:1.33;letter-spacing:-.18px;font-feature-settings:"lnum","tnum";-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure{margin:0}
:focus-visible{outline:2px solid var(--plume);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.eyebrow{font-size:14px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite);font-weight:500;margin-bottom:28px}
.h-lg{font-size:clamp(40px,5vw,60px);line-height:.98;letter-spacing:-.041em;font-weight:200;color:var(--ink)}
.h{font-size:clamp(34px,4vw,48px);line-height:1.02;letter-spacing:-.027em;font-weight:200;color:var(--ink)}
.h-sm{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.014em;font-weight:300;color:var(--ink)}
.sub{font-size:clamp(22px,2.4vw,30px);line-height:1.14;letter-spacing:-.03em;font-weight:300;color:var(--ink)}
.lead{font-size:clamp(19px,2vw,23px);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.cap{font-size:14px;line-height:1.5;letter-spacing:-.04em;color:var(--graphite)}

/* Samara buttons: orange is CTA-only, 12px radius on the page */
.btn{display:inline-flex;align-items:center;gap:8px;padding-block:14px;padding-inline:20px;border-radius:var(--r);font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1;border:0;cursor:pointer;font-family:inherit;transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease}
.btn-primary{background:var(--plume);color:var(--white)}
.btn-primary:hover{background:var(--plume-deep)}
.btn-primary:active{transform:translateY(1px)}
.btn-pill{background:var(--white);color:var(--ink);border-radius:var(--r-pill);box-shadow:var(--sh-subtle);padding-block:12px;padding-inline:18px}
.btn-pill:hover{box-shadow:var(--sh-md)}

/* ====== Ada-style floating glass nav (this component keeps Ada's rules: pills 9999, cards 8, hairlines, no shadows on cards) ====== */
.nav-wrap{position:fixed;top:14px;left:0;right:0;z-index:60;padding-inline:14px;pointer-events:none}
.navbar{pointer-events:auto;max-width:1412px;margin-inline:auto;background:rgba(10,11,12,.74);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.09);border-radius:32px;color:var(--white);box-shadow:0 18px 50px rgba(0,0,0,.28)}
.nav-row{display:flex;align-items:center;gap:8px;height:var(--nav-h);padding-inline:14px 12px}
.brand{display:flex;align-items:center;margin-right:18px;padding-inline:6px}
.brand img{height:44px;width:auto}
.menu{flex:1}
.menu-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.menu-btn,.menu-link{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:rgba(255,255,255,.88);font:inherit;font-size:15px;line-height:1;padding-block:10px;padding-inline:12px;border-radius:9999px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.menu-btn:hover,.menu-link:hover,.has-mega.open .menu-btn{background:rgba(255,255,255,.08);color:var(--white)}
.chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease;opacity:.8}
.has-mega.open .chev{transform:rotate(180deg)}
.has-mega{position:relative}
.mega{position:absolute;top:100%;left:-8px;padding-top:14px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top left;transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s}
.has-mega.open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .18s ease}
.mega-panel{display:flex;gap:8px;padding:12px;background:rgba(14,15,16,.9);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);border:1px solid rgba(255,255,255,.09);border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.4);width:max-content;max-width:min(92vw,780px)}
.mega-cards{display:flex;flex-direction:column;gap:8px;width:400px}
.mega-card{display:flex;align-items:center;gap:16px;padding:12px;border-radius:8px;background:rgba(255,255,255,.05);color:var(--white);transition:background-color .15s ease}
.mega-card:hover{background:rgba(255,255,255,.1)}
.mega-icon{display:grid;place-items:center;width:64px;height:64px;flex:0 0 64px;border-radius:8px;background:rgba(255,255,255,.05)}
.mega-icon svg,.mega-mini svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mega-text{display:flex;flex-direction:column;gap:4px;padding-right:8px}
.mega-title{font-size:18px;line-height:1.15;color:var(--white)}
.mega-desc{font-size:14px;line-height:1.35;color:rgba(255,255,255,.62)}
.mega-side{display:flex;flex-direction:column;gap:2px;padding-block:8px;padding-inline:8px 12px;min-width:228px}
.mega-label{font-size:16px;color:var(--white);padding-block:6px 8px;padding-inline:8px;margin-top:6px}
.mega-label:first-child{margin-top:0}
.mega-row{display:flex;align-items:center;gap:12px;padding-block:7px;padding-inline:8px;border-radius:8px;font-size:15px;color:rgba(255,255,255,.88);transition:background-color .15s ease}
.mega-row:hover{background:rgba(255,255,255,.08);color:var(--white)}
.mega-mini{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:8px;background:rgba(255,255,255,.05)}
.mega-mini svg{width:16px;height:16px}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;padding-block:10px;padding-inline:18px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.pill-ghost{border:1px solid rgba(255,255,255,.16);color:var(--white);background:transparent}
.pill-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.pill-primary{background:var(--plume);color:var(--white);border:1px solid transparent}
.pill-primary:hover{background:var(--plume-deep)}
.pill-sm{padding-block:8px;padding-inline:14px;font-size:13px}
.burger{display:none;background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--white);border-radius:9999px;padding-block:9px;padding-inline:14px;font:inherit;font-size:14px;cursor:pointer}
.nav-strip{display:flex;align-items:center;gap:20px;height:44px;margin-inline:10px;padding-inline:12px;border-top:1px solid rgba(255,255,255,.08);overflow:hidden;transition:height .22s ease,opacity .18s ease}
.strip-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.strip-text{flex:1;text-align:center;font-size:14px;color:rgba(255,255,255,.9)}
.navbar.compact .nav-strip{height:0;opacity:0;border-top-color:transparent}
.mobile-menu{display:none}

/* ====== Samara layered parallax hero ====== */
.hero{position:relative;height:100vh;height:100svh;min-height:720px;max-height:1040px;overflow:hidden;background:#cfd7df;isolation:isolate}
.hero-stage{position:absolute;inset:0}
.layer{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.layer-sky{object-fit:cover;object-position:center top;z-index:1}
.layer-birds{z-index:2;height:64%;top:0}
.layer-title{z-index:3;top:9%;height:44%;display:grid;place-items:center}
.hero-word{font-size:clamp(140px,17.5vw,252px);line-height:.85;letter-spacing:-.05em;font-weight:200;color:var(--white);text-shadow:0 2px 30px rgba(0,0,0,.14)}
.layer-front{top:auto;bottom:0;height:74%;object-fit:cover;object-position:center top;z-index:4;pointer-events:none}
.hero-caps{position:absolute;left:0;right:0;top:17%;z-index:5;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:32px}
.hero-cap{color:var(--white);text-shadow:0 1px 16px rgba(0,0,0,.35)}
.hero-cap.left{justify-self:start;max-width:14ch}
.hero-cap.left .sub{color:var(--white)}
.hero-cap.right{justify-self:end;max-width:26ch;text-align:right}
.hero-cap.right .lead{color:var(--white);margin-bottom:18px}

/* statement + jobsite photo */
.statement-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.statement .h-lg{margin-bottom:32px}
.statement .lead{max-width:60ch;color:var(--ink)}
.statement-photo img{border-radius:var(--r);box-shadow:var(--sh-subtle);aspect-ratio:16/11;object-fit:cover;width:100%;height:auto}

/* Ada image feature cards (borrowed component: full-bleed image, bottom gradient, circular arrow, 8px radius) */
.segs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px}
.seg{position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--driftwood);color:var(--white)}
.seg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.seg:hover img{transform:scale(1.03)}
.seg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,12,0) 45%,rgba(10,11,12,.62) 100%)}
.seg-text{position:absolute;left:28px;right:96px;bottom:26px;z-index:2;display:flex;flex-direction:column;gap:8px}
.seg-title{font-size:32px;line-height:1.1;letter-spacing:-.02em;color:var(--white)}
.seg-desc{font-size:15px;line-height:1.4;color:rgba(255,255,255,.86);max-width:46ch}
.seg-arrow{position:absolute;right:24px;bottom:24px;z-index:2;display:grid;place-items:center;width:48px;height:48px;border-radius:9999px;background:var(--inkstone);color:var(--white);font-size:18px;transition:transform .2s ease}
.seg:hover .seg-arrow{transform:translateX(3px)}

/* systems: rows with thin rules, crest emblem */
.systems{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.systems-side{position:sticky;top:120px}
.systems-side .h{margin-bottom:28px;max-width:16ch}
.systems-side .crest{width:min(100%,360px);margin-top:40px}
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--ash)}
.rows li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:24px;padding-block:26px;border-bottom:1px solid var(--ash)}
.rows .name{font-size:clamp(22px,2.2vw,28px);font-weight:300;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.rows .desc{color:var(--graphite);font-size:17px;line-height:1.45;letter-spacing:-.01em}

/* how we bid */
.bid-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end}
.bid-head .lead{color:var(--graphite);max-width:48ch}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:56px;list-style:none;padding:0}
.step .num{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite);font-weight:500;margin-bottom:22px}
.step .h-sm{margin-bottom:14px;font-size:clamp(24px,2.4vw,30px)}
.step p{color:var(--graphite);font-size:16px;line-height:1.49;letter-spacing:-.012em}

/* projects: Warm Sand tiles (Samara "Warm Sand Card", 18px) */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.tile{display:flex;flex-direction:column;background:var(--sand);border-radius:var(--r-lg);box-shadow:var(--sh-subtle);overflow:hidden;color:var(--ink);transition:box-shadow .15s ease,transform .15s ease}
.tile:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.tile.featured{grid-column:span 2;grid-row:span 2}
.tile.featured .media{aspect-ratio:auto;flex:1;min-height:420px}
.tile .media{aspect-ratio:16/10;background:var(--driftwood);position:relative}
.tile .media img{width:100%;height:100%;object-fit:cover}
.tile .media .flag{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);background:rgba(0,0,0,.6);padding-block:6px;padding-inline:10px;border-radius:6px}
.tile .meta{padding-block:22px 26px;padding-inline:26px}
.tile .meta .name{font-size:clamp(20px,2vw,24px);font-weight:400;letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin-bottom:8px}
.tile .meta .sys{font-size:15px;color:var(--graphite);letter-spacing:-.01em}
.tile .meta .ph{color:var(--stone)}

/* prequalify form */
.pre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:start}
.pre .h-lg{margin-bottom:24px}
.pre .lead{color:var(--graphite);max-width:40ch;margin-bottom:28px}
.pre .phone{font-size:17px;color:var(--ink);line-height:1.5}
.pre .phone a{color:var(--plume);font-weight:500}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:8px;align-content:start}
.field.wide{grid-column:span 2}
.field label{font-size:14px;letter-spacing:-.02em;color:var(--graphite)}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.1);border-radius:var(--r);padding-block:15px;padding-inline:15px;transition:border-color .15s ease,box-shadow .15s ease}
.field input::placeholder,.field textarea::placeholder{color:var(--stone)}
.field input:focus-visible,.field textarea:focus-visible{outline:0;border-color:var(--plume);box-shadow:0 0 0 3px rgba(208,112,47,.18)}
.field textarea{min-height:120px;resize:vertical}
.form .actions{grid-column:span 2;display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:6px}
.form .note{font-size:14px;color:var(--graphite)}

/* footer */
/* (2026-10-19 e) the footer moved to an ink band with a roofline edge: see "footer: ink band" near the end */
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:48px;align-items:start}

/* responsive */
@media (max-width:1180px){
  .nav-actions .pill-ghost{display:none}
}
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .systems{grid-template-columns:1fr;gap:40px}
  .systems-side{position:static}
  .systems-side .crest{width:200px;margin-top:24px}
  .statement-grid{grid-template-columns:1fr;gap:36px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile.featured{grid-column:span 2;grid-row:auto}
  .tile.featured .media{aspect-ratio:16/9;flex:none;min-height:0}
  .pre{grid-template-columns:1fr;gap:40px}
}
@media (max-width:900px){
  .menu{display:none}
  .burger{display:inline-block}
  .nav-actions .pill-primary{display:none}
  .nav-strip{display:none}
  .nav-wrap{top:10px;padding-inline:10px}
  .navbar{border-radius:24px}
  .mobile-menu{display:none;flex-direction:column;gap:4px;padding-block:8px 18px;padding-inline:14px;border-top:1px solid rgba(255,255,255,.08)}
  .mobile-menu:not([hidden]){display:flex}
  .mobile-menu a{padding-block:12px;min-height:44px;padding-inline:10px;border-radius:8px;font-size:17px;color:rgba(255,255,255,.92)}
  .mobile-menu a:hover{background:rgba(255,255,255,.08)}
  .mobile-actions{display:flex;gap:8px;margin-top:10px;padding-inline:4px}
  .mobile-actions a{padding-block:12px;min-height:44px}
  .hero{min-height:680px;max-height:860px}
  .hero-caps{grid-template-columns:1fr;top:13%;gap:14px;text-align:center}
  .hero-cap.left,.hero-cap.right{justify-self:center;max-width:30ch;text-align:center}
  .hero-cap.right .lead{font-size:17px;margin-bottom:14px}
  .hero-word{font-size:clamp(110px,34vw,170px)}
  .layer-title{top:44%;height:22%}
  .layer-front{height:52%}
  .layer-birds{height:50%}
  .segs{grid-template-columns:1fr}
  .seg{aspect-ratio:4/3.2}
  .seg-title{font-size:26px}
  .rows li{grid-template-columns:1fr;gap:8px;padding-block:20px}
  .steps{grid-template-columns:1fr;gap:32px}
  .bid-head{grid-template-columns:1fr;gap:20px}
  .tiles{grid-template-columns:1fr}
  .tile.featured{grid-column:auto;grid-row:auto}
  .tile.featured .media{aspect-ratio:16/10}
  .form{grid-template-columns:1fr}
  .field.wide,.form .actions{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
  .layer{transform:none!important}
}

/* ====== generator additions (2026-10-18). Ledger rows: DESIGN.md "Inner pages (generator, 2026-10-18)" ====== */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:var(--r);font-size:15px}
.skip:focus{top:12px}
/* JavaScript off: hover or Tab into a menu opens its panel; the phone menu is always shown (media block below) */
.no-js .has-mega:hover .mega,.no-js .has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .18s ease}

/* preview build only */
.preview-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff3a6;color:var(--ink);font-size:13px;line-height:1.4;padding:8px 16px;text-align:center;border-top:1px solid #e5cf4a}
.is-preview{padding-bottom:40px}
mark.nc{background:#ffe94d;color:var(--ink);border-radius:4px;padding:1px 6px;font-size:.8em;letter-spacing:0;font-weight:500;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* home: a single project tile spans the row; a tile without a link is not interactive */
.tiles--solo{grid-template-columns:1fr}
.tiles--solo .tile.featured{grid-column:auto;grid-row:auto}
.tiles--solo .tile.featured .media{aspect-ratio:21/9;flex:none;min-height:0}
div.tile:hover{box-shadow:var(--sh-subtle);transform:none}

/* bid form: honeypot, choice chips, hints and errors (lead-form.js markup contract) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chips-field{border:0;margin:0;padding:0;min-width:0}
.chips-field legend{font-size:14px;letter-spacing:-.02em;color:var(--graphite);padding:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;border-radius:var(--r-pill);border:1px solid rgba(0,0,0,.14);background:rgba(0,0,0,.03);font-size:15px;color:var(--ink);transition:background-color .15s ease,border-color .15s ease}
.chip input:checked+span{background:var(--sand);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--plume);outline-offset:3px}
.field__hint{font-size:13px;color:var(--graphite)}
.field__error{font-size:14px;color:#a3360f}
.lead__static-error{grid-column:1 / -1;font-size:15px;color:#a3360f}
.lead__status{grid-column:1 / -1;font-size:15px;color:var(--graphite)}
.lead__status:empty{display:none}
[aria-invalid="true"]{border-color:#a3360f!important}

/* inner pages: section rhythm 96 to 120px */
.sec-inner{padding-block:clamp(96px,9vw,120px)}
.sec-inner+.sec-inner{padding-top:0}

/* page_hero: Samara's black bar carried down as a short band; optional photo under Ada's 62% ink gradient */
.phero{position:relative;isolation:isolate;background:var(--ink);color:var(--white);padding-block:clamp(168px,16vw,208px) clamp(64px,7vw,96px);overflow:hidden}
.phero--photo{min-height:min(62vh,560px);display:flex;align-items:flex-end}
.phero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.phero-video.is-playing{opacity:1}
@media (max-width:899px),(prefers-reduced-motion:reduce){.phero-video{display:none}}
.phero--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,12,.62) 0%,rgba(10,11,12,.62) 40%,rgba(10,11,12,.78) 100%)}
.phero-inner{width:100%}
.phero .eyebrow{color:rgba(255,255,255,.72);margin-bottom:20px}
.phero .h-lg{color:var(--white);max-width:18ch}
.phero-lede{color:rgba(255,255,255,.86);max-width:52ch;margin-top:24px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0;font-size:14px;color:rgba(255,255,255,.72)}
.crumbs li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.4)}
.crumbs a{color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.crumbs a:hover{color:var(--white)}
.phero--photo .eyebrow,.phero--photo .crumbs,.phero--photo .crumbs a{color:rgba(255,255,255,.92)}

/* prose */
.prose-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.prose-head .h{max-width:16ch}
.prose{max-width:68ch}
.prose p,.prose ul,.prose ol{margin:0 0 20px;color:var(--ink);font-size:18px;line-height:1.5;letter-spacing:-.18px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:8px}
.prose h2{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.014em;font-weight:300;margin:40px 0 16px}
.prose h3{font-size:clamp(20px,2vw,23px);line-height:1.25;letter-spacing:-.02em;font-weight:400;margin:28px 0 12px}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--plume);text-decoration-thickness:2px;text-underline-offset:4px}
.prose a:hover{color:var(--plume-deep)}

/* system_rows: the homepage rows with an anchor per system and spec chips */
.sysrows{margin:48px 0 0;padding:0;list-style:none;border-top:1px solid var(--ash)}
.sysrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:24px;padding-block:32px;border-bottom:1px solid var(--ash);scroll-margin-top:120px}
.sysrow .name{font-size:clamp(24px,2.6vw,32px);font-weight:300;letter-spacing:-.025em;line-height:1.1}
.sysrow .desc{color:var(--ink);font-size:18px;line-height:1.45;letter-spacing:-.01em}
.specs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.specs li{font-size:14px;color:var(--graphite);border:1px solid var(--ash);border-radius:var(--r-pill);padding:6px 12px}

/* project_card: not interactive, so no Warm Sand tile */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px;margin-top:48px}
.pcard{scroll-margin-top:120px}
.pcard-media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--driftwood);aspect-ratio:16/10}
.pcard-media img{width:100%;height:100%;object-fit:cover}
.pcard-media .flag,.statement-photo .flag{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);background:rgba(0,0,0,.6);padding:6px 10px;border-radius:6px}
.pcard-name{font-size:clamp(22px,2.2vw,28px);font-weight:300;letter-spacing:-.025em;line-height:1.15;margin:24px 0 12px}
.facts,.fact-table{margin:0;border-top:1px solid var(--ash)}
.facts div,.fact-table div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:16px;padding-block:12px;border-bottom:1px solid var(--ash)}
.facts dt,.fact-table dt{color:var(--graphite);font-size:15px}
.facts dd,.fact-table dd{margin:0;font-size:16px;color:var(--ink)}

/* people_grid */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;margin:48px 0 0;padding:0}
.person{border-top:1px solid var(--ash);padding-top:20px}
.person img{border-radius:var(--r);aspect-ratio:1;object-fit:cover;margin-bottom:20px}
.person-name{font-size:clamp(20px,2vw,24px);font-weight:400;letter-spacing:-.02em}
.person-role{font-size:15px;color:var(--graphite);margin-top:6px}

/* fact_table */
.fact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.fact-table div{padding-block:20px}
.fact-table dd{font-size:18px}

@media (max-width:1024px){
  .prose-grid,.fact-grid{grid-template-columns:1fr;gap:32px}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .no-js .mobile-menu{display:flex}
  .tiles--solo .tile.featured .media{aspect-ratio:16/10}
  .sysrow{grid-template-columns:1fr;gap:10px;padding-block:24px}
  .pcards{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .facts div,.fact-table div{grid-template-columns:1fr;gap:4px}
  .phero{padding-top:128px}
}

/* ---- inner page additions (2026-10-19): faq, link_cards, cta_band. Ledger rows in DESIGN.md ---- */
.faq{border-top:1px solid var(--ash)}
.faq-item{border-bottom:1px solid var(--ash)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:22px;cursor:pointer;list-style:none;font-size:clamp(19px,2vw,23px);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--plume);outline-offset:4px;border-radius:4px}
.faq-mark{position:relative;flex:none;width:18px;height:18px}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.5px;background:var(--ink);transition:transform .2s ease}
.faq-mark::after{transform:rotate(90deg)}
.faq-item[open] .faq-mark::after{transform:rotate(0)}
.faq-a{padding-bottom:20px}
.faq-a p:last-child{margin-bottom:0}
.lcards{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lcard{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;min-height:168px;padding:26px 26px 72px;background:var(--sand);border-radius:var(--r-lg);box-shadow:var(--sh-subtle);color:var(--ink);transition:box-shadow .15s ease,transform .15s ease}
.lcard:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.lcard:focus-visible{outline:2px solid var(--plume);outline-offset:3px}
.lcard-title{font-size:clamp(20px,2vw,24px);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.lcard-desc{font-size:15px;line-height:1.45;color:var(--graphite)}
.lcard-arrow{position:absolute;left:26px;bottom:24px;color:var(--plume);font-size:18px;transition:transform .2s ease}
.lcard:hover .lcard-arrow{transform:translateX(3px)}
.cta-band{border-top:1px solid var(--ash)}
.sec-inner+.cta-band{padding-top:clamp(96px,9vw,120px)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:end}
.cta-grid .h-lg{max-width:16ch}
.cta-side .lead{color:var(--graphite);margin-bottom:28px}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.cta-phone{font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--stone)}
.cta-phone:hover{text-decoration-color:var(--ink)}
.prose .stamp{color:var(--graphite);font-size:15px}
@media (max-width:900px){
  .lcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-grid{grid-template-columns:1fr;gap:32px;align-items:start}
}
@media (max-width:600px){
  .lcards{grid-template-columns:1fr}
  .lcard{min-height:0}
}
.lead__consent{grid-column:1 / -1;font-size:14px;line-height:1.5;color:var(--graphite)}
.lead__consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose h3{font-size:clamp(21px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em;font-weight:400;margin:44px 0 14px;color:var(--ink)}
.prose h3:first-child{margin-top:0}
.prose h2.as-h3{font-size:clamp(21px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em;font-weight:400;margin:44px 0 14px;color:var(--ink)}
.prose h2.as-h3:first-child{margin-top:0}
.prose-grid>.prose:only-child{grid-column:1 / -1;max-width:72ch}
/* image_band, photo_row, link card icons (2026-10-19 b) */
.sec-band{padding-block:clamp(48px,6vw,80px)}
.sec-inner+.sec-band{padding-top:0}
.band{margin:0}
.band-media{position:relative;aspect-ratio:21/9;border-radius:var(--r-lg);overflow:hidden;background:var(--driftwood)}
.band-media img{width:100%;height:100%;object-fit:cover}
.band-media .flag,.prow-media .flag{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);background:rgba(0,0,0,.6);padding:6px 10px;border-radius:6px}
.band figcaption,.prow figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--graphite)}
.prow{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.prow figure{margin:0}
.prow-media{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--driftwood)}
.prow-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.prow li:hover .prow-media img{transform:scale(1.03)}
.lcard-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--parchment);color:var(--ink);margin-bottom:6px}
.lcard-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.prow{grid-template-columns:1fr 1fr}.band-media{aspect-ratio:16/9}}
@media (max-width:600px){.prow{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.prow li:hover .prow-media img{transform:none}}

/* ---- inner page motion + taller photo heroes (DESIGN.md Motion, 2026-10-19 b) ---- */
:root{--ease:cubic-bezier(.4,0,.2,1)}
.phero--photo{min-height:min(80vh,740px)}
html.js-motion .phero-img{animation:phero-settle 1100ms var(--ease) both}
@keyframes phero-settle{from{scale:1.08}to{scale:1}}
html.js-motion .rv{opacity:0;transform:translateY(20px);transition:opacity 550ms var(--ease),transform 550ms var(--ease)}
html.js-motion .rv.is-in{opacity:1;transform:none}
html.js-motion .rv-photo{opacity:0;clip-path:inset(6%);transition:opacity 550ms var(--ease),clip-path 1100ms var(--ease),translate 1100ms var(--ease)}
html.js-motion .rv-photo img{scale:1.06;transition:scale 1100ms var(--ease)}
html.js-motion .rv-photo.is-in{opacity:1;clip-path:inset(0)}
html.js-motion .rv-photo.is-in img{scale:1}
html.js-motion .statement-grid .rv-photo{translate:24px 0}
html.js-motion .statement-grid.flip .rv-photo{translate:-24px 0}
html.js-motion .statement-grid .rv-photo.is-in{translate:0 0}
.statement-photo,.band-media,.prow-media{overflow:hidden}
.statement-photo img,.band-media img{transition:transform 600ms var(--ease)}
.statement-photo:hover img,.band-media:hover img{transform:scale(1.03)}
.statement-grid.flip .statement{order:2}
.statement-grid.flip .statement-photo{order:1}
@media (max-width:1024px){.statement-grid.flip .statement{order:1}.statement-grid.flip .statement-photo{order:2}}
@media (prefers-reduced-motion:reduce){
  .statement-photo:hover img,.band-media:hover img{transform:none}
}
/* highlights: an ink band with icons, the homepage black bar carried mid-page */
.sec-hl{background:var(--ink);color:var(--white);padding-block:clamp(72px,8vw,104px)}
.hl-head .eyebrow{color:rgba(255,255,255,.62)}
.hl-head .h{color:var(--white);max-width:20ch}
.hl{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.hl-item{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.hl-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--white)}
.hl-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hl-title{font-size:21px;line-height:1.2;letter-spacing:-.02em;font-weight:400;color:var(--white)}
.hl-text{font-size:15px;line-height:1.5;color:rgba(255,255,255,.72)}
@media (max-width:900px){.hl{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.hl{grid-template-columns:1fr}}
.sec-band+.sec-inner,.sec-hl+.sec-inner{padding-top:clamp(56px,6vw,80px)}

/* ====== design pass 2 (2026-10-19 c): page-type patterns, motion graphics, preloader. DESIGN.md "Design pass 2" ====== */
:root{--ease-out3:cubic-bezier(.33,1,.68,1);--ease-in:cubic-bezier(.3,0,1,1)}
/* banded sections carry their own padding; the parchment section after a band gets its top padding back */
.band+.sec-inner,.band+.cta-band{padding-top:clamp(96px,9vw,120px)}
.band+.band{margin-top:0}
.statement>.h{margin-bottom:28px}
[data-count]{display:inline-grid}
.cnt,.cnt-ghost{grid-area:1 / 1}
.cnt-ghost{visibility:hidden}
.statement>.eyebrow+.h{margin-bottom:28px}

/* --- FAQ and checklist panels: sand for the interactive FAQ, driftwood for a plain list --- */
.panel{border-radius:var(--r-lg);padding:clamp(28px,4.4vw,64px)}
.panel-sand{background:var(--sand);box-shadow:var(--sh-subtle)}
.panel-drift{background:var(--driftwood)}
.panel-sand .faq,.panel-sand .faq-item{border-color:rgba(0,0,0,.14)}

/* --- assembly (system pages) --- */
.asm{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"head head" "fig keys";gap:32px 56px;background:var(--sand);border-radius:var(--r-lg);padding:clamp(28px,4.4vw,64px);box-shadow:var(--sh-subtle)}
.asm-head{grid-area:head}
.asm-head .h{max-width:18ch}
.asm-figure{grid-area:fig;align-self:center;padding-top:clamp(24px,6vw,96px)}
.asm-svg{display:block;width:100%;height:auto;overflow:visible}
.asm-svg text{font-family:var(--font);font-size:13px;font-weight:500;fill:#000}
.asm-layer{transition:opacity .2s ease}
.asm.has-hi .asm-layer{opacity:.25}
.asm.has-hi .asm-layer.is-hi{opacity:1}
.asm-keys{grid-area:keys;align-self:center;list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.14)}
.asm-key{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:16px;width:100%;padding:16px 8px;border:0;border-bottom:1px solid rgba(0,0,0,.14);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:0;transition:background-color .15s ease,opacity .35s var(--ease)}
.asm-key:hover,.asm-key.is-hi{background:rgba(0,0,0,.04)}
.asm-n{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.4px solid var(--ink);font-size:13px;font-weight:500;background:var(--parchment)}
.asm-name{font-size:19px;line-height:1.2;letter-spacing:-.02em}
.asm-text{margin-top:4px;font-size:15px;line-height:1.45;color:var(--graphite)}
html.js-motion .asm-key:not(.is-set){opacity:.45}

/* --- spec band (system pages) --- */
.sec-spec{background:var(--ink);color:var(--white);padding-block:clamp(88px,9vw,124px)}
.spec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:64px;align-items:start}
.spec-head .eyebrow{color:rgba(255,255,255,.62)}
.spec-head .h{color:var(--white);max-width:12ch}
.spec-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;margin:0}
.spec-cell{position:relative;padding-top:22px}
.spec-cell::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.3);transform-origin:left center}
.spec-cell dt{margin-bottom:12px;font-size:13px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.spec-cell dd{margin:0;font-size:clamp(20px,2.1vw,27px);line-height:1.18;letter-spacing:-.02em;font-weight:300;color:var(--white)}
html.js-motion .spec-cell::before{transform:scaleX(0);transition:transform 550ms var(--ease)}
html.js-motion .spec-cell.is-in::before{transform:none}
html.js-motion .spec-cell dd{opacity:0;transform:translateY(20px);transition:opacity 550ms var(--ease) 80ms,transform 550ms var(--ease) 80ms}
html.js-motion .spec-cell.is-in dd{opacity:1;transform:none}

/* --- overlap (system pages): full-bleed photo, card over its lower edge --- */
.sec-overlap{position:relative}
.ov-media{position:relative;margin:0;height:min(78vh,720px);overflow:hidden;background:var(--driftwood)}
.ov-media img{width:100%;height:calc(100% + 80px);margin-top:-40px;object-fit:cover;will-change:transform}
.ov-wrap{position:relative;z-index:2;display:flex;margin-top:-240px}
.sec-overlap.flip .ov-wrap{justify-content:flex-end}
.ov-card{width:min(100%,660px);background:var(--parchment);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:clamp(28px,4vw,56px)}
.ov-card .h{max-width:16ch;margin-bottom:24px}
.ov-card .prose p:last-child,.ov-card .prose ul:last-child{margin-bottom:0}

/* --- timeline (service pages) --- */
.sec-tl{background:var(--driftwood);padding-block:clamp(88px,9vw,124px)}
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;align-items:start}
.tl-head{position:sticky;top:132px}
.tl-head .eyebrow{color:var(--helmet)}
.tl-head .h{max-width:14ch}
.tl{position:relative;list-style:none;margin:0;padding:0 0 0 72px}
.tl-rail{position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:rgba(0,0,0,.16)}
.tl-fill{position:absolute;inset:0;background:var(--ink);transform-origin:center top}
.tl-step{position:relative;padding-bottom:64px}
.tl-step:last-child{padding-bottom:0}
.tl-node{position:absolute;left:-62px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--driftwood);border:2px solid var(--plume);transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.tl-node::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--plume);transition:transform .35s var(--ease)}
html.js-motion .tl-step:not(.is-on) .tl-node{border-color:rgba(0,0,0,.28)}
html.js-motion .tl-step:not(.is-on) .tl-node::after{transform:scale(0)}
.tl-num{display:block;margin-bottom:10px;font-size:14px;letter-spacing:.22em;font-weight:500;color:var(--helmet)}
.tl-title{margin-bottom:12px;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.02em;font-weight:300}
.tl-text{max-width:46ch;font-size:17px;line-height:1.5;color:var(--helmet)}

/* --- strip (service pages) --- */
.sec-strip{background:var(--ink);color:var(--white);padding-block:clamp(88px,9vw,124px)}
.strip-head .eyebrow{color:rgba(255,255,255,.62)}
.strip-head .h{color:var(--white);max-width:18ch}
.strip{position:relative;margin-top:56px}
.strip-line{position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(255,255,255,.14)}
.strip-line span{position:absolute;inset:0;background:rgba(255,255,255,.6);transform-origin:left center}
.strip-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;margin:0;padding:0}
.strip-item figure{margin:0}
.strip-num{position:relative;display:inline-block;margin-bottom:28px;padding-right:14px;background:var(--ink);font-size:14px;line-height:20px;letter-spacing:.22em;font-weight:500;color:rgba(255,255,255,.86)}
.strip-num::before{content:"";display:inline-block;width:9px;height:9px;margin-right:12px;border-radius:50%;background:var(--white);vertical-align:1px}
.strip-media{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#111}
.strip-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.strip-item:hover .strip-media img{transform:scale(1.03)}
.strip-item:nth-child(2) .strip-media{margin-top:56px}
.strip-item:nth-child(3) .strip-media{margin-top:112px}
.strip figcaption{margin-top:16px;font-size:16px;line-height:1.45;color:rgba(255,255,255,.86)}

/* --- bento (hubs) --- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(220px,21vw,300px);gap:16px;list-style:none;margin:48px 0 0;padding:0}
.bento-cell:first-child{grid-column:span 2;grid-row:span 2}
.bento-cell:nth-child(6):last-child{grid-column:1 / -1}
.bento-cell:nth-child(6):nth-last-child(2),.bento-cell:nth-child(7):last-child{grid-column:span 2}
.bento-tile{position:relative;isolation:isolate;display:block;height:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--helmet);color:var(--white)}
.bento-media{position:absolute;inset:-40px 0;z-index:-2;will-change:transform}
.bento-media img{width:100%;height:100%;object-fit:cover;transition:scale .6s var(--ease)}
.bento-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,12,.05) 0%,rgba(10,11,12,.1) 38%,rgba(10,11,12,.62) 74%,rgba(10,11,12,.82) 100%);transition:background-color .35s var(--ease)}
.bento-text{position:absolute;left:24px;right:84px;bottom:24px;display:flex;flex-direction:column;gap:8px;transition:transform .35s var(--ease)}
.bento-title{font-size:clamp(22px,2vw,30px);line-height:1.08;letter-spacing:-.025em}
.bento-cell:first-child .bento-title{font-size:clamp(28px,3.2vw,44px);font-weight:300}
.bento-desc{max-width:40ch;font-size:15px;line-height:1.4;color:rgba(255,255,255,.9);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .35s var(--ease)}
.bento-arrow{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:44px;height:44px;border-radius:9999px;background:var(--white);color:var(--ink);font-size:17px;transition:transform .35s var(--ease)}
.bento-tile:hover .bento-media img,.bento-tile:focus-visible .bento-media img{scale:1.03}
.bento-tile:hover .bento-desc,.bento-tile:focus-visible .bento-desc{opacity:1;transform:none}
.bento-tile:hover .bento-arrow,.bento-tile:focus-visible .bento-arrow{transform:translateX(3px)}
.bento-tile:focus-visible{outline:2px solid var(--plume);outline-offset:3px}
@media (hover:none){.bento-desc{opacity:1;transform:none}}
html.js-motion .bento-cell.rv{transform:scale(.97)}
html.js-motion .bento-cell.rv.is-in{transform:none}

/* --- index (hubs): typographic rows, photo follows the pointer --- */
.sec-index{position:relative}
.ix{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--ash)}
.ix-row{border-bottom:1px solid var(--ash);scroll-margin-top:120px}
.ix-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr) 48px;gap:32px;align-items:center;padding-block:30px;color:var(--ink)}
.ix-name{font-size:clamp(30px,4vw,54px);line-height:1;letter-spacing:-.04em;font-weight:200;transition:transform .35s var(--ease)}
.ix-uses{display:block;font-size:17px;line-height:1.45;letter-spacing:-.01em;color:var(--graphite)}
.ix-specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ix-specs span{padding:5px 12px;border:1px solid var(--ash);border-radius:var(--r-pill);font-size:13px;color:var(--graphite)}
.ix-arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ash);border-radius:9999px;color:var(--plume);font-size:17px;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .35s var(--ease)}
a.ix-in:hover .ix-name,a.ix-in:focus-visible .ix-name{transform:translateX(12px)}
a.ix-in:hover .ix-arrow,a.ix-in:focus-visible .ix-arrow{background:var(--ink);border-color:var(--ink);color:var(--white)}
a.ix-in:focus-visible{outline:2px solid var(--plume);outline-offset:4px;border-radius:4px}
.ix-float{position:fixed;left:0;top:0;z-index:40;width:300px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;pointer-events:none;opacity:0;box-shadow:0 18px 50px rgba(0,0,0,.22);transition:opacity .25s ease;display:none}
.ix-float img{width:100%;height:100%;object-fit:cover}
.ix-float.is-on{opacity:1}
@media (hover:hover) and (pointer:fine) and (min-width:901px){html.js-motion .ix-float{display:block}}

/* --- route (city pages) --- */
.sec-route{background:var(--ink);color:var(--white);padding-block:clamp(88px,9vw,124px)}
.route-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:56px;align-items:center}
.route-head .eyebrow{color:rgba(255,255,255,.62)}
.route-head .h{color:var(--white);max-width:14ch}
.route-text{max-width:40ch;margin-top:24px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.86)}
.route-legend{display:grid;gap:10px;list-style:none;margin:32px 0 0;padding:0;font-size:14px;color:rgba(255,255,255,.72)}
.route-legend li{display:flex;align-items:center;gap:12px}
.rl-pin{width:12px;height:12px;border-radius:50%;background:var(--white);box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.rl-dot{width:8px;height:8px;margin-inline:2px;border-radius:50%;background:rgba(255,255,255,.6)}
.route-map svg{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);background:#0a0b0c}
.route-lake{fill:rgba(255,255,255,.1)}
.route-lake-label{font-family:var(--font);font-size:12px;letter-spacing:.08em;fill:rgba(255,255,255,.5)}
.route-road-base{fill:none;stroke:rgba(255,255,255,.12);stroke-width:12;stroke-linecap:round}
.route-road{fill:none;stroke:var(--white);stroke-width:3;stroke-linecap:round;stroke-dasharray:1000}
.route-head-dot{fill:var(--white);display:none}
html.js-motion .route-head-dot{display:block}
.route-shield rect{fill:var(--white)}
.route-shield text{font-family:var(--font);font-size:12px;font-weight:500;fill:var(--ink)}
.rt-dot{fill:rgba(255,255,255,.6)}
.rt-pin{fill:var(--white)}
.rt-halo{fill:rgba(255,255,255,.14)}
.is-here .rt-pin{fill:var(--plume)}
.is-here .rt-halo{fill:rgba(208,112,47,.28)}
.rt-label{font-family:var(--font);font-size:14px;font-weight:500;fill:rgba(255,255,255,.62)}
.rt-label.rt-big{font-size:19px;fill:var(--white)}
.route-compass path{fill:rgba(255,255,255,.45)}
.route-compass text{font-family:var(--font);font-size:11px;font-weight:500;fill:rgba(255,255,255,.45)}
html.js-motion .route-town{opacity:.22;transition:opacity .45s var(--ease)}
html.js-motion .route-town.is-on{opacity:1}

/* --- climate chips (city pages) --- */
.chips4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;list-style:none;margin:48px 0 0;padding:0}
.chip4{padding-top:24px;border-top:1px solid var(--ink)}
.chip4-num{display:flex;align-items:flex-start;gap:6px;font-size:clamp(56px,6vw,92px);line-height:.9;letter-spacing:-.045em;font-weight:200}
.chip4-num [data-count]{display:inline-block}
.chip4-unit{margin-top:.3em;font-size:.3em;letter-spacing:0;font-weight:400;color:var(--graphite)}
.chip4-word{font-size:clamp(44px,4.8vw,72px)}
.chip4-text{margin-top:20px;font-size:16px;line-height:1.45}
.chip4-src{margin-top:10px;font-size:13px;letter-spacing:.02em;color:var(--graphite)}

/* --- sticky split (company pages), on an ink band --- */
.sec-sticky{background:var(--ink);color:var(--white);padding-block:clamp(96px,9vw,124px)}
.st-head{margin-bottom:56px}
.st-head .eyebrow{color:rgba(255,255,255,.62)}
.st-head .h{color:var(--white);max-width:18ch}
.st-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:72px;align-items:start}
.st-pin{position:sticky;top:112px}
.st-count{margin-bottom:16px;font-size:14px;letter-spacing:.22em;font-weight:500;color:rgba(255,255,255,.62)}
.st-cur{color:var(--white)}
.st-frame{position:relative;height:min(66vh,580px);border-radius:var(--r-lg);overflow:hidden;background:#111}
.st-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 550ms var(--ease),transform 1100ms var(--ease)}
.st-img.is-on{opacity:1;transform:none}
.st-panels{list-style:none;margin:0;padding:0}
.st-panel{display:flex;flex-direction:column;justify-content:center;min-height:min(66vh,580px);padding-block:40px;border-top:1px solid rgba(255,255,255,.14)}
.st-panel:first-child{border-top:0;justify-content:flex-start;padding-top:44px}
.st-photo{display:none}
.st-num{font-size:14px;letter-spacing:.22em;font-weight:500;color:rgba(255,255,255,.62)}
.st-big{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:clamp(64px,7vw,108px);line-height:.9;letter-spacing:-.045em;font-weight:200;color:var(--white)}
.st-big [data-count]{display:inline-block}
.st-unit{margin-top:.32em;font-size:.3em;letter-spacing:0;font-weight:400;color:rgba(255,255,255,.62)}
.st-title{margin:16px 0 14px;font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.02em;font-weight:300;color:var(--white)}
.st-text{max-width:42ch;font-size:18px;line-height:1.5;color:rgba(255,255,255,.86)}
.st-src{margin-top:14px;font-size:13px;color:rgba(255,255,255,.62)}
html.js-motion .st-panel{opacity:.32;transition:opacity 550ms var(--ease)}
html.js-motion .st-panel.is-on{opacity:1}

/* --- checklist (company pages) --- */
.ck{list-style:none;margin:0;padding:0}
.ck-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:18px;padding-block:20px;border-bottom:1px solid rgba(0,0,0,.12)}
.ck-item:first-child{padding-top:4px}
.ck-item:last-child{border-bottom:0;padding-bottom:0}
.ck-mark{width:28px;height:28px;margin-top:1px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ck-mark path{stroke-width:2;stroke-dasharray:1}
.ck-title{margin-bottom:4px;font-size:19px;line-height:1.25;letter-spacing:-.02em}
.ck-text p{margin:0;font-size:16px;line-height:1.5;color:var(--helmet)}
.ck-text a{text-decoration:underline;text-decoration-color:var(--plume);text-decoration-thickness:2px;text-underline-offset:4px}
.ck-after{margin-top:28px}
.ck-after p{color:var(--helmet)}
.panel-drift .eyebrow{color:var(--helmet)}
html.js-motion .ck-mark circle{opacity:0;transition:opacity 350ms var(--ease)}
html.js-motion .ck-mark path{stroke-dashoffset:1;transition:stroke-dashoffset 350ms var(--ease-out3) 100ms}
html.js-motion .ck-item.is-in .ck-mark circle{opacity:1}
html.js-motion .ck-item.is-in .ck-mark path{stroke-dashoffset:0}

/* --- CTA label roll + magnetic (JS adds the markup) --- */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.2}
.roll>span{display:block;transition:transform 350ms var(--ease)}
.roll::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:100%;white-space:nowrap;transition:transform 350ms var(--ease)}
a:hover>.roll>span,a:focus-visible>.roll>span,a:hover>.roll::after,a:focus-visible>.roll::after{transform:translateY(-100%)}
.is-magnet{will-change:transform}

/* --- homepage preloader (inline script in partials/preloader.j2 builds the markup) --- */
html.pl-on{overflow:hidden;animation:pl-unlock 0s linear 4s forwards}
html.pl-on chat-widget{visibility:hidden;animation:pl-show 0s linear 4s forwards}
@keyframes pl-unlock{to{overflow:visible}}
@keyframes pl-show{to{visibility:visible}}
.pl{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;animation:pl-failsafe 0s linear 4s forwards}
.pl-bg{position:absolute;inset:0;overflow:hidden;background:#000}
.pl-glow{position:absolute;inset:-20%;background:radial-gradient(38% 38% at 38% 46%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%)}
.pl-lock{position:relative;width:clamp(210px,21vw,300px)}
.pl-crest{position:relative;width:72.15%;margin-left:8.86%;aspect-ratio:353/229}
.pl-crest img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.pl-word{position:relative;width:100%;margin-top:3.2%;aspect-ratio:490/153}
.pl-l{position:absolute;overflow:hidden}
.pl-l img{position:absolute;max-width:none}
.pl-roof{clip-path:inset(0 100% 0 0)}
.pl-helmet{opacity:0;transform:translateY(18px)}
.pl-plume{clip-path:inset(0 100% 0 0);transform:rotate(-6deg);transform-origin:18% 92%}
.pl-l{opacity:0;transform:translateX(calc(var(--d) * 16px))}
.pl-go{animation:pl-failsafe 0s linear 4s forwards,pl-pass 0s linear 1300ms forwards}
.pl-go .pl-roof{animation:pl-open 550ms var(--ease) forwards}
.pl-go .pl-helmet{animation:pl-in 500ms var(--ease) 150ms forwards}
.pl-go .pl-plume{animation:pl-plume 500ms var(--ease) 350ms forwards}
.pl-go .pl-r0{animation:pl-in 500ms var(--ease) calc(550ms + var(--i) * 30ms) forwards}
.pl-go .pl-r1{animation:pl-in 500ms var(--ease) calc(630ms + var(--i) * 25ms) forwards}
.pl-go .pl-glow{animation:pl-drift 1800ms ease-in-out forwards}
.pl-go .pl-lock{animation:pl-up 350ms var(--ease-in) 1250ms forwards}
.pl-go .pl-bg{animation:pl-lift 450ms cubic-bezier(.76,0,.24,1) 1300ms forwards}
.pl-skip{pointer-events:none}
.pl-skip .pl-bg,.pl-skip .pl-lock{animation:pl-fade 250ms ease forwards}
@keyframes pl-failsafe{to{visibility:hidden;pointer-events:none}}
@keyframes pl-pass{to{pointer-events:none}}
@keyframes pl-open{to{clip-path:inset(0 0 0 0)}}
@keyframes pl-in{to{opacity:1;transform:none}}
@keyframes pl-plume{to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes pl-drift{to{transform:translateX(10%)}}
@keyframes pl-up{to{opacity:0;transform:translateY(-24px)}}
@keyframes pl-lift{to{transform:translateY(-100%)}}
@keyframes pl-fade{to{opacity:0}}
html.pl-lift .layer-sky{animation:sky-settle 1100ms var(--ease) both}
@keyframes sky-settle{from{scale:1.06}to{scale:1}}

/* --- responsive --- */
@media (max-width:1024px){
  .asm{grid-template-columns:1fr;grid-template-areas:"head" "fig" "keys";gap:28px}
  .spec-grid,.tl-grid,.route-grid{grid-template-columns:1fr;gap:40px}
  .tl-head{position:static}
  .spec-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chips4{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
  .ix-in{grid-template-columns:minmax(0,1fr) 44px;gap:12px 20px}
  .ix-body{grid-column:1;grid-row:2}
  .ix-arrow{grid-column:2;grid-row:1}
}
@media (max-width:900px){
  .ov-media{height:56vh;min-height:320px}
  .ov-wrap{margin-top:-72px}
  .sec-overlap.flip .ov-wrap{justify-content:flex-start}
  .strip-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .strip-track::-webkit-scrollbar{display:none}
  .strip-item{scroll-snap-align:start}
  .strip-item:nth-child(n) .strip-media{margin-top:0}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px;gap:12px}
  .bento-cell:first-child{grid-column:1 / -1;grid-row:span 1}
  .bento-cell:first-child .bento-title{font-size:28px}
  .bento-text{left:18px;right:64px;bottom:18px}
  .bento-arrow{right:14px;bottom:14px;width:40px;height:40px}
  .bento-title{font-size:20px}
  .bento-desc{display:none}
  .bento-cell:first-child .bento-desc{display:block}
  .st-grid{grid-template-columns:1fr;gap:0}
  .st-pin{display:none}
  .st-photo{display:block;position:relative;margin-bottom:24px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden}
  .st-photo img{width:100%;height:100%;object-fit:cover}
  .st-panel,.st-panel:first-child{min-height:0;padding-block:36px;justify-content:flex-start}
  .st-panel:first-child{padding-top:0}
  html.js-motion .st-panel{opacity:1}
  .route-map .rt-label{font-size:25px}
  .route-map .rt-label.rt-big{font-size:32px}
  .route-lake-label{font-size:18px}
  .route-shield text{font-size:16px}
}
@media (max-width:600px){
  .spec-cells{grid-template-columns:1fr;gap:32px}
  .chips4{grid-template-columns:1fr 1fr}
  .chip4-num{font-size:54px}
  .tl{padding-left:56px}
  .tl-node{left:-50px}
  .tl-rail{left:17px}
  .bento-cell:nth-child(n){grid-column:auto}
  .bento-cell:first-child,.bento-cell:nth-child(6):last-child{grid-column:1 / -1}
  .bento-cell:not(:first-child):not(:last-child) .bento-arrow{display:none}
  .bento-cell:not(:first-child):not(:last-child) .bento-text{right:14px;left:14px;bottom:14px}
  .bento-cell:not(:first-child):not(:last-child) .bento-title{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .bento-tile:hover .bento-media img,.strip-item:hover .strip-media img{scale:1;transform:none}
}

/* ====== footer: ink band with the crest's roofline (DESIGN.md "Footer, 2026-10-19 e") ======
   Text sits only on solid ink (#000). The art band above it holds no copy; the MAGNUS backdrop sits below the legal
   row at white .07. Drawn state is the default; html.js-motion hides the line until .is-drawn (app.js). */
.foot{position:relative;margin-top:0;color:rgba(255,255,255,.8)}
.foot-art{display:block;height:clamp(120px,13.9vw,280px);margin-bottom:-1px;overflow:hidden}
.foot-art svg{display:block;width:100%;height:100%}
.foot-roof{fill:var(--ink)}
.foot-line{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1}
.foot-seam{fill:none;stroke-width:1.25;stroke-dasharray:1}
.foot-body{position:relative;background:var(--ink);padding-top:clamp(24px,3vw,40px);overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px 64px;align-items:end;padding-bottom:clamp(48px,5vw,72px);border-bottom:1px solid rgba(255,255,255,.16)}
.foot-eyebrow{font-size:14px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.66);margin-bottom:20px}
.foot-h{font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.035em;font-weight:200;color:var(--white)}
.foot-h span{display:block}
.foot-area{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.8)}
.foot-ico{display:inline-flex;flex:none}
.foot-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.foot-area .foot-ico{color:rgba(255,255,255,.66)}
.foot-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px 28px}
.foot-bid{min-height:48px;padding-inline:24px;font-size:16px}
.foot-bid:focus-visible{outline-color:var(--white)}
.foot-phone{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;font-weight:400;color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color .15s ease}
.foot-phone:hover,.foot-phone:focus-visible{text-decoration-color:var(--plume);text-decoration-thickness:2px}
.foot-phone .foot-ico svg{width:22px;height:22px}
.foot-grid{padding-block:clamp(48px,5vw,72px)}
.foot .brand{margin:0;padding:0;display:block}
.foot .brand img{height:104px;width:auto;margin-bottom:22px}
.foot .brand p{color:rgba(255,255,255,.8);font-size:16px;line-height:1.5;max-width:34ch}
.foot .cols ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot .cols li{display:flex}
.foot .cols a{display:inline-flex;align-items:center;min-height:32px;font-size:16px;line-height:1.35;color:rgba(255,255,255,.86);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:color .15s ease,text-decoration-color .15s ease}
.foot .cols a:hover,.foot .cols a:focus-visible{color:var(--white);text-decoration-color:var(--plume)}
.foot .cols .cap{display:inline-flex;align-items:center;min-height:32px;font-size:15px;letter-spacing:-.01em;color:rgba(255,255,255,.66)}
.foot .cols .lab{font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.66);margin-bottom:14px}
.foot .legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-block:24px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.5;color:rgba(255,255,255,.66)}
.foot .legal-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot .legal a{display:inline-flex;align-items:center;min-height:32px;color:rgba(255,255,255,.86);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;transition:color .15s ease,text-decoration-color .15s ease}
.foot .legal a:hover,.foot .legal a:focus-visible{color:var(--white);text-decoration-color:var(--plume)}
.foot :focus-visible{outline:2px solid var(--plume);outline-offset:3px}
.foot .foot-bid:focus-visible{outline:2px solid var(--white)}
.foot-mark{pointer-events:none;user-select:none;margin-top:8px;height:clamp(56px,11vw,160px);overflow:hidden;line-height:1}
.foot-mark span{display:block;text-align:center;font-size:clamp(88px,17vw,250px);line-height:.8;letter-spacing:-.06em;font-weight:200;color:rgba(255,255,255,.07);white-space:nowrap}
/* motion: the coping line draws left to right, seams rise behind its head, the backdrop settles up (Premium) */
html.js-motion .foot-line{stroke-dashoffset:1}
html.js-motion .foot-seam{stroke-dashoffset:1}
html.js-motion .foot.is-drawn .foot-line{stroke-dashoffset:0;transition:stroke-dashoffset 1100ms var(--ease-out3)}
html.js-motion .foot.is-drawn .foot-seam{stroke-dashoffset:0;transition:stroke-dashoffset 350ms var(--ease-out3) var(--d,300ms)}
@media (max-width:1024px){
  .foot-grid{grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:40px 32px}
  .foot .brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .foot-top{grid-template-columns:1fr;align-items:start}
  .foot-actions{justify-content:flex-start}
}
@media (max-width:600px){
  .foot-line{stroke-width:2.2}
  .foot-seam{stroke-width:1.8}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .foot .brand img{height:88px}
  .foot-actions{flex-direction:column;align-items:stretch;gap:8px}
  .foot-bid{justify-content:center}
  .foot .cols a,.foot .cols .cap,.foot .legal a{min-height:44px;font-size:17px}
  .foot .cols .cap{font-size:15px}
  .foot .legal a{font-size:14px}
  .foot .legal{flex-direction:column;align-items:flex-start;gap:4px}
  .foot .legal-links{gap:0 24px}
}

/* overflow fix (2026-10-19 e): the split photo's 24px side entrance pushed it past the viewport edge on phones before
   its reveal ("white bar on the right"). Under 900px the grid is one column, so the photo rises like the text instead. */
@media (max-width:900px){
  html.js-motion .statement-grid .rv-photo,html.js-motion .statement-grid.flip .rv-photo{translate:0 20px}
  html.js-motion .statement-grid .rv-photo.is-in{translate:0 0}
}
/* 320px phones (overflow.mjs at its smallest width): grid tracks must be allowed to shrink below their content */
@media (max-width:900px){.st-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.chips4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:359px){
  .chips4{grid-template-columns:minmax(0,1fr)}
  .st-big{font-size:56px}
  .st-text,.chip4-text{overflow-wrap:anywhere}
}