/* ============================================================
   AEW Valves — front page styles.
   Design tokens are the source of truth in theme.json; this file
   consumes the generated --wp--preset--* custom properties and adds
   layout, motion, and responsive behaviour.
   The drop is the original brand mark (assets/img/drop-logo.png) —
   25-year equity, never re-drawn.
   ============================================================ */

:root{
  --paper:var(--wp--preset--color--paper,#ffffff);
  --fog:var(--wp--preset--color--fog,#f4f5f7);
  --hairline:var(--wp--preset--color--hairline,#e3e5ea);
  --ink:var(--wp--preset--color--ink,#111318);
  --ink-soft:var(--wp--preset--color--ink-soft,#3a3d45);
  --blue:var(--wp--preset--color--aew-blue,#29459b);
  --blue-strong:var(--wp--preset--color--aew-blue-strong,#1f3576);
  --red:var(--wp--preset--color--aew-red,#ed1c24);
  --display:var(--wp--preset--font-family--display,"Fraunces",Georgia,serif);
  --text:var(--wp--preset--font-family--text,"Inter",system-ui,sans-serif);
  --mono:var(--wp--preset--font-family--mono,"IBM Plex Mono",ui-monospace,monospace);
  --wrap:1120px; --measure:680px; --nav-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:17px;line-height:1.6;font-weight:400;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.06;margin:0}
a{color:var(--blue);text-decoration:none}
img,svg{max-width:100%;display:block}
::selection{background:rgba(41,69,155,.14)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(22px,5vw,64px)}
.mono{font-family:var(--mono)}
.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}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--ink-soft);font-weight:500}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.nav.is-scrolled{border-bottom-color:var(--hairline);background:rgba(255,255,255,.86)}
.nav__in{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(22px,5vw,64px);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;flex-direction:column;line-height:1;color:var(--ink)}
.brand__mark{font-weight:700;letter-spacing:-.02em;font-size:1.16rem}
.brand__mark .a{color:var(--red)}
.brand__sub{font-family:var(--mono);font-weight:500;font-size:.58rem;letter-spacing:.2em;
  color:var(--ink-soft);text-transform:uppercase;margin-top:5px}
.navlinks{display:flex;align-items:center;gap:clamp(18px,3vw,34px)}
.navlinks a{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);position:relative;padding-block:6px}
.navlinks a:not(.enquire)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--blue);transition:right .3s var(--ease-out)}
.navlinks a:not(.enquire):hover{color:var(--blue)}
.navlinks a:not(.enquire):hover::after{right:0}
.navlinks .enquire{color:var(--blue);border:1px solid var(--hairline);border-radius:3px;
  padding:9px 15px;transition:border-color .25s var(--ease),color .25s var(--ease)}
.navlinks .enquire:hover{border-color:var(--blue);color:var(--blue-strong)}
.navlinks a[aria-current="page"]{color:var(--blue)}
.navlinks a[aria-current="page"]:not(.enquire)::after{right:0}

/* ---------- hero (horizontal / banner-style) ---------- */
.hero{position:relative;min-height:calc(100svh - var(--nav-h));display:flex;align-items:center}
.hero__inner{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(40px,7vh,96px) clamp(22px,5vw,64px) clamp(84px,12vh,140px);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  column-gap:clamp(30px,5vw,80px);row-gap:clamp(30px,5vw,56px)}
.hero__lede{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,26px)}
.tagline{width:min(100%,560px);height:auto}
.hero__sub{font-family:var(--mono);font-size:.82rem;letter-spacing:.03em;color:var(--ink-soft);
  max-width:52ch;line-height:1.8}
.dropstage{margin:0;display:flex;justify-content:center;align-items:center}
.dropstage .drop{height:clamp(300px,46vh,520px);width:auto;
  filter:drop-shadow(0 24px 38px rgba(43,108,150,.22));animation:float 7.5s ease-in-out infinite}
.hero__index{grid-column:1 / -1;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);display:flex;flex-wrap:wrap;justify-content:center;gap:9px 0;margin:0}
.hero__index span{position:relative;padding-inline:14px}
.hero__index span::after{content:"";position:absolute;right:0;top:50%;width:1px;height:11px;
  background:var(--red);transform:translateY(-50%);opacity:.85}
.hero__index span:last-child::after{display:none}
.scrollcue{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px}
.scrollcue span{display:inline-block;animation:nudge 2.4s var(--ease) infinite}
.scrollcue:hover{color:var(--blue)}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- section shell ---------- */
.section{padding-block:clamp(72px,11vh,150px)}
.sec-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,4vw,46px)}
.sec-eyebrow .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.sec-eyebrow .line{flex:1;height:1px;background:var(--hairline)}
.sec-eyebrow .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink-soft)}
.range h2{font-size:clamp(2rem,1.5rem+2vw,3.2rem)}
.range .lead{color:var(--ink-soft);max-width:var(--measure);margin:14px 0 clamp(30px,5vw,56px);
  font-size:clamp(1.06rem,1rem+.4vw,1.24rem)}

/* family list */
.famlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.fam{border-bottom:1px solid var(--hairline)}
.fam a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(14px,2.4vw,30px);
  padding:clamp(20px,2.6vw,30px) 4px;color:var(--ink);position:relative;
  transition:padding-left .32s var(--ease-out),color .25s var(--ease)}
.fam a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--ease-out)}
.fam a:hover,.fam a:focus-visible{padding-left:22px;color:var(--blue)}
.fam a:hover::before,.fam a:focus-visible::before{transform:scaleY(1)}
.fam .idx{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);letter-spacing:.08em;transition:color .25s}
.fam a:hover .idx{color:var(--blue)}
.fam .name{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,1.1rem+1.5vw,2.35rem);letter-spacing:-.02em}
.fam .name u{text-decoration:none;background-image:linear-gradient(var(--blue),var(--blue));
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease-out);padding-bottom:4px}
.fam a:hover .name u,.fam a:focus-visible .name u{background-size:100% 1.5px}
.fam .meta{font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);letter-spacing:.01em;
  text-align:right;display:flex;align-items:center;gap:14px;justify-content:flex-end;white-space:nowrap}
.fam .arrow{opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease-out);color:var(--blue)}
.fam a:hover .arrow,.fam a:focus-visible .arrow{opacity:1;transform:translateX(0)}

/* ---------- footer ---------- */
.foot{background:var(--fog);border-top:1px solid var(--hairline);padding-block:clamp(56px,8vh,96px)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,52px)}
.foot__brand{display:flex;gap:18px;align-items:flex-start}
.foot__brand .fmark{width:34px;height:auto;display:block;flex:none}
.foot__brand b{font-weight:600;font-size:1.02rem;letter-spacing:-.01em;display:block}
.foot__brand .fsub{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.foot h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:600;margin:0 0 12px}
.foot p,.foot address{margin:0 0 8px;font-style:normal;color:var(--ink-soft);font-size:.92rem;line-height:1.7}
.foot a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.foot a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.foot .clients{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--ink);line-height:1.9}
.foot__base{max-width:var(--wrap);margin-inline:auto;padding:clamp(22px,3vw,30px) clamp(22px,5vw,64px) 0;
  margin-top:clamp(30px,5vw,52px);border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px 24px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--ink-soft);text-transform:uppercase}

/* ---------- reveal / entrance ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
@media (prefers-reduced-motion:no-preference){
  .hero__lede{animation:rise 1s var(--ease-out) both .1s}
  .dropstage{animation:dropin 1.3s var(--ease-out) both .18s}
  .hero__index{animation:rise 1s var(--ease-out) both .5s}
  .scrollcue{animation:fadein 1s ease both 1s}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dropin{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero__inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .dropstage{order:1}
  .hero__lede{order:2;align-items:center}
  .hero__index{order:3;justify-content:center}
  .dropstage .drop{height:clamp(240px,40vh,360px)}
  .tagline{width:min(88vw,460px)}
  .hero__sub{max-width:46ch}
}
@media (max-width:860px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand__sub{display:none}
  .navlinks .range-link{display:none}
  .fam a{grid-template-columns:auto 1fr;row-gap:8px}
  .fam .meta{grid-column:1 / -1;justify-content:flex-start;text-align:left;white-space:normal}
  .foot__grid{grid-template-columns:1fr}
  .foot__base{flex-direction:column}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dropstage .drop,.scrollcue span{animation:none!important}
  .reveal{opacity:1;transform:none}
}