/* LGI Kitchen Innovations: hoods page styles. Distinct look for this page;
   shared tokens and chrome come from base.css. */

body{font-family:'Manrope',sans-serif;background:linear-gradient(168deg,#FBFAF8 0%,#EFF3F5 100%);background-attachment:fixed;color:var(--ink);font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* pending spec-sheet download (disabled, silver, not an action color) */
.spec-actions{margin-top:1.8rem}
.btn-spec{flex-direction:column;align-items:flex-start;gap:0.15rem;background:transparent;color:var(--silver);border:1px solid rgba(138,144,153,0.45);cursor:not-allowed;opacity:0.85}
.btn-spec .soon{font-family:'JetBrains Mono',monospace;font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;opacity:0.8}

.mono{font-family:'JetBrains Mono',monospace}

/* NAV */

.nav-link.active{color:var(--heat)}

.dropdown-menu a.active{background:rgba(232,85,43,0.16);color:var(--paper)}

/* PAGE HERO (full-width, capture airflow) */
.page-hero{position:relative;min-height:46vh;display:flex;align-items:center;background:var(--grad-steel);overflow:hidden;padding:6.5rem 0 3rem}
.mesh-a,.mesh-b{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.mesh-a{width:46vw;height:46vw;top:-16%;left:-6%;background:radial-gradient(circle,rgba(232,85,43,0.14),transparent 62%)}
.mesh-b{width:52vw;height:52vw;bottom:-26%;right:-12%;background:radial-gradient(circle,rgba(26,43,69,0.6),transparent 60%)}
/* capture cone + updraft lines */
.capture{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.cone{position:absolute;top:-4%;left:50%;transform:translateX(-50%);width:46%;height:40%;border-left:1px solid rgba(124,150,170,0.18);border-right:1px solid rgba(124,150,170,0.18);clip-path:polygon(0 0,100% 0,72% 100%,28% 100%);background:linear-gradient(180deg,rgba(232,85,43,0.05),transparent)}
.updraft{position:absolute;bottom:-12%;width:1px;height:26%;background:linear-gradient(180deg,transparent,rgba(232,85,43,0.5),rgba(124,150,170,0.0))}
.hero-inner{position:relative;z-index:3;max-width:880px}
.hero-inner .eyebrow{margin-bottom:1.6rem}
.hero-inner h1{font-family:'Fraunces',serif;font-weight:300;color:var(--paper);font-size:clamp(2.8rem,7vw,6rem);line-height:1.02;letter-spacing:-0.02em;margin-bottom:1.5rem}
.hero-inner h1 .word{display:inline-block;opacity:0;transform:translateY(40px);transition:opacity 900ms var(--ease-out-expo),transform 900ms var(--ease-out-expo)}
.is-loaded .hero-inner h1 .word{opacity:1;transform:none}
.hero-inner .lead{color:rgba(247,246,242,0.78);font-size:var(--body-lg);max-width:40rem;opacity:0;transform:translateY(20px);transition:opacity var(--dur-base),transform var(--dur-base) var(--ease-out-quart);transition-delay:850ms}
.is-loaded .hero-inner .lead{opacity:1;transform:none}
.pills{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.9rem}
.pill{font-family:'JetBrains Mono',monospace;font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(247,246,242,0.74);border:1px solid rgba(247,246,242,0.16);background:rgba(247,246,242,0.03);padding:0.46rem 0.8rem;border-radius:40px;opacity:0;transform:translateY(10px);transition:opacity var(--dur-base),transform var(--dur-base) var(--ease-out-quart)}
.is-loaded .pill{opacity:1;transform:none}

/* SECTION SHELL */
section{position:relative;overflow:hidden}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:2.6rem}
.sec-head.center{grid-template-columns:1fr;text-align:center;max-width:760px;margin-left:auto;margin-right:auto;margin-bottom:3rem}
.sec-head.center .eyebrow{justify-content:center}
.tiers .sec-head.center{margin-top:0.6rem;gap:2.5rem}
.sec-head h2{font-family:'Fraunces',serif;font-weight:300;font-size:var(--display-lg);line-height:1.05;letter-spacing:-0.02em}
.sec-head .sub{color:var(--graphite);font-size:var(--body-lg)}
.eyebrow.on-dark{color:var(--heat)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity var(--dur-slow) var(--ease-out-quart),transform var(--dur-slow) var(--ease-out-quart)}
.reveal.in{opacity:1;transform:none}

/* TIER CONFIGURATOR (signature) */
.tiers{padding:clamp(1.75rem,3.5vw,2.75rem) 0 clamp(4.5rem,9vw,7rem)}
.config{max-width:1080px;margin:0 auto}
.tier-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:0.7rem;margin-bottom:1.2rem}
.tier-btn{position:relative;text-align:left;cursor:pointer;background:var(--grad-card);border:1px solid rgba(138,144,153,0.28);border-radius:10px;padding:1.05rem 1.2rem;font-family:inherit;transition:transform var(--dur-base) var(--ease-out-quart),border-color var(--dur-base),box-shadow var(--dur-base),background var(--dur-base)}
.tier-btn .tt{font-family:'JetBrains Mono',monospace;font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--silver);display:block}
.tier-btn .tl{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--ink);margin-top:0.25rem;display:block;letter-spacing:-0.01em}
.tier-btn:hover{transform:translateY(-2px);border-color:rgba(232,85,43,0.4)}
.tier-btn[aria-selected="true"]{background:linear-gradient(135deg,var(--heat),var(--ember));border-color:transparent;box-shadow:0 10px 28px rgba(232,85,43,0.32)}
.tier-btn[aria-selected="true"] .tt{color:rgba(255,255,255,0.85)}
.tier-btn[aria-selected="true"] .tl{color:#fff}
/* capacity meter */
.capacity{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding:0 0.2rem}
.capacity .cl{font-family:'JetBrains Mono',monospace;font-size:0.58rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--silver);white-space:nowrap}
.cap-track{position:relative;flex:1;height:6px;background:rgba(138,144,153,0.22);border-radius:6px;overflow:hidden}
.cap-fill{position:absolute;left:0;top:0;bottom:0;width:66%;background:linear-gradient(90deg,var(--heat),var(--ember));border-radius:6px;transition:width var(--dur-slow) var(--ease-out-expo)}
.cap-ticks{display:flex;justify-content:space-between;width:120px;font-family:'JetBrains Mono',monospace;font-size:0.56rem;color:var(--silver)}
/* panel */
.tier-stage{position:relative;border:1px solid rgba(138,144,153,0.22);border-radius:14px;overflow:hidden;background:var(--grad-card)}
.tier-panel{display:none;grid-template-columns:1.05fr 0.95fr;gap:0}
.tier-panel.show{display:grid}
.tier-panel.anim{animation:panelIn 360ms var(--ease-out-quart)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tier-copy{padding:clamp(1.8rem,4vw,3rem)}
.tier-badge{font-family:'JetBrains Mono',monospace;font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ember);background:rgba(232,85,43,0.09);border:1px solid rgba(232,85,43,0.22);padding:0.4rem 0.7rem;border-radius:30px;display:inline-block}
.tier-copy h3{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-0.01em;margin:1.1rem 0 0.9rem}
.tier-copy p{color:var(--graphite);font-size:var(--small);margin-bottom:0.8rem}
.tier-copy p:last-of-type{margin-bottom:1.4rem}
.uses{list-style:none;display:grid;gap:0.55rem}
.uses li{display:flex;align-items:flex-start;gap:0.7rem;font-size:var(--small);color:var(--ink)}
.uses li svg{flex:none;width:16px;height:16px;color:var(--heat);margin-top:0.18rem}
.tier-photo{position:relative;background:radial-gradient(circle at 50% 40%,#1d3149,#0a1525);display:flex;align-items:center;justify-content:center;padding:1.6rem;overflow:hidden}
.tier-photo::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(124,150,170,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(124,150,170,0.10) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 60%,transparent 92%);mask-image:radial-gradient(circle at 50% 45%,#000 60%,transparent 92%)}
.tier-photo img{position:relative;z-index:2;max-width:84%;max-height:340px;object-fit:contain;filter:drop-shadow(0 20px 34px rgba(0,0,0,0.55))}
.tier-photo .tlabel{position:absolute;z-index:3;top:1rem;left:1rem;font-family:'JetBrains Mono',monospace;font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--silver)}
.tier-photo .tlabel b{color:var(--heat)}
.tier-photo .reg{position:absolute;width:14px;height:14px;opacity:0.5}
.tier-photo .reg.tl{top:12px;right:12px;border-top:1px solid var(--silver);border-right:1px solid var(--silver)}
.tier-photo .reg.br{bottom:12px;left:12px;border-bottom:1px solid var(--silver);border-left:1px solid var(--silver)}

/* HOW WE HELP (dark) */
.pick{background:var(--grad-ink);padding:clamp(4.5rem,9vw,7rem) 0;color:var(--paper)}
.pick .sec-head h2{color:var(--paper)}
.pick-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.pick-grid .intro{color:rgba(247,246,242,0.74);font-size:var(--body-lg)}
.consider{list-style:none;display:grid;gap:0}
.consider li{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 0;border-bottom:1px solid rgba(247,246,242,0.1);font-family:'JetBrains Mono',monospace;font-size:0.82rem;letter-spacing:0.01em;color:rgba(247,246,242,0.86);opacity:0;transform:translateX(18px);transition:opacity var(--dur-slow) var(--ease-out-quart),transform var(--dur-slow) var(--ease-out-quart)}
.consider li:last-child{border-bottom:none}
.consider li.in{opacity:1;transform:none}
.consider li .ar{color:var(--heat);flex:none}

/* CTA */
.cta{background:var(--grad-steel);padding:clamp(4.5rem,9vw,7rem) 0;text-align:center}
.cta .eyebrow{justify-content:center;margin-bottom:1.4rem}
.cta h2{font-family:'Fraunces',serif;font-weight:300;color:var(--paper);font-size:var(--display-lg);letter-spacing:-0.02em;margin-bottom:1rem}
.cta p{color:rgba(247,246,242,0.74);max-width:34rem;margin:0 auto 2rem}

/* FOOTER */
footer{background:var(--grad-ink);color:rgba(247,246,242,0.7);padding:4.5rem 0 2.2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(247,246,242,0.1)}
.foot-brand .mark{font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem;color:var(--paper)}
.foot-brand p{margin-top:0.6rem;font-size:var(--small);max-width:18rem}
.foot-col h4{font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--silver);margin-bottom:1rem}
.foot-col a,.foot-col .ci{display:block;font-size:var(--small);color:rgba(247,246,242,0.72);padding:0.32rem 0;transition:color var(--dur-fast)}
.foot-col a:hover{color:var(--heat)}
.foot-col .ci.ph{color:var(--silver);font-family:'JetBrains Mono',monospace;font-size:0.72rem}
.copyright{padding-top:1.8rem;font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.06em;color:var(--silver)}

@media(max-width:980px){
  .sec-head{grid-template-columns:1fr;gap:1rem}
  .tier-panel.show{grid-template-columns:1fr}
  .tier-photo{order:-1;min-height:280px}
  .pick-grid{grid-template-columns:1fr;gap:1.5rem}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav-links{display:none}.nav-toggle{display:block}
  .tier-nav{grid-template-columns:1fr}
  .capacity{flex-wrap:wrap}
  .cap-ticks{width:100%;margin-top:0.3rem}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.2s !important}
  .hero-inner h1 .word,.hero-inner .lead,.pill,.reveal,.consider li{opacity:1 !important;transform:none !important}
  .updraft{display:none}
}
