/* =========================================================
   anywr landing page
   Hex values are still estimates from the Figma export.
   ========================================================= */

/* ---- display typeface: Bagoss Standard ----
   TRIAL files: fine for design, licence needed before launch.
   One family, two files: the browser takes the italic one for any
   italic text inside a heading (the French words in <i lang="fr">). */
   @font-face{
    font-family:"Bagoss Standard";
    src:url("assets/fonts/BagossStandard-Bold.woff2") format("woff2");
    font-weight:700;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"Bagoss Standard";
    src:url("assets/fonts/BagossStandard-BoldItalic.woff2") format("woff2");
    font-weight:700;
    font-style:italic;
    font-display:swap;
  }
  
     :root{
      /* headings; Poppins steps in if the file doesn't load */
      --font-display:"Bagoss Standard","Poppins",system-ui,sans-serif;
  
      --cream:#F5EEDF;
      --peri:#C8D6F8;
      --green:#96E254;
      --coral:#F8785C;
      --violet:#9E00F0;
      --navy:#1C2340;
      --white:#FFFFFF;
      --lilac:#F0E4FB;
      --placeholder:#E6E0D2;
      --offwhite:#F1F2F5;
    
      /* one accent per card, read off the Figma frames */
      --amber:#F5B942;
      --teal:#5FAFA5;
      --blue:#7FA5E3;
    
      --r-hero:40px;
      --r-panel:32px;
      --r-card:28px;
      --r-photo:48px;
    
      --gutter:clamp(12px,1.2vw,18px);
      --pad:clamp(24px,3.4vw,56px);
  
      /* The fixed nav's height. The hero reserves this at the top,
         since the nav no longer sits inside it. */
      --nav-h:64px;
    
      /* how much scrolling the card stack takes */
      --stack-scroll:560vh;
    }
    
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:"Poppins",system-ui,sans-serif;
      font-weight:400;
      font-size:17px;
      line-height:1.55;
      color:var(--navy);
      background:var(--offwhite);
      position:relative;
      overflow-x:hidden;
    }
    /* every heading uses the display face, at the one weight it has */
    h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.06;letter-spacing:-0.015em}
    a{color:inherit;text-decoration:none}
    :focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:10px}
    ul{list-style:none}
    
    /* =========================================================
       BUTTONS
       Hover: lifts, and the second colour wipes in from the left.
       The wipe is a background gradient, so the label stays on top
       with no extra markup.
       ========================================================= */
    
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:0;
      border-radius:999px;
      padding:14px 26px;
      font:600 16px/1.2 "Poppins",system-ui,sans-serif;
      white-space:nowrap;
      cursor:pointer;
    
      background-image:linear-gradient(to right, var(--wipe) 0 50%, transparent 50%);
      background-size:200% 100%;
      background-position:100% 0;
      background-repeat:no-repeat;
    
      transition:
        background-position .45s cubic-bezier(.2,.7,.2,1),
        color .2s ease .12s,
        transform .25s cubic-bezier(.2,.7,.2,1),
        box-shadow .25s ease;
    }
    .btn:hover,
    .btn:focus-visible{
      background-position:0 0;
      color:var(--wipe-text);
      transform:translateY(-3px);
      box-shadow:0 12px 26px rgba(28,35,64,.22);
    }
    .btn:active{transform:translateY(-1px)}
    
    .btn-violet{background-color:var(--violet);color:var(--white);--wipe:var(--navy);--wipe-text:var(--white)}
    .btn-navy  {background-color:var(--navy);  color:var(--white);--wipe:var(--violet);--wipe-text:var(--white)}
    .btn-white {background-color:var(--white); color:var(--navy); --wipe:var(--violet);--wipe-text:var(--white)}
    .btn-coral {background-color:var(--coral); color:var(--white);--wipe:var(--navy);--wipe-text:var(--white)}
    
    /* card buttons, one colour per card */
    .btn-amber{background-color:var(--amber);color:var(--navy); --wipe:var(--navy);--wipe-text:var(--white)}
    .btn-teal {background-color:var(--teal); color:var(--white);--wipe:var(--navy);--wipe-text:var(--white)}
    .btn-blue {background-color:var(--blue); color:var(--navy); --wipe:var(--navy);--wipe-text:var(--white)}
    .btn-green{background-color:var(--green);color:var(--navy); --wipe:var(--navy);--wipe-text:var(--white)}
    
  
    /* =========================================================
       INTRO
       Covers everything on first load: the logo alone on the hero's
       periwinkle, then the panel wipes upward to reveal the page.
       ========================================================= */
  
    .intro{
      position:fixed;
      inset:0;
      z-index:1000;              /* above the nav, which is 100 */
      display:grid;
      place-items:center;
      background:var(--green);
      cursor:pointer;
  
      /* clip-path inset is top right bottom left. At rest nothing is
         clipped; the wipe clips the bottom edge up to 100%, so the panel
         disappears upward and the page shows through from below. */
      clip-path:inset(0 0 0 0);
      transition:clip-path var(--intro-wipe, 900ms) cubic-bezier(.77,0,.18,1);
    }
    .intro.is-leaving{clip-path:inset(0 0 100% 0)}
    .intro.is-gone,
    .intro-seen .intro{display:none}
  
    /* ---- the logo animation ----
       Only the visible letterforms get the violet fill. A bare `path`
       selector also matches the paths inside the masks and fills them,
       which half-reveals every letter from the first frame. */
    .logo-anim{
      width:min(800px,62vw);
      height:auto;
      overflow:visible;
      display:block;
    }
    .logo-anim .la-mark,
    .logo-anim .la-letter{fill:var(--violet)}
    /* The mask paths are stroked white; a bare `path` selector would also
       match them and fill every letter in from frame one. */
    .logo-anim .la-reveal{
      fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
      stroke-dasharray:1000;          /* paths carry pathLength="1000" */
    }
  
    .la-slide{animation:la-slide 3100ms both}
    .la-wob{animation-duration:3100ms;animation-fill-mode:both}
    .la-wob-mark{animation-name:wob-mark,la-blur-mark}
    .la-wob-yw{animation-name:wob-yw,la-blur-let}
    .la-wob-n{animation-name:wob-n,la-blur-let}
    .la-wob-a{animation-name:wob-a,la-blur-let}
    .la-wob-r{animation-name:wob-r,la-blur-let}
  
    #rev-mark .la-reveal{animation:draw-mark 3100ms both}
    #rev-a .la-reveal{animation:draw-a 3100ms both}
    #rev-n .la-reveal{animation:draw-n 3100ms both}
    #rev-yw .la-reveal{animation:draw-yw 3100ms both}
    #rev-r .la-reveal{animation:draw-r 3100ms both}
  
    .intro.is-leaving .logo-anim{
      transition:opacity 300ms ease, transform 300ms ease;
      opacity:0;
      transform:scale(1.04);
    }
  
    @keyframes draw-mark{
      0.0%{stroke-dashoffset:1000;animation-timing-function: cubic-bezier(0.810,0.018,0.449,1.006)}
      26.307%{stroke-dashoffset:0}
      100%{stroke-dashoffset:0}
    }
    @keyframes draw-a{
      0%{stroke-dashoffset:1000}
      40.668%{stroke-dashoffset:1000;animation-timing-function: cubic-bezier(0.111,0.529,0.189,0.979)}
      96.45%{stroke-dashoffset:0}
      100%{stroke-dashoffset:0}
    }
    @keyframes draw-n{
      0%{stroke-dashoffset:1000}
      29.032%{stroke-dashoffset:1000;animation-timing-function: cubic-bezier(0.731,0.006,0.428,0.981)}
      54.839%{stroke-dashoffset:0}
      100%{stroke-dashoffset:0}
    }
    @keyframes draw-yw{
      0%{stroke-dashoffset:1000}
      25.806%{stroke-dashoffset:1000;animation-timing-function: cubic-bezier(0.333,0.000,0.000,0.509)}
      51.613%{stroke-dashoffset:500;animation-timing-function: cubic-bezier(0.069,0.616,0.000,1.044)}
      79.447%{stroke-dashoffset:0}
      100%{stroke-dashoffset:0}
    }
    @keyframes draw-r{
      0%{stroke-dashoffset:1000}
      52.688%{stroke-dashoffset:1000;animation-timing-function: cubic-bezier(0.333,0.000,0.053,1.001)}
      77.419%{stroke-dashoffset:0}
      100%{stroke-dashoffset:0}
    }
    @keyframes wob-mark{
      0%{transform:translate(534.983px,520px) rotate(0deg) translate(-534.983px,-520px)}
      2.151%{transform:translate(534.983px,520px) rotate(0deg) translate(-534.983px,-520px)}
      17.204%{transform:translate(534.983px,520px) rotate(-10deg) translate(-534.983px,-520px)}
      24.731%{transform:translate(534.983px,520px) rotate(6deg) translate(-534.983px,-520px)}
      31.183%{transform:translate(534.983px,520px) rotate(0deg) translate(-534.983px,-520px)}
      100%{transform:translate(534.983px,520px) rotate(0deg) translate(-534.983px,-520px)}
    }
    @keyframes wob-yw{
      0%{transform:translate(1170px,570px) rotate(0deg) translate(-1170px,-570px)}
      32.258%{transform:translate(1170px,570px) rotate(0deg) translate(-1170px,-570px)}
      36.559%{transform:translate(1170px,570px) rotate(-3deg) translate(-1170px,-570px)}
      40.86%{transform:translate(1170px,570px) rotate(1deg) translate(-1170px,-570px)}
      45.161%{transform:translate(1170px,570px) rotate(0deg) translate(-1170px,-570px)}
      100%{transform:translate(1170px,570px) rotate(0deg) translate(-1170px,-570px)}
    }
    @keyframes wob-n{
      0%{transform:translate(926px,538px) rotate(0deg) translate(-926px,-538px)}
      41.935%{transform:translate(926px,538px) rotate(0deg) translate(-926px,-538px)}
      46.237%{transform:translate(926px,538px) rotate(-3deg) translate(-926px,-538px)}
      50.538%{transform:translate(926px,538px) rotate(1deg) translate(-926px,-538px)}
      54.839%{transform:translate(926px,538px) rotate(0deg) translate(-926px,-538px)}
      100%{transform:translate(926px,538px) rotate(0deg) translate(-926px,-538px)}
    }
    @keyframes wob-a{
      0%{transform:translate(762px,538px) rotate(0deg) translate(-762px,-538px)}
      48.387%{transform:translate(762px,538px) rotate(0deg) translate(-762px,-538px)}
      52.688%{transform:translate(762px,538px) rotate(-3deg) translate(-762px,-538px)}
      56.989%{transform:translate(762px,538px) rotate(1deg) translate(-762px,-538px)}
      61.29%{transform:translate(762px,538px) rotate(0deg) translate(-762px,-538px)}
      100%{transform:translate(762px,538px) rotate(0deg) translate(-762px,-538px)}
    }
    @keyframes wob-r{
      0%{transform:translate(1405px,538px) rotate(0deg) translate(-1405px,-538px)}
      56.989%{transform:translate(1405px,538px) rotate(0deg) translate(-1405px,-538px)}
      61.29%{transform:translate(1405px,538px) rotate(-3deg) translate(-1405px,-538px)}
      65.591%{transform:translate(1405px,538px) rotate(1deg) translate(-1405px,-538px)}
      69.892%{transform:translate(1405px,538px) rotate(0deg) translate(-1405px,-538px)}
      100%{transform:translate(1405px,538px) rotate(0deg) translate(-1405px,-538px)}
    }
    @keyframes la-slide{
      0%{transform:translateX(425.01700000000005px)}
      18.098%{transform:translateX(425.01700000000005px);animation-timing-function:cubic-bezier(0.333,0,0.667,1)}
      46.237%,100%{transform:translateX(0)}
    }
    @keyframes la-blur-mark{
      0%,18.28%{filter:blur(2px)}
      27.957%,100%{filter:blur(0)}
    }
    @keyframes la-blur-let{
      0%,82.796%{filter:blur(2px)}
      90.323%,100%{filter:blur(0)}
    }
  
    /* no scrolling underneath while the intro is up */
    html.intro-lock,
    html.intro-lock body{overflow:hidden}
  
    /* =========================================================
       PLACEHOLDERS
       ========================================================= */
    
    .ph{
      position:relative;
      background:var(--placeholder);
      display:grid;
      place-items:center;
      text-align:center;
      padding:16px;
      font-size:14px;
      color:rgba(28,35,64,.5);
      overflow:hidden;
    }
    
    /* =========================================================
       1. HERO  (sticky: the next section scrolls over it)
       ========================================================= */
    
    .hero{
      position:sticky;
      top:var(--gutter);
      z-index:0;
    
      margin:var(--gutter) var(--gutter) 0;
      min-height:calc(100svh - 2 * var(--gutter));
      background:var(--peri);
      border-radius:var(--r-hero);
      padding:calc(var(--pad) + var(--nav-h)) var(--pad) var(--pad);
      overflow:hidden;
    
      display:flex;
      flex-direction:column;
      gap:clamp(24px,3vh,44px);
    }
  
    /* ---- Full-bleed video background ----
       Clips from filling the whole hero down to the character circle on
       scroll, then the ribbon emerges from that dot. --*/
    .hero-video-iris{
      position:absolute;
      inset:0;
      z-index:0;
      border-radius:inherit;
      overflow:hidden;
      will-change:clip-path;
      pointer-events:none;
    }
    .hero-bg-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    /* Green tint shown on top of the video inside the iris,
       fades in near the end of the contraction so the dot
       looks like the ribbon's green origin. */
    .hero-video-green{
      position:absolute;
      inset:0;
      background:var(--green);
      opacity:0;
      pointer-events:none;
      will-change:opacity;
    }
  
    /* Semi-transparent dark scrim so text stays readable over the video.
       Fades out as the iris contracts (controlled by JS via opacity on
       this element). Composed of two layers:
         1. Top-edge peri gradient — fades the old background colour over
            the video where the logo / nav sits, matching the header feel.
         2. Left-edge dark gradient — keeps the copy readable. */
    .hero-video-overlay{
      position:absolute;
      inset:0;
      z-index:1;
      border-radius:inherit;
      background:
        /* diagonal: top-left corner fully peri, fades toward bottom-right */
        linear-gradient(
          148deg,
          var(--peri) 0%,
          var(--peri) 28%,
          rgba(200,214,248,.55) 55%,
          rgba(200,214,248,0) 75%
        ),
        /* left-edge tint keeps headline / buttons legible */
        linear-gradient(
          to right,
          rgba(28,35,64,.38) 0%,
          rgba(28,35,64,.10) 50%,
          rgba(28,35,64,.02) 100%
        );
      pointer-events:none;
      will-change:opacity;
      transition:opacity 180ms ease;
    }
  
  
    /* Legacy green iris: now only used for ribbon hand-off fade timing,
       kept hidden since the video iris replaces the visual effect. */
    .hero-green-iris{
      display:none;
    }
    .hero .ribbon-clip{
      z-index:1;
    }
    .hero-runway{
      height:clamp(500px, 65vh, 700px);
      pointer-events:none;
    }
  
    
    .nav{
      position:fixed;
      top:-40px;
      left:0;
      right:0;
      z-index:100;
      padding:calc(var(--gutter) + var(--pad)) calc(var(--gutter) + var(--pad)) 0;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:24px;
    }
    .wordmark{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:600;
      font-size:28px;
      letter-spacing:-0.02em;
      line-height:1;
      color:var(--violet);
    }
    .mark{height:28px;width:auto;flex:none;display:block}
    /* Logo on dark: script.js adds .on-dark to the nav when a
       data-nav-dark area is behind the logo. brightness(0) makes the
       logo black, invert(1) flips it to white: any one-colour logo
       turns white without a second file. */
    .nav .mark{transition:filter .3s ease}
    .nav.on-dark .mark{filter:brightness(0) invert(1)}
  
    /* ---- nav logo: full logo at the top, mark only once scrolled ----
       The logo is 117 by 28 units. The mark runs from 0 to 26.9 and
       the word starts at 31.0, so a clip 29 units wide shows the whole
       mark and none of the word. At a 28px logo height one unit is one
       pixel, so these read directly as pixels. */
    .nav{
      --logo-h:36px;
      --logo-full:calc(var(--logo-h) * 117 / 28);
      --logo-mark:calc(var(--logo-h) * 29 / 28);
    }
    /* no fixed slot: as the clip narrows the column narrows with it,
       so the pill slides left and keeps the same gap to the mark */
    /* The box only sets how much room the logo takes, which is what
       slides the pill. It no longer clips: each image clips itself. */
    .wordmark-clip{
      position:relative;
      display:block;
      height:var(--logo-h);
      width:var(--logo-full);
      transition:width 450ms cubic-bezier(.2,.7,.2,1);
    }
    .wordmark-clip .mark{
      height:var(--logo-h);
      width:var(--logo-full);
      max-width:none;
    }
  
    /* the mark alone: everything right of the 29-unit cut is clipped */
    .logo-mark{
      clip-path:inset(0 calc(var(--logo-full) - var(--logo-mark)) 0 0);
    }
  
    /* the word alone, laid exactly over the first copy. On the way out
       it goes at once, so it has left before the pill slides into its
       space; on the way back it waits a beat for the room to open. */
    .logo-word{
      position:absolute;
      top:0;
      left:0;
      clip-path:inset(0 0 0 var(--logo-mark));
      transition:
        opacity 280ms ease 150ms,
        filter 360ms ease 150ms,
        transform 360ms cubic-bezier(.2,.7,.2,1) 150ms;
    }
    .nav.is-compact .logo-word{
      opacity:0;
      filter:blur(6px);
      transform:translateX(-8px);
      transition-delay:0ms;
    }
    .nav.is-compact .wordmark-clip{width:var(--logo-mark)}
  
    /* Hovering anywhere on the nav bar brings the full logo back. The
       zone is the whole bar, not the pill, on purpose: expanding pushes
       the pill right, and if the pill were the hover target it would
       slide out from under the cursor, collapse, slide back, and flicker.
       Only on devices with a real pointer, since a tap leaves :hover
       stuck on a phone. Keyboard focus inside the nav does the same. */
    @media (hover:hover){
      .nav.is-compact:hover .wordmark-clip{width:var(--logo-full)}
      .nav.is-compact:hover .logo-word{
        opacity:1;filter:none;transform:none;transition-delay:150ms;
      }
    }
    .nav.is-compact:focus-within .wordmark-clip{width:var(--logo-full)}
    .nav.is-compact:focus-within .logo-word{
      opacity:1;filter:none;transform:none;transition-delay:150ms;
    }
    
    .pillnav{
      justify-self:start;
      display:flex;
      gap:2px;
      background:var(--white);
      border-radius:999px;
      padding:6px;
    }
    .pillnav a{
      padding:10px 20px;
      border-radius:999px;
      font-size:16px;
      white-space:nowrap;
      transition:background-color .2s ease;
    }
    /* a nav item that opens a panel: looks identical to the links */
    .pill-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:0;
      background:transparent;
      font:inherit;
      color:inherit;
      cursor:pointer;
      padding:10px 20px;
      border-radius:999px;
      white-space:nowrap;
      transition:background-color .2s ease;
    }
    .pill-link:hover,
    .pill-link[aria-expanded="true"]{background:var(--lilac)}
    .pill-caret{
      width:8px;height:8px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:translateY(-2px) rotate(45deg);
      transition:transform .25s ease;
    }
    .pill-link[aria-expanded="true"] .pill-caret{transform:translateY(1px) rotate(-135deg)}
  
    /* ---- mega panels ----
       One panel per nav item, hanging under the bar. Laid out like a
       product menu: rows of icon + name + one line for HR, a photo on
       the right with its own link, and a cream strip of actions at the
       bottom.

       THE WAVY BOTTOM: the panel is cut by a mask. The top part is a
       plain rectangle; the bottom --wave pixels are a wave drawn in SVG.
       The green ribbon (.mega-ribbon) is the same curve, so it rides
       the edge. To reshape the wave, change the path in BOTH places:
       the url() in .mega's mask below, and the <path> inside each
       panel's .mega-ribbon in the HTML. Taller wave: raise --wave. */
    .megas{
      position:absolute;
      top:100%;
      left:calc(var(--gutter) + var(--pad));
      right:calc(var(--gutter) + var(--pad));
      margin-top:10px;
      /* a box-shadow is cut off by the mask; a shadow on the parent
         follows the wave instead */
      filter:drop-shadow(0 24px 44px rgba(28,35,64,.16));
    }
    .mega{
      --wave:clamp(30px,3.2vw,48px);
      position:relative;
      overflow:hidden;
      background:var(--white);
      border-radius:var(--r-panel) var(--r-panel) 0 0;
      -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--wave) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C220 104 420 98 620 52 S1000 -4 1200 58 V0 H0Z'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
              mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--wave) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C220 104 420 98 620 52 S1000 -4 1200 58 V0 H0Z'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
      opacity:0;
      transform:translateY(-10px);
      transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .mega.is-open{opacity:1;transform:none}

    /* the main area on the left, the photo on the right */
    .mega-body{
      display:grid;
      grid-template-columns:minmax(0,1fr) clamp(240px,26vw,380px);
    }
    .mega-main{padding:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px) clamp(24px,2.4vw,36px)}

    .mega-tag{
      display:inline-block;
      border:1px solid rgba(28,35,64,.25);
      border-radius:999px;
      padding:7px 16px;
      font-size:14px;
      margin:0 0 clamp(14px,1.6vw,22px) 12px;
    }

    /* Everything arrives in a short stagger once the panel opens. Each
       item carries --i (its place in the list) in the HTML. The delay
       sits only on opacity and transform, so hover colours stay instant. */
    .mega-tag,.mega-item,.mega-country,.mega-media{
      opacity:0;
      transform:translateY(10px);
    }
    .mega.is-open .mega-tag,
    .mega.is-open .mega-item,
    .mega.is-open .mega-country,
    .mega.is-open .mega-media{
      opacity:1;
      transform:none;
      --d:calc(.08s + var(--i,0) * .035s);
    }
    .mega.is-open .mega-media{--d:.16s}

    /* ---- services: icon, name, one line ---- */
    .mega-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px clamp(10px,1.4vw,24px);
    }
    .mega-item{
      display:flex;
      align-items:center;
      gap:clamp(14px,1.3vw,20px);
      padding:12px;
      border-radius:22px;
      transition:
        opacity .3s ease var(--d,0s),
        transform .35s cubic-bezier(.2,.7,.2,1) var(--d,0s),
        background-color .2s ease;
    }
    .mega-icon{
      flex:none;
      display:grid;
      place-items:center;
      width:clamp(48px,4vw,58px);
      height:clamp(48px,4vw,58px);
      border-radius:16px;
      background:var(--green-light);
      color:var(--navy);
      transition:background-color .25s ease, color .25s ease;
    }
    .mega-icon svg{
      width:52%;
      height:52%;
      overflow:visible;
      fill:none;
      stroke:currentColor;
      stroke-width:1.7;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .mega-name{
      display:block;
      font-family:var(--font-display);
      font-weight:700;
      font-size:clamp(18px,1.45vw,22px);
      line-height:1.2;
    }
    .mega-desc{
      display:block;
      margin-top:4px;
      font-size:15px;
      line-height:1.4;
      color:rgba(28,35,64,.68);
    }

    /* HOVER: the row takes cream, the icon tile takes violet, and the
       icon plays its own short move (below). */
    .mega-item:hover,
    .mega-item:focus-visible{background:var(--cream)}
    .mega-item:hover .mega-icon,
    .mega-item:focus-visible .mega-icon{background:var(--green);color:var(--navy)}

    /* ---- the icon moves ----
       One per service, played once each time the row is hovered.
       Each part spins or moves around its own centre. */
    .mega-icon svg *{transform-box:fill-box;transform-origin:center}
    .i-check{stroke-dasharray:1;stroke-dashoffset:0}
    .i-route{stroke-dasharray:2.4 2.6}
    .i-door{transform-origin:left center}
    .i-shadow{opacity:.5}

    .mega-item:is(:hover,:focus-visible) .i-stamp{animation:i-stamp .55s cubic-bezier(.2,.7,.2,1)}
    .mega-item:is(:hover,:focus-visible) .i-pin{animation:i-pin .7s ease}
    .mega-item:is(:hover,:focus-visible) .i-shadow{animation:i-shadow .7s ease}
    .mega-item:is(:hover,:focus-visible) .i-check{animation:i-check .5s ease .05s both}
    .mega-item:is(:hover,:focus-visible) .i-coin{animation:i-coin .7s cubic-bezier(.3,0,.2,1)}
    .mega-item:is(:hover,:focus-visible) .i-roof{animation:i-roof .55s ease}
    .mega-item:is(:hover,:focus-visible) .i-door{animation:i-door .7s ease}
    .mega-item:is(:hover,:focus-visible) .i-route{animation:i-route .9s linear infinite}

    @keyframes i-stamp{
      0%{transform:translate(3px,-7px) scale(1.5);opacity:0}
      55%{transform:scale(.85);opacity:1}
      100%{transform:none}
    }
    @keyframes i-pin{30%{transform:translateY(-4px)} 55%{transform:none} 75%{transform:translateY(-2px)}}
    @keyframes i-shadow{30%{transform:scaleX(.55)} 55%{transform:none} 75%{transform:scaleX(.8)}}
    @keyframes i-check{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
    @keyframes i-coin{to{transform:rotateY(360deg)}}
    @keyframes i-roof{35%{transform:translateY(-3px)} 65%{transform:translateY(.5px)}}
    @keyframes i-door{40%,60%{transform:scaleX(.25)}}
    @keyframes i-route{to{stroke-dashoffset:-10}}

    /* ---- locations: country rows ----
       Same rows as Services, with the flag in place of the icon tile,
       in two groups: where companies hire into, and where talent comes
       from. Hover: the row takes cream, the flag tips, and the photo on
       the right switches to that country (script.js). */
    .mega-tag--next{margin-top:clamp(18px,2vw,28px)}
    .mega-places{row-gap:24px}
    .mega-places .mega-item{padding:10px 12px}
    .mega-flag{
      flex:none;
      width:clamp(40px,3.4vw,50px);
      height:clamp(40px,3.4vw,50px);
      border-radius:50%;
      background:var(--white);
      box-shadow:0 2px 8px rgba(28,35,64,.12);
      transition:transform .45s cubic-bezier(.3,1.6,.5,1);
    }
    .mega-place:is(:hover,:focus-visible) .mega-flag{transform:rotate(-14deg) scale(1.08)}
    /* the photo cross-fades when it changes country */
    .mega .mega-media img{transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .25s ease}
    .mega-media img.is-swapping{opacity:0}

    /* ---- the photo on the right, with its caption on it ---- */
    .mega-media{
      position:relative;
      display:block;
      overflow:hidden;
      min-height:clamp(280px,24vw,360px);
      background:var(--placeholder);
      color:var(--white);
      transition:
        opacity .35s ease var(--d,0s),
        transform .4s cubic-bezier(.2,.7,.2,1) var(--d,0s);
    }
    .mega-media img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .6s cubic-bezier(.2,.7,.2,1);
    }
    /* darkens the bottom so the caption stays readable on any photo */
    .mega-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top, rgba(28,35,64,.78), rgba(28,35,64,0) 60%);
    }
    .mega-media-cap{
      position:absolute;
      left:clamp(20px,2vw,32px);
      right:clamp(20px,2vw,32px);
      bottom:clamp(20px,2vw,32px);
      z-index:1;
    }
    .mega-media-title{
      display:block;
      font-family:var(--font-display);
      font-weight:700;
      font-size:clamp(20px,1.6vw,26px);
      line-height:1.15;
    }
    .mega-media-title > span:last-child{display:inline-block;transition:translate .25s ease}
    .mega-media-sub{display:block;margin-top:6px;font-size:15px;opacity:.85}
    .mega-media:hover img{transform:scale(1.04)}
    .mega-media:hover .mega-media-title > span:last-child{translate:4px 0}

    /* ---- the cream strip at the bottom ----
       Its lower edge is the wave, so it leaves --wave of room below
       its content for the curve to cut into. */
    .mega-foot{
      display:flex;
      align-items:center;
      gap:4px;
      background:var(--cream);
      padding:14px clamp(28px,3vw,48px) calc(var(--wave) + 2px);
    }
    .mega-foot .btn{padding:11px 22px;font-size:15px;margin-right:12px}
    .mega-foot-link{padding:6px 16px;font-size:15px;font-weight:500}
    .mega-foot-link + .mega-foot-link{border-left:1px solid rgba(28,35,64,.2)}
    .mega-foot-link:hover{text-decoration:underline;text-underline-offset:3px}
    .mega-close{
      margin-left:auto;
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:0;
      background:none;
      color:inherit;
      font:500 15px/1 "Poppins",system-ui,sans-serif;
      padding:10px 14px;
      border-radius:999px;
      cursor:pointer;
      transition:background-color .2s ease;
    }
    .mega-close:hover{background:rgba(28,35,64,.07)}

    /* The ribbon on the edge. Its centre line IS the edge, so the mask
       hides its lower half and the upper half shows on the cream.
       non-scaling-stroke keeps it one thickness however the SVG is
       stretched. Thicker or thinner: stroke-width. */
    .mega-ribbon{
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      height:var(--wave);
      overflow:visible;
      pointer-events:none;
    }
    .mega-ribbon path{
      fill:none;
      stroke:var(--green);
      stroke-width:34;
    }

    .pillnav a:hover{background:var(--lilac)}
    .pillnav a[aria-current="page"]{background:var(--lilac)}
    
    /* Single column: full-width content over the video background.
       The right-column video panel is removed — the background IS the video. */
    .hero-grid{
      position:relative;
      z-index:2;
      flex:1;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:0;
    }
    .hero-left{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:clamp(24px,4vh,56px);
      min-height:0;
      min-width:0;
      /* cap the headline width so it doesn't stretch wall-to-wall */
      max-width:clamp(480px, 55%, 760px);
    }
  
    /* 21ch is where the line breaks fall as they do in the Figma:
       "Creating The Conditions / For Your International / Talent To
       Find Their / Footing, And Stay." Narrower than 20ch splits
       "The Conditions" across two lines. */
    .hero h1{font-size:clamp(34px,4.1vw,60px);max-width:21ch}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
    /* Client logos: rendered white so they read against the peri/video background */
    .hero .clients-set img{filter:brightness(0) invert(1);opacity:.85}
    
    /* hero-media is no longer rendered in the markup (video is the background),
       but the class is kept here in case it is re-added. */
    .hero-media{
      display:none;
    }
    .hero-media video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
  
    
    /* Stacked: illustration, then the label, then the logos. */
    .hero-foot{
      position:relative;
      z-index:2;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:clamp(14px,2vh,26px);
      min-width:0;
    }
  
    /* Pulled out past the panel's padding and its edge, so it bleeds
       off the left. The panel's own overflow:hidden does the cutting,
       and its rounded corner shapes the cut. */
    .hero-char{
      width:clamp(150px,25vw,360px);
      height:clamp(200px,20vw,600px);
      flex:none;
  
    }
  
    /* ---- HERO CHARACTER: the waving hand ----
       Layers of one picture, stacked exactly (all the same size).
       The hand turns around the wrist (transform-origin) twice, then
       rests; the curved lines by the fingers and the dashes above
       pulse with each wave; the sparkles twinkle on their own.
         Speed of the whole wave: the 3.6s in .hc-hand (and the same
         number on .hc-waves / .hc-dashes, so they stay in step).
         How far it swings: the rotate() values in @keyframes hc-wave. */
    .hero-char.hc{
      position:relative;
      height:auto;
      aspect-ratio:928 / 1152;
    }
    .hc-l{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
    }
    .hc-hand{
      transform-origin:75.7% 62.9%;   /* the wrist, inside the cuff */
      animation:hc-wave 3.6s ease-in-out infinite;
    }
    .hc-waves{
      transform-origin:93% 39%;
      animation:hc-swoosh 3.6s ease-in-out infinite;
    }
    .hc-dashes{
      transform-origin:76% 26%;
      animation:hc-swoosh 3.6s ease-in-out infinite .08s;
    }
    .hc-spark{animation:hc-twinkle 2.4s ease-in-out infinite}
    .hc-spark-1{transform-origin:70% 16.5%}
    .hc-spark-2{transform-origin:63.4% 57.7%;animation-delay:.8s}
    .hc-spark-3{transform-origin:10.5% 54%;animation-delay:1.6s}

    /* two waves in the first 40%, then a rest */
    @keyframes hc-wave{
      0%,44%,100%{transform:none}
      9%{transform:rotate(8deg)}
      18%{transform:rotate(-4deg)}
      27%{transform:rotate(8deg)}
      36%{transform:rotate(-3deg)}
    }
    @keyframes hc-swoosh{
      0%,44%,100%{opacity:1;transform:none}
      9%,27%{opacity:1;transform:translate(1.2%,-.4%) scale(1.06)}
      18%,36%{opacity:.35;transform:none}
    }
    @keyframes hc-twinkle{
      0%,100%{opacity:1;transform:none}
      50%{opacity:.35;transform:scale(.6) rotate(20deg)}
    }

    .clients-block{
      width:100%;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:clamp(16px,2.2vh,40px);
      padding-bottom:clamp(4px,1vh,14px);
    }
    .clients-label{
      font-weight:600;
      font-size:clamp(14px,1.15vw,18px);
      line-height:1.2;
    }
    
    /* ---- client logos, scrolling ----
       Two identical sets sit side by side and the track slides
       left by exactly one set, then snaps back. Because the sets
       match, the snap is invisible and it reads as endless.      */
    .clients{
      min-width:0;
      overflow:hidden;
      padding-bottom:8px;
      width:calc(100vw - 2 * var(--gutter) - 2 * var(--pad));
      -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
              mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
    }
    .clients-track{
      display:flex;
      width:max-content;
      animation:client-scroll 34s linear infinite;
    }
    .clients:hover .clients-track{animation-play-state:paused}
    .clients-set{
      display:flex;
      align-items:center;
      gap:clamp(16px,2vw,36px);
      padding-right:clamp(16px,2vw,36px);
    }
    @keyframes client-scroll{
      from{transform:translateX(0)}
      to{transform:translateX(-50%)}
    }
    .client-logo{
      display:grid;
      place-items:center;
      width:clamp(96px,9vw,130px);
      height:clamp(36px,3.4vw,48px);
      border-radius:10px;
      background:rgba(255,255,255,.55);
      font-size:13px;
    }
    .clients img{
      height:clamp(24px,2.4vw,34px);
      width:auto;
      opacity:.75;
      filter: grayscale(1);
    }
    
    /* =========================================================
       2. STATEMENT + CARD STACK
       Opaque, so it covers the sticky hero as it rises.
       ========================================================= */
    
    .stack-section{
      position:relative;
      z-index:1;
      height:var(--stack-scroll);
      background:var(--cream);
      border-radius:var(--r-hero) var(--r-hero) 0 0;
    }
    .stack-sticky{position:sticky;top:0;height:100vh;z-index:2}
    .stack-viewport{
      position:relative;
      height:100%;
      perspective:1400px;
      display:grid;
      place-items:center;
      padding:0 var(--gutter);
    }
    
    .statement{
      grid-area:1 / 1;
      z-index:1;
      font-weight:700;   /* the display face's one weight */
      font-size:clamp(24px,3vw,44px);
      line-height:1.15;
      max-width:22ch;
      text-align:center;
    }
    
    /* ---- card backdrops ----
       One scene per card: character left, flag beside it, landmark
       right. Only one is active at a time. The stagger lives in these
       transition-delays, not in the script:
  
         entering   character now, flag after STAGGER, landmark after
                    the old one has cleared
         leaving    character now, flag after STAGGER, landmark now
    */
    .scenes{
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      --stagger:600ms;      /* gap between character and flag */
      --land-out:800ms;     /* how long the landmark takes to drop */
    }
    .scene{position:absolute;inset:0}
  
    .scene-char{
      position:absolute;
      left:0;
      bottom:-36px;
      width:clamp(200px,24vw,320px);
      height:clamp(600px,100vh,1000px);
      border-radius:var(--r-card);
      opacity:0;
      transform:translateY(16px);
      transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1);
      transition-delay:0ms;
    }
    .scene-flag{
      position:absolute;
      left:calc(clamp(0px,20vw,160px) + clamp(150px,17vw,280px) + clamp(12px,1.6vw,28px));
      bottom:clamp(400px,60vh,600px);
      width:clamp(100px,10vw,160px);
      height:clamp(100px,10vw,160px);
      border-radius:50%;
      opacity:0;
      transform:scale(0.88);
      transition:opacity 500ms ease, transform 500ms cubic-bezier(.2,.7,.2,1);
      transition-delay:var(--stagger);
      animation:floatAnimation 3s ease-in-out infinite; 
    }
  
    @keyframes floatAnimation {
      0% {
        transform: translateY(0px);
        transform: translateX(0px);
        /*Use this -> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); when you want to add show */
      }
      50% {
        /* Moves the element up by 15 pixels */
        transform: translateY(-15px);
        /* Softens and grows the shadow to look further away */
      }
      100% {
        transform: translateY(0px);
        transform: translateX(0px);
      }
    }
    .scene-landmark{
      position:absolute;
      right:0;
      bottom:-40px;
      width:clamp(220px,60vw,900px);
      height:clamp(400px,80vh,900px);
      border-radius:var(--r-card) 0 0 0;
      transform:translateY(106%);
      transition:transform var(--land-out) cubic-bezier(.4,0,.2,1);
      transition-delay:0ms;
    }
  
    .scene.is-active .scene-char{opacity:1;transform:none;transition-delay:0ms}
    .scene.is-active .scene-flag{opacity:1;transform:none;transition-delay:var(--stagger)}
    /* waits for the outgoing landmark to clear before rising */
    .scene.is-active .scene-landmark{transform:none;transition-delay:var(--land-out)}
    
    .cards{grid-area:1 / 1;position:relative;width:min(560px,100%);height:1px;z-index:3}
    .card{
      position:absolute;
      left:0;
      right:0;
      top:0;
      background:var(--white);
      border-radius:var(--r-card);
      padding:clamp(28px,3vw,48px);
      box-shadow:0 30px 70px rgba(28,35,64,.12);
      transform-origin:50% 0;
      will-change:transform,opacity,filter;
    }
    .card h2{font-size:clamp(28px,3.2vw,46px)}
    .card p{margin:20px 0 28px}
    
    /* =========================================================
       HOW IT WORKS PAGE  (how-it-works.html)
       Built from the brand system: periwinkle for the hero field,
       green for the ribbon and nothing else, coral for the warm
       moment (the testimonials), white cards with the system's card
       shadow, navy text, title case.
  
         1. hero          peri panel, one screen, ribbon draws on load
         2. clients       a horizontal ribbon carrying the logos
         3. why           three tinted cards, 90vh
         4. how it works  the five steps, zig-zag
         5. testimonials  coral panel, white text, placeholder quotes
         6. countries     eight country cards, the handoff
       ========================================================= */
  
    .hw-inner{
      max-width:calc(1200px + 2 * var(--pad));
      margin:0 auto;
      padding:0 var(--pad);
    }
    /* section headings: the system's Heading size */
    .hw-why h2,.hw-steps h2,.hw-voices h2,.hw-countries h2{
      font-size:clamp(32px,3.4vw,48px);
      line-height:1.1;
    }
    /* step and card numbers: navy, quiet. Violet is kept for the
       wordmark and primary actions, as the system says. */
    .hw-num{
      display:block;
      font-weight:600;
      font-size:15px;
      letter-spacing:.04em;
      opacity:.45;
      margin-bottom:10px;
    }
    /* h3 is not in the global h1,h2 rule, so this page sets it */
    .hw-why h3,.how-card h3{font-weight:700;line-height:1.1;letter-spacing:-0.015em}
  
    /* ---- 1. hero ----
       Framed by the gutter like the homepage hero. The ribbon behind is
       an SVG drawn by script.js (HOW IT WORKS PAGE); this only places it. */
    .hw-hero{
      position:relative;
      margin:var(--gutter);
      min-height:calc(100svh - 2 * var(--gutter));
      background:var(--peri);
      border-radius:var(--r-hero);
      overflow:hidden;
      display:grid;
      place-items:center;
      padding:calc(var(--pad) + var(--nav-h)) var(--pad) var(--pad);
    }
    .hw-hero-ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:0}
    .hw-hero-ribbon path,
    .hw-band-ribbon path{
      fill:none;
      stroke:var(--green);
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .hw-hero-copy{position:relative;z-index:1;text-align:center}
  
    /* the video version (How It Works). Layers, back to front: video,
       tint, ribbon, title. HERO TINT: --hero-shade. For the brand's
       periwinkle field instead of video-dark, swap the tint for a
       periwinkle at about .7 and set the title back to navy. */
    .hw-hero--video{--hero-shade:rgba(28,35,64,.45);background:var(--navy)}
    .hw-hero-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:0;
    }
    .hw-hero-shade{position:absolute;inset:0;background:var(--hero-shade);z-index:0}
    .hw-hero--video .hw-hero-ribbon{z-index:0}
    .hw-hero--video .hw-hero-copy{color:var(--white)}
    /* the system's Display size */
    .hw-hero h1{font-size:clamp(44px,6vw,86px);line-height:1.05}
    .hw-hero p{font-size:clamp(18px,1.7vw,24px);margin-top:clamp(16px,2vw,28px)}
  
    /* ---- 2. clients ----
       The section is the ribbon: no ground of its own showing. The
       ribbon is drawn thicker than the section is tall, so its wavy top
       edge tucks under the hero panel (which sits above it) and nothing
       of the page ground shows between them. */
    .hw-clients{
      position:relative;
      z-index:1;
      height:clamp(240px,24vw,340px);
      margin-top:calc(-1 * var(--gutter));   /* close the hero's bottom gutter */
      overflow-x:clip;   /* the ribbon's ends run off screen without a sideways scroll */
      /* flex, not grid: a grid column would grow to the full width of
         the moving row (two lists long) and push the label off centre */
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .hw-hero{z-index:2}
    .hw-band-ribbon{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  
    /* label and logos sit on the ribbon. The script clips this box to
       the part of the ribbon already drawn, so they appear as it passes. */
    .hw-band-content{
      position:relative;
      width:100%;
      clip-path:inset(0 100% 0 0);
    }
    .hw-clients-label{
      text-align:center;
      font-weight:600;
      font-size:clamp(14px,1.15vw,18px);
      margin-bottom:clamp(16px,2vw,28px);
    }
  
    /* The moving row. The track holds the list twice, side by side, and
       slides right by exactly one list's width, then starts again: since
       the second copy is identical, the jump can't be seen.
       MARQUEE SPEED: the 40s below is one full loop. Lower is faster. */
    .hw-marquee{overflow:hidden}
    .hw-marquee-track{
      display:flex;
      width:max-content;
      animation:hw-marquee 40s linear infinite;
    }
    @keyframes hw-marquee{
      from{transform:translateX(-50%)}   /* start one list to the left... */
      to{transform:translateX(0)}        /* ...and move right: left to right */
    }
    .hw-logos{
      display:flex;
      align-items:center;
      gap:clamp(56px,7vw,120px);
      padding-right:clamp(56px,7vw,120px);   /* the same gap at the seam */
      list-style:none;
    }
    .hw-logos img{
      height:clamp(24px,2.5vw,36px);
      width:auto;
      display:block;
      filter:brightness(0);   /* one dark tone on the green */
      opacity:.8;
    }
    @media (prefers-reduced-motion:reduce){
      .hw-marquee-track{animation:none}
    }
  
    /* ---- 3. why ----
       The cards run the full width of the screen, inside the same
       gutter as the panels; the heading sits centred above them. */
    .hw-why{
      position:relative;
      z-index:2;   /* above the clients ribbon's lower edge */
      min-height:90vh;
      padding:clamp(40px,5vw,80px) var(--gutter);
      display:flex;
      flex-direction:column;
    }
    .hw-why h2{text-align:center}
    /* lift the page's 1200px cap so the cards reach the gutters */
    .hw-why .hw-inner{max-width:none;padding:0;flex:1;display:flex;flex-direction:column;width:100%}
    .hw-why-cards{
      flex:1;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:var(--gutter);
      margin-top:clamp(32px,4vw,56px);
    }
    .hw-why-card{min-height:clamp(420px,60vh,720px)}
  
    /* ---- 4. how it works ---- */
    /* The section is its own panel. Change --steps-bg and --steps-ink
       to try another ground; the label border follows the ink. */
    .hw-steps{
      --steps-bg:var(--navy);
      --steps-ink:var(--white);
      margin:0 var(--gutter);
      background:var(--cream);
      color:var(--navy);
      border-radius:var(--r-hero);
      padding:0 0 clamp(80px,10vw,160px);
      /* no overflow:hidden here: it would stop the intro from pinning.
         The ribbon is clipped by .hw-path-clip instead. */
    }
    .hw-steps-head{text-align:center}
  
    /* ---- the pinned intro ----
       Default (no JS, or reduced motion): a plain stack, title then a
       framed video with the overview on it.
       .is-pinned (added by script.js): the intro becomes tall, the stage
       sticks to the screen, and the script drives the video window, the
       shade and the words from how far you've scrolled through it.
       INTRO LENGTH: --intro-scroll is how much scrolling the pinned part
       takes. Longer feels slower and more cinematic, shorter snappier. */
    .hw-intro{
      --intro-scroll:240svh;
      /* above the steps' ribbon, so the ribbon starts out from under the video */
      position:relative;
      z-index:2;
    }
    .hw-intro-stage{
      padding-top:clamp(80px,10vw,160px);
    }
    .hw-video{
      position:relative;
      width:80%;
      margin:clamp(40px,5vw,72px) auto 0;
      aspect-ratio:16 / 9;
      border-radius:var(--r-photo);
      overflow:hidden;
      display:grid;
      place-items:center;
      background:var(--navy);
    }
    .hw-video-media{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    /* the navy layer that keeps the white text readable on the video */
    .hw-video-shade{
      position:absolute;
      inset:0;
      background:var(--navy);
      opacity:.6;
    }
    .hw-overview{
      position:relative;
      max-width:26ch;
      padding:0 var(--pad);
      text-align:center;
      color:var(--white);
      font-weight:600;
      font-size:clamp(24px,3.2vw,50px);
      line-height:1.18;
      letter-spacing:-0.015em;
    }
  
    /* pinned mode */
    .hw-intro.is-pinned{
      height:calc(100svh + var(--intro-scroll));
      /* reach past the panel's gutter so "full screen" is really the screen */
      margin:0 calc(-1 * var(--gutter));
    }
    .is-pinned .hw-intro-stage{
      position:sticky;
      top:0;
      height:100svh;
      padding-top:0;
      overflow:hidden;
    }
    .is-pinned .hw-steps-head{
      position:absolute;
      left:0;
      right:0;
      top:calc(var(--nav-h) + clamp(28px,6vh,72px));
      z-index:3;
    }
    /* the video fills the stage; the script cuts the visible window out
       of it with clip-path, from framed to full screen */
    .is-pinned .hw-video{
      position:absolute;
      inset:0;
      width:auto;
      margin:0;
      aspect-ratio:auto;
      border-radius:0;
      z-index:2;
    }
    .is-pinned .hw-video-shade{opacity:0}
    .is-pinned .hw-word{opacity:.2}
  
    /* the steps' ribbon may swing past the panel's sides: clip it there
       sideways only, so its start can still hide under the video above */
    .hw-path-clip{overflow-x:clip}
    .how-label{
      display:inline-block;
      margin-top:20px;
      border:1px solid color-mix(in srgb, currentColor 35%, transparent);
      border-radius:999px;
      padding:7px 16px;
      font-size:14px;
    }
  
    /* The steps and their ribbon. The ribbon is an SVG the size of this
       box, drawn by script.js; it sits behind the cards. */
    .hw-path{position:relative;padding-top:clamp(56px,7vw,110px)}
    .hw-path-ribbon{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      overflow:visible;
      pointer-events:none;
      z-index:0;
    }
    .hw-path-ribbon path{
      fill:none;
      stroke:var(--green);
      stroke-linecap:round;
      stroke-linejoin:round;
    }
  
    /* ol, not ul: the steps are a sequence, and an ordered list says so
       to a screen reader. The global reset only clears ul bullets. */
    .how-steps{
      position:relative;
      z-index:1;
      list-style:none;
      display:grid;
      gap:clamp(32px,5vw,80px);
    }
    /* The zig-zag: each row is two columns, the card takes one and the
       other is left empty for the ribbon. Every second row swaps. */
    .how-step{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      column-gap:clamp(32px,6vw,110px);
    }
    .how-card{grid-column:1;align-self:start}
    .how-step:nth-child(even) .how-card{grid-column:2}
  
    /* ---- the step card ----
       Two parts on one tinted card: the step on a photo (.ph-card), and
       under it a strip of the card's tint. A beat after the ribbon brings
       the card in, the strip opens downward to show her moment
       (.is-open, added by script.js; OPEN_DELAY there).
       The strip opens with the grid-rows trick: a one-row grid going
       from 0fr to 1fr animates to the content's real height, which a
       height transition cannot do. */
    .how-card{
      position:relative;
      background:var(--card-bg);
      color:var(--card-ink);
      border-radius:var(--r-card);
      overflow:hidden;
      transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1);
    }
    .how-photo{aspect-ratio:5 / 6;border-radius:var(--r-card)}
    .how-photo:hover{transform:none !important;box-shadow:none !important}   /* the whole card lifts, not the photo inside */
    .how-card .ph-card-body h3{font-size:clamp(30px,3vw,48px)}
  
    .how-her{
      display:grid;
      grid-template-rows:0fr;
      padding-bottom:16px;   /* THE LIP: how much tint shows under the photo while closed */
      transition:grid-template-rows .7s cubic-bezier(.2,.7,.2,1);
    }
    .how-card.is-open .how-her{grid-template-rows:1fr}
    .how-her-inner{
      overflow:hidden;
      min-height:0;
      padding:0 clamp(24px,3vw,48px);
    }
    .how-card .how-when{
      display:block;
      margin-top:clamp(18px,2vw,26px);
      font-weight:700;
      font-size:clamp(18px,1.5vw,22px);
      letter-spacing:.02em;
      text-transform:uppercase;
    }
    .how-card .how-when::before{content:none}
    .how-card .how-moment{
      margin:8px 0 clamp(10px,1.4vw,18px);
      font-weight:600;
      font-size:clamp(15px,1.15vw,17px);
      line-height:1.5;
      max-width:44ch;
      opacity:0;
      transition:opacity .4s ease .25s;
    }
    .how-card.is-open .how-moment{opacity:1}
    .how-when{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:600;
      font-size:15px;
    }
    /* the green dot is a stop on the ribbon */
    .how-when::before{
      content:"";
      width:14px;
      height:14px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 0 5px rgba(150,226,84,.3);
    }
    .how-moment{margin-top:8px;font-weight:500}
  
    /* ---- the tinted card (why + her moments) ----
       One accent per card, the same idea as the homepage cards: a light
       tint for the ground and a deep shade of the same hue for all the
       text, so each card reads as one colour. Green stays out: it is
       the ribbon's. Every ink passes 4.5:1 on its tint.
       To add a tone, copy a .t-* line and set the three values. */
    .t-coral{--card-bg:#FCD9CF;--card-ink:#A8361C;--card-media:#F8B4A2}
    .t-amber{--card-bg:#FCE9BC;--card-ink:#6E4700;--card-media:#F5D58A}
    .t-blue {--card-bg:#DCE5FB;--card-ink:#24408A;--card-media:#B9CBF3}
    .t-teal {--card-bg:#D3EAE6;--card-ink:#1D5A51;--card-media:#A9D4CD}
  
    .hw-card{
      display:flex;
      flex-direction:column;
      gap:clamp(20px,2vw,28px);
      background:var(--card-bg,var(--white));
      color:var(--card-ink,var(--navy));
      border-radius:var(--r-card);
      padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(26px,2.6vw,40px);
  
      /* Micro interaction: on hover the card lifts and tilts a little.
         The easing is the site's ease-out; the shadow grows with the
         lift so it reads as height, not just movement. */
      transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s cubic-bezier(.2,.7,.2,1);
    }
    .hw-card > :not(.hw-media){padding:0 clamp(4px,.6vw,10px)}
  
    /* The image slot. Photos are still open in the system, so this is a
       placeholder in a deeper tint. To use a photo, put an <img> inside
       .hw-media and delete the <span>. */
    .hw-media{
      aspect-ratio:16 / 10;
      border-radius:calc(var(--r-card) - 10px);
      background:var(--card-media,var(--placeholder));
      overflow:hidden;
      display:grid;
      place-items:center;
    }
    .hw-media img{width:100%;height:100%;object-fit:cover;display:block}
    .hw-media span{font-size:13px;opacity:.6}
  
    /* hover only on devices that really hover, so a tap on a phone
       doesn't leave a card stuck tilted */
    @media (hover:hover){
      .hw-card:hover{
        transform:translateY(-10px) rotate(-1.5deg);
        box-shadow:0 30px 60px rgba(28,35,64,.16);
      }
      /* every second card tilts the other way, so a row doesn't lean */
      .hw-why-card:nth-child(even):hover,
      .how-step:nth-child(even) .how-card:hover{
        transform:translateY(-10px) rotate(1.5deg);
      }
      .how-step:nth-child(odd) .how-card:hover{transform:translateY(-10px) rotate(-1.5deg)}
      .how-step .how-card:hover{box-shadow:0 30px 60px rgba(28,35,64,.22)}
    }
    @media (prefers-reduced-motion:reduce){
      .hw-card{transition:box-shadow .2s ease}
      .hw-card:hover{transform:none}
      .hw-why-card:nth-child(even):hover,
      .how-step .how-card:hover{transform:none}
      .how-her,.how-card .how-moment{transition:none}
    }
  
    /* ---- the photo card (.ph-card) ----
       The picture fills the card; a dark fade rises from the bottom and
       the words sit on it in white. Used by the Why cards (How It Works)
       and the first-months row (France).
       FADE STRENGTH: the gradient in .ph-card::after. Until real photos
       are in, the slot is a dark neutral so the white text still reads. */
    .ph-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--r-card);
      background:#3A3F55;
      color:var(--white);
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      isolation:isolate;
      transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1);
    }
    .ph-card-media{
      position:absolute;
      inset:0;
      z-index:-2;
      display:grid;
      place-items:center;
      background:linear-gradient(160deg,#5A6078,#2A2F44);
    }
    .ph-card-media img{
      width:100%;height:100%;object-fit:cover;display:block;
      transition:transform .8s cubic-bezier(.2,.7,.2,1);
    }
    .ph-card-media span{font-size:13px;opacity:.55;transform:translateY(-40px)}
    .ph-card::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:linear-gradient(to top, rgba(28,35,64,.88) 0%, rgba(28,35,64,.55) 35%, rgba(28,35,64,0) 65%);
      pointer-events:none;
    }
    .ph-card-body{padding:clamp(24px,3vw,48px)}
    .ph-card-body h3{
      font-size:clamp(30px,3.2vw,52px);
      line-height:1.02;
      letter-spacing:-0.02em;
    }
    .ph-card-body p{margin-top:clamp(12px,1.4vw,20px);font-size:clamp(16px,1.25vw,19px);line-height:1.5;max-width:38ch}
    .ph-card .how-when{color:var(--white)}
  
    /* the same lift and tilt as the tinted cards, plus a slow zoom of the photo */
    @media (hover:hover){
      .ph-card:hover{transform:translateY(-10px) rotate(-1.5deg);box-shadow:0 30px 60px rgba(28,35,64,.22)}
      .ph-card:nth-child(even):hover{transform:translateY(-10px) rotate(1.5deg)}
      .ph-card:hover .ph-card-media img{transform:scale(1.05)}
    }
    @media (prefers-reduced-motion:reduce){
      .ph-card,.ph-card:hover,.ph-card:nth-child(even):hover{transform:none}
    }
  
    /* ---- scroll reveal ----
       script.js adds .rv to each element it will reveal, then .in once
       the element comes into view. It never removes .in, so nothing
       plays twice. Uses `translate`, not `transform`, so it doesn't
       fight the cards' hover tilt, which uses transform.
       --rv-delay staggers elements that sit side by side. */
    .rv{
      opacity:0;
      translate:0 32px;
      transition:
        opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0ms),
        translate .9s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0ms);
    }
    .rv.in{opacity:1;translate:0 0}
    /* elements that already had a transition need both lists in one */
    .hw-card.rv,
    .ph-card.rv,
    .how-card.rv,
    .hw-country-grid a.rv{
      transition:
        opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0ms),
        translate .9s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0ms),
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s cubic-bezier(.2,.7,.2,1),
        background-color .25s ease,
        color .2s ease;
    }
    @media (prefers-reduced-motion:reduce){
      .rv{opacity:1;translate:none}
    }
  
    /* ---- 5. testimonials ----
       Coral is the system's colour for warm moments, and white text on
       coral is a recorded decision (APCA, not WCAG 2). */
    .hw-voices{
      margin:0 var(--gutter);
      background:var(--coral);
      color:var(--white);
      border-radius:var(--r-hero);
      padding:clamp(64px,8vw,130px) 0;
    }
    .hw-voice-cards{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:clamp(16px,2vw,28px);
      margin-top:clamp(32px,4vw,56px);
    }
    .hw-voice{
      background:var(--white);
      color:var(--navy);
      border-radius:var(--r-card);
      padding:clamp(26px,2.6vw,40px);
      display:flex;
      flex-direction:column;
      gap:24px;
    }
    .hw-voice blockquote{font-size:clamp(18px,1.5vw,21px);line-height:1.45;flex:1}
    .hw-voice figcaption{font-size:14px;opacity:.7}
    .hw-voice figcaption strong{display:block;font-weight:600;font-size:16px;opacity:1}
    .hw-ph-tag{
      align-self:flex-start;
      border:1px dashed rgba(28,35,64,.35);
      border-radius:999px;
      padding:4px 12px;
      font-size:12px;
    }
  
    /* ---- 6. countries ---- */
    /* SECTION HEIGHT: min-height. GLOBE SIZE: --globe (its width).
       The globe sits on the bottom edge, pushed down by half its own
       height so only the top half shows; --rise (set by script.js, 1 to
       0) pushes it further down while the section comes into view. */
    /* pinned: it stays put while the footer (above it, z-index 2) slides
       over it. The pin needs .hw-tail around the two in the HTML. */
    .hw-countries{
      --globe:70vw;
      position:sticky;
      top:0;
      z-index:0;
      min-height:100vh;
      overflow:hidden;
      padding:clamp(72px,9vw,140px) 0 calc(var(--globe) * .38 * .55);
      text-align:center;
    }
    .hw-countries-copy{position:relative;z-index:1}
    .hw-countries-intro{margin:16px auto 0;max-width:46ch;opacity:.8}
    .hw-countries .hw-country-grid{max-width:1100px;margin-left:auto;margin-right:auto}
    .hw-globe-wrap{
      position:absolute;
      left:50%;
      bottom:0;
      width:var(--globe);
      aspect-ratio:1;
      /* GLOBE HEIGHT: the first % is how far down it rests (50% = half showing, higher = lower) */
      transform:translate(-50%, calc(62% + var(--rise, 0) * 50%));
      pointer-events:none;
    }
    .hw-globe{display:block;width:100%;height:100%}
    /* The country pills: the homepage's size and pill shape, the How It
       Works look (white, flag inside, navy text, lift on hover). On
       hover they take the homepage's coral and white.
       PILL SIZE: --pill-pad-y and --pill-font, the same values as the
       homepage pills; the flag is sized from them so they never drift. */
    .hw-country-grid{
      --pill-pad-y:clamp(12px,1.4vw,22px);
      --pill-font:clamp(16px,1.7vw,26px);
      --pill-h:calc(2 * var(--pill-pad-y) + var(--pill-font) * 1.1);
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:clamp(10px,1.2vw,18px);
      margin-top:clamp(32px,4vw,56px);
    }
    .hw-country-grid a{
      display:inline-flex;
      align-items:center;
      gap:clamp(10px,1vw,16px);
      background:var(--white);
      color:var(--navy);
      border-radius:999px;
      padding:calc(var(--pill-pad-y) * .5) clamp(22px,2.6vw,44px) calc(var(--pill-pad-y) * .5) calc(var(--pill-pad-y) * .5);
      font-weight:600;
      font-size:var(--pill-font);
      line-height:1.1;
      transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background-color .25s ease, color .2s ease;
    }
    .hw-country-grid a:hover,
    .hw-country-grid a:focus-visible{
      transform:translateY(-3px);
      box-shadow:0 24px 60px rgba(28,35,64,.14);
      background:var(--coral);
      color:var(--white);
    }
    /* the flag fills the pill's height, inside its padding */
    .hw-country-grid img{
      width:calc(var(--pill-h) - var(--pill-pad-y));
      height:calc(var(--pill-h) - var(--pill-pad-y));
      border-radius:50%;
      flex:none;
    }
  
    /* =========================================================
       3. LOCATIONS
       The stage is one screen. The tall wrapper only exists to
       give the zoom-out and the pills room to play out.
       ========================================================= */
    
    .locations{
      position:relative;
      z-index:1;
      height:420vh;   /* longer, because the closing section overlaps its last screen */
      background:var(--offwhite);
      border-radius:var(--r-hero) var(--r-hero) 0 0;
    }
    .loc-sticky{position:sticky;top:0;height:100vh;z-index:2}
    /* The heading, the globe and the pills each get their own band
       of the screen instead of being stacked in one centred grid
       area, which is what made the globe sit on the heading.
       Everything below is measured from these four values. */
    .loc-stage{
      position:relative;
      height:100%;
      overflow:hidden;
  
      --loc-top:calc(var(--nav-h) + clamp(24px,5vh,64px));  /* clears the fixed nav */
      --loc-head-h:clamp(110px,15vh,170px);                 /* space reserved for the heading */
      --loc-gap:clamp(20px,1vh,36px);                       /* heading to globe */
      --loc-bottom:clamp(20px,4vh,48px);
      --loc-globe-top:calc(var(--loc-top) + var(--loc-head-h) + var(--loc-gap));
    }
    
    .loc-head{
      position:absolute;
      top:var(--loc-top);
      left:0;
      right:0;
      z-index:1;
      margin:0;
      text-align:center;
      font-size:clamp(28px,3.6vw,56px);
      line-height:1.1;
    }
    
    /* Top and bottom are pinned, so the height is whatever is left
       between the heading and the floor. aspect-ratio turns that into
       the width, so the globe fills its band without ever reaching
       the heading. */
    .globe{
      position:absolute;
      top:var(--loc-globe-top);
      left:50%;
      transform:translateX(-50%);
      z-index:2;
  
      /* The height is what is left between the heading and the floor,
         written out rather than implied by top and bottom: with only
         left set, the element shrink-wraps and the aspect ratio decides
         the size instead, which ignores the band entirely. */
      height:calc(100% - var(--loc-globe-top) - var(--loc-bottom));
      max-height:88vw;
      width:auto;
      aspect-ratio:1;
  
      overflow:visible;
      will-change:transform;
    }
    .globe-body{fill:#0B0F1C}
    .dots{fill:#9FB4E8}
    .dots-far{opacity:.07}   /* ocean: just enough to read as a sphere */
    .dots-near{opacity:.95}
    .orbit{
      fill:none;
      stroke:var(--green);
      stroke-width:60;
      stroke-linecap:round;
    }
    
    /* absolute, not a grid item: the rows are deliberately wider
       than the screen and would otherwise stretch the stage and
       push the globe off centre */
    /* Sits in the same band as the globe, so the rows land across it
       rather than across the heading. */
    .pills{
      position:absolute;
      top:var(--loc-globe-top);
      bottom:var(--loc-bottom);
      left:0;
      right:0;
      z-index:3;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:clamp(10px,1.4vw,20px);
      pointer-events:none;
    }
    .pill-row{
      display:flex;
      justify-content:center;
      gap:clamp(10px,1.4vw,20px);
      white-space:nowrap;
    }
    /* A flag circle and its pill, wrapped as one. The wrapper is what
       the script animates, so they arrive together. */
    .pill-item{
      display:inline-flex;
      align-items:center;
      gap:clamp(8px,0.9vw,16px);
      will-change:transform,opacity;
  
      /* One height, shared. The pill is built from these and the flag
         is sized to the result, so the two can never drift apart.
         Do not size the flag from the SVG itself: its intrinsic 512px
         wins the sizing race and stretches the whole row. */
      --pill-pad-y:clamp(14px,2vw,30px);
      --pill-font:clamp(16px,2vw,30px);
      --pill-h:calc(2 * var(--pill-pad-y) + var(--pill-font) * 1.1);
    }
  
    .flag{
      width:var(--pill-h);
      height:var(--pill-h);
      flex:none;
      border-radius:50%;
      display:block;
      background:var(--white);
      box-shadow:0 3px 12px rgba(28,35,64,.14);
    }
  
    .pill{
      background:var(--coral);
      color:var(--white);
      border-radius:999px;
      padding:var(--pill-pad-y) clamp(24px,3.2vw,54px);
      font-weight:600;
      font-size:var(--pill-font);
      line-height:1.1;
    }
    /* The How It Works look at the homepage size: one white pill with
       the flag inside on the left and navy text. On hover it lifts and
       takes coral. The size still comes from --pill-pad-y and
       --pill-font on .pill-item, so the overall height is unchanged.
       The lift uses `translate`, not `transform`: the script animates
       transform for the fly-in, and the two would fight. */
    .pills .pill-item{
      background:var(--white);
      border-radius:999px;
      padding:calc(var(--pill-pad-y) * .5) clamp(22px,2.6vw,44px) calc(var(--pill-pad-y) * .5) calc(var(--pill-pad-y) * .5);
      box-shadow:0 3px 12px rgba(28,35,64,.10);
      pointer-events:auto;   /* the row ignores the mouse; the pills take it */
      transition:translate .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background-color .25s ease;
    }
    .pills .flag{
      width:calc(var(--pill-h) - var(--pill-pad-y));
      height:calc(var(--pill-h) - var(--pill-pad-y));
      box-shadow:none;
    }
    .pills .pill{background:none;color:var(--navy);padding:0;transition:color .2s ease}
    .pills .pill-item:hover{
      translate:0 -3px;
      background:var(--coral);
      box-shadow:0 24px 60px rgba(28,35,64,.14);
    }
    .pills .pill-item:hover .pill{color:var(--white)}
  
    
  
    /* =========================================================
       4. CLOSING
       Rides up over the locations section, then pins. While it is
       pinned the photo settles from a slight zoom and the line and
       button rise in over it. The tall section only exists to give
       that room to play out.
       ========================================================= */
  
    .closing{
      position:relative;
      z-index:2;                 /* above locations, so it rides over it */
      height:210vh;
      margin-top:-100vh;         /* starts overlapping one screen early */
    }
    .closing-sticky{
      position:sticky;
      top:0;
      height:100vh;
      /* off-white, the same as locations above and the Q&A below, so the
         photo's rounded corners reveal a matching colour at both ends */
      background:var(--offwhite);
    }
  
    .closing-photo{
      position:relative;
      width:100%;
      height:100vh;
      overflow:hidden;
      border-radius:var(--r-hero);
    }
  
    /* The zoom is applied to this, the container above does the
       cropping, so the photo never shows an edge as it scales. */
    .closing-image{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transform-origin:50% 60%;
      will-change:transform;
    }
  
    .closing-scrim{
      position:absolute;
      inset:0;
      pointer-events:none;
      /* flat navy at 35%: lower keeps the photo lively,
         higher gives white text more security over a bright sky */
      background:rgba(28,35,64,.35);
    }
  
    /* Fills the photo and centres its contents both ways. Flexbox rather
       than top:50% plus translateY, because the script sets this
       element's transform on every scroll frame for the rise and would
       overwrite a centring transform. */
    .closing-copy{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:0 clamp(24px,5vw,96px);
      will-change:transform,opacity;
    }
    .closing-copy h2{
      color:var(--white);
      font-weight:600;
      font-size:clamp(30px,4.4vw,68px);
      line-height:1.04;
      letter-spacing:-0.02em;
      max-width:18ch;
      text-wrap:balance;
      margin-bottom:clamp(20px,3vh,36px);
    }
  
    /* =========================================================
       5. Q&A
       ========================================================= */
    
    .qa{
      position:relative;
      z-index:1;
      background:var(--offwhite);
      padding:clamp(80px,10vw,160px) 0;
    }
    .qa-inner{
      position:relative;
      z-index:2;
      max-width:calc(1100px + 2 * var(--pad));
      margin:0 auto;
      padding:0 var(--pad);
    }
    .qa-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:32px;
      flex-wrap:wrap;
      margin-bottom:clamp(40px,5vw,72px);
    }
    .qa-head h2{font-size:clamp(34px,4.6vw,66px);max-width:16ch}
    .qa-head p{font-size:16px;opacity:.65;text-align:right}
    .qa-head a{text-decoration:underline}
    
    .qa-list details{border-top:1px solid rgba(28,35,64,.16)}
    .qa-list details:last-child{border-bottom:1px solid rgba(28,35,64,.16)}
    .qa-list summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      padding:clamp(20px,2.4vw,30px) 0;
      font-size:clamp(18px,2vw,26px);
    }
    .qa-list summary::-webkit-details-marker{display:none}
    .qa-list summary::after{
      content:"";
      flex:none;
      width:22px;
      height:22px;
      background:
        linear-gradient(var(--navy),var(--navy)) center/22px 2px no-repeat,
        linear-gradient(var(--navy),var(--navy)) center/2px 22px no-repeat;
      transition:transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .qa-list details[open] summary::after{transform:rotate(45deg)}
    .qa-list summary:hover{opacity:.7}
    .qa-body{padding:0 clamp(0px,6vw,90px) clamp(24px,2.6vw,34px) 0}
    .qa-body p{font-size:17px;opacity:.75;max-width:70ch}
    
    /* =========================================================
       6. FOOTER
       Top: statement and buttons left, a 9:16 vertical photo right.
       Bottom: logo in a narrow column, then three link columns.
       Grows past one screen when it needs to.
       ========================================================= */
  
    /* ---- pinned last section (.pin-end) ----
       The section just before the footer stays put while the footer
       slides over it. script.js sets its `top` so a section taller than
       the screen first scrolls to its own bottom, then pins: nothing in
       it gets covered before it has been seen. Needs the section and the
       footer inside one wrapper (.hw-tail / .pin-tail). */
    .pin-end,
    .qa.pin-end{position:sticky;top:0;z-index:0}
  
    .foot{
      position:relative;
      z-index:2;   /* above the pinned section before it */
      background:var(--offwhite);
      padding-bottom:var(--gutter);
    }
    .foot-panel{
      position:relative;
      margin:0 var(--gutter);
      background:var(--peri);
      border-radius:var(--r-hero);
      padding:clamp(28px,4vw,64px);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap:clamp(40px,6vh,88px);
    }
  
    /* top zone */
    .foot-body{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,clamp(240px,34vw,560px));
      gap:clamp(32px,4vw,72px);
      align-items:stretch;
    }
    .foot-copy{
      align-self:center;
      padding:clamp(20px,4vh,64px) 0;
    }
    .foot-statement{
      font-weight:600;
      font-size:clamp(38px,4.6vw,72px);
      line-height:1.0;
      letter-spacing:-0.02em;
      max-width:14ch;
    }
    .foot-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
  
    /* the 9:16 vertical photo, filling the top zone's height */
    /* The width fills the column. The height is pinned to exactly what
       it was before, so widening the photo cannot change the footer's
       height. No aspect-ratio: that is what tied the two together. */
    .foot-media{
      width:100%;
      height:clamp(391px,46.22vw,604px);
      border-radius:var(--r-photo);
      object-fit:cover;
      object-position:center;
    }
  
    /* bottom zone: narrow logo column, then the link columns */
    .foot-bottom{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:minmax(0,auto) minmax(0,1fr);
      gap:clamp(32px,5vw,96px);
      align-items:start;
      padding-top:clamp(28px,4vh,48px);
      border-top:1px solid rgba(28,35,64,.18);
    }
    .foot-brand{display:inline-flex}
    .foot-brand .mark{height:32px;width:auto}
  
    .foot-nav{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);
      gap:clamp(24px,3vw,56px);
    }
    .foot-col h3{
      font-size:clamp(14px,1.05vw,17px);
      font-weight:600;
      margin-bottom:clamp(12px,1.6vh,20px);
    }
    .foot-col ul{display:grid;gap:clamp(7px,1vh,12px)}
    .foot-col a{
      font-size:clamp(14px,1.05vw,16px);
      opacity:.72;
      transition:opacity .2s ease;
    }
    .foot-col a:hover{opacity:1;text-decoration:underline}
  
    .foot-countries{
      grid-auto-flow:column;
      grid-template-rows:repeat(4,auto);
      column-gap:clamp(20px,2.4vw,44px);
    }
    .foot-countries a{display:inline-flex;align-items:center;gap:10px}
    .foot-flag{width:1.35em;height:1.35em;border-radius:50%;flex:none}
  
    /* =========================================================
       THE RIBBON
       #ribbon is the page-level path. Each .ribbon-layer is a
       synced copy, clipped by a section that has its own
       background and would otherwise cover it.
       ========================================================= */
    
    #ribbon,
    .ribbon-layer{
      position:absolute;
      top:0;
      left:0;
      pointer-events:none;
      overflow:visible;
      z-index:0;
    }
    /* The page-level path is never painted: every section is opaque
       and carries its own clipped copy. It exists only to be measured,
       so it is collapsed to nothing. Giving it a real height made the
       page grow on every rebuild, because its height was taken from
       the document height it was itself part of. */
    #ribbon{width:0;height:0;overflow:hidden}
    
    /* Each copy is the full height of the document, so it has to be
       clipped to its own section or it paints over the neighbours.
       The clip is a sibling of the content, so it does not interfere
       with the sticky positioning inside. */
    .ribbon-clip{
      position:absolute;
      inset:0;
      overflow:hidden;
      pointer-events:none;
      z-index:0;
      border-radius:inherit;
    }
  
    /*.hero .ribbon-clip{
      -webkit-mask-image:radial-gradient(circle 340px at 14% 86%, transparent 25%, #000 100%);
              mask-image:radial-gradient(circle 340px at 14% 86%, transparent 25%, #000 100%);
    }*/
  
    /* ---- ribbon shading ----
       A darker tone below and a lighter one above, both of the same
       green, offset along one light direction. Lit from the upper left.
       Tones only, no black: the shade is a deeper green, so it stays
       inside the palette. */
    :root{
      --green-shade:#7FBE56;
      --green-light:#CDEEA9;
    }
    #ribbon .ribbon-shade,
    .ribbon-layer .ribbon-shade{stroke:var(--green-shade)}
    #ribbon .ribbon-light,
    .ribbon-layer .ribbon-light{stroke:var(--green-light);opacity:.85}
  
    /* The band colours are set in the script, mixed between the deep
       green, the base and the pale one. Tones only, no black, so the
       shading stays inside the palette. */
    #ribbon path,
    .ribbon-layer path{
      fill:none;
      stroke:var(--green);
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    
    /* =========================================================
       PAGE TRANSITION
       The ribbon between pages. script.js (PAGE TRANSITION) draws it;
       this only positions it above everything, intro included.
       ========================================================= */
  
    .rt{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index:3000;
    }
    .rt path{fill:none;stroke-linecap:round;stroke-linejoin:round}
  
    /* Arriving through the ribbon: the page is covered in the ribbon's
       colour before it paints, so the flood carries straight over from
       the last page. The script swaps this for the real ribbon at once. */
    html.rt-arriving::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:3000;
      background:var(--rt-color, var(--green));
    }
  
    /* =========================================================
       RESPONSIVE
       ========================================================= */
    
    @media (max-width:1080px){
      :root{--nav-h:132px}   /* the nav wraps to two rows here */
      .hero{position:static;min-height:0}
      .stack-section{border-radius:0}
      .nav{grid-template-columns:auto auto;row-gap:16px}
      .pillnav{grid-column:1 / -1;grid-row:2;overflow-x:auto;max-width:100%}
      /* no panels at this width: the mobile menu is a separate job */
      .megas{display:none}
      .pill-caret{display:none}
      .hero-grid{grid-template-columns:1fr}
      .hero-media{height:auto;order:2;min-height:clamp(300px,52vw,520px)}
      .hero h1{max-width:none}
      .hero-media{min-height:clamp(300px,52vw,520px)}
      .scene-char,.scene-flag{display:none}
      .scene-landmark{width:46vw;height:40vh;opacity:.5}
      .locations{border-radius:0}
      .qa-head{flex-direction:column}
      .qa-head p{text-align:left}
      .foot-panel{min-height:0}
      .foot-body{grid-template-columns:1fr}
      .foot-media{aspect-ratio:16 / 10;max-height:60vh}
      .foot-bottom{grid-template-columns:1fr;gap:32px}
      .foot-nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
      .foot-col-countries{grid-column:1 / -1}
      .foot-statement{max-width:none}
      /* How It Works page: cards stack, the 90vh no longer applies */
      .hw-why{min-height:0}
      /* one column: the cards take the full width and the ribbon shows
         in the gaps between them */
      .how-step{grid-template-columns:1fr}
      .how-card,.how-step:nth-child(even) .how-card{grid-column:1}
      .how-steps{gap:clamp(56px,10vw,96px)}
      .hw-video{width:calc(100% - 2 * var(--gutter));border-radius:var(--r-card)}
      .hw-why-cards,.hw-voice-cards{grid-template-columns:1fr}
      .hw-country-grid{--pill-pad-y:10px;--pill-font:15px}   /* the homepage's phone pill size */
    }
    @media (max-width:600px){
      body{font-size:16px}
      :root{--stack-scroll:480vh}
      .pillnav a{padding:9px 14px;font-size:14px}
      .btn{padding:12px 20px;font-size:15px}
      .wordmark{font-size:24px}
      .hero-foot{flex-direction:column;align-items:flex-start;gap:20px}
      .locations{height:400vh}
      .closing-copy h2{font-size:clamp(26px,7.4vw,34px)}
      .pill-item{--pill-pad-y:10px;--pill-font:14px;gap:8px}
      .foot-nav{grid-template-columns:1fr;gap:28px}
  
    }
    
    /* =========================================================
       REDUCED MOTION
       ========================================================= */
    
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      .intro{transition:none}
      .mega,.mega-tag,.mega-item,.mega-country,.mega-media{transition:none}
      .mega-icon svg *{animation:none !important}
      .wordmark-clip,.logo-word{transition:none}
      .hc-l{animation:none !important}
      /* no writing-on: the finished logo, held */
      .logo-anim *{animation:none !important}
      .logo-anim .la-reveal{stroke-dashoffset:0 !important}
      .hero{position:static}
      .hero-media video{display:none}
      .btn{transition:none}
      .clients-track{animation:none}
      .stack-section{height:auto;border-radius:0}
      .stack-sticky{position:static;height:auto;padding:80px 0}
      .stack-viewport{display:block;height:auto;perspective:none}
      .statement{margin:0 auto 56px}
      .cards{height:auto;margin:0 auto;width:min(560px,100%)}
      .card{
        position:relative;
        transform:none !important;
        filter:none !important;
        opacity:1 !important;
        margin-bottom:24px;
      }
      .locations{height:auto}
      .closing{height:auto;margin-top:0}
      .closing-sticky{position:static;height:auto;background:none}
      .closing-image{transform:none !important}
      .closing-copy{opacity:1 !important;transform:none !important}
      .loc-sticky{position:static;height:auto;padding:80px 0}
      .loc-stage{height:auto;overflow:visible;display:block}
      .loc-head{margin-bottom:40px}
      .globe{display:block;margin:0 auto 40px}
      .pills{position:static;inset:auto}
      .pill-item{transform:none !important;opacity:1 !important}
      .qa-list summary::after{transition:none}
    }
  
  /* =========================================================
     COUNTRY PAGE  (france.html, the template for all eight)
     Builds on the How It Works pieces: the hero ribbon, the band,
     .hw-card tones, .rv reveal. New here:
       - the two languages and the EN | FR toggle
       - the country bar above the nav
       - the country colour (two schemes to try)
       - term cards that open into a full panel
       - a pinned row of moments that slides sideways
       - team cards that flip
       - the questions accordion
     ========================================================= */
  
    /* ---- languages ----
       Every text exists twice. Only the current language shows.
       display:revert gives each element back its normal display. */
    [data-l="fr"]{display:none}
    html[data-lang="fr"] [data-l="fr"]{display:revert}
    html[data-lang="fr"] [data-l="en"]{display:none}
  
    /* French terms inside English text are italic, the usual way of
       setting a foreign word; in French they are just words. */
    html[data-lang="en"] [data-l="en"] i[lang="fr"]{font-style:italic}
    html[data-lang="fr"] i[lang="fr"]{font-style:normal}
  
    .sr-only{
      position:absolute;width:1px;height:1px;margin:-1px;padding:0;
      overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
    }
  
    /* ---- the country colour ----
       Two ways to pick it, switched by the temporary control at the
       bottom left (data-scheme on <html>). Every country-coloured
       thing reads these four values, so a country is one block here.
         --c-field  the hero's ground
         --c-tint   card ground
         --c-ink    card text (passes 4.5:1 on the tint)
         --c-media  photo slots on the card */
    html{
      --c-field:#C8D6F8; --c-tint:#DCE5FB; --c-ink:#24408A; --c-media:#B9CBF3;  /* France by flag: blue */
    }
    html[data-scheme="light"]{
      --c-field:#F7DB97; --c-tint:#FCE9BC; --c-ink:#6E4700; --c-media:#F5D58A;  /* France by light: limestone amber */
    }
    .t-country{--card-bg:var(--c-tint);--card-ink:var(--c-ink);--card-media:var(--c-media)}
  
    /* ---- country bar ---- */
    /* BAR HEIGHT: --bar-h. The nav and the hero both make room for it. */
    .country-page{--bar-h:56px}
    .cbar{
      position:fixed;
      top:0;left:0;right:0;
      z-index:101;
      height:var(--bar-h);
      padding:0 calc(var(--gutter) + var(--pad));
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      background:var(--navy);
      color:var(--white);
      font-size:15px;
      transition:transform .45s cubic-bezier(.2,.7,.2,1);
    }
    .cbar-left{display:flex;align-items:center;gap:12px;min-width:0}
    .cbar-flag{width:24px;height:24px;border-radius:50%;flex:none}
    .cbar-global{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
    .cbar-global span[aria-hidden]{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
    .cbar-global:hover span[aria-hidden]{transform:translateX(4px)}
    .cbar-global:hover,.cbar-countries summary:hover{text-decoration:underline;text-underline-offset:3px}
  
    /* other countries: a native <details>, so it works without script */
    .cbar-countries{position:relative}
    .cbar-countries summary{
      list-style:none;
      white-space:nowrap;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:6px;
      opacity:.8;
    }
    .cbar-countries summary::-webkit-details-marker{display:none}
    .cbar-countries summary::after{
      content:"";
      width:7px;height:7px;
      border-right:1.5px solid currentColor;
      border-bottom:1.5px solid currentColor;
      transform:translateY(-2px) rotate(45deg);
      transition:transform .25s cubic-bezier(.2,.7,.2,1);
    }
    .cbar-countries[open] summary::after{transform:translateY(1px) rotate(225deg)}
    .cbar-menu{
      position:absolute;
      top:calc(100% + 10px);
      left:0;
      display:grid;
      grid-template-columns:repeat(2,max-content);
      gap:4px 8px;
      padding:10px;
      background:var(--white);
      color:var(--navy);
      border-radius:20px;
      box-shadow:0 24px 60px rgba(28,35,64,.18);
    }
    .cbar-menu a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px}
    .cbar-menu a:hover{background:var(--lilac)}
    .cbar-menu img{width:22px;height:22px;border-radius:50%}
  
    /* the nav sits under the bar, and moves up when the bar goes */
    .country-page .nav{
      transform:translateY(var(--bar-h));
      transition:transform .45s cubic-bezier(.2,.7,.2,1);
    }
    /*.country-page.bar-away .cbar{transform:translateY(-100%)}
    .country-page.bar-away .nav{transform:none}
  
    /* ---- France nav ---- */
    /* the lockup: logo, a thin rule, "France". Placeholder for the
       France logo, which will replace the whole thing. */
    .nav-country{
      font-weight:600;
      font-size:26px;
      letter-spacing:-0.02em;
      line-height:1;
      color:var(--navy);
      padding-left:12px;
      margin-left:4px;
      border-left:2px solid rgba(28,35,64,.25);
    }
    /* the country page keeps its full lockup: no tucking the word away on scroll */
    .country-page .nav.is-compact .wordmark-clip{width:var(--logo-full)}
    .country-page .nav.is-compact .logo-word{opacity:1;filter:none;transform:none}
    .nav-right{display:flex;align-items:center;gap:12px}
    .pillnav a.is-here{background:var(--lilac)}
  
    /* the language toggle: two buttons and a thumb that slides */
    .lang-toggle{
      position:relative;
      display:grid;
      grid-template-columns:1fr 1fr;
      background:var(--white);
      border-radius:999px;
      padding:4px;
    }
    .lang-toggle button{
      position:relative;
      z-index:1;
      border:0;
      background:none;
      font:600 14px/1 "Poppins",system-ui,sans-serif;
      color:var(--navy);
      padding:10px 14px;
      cursor:pointer;
      border-radius:999px;
    }
    .lang-thumb{
      position:absolute;
      top:4px;bottom:4px;left:4px;
      width:calc(50% - 4px);
      border-radius:999px;
      background:var(--lilac);
      transition:transform .4s cubic-bezier(.2,.7,.2,1);
    }
    html[data-lang="fr"] .lang-thumb{transform:translateX(100%)}
  
    /* ---- 1. hero ---- */
    .country-page .hw-hero{padding-top:calc(var(--pad) + var(--nav-h) + var(--bar-h))}
    .fr-hero{
      background:var(--c-field);
      grid-template-columns:1fr;
      justify-items:center;
      align-content:center;
      gap:clamp(24px,3vw,44px);
      text-align:center;
      transition:background-color .5s ease;
    }
    .fr-hero-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
    .fr-eyebrow{
      display:inline-block;
      font-weight:600;
      font-size:15px;
      padding:6px 14px;
      border:1px solid rgba(28,35,64,.25);
      border-radius:999px;
    }
    .fr-hero-copy h1{
      font-size:clamp(44px,10vw,150px);   /* stays on one line on a phone */
      line-height:.95;
      letter-spacing:-0.035em;
      margin-top:clamp(14px,1.6vw,24px);
    }
    .fr-hero-copy p{font-size:clamp(18px,1.6vw,22px);margin-top:clamp(12px,1.4vw,20px);max-width:34ch}
    /* ---- the pinned hero ----
       The How It Works intro (.hw-intro) with three differences: it
       sits at the top of the page instead of inside a panel, its video
       grows to fill the hero panel rather than the screen
       (data-fill="panel"), and the title clears the country bar too.
       HERO PIN LENGTH: --intro-scroll. */
    .fr-hero-pin{--intro-scroll:200svh}
    .fr-hero-pin.is-pinned{margin:0}
    .fr-hero-pin .hw-intro-stage{padding-top:0}
    .fr-hero-pin:not(.is-pinned) .hw-intro-stage{position:relative}   /* pinned, it must stay sticky */
    .country-page .fr-hero-pin.is-pinned .hw-steps-head{
      top:calc(var(--nav-h) + var(--bar-h) + clamp(16px,3.5vh,44px));
    }
    .fr-hero-pin.is-pinned .fr-hero{margin:var(--gutter)}
    /* unpinned (reduced motion): the panel sits behind the title and video */
    .fr-hero-pin:not(.is-pinned) .fr-hero{
      position:absolute;
      inset:var(--gutter);
      margin:0;
      min-height:0;
    }
    .fr-hero-pin:not(.is-pinned) .fr-hero-copy{padding-top:calc(var(--nav-h) + var(--bar-h) + 48px)}
    .fr-hero-pin:not(.is-pinned) .hw-video{margin-bottom:calc(var(--gutter) + 48px)}
  
  /* ---- the waving flag (France hero) ----
     Sits behind the video frame, in front of the hero panel, with its
     lower part hidden behind the frame's top edge. It starts pushed
     down, fully hidden, and rises when script.js adds .is-up, then
     sways from the wrist.
     FLAG SIZE: --flag-w. FLAG PLACE: --flag-x moves it along the frame
     (0 = its right edge on the frame's right edge). HOW MUCH SHOWS:
     the .62 in `top` (share of the flag above the frame). */
  .fr-hero-flag{
    --flag-w:clamp(120px,25vw,420px);
    --flag-x:24px;
    position:absolute;
    /* same layer as the hero panel and the video (2); its place in the
       HTML, after the panel and before the video, puts it between them */
    z-index:2;
    width:var(--flag-w);
    left:calc(var(--frame-right, 80%) - var(--flag-w) - var(--flag-x));
    top:calc(var(--frame-top, 50%) - var(--flag-w) * 1.2414 * .80);   /* 1.2414 = the image's height / width */
    pointer-events:none;
    transform:translateY(80%);
    transition:transform 1s cubic-bezier(.34,1.56,.64,1);   /* a small overshoot, like a hand popping up */
  }
  .fr-hero-flag.is-up{transform:none}
  .fr-hero-flag img{
    display:block;
    width:100%;
    height:auto;
    transform-origin:45% 95%;   /* the wrist */
  }
  .fr-hero-flag.is-up img{animation:fr-wave 2.6s ease-in-out 1s infinite}
  @media (max-width:600px){
    .fr-hero-flag{--flag-w:84px;--flag-x:12px}   /* smaller on phones, clear of the subtitle */
  }
  @keyframes fr-wave{
    0%,100%{transform:rotate(0deg)}
    50%{transform:rotate(-5deg)}
  }
  @media (prefers-reduced-motion:reduce){
    .fr-hero-flag{transition:none}
    .fr-hero-flag.is-up img{animation:none}
  }

    /* ---- 2. word reveal ----
       script.js wraps each word; words start faint and light up as the
       paragraph rises through the screen. */
    .fr-say{padding:clamp(100px,14vw,220px) var(--pad)}
    .fr-say-text{
      max-width:22ch;
      margin:0 auto;
      text-align:center;
      font-weight:600;
      font-size:clamp(30px,4.4vw,68px);
      line-height:1.12;
      letter-spacing:-0.02em;
    }
    .fr-say-text .w{opacity:.15;transition:opacity .2s linear}
    html[data-lang="en"] .fr-say-text i[lang="fr"]{font-style:italic}
  
    /* ---- shared section heads ---- */
    .fr-head{text-align:center;max-width:52ch;margin:0 auto}
    .fr-head h2{font-size:clamp(32px,3.4vw,48px);line-height:1.1}
    .fr-head p{margin-top:16px;opacity:.8}
  
    /* ---- 3. the words ----
       Each block is two columns: the title pinned on the left (sticky),
       the cards scrolling on the right. */
    .fr-words{
      position:relative;
      z-index:2;   /* above the clients ribbon's lower edge */
      padding:clamp(80px,9vw,140px) 0 clamp(80px,10vw,150px);
    }
    .fr-split{
      display:grid;
      grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
      gap:clamp(32px,5vw,96px);
    }
    .fr-split + .fr-split{margin-top:clamp(96px,12vw,180px)}
    .fr-split-sticky{
      position:sticky;
      top:calc(var(--nav-h) + clamp(48px,8vh,96px));
    }
    .fr-split-kicker{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.55}
    .fr-split h2{font-size:clamp(40px,5vw,76px);line-height:1;letter-spacing:-0.03em;margin-top:14px}
    .fr-split-sticky p{margin-top:18px;max-width:30ch;opacity:.8;font-size:clamp(17px,1.3vw,19px)}
    .fr-terms{display:grid;gap:clamp(16px,1.6vw,24px)}
  
    /* CARD HEIGHT: min-height. The words sit together at the bottom
       (justify-content), leaving the top for an illustration. */
    .fr-term{
      position:relative;
      min-height:clamp(400px,36vw,540px);
      justify-content:flex-end;
      padding:clamp(28px,3vw,48px);
      gap:12px;
      cursor:pointer;
      overflow:hidden;
    }
    .hw-card.fr-term > *{padding:0}
    .hw-card.fr-term > :not(.fr-term-open){position:relative}   /* above the ribbon texture */
    .fr-term-word{
      font-weight:600;
      font-size:clamp(36px,3.8vw,60px);
      line-height:1;
      letter-spacing:-0.03em;
    }
    .fr-term-say{font-size:15px;opacity:.7}
    .hw-card.fr-term > p{margin-top:8px;max-width:34ch;padding-right:56px;font-size:clamp(17px,1.3vw,19px)}   /* room for the plus button */
  
    /* The faint ribbon inside each card: a loop drawn as a mask, filled
       with the card's own ink at low opacity, so it works in any tone.
       Every second card mirrors it so they don't repeat. */
    .fr-term::before{
      content:"";
      position:absolute;
      inset:0;
      background:var(--card-ink);
      opacity:.09;
      -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 320'><path d='M-60 300 C 80 120 330 40 400 150 S 320 330 250 250 S 360 30 680 60' fill='none' stroke='black' stroke-width='70' stroke-linecap='round'/></svg>") right center / cover no-repeat;
              mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 320'><path d='M-60 300 C 80 120 330 40 400 150 S 320 330 250 250 S 360 30 680 60' fill='none' stroke='black' stroke-width='70' stroke-linecap='round'/></svg>") right center / cover no-repeat;
      pointer-events:none;
    }
    .fr-term:nth-child(even)::before{transform:scaleX(-1)}
  
    /* ---- the illustration on a term card ----
       Anchored to the card's bottom-right, so the sleeve comes in from
       the card's edge. Two pictures stacked: the open one fades in over
       the closed one on hover, or (phones) once the card reaches the
       middle of the screen (.is-open-art, script.js).
       Layers, back to front: the faint ribbon texture, the art, the words.
       ART SIZE: height. ART PLACE: right. */
    .fr-term-art,
    .hw-card.fr-term > .fr-term-art{   /* beats the card's "every child is relative" rule */
      position:absolute;
      right:-24px;
      bottom:0px;
      height:98%;
      aspect-ratio:928 / 1152;
      pointer-events:none;
    }
    .fr-term-art img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:bottom;
      /* no transition: the switch to the open passport is instant */
    }
    .fr-art-open{opacity:0}
    @media (hover:hover){
      .fr-term:hover .fr-art-open{opacity:1}
      .fr-term:hover .fr-art-closed{opacity:0}
    }
    .fr-term.is-open-art .fr-art-open{opacity:1}
    .fr-term.is-open-art .fr-art-closed{opacity:0}
    /* The entrance: script.js adds .art-wait (hand pushed down, out of
       the card) and, once the card is in view, .art-in (hand slides up).
       Once only. Uses `translate`, so it never fights the phone
       centring, which uses transform.
       SLIDE: duration .8s, starts ART_DELAY after the card (CSS delay). */
    .fr-term.art-wait .fr-term-art{translate:0 110%}
    .fr-term.art-in .fr-term-art{
      translate:0 0;
      transition:translate .8s cubic-bezier(.2,.7,.2,1) .3s;
    }

    /* the words stay readable next to the art */
    .fr-term--art > .fr-term-word,
    .fr-term--art > .fr-term-say,
    .hw-card.fr-term--art > p{max-width:min(46ch, 52%)}
    @media (max-width:600px){
      .fr-term--art{min-height:560px}
      .hw-card.fr-term > .fr-term-art{right:50%;transform:translateX(50%);height:55%;bottom:auto;top:0}   /* phones: the art on top, the words below */
      /* on phones the art sits above the words, so sliding up from the
         card's bottom edge would cross the text: it rises a little and
         fades in instead */
      .fr-term.art-wait .fr-term-art{translate:0 30%;opacity:0}
      .fr-term.art-in .fr-term-art{
        translate:0 0;
        opacity:1;
        transition:translate .8s cubic-bezier(.2,.7,.2,1) .3s, opacity .5s ease .3s;
      }
      .fr-term--art > .fr-term-word,
      .fr-term--art > .fr-term-say,
      .hw-card.fr-term--art > p{max-width:none}
    }

    .fr-term-open{
      position:absolute;
      right:clamp(22px,2.4vw,36px);
      bottom:clamp(22px,2.4vw,36px);
      width:44px;height:44px;
      border:0;
      border-radius:50%;
      font-size:0;          /* the label is for screen readers; the plus is drawn */
      cursor:pointer;
      background:
        linear-gradient(var(--card-bg),var(--card-bg)) center/16px 2px no-repeat,
        linear-gradient(var(--card-bg),var(--card-bg)) center/2px 16px no-repeat,
        var(--card-ink);
      transition:transform .45s cubic-bezier(.2,.7,.2,1);
    }
    /* stretch the button's click area over the whole card */
    .fr-term-open::after{content:"";position:absolute;inset:-900px}
    .fr-term:hover .fr-term-open,
    .fr-term-open:focus-visible{transform:rotate(90deg)}
    .fr-term-open:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
  
    /* the panel a card opens into */
    .fr-sheet{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      max-width:none;
      max-height:none;
      margin:0;
      padding:0;
      border:0;
      background:transparent;
      overflow:hidden;
    }
    .fr-sheet::backdrop{background:rgba(28,35,64,.45);opacity:0;transition:opacity .4s ease}
    .fr-sheet.is-open::backdrop{opacity:1}
    .fr-sheet-panel{
      position:absolute;
      inset:clamp(16px,6vh,72px) clamp(16px,8vw,160px);
      background:var(--card-bg,var(--white));
      color:var(--card-ink,var(--navy));
      border-radius:var(--r-hero);
      padding:clamp(28px,5vw,80px);
      overflow:auto;
    }
    .fr-sheet-body{max-width:60ch;opacity:0;transition:opacity .3s ease}
    .fr-sheet.is-open .fr-sheet-body{opacity:1;transition-delay:.25s}
    .fr-sheet-body .fr-term-word{display:block;font-size:clamp(44px,6vw,96px)}
    .fr-sheet-body .fr-term-say{display:block;margin-top:8px;font-size:16px}
    html[data-lang="fr"] .fr-sheet-body .fr-term-say{display:none}
    .fr-sheet-body > p{font-size:clamp(20px,1.8vw,26px);line-height:1.4;margin-top:clamp(20px,3vw,40px)}
    .fr-sheet-body h4{
      margin-top:clamp(24px,3vw,40px);
      font-size:14px;
      letter-spacing:.04em;
      text-transform:uppercase;
      opacity:.6;
    }
    .fr-sheet-body h4 + p{margin-top:8px;font-size:18px}
    .fr-sheet-close{
      position:absolute;
      top:clamp(16px,2vw,28px);
      right:clamp(16px,2vw,28px);
      width:48px;height:48px;
      border:0;
      border-radius:50%;
      background:var(--card-ink,var(--navy));
      cursor:pointer;
      transition:transform .35s cubic-bezier(.2,.7,.2,1);
    }
    .fr-sheet-close:hover{transform:rotate(90deg)}
    .fr-sheet-x{
      position:absolute;inset:0;
      background:
        linear-gradient(var(--card-bg,#fff),var(--card-bg,#fff)) center/18px 2px no-repeat,
        linear-gradient(var(--card-bg,#fff),var(--card-bg,#fff)) center/2px 18px no-repeat;
      transform:rotate(45deg);
    }
  
    /* ---- 4. first months: the pinned sideways row ---- */
    .fr-months{
      margin:0 var(--gutter);
      background:var(--cream);
      color:var(--navy);
      border-radius:var(--r-hero);
    }
    .fr-months-stage{
      padding:clamp(80px,10vw,140px) 0;
    }
    .fr-months-head .how-label{border-color:rgba(255,255,255,.35)}
    .fr-months-rail{
      margin-top:clamp(32px,4vw,56px);
      overflow-x:auto;   /* unpinned fallback: scroll it sideways by hand */
    }
    .fr-months-track{
      position:relative;
      width:max-content;
      padding:40px calc(var(--pad) + var(--gutter));
    }
    .fr-months-list{
      position:relative;
      z-index:1;
      display:flex;
      gap:clamp(20px,3vw,48px);
      list-style:none;
    }
    /* CARD SIZE: 40% of the screen wide; the height fits the pinned screen */
    .fr-month{
      width:40vw;
      height:min(60svh, 52vw);
      flex:none;
    }
    .fr-month .ph-card-body p{font-weight:600;font-size:clamp(18px,1.6vw,26px);line-height:1.3;max-width:30ch}
    .fr-months-ribbon{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      overflow:visible;
      z-index:0;
      pointer-events:none;
    }
    .fr-months-ribbon path{fill:none;stroke:var(--green);stroke-linecap:round;stroke-linejoin:round}
  
    /* pinned mode, added by script.js */
    .fr-months.is-pinned .fr-months-stage{
      position:sticky;
      top:0;
      height:100svh;
      padding:calc(var(--nav-h) + clamp(24px,4vh,48px)) 0 clamp(24px,4vh,48px);
      display:flex;
      flex-direction:column;
      justify-content:center;
      overflow:hidden;
    }
    .fr-months.is-pinned .fr-months-rail{overflow:visible}
  
    /* ---- 5. team: cards that flip ---- */
    .fr-team{
      position:relative;
      z-index:2;
      background:var(--c-tint,var(--cream));
      padding:clamp(80px,10vw,150px) 0;
    }
    .fr-people{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:var(--gutter);
      margin-top:clamp(32px,4vw,56px);
    }
    .fr-person{
      border:0;
      padding:0;
      background:none;
      font:inherit;
      color:inherit;
      text-align:left;
      cursor:pointer;
      perspective:1600px;
      aspect-ratio:16 / 10;
    }
    .fr-person-inner{
      position:relative;
      display:block;
      height:100%;
      transform-style:preserve-3d;
      transition:transform .7s cubic-bezier(.2,.7,.2,1);
    }
    .fr-person-front,
    .fr-person-back{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      border-radius:var(--r-card);
      padding:clamp(16px,1.6vw,22px);
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
    }
    /* Bold fronts, like a 2 by 2 of statement cards: saturated ground,
       light text, the photo as a circle in the corner. One colour per
       card, set here. Backs stay in the pale tints. */
    .fr-person-front{
      --front:var(--navy); --front-ink:var(--white);
      background:var(--front);
      color:var(--front-ink);
      padding:clamp(24px,2.6vw,40px);
      justify-content:flex-end;
      gap:6px;
    }
    .fr-person:nth-child(2) .fr-person-front{--front:var(--coral);--front-ink:var(--white)}
    .fr-person:nth-child(3) .fr-person-front{--front:var(--c-ink);--front-ink:var(--c-tint)}
    .fr-person:nth-child(4) .fr-person-front{--front:#1D5A51;--front-ink:#D3EAE6}
    .fr-person-photo{
      position:absolute;
      top:clamp(20px,2.2vw,32px);
      right:clamp(20px,2.2vw,32px);
      width:clamp(72px,8vw,120px);
      aspect-ratio:1;
      border-radius:50%;
      background:rgba(255,255,255,.18);
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .fr-person-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:50%;
      display:block;
    }
    .fr-person-photo span{font-size:12px;opacity:.8}
    .fr-person-name{font-weight:600;font-size:clamp(28px,3vw,46px);line-height:1;letter-spacing:-0.02em}
    .fr-person-role{font-size:clamp(16px,1.3vw,19px);opacity:.85}
    .fr-person-back{
      transform:rotateY(180deg);
      background:var(--card-bg);
      color:var(--card-ink);
      justify-content:center;
      gap:6px;
      padding:clamp(22px,2.2vw,32px);
    }
    .fr-person-label{font-size:13px;letter-spacing:.04em;text-transform:uppercase;opacity:.65;margin-top:14px}
    .fr-person-langs{font-weight:600;font-size:clamp(18px,1.5vw,22px);line-height:1.25}
    @media (hover:hover){
      .fr-person:hover .fr-person-inner{transform:rotateY(180deg)}
    }
    .fr-person:focus-visible .fr-person-inner,
    .fr-person[aria-pressed="true"] .fr-person-inner{transform:rotateY(180deg)}
    .fr-person:focus-visible{outline:none}
    .fr-person:focus-visible .fr-person-back{outline:3px solid var(--violet);outline-offset:3px}
  
    /* ---- 6. questions ---- */
    .fr-faq{padding:0 0 clamp(80px,10vw,150px)}
    .fr-faq-inner{max-width:calc(880px + 2 * var(--pad))}
    .fr-faq-list{margin-top:clamp(32px,4vw,56px);display:grid;gap:12px}
    .fr-q{
      background:var(--white);
      border-radius:var(--r-card);
      transition:box-shadow .3s ease;
    }
    .fr-q[open]{box-shadow:0 24px 60px rgba(28,35,64,.10)}
    .fr-q summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
      padding:clamp(20px,2vw,28px) clamp(22px,2.4vw,34px);
      font-weight:600;
      font-size:clamp(18px,1.5vw,21px);
    }
    .fr-q summary::-webkit-details-marker{display:none}
    .fr-q summary::after{
      content:"";
      flex:none;
      width:12px;height:12px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:translateY(-3px) rotate(45deg);
      transition:transform .4s cubic-bezier(.2,.7,.2,1);
    }
    .fr-q[open] summary::after{transform:translateY(3px) rotate(225deg)}
    .fr-q p{padding:0 clamp(22px,2.4vw,34px) clamp(22px,2.4vw,30px);max-width:62ch;opacity:.85}
  
    /* ---- the temporary colour switch ---- */
    .scheme-switch{
      position:fixed;
      left:var(--gutter);
      bottom:var(--gutter);
      z-index:150;
      display:flex;
      align-items:center;
      gap:4px;
      padding:6px 6px 6px 14px;
      background:var(--white);
      border:1px dashed rgba(28,35,64,.35);
      border-radius:999px;
      font-size:13px;
      box-shadow:0 12px 30px rgba(28,35,64,.12);
    }
    .scheme-label{margin-right:6px;opacity:.7}
    .scheme-switch button{
      border:0;
      background:none;
      font:600 13px/1 "Poppins",system-ui,sans-serif;
      color:var(--navy);
      padding:8px 12px;
      border-radius:999px;
      cursor:pointer;
    }
    .scheme-switch button[aria-pressed="true"]{background:var(--c-tint);color:var(--c-ink)}
  
    /* ---- smaller screens ---- */
    @media (max-width:1080px){
      .country-page .nav{grid-template-columns:auto auto}
      .country-page .nav-right{justify-self:end}
      .fr-split{grid-template-columns:1fr;gap:28px}
      .fr-split-sticky{position:static}
    }
    @media (max-width:600px){
      .cbar-here{display:none}
      .cbar{font-size:13px;padding:0 16px;gap:10px}
      .country-page .nav-right .btn{display:none}   /* the footer and the bar keep the way to contact */
      .fr-people{grid-template-columns:1fr}
      .nav-country{font-size:18px;padding-left:8px;margin-left:0}
      .country-page .nav{--logo-h:28px;column-gap:12px}
      .lang-toggle button{padding:8px 10px;font-size:13px}
      .fr-month{width:78vw;height:min(58svh,110vw)}
    }
    @media (prefers-reduced-motion:reduce){
      .cbar,.country-page .nav,.lang-thumb,.fr-person-inner,.fr-q summary::after{transition:none}
    }