/* whole-house-outline.css — page components for the Whole-House Outline page
 * (#44). Layers on global.css + inner.css; chrome rules dropped. */

h1,h2,h3{font-family:"DM Serif Display",Georgia,serif; line-height:1.1; margin:0; color:var(--head-brown);}
.section--night h2,.section--night h3,.section--dusk h2,.section--dusk h3,.hero h1{color:#F6EFDD;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--gold-base); outline-offset:3px; border-radius:2px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:2;}
.eyebrow{font-size:13.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hover);}
.section--night .eyebrow,.section--dusk .eyebrow,.hero .eyebrow{color:var(--gold-soft);}
.section{padding:80px 0; position:relative;}
.section--warm{background:var(--parch);}
.section--warm::before{content:""; position:absolute; top:0; left:0; right:0; height:140px;
    background:radial-gradient(620px 150px at 50% 0,rgba(201,154,59,.16),transparent 70%), linear-gradient(180deg,rgba(18,20,28,.20),transparent); pointer-events:none;}
.section--night{background:var(--night); color:#F2E8D4;}
.section--dusk{background:linear-gradient(180deg,var(--dusk),var(--night-2)); color:#F2E8D4;}
.bokeh{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.bokeh i{position:absolute; border-radius:50%; filter:blur(7px); opacity:.5;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15px;
    padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; font-family:inherit; transition:background .18s,color .18s,border-color .18s,transform .18s;}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold-base); color:#3A2A0C;}
.btn-gold:hover{background:var(--gold-hover); color:#fff3de;}
.btn-ghost{background:transparent; color:#F3E9D2; border-color:rgba(243,233,210,.45);}
.btn-ghost:hover{border-color:var(--gold-soft); color:#fff;}
.btn-dark{background:var(--head-brown); color:#F6EFDD;}
.btn-dark:hover{background:#2a1c10;}
.btn-lg{padding:16px 30px; font-size:16px;}
.warm{background:#FFE7B0; box-shadow:0 0 6px 2px rgba(255,221,150,.85),0 0 14px 5px rgba(255,200,110,.45);}
.gold{background:var(--gold-soft); box-shadow:0 0 6px 2px rgba(230,207,150,.8),0 0 15px 6px rgba(201,154,59,.4);}
.red{background:#FF6A5E; box-shadow:0 0 6px 2px rgba(255,90,80,.75),0 0 15px 6px rgba(185,28,28,.45);}
.green-b{background:#7FCF9A; box-shadow:0 0 6px 2px rgba(127,207,154,.7),0 0 15px 6px rgba(16,74,44,.5);}
@keyframes tw{0%,100%{opacity:1;}45%{opacity:.45;}70%{opacity:.85;}}
.hero{position:relative; overflow:hidden; padding:0; color:#F6EFDD;}
.hero-bg{position:absolute; inset:0; background:radial-gradient(1000px 540px at 22% -10%,rgba(201,154,59,.22),transparent 60%), radial-gradient(720px 500px at 86% 6%,rgba(185,28,28,.16),transparent 62%), linear-gradient(180deg,#181B24,#14161E 62%,#0E1016);}
.hero-grid{position:relative; z-index:3; display:grid; grid-template-columns:1.02fr .98fr; gap:50px; align-items:center; padding:54px 0 60px;}
.hero-inner{max-width:560px;}
.hero-media{aspect-ratio:5/4; border-radius:20px; background:var(--hero-img,none) center/cover no-repeat, var(--glow-tile); border:1px solid rgba(230,207,150,.2); box-shadow:0 36px 80px -34px rgba(0,0,0,.7); position:relative; overflow:hidden;}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(20,16,10,.34));}
.crumbs{font-size:14px; color:#B6A988; letter-spacing:.04em; margin-bottom:6px;}
.crumbs a:hover{color:var(--gold-soft);}
.crumbs span{color:#6f6650;}
.hero h1{font-size:clamp(33px,4.8vw,56px); letter-spacing:-.01em; margin-top:14px; text-shadow:0 2px 40px rgba(0,0,0,.5);}
.hero .lede{font-size:clamp(16px,1.6vw,18.5px); color:#E7DCC6; margin:20px 0 0; max-width:600px;}
.hero-cta{display:flex; gap:13px; flex-wrap:wrap; margin-top:30px;}
.hero-trust{display:flex; gap:9px 22px; flex-wrap:wrap; margin-top:26px; font-size:13px; color:#CDBF9F;}
.hero-trust span{display:inline-flex; align-items:center; gap:8px;}
.hero-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-base);}
.head-block{max-width:680px; margin:0 auto 48px; text-align:center;}
.head-block h2{font-size:clamp(27px,3.4vw,42px); margin-top:12px;}
.head-block p{color:var(--text-muted); margin-top:13px; font-size:16px;}
.section--night .head-block p,.section--dusk .head-block p{color:#C9BCA1;}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.split.rev .txt{order:2;}
.split.rev .media{order:1;}
.split .media{aspect-ratio:4/3; border-radius:18px; background:var(--img,none) center/cover no-repeat, var(--glow-tile); box-shadow:0 26px 60px -32px rgba(40,28,14,.5); position:relative; overflow:hidden;}
.split .media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,16,10,.26));}
.split h2{font-size:clamp(26px,3.2vw,40px); margin:12px 0 16px;}
.split p{color:var(--text-muted); font-size:15.5px;}
.split p + p{margin-top:14px;}
.split .lead-line{font-family:"DM Serif Display"; font-size:18px; color:var(--head-brown); line-height:1.4;}
.feat{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.fcard{background:rgba(255,247,230,.04); border:1px solid rgba(230,207,150,.18); border-radius:14px; padding:24px 22px;}
.fcard .fi{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:13px; background:rgba(16,74,44,.1); color:var(--green-base);}
.fcard h3{font-size:16.5px; color:#F6EFDD; margin-bottom:5px;}
.fcard p{font-size:13.5px; color:#C9BCA1;}
.opts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:980px; margin:0 auto;}
.opt{background:rgba(255,247,230,.04); border:1px solid rgba(230,207,150,.2); border-radius:16px; padding:30px 26px; text-align:center;}
.swatch{width:54px; height:54px; border-radius:50%; margin:0 auto 18px; position:relative;}
.sw-warm{background:#FFE3A6; box-shadow:0 0 18px 5px rgba(255,221,150,.6);}
.sw-cool{background:#EAF2FF; box-shadow:0 0 18px 5px rgba(200,224,255,.55);}
.sw-color{background:conic-gradient(#FF6A5E,#FFD27F,#7FCF9A,#7Fb8ff,#c79bff,#FF6A5E); box-shadow:0 0 18px 5px rgba(201,154,59,.4);}
.opt h3{font-size:19px; color:#F6EFDD; margin-bottom:8px;}
.opt p{font-size:14px; color:#C9BCA1;}
.incl-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:1000px; margin:0 auto;}
.ichip{text-align:center;}
.ichip .ic{width:44px; height:44px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background:rgba(201,154,59,.14); color:var(--gold-soft); font-size:18px;}
.ichip b{display:block; font-size:14.5px; color:#F6EFDD; font-weight:600;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.step{position:relative; padding-top:12px;}
.step .n{font-family:"DM Serif Display"; font-size:46px; color:var(--gold-soft); line-height:1;}
.step h3{font-size:20px; margin:12px 0 9px;}
.step p{font-size:14.5px; color:#C9BCA1;}
.step::before{content:""; position:absolute; top:22px; left:48px; right:-13px; height:1px; background:linear-gradient(90deg,var(--night-line),transparent);}
.step:last-child::before{display:none;}
.areas{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:920px; margin:0 auto;}
.pill{font-size:13.5px; color:#e7ddca; border:1px solid rgba(230,207,150,.28); border-radius:999px; padding:8px 16px; transition:border-color .15s,color .15s,background .15s;}
.pill:hover{border-color:var(--gold-soft); color:#fff; background:rgba(201,154,59,.12);}
.review-solo{max-width:720px; margin:0 auto; text-align:center;}
.review-solo .stars{color:var(--gold-base); letter-spacing:4px; font-size:18px;}
.review-solo p{font-family:"DM Serif Display"; font-size:clamp(20px,2.4vw,28px); color:var(--head-brown); line-height:1.4; margin:18px 0 16px;}
.review-solo .who{color:var(--text-muted); font-size:14px;}
.faq{max-width:790px; margin:0 auto;}
.faq details{border-bottom:1px solid var(--parch-divider); padding:6px 0;}
.faq summary{list-style:none; cursor:pointer; padding:18px 40px 18px 4px; position:relative; font-family:"DM Serif Display"; font-size:19px; color:var(--head-brown);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:"DM Sans"; font-size:24px; color:var(--gold-base);}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 4px 20px; color:var(--text-muted); font-size:15.5px; max-width:720px;}
.final{text-align:center; position:relative; overflow:hidden;}
.final .glow-bg{position:absolute; inset:0; background:radial-gradient(720px 400px at 50% 0,rgba(201,154,59,.26),transparent 60%), radial-gradient(620px 380px at 50% 120%,rgba(185,28,28,.18),transparent 60%);}
.final h2{font-size:clamp(30px,4.4vw,50px); color:#fff;}
.final p{color:#D8CBB0; margin:16px auto 0; max-width:560px; font-size:16.5px;}
.final-cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:28px;}
.final .resp{margin-top:16px; font-size:13px; color:#B6A988;}
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr; gap:30px;}
.hero-media{aspect-ratio:16/10;}
.split{grid-template-columns:1fr; gap:28px;}
.split.rev .txt{order:2;}
.split.rev .media{order:1;}
.split .media{order:1;}
.split .txt{order:2;}
.feat{grid-template-columns:1fr 1fr;}
.incl-grid{grid-template-columns:1fr 1fr 1fr;}
.reviews,.steps{grid-template-columns:1fr 1fr;}
.step::before{display:none;}
.section{padding:62px 0;}
}
@media(max-width:560px){
.feat,.opts,.steps,.incl-grid{grid-template-columns:1fr;}
/* #260/#266 — hero buttons size like the homepage's instead of stretching
 * to half-width columns and wrapping their labels */
.hero-cta .btn{flex:0 1 auto; padding:14px 22px; font-size:15px; white-space:nowrap;}
}
.ico{width:26px; height:26px; display:block;}
.icowrap{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--gold-hover);
    background:radial-gradient(circle at 34% 30%,#ffffff,var(--gold-50)); border:1px solid var(--gold-soft);
    box-shadow:0 8px 20px -10px rgba(201,154,59,.55), 0 0 0 5px rgba(201,154,59,.05);}
.icowrap .ico{filter:drop-shadow(0 0 3px rgba(201,154,59,.45));}
.section--night .icowrap,.section--dusk .icowrap{color:var(--gold-soft);
    background:radial-gradient(circle at 34% 30%,rgba(230,207,150,.20),rgba(201,154,59,.05));
    border:1px solid rgba(230,207,150,.42); box-shadow:0 0 24px rgba(201,154,59,.32), inset 0 0 14px rgba(230,207,150,.12);}
.section--night .icowrap .ico,.section--dusk .icowrap .ico{filter:drop-shadow(0 0 7px rgba(230,207,150,.75));}
.fcard .icowrap{width:52px; height:52px; margin-bottom:14px;}
.fcard .ico{width:24px; height:24px;}
.ichip .icowrap{width:52px; height:52px; margin:0 auto 12px;}
.ichip .ico{width:24px; height:24px;}

/* ── Permanent Lighting bespoke sections (#142) ─────────────────────────── */
/* Palette chips — "A look for every day of the year" (mockup) */
.pal-chip .pal{width:54px; height:54px; border-radius:14px; margin:0 auto 12px; border:1px solid rgba(230,207,150,.35);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}
/* See-it-change video card */
.vid-card{max-width:880px; margin:0 auto; border-radius:18px; overflow:hidden;
  border:1px solid rgba(230,207,150,.28); box-shadow:0 24px 60px -28px rgba(0,0,0,.75);}
.vid-card video{display:block; width:100%; height:auto;}
/* Seasonal-vs-permanent comparison table (pricing doc) */
.cmp{width:100%; max-width:880px; margin:0 auto; border-collapse:collapse; font-size:15px;}
.cmp th,.cmp td{padding:13px 16px; text-align:left; border-bottom:1px solid rgba(120,100,70,.18);}
.cmp thead th{font-family:"DM Serif Display",serif; font-size:17px; font-weight:600; color:#233024;}
.cmp td:first-child{font-weight:600; color:#233024;}
.cmp td{color:#5d5442;}
.cmp td:last-child{color:var(--green-base); font-weight:600;}
@media(max-width:640px){
  .cmp{font-size:13px;}
  .cmp th,.cmp td{padding:10px 8px;}
}
/* Splits placed on dark bands (permanent page) — light copy */
.section--night .split p,.section--dusk .split p{color:#C9BCA1;}
.section--night .split .lead-line,.section--dusk .split .lead-line{color:#E7DCC6;}
/* Palette chip labels on the warm band read dark like the mockup */
.section--warm .ichip b{color:#233024;}
/* #236/#237 — a three-card feature row centers under its headline instead of
 * sitting left in the 4-col grid. Desktop-only: :has() outranks the plain
 * .feat selectors in the stacking media queries below, so scope it. */
@media(min-width:961px){
  .feat:has(> .fcard:nth-child(3):last-child){grid-template-columns:repeat(3,1fr); max-width:980px; margin-inline:auto;}
}
/* #235 — larger style tiles on the tree hub gallery */
.gal--lg{grid-template-columns:repeat(3,1fr); grid-auto-rows:300px;}
@media(max-width:980px){.gal--lg{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.gal--lg{grid-template-columns:1fr; grid-auto-rows:240px;}}