@import url('./styles.css');

/*
 * VAV SITE IMPLEMENTATION — HERO RF-01 / RF-02
 * REBUILD, NOT REDESIGN.
 * Desktop: CSS BG -> PA-038 -> PA-001 -> PA-039 -> CODE/UI
 * Mobile:  CSS BG -> PA-031 -> PA-001 -> PA-032 -> CODE/UI
 * Approved PA masters are the only hero imagery source.
 */

.hero-section{position:relative;isolation:isolate;min-height:690px;height:min(80svh,780px);overflow:hidden;background:radial-gradient(58% 80% at 78% 18%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.44) 38%,transparent 70%),radial-gradient(34% 58% at 18% 54%,rgba(90,99,102,.20) 0%,rgba(159,166,167,.12) 46%,transparent 76%),linear-gradient(116deg,#f5f5f1 0%,#e9ebea 54%,#d6dadb 100%)}
.hero-section::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 8% 22%,rgba(29,36,38,.13),transparent 24%),radial-gradient(ellipse at 33% 82%,rgba(51,60,62,.11),transparent 23%),radial-gradient(ellipse at 61% 7%,rgba(255,255,255,.68),transparent 29%);filter:blur(34px)}
.hero{position:relative;z-index:1;height:100%;min-height:inherit;padding-top:96px;display:block;border-bottom:0}
.hero-copy{position:relative;z-index:8;width:min(43%,560px);height:100%;padding:72px 0 34px;display:flex;flex-direction:column;align-items:flex-start}
.hero-copy .eyebrow{color:rgba(9,9,9,.62)}
.hero h1{margin:25px 0 0;font-size:clamp(72px,6.55vw,108px);line-height:.82;letter-spacing:-.075em}
.hero-lead{max-width:510px;margin-top:24px;font-size:clamp(14px,1.05vw,18px);line-height:1.34;color:rgba(18,18,18,.67)}
.hero-actions{display:flex;gap:12px;margin-top:25px}.hero-actions .button{min-height:45px}.scroll-hint{margin-top:auto;margin-bottom:3px}
.hero-media{position:absolute;z-index:2;inset:0;overflow:hidden;background-size:cover!important;background-position:center!important;pointer-events:none}
.hero-pa-ready .hero-media,.hero-legacy-product-ready .hero-media{background-image:none!important}
.hero-media-backdrop{position:absolute;z-index:1;inset:-5% -4% -8% 30%;background:url('./assets/production/PA-038_GLASS_HERO_BACK_DESKTOP.png') center/contain no-repeat;opacity:0;pointer-events:none}
.hero-product{position:absolute;z-index:2;width:min(63vw,900px);height:94%;right:-2.4%;top:1.8%;object-fit:contain;object-position:60% 50%;max-width:none;opacity:0;filter:drop-shadow(0 28px 42px rgba(0,0,0,.16))}
.hero-media::after{content:"";position:absolute;z-index:3;inset:-5% -7% -10% 24%;background:url('./assets/production/PA-039_GLASS_HERO_FRONT_DESKTOP.png') center/contain no-repeat;opacity:0;pointer-events:none}
.hero-pa-ready .hero-media-backdrop,.hero-pa-ready .hero-product,.hero-pa-ready .hero-media::after{opacity:1}.hero-legacy-product-ready .hero-product{opacity:1}.hero-legacy-product-ready .hero-media-backdrop,.hero-legacy-product-ready .hero-media::after{opacity:0}.collection-link{z-index:9;right:20px;bottom:24px;pointer-events:auto}

.site-header{top:12px}.nav-shell{min-height:58px;height:58px;background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(236,238,237,.40));border-color:rgba(255,255,255,.86);box-shadow:0 14px 38px rgba(18,24,26,.10),inset 0 1px 0 rgba(255,255,255,.94)}.mobile-nav-pill,.mobile-menu-button{display:none}

/* APPROVED LANDING FLOW / SECTION SCALE */
.production-section,.assortment-section,.services-section,.cases-section{min-height:76svh}
.production-section{display:flex;align-items:center;padding-block:clamp(82px,7vw,120px)}
.production-panel{width:min(var(--vav-max),calc(100% - var(--vav-gutter-desktop)*2))}
.production-head h2{max-width:760px}
.production-body{min-height:450px}
.production-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:26px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.18)}
.production-specs div{padding:14px 14px 15px 0}.production-specs dt{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48)}.production-specs dd{margin:5px 0 0;font-size:12px;color:#fff}
.assortment-section,.services-section{display:flex;flex-direction:column;justify-content:center}
.assortment-browser{min-height:590px;height:min(64svh,680px)}
.services-stage{min-height:540px}
.services-list article{transition:opacity var(--vav-fast) ease}.services-list article:not(.is-active){opacity:.46}

.clients-section{border-bottom:1px solid var(--vav-line);background:#f0f0ec}
.clients-row{min-height:128px;display:grid;grid-template-columns:1.3fr repeat(6,1fr);align-items:center;gap:18px}
.clients-row>span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--vav-muted)}
.clients-row strong{font-family:"Actay Wide","Helvetica Neue",Arial,sans-serif;font-size:clamp(14px,1.45vw,22px);letter-spacing:-.035em;text-align:center;color:#181818}

.cases-section{background:#101111;color:#f4f4ef;padding-block:clamp(90px,8vw,132px)}
.cases-section .section-head h2,.cases-section .section-head p{color:inherit}.cases-section .section-head>p:last-child{color:rgba(255,255,255,.58)}
.cases-stack{position:relative}.case-card{min-height:560px}.case-placeholder{min-height:100%;background:radial-gradient(circle at 68% 38%,rgba(255,255,255,.14),transparent 25%),linear-gradient(145deg,#222423,#090a0a)}

.proof-dark{width:100%;max-width:none;padding-inline:max(var(--vav-gutter-desktop),calc((100vw - var(--vav-max))/2));background:#0d0e0e;color:#f5f5ef;border-color:rgba(255,255,255,.16)}
.proof-dark article{min-height:170px;border-color:rgba(255,255,255,.16)}.proof-dark strong{color:#fff}.proof-dark span{color:rgba(255,255,255,.55)}

.brief-section{background:#111212;color:#f4f4ef;border-top:1px solid rgba(255,255,255,.13)}
.brief-section h2{color:#f4f4ef}.brief-intro{color:rgba(255,255,255,.58)}
.brief-form label>span{color:rgba(255,255,255,.58)}
.brief-form input,.brief-form textarea,.brief-form select{color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.22)}
.brief-form input::placeholder,.brief-form textarea::placeholder{color:rgba(255,255,255,.38)}

footer{position:relative;overflow:hidden;background:#090a0a;color:#f4f4ef;padding:0}
.contacts-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .8fr .7fr;gap:clamp(40px,7vw,110px);padding-block:clamp(90px,9vw,150px);border-bottom:1px solid rgba(255,255,255,.17)}
.contacts-grid h2{margin:22px 0 26px;font-family:"Actay Wide","Helvetica Neue",Arial,sans-serif;font-size:clamp(58px,6vw,96px);line-height:.86;letter-spacing:-.07em}.contacts-grid>div:first-child>p:last-child{max-width:430px;color:rgba(255,255,255,.55)}
.contact-list{display:flex;flex-direction:column}.contact-list>*{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:10px;color:rgba(255,255,255,.5)}.contact-list strong{display:block;margin-top:4px;font-size:14px;font-weight:600;color:#fff}
.contact-cta{align-self:end}.contact-cta p{font-size:12px;color:rgba(255,255,255,.55)}.contact-cta small{display:block;margin-top:22px;color:rgba(255,255,255,.42);font-size:9px;line-height:1.55;text-transform:uppercase;letter-spacing:.12em}
footer .footer-grid{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;min-height:128px}footer .footer-grid nav{display:flex;justify-content:center;gap:22px;font-size:10px;color:rgba(255,255,255,.58)}footer .footer-grid>div:last-child{display:flex;flex-direction:column;align-items:flex-end;gap:9px;font-size:10px}footer .footer-grid small{color:rgba(255,255,255,.38)}

@media (max-width:900px){
  .hero-section{height:70svh;min-height:560px;max-height:650px;background:radial-gradient(76% 52% at 83% 6%,rgba(255,255,255,.97),transparent 69%),radial-gradient(84% 76% at 7% 59%,rgba(100,111,114,.16),transparent 68%),linear-gradient(145deg,#f5f6f5 0%,#dce1e3 58%,#eef0ef 100%)}
  .hero-section::before{inset:-16%;background:radial-gradient(ellipse at 2% 54%,rgba(60,72,76,.15),transparent 30%),radial-gradient(ellipse at 88% 10%,rgba(255,255,255,.78),transparent 32%);filter:blur(38px)}
  .site-header{top:10px}.nav-shell{width:calc(100% - 20px);height:54px;min-height:54px;padding:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;background:transparent;border:0;box-shadow:none;overflow:visible}.nav-shell::before{display:none}.logo{z-index:5;font-size:27px;color:#fff;mix-blend-mode:difference;letter-spacing:-.095em}.nav-links,.nav-cta{display:none!important}
  .mobile-nav-pill{display:flex;justify-self:center;align-items:center;gap:1px;padding:4px;border:1px solid rgba(255,255,255,.82);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(232,236,236,.30));-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);box-shadow:0 12px 34px rgba(19,25,27,.09),inset 0 1px 0 rgba(255,255,255,.92);pointer-events:auto}.mobile-nav-pill a{display:block;padding:8px 8px 7px;border-radius:999px;font-size:9px;line-height:1;white-space:nowrap;color:rgba(9,9,9,.72)}
  .mobile-menu-button{display:grid;place-content:center;gap:4px;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(245,247,246,.52);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 10px 28px rgba(18,24,26,.08),inset 0 1px 0 rgba(255,255,255,.94);pointer-events:auto}.mobile-menu-button span{width:13px;height:1px;background:#111;display:block}
  .hero{padding-top:76px;width:calc(100% - 24px)}.hero-copy{width:64%;height:100%;padding:62px 0 22px}.hero-copy .eyebrow{display:none}.hero h1{margin:0;max-width:520px;font-size:clamp(58px,10.4vw,92px);line-height:.82;letter-spacing:-.072em}.hero-lead{margin-top:28px;max-width:180px;font-size:clamp(15px,2.15vw,19px);line-height:1.12;color:rgba(12,12,12,.64)}.hero-actions{margin-top:25px}.hero-actions .button-light{display:none}.hero-actions .button-dark{min-height:44px;padding-inline:17px;color:#0a0a0a;background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.94);box-shadow:0 12px 28px rgba(25,31,33,.10),inset 0 1px rgba(255,255,255,.96)}
  .hero-media-backdrop{inset:4% -24% -3% 18%;background-image:url('./assets/production/PA-031_GLASS_HERO_BACK_MOBILE.png');background-size:contain;background-position:center}.hero-product{width:77%;height:70%;right:-8%;top:25%;object-position:center;filter:drop-shadow(0 24px 34px rgba(0,0,0,.14))}.hero-media::after{inset:8% -29% -12% 6%;background-image:url('./assets/production/PA-032_GLASS_HERO_FRONT_MOBILE.png');background-size:contain;background-position:center}.collection-link{display:none}.scroll-hint{position:absolute;left:0;bottom:23px;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:7px;letter-spacing:.15em;color:rgba(9,9,9,.55);writing-mode:vertical-rl;transform:rotate(180deg)}
  .production-section,.assortment-section,.services-section,.cases-section{min-height:0}.production-section{padding-block:76px}.production-specs{grid-template-columns:1fr}.production-specs div{border-bottom:1px solid rgba(255,255,255,.14)}
  .assortment-browser{height:720px;min-height:0}.services-stage{min-height:0}
  .clients-row{min-height:110px;grid-template-columns:repeat(3,1fr);padding-block:20px}.clients-row>span{grid-column:1/-1}.clients-row strong{text-align:left}
  .case-card{min-height:70svh}
  .proof-dark{padding-inline:24px;grid-template-columns:repeat(2,1fr)}
  .contacts-grid{grid-template-columns:1fr 1fr;gap:44px}.contact-cta{grid-column:1/-1;align-self:auto}.contacts-grid h2{font-size:clamp(54px,9vw,78px)}footer .footer-grid{grid-template-columns:auto 1fr}footer .footer-grid nav{display:none}
}

@media (max-width:640px){
  .hero-section{min-height:560px;max-height:650px}.nav-shell{width:calc(100% - 18px)}.logo{font-size:24px}.mobile-nav-pill{padding:3px;gap:0;transform:translateX(1px)}.mobile-nav-pill a{padding:7px 5px 6px;font-size:7.7px}.mobile-menu-button{width:38px;height:38px}.hero{padding-top:70px}.hero-copy{width:67%;padding-top:54px}.hero h1{font-size:clamp(49px,14vw,68px);line-height:.82}.hero-lead{max-width:145px;margin-top:24px;font-size:14px}.hero-actions{margin-top:22px}.hero-actions .button-dark{min-height:42px;padding-inline:14px;font-size:10px}.hero-product{width:88%;height:65%;right:-20%;top:30%}.hero-media-backdrop{inset:4% -43% -1% 7%}.hero-media::after{inset:10% -42% -13% -8%}.scroll-hint{bottom:17px}
  .section-head{grid-template-columns:1fr;gap:12px}.section-head h2{font-size:clamp(48px,14vw,68px)}
  .production-section{padding-block:62px}.production-head{grid-template-columns:1fr}.production-head .button{display:none}.production-body{min-height:0}.flow-item{min-height:74px}
  .assortment-browser{height:690px;grid-template-columns:1fr;grid-template-rows:44% 56%}.wheel-panel{border-right:0;border-bottom:1px solid var(--vav-line);padding:22px 16px}.option-wheel-item{font-size:clamp(30px,10vw,48px)}
  .services-stage{grid-template-columns:1fr}.services-media{min-height:380px;order:-1}.services-list article{padding-block:16px}
  .clients-row{grid-template-columns:repeat(2,1fr);gap:18px}.clients-row>span{grid-column:1/-1}
  .cases-section{padding-block:70px}.case-card{min-height:76svh;border-radius:24px}.case-copy{padding:24px}
  .proof-dark{padding-inline:12px;grid-template-columns:1fr 1fr}.proof-dark article{min-height:120px;padding:18px 12px}.proof-dark strong{font-size:34px}
  .brief-grid{grid-template-columns:1fr}.brief-form{margin-top:42px}.form-row{grid-template-columns:1fr}
  .contacts-grid{grid-template-columns:1fr;padding-block:72px}.contacts-grid h2{font-size:clamp(48px,14vw,66px)}.contact-cta{grid-column:auto}footer .footer-grid{min-height:110px;grid-template-columns:1fr auto}.footer-logo{font-size:44px}
}

@media (prefers-reduced-motion:reduce){.hero-product,.hero-media-backdrop,.hero-media::after{transition:none!important;animation:none!important}}