/* ============================================================
   VEINS AND WELLNESS — PREMIUM LAYER  v1.0
   Mobile-first · Aesthetic-led · Beverly Hills editorial
   Loaded after inline styles; uses !important to override the
   332 inline style attributes without rewriting the markup.
   ============================================================ */

/* ------------------------------------------------------------
   0. STOP iOS SAFARI FROM RESIZING TEXT BEHIND OUR BACK
   Safari on iPhone runs a "text autosizing" pass that inflates the
   font of any block it decides is too wide for the viewport. It fires
   on real devices only — desktop Chrome never does it — so it is
   invisible to every check that isn't run on an actual phone. It was
   blowing the "Why Veins & Wellness" bullets up to nearly double size
   while the short ones stayed put, which is why the list looked broken.
   ------------------------------------------------------------ */
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}

:root{
  --vw-navy:#16223D;
  --vw-teal:#0E5F5B;
  --vw-gold:#C4A355;          /* decorative / on dark only */
  --vw-gold-ink:#7E6224;      /* AA-compliant gold for text on light (5.3:1) */
  --vw-cream:#F8F6F0;
  --vw-sand:#F3EDE3;
  --vw-ink:#1C1C1E;
  --vw-hairline:rgba(22,34,61,.10);
  --vw-hairline-gold:rgba(196,163,85,.34);

  /* Layered, soft luxury shadows — never a single hard drop */
  --vw-shadow-sm:0 1px 2px rgba(22,34,61,.04), 0 4px 12px rgba(22,34,61,.05);
  --vw-shadow-md:0 2px 4px rgba(22,34,61,.04), 0 12px 28px rgba(22,34,61,.08);
  --vw-shadow-lg:0 4px 8px rgba(22,34,61,.05), 0 24px 56px rgba(22,34,61,.12);

  --vw-ease:cubic-bezier(.16,1,.3,1);
  --vw-ease-out:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------
   1. TYPOGRAPHY — fluid, robust.
   Root cause of the mobile bug: overrides were keyed to exact
   px values ([style*="font-size: 54px"]), so the 62px h1 escaped
   every breakpoint. These element-level rules cannot be escaped.
   ------------------------------------------------------------ */
/* Every type size present in the markup, made fluid. The MAX of each
   clamp is the original desktop value — so desktop is untouched — and
   the size scales down continuously instead of snapping at 760px. */
[style*="font-size: 62px"]{font-size:clamp(31px, 8.6vw, 62px) !important;}
[style*="font-size: 54px"]{font-size:clamp(31px, 7.6vw, 54px) !important;}
[style*="font-size: 52px"]{font-size:clamp(30px, 7.4vw, 52px) !important;}
[style*="font-size: 50px"]{font-size:clamp(29px, 7.1vw, 50px) !important;}
[style*="font-size: 48px"]{font-size:clamp(28px, 6.8vw, 48px) !important;}
[style*="font-size: 46px"]{font-size:clamp(27px, 6.5vw, 46px) !important;}
[style*="font-size: 44px"]{font-size:clamp(27px, 6.2vw, 44px) !important;}
[style*="font-size: 42px"]{font-size:clamp(26px, 6.0vw, 42px) !important;}
[style*="font-size: 40px"]{font-size:clamp(26px, 5.7vw, 40px) !important;}
[style*="font-size: 38px"]{font-size:clamp(25px, 5.4vw, 38px) !important;}
[style*="font-size: 36px"]{font-size:clamp(24px, 5.1vw, 36px) !important;}
[style*="font-size: 34px"]{font-size:clamp(23px, 4.8vw, 34px) !important;}
[style*="font-size: 33px"]{font-size:clamp(23px, 4.7vw, 33px) !important;}
[style*="font-size: 32px"]{font-size:clamp(22px, 4.6vw, 32px) !important;}
[style*="font-size: 31px"]{font-size:clamp(22px, 4.4vw, 31px) !important;}
[style*="font-size: 30px"]{font-size:clamp(21px, 4.3vw, 30px) !important;}
[style*="font-size: 29px"]{font-size:clamp(21px, 4.1vw, 29px) !important;}
[style*="font-size: 28px"]{font-size:clamp(20px, 4.0vw, 28px) !important;}
[style*="font-size: 27px"]{font-size:clamp(20px, 3.9vw, 27px) !important;}
[style*="font-size: 26px"]{font-size:clamp(19px, 3.7vw, 26px) !important;}
[style*="font-size: 24px"]{font-size:clamp(19px, 3.4vw, 24px) !important;}
[style*="font-size: 23px"]{font-size:clamp(18px, 3.3vw, 23px) !important;}
[style*="font-size: 21px"]{font-size:clamp(17px, 3.0vw, 21px) !important;}
[style*="font-size: 20px"]{font-size:clamp(17px, 2.9vw, 20px) !important;}

/* Safety net: any NEW size added later that escapes the list above
   still cannot blow out a phone. This is what the old system lacked. */
@media (max-width:760px){
  h1{ font-size:clamp(31px, 8.6vw, 44px) !important; line-height:1.1 !important; }
  h2{ font-size:clamp(25px, 6.6vw, 34px) !important; line-height:1.16 !important; }
  h3{ font-size:clamp(19px, 4.8vw, 24px) !important; line-height:1.28 !important; }
}

h1{ letter-spacing:-.012em !important; text-wrap:balance; overflow-wrap:break-word; hyphens:none; }
h2{ letter-spacing:-.008em !important; text-wrap:balance; }
h3{ text-wrap:pretty; }
p, li{ text-wrap:pretty; }

/* Editorial refinement: the serif wants optical sizing + real italics */
h1, h2, [style*="Cormorant"]{
  font-optical-sizing:auto;
  font-feature-settings:"liga" 1, "kern" 1;
}

/* Eyebrow / label microtype — the tell of a premium brand */
[data-vw-eyebrow], [style*="letter-spacing: 0.18em"], [style*="letter-spacing: 0.16em"]{
  letter-spacing:.22em !important;
  text-transform:uppercase;
  font-size:clamp(10px,2.4vw,11px) !important;
  font-weight:600 !important;
}

/* ------------------------------------------------------------
   2. CONTRAST — gold text on light surfaces was 2.2:1 (AA needs 4.5)
   Keep the bright gold wherever it sits on navy/teal (6.5:1 — passes).
   ------------------------------------------------------------ */
[style*="color: #C4A355"]{ color:var(--vw-gold-ink) !important; }

footer [style*="color: #C4A355"],
[style*="background: #16223D"] [style*="color: #C4A355"],
[style*="background: #0E5F5B"] [style*="color: #C4A355"],
[style*="background:#16223D"] [style*="color: #C4A355"],
[style*="background:#0E5F5B"] [style*="color: #C4A355"]{ color:var(--vw-gold) !important; }

/* ------------------------------------------------------------
   3. MOBILE-FIRST LAYOUT  (>50% of patients arrive on a phone)
   ------------------------------------------------------------ */
@media (max-width:760px){

  /* Fluid section rhythm — the desktop 110px gutters crush a phone */
  section{
    padding-left:20px !important;
    padding-right:20px !important;
    padding-top:clamp(48px,11vw,64px) !important;
    padding-bottom:clamp(48px,11vw,64px) !important;
  }
  section > div, section > [style*="max-width"]{ padding-left:0 !important; padding-right:0 !important; }

  /* Every multi-column grid collapses.
     CRITICAL: minmax(0,1fr), never plain 1fr. `1fr` is shorthand for
     minmax(auto,1fr), and that `auto` minimum is the item's min-content
     width — so the track physically CANNOT shrink below its content and
     the whole document blows past the viewport. The original design used
     minmax(0,...) for exactly this reason. */
  [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr) !important;
    gap:clamp(20px,5vw,28px) !important;
  }
  /* …except the fixed bottom action bar, which must stay 3-up */
  .vw-mobilebar[style*="grid-template-columns"],
  .vw-mobilebar{ grid-template-columns:1fr 1fr 1.3fr !important; }

  /* Same trap for flex: children default to min-width:auto and refuse
     to shrink. And a flex row that can't wrap will push the page wide. */
  [style*="display: grid"] > *,
  [style*="display: flex"] > *{ min-width:0 !important; }

  /* DO NOT touch flex-wrap globally.
     The design already declares `flex-wrap: wrap` on the rows that need
     it (CTA button groups, treatment pill lists). Forcing wrap broke the
     bullet rows; forcing nowrap then broke the button rows and made the
     pills overlap. min-width:0 above is what actually cures the overflow.
     The ONLY rows that need a wrap override are the bullets. */

  /* Bullet rows: [7px gold dot][text]. If the row wraps, the text drops
     BELOW its dot — killing the indent, and on iOS turning the orphaned
     text into a full-width block that Safari then inflates. flex-basis:0
     on the text means it never overflows the line, so it never wraps. */
  [style*="display: flex"]:has(> span[style*="width: 7px"]){
    flex-wrap:nowrap !important;
  }
  [style*="display: flex"]:has(> span[style*="width: 7px"]) > p,
  [style*="display: flex"]:has(> span[style*="width: 7px"]) > span:not([style*="width: 7px"]){
    flex:1 1 0% !important;
    min-width:0 !important;
  }

  /* Hero: image first is a stronger aesthetic sell on mobile */
  section[data-screen-label="Hero"]{ padding-top:28px !important; }

  /* ---- Touch targets ---------------------------------------
     THE TRAP: these elements are box-sizing:content-box. A min-height
     of 44px therefore applies to the CONTENT box and the padding is
     added ON TOP — a button with 16px vertical padding becomes 76px
     tall, and its label sits pinned to the top of the 44px content box
     with ~24px of dead space beneath it. border-box makes min-height
     include the padding; inline-flex centres the label. */
  a, button, summary, [role="button"]{
    min-height:44px;
    box-sizing:border-box;
  }

  /* The real CTAs: centred label, and trimmed of their desktop padding. */
  a[style*="border-radius"][style*="font-weight: 700"]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    min-height:50px !important;
    padding-top:13px !important;
    padding-bottom:13px !important;
    line-height:1.2 !important;
  }

  nav a, .vw-mobile-menu a{
    display:flex; align-items:center;
    box-sizing:border-box;
    min-height:48px !important;
  }

  /* Body copy legibility */
  p, li{ font-size:clamp(15px,4vw,17px) !important; line-height:1.62 !important; }

  /* Cards get breathing room, not desktop density */
  [data-pathcard]{ margin-bottom:4px; }

  img, svg, video{ max-width:100% !important; height:auto; }

  /* ---- Fixed image-container heights ----------------------
     The design hard-codes 420–560px tall image frames (the hero
     portrait, the ultrasound photo in "Why", and 83 more across the
     treatment pages). On a 765px-tall phone screen a 540px frame eats
     71% of the viewport — you scroll and scroll and see one picture.
     Cap them all against the viewport instead. */
  [style*="height: 560px"],
  [style*="height: 540px"],
  [style*="height: 500px"],
  [style*="height: 480px"],
  [style*="height: 440px"],
  [style*="height: 428px"],
  [style*="height: 420px"]{
    height:clamp(240px, 56vh, 380px) !important;
  }

  /* ---- Vertical rhythm ------------------------------------
     Desktop gaps of 64–80px and 90–110px section padding are elegant
     on a 27" display and absurd on a phone — they turn the page into
     an endless scroll of whitespace. Compress proportionally. */
  [style*="gap: 80px"], [style*="gap: 72px"], [style*="gap: 64px"], [style*="gap: 56px"]{ gap:28px !important; }
  [style*="gap: 48px"], [style*="gap: 44px"], [style*="gap: 40px"]{ gap:24px !important; }
  [style*="gap: 36px"], [style*="gap: 32px"]{ gap:20px !important; }

  [style*="padding: 110px"], [style*="padding: 100px"], [style*="padding: 90px"]{
    padding-top:56px !important; padding-bottom:56px !important;
  }
  [style*="padding: 84px"], [style*="padding: 80px"], [style*="padding: 72px"]{
    padding-top:48px !important; padding-bottom:48px !important;
  }
  [style*="padding: 64px"]{ padding-top:40px !important; padding-bottom:40px !important; }

  /* ---- Text rhythm ---------------------------------------- */
  h1, h2{ margin-bottom:14px !important; }
  h3{ margin-bottom:8px !important; }
  h2 + p, h3 + p{ margin-top:10px !important; }
}

/* ------------------------------------------------------------
   3b. HORIZONTAL CAROUSELS (before/after, reviews)
   Slides are authored at a fixed 520px — wider than any phone.
   Keep them in one swipeable row, sized to the screen.
   ------------------------------------------------------------ */
@media (max-width:1024px){
  [style*="display: flex"][style*="overflow-x: auto"]:not(.vw-mobilebar):not(.vw-marquee-track):not(.vw-marquee-mask){
    flex-wrap:nowrap !important;
    overflow-y:hidden !important;          /* give the page its swipe back */
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* overflow-y:hidden was shaving ~12px off the bottom of every card
       (shadow + border). Pad the scroller so nothing gets bitten. */
    padding-bottom:18px !important;
  }
  [style*="overflow-x: auto"] > *{
    flex:0 0 86% !important;
    width:86% !important;
    max-width:420px !important;
    scroll-snap-align:center;
  }
  /* Only the IMAGE slides get a capped height — they were authored at a
     fixed px height. Text cards must stay auto-height or their content
     gets clipped mid-sentence.
     NB: match the exact px values, never [style*="height:"] — that
     substring also catches `line-height:` and `max-height:` and would
     force a height onto any card that happens to set its leading. */
  [style*="overflow-x: auto"] > [style*="height: 520px"],
  [style*="overflow-x: auto"] > [style*="height: 480px"],
  [style*="overflow-x: auto"] > [style*="height: 440px"],
  [style*="overflow-x: auto"] > [style*="height: 428px"],
  [style*="overflow-x: auto"] > [style*="height: 420px"]{
    height:clamp(300px, 78vw, 460px) !important;
  }
  /* Text cards: grow to fit. Never clip a testimonial.
     Belt-and-braces — the markup fix (footer:margin-top:auto instead of
     p:flex:1) is the real cure; this stops a stretched card from ever
     squeezing its own footer again. */
  [style*="overflow-x: auto"] > [data-card]{
    height:auto !important;
    align-self:stretch;
  }
  [data-card] > footer{ flex:none !important; }
  [data-card] > p{ flex:0 1 auto !important; }

  /* The hero portrait is authored at a fixed 560px tall — too much of a
     phone screen to give a single image. */
  .vw-portrait-fade{ height:clamp(300px, 78vw, 440px) !important; }
}

/* ------------------------------------------------------------
   3c. TOP BAR
   38px of fixed height with flex-wrap on — so on a narrow phone the
   text wraps to a second line and gets clipped by its own container.
   Let it breathe, and make the number tappable-sized.
   ------------------------------------------------------------ */
@media (max-width:760px){
  .vw-topbar{
    box-sizing:border-box;          /* or min-height stacks ON TOP of padding */
    height:auto !important;
    min-height:38px;
    padding:10px 14px !important;
    gap:8px !important;
    font-size:12px !important;
    line-height:1.3 !important;
    letter-spacing:.05em !important;
    row-gap:3px !important;
    text-align:center;
  }
  .vw-topbar a{ font-weight:700; }

  /* ---- Review text ----------------------------------------
     The design clamps reviews to 10 lines. On a 1240px desktop column
     that IS the whole review; on a 390px phone the same review needs 14
     lines, so patients read half a sentence and then nothing. A cut-off
     testimonial is worse than no testimonial. */
  [style*="-webkit-line-clamp"], [style*="line-clamp"]{
    -webkit-line-clamp:22 !important;
    line-clamp:22 !important;
  }
}
@media (max-width:380px){
  /* On the narrowest phones, the separator dot is the first thing to go. */
  .vw-topbar > span:nth-of-type(4){ display:none !important; }
  .vw-topbar{ font-size:11px !important; }
}

/* Tablet — the awkward middle nobody styles. The same minmax(0,…) trap
   applies here, so it gets the same treatment. */
@media (min-width:761px) and (max-width:1024px){
  section{ padding-left:28px !important; padding-right:28px !important; }
  [style*="grid-template-columns"]{ grid-template-columns:minmax(0,1fr) !important; }
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  [style*="display: grid"] > *,
  [style*="display: flex"] > *{ min-width:0 !important; }
  /* Same rule as mobile: leave the author's flex-wrap alone, override
     only the bullet rows. */
  [style*="display: flex"]:has(> span[style*="width: 7px"]){
    flex-wrap:nowrap !important;
  }
  [style*="display: flex"]:has(> span[style*="width: 7px"]) > p,
  [style*="display: flex"]:has(> span[style*="width: 7px"]) > span:not([style*="width: 7px"]){
    flex:1 1 0% !important;
    min-width:0 !important;
  }
  img, svg, video{ max-width:100% !important; height:auto; }
}

/* ------------------------------------------------------------
   DESKTOP NAV DROPDOWN (pure CSS, no template runtime)
   Hover a parent → its submenu drops. Keyboard-accessible too
   (focus-within). Hidden on mobile (the drawer menu handles that).
   ------------------------------------------------------------ */
.vw-navitem{ position:relative; display:flex; align-items:center; }
.vw-navlink{
  display:inline-flex; align-items:center; gap:4px;
  color:#16223D; padding:28px 12px; white-space:nowrap;
  transition:color .2s ease;
}
.vw-navlink:hover{ color:#0E5F5B; }
.vw-caret{ font-size:9px; transition:transform .25s ease; opacity:.7; }
.vw-navitem:hover .vw-caret{ transform:rotate(180deg); }

.vw-drop{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:230px; background:#FFFFFF;
  border:1px solid rgba(22,34,61,0.08); border-top:2px solid #C4A355;
  border-radius:0 0 10px 10px; box-shadow:0 22px 44px rgba(22,34,61,0.14);
  padding:8px; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:70;
}
.vw-navitem:hover .vw-drop,
.vw-navitem:focus-within .vw-drop{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.vw-drop a{
  padding:11px 14px; font-size:13.5px; font-weight:600; color:#16223D;
  border-radius:7px; white-space:nowrap; transition:background .18s ease, color .18s ease;
}
.vw-drop a:hover{ background:#F3EDE3; color:#0E5F5B; }
/* bridge the 8px gap so the dropdown doesn't close when the cursor crosses it */
.vw-navitem::after{ content:''; position:absolute; top:100%; left:0; right:0; height:10px; }

@media (prefers-reduced-motion:reduce){
  .vw-drop{ transition:none; } .vw-caret{ transition:none; }
}

/* Embedded GoHighLevel form iframes: never let one overflow the
   viewport, and give the consultation section sane mobile padding. */
iframe{ max-width:100% !important; }
@media (max-width:760px){
  [data-screen-label="Consultation form"]{ padding-left:0 !important; padding-right:0 !important; }
  [data-screen-label="Consultation form"] > div{ padding-left:20px !important; padding-right:20px !important; }
  [data-screen-label="Consultation form"] iframe{ height:78vh !important; min-height:620px; }
}

/* Kill horizontal bleed for good, at every width.
   `clip` (not `hidden`) — on iOS Safari, overflow-x:hidden on body alone
   still lets the initial containing block expand, which is what produced
   the zoomed-out, half-width page. */
html, body{ overflow-x:clip !important; }

/* ------------------------------------------------------------
   4. PREMIUM SURFACE TREATMENT
   ------------------------------------------------------------ */

/* Header: condenses and deepens its glass as you scroll */
header[data-screen-label="Header"]{
  transition:height .4s var(--vw-ease), background .4s ease, box-shadow .4s ease, border-color .4s ease;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}
header[data-screen-label="Header"] > div{
  transition:height .4s var(--vw-ease);
}
body[data-vw-scrolled] header[data-screen-label="Header"]{
  background:rgba(248,246,240,.82) !important;
  box-shadow:0 1px 0 var(--vw-hairline-gold), var(--vw-shadow-sm);
}
body[data-vw-scrolled] header[data-screen-label="Header"] > div{ height:64px !important; }
body[data-vw-scrolled] header[data-screen-label="Header"] img{ height:38px !important; transition:height .4s var(--vw-ease); }

/* Imagery: soft luxury framing + slow, expensive-feeling zoom */
[data-pathcard] .path-img,
section img:not([src*="logo"]):not(.vw-partner-logo){
  border-radius:2px;
}
[data-pathcard]{
  border-radius:3px;
  overflow:hidden;
  transition:transform .6s var(--vw-ease), box-shadow .6s var(--vw-ease);
}
[data-pathcard]:hover{ transform:translateY(-6px); box-shadow:var(--vw-shadow-lg); }
[data-pathcard] .path-img{ transition:transform 1.1s var(--vw-ease) !important; }
[data-pathcard]:hover .path-img{ transform:scale(1.05) !important; }

/* Gold hairline that draws itself under section headers */
[data-vw-rule]{
  position:relative; padding-bottom:18px;
}
[data-vw-rule]::after{
  content:''; position:absolute; left:0; bottom:0;
  width:56px; height:1px;
  background:linear-gradient(90deg,var(--vw-gold),rgba(196,163,85,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--vw-ease) .15s;
}
[data-vw-in][data-vw-rule]::after, [data-vw-rule][data-vw-in]::after{ transform:scaleX(1); }

/* Primary CTA — restrained, not bouncy. Luxury moves slowly. */
a[style*="border-radius"][style*="font-weight: 700"]{
  position:relative;
  overflow:hidden;
  transition:transform .5s var(--vw-ease), box-shadow .5s var(--vw-ease), letter-spacing .5s var(--vw-ease) !important;
  will-change:transform;
}
a[style*="border-radius"][style*="font-weight: 700"]:hover{
  transform:translateY(-2px) !important;
  box-shadow:var(--vw-shadow-md) !important;
  letter-spacing:.02em !important;
}
/* Sheen sweep across the button */
a[style*="border-radius"][style*="font-weight: 700"]::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .9s var(--vw-ease);
  pointer-events:none;
}
a[style*="border-radius"][style*="font-weight: 700"]:hover::before{ transform:translateX(120%); }

/* Partner logos: monochrome until touched */
.vw-partner-logo{ filter:grayscale(1) contrast(.9); opacity:.55; }

/* ------------------------------------------------------------
   5. MOTION — reveals, stagger, parallax
   ------------------------------------------------------------ */
[data-vw-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--vw-ease), transform 1s var(--vw-ease);
  transition-delay:var(--vw-delay,0ms);
}
[data-vw-reveal][data-vw-in]{ opacity:1; transform:none; }

/* Staggered children — cards, steps, stats cascade in */
[data-vw-stagger] > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--vw-ease), transform .9s var(--vw-ease);
}
[data-vw-stagger][data-vw-in] > *{ opacity:1; transform:none; }
[data-vw-stagger][data-vw-in] > *:nth-child(1){ transition-delay:0ms; }
[data-vw-stagger][data-vw-in] > *:nth-child(2){ transition-delay:90ms; }
[data-vw-stagger][data-vw-in] > *:nth-child(3){ transition-delay:180ms; }
[data-vw-stagger][data-vw-in] > *:nth-child(4){ transition-delay:270ms; }
[data-vw-stagger][data-vw-in] > *:nth-child(5){ transition-delay:360ms; }
[data-vw-stagger][data-vw-in] > *:nth-child(n+6){ transition-delay:450ms; }

/* Editorial line-by-line rise for the h1 */
.vw-line{ display:block; overflow:hidden; }
.vw-line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.1s var(--vw-ease);
  transition-delay:var(--vw-delay,0ms);
}
[data-vw-in] .vw-line > span, .vw-line[data-vw-in] > span{ transform:none; }

/* Hero parallax layer (desktop only, driven by JS var) */
[data-vw-parallax]{ will-change:transform; }

/* ------------------------------------------------------------
   6. ACCESSIBILITY
   ------------------------------------------------------------ */
:focus-visible{
  outline:2px solid var(--vw-teal) !important;
  outline-offset:3px !important;
  border-radius:2px;
}
.vw-skip{
  position:absolute; left:12px; top:-64px; z-index:200;
  background:var(--vw-navy); color:var(--vw-cream);
  padding:12px 18px; border-radius:4px; font-weight:600; font-size:14px;
  transition:top .25s var(--vw-ease);
}
.vw-skip:focus{ top:12px; color:var(--vw-cream); }

/* If JS never runs, nothing may stay hidden. Reveal-on-scroll is an
   enhancement — it must degrade to plain visible content, not to a gap. */
@media (scripting: none){
  [data-vw-reveal], [data-vw-stagger] > *, [data-vw-photo], .vw-line > span{
    opacity:1 !important; transform:none !important;
  }
}

/* Respect the user. Always. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-vw-reveal],
  [data-vw-stagger] > *,
  [data-vw-photo]{ opacity:1 !important; transform:none !important; }
  .vw-line > span{ transform:none !important; }
  [data-vw-rule]::after{ transform:scaleX(1) !important; }
  .vw-marquee-track{ animation:none !important; }
}

/* ------------------------------------------------------------
   7. PRINT
   ------------------------------------------------------------ */
@media print{
  header, footer, .vw-mobilebar, .vw-topbar{ display:none !important; }
  [data-vw-reveal], [data-vw-stagger] > *{ opacity:1 !important; transform:none !important; }
  body{ background:#fff !important; }
}