/* RecRev site mockup — shared design system. Hand-written, no build step. */
:root{
  --pink:#ED89E2; --lilac:#C488E8; --blue:#5E8DF3; --mark:#638DF3;
  --ink:#0f0d1a; --ink-2:#2c2940; --ink-3:#5d5975; --mute:#8b87a3; --hair:#e8e5f1; --hair-2:#d9d5e8;
  --paper:#FBFAFE; --paper-2:#F4F2FA; --paper-3:#ECE9F4; --navy:#0C0B17;
  --grad:linear-gradient(90deg,#ED89E2 0%,#C488E8 50%,#5E8DF3 100%);
  --grad-v:linear-gradient(180deg,#ED89E2 0%,#C488E8 50%,#5E8DF3 100%);
  --serif:"Manrope",var(--sans); --sans:"Inter",system-ui,-apple-system,sans-serif;
  --r:16px; --r-sm:10px; --shadow:0 24px 60px -36px rgba(30,16,80,.35); --shadow-sm:0 8px 24px -16px rgba(30,16,80,.35);
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.08}
h1{font-family:var(--serif);font-size:clamp(38px,5.4vw,72px);font-weight:800;letter-spacing:-.045em;line-height:1.02}
h2{font-family:var(--serif);font-size:clamp(32px,4.4vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
h3{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.22}
h4{font-family:var(--sans);font-size:15px;font-weight:600}
p{margin:0}
em.acc{font-family:inherit;font-style:normal;font-weight:inherit;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:24px}
.narrow{max-width:820px}
.center{text-align:center}
.lead{color:var(--ink-3);font-size:clamp(17px,1.4vw,19px);line-height:1.55;max-width:640px}
.center .lead{margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.eyebrow:before{content:"";width:18px;height:2px;background:var(--grad);border-radius:2px}
.center .eyebrow:before{display:none}
.center .eyebrow{justify-content:center}
.center .eyebrow:after{content:"";display:none}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--hair-2);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px 7px 9px;font-size:13.5px;font-weight:500;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.pill i{width:20px;height:20px;border-radius:50%;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-style:normal;font-weight:700}
.mock-note{font-size:12px;color:var(--mute);border:1px dashed var(--hair-2);border-radius:8px;padding:6px 10px;display:inline-block;background:var(--paper-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:16px 26px;font-weight:600;font-size:15.5px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;position:relative;font-family:var(--sans);line-height:1}
.btn.primary{background:var(--ink);color:#fff;box-shadow:0 10px 30px -14px rgba(15,13,26,.6)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 14px 34px -14px rgba(94,141,243,.55)}
.btn.primary:after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--grad);opacity:0;z-index:-1;transition:opacity .25s}
.btn.primary:hover:after{opacity:1}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair-2)}
.btn.ghost:hover{background:var(--paper-2)}
.btn.light{background:#fff;color:var(--ink)}
.btn.sm{padding:11px 18px;font-size:14px}
.btn .arr{font-family:var(--sans);font-style:normal;font-size:17px;line-height:0;margin-top:-2px}

/* top bar + nav */
.mockbar{position:sticky;top:0;z-index:100;background:var(--navy);color:#b9b3d1;font-size:12px;padding:7px 20px;display:flex;justify-content:space-between;gap:14px;letter-spacing:.01em}
.mockbar b{color:#fff;font-weight:600}
.mockbar span:last-child{opacity:.75}
nav.top{position:sticky;top:31px;z-index:90;background:rgba(251,250,254,.72);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(217,213,232,.6)}
nav.top:before{display:none}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
nav.top .logo img{height:28px;width:auto}
nav.top .links{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
nav.top .links a{text-decoration:none;position:relative}
nav.top .links a:after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--grad);transition:right .2s}
nav.top .links a:hover:after{right:0}
nav.top .navcta{display:flex;align-items:center;gap:14px}
@media(max-width:860px){nav.top .links{display:none}}

/* sections */
section{padding:112px 0}
section.tight{padding:64px 0}
section.soft{background:var(--paper-2)}
.head{max-width:760px;margin-bottom:48px}
.head.center{margin-inline:auto}
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g3,.g2,.g4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}

/* hero */
.hero{position:relative;overflow:hidden;padding:80px 0 48px;text-align:center}
.hero .blob{display:none}
.hero .b1{width:620px;height:620px;left:-10%;top:-30%;background:radial-gradient(circle,#ED89E2,transparent 65%)}
.hero .b2{width:560px;height:560px;right:-8%;top:-25%;background:radial-gradient(circle,#5E8DF3,transparent 65%);animation-delay:-5s}
.hero .b3{width:520px;height:520px;left:40%;top:30%;background:radial-gradient(circle,#C488E8,transparent 65%);opacity:.35;animation-delay:-9s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.08)}}
.hero h1{max-width:1000px;margin:22px auto 8px}
.hero .lead{margin:0 auto 30px}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);background:#fff;border:1px solid var(--hair);border-radius:999px;padding:7px 13px}
.chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad)}
.vsl{max-width:920px;margin:54px auto 0;background:var(--navy);border:0;border-radius:22px;padding:8px;box-shadow:0 40px 90px -40px rgba(30,16,80,.55),0 0 0 1px rgba(15,13,28,.06);position:relative}
.vsl .cap{font-size:14px;color:var(--ink-3);text-align:center;padding:4px 0 12px}
.vsl .frame{aspect-ratio:16/9;border-radius:16px;position:relative;overflow:hidden;background:#12101f;display:flex;align-items:center;justify-content:center}
.vsl .frame:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 30% 30%,rgba(237,137,226,.35),transparent 60%),radial-gradient(60% 80% at 80% 70%,rgba(94,141,243,.35),transparent 60%)}
.vsl .frame .bars{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.vsl .frame .bar{position:absolute;left:18px;right:18px;bottom:22px;height:3px;background:rgba(255,255,255,.25);border-radius:3px}
.vsl .frame .bar i{display:block;width:32%;height:100%;background:var(--grad);border-radius:3px}
.vsl .frame .play{width:76px;height:76px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:24px;box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:1;padding-left:5px}
.vsl .frame .label{position:absolute;top:14px;left:16px;font-size:11.5px;color:#d8d3ee;background:rgba(0,0,0,.35);padding:5px 9px;border-radius:6px;z-index:1}

/* marquee */
.marquee{padding:36px 0 8px;overflow:hidden;position:relative}
.marquee p{text-align:center;color:var(--mute);font-size:13.5px;margin-bottom:22px}
.marquee .track{display:flex;gap:64px;width:max-content;animation:scroll 32s linear infinite}
.marquee .track span{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink-3);white-space:nowrap;opacity:.8;letter-spacing:-.01em;display:inline-flex;align-items:center;height:44px}
.marquee .track span.lg img{height:26px;width:auto;max-width:180px;display:block;filter:grayscale(1) contrast(1.05);opacity:.7;transition:filter .2s,opacity .2s}
.marquee .track span.lg:hover img{filter:none;opacity:1}
.marquee:before,.marquee:after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none}
.marquee:before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.marquee:after{right:0;background:linear-gradient(-90deg,var(--paper),transparent)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* problem cards */
.prob .card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.prob .art{height:170px;background:var(--paper-2);border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:center;padding:22px}
.prob .body{padding:24px 26px 28px}
.prob .num{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--mute);text-transform:uppercase;margin-bottom:10px;display:block}
.prob h3{margin-bottom:10px}
.prob p{color:var(--ink-3);font-size:15px}
/* mini illustration: calendar */
.ill-cal{width:180px;background:#fff;border:1px solid var(--hair-2);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden;font-size:9px}
.ill-cal .h{background:var(--ink);color:#fff;padding:6px 10px;font-weight:600;display:flex;justify-content:space-between}
.ill-cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:8px}
.ill-cal .g i{height:14px;border-radius:3px;background:var(--paper-3);display:block}
.ill-cal .g i.x{background:repeating-linear-gradient(135deg,#f3d5ef 0 3px,#fff 3px 6px)}
.ill-cal .g i.dl{background:linear-gradient(90deg,var(--pink),var(--blue))}
/* mini illustration: revenue line */
.ill-rev{width:200px;height:110px}
/* mini illustration: meeting note */
.ill-note{width:190px;background:#fff;border:1px solid var(--hair-2);border-radius:12px;box-shadow:var(--shadow-sm);padding:12px;font-size:10px;color:var(--ink-3);line-height:1.5}
.ill-note b{color:var(--ink);font-size:10.5px;display:block;margin-bottom:4px}
.ill-note .tag{display:inline-block;margin-top:8px;font-size:9px;padding:2px 7px;border-radius:999px;background:#fdecec;color:#b42323;font-weight:600}

/* booking */
.book{display:grid;grid-template-columns:1fr 1.15fr;gap:0;background:#fff;border:1px solid var(--hair);border-radius:26px;box-shadow:var(--shadow);overflow:hidden}
@media(max-width:860px){.book{grid-template-columns:1fr}}
.book .left{padding:34px;border-right:1px solid var(--hair);background:linear-gradient(180deg,#fff,var(--paper-2))}
@media(max-width:860px){.book .left{border-right:0;border-bottom:1px solid var(--hair)}}
.book .host{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.book .host img{width:46px;height:46px;border-radius:50%}
.book .host b{display:block;font-size:15px}
.book .host span{font-size:13px;color:var(--mute)}
.book .meta{display:grid;gap:9px;margin:18px 0 22px;font-size:14.5px;color:var(--ink-2)}
.book .meta div{display:flex;align-items:center;gap:10px}
.book .meta i{width:26px;height:26px;border-radius:8px;background:var(--paper-3);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:13px}
.book .right{padding:28px 30px}
.cal-h{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:12px}
.cal-h span{width:30px;height:30px;border-radius:50%;border:1px solid var(--hair);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);font-weight:400}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:13.5px}
.cal-g div{padding:9px 0;border-radius:9px;color:var(--mute)}
.cal-g .h{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--mute)}
.cal-g .d{color:var(--ink);background:var(--paper-2);font-weight:500}
.cal-g .sel{background:var(--ink);color:#fff}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.slots div{border:1px solid var(--hair-2);border-radius:10px;padding:10px;text-align:center;font-size:13.5px;font-weight:500}
.slots .on{border-color:var(--ink);background:var(--ink);color:#fff}
.book .right .btn{width:100%;margin-top:14px}
.book .tz{font-size:12px;color:var(--mute);margin-top:10px;text-align:center}

/* how it works */
.how{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
@media(max-width:900px){.how{grid-template-columns:1fr;gap:36px}}
.how .sticky{position:sticky;top:120px}
.how .get{background:var(--navy);color:#fff;border-radius:22px;padding:28px;margin-top:22px;position:relative;overflow:hidden}
.how .get:before{content:"";position:absolute;inset:auto -40% -60% auto;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(94,141,243,.5),transparent 65%);filter:blur(20px)}
.how .get h4{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#a9a3c6;margin-bottom:14px}
.how .get ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.how .get li{padding-left:26px;position:relative;font-size:14.5px;color:#e6e2f4}
.how .get li:before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;border-radius:4px;background:var(--grad)}
.steps{position:relative;padding-left:56px}
.steps:before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:1px;background:linear-gradient(180deg,#ED89E2,#C488E8,#5E8DF3);opacity:.6}
.step{position:relative;padding:0 0 44px}
.step:last-child{padding-bottom:0}
.step .n{position:absolute;left:-56px;top:0;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid transparent;background-image:linear-gradient(#fff,#fff),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.step .t{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.step h3{margin-bottom:8px;font-size:22px}
.step p{color:var(--ink-3);max-width:560px}
.step .shot{margin-top:16px;border:1px solid var(--hair);border-radius:14px;background:var(--paper-2);padding:14px 16px;display:flex;gap:12px;align-items:center;max-width:520px;font-size:13px;color:var(--ink-2)}
.step .shot i{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--hair);display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.step .shot .bar{flex:1;height:8px;border-radius:4px;background:var(--hair)}
.step .shot .bar b{display:block;height:100%;border-radius:4px;background:var(--grad)}

/* why recrev: side-by-side */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:860px){.vs{grid-template-columns:1fr}}
.vs .col{border-radius:20px;border:1px solid var(--hair);padding:24px;background:#fff}
.vs .col.rr{border-color:transparent;background-image:linear-gradient(#fff,#fff),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:var(--shadow)}
.vs .lab{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.vs .rr .lab{color:var(--ink)}
.vs .rr .lab:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad)}
.doc{border:1px solid var(--hair);border-radius:12px;background:var(--paper-2);padding:16px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.doc .hd{display:flex;gap:6px;margin-bottom:12px}
.doc .hd i{width:9px;height:9px;border-radius:50%;background:var(--hair-2)}
.doc .meta{color:var(--mute);font-size:12px;margin-bottom:8px}
.doc s{color:var(--mute)}
.doc mark{background:linear-gradient(90deg,rgba(237,137,226,.35),rgba(94,141,243,.35));color:inherit;border-radius:3px;padding:0 3px}
.vs .verdict{margin-top:14px;font-size:13px;display:flex;gap:8px;align-items:center;font-weight:500}
.vs .verdict.bad{color:#b42323}.vs .verdict.good{color:#0e7a4e}
.vs ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)}
.vs li{padding-left:24px;position:relative}
.vs .col:not(.rr) li:before{content:"×";position:absolute;left:2px;top:-1px;color:#b42323;font-weight:700}
.vs .rr li:before{content:"✓";position:absolute;left:0;top:0;color:var(--mark);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--hair);border-radius:20px;overflow:hidden;background:#fff;margin-top:24px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats div{padding:22px 20px;border-right:1px solid var(--hair)}
.stats div:last-child{border-right:0}
@media(max-width:900px){.stats div{border-bottom:1px solid var(--hair)}}
.stats .l{font-size:12px;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.stats .v{font-family:var(--serif);font-size:34px;letter-spacing:-.03em;line-height:1.1;margin:8px 0 2px}
.stats .c{font-size:12.5px;color:var(--ink-3)}
.stats .c b{color:var(--mark);font-weight:600}
.foot-note{font-size:11.5px;color:var(--mute);margin-top:10px}

/* client stories */
.stories{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:860px){.stories{grid-template-columns:1fr}}
.story{display:grid;grid-template-columns:64px 1fr;gap:0;border:1px solid var(--hair);border-radius:22px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.story .idx{background:var(--paper-2);border-right:1px solid var(--hair);display:flex;align-items:flex-start;justify-content:center;padding-top:26px;font-family:var(--serif);font-size:26px;color:var(--ink-3)}
.story .in{padding:26px 26px 22px}
.story .co{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.story .co i{width:26px;height:26px;border-radius:8px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-size:12px;font-weight:700}
.story .co span{font-weight:400;color:var(--mute)}
.story .m{display:grid;grid-template-columns:repeat(3,auto);gap:22px;justify-content:start;margin-bottom:16px}
.story .m b{display:block;font-family:var(--serif);font-size:30px;letter-spacing:-.03em;line-height:1}
.story .m span{font-size:12px;color:var(--mute);display:block;margin-top:4px;max-width:120px;line-height:1.3}
.story q{display:block;font-size:16.5px;font-weight:500;line-height:1.45;color:var(--ink);quotes:"“" "”"}
.story .ctx{color:var(--ink-3);font-size:14px;margin-top:10px}
.story .watch{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;text-decoration:none}
.story .watch i{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;padding-left:2px}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
@media(max-width:860px){.vids{grid-template-columns:1fr}}
.vid{border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:#fff}
.vid .th{aspect-ratio:16/9;background:#14112a;position:relative;display:flex;align-items:center;justify-content:center}
.vid .th:before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 20% 20%,rgba(237,137,226,.35),transparent 60%),radial-gradient(70% 90% at 90% 90%,rgba(94,141,243,.35),transparent 60%)}
.vid .th i{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;padding-left:3px;z-index:1}
.vid .th small{position:absolute;bottom:10px;left:12px;color:#cfc9e6;font-size:11px;z-index:1}
.vid p{padding:14px 16px;font-size:14px;font-weight:500}
.wall{columns:3;column-gap:16px;margin-top:20px}
@media(max-width:900px){.wall{columns:2}}
@media(max-width:640px){.wall{columns:1}}
/* 15 Sep (Sultan): a single tall column, narrow, like a message feed */
.wall.tall{columns:1;max-width:560px;margin:20px auto 0}
.wall.tall>div{margin-bottom:14px}
.wall>div{break-inside:avoid;margin-bottom:16px}
.shot{border:1.5px dashed var(--hair-2);border-radius:14px;background:var(--paper-2);padding:18px;text-align:center;color:var(--mute);font-size:12.5px;line-height:1.5}
.shot b{display:block;color:var(--ink-3);font-size:12px;margin-bottom:4px}
.msg{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:16px;font-size:14px;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.msg .who{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px;color:var(--mute)}
.msg .who i{width:22px;height:22px;border-radius:50%;background:var(--grad)}
.msg .who b{color:var(--ink);font-weight:600}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
@media(max-width:860px){.faq{grid-template-columns:1fr;gap:28px}}
.faq .sticky{position:sticky;top:120px}
.qa{border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:36px 1fr 28px;gap:12px;align-items:baseline;padding:20px 0;font-weight:600;font-size:17px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .k{font-family:var(--serif);color:var(--mute);font-weight:700;font-size:12px;letter-spacing:.1em}
.qa summary .pm{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair-2);display:inline-flex;align-items:center;justify-content:center;font-weight:400;color:var(--ink-3);font-size:16px;transition:transform .2s}
.qa details[open] summary .pm{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.qa .a{padding:0 40px 22px 48px;color:var(--ink-3);font-size:15.5px;line-height:1.6;max-width:640px}

/* cta band */
.cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:var(--r);padding:96px 32px;text-align:center;isolation:isolate}
.cta:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 100%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 60% 70% at 50% 100%,#000 20%,transparent 100%);z-index:-1}
.cta:after{content:"";position:absolute;width:900px;height:500px;left:50%;top:100%;transform:translate(-50%,-40%);background:radial-gradient(ellipse,rgba(196,136,232,.4),transparent 60%);filter:blur(30px);z-index:-1}
.cta h2{color:#fff;max-width:760px;margin:0 auto 16px}
.cta p{color:#c9c3e0;max-width:520px;margin:0 auto 30px}
.cta .btn.light:hover{transform:translateY(-1px)}

/* footer */
footer{padding:48px 0 30px;border-top:1px solid var(--hair);margin-top:96px}
footer .row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
footer .brand img{height:26px;width:auto;margin-bottom:12px}
footer .brand p{color:var(--ink-3);font-size:14px;max-width:320px}
footer .links{display:flex;gap:26px;flex-wrap:wrap;font-size:14px}
footer .links a{text-decoration:none;color:var(--ink-2)}
footer .links a:hover{color:var(--mark)}
footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--mute)}
footer .ico{display:inline-flex;align-items:center;gap:8px}
footer .ico i{width:26px;height:16px;border-radius:3px;border:1px solid var(--hair-2);font-size:8px;font-style:normal;display:inline-flex;align-items:center;justify-content:center;color:var(--mute)}

/* sub-page hero */
.sub-hero{padding:72px 0 36px;text-align:center;position:relative;overflow:hidden}
.sub-hero .blob{position:absolute;z-index:-1;filter:blur(60px);opacity:.45;border-radius:50%}
.sub-hero h1{font-size:clamp(34px,4.8vw,58px);max-width:900px;margin:18px auto 16px}
.guar{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--hair);border-radius:14px;padding:12px 16px;font-size:14px;font-weight:500;color:var(--ink-2);box-shadow:var(--shadow-sm);margin-top:22px}
.guar i{width:28px;height:28px;border-radius:8px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-size:13px}
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.props{grid-template-columns:1fr}}
.props .card{padding:22px}
.props .card i{width:36px;height:36px;border-radius:10px;background:var(--paper-3);display:inline-flex;align-items:center;justify-content:center;font-style:normal;margin-bottom:12px}
.props h4{margin-bottom:6px;font-size:15.5px}
.props p{font-size:14px;color:var(--ink-3)}

/* confirmation */
.confirm{max-width:760px;margin:0 auto}
.stepcard{border:1px solid var(--hair);border-radius:22px;background:#fff;padding:30px;box-shadow:var(--shadow-sm);margin-bottom:18px}
.stepcard .sn{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.stepcard .sn i{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px}
.stepcard h3{font-size:22px;margin-bottom:8px}
.stepcard p{color:var(--ink-3)}
.mail{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.mail a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair-2);border-radius:999px;padding:10px 16px;text-decoration:none;font-weight:500;font-size:14px}
.mail a i{width:10px;height:10px;border-radius:2px;display:inline-block}
.check{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.check li{padding-left:30px;position:relative;font-size:15px;color:var(--ink-2)}
.check li:before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--hair-2)}
.check li.on:before{background:var(--grad);border-color:transparent}
.check li.on:after{content:"✓";position:absolute;left:4px;top:1px;color:#fff;font-size:12px;font-weight:700}
.portal{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;border:1px solid var(--hair);border-radius:22px;padding:26px;background:linear-gradient(135deg,#fff,var(--paper-2))}
@media(max-width:760px){.portal{grid-template-columns:1fr}}
.portal .ui{border:1px solid var(--hair);border-radius:14px;background:#fff;padding:14px;box-shadow:var(--shadow-sm);font-size:12px}
.portal .ui .t{display:flex;justify-content:space-between;color:var(--mute);margin-bottom:10px}
.portal .ui .row{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--hair)}
.portal .ui .row b{font-weight:600}
.cs-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
@media(max-width:860px){.cs-strip{grid-template-columns:1fr 1fr}}
.cs-strip div{border:1px solid var(--hair);border-radius:14px;padding:16px;background:#fff}
.cs-strip b{font-family:var(--serif);font-size:26px;display:block;letter-spacing:-.03em}
.cs-strip span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:4px}

/* legal */
.legal-wrap{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}
@media(max-width:860px){.legal-wrap{grid-template-columns:1fr;gap:24px}}
.toc{position:sticky;top:120px;font-size:13.5px}
.toc a{display:block;padding:6px 0;color:var(--ink-3);text-decoration:none;border-left:2px solid var(--hair);padding-left:12px}
.toc a:hover{color:var(--ink);border-color:var(--mark)}
.legal-body h2{font-size:22px;font-family:var(--sans);font-weight:600;letter-spacing:-.01em;margin:36px 0 10px;scroll-margin-top:120px}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{color:var(--ink-2);font-size:15.5px;line-height:1.7}
.legal-body ul{padding-left:20px;margin:8px 0}
.legal-body .meta{font-size:13.5px;color:var(--mute);margin-bottom:24px}
.placeholder{background:#fff6d6;border-radius:4px;padding:0 5px;color:#8a6a00;font-weight:500}

/* v2.1 fixes after phone review */
.marquee p{position:relative;z-index:2}
.story .co{flex-wrap:wrap}
@media(max-width:640px){
  .story{grid-template-columns:52px 1fr}
  .story .in{padding:22px 18px 20px}
  .story .m{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .story .m b{font-size:26px}
  .story .m span{max-width:none}
  .mockbar{font-size:11px}
}
@media(max-width:640px){
  .story .m{display:flex;flex-wrap:wrap;gap:12px 24px}
  .story .m>div{min-width:84px}
  .story .m b{font-size:24px}
}

/* ===== v3 (real site) additions ===== */
.hero{padding:72px 0 40px}
.hero .vsl{margin-top:40px;max-width:1080px;margin-inline:auto}
.video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#12101f;cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:26px;box-shadow:0 14px 40px rgba(0,0,0,.35);padding-left:6px;transition:transform .15s}
.video:hover .play{transform:translate(-50%,-50%) scale(1.06)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.sm .play{width:52px;height:52px;font-size:18px;padding-left:4px}
/* booking under VSL */
.bookwrap{max-width:1040px;margin:0 auto}
.embed{background:#fff;border:1px solid var(--hair);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;position:relative;min-height:640px}
.embed iframe{width:100%;height:860px;border:0;display:block;position:relative;z-index:1;background:transparent}
.embed .fallback{position:absolute;inset:0;z-index:0}
.embed .fallback .book{border:0;box-shadow:none;border-radius:0;height:100%}
.book .right .btn{display:inline-flex}
/* logo strip */
.logos{padding:44px 0 12px;text-align:center}
.logos p{color:var(--mute);font-size:13.5px;margin-bottom:22px}
.logos .track span{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink-2)}
/* client results */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.results{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.results{grid-template-columns:1fr}}
/* 15 Sep (Sultan): one above another, narrow, so the visitor scrolls through them */
.results.stack{grid-template-columns:1fr;max-width:1000px;margin:0 auto;gap:22px}
.results.stack .result{display:grid;grid-template-columns:1.15fr 1fr;align-items:center}
.results.stack .result .video{border-radius:0;height:100%;aspect-ratio:16/9;min-height:280px}
.results.stack .result .in{padding:28px 32px}
@media(max-width:720px){.results.stack .result{grid-template-columns:1fr}.results.stack .result .video{aspect-ratio:16/9;min-height:0}}
.result{border:1px solid var(--hair);border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:none;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.result:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(30,16,80,.35);border-color:var(--hair-2)}
.result .video img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.result:hover .video img{transform:scale(1.03)}
.result .video{border-radius:0}
.result .in{padding:20px 22px 22px}
.result h3{font-size:20px;margin-bottom:12px;line-height:1.25}
.result ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.result li{padding-left:22px;position:relative;font-size:15px;color:var(--ink-3);line-height:1.45}
.result li:before{content:"✓";position:absolute;left:0;top:0;color:var(--mark);font-weight:700}
/* case studies (before/after) */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.cases{grid-template-columns:1fr}}
.case{border:1px solid var(--hair);border-radius:22px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:640px){.case{grid-template-columns:1fr}}
.case .video{border-radius:0;aspect-ratio:auto;min-height:220px}
.case .in{padding:22px}
.case .co{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.case h3{font-size:18px;margin-bottom:8px}
.case p{font-size:14px;color:var(--ink-3);margin-bottom:10px}
.case ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.case li{padding-left:20px;position:relative;font-size:13.5px;color:var(--ink-2)}
.case li:before{content:"✓";position:absolute;left:0;top:0;color:var(--mark);font-weight:700}
/* authentic wall of love */
.wall.raw{columns:4;column-gap:14px}
@media(max-width:1000px){.wall.raw{columns:3}}
@media(max-width:760px){.wall.raw{columns:2}}
@media(max-width:480px){.wall.raw{columns:1}}
.wall.raw>div{margin-bottom:14px}
/* 15 Sep (Sultan): one tall narrow column — declared after .wall.raw so it wins at every width */
.wall.raw.tall,.wall.tall{columns:auto;column-gap:0;display:grid;grid-template-columns:1fr 1fr;gap:0 22px;max-width:1000px;margin:20px auto 0;align-items:start}
.wall.tall .col{display:grid;gap:18px}
.wall.tall .col:nth-child(2){padding-top:72px}
@media(max-width:640px){.wall.raw.tall,.wall.tall{grid-template-columns:1fr}.wall.tall .col:nth-child(2){padding-top:0}}
.wall.raw.tall>div{margin-bottom:0}
.wall.raw.tall img{width:100%;display:block;border-radius:12px;border:1px solid var(--hair);transform:none}
.wall.raw img{width:100%;height:auto;display:block;border:1px solid var(--hair-2);border-radius:8px;background:#fff;transform:rotate(var(--tilt,0deg))}
.wall.raw>div:nth-child(3n){--tilt:-.6deg}.wall.raw>div:nth-child(4n){--tilt:.7deg}.wall.raw>div:nth-child(7n){--tilt:-.4deg}
/* faq left/right */
.faq h2{font-size:clamp(34px,4.6vw,54px)}
/* mail buttons */
.mail img{width:18px;height:18px}
/* q-videos grid (confirmation) */
.qvids{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
@media(max-width:640px){.qvids{grid-template-columns:1fr}}
.qvid{border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:#fff}
.qvid .video{border-radius:0}
.qvid p{padding:12px 14px;font-size:14px;font-weight:600}
/* portal card image */
.portal img{border-radius:14px;border:1px solid var(--hair);box-shadow:var(--shadow-sm)}
/* legal placeholders */
.todo{background:#fff6d6;color:#8a6a00;border-radius:4px;padding:0 5px}
footer{margin-top:64px}
.noindex-note{display:none}

/* branded poster for a video with no public thumbnail */
.video.poster{background:linear-gradient(135deg,#1a1630,#2a2350)}
.video.poster:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 25% 25%,rgba(237,137,226,.45),transparent 60%),radial-gradient(60% 80% at 80% 75%,rgba(94,141,243,.45),transparent 60%)}
.video.poster .poster-in{position:absolute;left:18px;bottom:16px;right:18px;color:#fff;z-index:1}
.video.poster .poster-in span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.video.poster .poster-in b{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.01em}

/* 16 Sep (Sultan: "make the wall longer"). Both message sets are now built in
   — 43 screenshots — which is the proof he wanted but also forty screens of
   scrolling if it all just sits there. Collapsed to a long-but-finite run with
   a fade, and one button opens the rest. Without JS the fade and button are
   harmless and the feed simply renders open. */
.wall-feed{position:relative}
.wall-feed.open{max-height:none}
.wall-fade{position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper,#fff) 88%)}
.wall-feed.open .wall-fade{display:none}
.wall-more{display:flex;justify-content:center;margin-top:18px}
.wall-feed.open+.wall-more button{opacity:.7}

/* ── 16 Sep, second pass — the Throxy lesson applied without touching the
   structure Sultan signed off. This was a flat white page: every section
   floated on the same paper, nothing had weight, and the designer's Figma and
   this build read as the same site. Throxy's pull is rhythm — light, then a
   full dark block, then light — with the brand colour doing real work on the
   dark. So: problem and process go navy, case studies and the wall stay light
   between them, and the page already closes on the dark CTA card.
   The four client numbers move INSIDE the problem block as a quiet footer
   row (Kwame: "not numbers everywhere") — same true figures, no billboard. */

h2{font-size:clamp(32px,4.4vw,56px)}

section.dark{position:relative;overflow:hidden;background:var(--navy);color:#fff}
section.dark:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 100%);pointer-events:none}
section.dark .orb{display:none}
section.dark .wrap{position:relative;z-index:1}
section.dark h2,section.dark h3{color:#fff}
section.dark .eyebrow{color:#b9b3d6}
section.dark .lead,section.dark p{color:rgba(255,255,255,.72)}
section.dark .btn.primary{background:#fff;color:var(--ink);box-shadow:0 14px 40px -16px rgba(237,137,226,.55)}
section.dark .btn.primary:hover{color:#fff}
section.dark .btn.primary:hover:after{opacity:1}

.prob.dark .card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);box-shadow:none;position:relative;border-radius:var(--r)}
.prob.dark .card:before{display:none}
.prob.dark .art{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.prob.dark .num{color:#a9a3c6}
.prob.dark h3{color:#fff}
.prob.dark p{color:rgba(255,255,255,.7)}

.prob-numbers{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;padding-top:34px;border-top:1px solid rgba(255,255,255,.1)}
.prob-numbers>div{text-align:center;padding:0 14px;border-right:1px solid rgba(255,255,255,.08)}
.prob-numbers>div:last-child{border-right:0}
.prob-numbers b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,42px);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prob-numbers span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.62)}
@media(max-width:760px){.prob-numbers{grid-template-columns:1fr 1fr;row-gap:26px}.prob-numbers>div:nth-child(2){border-right:0}}

#how.dark .how .get{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
#how.dark .step .t{color:#a9a3c6}
#how.dark .step p{color:rgba(255,255,255,.7)}
#how.dark .step .n{color:#fff;background-image:linear-gradient(var(--navy),var(--navy)),var(--grad);background-origin:border-box;background-clip:padding-box,border-box}
#how.dark .steps:before{opacity:.9}
#how.dark .step .shot{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#fff}
#how.dark .step .shot i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
#how.dark .step .shot .bar{background:rgba(255,255,255,.12)}

/* 17 Sep (Sultan): VSL -> Typeform qualifies -> booking is just name, email, date */
.qualify{position:relative;z-index:1}
.qualify .enq{display:block;width:100%;max-width:1040px;margin:0 auto;height:640px;border:0;background:#fff;border-radius:var(--r);box-shadow:0 40px 90px -50px rgba(30,16,80,.45);transition:height .3s ease}
.qualify [data-tf-widget]{min-height:560px}
.embed.hidden{display:none}
.qualify.done .tf{display:none}


/* ══════════════ 17 Sep, v4 — the "not AI slop" pass ══════════════
   Kwame: "this reads like every generated AI website". The tells were the
   gradient blobs on white, everything centred, pill buttons, a border + shadow
   on every card. Order and content stay exactly as Sultan signed off; what
   changes is the treatment: a lavender-tinted paper, one ink bezel for the
   VSL, dot-grid dark blocks, left-set section heads on a 5/7 grid, the
   client marks as two counter-scrolling rows of tiles, and motion that
   reveals lines as you scroll. */

/* hero ground: a dot grid that fades in from the top and one soft brand wash
   behind the video — the only gradient in the first screen apart from the
   two words in the headline. */
.hero .hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(15,13,26,.10) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 100%)}
.hero .hero-bg:after{content:"";position:absolute;left:50%;bottom:-10%;width:1200px;height:520px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(237,137,226,.28) 0%,rgba(196,136,232,.22) 30%,rgba(94,141,243,.16) 55%,transparent 75%);filter:blur(24px)}
.hero h1{max-width:1120px;margin:26px auto 0}
.hero .pill{font-family:var(--serif);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* the VSL: native <video>, autoplays muted when it scrolls into view */
.player{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;cursor:pointer;isolation:isolate}
.player video{width:100%;height:100%;object-fit:cover;display:block}
.player .sound{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.96);color:var(--ink);border:0;border-radius:12px;padding:12px 18px 12px 14px;font:600 14px/1 var(--sans);cursor:pointer;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);transition:transform .2s,opacity .3s;z-index:2}
.player .sound:hover{transform:translateX(-50%) translateY(-2px)}
.player .sound i{width:26px;height:26px;border-radius:8px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;font-style:normal;color:#fff;font-size:13px}
.player.sound-on .sound{opacity:0;pointer-events:none}
.player .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18);z-index:5;transition:bottom .2s,height .15s;cursor:pointer}
.player .bar>i{display:block;height:100%;width:0;background:var(--grad)}
/* 21 Sep (Kwame): chapters live on the progress bar, YouTube style: one segment per chapter, name on hover */
.player .bar.seg{display:flex;gap:3px;background:transparent}
.player .bar.seg>i{display:none}
.player .bar .s{position:relative;height:100%;background:rgba(255,255,255,.34);transition:transform .15s;transform-origin:bottom}
.player .bar .s>i{display:block;height:100%;width:0;background:var(--grad);pointer-events:none}
.player .bar:hover{height:7px}.player .bar .s:hover{transform:scaleY(1.35)}
.player .bar .s:after{content:attr(data-title);position:absolute;bottom:14px;left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;background:rgba(0,0,0,.82);color:#fff;font:600 12px/1 Inter,system-ui,sans-serif;padding:7px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.player .bar .s:first-child:after{left:0;transform:none}.player .bar .s:last-child:after{left:auto;right:0;transform:none}
.player .bar .s:hover:after{opacity:1;transform:translateX(-50%)}
.player .bar .s:first-child:hover:after,.player .bar .s:last-child:hover:after{transform:none}
.player .bar:before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-6px}
.player .big{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:3}
.player .big span{width:80px;height:80px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;padding-left:6px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.player.paused .big{display:flex}
.player .badge{position:absolute;top:14px;left:14px;z-index:2;font:700 11px/1 var(--serif);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:7px 10px;border-radius:8px}

/* section heads: left-set, 5/7 */
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:end;margin-bottom:56px}
.sec-head .lead{max-width:520px;justify-self:end;padding-bottom:6px}
@media(max-width:860px){.sec-head{grid-template-columns:1fr;gap:16px}.sec-head .lead{justify-self:start}}
.sec-head h2{max-width:20ch}
section.dark .sec-head .lead{color:rgba(255,255,255,.7)}

/* client marks: two counter-scrolling rows of tiles */
.clients{padding:56px 0 24px;overflow:hidden;position:relative}
.clients p{text-align:center;color:var(--ink-3);font-size:14px;margin-bottom:26px}
.clients p b{color:var(--ink);font-weight:600}
.clients .row{display:flex;gap:14px;width:max-content;animation:scroll 70s linear infinite;margin-bottom:14px}
.clients .row.b{animation-direction:reverse;animation-duration:84s}
.clients .tile{width:64px;height:64px;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--hair);flex:none;filter:saturate(.8);transition:filter .3s,transform .3s}
.clients .tile img{width:100%;height:100%;object-fit:cover;display:block}
.clients .tile.pad img{object-fit:contain;padding:10px}
.clients .row:hover{animation-play-state:paused}
.clients .tile:hover{filter:none;transform:translateY(-3px)}
.clients:before,.clients:after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:1;pointer-events:none}
.clients:before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.clients:after{right:0;background:linear-gradient(-90deg,var(--paper),transparent)}
.clients .also{text-align:center;color:var(--mute);font-size:13.5px;margin-top:22px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.clients .also img{height:20px;width:auto;opacity:.7;filter:grayscale(1)}

/* problem block: label instead of a number, art tile quieter */
.prob .num{font-family:var(--serif);font-size:11.5px;letter-spacing:.14em}
.prob.dark .art{background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
.prob-numbers{margin-top:64px;padding-top:36px;border-top:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prob-numbers b{font-family:var(--serif);font-weight:800;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.04em;display:block;color:#fff;font-variant-numeric:tabular-nums}
.prob-numbers span{display:block;color:rgba(255,255,255,.6);font-size:13.5px;margin-top:6px}
@media(max-width:760px){.prob-numbers{grid-template-columns:1fr 1fr}}

/* how it works: the "what you get" box loses its orb */
.how .get{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r)}
.how .get:before{display:none}
.how .get li:before{border-radius:50%;width:8px;height:8px;top:9px}
.step .n{font-family:var(--serif);font-weight:800}

/* booking section: the embed sits on ink so the widget reads as a product */
.embed{border-radius:var(--r);box-shadow:0 40px 90px -50px rgba(30,16,80,.45)}

/* reveal on scroll — added by JS only, so without JS everything is simply there */
.rv,.split{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.split.in{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
.rv-stagger>*{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.rv-stagger.in>*{opacity:1;transform:none}
.rv-stagger.in>*:nth-child(2){transition-delay:.08s}.rv-stagger.in>*:nth-child(3){transition-delay:.16s}.rv-stagger.in>*:nth-child(4){transition-delay:.24s}
.rv-stagger.in>*:nth-child(5){transition-delay:.32s}.rv-stagger.in>*:nth-child(6){transition-delay:.4s}
/* headline words rise out of a mask, one after another (Throxy's move) */
/* 21 Sep (Kwame): the word-by-word mask looked broken mid-scroll; headings now rise as one */
@media(prefers-reduced-motion:reduce){.rv,.rv-stagger>*{opacity:1;transform:none;transition:none}.split{opacity:1;transform:none;transition:none}.clients .row,.marquee .track{animation:none}}

/* ── 17 Sep, flair pass (Kwame: "a little flare… not general AI slop") ──
   Three floating proof cards beside the VSL, a slow shimmer through the two
   gradient words, and a hero wash that leans toward the pointer. */
.hero{--mx:50%;--my:60%}
.hero .hero-bg:after{left:var(--mx);bottom:auto;top:var(--my);transform:translate(-50%,-30%);transition:left 1.2s cubic-bezier(.2,.7,.2,1),top 1.2s cubic-bezier(.2,.7,.2,1)}
.hero h1 em.acc{background-size:200% 100%;animation:shimmer 7s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.hero h1 em.acc{animation:none}}

/* ── Typeform-style qualifier (17 Sep): one question per screen, big type,
   keyboard-first, slide between screens. The site is the form now. ── */
.tq{position:relative;background:#fff;border:1px solid var(--hair);border-radius:var(--r);max-width:880px;margin:0 auto;box-shadow:0 40px 90px -50px rgba(30,16,80,.45);text-align:left;overflow:hidden;min-height:420px;display:flex;flex-direction:column}
.tq-track{height:4px;background:var(--paper-3)}
.tq-track i{display:block;height:100%;width:12%;background:var(--grad);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.tq-screens{position:relative;flex:1;padding:56px 64px 28px}
@media(max-width:640px){.tq-screens{padding:40px 24px 20px}}
.tq-s{display:none;animation:tqin .45s cubic-bezier(.2,.7,.2,1)}
.tq-s.on{display:block}
.tq-s.back{animation-name:tqback}
@keyframes tqin{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes tqback{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
.tq-n{display:flex;align-items:center;gap:6px;color:var(--mark);font:600 14px/1 var(--sans);margin-bottom:14px}
.tq-n b{font-weight:700}
.tq-s h3{font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;line-height:1.25;max-width:32ch;margin-bottom:22px;color:var(--ink)}
.tq-s input{width:100%;border:0;border-bottom:2px solid var(--hair-2);padding:12px 0 14px;font:500 clamp(20px,2.2vw,26px)/1.2 var(--sans);color:var(--ink);background:transparent;border-radius:0;transition:border-color .15s}
.tq-s input::placeholder{color:#c6c2d6}
.tq-s input:focus{outline:none;border-bottom-color:var(--mark)}
.tq-s input.bad{border-bottom-color:#d33}
.tq-err{display:none;margin-top:10px;font-size:13.5px;color:#b42323;background:#fff1f1;border-radius:8px;padding:8px 12px}
.tq-s.error .tq-err{display:inline-block}
.tq-choices{display:flex;gap:10px;flex-wrap:wrap}
.tq-choices.col{flex-direction:column;max-width:360px}
.tq-choices label{position:relative;cursor:pointer}
.tq-choices input{position:absolute;opacity:0;inset:0}
.tq-choices span{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 18px 0 8px;border-radius:10px;border:1px solid var(--hair-2);background:rgba(94,141,243,.06);font-weight:500;font-size:17px;color:var(--ink);min-width:140px;transition:background .15s,border-color .15s,box-shadow .15s}
.tq-choices.col span{width:100%}
.tq-choices span i{width:26px;height:26px;border-radius:6px;border:1px solid var(--hair-2);background:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 12px/1 var(--sans);color:var(--ink-3);font-style:normal}
.tq-choices label:hover span{border-color:var(--mark);background:rgba(94,141,243,.12)}
.tq-choices input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff;box-shadow:0 10px 24px -14px rgba(15,13,26,.6)}
.tq-choices input:checked+span i{background:#fff;color:var(--ink);border-color:#fff}
.tq-choices input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.tq-end h3{max-width:26ch}
.tq-end p{color:var(--ink-3);font-size:16px}
.tq-nav{display:flex;align-items:center;gap:14px;padding:0 64px 28px}
@media(max-width:640px){.tq-nav{padding:0 24px 20px}}
.tq-ok{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:12px 20px;font:700 16px/1 var(--sans);cursor:pointer;transition:transform .15s,box-shadow .2s}
.tq-ok:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(94,141,243,.6)}
.tq-ok span{font-size:14px}
.tq-hint{font-size:13px;color:var(--mute);order:2}
.tq-hint b{color:var(--ink-3);font-weight:600}
.tq-arrows{margin-left:auto;display:flex;gap:2px;order:3}
.tq-arrows button{width:38px;height:38px;border:1px solid var(--hair-2);background:#fff;color:var(--ink-2);font-size:16px;cursor:pointer}
.tq-arrows button:first-child{border-radius:8px 0 0 8px}.tq-arrows button:last-child{border-radius:0 8px 8px 0;border-left:0}
.tq-arrows button:disabled{opacity:.35;cursor:default}
.tq [hidden]{display:none!important}
.tq.done{display:none}


/* premium touches: the nav tightens once you scroll */
nav.top{transition:box-shadow .3s,background .3s}
nav.top .wrap{transition:height .3s cubic-bezier(.2,.7,.2,1)}
body.scrolled nav.top .wrap{height:58px}
body.scrolled nav.top{box-shadow:0 10px 30px -22px rgba(30,16,80,.35);background:rgba(251,250,254,.86)}

/* loading veil on the widget while it reloads with the prospect's details */
.embed.loading:before{content:"";position:absolute;inset:0;z-index:3;background:#fff}
.embed.loading:after{content:"";position:absolute;left:50%;top:180px;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:3px solid var(--hair-2);border-top-color:var(--blue);animation:spin .8s linear infinite;z-index:4}
@keyframes spin{to{transform:rotate(360deg)}}

/* 21 Sep (Sultan): centred section heads, no helper text */
.sec-head.center{grid-template-columns:1fr;justify-items:center;text-align:center;align-items:center}
.sec-head.center h2{max-width:24ch;margin-inline:auto}
/* 21 Sep (Sultan): VSL controls like a real player, plus chapters */
.player .ctrl{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .2s;color:#fff;font:600 12px/1 Inter,system-ui,sans-serif}
.player:hover .ctrl,.player.paused .ctrl,.player:fullscreen .ctrl{opacity:1}
.player .ctrl button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;height:30px;min-width:34px;padding:0 10px;cursor:pointer;font:600 12px/1 Inter,system-ui,sans-serif;backdrop-filter:blur(6px)}
.player .ctrl button:hover{background:rgba(255,255,255,.26)}
.player .ctrl .c-spacer{flex:1}.player .ctrl .c-time{font-variant-numeric:tabular-nums;opacity:.9}
.player .ctrl .c-speed{min-width:46px}
.player:fullscreen{border-radius:0}.player:fullscreen video{object-fit:contain}
.player:hover .bar,.player.paused .bar,.player:fullscreen .bar{bottom:52px}

/* 21 Sep (Sultan): one row of sector employers, mark + name, grayscale, evenly spaced */
.clients.sectors .row{gap:0;animation-duration:120s;margin-bottom:0}
.clients.sectors .mark{display:inline-flex;align-items:center;gap:11px;padding:0 30px;height:48px;flex:none;color:var(--ink-3);font-family:var(--serif);font-weight:600;font-size:16.5px;letter-spacing:-.01em;white-space:nowrap;opacity:.72;transition:opacity .25s,color .25s}
.clients.sectors .mark img{height:24px;width:auto;max-width:72px;display:block;opacity:.75;filter:grayscale(1);transition:opacity .25s,filter .25s}
.clients.sectors .mark:hover{opacity:1;color:var(--ink)}.clients.sectors .mark:hover img{opacity:1}
.clients.sectors .row:hover{animation-play-state:running}

/* ── 22 Sep 2026, phone pass (Kwame: "it is not optimised for mobile viewing") ──
   The layout already collapsed to one column, but it kept desktop rhythm: 112px
   between every section, a 24px gutter, and two embedded iframes pinned to fixed
   desktop heights, which left a blank half-screen under the qualifier. */
@media(max-width:860px){
  section{padding:76px 0}
  section.tight{padding:48px 0}
  .vsl{margin-top:34px}
}
@media(max-width:640px){
  section{padding:56px 0}
  section.tight{padding:40px 0}
  .wrap{padding-inline:16px}
  .hero h1{letter-spacing:-.03em}
  .vsl{margin-top:26px;padding:6px;border-radius:18px}
  .vsl .frame{border-radius:13px}
  /* The booking widget and the qualifier both report their own height by
     postMessage; these are only the heights they hold until that lands, so a
     phone never shows a tall empty card. */
  .qualify .enq{height:min(78vh,560px);border-radius:18px}
  .embed{min-height:0;border-radius:18px}
  .embed iframe{height:min(92vh,720px)}
  .embed.loading:after{top:120px}
  .chips{gap:8px;margin-top:20px}
  .chip{font-size:12.5px;padding:6px 11px}
  .clients{padding:40px 0 18px}
  .marquee{padding:26px 0 6px}
  .wall.tall{gap:0 12px;margin-top:14px}
  .wall.tall .col{gap:12px}
}
/* Nothing on the page is meant to scroll sideways; clip rather than hide so
   the sticky nav keeps working. */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
img{max-width:100%}


/* ── 22 Sep 2026, second phone pass (Kwame, from his own screenshots) ── */

/* The "how it works" left column is sticky so it holds beside the steps on a
   wide screen. In one column it pinned itself and the steps scrolled straight
   over the top of it, which is the overlap he photographed. */
@media(max-width:900px){
  .how .sticky{position:static;top:auto}
}

/* The employer strip on a phone. Three things were wrong: the marks kept
   their desktop size so barely two fitted, and the 140px fade on each edge
   covered 280px of a 390px screen, which is why the logos looked half erased
   rather than moving. The transform is promoted so iOS keeps compositing it. */
.clients .row{will-change:transform;backface-visibility:hidden}
@media(max-width:640px){
  .clients{padding:34px 0 14px}
  .clients p{font-size:13px;margin-bottom:18px;padding:0 4px}
  .clients:before,.clients:after{width:44px}
  .clients.sectors .row{animation-duration:42s}
  .clients.sectors .row.b{animation-duration:50s}
  .clients.sectors .mark{padding:0 15px;height:38px;gap:7px;font-size:13.5px;opacity:.85}
  .clients.sectors .mark img{height:18px;max-width:54px}
}

/* The thank-you page is two lines; let them breathe instead of sitting under
   a hero built for a headline plus chips. */
.hero.thanks{padding-bottom:90px}
.hero.thanks .lead{color:var(--ink-3)}