@font-face{
    font-family:'DM Sans';
    src:url('fonts/DM-Sans-variable-normal.woff2') format('woff2');
    font-weight:400 700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'DM Sans';
    src:url('fonts/DM-Sans-400-italic.woff2') format('woff2');
    font-weight:400; font-style:italic; font-display:swap;
  }
  @font-face{
    font-family:'Caveat';
    src:url('fonts/Caveat-variable.woff2') format('woff2');
    font-weight:500 700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Dream Avenue';
    src:url('fonts/Dream-Avenue-400-normal.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Playfair Display';
    src:url('fonts/Playfair-400-normal.woff2') format('woff2');
    font-weight:400 700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Playfair Display';
    src:url('fonts/Playfair-400-italic.woff2') format('woff2');
    font-weight:400 700; font-style:italic; font-display:swap;
  }
  
  
  @font-face{
    font-family:'Cairo';
    src:url('fonts/Cairo-400-normal.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Cairo';
    src:url('fonts/Cairo-500-normal.woff2') format('woff2');
    font-weight:500; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Cairo';
    src:url('fonts/Cairo-600-normal.woff2') format('woff2');
    font-weight:600; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Cairo';
    src:url('fonts/Cairo-700-normal.woff2') format('woff2');
    font-weight:700; font-style:normal; font-display:swap;
  }
  :root{
    --teal:#0D4940;
    --berry:#833454;
    --mint:#CAD3C1;
    --cloud:#F2F2E9;
    --orange:#D73C29;
    --blush:#ECC6C7;
    --cloud-deep:#b3bfae; /* cloud, deepened so scribbles still show on light backgrounds */
    --black:#1a1a1a;
    --serif: 'Playfair Display', serif; /* brand header/display face */
    --sans: 'DM Sans', sans-serif;   /* brand body face */
    --sans-ar: 'Cairo', sans-serif;  /* reserved for Arabic content only */
    --logo: 'Dream Avenue', serif;   /* logo/script accent face */
    --hand: 'Caveat', cursive;        /* hand-drawn annotation face */
  }
  [lang="ar"], [dir="rtl"]{ font-family:var(--sans-ar); }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    margin:0;
    font-family:var(--sans);
    background:var(--cloud);
    color:var(--black);
    line-height:1.55;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  h1,h2,h3,h4{font-family:var(--serif); margin:0; font-weight:500; letter-spacing:-0.01em;}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  section{position:relative;}

  /* ---------- Hero parallax: the photo section stays in place and the next
     section scrolls up over it (the stick offset is set per page by script) ---------- */
  section.hero, section.page-hero, section.wwd-intro{
    position:sticky; top:var(--hero-stick-top, 0px);
    background-attachment:scroll !important;
  }
  @media(prefers-reduced-motion:reduce){
    section.hero, section.page-hero, section.wwd-intro{ position:relative; top:auto; }
  }
  /* released once the section above has fully covered it (see script) */
  section.hero.hero-unpinned, section.page-hero.hero-unpinned, section.wwd-intro.hero-unpinned{
    position:relative; top:auto;
  }

  /* Hairline seams: on screens whose pixel ratio isn't a whole number (most
     phones), section heights land on fractional pixels and the browser can
     leave a 1px sliver between two sections. Overlapping each section by 1px
     removes any possible gap without changing the layout. */
  body > section + section,
  body > section + div,
  body > div + footer{ margin-top:-1px; }

  /* brand words always set in the logo face */
  .brand-word{ font-family:var(--logo); font-style:normal; font-weight:500; font-size:1.08em; letter-spacing:0.01em; }

  /* Hand-drawn feel for the line icons: a small displacement filter roughens
     the strokes so they sit with the hand-drawn marks. */
  .sketch-defs{ position:absolute; width:0; height:0; overflow:hidden; }
  svg.hd-mark{ filter:none !important; } /* already hand-drawn */
  /* every line icon on the site gets the rough pen treatment; the pieces that
     are already hand-drawn (or are the logo mark / big watermarks) are left alone */
  svg:not(.hd-mark):not(.scribble):not(.sketch-defs):not(.banner-motif):not(.banner-underline):not(.action-labs-watermark):not(.assess-watermark):not(.foot-watermark):not(.purpose-star):not(.hand-note-icon){
    filter:url(#sketchy);
  }
  .nav-icon svg, .team-photo-tag svg, .essence-photo-tag svg, .cue-mark svg,
  .path-detail-icon-bg, .video-frame svg, .cue-cursor svg{ filter:none; }

  /* ---------- NAV ---------- */
  .nav-zone{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:22px 24px;
    animation:navDropIn .7s cubic-bezier(.2,.8,.2,1) .1s both;
    transition:padding .35s ease;
  }
  .nav-zone.scrolled{ padding:16px 24px; }
  .nav-zone.scrolled .nav-icon,
  .nav-zone.scrolled .nav-burger{
    box-shadow:0 6px 18px rgba(0,0,0,0.28);
  }
  /* ---- Header options, one per page (data-nav-mode on .nav-zone) ----
     bar      : icons settle onto a slim translucent header bar once scrolled
     autohide : the pair slides away while scrolling down, returns on scroll up
     single   : only the menu button stays after the hero; the logo fades out
     float    : the original two floating icons                                */
  .nav-zone[data-nav-mode="bar"]{ transition:padding .35s ease, background .35s ease, box-shadow .35s ease; }
  .nav-zone[data-nav-mode="bar"].scrolled{
    padding:11px 24px;
    background:rgba(242,242,233,0.88);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
            backdrop-filter:blur(14px) saturate(1.15);
    box-shadow:0 14px 34px -22px rgba(13,73,64,0.55);
  }
  .nav-zone[data-nav-mode="bar"] .nav-icon,
  .nav-zone[data-nav-mode="bar"] .nav-burger{ transition:width .3s ease, height .3s ease, box-shadow .3s ease, opacity .15s ease; }
  .nav-zone[data-nav-mode="bar"].scrolled .nav-icon,
  .nav-zone[data-nav-mode="bar"].scrolled .nav-burger{ width:46px; height:46px; box-shadow:none; }
  .nav-zone[data-nav-mode="bar"].scrolled .nav-burger span{ width:20px; }

  .nav-zone[data-nav-mode="autohide"]{ transition:transform .4s cubic-bezier(.2,.8,.2,1), padding .35s ease; }
  /* the drop-in animation fills forwards, which would otherwise lock the transform */
  .nav-zone[data-nav-mode="autohide"].nav-hidden{ animation:none; transform:translateY(-135%); }

  .nav-zone[data-nav-mode="single"] .nav-icon{ transition:opacity .3s ease, transform .3s ease; }
  .nav-zone[data-nav-mode="single"].scrolled .nav-icon{ opacity:0; transform:scale(.85); pointer-events:none; }


  /* ================= Header layouts (data-nav-style on .nav-zone) ==========
     split   : logo mark left, menu button right; menu opens as a centred bar
     centre  : wordmark + menu button joined in one pill in the middle; the
               links unfold inside the pill
     right   : the same joined pill at the right; menu drops down as a list
     bar     : slim full-width header with the links always on show
     overlay : joined pill at the right; the menu fills the screen
     Below 1151px every style falls back to the shared stacked dropdown.
     ========================================================================= */
  .nav-lockup-link{ display:none; align-items:center; }
  .nav-lockup{ height:26px; width:auto; object-fit:contain; display:block; }

  @media(min-width:1151px){
    /* --- joined pill shared by centre / right / overlay --- */
    .nav-zone[data-nav-style="centre"] .nav-inner,
    .nav-zone[data-nav-style="right"] .nav-inner,
    .nav-zone[data-nav-style="overlay"] .nav-inner{
      width:max-content; background:var(--teal); box-shadow:0 6px 20px rgba(13,73,64,0.3);
      align-items:stretch;
    }
    .nav-zone[data-nav-style="centre"] .nav-inner{ margin:0 auto; }
    .nav-zone[data-nav-style="right"] .nav-inner,
    .nav-zone[data-nav-style="overlay"] .nav-inner{ margin:0 0 0 auto; }
    .nav-zone[data-nav-style="centre"] .nav-icon,
    .nav-zone[data-nav-style="right"] .nav-icon,
    .nav-zone[data-nav-style="bar"] .nav-icon{ display:none; }
    /* overlay keeps the logo icon rather than the wordmark, in the same pill */
    .nav-zone[data-nav-style="overlay"] .nav-icon{
      display:flex; width:56px; height:56px; border-radius:0;
      background:transparent; box-shadow:none;
    }
    .nav-zone[data-nav-style="overlay"] .nav-icon svg{ width:24px; height:24px; }
    .nav-zone[data-nav-style="centre"] .nav-lockup-link,
    .nav-zone[data-nav-style="right"] .nav-lockup-link{ display:flex; margin:0 20px 0 24px; }
    .nav-zone[data-nav-style="centre"] .nav-burger,
    .nav-zone[data-nav-style="right"] .nav-burger,
    .nav-zone[data-nav-style="overlay"] .nav-burger{
      background:transparent; box-shadow:none; width:56px; height:56px;
      border-left:1px solid rgba(242,242,233,0.22);
    }

    /* centre: the links live inside the pill and the pill grows and shrinks
       around them, so opening and closing is one smooth movement */
    .nav-zone[data-nav-style="centre"] .nav-links{
      position:static; transform:none; height:56px; background:transparent;
      box-shadow:none; padding:0; opacity:0;
      max-width:0; overflow:hidden; flex-wrap:nowrap; white-space:nowrap;
      transition:max-width .5s cubic-bezier(.22,1,.36,1), opacity .25s ease, padding .5s cubic-bezier(.22,1,.36,1);
    }
    .nav-zone[data-nav-style="centre"].pinned .nav-links{
      max-width:720px; opacity:1; padding:0 14px 0 0;
    }
    .nav-zone[data-nav-style="centre"] .nav-links .nav-logo-lockup{ display:none; }

    /* right: vertical list under the pill */
    .nav-zone[data-nav-style="right"] .nav-links{
      top:calc(100% + 12px); left:auto; right:0; transform:none;
      flex-direction:column; align-items:stretch; height:auto;
      padding:12px 10px; gap:2px; min-width:230px; max-width:none;
    }
    .nav-zone[data-nav-style="right"] .nav-links a{ padding:11px 16px; }
    .nav-zone[data-nav-style="right"] .nav-links .nav-logo-lockup{ display:none; }
    /* the call button spans the panel like the links, instead of floating
       inset and centred; its text sits on the same 16px left edge as the
       links above it so the whole list reads as one column */
    .nav-zone[data-nav-style="right"] .nav-links .nav-cta{
      margin:10px 0 2px; padding:13px 16px; width:auto; align-self:stretch;
      justify-content:flex-start; text-align:left;
    }

    /* bar: slim full-width header, links always visible, no menu button */
    .nav-zone[data-nav-style="bar"]{ padding:0; }
    .nav-zone[data-nav-style="bar"] .nav-inner{
      max-width:none; width:100%; padding:0 30px; height:64px;
      background:rgba(13,73,64,0.94);
      -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
      justify-content:space-between;
    }
    .nav-zone[data-nav-style="bar"] .nav-lockup-link{ display:flex; }
    .nav-zone[data-nav-style="bar"] .nav-burger{ display:none; }
    .nav-zone[data-nav-style="bar"] .nav-links{
      position:static; transform:none; opacity:1; pointer-events:auto;
      background:transparent; box-shadow:none; height:64px; padding:0;
      max-width:none; margin-left:auto;
    }
    .nav-zone[data-nav-style="bar"] .nav-links .nav-logo-lockup{ display:none; }

    /* overlay: the menu fills the screen */
    .nav-zone[data-nav-style="overlay"] .nav-links{
      position:fixed; inset:0; width:100vw; max-width:none; height:100vh;
      transform:none; padding:0; gap:22px;
      flex-direction:column; align-items:center; justify-content:center;
      background:var(--teal); box-shadow:none; transition:opacity .35s ease;
      z-index:1;
    }
    .nav-zone[data-nav-style="overlay"] .nav-links a{ font-size:28px; }
    .nav-zone[data-nav-style="overlay"] .nav-links .nav-cta{ font-size:18px; padding:14px 30px; }
    .nav-zone[data-nav-style="overlay"] .nav-links .nav-logo-lockup{ display:block; height:38px; margin:0 0 14px; }
    .nav-zone[data-nav-style="overlay"] .nav-inner{ position:relative; z-index:2; }
    /* The full-screen panel is a CHILD of .nav-inner, so z-index on .nav-inner
       can't lift the close button above it — the button needs its own layer, or
       the panel paints over it and swallows the click. */
    .nav-zone[data-nav-style="overlay"] .nav-burger{ position:relative; z-index:2; }
    .nav-zone[data-nav-style="overlay"].pinned .nav-inner{ background:transparent; box-shadow:none; }
    .nav-zone[data-nav-style="overlay"].pinned .nav-icon{ opacity:0; pointer-events:none; }

    /* --- Active page marker, one shape per header layout ---
       split / centre : short rule under the word, inside the pill
       bar            : rule pinned to the bottom edge of the header bar
       right          : full-row tint with a marker down the left edge
       overlay        : short centred rule under the large type            */
    .nav-zone[data-nav-style="split"] .nav-links a.active::after,
    .nav-zone[data-nav-style="centre"] .nav-links a.active::after,
    .nav-zone[data-nav-style="bar"] .nav-links a.active::after{
      content:''; position:absolute; left:0; right:0; height:2px;
      background:var(--blush);
    }
    .nav-zone[data-nav-style="split"] .nav-links a.active::after{ bottom:19px; }
    .nav-zone[data-nav-style="centre"] .nav-links a.active::after{ bottom:14px; }
    .nav-zone[data-nav-style="bar"] .nav-links a.active::after{ bottom:0; height:3px; background:var(--orange); }

    .nav-zone[data-nav-style="right"] .nav-links a.active{
      background:rgba(242,242,233,0.09);
      box-shadow:inset 2px 0 0 var(--blush);
    }

    .nav-zone[data-nav-style="overlay"] .nav-links a.active::after{
      content:''; position:absolute; left:50%; bottom:-6px;
      width:46px; height:2px; margin-left:-23px; background:var(--orange);
    }

    /* drawer: circular outline buttons, menu slides in from the right edge */
    .nav-zone[data-nav-style="drawer"] .nav-inner{ position:relative; z-index:2; }
    .nav-zone[data-nav-style="drawer"] .nav-icon,
    .nav-zone[data-nav-style="drawer"] .nav-burger{
      width:52px; height:52px; border-radius:50%;
      background:rgba(242,242,233,0.14); box-shadow:none;
      border:1px solid rgba(202,211,193,0.55); border-left:1px solid rgba(202,211,193,0.55);
      -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
      transition:background .25s ease, border-color .25s ease;
    }
    .nav-zone[data-nav-style="drawer"] .nav-burger:hover{ background:rgba(242,242,233,0.24); }
    /* staggered bars instead of three equal ones */
    .nav-zone[data-nav-style="drawer"] .nav-burger span:nth-child(1){ width:20px; }
    .nav-zone[data-nav-style="drawer"] .nav-burger span:nth-child(2){ width:13px; align-self:flex-end; margin-right:16px; }
    .nav-zone[data-nav-style="drawer"] .nav-burger span:nth-child(3){ width:20px; }
    /* the burger sits above the sliding panel, or the panel swallows the click */
    .nav-zone[data-nav-style="drawer"] .nav-burger{ position:relative; z-index:3; }

    /* dim layer behind the panel; clicking it closes the menu (see script) */
    .nav-zone[data-nav-style="drawer"]::before{
      /* .nav-zone is animated, so it becomes the containing block for fixed
         children — the explicit 100vw/100vh is what makes this cover the page
         rather than just the header strip. */
      content:''; position:fixed; top:0; left:0; width:100vw; height:100vh;
      background:rgba(6,20,17,0.52);
      opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:0;
    }
    .nav-zone[data-nav-style="drawer"].pinned::before{ opacity:1; pointer-events:auto; }

    .nav-zone[data-nav-style="drawer"] .nav-links{
      position:fixed; top:0; right:0; bottom:0; left:auto;
      width:min(420px, 86vw); max-width:none; height:100vh;
      flex-direction:column; align-items:stretch; justify-content:flex-start;
      gap:0; padding:104px 34px 40px; z-index:1;
      background:var(--teal); box-shadow:-24px 0 64px -34px rgba(0,0,0,.65);
      overflow-y:auto;
      transform:translateX(100%);
      transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    }
    .nav-zone[data-nav-style="drawer"].pinned .nav-links{ transform:translateX(0); }
    .nav-zone[data-nav-style="drawer"] .nav-links .nav-logo-lockup{
      display:block; height:30px; margin:0 0 26px; align-self:flex-start;
    }
    .nav-zone[data-nav-style="drawer"] .nav-links a{
      font-size:19px; padding:15px 0; justify-content:flex-start;
      border-bottom:1px solid rgba(242,242,233,0.12);
    }
    .nav-zone[data-nav-style="drawer"] .nav-links .nav-cta{
      margin-top:22px; padding:15px 22px; align-self:stretch; width:auto;
      justify-content:flex-start; text-align:left;
      border-bottom:none; font-size:16px !important;
    }
    .nav-zone[data-nav-style="drawer"] .nav-links a.active::after{
      content:''; position:absolute; left:0; bottom:10px;
      width:30px; height:2px; background:var(--orange);
    }

    /* only the original layout opens on hover; the others are click/tap */
    .nav-zone:not(.pinned):not([data-nav-style="split"]):not([data-nav-style="bar"]):hover .nav-links{ opacity:0; pointer-events:none; }
    .nav-zone:not(.pinned):not([data-nav-style="split"]):not([data-nav-style="bar"]):hover .nav-icon{ opacity:1; }
    .nav-zone:not(.pinned):not([data-nav-style="split"]):not([data-nav-style="bar"]):hover .nav-burger span:nth-child(1),
    .nav-zone:not(.pinned):not([data-nav-style="split"]):not([data-nav-style="bar"]):hover .nav-burger span:nth-child(3){ transform:none; }
    .nav-zone:not(.pinned):not([data-nav-style="split"]):not([data-nav-style="bar"]):hover .nav-burger span:nth-child(2){ opacity:1; }
    .nav-zone:not([data-nav-style="split"]).pinned .nav-links{ opacity:1; pointer-events:auto; }
    .nav-zone:not([data-nav-style="split"]).pinned .nav-burger span:nth-child(1){ transform:translateY(8.4px) rotate(45deg); }
    .nav-zone:not([data-nav-style="split"]).pinned .nav-burger span:nth-child(2){ opacity:0; }
    .nav-zone:not([data-nav-style="split"]).pinned .nav-burger span:nth-child(3){ transform:translateY(-8.4px) rotate(-45deg); }
  }
  @keyframes navUnfold{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }

  /* below 1151px: one consistent mobile header for every style */
  @media(max-width:1150px){
    .nav-zone[data-nav-style] .nav-inner{
      width:auto; margin:0 auto; background:transparent; box-shadow:none;
      justify-content:space-between; padding:0; height:auto;
    }
    .nav-zone[data-nav-style] .nav-icon{ display:flex; }
    .nav-zone[data-nav-style] .nav-lockup-link{ display:none; }
    .nav-zone[data-nav-style] .nav-burger{
      display:flex; background:var(--teal); box-shadow:0 4px 16px rgba(13,73,64,0.3);
      border-left:none; width:58px; height:58px;
    }
    .nav-zone[data-nav-style] .nav-links{
      position:absolute; inset:auto 0 auto 0; top:calc(100% + 14px);
      width:auto; max-width:none; height:auto; transform:none;
      flex-direction:column; align-items:stretch;
      background:var(--teal); box-shadow:0 6px 24px rgba(13,73,64,0.28);
      animation:none;
    }
    .nav-zone[data-nav-style] .nav-links .nav-logo-lockup{ display:block; }
  }

  @keyframes navDropIn{
    from{ opacity:0; transform:translateY(-18px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .nav-inner{
    max-width:1180px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    position:relative;
  }
  .nav-icon{
    width:58px; height:58px; border-radius:50%; /* logo mark stays a circle */
    background:var(--teal);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(13,73,64,0.3);
    transition:opacity .15s ease;
    flex-shrink:0;
  }
  .nav-icon svg{ width:24px; height:24px; }

  .nav-burger{
    width:58px; height:58px; border-radius:0; border:none;
    background:var(--teal); cursor:pointer;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
    box-shadow:0 4px 16px rgba(13,73,64,0.3);
    flex-shrink:0;
  }
  .nav-burger span{
    display:block; width:22px; height:2.4px; background:var(--cloud); border-radius:0;
    transition:transform .3s ease, opacity .3s ease;
  }
  /* Burger -> X and icon fade: driven by .pinned (works everywhere, click/tap-based)
     and additionally by :hover, but ONLY on devices that have genuine mouse hover
     (touch devices get a "sticky hover" after tap in many browsers, which would
     otherwise leave the icon hidden/burger crossed indefinitely). */
  .nav-zone.pinned .nav-burger span:nth-child(1){ transform:translateY(8.4px) rotate(45deg); }
  .nav-zone.pinned .nav-burger span:nth-child(2){ opacity:0; }
  .nav-zone.pinned .nav-burger span:nth-child(3){ transform:translateY(-8.4px) rotate(-45deg); }
  .nav-zone.pinned .nav-icon{ opacity:0; }

  .nav-links{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    display:flex; align-items:stretch; gap:22px;
    background:var(--teal); padding:0 26px; border-radius:0;
    box-shadow:0 6px 24px rgba(13,73,64,0.28);
    opacity:0; pointer-events:none; height:66px;
    width:max-content; max-width:calc(100vw - 216px);
    transition:opacity .3s ease .15s;
  }
  .nav-zone.pinned .nav-links{ opacity:1; pointer-events:auto; }

  @media(hover:hover) and (pointer:fine) and (min-width:1151px){
    .nav-zone:hover .nav-links{ opacity:1; pointer-events:auto; }
    .nav-zone:hover .nav-icon{ opacity:0; }
    .nav-zone:hover .nav-burger span:nth-child(1){ transform:translateY(8.4px) rotate(45deg); }
    .nav-zone:hover .nav-burger span:nth-child(2){ opacity:0; }
    .nav-zone:hover .nav-burger span:nth-child(3){ transform:translateY(-8.4px) rotate(-45deg); }
  }
  .nav-logo-lockup{ height:26px; width:auto; aspect-ratio:860.76/120; max-width:190px; display:block; flex-shrink:0; align-self:center; margin-right:10px; object-fit:contain; }
  .nav-links a{
    display:flex; align-items:center;
    font-size:14.5px; letter-spacing:0.01em; color:var(--cloud); font-weight:500; white-space:nowrap;
  }
  .nav-links a:hover{ color:var(--blush); }

  /* ---------- ACTIVE PAGE ----------
     Shared colour shift, then a marker shaped to each header layout below.
     The markers are absolutely positioned so nothing shifts when a link
     becomes current. */
  .nav-links a.active{ color:var(--blush); position:relative; }
  .nav-links a.active:hover{ color:var(--blush); }
  /* Book a Call is already a solid block, so it gets a ring instead */
  .nav-links a.nav-cta.active{ color:#fff !important; box-shadow:0 0 0 2px var(--cloud); }
  .nav-links a.nav-cta.active::after{ display:none; }
  .nav-cta{
    background:var(--orange) !important; color:#fff !important;
    padding:11px 20px; border-radius:0; font-size:14px !important;
    height:auto !important; align-self:center;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(215,60,41,0.35); }
  .nav-cta:active{ transform:translateY(0) scale(.96); }

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- PURPOSE STATEMENT ---------- */
  .purpose{
    padding:110px 0 116px; text-align:center; position:relative; overflow:hidden;
    background:
      /* glows fade out before the top/bottom edges so the section flows into its neighbours */
      radial-gradient(50% 40% at 50% 32%, rgba(236,198,199,0.5) 0%, rgba(236,198,199,0) 70%),
      radial-gradient(45% 40% at 100% 68%, rgba(202,211,193,0.48) 0%, rgba(202,211,193,0) 65%),
      var(--cloud);
  }
  .purpose-glow{
    position:absolute; top:38%; left:50%; width:340px; height:340px;
    transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(131,52,84,0.14) 0%, rgba(131,52,84,0) 72%);
  }
  .purpose-ornament{
    display:flex; align-items:center; justify-content:center; gap:22px;
    margin-bottom:26px; position:relative; z-index:1;
  }
  .purpose-line{
    width:64px; height:1px; background:linear-gradient(90deg, transparent, var(--mint));
  }
  .purpose-ornament .purpose-line:last-child{ background:linear-gradient(90deg, var(--mint), transparent); }
  .purpose-star{
    color:var(--berry); display:block; flex-shrink:0;
    opacity:0; transform:scale(.6) rotate(-18deg);
    transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  }
  .purpose-ornament.in .purpose-star{ opacity:1; transform:scale(1) rotate(0deg); }
  /* hand-drawn marks are filled shapes, not stroked lines */
  .purpose-star path{ fill:currentColor; stroke:none; }
  .purpose h2{
    max-width:860px; margin:0 auto; font-size:clamp(28px,4vw,44px);
    line-height:1.45; font-weight:400; color:var(--teal); position:relative; z-index:1;
    font-family:var(--sans);
  }
  .purpose-accent{ color:var(--berry); }
  @media(max-width:860px){
    .purpose{ padding:68px 0 76px; }
    .purpose-star{ width:64px; height:64px; }
    .purpose-line{ width:32px; }
    .purpose-ornament{ gap:14px; margin-bottom:20px; }
    .purpose-glow{ width:240px; height:240px; }
  }

  /* ---------- SCROLL PROGRESS ---------- */
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
    background:linear-gradient(90deg,var(--berry),var(--blush),var(--mint),var(--teal));
    transition:width .12s ease-out;
  }

  /* ---------- CUSTOM CURSOR ---------- */
  @media (hover:hover) and (pointer:fine){
    body.cue-cursor-active, body.cue-cursor-active *{ cursor:none !important; }
  }
  .cue-cursor-dot, .cue-cursor-ring{
    position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
    opacity:0; transition:opacity .35s ease;
  }
  body.cue-cursor-active .cue-cursor-dot, body.cue-cursor-active .cue-cursor-ring{ opacity:1; }
  .cue-cursor-dot{
    width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
    background:var(--orange);
    transition:opacity .3s ease, width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), margin .3s cubic-bezier(.2,.8,.2,1);
  }
  .cue-cursor-ring{
    width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
    border:1.5px solid var(--cloud); mix-blend-mode:difference;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .3s ease, width .4s cubic-bezier(.2,.8,.2,1), height .4s cubic-bezier(.2,.8,.2,1),
      margin .4s cubic-bezier(.2,.8,.2,1), border-width .3s ease;
  }
  .cue-cursor-label{
    font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.06em;
    color:var(--cloud); text-transform:uppercase; opacity:0; white-space:nowrap;
    transition:opacity .25s ease; transform:translateY(1px);
  }
  /* Reading state: over body copy the ring shrinks to a faint outline so it
     no longer sits on top of the words underneath it while someone reads. */
  body.cue-cursor-text .cue-cursor-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; opacity:.55; }
  body.cue-cursor-text .cue-cursor-ring{ width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-width:1px; opacity:.4; }
  body.cue-cursor-hover .cue-cursor-dot{ width:0; height:0; margin:0; opacity:0; }
  body.cue-cursor-hover .cue-cursor-ring{ width:58px; height:58px; margin:-29px 0 0 -29px; }
  body.cue-cursor-view .cue-cursor-dot{ width:0; height:0; margin:0; opacity:0; }
  body.cue-cursor-view .cue-cursor-ring{ width:82px; height:82px; margin:-41px 0 0 -41px; }
  body.cue-cursor-view .cue-cursor-label{ opacity:1; }

  /* ---------- BLOB / MOTIFS ---------- */
  .blob{position:absolute; z-index:0; pointer-events:none;}
  .drift{animation:drift 14s ease-in-out infinite;}
  @keyframes drift{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    50%{ transform:translate(14px,-18px) rotate(4deg); }
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex; align-items:center;
    padding:140px 0 120px;
    overflow:hidden;
    position:relative;
    z-index:0;
    background:
      radial-gradient(120% 85% at 50% 20%, rgba(8,6,6,0) 0%, rgba(8,6,6,0.35) 55%, rgba(8,6,6,0.7) 100%),
      linear-gradient(180deg, rgba(8,6,6,0.62) 0%, rgba(8,6,6,0.12) 30%, rgba(8,6,6,0.2) 58%, rgba(6,5,5,0.88) 100%),
      linear-gradient(115deg, rgba(13,73,64,0.4) 0%, rgba(131,52,84,0.22) 48%, rgba(13,73,64,0.28) 100%),
      url('images/hero-bg.jpg') center 30%/cover no-repeat;
  }
  /* Parallax: pin the hero image while the next section scrolls up over it.
     Fixed backgrounds are unreliable on touch devices, so this is desktop-only;
     mobile keeps a normal scrolling background. */
  @media (hover:hover) and (pointer:fine){
    .hero{ background-attachment:fixed, fixed, fixed, fixed; }
  }
  .hero-inner{
    max-width:1180px; margin:0 auto; position:relative; z-index:2;
    display:grid; grid-template-columns:1fr 0.92fr; gap:56px; align-items:center; text-align:left;
  }
  .hero-right{
    background:rgba(8,6,6,0.22); backdrop-filter:blur(6px);
    border:1px solid rgba(242,242,233,0.14);
    border-radius:0; padding:26px 26px 22px;
  }
  .hero-poll-tag{ color:var(--blush) !important; text-shadow:0 2px 12px rgba(0,0,0,0.4); }
  .hero-right .poll-card{
    margin-top:16px; opacity:0; transform:translateY(18px) scale(.97);
    transition:opacity .6s cubic-bezier(.22,1,.36,1) .12s, transform .6s cubic-bezier(.22,1,.36,1) .12s;
  }
  .hero-right.in .poll-card{ opacity:1; transform:translateY(0) scale(1); }
  .hero-right .poll-live{ opacity:0; transform:scale(.6); transition:opacity .4s ease .5s, transform .4s cubic-bezier(.34,1.56,.64,1) .5s; }
  .hero-right.in .poll-live{ opacity:1; transform:scale(1); }
  .hero-right .poll-opt{ opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; }
  .hero-right.in .poll-opt{ opacity:1; transform:translateY(0); }
  .hero-right.in .poll-opt:nth-child(1){ transition-delay:.32s; }
  .hero-right.in .poll-opt:nth-child(2){ transition-delay:.4s; }
  .hero-right.in .poll-opt:nth-child(3){ transition-delay:.48s; }
  .hero-right.in .poll-opt:nth-child(4){ transition-delay:.56s; }
  .hero-right .poll-note{ opacity:0; transition:opacity .4s ease .68s; }
  .hero-right.in .poll-note{ opacity:1; }
  .hero-poll-stat{
    margin-top:20px; opacity:0; transform:translateY(10px);
    transition:opacity .5s ease .74s, transform .5s ease .74s;
  }
  .hero-right.in .hero-poll-stat{ opacity:1; transform:translateY(0); }
  .poll-stat.hero-poll-stat .num{ color:var(--orange); } /* #D73C29; doubled class so the generic .poll-stat .num berry rule further down no longer wins */
  .hero-poll-stat .label{ color:rgba(242,242,233,0.94); }

  /* scroll-down indicator */
  .scroll-cue{
    position:absolute; bottom:40px; left:max(32px, calc(50% - 558px));
    z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
    cursor:pointer; background:none; border:none; padding:0;
    color:rgba(253,251,246,0.85);
  }
  .scroll-cue span{
    font-family:var(--sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
    color:inherit; opacity:.85;
  }
  .scroll-cue .wheel-track{
    width:24px; height:38px; border-radius:14px; border:1.5px solid currentColor;
    display:flex; justify-content:center; padding-top:7px; box-sizing:border-box;
  }
  .scroll-cue .wheel-dot{
    width:4px; height:8px; border-radius:3px; background:var(--orange);
    animation:wheel-scroll 1.8s ease-in-out infinite;
  }
  .scroll-cue .chevrons{ display:flex; flex-direction:column; gap:2px; margin-top:-2px; }
  .scroll-cue .chevrons svg{ width:12px; height:7px; animation:chevron-fade 1.8s ease-in-out infinite; }
  .scroll-cue .chevrons svg:nth-child(2){ animation-delay:.25s; }
  .scroll-cue:hover{ color:var(--blush); }
  @keyframes wheel-scroll{
    0%{ transform:translateY(0); opacity:1; }
    60%{ transform:translateY(12px); opacity:0; }
    61%{ transform:translateY(0); opacity:0; }
    100%{ transform:translateY(0); opacity:1; }
  }
  @keyframes chevron-fade{
    0%,100%{ opacity:.25; }
    50%{ opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .scroll-cue .wheel-dot, .scroll-cue .chevrons svg{ animation:none; }
  }
  .eyebrow{
    font-family:var(--sans); font-style:italic; font-weight:700; font-size:16px; color:var(--blush); margin-bottom:8px; display:inline-block;
    text-shadow:0 2px 14px rgba(0,0,0,0.35);
  }
  .hero h1{
    font-size:clamp(38px,6.4vw,68px); color:#f2f2e9; line-height:1.1; font-weight:400;
    font-style:italic;
    text-shadow:0 4px 26px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.5);
  }
  .hero h1 strong{ font-style:normal; font-weight:700; }
  .hero .sub{
    margin:24px 0 0; font-size:23px; max-width:560px; color:rgba(253,251,246,0.92);
    text-shadow:0 2px 16px rgba(0,0,0,0.4);
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--orange); color:#fff; font-family:var(--sans); font-weight:500; font-size:15px;
    padding:15px 30px; border-radius:0;
    border:none; cursor:pointer; text-decoration:none;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(215,60,41,0.3); }
  .btn:active{ transform:translateY(0) scale(.96); box-shadow:0 4px 12px rgba(215,60,41,0.25); }
  .cta-wrap .btn{
    font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:.01em;
    padding:15px 32px;
  }
  /* the button is a flex row with a 10px gap, so a space typed before an
     inline span shows up on top of it — the gap alone is the spacing */
  .btn > .brand-word{ margin-left:-4px; }

  .btn-outline{
    background:transparent; border:1.5px solid var(--teal); color:var(--teal);
  }
  .btn-outline:hover{ box-shadow:0 10px 24px rgba(13,73,64,0.15); }

  /* hand-drawn circle wrap for CTA */
  .cta-wrap{ position:relative; display:inline-block; color:var(--cloud); margin-top:44px; }
  .cta-wrap svg.scribble{
    position:absolute; left:50%; top:-35px; transform:translateX(-50%);
    width:calc(100% + 60px); height:calc(100% + 148px);
    pointer-events:none; overflow:visible;
  }
  .hand-note-wrap{
    position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:22px;
    display:flex; align-items:center; gap:6px;
    pointer-events:none;
  }
  .hand-note-icon{
    flex-shrink:0; margin-top:2px; color:var(--mint);
    opacity:0; transform:scale(.5) rotate(-20deg);
    transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .cta-wrap:hover .hand-note-icon, .cta-wrap:focus-within .hand-note-icon{
    opacity:1; transform:scale(1) rotate(0deg);
  }
  .hand-note{
    font-family:var(--hand); font-weight:600; font-size:19px; line-height:1.3;
    color:var(--mint); white-space:nowrap; text-align:left;
  }
  .hand-note .char{ opacity:0; display:inline-block; transition:opacity .15s ease; }
  .cta-wrap:hover .hand-note .char, .cta-wrap:focus-within .hand-note .char{
    opacity:1; transition:opacity .15s ease; transition-delay:var(--d, 0s);
  }
  .hand-note .char.is-space{ width:.3em; }
  .hand-note .caret{
    display:inline-block; width:2px; height:0.9em; background:currentColor;
    margin-left:2px; vertical-align:-0.1em; opacity:0;
  }
  .cta-wrap:hover .hand-note .caret, .cta-wrap:focus-within .hand-note .caret{ animation:caret-type 1.4s steps(1) forwards; }
  @keyframes caret-type{
    0%{ opacity:1; }
    92%{ opacity:1; }
    100%{ opacity:0; }
  }
  @media(max-width:640px){
    .hand-note-wrap{
      left:50%; top:100%; transform:translateX(-50%) rotate(-3deg);
      margin-top:40px; flex-direction:column; align-items:center;
    }
    .hand-note{ white-space:normal; text-align:center; font-size:17px; }
  }
  .cta-wrap svg.scribble path{
    fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; opacity:.92;
  }
  .cta-wrap svg.scribble .s-main{ stroke-width:2; stroke-dasharray:622; stroke-dashoffset:622; }
  .cta-wrap svg.scribble .s-main-oval{ stroke-dasharray:408; stroke-dashoffset:408; }
  .cta-wrap svg.scribble .s-barb{ stroke-width:2; stroke-dasharray:14; stroke-dashoffset:14; }
  .cta-wrap:hover svg.scribble .s-main, .cta-wrap:focus-within svg.scribble .s-main{
    animation:draw 1.1s cubic-bezier(.3,.6,.4,1) forwards;
  }
  .cta-wrap:hover svg.scribble .s-barb, .cta-wrap:focus-within svg.scribble .s-barb{
    animation:draw .18s ease forwards 1.1s;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  /* ---------- POLL ---------- */
  .poll-section{ padding:110px 0; position:relative; overflow:hidden; }
  .poll-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; position:relative; z-index:1; }
  .poll-copy h2{ font-size:clamp(26px,3.4vw,36px); color:var(--teal); margin-top:12px; line-height:1.2; }
  .poll-copy p{ margin-top:16px; font-size:16px; color:#2f6259; max-width:400px; }
  .poll-stat{ display:flex; align-items:center; gap:12px; margin-top:32px; }
  .poll-stat .num{ font-family:var(--hand); font-weight:700; font-size:44px; color:var(--berry); }
  .poll-stat .label{ font-size:13px; color:#527c73; max-width:none; white-space:nowrap; line-height:1.35; }
  .poll-card{
    background:#fff; border-radius:0;
    padding:38px 40px 34px; box-shadow:0 18px 44px rgba(13,73,64,0.12);
    position:relative; z-index:2; border:1px solid var(--mint);
  }
  .poll-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
  .poll-live{
    display:inline-flex; align-items:center; gap:6px; font-family:var(--sans);
    font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--berry); flex-shrink:0; margin-top:4px;
  }
  .poll-live .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); animation:poll-pulse 1.6s ease-in-out infinite; }
  @keyframes poll-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.6); opacity:.35; } }
  /* hand-drawn marks (asterisk, lightning, twinkle) used in place of the
     geometric icons for the small decorative accents */
  .hd-mark{ display:inline-block; vertical-align:-0.14em; flex-shrink:0; }
  .tag .hd-mark{ vertical-align:-0.12em; margin-right:1px; }

  .tag{
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--berry); font-weight:700;
  }
  .poll-q{ font-family:var(--sans); font-weight:700; font-size:22px; margin-top:12px; color:var(--teal); }
  .poll-opts{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }
  .poll-opt{
    border:1.5px solid var(--mint); border-radius:0; padding:14px 14px;
    cursor:pointer; font-size:13.5px; transition:.25s; position:relative; overflow:hidden;
    background:var(--cloud); display:flex; align-items:center; gap:9px;
  }
  .poll-opt:hover{ border-color:var(--teal); }
  .poll-opt .radio{
    width:16px; height:16px; border-radius:50%; border:1.5px solid var(--blush); flex-shrink:0;
    position:relative; z-index:1; transition:border-color .25s; background:#fff;
  }
  .poll-opt.picked{ border-color:var(--teal); background:#fff; cursor:default; }
  .poll-opt.picked .radio{ border-color:var(--teal); }
  .poll-opt.picked .radio::after{
    content:''; position:absolute; inset:3px; border-radius:50%; background:var(--teal);
  }
  .poll-opt .fill{
    position:absolute; left:0; top:0; bottom:0; background:var(--mint); z-index:0; width:0%;
    transition:width .7s ease;
  }
  .poll-opt .label{ position:relative; z-index:1; flex:1; display:flex; justify-content:space-between; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; }
  .poll-opt .pct{ font-weight:700; color:var(--teal); font-family:var(--sans); font-size:14px; }
  .poll-note{ margin-top:18px; font-family:var(--hand); font-weight:600; font-size:19px; color:#527c73; }

  /* ---------- SUNBURST MARK ---------- */
  .sunburst{ display:flex; justify-content:center; margin:0 0 20px; }
  .sunburst svg path{ fill:var(--berry); stroke:none; }

  /* ---------- CUE DEFINITION ---------- */
  .cue-def{
    padding:130px 0 120px; position:relative; overflow:hidden;
    /* a clearly tinted sage section that fades in from cream and back out,
       so it reads as its own section rather than more of the same cream */
    background:
      radial-gradient(45% 38% at 92% 56%, rgba(236,198,199,0.35) 0%, rgba(236,198,199,0) 60%),
      linear-gradient(to bottom,
        var(--cloud) 0,
        color-mix(in srgb, var(--mint) 30%, var(--cloud)) 80px,
        color-mix(in srgb, var(--mint) 62%, var(--cloud)) 190px,
        color-mix(in srgb, var(--mint) 62%, var(--cloud)) calc(100% - 190px),
        color-mix(in srgb, var(--mint) 30%, var(--cloud)) calc(100% - 80px),
        var(--cloud) 100%);
  }
  .cue-def::before{
    content:'cue'; position:absolute; top:-0.18em; left:-0.04em; z-index:0;
    font-family:var(--serif); font-style:italic; font-weight:600;
    font-size:min(32vw, 460px); line-height:1; color:var(--teal); opacity:0.05;
    pointer-events:none; white-space:nowrap; user-select:none;
  }
  .cue-grid{
    display:grid; grid-template-columns:1.05fr 0.85fr; gap:80px; align-items:center;
    position:relative; z-index:1;
  }
  .cue-eyebrow-row{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
  .cue-eyebrow-row .sunburst{ margin:0; }
  .cue-eyebrow{
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--berry); font-weight:700;
  }
  .cue-word-row{ display:flex; align-items:baseline; gap:12px; }
  .cue-word{ font-family:var(--serif); font-style:italic; font-size:50px; color:var(--teal); }
  .cue-leader{
    flex:1; min-width:24px; height:0; align-self:center;
    border-bottom:1.5px dotted var(--mint);
  }
  .cue-pos{ font-family:var(--sans); font-size:14px; color:var(--berry); white-space:nowrap; }
  .cue-mean{ margin-top:22px; font-size:17px; color:#2a5b53; line-height:1.7; max-width:460px; }
  .cue-mean .num{ font-family:var(--sans); font-weight:700; font-style:normal; color:var(--berry); margin-right:4px; }
  .cue-example{
    margin-top:30px; /* spacing the old divider used to provide */
    font-family:var(--hand); font-weight:600; font-style:normal; font-size:26px; color:var(--berry);
    line-height:1.35; border-left:2px solid var(--blush); padding-left:16px; max-width:400px;
  }
  .cue-example > span:not(.brand-word){ display:block; font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#a4b7a7; margin-top:10px; }

  /* polaroid-style photo, breaks the "card on the right" rhythm from the poll section */
  .cue-photo-wrap{ position:relative; display:flex; justify-content:center; z-index:1; }
  .cue-photo{
    position:relative; background:#f2f2e9; padding:14px 14px 58px;
    border-radius:0; max-width:360px; width:100%;
    box-shadow:0 26px 60px rgba(13,73,64,0.22), 0 4px 14px rgba(13,73,64,0.10);
    transform:rotate(-3.5deg);
    transition:transform .5s cubic-bezier(.22,1,.36,1);
  }
  .cue-photo-wrap:hover .cue-photo{ transform:rotate(-0.5deg) scale(1.015); }
  .cue-photo .frame{ position:relative; border-radius:0; overflow:hidden; aspect-ratio:4/5; }
  .cue-photo .frame img{ width:100%; height:100%; object-fit:cover; display:block; }
  .cue-photo .frame::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(13,73,64,0.30), rgba(131,52,84,0.18) 60%, rgba(13,73,64,0.06));
    mix-blend-mode:multiply;
  }
  .cue-photo .cue-mark{
    position:absolute; left:14px; right:14px; bottom:16px; z-index:2;
    display:flex; align-items:center; gap:8px;
  }
  .cue-photo .cue-mark svg{ width:21px; height:21px; flex-shrink:0; color:var(--teal); transform:translateY(2px); }
  .cue-photo .cue-mark span{ color:var(--teal); font-family:var(--logo); font-size:17px; }
  .cue-pin{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-4deg);
    width:48px; height:20px; border-radius:0;
    background:linear-gradient(180deg, rgba(236,198,199,0.95), rgba(236,198,199,0.75));
    box-shadow:0 4px 10px rgba(0,0,0,0.15); z-index:3;
  }
  .cue-tag{
    position:absolute; bottom:-16px; right:-8px; z-index:3;
    background:var(--orange); color:#fff; font-family:var(--sans); font-weight:700;
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    padding:8px 15px; border-radius:0; box-shadow:0 8px 20px rgba(215,60,41,0.32);
    transform:rotate(3deg);
  }

  /* ---------- BANNER ---------- */
  .banner{
    background:var(--teal); color:var(--cloud);
    padding:130px 0; text-align:center;
    position:relative; overflow:hidden;
  }
  .banner-glow{
    position:absolute; top:50%; left:50%; width:560px; height:560px;
    background:radial-gradient(circle, rgba(236,198,199,0.14) 0%, rgba(236,198,199,0) 70%);
    pointer-events:none;
    opacity:0; transform:translate(-50%,-50%) scale(.7);
    transition:opacity 1.4s ease .05s, transform 1.6s cubic-bezier(.22,1,.36,1) .05s;
  }
  .banner.in .banner-glow{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .banner-motif{
    position:absolute; top:50%; left:50%; width:360px; height:360px;
    fill:none; stroke:rgba(242,242,233,0.09); stroke-width:1;
    pointer-events:none;
    opacity:0; transform:translate(-50%,-50%) scale(.55);
    transition:opacity 1.1s cubic-bezier(.22,1,.36,1) .1s, transform 1.3s cubic-bezier(.22,1,.36,1) .1s;
    overflow:visible;
  }
  .banner.in .banner-motif{
    opacity:1; transform:translate(-50%,-50%) scale(1);
  }
  .banner-ring{ transform-origin:50% 50%; transform-box:fill-box; }
  /* rings keep a fixed diameter (no pulsing) so the gap between them stays even;
     the dashed and dotted rings still turn slowly */
  .banner.in .banner-ring-1{ animation:none; }
  .banner.in .banner-ring-2{
    stroke:rgba(242,242,233,0.16);
    animation:banner-ring-2-motion 26s linear .8s infinite;
  }
  .banner.in .banner-ring-3{
    stroke:rgba(215,60,41,0.18);
    animation:banner-ring-3-motion 34s linear 0s infinite;
  }
  @keyframes banner-ring-1-motion{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.07); }
  }
  @keyframes banner-ring-2-motion{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
  }
  @keyframes banner-ring-3-motion{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(-360deg); }
  }
  .banner h3{
    position:relative; z-index:1;
    font-size:clamp(22px,3.2vw,34px); font-weight:400; color:var(--cloud);
    display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0.4em;
    max-width:740px; margin:0 auto;
    transform:scale(.86);
    transition:transform 1.5s cubic-bezier(.16,1,.3,1);
  }
  .banner.in h3{ transform:scale(1); }
  .banner-word{ opacity:0; transform:translateY(18px); }
  .banner.in .banner-word{ animation:banner-rise .85s cubic-bezier(.22,1,.36,1) forwards; }
  .banner.in .banner-word:nth-child(1){ animation-delay:.05s; }
  .banner.in .banner-word:nth-child(2){ animation-delay:.4s; }
  .banner.in .banner-word:nth-child(3){ animation-delay:.85s; }
  @keyframes banner-rise{ to{ opacity:1; transform:translateY(0); } }
  .banner-script{ position:relative; display:inline-block; }
  .banner-script em{
    font-family:var(--logo); font-style:normal; color:var(--blush);
    font-size:1.5em; line-height:1; padding:0 .06em; display:inline-block;
  }
  .banner-underline{
    position:absolute; left:2%; bottom:-8px; width:96%; height:16px; overflow:visible;
  }
  .banner-underline path{
    fill:none; stroke:var(--orange); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:340; stroke-dashoffset:340;
  }
  .banner.in .banner-underline path{
    animation:banner-draw 1s ease-out forwards; animation-delay:1.15s;
  }
  @keyframes banner-draw{ to{ stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce){
    .banner-word{ opacity:1; transform:none; animation:none; }
    .banner-underline path{ stroke-dashoffset:0; animation:none; }
  }

  /* ---------- CHOOSE YOUR PATH ---------- */
  .paths{
    padding:100px 0 110px; position:relative; overflow:hidden;
    background:
      /* blush section, fading in from cream at the top and out at the bottom */
      radial-gradient(55% 42% at 100% 62%, rgba(202,211,193,0.3) 0%, rgba(202,211,193,0) 62%),
      linear-gradient(to bottom,
        var(--cloud) 0,
        color-mix(in srgb, var(--blush) 28%, var(--cloud)) 70px,
        color-mix(in srgb, var(--blush) 58%, var(--cloud)) 170px,
        color-mix(in srgb, var(--blush) 58%, var(--cloud)) calc(100% - 170px),
        color-mix(in srgb, var(--blush) 28%, var(--cloud)) calc(100% - 70px),
        var(--cloud) 100%);
  }
  .paths-head{ max-width:720px; margin:0 auto; text-align:center; position:relative; z-index:1; }
  .paths-tag{ display:inline-flex; align-items:center; gap:8px; }
  .paths-tag svg{ flex-shrink:0; }
  .paths-head h2{
    margin-top:14px; font-size:clamp(28px,4vw,44px); color:var(--teal); line-height:1.15; font-weight:500;
  }
  .paths-accent{ color:var(--berry); }
  .paths-head p{ margin-top:18px; font-size:16px; line-height:1.6; color:#2f6259; }

  .paths-grid{
    margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
    position:relative; z-index:1;
  }
  .path-card{
    background:#fff; border:1px solid var(--mint); border-radius:0;
    padding:42px 26px 32px; text-align:center; position:relative; overflow:hidden;
    box-shadow:0 16px 36px -26px rgba(13,73,64,.3);
    display:flex; flex-direction:column; align-items:center;
    transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1),
      box-shadow .35s ease;
    opacity:0; transform:translateY(52px) scale(.93);
  }
  .path-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--berry); transform:scaleX(0); transform-origin:left;
    transition:transform .7s cubic-bezier(.22,1,.36,1) .25s;
  }
  .path-card.in::before{ transform:scaleX(1); }
  .path-card:nth-child(2)::before{ background:var(--teal); }
  .path-card:nth-child(3)::before{ background:var(--teal); }
  .path-card:nth-child(4)::before{ background:var(--orange); }

  .path-num{
    position:absolute; top:18px; right:22px; font-family:var(--sans); font-size:12px;
    font-weight:700; letter-spacing:.06em; color:var(--mint);
    opacity:0; transition:opacity .5s ease .5s;
  }
  .path-card.in .path-num{ opacity:1; }

  .path-card.in{ opacity:1; transform:translateY(0) scale(1); }
  .paths-grid .path-card:nth-child(2){ transition-delay:.12s; }
  .paths-grid .path-card:nth-child(3){ transition-delay:.24s; }
  .paths-grid .path-card:nth-child(4){ transition-delay:.36s; }
  .path-card.in:hover{ transform:translateY(-8px); box-shadow:0 28px 52px -20px rgba(13,73,64,.4); }

  .path-icon{
    width:64px; height:64px; margin:0 auto 20px; border-radius:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--blush); color:var(--berry);
    opacity:0; transform:scale(.3) rotate(-25deg);
    transition:transform .65s cubic-bezier(.34,1.56,.64,1) .3s, opacity .45s ease .3s,
      background .3s ease, color .3s ease;
  }
  .path-card.in .path-icon{ opacity:1; transform:scale(1) rotate(0deg); }
  .path-card.in:hover .path-icon{ transform:scale(1.1) rotate(-8deg); }
  .path-card:nth-child(2) .path-icon{ background:var(--mint); color:var(--teal); }
  .path-card:nth-child(3) .path-icon{ background:rgba(13,73,64,0.12); color:var(--teal); }
  .path-card:nth-child(4) .path-icon{ background:rgba(215,60,41,0.12); color:var(--orange); }
  .path-card.in:hover:nth-child(1) .path-icon{ background:var(--berry); color:#fff; }
  .path-card.in:hover:nth-child(2) .path-icon{ background:var(--teal); color:#fff; }
  .path-card.in:hover:nth-child(3) .path-icon{ background:var(--teal); color:#fff; }
  .path-card.in:hover:nth-child(4) .path-icon{ background:var(--orange); color:#fff; }

  .path-card h4{
    font-family:var(--sans); font-size:16px; font-weight:700; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--teal); line-height:1.35;
    min-height:2.7em; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease .38s, transform .5s ease .38s;
  }
  .path-card.in h4{ opacity:1; transform:translateY(0); }
  .path-card p{
    margin:10px 0 22px; font-size:14.5px; line-height:1.55; color:#2f6259;
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease .44s, transform .5s ease .44s;
  }
  .path-card.in p{ opacity:1; transform:translateY(0); }
  .path-btn{
    margin-top:auto !important; margin-bottom:0 !important; font-size:14px !important; padding:12px 22px !important;
    display:inline-flex !important; align-items:center; gap:8px !important;
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease .5s, transform .5s ease .5s,
      background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .path-card.in .path-btn{ opacity:1; transform:translateY(0); }
  .path-btn svg{ transition:transform .3s cubic-bezier(.22,1,.36,1); flex-shrink:0; }
  .path-btn:hover svg{ transform:translateX(5px); }
  .path-btn:hover{ background:var(--teal); color:#fff; box-shadow:0 10px 20px rgba(13,73,64,.25); }

  .path-card.active{ box-shadow:0 28px 52px -20px rgba(13,73,64,.4); transform:translateY(-4px); }
  .path-card.active .path-btn{
    background:var(--berry); color:#fff; border-color:var(--berry);
  }
  .path-card:nth-child(2).active .path-btn{ background:var(--teal); border-color:var(--teal); }
  .path-card:nth-child(3).active .path-btn{ background:var(--teal); border-color:var(--teal); }
  .path-card:nth-child(4).active .path-btn{ background:var(--orange); border-color:var(--orange); }

  /* ---------- PATH DETAIL PANEL ---------- */
  .path-detail{
    max-height:0; opacity:0; overflow:hidden; margin-top:0;
    border-radius:0;
    transition:max-height .6s cubic-bezier(.22,1,.36,1), opacity .5s ease, margin-top .6s ease;
  }
  .path-detail.open{ max-height:1100px; opacity:1; margin-top:32px; }
  .path-detail-inner{
    position:relative; padding:52px 48px; overflow:hidden;
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(215,60,41,0.35) 0%, rgba(215,60,41,0) 45%),
      radial-gradient(120% 140% at 100% 100%, rgba(202,211,193,0.25) 0%, rgba(202,211,193,0) 45%),
      linear-gradient(135deg, var(--teal) 0%, #0a3a33 55%, var(--berry) 140%);
    color:var(--cloud); border-radius:0;
    box-shadow:0 30px 70px -20px rgba(13,73,64,0.4);
    transition:background .4s ease, color .4s ease;
  }
  /* Light variants: the expanded panel matches the color of the path's own icon,
     rather than always defaulting to the dark teal treatment. */
  .path-detail-inner.color-sme{
    background:linear-gradient(135deg, var(--blush) 0%, #f3d9da 100%);
    color:var(--teal);
  }
  .path-detail-inner.color-digital{
    background:linear-gradient(135deg, var(--mint) 0%, #dce2d2 100%);
    color:var(--teal);
  }
  .path-detail-inner.color-enterprise{
    background:linear-gradient(135deg, #dfe4d8 0%, #cad3c1 100%);
    color:var(--teal);
  }
  .path-detail-inner.color-professional{
    background:linear-gradient(135deg, #f3d9da 0%, #ecc6c7 100%);
    color:var(--teal);
  }
  /* panel icon: solid tile in the path's own colour (same as the card's hover
     state) so it reads clearly on the light panels */
  .path-detail-inner[class*="color-"] .path-detail-icon{
    color:#fff; border-color:transparent;
    box-shadow:0 8px 20px -8px rgba(13,73,64,0.35);
  }
  .path-detail-inner.color-sme .path-detail-icon{ background:var(--berry); }
  .path-detail-inner.color-digital .path-detail-icon,
  .path-detail-inner.color-enterprise .path-detail-icon{ background:var(--teal); }
  .path-detail-inner.color-professional .path-detail-icon{ background:var(--orange); }
  .path-detail-inner.color-sme .path-detail-close,
  .path-detail-inner.color-digital .path-detail-close,
  .path-detail-inner.color-enterprise .path-detail-close,
  .path-detail-inner.color-professional .path-detail-close{
    background:rgba(13,73,64,0.12); border-color:rgba(13,73,64,0.25); color:var(--teal);
  }
  .path-detail-inner.color-sme .path-detail-tagline,
  .path-detail-inner.color-digital .path-detail-tagline,
  .path-detail-inner.color-enterprise .path-detail-tagline,
  .path-detail-inner.color-professional .path-detail-tagline{ color:rgba(13,73,64,0.75); }
  .path-detail-inner.color-sme .path-detail-col,
  .path-detail-inner.color-digital .path-detail-col,
  .path-detail-inner.color-enterprise .path-detail-col,
  .path-detail-inner.color-professional .path-detail-col{
    background:rgba(255,255,255,0.5); border-color:rgba(13,73,64,0.12);
  }
  .path-detail-inner.color-sme .path-detail-col h4,
  .path-detail-inner.color-digital .path-detail-col h4,
  .path-detail-inner.color-enterprise .path-detail-col h4,
  .path-detail-inner.color-professional .path-detail-col h4{ color:var(--teal); }
  .path-detail-inner.color-sme .path-detail-col li,
  .path-detail-inner.color-digital .path-detail-col li,
  .path-detail-inner.color-enterprise .path-detail-col li,
  .path-detail-inner.color-professional .path-detail-col li{ color:#2f6259; }
  .path-detail-inner.color-sme .path-detail-head h4,
  .path-detail-inner.color-digital .path-detail-head h4,
  .path-detail-inner.color-enterprise .path-detail-head h4,
  .path-detail-inner.color-professional .path-detail-head h4{ color:var(--teal); }
  .path-detail-inner.color-sme .path-detail-col h5,
  .path-detail-inner.color-digital .path-detail-col h5,
  .path-detail-inner.color-enterprise .path-detail-col h5,
  .path-detail-inner.color-professional .path-detail-col h5{ color:var(--teal); }
  .path-detail-inner.color-sme .path-detail-col li + li,
  .path-detail-inner.color-digital .path-detail-col li + li,
  .path-detail-inner.color-enterprise .path-detail-col li + li,
  .path-detail-inner.color-professional .path-detail-col li + li{ border-top-color:rgba(13,73,64,0.1); }
  .path-detail-inner.color-sme .path-detail-cta,
  .path-detail-inner.color-digital .path-detail-cta,
  .path-detail-inner.color-enterprise .path-detail-cta,
  .path-detail-inner.color-professional .path-detail-cta{
    background:rgba(255,255,255,0.45); border-color:rgba(13,73,64,0.14);
  }
  .path-detail-inner.color-sme .path-detail-cta-label,
  .path-detail-inner.color-digital .path-detail-cta-label,
  .path-detail-inner.color-enterprise .path-detail-cta-label,
  .path-detail-inner.color-professional .path-detail-cta-label{ color:var(--teal); }
  .path-detail-inner.color-sme .path-cta-wrap,
  .path-detail-inner.color-digital .path-cta-wrap,
  .path-detail-inner.color-enterprise .path-cta-wrap,
  .path-detail-inner.color-professional .path-cta-wrap{ color:var(--teal); }
  .path-detail-icon-bg{
    position:absolute; right:-60px; bottom:-60px; width:340px; height:340px;
    opacity:.08; pointer-events:none; z-index:0;
  }
  .path-detail-close{
    position:absolute; top:26px; right:26px; width:38px; height:38px; border-radius:0;
    background:rgba(8,26,22,0.35); border:1px solid rgba(242,242,233,0.3);
    color:var(--cloud); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .2s ease; z-index:2;
    box-shadow:0 4px 14px rgba(0,0,0,0.2);
  }
  .path-detail-close:hover{ background:var(--orange); border-color:var(--orange); transform:rotate(90deg); }
  /* phones: keep the close button clear of the panel title */
  @media(max-width:640px){
    .path-detail-close{ top:14px; right:14px; width:34px; height:34px; }
    .path-detail-head{ padding-right:52px; }
  }
  .path-detail-grid{
    position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr;
    gap:52px; align-items:start;
  }
  .path-detail-head{
    display:flex; align-items:center; gap:18px; margin-bottom:32px;
    padding-bottom:26px; border-bottom:1px solid rgba(242,242,233,0.16);
  }
  .path-detail-icon{
    flex-shrink:0; width:60px; height:60px; border-radius:0;
    background:rgba(242,242,233,0.14); border:1px solid rgba(242,242,233,0.25);
    display:flex; align-items:center; justify-content:center; color:var(--blush);
    box-shadow:0 8px 20px -6px rgba(0,0,0,0.3);
  }
  .path-detail-head h4{
    font-family:var(--serif); font-weight:500; font-size:25px; color:var(--cloud); margin:0;
  }
  .path-detail-tagline{ margin-top:5px; font-size:14.5px; color:rgba(242,242,233,0.75); }
  .path-detail-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .path-detail-col{
    background:rgba(242,242,233,0.06); border:1px solid rgba(242,242,233,0.14);
    border-radius:0; padding:22px 22px 18px;
  }
  .path-detail-col h5{
    font-family:var(--serif); font-style:italic; font-weight:400; font-size:17px;
    color:rgba(242,242,233,0.85); margin-bottom:16px;
  }
  .path-detail-col ul{ list-style:none; margin:0; padding:0; }
  .path-detail-col li{
    font-size:14.5px; padding:8px 0 8px 24px; color:var(--cloud); position:relative;
    line-height:1.4;
  }
  .path-detail-col li + li{ border-top:1px solid rgba(242,242,233,0.09); }
  .path-detail-col li::before{
    content:''; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%;
    background:var(--blush);
  }
  .path-detail-cta{
    text-align:center; padding:36px 28px 92px; border-radius:0;
    background:rgba(242,242,233,0.08); border:1px solid rgba(242,242,233,0.18);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; position:relative; overflow:hidden;
    margin-top:56px; min-height:280px;
  }
  .path-detail-cta::before{
    content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
    width:260px; height:260px; border-radius:50%;
    background:radial-gradient(circle, rgba(215,60,41,0.25) 0%, rgba(215,60,41,0) 70%);
    pointer-events:none;
  }
  .path-detail-cta-eyebrow{
    font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700;
    color:var(--blush); position:relative;
  }
  .path-detail-inner.color-sme .path-detail-cta-eyebrow,
  .path-detail-inner.color-digital .path-detail-cta-eyebrow,
  .path-detail-inner.color-enterprise .path-detail-cta-eyebrow,
  .path-detail-inner.color-professional .path-detail-cta-eyebrow{ color:var(--berry); }
  .path-detail-icon-bg{ display:none; }
  .path-detail-cta-label{
    font-family:var(--serif); font-style:italic; font-size:20px; color:var(--cloud);
    margin-bottom:8px; margin-top:6px; position:relative; line-height:1.3;
  }
  .path-cta-wrap{ color:var(--blush); position:relative; }
  .path-cta-wrap .btn{ background:var(--orange); }
  .path-cta-wrap .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(215,60,41,0.35); }
  .path-hand-note .hand-note{ color:rgba(242,242,233,0.85); }
  .path-hand-note .hand-note-icon{ color:rgba(242,242,233,0.85); }
  .path-hand-note.hand-note-wrap{
    left:50%; top:130%; transform:translateX(-50%); margin-left:0;
    flex-direction:column; align-items:center;
  }
  .path-hand-note.hand-note-wrap .hand-note{ text-align:center; }

  /* ---------- Classic CTA (hero, path panel, About + What We Do closers) ----------
     Button shape/font stay as the current design. The star note sits under the
     right side of the hand-drawn loop, so it reads as part of the same doodle. */
  /* Loop drawn a little larger than before so it clears the square button corners
     (min ~11px gap) and stays centred on the button. */
  /* The loop is mirrored so its free end sweeps left-to-right along the bottom,
     the same direction the note reads. +6px re-centres the mirrored shape. */
  .cta-classic svg.scribble{
    width:calc(100% + 104px); height:calc(100% + 190px); top:-49px;
    transform:translateX(calc(-50% + 6px)) scaleX(-1);
  }
  /* The line's free end (viewBox 84.3, 76.5, mirrored) lands at
     x = 61.68% + 18px, y = 52.76% + 51px of the button, heading right. The note
     is pinned just past it on the same line, so the stroke runs into the star. */
  .cta-classic .hand-note-wrap,
  .cta-classic .path-hand-note.hand-note-wrap{
    --tip-x:calc(61.68% + 18px); --tip-y:calc(52.76% + 51px);
    left:calc(var(--tip-x) + var(--note-dx, 6px));
    top:calc(var(--tip-y) - var(--note-dy, 10px));
    transform:rotate(-4deg); transform-origin:left top; margin:0;
    flex-direction:row; align-items:flex-start;
  }
  /* size to the text; JS (fitCtaNotes) caps max-width so a note wraps between
     words when a panel or small screen has no room for the full line */
  .cta-classic .hand-note-wrap{ width:max-content; }
  .cta-classic .hand-note-wrap .hand-note{ text-align:left; white-space:normal; min-width:0; }
  .hand-note .word{ display:inline-block; white-space:nowrap; }
  /* path panel: nudge the CTA left so loop + note sit comfortably inside the box */
  /* (no side shift: the button stays centred in the box; the note wraps if space is tight) */
  /* hero sits on the page's left edge: keep the loop from being cut off */
  @media(max-width:1100px){ .hero .cta-wrap.cta-classic{ margin-left:40px; } }
  /* small phones: a slightly narrower loop so it fits the path panel */
  @media(max-width:400px){
    .cta-classic svg.scribble{
      width:calc(100% + 84px); height:calc(100% + 196px); top:-52px;
      transform:translateX(calc(-50% + 5px)) scaleX(-1);
    }
    .cta-classic .hand-note-wrap,
    .cta-classic .path-hand-note.hand-note-wrap{
      --tip-x:calc(61.68% + 14.8px); --tip-y:calc(52.76% + 51.4px);
    }
    .cta-classic .hand-note-wrap .hand-note{ font-size:15px; }
    .path-detail .path-detail-inner{ padding-left:14px; padding-right:14px; }
  }
  /* Scribble loops are neutral cloud so they don't compete with the orange CTA
     or the other brand colours. Pure cloud on dark backgrounds (hero); a deeper
     cloud tone on light ones, where pure cloud would disappear. */
  .cta-wrap.cta-classic,
  .cta-wrap.cta-classic.path-cta-wrap{ color:var(--cloud); }
  .cta-wrap.cta-classic svg.scribble path{ opacity:1; }
  .path-detail-inner[class*="color-"] .cta-wrap.cta-classic.path-cta-wrap,
  .page-cta .cta-row .cta-wrap.cta-classic{ color:var(--berry); }
  /* on the blush section, berry sat too close to the orange button: use teal */
  .book .cta-wrap.cta-classic{ color:var(--teal); }
  .book .cta-wrap.cta-classic .hand-note,
  .book .cta-wrap.cta-classic .hand-note-icon{ color:var(--teal); }
  /* light path panels: cream note text was near-invisible, use teal */
  .path-detail-inner[class*="color-"] .cta-classic .path-hand-note .hand-note,
  .path-detail-inner[class*="color-"] .cta-classic .path-hand-note .hand-note-icon{ color:var(--teal); }
  @media(max-width:640px){
    .cta-classic .hand-note-wrap,
    .cta-classic .path-hand-note.hand-note-wrap{ transform:rotate(-3deg); }
    .cta-classic .hand-note-wrap .hand-note{ text-align:left; }
    .path-detail-inner .path-detail-cta{ padding-bottom:110px; }
  }

  @media(max-width:900px){
    .path-detail-grid{ grid-template-columns:1fr; gap:32px; }
    .path-detail-cta{ padding:32px 24px 104px; } /* keep room for the hand-note below the CTA */
  }
  @media(max-width:700px){
    .path-detail-inner{ padding:36px 26px; }
    .path-detail-cols{ grid-template-columns:1fr; gap:16px; }
    .path-detail.open{ max-height:1300px; }
  }

  /* ---------- MARQUEE ---------- */
  .marquee{
    background:var(--cloud); padding:26px 0; overflow:hidden;
    /* no rule lines: the strip should flow into the section below, not fence it off */
  }
  .marquee-track{
    display:flex; width:max-content;
    animation:marquee-scroll 24s linear infinite;
  }
  .marquee-track span{
    font-family:var(--serif); font-size:26px; color:var(--black);
    white-space:nowrap; padding:0 28px;
  }
  @keyframes marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
  }

  /* ---------- WHAT WE DO — scroll-driven clip-path reveal ---------- */
  .what-pin-wrap{ position:relative; height:260vh; background:var(--cloud); }
  .what-pin-sticky{
    position:sticky; top:0; height:100vh; overflow:hidden;
    display:flex; align-items:center; justify-content:center; background:var(--cloud);
  }
  /* Once the reveal finishes, we swap sticky -> fixed via JS so the image stays
     pinned in the background while the next section scrolls up over it (same
     parallax technique as the hero). Releases back to sticky if scrolled back up. */
  .what-pin-sticky.locked{ position:fixed; top:0; left:0; right:0; z-index:1; }
  .what-pin-sticky .what-lines{
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
    gap:88px;
  }
  .what-line{
    font-family:var(--sans); font-weight:400; font-size:clamp(24px,4.2vw,44px);
    color:var(--black); line-height:1.3; text-align:center; white-space:nowrap;
    will-change:opacity;
  }
  .what-line.bottom{ color:#527c73; }
  .what-reveal-img{
    position:absolute; inset:0; width:100%; height:100%; z-index:2;
    clip-path:inset(46% 37% round 16px);
    will-change:clip-path;
  }
  .what-reveal-img img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  .what-reveal-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,8,8,0.15) 0%, rgba(10,8,8,0.48) 100%);
    opacity:0.15; will-change:opacity;
  }
  .what-header-title{
    position:absolute; z-index:3; left:0; right:0; text-align:center; pointer-events:none;
    color:#fff; font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(30px,5vw,54px); opacity:0; will-change:opacity;
  }
  @media (prefers-reduced-motion: reduce){
    .what-pin-wrap{ height:auto; }
    .what-pin-sticky{ position:relative; height:70vh; min-height:440px; }
    .what-reveal-img{ clip-path:none !important; }
    .what-reveal-overlay{ opacity:0.4 !important; }
    .what-line{ display:none; }
    .what-header-title{ opacity:1 !important; }
  }

  .what-rows{ min-height:100vh; display:flex; align-items:center; padding:90px 0 100px; background:var(--cloud); position:relative; z-index:2; box-sizing:border-box; }
  .what-steps{
    position:relative; max-width:660px; margin:0 auto;
    background:#fff; border-radius:0; padding:20px 44px 8px;
    box-shadow:0 30px 60px -40px rgba(13,73,64,.35); border:1px solid #e2e5d9;
  }
  .what-steps::before{
    content:''; position:absolute; left:77px; top:12px; bottom:34px; width:2px; z-index:0;
    background:var(--mint); transform:scaleY(0); transform-origin:top;
    transition:transform 1.1s cubic-bezier(.22,1,.36,1) .2s;
  }
  .what-steps.in::before{ transform:scaleY(1); }
  .what-row{
    display:grid; grid-template-columns:68px 1fr; gap:26px; align-items:flex-start;
    padding:26px 0; position:relative; z-index:1;
  }
  .what-row:not(:last-child){ border-bottom:1px dashed #e2e5d9; }
  .what-row-marker{
    width:68px; height:68px; border-radius:0; background:var(--blush); border:none;
    display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
    box-shadow:0 10px 24px -12px rgba(13,73,64,0.25);
    color:var(--berry);
    opacity:0; transform:scale(.6);
    transition:opacity .6s cubic-bezier(.34,1.56,.64,1), transform .6s cubic-bezier(.34,1.56,.64,1),
      background .3s ease, color .3s ease;
  }
  .what-row-icon{
    display:flex; opacity:0; transform:scale(.3) rotate(-25deg);
    transition:opacity .45s ease .32s, transform .5s cubic-bezier(.34,1.56,.64,1) .32s;
  }
  .what-row.in .what-row-icon{ opacity:1; transform:scale(1) rotate(0deg); }
  .what-row-icon svg{ width:28px; height:28px; }
  .what-row-marker::after{
    content:''; position:absolute; inset:-6px; border-radius:0;
    border:1.5px solid currentColor; opacity:0; transform:scale(.8);
  }
  .what-row.in .what-row-marker::after{
    animation:marker-pulse 1s cubic-bezier(.22,1,.36,1) .55s;
  }
  @keyframes marker-pulse{
    0%{ opacity:.55; transform:scale(.8); }
    100%{ opacity:0; transform:scale(1.35); }
  }
  .what-row:hover .what-row-marker{ transform:scale(1.08); }
  .what-row:hover .what-row-icon{ transform:scale(1) rotate(-8deg); }
  .what-row:nth-child(2) .what-row-marker{ background:var(--mint); color:var(--teal); }
  .what-row:nth-child(3) .what-row-marker{ color:var(--orange); }
  .what-row.in .what-row-marker{ opacity:1; transform:scale(1); }
  .what-row-num{
    font-family:var(--sans); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--berry); font-weight:700; display:block; margin-bottom:6px;
    opacity:0; transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .what-row:nth-child(2) .what-row-num{ color:var(--teal); }
  .what-row:nth-child(3) .what-row-num{ color:var(--orange); }
  .what-row h3{
    font-family:var(--serif); font-style:italic; font-size:clamp(28px,4vw,38px);
    color:var(--teal); line-height:1;
    opacity:0; transform:translateY(22px);
    transition:opacity .7s ease .08s, transform .7s ease .08s;
  }
  .what-row-sub{
    display:block; margin-top:6px; font-size:14px; font-weight:500; color:#527c73;
    letter-spacing:0.01em;
  }
  .what-row p{
    margin-top:10px; font-size:16px; color:#2a5b53; max-width:460px; line-height:1.6;
    opacity:0; transform:translateY(18px);
    transition:opacity .7s ease .18s, transform .7s ease .18s;
  }
  .what-row.in .what-row-num,
  .what-row.in h3,
  .what-row.in p{ opacity:1; transform:translateY(0); }

  .what-cta{
    max-width:660px; margin:36px auto 0; text-align:center;
    opacity:0; transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .what-cta.in{ opacity:1; transform:translateY(0); }
  .what-cta-btn{ gap:10px !important; }
  .what-cta-btn svg{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
  .what-cta-btn:hover svg{ transform:translateX(4px); }

  /* ---------- ASSESSMENT ---------- */
  /* sage band melts in and out of the cloud sections around it (no hard edge) */
  .assess{
    /* overflow:clip (not hidden) so the sticky question card can still stick */
    padding:100px 0; overflow:hidden; overflow:clip; position:relative;
    background:linear-gradient(to bottom,
      var(--cloud) 0,
      color-mix(in srgb, var(--mint) 45%, var(--cloud)) 70px,
      var(--mint) 170px,
      var(--mint) calc(100% - 170px),
      color-mix(in srgb, var(--mint) 45%, var(--cloud)) calc(100% - 70px),
      var(--cloud) 100%);
  }
  .assess-watermark{
    position:absolute; left:-60px; top:50%; transform:translateY(-50%);
    width:420px; height:420px; opacity:.16; pointer-events:none; z-index:0;
    color:var(--cloud);
  }
  .assess-inner{
    display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center;
    transition:grid-template-columns .5s cubic-bezier(.22,1,.36,1), gap .5s cubic-bezier(.22,1,.36,1);
    position:relative;
  }
  .assess-inner.result-wide{ grid-template-columns:0fr 1fr; gap:0; }
  .assess-copy{
    min-width:0; overflow:hidden; opacity:1; transform:translateX(0);
    transition:opacity .25s ease, transform .25s ease;
  }
  /* the question card holds its place while the intro copy drifts past it */
  @media(min-width:901px){
    .assess-inner{ align-items:start; }
    /* the copy is shorter than the card, so the copy is what can hold still:
       it stays in place while the taller question card scrolls past it */
    .assess-copy{
      position:sticky; top:clamp(120px, 20vh, 200px);
      overflow:visible;
    }
    .assess-copy > *{
      opacity:0; transform:translateY(18px);
      transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
    }
    .assess-copy > *.in-view{ opacity:1; transform:translateY(0); }
  }
  @media(prefers-reduced-motion:reduce){
    .assess-copy{ transform:none !important; }
  }
  .assess-copy.copy-hidden{ opacity:0; transform:translateX(-24px); pointer-events:none; }
  .assess-copy h2{ font-size:clamp(26px,3.6vw,36px); color:var(--teal); }
  .assess-copy p{ margin-top:16px; font-size:16px; color:#0b3f38; max-width:440px;}
  .assess-card{
    background:var(--cloud); border-radius:0; overflow:hidden;
    box-shadow:0 20px 50px rgba(13,73,64,0.16);
    position:relative;
    transition:position 0s, top 0s;
  }
  .assess-card-backdrop{
    position:fixed; inset:0; background:rgba(13,32,28,0);
    opacity:0; pointer-events:none; z-index:998;
    transition:background .4s ease, opacity .4s ease;
  }
  .assess-card-backdrop.show{
    background:rgba(13,32,28,0.55); opacity:1; pointer-events:auto;
  }
  .assess-card.result-active{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(92vw, 900px); z-index:999;
    max-height:90vh; display:flex; flex-direction:column;
  }
  .assess-card.result-active .assess-result{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .assess-card.result-active .assess-result-scroll{ min-height:0; }
  .assess-card-top{ height:6px; background:linear-gradient(90deg, var(--orange), var(--berry)); }
  .assess-form{
    padding:34px 40px 38px; opacity:1; transform:translateY(0) scale(1);
    transition:opacity .35s ease, transform .35s ease;
  }
  .assess-form.fading{ opacity:0; transform:translateY(-14px) scale(.98); pointer-events:none; }
  .assess-result{ padding:0 40px 40px; }
  .progress-dots{ display:flex; gap:8px; margin-bottom:26px; }
  .progress-dots .seg{ flex:1; height:5px; border-radius:0; background:#dfe4d8; overflow:hidden; }
  .progress-dots .seg span{ display:block; height:100%; width:0%; background:var(--orange); transition:width .4s ease; }
  .progress-dots .seg.done span{ width:100%; }
  .progress-dots .seg.active span{ width:55%; }
  .progress-label{ font-size:12px; color:var(--berry); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px; font-weight:700;}
  .assess-q{ font-family:var(--sans); font-weight:700; font-size:21px; color:var(--teal); margin-bottom:20px; min-height:60px;}
  .assess-opts{ display:flex; flex-direction:column; gap:10px; }
  .assess-opt{
    border:1.5px solid #cad3c1; background:#fff; border-radius:0; padding:11px 16px 11px 11px;
    font-size:14px; cursor:pointer; transition:.2s;
    display:flex; align-items:center; gap:12px;
  }
  .assess-opt:hover{ border-color:var(--orange); background:var(--blush); }
  .assess-opt .letter{
    width:26px; height:26px; border-radius:0; background:var(--teal); color:var(--cloud);
    font-family:var(--sans); font-weight:700; font-size:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; transition:background .2s ease;
  }
  .assess-opt:hover .letter{ background:var(--orange); }
  .assess-result{
    display:none; opacity:0; transform:translateY(18px) scale(.98); position:relative;
    transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
  }
  .assess-result.show{ display:block; }
  .assess-result.show.visible{ opacity:1; transform:translateY(0) scale(1); }
  .assess-result-scroll{
    max-height:min(78vh, 760px); overflow-y:auto; padding-right:8px;
    scrollbar-width:thin; scrollbar-color:rgba(13,73,64,0.3) transparent;
  }
  .assess-card.result-active .assess-result-scroll{
    max-height:none; flex:1; overflow-y:auto;
  }
  .assess-result-scroll::-webkit-scrollbar{ width:6px; }
  .assess-result-scroll::-webkit-scrollbar-track{ background:transparent; }
  .assess-result-scroll::-webkit-scrollbar-thumb{ background:rgba(13,73,64,0.25); border-radius:0; }
  .assess-result-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(13,73,64,0.4); }
  .assess-close{
    position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:0;
    background:rgba(13,73,64,0.06); border:1px solid rgba(13,73,64,0.14);
    color:var(--teal); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .2s ease, transform .2s ease, border-color .2s ease;
    z-index:2;
  }
  .assess-close:hover{ background:var(--berry); border-color:var(--berry); color:#fff; transform:rotate(90deg); }
  .assess-level{ font-family:var(--serif); font-weight:500; font-size:24px; color:#0b3f38; padding-top:30px; }
  .assess-level strong{ color:var(--teal); font-weight:400; }
  .assess-percent{ font-family:var(--sans); font-weight:800; font-size:40px; color:var(--berry); margin-top:2px; line-height:1; }
  .assess-bar{ width:100%; height:9px; border-radius:0; background:var(--mint); margin-top:14px; overflow:hidden; }
  .assess-bar-fill{ height:100%; width:0%; border-radius:0; background:linear-gradient(90deg, var(--berry), var(--orange)); transition:width 1s cubic-bezier(.22,1,.36,1); }
  .assess-tagline{ margin-top:12px; font-family:var(--hand); font-weight:600; font-size:20px; line-height:1.3; color:var(--berry); }
  .assess-insights-title{ margin-top:20px; font-family:var(--sans); font-weight:700; font-size:14.5px; color:var(--teal); }
  .assess-insights{ margin-top:10px; display:grid; grid-template-columns:1fr; gap:9px; }
  .assess-inner.result-wide .assess-insights{ grid-template-columns:1fr 1fr; }
  .assess-insight{
    display:flex; align-items:flex-start; gap:10px; min-height:84px;
    background:#fff; border-radius:0; padding:12px 14px; border:1px solid var(--mint);
  }
  .assess-insight svg{ flex-shrink:0; color:var(--berry); margin-top:1px; width:17px; height:17px; }
  .assess-insight-statement{ font-size:12.5px; font-weight:700; color:#0b3f38; line-height:1.4; }
  .assess-insight-response{ margin-top:3px; font-size:11.5px; color:#527c73; }
  .assess-narrative{
    margin-top:16px; padding:16px 18px; background:#fff; border-radius:0; border-left:3px solid var(--orange);
    display:grid; grid-template-columns:1fr; gap:0;
  }
  .assess-inner.result-wide .assess-narrative{ grid-template-columns:1fr 1fr; column-gap:28px; }
  .assess-narrative-intro{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--berry); line-height:1.4; }
  .assess-narrative-body{ margin-top:9px; font-size:13px; line-height:1.55; color:#2f6259; }
  .assess-narrative-cue{ margin-top:9px; font-size:13px; line-height:1.5; color:#0b3f38; }
  .assess-narrative-cue strong{ color:var(--teal); }
  .assess-narrative-closing{ margin-top:9px; font-size:12px; line-height:1.5; color:#527c73; }
  .assess-inner.result-wide .assess-narrative-intro{ grid-column:1; grid-row:1; }
  .assess-inner.result-wide .assess-narrative-body{ grid-column:1; grid-row:2; }
  .assess-inner.result-wide .assess-narrative-cue{ grid-column:2; grid-row:1; margin-top:0; }
  .assess-inner.result-wide .assess-narrative-closing{ grid-column:2; grid-row:2; }
  .assess-based-on{ margin-top:16px; font-size:12px; line-height:1.5; color:#527c73; }
  .assess-actions{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
  .assess-actions .btn{ font-size:14px !important; padding:12px 22px !important; }
  .assess-form.hide{ display:none; }
  @media(max-width:900px){
    .assess-inner.result-wide{ grid-template-columns:1fr; }
    .assess-inner.result-wide .assess-insights{ grid-template-columns:1fr; }
    .assess-inner.result-wide .assess-narrative{ grid-template-columns:1fr; }
    .assess-inner.result-wide .assess-narrative-intro{ grid-column:1; grid-row:auto; }
    .assess-inner.result-wide .assess-narrative-body{ grid-column:1; grid-row:auto; }
    .assess-inner.result-wide .assess-narrative-cue{ grid-column:1; grid-row:auto; margin-top:9px; }
    .assess-inner.result-wide .assess-narrative-closing{ grid-column:1; grid-row:auto; }
  }

  /* ---------- WHO WE HELP ---------- */
  .who{ padding:100px 0; }
  .who-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:44px;}
  .who-card{
    border-radius:0; background:#fff; border:1px solid var(--mint); overflow:hidden;
    box-shadow:0 18px 40px -24px rgba(13,73,64,.35);
    border-top:5px solid var(--berry);
    transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1),
      box-shadow .3s ease, transform .3s ease;
    opacity:0; transform:translateY(46px) scale(.96);
  }
  .who-card:nth-child(2){ border-top-color:var(--teal); }
  .who-card.in{ opacity:1; transform:translateY(0) scale(1); }
  .who-card.in:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -20px rgba(13,73,64,.4); }
  .who-grid .who-card:nth-child(2){ transition-delay:.12s; }
  .who-card .who-img{ width:100%; height:230px; object-fit:cover; display:block; }
  .who-card .who-body{ padding:32px 38px 38px; }
  .who-card .who-kicker{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--berry); margin-bottom:10px;
  }
  .who-card:nth-child(2) .who-kicker{ color:var(--teal); }
  .who-card h4{ color:var(--berry); font-size:22px; }
  .who-card:nth-child(2) h4{ color:var(--teal); }
  .who-card p{ margin-top:12px; font-size:16px; color:#2f6259; }

  /* ---------- SECTION DIVIDER ---------- */
  .sec-divider{
    display:flex; align-items:center; justify-content:center; gap:18px;
    max-width:1140px; margin:0 auto 56px; padding:0 24px;
    opacity:0; transform:translateY(16px);
    transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .sec-divider.in{ opacity:1; transform:translateY(0); }
  .sec-divider-line{
    flex:1; height:1px; max-width:220px;
    background:linear-gradient(90deg, transparent, var(--mint));
  }
  .sec-divider-line + .sec-divider-mark + .sec-divider-line{
    background:linear-gradient(90deg, var(--mint), transparent);
  }
  .sec-divider-mark{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--blush);
    background:var(--blush); display:flex; align-items:center; justify-content:center;
    color:var(--berry); flex-shrink:0;
  }

  /* ---------- VIDEO ---------- */
  .video-sec{
    padding:100px 0; position:relative; overflow:hidden;
    background:
      /* glows sit inside the section and fade out before either edge,
         so the section merges with its neighbours instead of showing a seam */
      radial-gradient(45% 40% at 50% 30%, rgba(202,211,193,0.45) 0%, rgba(202,211,193,0) 70%),
      radial-gradient(40% 35% at 100% 62%, rgba(236,198,199,0.4) 0%, rgba(236,198,199,0) 70%),
      var(--cloud);
  }
  .video-frame{
    position:relative; max-width:820px; margin:44px auto 0; aspect-ratio:16/9;
    background:linear-gradient(135deg,var(--teal),#0a3a33);
    border-radius:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .video-frame video{ width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
  /* the browser's own controls (scrub, skip, volume, full screen) stay hidden
     behind the poster and appear once the video is playing */
  .video-frame video::-webkit-media-controls{ opacity:0; transition:opacity .3s ease; }
  .video-frame.playing video::-webkit-media-controls{ opacity:1; }
  .video-frame:not(.playing) video::-webkit-media-controls-panel{ display:none; }
  /* before playback the big play button takes the click; once playing the
     video's own controls (scrub bar, skip, volume, full screen) take over */
  .video-frame:not(.playing) video{ pointer-events:none; }
  .play-btn{ z-index:3; }
  .play-btn{
    width:74px; height:74px; border-radius:0; background:var(--orange);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 0 0 14px rgba(255,255,255,0.08);
    transition:transform .3s, opacity .3s;
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:2; pointer-events:none;
  }
  .video-frame.playing .play-btn{ opacity:0; }
  .video-frame:hover .play-btn{ transform:translate(-50%,-50%) scale(1.08); }
  .play-btn svg{ margin-left:4px; }
  .video-caption{ position:absolute; bottom:20px; left:24px; color:var(--cloud); font-size:13px; opacity:.75; z-index:2; pointer-events:none;}
  .video-frame.playing .video-caption{ opacity:0; }

  /* ---------- BOOK A CALL ---------- */

  .book-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; text-align:left; }
  .book-copy h2{ font-size:clamp(26px,3.6vw,38px); color:var(--berry); max-width:460px; margin-top:14px; }
  .book-copy p.sub{ margin-top:16px; font-size:16px; color:#5c1b3b; max-width:420px; }
  .book-photo-wrap{ display:flex; flex-direction:column; align-items:center; }
  .book-photo-inner{ position:relative; animation:book-drift 7s ease-in-out infinite; }
  .book-photo{ transform:rotate(3deg); }
  .book-photo:hover{ transform:rotate(0deg) scale(1.02); }
  .book-hashtags{
    margin-top:26px; max-width:300px; text-align:center;
    font-family:var(--hand); font-weight:600; font-size:19px; line-height:1.5;
    color:var(--berry); transform:rotate(-1.5deg);
    opacity:0; transition:opacity .8s ease .3s, transform .8s ease .3s;
    animation:book-drift 7s ease-in-out infinite;
  }
  @keyframes book-drift{
    0%, 100%{ translate:0 0; }
    50%{ translate:-10px 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .book-photo-inner, .book-hashtags{ animation:none; }
  }
  .reveal.in .book-hashtags{ opacity:1; }
  .book-hashtags > span:not(.brand-word){ color:var(--orange); font-family:var(--sans); font-weight:700; }

  /* ---------- FOOTER ---------- */
  footer{
    position:relative; z-index:0; overflow:hidden;
    background:radial-gradient(120% 140% at 12% 0%, #10544a 0%, var(--teal) 46%, #093831 100%);
    color:var(--cloud); padding:110px 0 34px;
  }
  /* Footer does nothing special for almost the whole page. Only once the user
     has scrolled into the final "Book a Call" section do we pin the footer to
     the bottom of the viewport (via JS), so Book a Call can visibly slide up
     and reveal it — never active anywhere else on the page. */
  footer.pinned{ position:fixed; bottom:0; left:0; right:0; }
  #footerSpacer{ display:block; }
  /* the section right above the footer slides up over it (all pages) */
  .footer-cover{ position:relative; z-index:2; box-shadow:0 30px 50px -20px rgba(0,0,0,0.25); }
  /* Keep page sections above the pinned footer. Without this, a fixed footer
     (painted later in the page) covered the bottom of the section before the
     cover section, e.g. the green banner on What We Do, showing a dark band.
     .assess and .what-we-do are left alone: they contain their own fixed
     layers (assessment popup, pinned image) that must stay unconfined. */
  body > section:not(.footer-cover):not(.assess):not(.what-we-do):not(.hero):not(.page-hero):not(.wwd-intro){ position:relative; z-index:1; }
  .book{
    padding:100px 0; text-align:center;
    /* blush rises gently out of the section above; the bottom edge stays solid
       because it slides over the footer */
    background:linear-gradient(to bottom,
      var(--cloud) 0,
      color-mix(in srgb, var(--blush) 45%, var(--cloud)) 70px,
      var(--blush) 180px,
      var(--blush) 100%);
    position:relative; z-index:2; overflow:hidden;
    border-radius:0;
  }
  /* (the coloured rule line along the top of the footer was removed: the section
     above now dissolves into the footer instead of being fenced off from it) */
  .foot-watermark{
    position:absolute; right:-0.05em; bottom:-0.3em; z-index:0;
    font-family:var(--serif); font-style:italic; font-weight:600;
    font-size:min(26vw,320px); line-height:1; color:var(--blush); opacity:0.06;
    pointer-events:none; user-select:none;
  }
  .foot-wrap{ position:relative; z-index:1; }

  .foot-panel{
    background:rgba(242,242,233,0.045); border:1px solid rgba(242,242,233,0.1);
    border-radius:0; padding:56px 56px 52px;
    box-shadow:0 30px 60px -30px rgba(0,0,0,0.35);
  }

  .foot-logo-lockup{ display:block; height:38px; width:auto; margin-bottom:26px; }
  .foot-invite{ font-family:var(--hand); font-style:normal; font-weight:600; font-size:26px; line-height:1.35; max-width:320px; color:var(--blush); margin-top:2px; }
  .foot-social{ display:flex; gap:12px; margin-top:28px; }
  .foot-social-btn{
    width:40px; height:40px; border-radius:0; border:1px solid rgba(242,242,233,0.28);
    display:flex; align-items:center; justify-content:center; color:var(--cloud);
    transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  }
  .foot-social-btn:hover{ background:var(--blush); border-color:var(--blush); color:var(--teal); transform:translateY(-3px); }

  .foot-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px 44px; }
  .foot-top > div:nth-of-type(2){ border-left:1px solid rgba(242,242,233,0.12); padding-left:44px; }

  .foot-col h5{
    position:relative; padding-top:16px; font-size:12px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--mint); margin-bottom:18px; font-weight:700;
  }
  .foot-col h5::before{ content:''; position:absolute; top:0; left:0; width:22px; height:3px; border-radius:0; background:var(--mint); }
  .foot-top > div:nth-of-type(3) h5::before{ background:var(--blush); }
  .foot-top > div:nth-of-type(4) h5::before{ background:var(--orange); }

  .foot-link{
    display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--cloud);
    opacity:.82; margin-bottom:13px; text-decoration:none;
    transition:opacity .2s ease, transform .2s ease, color .2s ease;
  }
  .foot-link:hover{ opacity:1; color:var(--blush); transform:translateX(4px); }
  .foot-link svg{ flex-shrink:0; opacity:.75; transition:opacity .2s ease; }
  .foot-link:hover svg{ opacity:1; }
  /* On touch these are the only links in the footer, and 22px of text is a
     poor target. Pad them out to ~40px without changing the visual rhythm. */
  @media (hover:none), (max-width:1150px){
    .foot-link{ padding:9px 0; margin-bottom:4px; }
  }
  .foot-def h5{
    font-family:var(--sans); font-style:italic; font-weight:700; letter-spacing:0;
    text-transform:none; font-size:18px; color:var(--blush); padding-top:18px;
  }
  .foot-def h5::before{ background:var(--orange); }
  .foot-def p{ font-size:14px; color:var(--cloud); opacity:.72; line-height:1.7; margin:0; }

  .foot-bottom{
    margin-top:44px; padding-top:26px; border-top:1px solid rgba(242,242,233,0.15);
    display:flex; justify-content:space-between; align-items:center;
    font-size:12px; opacity:.65; flex-wrap:wrap; gap:16px;
  }
  .foot-bottom-right{ display:flex; align-items:center; gap:22px; }
  .lang-toggle{ display:flex; gap:8px; }
  .lang-toggle span{ padding:4px 10px; border-radius:0; border:1px solid rgba(242,242,233,0.3); cursor:pointer; transition:background .2s ease, color .2s ease; }
  .lang-toggle span.active{ background:var(--cloud); color:var(--teal); }
  .lang-toggle span:hover:not(.active){ border-color:var(--cloud); }
  .back-to-top{
    display:inline-flex; align-items:center; gap:6px; color:var(--cloud); text-decoration:none;
    opacity:.85; transition:opacity .2s ease, transform .2s ease;
  }
  .back-to-top:hover{ opacity:1; transform:translateY(-2px); }

  @media(max-width:960px){
    .foot-panel{ padding:44px 32px; }
    .foot-top{ grid-template-columns:1fr 1fr; }
    .foot-top > div:nth-of-type(2){ border-left:none; padding-left:0; }
    .paths-grid{ grid-template-columns:1fr 1fr; }
  }

  @media(max-width:860px){
    .hero{ padding:110px 0 130px; min-height:auto; }
    .hero-inner{ grid-template-columns:1fr; text-align:left; }
    .hero-right{ padding:22px 20px 20px; margin-top:96px; }
    .poll-stat .label{ white-space:normal; max-width:220px; }
    .scroll-cue{ display:none; }
    .poll-opt .label{ white-space:normal; }
    .poll-opt{ align-items:flex-start; }
    .assess, .who, .video-sec, .book, .paths{ padding:72px 0; }
    .paths-grid{ grid-template-columns:1fr; gap:20px; }
    .paths-grid{ margin-top:40px; }
    .poll-section{ padding:76px 0; }
    .wrap{ padding:0 22px; }
    .assess-inner, .who-grid, .book-grid{ grid-template-columns:1fr; }
    .book-grid{ text-align:center; gap:36px; }
    .book-copy h2, .book-copy p.sub{ margin-left:auto; margin-right:auto; }
    .what-pin-wrap{ height:220vh; }
    .what-reveal-img{ clip-path:inset(44% 20% round 14px); }
    .what-steps{ padding:16px 20px 6px 80px; border-radius:0; }
    .what-steps::before{ left:110px; }
    .what-row{ grid-template-columns:60px 1fr; gap:16px; padding:22px 0; }
    .what-row-marker{ width:60px; height:60px; }
    .what-row-icon svg{ width:24px; height:24px; }
    .foot-panel{ padding:36px 24px; border-radius:0; }
    .foot-logo-lockup{ height:44px; }
    .foot-top{ grid-template-columns:1fr; gap:40px; }
    .foot-top > div:nth-of-type(2){ border-left:none; padding-left:0; }
    .foot-bottom{ flex-direction:column; align-items:flex-start; }
    .foot-bottom-right{ width:100%; justify-content:space-between; }
    .poll-grid{ grid-template-columns:1fr; gap:40px; }
    .cue-grid{ grid-template-columns:1fr; gap:44px; }
    .cue-photo-wrap{ order:-1; }
    .cue-photo{ transform:rotate(0deg); max-width:320px; }
    .cue-def::before{ font-size:44vw; opacity:0.045; }
    .poll-copy p, .poll-copy .poll-stat{ margin-left:auto; margin-right:auto; }
  }

  /* Nav switches to the stacked dropdown well before the pill would run out of
     room to fit all links without overlapping the icon/burger buttons. */
  @media(max-width:1150px){
    .nav-links{
      position:absolute; top:calc(100% + 14px); left:0; right:0; transform:translateY(0);
      flex-direction:column; align-items:stretch; gap:2px;
      border-radius:0; padding:26px 18px 24px; height:auto; width:auto; max-width:none;
      max-height:calc(100vh - 120px); overflow-y:auto;
    }
    .nav-zone.pinned .nav-links{ transform:translateY(0); }
    .nav-logo-lockup{
      height:clamp(30px, 8vw, 38px); width:auto; aspect-ratio:860.76/120; max-width:none;
      margin:0 auto 20px; padding-bottom:18px;
      border-bottom:1px solid rgba(242,242,233,0.14); object-fit:contain;
    }
    .nav-links a{
      font-size:16.5px; padding:16px 4px; width:100%; justify-content:flex-start;
      border-bottom:1px solid rgba(242,242,233,0.12);
      box-sizing:border-box;
    }
    .nav-links a:last-of-type{ border-bottom:none; }
    /* stacked panel: a small bar in the left gutter, clear of the text */
    .nav-links a.active::after{
      content:''; position:absolute; left:-10px; top:50%; margin-top:-9px;
      width:2px; height:18px; background:var(--blush);
    }
    .nav-cta, .nav-links a.nav-cta{
      width:100%; box-sizing:border-box; justify-content:center; text-align:center;
      padding:18px 24px !important; margin-top:16px; border-bottom:none;
      border-radius:0 !important; font-weight:600; font-size:16px !important;
    }
  }

  @media(max-width:359px){
    .nav-logo-lockup{ height:24px; }
    .foot-logo-lockup{ height:32px; }
  }