/* ==========================================================================
   Teknosell 2026 landing page
   Tokens derived verbatim from Teknosell Branding:
     - Branding/Semantic colors.png   (hexes pixel-sampled + label-verified)
     - Branding/Typography.png        (Montserrat ExtraBold / Source Sans Pro)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Oct 2026 redesign (PLAN.md §6, "Measured practice"). Navy and paper match the
     carousels on Kristian's LinkedIn; signal orange is the ONLY action colour and
     appears on buttons and nothing else. The old gold names are gone on purpose:
     decoration that used gold now uses the quiet --detail tokens. */
  /* Navy family */
  --blue-900:#143058;  --blue-800:#1B3F6C;  --blue-700:#2277AA;
  --blue-500:#7D9CBB;  --blue-300:#E1E6EE;  --blue-100:#F3F5F9;
  --paper:#F2EDE4;     --paper-deep:#ECE5D8;
  /* Action: signal orange. Light grounds use --action (white label, 4.6:1),
     navy grounds use --action-on-dark (navy label, 5.6:1). */
  --action:#C94F12;    --action-hover:#AE430F;
  --action-on-dark:#FF8A3D; --action-on-dark-hover:#FF9F5E;
  /* Quiet detail colour for rules, dashes, icons and marks (never for action) */
  --detail:#9FB0C4;    --detail-strong:#5F7388; --detail-soft:#DCE3EC;
  /* Red / green / grey */
  --red-600:#9F0912;   --red-500:#C70B16;   --red-100:#F4CED0;
  --green-500:#4DB363; --grey-500:#5F6B7A;
  --before:#7A8594;
  --white:#FFFFFF;

  /* Extended darks, same hue family as the navy, for section depth only */
  --ink-950:#0B1C38;   --ink-900:#0F2446;   --ink-800:#132C52;

  /* Semantic */
  --bg:               var(--white);
  --bg-subtle:        var(--paper);
  --bg-dark:          var(--blue-900);
  --content:          var(--blue-900);
  --content-title:    var(--blue-900);
  --content-subtle:   var(--grey-500);
  --content-inverted: var(--white);
  --border:           var(--blue-300);
  --accent:           var(--action);
  --focus:            #1F6FD1;
  /* body copy on light: navy softened for long-form legibility (5.9:1 on paper) */
  --content-body:#34506E;

  /* Type */
  --font-display:'Poppins', system-ui, sans-serif;
  --font-body:'Source Sans 3','Source Sans Pro', system-ui, sans-serif;

  /* Fluid scale */
  --t-hero:  clamp(2rem, 1.35rem + 2.4vw, 3.4rem);
  --t-xl:    clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  --t-lg:    clamp(1.45rem, 1.15rem + 1.2vw, 2rem);
  --t-md:    clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
  --t-body:  1.0625rem;
  --t-label: 0.8125rem;

  /* Space & shape: spacing in multiples of 8, two radii, one soft shadow */
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 6.5vw, 6.5rem);
  --maxw: 1200px;
  --r-sm:6px; --r-md:6px; --r-lg:8px; --r-xl:10px;

  --shadow-sm: 0 1px 2px rgba(20,48,88,.06);
  --shadow-md: 0 1px 2px rgba(20,48,88,.06), 0 8px 24px rgba(20,48,88,.07);
  --shadow-lg: 0 1px 2px rgba(20,48,88,.06), 0 12px 32px rgba(20,48,88,.10);
  --shadow-action: none;

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

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--content);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.08;
  letter-spacing:-.022em; color:var(--content-title); margin:0}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
/* UA stylesheet gives blockquote margin:1em 40px, which silently ate 40px of
   width from each testimonial card. figure gets the same treatment. */
blockquote,figure{margin:0}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
.on-dark :focus-visible{outline-color:var(--white)}
::selection{background:#FFD9C2; color:var(--blue-900)}

/* ---------- 3. Layout primitives ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--section-y); position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--dark{background:var(--bg-dark); color:var(--content-inverted)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white)}
.section--subtle{background:var(--bg-subtle)}
.grid{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
.grid--pillars{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.grid--pillars .card{padding:clamp(1.4rem,2vw,1.75rem)}
.grid--pillars .card h3{font-size:1.1875rem}
.grid--pillars .card p{font-size:.9688rem}
.center{text-align:center}
.stack-sm > * + *{margin-top:.75rem}
.stack   > * + *{margin-top:1.25rem}
.stack-lg> * + *{margin-top:2rem}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200; padding:.9rem 1.4rem;
  background:var(--action); color:var(--white); font-weight:700; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

/* ---------- 4. Typographic components ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:var(--t-label);
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-700);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--detail); border-radius:2px}
.section--dark .eyebrow,.whybuy .eyebrow,.contact .eyebrow,.on-dark .eyebrow{color:#B8C2CF}

/* Breadcrumb. Shared by the program pages and the legal pages, so it lives
   here rather than in either of their stylesheets. It sat in program.css to
   begin with, which left the legal pages rendering it as a stacked list. */
.crumbs{display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:#8FAAC3;
  margin-bottom:1.6rem; flex-wrap:wrap}
.crumbs a{color:#B7CCDF; transition:color .25s var(--ease)}
.crumbs a:hover{color:var(--detail)}
.crumbs svg{flex:0 0 auto; opacity:.55}
.crumbs [aria-current]{color:var(--white); font-weight:600}

.h-hero{font-size:var(--t-hero); letter-spacing:-.032em; line-height:1.02}
.h-xl{font-size:var(--t-xl)}
.h-lg{font-size:var(--t-lg)}
.h-md{font-size:var(--t-md); letter-spacing:-.012em}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.2rem); line-height:1.6; color:var(--content-body)}
.section--dark .lead,.whybuy .lead,.contact .lead,.hero .lead,.on-dark .lead{color:#C3D6E7}
.muted{color:var(--content-subtle)}
.measure{max-width:62ch}
.measure-sm{max-width:48ch}

/* Gold underline flourish on a key hero phrase */
.mark{position:relative; display:inline-block}
.mark::after{
  content:""; position:absolute; left:-.03em; right:-.03em; bottom:.005em; height:.16em;
  background:linear-gradient(90deg,var(--detail),var(--detail-strong));
  opacity:.92; border-radius:3px; z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-out) .6s;
}
.is-ready .mark::after{transform:scaleX(1)}

/* ---------- 5. Buttons ----------
   Orange is the action colour and nothing else uses it. On light grounds the
   button is --action with a white label; inside any .on-dark wrapper it switches
   to --action-on-dark with a navy label, because dark orange on navy is only 2.9:1.
   Hover changes colour only: no lift, no shine sweep. */
.btn{
  --btn-bg:var(--action); --btn-fg:var(--white); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.9rem 1.5rem; border-radius:100px; border:2px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-body); font-weight:700; font-size:1rem; letter-spacing:.005em;
  cursor:pointer; position:relative;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{--btn-bg:var(--action-hover)}
.btn .ico{transition:transform .2s var(--ease); flex:0 0 auto}
@media (hover:hover){ .btn:hover .ico{transform:translateX(3px)} }
.on-dark .btn,.on-dark .btn--primary{--btn-bg:var(--action-on-dark); --btn-fg:var(--blue-900)}
.on-dark .btn:hover,.on-dark .btn--primary:hover{--btn-bg:var(--action-on-dark-hover)}

.btn--primary{--btn-bg:var(--action); --btn-fg:var(--white)}
.btn--primary:hover{--btn-bg:var(--action-hover)}
/* Legacy blue button: now an alias of the primary, so there is one primary style */
.btn--blue{--btn-bg:var(--action); --btn-fg:var(--white)}
.btn--blue:hover{--btn-bg:var(--action-hover)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--blue-900); --btn-bd:var(--blue-300)}
.btn--ghost:hover{--btn-bd:var(--blue-900); --btn-bg:transparent}
.on-dark .btn--ghost{--btn-bg:transparent; --btn-fg:var(--white); --btn-bd:rgba(255,255,255,.35)}
.on-dark .btn--ghost:hover{--btn-bg:transparent; --btn-bd:rgba(255,255,255,.75)}
.btn--lg{min-height:54px; padding:1rem 1.9rem; font-size:1.0625rem}
.btn--block{width:100%}
/* Text link for secondary actions: navy on light, white on dark, never orange */
.tlink{font-weight:600; color:var(--blue-900); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1.5px}
.on-dark .tlink{color:var(--white)}

/* ---------- 6. Header / nav ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.header__inner{display:flex; align-items:center; gap:1.5rem; min-height:78px;
  transition:min-height .3s var(--ease)}
.header.is-stuck{
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--border); box-shadow:0 2px 20px rgba(16,62,103,.07);
}
.header.is-stuck .header__inner{min-height:66px}

.logo{display:flex; align-items:center; flex:0 0 auto}
.logo img{height:30px; width:auto; transition:filter .35s var(--ease)}
.header:not(.is-stuck):not(.is-nav-open) .logo img{filter:brightness(0) invert(1)}

.nav{display:flex; align-items:center; gap:.35rem; margin-left:auto}
.nav__link{
  position:relative; padding:.55rem .85rem; border-radius:8px;
  font-weight:600; font-size:.9688rem; color:rgba(255,255,255,.86);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:2px;
  background:var(--detail); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link:hover{color:var(--white)}
.header.is-stuck .nav__link{color:var(--blue-900)}
.header.is-stuck .nav__link:hover{color:var(--blue-700); background:var(--blue-100)}
.nav__cta{flex:0 0 auto; margin-left:.6rem}
.nav__cta .btn{min-height:40px; padding:.6rem 1.1rem; font-size:.9375rem}
.header:not(.is-stuck):not(.is-nav-open) .nav__cta .btn{--btn-bg:var(--action-on-dark); --btn-fg:var(--blue-900)}
/* Phones get "Let's talk" in the bar itself, beside the burger: inside the
   menu it was two taps away and nobody scrolled back up for it (2026-11-10). */
.header__cta{display:none}
.header:not(.is-stuck):not(.is-nav-open) .header__cta{--btn-bg:var(--action-on-dark); --btn-fg:var(--blue-900)}

.burger{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  margin-left:auto; width:46px; height:46px; border:0; border-radius:10px;
  background:rgba(255,255,255,.12); cursor:pointer; padding:0;
}
.header.is-stuck .burger,.header.is-nav-open .burger{background:var(--blue-100)}
.burger span{
  display:block; width:20px; height:2px; border-radius:2px; background:var(--white);
  transition:transform .3s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.burger span + span{margin-top:5px}
.header.is-stuck .burger span,.header.is-nav-open .burger span{background:var(--blue-900)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden; color:var(--white);
  background:
    radial-gradient(1100px 700px at 78% 12%, rgba(34,119,170,.42), transparent 62%),
    radial-gradient(760px 560px at 8% 92%, rgba(95,115,136,.18), transparent 60%),
    linear-gradient(158deg,var(--ink-900) 0%,var(--blue-900) 46%,#0A2740 100%);
  padding-block:calc(78px + clamp(1.75rem,3.2vw,3rem)) clamp(2.25rem,4.5vw,3.75rem);
}
.hero__bg{position:absolute; inset:0; z-index:-2; opacity:.30; mix-blend-mode:screen;
  object-fit:cover; width:100%; height:100%}
.hero__grid-lines{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(125,156,187,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,156,187,.08) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1000px 620px at 30% 40%, #000 0%, transparent 78%);
  mask-image:radial-gradient(1000px 620px at 30% 40%, #000 0%, transparent 78%);
}
.hero__inner{display:grid; grid-template-columns:1.06fr .94fr; align-items:center;
  gap:clamp(2rem,5vw,4.5rem)}
.hero h1{color:var(--white); max-width:16ch}
.hero .lead{max-width:50ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}
.hero__trust{display:flex; flex-wrap:wrap; align-items:center; gap:1.35rem;
  margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.14)}
.trust-item{display:flex; align-items:center; gap:.6rem; font-size:.9375rem; color:#BDD1E4}
.trust-item svg{flex:0 0 auto; color:var(--detail)}
.trust-item b{color:var(--white); font-weight:700}

.hero__visual{position:relative}
.hero__frame{position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.09)}
.hero__frame img{width:100%; height:100%; object-fit:cover}
.hero__frame::after{content:""; position:absolute; inset:0;
  background:linear-gradient(190deg, rgba(11,43,71,0) 40%, rgba(8,31,53,.82) 100%)}

.float-card{
  position:absolute; z-index:2; background:rgba(255,255,255,.97); color:var(--blue-900);
  border-radius:var(--r-lg); padding:1.05rem 1.25rem; box-shadow:var(--shadow-lg);
  animation:float 7s var(--ease) infinite;
}
.float-card--a{left:-1.5rem; bottom:12%; width:min(268px,80%)}
.float-card--b{right:-1rem; top:9%; width:min(216px,66%); animation-delay:-3.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

.fc__row{display:flex; align-items:center; gap:.7rem}
.fc__dot{width:10px; height:10px; border-radius:50%; background:var(--green-500); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(77,179,99,.7); animation:pulse 2.2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(77,179,99,.6)}
  70%{box-shadow:0 0 0 11px rgba(77,179,99,0)}
  100%{box-shadow:0 0 0 0 rgba(77,179,99,0)}
}
.fc__label{font-size:.75rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--grey-500)}
.fc__title{font-family:var(--font-display); font-weight:800; font-size:1.0625rem; line-height:1.25; margin-top:.35rem}
.fc__meta{font-size:.8438rem; color:var(--grey-500); margin-top:.2rem}
.fc__big{font-family:var(--font-display); font-weight:800; font-size:2.1rem; line-height:1;
  color:var(--blue-700); font-variant-numeric:tabular-nums}

.eq{display:flex; align-items:flex-end; gap:3px; height:22px; margin-left:auto}
.eq i{width:3px; border-radius:2px; background:var(--blue-700); animation:eq 1.05s ease-in-out infinite}
.eq i:nth-child(1){height:35%; animation-delay:-.9s}
.eq i:nth-child(2){height:75%; animation-delay:-.6s}
.eq i:nth-child(3){height:50%; animation-delay:-.35s}
.eq i:nth-child(4){height:95%; animation-delay:-.15s}
.eq i:nth-child(5){height:60%}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ---------- 8. Client logo wall ---------- */
.clients{background:var(--white); padding-block:clamp(2.5rem,4vw,3.5rem); border-bottom:1px solid var(--border)}
.clients__label{text-align:center; font-size:.8125rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey-500); margin-bottom:2rem}
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee__track{display:flex; width:max-content; animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee__group{display:flex; align-items:center; gap:clamp(2.5rem,6vw,5rem);
  padding-right:clamp(2.5rem,6vw,5rem)}
.client{flex:0 0 auto; height:38px; display:grid; place-items:center;
  filter:grayscale(1) opacity(.5); transition:filter .35s var(--ease), transform .35s var(--ease)}
.client:hover{filter:grayscale(0) opacity(1); transform:scale(1.06)}
.client img{max-height:38px; width:auto; object-fit:contain}
.client--text{font-family:var(--font-display); font-weight:800; font-size:1.5rem;
  letter-spacing:.28em; color:var(--blue-900); filter:opacity(.42); padding-left:.28em}
.client--text:hover{filter:opacity(1)}

/* ---------- 9. Split layout ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split--wide-left{grid-template-columns:1.1fr .9fr}
.split--wide-right{grid-template-columns:.9fr 1.1fr}
.split--top{align-items:start}
.section-head{max-width:660px; margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head.center{max-width:min(100%,860px); margin-inline:auto; text-align:center}
.section-head.center h2{max-width:18ch; margin-inline:auto}
.section-head.center .lead{max-width:60ch; margin-inline:auto}
.section-head h2{margin-top:1.1rem}
.section-head .lead{margin-top:1.1rem}

/* ---------- 10. Cards ---------- */
.card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2.1rem); position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--detail),var(--blue-700));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card h3{font-size:1.3125rem; margin-bottom:.6rem}
.card p{color:var(--content-body); font-size:1rem}

.icon-badge{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--blue-300),var(--blue-100));
  color:var(--blue-700); margin-bottom:1.15rem;
  transition:transform .4s var(--ease-out), background .4s var(--ease-out), color .4s var(--ease-out);
}
.card:hover .icon-badge{transform:scale(1.08) rotate(-4deg);
  background:linear-gradient(150deg,var(--detail),var(--detail-soft)); color:var(--blue-900)}
.icon-badge svg{width:27px; height:27px}

.pillar__num{position:absolute; top:1.1rem; right:1.35rem;
  font-family:var(--font-display); font-weight:800; font-size:2.6rem;
  color:var(--blue-100); line-height:1; user-select:none; transition:color .4s var(--ease)}
.card:hover .pillar__num{color:var(--detail-soft)}

/* ---------- 11. Decay-vs-practice chart ---------- */
.chart-card{background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.25rem); box-shadow:var(--shadow-md)}
.chart-legend{display:flex; flex-wrap:wrap; gap:1.35rem; margin-bottom:1.4rem}
.legend-item{display:flex; align-items:center; gap:.55rem; font-size:.9063rem; font-weight:600}
.legend-swatch{width:16px; height:4px; border-radius:2px; flex:0 0 auto}
.chart-svg{width:100%; height:auto; overflow:visible}
.chart-line{fill:none; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 2.1s var(--ease-out)}
.is-inview .chart-line{stroke-dashoffset:0}
.chart-area{opacity:0; transition:opacity 1.1s var(--ease) 1s}
.is-inview .chart-area{opacity:1}
.chart-dot{opacity:0; transition:opacity .5s var(--ease) 1.7s}
.is-inview .chart-dot{opacity:1}
.chart-txt{font-family:var(--font-body); font-size:12px; font-weight:700; fill:var(--grey-500)}
.chart-cap{display:flex; gap:1rem; margin-top:1.35rem; padding-top:1.35rem;
  border-top:1px dashed var(--border); font-size:.9375rem; color:var(--content-body)}
.chart-cap svg{flex:0 0 auto; color:var(--detail-strong); margin-top:2px}

/* ---------- 12. Why Buy Challenge ---------- */
.whybuy{position:relative; isolation:isolate; overflow:hidden; color:var(--white);
  background:linear-gradient(165deg,#0A2740,var(--ink-800) 55%,#0A2740)}
.whybuy__bg{position:absolute; inset:0; z-index:-1; object-fit:cover; width:100%; height:100%;
  opacity:.22; mix-blend-mode:luminosity}
.whybuy__glow{position:absolute; z-index:-1; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(95,115,136,.20), transparent 68%);
  top:-14%; right:-8%; filter:blur(20px); pointer-events:none}
.whybuy h2,.whybuy h3{color:var(--white)}

.callmock{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:1.35rem 1.5rem; backdrop-filter:blur(8px)}
.callmock__head{display:flex; align-items:center; gap:.65rem; padding-bottom:.9rem;
  margin-bottom:1.1rem; border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-500)}
.bubble{position:relative; padding:.8rem 1.05rem; border-radius:14px; font-size:1.0313rem;
  line-height:1.5; max-width:92%}
.bubble + .bubble{margin-top:.7rem}
.bubble--coach{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13);
  border-bottom-left-radius:4px; color:#DCE8F3}
.bubble--objection{background:rgba(199,11,22,.16); border:1px solid rgba(199,11,22,.45);
  border-bottom-left-radius:4px; color:#FFD9DC}
.bubble--you{background:rgba(95,115,136,.14); border:1px solid rgba(95,115,136,.42);
  border-bottom-right-radius:4px; margin-left:auto; color:var(--detail-soft); font-weight:600}
.bubble__who{display:block; font-size:.6875rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; opacity:.62; margin-bottom:.28rem}
.typing{display:inline-flex; gap:4px; align-items:center; height:1.5em}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--detail);
  animation:typing 1.3s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.28; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}

.video-ph{position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/9;
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12);
  background:var(--ink-950); cursor:pointer; display:block; width:100%;
  border:0; padding:0; color:inherit; text-align:left}
.video-ph img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out), filter .5s var(--ease)}
.video-ph:hover img{transform:scale(1.045); filter:brightness(1.06)}
.video-ph__scrim{position:absolute; inset:0;
  background:linear-gradient(200deg,rgba(10,39,64,.25) 0%,rgba(8,31,53,.85) 92%)}
.video-ph__play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  background:var(--detail); color:var(--blue-900);
  box-shadow:0 12px 34px rgba(0,0,0,.4); transition:transform .35s var(--ease-out)}
.video-ph__play svg{margin-left:5px; width:30px; height:30px}
.video-ph__play::before{content:""; position:absolute; inset:-10px; border-radius:50%;
  border:2px solid rgba(95,115,136,.55); animation:ring 2.6s var(--ease) infinite}
@keyframes ring{
  0%{transform:scale(.86); opacity:.85}
  70%{transform:scale(1.34); opacity:0}
  100%{transform:scale(1.34); opacity:0}
}
.video-ph:hover .video-ph__play{transform:translate(-50%,-50%) scale(1.09)}
.video-ph__meta{position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.75rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem}
.video-ph__title{font-family:var(--font-display); font-weight:800; color:var(--white);
  font-size:clamp(1.05rem,.9rem + .6vw,1.45rem); line-height:1.2}
.video-ph__sub{font-size:.875rem; color:#AEC6DC; margin-top:.3rem}
.chip-time{flex:0 0 auto; padding:.35rem .75rem; border-radius:100px; font-size:.8125rem;
  font-weight:700; background:rgba(0,0,0,.55); color:var(--white);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px)}
.video-ph__badge{
  position:absolute; top:1.1rem; left:1.1rem; padding:.4rem .85rem; border-radius:100px;
  font-size:.6875rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(95,115,136,.92); color:var(--blue-900);
}

.steps{counter-reset:step; display:grid; gap:.85rem}
.step{position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  align-items:start; padding:1.15rem 1.35rem;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-md);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease-out)}
.step::after{content:""; position:absolute; left:2.52rem; top:100%; width:2px; height:.85rem;
  background:linear-gradient(rgba(95,115,136,.5),transparent)}
.step:last-child::after{display:none}
.step:hover,.step.is-active{background:rgba(95,115,136,.11);
  border-color:rgba(95,115,136,.5); transform:translateX(5px)}
.step__num{counter-increment:step; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; flex:0 0 auto;
  background:rgba(95,115,136,.16); border:1px solid rgba(95,115,136,.42);
  color:var(--detail); font-family:var(--font-display); font-weight:800; font-size:1rem;
  transition:background .35s var(--ease), color .35s var(--ease)}
.step__num::before{content:counter(step,decimal-leading-zero)}
.step:hover .step__num,.step.is-active .step__num{background:var(--detail); color:var(--blue-900)}
.step__title{font-family:var(--font-display); font-weight:800; font-size:.9375rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--detail)}
.step__body{margin-top:.3rem; font-size:1rem; color:#C6D8E8; line-height:1.55}

.note-strip{display:flex; gap:.9rem; align-items:flex-start; margin-top:1.5rem;
  padding:1rem 1.25rem; border-radius:var(--r-md);
  background:rgba(125,156,187,.10); border-left:3px solid var(--blue-500);
  font-size:.9688rem; color:#C6D8E8}
.note-strip svg{flex:0 0 auto; color:var(--blue-500); margin-top:2px}

/* ---------- 13. Results / counters ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2rem)}
.stat{background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.6vw,2.15rem); position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out)}
.stat:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.stat__label{font-weight:700; font-size:1.0313rem; color:var(--blue-900); min-height:3em}
.stat__nums{display:flex; align-items:baseline; gap:.6rem; margin:1.2rem 0 .9rem}
.stat__from{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--grey-500)}
.stat__arrow{color:var(--detail); flex:0 0 auto; align-self:center}
.stat__to{font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(2.6rem,2rem + 2.2vw,3.6rem); color:var(--blue-700); font-variant-numeric:tabular-nums}
.stat__bar{height:9px; border-radius:100px; background:var(--blue-100); overflow:hidden; position:relative}
.stat__ghost{position:absolute; top:0; bottom:0; left:0; z-index:2; border-radius:100px;
  background:var(--blue-800); opacity:.85;
  box-shadow:2px 0 0 rgba(255,255,255,.9)}
.stat__fill{position:absolute; inset:0 auto 0 0; z-index:1; width:0; border-radius:100px;
  background:linear-gradient(90deg,var(--blue-700),var(--detail));
  transition:width 1.8s var(--ease-out) .25s}
.stat__foot{display:flex; justify-content:space-between; margin-top:.65rem;
  font-size:.8125rem; font-weight:600; color:var(--grey-500)}

/* ---------- 14. Programs ---------- */
.programs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,1.85rem)}
.program{position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.6vw,2.15rem); overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease)}
.program::after{content:""; position:absolute; right:-58px; bottom:-58px; width:170px; height:170px;
  border-radius:50%; background:linear-gradient(140deg,var(--blue-100),transparent);
  transition:transform .55s var(--ease-out)}
.program:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:transparent}
.program:hover::after{transform:scale(1.5)}
.program > *{position:relative; z-index:1}
.program h3{font-size:1.375rem; margin:1.1rem 0 .65rem}
.program p{color:var(--content-body)}
.program__list{margin-top:1.25rem; display:grid; gap:.5rem; flex:1}
.program__list li{display:flex; gap:.6rem; align-items:flex-start; font-size:.9375rem; color:var(--content-body)}
.program__list svg{flex:0 0 auto; color:var(--green-500); margin-top:4px}
/* Photo header. The card owns the padding, so the thumbnail has to pull back
   out of it on three sides to reach the card edge.
   The clipping lives on .program__shot, not here: the icon badge deliberately
   straddles the bottom edge of the photo, and an overflow:hidden on the outer
   element sliced its lower third off. */
.program__thumb{
  position:relative; display:block;
  margin:calc(-1 * clamp(1.6rem,2.6vw,2.15rem)) calc(-1 * clamp(1.6rem,2.6vw,2.15rem)) 0;
}
.program__shot{position:relative; display:block; overflow:hidden;
  aspect-ratio:16/8; background:var(--blue-100)}
.program__shot img{width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease-out)}
.program:hover .program__shot img{transform:scale(1.05)}
.program__shot::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,62,103,0) 45%, rgba(11,43,71,.42) 100%)}
.program__thumb .icon-badge{
  position:absolute; z-index:2; left:1.1rem; bottom:-18px; margin-bottom:0;
  width:52px; height:52px; border-radius:15px;
  box-shadow:0 6px 18px rgba(16,62,103,.16), 0 0 0 4px var(--white);
  background:linear-gradient(150deg,var(--white),var(--blue-100));
}
.program__thumb .icon-badge svg{width:24px; height:24px}
.program:hover .program__thumb .icon-badge{
  background:linear-gradient(150deg,var(--detail),var(--detail-soft)); color:var(--blue-900)}
.program .program__thumb + h3{margin-top:2.15rem}

.program__meta{margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--blue-300);
  font-size:.8125rem; font-weight:600; letter-spacing:.03em; color:var(--content-subtle)}
.programs__foot{margin-top:clamp(1.75rem,3vw,2.5rem); text-align:center;
  font-size:1rem; color:var(--content-body)}
.programs__foot a{color:var(--blue-700); font-weight:700; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:2px;
  text-decoration-color:rgba(34,119,170,.35); transition:text-decoration-color .25s var(--ease)}
.programs__foot a:hover{text-decoration-color:var(--detail)}

.program__link{margin-top:1.1rem; display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; color:var(--blue-700); font-size:.9688rem}
.program__link svg{transition:transform .3s var(--ease)}
.program:hover .program__link svg{transform:translateX(5px)}

/* ---------- 15. Testimonials ---------- */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,2.5vw,2rem)}
.quote{position:relative; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg);
  padding:clamp(1.75rem,3vw,2.5rem); display:flex; flex-direction:column;
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out)}
.quote:hover{background:rgba(255,255,255,.08); border-color:rgba(95,115,136,.4); transform:translateY(-4px)}
.quote__mark{font-family:var(--font-display); font-size:5rem; line-height:.7; color:var(--detail);
  opacity:.32; margin-bottom:.4rem; user-select:none}
.quote__text{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem); line-height:1.6; color:#E3EDF6; flex:1}
.quote__text em{color:var(--detail-soft); font-style:normal; font-weight:600}
.quote__foot{display:flex; align-items:center; gap:1rem; margin-top:1.75rem;
  padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.13)}
.quote__avatar{width:50px; height:50px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue-700),var(--blue-800));
  color:var(--white); font-family:var(--font-display); font-weight:800; font-size:1.0625rem;
  border:1px solid rgba(255,255,255,.2)}
.quote__name{display:block; font-weight:700; color:var(--white); font-size:1.0313rem}
.quote__role{display:block; font-size:.875rem; color:var(--blue-500)}

/* ---------- 16. Process ---------- */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); position:relative}
.process::before{content:""; position:absolute; left:12%; right:12%; top:32px; height:2px;
  background:repeating-linear-gradient(90deg,var(--blue-300) 0 9px,transparent 9px 18px)}
.proc{position:relative; text-align:center}
.proc__num{width:64px; height:64px; border-radius:50%; margin:0 auto 1.35rem;
  display:grid; place-items:center; position:relative; z-index:1;
  background:var(--white); border:2px solid var(--blue-300); color:var(--blue-700);
  font-family:var(--font-display); font-weight:800; font-size:1.375rem;
  transition:transform .4s var(--ease-out), background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), box-shadow .4s var(--ease)}
.proc:hover .proc__num{background:var(--detail); border-color:var(--detail); color:var(--blue-900);
  transform:scale(1.1) translateY(-3px); box-shadow:var(--shadow-action)}
.proc h3{font-size:1.1875rem; margin-bottom:.5rem}
.proc p{color:var(--content-body); font-size:.9688rem; max-width:30ch; margin-inline:auto}

/* ---------- 17. Trust ---------- */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem)}
.trust-card{background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
  padding:1.5rem 1.35rem; text-align:center;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out)}
.trust-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm)}
.trust-card svg{width:34px; height:34px; color:var(--blue-700); margin:0 auto .85rem}
.trust-card b{display:block; font-family:var(--font-display); font-weight:800; font-size:1.0625rem; color:var(--blue-800)}
.trust-card span{display:block; font-size:.875rem; color:var(--grey-500); margin-top:.25rem}

/* ---------- 18. Contact / form ---------- */
.contact{background:linear-gradient(165deg,#0A2740,var(--blue-900) 60%,#0A2740);
  color:var(--white); position:relative; overflow:hidden}
.contact__glow{position:absolute; width:720px; height:720px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(34,119,170,.28),transparent 68%);
  left:-16%; bottom:-34%; filter:blur(10px)}
.contact__inner{position:relative; z-index:1; display:grid;
  grid-template-columns:.92fr 1.08fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start}
.contact h2{color:var(--white)}
.contact__points{margin-top:2.25rem; display:grid; gap:1.15rem}
.cpoint{display:flex; gap:.9rem; align-items:flex-start}
.cpoint svg{flex:0 0 auto; color:var(--detail); margin-top:3px}
.cpoint b{display:block; color:var(--white); font-weight:700; margin-bottom:.15rem}
.cpoint span{font-size:.9375rem; color:#AEC6DC}

.form-card{background:var(--white); color:var(--blue-900); border-radius:var(--r-xl);
  padding:clamp(1.65rem,3vw,2.5rem); box-shadow:var(--shadow-lg)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.field{display:flex; flex-direction:column; gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-size:.875rem; font-weight:700; color:var(--blue-800)}
.field label .req{color:var(--red-500)}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem .95rem; border-radius:var(--r-sm);
  border:1.5px solid var(--blue-300); background:var(--white); color:var(--blue-900);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:#A9B8C8}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-500)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue-700); box-shadow:0 0 0 4px rgba(34,119,170,.14)}
.field textarea{resize:vertical; min-height:112px}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23185182' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem}
.field .err{font-size:.8125rem; font-weight:600; color:var(--red-500); display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:var(--red-500); background:#FFF8F8}
.field.is-invalid input:focus,.field.is-invalid select:focus,.field.is-invalid textarea:focus{
  box-shadow:0 0 0 4px rgba(199,11,22,.13)}
.field.is-invalid .err{display:block}

.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.875rem; color:var(--content-body)}
.consent input{width:19px; height:19px; flex:0 0 auto; margin-top:2px; accent-color:var(--blue-700); cursor:pointer}
.consent a{color:var(--blue-700); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.form-notice{margin:0; font-size:.875rem; color:var(--content-body)}
.form-notice a{color:var(--blue-700); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.form-foot{margin-top:1.5rem; display:grid; gap:1rem}
.form-note{font-size:.8125rem; color:var(--grey-500); text-align:center}

.form-status{display:none; gap:.7rem; align-items:flex-start; padding:.9rem 1.1rem;
  border-radius:var(--r-sm); font-size:.9375rem; font-weight:600; margin-bottom:1.25rem}
.form-status.is-shown{display:flex}
.form-status--ok{background:#EAF7EE; color:#256B36; border:1px solid #B7E3C3}
.form-status--err{background:#FDF2F2; color:var(--red-600); border:1px solid var(--red-100)}
.form-status svg{flex:0 0 auto; margin-top:2px}

.btn[aria-busy="true"]{pointer-events:none; opacity:.72}
.spinner{width:17px; height:17px; border-radius:50%; flex:0 0 auto;
  border:2.5px solid rgba(16,62,103,.25); border-top-color:var(--blue-900);
  animation:spin .7s linear infinite; display:none}
.btn[aria-busy="true"] .spinner{display:block}
.btn[aria-busy="true"] .ico{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.form-done{display:none; text-align:center; padding:1.5rem .5rem}
.form-done.is-shown{display:block}
.form-done__tick{width:74px; height:74px; border-radius:50%; margin:0 auto 1.35rem;
  display:grid; place-items:center; background:#EAF7EE; color:var(--green-500);
  animation:pop .5s var(--ease-out)}
@keyframes pop{0%{transform:scale(.4); opacity:0}100%{transform:scale(1); opacity:1}}

/* ---------- 19. Footer ---------- */
.footer{background:var(--ink-950); color:#A8C0D6; padding-block:clamp(3rem,5vw,4.5rem) 2rem; font-size:.9375rem}
.footer__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1)}
.footer img.flogo{height:28px; filter:brightness(0) invert(1); opacity:.95}
.footer h4{color:var(--white); font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--font-body); font-weight:700; margin-bottom:1.1rem}
.footer li + li{margin-top:.6rem}
.footer a{transition:color .25s var(--ease)}
.footer a:hover{color:var(--detail)}
.footer__bottom{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  align-items:center; padding-top:1.75rem; font-size:.875rem; color:#7692AC}
/* Legal identity. A B2B site with no company name, address or email anywhere
   on it reads as a landing page rather than a business. */
.fcontact{display:grid; gap:.2rem; margin-top:1.15rem; font-style:normal; font-size:.875rem;
  line-height:1.5; color:#8AA3BA}
.fcontact span:first-child{color:#C3D6E7; font-weight:600}
.fcontact a{color:#A8C0D6; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(168,192,214,.35); transition:color .25s var(--ease)}
.fcontact a:hover{color:var(--detail)}

.social{display:flex; gap:.6rem; margin-top:1.25rem}
.social a{width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease)}
.social a:hover{background:var(--blue-900); color:var(--white); border-color:transparent}

/* ---------- 20. Scroll reveal & utilities ---------- */
/* Oct 2026: nothing fades in on scroll (PLAN.md §6, motion). Content is visible at
   rest, with or without JS. The .reveal class stays only as the hook main.js uses
   to fill the result bars once. */
.reveal{opacity:1; transform:none}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

.totop{position:fixed; right:1.5rem; bottom:1.5rem; z-index:90;
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; display:grid;
  place-items:center; background:var(--blue-700); color:var(--white);
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .25s}
.totop.is-shown{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--blue-800)}

/* ---------- 21. Responsive ---------- */
@media (max-width:1024px){
  .split,.split--wide-left,.split--wide-right{grid-template-columns:1fr}
  .contact__inner{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .header__inner{position:relative}
  .burger{display:flex}
  .nav{
    /* .header__inner is the .wrap itself, so its padding box already runs edge
       to edge: 0, not minus the gutter (that put the links on the screen edge). */
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); padding:.5rem var(--gutter) 1.25rem;
    border-bottom:1px solid var(--border); box-shadow:var(--shadow-md);
    display:none; margin-left:0;
  }
  .nav.is-open{display:flex}
  .nav__link{color:var(--blue-900); padding:.9rem .25rem; font-size:1.0625rem;
    border-bottom:1px solid var(--blue-100); border-radius:0}
  .nav__link::after{display:none}
  .nav__cta{margin:1rem 0 0}
  .nav__cta .btn{width:100%; padding:.9rem 1.3rem; font-size:1rem}
  .header__cta{display:inline-flex; margin-left:auto; min-height:40px; padding:.5rem .95rem; font-size:.9375rem; white-space:nowrap}
  .header__cta + .burger{margin-left:.6rem}
  /* the open menu shows its own full-width button */
  .header.is-nav-open .header__cta{visibility:hidden}
  .header.is-nav-open{background:var(--white); border-bottom-color:transparent}
  .stats,.programs,.process{grid-template-columns:1fr}
  .process::before{display:none}
  .form-grid{grid-template-columns:1fr}
  .float-card--a{left:-.5rem; bottom:6%}
  .float-card--b{right:-.5rem}
}
@media (max-width:520px){
  .trust-grid,.footer__top{grid-template-columns:1fr}
  /* The back-to-top button is fixed over the bottom right corner, and at this
     width it landed on the last line of the footer. */
  .footer__bottom{padding-bottom:3.5rem}
  .hero__frame{aspect-ratio:3/4}
  .video-ph__play{width:66px; height:66px}
  .video-ph__play svg{width:23px; height:23px}
  .video-ph__meta{padding:1.1rem 1.15rem; flex-direction:column; align-items:flex-start}
  .hero__actions .btn{width:100%}
  .float-card--b{display:none}
}

/* ---------- 22. Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .chart-line{stroke-dashoffset:0}
  .marquee__track{animation:none}
}

/* ==========================================================================
   23. v2 components: personal brand, figures, corner band
   ========================================================================== */

/* ---------- Hero portrait cut-out (replaces the framed photo) ---------- */
.hero__visual--person{
  display:flex; align-items:flex-end; justify-content:center;
  min-height:clamp(380px,42vw,560px);
}
.hero__person{
  width:100%; max-width:520px; height:auto; position:relative; z-index:1;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.55));
  /* fade the crop line at the bottom into the hero gradient */
  -webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.55) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.55) 92%,transparent 100%);
}
/* soft halo so the cut-out sits in the scene rather than on top of it */
.hero__visual--person::before{
  content:""; position:absolute; z-index:0; left:50%; bottom:2%;
  width:min(560px,92%); aspect-ratio:1/1; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(34,119,170,.34), transparent 66%);
  filter:blur(8px); pointer-events:none;
}
.hero__person-tag{
  position:absolute; z-index:2; left:0; bottom:0;
  display:flex; flex-direction:column; line-height:1.3;
  padding:.7rem 1.1rem; border-radius:var(--r-md);
  background:rgba(8,31,53,.72); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.hero__person-tag b{color:var(--white); font-weight:700; font-size:.9688rem}
.hero__person-tag span{color:var(--blue-500); font-size:.8125rem}

/* ---------- Figures with captions ---------- */
.figure{margin:0}
.figure img{width:100%; height:auto; border-radius:var(--r-lg); box-shadow:var(--shadow-md)}
.figure figcaption{
  margin-top:.9rem; font-size:.9063rem; color:var(--grey-500);
  padding-left:.9rem; border-left:2px solid var(--detail); line-height:1.5;
}
.figure--card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:.75rem .75rem 1.25rem; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.figure--card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.figure--card img{box-shadow:none; border-radius:var(--r-md)}
.figure--card figcaption{
  margin:1.1rem .6rem 0; border-left:0; padding-left:0;
  color:var(--content-body); font-size:.9688rem;
}
.figure--card figcaption b{color:var(--blue-800); font-weight:700}

.people-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,2.5vw,2rem)}

/* ---------- Corner band (boxing corner, full-bleed feel) ---------- */
.corner-band{
  position:relative; margin-top:clamp(2.5rem,5vw,4rem);
  border-radius:var(--r-xl); overflow:hidden; isolation:isolate;
  min-height:clamp(280px,32vw,420px); display:flex; align-items:flex-end;
  box-shadow:var(--shadow-lg);
}
.corner-band img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
}
.corner-band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(8,31,53,.92) 0%, rgba(8,31,53,.72) 42%, rgba(8,31,53,.15) 100%);
}
.corner-band__copy{
  padding:clamp(1.75rem,3.5vw,3rem); max-width:min(100%,540px); color:var(--white);
}
.corner-band__copy h3{color:var(--white)}
.corner-band__copy p{margin-top:.9rem; color:#C6D8E8; font-size:1.0625rem; line-height:1.6}

/* ---------- Founder note ---------- */
.founder__card{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  background:linear-gradient(150deg,var(--blue-100),var(--white) 60%);
  border:1px solid var(--border); border-radius:var(--r-xl);
  padding:clamp(1.75rem,3.5vw,3rem); box-shadow:var(--shadow-sm);
}
.founder__portrait{position:relative; display:flex; justify-content:center}
.founder__portrait::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px,96%); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle,var(--blue-300),transparent 68%);
}
.founder__portrait img{position:relative; width:100%; max-width:400px; height:auto}
.founder__sign{
  margin-top:1.75rem; padding-top:1.35rem; border-top:1px solid var(--border);
  display:flex; flex-direction:column; line-height:1.4;
}
.founder__sign b{font-family:var(--font-display); font-weight:800; color:var(--blue-800); font-size:1.0625rem}
.founder__sign span{color:var(--grey-500); font-size:.9063rem}

/* ---------- v2 responsive ---------- */
@media (max-width:1024px){
  .people-grid{grid-template-columns:1fr}
  .founder__card{grid-template-columns:1fr; text-align:left}
  .founder__portrait img{max-width:260px}
  .corner-band::after{
    background:linear-gradient(180deg, rgba(8,31,53,.35) 0%, rgba(8,31,53,.9) 62%);
  }
  .corner-band__copy{max-width:none}
}
@media (max-width:860px){
  .hero__visual--person{min-height:0; margin-top:.5rem}
  .hero__person{max-width:400px}
  .hero__person-tag{left:50%; transform:translateX(-50%); bottom:-.5rem; text-align:center; align-items:center}
}

/* ---------- Hero portrait: layout corrections ---------- */
.hero__visual--person .float-card--a{left:-4%; bottom:15%; width:min(258px,72%)}
.hero__visual--person .float-card--b{right:-2%; top:4%; width:min(212px,60%)}
.hero__visual--person .hero__person-tag{left:auto; right:0; bottom:1%}
@media (max-width:1024px){
  .hero__visual--person .float-card--a{left:0; bottom:12%}
  .hero__visual--person .float-card--b{right:0}
}

/* ---------- Hero portrait on small screens: stack the name tag ---------- */
@media (max-width:860px){
  .hero__visual--person{flex-direction:column; align-items:center}
  .hero__visual--person .hero__person-tag{
    position:static; transform:none; margin-top:1rem; padding:0;
    align-items:center; text-align:center;
    background:transparent; border:0; backdrop-filter:none;
  }
  .hero__visual--person .float-card--a{left:0; bottom:24%}
  .hero__visual--person .float-card--b{right:0; top:0}
}
@media (max-width:520px){
  .hero__visual--person .float-card--a{bottom:20%; width:min(240px,82%)}
}

/* ---------- Video placeholder on small screens ---------- */
@media (max-width:640px){
  .video-ph__play{top:36%}
  .video-ph__sub{display:none}
  .video-ph__title{font-size:1rem}
  .video-ph__meta{flex-direction:row; align-items:flex-end; gap:.75rem; padding:1rem 1.1rem}
  .video-ph::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:45%;
    background:linear-gradient(transparent, rgba(8,31,53,.9)); pointer-events:none;
  }
  .video-ph__meta{z-index:1}
}

/* ==========================================================================
   24. Hero portrait composition (v2.1)
   The cut-out is now cropped tight to the subject, so it no longer needs the
   large min-height that was compensating for empty space in the old asset.
   ========================================================================== */
.hero__visual--person{
  align-items:center;
  min-height:0;
  padding-block:0;
}
.hero__person{
  max-width:min(100%,468px);
  /* only the very bottom edge feathers into the gradient */
  -webkit-mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,.6) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,.6) 96%,transparent 100%);
}
.hero__visual--person::before{bottom:6%; width:min(500px,88%)}

/* Cards sit clear of the face and beard: one low over the chest, one high
   beside the head, neither crossing the jawline. */
.hero__visual--person .float-card--a{left:-8%; bottom:4%;  top:auto; width:min(252px,68%)}
.hero__visual--person .float-card--b{right:-4%; top:6%;    bottom:auto; width:min(208px,56%)}
.hero__visual--person .hero__person-tag{left:auto; right:-2%; bottom:16%}

@media (max-width:1200px){
  .hero__visual--person .float-card--a{left:-4%}
  .hero__visual--person .float-card--b{right:-1%}
  .hero__visual--person .hero__person-tag{right:0}
}

/* Small-screen overrides must follow section 24, or its unscoped
   .hero__visual--person rules win on equal specificity. */
@media (max-width:860px){
  .hero__visual--person{flex-direction:column; align-items:center}
  .hero__person{max-width:min(100%,380px)}
  .hero__visual--person .hero__person-tag{
    position:static; right:auto; bottom:auto; transform:none;
    margin-top:1rem; padding:0; align-items:center; text-align:center;
    background:transparent; border:0; backdrop-filter:none;
  }
  .hero__visual--person .float-card--a{left:0; bottom:22%; width:min(248px,72%)}
  .hero__visual--person .float-card--b{right:0; top:2%}
}
@media (max-width:520px){
  .hero__visual--person .float-card--a{bottom:18%; width:min(236px,80%)}
}


/* ---------- Hero stays two-column on narrow desktop windows ---------- */
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr; gap:2.5rem}
  .hero__visual{max-width:520px; margin-inline:auto; width:100%}
  .hero h1{max-width:none}
}
@media (min-width:901px) and (max-width:1120px){
  .hero__inner{gap:2rem}
  .hero__person{max-width:min(100%,400px)}
  .hero .lead{max-width:46ch}
  .hero__visual--person .float-card--a{left:-6%; width:min(220px,74%)}
  .hero__visual--person .float-card--b{right:-3%; width:min(184px,62%)}
}

/* ==========================================================================
   25. Mobile hero portrait
   Same full upper-body cut-out as desktop, no frame. The hard chop this used to
   show was caused by him sitting at the very bottom edge of the hero; section 26
   moves him up into the middle, so there is navy below and the soft bottom fade
   now reads as intentional. The proof card drops underneath instead of covering
   his chest.
   ========================================================================== */
.hero__person-frame{display:contents}

@media (max-width:900px){
  .hero__visual--person{
    display:flex; flex-direction:column; align-items:center; gap:.75rem;
    min-height:0; margin-top:.5rem;
  }
  /* soft glow sits behind him rather than at the container's bottom edge */
  .hero__visual--person::before{
    display:block; top:2%; bottom:auto; width:min(360px,86%);
  }

  .hero__person{
    order:1;
    width:min(340px,80vw); max-width:none;
    /* longer, gentler fade than desktop: on a phone the tail of the cut-out is
       proportionally closer to the copy underneath it */
    -webkit-mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,.55) 90%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,.55) 90%,transparent 100%);
  }

  .hero__visual--person .hero__person-tag{
    order:2; position:static; right:auto; bottom:auto; transform:none;
    margin:0; padding:0; align-items:center; text-align:center;
    background:transparent; border:0; backdrop-filter:none;
  }

  /* proof cards become normal stacked content instead of overlays */
  .hero__visual--person .float-card{
    position:static; inset:auto; width:100%; max-width:330px;
    animation:none; margin:0;
  }
  .hero__visual--person .float-card--a{order:3}
  .hero__visual--person .float-card--b{order:4}
}

@media (max-width:520px){
  .hero__person{width:min(300px,82vw)}
  .hero__visual--person .float-card{max-width:none}
}

/* ==========================================================================
   26. Mobile hero order
   Source order puts the whole copy block before the portrait, so on a phone
   Kristian ended up below the ISO / languages row, reading like an afterthought.
   Promoting the copy children into the hero flex container lets his face sit
   directly under the headline, with the pitch and CTA following.
   Order: eyebrow, headline, portrait, lead, buttons, credentials.
   ========================================================================== */
@media (max-width:900px){
  .hero__inner{display:flex; flex-direction:column; gap:0}
  .hero__copy{display:contents}

  .hero__copy .eyebrow{order:1}
  .hero__copy h1{order:2}
  .hero__visual--person{order:3; margin:1.75rem 0 .25rem}
  .hero__copy .lead{order:4; margin-top:1.5rem}
  .hero__actions{order:5}
  .hero__trust{order:6}

  /* 97% repeats verbatim in the Results section; drop it here so the CTA
     does not get pushed down the page on a phone. */
  .hero__visual--person .float-card--b{display:none}
  .hero__visual--person .float-card--a{max-width:340px}
}

/* ==========================================================================
   27. Boxer section on narrow screens
   Stacked, the photo landed three paragraphs below the line it illustrates
   ("five fighters on plastic chairs"), so the joke arrived too late. Promote the
   copy children and slot the figure straight after the opening paragraph.
   ========================================================================== */
@media (max-width:1024px){
  .problem__split{display:flex; flex-direction:column; gap:0}
  .problem__copy{display:contents}
  .problem__eyebrow{order:1}
  .problem__title{order:2; margin-top:1rem}
  .problem__lead{order:3}
  .problem__figure{order:4; margin:1.6rem 0 .25rem}
  .problem__body{order:5}
  .problem__kicker{order:6}
}

/* ==========================================================================
   28. Testimonials on phones
   The cards carried desktop-sized padding, which ate horizontal room on a
   narrow screen while making them unnecessarily tall.
   ========================================================================== */
@media (max-width:640px){
  .quotes{gap:1rem}
  .quote{padding:1.4rem 1.25rem}
  .quote__mark{font-size:3.25rem; margin-bottom:.1rem}
  .quote__text{font-size:1.0313rem; line-height:1.55}
  .quote__foot{margin-top:1.2rem; padding-top:1.05rem; gap:.8rem}
  .quote__avatar{width:42px; height:42px; font-size:.9375rem}
}

/* ---------- 20. Toolbox section ---------- */
/* The manager-facing Value Selling Toolbox, linked from #toolbox to /toolbox. */
.tbx-list{margin-top:1.5rem; gap:.75rem}
.tbx-list li{font-size:1rem; align-items:flex-start}
.tbx-list strong{color:var(--blue-900)}
.tbx-note{margin-top:1.6rem; font-size:.9375rem; max-width:46ch}
.tbx-actions{margin-top:2rem; display:flex; flex-wrap:wrap; gap:.9rem}

/* A browser frame around the screenshot: it reads as a place you go to,
   not as another illustration on the page. */
.tbx-frame{position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border); background:var(--white); box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.tbx-frame:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.tbx-frame__bar{display:flex; align-items:center; gap:.4rem;
  padding:.7rem 1rem; background:var(--white); border-bottom:1px solid var(--border)}
.tbx-frame__dot{width:9px; height:9px; border-radius:50%; background:var(--blue-300); flex:0 0 auto}
.tbx-frame__url{display:inline-flex; align-items:center; gap:.4rem; margin-left:.85rem;
  padding:.28rem .8rem; border-radius:100px; background:var(--blue-100);
  font-size:.8125rem; color:var(--grey-500)}
.tbx-frame > img{display:block; width:100%}
.tbx-lock{position:absolute; right:1rem; top:3.6rem; display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .9rem; border-radius:100px; background:rgba(16,62,103,.92); color:var(--white);
  font-size:.8125rem; font-weight:700; letter-spacing:.01em}
@media (max-width:520px){
  .tbx-frame__url{display:none}
  .tbx-lock{top:3.1rem; right:.6rem; font-size:.75rem}
}

/* ==========================================================================
   Practise with Bob
   Sits directly under the Toolbox section and deliberately borrows the dark
   treatment of the Why Buy Challenge rather than the Toolbox's pale blue,
   because the four steps it marks against are printed up there and the two
   blocks should read as the same argument.
   ========================================================================== */
.bobsec{
  background:
    radial-gradient(760px 520px at 82% -10%, rgba(34,119,170,.34), transparent 62%),
    radial-gradient(620px 460px at 4% 108%, rgba(95,115,136,.14), transparent 58%),
    linear-gradient(166deg, var(--ink-900), var(--blue-900) 52%, var(--ink-950));
  color:var(--white);
}
.bobsec h2{color:var(--white)}

/* Three blocks, not two columns.

   As a plain two column split, the phone stacked the whole argument first and
   put Bob's photograph at the very bottom of the section, below the buttons,
   where nobody reaching for "Start practising" would ever see him. He is the
   reason the section works, so on a narrow screen he goes directly under the
   headline and the detail follows him. On a wide screen the head and the body
   sit back in the left column and he takes the right, which is where he was. */
.bobsec__grid{
  display:grid; gap:clamp(1.75rem,3.5vw,3rem); align-items:start;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  grid-template-areas:"head media" "body media";
}
.bobsec__head{grid-area:head}
.bobsec__body{grid-area:body}
.bobsec__media{grid-area:media; align-self:center}
@media (max-width:900px){
  .bobsec__grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "media" "body";
    gap:clamp(1.5rem,4vw,2.25rem);
  }
}

.bobsec__list{margin-top:0; display:grid; gap:.95rem}
.bobsec__list li{display:grid; grid-template-columns:28px 1fr; gap:.95rem; align-items:start;
  font-size:1rem; line-height:1.55; color:#CBDAEA}
.bobsec__n{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:.8125rem;
  background:rgba(95,115,136,.16); border:1px solid rgba(95,115,136,.42); color:var(--detail);
}
.bobsec__ctas{margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.9rem}
.bobsec__note{margin-top:1.6rem; font-size:.9375rem; line-height:1.6; color:#8FAAC3; max-width:52ch}

/* The card is a still from the call: his face, his question, and the four
   marks the answer would come back with. Two ticks and two crosses rather
   than four ticks, because a perfect scorecard in a promotional image is the
   fastest way to make the drill look like a toy. */
.bobcard{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.16); box-shadow:var(--shadow-lg);
  background:var(--ink-950);
}
.bobcard > img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:60% 40%}
.bobcard__grad{position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(8,31,53,.78), rgba(8,31,53,0) 34%),
    linear-gradient(to top, rgba(8,31,53,.96) 6%, rgba(8,31,53,.30) 46%, rgba(8,31,53,.08))}
.bobcard__id{position:absolute; left:1.35rem; top:1.2rem; display:flex; flex-direction:column; gap:.6rem;
  align-items:flex-start}
.bobcard__live{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.6875rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; padding:.32rem .7rem; border-radius:100px;
  background:rgba(199,11,22,.24); border:1px solid rgba(199,11,22,.55); color:#F6B9BD;
  backdrop-filter:blur(6px);
}
.bobcard__live i{width:7px; height:7px; border-radius:50%; background:var(--red-500);
  animation:bob-blink 1.2s steps(1,end) infinite}
@keyframes bob-blink{0%,60%{opacity:1} 61%,100%{opacity:.2}}
.bobcard__name{font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--white);
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
.bobcard__name em{display:block; font-family:var(--font-body); font-style:normal; font-weight:600;
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:var(--detail);
  margin-top:.28rem; text-shadow:0 1px 10px rgba(8,31,53,.9)}
.bobcard__q{
  position:absolute; left:1.35rem; right:1.35rem; bottom:1.3rem; margin:0;
  font-size:clamp(1.0625rem,.95rem + .45vw,1.3125rem); font-weight:700; line-height:1.4;
  color:var(--white); text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.bobcard__q::before{content:"\201C"; color:var(--detail); font-size:1.5em; line-height:0;
  vertical-align:-.3em; margin-right:.08em}
.bobcard__q::after{content:"\201D"; color:var(--detail); font-size:1.5em; line-height:0;
  vertical-align:-.3em; margin-left:.05em}

.bobcard__steps{margin-top:.85rem; display:grid; gap:.5rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:460px){ .bobcard__steps{grid-template-columns:1fr} }
.bobcard__step{
  display:flex; align-items:center; gap:.45rem; padding:.4rem .8rem; border-radius:100px;
  font-size:.8125rem; font-weight:700; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15); color:#BDD1E4;
}
.bobcard__step.is-pass{color:#9BDCAB; border-color:rgba(77,179,99,.45); background:rgba(77,179,99,.13)}
.bobcard__step.is-fail{color:#F6B9BD; border-color:rgba(199,11,22,.45); background:rgba(199,11,22,.13)}

@media (max-width:520px){
  .bobcard__q{font-size:1rem; left:1rem; right:1rem; bottom:1rem}
  .bobcard__id{left:1rem; top:1rem}
}
@media (prefers-reduced-motion:reduce){
  .bobcard__live i{animation:none}
}

/* ==========================================================================
   24. Hero coach roster
   Replaces the founder cut-out on the right of the hero. Four tiles on a 2x2
   grid, columns offset from each other so the block reads as floating rather
   than as a contact sheet. Every tile is a silent loop of a real coach. The
   language count is the line underneath: it used to be a sixth tile, which
   made a number look like one more person.
   ========================================================================== */
.hero__visual--roster{
  /* The grid, the language pill and the session strip all measure off this,
     so the column keeps one edge. It is set to leave the roster shorter than
     the hero copy beside it: the copy is what the page is actually asking
     people to read. */
  --roster-w:340px;
  /* The bob animation travels 9px, so the block needs a little room top and
     bottom but nowhere near the 24px it used to reserve. */
  position:relative; min-width:0; padding-block:clamp(.4rem,1vw,.75rem);
}
/* The float cards anchor to this, not to the column, so the one hanging off
   the bottom left cannot land on top of the caption underneath. */
.roster-wrap{position:relative; max-width:var(--roster-w); margin-inline:auto}
.roster{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.55rem,1.1vw,.9rem);
}
/* 1fr tracks default to min-width:auto, so on a narrow phone the tiles refuse
   to shrink past their content and push the whole hero sideways. */
.roster__cell{min-width:0}
.roster__cell{
  position:relative; overflow:hidden; aspect-ratio:1;
  border-radius:clamp(14px,2.2vw,22px);
  box-shadow:0 18px 42px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.10);
  animation:rosterBob 8s var(--ease) infinite;
}
/* Static column offsets. The bob animation owns transform, so the stagger has
   to come from margin or the two fight each other. */
.roster__cell:nth-child(2n+1){margin-top:.6rem}
.roster__cell:nth-child(2n)  {margin-top:-.5rem}
.roster__cell:nth-child(2){animation-delay:-2s}
.roster__cell:nth-child(3){animation-delay:-4s}
.roster__cell:nth-child(4){animation-delay:-6s}
.roster__cell img,
.roster__cell video{width:100%; height:100%; object-fit:cover; filter:saturate(.94) contrast(1.02)}
/* display:block kills the inline baseline gap that would otherwise leave a
   hairline of tile showing under each clip. */
.roster__vid{display:block; background:var(--blue-900)}
/* A thin navy wash pulls four rooms, four cameras and four afternoons into
   one set. The clips are already graded to a common luminance before they get
   here; this is what closes the last of the gap. */
.roster__cell::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(34,119,170,.12) 0%, rgba(8,31,53,.42) 100%);
}
/* The live session used to be a white card below the grid: the only opaque
   white object in a navy hero, wider than the grid it sat under, and claiming
   a call was in progress while four calls sat above it saying nothing. The
   state belongs on the call it describes, so the tile carries it now and the
   line underneath only reads out what is on. */
.roster__cell--live{
  box-shadow:0 22px 48px rgba(0,0,0,.46), 0 0 26px rgba(95,115,136,.30),
             0 0 0 2px var(--detail);
}
/* The live tile's own pill carries the state. A separate corner marker was
   tried first and could not be read at 163px, and two markers on one tile
   were one too many anyway. */
.roster__lang--live{
  border-color:rgba(95,115,136,.6);
  background:rgba(8,31,53,.84);
}
.roster__pulse{
  width:7px; height:7px; border-radius:50%; background:var(--green-500);
  flex:0 0 auto; box-shadow:0 0 0 0 rgba(77,179,99,.7); animation:pulse 2.2s infinite;
}

/* Everything below the grid measures off the grid, so the caption and the
   language count start on the same left edge the tiles do rather than each
   centring on its own axis. */
.roster__foot{max-width:var(--roster-w); margin:.85rem auto 0}
.roster__live{margin:0}
.roster__live-title{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:.95rem; line-height:1.3; color:#EAF1F8;
}
.roster__live-meta{display:block; font-size:.8125rem; line-height:1.45; color:#9DB6CC}

/* The language count. A square tile of it sat in the grid until the roster
   went to four real faces, at which point a number in a face-shaped box read
   as a fifth coach. On one line it still carries above the fold and it costs
   about a fifth of the height. */
.roster__langs{
  display:flex; align-items:center; gap:.5rem;
  /* Hugs its text rather than filling the column. Stretched to the 520px the
     grid and the session strip use, it read as an empty input field. */
  width:fit-content; max-width:100%; margin:.7rem 0 0; padding:.4rem .9rem;
  border-radius:100px; border:1px solid rgba(95,115,136,.42);
  background:linear-gradient(100deg, rgba(95,115,136,.18), rgba(34,119,170,.16));
}
.roster__langs b{
  font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(1rem,2.1vw,1.2rem); color:var(--detail);
}
.roster__langs span{
  font-size:clamp(.62rem,1.2vw,.72rem); font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:#D8E4EF;
}
/* Language pill. The flags are the quickest way to carry "25+ languages,
   native speakers" without spending a line of copy on it. The pill needs an
   explicit z-index because the tile's ::after wash paints after its children. */
.roster__lang{
  position:absolute; z-index:2; left:.4rem; bottom:.4rem;
  display:inline-flex; align-items:center; gap:.34rem; line-height:1;
  padding:.24rem .5rem .24rem .32rem; border-radius:100px;
  background:rgba(8,31,53,.74);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.20);
  font-size:clamp(.5rem,1.05vw,.625rem); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#E4EDF5; white-space:nowrap;
}
.roster__lang svg{
  width:clamp(13px,2.6vw,16px); height:auto; border-radius:2px; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
@media (max-width:400px){
  .roster__lang{left:.28rem; bottom:.28rem; padding:.2rem .4rem .2rem .26rem; gap:.26rem}
}

@keyframes rosterBob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}

/* ---------- Roster on a phone ----------
   Section 26 promotes the hero copy into the flex container and hands every
   child an explicit order. Anything without one, which is now the roster,
   sorts to 0 and jumps above the headline, so it needs its slot naming here.
   The cards stop being overlays and become stacked content, same as the
   portrait variant did. */
@media (max-width:900px){
  .hero__visual--roster{order:3; margin:1.75rem 0 .25rem; width:100%}
  .hero__visual--roster{--roster-w:400px}
}
@media (max-width:520px){
  .roster{gap:.45rem}
}
@media (prefers-reduced-motion:reduce){
  .roster__cell{animation:none}
}

/* ---------- Questions before buying (programme pages, home, portal, Bob) ----------
   Heading on the left, the questions on the right from 900px. build.mjs reads
   these sections into FAQPage data, so keep the markup: details > summary +
   .fa inside a section with id="faq". */
.faqs__in{display:grid; gap:1.5rem}
.faqs__list details{border-top:1px solid var(--border)}
.faqs__list details:last-child{border-bottom:1px solid var(--border)}
.faqs__list summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:1.1rem 0; font:600 1.125rem/1.35 var(--font-display); color:var(--content-title)}
.faqs__list summary::-webkit-details-marker{display:none}
.faqs__list summary svg{flex:none; color:var(--action); transition:transform .2s var(--ease)}
.faqs__list details[open] summary svg{transform:rotate(180deg)}
.faqs__list .fa{padding:0 0 1.25rem; color:var(--content-body); max-width:64ch}
.faqs__list .fa p{margin:0}
.faqs__list .fa a{color:inherit; text-decoration:underline}
@media (min-width:900px){ .faqs__in{grid-template-columns:.75fr 1.25fr; gap:3.5rem; align-items:start} }

/* ==========================================================================
   Motion (js/motion.js). Tibor, 2026-11-03: subtle, minimal, professional,
   the same on every page. One reveal (14px rise and fade, once), one hover
   language for cards (lift 4px, border darkens, image eases in), numbers
   that count from before to after, charts that draw. Replaces the Oct 2026
   "nothing fades in, nothing counts up" rule.
   ========================================================================== */
:root{--rv-ease:cubic-bezier(.2,.7,.2,1)}
html.motion .rv{opacity:0}
html.motion .rv.rv-in{animation:rv-in .75s var(--rv-ease) var(--rv-d, 0ms) both}
@keyframes rv-in{from{opacity:0; translate:0 14px} to{opacity:1; translate:none}}
@media print{ html.motion .rv{opacity:1; animation:none} }

.chart-dot--wait{opacity:0 !important; transition:opacity .6s var(--rv-ease) !important}
.chart-dot--wait.chart-dot--in{opacity:1 !important}

/* the shared card hover: used by every card that is a link */
.lift{transition:transform .35s var(--rv-ease), box-shadow .35s var(--rv-ease), border-color .35s var(--rv-ease)}
@media (hover:hover){
  .lift:hover{transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(20,48,88,.45)}
}
@media (prefers-reduced-motion:reduce){ .lift, .lift:hover{transition:none; transform:none} }

/* People look into the page, never off it (Tibor, 2026-11-03). Photos that
   face the wrong way for their spot are mirrored here, not re-exported, so
   the original still works where it already faces the text. */
.is-flip{scale:-1 1}