:root{
  /* brand */
  --vantu-navy:#0B1B33;    /* primary: covers, headers, headlines */
  --vantu-cream:#F5F2F2;   /* base: page ground */
  --vantu-petrol:#28768D;  /* depth: panels, data, charts */
  --vantu-red:#F03A47;     /* accent: the star, rules, the word that lands */
  --vantu-action:#D1101E;  /* action: buttons with white text */
  --vantu-stone:#827B80;   /* structure: rules, borders, secondary text */

  /* functional */
  --link:#0047B3;          /* links, light grounds only */
  --petrol-light:#4B8FA6;  /* data on dark ground */
  --ink:#0F040E;           /* body text */

  /* gradients: always within the cool family, never toward red */
  --grad-cover:linear-gradient(140deg,#0B1B33 0%,#004051 100%);
  --grad-surface:linear-gradient(125deg,#0B1B33 0%,#004E61 100%);
  --grad-scrim:linear-gradient(90deg,#004E61 0%,transparent 100%);
  --grad-glow:radial-gradient(circle at 88% 10%,#0F6277 0%,#0B1B33 70%);

  /* type */
  --font-display:'Bebas Neue',Impact,sans-serif;
  --font-body:'Source Sans Pro',system-ui,sans-serif;

  /* scale */
  --text-display:64px; --lh-display:68px;
  --text-h1:44px;      --lh-h1:52px;
  --text-h2:32px;      --lh-h2:40px;
  --text-h3:24px;      --lh-h3:32px;
  --text-body:22.5px;  --lh-body:35px;    /* 18px +25%, client review 2026-09-30 */
  --text-small:15px;   --lh-small:22px;

  --radius:8px;        /* never fully rounded */

  /* spacing, 4pt base, no intermediate values */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* carried over from the animation reference */
  --cubic-easing:cubic-bezier(0.215,0.61,0.355,1);
  --after-scale:0;

  --header-h:76px;
}
@media screen and (min-width:768px){ :root{ --header-h:101px } }

/* Bebas Neue (display) and Source Sans Pro (body), self-hosted. Generated from the
   Google Fonts css2 endpoint, latin and latin-ext only. Both SIL Open Font License 1.1. */
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bebas-neue-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bebas-neue-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-sans-pro-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-sans-pro-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/source-sans-pro-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/source-sans-pro-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--vantu-cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--lh-body);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Bebas Neue has one weight and capitals only: no faux bold, and a touch of
   tracking so the capitals breathe. */
html{font-synthesis:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--vantu-navy)}
:is(h1,h2,h3,h4,.clipHeading__heading,.tstep__name){letter-spacing:.02em}
h1{font-size:var(--text-h1);line-height:var(--lh-h1)}
h2{font-size:var(--text-h2);line-height:var(--lh-h2)}
h3{font-size:var(--text-h3);line-height:var(--lh-h3)}

/* Line measure stays between 60 and 75 characters. */
p{max-width:68ch}

a{color:var(--link);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--vantu-action);
  outline-offset:2px;
}

img,video{max-width:100%;height:auto;display:block}

.skipLink{
  position:absolute;left:var(--s-4);top:calc(-1 * var(--s-9));z-index:300;
  background:var(--vantu-navy);color:#fff;padding:var(--s-3) var(--s-4);
  border-radius:var(--radius);text-decoration:none;transition:top .15s;
}
.skipLink:focus{top:var(--s-4)}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Labels and kickers */
.kicker{
  font-family:var(--font-body);
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vantu-petrol);margin-bottom:var(--s-5);display:block;
}
.kicker--onDark{color:var(--petrol-light)}

.section{padding:var(--s-9) var(--s-6);position:relative}
.section--dark{background:var(--vantu-navy);color:var(--vantu-cream)}
.section--dark h2,.section--dark h3{color:var(--vantu-cream)}
.wrap{max-width:1180px;margin:0 auto}
.measure{max-width:68ch}

/* Anchors must not land under the sticky header. */
[id]{scroll-margin-top:calc(var(--header-h) + var(--s-5))}

@media screen and (max-width:767px){
  :root{
    --text-display:40px; --lh-display:44px;
    --text-h1:32px;      --lh-h1:38px;
    --text-h2:26px;      --lh-h2:32px;
    --text-h3:21px;      --lh-h3:28px;
  }
  .section{padding:var(--s-8) var(--s-5)}
}
@media screen and (max-width:380px){
  .section{padding:var(--s-8) var(--s-4)}
}

/* --vantu-stone on cream is 4.12:1, which is below the 4.5 body text needs.
   Stone therefore does the structural work the brandbook lists first, rules and
   borders, and secondary text is navy at a smaller size instead.
   ==========================================================================
   Header. Backdrop blur revealed on scroll, active link slider, bottom border
   that grows with scaleX. Mechanics kept from the animation reference.
   ========================================================================== */
.header{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--vantu-navy)}
.header__backdrop{
  position:absolute;inset:0;backdrop-filter:blur(32px);
  background:var(--vantu-cream);clip-path:inset(100% 0 0 0);z-index:-1;
}
.header__wrapper{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-5);padding:var(--s-4) var(--s-6);max-width:1180px;margin:0 auto;
}
.header__logo{display:flex;align-items:center;gap:var(--s-2);text-decoration:none;color:inherit;flex:none}
.header__logo img,.header__logo svg{height:28px;width:auto;display:block}
.header__nav{display:flex;align-items:center;gap:var(--s-6)}
.header__links{display:flex;gap:var(--s-6);position:relative}
.header__links a{
  color:var(--vantu-navy);text-decoration:none;font-size:var(--text-small);
  font-weight:600;padding:var(--s-2) 0;white-space:nowrap;
}
/* The active-page bar sits under the links, not above them. */
.header__barSlider{
  /* Hangs below the links so it does not push their text off the logo's centre line. */
  position:absolute;bottom:-4px;left:0;height:3px;width:100px;
  background:var(--vantu-petrol);transform-origin:left center;pointer-events:none;
}
.header__actions{display:flex;align-items:center;gap:var(--s-4)}
/* The two header controls are slim pills, at the client's request. */
.header__actions .button,.header__actions .langMenu__button{border-radius:999px;padding:6px var(--s-4);line-height:20px}
.header__menu{
  display:none;background:none;border:1px solid var(--vantu-stone);
  border-radius:var(--radius);width:44px;height:44px;cursor:pointer;flex:none;
}
.header__menu svg{width:22px;height:22px;margin:0 auto;overflow:visible}
.header__menu path{stroke:var(--vantu-navy);stroke-width:2;stroke-linecap:round}

.touchMenu{
  display:none;position:fixed;inset:0;background:var(--vantu-cream);z-index:90;
  padding:calc(var(--header-h) + var(--s-4)) var(--s-5) var(--s-7);
  flex-direction:column;gap:var(--s-2);overflow-y:auto;
}
.touchMenu__border{height:2px;background:var(--vantu-stone);margin-bottom:var(--s-5);transform-origin:left center}
.touchMenu__link{
  display:block;font-family:var(--font-display);font-size:var(--text-h3);
  color:var(--vantu-navy);text-decoration:none;padding:var(--s-3) 0;
}
/* The contact entry is the action in this list, so it carries the weight and
   the signature petrol rather than looking like one more nav item. */
.touchMenu__link--cta{font-weight:800;color:var(--vantu-petrol)}
.touchMenu__footer{margin-top:var(--s-7);display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}

/* Language switcher, a disclosure so more locales can be added */
.langMenu{position:relative}
.langMenu__button{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vantu-navy);border:1px solid var(--vantu-stone);border-radius:var(--radius);
  padding:var(--s-2) var(--s-3);white-space:nowrap;
}
.langMenu__button::-webkit-details-marker{display:none}
.langMenu__button:hover{border-color:var(--vantu-navy)}
.langMenu__caret{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s var(--cubic-easing)}
.langMenu[open] .langMenu__caret{transform:rotate(180deg)}
.langMenu__list{
  position:absolute;right:0;top:calc(100% + var(--s-2));z-index:120;min-width:170px;
  list-style:none;background:#fff;border:1px solid var(--vantu-stone);
  border-radius:var(--radius);padding:var(--s-1);box-shadow:0 12px 30px rgba(11,27,51,.16);
}
.langMenu__option{
  display:block;padding:var(--s-2) var(--s-3);border-radius:var(--radius);
  color:var(--vantu-navy);text-decoration:none;font-size:var(--text-small);font-weight:600;
}
.langMenu__option:hover{background:rgba(40,118,141,.1)}
.langMenu__option[aria-current="true"]{font-weight:800;color:var(--vantu-petrol)}
.header--overHero .langMenu__button{color:var(--vantu-cream);border-color:rgba(245,242,242,.5)}
.header--overHero .langMenu__button:hover{border-color:var(--vantu-cream)}

@media screen and (max-width:900px){
  .header__links{display:none}
  .header__actions .langMenu{display:none}
  .header__actions .button--action{display:none}
  .header__menu{display:flex;align-items:center;justify-content:center}
  /* Mobile runs navy end to end, at the client's request: navy bar, light
     logo, borderless menu button, and a navy menu panel under it. */
  .header__backdrop{background:var(--vantu-navy)}
  .header .header__logo .header__logoDark{display:none}
  .header .header__logo .header__logoLight{display:block}
  .header .header__menu{border:0}
  .header .header__menu path{stroke:var(--vantu-cream)}
  .touchMenu{background:var(--vantu-navy)}
  .touchMenu__border{background:rgba(245,242,242,.25)}
  .touchMenu__link{color:var(--vantu-cream)}
  .touchMenu__link--cta{color:var(--petrol-light)}
  .touchMenu .langMenu__button{color:var(--vantu-cream);border-color:rgba(245,242,242,.5)}
}

/* ==========================================================================
   Buttons. Exactly one red button per view. The text roll keeps two stacked
   spans, as in the reference.
   ========================================================================== */
.button{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-body);font-size:14px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  padding:var(--s-3) var(--s-5);border-radius:var(--radius);
  border:1px solid currentColor;background:none;color:var(--vantu-navy);
  cursor:pointer;text-decoration:none;
}
.button--action{background:var(--vantu-action);border-color:var(--vantu-action);color:#fff}
.button--action:hover{background:#b90d19;border-color:#b90d19}
.button[disabled]{opacity:.55;cursor:not-allowed}
.button__textMask{overflow:hidden;height:20px;position:relative;display:block}
.button__text{display:block;position:relative}
.button__text span{display:block;height:20px;line-height:20px}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;gap:var(--s-6);
  padding:calc(var(--header-h) + var(--s-9)) var(--s-6) var(--s-9);
  background:var(--grad-cover);color:var(--vantu-cream);overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__video,.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Mandatory over any media that carries type. A gradient, never a flat veil. */
.hero__scrim{position:absolute;inset:0;background:var(--grad-scrim);opacity:.92}
.hero__scrim::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,27,51,.75) 0%,rgba(11,27,51,.45) 55%,rgba(11,27,51,.85) 100%)}
.hero__inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;width:100%}
.hero__rule{width:56px;height:3px;background:var(--vantu-red);margin-bottom:var(--s-5)}
.hero__heading{
  font-size:var(--text-display);line-height:var(--lh-display);
  color:var(--vantu-cream);max-width:16ch;
}
.hero__body{
  margin-top:var(--s-6);max-width:52ch;color:var(--vantu-cream);
  font-size:var(--text-body);line-height:var(--lh-body);
}
.hero__cta{margin-top:var(--s-7);display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}

@media screen and (max-width:767px){
  .hero{padding:calc(var(--header-h) + var(--s-8)) var(--s-5) var(--s-8)}
}

/* ==========================================================================
   Clip heading, reused from the reference for section titles
   ========================================================================== */
/* The stroke sits clear of the last line. The heading reserves the room for it
   rather than the stroke being pulled up into the descenders. */
.clipHeading{position:relative;display:inline-block;align-self:flex-start;max-width:100%;padding-bottom:var(--s-4)}
.clipHeading__heading{max-width:20ch}
.clipHeading__underline{position:absolute;bottom:0;left:0;right:0;width:100%;pointer-events:none}
.clipHeading__underline svg{width:100%;height:14px;display:block}
.clipHeading__underline path{stroke:var(--vantu-petrol);stroke-width:4;fill:none;opacity:0}
.section--dark .clipHeading__underline path{stroke:var(--petrol-light)}

/* ==========================================================================
   Talent in Vietnam. Only the title card is navy, with a photo on its right;
   the figures sit on the page ground as white cards.
   ========================================================================== */
.talent__card{
  display:grid;grid-template-columns:1.4fr 1fr;align-items:stretch;overflow:hidden;
  background:var(--grad-surface);color:var(--vantu-cream);
  border-radius:calc(var(--radius) * 3);
}
.talent__copy{padding:var(--s-7);display:flex;flex-direction:column;justify-content:center}
.talent__card .clipHeading__heading{color:var(--vantu-cream)}
.talent__card .clipHeading__underline path{stroke:var(--petrol-light)}
.talent__lead{margin-top:var(--s-5);color:var(--vantu-cream);opacity:.88}
/* Height 0 plus min-height 100% lets the copy set the card height and the
   photo fill it, rather than the portrait photo stretching the card. */
.talent__photo{width:100%;height:0;min-height:100%;object-fit:cover;object-position:center 30%}
.talent__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s-4);
  margin-top:var(--s-4);
}
.stat{
  background:#fff;border-radius:calc(var(--radius) * 2);padding:var(--s-5);
  min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6);
  box-shadow:0 1px 0 rgba(11,27,51,.06),0 12px 32px rgba(11,27,51,.07);
}
.stat__label{color:var(--vantu-navy);font-size:var(--text-small);line-height:var(--lh-small);max-width:26ch}
.stat__figure{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:88px;line-height:.9;
  color:var(--vantu-petrol);display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
}
.stat:first-child .stat__figure{font-size:112px}
.stat__unit{font-family:var(--font-body);font-size:var(--text-h3);font-weight:800;line-height:1;letter-spacing:0}
.talent__sources{
  margin-top:var(--s-4);font-size:13px;line-height:20px;color:var(--vantu-navy);max-width:80ch;
}
.talent__sources a{color:var(--link)}
@media screen and (max-width:1100px){
  .stat__figure{font-size:64px}
  .stat:first-child .stat__figure{font-size:72px}
}
@media screen and (max-width:900px){
  .talent__card{grid-template-columns:1fr}
  .talent__photo{height:220px;min-height:0}
  .talent__copy{padding:var(--s-6)}
  .talent__grid{grid-template-columns:1fr}
  .stat{min-height:0}
}

/* ==========================================================================
   What is Vantu. Title, paragraph, four bullets with a bold lead word.
   ========================================================================== */
.whatis__bullets{margin-top:var(--s-8);display:grid;gap:var(--s-5);max-width:74ch}
.whatis__bullet{list-style:none;padding-left:var(--s-6);position:relative;line-height:var(--lh-body)}
.whatis__bullet::before{
  content:'';position:absolute;left:0;top:11px;width:16px;height:2px;background:var(--vantu-petrol);
}
.whatis__bulletTitle{font-weight:800;color:var(--vantu-navy)}

/* ==========================================================================
   FAQ. Native details and summary: keyboard, screen readers, and no JS needed.
   ========================================================================== */
.faq{margin-top:var(--s-8);max-width:820px}
.faq__item{border-bottom:1px solid rgba(130,123,128,.4);position:relative}
.faq__item::after{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--vantu-petrol);transform:scaleX(var(--after-scale));transform-origin:left center;
}
.faq__summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:flex-start;gap:var(--s-5);padding:var(--s-5) 0;
  font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--lh-h3);
  font-weight:700;color:var(--vantu-navy);
}
.faq__summary::-webkit-details-marker{display:none}
.faq__toggle{flex:none;font-family:var(--font-body);color:var(--vantu-petrol);transition:transform .3s var(--cubic-easing)}
.faq__item[open] .faq__toggle{transform:rotate(45deg)}
.faq__answer{padding:0 0 var(--s-5);color:var(--ink);max-width:68ch;overflow:hidden}

/* ==========================================================================
   Contact. A navy card: the pitch and the brand mark on the left, the form
   on a white card on the right.
   ========================================================================== */
.contactCard{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s-7);align-items:start;
  background:var(--grad-surface);color:var(--vantu-cream);
  border-radius:calc(var(--radius) * 3);padding:var(--s-7);
}
/* The mark, cut out of the brand icon, low contrast against the navy and kept
   clear of the text. */
.contactCard__shape{
  position:absolute;z-index:-1;left:-8%;top:62%;width:52%;aspect-ratio:1180/998;
  background:linear-gradient(160deg,rgba(75,143,166,.34),rgba(75,143,166,.12));
  -webkit-mask:url(/img/vantu-icon.svg) center/contain no-repeat;
  mask:url(/img/vantu-icon.svg) center/contain no-repeat;
}
.contactCard .clipHeading__heading{color:var(--vantu-cream)}
.contactCard .clipHeading__underline path{stroke:var(--petrol-light)}
.contactCard__text{margin-top:var(--s-5);color:var(--vantu-cream);opacity:.88;max-width:40ch}
.contactCard__form{
  background:#fff;color:var(--ink);border-radius:calc(var(--radius) * 2);
  padding:var(--s-6);box-shadow:0 24px 48px rgba(0,0,0,.18);
}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-4)}
.form > .form__note,.form > [data-field="departments"],.form > [data-field="need"],.form > .form__submit,.form > .form__status{grid-column:1 / -1}
.field{display:grid;gap:var(--s-2);align-content:start}
.field label{font-size:14px;font-weight:700;color:var(--vantu-navy)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:16px;line-height:24px;
  padding:var(--s-3) var(--s-4);border:1px solid rgba(40,118,141,.28);
  border-radius:var(--radius);background:#fff;color:var(--ink);width:100%;
  transition:border-color .2s var(--cubic-easing),box-shadow .2s var(--cubic-easing);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--vantu-petrol)}
.field textarea{min-height:120px;resize:vertical}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--vantu-action)}
/* Departments: a dropdown of checkboxes, so several can be picked. */
.field__label{font-size:14px;font-weight:700;color:var(--vantu-navy)}
.multi{position:relative}
.multi__toggle{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  font-size:16px;line-height:24px;padding:var(--s-3) var(--s-4);
  border:1px solid rgba(40,118,141,.28);border-radius:var(--radius);background:#fff;color:var(--ink);
  transition:border-color .2s var(--cubic-easing);
}
.multi__toggle::-webkit-details-marker{display:none}
.multi__toggle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multi__toggle::after{content:"";flex:none;width:8px;height:8px;border:solid var(--vantu-navy);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--cubic-easing)}
.multi[open] .multi__toggle::after{transform:translateY(2px) rotate(-135deg)}
.multi__toggle:hover,.multi[open] .multi__toggle{border-color:var(--vantu-petrol)}
.multi__panel{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-1) var(--s-4);padding:var(--s-3) var(--s-4);
  background:#fff;border:1px solid rgba(40,118,141,.28);border-radius:var(--radius);box-shadow:0 12px 30px rgba(11,27,51,.16);
}
.multi__option{display:flex;align-items:center;gap:var(--s-2);font-size:15px;line-height:22px;padding:var(--s-1) 0;cursor:pointer;color:var(--ink)}
.multi__option input{width:18px;height:18px;accent-color:var(--vantu-navy);flex:none}
.field[data-invalid="true"] .multi__toggle{border-color:var(--vantu-action)}
.field__error{color:var(--vantu-action);font-size:var(--text-small);line-height:var(--lh-small);min-height:0}
.field__error:empty{display:none}
.form__note{color:var(--vantu-navy);font-size:13px;line-height:20px}
.form__submit .button{width:100%;justify-content:center}
.form__status{font-size:var(--text-small)}
.form__status:empty{display:none}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__confirmation{
  background:#fff;border-radius:calc(var(--radius) * 2);
  padding:var(--s-6);font-size:var(--text-h3);line-height:var(--lh-h3);
  font-family:var(--font-display);color:var(--vantu-navy);
}
@media screen and (max-width:900px){
  .contactCard{grid-template-columns:1fr;gap:var(--s-6);padding:var(--s-6) var(--s-4)}
  .contactCard__shape{width:80%;top:auto;bottom:-12%;left:auto;right:-30%}
  .contactCard__form{padding:var(--s-5)}
  .form{grid-template-columns:1fr}
}

/* ==========================================================================
   Blog. Index cards, article header, and the Ghost body (.prose).
   Cards borrow the landing page's language: white surface, 8px corners, a
   navy pill for the one action, Bebas for titles.
   ========================================================================== */
.button--pill{border-radius:999px;padding:var(--s-2) var(--s-5)}
.blogIndex{padding-top:calc(var(--header-h) + var(--s-8))}
.blogIndex__lead{margin-top:var(--s-4);color:var(--vantu-navy);max-width:52ch}
.blogIndex .clipHeading__heading{max-width:none}

.postGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);margin-top:var(--s-8)}
.postCard{
  position:relative;background:#fff;border:1px solid rgba(130,123,128,.35);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--cubic-easing),box-shadow .25s var(--cubic-easing),border-color .25s var(--cubic-easing);
}
.postCard__media{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--vantu-navy)}
/* No feature image: the brand mark on navy, so a card is never a blank hole. */
.postCard__media--empty{
  background:var(--grad-surface);position:relative;
}
.postCard__media--empty::after{
  content:"";position:absolute;inset:18% 30%;
  background:rgba(75,143,166,.45);
  -webkit-mask:url(/img/vantu-icon.svg) center/contain no-repeat;
  mask:url(/img/vantu-icon.svg) center/contain no-repeat;
}
.postCard__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.postCard__meta{font-size:13px;line-height:20px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vantu-navy)}
.postCard__title{font-size:var(--text-h3);line-height:var(--lh-h3)}
/* The whole card is the target: the title link stretches over it. */
.postCard__title a{color:var(--vantu-navy);text-decoration:none}
.postCard__title a::after{content:"";position:absolute;inset:0;z-index:1}
.postCard__title a:focus-visible{outline:none}
.postCard:has(.postCard__title a:focus-visible){outline:3px solid var(--vantu-action);outline-offset:2px}
.postCard__excerpt{font-size:var(--text-small);line-height:var(--lh-small);color:var(--ink);overflow-wrap:anywhere}
.postCard__more{
  margin-top:auto;align-self:flex-start;padding-top:var(--s-2);
  font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vantu-petrol);
}
.postCard__more::after{content:" \2192"}
@media (hover:hover){
  .postCard:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,27,51,.14);border-color:var(--vantu-petrol)}
  .postCard:hover .postCard__more{text-decoration:underline;text-underline-offset:4px}
}
@media (prefers-reduced-motion:reduce){ .postCard{transition:none} .postCard:hover{transform:none} }

/* The lead card spans the row, image beside the text. */
.postCard--lead{grid-column:1 / -1;flex-direction:row}
.postCard--lead .postCard__media{width:55%;aspect-ratio:auto;min-height:320px;flex:none}
.postCard--lead .postCard__body{padding:var(--s-7);justify-content:center}
.postCard--lead .postCard__title{font-size:var(--text-h2);line-height:var(--lh-h2)}
.postCard--lead .postCard__excerpt{font-size:var(--text-body);line-height:var(--lh-body)}

.pagination{display:flex;gap:var(--s-4);align-items:center;justify-content:space-between;margin-top:var(--s-8)}
.pagination__count{color:var(--vantu-navy);font-size:var(--text-small);text-align:center}
.emptyState{margin-top:var(--s-7);color:var(--vantu-navy);font-size:var(--text-h3);line-height:var(--lh-h3);font-family:var(--font-display);letter-spacing:.02em}
@media screen and (max-width:900px){
  .postGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .postCard--lead{flex-direction:column}
  .postCard--lead .postCard__media{width:100%;min-height:0;aspect-ratio:16/9}
  .postCard--lead .postCard__body{padding:var(--s-5)}
  .postCard--lead .postCard__title{font-size:var(--text-h3);line-height:var(--lh-h3)}
  .postCard--lead .postCard__excerpt{font-size:var(--text-small);line-height:var(--lh-small)}
}
@media screen and (max-width:640px){
  .postGrid{grid-template-columns:minmax(0,1fr);margin-top:var(--s-7)}
  .blogIndex{padding-top:calc(var(--header-h) + var(--s-7))}
}

/* Article header */
.blogPost{padding-top:calc(var(--header-h) + var(--s-8))}
.blogPost__head{max-width:68ch}
.blogPost__head h1{margin-top:var(--s-4);font-size:var(--text-display);line-height:var(--lh-display);overflow-wrap:break-word}
.blogPost__head .postCard__meta{margin-top:var(--s-5)}
.blogPost__back{
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vantu-petrol);text-decoration:none;
}
.blogPost__back::before{content:"\2190  "}
.blogPost__back:hover{text-decoration:underline}
.blogPost__feature{margin-top:var(--s-7)}
.blogPost__feature img{width:100%;border-radius:calc(var(--radius) * 2);aspect-ratio:16/9;object-fit:cover}
.blogPost__feature figcaption{margin-top:var(--s-2);font-size:var(--text-small);line-height:var(--lh-small);color:var(--vantu-navy)}

/* Ghost renders the article body. Style every element its editor can produce.
   The column is 68ch; wide and full cards grow toward the edge of .wrap and
   never past it, so nothing can push the page sideways. */
.prose{margin-top:var(--s-7);overflow-wrap:break-word}
.prose>*{max-width:68ch}
.prose>*+*{margin-top:var(--s-5)}
.prose h2{font-size:var(--text-h2);line-height:var(--lh-h2);margin-top:var(--s-8)}
.prose h3{font-size:var(--text-h3);line-height:var(--lh-h3);margin-top:var(--s-7)}
.prose h4{font-size:var(--text-h3);line-height:var(--lh-h3);margin-top:var(--s-6)}
.prose h5,.prose h6{font-size:var(--text-body);font-weight:800;color:var(--vantu-navy);margin-top:var(--s-6)}
.prose :is(h2,h3,h4)+*{margin-top:var(--s-4)}
.prose p,.prose li{font-size:var(--text-body);line-height:var(--lh-body);max-width:none}
.prose ul,.prose ol{padding-left:var(--s-5)}
.prose li::marker{color:var(--vantu-petrol)}
.prose li+li{margin-top:var(--s-2)}
.prose li>:is(ul,ol){margin-top:var(--s-2)}
.prose a{color:var(--link)}
.prose strong{font-weight:800}
.prose blockquote{
  border-left:3px solid var(--vantu-red);padding-left:var(--s-5);
  font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:.02em;color:var(--vantu-navy);
}
.prose blockquote p{font-size:inherit;line-height:inherit}
.prose blockquote.kg-blockquote-alt{border-left:0;padding:0;text-align:center;font-size:var(--text-h2);line-height:var(--lh-h2);max-width:none}
.prose figure{margin:var(--s-7) 0}
.prose figure img,.prose figure video{border-radius:var(--radius);width:100%}
.prose figcaption{margin-top:var(--s-2);font-size:var(--text-small);line-height:var(--lh-small);color:var(--vantu-navy);text-align:center}
.prose img{border-radius:var(--radius)}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:var(--text-small);line-height:var(--lh-small)}
.prose thead{border-bottom:2px solid var(--vantu-red)}
.prose th{text-align:left;font-weight:800;padding:var(--s-3);color:var(--vantu-navy)}
.prose td{padding:var(--s-3);border-bottom:1px solid rgba(130,123,128,.3)}
.prose pre{
  background:var(--vantu-navy);color:var(--vantu-cream);padding:var(--s-5);
  border-radius:var(--radius);overflow-x:auto;font-size:var(--text-small);line-height:var(--lh-small);
}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.prose :not(pre)>code{background:rgba(40,118,141,.12);padding:2px 5px;border-radius:4px}
.prose hr{border:0;border-top:1px solid var(--vantu-stone);margin:var(--s-8) 0}

/* Editor cards. .kg-width-wide and .kg-width-full are Ghost's width classes. */
.prose>.kg-width-wide{max-width:1000px}
.prose>.kg-width-full{max-width:none}
.prose>.kg-width-full img,.prose>.kg-width-full video{border-radius:0}
.prose .kg-card{margin-top:var(--s-6);margin-bottom:var(--s-6)}
.prose .kg-image-card img{margin:0 auto}
.prose .kg-image{height:auto}

.prose .kg-gallery-container{display:flex;flex-direction:column;gap:var(--s-2)}
.prose .kg-gallery-row{display:flex;gap:var(--s-2)}
.prose .kg-gallery-image{min-width:0}
.prose .kg-gallery-image img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}

.prose .kg-bookmark-container{
  display:flex;min-height:148px;color:var(--ink);text-decoration:none;
  background:#fff;border:1px solid rgba(130,123,128,.35);border-radius:var(--radius);overflow:hidden;
}
.prose .kg-bookmark-container:hover{border-color:var(--vantu-petrol)}
.prose .kg-bookmark-content{flex:1 1 0;min-width:0;padding:var(--s-4) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)}
.prose .kg-bookmark-title{font-weight:800;font-size:var(--text-body);line-height:var(--lh-small);color:var(--vantu-navy)}
.prose .kg-bookmark-description{
  font-size:var(--text-small);line-height:var(--lh-small);max-height:66px;overflow:hidden;
}
.prose .kg-bookmark-metadata{margin-top:auto;display:flex;align-items:center;gap:var(--s-2);font-size:13px;line-height:20px;color:var(--vantu-navy);flex-wrap:wrap}
.prose .kg-bookmark-icon{width:20px;height:20px;border-radius:4px}
.prose .kg-bookmark-author::after{content:"\2022";margin-left:var(--s-2)}
.prose .kg-bookmark-thumbnail{flex:0 0 33%;position:relative;min-height:100%}
.prose .kg-bookmark-thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}

.prose .kg-callout-card{
  display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5);
  border-radius:var(--radius);background:rgba(40,118,141,.1);border:1px solid rgba(40,118,141,.3);
}
.prose .kg-callout-emoji{font-size:24px;line-height:32px;flex:none}
.prose .kg-callout-text{font-size:var(--text-small);line-height:var(--lh-small);flex:1;min-width:0}
.prose .kg-callout-card-grey{background:rgba(130,123,128,.12);border-color:rgba(130,123,128,.35)}
.prose .kg-callout-card-white{background:#fff;border-color:rgba(130,123,128,.35)}
.prose .kg-callout-card-red,.prose .kg-callout-card-pink{background:rgba(240,58,71,.08);border-color:rgba(240,58,71,.35)}
.prose .kg-callout-card-yellow{background:rgba(245,190,40,.14);border-color:rgba(200,150,0,.4)}
.prose .kg-callout-card-green{background:rgba(40,150,90,.1);border-color:rgba(40,150,90,.35)}
.prose .kg-callout-card-accent{background:var(--vantu-navy);border-color:var(--vantu-navy);color:var(--vantu-cream)}
.prose .kg-callout-card-accent a{color:var(--petrol-light)}

/* Toggle: every panel is open until app.js enhances it, so the text is never
   hidden from a reader with no JavaScript. */
.prose .kg-toggle-card{border:1px solid rgba(130,123,128,.35);border-radius:var(--radius);padding:var(--s-4) var(--s-5);background:#fff}
.prose .kg-toggle-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4)}
.prose .kg-toggle-heading-text{font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:.02em;color:var(--vantu-navy);margin:0}
.prose .kg-toggle-card-icon{display:none;flex:none;width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;color:var(--vantu-navy)}
.prose .kg-toggle-card-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s var(--cubic-easing)}
.prose .kg-toggle-content{margin-top:var(--s-3);font-size:var(--text-small);line-height:var(--lh-small)}
.prose .kg-toggle-content p{font-size:inherit;line-height:inherit}
.prose .kg-toggle-card.is-enhanced .kg-toggle-card-icon{display:inline-flex;align-items:center;justify-content:center}
.prose .kg-toggle-card.is-enhanced .kg-toggle-heading{cursor:pointer}
.prose .kg-toggle-card.is-enhanced[data-kg-toggle-state="close"] .kg-toggle-content{display:none}
.prose .kg-toggle-card.is-enhanced[data-kg-toggle-state="open"] .kg-toggle-card-icon svg{transform:rotate(180deg)}

.prose .kg-button-card{display:flex;justify-content:flex-start}
.prose .kg-button-card.kg-align-center{justify-content:center}
.prose .kg-btn{
  display:inline-block;padding:var(--s-3) var(--s-5);border-radius:999px;
  font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:20px;
  border:1px solid var(--vantu-navy);color:var(--vantu-navy);
}
.prose .kg-btn-accent{background:var(--vantu-action);border-color:var(--vantu-action);color:#fff}
.prose .kg-btn-accent:hover{background:#b90d19;border-color:#b90d19}

.prose .kg-embed-card{display:flex;flex-direction:column;align-items:center}
.prose .kg-embed-card iframe{width:100%;max-width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius)}

/* The custom video overlay needs Ghost's script, which is not loaded. The
   markup gets native controls in blog.js instead. */
.prose .kg-video-card .kg-video-container{position:relative}
.prose .kg-video-overlay,.prose .kg-video-player-container,.prose .kg-video-thumbnail{display:none}
.prose .kg-video-card video{display:block;width:100%;height:auto;background:#000}

/* Newsletter signup, shared by the blog pages and (compact) the footer. */
.newsletter{
  margin-top:var(--s-9);padding:var(--s-7);border-radius:calc(var(--radius) * 3);
  background:var(--grad-surface);color:var(--vantu-cream);
  display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s-7);align-items:center;
}
.newsletter__title{color:var(--vantu-cream);font-size:var(--text-h2);line-height:var(--lh-h2)}
.newsletter__text{margin-top:var(--s-3);color:var(--vantu-cream);opacity:.88}
.newsletter__row{display:flex;gap:var(--s-3);flex-wrap:wrap}
.newsletter__label{flex:1 0 100%;font-size:14px;font-weight:700;color:var(--vantu-cream)}
.newsletter__input{
  flex:1 1 220px;min-width:0;font-family:var(--font-body);font-size:16px;line-height:24px;
  padding:var(--s-3) var(--s-4);border:1px solid rgba(245,242,242,.5);border-radius:999px;background:#fff;color:var(--ink);
}
.newsletter__input[aria-invalid="true"]{border-color:var(--vantu-red);box-shadow:0 0 0 2px var(--vantu-red)}
.newsletter__form .button[disabled]{opacity:.55}
.newsletter__consent{margin-top:var(--s-3);font-size:13px;line-height:20px;color:var(--vantu-cream);opacity:.85}
.newsletter__consent a{color:var(--vantu-cream)}
.newsletter__status{margin-top:var(--s-3);font-size:var(--text-small);line-height:var(--lh-small);color:var(--vantu-cream);font-weight:700}
.newsletter__status:empty{display:none}
.newsletter__status--ok{margin-top:0;font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:.02em;font-weight:400}
.newsletter__status:focus{outline:none}
@media screen and (max-width:900px){
  .newsletter{grid-template-columns:minmax(0,1fr);gap:var(--s-5);padding:var(--s-6) var(--s-5);margin-top:var(--s-8)}
}
/* Footer: no card, the footer is already navy. */
.newsletter--compact{display:block;margin-top:var(--s-6);padding:0;background:none;border-radius:0}
.newsletter--compact .footer__heading{margin-bottom:var(--s-3)}
.newsletter--compact .newsletter__input{flex-basis:160px;padding:var(--s-2) var(--s-4);font-size:15px}
.newsletter--compact .newsletter__consent{font-size:12px;line-height:18px}
.newsletter--compact .newsletter__status--ok{font-size:var(--text-body);line-height:var(--lh-small)}
.newsletter--compact .button{padding:var(--s-2) var(--s-4)}

@media screen and (max-width:640px){
  .prose .kg-bookmark-container{flex-direction:column-reverse}
  .prose .kg-bookmark-thumbnail{flex:none;min-height:0;aspect-ratio:16/9}
  .prose .kg-callout-card{padding:var(--s-4)}
  .prose .kg-toggle-card{padding:var(--s-4)}
  .pagination{flex-wrap:wrap;justify-content:center}
}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal{display:grid;grid-template-columns:260px 1fr;gap:var(--s-8);align-items:start}
.legal__toc{position:sticky;top:calc(var(--header-h) + var(--s-5))}
.legal__toc ol{list-style:none;display:grid;gap:var(--s-2);font-size:var(--text-small);line-height:var(--lh-small)}
.legal__toc a{color:var(--vantu-navy);text-decoration:none}
.legal__toc a:hover{text-decoration:underline}
.legal__tocMobile{display:none}
.legal__updated{color:var(--vantu-navy);font-size:var(--text-small);margin-top:var(--s-3)}
.legal__draft{
  border:1px solid var(--vantu-stone);border-left:4px solid var(--vantu-stone);
  border-radius:var(--radius);padding:var(--s-4) var(--s-5);
  color:var(--vantu-navy);margin-top:var(--s-5);max-width:68ch;
}
@media screen and (max-width:900px){
  .legal{grid-template-columns:1fr;gap:var(--s-5)}
  .legal__toc{display:none}
  .legal__tocMobile{display:block;border:1px solid var(--vantu-stone);border-radius:var(--radius);padding:var(--s-4)}
  .legal__tocMobile summary{cursor:pointer;font-weight:800}
}
@media print{
  .header,.touchMenu,.footer,.legal__toc,.legal__tocMobile,.skipLink{display:none}
  body{background:#fff;color:#000}
  .legal{grid-template-columns:1fr}
  .prose a::after{content:' (' attr(href) ')';font-size:.85em;word-break:break-all}
}

/* ==========================================================================
   Header over a dark hero. Cream type until the blurred backdrop arrives,
   at which point JavaScript drops the class and the default treatment returns.
   The class ships in the markup, so there is no flash of navy on navy before
   the script runs.
   ========================================================================== */
.header--overHero{color:var(--vantu-cream)}
.header--overHero .header__links a,
.header--overHero .header__logo{color:var(--vantu-cream)}
.header--overHero .header__barSlider{background:var(--petrol-light)}
.header--overHero .header__menu{border-color:rgba(245,242,242,.5)}
.header--overHero .header__menu path{stroke:var(--vantu-cream)}
/* Two logo files rather than a CSS filter, so the red star survives on navy.
   These selectors carry the class of the parent because `.header__logo img`
   already sets display and would otherwise win on specificity. */
.header__logo .header__logoLight{display:none}
.header--overHero .header__logo .header__logoDark{display:none}
.header--overHero .header__logo .header__logoLight{display:block}

/* ==========================================================================
   What is Vantu. One large panel holding a card per bullet, each card with a
   short graded clip behind it that plays on hover or focus.
   ========================================================================== */
.bigCard{
  background:var(--grad-surface);color:var(--vantu-cream);
  border-radius:calc(var(--radius) * 3);padding:var(--s-7);
}
.bigCard__head{max-width:70ch}
.bigCard .clipHeading__heading{color:var(--vantu-cream)}
.bigCard__lead{margin-top:var(--s-5);color:var(--vantu-cream);opacity:.88}
.bigCard__lead strong,.bigCard__pains strong{color:var(--vantu-cream);font-weight:800}
.bigCard__pains{margin-top:var(--s-4);list-style:none;display:grid;gap:var(--s-3);font-size:var(--text-small);line-height:var(--lh-small)}
.bigCard__pains li{position:relative;padding-left:var(--s-5);color:rgba(245,242,242,.85)}
.bigCard__pains li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--vantu-red)}
.bigCard__grid{
  margin-top:var(--s-6);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);
}
.vcard{
  position:relative;overflow:hidden;border-radius:calc(var(--radius) * 2);
  min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--vantu-navy);border:1px solid rgba(245,242,242,.16);
  isolation:isolate;
}
.vcard:focus-visible{outline:3px solid var(--vantu-cream);outline-offset:2px}
.vcard__media{position:absolute;inset:0;z-index:-1}
.vcard__video,.vcard__media img{
  width:100%;height:100%;object-fit:cover;transition:transform .6s var(--cubic-easing);
}
/* At rest the poster sits under the full navy veil. On hover the veil lifts
   and the clip plays clean; only a bottom scrim stays to hold the type. */
.vcard__veil{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,27,51,.55) 0%,rgba(11,27,51,.9) 70%);
  transition:opacity .45s var(--cubic-easing);
}
.vcard__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,27,51,0) 35%,rgba(11,27,51,.85) 100%);
}
.vcard.is-playing .vcard__veil{opacity:0}
.vcard.is-playing .vcard__video,
.vcard.is-playing .vcard__media img{transform:scale(1.04)}
.vcard__body{position:relative;padding:var(--s-5)}
.vcard__title{font-size:var(--text-h3);line-height:var(--lh-h3);color:var(--vantu-cream)}
.vcard__text{margin-top:var(--s-3);font-size:var(--text-small);line-height:var(--lh-small);color:var(--vantu-cream);opacity:.85}
@media screen and (max-width:1100px){ .bigCard__grid{grid-template-columns:1fr 1fr} }
@media screen and (max-width:767px){
  .bigCard{padding:var(--s-6);border-radius:calc(var(--radius) * 2)}
  .bigCard__grid{grid-template-columns:1fr}
  .vcard{min-height:220px}
}

/* ==========================================================================
   The Vantu Way. A horizontal timeline on desktop; the same markup stacks into
   native disclosures on mobile, so a tap opens a step and the keyboard works.
   ========================================================================== */
.timeline__lead{margin-top:var(--s-5);max-width:60ch;color:var(--ink)}
.timeline__lead strong{color:var(--vantu-navy);font-weight:800}
.timeline__hint{margin-top:var(--s-3);color:var(--vantu-stone);font-size:var(--text-small)}
.timeline{position:relative;margin-top:var(--s-8)}
.timeline__rail{
  position:absolute;left:0;right:0;top:31px;height:2px;
  background:rgba(130,123,128,.35);border-radius:2px;
}
.timeline__progress{
  display:block;height:100%;width:100%;background:var(--vantu-petrol);
  transform:scaleX(0);transform-origin:left center;border-radius:2px;
}
.timeline__steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7)}
.tstep{position:relative}
.tstep__disclosure{height:100%}
.tstep__summary{list-style:none;cursor:default;display:block}
.tstep__summary::-webkit-details-marker{display:none}
.tstep__dot{
  display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:var(--vantu-cream);border:2px solid var(--vantu-stone);
  font-family:var(--font-body);font-size:18px;font-weight:800;letter-spacing:.04em;color:var(--vantu-petrol);
  transition:border-color .3s var(--cubic-easing),background .3s var(--cubic-easing),transform .3s var(--cubic-easing);
}
.tstep__name{
  display:block;margin-top:var(--s-4);font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h3);line-height:var(--lh-h3);color:var(--vantu-navy);
}
.tstep__description{
  margin-top:var(--s-3);color:var(--ink);font-size:var(--text-small);line-height:var(--lh-small);
}
.tstep.is-active .tstep__dot{background:var(--vantu-petrol);border-color:var(--vantu-petrol);color:#fff;transform:scale(1.08)}
.tstep.is-active .tstep__name{color:var(--vantu-petrol)}
@media screen and (min-width:901px){
  /* Desktop shows every step at once. The disclosures are held open by app.js
     and hovering only moves the highlight. */
  .timeline__hint{display:none}
}
@media screen and (max-width:900px){
  .timeline__rail{left:23px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .timeline__progress{width:100%;height:100%;transform:scaleY(0);transform-origin:top center}
  .timeline__steps{grid-template-columns:1fr;gap:0;padding-left:var(--s-8)}
  .tstep{padding:var(--s-4) 0;border-bottom:1px solid rgba(130,123,128,.3)}
  .tstep__summary{cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:center}
  .tstep__dot{position:absolute;left:calc(-1 * var(--s-8));top:var(--s-3);width:48px;height:48px;font-size:15px}
  .tstep__summary{min-height:48px}
  .tstep__name{margin-top:0;font-size:var(--text-body);line-height:var(--lh-body)}
  .tstep__description{padding-bottom:var(--s-3)}
}

/* ==========================================================================
   Added Value. Dark panel over a graded clip.
   ========================================================================== */
.addedValue{position:relative;overflow:hidden;isolation:isolate}
.addedValue__media{position:absolute;inset:0;z-index:-1}
.addedValue__video,.addedValue__media img{width:100%;height:100%;object-fit:cover}
/* Contrast is checked against the brightest frame of the loop, not the poster,
   so the scrim is heavy enough to hold cream type over a lit window. */
.addedValue__scrim{position:absolute;inset:0;background:var(--grad-scrim);opacity:.85}
.addedValue__scrim::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,27,51,.93) 0%,rgba(11,27,51,.86) 45%,rgba(11,27,51,.95) 100%);
}
.addedValue__inner{position:relative}
.addedValue__head{max-width:60ch}
.addedValue__grid{margin-top:var(--s-8);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-8)}
.avItem{border-top:1px solid var(--petrol-light);padding-top:var(--s-4)}
.avItem__title{font-size:var(--text-h3);line-height:var(--lh-h3);color:var(--vantu-cream)}
.avItem__text{margin-top:var(--s-3);color:var(--vantu-cream);opacity:.85;font-size:var(--text-small);line-height:var(--lh-small)}
@media screen and (max-width:767px){ .addedValue__grid{grid-template-columns:1fr;gap:var(--s-6)} }

/* ==========================================================================
   Testimonials. Photo on top, then the person, then the quote.
   ========================================================================== */
.faq__block{margin-top:var(--s-9);display:flex;flex-direction:column}
.carousel{margin-top:var(--s-5);position:relative}
.carousel__track{
  display:flex;gap:var(--s-5);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:var(--s-2) 0 var(--s-5);cursor:grab;
  scrollbar-width:thin;scrollbar-color:var(--vantu-stone) transparent;
}
.carousel__track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.carousel__track::-webkit-scrollbar{height:6px}
.carousel__track::-webkit-scrollbar-thumb{background:var(--vantu-stone);border-radius:var(--radius)}
.tcard{
  flex:0 0 min(360px,78vw);scroll-snap-align:start;
  background:#fff;border:1px solid rgba(130,123,128,.35);border-radius:calc(var(--radius) * 2);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--cubic-easing),box-shadow .35s var(--cubic-easing);
}
.tcard__photo{position:relative;overflow:hidden}
.tcard__photo img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .5s var(--cubic-easing)}
/* Brand tint over the photo by default; hover or focus shows the original
   colour. Touch screens keep the tint. */
.tcard__photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(11,27,51,.55),rgba(40,118,141,.45));
  mix-blend-mode:multiply;transition:opacity .5s var(--cubic-easing);
}
.tcard__badge{
  position:absolute;left:var(--s-3);top:var(--s-3);
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vantu-navy);background:var(--vantu-cream);
  border-radius:var(--radius);padding:2px var(--s-2);
}
.tcard__person{padding:var(--s-5) var(--s-5) 0}
.tcard__name{font-weight:800;color:var(--vantu-navy)}
.tcard__role{color:var(--vantu-navy);opacity:.72;font-size:var(--text-small);line-height:var(--lh-small)}
.tcard__quote{
  padding:var(--s-4) var(--s-5) var(--s-5);
  font-family:var(--font-body);font-size:var(--text-body);line-height:var(--lh-body);
  color:var(--vantu-navy);max-width:none;
}
@media (hover:hover){
  .tcard:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,27,51,.16)}
  .tcard:hover .tcard__photo img{transform:scale(1.06)}
  .tcard:hover .tcard__photo::after{opacity:0}
}
.carousel__controls{display:flex;gap:var(--s-2);margin-top:var(--s-4)}
.carousel__btn{
  width:44px;height:44px;border-radius:var(--radius);border:1px solid var(--vantu-stone);
  background:none;color:var(--vantu-navy);cursor:pointer;font-size:18px;
}
.carousel__btn:hover{border-color:var(--vantu-navy)}
.carousel__btn[disabled]{opacity:.4;cursor:not-allowed}
@media screen and (max-width:900px){
  /* Mobile scrolls the strip directly, so the arrows are redundant. */
  .carousel__controls{display:none}
  .carousel__track{scroll-snap-type:x proximity}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--vantu-navy);color:var(--vantu-cream);padding:var(--s-8) var(--s-6) var(--s-6);font-size:13px;line-height:20px}
.footer__wrap{max-width:1180px;margin:0 auto;display:grid;gap:var(--s-7)}
.footer__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--s-7)}
.footer__mark{height:28px;width:auto;margin-bottom:var(--s-4)}
.footer__positioning{font-family:var(--font-display);font-size:16px;line-height:24px;color:var(--vantu-cream);max-width:24ch;margin-bottom:var(--s-5)}
.footer h2,.footer h3{color:var(--vantu-cream)}
.footer__heading{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol-light);margin-bottom:var(--s-4);font-family:var(--font-body)}
.footer__list{list-style:none;display:grid;gap:var(--s-1)}
.footer__list a{color:var(--vantu-cream);text-decoration:none}
.footer__list a:hover{text-decoration:underline}
.footer__blog a{display:block}
.footer__muted{color:var(--petrol-light)}
.footer__more{color:var(--petrol-light);font-weight:800;letter-spacing:.04em}
.footer__companies li{font-size:var(--text-small);line-height:var(--lh-small);color:var(--vantu-cream);opacity:.85}
/* A build-time placeholder marker, not brand signal. It deliberately does not
   use the action red: red is limited to three elements per viewport and a
   development marker should not be spending that budget. The go-live check is
   what actually stops these shipping. */
.footer__pendiente{
  display:inline-block;background:transparent;color:var(--vantu-cream);
  border:1px dashed rgba(245,242,242,.6);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:1px var(--s-2);border-radius:var(--radius);margin-right:var(--s-2);
}
.footer__socials{list-style:none;display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(245,242,242,.35);color:var(--vantu-cream);
}
.social svg{width:16px;height:16px;fill:currentColor}
.social:hover{border-color:var(--vantu-cream);background:rgba(245,242,242,.08)}
.footer__bottom{
  border-top:1px solid rgba(245,242,242,.2);padding-top:var(--s-5);
  display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;align-items:flex-end;
  font-size:12px;line-height:18px;opacity:.85;
}
.footer__bottom p{max-width:80ch}
/* Quiet by design: these are for crawlers and agents, not for a reader. */
.footer__agents{font-size:12px;line-height:18px;opacity:.45}
.footer__agents a{color:var(--petrol-light);text-decoration:none}
.footer__agents a:hover{text-decoration:underline}
@media screen and (max-width:1000px){ .footer__top{grid-template-columns:1fr 1fr} }
@media screen and (max-width:767px){
  .footer{padding:var(--s-8) var(--s-5) var(--s-7)}
  .footer__mark{height:40px}
  .social{width:48px;height:48px}
  .social svg{width:22px;height:22px}
  .footer__top{grid-template-columns:1fr;gap:var(--s-7)}
}

/* ==========================================================================
   Panel slider.
   The landing page ships as an ordinary scrolling document. app.js adds
   .is-snap to <html> only when the browser can take it and the visitor has not
   asked for reduced motion, and everything below activates then. With no
   JavaScript, or under reduced motion, the page simply scrolls, which is also
   what every other page does.
   ========================================================================== */
html.is-snap,
html.is-snap body{height:100%;overflow:hidden}

html.is-snap main[data-snap]{position:fixed;inset:0;overflow:hidden}
html.is-snap main[data-snap] > .panel{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  visibility:hidden;
}
html.is-snap main[data-snap] > .panel.is-current,
html.is-snap main[data-snap] > .panel.is-moving{visibility:visible}

/* A panel is at least a screen tall, and grows if its content needs more,
   in which case it scrolls inside itself before the slider advances. */
html.is-snap main[data-snap] > .panel.section{padding-top:0;padding-bottom:0}
html.is-snap main[data-snap] > .panel > .wrap{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--header-h) + var(--s-5));padding-bottom:var(--s-6);
}
html.is-snap main[data-snap] > .panel.hero > .wrap{display:block}
html.is-snap .hero{min-height:100svh}
/* A group holds several blocks that scroll as one panel. Only the first one
   clears the header. */
html.is-snap main[data-snap] > .panelGroup > .section:first-child{padding-top:calc(var(--header-h) + var(--s-7))}

/* Progress rail down the right edge, one tick per panel. */
/* The rail floats over whatever panel is showing, so it carries its own
   backdrop rather than relying on the content underneath being quiet. */
.panelNav{
  position:fixed;right:var(--s-4);top:50%;transform:translateY(-50%);
  z-index:95;display:none;flex-direction:column;gap:var(--s-3);
  padding:var(--s-3) var(--s-2);border-radius:999px;
  background:rgba(245,242,242,.55);backdrop-filter:blur(8px);
}
.panelNav--onDark{background:rgba(11,27,51,.45)}
html.is-snap .panelNav{display:flex}
/* The dot rail is desktop only, at the client's request. */
@media screen and (max-width:900px){ html.is-snap .panelNav{display:none} }
.panelNav__dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--vantu-stone);background:transparent;
  transition:background .25s var(--cubic-easing),transform .25s var(--cubic-easing),border-color .25s;
}
.panelNav__dot:hover{transform:scale(1.35)}
.panelNav__dot[aria-current="true"]{background:var(--vantu-petrol);border-color:var(--vantu-petrol);transform:scale(1.35)}
.panelNav--onDark .panelNav__dot{border-color:rgba(245,242,242,.6)}
.panelNav--onDark .panelNav__dot[aria-current="true"]{background:var(--vantu-cream);border-color:var(--vantu-cream)}
@media screen and (max-width:767px){
  .panelNav{right:var(--s-2);gap:var(--s-2);padding:var(--s-2) 5px}
  .panelNav__dot{width:7px;height:7px}
}
@media screen and (max-width:380px){ html.is-snap .panelNav{display:none} }
/* Frozen while a panel slides, so the gesture cannot scroll the incoming
   panel past its own content. */
html.is-snap main[data-snap].is-animating > .panel{overflow-y:hidden}

/* Dark mode follows the device setting. The navy cards stay as they are; what
   changes is every surface that sits on the cream ground. Trialled first on the
   font sampler and approved by the client on 2026-09-30. The html:root prefix keeps
   the weight the sampler's html[data-theme] selectors had. */
@media (prefers-color-scheme:dark){
  :root{
    --dark-ground:#07111F;
    --dark-surface:#11243F;
    --dark-line:rgba(245,242,242,.16);
    color-scheme:dark;
  }
  html:root body{background:var(--dark-ground);color:var(--vantu-cream)}
  html:root :is(h1,h2,h3,h4){color:var(--vantu-cream)}
  html:root .clipHeading__underline path{stroke:var(--petrol-light)}

  /* Header and menu on every width, not only mobile. */
  html:root .header{color:var(--vantu-cream)}
  html:root .header__backdrop,
  html:root .touchMenu{background:var(--vantu-navy)}
  html:root .header__links a,
  html:root .touchMenu__link{color:var(--vantu-cream)}
  html:root .header .header__logo .header__logoDark{display:none}
  html:root .header .header__logo .header__logoLight{display:block}
  html:root .header__barSlider{background:var(--petrol-light)}
  html:root .header__menu path{stroke:var(--vantu-cream)}
  html:root .langMenu__button{color:var(--vantu-cream);border-color:rgba(245,242,242,.5)}

  /* Figures */
  html:root .stat{background:var(--dark-surface);box-shadow:none;border:1px solid var(--dark-line)}
  html:root .stat__label,
  html:root .talent__sources{color:var(--vantu-cream)}
  html:root .stat__figure{color:var(--petrol-light)}

  /* Method */
  html:root :is(.timeline__lead,.timeline__lead strong,.tstep__name,.tstep__description){color:var(--vantu-cream)}
  html:root .tstep__dot{background:var(--dark-ground);color:var(--petrol-light)}
  html:root .tstep.is-active .tstep__name{color:var(--petrol-light)}

  /* Testimonials and FAQ */
  html:root .tcard{background:var(--dark-surface);border-color:var(--dark-line)}
  html:root :is(.tcard__name,.tcard__role,.tcard__quote,.carousel__btn){color:var(--vantu-cream)}
  html:root :is(.faq__summary,.faq__answer){color:var(--vantu-cream)}
  html:root .faq__item{border-color:var(--dark-line)}

  /* Blog, legal and for-ai pages */
  html:root :is(.emptyState,.pagination__count,.prose th,.prose figcaption,.legal__toc a,.legal__updated,.legal__draft){color:var(--vantu-cream)}
  html:root :is(.prose a,.talent__sources a){color:var(--petrol-light)}
  html:root .button:not([class*="button--"]){color:var(--vantu-cream)}
  html:root :is(.blogIndex__lead,.postCard__meta,.blogPost__feature figcaption,.prose strong,.prose blockquote,.prose h5,.prose h6,.prose td,.prose .kg-toggle-card-icon){color:var(--vantu-cream)}
  html:root .postCard,
  html:root .prose :is(.kg-bookmark-container,.kg-toggle-card,.kg-callout-card-white){background:var(--dark-surface);border-color:var(--dark-line);color:var(--vantu-cream)}
  html:root .postCard__title a,
  html:root .prose :is(.kg-bookmark-title,.kg-bookmark-metadata,.kg-toggle-heading-text){color:var(--vantu-cream)}
  html:root :is(.postCard__excerpt,.prose .kg-bookmark-description,.prose .kg-callout-text){color:var(--vantu-cream)}
  html:root :is(.postCard__more,.blogPost__back){color:var(--petrol-light)}
  html:root .postCard:hover{border-color:var(--petrol-light)}
  html:root .prose .kg-callout-card{background:var(--dark-surface);border-color:var(--dark-line);color:var(--vantu-cream)}
  html:root .prose .kg-callout-card-accent{background:var(--vantu-navy)}
  html:root .prose :not(pre)>code{background:rgba(75,143,166,.22)}
  html:root .prose pre{background:var(--dark-surface);border:1px solid var(--dark-line)}
  html:root .prose td{border-color:var(--dark-line)}
  html:root .prose li::marker{color:var(--petrol-light)}
  html:root .prose .kg-btn:not(.kg-btn-accent){color:var(--vantu-cream);border-color:var(--vantu-cream)}
  html:root .button--pill:not(.button--action){color:var(--vantu-cream)}
}