/* Thunderbolt v75 - bold, layered, multi-page. No em dashes. */

:root{
  --ink:#0E0A16;--ink2:#160E28;--purple:#733CCE;--violet:#8B34E0;--electric:#A24FEF;
  --glow:#C58BFF;--lilac:#D8C4FF;--lilac-soft:#E7DAFF;--wash:#F5F1FC;--paper:#FFFFFF;
  --ink-soft:#4A4358;--line:rgba(20,18,26,.12);--maxw:1200px;--pad:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
sup{font-weight:500}
.tm{font-size:.55em;vertical-align:super;font-weight:700;color:var(--glow);letter-spacing:.02em}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(17px,2vw,22px);letter-spacing:.02em;text-transform:uppercase;color:var(--purple);margin:0 0 16px}
.eyebrow-light{color:#D8B4FF}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:15.5px;line-height:1;padding:15px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn-sm{padding:11px 20px;font-size:14.5px}
.btn-lg{padding:18px 34px;font-size:17px}
.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:var(--violet);transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(139,52,224,.7)}
.btn-invert{background:#fff;color:#3A1580}
.btn-invert:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.btn-text{padding:8px 0;border-radius:0;color:var(--purple)}
.btn-text span{display:inline-block;transition:transform .18s ease}
.btn-text:hover span{transform:translateX(5px)}
.btn-text-light{color:#fff}
.btn-text-light:hover{color:var(--glow)}

/* Header (white) */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
.site-header.scrolled{box-shadow:0 6px 24px -18px rgba(20,18,26,.5)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:46px;height:auto}
.brand-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:23px;letter-spacing:-.01em;color:var(--ink)}
.brand-name sup{font-size:.4em;color:var(--ink-soft)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:15.5px;color:var(--ink);transition:color .18s ease}
.nav a:hover{color:var(--purple)}
.nav a.btn{color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px}

/* Hero */
.hero{position:relative;overflow:hidden;color:#fff;padding:112px 0 128px;background:radial-gradient(120% 120% at 84% 12%,rgba(197,139,255,.55),transparent 52%),linear-gradient(140deg,#2A1152 0%,#5A21B0 50%,#8B34E0 100%)}
.hero-texture{position:absolute;inset:0;background:url(../img/motif.svg);background-size:240px;opacity:.11;z-index:1}
.hero-bolt{position:absolute;top:-18px;right:14px;width:min(46vw,470px);z-index:2;opacity:.9;pointer-events:none}
.hero-bolt svg{width:100%;height:auto;overflow:visible}
.hero-bolt .bolt-fill{fill:#C58BFF;opacity:.85}
.hero-bolt .bolt-halo{fill:none;stroke:#FFFFFF;stroke-width:10;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:170 830;opacity:.2;animation:boltTrace 4.5s linear infinite;filter:blur(5px)}
.hero-bolt .bolt-trace{fill:none;stroke:#FFFFFF;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:170 830;animation:boltTrace 4.5s linear infinite;filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 9px rgba(197,139,255,.6))}
.hero-inner{position:relative;z-index:3;max-width:900px}
.hero-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(46px,9vw,104px);line-height:.98;letter-spacing:-.035em;margin:0 0 30px}
.hero-sub{font-size:clamp(17px,2.3vw,21px);color:var(--lilac-soft);max-width:600px;margin:0 0 36px;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
@keyframes boltPulseBig{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.1)}}
@keyframes boltPulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}

/* Sections */
.section{padding:96px 0;position:relative}
.light{background:radial-gradient(60% 50% at 6% 0%,rgba(197,139,255,.17),transparent 60%),radial-gradient(50% 42% at 96% 100%,rgba(115,60,206,.11),transparent 60%),var(--wash);color:var(--ink)}
.section-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(32px,5.2vw,54px);line-height:1.07;letter-spacing:-.025em;margin:0 0 22px}
.lede{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:62ch;margin:0 0 46px}

/* Cards + icons */
.cols3{display:grid;grid-template-columns:1fr;gap:20px}
.card{position:relative;border-radius:18px;padding:30px 28px 34px;border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,rgba(115,60,206,.45),rgba(162,79,239,.08) 55%,rgba(197,139,255,.35)) border-box;box-shadow:0 18px 40px -28px rgba(90,33,176,.5),0 2px 8px rgba(20,18,26,.05);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-7px);box-shadow:0 30px 56px -30px rgba(90,33,176,.62),0 4px 12px rgba(20,18,26,.06)}
.card-ico{display:flex;width:56px;height:56px;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(135deg,rgba(115,60,206,.14),rgba(162,79,239,.14));box-shadow:inset 0 0 0 1px rgba(115,60,206,.2),0 10px 20px -12px rgba(115,60,206,.55);margin-bottom:22px}
.card-ico img{width:34px;height:34px}
.card h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:20px;letter-spacing:-.01em;margin:0 0 10px}
.card p{margin:0;color:var(--ink-soft);font-size:15.5px}

/* Approach */
.approach{background:linear-gradient(160deg,#160E28,#0E0A16);color:#fff;overflow:hidden}
.approach-texture{position:absolute;inset:0;background:url(../img/motif.svg);background-size:220px;opacity:.10}
.approach::after{content:"";position:absolute;right:-8%;top:-30%;width:60%;height:160%;background:radial-gradient(circle at center,rgba(139,52,224,.4),transparent 60%);pointer-events:none}
.approach-inner{position:relative;z-index:2;max-width:860px}
.approach-mark{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(40px,7.8vw,82px);line-height:1.0;letter-spacing:-.035em;margin:0 0 28px}
.approach-copy{font-size:clamp(17px,2.3vw,20px);color:rgba(231,218,255,.78);max-width:56ch;margin:0 0 30px}

/* Credibility */
.credibility{background:var(--wash);color:var(--ink)}
.cred-text{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(19px,2.6vw,27px);line-height:1.42;letter-spacing:-.01em;max-width:52ch;margin:0}

/* CTA */
.cta{overflow:hidden;color:#fff;background:radial-gradient(110% 130% at 15% 20%,rgba(197,139,255,.5),transparent 55%),linear-gradient(135deg,#5A21B0,#8B34E0)}
.cta-texture{position:absolute;inset:0;background:url(../img/motif.svg);background-size:230px;opacity:.10}
.cta-inner{position:relative;z-index:2;text-align:center;max-width:820px;margin-inline:auto}
.cta-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(28px,4.8vw,46px);line-height:1.12;letter-spacing:-.02em;margin:0 0 32px}
.cta-note{font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lilac);margin:24px 0 0}

/* Footer */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);padding:56px 0 34px}
.footer-inner{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-lockup{display:flex;align-items:center;gap:18px;transition:opacity .18s ease}
a.foot-lockup:hover{opacity:.85}
.foot-lockup img{width:64px;height:auto}
.foot-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:24px;margin:0;color:#fff;letter-spacing:-.01em;line-height:1}
.foot-name sup{font-size:.38em;color:rgba(255,255,255,.55)}
.foot-slogan{margin:6px 0 0;font-size:14.5px;color:rgba(255,255,255,.74)}
.foot-slogan sup{font-size:.55em}
.foot-nav{display:flex;flex-wrap:wrap;gap:24px}
.foot-nav a{font-family:"Space Grotesk",sans-serif;font-size:15px;color:rgba(255,255,255,.78)}
.foot-nav a:hover{color:#fff}
.foot-base{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;padding-top:22px;font-family:"Inter",sans-serif;font-size:13px;letter-spacing:0;color:rgba(255,255,255,.66)}
.foot-base p{margin:0}

/* Loader */
#loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(120% 120% at 50% 40%,#3A1C74,#160E28);transition:opacity .6s ease}
#loader.done{opacity:0;pointer-events:none}
.loader-mark{width:min(60vw,240px)}
#loader-svg{width:100%;height:auto;overflow:visible}
#loader-svg #bolt{transform-box:view-box;transform-origin:351.5px 271px;animation:compass 2.4s ease-in-out infinite}
@keyframes compass{0%{transform:rotate(0) scale(1)}33%{transform:rotate(720deg) scale(1)}44%{transform:rotate(720deg) scale(1)}53%{transform:rotate(720deg) scale(1.34)}63%{transform:rotate(720deg) scale(1)}100%{transform:rotate(720deg) scale(1)}}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ===== Interior page header ===== */
.page-head{position:relative;overflow:hidden;color:#fff;padding:130px 0 84px;background:radial-gradient(120% 130% at 82% 10%,rgba(197,139,255,.5),transparent 52%),linear-gradient(140deg,#2A1152,#7B2FD0)}
.page-head-texture{position:absolute;inset:0;background:url(../img/motif.svg);background-size:230px;opacity:.11}
.page-head-inner{position:relative;z-index:2;max-width:820px}
.page-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(40px,7vw,74px);line-height:1.02;letter-spacing:-.03em;margin:0 0 18px}
.page-sub{font-size:clamp(17px,2.2vw,20px);color:var(--lilac-soft);max-width:60ch;margin:0}

/* ===== About ===== */
.story{background:var(--paper)}
.story-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.story-photo{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--wash)}
.story-photo img{width:100%;height:auto;display:block}
.story-cap{text-align:center;margin:16px 0 0}
.cap-name{display:block;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:16px;color:var(--ink)}
.cap-role{display:block;font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.story-body p{font-size:17px;color:var(--ink-soft);margin:0 0 20px;max-width:60ch}
.story-body p.lead{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(21px,3vw,28px);line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.story-body a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}

.values{background:var(--wash)}
.values-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:40px}
.value{padding-left:34px;position:relative}
.value::before{content:"";position:absolute;left:0;top:6px;width:20px;height:18px;background:linear-gradient(135deg,var(--purple),var(--electric));-webkit-mask:url(../img/bolt-icon.svg) center/contain no-repeat;mask:url(../img/bolt-icon.svg) center/contain no-repeat}
.value h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:18px;margin:0 0 6px;letter-spacing:-.01em}
.value p{margin:0;color:var(--ink-soft);font-size:15px}

.timeline{background:linear-gradient(160deg,#160E28,#0E0A16);color:#fff;overflow:hidden}
.timeline-texture{position:absolute;inset:0;background:url(../img/motif.svg);background-size:220px;opacity:.09}
.timeline-inner{position:relative;z-index:2}
.tl{position:relative;margin-top:46px;padding-left:34px;border-left:2px solid rgba(197,139,255,.35)}
.tl-item{position:relative;padding:0 0 40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-43px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 5px rgba(197,139,255,.18)}
.tl-when{font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);margin:0 0 6px}
.tl-item h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:20px;margin:0 0 6px}
.tl-item p{margin:0;color:rgba(231,218,255,.72);max-width:60ch}

/* ===== Insights ===== */
.ins{background:var(--paper)}
.ins.alt{background:var(--wash)}
.ins-list{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px}
.ins-item{display:block;padding:26px 28px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.ins.alt .ins-item{background:#fff}
.ins-item:hover{transform:translateY(-4px);border-color:var(--purple);box-shadow:0 22px 44px -28px rgba(90,33,176,.5)}
.ins-kind{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin:0 0 8px}
.ins-item h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:19px;line-height:1.3;margin:0 0 6px;letter-spacing:-.01em}
.ins-item p{margin:0;color:var(--ink-soft);font-size:15px}
.ins-item .go{display:inline-block;margin-top:12px;color:var(--purple);font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:14.5px}
.ins-sub{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);color:var(--ink-soft);font-size:14px}
.ins-sub a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}


/* Why Thunderbolt */
.why{background:linear-gradient(160deg,#1B1030,#0E0A16);color:#fff;overflow:hidden}
.why-texture{position:absolute;inset:0;background:url(../img/motif.svg);background-size:220px;opacity:.10}
.why-inner{position:relative;z-index:2;max-width:820px}
.why-body p{font-size:clamp(16px,2vw,18px);color:rgba(231,218,255,.8);margin:0 0 18px;max-width:64ch}
.why-body p:first-child{color:rgba(231,218,255,.92)}

/* Accordion (values) */
.acc{max-width:760px;margin:38px auto 0;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;cursor:pointer;padding:22px 2px;text-align:left;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(17px,2.4vw,20px);color:var(--ink);letter-spacing:-.01em;transition:color .18s ease}
.acc-head:hover{color:var(--purple)}
.acc-arrow{flex:none;width:11px;height:11px;border-right:2.5px solid var(--purple);border-bottom:2.5px solid var(--purple);transform:rotate(45deg);transition:transform .28s ease;margin:-6px 4px 0 0}
.acc-head[aria-expanded="true"] .acc-arrow{transform:rotate(-135deg);margin-top:2px}
.acc-panel{overflow:hidden;max-height:0;transition:max-height .3s ease}
.acc-panel-inner{padding:0 2px 24px;color:var(--ink-soft);font-size:16px;max-width:64ch}


/* Contact form */
.contact-sec{background:var(--wash)}
.form-card{position:relative;max-width:720px;margin:0 auto;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(115,60,206,.5),rgba(197,139,255,.12) 55%,rgba(162,79,239,.4)) border-box;border:1.5px solid transparent;border-radius:22px;padding:34px 30px 40px;box-shadow:0 2px 6px rgba(20,18,26,.05),0 26px 50px -28px rgba(90,33,176,.5),0 50px 90px -60px rgba(90,33,176,.35)}
.form-note{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 24px;text-align:left}
.field{margin-bottom:20px}
.field-label{display:block;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:14.5px;margin:0 0 9px;color:var(--ink)}
.req{color:var(--purple)}
.opt{color:var(--ink-soft);font-weight:400}
.input,.textarea{width:100%;font-family:"Inter",sans-serif;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;transition:border-color .18s ease,box-shadow .18s ease}
.input:focus,.textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(115,60,206,.15)}
.textarea{resize:none;min-height:54px;overflow:hidden;line-height:1.55}
.row2{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px}
.row2 .field{margin-bottom:0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{display:inline-block;padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:12.5px;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease;color:var(--ink)}
.pill span:hover{border-color:var(--purple)}
.pill input:checked+span{background:var(--purple);border-color:var(--purple);color:#fff}
.pill input:focus-visible+span{box-shadow:0 0 0 3px rgba(115,60,206,.3)}
.field-error{display:none;color:#C02A5B;font-size:13px;margin-top:7px}
.field.invalid .field-error{display:block}
.field.invalid .input,.field.invalid .textarea{border-color:#C02A5B}
.form-submit{margin-top:6px}
.form-success{display:none;text-align:center;padding:34px 10px}
.form-success.show{display:block}
.form-success h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:27px;margin:0 0 10px;letter-spacing:-.01em}
.form-success p{color:var(--ink-soft);margin:0}
.hp{position:absolute!important;left:-9999px;top:-9999px}
@media(min-width:620px){.row2{grid-template-columns:1fr 1fr}}

/* Home why teaser */
.why-teaser{background:radial-gradient(60% 50% at 100% 50%,rgba(197,139,255,.18),transparent 60%),var(--wash)}
.why-teaser .lede{max-width:60ch}


/* Jolt statement */
.jolt{position:relative;overflow:hidden;background:linear-gradient(150deg,#1B1030,#0E0A16);color:#fff;padding:118px 0}
.jolt-texture{position:absolute;inset:0;background:url(../img/motif.svg);background-size:220px;opacity:.09}
.jolt::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:75%;height:100%;background:radial-gradient(circle at 50% 42%,rgba(162,79,239,.34),transparent 62%);pointer-events:none}
.jolt-inner{position:relative;z-index:2;text-align:center;max-width:960px;margin:0 auto}
.jolt-line{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(42px,9vw,100px);line-height:1.0;letter-spacing:-.04em;margin:0}
.jolt-word{color:var(--electric);text-shadow:0 0 34px rgba(162,79,239,.65);animation:joltGlow 3s ease-in-out infinite}
@keyframes joltGlow{0%,100%{text-shadow:0 0 22px rgba(162,79,239,.5)}50%{text-shadow:0 0 48px rgba(197,139,255,.95)}}
.jolt-sub{font-size:clamp(17px,2.2vw,20px);color:rgba(231,218,255,.72);max-width:46ch;margin:26px auto 0}


/* Centered value + timeline headers */
.values .eyebrow,.values .section-title{text-align:center}
.timeline .eyebrow,.timeline .section-title{text-align:center}
.tl{max-width:600px;margin-left:auto;margin-right:auto}


/* Ribbon */
.ribbon{background:var(--purple-deep);color:#fff;padding:22px 0}
.ribbon-inner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 16px;text-align:center}
.ribbon-label{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--lilac)}
.ribbon-text{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(17px,2.3vw,22px);color:#fff;letter-spacing:-.01em}

/* Approach page */
.approach-page{background:var(--ink);color:#fff}
.chess-texture{position:absolute;inset:0;background:url(../img/chess-motif.svg);background-size:400px;opacity:.11;z-index:0;-webkit-mask-image:linear-gradient(to right,#000,#000 calc(50% - 410px),transparent calc(50% - 406px),transparent calc(50% + 406px),#000 calc(50% + 410px),#000);mask-image:linear-gradient(to right,#000,#000 calc(50% - 410px),transparent calc(50% - 406px),transparent calc(50% + 406px),#000 calc(50% + 410px),#000)}
.ap-section{position:relative;overflow:hidden;padding:90px 0}
.ap-section.alt{background:radial-gradient(110% 120% at 80% 8%,rgba(197,139,255,.32),transparent 55%),linear-gradient(150deg,#2A1152,#5A21B0)}
.ap-section .container,.ap-cta .container{position:relative;z-index:2}
.ap-block{max-width:760px}
.ap-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(28px,4.6vw,44px);line-height:1.1;letter-spacing:-.025em;margin:0 0 22px;color:#fff}
.ap-lead{font-size:clamp(18px,2.4vw,22px);color:rgba(231,218,255,.9);margin:0 0 22px;line-height:1.5}
.ap-body{font-size:clamp(16px,2vw,18px);color:rgba(231,218,255,.74);margin:0 0 18px;max-width:64ch;line-height:1.62}
.ap-highlight{position:relative;z-index:2;max-width:820px;margin:0 auto;background:linear-gradient(160deg,rgba(115,60,206,.22),rgba(20,14,40,.55));border:1px solid rgba(197,139,255,.3);border-radius:22px;padding:42px 36px}
.ap-cta{position:relative;overflow:hidden;padding:104px 0;text-align:center;background:radial-gradient(110% 130% at 15% 20%,rgba(197,139,255,.4),transparent 55%),linear-gradient(135deg,#5A21B0,#8B34E0)}
.ap-cta-inner{max-width:760px;margin:0 auto}
.ap-cta-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(30px,5vw,52px);line-height:1.06;letter-spacing:-.03em;margin:0 0 18px}
.ap-cta-sub{font-size:clamp(17px,2.2vw,20px);color:rgba(231,218,255,.85);margin:0 0 30px}


/* North star (people) */
.northstar{background:var(--wash)}
.ns-inner{max-width:760px;margin:0 auto;text-align:center}
.ns-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:-.03em;margin:0 0 24px;color:var(--ink)}
.ns-body{font-size:clamp(16px,2vw,18px);color:var(--ink-soft);margin:0 auto 18px;max-width:60ch;line-height:1.62}
.ns-body:last-child{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(18px,2.4vw,22px);color:var(--ink);max-width:48ch;margin-top:6px}

/* Mobile nav scrim */
.nav-scrim{position:fixed;inset:0;background:rgba(14,10,22,.4);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:50}
.nav-scrim.show{opacity:1;pointer-events:auto}


/* Client strip */
.clients{background:var(--wash);border-bottom:1px solid var(--line);padding:24px 0}
.clients-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 34px;text-align:center}
.clients-label{font-family:"Space Mono",monospace;font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.clients-row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 30px;margin:0;padding:0}
.clients-row li{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:15px;color:var(--ink-soft)}

/* Offering + how we work */
.offering{position:relative;overflow:hidden;background:radial-gradient(55% 46% at 94% 4%,rgba(197,139,255,.15),transparent 60%),var(--paper)}
.hww{background:var(--paper)}
.hww-item h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:19px;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.hww-item p{margin:0;color:var(--ink-soft);font-size:15.5px}

/* Services page */
.cols2{display:grid;grid-template-columns:1fr;gap:20px}
.bridge{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(21px,3vw,30px);line-height:1.25;letter-spacing:-.02em;color:var(--ink);max-width:30ch;margin:6px 0 0}
.svc-note{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:26px 0 0}


/* How we work, dark variant (services) */
.hww-dark{background:linear-gradient(160deg,#1B1030,#0E0A16);color:#fff}
.hww-item-dark h3{color:#fff}
.hww-item-dark p{color:rgba(231,218,255,.74)}


/* People photo band */
.people{background:var(--wash);overflow:hidden}
.photo-row{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.photo{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.photo img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(min-width:720px){.photo-row{grid-template-columns:1fr 1fr 1fr;gap:18px}}

/* Coming soon card */
.coming-soon{max-width:640px;margin:34px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.coming-soon p{margin:0;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:18px;color:var(--ink-soft)}

/* Contact background bolt with edge-tracing light */
.contact-sec{position:relative;overflow:hidden}
.contact-sec .container{position:relative;z-index:2}
.contact-bolt{display:none;position:absolute;pointer-events:none;z-index:3}
.contact-bolt svg{width:100%;height:auto}
.contact-bolt .bolt-fill{fill:var(--purple)}
.contact-bolt .bolt-halo{fill:none;stroke:#FFFFFF;stroke-width:10;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:170 830;opacity:.16;animation:boltTrace 4.5s linear infinite;filter:blur(5px)}
.contact-bolt .bolt-trace{fill:none;stroke:#FFFFFF;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:170 830;animation:boltTrace 4.5s linear infinite;filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 9px rgba(197,139,255,.6))}
@keyframes boltTrace{to{stroke-dashoffset:-1000}}
@media (prefers-reduced-motion:reduce){.contact-bolt .bolt-trace,.contact-bolt .bolt-halo{animation:none;stroke-dasharray:none;opacity:.3}}


/* People, woven */
.people-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.people-visual{position:relative;min-height:340px}
.photo-bolt{position:relative;z-index:2;margin:0 0 0 auto;width:min(78%,330px);aspect-ratio:3/4;transform:translateX(8%);-webkit-mask:url(../img/photo-bolt-mask.svg) center/contain no-repeat;mask:url(../img/photo-bolt-mask.svg) center/contain no-repeat}
.photo-bolt img{width:100%;height:100%;object-fit:cover;display:block}
.photo-tilt{position:absolute;z-index:1;margin:0;left:-10%;bottom:-6%;width:60%;transform:rotate(-4deg);border-radius:28px 8px 28px 8px;overflow:hidden;box-shadow:12px 12px 0 rgba(115,60,206,.22);border:1px solid var(--line)}
.photo-tilt img{width:100%;height:auto;display:block}
@media(min-width:880px){.people-grid{grid-template-columns:1fr 1fr;gap:56px}.people-visual{min-height:420px}}

/* Duotone people band */
.duo{position:relative;overflow:hidden;padding:104px 0;background:radial-gradient(70% 90% at 50% 0%,rgba(139,52,224,.34),transparent 62%),linear-gradient(150deg,#1B1030,#0E0A16)}


.duo-inner{position:relative;z-index:2;text-align:center;color:#fff}
.duo-line{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(28px,5vw,50px);line-height:1.08;letter-spacing:-.025em;max-width:22ch;margin:0 auto}

/* Footer columns */
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-nav{gap:24px 56px}


/* Blurred people behind the north star */
.northstar{position:relative;overflow:hidden}
.ns-bg{position:absolute;inset:-24px;background:url(../img/northstar.jpg) center/cover no-repeat;filter:blur(7px);transform:scale(1.06)}
.ns-veil{position:absolute;inset:0;background:rgba(245,241,252,.84)}
.northstar .ns-inner{position:relative;z-index:2}

/* Timeline traveling light */
.tl::after{content:"";position:absolute;left:-5px;top:0;width:8px;height:8px;border-radius:50%;background:#EBD9FF;box-shadow:0 0 10px var(--glow),0 0 20px rgba(197,139,255,.8);animation:tlTravel 10s linear infinite}
@keyframes tlTravel{0%{top:0;opacity:0}6%{opacity:1}92%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}

/* Chess-move flair art */
.why-teaser{position:relative;overflow:hidden}
.has-art{position:relative;overflow:hidden}
.frame-art{display:flex;justify-content:center;margin-top:22px;pointer-events:none;position:relative;z-index:2}
.frame-art .sketch-art{width:min(72vw,300px);height:auto}
.why-art img{width:100%;height:auto}
@media(min-width:900px){.has-art .container{padding-right:492px}.frame-art{position:absolute;top:50%;right:180px;transform:translateY(-50%);margin:0}.frame-art .sketch-art{width:min(26vw,300px)}}

/* Strike band with crack divider (services) */
.strike{background:#0E0A16;color:#fff;position:relative;padding-top:96px;margin-top:0}
.strike .cred-text{color:#fff}
.strike-crack{position:absolute;top:-1px;left:0;right:0;height:30px;background:url(../img/crack.svg) top/100% 100% no-repeat}


/* Duo texture + faces collage */
.duo-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;gap:6px;filter:blur(4px) saturate(.75);opacity:.42}
.duo-collage img{width:100%;height:100%;object-fit:cover;display:block}
.duo-veil{position:absolute;inset:0;background:linear-gradient(150deg,rgba(14,10,22,.82),rgba(90,33,176,.66))}
@media (max-width:719px){.duo-collage{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}}

/* Chessboard art frame */
.sketch-art{width:min(74vw,300px);height:auto;animation:floaty 7s ease-in-out infinite;filter:drop-shadow(0 16px 26px rgba(90,33,176,.3))}
@keyframes floaty{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-8px)}}

/* Card cascade */
.cols3 .card,.cols2 .card{opacity:0;transform:translateY(16px)}
.reveal.in .card{opacity:1;transform:none}
.reveal.in .card:nth-child(2){transition-delay:.1s}
.reveal.in .card:nth-child(3){transition-delay:.2s}
.reveal.in .card:nth-child(4){transition-delay:.1s}
.reveal.in .card:nth-child(5){transition-delay:.2s}
.reveal.in .card:nth-child(6){transition-delay:.3s}


/* Services sketched icons */
.svc-card{position:relative}
.svc-ico{display:inline-flex;width:62px;height:62px;align-items:center;justify-content:center;border-radius:17px;background:linear-gradient(135deg,rgba(115,60,206,.2),rgba(162,79,239,.16));box-shadow:inset 0 0 0 1px rgba(115,60,206,.28),0 14px 28px -12px rgba(115,60,206,.55);margin-bottom:16px}
.svc-ico img{width:36px;height:36px;display:block}

/* Strike band: drop the hard top line, keep only the crack carve */
.strike-clean{padding-top:96px}
.strike-crosses{position:absolute;top:-4.67vw;left:0;right:0;height:6vw;background:url(../img/crossband.svg) center/100% 100% no-repeat;pointer-events:none;z-index:3}

/* Coming-soon spinning bolt loader */



/* Coming-soon big loader (only the bolt rotates + pulses, like the site loader) */
.cs-loader{display:inline-flex;width:104px;height:104px}
.cs-loader svg{width:100%;height:auto;overflow:visible}
.cs-bolt-spin{transform-origin:351px 264px;animation:csBolt 4s ease-in-out infinite}
@keyframes csBolt{0%,50%{transform:rotate(0deg) scale(1)}70%{transform:rotate(360deg) scale(1.34)}84%,100%{transform:rotate(360deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.cs-bolt-spin{animation:none}}

/* Contact reason: pills on desktop, native select on mobile */
.reason-select{display:none;width:100%;padding:14px 16px;margin-bottom:2px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-family:"Inter",sans-serif;font-size:16px;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23733CCE' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* Message box: comfortable min height so the prompt never clips */
.textarea{min-height:118px}

/* ---- Mobile refinements ---- */
@media (max-width:719px){
  .pills{display:none}
  .reason-dd{display:block}
  /* Footer left-aligned (industry standard) */
  .footer-inner{flex-direction:column;gap:24px;text-align:left;align-items:flex-start}
  .foot-nav{justify-content:flex-start;gap:20px 40px}
  .foot-col{align-items:flex-start}
  .foot-lockup{justify-content:flex-start}
  /* Tighter vertical rhythm */
  .section{padding:60px 0}
  .people-grid{gap:6px}
  .people-copy .lede{margin-bottom:4px}
  .hero{padding-bottom:54px}
}


/* Bridge mini banner */
.bridge-band{background:linear-gradient(135deg,#5A21B0,#8B34E0);color:#fff;text-align:center;padding:52px 0;position:relative;overflow:hidden}
.bridge-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 120% at 88% 20%,rgba(197,139,255,.4),transparent 55%)}
.bridge-line{position:relative;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(22px,3.6vw,36px);line-height:1.2;letter-spacing:-.02em;max-width:22ch;margin:0 auto}


/* Services How-we-work on light purple (matches the six-ways section) */
.hww-services{background:radial-gradient(60% 50% at 6% 0%,rgba(197,139,255,.22),transparent 60%),radial-gradient(50% 42% at 96% 100%,rgba(115,60,206,.14),transparent 60%),#EAE2FB;color:var(--ink)}
.hww-services .section-title{color:var(--ink)}
.hww-services .hww-item h3{color:var(--ink)}
.hww-services .hww-item p{color:var(--ink-soft)}


/* Approach hero: align its left edge with the section content below */
.page-head-approach .page-head-inner{max-width:760px}

/* Custom inline reason dropdown (mobile), replaces native select */
.reason-dd{display:block;position:relative;margin-bottom:2px;z-index:5}
@media(min-width:720px){.reason-dd{display:none}}
.reason-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-family:"Inter",sans-serif;font-size:16px;color:var(--ink-soft);cursor:pointer;text-align:left;transition:border-radius .01s}
.reason-dd-btn[aria-expanded="true"]{border-color:var(--purple);border-bottom-color:transparent;border-radius:12px 12px 0 0}
.reason-dd-btn.has-val{color:var(--ink)}
.reason-dd-chev{color:var(--purple);flex:0 0 auto;transition:transform .2s ease}
.reason-dd-btn[aria-expanded="true"] .reason-dd-chev{transform:rotate(180deg)}
.reason-dd-list{list-style:none;margin:0;padding:6px;border:1.5px solid var(--purple);border-top:0;border-radius:0 0 12px 12px;background:#fff;box-shadow:0 16px 30px -20px rgba(90,33,176,.45);display:none;position:absolute;left:0;right:0;top:100%;z-index:5}
.reason-dd-list.open{display:block}
.reason-dd-list li{padding:12px;border-radius:9px;font-family:"Inter",sans-serif;font-size:15.5px;color:var(--ink);cursor:pointer}
.reason-dd-list li:active,.reason-dd-list li:hover{background:var(--wash)}

.ins-note{margin:2px 0 14px;font-size:15px;color:var(--ink-soft)}


/* One continuous threading line across both sections */
.threaded{position:relative}
.thread{position:absolute;left:clamp(10px,3vw,46px);top:0;bottom:0;width:60px;background:url(../img/thread.svg) repeat-y;background-size:60px auto;opacity:.24;z-index:1;pointer-events:none}
@media(max-width:719px){.thread{display:none}}


/* Mobile hero: align the secondary text link under the button text */
@media(max-width:719px){
  .hero-actions .btn{justify-content:flex-start}
  .hero-actions .btn-text{padding-left:20px}
}


/* Mobile-only: bolt photo flush to the right screen edge, card brought in to reduce overlap (desktop unchanged) */
@media(max-width:719px){
  .people-visual{margin-top:-12px}
  .people-visual .photo-bolt{transform:translateX(15%)}
  .people-visual .photo-tilt{left:0;width:50%;bottom:22%}
}


/* Expandable service cards */
.svc-card .card-copy{margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.svc-card.open .card-copy{-webkit-line-clamp:unset;overflow:visible}
.card-more{margin-top:14px;background:none;border:0;padding:0;color:var(--purple);font-family:"Space Mono",monospace;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.card-more:hover{color:var(--electric)}

/* Framed, enlarged home visuals (bridge + chessboard) */
.sketch-art.framed{background:#fff;border:1.5px solid rgba(115,60,206,.35);border-radius:20px;padding:16px;box-shadow:14px 14px 0 rgba(115,60,206,.14),0 20px 44px -24px rgba(90,33,176,.5);filter:none}
.hero-eyebrow{margin-bottom:16px}


/* Who we serve list */
.serve-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.serve-list li{font-family:"Space Mono",monospace;font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--purple-deep);background:var(--wash);border:1.5px solid rgba(115,60,206,.22);border-radius:999px;padding:10px 18px}


/* Framed real photos (bridge + chessboard) */
.photo-framed{width:min(72vw,300px);height:auto;aspect-ratio:3/4;object-fit:cover;display:block;border:3px solid var(--purple);border-radius:18px;box-shadow:14px 14px 0 rgba(115,60,206,.18),0 22px 46px -24px rgba(90,33,176,.5);animation:floaty 7s ease-in-out infinite}
.photo-wide{aspect-ratio:3/2;width:min(90vw,440px)}
@media(min-width:900px){.frame-art-lg .photo-framed{width:min(26vw,300px)}}


/* Who we serve: sleek numbered editorial list */
.serve-grid{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line);max-width:640px}
.serve-grid li{display:flex;align-items:baseline;gap:20px;padding:18px 6px;border-bottom:1px solid var(--line);transition:padding-left .22s ease,background .22s ease}
.serve-grid li:hover{padding-left:14px}
.serve-num{font-family:"Space Mono",monospace;font-weight:700;font-size:12.5px;color:var(--electric);letter-spacing:.08em;min-width:26px}
.serve-label{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(18px,2.4vw,25px);color:var(--ink);letter-spacing:-.01em;line-height:1.2}

/* What we do: auto-rotating spotlight */
.spotlight{display:grid;grid-template-columns:1fr;gap:26px;margin-top:10px}
@media(min-width:900px){.spotlight{grid-template-columns:minmax(300px,380px) 1fr;gap:52px;align-items:start}}
.spot-tabs{display:flex;flex-direction:column}
.spot-tab{text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:16px 6px;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:16.5px;color:var(--ink-soft);cursor:pointer;display:flex;gap:14px;align-items:baseline;transition:color .2s ease,padding-left .2s ease}
.spot-tab:last-of-type{border-bottom:1px solid var(--line)}
.spot-tab-num{font-family:"Space Mono",monospace;font-size:12px;font-weight:700;color:rgba(115,60,206,.5);letter-spacing:.06em}
.spot-tab:hover{color:var(--ink);padding-left:6px}
.spot-tab.active{color:var(--purple-deep)}
.spot-tab.active .spot-tab-num{color:var(--electric)}
.spot-progress{height:2px;margin-top:16px;background:rgba(115,60,206,.14);border-radius:2px;overflow:hidden}
.spot-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--electric))}
@keyframes spotBar{from{width:0}to{width:100%}}
.spot-stage{position:relative;min-height:250px}
.spot-slide{display:none}
.spot-slide.active{display:block;animation:spotIn .5s ease}
@keyframes spotIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.spot-slide h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(23px,3vw,32px);letter-spacing:-.015em;margin:0 0 14px}
.spot-brief{font-size:18.5px;color:var(--ink);margin:0 0 8px;line-height:1.5}
.spot-detail{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .35s ease}
.spot-slide.open .spot-detail{max-height:460px;opacity:1;margin-top:10px}
.spot-detail p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.65}
.spot-more{margin-top:16px;background:none;border:0;padding:0;color:var(--purple);font-family:"Space Mono",monospace;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.spot-more:hover{color:var(--electric)}
@media(prefers-reduced-motion:reduce){.spot-bar{animation:none!important}}


/* Bridge photo: larger, in the trust-first framework section */
@media(min-width:900px){
  .offering.has-art .container{padding-right:622px}
  .offering .frame-art{right:130px}
  .offering .frame-art .photo-wide{width:min(40vw,480px)}
}

/* Flip cards for the six possibilities */
.flip-grid{align-items:stretch}
.flip-card{position:relative;background:none;border:0;box-shadow:none;padding:0;min-height:378px;perspective:1300px;cursor:pointer;transition:none}
.flip-card:hover{transform:none;box-shadow:none}
.flip-inner{position:relative;width:100%;height:100%;min-height:378px;transition:transform .75s cubic-bezier(.4,.15,.2,1);transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:18px;padding:28px 28px;display:flex;flex-direction:column;overflow:hidden}
.flip-front{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,rgba(115,60,206,.45),rgba(162,79,239,.08) 55%,rgba(197,139,255,.35)) border-box;box-shadow:0 18px 40px -28px rgba(90,33,176,.5),0 2px 8px rgba(20,18,26,.05)}
.flip-front .svc-ico{margin-bottom:20px}
.flip-front h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(24px,2.9vw,32px);line-height:1.12;letter-spacing:-.02em;margin:0;color:var(--ink)}
.flip-hint{margin-top:auto;padding-top:16px;font-family:"Space Mono",monospace;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.flip-back{transform:rotateY(180deg);background:linear-gradient(150deg,#2A1152,#5A21B0);color:#fff;justify-content:flex-start}
.flip-back h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:18.5px;letter-spacing:-.01em;margin:0 0 12px;color:#fff}
.flip-back p{margin:0;font-size:16px;line-height:1.56;color:rgba(255,255,255,.93)}
.flip-back{overflow:auto}
.flip-back::-webkit-scrollbar{width:0;height:0}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}


/* Who we serve: compact flowing row with purple diamond separators */
.serve-flow{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.serve-flow li{display:inline-flex;align-items:center;gap:20px;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(15px,1.55vw,19px);color:var(--ink);letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.serve-flow li:not(:last-child)::after{content:"";width:7px;height:7px;background:var(--electric);border-radius:1.5px;transform:rotate(45deg)}

@media(max-width:719px){.flip-card,.flip-inner{min-height:420px}.flip-back p{font-size:14px;line-height:1.5}.flip-back h3{font-size:17.5px}}


/* Flip card front: index badge and refined title spacing */
.flip-num{position:absolute;top:26px;right:28px;font-family:"Space Mono",monospace;font-weight:700;font-size:13px;letter-spacing:.08em;color:rgba(115,60,206,.42)}
.flip-back p+p{margin-top:12px}


/* How we work heading: sized to sit on two lines (line 1, then "and bridge the gap.") */
.hww .section-title{font-size:clamp(24px,3vw,34px);line-height:1.14}


/* Active nav indicator */
.nav a{position:relative}
.nav a.nav-active:not(.btn){color:var(--purple-deep);font-weight:600}
.nav a.nav-active:not(.btn)::after{content:"";position:absolute;left:2px;right:2px;bottom:-7px;height:2px;background:var(--electric);border-radius:2px}
.nav a.btn.nav-active{box-shadow:0 0 0 2px var(--glow),0 10px 24px -12px rgba(115,60,206,.5)}

/* Energy section actions */
.people-actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:26px}

/* Contact: optional label + desktop layout (card left, revolving-light bolt on the right) */
.field-optional{font-family:"Inter",sans-serif;font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
@media(min-width:1000px){
  .form-card{margin-left:0;margin-right:auto}
  .contact-bolt{display:block;left:auto;right:clamp(24px,5vw,110px);top:50%;bottom:auto;transform:translateY(-50%);width:min(30vw,340px);opacity:.95;z-index:1}
}

.clients-ref{margin:22px 0 0;text-align:center}


/* ---- Contact: blurred boardroom background + roomier bolt + compact card ---- */
.contact-bg{position:absolute;inset:0;z-index:0;background:url(../img/boardroom-bg.jpg) center/cover no-repeat;filter:blur(7px) saturate(1);transform:scale(1.08);opacity:.62}
.contact-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(245,241,252,.34),rgba(245,241,252,.55))}
.contact-sec .container{z-index:2}
.form-card{padding:26px 30px 30px}
.form-note{margin:0 0 16px}
.field{margin-bottom:15px}
.field-label{margin:0 0 6px}
.row2{margin-bottom:15px}
@media(min-width:1000px){
  .contact-bolt{width:min(34vw,420px);right:clamp(16px,4vw,90px)}
}

/* ---- Services: blurred bridge behind the six cards ---- */

/* ---- Services cards: centered front, larger icon, no number; underlined flipped title ---- */
.flip-front{align-items:center;justify-content:center;text-align:center}
.flip-front .svc-ico{margin:0 auto 22px;width:78px;height:78px;border-radius:20px}
.flip-front .svc-ico img{width:44px;height:44px}
.flip-hint{margin-top:22px;padding-top:0}
.flip-back h3{font-size:23px;text-decoration:underline;text-decoration-color:rgba(197,139,255,.65);text-decoration-thickness:2px;text-underline-offset:6px;padding-bottom:2px;margin-bottom:16px}

/* ---- Who we serve: force Health plans onto the second line ---- */
.serve-break{flex-basis:100%;height:0;padding:0;margin:0}
.serve-break::after{content:none !important}
.serve-flow li:has(+ .serve-break)::after{display:none}

/* ---- Media & Press: date badge top-right ---- */
.ins-item{position:relative}
.ins-item .ins-kind{padding-right:104px}
.ins-date{position:absolute;top:14px;right:14px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:.01em;color:var(--purple-deep);background:var(--lilac-soft);border:1px solid rgba(115,60,206,.28);border-radius:999px;padding:5px 13px;white-space:nowrap}

/* ---- Horizontal, zig-zag company timeline (desktop); vertical on smaller screens ---- */
@media(min-width:1000px){
  .tl{display:flex;align-items:stretch;gap:0;max-width:100%;margin:70px 0 30px;padding:0;border-left:0;position:relative;min-height:430px}
  .tl::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(197,139,255,.35);transform:translateY(-50%);z-index:1}
  .tl-item{flex:1;position:relative;padding:0 12px}
  .tl-item::before{left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
  .tl-item::after{content:"";position:absolute;left:50%;width:2px;background:rgba(197,139,255,.35);transform:translateX(-50%);z-index:1}
  .tl-item:nth-child(odd)::after{bottom:50%;height:32px}
  .tl-item:nth-child(even)::after{top:50%;height:32px}
  .tl-body{position:absolute;left:50%;transform:translateX(-50%);width:min(252px, calc(20vw - 6px));text-align:center}
  .tl-item:first-child .tl-body{left:0;right:auto;transform:none;text-align:left}
  .tl-item:last-child .tl-body{left:auto;right:0;transform:none;text-align:right}
  .tl-item:nth-child(odd) .tl-body{bottom:calc(50% + 36px)}
  .tl-item:nth-child(even) .tl-body{top:calc(50% + 36px)}
  .tl-item h3{font-size:19.5px;line-height:1.2}
  .tl-item p{max-width:none;font-size:15px;line-height:1.5}
  .tl-when{font-size:12.5px;letter-spacing:.1em}
  .tl::after{left:0;top:50%;transform:translate(-50%,-50%);animation:tlTravelH 12s linear infinite;z-index:4}
}
@keyframes tlTravelH{from{left:0}to{left:100%}}


/* Capabilities: blurred bridge behind the whole section */
#capabilities{position:relative;overflow:hidden}
.cap-bg{position:absolute;inset:0;z-index:0;background:url(../img/bridge-bg.jpg) center/cover no-repeat;filter:blur(9px) saturate(1.02);transform:scale(1.08);opacity:.5}
.cap-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(245,241,252,.5),rgba(245,241,252,.68))}
#capabilities .container{position:relative;z-index:1}

/* Card front flair: sprinkled bolts + crosses on the edges */
.flip-front .svc-ico,.flip-front h3,.flip-front .flip-hint{position:relative;z-index:1}

/* Required fields: top-left with a proper superscript asterisk */

#contact-form{scroll-margin-top:74px}


/* Contact: under 1000px the bolt sits over the top-left of the card */
@media(max-width:999px){
  .contact-sec{padding-top:132px}
  .form-card{margin-left:auto;margin-right:auto}
  .contact-bolt{display:block;left:max(14px, calc(50% - 386px));right:auto;top:34px;bottom:auto;transform:none;width:158px;height:auto;opacity:1;z-index:3}
}


/* ---- Who we serve: clean purple bulleted list on small screens ---- */
@media(max-width:631px){
  .serve-flow{display:block;margin-top:22px}
  .serve-flow li{display:flex;align-items:flex-start;gap:12px;white-space:normal;padding:7px 0;font-size:16.5px}
  .serve-flow li::after{content:none !important}
  .serve-flow li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.55em;background:var(--electric);border-radius:50%}
  .serve-break{display:none}
}

/* ---- Header: stack the wordmark under the logo on very narrow screens ---- */
@media(max-width:359px){.brand-name{font-size:20px}}
@media(max-width:281px){
  .brand{flex-direction:column;align-items:flex-start;gap:3px}
  .brand-mark{width:34px}
  .brand-name{font-size:17px;line-height:1}
}

/* ---- Approach: second sentence always on its own row ---- */
.ap-cta-line{display:block}

/* ---- Approach: chess motif prints across top/bottom on smaller screens ---- */
@media(max-width:899px){
  .chess-texture{background-size:230px;opacity:.09;
    -webkit-mask-image:linear-gradient(to bottom,#000,#000 64px,transparent 132px,transparent calc(100% - 132px),#000 calc(100% - 64px),#000);
    mask-image:linear-gradient(to bottom,#000,#000 64px,transparent 132px,transparent calc(100% - 132px),#000 calc(100% - 64px),#000)}
}

/* ---- Service cards on mobile: grow to fit the description (no inner scrolling) ---- */
@media(max-width:719px){
  .flip-card{min-height:0}
  .flip-inner{min-height:0;height:100%;display:grid}
  .flip-front,.flip-back{position:relative;inset:auto;grid-area:1/1;overflow:hidden}
  .flip-back{overflow:hidden}
  .flip-front{min-height:212px}
  .flip-back{padding:24px 22px}
  .flip-back p{font-size:15.5px;line-height:1.5}
  /* Belt and braces against the back showing through the front on mobile */
  .flip-front,.flip-back{transition:opacity 0s linear .34s}
  .flip-back{opacity:0}
  .flip-card.flipped .flip-back{opacity:1}
  .flip-card.flipped .flip-front{opacity:0}
}
@media(max-width:719px) and (prefers-reduced-motion:reduce){
  .flip-front,.flip-back{transition:none}
}


/* ---- Message box: starts compact like the other fields, grows as you type, drag to expand ---- */
.textarea{min-height:54px;resize:vertical;overflow:auto}

/* ---- Website functionality hint, distinct from business copy ---- */
.ui-hint{font-family:"Space Mono",monospace;font-size:.82em;letter-spacing:.02em;color:var(--purple);white-space:nowrap}

/* ---- Thread: hug the left margin from 720 up so it never crosses the text ---- */
@media(min-width:720px){.thread{display:block;left:4px;width:32px;background-size:32px auto;opacity:.22}}
@media(min-width:1340px){.thread{left:clamp(10px,3vw,46px);width:60px;background-size:60px auto;opacity:.24}}

/* ---- The energy: photos sit side by side and scale cleanly below the two-column layout ---- */
@media(max-width:879px){
  .people-visual{position:relative;min-height:0;margin-top:30px;display:flex;align-items:flex-end;justify-content:center;gap:4%}
  .people-visual .photo-tilt{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0;width:46%;transform:rotate(-4deg);box-shadow:9px 9px 0 rgba(115,60,206,.2)}
  .people-visual .photo-bolt{position:relative;margin:0;width:50%;transform:none;aspect-ratio:3/4}
}

/* ---- Mobile: center the section link evenly between the copy and the photo ---- */
@media(max-width:719px){
  .offering .lede{margin-bottom:26px}
  .offering .frame-art{margin-top:28px}
}

/* ---- Who we serve on small screens: same purple diamonds, one per row ---- */
.serve-split{display:none}
@media(max-width:631px){
  .serve-flow li::before{border-radius:1.5px;transform:rotate(45deg);margin-top:.5em}
  .serve-combined{display:none}
  .serve-split{display:flex}
}


/* ================= Breakpoint scale (standard set) =================
   360  very small phones      632  who-we-serve list
   720  phone / tablet         880  two-column layouts
   1000 desktop                1200 container max
   1340 wide desktop
   New rules should use these values rather than new one-offs.
   ================================================================= */

/* ---- Accessibility: visible keyboard focus on every interactive element ---- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--electric);outline-offset:3px;border-radius:6px}
.input:focus-visible,.textarea:focus-visible,select:focus-visible{outline:3px solid var(--electric);outline-offset:2px}
.btn:focus-visible{outline:3px solid var(--electric);outline-offset:3px}
.site-header a:focus-visible,.footer a:focus-visible{outline-offset:4px}
.flip-card:focus-visible{outline:3px solid var(--electric);outline-offset:4px;border-radius:20px}

/* ---- The energy: stack the actions so the link lines up under the button label ---- */
@media(max-width:479px){
  .people-actions{flex-direction:column;align-items:flex-start;gap:14px}
  .people-actions .btn{justify-content:flex-start}
  .people-actions .btn-text{padding-left:26px}
}

/* ---- Even spacing between section copy, its link, and the photo below (mobile) ---- */
@media(max-width:719px){
  .offering .lede{margin-bottom:24px}
  .offering .container > .btn{display:flex;width:fit-content;margin:0}
  .offering .frame-art{margin-top:24px}
}


/* ---- Respect the system reduced-motion setting across the whole site ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .photo-framed,.floaty{animation:none !important}
}


/* ---- Contact page behaves identically above and below 720 ---- */
@media(max-width:999px){
  .contact-sec{padding-top:132px}
  .contact-sec .container{--pad:40px}
}

/* ---- Section link sits evenly between the copy and the photo (both teaser sections) ---- */
@media(max-width:899px){
  .offering .lede,.why-teaser .lede{margin-bottom:24px}
  .offering .container > .btn,.why-teaser .container > .btn{display:flex;width:fit-content;margin:0}
  .offering .frame-art,.why-teaser .frame-art{margin-top:24px}
}
@media(min-width:720px) and (max-width:899px){
  .offering .frame-art,.why-teaser .frame-art{margin-top:46px}
}

/* ---- Service cards size to their content at every width: never scroll inside a card ---- */
.flip-card{min-height:412px}
.flip-inner{min-height:412px;height:100%;display:grid}
.flip-front,.flip-back{position:relative;inset:auto;grid-area:1/1;overflow:hidden}
.flip-front{min-height:0}
.flip-back{overflow:hidden;padding:26px 26px}
.flip-front,.flip-back{transition:opacity 0s linear .34s}
.flip-back{opacity:0}
.flip-card.flipped .flip-back{opacity:1}
.flip-card.flipped .flip-front{opacity:0}
@media (prefers-reduced-motion:reduce){.flip-front,.flip-back{transition:none}}

/* ---- Functionality hint: clearer and easier to read ---- */
.ui-hint{font-weight:700;font-size:.88em;color:var(--purple-deep);letter-spacing:.01em}

/* ---- Who we serve: exactly six diamonds on small screens ----
   These need the extra class specificity to beat ".serve-flow li". */
.serve-flow li.serve-split{display:none}
@media(max-width:631px){
  .serve-flow li.serve-combined{display:none}
  .serve-flow li.serve-break{display:none}
  .serve-flow li.serve-split{display:flex}
}


/* ---- Under 700: extra clearance so the floating bridge photo never crowds the button ---- */
@media(max-width:699px){
  .offering .frame-art{margin-top:44px}
}

/* ---- Under 700: nudge the tilted photo card right (bolt photo stays put) ---- */
@media(max-width:699px){
  .people-visual{justify-content:flex-end;gap:3%}
  .people-visual .photo-tilt{width:43%}
  .people-visual .photo-bolt{width:48%}
}


/* ---- Why Thunderbolt: lift the origin link a little closer to the paragraph (719 and below) ---- */
@media(max-width:719px){
  .why-teaser .lede{margin-bottom:15px}
}


/* ---- In-page anchors land flush beneath the sticky header (80px) ---- */
section[id]{scroll-margin-top:80px}

/* Responsive */
@media (min-width:720px){
  :root{--pad:40px}
  .cols3{grid-template-columns:repeat(3,1fr);gap:24px}
  .cols2{grid-template-columns:1fr 1fr;gap:24px}
  .values-grid{grid-template-columns:1fr 1fr;gap:28px 40px}
  .ins-list{gap:18px}
  .section{padding:112px 0}
}
@media (min-width:920px){
  .story-grid{grid-template-columns:340px 1fr;gap:56px}
  .story-side{position:sticky;top:110px}
}
@media (min-width:1000px){body{font-size:18px}.hero{padding:150px 0 150px}}

@media (max-width:879px){
  .nav{position:fixed;inset:80px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#FFFFFF;padding:8px var(--pad) 22px;transform:translateY(-165%);transition:transform .3s ease;box-shadow:0 24px 44px -18px rgba(20,18,26,.4);border-bottom:1px solid var(--line)}
  .nav.open{transform:translateY(0)}
  .nav a{width:100%;padding:16px 2px;font-size:18px;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav a:hover{color:var(--purple)}
  .nav a.btn{width:100%;justify-content:center;padding:15px 20px;margin-top:16px;font-size:16px;color:#fff;border-bottom:0}
  .nav-toggle{display:flex}
  .site-header{background:#FFFFFF}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}.hero-bolt .bolt-trace,.hero-bolt .bolt-halo{animation:none;stroke-dasharray:none;opacity:.35}
}

/* ===== Contact bolt: single authoritative rule =====
   Higher specificity than any .contact-bolt rule, explicit padding rather than
   a custom property, and placed last so nothing can override it. The bolt keeps
   a constant 26px overhang past the card's left edge at every width under 1000. */
@media(max-width:999px){
  /* The card's top must match what it is at 721-990 (112px), otherwise the bolt,
     which is pinned to the section, appears to ride higher over the card below 720. */
  .section.contact-sec{padding-top:112px}
  .contact-sec .container{padding-left:40px;padding-right:40px}
  .contact-sec .contact-bolt{
    display:block;position:absolute;
    left:max(14px, calc(50% - 386px));right:auto;
    top:34px;bottom:auto;
    transform:none;width:158px;height:auto;
    opacity:1;z-index:3
  }
}