/* Applied Mind Training - shared stylesheet for the Influxe demo.
   Inks sampled from the client's own logo:
     navy  #002563 (wordmark) / #0A4287 (mark gradient) / #00153A (deep ground)
     cyan  #00ABC1 (mark swoosh and the word "Training")
   #00ABC1 only clears AA against the navy grounds, so text on a light background
   uses the darkened --cyan-600 instead. Never swap one for the other. */

@font-face{font-family:Archivo;src:url(f/ar.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(f/in.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --navy-900:#00153a; --navy-850:#001c4a; --navy-800:#031f52; --navy-700:#002563;
  --navy-600:#0a4287; --navy-500:#17579f;
  --cyan:#00abc1; --cyan-700:#00707f; --cyan-600:#00808f; --cyan-300:#66cede;
  --cyan-050:#e8f7fa;
  --ink:#0c1729; --ink-2:#22314a; --muted:#5c6b82; --muted-2:#8695ab;
  --line:#e2e8f1; --line-2:#eef2f7; --line-dark:rgba(255,255,255,.13);
  --paper:#f5f8fc; --paper-2:#eef3f9; --white:#fff;
  --sh-sm:0 1px 2px rgba(0,21,58,.05),0 6px 16px -10px rgba(0,21,58,.22);
  --sh:0 2px 4px rgba(0,21,58,.04),0 14px 34px -18px rgba(0,21,58,.3);
  --sh-lg:0 30px 70px -34px rgba(0,21,58,.45);
  --ease:cubic-bezier(.4,0,.2,1);
  --gut:clamp(20px,5vw,52px);
  --r:14px; --r-sm:10px;
  --hdr:78px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 14px)}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--white);color:var(--ink);
  line-height:1.6;font-size:15.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
svg{display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--cyan);outline-offset:3px;border-radius:6px}
::selection{background:var(--cyan);color:#00153a}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Set by s.js when this page is the content of the proposal's preview frames.
   A scrollbar running down the inside of a mock browser or phone gives the
   preview away. */
html.framed{scrollbar-width:none}
html.framed::-webkit-scrollbar{width:0;height:0}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut)}
.dsp{font-family:Archivo,system-ui,sans-serif;font-weight:700;letter-spacing:-.028em;line-height:1.08}
.acc{color:var(--cyan)}
.acc-l{color:var(--cyan-600)}
.eyebrow{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan-600);display:block}
.eyebrow.on-dark{color:var(--cyan-300)}
.lead{font-size:16.5px;color:var(--muted);line-height:1.72;max-width:56ch}
.lead.on-dark{color:rgba(255,255,255,.72)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  font-family:Archivo,sans-serif;font-size:14px;font-weight:600;letter-spacing:-.005em;
  padding:14px 24px;border-radius:999px;white-space:nowrap;line-height:1.2;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg.ar{transform:translateX(3px)}
.btn-cyan{background:var(--cyan);color:#00263c;box-shadow:0 10px 26px -12px rgba(0,171,193,.85)}
.btn-cyan:hover{background:#00c0d8;transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(0,171,193,.9)}
.btn-navy{background:var(--navy-700);color:#fff}
.btn-navy:hover{background:var(--navy-600);transform:translateY(-2px)}
.btn-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.btn-line:hover{background:#fff;color:var(--navy-900);box-shadow:inset 0 0 0 1.5px #fff}
.btn-line-ink{background:transparent;color:var(--navy-700);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-line-ink:hover{background:var(--navy-700);color:#fff;box-shadow:inset 0 0 0 1.5px var(--navy-700)}
.btn-block{width:100%}
.btn-lg{padding:16px 30px;font-size:15px}
.tlink{display:inline-flex;align-items:center;gap:8px;font-family:Archivo,sans-serif;font-size:13.5px;
  font-weight:600;color:var(--cyan-600)}
.tlink svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.tlink.on-dark{color:var(--cyan-300)}

/* ---------------- Header ---------------- */
.sentinel{position:absolute;top:0;left:0;width:1px;height:10px;pointer-events:none}
.hdr{position:fixed;inset:0 0 auto;z-index:80;
  background:linear-gradient(180deg,rgba(0,21,58,.88),rgba(0,21,58,.34) 62%,transparent);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.hdr.solid{background:rgba(0,21,58,.97);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-dark),0 12px 34px -22px rgba(0,0,0,.8)}
.hdr-in{display:flex;align-items:center;gap:22px;height:var(--hdr)}
/* Horizontal lockup. The client's supplied artwork stacks the mark above the
   wordmark, which is unreadable at header height, so the mark is used on its
   own and the wordmark is set in Archivo beside it. */
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:38px;width:auto}
.bwm{font-family:Archivo,sans-serif;line-height:1.06;color:#fff}
.bwm b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.018em}
.bwm > span{display:block;font-size:13.5px;font-weight:500;letter-spacing:.01em;color:var(--cyan-300)}
.brand-lg img{height:56px}
.brand-lg .bwm b{font-size:23px}
.brand-lg .bwm > span{font-size:18.5px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{position:relative;font-family:Archivo,sans-serif;font-size:14px;font-weight:500;
  color:rgba(255,255,255,.8);padding:9px 13px;border-radius:8px;transition:color .22s var(--ease)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px;
  background:var(--cyan);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:#fff}
.hdr-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:12px}
.hdr .btn-cyan{padding:12px 20px;font-size:13.5px}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;border-radius:10px;flex:none}
.burger i{display:block;width:20px;height:2px;border-radius:2px;background:#fff;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;
  background:#fff;transition:transform .32s var(--ease),top .32s var(--ease)}
.burger i::before{top:-6.5px}
.burger i::after{top:6.5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:79;background:var(--navy-900);
  padding:calc(var(--hdr) + 20px) var(--gut) 56px;display:flex;flex-direction:column;
  transform:translateY(-102%);transition:transform .42s var(--ease),visibility .42s;
  overflow-y:auto;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-family:Archivo,sans-serif;font-weight:600;font-size:24px;color:#fff;
  padding:15px 0;border-bottom:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center}
.drawer nav a svg{width:17px;height:17px;color:var(--cyan)}
.drawer .btn{margin-top:26px}
.dr-meta{margin-top:auto;padding-top:30px;color:rgba(255,255,255,.55);font-size:13.5px;line-height:1.9}
.dr-meta a{color:var(--cyan-300)}

/* ---------------- Hero ---------------- */
.hero{position:relative;isolation:isolate;color:#fff;background:var(--navy-900);
  min-height:clamp(600px,88svh,820px);display:flex;align-items:center}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(0,21,58,.97) 0%,rgba(0,21,58,.93) 26%,rgba(0,21,58,.62) 56%,rgba(0,21,58,.3) 76%,rgba(0,21,58,.55) 100%),
             linear-gradient(180deg,rgba(0,21,58,.6) 0%,transparent 26%,transparent 62%,rgba(0,21,58,.72) 100%)}
.hero-in{position:relative;width:100%;padding-block:calc(var(--hdr) + 42px) 74px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.hero-txt{max-width:680px}
/* Each line of the headline is its own block and must not wrap: the cap is
   sized so the longest line ("Better communication.") still fits 680px. */
.hero h1{font-size:clamp(36px,4.6vw,58px);margin-top:18px;letter-spacing:-.032em}
.hero h1 span{display:block}
.hero p{margin-top:22px;font-size:16.5px;color:rgba(255,255,255,.78);max-width:50ch;line-height:1.7}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-note{margin-top:24px;display:flex;align-items:flex-start;gap:10px;font-size:13.2px;
  color:rgba(255,255,255,.62);max-width:44ch}
.hero-note svg{width:15px;height:15px;color:var(--cyan);flex:none;margin-top:3px}

.hcard{background:rgba(6,32,72,.62);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:10px 22px;width:296px;flex:none}
.hcard div{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
.hcard div+div{border-top:1px solid rgba(255,255,255,.12)}
.hcard svg{width:26px;height:26px;color:var(--cyan);flex:none;margin-top:1px}
.hcard b{display:block;font-family:Archivo,sans-serif;font-size:14px;font-weight:600;color:#fff}
.hcard span{display:block;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5;margin-top:2px}

/* ---------------- Sections ---------------- */
.sec{padding-block:clamp(62px,8.5vw,104px)}
.sec-sm{padding-block:clamp(46px,6vw,70px)}
.sec h2{font-size:clamp(29px,4vw,46px)}
.sec-head{max-width:660px;margin-bottom:44px}
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:16px}
.sec-head.row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.sec-head.row > div{max-width:620px}
.paper{background:var(--paper)}

/* ---------------- Intro and stats ---------------- */
.intro{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,4.5vw,60px);align-items:center}
/* One column, not two: split across ~520px the paragraph ran four words wide. */
.intro-l{background:var(--paper);border-radius:var(--r);padding:clamp(26px,3.4vw,40px)}
.intro-l h2{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.028em;line-height:1.22;
  font-size:clamp(21px,2.2vw,27px)}
.intro-l p{font-size:14.5px;color:var(--muted);line-height:1.75;margin-top:18px;max-width:52ch}
.sig{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sig b{display:block;font-family:Archivo,sans-serif;font-size:17px;font-weight:600;color:var(--navy-700);
  font-style:italic;letter-spacing:-.01em}
.sig span{display:block;font-size:12px;color:var(--muted-2);margin-top:3px}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:8px 12px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--line)}
.stat .ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:var(--cyan-050);color:var(--cyan-700)}
.stat .ico svg{width:23px;height:23px}
.stat b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(28px,3.2vw,38px);
  letter-spacing:-.035em;color:var(--navy-700);line-height:1}
.stat span{display:block;font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.45}

/* ---------------- Programmes (navy panel) ---------------- */
.panel{background:var(--navy-900);color:#fff;border-radius:clamp(16px,2vw,24px);overflow:hidden;position:relative}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 8% 4%,rgba(10,66,135,.6),transparent 62%),
             radial-gradient(560px 380px at 96% 96%,rgba(0,171,193,.16),transparent 64%)}
/* Header across the top, cards across the full width beneath it. Side by side,
   three cards inside 700px left the body copy running four words to a line. */
.panel-in{position:relative;z-index:1;padding:clamp(30px,4vw,52px)}
.panel-l{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,48px);
  align-items:end;margin-bottom:clamp(28px,3.4vw,40px)}
.panel-l h2{font-size:clamp(27px,3.2vw,40px);margin-top:14px;color:#fff;max-width:15ch}
.panel-l p{font-size:15px;color:rgba(255,255,255,.66);line-height:1.72;max-width:50ch}
.panel-l .btn{margin-top:24px}
.progs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prog{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.prog:hover{transform:translateY(-6px);border-color:rgba(0,171,193,.5);background:rgba(255,255,255,.075)}
.prog-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-800)}
.prog-img img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform .7s var(--ease),opacity .4s var(--ease)}
.prog:hover .prog-img img{transform:scale(1.06);opacity:1}
.prog-img .chip{position:absolute;left:16px;top:16px;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;background:var(--cyan);color:#00263c;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.prog-img .chip svg{width:21px;height:21px}
.prog-b{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.prog-b h3{font-family:Archivo,sans-serif;font-weight:600;font-size:19px;letter-spacing:-.02em}
.prog-b p{margin-top:10px;font-size:14.2px;color:rgba(255,255,255,.63);line-height:1.66;flex:1}
.prog-b .tlink{margin-top:18px;align-self:flex-start}

/* ---------------- Sessions ---------------- */
/* The session picker sits ABOVE the card, not beside it. As a side column it ate
   260px of the width the card needed for its three panels. */
.ses-grid{display:grid;gap:clamp(18px,2.2vw,24px)}
.ses-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ses-pick{width:100%;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 16px;cursor:pointer;display:flex;gap:13px;align-items:center;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.ses-pick:hover{border-color:var(--cyan-300)}
.ses-pick[aria-selected="true"]{border-color:var(--cyan-600);background:var(--cyan-050);
  box-shadow:inset 3px 0 0 var(--cyan-600)}
.ses-pick .d{flex:none;width:46px;text-align:center;font-family:Archivo,sans-serif;line-height:1.05}
.ses-pick .d b{display:block;font-size:21px;font-weight:700;color:var(--navy-700);letter-spacing:-.03em}
.ses-pick .d span{display:block;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cyan-700);margin-top:3px}
.ses-pick .t{min-width:0}
.ses-pick .t b{display:block;font-family:Archivo,sans-serif;font-size:14px;font-weight:600;
  letter-spacing:-.012em;color:var(--ink)}
.ses-pick .t span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.ses-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,330px)}
.ses-photo{position:relative;background:var(--paper-2);min-height:100%}
.ses-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.datechip{position:absolute;left:16px;top:16px;background:var(--navy-900);color:#fff;border-radius:12px;
  padding:11px 14px;text-align:center;font-family:Archivo,sans-serif;line-height:1.1;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.datechip b{display:block;font-size:25px;font-weight:700;letter-spacing:-.035em}
.datechip span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-300);margin-top:2px}
.datechip i{display:block;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.55);margin-top:1px}
.ses-body{padding:clamp(22px,2.4vw,30px)}
.ses-body h3{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.028em;line-height:1.2;margin-top:12px}
.ses-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ses-meta span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:7px 13px}
.ses-meta svg{width:14px;height:14px;color:var(--cyan-700);flex:none}
.ses-meta .hot{background:#fff5e6;border-color:#f7dfb4;color:#8a5a06}
.ses-meta .hot svg{color:#b8790a}
.ses-body > p{margin-top:16px;font-size:14.5px;color:var(--muted);line-height:1.7;max-width:46ch}
.ses-form{background:var(--paper);border-left:1px solid var(--line);padding:clamp(20px,2.2vw,26px)}
.ses-form h4{font-family:Archivo,sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em}
.ses-form > p{font-size:12.5px;color:var(--muted);margin-top:5px}
.ses-perks{display:flex;flex-wrap:wrap;gap:10px 26px;border-top:1px solid var(--line);
  padding:16px clamp(22px,2.4vw,30px);grid-column:1/-1;background:var(--white)}
.ses-perks span{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;color:var(--ink-2)}
.ses-perks svg{width:16px;height:16px;color:var(--cyan-600);flex:none}

/* ---------------- Forms ---------------- */
.fld{margin-top:13px}
.fld label{display:block;font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--white);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;font-size:14.5px;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fld textarea{resize:vertical;min-height:104px;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted-2)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--cyan-600);
  box-shadow:0 0 0 3.5px rgba(0,171,193,.18)}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formnote{font-size:11.5px;color:var(--muted-2);margin-top:11px;line-height:1.55;text-align:center}
.formmsg{margin-top:12px;font-size:13.5px;border-radius:9px;padding:11px 13px;line-height:1.55}
.formmsg.ok{background:#e6f7f0;color:#0a6b4a;border:1px solid #b9e6d3}
.formmsg.err{background:#fdecec;color:#9b2222;border:1px solid #f4cccc}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------------- Sector marquee ---------------- */
.sectors{background:var(--navy-900);color:#fff;padding-block:26px;overflow:hidden}
.sectors p{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);
  font-family:Archivo,sans-serif;font-weight:600;margin-bottom:16px}
.mq{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-t{display:flex;width:max-content;animation:mq 36s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq-t > div{display:flex;gap:14px;padding-right:14px}
.mq b{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font-family:Archivo,sans-serif;
  font-size:15px;font-weight:500;color:rgba(255,255,255,.82);border:1px solid var(--line-dark);
  border-radius:999px;padding:11px 22px}
.mq b svg{width:17px;height:17px;color:var(--cyan);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .mq-t{animation:none}
  .mq{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
}

/* ---------------- Approach split ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--paper);
  border-radius:clamp(16px,2vw,24px);overflow:hidden}
.split-img{position:relative;min-height:340px}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-txt{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.split-txt h2{font-size:clamp(25px,2.9vw,36px);margin-top:14px}
.steps{margin-top:26px;display:grid}
.step{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step .n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-700);color:#fff;font-family:Archivo,sans-serif;font-size:13px;font-weight:700}
.step b{display:block;font-family:Archivo,sans-serif;font-size:15px;font-weight:600;letter-spacing:-.015em}
.step p{font-size:13.8px;color:var(--muted);line-height:1.62;margin-top:4px}

/* ---------------- Results ---------------- */
.res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(24px,3vw,40px);align-items:start}
/* Stacked, not three across. Beside the 380px aside, a three-column quote grid
   gave each card ~195px of text: five words a line. */
.quotes{display:grid;gap:14px}
.quote{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 26px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;
  align-items:start;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.quote:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.quote .qm{width:24px;height:24px;color:var(--cyan-300);flex:none;grid-row:1/3;margin-top:3px}
.quote p{font-size:14.8px;color:var(--ink-2);line-height:1.66}
.quote cite{margin-top:12px;font-style:normal;font-size:12.8px;color:var(--muted);line-height:1.5}
.quote cite b{font-family:Archivo,sans-serif;font-weight:600;color:var(--ink);font-size:13px}
.quote cite b::after{content:" \00b7 ";color:var(--muted-2);font-weight:400}
.res-side{background:var(--navy-900);color:#fff;border-radius:var(--r);overflow:hidden;position:relative;isolation:isolate}
.res-side > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.75}
.res-side::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(0,21,58,.78),rgba(0,21,58,.95) 62%)}
.res-side .in{padding:clamp(26px,3vw,34px)}
.res-side h3{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(21px,2.3vw,27px);
  letter-spacing:-.028em;line-height:1.2;margin-top:14px}
.res-side p{margin-top:14px;font-size:14.2px;color:rgba(255,255,255,.7);line-height:1.68}
.res-side .btn{margin-top:24px}
.res-side ul{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-dark);display:grid;gap:12px;list-style:none}
.res-side li{display:flex;gap:11px;font-size:13.6px;color:rgba(255,255,255,.78);line-height:1.5}
.res-side li svg{width:17px;height:17px;color:var(--cyan);flex:none;margin-top:1px}

/* ---------------- Contact ---------------- */
.contact{background:var(--navy-900);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(760px 460px at 84% 12%,rgba(10,66,135,.55),transparent 62%),
             radial-gradient(600px 400px at 4% 92%,rgba(0,171,193,.14),transparent 64%)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(30px,4.5vw,62px);align-items:start}
.contact h2{font-size:clamp(28px,3.6vw,42px);margin-top:14px;color:#fff}
.contact .lead{margin-top:18px}
.cdetails{margin-top:34px;display:grid}
.cdetail{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line-dark);align-items:flex-start}
.cdetail:first-child{border-top:0}
.cdetail svg{width:20px;height:20px;color:var(--cyan);flex:none;margin-top:2px}
.cdetail b{display:block;font-family:Archivo,sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.cdetail span,.cdetail a{display:block;font-size:15px;color:#fff;margin-top:4px;line-height:1.5}
.cdetail a:hover{color:var(--cyan-300)}
.cform{background:var(--white);border-radius:var(--r);padding:clamp(24px,3vw,32px);box-shadow:var(--sh-lg);color:var(--ink)}
.cform h3{font-family:Archivo,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.024em}
.cform > p{font-size:13px;color:var(--muted);margin-top:6px}
.cform .btn{margin-top:20px}

/* ---------------- Footer ---------------- */
.ftr{background:var(--navy-900);color:#fff;padding-block:56px 0;border-top:1px solid var(--line-dark)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3.4vw,44px)}
.ftr-brand img{height:46px;width:auto}
.ftr-brand p{margin-top:18px;font-size:13.8px;color:rgba(255,255,255,.6);line-height:1.7;max-width:30ch}
.socials{display:flex;gap:9px;margin-top:22px}
.socials a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line-dark);color:rgba(255,255,255,.8);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.socials a:hover{background:var(--cyan);color:#00263c;border-color:var(--cyan)}
.socials svg{width:17px;height:17px}
.ftr h4{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:#fff;margin-bottom:16px}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr ul a{font-size:14px;color:rgba(255,255,255,.63)}
.ftr ul a:hover{color:var(--cyan-300)}
.ftr-next{display:flex;gap:12px;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
  border-radius:11px;padding:12px}
.ftr-next img{width:60px;height:60px;object-fit:cover;border-radius:8px;flex:none}
.ftr-next b{display:block;font-family:Archivo,sans-serif;font-size:13.4px;font-weight:600;line-height:1.35}
.ftr-next span{display:block;font-size:11.8px;color:rgba(255,255,255,.55);margin-top:5px;line-height:1.5}
.ftr-sub{display:flex;gap:8px;margin-top:14px}
.ftr-sub input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--line-dark);
  border-radius:9px;padding:11px 13px;font-size:13.5px;color:#fff}
.ftr-sub input::placeholder{color:rgba(255,255,255,.42)}
.ftr-sub input:focus{outline:0;border-color:var(--cyan);background:rgba(255,255,255,.1)}
.ftr-sub button{flex:none;padding:11px 18px;font-size:13.5px}
.ftr-btm{margin-top:48px;padding-block:20px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.45)}
.ftr-btm a{color:rgba(255,255,255,.45)}
.ftr-btm a:hover{color:var(--cyan-300)}
.ftr-btm .by{display:inline-flex;align-items:center;gap:6px}

/* ---------------- Reveal ---------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------------- Mobile tab bar ----------------
   Hidden by default and switched on under --tabbar-at (820px). The bar itself
   is navy and the footer is padded to match, so the page ends in one colour
   rather than a stripe of background behind a floating bar. */
.tabbar{display:none}
.tabbar > *{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;cursor:pointer;padding:7px 2px 5px;
  font-family:Archivo,sans-serif;font-size:10px;font-weight:600;letter-spacing:.005em;
  color:rgba(255,255,255,.62);transition:color .22s var(--ease);-webkit-tap-highlight-color:transparent}
.tabbar .ti{display:grid;place-items:center;width:26px;height:26px}
.tabbar svg{width:21px;height:21px}
.tabbar > *:active{color:#fff}
.tabbar > *.on{color:#fff}
.tabbar > *.on .ti{color:var(--cyan)}
/* The dot is the active marker: a filled pill under the icon reads instantly at
   a glance, which a colour change alone does not. */
.tabbar > *::after{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%) scaleX(0);
  width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--cyan);
  transition:transform .28s var(--ease)}
.tabbar > *.on::after{transform:translateX(-50%) scaleX(1)}

/* Raised centre action. It sits above the bar, so nothing here may clip. */
.tab-fab{color:#fff!important}
.tab-fab .ti{width:52px;height:52px;border-radius:17px;margin-top:-22px;
  background:linear-gradient(150deg,#12c2d8,var(--cyan-700));color:#00263c;
  box-shadow:0 10px 22px -8px rgba(0,171,193,.85),0 0 0 5px var(--navy-900);
  transition:transform .25s var(--ease)}
.tab-fab .ti svg{width:24px;height:24px}
.tab-fab:active .ti{transform:scale(.94)}
.tab-fab::after{display:none}

/* ---------------- Demo ribbon ---------------- */
.demo-tag{position:fixed;right:14px;bottom:14px;z-index:90;background:rgba(0,21,58,.93);color:#fff;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 16px;font-size:11.5px;
  font-family:Archivo,sans-serif;font-weight:500;letter-spacing:.03em;backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:8px;box-shadow:var(--sh-lg)}
.demo-tag i{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}
.demo-tag a{color:var(--cyan-300)}

/* ================= Responsive ================= */
@media (max-width:1120px){
  .nav{display:none}
  .burger{display:flex}
  .hdr-cta .btn{display:none}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:34px}
  .hcard{width:100%;max-width:540px}
  .ses-card{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .ses-form{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .res-grid{grid-template-columns:minmax(0,1fr)}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  /* minmax(0,1fr), never a bare 1fr: a bare 1fr floors at the column's
     min-content, and the brand lockup's min-content is wider than a 320px
     phone, which pushed the whole footer past the viewport. */
  .ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* Tab-bar breakpoint. Below this the header carries the brand only and the bar
   below carries the navigation, so the burger in the header would be a second
   way to do the same thing. */
@media (max-width:820px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:75;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
    background:rgba(0,21,58,.97);backdrop-filter:blur(18px) saturate(1.4);
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -10px 30px -18px rgba(0,0,0,.9);
    padding:0 4px env(safe-area-inset-bottom)}
  .hdr-cta{display:none}
  /* The footer, not the body, absorbs the bar's height, so the navy runs all
     the way down behind it instead of showing a strip of page background. */
  /* Clears the tab bar (63px) AND the demo badge floating above it. At handover,
     when the badge goes, this can drop back to about 76px. */
  .ftr{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
  .demo-tag{bottom:calc(72px + env(safe-area-inset-bottom))}
  /* An in-page anchor must clear the bar as well as the header. */
  html{scroll-padding-bottom:76px}
}
@media (max-width:980px){
  .intro{grid-template-columns:minmax(0,1fr);gap:36px}
  .panel-in{grid-template-columns:minmax(0,1fr)}
  .progs{grid-template-columns:1fr 1fr}
  .panel-l{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
  .split{grid-template-columns:minmax(0,1fr)}
  .split-img{min-height:260px;order:-1}
}
@media (max-width:720px){
  :root{--hdr:66px}
  body{font-size:15px}
  .brand img{height:34px}
  .hero{min-height:auto}
  .hero-in{padding-block:calc(var(--hdr) + 34px) 56px}
  .hero h1{font-size:clamp(31px,8.6vw,42px)}
  .hero p{font-size:15.4px}
  .hero-cta .btn{flex:1 1 auto;min-width:calc(50% - 6px)}
  .hcard{padding:4px 18px}
  .intro-l{grid-template-columns:minmax(0,1fr);gap:18px}
  .stats{grid-template-columns:1fr 1fr;gap:26px 0}
  .stat + .stat::before{display:none}
  .stat:nth-child(2n)::before{content:"";display:block;position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line)}
  .stat .ico{width:44px;height:44px;margin-bottom:12px}
  .progs{grid-template-columns:1fr}
  .ses-card{grid-template-columns:minmax(0,1fr)}
  .ses-photo{min-height:0;aspect-ratio:16/10}
  .ses-list{grid-template-columns:1fr}
  .ses-perks{gap:10px 18px}
  .split-txt{padding:26px 22px 32px}
  .ftr-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .ftr-btm{justify-content:center;text-align:center}
  /* One line above the tab bar. The agency credit is the part that can go: the
     "can be changed" half is the message worth keeping on a phone. */
  .demo-tag{left:14px;right:14px;justify-content:center;font-size:11px;padding:7px 12px;white-space:nowrap}
  .dt-x{display:none}
}
@media (max-width:420px){
  .fld-2{grid-template-columns:1fr}
  .hero-cta .btn{width:100%;min-width:0}
  .ses-meta span{font-size:12px;padding:6px 11px}
}