/*
 * Protect Wraps design system (shared)
 * Premium dark, red + black. Loaded by template-ahai-page.php.
 * All page bodies (post_content) use these classes. Scoped under .ahai-page.
 */

:root{
  --pw-header-h:71px;     /* sticky header: 14px padding + 42px burger/logo row + 14px + 1px border */
  --pw-bg:#0e0f11;        /* page background */
  --pw-bg-2:#141518;      /* alternating section */
  --pw-surface:#16181b;   /* cards */
  --pw-surface-2:#1c1f23; /* raised / hover */
  --pw-line:rgba(255,255,255,.08);
  --pw-line-2:rgba(255,255,255,.16);
  --pw-ink:#f5f6f7;       /* headings */
  --pw-text:#c4c9ce;      /* body */
  --pw-muted:#9099a1;     /* secondary */
  --pw-red:#f30013;       /* brand */
  --pw-red-hover:#ff2233;
  --pw-red-press:#c8000f;
  --pw-gold:#ffc53d;      /* review stars */
  --pw-radius:12px;
  --pw-radius-lg:16px;
  --pw-container:1200px;
  --pw-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pw-display:"Sora",var(--pw-font);
}

/* ---------- base ---------- */
html{ scroll-behavior:smooth; }
body.ahai-page{ margin:0; background:var(--pw-bg); color:var(--pw-text);
  font-family:var(--pw-font); line-height:1.7; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.ahai-page *,.ahai-page *::before,.ahai-page *::after{ box-sizing:border-box; }
.ahai-page img{ max-width:100%; height:auto; display:block; }
.ahai-page a{ color:var(--pw-red); text-decoration:none; }
.ahai-page a:hover{ color:var(--pw-red-hover); }
.ahai-page h1,.ahai-page h2,.ahai-page h3,.ahai-page h4{
  font-family:var(--pw-display); color:var(--pw-ink); line-height:1.15;
  font-weight:700; margin:0 0 .5em; letter-spacing:-.01em; }
.ahai-page p{ margin:0 0 1.1em; }
.pw-container{ max-width:var(--pw-container); margin:0 auto; padding:0 24px; }
.pw-section{ padding:clamp(56px,7vw,104px) 0; }
.pw-section--alt{ background:var(--pw-bg-2); }
.pw-eyebrow{ display:inline-block; font-family:var(--pw-display); text-transform:uppercase;
  letter-spacing:.18em; font-size:.72rem; font-weight:600; color:var(--pw-red); margin:0 0 16px; }
.pw-h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
.pw-lede{ color:var(--pw-muted); font-size:1.12rem; max-width:64ch; }
.pw-center{ text-align:center; }
.pw-center .pw-lede{ margin-left:auto; margin-right:auto; }

/* ---------- buttons ---------- */
.pw-btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--pw-display);
  font-weight:600; font-size:.98rem; padding:14px 26px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease,background .15s ease,border-color .15s ease; }
.ahai-page .pw-btn--primary{ background:var(--pw-red); color:#fff; }
.ahai-page .pw-btn--primary:hover{ background:var(--pw-red-hover); color:#fff; transform:translateY(-2px); }
.ahai-page .pw-btn--ghost{ background:transparent; color:var(--pw-ink); border-color:var(--pw-line-2); }
.ahai-page .pw-btn--ghost:hover{ border-color:var(--pw-red); color:var(--pw-ink); transform:translateY(-2px); }
.pw-cta-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- header ---------- */
.pw-header{ position:sticky; top:0; z-index:60; background:rgba(14,15,17,.92);
  backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--pw-line); }
.pw-header__in{ max-width:var(--pw-container); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:20px; }
.ahai-page .pw-logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.pw-logo img{ display:block; width:auto; height:38px; }
.pw-footer__brand .pw-logo img{ height:42px; }
@media(max-width:600px){ .pw-logo img{ height:32px; } }
.pw-nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.pw-nav a:not(.pw-btn){ color:var(--pw-text); font-size:.95rem; font-weight:500; }
.pw-nav a:not(.pw-btn):hover{ color:var(--pw-ink); }
.pw-header__phone{ color:var(--pw-ink); font-weight:600; font-family:var(--pw-display); white-space:nowrap; }
.pw-header__phone i{ color:var(--pw-red); }
.pw-burger,.pw-burger-cb{ display:none; }
/* header dropdown (Services, Locations).
 * Desktop: opens on hover/focus. Mobile: the group collapses behind a chevron, driven by a
 * checkbox so it stays CSS-only. The parent stays a real link (tapping "Services" goes to the
 * hub page); only the chevron expands the group. */
.pw-nav__drop{ position:relative; display:inline-flex; align-items:center; }
.pw-nav__row{ display:inline-flex; align-items:center; }
.pw-nav__row > a::after{ content:"\25be"; font-size:.7em; margin-left:6px; opacity:.7; }
.pw-drop-cb{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pw-drop-toggle{ display:none; }
.pw-drop{ display:none; position:absolute; top:100%; left:0; padding-top:12px; z-index:70; }
.pw-nav__drop:hover .pw-drop,.pw-nav__drop:focus-within .pw-drop{ display:block; }
.pw-drop__box{ background:var(--pw-bg-2); border:1px solid var(--pw-line); border-radius:12px; padding:8px; min-width:240px; }
.pw-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pw-drop__box a{ display:block; padding:9px 12px; border-radius:8px; font-size:.93rem; color:var(--pw-text); white-space:nowrap; }
.pw-drop__box a:hover{ background:var(--pw-surface-2); color:var(--pw-ink); }

/* ---------- hero ---------- */
.pw-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--pw-line);
  background:radial-gradient(120% 90% at 80% 0%,#1b1d21 0%,var(--pw-bg) 55%); }
.pw-hero__in{ max-width:var(--pw-container); margin:0 auto; padding:clamp(56px,8vw,108px) 24px clamp(48px,6vw,80px);
  max-width:760px; }

/* ---------- video hero ---------- */
/* The footage is a car in a brightly lit white studio, so white copy needs a heavy wash to stay
 * readable. The scrim is weighted to the left, where the copy sits, and thins out to the right so
 * the car itself stays visible rather than being flattened under a full-width overlay. */
.pw-hero--video{ background:#0a0b0c center/cover no-repeat; display:flex; align-items:center;
  min-height:clamp(540px,78vh,760px); }
.pw-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:72% 50%; z-index:0; pointer-events:none; }
.pw-hero--video::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,11,12,.94) 0%, rgba(10,11,12,.88) 32%,
    rgba(10,11,12,.58) 56%, rgba(10,11,12,.28) 100%); }
/* Blends the sticky header into the top and the next section into the bottom. */
.pw-hero--video::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,11,12,.7) 0%, rgba(10,11,12,0) 24%,
    rgba(10,11,12,0) 68%, var(--pw-bg) 100%); }
.pw-hero--video .pw-hero__in{ position:relative; z-index:2; max-width:var(--pw-container); width:100%; }
.pw-hero__copy{ max-width:620px; }

@media(max-width:760px){
  /* Genuinely full screen: header + hero = exactly one viewport, so the video reaches the bottom
   * of the phone instead of being cut short with dead space under it.
   * vh is the fallback; dvh is the real target because iOS measures vh WITHOUT the address bar,
   * which would push the hero taller than the visible area. */
  .pw-hero--video{ min-height:calc(100vh - var(--pw-header-h)); align-items:flex-end; }
  @supports (min-height:100dvh){
    .pw-hero--video{ min-height:calc(100dvh - var(--pw-header-h)); }
  }

  /* Portrait crops the sides off a landscape clip and shows its full height, so object-position Y
   * does nothing. Instead run the video taller than the hero and anchor it to the bottom: that
   * trims the empty studio wall above the car and lifts the car into the clear upper zone. */
  /* 50% centres the car in the portrait window: at 64% the right third was just studio wall. */
  .pw-hero__video{ height:calc(100% + 120px); top:auto; bottom:0; object-position:50% 50%; }

  /* Copy sits at the BOTTOM, so the gradient inverts: near-clear over the car, heavy under the
   * text. Alpha reaches ~0.66 by the time the copy starts (~52% down) to hold body-text contrast. */
  .pw-hero--video::before{ background:linear-gradient(180deg,
    rgba(10,11,12,.30) 0%, rgba(10,11,12,.08) 20%, rgba(10,11,12,.30) 40%,
    rgba(10,11,12,.62) 50%, rgba(10,11,12,.82) 60%, rgba(10,11,12,.94) 74%,
    var(--pw-bg) 100%); }
  .pw-hero--video::after{ background:none; }
  .pw-hero--video .pw-hero__in{ padding-top:24px; padding-bottom:40px; }
}
@media (prefers-reduced-motion: reduce){
  .pw-hero__video{ display:none; } /* the poster still shows via the section background */
}
.pw-hero h1{ font-size:clamp(2.1rem,5.2vw,3.7rem); margin:0 0 18px; }
.pw-hero h1 .accent{ color:var(--pw-red); }
.pw-hero__sub{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--pw-text); max-width:60ch; margin:0 0 28px; }
.pw-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:34px;
  color:var(--pw-muted); font-size:.92rem; }
.pw-trust .div{ width:1px; height:15px; background:var(--pw-line-2); }
.pw-trust i{ color:var(--pw-red); vertical-align:-2px; margin-right:5px; }
.pw-stars{ color:var(--pw-gold); letter-spacing:1px; }

/* ---------- grids & cards ---------- */
.pw-grid{ display:grid; gap:20px; }
.pw-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pw-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pw-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.pw-card{ background:var(--pw-surface); border:1px solid var(--pw-line); border-radius:var(--pw-radius-lg);
  padding:28px 26px; transition:border-color .15s ease,transform .15s ease; }
.pw-card--link:hover{ border-color:var(--pw-line-2); transform:translateY(-3px); }
.pw-card h3{ font-size:1.2rem; margin:0 0 8px; }
.pw-card p{ color:var(--pw-muted); margin:0; font-size:.98rem; }
.pw-card__icon{ width:48px; height:48px; border-radius:12px; background:rgba(243,0,19,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.pw-card__icon i{ font-size:24px; color:var(--pw-red); }
.pw-card__more{ display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-family:var(--pw-display); font-weight:600; font-size:.9rem; color:var(--pw-red); }
.pw-card__more i{ transition:transform .15s ease; }
.pw-card--link:hover .pw-card__more i{ transform:translateX(4px); }

/* numbered coverage / steps */
.pw-step{ background:var(--pw-surface); border:1px solid var(--pw-line); border-radius:var(--pw-radius-lg); padding:26px 24px; }
.pw-step__n{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:11px; background:var(--pw-red); color:#fff; font-family:var(--pw-display); font-weight:700; margin-bottom:16px; }
.pw-step h3{ font-size:1.12rem; margin:0 0 6px; }
.pw-step p{ color:var(--pw-muted); margin:0; font-size:.96rem; }

/* ---------- stat band ---------- */
.pw-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px;
  background:var(--pw-bg-2); border:1px solid var(--pw-line); border-radius:var(--pw-radius-lg); padding:36px 28px; }
.pw-stat{ text-align:center; }
.pw-stat b{ display:block; font-family:var(--pw-display); font-size:clamp(1.7rem,3vw,2.3rem); color:var(--pw-ink); line-height:1; }
.pw-stat span{ display:block; margin-top:8px; color:var(--pw-muted); font-size:.92rem; }

/* ---------- locations ---------- */
/* Column layout so the button row can be pushed to the bottom. Grid already stretches the cards to
 * equal height; without this the buttons sit wherever each card's copy happens to end, so they land
 * at three different heights across a row. */
.pw-loc{ background:var(--pw-surface); border:1px solid var(--pw-line); border-radius:var(--pw-radius-lg);
  padding:26px 24px; display:flex; flex-direction:column; }
.pw-loc h3{ font-size:1.22rem; margin:0 0 4px; }
.pw-loc h3 i{ color:var(--pw-red); margin-right:6px; vertical-align:-2px; }
.pw-loc__addr{ color:var(--pw-muted); font-size:.96rem; margin:0 0 14px; }
.pw-loc__hours{ color:var(--pw-text); font-size:.9rem; margin:0 0 16px; }
/* Two equal buttons, so cards with longer studio names line up with the shorter ones instead of
 * wrapping one card's row and not the next. */
/* margin-top:auto eats the leftover space, so every card's buttons line up on the same baseline
 * regardless of how long its copy is. */
.pw-loc .pw-cta-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; padding-top:18px; }
.pw-loc .pw-cta-row .pw-btn{ justify-content:center; text-align:center; padding-left:12px; padding-right:12px; }
/* Same problem on the home page's location cards, which end in a link rather than a button row. */
.pw-loc .pw-card__more{ margin-top:auto; padding-top:16px; }

/* ---------- media / gallery ---------- */
.pw-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.pw-gallery figure{ margin:0; border-radius:var(--pw-radius); overflow:hidden; border:1px solid var(--pw-line); }
.pw-gallery img{ width:100%; height:240px; object-fit:cover; }
.pw-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.pw-split img{ border-radius:var(--pw-radius-lg); border:1px solid var(--pw-line); }

/* ---------- reviews ---------- */
.pw-review{ background:var(--pw-surface); border:1px solid var(--pw-line); border-radius:var(--pw-radius-lg); padding:26px 24px; }
.pw-review .pw-stars{ font-size:.95rem; }
.pw-review p{ color:var(--pw-text); margin:12px 0 14px; font-size:1rem; }
.pw-review cite{ color:var(--pw-muted); font-style:normal; font-weight:600; font-family:var(--pw-display); font-size:.92rem; }

/* ---------- tick list ---------- */
.pw-list{ list-style:none; margin:18px 0; padding:0; }
.pw-list li{ display:flex; align-items:flex-start; gap:10px; color:var(--pw-text);
  margin-bottom:10px; font-size:.96rem; }
.pw-list li i{ color:var(--pw-red); flex:none; margin-top:3px; }

/* ---------- comparison table ---------- */
/* Wide table: the wrapper scrolls on small screens so the page body never scrolls sideways. */
.pw-compare{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--pw-line);
  border-radius:var(--pw-radius-lg); background:var(--pw-surface); }
.pw-compare table{ width:100%; border-collapse:collapse; min-width:680px; }
.pw-compare th,.pw-compare td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--pw-line); font-size:.94rem; }
.pw-compare thead th{ font-family:var(--pw-display); color:var(--pw-ink); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.08em; background:var(--pw-bg-2); white-space:nowrap; }
.pw-compare thead th.is-key{ color:var(--pw-red); }
.pw-compare tbody th{ font-weight:600; color:var(--pw-ink); font-family:var(--pw-display); }
.pw-compare tbody th small{ display:block; font-family:var(--pw-body); font-weight:400;
  color:var(--pw-muted); font-size:.82rem; margin-top:3px; }
.pw-compare td{ color:var(--pw-text); text-align:center; }
.pw-compare tr:last-child th,.pw-compare tr:last-child td{ border-bottom:0; }
.pw-compare .yes{ color:#3fbf6a; font-weight:700; }
.pw-compare .no{ color:var(--pw-muted); }
.pw-compare .part{ color:#e0a63a; font-weight:700; }
.pw-compare td.is-key{ background:rgba(243,0,19,.06); color:var(--pw-ink); font-weight:600; }

/* ---------- FAQ (no JS, <details>) ---------- */
.pw-faq{ max-width:820px; margin:0 auto; }
.pw-faq details{ background:var(--pw-surface); border:1px solid var(--pw-line); border-radius:var(--pw-radius); margin-bottom:12px; padding:0 22px; }
.pw-faq summary{ cursor:pointer; list-style:none; padding:18px 0; font-family:var(--pw-display);
  font-weight:600; color:var(--pw-ink); font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.pw-faq summary::-webkit-details-marker{ display:none; }
.pw-faq summary::after{ content:"+"; color:var(--pw-red); font-size:1.5rem; line-height:1; flex:none; }
.pw-faq details[open] summary::after{ content:"\2212"; }
.pw-faq details p{ color:var(--pw-muted); margin:0 0 18px; }

/* ---------- contact / form ---------- */
.pw-contact{ display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:start; }
.pw-form{ background:var(--pw-surface); border:1px solid var(--pw-line); border-radius:var(--pw-radius-lg); padding:28px 26px; }
/* The AHAI Forms plugin renders its section with id="quote". These two rules used to be inline
 * styles in the plugin; they live here now so the plugin can stay design-system agnostic. Scoped to
 * #quote so the hand-built form on /contact, which sits in its own layout, is untouched. */
#quote .pw-center{ margin-bottom:32px; }
#quote .pw-form{ max-width:720px; margin:0 auto; }
.pw-form .pw-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pw-field{ margin-bottom:16px; }
.pw-field label{ display:block; font-size:.88rem; color:var(--pw-text); margin-bottom:7px; font-weight:500; }
.pw-field input,.pw-field select,.pw-field textarea{ width:100%; background:var(--pw-bg); border:1px solid var(--pw-line-2);
  border-radius:9px; color:var(--pw-ink); padding:12px 14px; font-family:inherit; font-size:1rem; }
.pw-field input:focus,.pw-field select:focus,.pw-field textarea:focus{ outline:none; border-color:var(--pw-red); }
.pw-field textarea{ min-height:120px; resize:vertical; }
.pw-contact__aside .pw-loc{ margin-bottom:16px; }
.pw-contact__big{ display:flex; align-items:center; gap:12px; font-family:var(--pw-display); font-weight:700;
  font-size:1.3rem; color:var(--pw-ink); margin:0 0 8px; }
.pw-contact__big i{ color:var(--pw-red); }
@media(max-width:880px){ .pw-contact{ grid-template-columns:1fr; } }
@media(max-width:600px){ .pw-form .pw-form__row{ grid-template-columns:1fr; } }

/* ---------- form notice + honeypot ---------- */
.pw-notice{ border-radius:var(--pw-radius); padding:16px 18px; font-weight:500; }
.pw-notice--ok{ background:rgba(45,160,90,.15); border:1px solid rgba(45,160,90,.55); color:#7be0a3; }
.pw-notice--err{ background:rgba(243,0,19,.12); border:1px solid rgba(243,0,19,.55); color:#ff8a93; }
.pw-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---------- CTA band ---------- */
.pw-cta-band{ background:var(--pw-red); border-radius:var(--pw-radius-lg); padding:clamp(36px,5vw,64px); text-align:center; }
.pw-cta-band h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); margin:0 0 12px; }
.pw-cta-band p{ color:rgba(255,255,255,.92); max-width:56ch; margin:0 auto 26px; }
.pw-cta-band .pw-btn--primary{ background:#fff; color:var(--pw-red); }
.pw-cta-band .pw-btn--primary:hover{ background:#0e0f11; color:#fff; }
.pw-cta-band .pw-btn--ghost{ border-color:rgba(255,255,255,.6); color:#fff; }
.pw-cta-band .pw-btn--ghost:hover{ border-color:#fff; }

/* ---------- blog pagination ---------- */
.pw-page-link .page-numbers{ display:inline-block; padding:8px 14px; border:1px solid var(--pw-line-2); border-radius:8px; color:var(--pw-text); font-size:.9rem; text-decoration:none; }
.pw-page-link .page-numbers.current{ background:var(--pw-red); color:#fff; border-color:var(--pw-red); }
.pw-page-link a.page-numbers:hover{ border-color:var(--pw-red); color:var(--pw-ink); }

/* ---------- footer ---------- */
.pw-footer{ background:#0a0b0c; border-top:1px solid var(--pw-line); padding:56px 0 24px; color:var(--pw-muted); }
/* Footer links are block-level for tap targets, so a <br> between two of them adds a whole empty
 * line. The contact block sets its own rhythm instead. */
.pw-footer__brand p a{ padding:2px 0; }
.pw-footer__brand br{ display:none; }
.pw-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; }
.pw-footer h4{ color:var(--pw-ink); font-size:.95rem; text-transform:uppercase; letter-spacing:.1em; margin:0 0 16px; }
.pw-footer a{ color:var(--pw-muted); display:block; padding:4px 0; font-size:.94rem; }
.pw-footer a:hover{ color:var(--pw-ink); }
.pw-footer__brand p{ font-size:.94rem; }
.pw-footer__social{ display:flex; gap:12px; margin-top:14px; }
.pw-footer__social a{ width:38px; height:38px; border:1px solid var(--pw-line-2); border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0; }
.pw-footer__social i{ font-size:18px; }
.pw-footer__bar{ border-top:1px solid var(--pw-line); margin-top:40px; padding-top:20px;
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-size:.86rem; }
.pw-footer__bar a{ display:inline; padding:0; }

/* ---------- responsive ---------- */
@media(max-width:880px){
  .pw-burger{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:42px; height:42px; border:1px solid var(--pw-line-2); border-radius:10px; color:var(--pw-ink); cursor:pointer; }
  .pw-burger i{ font-size:22px; }
  .pw-nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--pw-bg); border-bottom:1px solid var(--pw-line); padding:8px 24px 18px;
    margin-left:0; max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .pw-nav a:not(.pw-btn){ padding:13px 0; border-bottom:1px solid var(--pw-line); }
  .pw-nav .pw-btn{ margin-top:14px; justify-content:center; }
  .pw-header__phone{ display:none; }
  /* Cap to the viewport and scroll, rather than a fixed max-height that clips an open group. */
  .pw-burger-cb:checked ~ .pw-nav{ max-height:calc(100vh - 72px); overflow-y:auto; }

  /* Collapsed groups: the row is "link + chevron", the submenu opens only when the chevron is tapped. */
  .pw-nav__drop{ display:block; }
  .pw-nav__row{ display:flex; align-items:center; justify-content:space-between; gap:8px;
    border-bottom:1px solid var(--pw-line); }
  .pw-nav__row > a{ flex:1 1 auto; border-bottom:0 !important; }
  .pw-nav__row > a::after{ display:none; }
  .pw-drop-toggle{ display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; margin-right:-10px; color:var(--pw-text); cursor:pointer; }
  .pw-drop-toggle i{ font-size:18px; transition:transform .2s ease; }
  .pw-drop{ display:block; position:static; padding-top:0; max-height:0; overflow:hidden;
    transition:max-height .28s ease; }
  /* Hover must not open the group on touch: only :checked sets a height. */
  .pw-nav__drop:hover .pw-drop,.pw-nav__drop:focus-within .pw-drop{ display:block; }
  .pw-drop-cb:checked ~ .pw-drop{ max-height:620px; }
  .pw-drop-cb:checked ~ .pw-nav__row .pw-drop-toggle i{ transform:rotate(180deg); }
  .pw-drop-cb:focus-visible ~ .pw-nav__row .pw-drop-toggle{ outline:2px solid var(--pw-red); border-radius:8px; }
  .pw-drop__box{ background:transparent; border:0; padding:2px 0 10px 14px; min-width:0; }
  .pw-drop__box a{ padding:11px 0; border-bottom:1px solid var(--pw-line); font-size:.9rem; }
  .pw-drop__box a:last-child{ border-bottom:0; }
  .pw-split{ grid-template-columns:1fr; }
  .pw-footer__grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .pw-grid--2,.pw-grid--3,.pw-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px){
  /* The hero already says what we do, so the eyebrow just adds two wrapped lines above the H1. */
  .pw-hero--video .pw-eyebrow{ display:none; }
  .pw-hero--video .pw-hero__sub{ font-size:1rem; margin-bottom:22px; }
  .pw-hero--video .pw-cta-row{ gap:10px; }
  /* Smaller trust text fits two per row instead of one, so it reads as a strip not a list. */
  .pw-hero--video .pw-trust{ margin-top:22px; gap:10px 16px; font-size:.8rem; }
}
@media(max-width:560px){
  .pw-footer__grid{ grid-template-columns:1fr; gap:22px; }
  .pw-footer{ padding:44px 0 20px; }
  .pw-footer__bar{ margin-top:28px; padding-top:18px; gap:6px; }
  .pw-trust .div{ display:none; }
  .pw-grid--2,.pw-grid--3,.pw-grid--4{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ahai-page *{ transition:none!important; }
}