/* ==========================================================================
   Cybertron Decks & Outdoor — "The Backyard Blueprint"
   Concept: a design studio's drawing set. Drafting-paper pages, serif
   editorial type, blueprint dimension lines, architectural title blocks.
   Banners are deep-ink photographs that contrast with the paper palette.
   ========================================================================== */


:root{
  --paper:#F3EEE4; --paper-2:#EAE2D3; --paper-3:#E0D6C3;
  --ink:#15201C; --ink-2:#1F2B26; --ink-3:#2C3A34;
  --cedar:#B45F2A; --cedar-2:#D98A52; --cedar-ink:#8E4518;
  --line:#2F5D7C; --line-soft:rgba(47,93,124,.18);
  --text:#1B2420; --muted:#58625C; --rule:rgba(21,32,28,.14);
  --white:#FFFFFF;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --wrap:1240px; --gutter:clamp(20px,4vw,40px);
  --r:14px; --r-lg:22px;
  --shadow:0 18px 40px rgba(21,32,28,.12);
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:560;line-height:1.08;letter-spacing:-.01em;margin:0 0 .5em;color:var(--ink);}
h1{font-size:clamp(2.5rem,6vw,5rem);}
h2{font-size:clamp(2rem,3.8vw,3.2rem);}
h3{font-size:clamp(1.3rem,1.9vw,1.6rem);}
p{margin:0 0 1em;}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
[hidden]{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--cedar);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none;}
.skip:focus{top:12px;}
:focus-visible{outline:3px solid var(--cedar-2);outline-offset:3px;border-radius:6px;}

/* ---------- Small type roles ---------- */
.sheet{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cedar-ink);}
.sheet::before{content:"";width:28px;height:1.5px;background:currentColor;}
.on-dark .sheet,.banner .sheet{color:var(--cedar-2);}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:62ch;}
.muted{color:var(--muted);}
.note{font-size:.9rem;color:var(--muted);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;
  font-weight:700;font-size:1rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-cedar{background:var(--cedar);color:#fff;box-shadow:0 10px 24px rgba(180,95,42,.28);}
.btn-cedar:hover{background:var(--cedar-ink);transform:translateY(-2px);}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff;}
.btn-ghost:hover{background:#fff;color:var(--ink);}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:var(--ink-3);transform:translateY(-2px);}
.btn-line{border-color:var(--ink);color:var(--ink);}
.btn-line:hover{background:var(--ink);color:#fff;}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--cedar-ink);text-decoration:none;min-height:40px;}
.link-arrow::after{content:"→";transition:transform .2s ease;}
.link-arrow:hover::after{transform:translateX(4px);}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);color:#fff;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease,height .3s ease;}
.site-header.is-solid{background:rgba(243,238,228,.96);color:var(--ink);box-shadow:0 1px 0 var(--rule);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);}
.header-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;flex-shrink:0;}
.brand-mark{width:38px;height:38px;flex-shrink:0;}
.brand-mark rect{fill:var(--cedar);} .brand-mark path{stroke:#fff;}
.brand-name{font-family:var(--serif);font-size:1.18rem;font-weight:600;line-height:1.05;}
.brand-name small{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.8;}
.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);}
.nav a{text-decoration:none;font-weight:600;font-size:.95rem;position:relative;padding:10px 0;white-space:nowrap;min-width:44px;display:inline-flex;justify-content:center;}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--cedar-2);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);}
.header-cta{min-height:44px;padding:0 20px;font-size:.92rem;}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 12px;background:none;border:1.5px solid currentColor;border-radius:999px;cursor:pointer;font-weight:700;font-size:.9rem;}
.menu-btn span.bars{position:relative;width:18px;height:2px;background:currentColor;}
.menu-btn span.bars::before,.menu-btn span.bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;}
.menu-btn span.bars::before{top:-6px;} .menu-btn span.bars::after{top:6px;}
@media (max-width:1180px){
  .nav,.header-cta{display:none;}
  .menu-btn{display:inline-flex;}
}

/* Full-screen menu (mobile/tablet) */
.menu{position:fixed;inset:0;z-index:150;background:var(--ink);color:#fff;display:flex;flex-direction:column;
  padding:22px var(--gutter) 32px;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-12px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;}
.menu.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s;}
.menu-top{display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-bottom:28px;}
.menu-close{min-height:44px;min-width:44px;padding:0 16px;background:none;color:#fff;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;font-weight:700;cursor:pointer;}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:m;}
.menu li{border-bottom:1px solid rgba(255,255,255,.12);}
.menu li a{display:flex;align-items:baseline;gap:16px;padding:14px 0;text-decoration:none;font-family:var(--serif);font-size:clamp(1.6rem,6vw,2.4rem);line-height:1.15;}
.menu li a::before{counter-increment:m;content:counter(m,decimal-leading-zero);font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--cedar-2);letter-spacing:.1em;}
.menu li a[aria-current="page"]{color:var(--cedar-2);}
.menu-foot{margin-top:auto;padding-top:28px;display:grid;gap:14px;}
.menu-foot .btn{width:100%;}
html.menu-open{overflow:hidden;}

/* ---------- Banner (all pages) ---------- */
.banner{position:relative;isolation:isolate;color:#fff;background:var(--ink);overflow:hidden;
  min-height:clamp(560px,78vh,760px);display:flex;align-items:flex-end;padding:calc(var(--header-h) + 48px) 0 clamp(48px,7vh,84px);}
.banner--home{min-height:max(640px,100svh);}
.banner-img{position:absolute;inset:0;z-index:-3;}
.banner-img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);}
/* deep-ink overlay: strongest behind the text, never matching the paper palette */
.banner::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(13,22,19,.9) 0%,rgba(13,22,19,.74) 38%,rgba(13,22,19,.28) 70%,rgba(13,22,19,.12) 100%),
             linear-gradient(0deg,rgba(13,22,19,.78) 0%,rgba(13,22,19,0) 46%);}
/* blueprint grid */
.banner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(170,205,230,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(170,205,230,.08) 1px,transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 75%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 75%);}
.banner-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;}
.banner-copy{max-width:760px;}
.banner h1{color:#fff;margin:.35em 0 .35em;text-wrap:balance;}
.banner--home h1{font-size:clamp(2.7rem,6.4vw,5.6rem);}
.banner p.lede{color:rgba(255,255,255,.86);}
.banner-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;color:rgba(255,255,255,.75);margin-bottom:10px;}
.crumbs a{color:#fff;}
/* architectural title block */
.titleblock{border:1.5px solid rgba(255,255,255,.55);min-width:250px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(13,22,19,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.titleblock div{display:flex;justify-content:space-between;gap:18px;padding:8px 12px;border-top:1px solid rgba(255,255,255,.28);}
.titleblock div:first-child{border-top:0;}
.titleblock b{font-weight:700;color:var(--cedar-2);}
.dimline{position:absolute;left:var(--gutter);right:var(--gutter);bottom:22px;height:14px;pointer-events:none;opacity:.75;}
.dimline line,.dimline path{stroke:rgba(255,255,255,.6);stroke-width:1.2;}
.dimline text{fill:rgba(255,255,255,.8);font:600 11px var(--sans);letter-spacing:.12em;}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.7);border-radius:14px;}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%{opacity:0;transform:translateY(0);}40%{opacity:1;}100%{opacity:0;transform:translateY(12px);}}
@media (max-width:960px){
  .banner-in{grid-template-columns:1fr;}
  .titleblock{justify-self:start;min-width:0;width:100%;max-width:420px;}
}
@media (max-width:720px){
  .banner{min-height:clamp(560px,88svh,720px);padding-bottom:56px;}
  .banner::before{background:linear-gradient(0deg,rgba(13,22,19,.92) 0%,rgba(13,22,19,.8) 45%,rgba(13,22,19,.5) 100%);}
  .banner::after{mask-image:none;-webkit-mask-image:none;opacity:.35;}
  .banner-ctas .btn{flex:1 1 100%;}
  .dimline,.scroll-cue{display:none;}
  .titleblock{display:none;}
}

/* ---------- Sections ---------- */
.section{padding:clamp(72px,10vw,128px) 0;position:relative;}
.section--tight{padding:clamp(56px,7vw,88px) 0;}
.section--paper2{background:var(--paper-2);}
.section--ink{background:var(--ink);color:#E9E4DA;}
.section--ink h2,.section--ink h3{color:#fff;}
.section--ink .lede,.section--ink .muted{color:rgba(233,228,218,.78);}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,64px);}
.head h2{margin:.35em 0 0;}
.head p{margin:0;}
.head--stack{grid-template-columns:1fr;max-width:820px;}
@media (max-width:860px){.head{grid-template-columns:1fr;}}
/* hand-drawn blueprint rule under headings */
.rule{height:12px;margin:14px 0 0;max-width:220px;}
.rule path{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.2s ease .2s;}
.in .rule path,.rule.in path{stroke-dashoffset:0;}

/* ---------- Home: frost line facts ---------- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);}
.fact{padding:clamp(24px,3vw,40px) clamp(18px,2.5vw,32px);border-left:1px solid var(--rule);}
.fact:first-child{border-left:0;}
.fact-n{font-family:var(--serif);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--ink);font-weight:500;}
.fact-n small{font-size:.4em;margin-left:6px;color:var(--cedar-ink);font-family:var(--sans);font-weight:700;}
.fact h3{font-size:1.1rem;font-family:var(--sans);font-weight:700;margin:14px 0 6px;}
.fact p{margin:0;color:var(--muted);font-size:.97rem;}
@media (max-width:860px){.facts{grid-template-columns:1fr;}.fact{border-left:0;border-top:1px solid var(--rule);}.fact:first-child{border-top:0;}}

/* ---------- Home: ways to live (uses) ---------- */
.uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.use{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:440px;color:#fff;display:flex;align-items:flex-end;isolation:isolate;background:var(--ink);}
.use img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s ease;}
.use::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(13,22,19,.92) 0%,rgba(13,22,19,.45) 55%,rgba(13,22,19,.1) 100%);}
.use-body{padding:24px;}
.use .use-verb{font-family:var(--serif);font-size:2.2rem;line-height:1;margin:0 0 8px;color:#fff;}
.use p{margin:0;font-size:.95rem;color:rgba(255,255,255,.85);}
.use .eng{display:block;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.25);font-size:.86rem;color:var(--cedar-2);font-weight:600;}
.use:hover img{transform:scale(1.05);}
@media (max-width:1100px){.uses{grid-template-columns:repeat(2,minmax(0,1fr));}.use{min-height:380px;}}
@media (max-width:560px){.uses{grid-template-columns:1fr;}.use{min-height:340px;}}

/* ---------- Split editorial blocks ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center;}
.split--rev .split-media{order:2;}
.split-media{position:relative;}
.split-media img{border-radius:var(--r-lg);width:100%;aspect-ratio:4/3;object-fit:cover;}
.split-media figcaption{margin-top:10px;font-size:.86rem;color:var(--muted);}
.split-copy ul{padding:0;margin:0 0 24px;list-style:none;}
.split-copy li{padding:12px 0 12px 34px;border-top:1px solid var(--rule);position:relative;}
.split-copy li::before{content:"";position:absolute;left:0;top:20px;width:16px;height:1.5px;background:var(--cedar);}
.split-copy li:last-child{border-bottom:1px solid var(--rule);}
@media (max-width:900px){.split{grid-template-columns:1fr;}.split--rev .split-media{order:0;}}

/* ---------- Cross-section (deck anatomy) ---------- */
.anatomy{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:start;}
.anatomy-fig{background:#F8F5EE;border:1.5px solid var(--ink);border-radius:var(--r);padding:12px;position:relative;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:24px 24px;}
.anatomy-fig svg{width:100%;height:auto;display:block;}
.anatomy-fig .draw{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.2s ease;}
.anatomy-fig.in .draw{stroke-dashoffset:0;}
.hot{cursor:pointer;}
.hot circle.dot{fill:var(--cedar);stroke:#fff;stroke-width:2;transition:r .2s ease;}
.hot circle.halo{fill:none;stroke:var(--cedar);stroke-width:1.5;opacity:.6;transform-origin:center;transform-box:fill-box;animation:halo 2.4s ease-out infinite;}
.hot:hover circle.dot,.hot:focus-visible circle.dot,.hot[aria-pressed="true"] circle.dot{fill:var(--line);}
.hot text{font:700 13px var(--sans);fill:#fff;pointer-events:none;}
@keyframes halo{0%{transform:scale(1);opacity:.7;}100%{transform:scale(2.3);opacity:0;}}
.anatomy-list{list-style:none;margin:0;padding:0;}
.anatomy-list li{border-top:1px solid var(--rule);}
.anatomy-list li:last-child{border-bottom:1px solid var(--rule);}
.anatomy-list button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px 4px;cursor:pointer;min-height:48px;}
.anatomy-list button:focus-visible{outline:3px solid var(--cedar-2);outline-offset:2px;border-radius:6px;}
.anatomy-list .num{width:26px;height:26px;border-radius:50%;background:var(--cedar);color:#fff;font-size:.8rem;font-weight:800;display:grid;place-items:center;margin-top:2px;}
.anatomy-list strong{display:block;font-size:1.02rem;}
.anatomy-list .desc{display:none;color:var(--muted);font-size:.95rem;margin-top:4px;}
.anatomy-list button[aria-expanded="true"] .desc{display:block;}
.anatomy-list button[aria-expanded="true"] .num{background:var(--line);}
@media (max-width:960px){.anatomy{grid-template-columns:1fr;}}

/* ---------- Season ribbon ---------- */
.season{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-top:8px;}
.month{position:relative;padding:14px 8px 16px;border-radius:10px;background:var(--paper-2);min-height:150px;display:flex;flex-direction:column;}
.month b{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;}
.month span{font-size:.82rem;color:var(--muted);margin-top:auto;line-height:1.35;}
.month[data-phase="plan"]{background:#DCE6EA;}
.month[data-phase="ground"]{background:#EAD8C4;}
.month[data-phase="build"]{background:var(--cedar);color:#fff;}
.month[data-phase="build"] span{color:rgba(255,255,255,.88);}
.month[data-phase="close"]{background:var(--ink-3);color:#fff;}
.month[data-phase="close"] span{color:rgba(255,255,255,.8);}
.month.is-now{outline:3px solid var(--ink);outline-offset:2px;}
.month.is-now::after{content:"You are here";position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.section--ink .month.is-now::after{color:#fff;}
.section--ink .month.is-now{outline-color:#fff;}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:.9rem;}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:8px;vertical-align:-2px;}
@media (max-width:960px){
  .season{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:34px;}
}
@media (max-width:560px){
  .season{grid-template-columns:repeat(3,minmax(0,1fr));}
  .month{min-height:120px;}
}

/* ---------- Work (portfolio) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;font-weight:700;font-size:.92rem;}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;}
.works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;}
.work{grid-column:span var(--span,4);background:#FBF8F2;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;}
.works.is-filtered .work{--span:4 !important;}
.work[hidden]{display:none;}
.work-open{all:unset;display:block;cursor:zoom-in;position:relative;overflow:hidden;}
.work-open:focus-visible{outline:3px solid var(--cedar);outline-offset:-3px;}
.work-open img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s ease;}
.work:hover .work-open img{transform:scale(1.04);}
.work-body{padding:22px 24px 24px;}
.work-body h3{margin-bottom:10px;}
.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.9rem;}
.spec dt{color:var(--muted);font-weight:600;}
.spec dd{margin:0;font-weight:600;}
@media (max-width:1000px){.work,.works.is-filtered .work{--span:6 !important;}.works:not(.is-filtered) .work:last-child:nth-child(odd){--span:12 !important;}}
@media (max-width:640px){.works{gap:18px;}.work,.works.is-filtered .work,.works:not(.is-filtered) .work:last-child:nth-child(odd){--span:12 !important;}}
dialog.viewer{border:0;padding:0;max-width:min(1100px,94vw);width:100%;background:var(--ink);color:#fff;border-radius:var(--r-lg);overflow:hidden;}
dialog.viewer::backdrop{background:rgba(10,16,14,.82);}
dialog.viewer img{width:100%;max-height:78vh;object-fit:contain;background:#0d1411;}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;}
.viewer-bar p{margin:0;font-weight:600;}
.viewer-close{min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.6);background:none;color:#fff;font-weight:700;cursor:pointer;}

/* ---------- Planner ---------- */
.planner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,44px);align-items:start;}
.panel{background:#FBF8F2;border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,32px);}
.field{border:0;margin:0 0 22px;padding:0;min-width:0;}
.field legend,.field > label{display:block;font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:10px;}
.range-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-bottom:12px;}
.range-row label{font-weight:600;}
.range-row output{font-family:var(--serif);font-size:1.3rem;min-width:72px;text-align:right;}
input[type="range"]{width:100%;accent-color:var(--cedar);height:44px;grid-column:1 / -1;margin:0;}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;}
.opt{position:relative;}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.opt span{display:flex;flex-direction:column;gap:2px;min-height:56px;padding:10px 14px;border:1.5px solid var(--rule);border-radius:12px;background:#fff;font-weight:700;font-size:.95rem;transition:border-color .2s,background .2s;}
.opt span small{font-weight:500;color:var(--muted);font-size:.8rem;}
.opt input:checked + span{border-color:var(--cedar);background:#FFF4EA;box-shadow:inset 0 0 0 1px var(--cedar);}
.opt input:focus-visible + span{outline:3px solid var(--cedar-2);outline-offset:2px;}
.opt input:disabled + span{opacity:.45;}
.drawing{background:#F8F5EE;border:1.5px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;position:sticky;top:calc(var(--header-h) + 18px);
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:20px 20px;}
.drawing-head{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1.5px solid var(--ink);background:#FBF8F2;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.drawing #plan-svg{display:block;width:100%;height:auto;}
.plan-key{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 16px 10px;font-size:.8rem;font-weight:700;color:var(--muted);border-top:1px dashed var(--rule);background:rgba(251,248,242,.85);}
.plan-key span{display:inline-flex;align-items:center;gap:6px;}
.plan-key i{display:inline-block;}
.plan-key .k-foot{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);}
.plan-key .k-board{width:16px;height:0;border-top:1.5px solid #665F55;}
.plan-key .k-guard{width:16px;height:0;border-top:3px dotted var(--ink);}
.plan-key .k-dim{width:16px;height:0;border-top:1.5px solid var(--line);}
.readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1.5px solid var(--ink);background:#FBF8F2;}
.readout div{padding:14px 16px;border-left:1px solid var(--rule);border-top:1px solid var(--rule);}
.readout div:nth-child(odd){border-left:0;}
.readout div:nth-child(-n+2){border-top:0;}
.readout dt{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.readout dd{margin:4px 0 0;font-family:var(--serif);font-size:1.25rem;line-height:1.2;}
.readout .wide{grid-column:1 / -1;}
.readout .flag-yes{color:var(--cedar-ink);}
.planner-foot{padding:14px 16px;border-top:1.5px solid var(--ink);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:#FBF8F2;}
.planner-foot .note{margin:0;max-width:52ch;}
@media (max-width:1000px){.planner{grid-template-columns:1fr;}.drawing{position:relative;top:auto;order:-1;}}
@media (max-width:420px){.readout{grid-template-columns:1fr;}.readout div{border-left:0 !important;border-top:1px solid var(--rule) !important;}.readout div:first-child{border-top:0 !important;}}

/* ---------- Material library ---------- */
.library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.sample{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:#FBF8F2;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;}
.sample img{width:100%;height:100%;min-height:260px;object-fit:cover;}
.sample-body{padding:22px 24px;}
.tagline{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar-ink);margin-bottom:6px;}
.meter{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;font-size:.88rem;margin:14px 0 0;}
.meter dt{color:var(--muted);font-weight:600;}
.meter dd{margin:0;display:flex;gap:4px;}
.meter dd i{width:18px;height:8px;border-radius:3px;background:var(--paper-3);}
.meter dd i.on{background:var(--cedar);}
.price{font-family:var(--serif);font-size:1.25rem;margin:12px 0 0;}
@media (max-width:1050px){.library{grid-template-columns:1fr;}}
@media (max-width:560px){.sample{grid-template-columns:1fr;}.sample img{min-height:0;aspect-ratio:16/10;height:auto;}}
.compare{background:#FBF8F2;border:1.5px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;}
.compare-pick{display:flex;flex-wrap:wrap;gap:14px;padding:18px;border-bottom:1.5px solid var(--ink);align-items:flex-end;}
.compare-pick label{display:grid;gap:6px;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;flex:1 1 200px;}
select,input[type="text"],input[type="email"],input[type="tel"],textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--rule);border-radius:12px;background:#fff;font-size:1rem;}
select:focus,input:focus,textarea:focus{border-color:var(--cedar);outline:none;box-shadow:0 0 0 3px rgba(180,95,42,.2);}
.table-scroll{overflow-x:auto;}
table.cmp{width:100%;border-collapse:collapse;min-width:520px;}
table.cmp th,table.cmp td{text-align:left;padding:14px 18px;border-top:1px solid var(--rule);vertical-align:top;font-size:.96rem;}
table.cmp thead th{border-top:0;font-family:var(--serif);font-size:1.25rem;font-weight:560;}
table.cmp tbody th{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:24%;}
.rails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.rail{border:1px solid var(--rule);border-radius:var(--r);padding:22px;background:#FBF8F2;}
.rail svg{width:100%;height:90px;margin-bottom:12px;}
@media (max-width:900px){.rails{grid-template-columns:1fr;}}

/* ---------- Outdoor rooms ---------- */
.rooms{display:grid;gap:clamp(56px,8vw,110px);}
.room{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center;}
.room:nth-child(even) .room-media{order:2;}
.room-media{position:relative;}
.room-media img{border-radius:var(--r-lg);width:100%;aspect-ratio:4/3;object-fit:cover;}
.room-no{position:absolute;top:-22px;left:22px;font-family:var(--serif);font-size:4rem;line-height:1;color:var(--cedar);text-shadow:0 2px 0 var(--paper);}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.97rem;}
.checks li::before{content:"";width:14px;height:14px;margin-top:6px;border:2px solid var(--cedar);border-radius:3px;}
.checks li.code::before{border-color:var(--line);background:linear-gradient(45deg,transparent 45%,var(--line) 45%,var(--line) 55%,transparent 55%);}
@media (max-width:900px){.room{grid-template-columns:1fr;}.room:nth-child(even) .room-media{order:0;}}

/* ---------- Code page ---------- */
.checker{background:var(--ink);color:#EDE8DE;border-radius:var(--r-lg);padding:clamp(22px,3vw,40px);}
.checker h3{color:#fff;}
.q{margin:0 0 20px;border:0;padding:0;}
.q legend{font-weight:700;margin-bottom:10px;}
.q .opts{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
.q .opt span{background:transparent;border-color:rgba(255,255,255,.3);color:#fff;}
.q .opt span small{color:rgba(255,255,255,.7);}
.q .opt input:checked + span{background:rgba(217,138,82,.18);border-color:var(--cedar-2);box-shadow:inset 0 0 0 1px var(--cedar-2);}
.verdict{margin-top:8px;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.07);border-left:4px solid var(--cedar-2);}
.verdict strong{display:block;font-family:var(--serif);font-size:1.35rem;color:#fff;margin-bottom:4px;}
.inspect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:i;position:relative;}
.inspect::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px);}
.step{position:relative;padding:0 24px 0 0;}
.step-n{width:56px;height:56px;border-radius:50%;background:var(--paper);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--serif);font-size:1.3rem;margin-bottom:18px;position:relative;}
@media (max-width:860px){
  .inspect{grid-template-columns:1fr;gap:26px;}
  .inspect::before{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 10px,transparent 10px 18px);}
  .step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:0;}
  .step-n{margin:0;}
}
.prov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.prov article{border:1.5px solid var(--ink);border-radius:var(--r);padding:22px 24px;background:#FBF8F2;}
.prov h3{font-size:1.3rem;}
.prov ul{margin:0;padding-left:18px;}
.prov li{margin-bottom:8px;font-size:.96rem;}
@media (max-width:860px){.prov{grid-template-columns:1fr;}}
.disclaimer{border:1.5px dashed var(--line);border-radius:var(--r);padding:16px 20px;font-size:.92rem;color:var(--ink-3);background:rgba(47,93,124,.05);}

/* ---------- Build season stages ---------- */
.stages{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s;}
.stages li{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,.9fr);gap:clamp(18px,3vw,40px);padding:28px 0;border-top:1px solid var(--rule);align-items:start;}
.stages li:last-child{border-bottom:1px solid var(--rule);}
.stage-no{font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--cedar);}
.stages h3{margin-bottom:6px;}
.stages .who{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--line);}
.stages p{margin:0;color:var(--muted);}
@media (max-width:860px){.stages li{grid-template-columns:64px 1fr;}.stages li > :last-child{grid-column:2;}.stage-no{font-size:2.4rem;}}

/* ---------- Care calendar ---------- */
.care{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.care article{border-radius:var(--r-lg);padding:24px;background:#FBF8F2;border:1px solid var(--rule);border-top:6px solid var(--c,var(--cedar));}
.care h3{display:flex;justify-content:space-between;align-items:baseline;}
.care h3 small{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.care ul{margin:0;padding-left:18px;font-size:.95rem;}
.care li{margin-bottom:8px;}
@media (max-width:1050px){.care{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.care{grid-template-columns:1fr;}}
.signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink);}
.sign{padding:24px 24px 24px 0;border-bottom:1px solid var(--rule);}
.sign:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--rule);}
.sign b{display:block;font-family:var(--serif);font-size:1.25rem;margin-bottom:6px;font-weight:560;}
.sign p{margin:0;color:var(--muted);font-size:.96rem;}
@media (max-width:860px){.signs{grid-template-columns:1fr;}.sign,.sign:not(:nth-child(3n+1)){padding:20px 0;border-left:0;}}

/* ---------- Consult ---------- */
.consult{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:start;}
.form{background:#FBF8F2;border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:clamp(20px,3vw,36px);}
.demo-note{display:flex;gap:12px;padding:14px 16px;border-radius:12px;background:#F7E7D6;border:1px solid rgba(180,95,42,.35);font-size:.93rem;margin-bottom:22px;}
.demo-note strong{display:block;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.f{display:grid;gap:6px;margin-bottom:16px;}
.f label{font-weight:700;font-size:.92rem;}
textarea{min-height:120px;resize:vertical;}
.form-status{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:.95rem;}
.form-status[hidden]{display:none;}
.aside-card{border-radius:var(--r-lg);background:var(--ink);color:#E9E4DA;padding:clamp(22px,3vw,34px);}
.aside-card h3,.aside-card h2{color:#fff;}
.h3{font-size:clamp(1.3rem,1.9vw,1.6rem);}
.aside-card ol{margin:0;padding:0;list-style:none;counter-reset:a;}
.aside-card li{position:relative;padding:0 0 18px 46px;counter-increment:a;}
.aside-card li::before{content:counter(a);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--cedar);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.85rem;}
.aside-card li::after{content:"";position:absolute;left:14px;top:34px;bottom:4px;width:2px;background:rgba(255,255,255,.18);}
.aside-card li:last-child::after{display:none;}
.aside-card li b{display:block;color:#fff;}
.contact-lines{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.15);display:grid;gap:10px;font-size:.95rem;}
.contact-lines span{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar-2);font-weight:800;}
@media (max-width:960px){.consult{grid-template-columns:1fr;}}
@media (max-width:560px){.grid-2{grid-template-columns:1fr;gap:0;}}

/* ---------- Closing CTA ---------- */
.closer{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(36px,6vw,72px);position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;
  background-image:linear-gradient(rgba(170,205,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(170,205,230,.07) 1px,transparent 1px);background-size:40px 40px;}
.closer h2{color:#fff;max-width:18ch;margin-bottom:.3em;}
.closer p{color:rgba(255,255,255,.8);margin:0;max-width:52ch;}
.closer .btns{display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:860px){.closer{grid-template-columns:1fr;}.closer .btns .btn{flex:1 1 100%;}}

/* ---------- Footer ---------- */
.footer{background:#0E1613;color:#CFC9BD;padding:72px 0 28px;font-size:.95rem;}
.footer-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer .foot-h{font-family:var(--sans);font-size:.8rem;line-height:1.4;letter-spacing:.16em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cedar-2);margin-bottom:14px;}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.footer a{text-decoration:none;display:inline-block;padding:6px 0;}
.footer a:hover{color:#fff;}
.footer .big{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);color:#fff;line-height:1.15;margin-bottom:14px;}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:22px;font-size:.86rem;color:#8F968F;}
.footer-bottom a{color:#fff;font-weight:700;}
@media (max-width:960px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));}.footer-top > :first-child{grid-column:1 / -1;}}
@media (max-width:520px){.footer-top{grid-template-columns:1fr;}}

/* ---------- Motion ---------- */
.js .reveal{opacity:1;transform:translateY(0);transition:none;}
.js .reveal.in{opacity:1;transform:none;}
/* planks lay in under headings */
.planks{display:flex;gap:4px;height:10px;margin:18px 0 0;max-width:200px;}
.planks i{flex:1;background:var(--cedar);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.3,.8,.3,1);}
.planks i:nth-child(2){background:var(--cedar-2);transition-delay:.12s;}
.planks i:nth-child(3){transition-delay:.24s;}
.planks i:nth-child(4){background:var(--cedar-2);transition-delay:.36s;}
.in .planks i,.planks.in i{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .js .reveal{opacity:1;transform:none;}
  .anatomy-fig .draw,.rule path{stroke-dashoffset:0 !important;}
  .planks i{transform:none !important;}
}

/* ==========================================================================
   Responsive QA pass — appended. No existing rule above was modified.
   ========================================================================== */

/* Body copy measured below the 16px readability floor: .note at 14.4px,
   .fact p at 15.52px and the .use-body paragraphs at 15.2px. Raised without
   touching headings, labels or the small print in the footer meta row. */
.note{ font-size:1rem; line-height:1.6; }
.fact p{ font-size:1rem; line-height:1.6; }
.use-body p, .use-body li{ font-size:1rem; line-height:1.6; }
/* Remaining body copy under the floor, found by measurement: the list items
   inside article cards (15.2–15.36px), the .sign captions, the contact lines
   and the disclaimer paragraph (14.72px). */
article ul li, .sign p, .contact-lines li, p.disclaimer{ font-size:1rem; line-height:1.6; }
/* A .prov-scoped rule outranked `article ul li` on the code page. */
.prov article ul li, .prov li{ font-size:1rem; line-height:1.6; }

/* The footer bottom row is a wrapping flex row with space-between, but its
   two items measured 1190px against a 1160px container — only 30px over, so
   the credit wrapped onto its own line at every width, including 1920, and
   the intended row never formed. Letting the legal line shrink (and wrap its
   own text) restores the row on desktop; below 640 the two items stack
   deliberately rather than by accident. */
@media (min-width:641px){
  /* flex-wrap:wrap makes the browser wrap before it shrinks, which is why the
     credit dropped to its own line despite there being room once the legal
     line wraps its own text. Disabling wrap above the stack breakpoint lets
     the first item shrink instead, so space-between finally applies. */
  .footer-bottom{ flex-wrap:nowrap; }
}
.footer-bottom > :first-child{ flex:0 1 auto; min-width:0; }
.footer-bottom > :last-child{ flex:0 0 auto; }
@media (max-width:640px){
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-bottom > :first-child,
  .footer-bottom > :last-child{ flex:0 0 auto; }
}