/* ============================================================
   AEW Valves — home page.
   Faithful "Love Every Drop" logo lockup (love every drop + drop,
   the company line boxed against the drop's dot, clickable families,
   the SaveEnergy line) over a subtle live drop-spectrum aurora.
   Tokens mirror theme.json. No build step, no dependencies.
   NOTE: the hero uses a fixed aspect stage (2571/1251); .b-org meets
   the drop's dot — if you change .b-drop's size/position, re-check .b-org.
   ============================================================ */
:root{
  --paper:#ffffff; --fog:#f4f5f7; --hairline:#e3e5ea;
  --ink:#111318; --ink-soft:#3a3d45;
  --blue:#29459b; --blue-strong:#1f3576; --red:#ed1c24;
  --display:"Fraunces",Georgia,serif; --text:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:Arial,"Helvetica Neue",Helvetica,var(--text),sans-serif;
  --staff:#bacad3;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::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;overflow-x:hidden}
h4{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}          /* height:auto safeguard against attr-vs-CSS distortion */
::selection{background:rgba(41,69,155,.14)}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(22px,5vw,72px)}
.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}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;padding:clamp(44px,7vh,88px) 0}

/* live aurora — faithful vanilla port of the reference recipe: repeating aurora +
   white-gradient layers, blur + invert, a difference-blended animated layer, radial
   mask, 60s background-position drift. No React / Tailwind / framer. */
.hero__aura{position:absolute;inset:-12px;z-index:0;pointer-events:none;opacity:.5;will-change:transform;
  --aurora:repeating-linear-gradient(100deg,#3b82f6 10%,#a5b4fc 15%,#93c5fd 20%,#ddd6fe 25%,#60a5fa 30%);
  --whiteGrad:repeating-linear-gradient(100deg,#fff 0%,#fff 7%,transparent 10%,transparent 12%,#fff 16%);
  background-image:var(--whiteGrad),var(--aurora);background-size:300%,200%;background-position:50% 50%,50% 50%;
  filter:blur(10px) invert(1);
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
          mask-image:radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%)}
.hero__aura::after{content:"";position:absolute;inset:0;
  background-image:var(--whiteGrad),var(--aurora);background-size:200%,100%;background-position:50% 50%,50% 50%;
  mix-blend-mode:difference;animation:aurora 60s linear infinite}
@keyframes aurora{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}

.banner{position:relative;z-index:1;width:min(1240px,94vw);aspect-ratio:2571 / 1251;container-type:inline-size;margin-inline:auto;
  --saveH:min(69.7px,5.285vw);opacity:0;animation:rise 1s var(--ease-out) forwards .12s}
.banner>*{position:absolute;margin:0}

/* tagline — right-aligned to the company box's right edge (near the drop) */
.b-lettering{right:28.4%;top:30%;width:52%;height:auto}
.b-drop{right:11.3%;top:6%;height:60%;width:auto;animation:floatY 7s ease-in-out infinite 1.2s}

/* company line (the page h1; font-size/margin/letter-spacing pinned to the <p> it replaced) — tidy box whose right edge meets the drop's dot, vertically
   centred on it, height ≈ the dot; floats in sync with the drop */
.b-org{top:58.2%;right:28.4%;font-size:inherit;margin:0;letter-spacing:normal;transform:translateY(-50%);text-align:right;white-space:nowrap;line-height:1.06;
  font-family:var(--sans);font-weight:700;color:var(--blue);animation:floatYc 7s ease-in-out infinite 1.2s}
.b-org .l1{display:block;font-size:max(1.55cqw,12px);letter-spacing:.003em}
.b-org .l1 .aew{color:var(--red)}
.b-org .l2{display:block;font-size:max(1.18cqw,9.5px);letter-spacing:.008em;margin-top:.12cqw}

/* clickable product families — static line between company + SaveEnergy */
.b-fams{top:73%;left:50%;transform:translateX(-50%);display:flex;align-items:center;white-space:nowrap;
  font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:max(1.5cqw,11px);letter-spacing:.05em}
.b-fams a{color:var(--blue);padding:.4cqw 1.4cqw;position:relative;transition:color .2s var(--ease)}
.b-fams a:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1.6px;height:1.05em;background:var(--red);opacity:.9}
.b-fams a::before{content:"";position:absolute;left:1.4cqw;right:1.4cqw;bottom:.02cqw;height:1.6px;background:var(--blue-strong);transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease-out)}
.b-fams a:hover,.b-fams a:focus-visible{color:var(--blue-strong)}
.b-fams a:hover::before,.b-fams a:focus-visible::before{transform:scaleX(1)}
.b-fams a:focus-visible{outline-offset:3px;border-radius:3px}

/* SaveEnergy: FULL-BLEED staff lines (banner-scaled height) + wordmark aligned to the
   tagline's 'l' via a banner-width inner box. Lines draw in left→right. */
.b-save{left:50%;transform:translateX(-50%);bottom:2.6%;width:100vw;height:var(--saveH)}
.b-save-lines{position:absolute;inset:0;z-index:1}
.b-save-lines i{position:absolute;left:0;right:0;height:2px;background:var(--staff);transform:scaleX(0);transform-origin:left center;
  animation:drawline 1.1s var(--ease-out) forwards}
.b-save-lines i:nth-child(1){top:31.2%;animation-delay:.50s}
.b-save-lines i:nth-child(2){top:42.4%;animation-delay:.58s}
.b-save-lines i:nth-child(3){top:53.5%;animation-delay:.66s}
.b-save-lines i:nth-child(4){top:64.6%;animation-delay:.74s}
.b-save-lines i:nth-child(5){top:75.7%;animation-delay:.82s}
.b-save-lines i:nth-child(6){top:86.8%;animation-delay:.90s}
.b-save-lines i:nth-child(7){top:97.9%;animation-delay:.98s}
.b-save-inner{position:absolute;inset:0;width:min(1240px,94vw);margin-inline:auto;z-index:2}
.b-save-mark{position:absolute;left:20%;top:2%;height:96%;width:auto}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes floatYc{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 4px))}}
@keyframes drawline{to{transform:scaleX(1)}}

/* ---------- FOOTER: see assets/css/footer.css (shared, inlined by functions.php) ---------- */

/* reveal */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}

/* ---------- responsive ---------- */
@media (max-width:720px){
  /* hero → readable vertical stack */
  .banner{width:min(92vw,460px);aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;
    gap:clamp(16px,4vw,26px);container-type:normal;--saveH:8vw;animation:rise .9s var(--ease-out) forwards .1s}
  .banner>*{position:static!important;transform:none!important;inset:auto!important;animation:none!important}
  .b-lettering{width:min(82vw,400px)}
  .b-drop{width:min(44vw,200px);height:auto}
  .b-org{text-align:center;line-height:1.15}
  .b-org .l1{font-size:clamp(.9rem,3.6vw,1.1rem)}
  .b-org .l2{font-size:clamp(.62rem,2.6vw,.8rem);margin-top:2px}
  .b-fams{flex-wrap:wrap;justify-content:center;font-size:clamp(.74rem,3vw,.92rem);gap:2px 0}
  .b-fams a{padding:.5em 1.1em}
  .b-fams a::before{left:1.1em;right:1.1em;bottom:.05em}
  /* SaveEnergy full-bleed in the flex column (in-flow break-out) */
  .b-save{position:relative!important;transform:none!important;width:100vw;margin-left:calc(50% - 50vw);height:var(--saveH)}
}
@media (max-width:820px){
}
@media (max-width:560px){
  body{font-size:16px}
}

/* reduced motion — freeze aurora, float, and the staff-line draw (show them settled) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .banner,.b-drop,.b-org{opacity:1!important;animation:none!important}
  .hero__aura::after{animation:none!important}
  .b-save-lines i{animation:none!important;transform:none!important}
  .reveal{opacity:1;transform:none}
}