/* FORSPEC home page (/) : home-only styles. Owned by chat 07.
   shared/forspec-site.css is home v32. This file carries (1) what changed from v32 to v41, (2) the home media paths,
   (3) the fixes from the eight-size page check of 11 Nov 2026. Loaded after forspec-site.css, so equal selectors here win. */

/* ---------- 1. v32 -> v41 ---------- */
.noscript{margin:84px 16px 0;padding:14px;background:#fff;color:#000;font-size:15px;border-radius:8px}.noscript a{color:#000;text-decoration:underline}
.stage{background-image:url(/media/home/hero/hero-phone-poster.webp)}
@media (orientation:landscape){.stage{background-image:url(/media/home/hero/hero-desktop-poster.webp)}}
.bTicks{grid-template-columns:repeat(11,1fr)}
.tile .info h3{font-size:clamp(20px,2.2vw,34px)}
.logos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px;color:var(--dim);font-size:14px}
.logos>span{flex:0 0 100%}
/* v36 (10 Nov 2026): builder marks as published on each builder's own site, unrecoloured, on white tiles of one height */
.logos i{font-style:normal;display:flex;align-items:center;justify-content:center;height:60px;min-width:150px;padding:10px 18px;background:#fff;border:0;border-radius:8px;color:#222;font:700 15px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;text-align:center}
.logos i img{display:block;max-height:100%;max-width:100%;width:auto;height:auto}
@media (min-width:641px){.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.logos>span{grid-column:1/-1}.logos i{min-width:0;padding:10px 10px}}
@media (min-width:1000px){.logos{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:640px){.logos{gap:6px}.logos i{flex:1 1 calc(50% - 3px);min-width:0;height:54px;padding:8px 12px}.logos i img{max-width:130px}}
.mp img{display:block;width:100%;height:150px;max-width:none;object-fit:contain;object-position:center bottom;filter:none}
@media (min-width:641px) and (max-width:1100px){.mp img{height:clamp(84px,11vw,130px)}.mp em{font-size:12px}}
@media (max-width:640px){.mp img{height:118px}}
@media (max-width:800px){.six span{font-size:12px}}
/* v35 (10 Nov 2026, James): warranty certificate thumb rebuilt to fit every box; anything too small to read is dropped, not shrunk */
.miniCert{position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,#fff 0,#f4efe4 55%,#e9e1cf 100%);color:#15181c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;padding:10px 12px;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px #b89a52,inset 0 0 0 9px #fff,inset 0 0 0 10px #b89a52}
.miniCert .mcLogo{display:block;height:26px;margin-bottom:4px}
.thumb .miniCert img,.lbMedia .miniCert img,.miniCert img{position:static;display:block;width:auto;height:26px;max-height:none;object-fit:contain}
.miniCert .mcTag{font:700 10px/1 "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.miniCert b{display:block;font:800 54px/1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:68%;color:#15181c;margin:3px 0 0}
.miniCert .mcYrs{font:800 14px/1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:68%;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.miniCert .mcSub{display:block;margin-top:7px;font:600 11px/1.2 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;color:#555;letter-spacing:.02em}
.miniCert em{position:absolute;right:12px;bottom:10px;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--red)}
.lbMedia .miniCert b{font-size:96px}.lbMedia .miniCert .mcYrs{font-size:22px}.lbMedia .miniCert .mcSub{font-size:16px}.lbMedia .miniCert .mcLogo,.lbMedia .miniCert img{height:40px}.lbMedia .miniCert .mcTag{font-size:13px}.lbMedia .miniCert em{width:44px;height:44px;font-size:20px;right:18px;bottom:16px}
@media (min-width:641px) and (max-width:1100px){.thumb .miniCert{padding:6px 8px}.thumb .miniCert .mcLogo,.thumb .miniCert img{height:18px}.thumb .miniCert .mcTag{font-size:8px}.thumb .miniCert b{font-size:36px}.thumb .miniCert .mcYrs{font-size:11px}.thumb .miniCert .mcSub{display:none}.thumb .miniCert em{width:22px;height:22px;font-size:11px;right:8px;bottom:8px}}
@media (max-width:640px){.thumb .miniCert{padding:4px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #b89a52}.thumb .miniCert .mcLogo,.thumb .miniCert .mcTag,.thumb .miniCert .mcSub{display:none}.thumb .miniCert b{font-size:34px;margin:0}.thumb .miniCert .mcYrs{font-size:10px;letter-spacing:.14em}.thumb .miniCert em{width:16px;height:16px;font-size:9px;right:5px;bottom:5px;box-shadow:none}
  .lbMedia .miniCert b{font-size:72px}.lbMedia .miniCert .mcSub{font-size:13px;padding:0 44px 0 8px}}
/* warranty wording (James, 11 Nov 2026): never a bare 25. "Up to" sits beside the figure, so no box gets taller */
.miniCert b i{font-style:normal;font-size:.3em;letter-spacing:.1em;text-transform:uppercase;color:var(--red);vertical-align:middle;margin-right:.25em}
.proof b.w2{white-space:nowrap}

/* ---------- 2. home inside the shared chrome ---------- */
/* the header starts see-through over the hero and goes solid at 60% of the first screen (v41). header.html ships with .solid, so hold it clear until home.js has taken over */
body.home:not(.hScrolled) header.site.solid{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
body.home main{display:block}
/* if the web font ever fails, the grids still hold their columns and nothing runs off the screen */
.rt,.mp,.door{min-width:0}.rt b,.door .who{overflow-wrap:anywhere}
@media (max-width:640px){.range{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* links that used to be buttons keep the same look */
a.rt,a.mp{text-decoration:none}
a.mp{color:#121417}
.doc a.nm{display:block;flex:1 1 auto;min-width:0;color:var(--text)}
.doc a.nm:hover{text-decoration:underline}
.bFacts a{display:block;position:relative;color:var(--text)}.bFacts a::after{content:"";position:absolute;inset:-10px -4px}
.tag a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}.tag a:hover{color:var(--text)}
.out .row a{color:inherit;text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px}
.proof .lk{position:relative}.proof .lk a{position:absolute;inset:0}.proof .lk:hover b{color:var(--redT)}
.proof .dk{font-style:normal}
@media (max-width:800px){.proof .dk{display:none}}
/* v41 had no doctype (quirks mode), where a small inline line does not take the parent's taller line. Same heights in standards mode: */
.proof span,.send span{display:block}
.allDocs{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;font:700 13px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.allDocs:hover{color:var(--text)}
.projMore{display:flex;justify-content:flex-end;margin-top:10px}
.projMore a{display:inline-flex;align-items:center;min-height:44px;font:700 13px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--redT)}

/* ---------- 3. page-check fixes (11 Nov 2026) ---------- */
/* mock-up email in "Spec clause": anything too small to read is dropped, not shrunk (was 5.5 px on phone, 8 px on tablet) */
@media (max-width:1100px){.thumb .miniMail{justify-content:center;gap:6px;padding:8px 10px}.thumb .miniMail p,.thumb .miniMail .mmAtt,.thumb .miniMail .mmHead span:nth-child(2){display:none}.thumb .miniMail .mmHead{font-size:12px;border:0;padding:0}.thumb .miniMail .mmHead i{width:auto;margin-right:4px}.thumb .miniMail b{font-size:16px}}
@media (max-width:640px){.thumb .miniMail{padding:6px;align-items:center;text-align:center}.thumb .miniMail .mmHead{display:none}.thumb .miniMail b{font-size:12px;line-height:1.2}}
@media (min-width:1101px){.thumb .miniMail .mmHead{font-size:12px}.thumb .miniMail .mmHead i{width:36px}.thumb .miniMail p{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.thumb .miniMail .mmAtt span{font-size:12px;padding:1px 6px}.thumb .miniMail .mmAtt span::before{font-size:10px}.thumb .miniMail .mmAtt span:nth-child(2){display:none}}
/* baseline reds on v41 (run 1): */
/* 1. the outlined step number read as invisible text (fill was transparent). Same look: the fill colour is now set through -webkit-text-fill-color */
.bCap .n{color:var(--redT);-webkit-text-fill-color:transparent}
/* 2. "From" / "To" in the mock-up email: 2.8:1 on white -> 5.7:1 */
.miniMail .mmHead i{color:#666}.miniMail .mmHead{color:#444}
/* 3. a data sheet that is not online: 2.4:1 -> 5:1, still dashed so it does not read as a button */
.doc .dl .na{color:rgba(242,243,245,.62);border-color:rgba(255,255,255,.26)}
/* 4. "Show all" stayed on screen when there was nothing more to show (.btn's display beat the hidden attribute) */
.more[hidden],.btn[hidden]{display:none}
/* spec sheet labels: FORSPEC red on cream was 4.2:1 -> a shade deeper, 5.6:1 */
.out .row b{color:#b81b22}
/* James's rule: buttons in a row are the same size */
@media (min-width:801px){.heroCopy .row .btn{flex:0 1 250px}.act .btn{flex:1 1 264px;padding-inline:8px;white-space:nowrap}}
@media (min-width:641px){.cadCard .in .btn{flex:1 1 250px}}
/* run 3: the two portrait site clips (Canberra, Pymble) were cropped into landscape tiles, about three quarters cut off (also on v41).
   Rule: a video is never cropped to the wrong shape. Phone: the two tiles are tall, the clip's own 9:16, nothing cut.
   Tablet and desktop: the whole clip sits in the tile on a blurred copy of its own still (the page's own "whole picture on a blurred backdrop" look). */
.tile.pv{background:var(--bg) center/cover no-repeat}
.tile.pv::before{content:"";position:absolute;inset:-24px;background:inherit;filter:blur(20px) brightness(.55)}
.tile.pv video{object-fit:contain}
@media (max-width:640px){.tile.pv{grid-row:span 2}.tile.pv video{object-fit:cover}}
.miniCert .mcTag{font-size:12px;letter-spacing:.1em}
.miniCert .mcSub{font-size:12px}
@media (min-width:641px) and (max-width:1100px){.thumb .miniCert .mcTag{display:none}.thumb .miniCert .mcYrs{font-size:12px}}
@media (max-width:640px){.thumb .miniCert .mcYrs{font-size:12px;letter-spacing:.1em}.thumb .miniCert b{font-size:30px}}

/* ---------- 4. new sections (overnight run, 11 Nov 2026): the twelve systems, the news strip ---------- */
.sysGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:24px}
.sy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;min-height:76px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);transition:border-color .2s,transform .2s}
.sy:hover{border-color:var(--red);transform:translateY(-2px)}
.sy b{font:800 21px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,"Arial Narrow",Arial,sans-serif;font-stretch:68%;text-transform:uppercase;overflow-wrap:anywhere}
.sy span{grid-column:1;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.sy i{grid-column:2;grid-row:1 / span 2;font-style:normal;font-size:20px;color:var(--redT)}
@media (max-width:1100px){.sysGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.sysGrid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}.sy{min-height:52px;padding:8px 10px}.sy b{font-size:16px}.sy span{display:none}.sy i{grid-row:1;font-size:16px}#systems .lead{display:none}}
.newsStrip{padding-block:22px;border-top:1px solid var(--line)}
.newsStrip a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-height:50px;color:var(--text)}
.newsStrip a b{flex:1 1 260px;font-weight:600;font-size:17px}
.newsStrip a em{font:700 13px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,ui-monospace,monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--redT)}
@media (max-width:700px){.newsStrip{padding-block:16px}.newsStrip a b{font-size:15px}}
.newsCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:24px}
.nc{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text)}
.nc:hover{border-color:var(--red)}
.nc small{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,ui-monospace,monospace;letter-spacing:.08em;color:var(--dim)}
.nc b{font:800 24px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,"Arial Narrow",Arial,sans-serif;font-stretch:68%;text-transform:uppercase}
.nc span{font-size:15px;color:var(--dim)}
.nc em{margin-top:auto;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,ui-monospace,monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--redT)}
@media (max-width:800px){.newsCards{grid-template-columns:1fr;margin-top:16px}.nc{padding:12px}.nc b{font-size:20px}.nc span{display:none}}

/* ---------- 5. look A, "lifted boxes" (James, 12 Nov 2026) ----------
   Colours come from shared/forspec-site.css (:root). This file sets no page, box, edge or text colour of its own any more:
   every dark-surface text uses var(--text) / var(--dim), every box var(--panel), every edge var(--line). The only literal colours left
   are surfaces that are white by design (builder logo tiles, the warranty certificate, the mock-up email, the cream spec sheet). */
.mp em{font-size:12px}                 /* small mono labels: 12 px floor */
.sy,.nc{background:var(--panel)}
/* two home-only boxes still had the old near-black in forspec-site.css (the look A pass missed them): lift them like every other box */
.console{background:var(--panel)}
.doc{background:var(--panel2)}
/* text on FORSPEC red stays pure white (soft white on #dd242b is 4.3 to 1, under the 4.5 pass mark; chat 01 did the same for red buttons) */
.opt.on,.after .ic,.sendIc,.chip.on{color:#fff}
.chip.on{color:#000}

/* 13 Nov 2026: a project tile is one link to its project page (only where the project is approved) */
.tile .tlk{position:absolute;inset:0;z-index:3;border-radius:inherit}
.tile .tlk:focus-visible{outline:3px solid var(--tbc);outline-offset:-3px}