/* auro inner pages: the sky page head with the sheet rising over it, the catalogue, product, process, installs and about cards.
   Extends site.css (tokens, cards, lattice, buttons). The homepage loads it too, for the shared product card link. */

/* ---------- product card: the whole tile opens the product page, the square button still adds to the basket ---------- */
.card .lab{position:static}
.card .to::after{content:"";position:absolute;inset:0;z-index:1}
.card .to:focus-visible{outline:0}
.card:has(.to:focus-visible){outline:1.5px solid #8fb0ff;outline-offset:3px}
.card .add{z-index:2}

/* ---------- page head: the hero's sky, white ink above, dark ink on the pale foot of the sky ---------- */
body[data-page]{height:auto;min-height:100%}
.phead{position:sticky;top:0;z-index:0;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:clamp(560px,78svh,880px);
  padding-top:clamp(112px,14vh,160px);overflow:hidden;isolation:isolate;color:var(--ink-top)}
.crumb{display:flex;flex-wrap:wrap;gap:6px 10px;color:color-mix(in srgb,var(--ink-top) 58%,transparent)}
.crumb a{transition:color var(--t-fast)}
.crumb a:hover,.crumb [aria-current]{color:var(--ink-top)}
.ph-t{margin-top:clamp(18px,2.2vw,36px);font-family:var(--f-head);font-weight:400;font-size:clamp(64px,9.4vw,180px);line-height:.9;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.ph-l{margin-top:clamp(14px,1.4vw,24px);max-width:34ch;font-size:clamp(20px,1.9vw,32px);font-weight:300;line-height:1.2;letter-spacing:-.02em;color:color-mix(in srgb,var(--ink-top) 72%,transparent);text-wrap:pretty}
.ph-f{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);padding-bottom:clamp(22px,2.6vw,44px);color:var(--ink-low)}
.ph-f li{list-style:none;display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line-low)}
.ph-f .px{color:var(--ink-low-2)}
.ph-f b{font-family:var(--f-head);font-weight:500;font-size:clamp(18px,1.5vw,26px);letter-spacing:-.015em;line-height:1.1}
/* every page ends as the homepage does: the sheet's rounded bottom over the night footer (site.css main and .foot) */
.sheet>section:first-child{padding-top:clamp(40px,4.6vw,84px)}
.sheet>section{padding-bottom:0}

/* product page head: the product stands on the sky, as in the hero, and is cropped by the sheet when its base is cut */
.pd{min-height:max(640px,100svh);justify-content:flex-start}
.pd .ph-in{max-width:min(52vw,900px)}
.pd .ph-t{font-size:clamp(48px,5.6vw,108px);line-height:.94;max-width:none}
.pd-img{position:absolute;right:var(--gx);top:0;bottom:0;width:var(--pw,44vw);pointer-events:none}
/* the product as in the hero: large, rising from the head's bottom edge, a quarter of it cut by the edge.
   This sizes it inside its column until pages.js measures the head and grows it into whatever space the text leaves */
.pd-img img{position:absolute;left:50%;bottom:calc(var(--H) * -.24);height:var(--H);width:auto;max-width:none;transform:translateX(-50%);
  --H:min(calc((max(640px,100svh) - clamp(104px,12vh,140px)) / .76),calc(var(--pw,44vw) / var(--ar)))}
.pd-buy{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;margin-top:auto;max-width:min(52vw,900px);padding-bottom:clamp(28px,3.4vw,56px);
  color:var(--ink-low);--ink:#141823;--line-2:rgba(20,24,35,.32);--btn:#0d0f14;--btn-ink:#eef0f5}
.pd-pr{display:flex;flex-direction:column;gap:8px}
.pd-pr b{color:var(--ink);font-family:var(--f-head);font-weight:400;font-size:clamp(40px,3.8vw,68px);letter-spacing:-.028em;line-height:1}
.pd-pr .px{color:var(--ink-low-2)}
.pd-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.btn-add .b2,.btn-add.done .b1{display:none}
.btn-add.done .b2{display:inline}
.qty-s{display:inline-flex;align-items:center;height:46px;padding:0 12px 0 4px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.qty-s button{width:38px;height:38px;border:0;border-radius:6px;background:none;cursor:pointer;font-size:18px;line-height:1;transition:background-color var(--t-fast)}
.qty-s button:hover{background:rgba(20,24,35,.08)}
.qty-s output{min-width:30px;text-align:center;font-size:16px}
.qty-s .px{margin-left:6px;color:var(--ink-low-2)}


/* ---------- night cards: the sky's dark half, kept dark to the bottom so white ink always reads ---------- */
.set-f,.gu-f,.nx-est,.ab-f{color:#fff;background:linear-gradient(180deg,#02040a 0%,#0b1a31 52%,#284670 100%);
  --ink:#fff; --ink-2:rgba(255,255,255,.72); --ink-3:rgba(255,255,255,.55); --line:rgba(255,255,255,.16); --line-2:rgba(255,255,255,.3); --btn:#fff; --btn-ink:#0d0f14}

/* ---------- shop: the catalogue grid ---------- */
.range .shop-ctl{margin:0 0 clamp(20px,2vw,32px)}
.chips button .px{margin-left:8px;font-size:10px;letter-spacing:.04em;opacity:.7}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgrid .card{display:flex;flex-direction:column;width:auto}
.pgrid .lab{flex:1;align-content:start}   /* labels in a row end level, whatever the name's length */
.pgrid .lab{row-gap:6px}
.pgrid .lab h3{white-space:normal;text-wrap:balance}
.lab .sp{grid-column:1/-1;font-size:13px;line-height:1.35;color:rgba(255,255,255,.55)}
.lab .pr small{font-size:12px}
.pgrid .lab .pr{color:rgba(255,255,255,.88);font-size:14px}
.range-n{margin-top:clamp(20px,2vw,32px);color:var(--ink-3)}

.sets-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.set{display:flex;flex-direction:column}
.set-h{display:flex;justify-content:space-between;gap:12px;color:var(--ink-3)}
.set-h .px{color:inherit}
.set h3{margin-top:clamp(28px,3vw,52px);font-family:var(--f-head);font-weight:500;font-size:clamp(28px,2.4vw,42px);letter-spacing:-.015em;line-height:1}
.set>p{margin:12px 0 24px;max-width:34ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.set-l li{list-style:none;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.set-l .q{color:var(--ink-3)}
.set-l a{transition:color var(--t-fast)}
.set-l a:hover{color:var(--acc)}
.set-f .set-l a:hover{color:#fff;text-decoration:underline}
.set-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:28px;border-top:1px solid var(--line)}
.set-t .px{color:var(--ink-3)}
.set-t b{font-family:var(--f-head);font-weight:400;font-size:clamp(36px,3vw,54px);letter-spacing:-.028em;line-height:1}
.set .btn{margin-top:18px}

/* ---------- the closing cards on every inner page ---------- */
.nx-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.nx .nx-ph{grid-column:1/6;grid-row:1/3;min-height:clamp(520px,44vw,680px)}
.nx-est{grid-column:6/13;grid-row:1;display:flex;flex-direction:column;gap:14px}
.nx-est .px{color:var(--ink-3)}
.nx-est .h2{margin-top:clamp(20px,2.4vw,44px)}
.nx-est p{max-width:44ch;font-size:16px;line-height:1.5;color:var(--ink-2)}
.nx-est .go-bar{margin-top:auto}
.nx-est:hover .go-bar{background:rgba(255,255,255,.22)}
.nx-ask{grid-column:6/13;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:space-between;gap:24px var(--gut)}
.nx-ask>.px:first-child{grid-column:1/-1;color:var(--ink-3)}
.nx-q{font-family:var(--f-head);font-weight:500;font-size:clamp(26px,2.2vw,38px);letter-spacing:-.015em;line-height:1.05;max-width:14ch}
.nx-c{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:clamp(16px,1.2vw,19px)}
.nx-c a{transition:color var(--t-fast)}
.nx-c a:hover{color:var(--acc)}
.nx-h{grid-column:1/-1;color:var(--ink-3)}

/* ---------- product page ---------- */
.pd-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.pd-whole{grid-column:1/6;grid-row:1/3;display:flex;flex-direction:column;padding:0;overflow:hidden;background:linear-gradient(180deg,var(--tile-a) 0%,var(--tile-m) 45%,var(--tile-b) 100%)}   /* the whole product, uncropped, on the shop tile's panel */
.pd-whole div{position:relative;flex:1;min-height:clamp(420px,38vw,640px)}
.pd-whole img{position:absolute;inset:9% 12%;width:76%;height:82%;object-fit:contain}
.pd-whole figcaption{display:flex;justify-content:space-between;gap:16px;padding:16px var(--pad) 18px;font-size:14px;color:var(--ink-2)}
.pd-whole figcaption .px{color:var(--ink)}
.pd-about{grid-column:6/13;grid-row:1;display:flex;flex-direction:column;gap:28px}
.pd-about>.px,.pd-incl>.px{color:var(--ink-3)}
.pd-lede{max-width:36ch;font-size:clamp(20px,1.7vw,28px);font-weight:300;line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}
.pd-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:auto}
.pd-figs div{padding-top:12px;border-top:1px solid var(--line-2)}
.pd-figs dt{color:var(--ink-3)}
.pd-figs dd{margin-top:10px;font-family:var(--f-head);font-weight:400;font-size:clamp(30px,2.7vw,48px);letter-spacing:-.028em;line-height:1;white-space:nowrap}
.pd-incl{grid-column:6/13;grid-row:2;display:flex;flex-direction:column}
.pd-incl ul{margin:22px 0 28px}
.pd-incl li{list-style:none;position:relative;padding:13px 0 13px 24px;border-top:1px solid var(--line);font-size:16px;line-height:1.4}
.pd-incl li::before{content:"";position:absolute;left:0;top:20px;width:6px;height:6px;background:var(--ink)}   /* the lattice's square node */
.pd-incl .pd-note{margin-top:auto;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:38ch}
.pd-spec{grid-column:1/13;grid-row:3}
.pd-h{margin-bottom:clamp(20px,2vw,32px);font-family:var(--f-head);font-weight:500;font-size:clamp(24px,2vw,34px);letter-spacing:-.015em;line-height:1}
.pd-spec dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut)}
.pd-spec dl div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4}
.pd-spec dt{color:var(--ink-2)}
.rel .sec-head .h2{max-width:none}

/* ---------- how it works ---------- */
.tl-days{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));padding-bottom:12px;border-bottom:1px solid var(--line)}
.tl-days span{font-size:10px;letter-spacing:0;color:var(--ink-3)}
.tl-days .k{color:var(--ink)}
.tl-l{display:grid;grid-template-columns:repeat(21,minmax(0,1fr))}
.tl-l li{list-style:none;grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:6px;padding:18px 0;border-bottom:1px solid var(--line)}
.tl-l li:last-child{border-bottom:0;padding-bottom:4px}
.tl-l .tl-bar{grid-column:var(--a)/var(--b);height:10px;margin-bottom:8px;border-radius:2px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--ease);transition-delay:calc(var(--d)*140ms + 300ms)}
.tl-b.in .tl-bar{transform:none}
.tl-l li>:not(.tl-bar){grid-column:var(--t)/var(--e)}
.tl-l li.end>:not(.tl-bar){text-align:right}
.tl-l b{font-family:var(--f-head);font-weight:500;font-size:clamp(18px,1.4vw,22px);letter-spacing:-.015em}
.tl-l span{font-size:14px;line-height:1.45;color:var(--ink-2)}
.tl-l .px{font-size:11px;color:var(--ink-3)}

.st2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.st2>li{display:contents}
.st2-ph,.pj-ph,.ab-ph,.area-ph{padding:0;border-radius:var(--rc)}
.st2-ph img,.pj-ph img,.ab-ph img,.area-ph img{position:absolute;inset:0}
.st2-ph{grid-column:1/6;grid-row:var(--row);min-height:clamp(340px,30vw,500px)}
.st2-t{grid-column:6/13;grid-row:var(--row);display:flex;flex-direction:column}
.st2-h,.pj-h{display:flex;justify-content:space-between;gap:12px}
.st2-h .px,.pj-h .px{color:var(--ink-3)}
.st2-t h3{margin-top:clamp(28px,3vw,52px);font-family:var(--f-head);font-weight:500;font-size:clamp(32px,2.8vw,48px);letter-spacing:-.015em;line-height:1}
.st2-t>p{margin-top:14px;max-width:46ch;font-size:16px;line-height:1.55;color:var(--ink-2)}
.st2-d{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:auto;padding-top:28px}
.st2-d dt{padding-bottom:10px;color:var(--ink-3)}
.st2-d li{list-style:none;padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4}

.gu-b{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.gu-b li{list-style:none;display:flex;flex-direction:column;min-height:clamp(260px,22vw,360px)}
.gu-b .px{color:var(--ink-3)}
.gu-b b{margin-top:auto;font-family:var(--f-head);font-weight:400;font-size:clamp(52px,4.8vw,92px);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.gu-b p{margin-top:12px;max-width:28ch;font-size:14px;line-height:1.5;color:var(--ink-2)}
.gu,.st2s,.tl{padding-bottom:0}
.faq{padding-bottom:0}

/* ---------- installs ---------- */
.pj-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.pj-ph{grid-column:1/8;grid-row:var(--row);min-height:clamp(380px,36vw,620px)}
.pj-t{grid-column:8/13;grid-row:var(--row);display:flex;flex-direction:column}
.pj-ph.flip{grid-column:6/13}
.pj-t.flip{grid-column:1/6}
.pj-n{margin-top:clamp(28px,3vw,52px);font-family:var(--f-head);font-weight:500;font-size:clamp(32px,2.8vw,48px);letter-spacing:-.015em;line-height:1}
.pj-t .facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;margin-top:28px}
.pj-t blockquote{margin-top:auto;padding-top:32px}
.pj-t blockquote p{font-size:clamp(18px,1.4vw,22px);font-weight:300;line-height:1.4;letter-spacing:-.01em;max-width:34ch;text-wrap:pretty}
.pj-t blockquote footer{margin-top:14px;color:var(--ink-3)}

/* ---------- about ---------- */
.ab-b,.area-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.ab-ph{grid-column:1/7;min-height:clamp(420px,40vw,660px)}
.ab-figs{grid-column:7/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.ab-figs li{list-style:none;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.ab-figs .px{color:var(--ink-3)}
.ab-figs b{font-family:var(--f-head);font-weight:400;font-size:clamp(48px,4.4vw,84px);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.vals-b{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.vals-b li{list-style:none;display:flex;flex-direction:column;min-height:clamp(300px,24vw,400px)}
.vals-b .px{color:var(--ink-3)}
.vals-b h3{margin-top:auto;font-family:var(--f-head);font-weight:500;font-size:clamp(26px,2.2vw,38px);letter-spacing:-.015em;line-height:1}
.vals-b p{min-height:calc(1.55em*4);margin-top:14px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.area-t{grid-column:1/7;display:flex;flex-direction:column}
.area-t .lede{margin-top:clamp(10px,1vw,18px);max-width:30ch;font-size:clamp(20px,1.9vw,32px);font-weight:300;line-height:1.2;letter-spacing:-.02em;color:var(--ink-3)}
.area-t .promise{margin-top:auto;padding-top:36px}
.area-t .promise a{transition:color var(--t-fast)}
.area-t .promise a:hover{color:var(--acc)}
.area-ph{grid-column:7/13;min-height:clamp(400px,36vw,580px)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .pd .ph-in,.pd-buy{max-width:54vw}
  .pd-img{--pw:40vw}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nx .nx-ph{grid-column:1/13;grid-row:auto;min-height:480px}
  .nx-est,.nx-ask{grid-column:1/13;grid-row:auto}
  .nx-est{min-height:320px}
  .pd-whole{grid-column:1/6}
  .pd-about,.pd-incl{grid-column:6/13}
  .gu-b,.vals-b{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st2-ph{grid-column:1/13;grid-row:auto;min-height:420px}
  .st2-t{grid-column:1/13;grid-row:auto;margin-bottom:calc(var(--gut)*1.5)}
  .pj-ph,.pj-ph.flip,.pj-t,.pj-t.flip{grid-column:1/13;grid-row:auto}
  .pj-t{margin-bottom:calc(var(--gut)*1.5)}
  .ab-ph,.ab-figs,.area-t,.area-ph{grid-column:1/13}
}
/* ---------- phones ---------- */
@media (max-width:760px){
  .phead{min-height:max(520px,74svh);padding-top:96px;gap:36px}
  .ph-t{font-size:clamp(56px,17vw,96px)}
  .ph-f{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .pd{min-height:0}
  .pd .ph-in,.pd-buy{max-width:none}
  .pd .ph-t{font-size:clamp(40px,11vw,60px)}
  .pd-img{position:relative;order:3;right:auto;width:auto;height:clamp(300px,54svh,480px);margin:0 calc(var(--gx)*-1);overflow:hidden}
  .pd-img img{--H:min(calc(clamp(300px,54svh,480px) / .76),calc(88vw / var(--ar)))}
  .pd .pd-buy{order:2;padding-bottom:28px;color:color-mix(in srgb,var(--ink-top) 74%,transparent);--ink:var(--ink-top);--ink-low-2:color-mix(in srgb,var(--ink-top) 66%,transparent);--line-2:color-mix(in srgb,var(--ink-top) 32%,transparent);--btn:var(--ink-top);--btn-ink:var(--bg)}   /* up on the sky's top, so it takes the head's ink */
  .pd-buy{margin-top:0}
  .pd-act .btn{flex:1;justify-content:space-between}
  .pgrid,.grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pgrid .lab{grid-template-columns:minmax(0,1fr);padding:12px 12px 14px}
  .pgrid .lab h3{font-size:16px;padding-right:32px}
  .pgrid .lab .add{position:absolute;right:10px;bottom:12px;grid-column:auto;grid-row:auto}
  .pgrid .card{position:relative}
  .lab .sp{font-size:12px}
  .sets-b,.gu-b,.vals-b{grid-template-columns:1fr}
  .nx-b,.pd-b,.st2,.pj-b,.ab-b,.area-b{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nx-b>*,.pd-b>*,.st2 .cd,.pj-b>*,.ab-ph,.ab-figs,.area-b>*{grid-column:1/-1!important;grid-row:auto!important}
  .nx-ask{grid-template-columns:1fr}
  .nx-c{align-items:flex-start}
  .pd-figs{grid-template-columns:1fr;gap:0}
  .pd-figs div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0}
  .pd-figs dd{margin:0;font-size:28px}
  .pd-spec dl{grid-template-columns:1fr}
  .tl-days span:not(.k){visibility:hidden}
  .tl-l li>:not(.tl-bar){grid-column:1/-1!important;text-align:left!important}
  .st2-d{grid-template-columns:1fr}
  .gu-b li,.vals-b li{min-height:220px}
  .ab-figs b{font-size:40px}
  .area-t .promise{grid-template-columns:1fr}
}
.still .phead{position:relative}   /* captures: the head scrolls with the page */