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

body{font-family:'Manrope',sans-serif;background:var(--grad-light);background-attachment:fixed;color:var(--ink);font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- NAV ---------- */

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

.btn-secondary{background:transparent;color:var(--paper);border:1px solid rgba(255,255,255,0.3)}
.btn-secondary:hover{border-color:rgba(255,255,255,0.7)}

/* ---------- PAGE HERO ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--grad-steel);padding:clamp(8.5rem,16vw,11rem) 0 clamp(3.5rem,7vw,5.5rem)}
.page-hero .mesh-a{position:absolute;top:-30%;left:-8%;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(232,85,43,0.16) 0%,transparent 62%);filter:blur(8px);animation:drift 26s ease-in-out infinite alternate}
.page-hero .mesh-b{position:absolute;bottom:-40%;right:-12%;width:64vw;height:64vw;border-radius:50%;background:radial-gradient(circle,rgba(38,86,150,0.4) 0%,transparent 60%)}
@keyframes drift{0%{transform:translate(0,0)}100%{transform:translate(5%,4%)}}
.page-hero .inner{position:relative;z-index:2;max-width:60rem}
/* decorative top-down kitchen-plan line drawing (silver, not a real floor plan) */
.page-hero .floorplan{position:absolute;z-index:1;top:0;bottom:0;right:clamp(1.5rem,4.5vw,5.5rem);display:flex;align-items:flex-end;padding-bottom:clamp(1.5rem,4vh,3.5rem);width:clamp(320px,33vw,480px);color:var(--silver);opacity:0.5;pointer-events:none}
.page-hero .floorplan svg{display:block;width:100%;height:auto;max-height:82%}
@media(max-width:1180px){.page-hero .floorplan{display:none}}
.page-hero h1{font-family:'Fraunces',serif;font-weight:300;font-size:var(--display-md);line-height:1.06;color:var(--paper);letter-spacing:-0.015em;margin:1.4rem 0 1.5rem}
.page-hero h1 .word{display:inline-block;opacity:0;transform:translateY(34px)}
.page-hero p.lead{font-size:var(--body-lg);max-width:42rem;color:rgba(247,246,242,0.74);opacity:0;transform:translateY(18px)}
.is-loaded .page-hero h1 .word{opacity:1;transform:translateY(0);transition:opacity 800ms var(--ease-out-expo),transform 800ms var(--ease-out-expo)}
.is-loaded .page-hero p.lead{opacity:1;transform:translateY(0);transition:opacity var(--dur-base) .7s,transform var(--dur-base) .7s}

/* ---------- SHARED SECTION SCAFFOLD ---------- */
section{position:relative}
.sec-head{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:end;margin-bottom:3rem}
@media(max-width:768px){.sec-head{grid-template-columns:1fr;gap:1.2rem}}
.sec-head h2{font-family:'Fraunces',serif;font-weight:300;font-size:var(--display-lg);line-height:1.04;letter-spacing:-0.015em;margin-top:1rem}
.sec-head .sub{color:var(--graphite);font-size:var(--body-lg);align-self:end}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 700ms var(--ease-out-quart),transform 700ms var(--ease-out-quart)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- STAT BILLBOARD (VOLTAGE) ---------- */
.billboard{position:relative;color:var(--paper);padding:clamp(5.5rem,11vw,9.5rem) 0;border-top:1px solid rgba(232,85,43,0.22);
  background:radial-gradient(85% 120% at 80% 0%,rgba(232,85,43,0.13),transparent 55%),radial-gradient(80% 110% at 0% 100%,rgba(38,86,150,0.12),transparent 55%),var(--grad-dark)}
.billboard::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,85,43,0.7) 35%,rgba(232,85,43,0.7) 65%,transparent);box-shadow:0 0 14px rgba(232,85,43,0.45)}
.billboard .eyebrow{justify-content:center;display:flex;margin-bottom:3.2rem;font-size:var(--small)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;text-align:center}
@media(max-width:820px){.stat-row{grid-template-columns:1fr;gap:3.4rem}}
.stat-cell .v{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(5rem,12.5vw,10.5rem);line-height:0.92;color:var(--paper);display:block;overflow-wrap:break-word}
.stat-cell.priceless .v{font-style:italic;font-weight:400;font-size:clamp(5rem,12.5vw,10.5rem);color:var(--heat);text-shadow:0 0 10px rgba(232,85,43,0.55),0 0 32px rgba(232,85,43,0.32),0 0 72px rgba(232,85,43,0.16);opacity:0;transform:scale(0.92)}
.stat-cell.priceless.in .v{opacity:1;transform:scale(1);transition:opacity 600ms var(--ease-out-expo),transform 600ms var(--ease-spring)}
.stat-cell .lbl{display:block;margin-top:1.3rem;font-family:'JetBrains Mono',monospace;font-size:0.82rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(247,246,242,0.66);opacity:0;transition:opacity var(--dur-base)}
.stat-cell .lbl.in{opacity:1}

/* ---------- CASE DEEP DIVE ---------- */
.case2{padding:clamp(4rem,8vw,6.5rem) 0;background:radial-gradient(120% 90% at 95% -5%,rgba(232,85,43,0.10),transparent 50%),radial-gradient(110% 90% at -5% 105%,rgba(26,43,69,0.12),transparent 52%),linear-gradient(165deg,#FCFBF9 0%,#F0ECE4 55%,#E7E1D7 100%)}
.case2-head{text-align:center;max-width:48rem;margin:0 auto 3.5rem}
.case2-head h2{font-family:'Fraunces',serif;font-weight:300;font-size:var(--display-md);line-height:1.06;margin:1rem 0 1rem;letter-spacing:-0.015em}
.case2-head .sub{color:var(--graphite);font-size:var(--body-lg)}
.case2-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.case2-grid{grid-template-columns:1fr;gap:2.5rem;align-items:start}}
.case2-story p{color:var(--graphite);font-size:var(--body-lg);margin-bottom:1.1rem}
.case2-story .lede{color:var(--ink);font-weight:600}
.case-stack{display:flex;flex-direction:column;gap:1.2rem}
.case-card{background:var(--grad-card);border:1px solid rgba(138,144,153,0.22);border-radius:8px;padding:1.8rem;opacity:0;transform:translateX(32px);transition:opacity 600ms var(--ease-out-quart),transform 600ms var(--ease-out-quart),box-shadow var(--dur-base),border-color var(--dur-base)}
.case-card.in{opacity:1;transform:translateX(0)}
.case-card .tag{font-family:'JetBrains Mono',monospace;font-size:var(--micro);letter-spacing:0.2em;text-transform:uppercase}
.case-card.before .tag{color:var(--silver)}
.case-card.after .tag{color:var(--heat)}
.case-card .cap{margin-top:0.8rem;font-family:'Fraunces',serif;font-size:1.3rem;color:var(--ink)}
.case-card.changed ul{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:0.6rem}
.case-card.changed li{display:flex;align-items:center;gap:0.7rem;color:var(--graphite);font-size:var(--small)}
.case-card.changed li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--heat);flex:none}
.case-card.after .saved{margin-top:1rem;font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--heat);font-weight:500;letter-spacing:0.04em}
.case2-cta{text-align:center;margin-top:3rem}

/* ---------- DESIGNERS ---------- */
.designers{padding:clamp(4rem,8vw,6.5rem) 0;background:radial-gradient(110% 90% at -5% -5%,rgba(26,43,69,0.13),transparent 52%),radial-gradient(100% 90% at 105% 105%,rgba(232,85,43,0.08),transparent 50%),linear-gradient(195deg,#EFEBE3 0%,#FAF8F3 55%,#F1EDE5 100%)}
.des-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem}
@media(max-width:820px){.des-grid{grid-template-columns:1fr;gap:3rem}}
.des{background:var(--grad-card);border:1px solid rgba(138,144,153,0.22);border-radius:12px;padding:clamp(1.8rem,3vw,2.6rem);opacity:0;transform:translateY(32px);transition:opacity 600ms var(--ease-out-quart),transform 600ms var(--ease-out-quart),box-shadow var(--dur-base),border-color var(--dur-base)}
.des.in{opacity:1;transform:translateY(0)}
.des:hover{border-color:rgba(232,85,43,0.35);box-shadow:0 16px 40px rgba(15,20,25,0.10)}
.des-head .nm{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);display:inline-block;line-height:1.1}
.des-head .ttl{display:block;margin-top:0.4rem;font-family:'JetBrains Mono',monospace;font-size:var(--micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--heat)}
.des-head .underline{display:block;width:0;height:2px;background:var(--heat);margin-top:0.9rem;transition:width 300ms var(--ease-out-quart)}
.des:hover .des-head .underline{width:56px}
.des-bio{margin-top:1.6rem;color:var(--graphite);font-size:var(--body)}
.des-bio .punch{display:block;margin-top:0.9rem;color:var(--ink);font-weight:600}
.creds{margin-top:1.4rem;display:flex;flex-direction:column;gap:0.55rem}
.creds .c{display:flex;align-items:center;gap:0.7rem;font-family:'JetBrains Mono',monospace;font-size:var(--small);color:var(--graphite)}
.creds .c::before{content:"";width:18px;height:1px;background:var(--heat);flex:none}

/* ---------- WHY DIFFERENT ---------- */
.different{padding:clamp(4rem,8vw,7rem) 0;color:var(--paper);
  background:radial-gradient(100% 120% at 100% 0%,rgba(232,85,43,0.09),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(38,86,150,0.10),transparent 55%),var(--grad-ink)}
.diff-row{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:baseline;padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.diff-row:last-of-type{border-bottom:none}
.diff-row .n{font-family:'JetBrains Mono',monospace;font-size:1.1rem;color:var(--heat);padding-top:0.6rem}
.diff-row .stmt{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.12;letter-spacing:-0.01em}
.diff-cta{text-align:center;margin-top:3.5rem;max-width:42rem;margin-left:auto;margin-right:auto}
.diff-cta p{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(1.3rem,3vw,1.9rem);color:rgba(247,246,242,0.85);margin-bottom:1.6rem;line-height:1.25}

/* ---------- FOOTER ---------- */
footer{background:radial-gradient(80% 130% at 0% 0%,rgba(26,43,69,0.22),transparent 60%),var(--grad-ink);color:var(--paper);padding:clamp(3.5rem,7vw,5rem) 0 2.2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.6rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.08)}
@media(max-width:768px){.foot-grid{grid-template-columns:1fr;gap:2.2rem}}
.foot-brand .mark{font-family:'Fraunces',serif;font-weight:600;font-size:1.6rem;color:var(--paper)}
.foot-brand p{color:var(--silver);margin-top:0.7rem;font-size:var(--small);font-style:italic;font-family:'Fraunces',serif}
.foot-col h4{font-family:'JetBrains Mono',monospace;font-size:var(--micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--heat);margin-bottom:1rem}
.foot-col a,.foot-col .ci{display:block;color:rgba(247,246,242,0.7);font-size:var(--small);padding:0.3rem 0;transition:color var(--dur-fast)}
.foot-col a:hover{color:var(--paper)}
.foot-col .ph{color:var(--silver);font-style:italic}
.copyright{padding-top:1.8rem;font-family:'JetBrains Mono',monospace;font-size:var(--micro);color:var(--silver);letter-spacing:0.06em}

@media(max-width:880px){.nav-links{display:none}.nav-toggle{display:block}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.2s !important}
  .page-hero h1 .word,.page-hero p.lead,.reveal,.case-card,.des,.stat-cell.priceless .v{opacity:1 !important;transform:none !important}
  .stat-cell .lbl{opacity:1 !important}
}