/* ValueLab design system · www.valuelab.ca
   One stylesheet for the whole site. Follows HLO/Landing Page/STYLEGUIDE.md;
   where the two properties used to differ, the landing page's treatment won. */

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  /* --- brand colour --- */
  --forest:      #1a382f;
  --forest-dark: #12271f;
  --near-black:  #161817;
  --mint:        #4fb179;
  --mint-ink:    #4fb179;   /* kept equal to --mint by decision; see STYLEGUIDE section 9 */
  --cream:       #F9F9F7;
  --text-2:      #4A4A4A;
  --divider:     #D9D9D4;
  --white:       #FFFFFF;
  --grey:        #EEEEEB;   /* light grey band */
  --grey-light:  #F5F5F2;   /* frames on the grey band, and a quiet panel tone inside a tray */

  /* on-forest variants */
  --on-forest:      rgba(255,255,255,0.92);
  --on-forest-dim:  rgba(255,255,255,0.62);
  --on-forest-rule: rgba(255,255,255,0.14);

  /* --- type --- */
  --serif: "Instrument Serif", "Libre Baskerville", Georgia, serif;
  --sans:  "Poppins", "Lexend", "Inter", system-ui, sans-serif;
  --h1: 72px;  --h2: 50px;  --h3: 36px;
  --serif-body: 36px;
  --lead: 20px;  --body: 16px;  --eyebrow: 14px;

  /* --- layout --- */
  --container: 1200px;
  --measure-wide: 600px;
  --measure: 520px;
  --pad-major: 200px;
  --pad-minor: 130px;
  --gutter: 40px;
  --gap-section: 72px;
  --gap-card: 24px;
  --gap-tight: 12px;
  --nav-h: 80px;
  --subnav-h: 56px;

  /* --- shape --- */
  --r-chip: 8px;
  --r-btn: 12px;
  --r-card-sm: 32px;
  --r-card: 36px;
  --r-card-lg: 40px;
  --btn-h: 43px;
  --border:        rgba(73, 80, 93, 0.13);
  --border-strong: rgba(73, 80, 93, 0.22);
  --border-w:      2px;

  /* Card tray, from the outcomes rows: every card-level surface is a cream
     panel held in a 5px white frame. On white sections the two swap (below),
     so the frame always reads against the ground it sits on. */
  --card-w:         5px;
  --card-line:      var(--white);
  --surface:        var(--cream);
  --surface-forest: rgba(255,255,255,0.04);

  /* --- motion --- */
  --ease:            cubic-bezier(0.35, 0, 0, 1);
  --ease-sym:        cubic-bezier(0.44, 0, 0.56, 1);
  --reveal-duration: 800ms;
  --reveal-delay:    200ms;
  --reveal-distance: 30px;
  --reveal-stagger:  80ms;
}

@media (max-width: 1199px){
  :root{ --h1:58px; --h2:40px; --h3:31px; --serif-body:29px; --lead:18px;
         --pad-major:130px; --pad-minor:92px; --gutter:32px; --gap-section:52px; }
}
@media (max-width: 809px){
  :root{ --h1:48px; --h2:32px; --h3:28px; --serif-body:22px; --lead:17px;
         --pad-major:96px; --pad-minor:72px; --gutter:20px; --gap-section:40px;
         --r-card:28px; --r-card-lg:28px; --r-card-sm:24px; }
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
/* clip on html as well as body: overflow that escapes body can otherwise widen the
   mobile layout viewport, and the fixed nav then sizes to that wider viewport */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
/* anchored sections clear the fixed nav and the sticky subnav */
section[id]{ scroll-margin-top:calc(var(--nav-h) + var(--subnav-h)); }
body{
  margin:0;
  background:var(--cream);
  color:var(--near-black);
  font-family:var(--sans);
  font-size:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* clip, not hidden: hidden breaks position:sticky */
}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0;
  font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
  text-wrap:balance;
}
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; }
a{ color:inherit; }
em{ font-style:italic; }
img{ max-width:100%; }
::selection{ background:var(--mint); color:var(--forest); }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;
}

/* ==========================================================================
   MOTION
   Resting states are scoped to .js, so with JavaScript off (or site.js
   failing to load, see the inline guard on each page) everything is visible.
   ========================================================================== */
.js .reveal{
  opacity:0;
  transform:translateY(var(--reveal-distance));
  transition:
    opacity   var(--reveal-duration) var(--ease) var(--reveal-delay),
    transform var(--reveal-duration) var(--ease) var(--reveal-delay);
  will-change:transform,opacity;
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* word-by-word headline reveal: site.js wraps each word of a .words heading
   in a .w span with its own delay */
.js .words .w{
  display:inline-block;
  opacity:0; filter:blur(10px); transform:translateY(10px);
  transition:
    opacity   620ms var(--ease-sym) var(--d,0ms),
    filter    620ms var(--ease-sym) var(--d,0ms),
    transform 620ms var(--ease-sym) var(--d,0ms);
  will-change:transform,opacity,filter;
}
.js .words.is-in .w{ opacity:1; filter:blur(0); transform:none; }

/* each direct child rises in turn; --i is set by site.js, capped at 8 */
.js .stagger > *{
  opacity:0; transform:translateY(22px);
  transition:
    opacity   700ms var(--ease) calc(var(--reveal-delay) + var(--i,0) * var(--reveal-stagger)),
    transform 700ms var(--ease) calc(var(--reveal-delay) + var(--i,0) * var(--reveal-stagger));
  will-change:transform,opacity;
}
.js .stagger.is-in > *{ opacity:1; transform:none; }

/* Hero entrance, first paint only: the hero's children rise in turn. Put
   .hero-enter on the hero's content wrapper. */
@media (prefers-reduced-motion: no-preference){
  @keyframes heroIn{
    from{ opacity:0; transform:translateY(24px); }
    to  { opacity:1; transform:none; }
  }
  .js .hero-enter > *{ animation:heroIn 900ms var(--ease-sym) both; }
  .js .hero-enter > :nth-child(1){ animation-delay:120ms; }
  .js .hero-enter > :nth-child(2){ animation-delay:280ms; }
  .js .hero-enter > :nth-child(3){ animation-delay:440ms; }
  .js .hero-enter > :nth-child(4){ animation-delay:580ms; }
  .js .hero-enter > :nth-child(5){ animation-delay:700ms; }
  .js .hero-enter > :nth-child(n+6){ animation-delay:800ms; }
}

/* Photo frames that drift. A figure marked data-drift holds a photo 12% taller
   than the frame; site.js moves it as the frame crosses the viewport, and the
   photo settles into its frame (inset clip, a hair of scale) as the .reveal it
   sits in arrives. The settle is on the figure, the drift on the img, so the
   two transforms never fight. */
figure[data-drift]{
  position:relative; overflow:hidden;
  transition:
    clip-path 1100ms var(--ease) var(--reveal-delay),
    transform 1100ms var(--ease) var(--reveal-delay);
}
figure[data-drift] > img{
  position:absolute; left:0; right:0; top:-6%; width:100%; height:112%;
  object-fit:cover; display:block;
  transform:translate3d(0, var(--py, 0px), 0); will-change:transform;
}
.js .reveal:not(.is-in) figure[data-drift],
.js .reveal:not(.is-in) + figure[data-drift]{
  clip-path:inset(7% round calc(var(--r-card-lg) - var(--card-w))); transform:scale(1.03);
}

/* A hero whose photo is its ::before layer drifts with the page; the layer is
   inset -14% so the travel never exposes an edge. */
.hero[data-hero-drift]::before{
  top:-14%; bottom:-14%;
  transform:translate3d(0, var(--hero-py, 0px), 0);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal,.js .words .w,.js .stagger > *{
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
  }
  figure[data-drift],figure[data-drift] > img,.hero[data-hero-drift]::before{
    clip-path:none !important; transform:none !important; transition:none !important;
  }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--btn-h); white-space:normal; text-align:center;
  padding:11px 24px;
  border:0; border-radius:var(--r-btn);
  font-family:var(--sans); font-size:var(--body); font-weight:600;
  line-height:1.3; text-decoration:none; cursor:pointer;
  transition:background-color 200ms var(--ease),
             box-shadow       200ms var(--ease),
             transform        200ms var(--ease);
}
/* light grounds: forest fill, white text (12.72:1) */
.btn-primary{ background:var(--forest); color:var(--white); }
.btn-primary:hover{ background:var(--forest-dark); transform:translateY(-1px); }
/* forest grounds: a forest button would vanish, so mint fill, forest text */
.s-forest .btn-primary,
.hero .btn-primary,
.band-forest .btn-primary{ background:var(--mint); color:var(--forest); }
.s-forest .btn-primary:hover,
.hero .btn-primary:hover,
.band-forest .btn-primary:hover{ background:#459a69; }
/* secondary on dark grounds */
.btn-ghost{ background:transparent; color:var(--white); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.28); }
.btn-ghost:hover{ background:rgba(255,255,255,0.08); box-shadow:inset 0 0 0 2px var(--white); transform:translateY(-1px); }
/* secondary on light grounds */
.btn-outline{ background:transparent; color:var(--forest); box-shadow:inset 0 0 0 2px var(--border-strong); }
.btn-outline:hover{ background:rgba(26,56,47,0.05); box-shadow:inset 0 0 0 2px var(--forest); transform:translateY(-1px); }
.btn-light{ background:var(--white); color:var(--forest); }
.btn-light:hover{ background:#eef1ee; transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.s{ padding-block:var(--pad-major); }
.s-minor{ padding-block:var(--pad-minor); }
.s-forest{ background:var(--forest); color:var(--on-forest); }
.s-cream{ background:var(--cream); color:var(--near-black); }
.s-white{ background:var(--white); color:var(--near-black); --surface:var(--white); --card-line:var(--cream); }

.s-forest h1,.s-forest h2,.s-forest h3{ color:var(--white); }

/* the one accent a heading carries: its closing italic phrase */
h1 em, h2 em{ color:var(--mint-ink); font-style:italic; }
.s-forest h1 em,.s-forest h2 em{ color:var(--mint); }

.eyebrow{
  font-size:var(--eyebrow); font-weight:600; line-height:1.2;
  text-transform:uppercase; letter-spacing:0.11em;
  color:var(--mint-ink);
  margin:0 0 20px;
}
.s-forest .eyebrow{ color:var(--mint); }
.lead{ font-size:var(--lead); line-height:1.5; }

.s-head{ max-width:var(--measure-wide); margin-bottom:var(--gap-section); }
.s-head.wide{ max-width:880px; }
.s-head:has(+ .s-head-sub){ margin-bottom:16px; }
.s-head-sub{
  font-size:var(--lead); color:var(--text-2);
  max-width:52ch; margin-bottom:var(--gap-section);
}
.s-forest .s-head-sub{ color:var(--on-forest); }
.s-head-sub:has(+ .s-head-note){ margin-bottom:14px; }
.s-head-note{ color:var(--text-2); max-width:60ch; line-height:1.6; margin-bottom:var(--gap-section); }

/* serif pull-quote */
.pullquote{
  font-family:var(--serif); font-size:var(--serif-body);
  line-height:1.2; letter-spacing:0; margin:0;
}
.pullquote em{ color:var(--mint-ink); }
.s-forest .pullquote{ color:var(--white); }
.s-forest .pullquote em{ color:var(--mint); }

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
/* card-level surface: the tray (see --card-line and --surface), never a shadow */
.card{
  background:var(--surface); border:var(--card-w) solid var(--card-line);
  border-radius:var(--r-card);
}

.chip{
  display:inline-block; padding:6px 12px; border-radius:var(--r-chip);
  background:rgba(73,80,93,0.07);
  font-size:12px; font-weight:600; line-height:1.3; color:var(--near-black);
}

/* list with a mint dot per item */
.dots{ list-style:none; display:grid; gap:14px; }
.dots li{
  position:relative; padding-left:22px;
  font-size:var(--body); line-height:1.55; color:var(--near-black);
}
.dots li::before{
  content:""; position:absolute; left:2px; top:0.62em;
  width:6px; height:6px; border-radius:50%; background:var(--mint);
}
.s-forest .dots li{ color:var(--on-forest); }

/* quiet text link */
.jump{
  display:inline-flex; align-items:center; gap:9px;
  font-size:var(--body); font-weight:600;
  color:var(--mint-ink); text-decoration:none;
  border-bottom:1px solid rgba(79,177,121,0.35); padding-bottom:3px;
  transition:border-color 200ms var(--ease);
}
.jump:hover{ border-bottom-color:currentColor; }
.jump .arr{ transition:transform 200ms var(--ease); }
.jump:hover .arr{ transform:translateX(3px); }
.s-forest .jump{ color:var(--mint); border-bottom-color:rgba(79,177,121,0.45); }
@media (prefers-reduced-motion: reduce){ .jump .arr{ transition:none; } }

/* accordion */
.faq-list details{ border-bottom:1px solid var(--divider); }
.faq-list details:first-child{ border-top:1px solid var(--divider); }
.faq-list summary{
  cursor:pointer; list-style:none; padding:26px 40px 26px 0; position:relative;
  font-size:var(--lead); font-weight:500; line-height:1.4; color:var(--near-black);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  color:var(--mint-ink); font-size:22px; line-height:1;
}
.faq-list details[open] summary::after{ content:"\2212"; }
.faq-list details p{ padding:0 0 26px; color:var(--text-2); line-height:1.6; max-width:60ch; }
.faq-list summary:focus-visible{ outline:2px solid var(--mint-ink); outline-offset:2px; }

/* two equal contact choices */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-card); }
@media (max-width:809px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{
  display:grid; gap:10px; align-content:start;
  background:var(--surface); border:var(--card-w) solid var(--card-line);
  border-radius:var(--r-card-sm); padding:30px 32px;
  color:inherit; text-decoration:none;
  transition:border-color 200ms var(--ease), transform 200ms var(--ease);
}
.contact-card:hover{ border-color:var(--mint); transform:translateY(-2px); }
.contact-card:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.cc-k{
  font-size:var(--eyebrow); font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--mint-ink);
}
.cc-v{
  font-family:var(--serif); font-size:26px; line-height:1.2;
  color:var(--near-black); letter-spacing:-0.01em; word-break:break-word;
}
.cc-v .ext{ font-size:0.7em; margin-left:6px; }
.cc-note{ line-height:1.55; color:var(--text-2); }
@media (prefers-reduced-motion: reduce){
  .contact-card{ transition:none; }
  .contact-card:hover{ transform:none; }
}

/* ==========================================================================
   GLOBAL NAV
   Forest bar, light logo. Transparent over the hero, frosted forest once the
   page scrolls (every page opens on forest, so each body carries
   data-nav-overlay). Without JS the bar is always solid.

   The bar slides away on the way down and returns on the way up: site.js
   toggles html.nav-hidden. Sticky bars under it (the subnav, anything marked
   data-follow-nav) leave with it once they are stuck.
   ========================================================================== */
.vl-nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--nav-h); display:flex; align-items:center;
  transition:transform 360ms var(--ease);
}
.vl-nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(26,56,47,0.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
          backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,0.10);
  transition:opacity 350ms var(--ease);
}
@supports not (backdrop-filter: blur(1px)){
  .vl-nav::before{ background:rgba(26,56,47,0.96); }
}
.js body[data-nav-overlay] .vl-nav:not(.is-solid)::before{ opacity:0; }
html.nav-hidden .vl-nav{ transform:translateY(-100%); }

.vl-nav-inner{
  position:relative;
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:24px;
}
.vl-nav-logo{ display:flex; align-items:center; margin-right:auto; text-decoration:none; }
.vl-nav-logo img{ height:26px; width:auto; display:block; }
.vl-nav-links{ display:flex; align-items:center; gap:4px; }

.vl-nav-link{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border:0; border-radius:var(--r-chip);
  background:none; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:500; line-height:1;
  color:var(--on-forest); text-decoration:none; white-space:nowrap;
  transition:color 200ms var(--ease), background-color 200ms var(--ease);
}
.vl-nav-link:hover,
.vl-dropdown.open > .vl-nav-link{ color:var(--white); background:rgba(255,255,255,0.08); }
.vl-nav-link:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
/* the page you are on, or the group it belongs to */
.vl-nav-link[aria-current="page"],
.vl-nav-link.is-section{ color:var(--white); }
.vl-nav-link[aria-current="page"]::after,
.vl-nav-link.is-section::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px;
  height:2px; border-radius:2px; background:var(--mint);
}
.vl-chevron{ width:10px; height:10px; flex-shrink:0; transition:transform 200ms var(--ease); }

/* --- dropdown ---
   A frosted forest panel that reads in columns rather than one long list: a
   featured row for the section's own page, then its groups side by side. */
/* The panels hang off the bar itself, not off their button, and align to the
   right edge of the container: a menu anchored to its button runs off screen
   once it is this wide. */
.vl-dropdown{ position:static; }
.vl-dropdown-menu{
  position:absolute; top:calc(100% + 14px); right:var(--gutter); left:auto;
  width:min(680px, calc(100vw - 2 * var(--gutter)));
  padding:16px;
  background:rgba(18,39,31,0.94);
  -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,255,255,0.14); border-radius:24px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 200ms var(--ease), transform 200ms var(--ease),
             visibility 0s linear 200ms;
}
.vl-dropdown.open .vl-dropdown-menu{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
.vl-dropdown.open .vl-chevron{ transform:rotate(180deg); }

.vl-menu-cols{ display:grid; grid-template-columns:repeat(2, minmax(220px, 1fr)); gap:4px 18px; }
/* the AI for business menu carries three columns, so its panel is wider. It is
   still capped at the viewport less both gutters, and the nav becomes a drawer
   below 1120px, so the widest it can ever be asked for is about 1050px. */
.vl-menu-3{ width:min(920px, calc(100vw - 2 * var(--gutter))); }
.vl-menu-3 .vl-menu-cols{ grid-template-columns:repeat(3, minmax(190px, 1fr)); gap:4px 14px; }
.vl-menu-col{ display:grid; align-content:start; }

.vl-dropdown-label{
  margin:10px 12px 6px; padding:0; border:0;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mint);
}
.vl-dropdown-item{
  position:relative; display:block; padding:10px 12px; border-radius:14px;
  font-size:15px; font-weight:500; line-height:1.3;
  color:var(--white); text-decoration:none;
  transition:background-color 180ms var(--ease);
}
.vl-dropdown-item:hover,
.vl-dropdown-item:focus-visible{ background:rgba(255,255,255,0.08); outline:none; }
.vl-item-sub{
  display:block; margin-top:4px;
  font-size:12.5px; font-weight:400; line-height:1.45; color:var(--on-forest-dim);
  transition:color 180ms var(--ease);
}
.vl-dropdown-item:hover .vl-item-sub{ color:var(--on-forest); }
.vl-ext{ margin-left:6px; font-size:0.78em; color:var(--on-forest-dim); }
/* the page you are on: a mint edge rather than a filled block */
.vl-dropdown-item[aria-current="page"]{ background:rgba(255,255,255,0.05); }
.vl-dropdown-item[aria-current="page"]::before{
  content:""; position:absolute; left:0; top:11px; bottom:11px;
  width:3px; border-radius:0 3px 3px 0; background:var(--mint);
}

/* the section's own overview, above its groups */
.vl-menu-feature{
  position:relative; display:block; margin-bottom:8px; padding:15px 46px 15px 16px;
  border-radius:16px; color:var(--white); text-decoration:none;
  background:rgba(79,177,121,0.12); border:1px solid rgba(79,177,121,0.32);
  transition:background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.vl-menu-feature:hover{ background:rgba(79,177,121,0.20); border-color:rgba(79,177,121,0.5); }
.vl-menu-feature:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
.vl-menu-feature-t{ font-size:16px; font-weight:600; line-height:1.3; }
.vl-menu-feature .vl-item-sub{ margin-top:3px; }
.vl-menu-feature .vl-arr{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  color:var(--mint); transition:transform 200ms var(--ease);
}
.vl-menu-feature:hover .vl-arr{ transform:translate(3px,-50%); }

/* --- CTA --- */
.vl-btn-cta{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  min-height:var(--btn-h); padding:11px 24px; border-radius:var(--r-btn);
  background:var(--white); color:var(--forest);
  font-family:var(--sans); font-size:var(--body); font-weight:600; line-height:1;
  text-decoration:none; white-space:nowrap;
  transition:background-color 200ms var(--ease), transform 200ms var(--ease);
}
.vl-btn-cta:hover{ background:#eef1ee; transform:translateY(-1px); }
.vl-btn-cta:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }

/* --- mobile toggle --- */
.vl-hamburger{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px; padding:0;
  border:0; background:transparent; cursor:pointer;
}
.vl-hamburger span{
  display:block; width:22px; height:2px; border-radius:2px; background:var(--white);
  transition:transform 260ms var(--ease), opacity 200ms var(--ease);
}
.vl-hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.vl-hamburger.open span:nth-child(2){ opacity:0; }
.vl-hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.vl-hamburger:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; border-radius:var(--r-chip); }

/* A breakpoint outside the guide's two, for a stated reason: the logo, five
   links and the CTA need about 1,040px of bar, so they collide anywhere below
   roughly 1,120px if they only collapsed at 809px. */
@media (max-width:1119px){
  .vl-nav-links,.vl-btn-cta{ display:none; }
  .vl-hamburger{ display:flex; }
}

/* --- mobile drawer --- */
.vl-mobile-menu{
  position:fixed; z-index:59;
  top:calc(var(--nav-h) - 8px); left:var(--gutter); right:var(--gutter);
  max-height:calc(100svh - var(--nav-h) - 16px); overflow-y:auto;
  padding:12px 16px 16px; border-radius:24px;
  background:rgba(18,39,31,0.97);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.12);
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity 240ms var(--ease), transform 240ms var(--ease),
             visibility 0s linear 240ms;
}
.vl-mobile-menu.open{
  opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s;
}
@media (min-width:1120px){ .vl-mobile-menu{ display:none; } }
/* the two paths lead, as tiles */
.vl-mobile-paths{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 4px; }
.vl-mobile-path{
  display:flex; flex-direction:column; gap:4px; padding:14px 14px 12px;
  border-radius:16px; text-decoration:none;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18);
  color:var(--white); font-size:15px; font-weight:600; line-height:1.25;
  transition:background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.vl-mobile-path:hover{ background:rgba(255,255,255,0.12); }
.vl-mobile-path span{
  font-size:12px; font-weight:400; line-height:1.4; color:var(--on-forest-dim);
}
.vl-mobile-path[aria-current="page"]{
  background:rgba(79,177,121,0.14); border-color:rgba(79,177,121,0.5);
}

/* each group of links sits on its own quiet panel, no dividing lines */
.vl-mobile-group{
  margin-top:12px; padding:2px 4px 6px; border-radius:18px;
  background:rgba(255,255,255,0.04);
}
.vl-mobile-section-label{
  padding:12px 12px 6px;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mint);
}
.vl-mobile-sub-link{
  position:relative; display:block; padding:11px 12px; border:0; border-radius:12px;
  font-size:15px; line-height:1.3; color:var(--on-forest); text-decoration:none;
  transition:background-color 180ms var(--ease), color 180ms var(--ease);
}
.vl-mobile-sub-link:hover{ background:rgba(255,255,255,0.06); color:var(--white); }
.vl-mobile-sub-link[aria-current="page"]{ background:rgba(255,255,255,0.07); color:var(--white); }
.vl-mobile-sub-link[aria-current="page"]::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px;
  width:3px; border-radius:0 3px 3px 0; background:var(--mint);
}
.vl-mobile-cta{
  display:flex; align-items:center; justify-content:center; margin-top:16px;
  min-height:var(--btn-h); padding:11px 24px; border-radius:var(--r-btn);
  background:var(--white); color:var(--forest);
  font-size:var(--body); font-weight:600; text-decoration:none;
}
@media (prefers-reduced-motion: reduce){
  .vl-nav,.vl-nav::before,.vl-dropdown-menu,.vl-mobile-menu,.vl-hamburger span{ transition:none; }
}

/* ==========================================================================
   SUBNAV (page-level, sticky under the nav)
   ========================================================================== */
.vl-subnav{
  position:sticky; top:var(--nav-h); z-index:40;
  background:rgba(249,249,247,0.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:var(--border-w) solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.vl-subnav::-webkit-scrollbar{ display:none; }
.vl-subnav-inner{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; gap:32px;
}
.vl-subnav-link{
  flex:none; display:block; padding:16px 0 14px;
  border-bottom:2px solid transparent;
  font-size:var(--eyebrow); font-weight:500; line-height:1.5;
  color:var(--text-2); text-decoration:none; white-space:nowrap;
  transition:color 200ms var(--ease), border-color 200ms var(--ease);
}
.vl-subnav-link:hover{ color:var(--near-black); }
.vl-subnav-link.active{ color:var(--near-black); border-bottom-color:var(--mint); }
.vl-subnav-link:focus-visible{ outline:2px solid var(--mint-ink); outline-offset:-2px; }

/* Once stuck, the subnav and any other following bar travel with the nav. When
   the nav leaves (html.nav-hidden) they rise into its place and stay a while;
   after a further stretch of reading (html.subnav-hidden, see LINGER in
   site.js) they slide up by their own sticky offset plus their own height. */
.vl-subnav,
[data-follow-nav]{ transition:transform 360ms var(--ease); }
.vl-subnav{ --follow-top:var(--nav-h); }
html.nav-hidden .vl-subnav.is-stuck,
html.nav-hidden [data-follow-nav].is-stuck{
  transform:translateY(calc(-1 * var(--nav-h)));
}
html.subnav-hidden .vl-subnav.is-stuck,
html.subnav-hidden [data-follow-nav].is-stuck{
  transform:translateY(calc(-1 * var(--follow-top, var(--nav-h)) - 100%));
}
@media (prefers-reduced-motion: reduce){
  .vl-subnav,[data-follow-nav]{ transition:none; }
}

.vl-nav-spacer{ height:var(--nav-h); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.vl-footer{
  background:var(--forest); color:var(--on-forest-dim);
  border-top:1px solid var(--on-forest-rule);
  padding-block:72px 40px; font-size:15px;
}
.vl-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
@media (max-width:1199px){ .vl-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:809px){ .vl-footer-grid{ grid-template-columns:1fr; gap:40px; } }
.vl-footer-logo{ height:30px; width:auto; display:block; margin-bottom:24px; }
.vl-footer-tagline{
  font-family:var(--serif); font-size:24px; line-height:1.2;
  color:var(--white); margin-bottom:12px;
}
.vl-footer-tagline em{ color:var(--mint); font-style:italic; }
.vl-footer-desc{ max-width:34ch; line-height:1.6; }
.vl-footer-label{
  margin-bottom:20px;
  font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--mint);
}
.vl-footer-list{ list-style:none; display:grid; gap:12px; }
.vl-footer a{ color:var(--on-forest-dim); text-decoration:none; transition:color 200ms var(--ease); }
.vl-footer a:hover{ color:var(--white); }
.vl-footer a:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
.vl-footer-bottom{
  margin-top:56px; padding-top:28px; border-top:1px solid var(--on-forest-rule);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px;
  font-size:var(--eyebrow);
}

/* the overview row when it is the page you are on */
.vl-menu-feature[aria-current="page"]{ background:rgba(79,177,121,0.22); border-color:var(--mint); }