/* ── RESET ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px;overflow-x:hidden}
body{font-family:'Inter',sans-serif;color:#12172b;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
ul{list-style:none}
button{cursor:pointer;font-family:'Inter',sans-serif;border:none;background:none}
/* ── TOKENS ─────────────────────────────────────────── */
:root{
--navy:#0D1B35;
--navy-2:#142342;
--navy-3:#1C2F54;
--lav:#8B7CC8;
--lav-2:#B0A4DC;
--lav-3:#D4CDEF;
--lav-4:#EEE9FA;
--lav-5:#F7F4FD;
--gold:#C9A84C;
--lav-btn:#7468B8; /* filled-button lavender: passes WCAG AA on white text */
--lav-btn-h:#6B5FA0;
--cream:#F9F7F4;
--white:#FFFFFF;
--ink:#12172b;
--ink-2:#3D4466;
--ink-3:#7A7EA8;
--border:rgba(139,124,200,.15);
--border-2:rgba(139,124,200,.28);
--r4:4px;--r8:8px;--r12:12px;--r16:16px;--r24:24px;--rpill:100px;
--ease:cubic-bezier(.22,1,.36,1);
--anim-dur:.58s;
--anim-step:70ms;
--display:'Cormorant Garamond',serif;
--body:'Inter',sans-serif;
}
/* ── NAVIGATION ──────────────────────────────────────── */
.nav{
position:fixed;top:0;left:0;right:0;z-index:200;height:78px;
background:rgba(255,255,255,.96);backdrop-filter:blur(24px);
border-bottom:1px solid var(--border);
display:flex;align-items:center;
}
.nav-inner{
max-width:1380px;margin:0 auto;padding:0 48px;
width:100%;display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{display:flex;align-items:center;gap:11px;cursor:pointer}
.logo-mark{
width:44px;height:44px;border-radius:10px;
background:var(--navy);flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.logo-text-wrap{display:flex;flex-direction:column;gap:1px}
.logo-name{font-family:var(--display);font-size:20px;font-weight:600;color:var(--navy);letter-spacing:.2px;line-height:1}
.logo-tag{font-size:10.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--lav);line-height:1}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{
font-size:15px;font-weight:500;color:var(--ink-2);
padding:9px 15px;border-radius:var(--rpill);
transition:all .18s;cursor:pointer;
}
.nav-link:hover,.nav-link.active{color:var(--lav);background:var(--lav-5)}
.nav-btn{
margin-left:12px;background:var(--navy);color:#fff;
font-size:14.5px;font-weight:600;letter-spacing:.3px;
padding:12px 24px;border-radius:var(--rpill);transition:background .2s;cursor:pointer;
}
.nav-btn:hover{background:var(--lav)}
.pt{padding-top:78px}
.nav.is-stuck{box-shadow:0 10px 30px -22px rgba(13,27,53,.55)}
/* ── UTILITIES ───────────────────────────────────────── */
.wrap{max-width:1380px;margin:0 auto;padding:0 48px}
.eyebrow{
font-size:12.5px;font-weight:600;letter-spacing:2.8px;
text-transform:uppercase;color:var(--lav);
}
.section{padding:110px 0}
.section-alt{background:var(--cream)}
.section-dark{background:var(--navy)}
.tag{
display:inline-flex;align-items:center;
gap:6px;font-size:11.5px;font-weight:600;letter-spacing:1.8px;
text-transform:uppercase;padding:5px 14px;border-radius:var(--rpill);
}
.tag-lav{background:var(--lav-4);color:var(--lav)}
.tag-dark{background:rgba(139,124,200,.18);color:var(--lav-2)}
.tag-gold{background:rgba(201,168,76,.15);color:var(--gold)}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:500;letter-spacing:.3px;border-radius:var(--rpill);transition:all .2s;cursor:pointer}
.btn-sm{font-size:14px;padding:10px 20px}
.btn-md{font-size:14.5px;padding:12px 26px}
.btn-lg{font-size:15px;padding:14px 32px}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--lav)}
.btn-lav{background:var(--lav);color:#fff}.btn-lav:hover{background:#7468B8}
.btn-outline{border:1.5px solid var(--border-2);color:var(--lav)}.btn-outline:hover{background:var(--lav-4)}
.btn-ghost-white{color:rgba(255,255,255,.65);display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:400;transition:color .2s}.btn-ghost-white:hover{color:#fff}
.btn-white{background:#fff;color:var(--navy)}.btn-white:hover{background:var(--lav-3)}
/* ═══════════════════════════════════════════════════════
ENTRANCE MOTION
Everything is gated behind .js so content is never left
permanently invisible if the script fails to load.
Only transform / opacity / clip-path animate — no layout
properties, so this stays smooth on mid-range Android.
══════════════════════════════════════════════════════ */
.js [data-anim]{
opacity:0;
will-change:transform,opacity;
transition:opacity var(--anim-dur) var(--ease),
transform var(--anim-dur) var(--ease),
clip-path var(--anim-dur) var(--ease);
transition-delay:calc((var(--d,0) * 1ms) + (var(--i,0) * var(--anim-step)));
}
.js [data-anim="up"] {transform:translate3d(0,26px,0)}
.js [data-anim="fade"] {transform:none}
.js [data-anim="scale"] {transform:scale(.95)}
.js [data-anim="pop"] {transform:scale(.82) translate3d(0,8px,0)}
/* clip: the element rises out from behind its own edge — used for display
headings and image panels. Negative side insets stop italic overhangs
and descenders being shaved off. */
.js [data-anim="clip"] {transform:translate3d(0,24px,0);clip-path:inset(0 -8% 100% -8%)}
.js [data-anim].in{opacity:1;transform:none;will-change:auto}
.js [data-anim="clip"].in{clip-path:inset(-14% -8% -14% -8%)}
/* Nav fades rather than slides: a transform on a fixed header would become
the containing block for the fixed mobile drawer inside it. */
.js .nav{opacity:0;transition:opacity .5s ease .15s}
.js .nav.nav-in{opacity:1}
@media (prefers-reduced-motion:reduce){
.js [data-anim],
.js [data-anim].in{opacity:1!important;transform:none!important;clip-path:none!important}
.js .nav{opacity:1}
}
/* ═══════════════════════════════════════════════════════
HOME PAGE
══════════════════════════════════════════════════════ */
/* HERO */
.hero{
min-height:100vh;
background:var(--navy);
display:grid;
position:relative;overflow:hidden;
}
/* Hero content sits in the same container as every other section instead of
running edge to edge on wide screens. */
.hero-inner{
width:100%;max-width:1380px;margin:0 auto;padding:0 48px;
display:grid;grid-template-columns:1.05fr 1fr;gap:60px;
align-items:center;position:relative;z-index:2;
}
.hero-glow-a{
position:absolute;border-radius:50%;pointer-events:none;
width:750px;height:750px;
background:radial-gradient(circle,rgba(107,87,180,.22) 0%,transparent 65%);
top:-140px;right:-180px;
}
.hero-glow-b{
position:absolute;border-radius:50%;pointer-events:none;
width:380px;height:380px;
background:radial-gradient(circle,rgba(139,124,200,.14) 0%,transparent 65%);
bottom:0;left:-40px;
}
.hero-left{
display:flex;flex-direction:column;justify-content:center;
padding:120px 0 90px;position:relative;z-index:2;
}
.hero-eye{
display:flex;align-items:center;gap:10px;
font-size:12.5px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;
color:var(--lav-2);margin-bottom:26px;
}
.hero-eye::before{content:'';display:block;width:24px;height:1px;background:var(--lav)}
.hero-h1{
font-family:var(--display);
font-size:70px;font-weight:300;line-height:1.02;
color:#fff;margin-bottom:4px;letter-spacing:-0.5px;
}
.hero-h1 em{font-style:italic;font-weight:400;color:var(--lav-2)}
.hero-kicker{
font-family:var(--display);font-style:italic;
font-size:22px;font-weight:300;color:var(--gold);
margin-bottom:26px;opacity:.9;
}
.hero-body{
font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.55);
max-width:470px;margin-bottom:40px;
}
.hero-actions{display:flex;align-items:center;gap:16px}
.hero-stats{
margin-top:52px;display:flex;gap:42px;
padding-top:32px;border-top:1px solid rgba(255,255,255,.09);
}
.hs-num{
font-family:var(--display);font-size:34px;font-weight:400;
color:#fff;line-height:1;margin-bottom:5px;
}
.hs-label{font-size:12.5px;color:rgba(255,255,255,.38);letter-spacing:.3px;line-height:1.45}
.hero-right{
display:flex;align-items:center;justify-content:center;
padding:90px 0;position:relative;z-index:2;
}
.hero-canvas{width:100%;max-width:460px;position:relative}
.hero-card{
width:100%;border-radius:var(--r24);
background:rgba(255,255,255,.04);
border:1px solid rgba(139,124,200,.2);
aspect-ratio:4/5;overflow:hidden;
display:flex;flex-direction:column;justify-content:flex-end;
position:relative;
}
.hero-card-bg{
position:absolute;inset:0;
background:linear-gradient(160deg,rgba(107,87,180,.12) 0%,transparent 50%);
pointer-events:none;
}
.hero-card-art{
position:absolute;top:40px;left:50%;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;
}
.hero-card-bottom{padding:28px 28px 32px;position:relative;z-index:1}
.hero-card-label{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:8px}
.hero-card-quote{
font-family:var(--display);font-style:italic;
font-size:17px;font-weight:300;color:rgba(255,255,255,.65);
line-height:1.5;
}
/* Floating chips */
.chip{
position:absolute;border-radius:var(--r12);
box-shadow:0 8px 28px rgba(0,0,0,.2);
}
.chip-online{
bottom:-16px;left:-24px;
background:#fff;padding:14px 18px;
display:flex;align-items:center;gap:11px;
}
.chip-dot{width:9px;height:9px;border-radius:50%;background:#22C55E;flex-shrink:0}
.chip-title{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.1}
.chip-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.chip-cert{
top:24px;right:-28px;
background:var(--lav);padding:14px 18px;text-align:center;
}
.chip-cert-num{font-family:var(--display);font-size:28px;font-weight:400;color:#fff;line-height:1}
.chip-cert-lbl{font-size:10.5px;color:rgba(255,255,255,.7);letter-spacing:1.5px;text-transform:uppercase;margin-top:3px}
/* MARQUEE */
.marquee-bar{background:var(--lav);overflow:hidden;padding:13px 0;white-space:nowrap}
.marquee-track{display:inline-flex;animation:mq 30s linear infinite}
.mq-item{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.72);padding:0 28px}
.mq-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);flex-shrink:0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* TRUST BAR */
.trust-bar{background:var(--cream);border-bottom:1px solid var(--border)}
.trust-inner{max-width:1380px;margin:0 auto;padding:20px 48px;display:flex;align-items:center;justify-content:center;gap:2px 0;flex-wrap:wrap}
.ti{display:flex;align-items:center;gap:10px;padding:9px 19px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.ti-icon{width:30px;height:30px;border-radius:8px;background:var(--lav-4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ti-sep{width:1px;height:26px;background:var(--border-2)}
/* ABOUT PREVIEW */
.about-preview{padding:120px 0}
.ap-grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
.ap-media{position:relative}
.ap-img{
width:100%;aspect-ratio:3/4;border-radius:var(--r24);
background:var(--lav-4);display:flex;align-items:center;justify-content:center;
border:1px solid var(--border);overflow:hidden;
}
.ap-card{
position:absolute;bottom:-22px;right:-26px;
background:var(--navy);border-radius:var(--r16);
padding:20px 22px;min-width:175px;
box-shadow:0 16px 44px rgba(13,27,53,.28);
}
.ap-card-lbl{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--lav-2);margin-bottom:6px}
.ap-card-val{font-family:var(--display);font-size:28px;font-weight:400;color:#fff;line-height:1}
.ap-card-sub{font-size:12px;color:rgba(255,255,255,.38);margin-top:4px}
.ap-pull{
font-family:var(--display);font-style:italic;
font-size:23px;font-weight:300;color:var(--navy);line-height:1.45;
padding:22px 26px;border-left:3px solid var(--lav);
background:var(--lav-5);border-radius:0 var(--r8) var(--r8) 0;
margin:20px 0 24px;
}
.ap-pull span{color:var(--lav)}
.ap-h2{font-family:var(--display);font-size:46px;font-weight:300;line-height:1.08;color:var(--navy);letter-spacing:-.3px;margin:14px 0 6px}
.ap-h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.ap-body{font-size:16px;line-height:1.85;color:var(--ink-2);margin-bottom:26px}
.cred-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.cred{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:7px 14px;border-radius:var(--rpill);background:var(--lav-4);color:var(--lav);border:1px solid var(--border-2)}
/* SERVICES */
.services-section{padding:120px 0;background:var(--cream)}
.svc-header{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:60px}
.svc-h2{font-family:var(--display);font-size:50px;font-weight:300;line-height:1.06;color:var(--navy);letter-spacing:-.4px}
.svc-h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.svc-intro{font-size:16px;line-height:1.8;color:var(--ink-2)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{
background:#fff;border-radius:var(--r24);border:1px solid var(--border);
padding:36px 30px;position:relative;overflow:hidden;
display:flex;flex-direction:column;
transition:transform .25s,box-shadow .25s;
}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 20px 56px rgba(107,87,180,.12)}
.svc-card.dark{background:var(--navy);border-color:rgba(139,124,200,.2)}
.svc-shine{position:absolute;top:0;right:0;width:110px;height:110px;border-radius:0 var(--r24) 0 110px;background:var(--lav-5);pointer-events:none}
.svc-card.dark .svc-shine{background:rgba(139,124,200,.06)}
.svc-icon{width:50px;height:50px;border-radius:13px;background:var(--lav-4);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.svc-card.dark .svc-icon{background:rgba(139,124,200,.18)}
.svc-cat{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--lav);margin-bottom:8px}
.svc-card.dark .svc-cat{color:var(--lav-2)}
.svc-h3{font-family:var(--display);font-size:24px;font-weight:500;color:var(--navy);margin-bottom:12px;line-height:1.15}
.svc-card.dark .svc-h3{color:#fff}
.svc-body{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin-bottom:22px;flex:1}
.svc-card.dark .svc-body{color:rgba(255,255,255,.52)}
.svc-bullets{margin-bottom:26px}
.svc-bullets li{font-size:13.5px;color:var(--ink-2);padding:5px 0;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.svc-bullets li::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:var(--lav);flex-shrink:0;margin-top:6px}
.svc-card.dark .svc-bullets li{color:rgba(255,255,255,.55)}
.svc-card.dark .svc-bullets li::before{background:var(--lav-2)}
.svc-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--lav);margin-top:auto;cursor:pointer}
.svc-card.dark .svc-link{color:var(--lav-2)}
/* TESTIMONIALS */
.testi-section{padding:120px 0}
.testi-head{text-align:center;margin-bottom:60px}
.testi-h2{font-family:var(--display);font-size:48px;font-weight:300;color:var(--navy);line-height:1.1;margin-top:14px;letter-spacing:-.3px}
.testi-h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tc{background:var(--cream);border-radius:var(--r24);border:1px solid var(--border);padding:30px 26px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.tc:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(107,87,180,.09)}
.tc-stars{display:flex;gap:3px;margin-bottom:16px}
.tc-star{color:var(--gold);font-size:14px}
.tc-quote{font-family:var(--display);font-style:italic;font-size:17px;font-weight:300;color:var(--navy);line-height:1.6;margin-bottom:20px;flex:1}
.tc-author-row{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.tc-avatar{width:38px;height:38px;border-radius:50%;background:var(--lav-4);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px;font-weight:500;color:var(--lav);flex-shrink:0}
.tc-name{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:2px}
.tc-role{font-size:12.5px;color:var(--ink-3)}
/* Big testimonial */
.tc-big{grid-column:span 3;background:var(--navy);display:grid;grid-template-columns:1fr 2.2fr;border-color:rgba(139,124,200,.2)}
.tc-big-left{background:var(--lav);border-radius:var(--r24) 0 0 var(--r24);padding:36px 30px;display:flex;flex-direction:column;justify-content:space-between}
.tc-big-mark{font-family:var(--display);font-size:80px;line-height:1;color:rgba(255,255,255,.25)}
.tc-big-svc-lbl{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:5px}
.tc-big-svc{font-size:14px;font-weight:600;color:#fff}
.tc-big-right{padding:36px 32px}
.tc-big-right .tc-quote{color:rgba(255,255,255,.82);font-size:20px}
.tc-big-right .tc-name{color:#fff}
.tc-big-right .tc-role{color:rgba(255,255,255,.38)}
.tc-big-right .tc-author-row{border-color:rgba(255,255,255,.08)}
/* PROCESS */
.process-dark{padding:120px 0;background:var(--navy)}
.pd-head{text-align:center;margin-bottom:64px}
.pd-h2{font-family:var(--display);font-size:50px;font-weight:300;color:#fff;margin-top:14px;letter-spacing:-.4px;line-height:1.06}
.pd-h2 em{font-style:italic;font-weight:400;color:var(--lav-2)}
.pd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pd-step{padding:30px 24px;border-radius:var(--r16);border:1px solid rgba(139,124,200,.1);background:rgba(255,255,255,.03)}
.pd-num{font-family:var(--display);font-size:52px;font-weight:300;color:rgba(139,124,200,.2);line-height:1;margin-bottom:20px}
.pd-title{font-size:16px;font-weight:600;color:#fff;margin-bottom:9px}
.pd-desc{font-size:14px;color:rgba(255,255,255,.42);line-height:1.7}
/* PACKAGES PREVIEW */
.pkg-preview{padding:120px 0;background:var(--cream)}
.pkg-head{text-align:center;margin-bottom:60px}
.pkg-h2{font-family:var(--display);font-size:50px;font-weight:300;color:var(--navy);margin-top:14px;letter-spacing:-.4px;line-height:1.08}
.pkg-h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.pkg-sub{font-size:16px;color:var(--ink-2);line-height:1.7;max-width:520px;margin:12px auto 0}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pkg{background:#fff;border-radius:var(--r24);border:1px solid var(--border);padding:34px 28px;position:relative;transition:transform .25s,box-shadow .25s}
.pkg:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(107,87,180,.1)}
.pkg.star{background:var(--navy);border-color:rgba(139,124,200,.25);transform:translateY(-8px);box-shadow:0 24px 60px rgba(13,27,53,.25)}
.pkg.star:hover{transform:translateY(-12px)}
.pop-pill{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--lav);color:#fff;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:5px 16px;border-radius:var(--rpill);white-space:nowrap}
.pkg-lbl{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin-bottom:7px}
.pkg.star .pkg-lbl{color:var(--lav-2)}
.pkg-name{font-family:var(--display);font-size:26px;font-weight:500;color:var(--navy);margin-bottom:6px;line-height:1.1}
.pkg.star .pkg-name{color:#fff}
.pkg-dur{font-size:14px;color:var(--ink-3);margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.pkg.star .pkg-dur{color:rgba(255,255,255,.35);border-color:rgba(255,255,255,.08)}
.pkg-list{margin-bottom:30px}
.pkg-list li{font-size:14.5px;color:var(--ink-2);padding:8px 0;display:flex;align-items:flex-start;gap:10px;line-height:1.5;border-bottom:1px solid var(--border)}
.pkg-list li:last-child{border-bottom:none}
.pkg.star .pkg-list li{color:rgba(255,255,255,.62);border-color:rgba(255,255,255,.07)}
.chk{width:18px;height:18px;border-radius:50%;background:var(--lav-4);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.pkg.star .chk{background:rgba(139,124,200,.18)}
.pkg-cta-btn{display:block;text-align:center;font-size:14.5px;font-weight:600;padding:12px 20px;border-radius:var(--rpill);transition:all .2s;cursor:pointer}
.pkg-cta-btn.out{border:1.5px solid var(--border-2);color:var(--lav)}.pkg-cta-btn.out:hover{background:var(--lav-4)}
.pkg-cta-btn.fil{background:var(--lav);color:#fff}.pkg-cta-btn.fil:hover{background:#7468B8}
.pkg-note{text-align:center;margin-top:28px;font-size:13.5px;color:var(--ink-3);line-height:1.7}
.pkg-note a{color:var(--lav);text-decoration:underline;cursor:pointer}
/* CTA STRIP */
.cta-strip{padding:130px 0;background:var(--navy);text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;border-radius:50%;pointer-events:none;width:700px;height:700px;background:radial-gradient(circle,rgba(107,87,180,.22) 0%,transparent 65%);bottom:-250px;left:50%;transform:translateX(-50%)}
.cta-h2{font-family:var(--display);font-size:62px;font-weight:300;color:#fff;margin:14px 0 16px;letter-spacing:-.5px;line-height:1.05;position:relative;z-index:1}
.cta-h2 em{font-style:italic;font-weight:400;color:var(--lav-2)}
.cta-body{font-size:16.5px;color:rgba(255,255,255,.48);max-width:440px;margin:0 auto 40px;line-height:1.8;position:relative;z-index:1}
.cta-actions{display:flex;justify-content:center;gap:14px;position:relative;z-index:1}
.cta-trust{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:50px;padding-top:34px;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:1}
.ct-item{font-size:13px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:7px}
.ct-dot{width:5px;height:5px;border-radius:50%;background:var(--lav);flex-shrink:0}
/* FOOTER */
.footer{background:#060D1B;padding:70px 0 0}
.footer-inner{max-width:1380px;margin:0 auto;padding:0 48px}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr 1.5fr;gap:44px;padding-bottom:52px}
.fl-name{font-family:var(--display);font-size:19px;font-weight:400;color:#fff;margin-bottom:4px}
.fl-tag{font-family:var(--display);font-style:italic;font-size:14px;color:rgba(255,255,255,.28);margin-bottom:20px}
.fl-desc{font-size:14px;line-height:1.75;color:rgba(255,255,255,.33);margin-bottom:22px}
.fl-contacts{display:flex;flex-direction:column;gap:9px}
.fl-contact-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.38)}
.fl-ci{width:26px;height:26px;border-radius:7px;background:rgba(139,124,200,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fc-title{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.22);margin-bottom:18px}
.fl-links{display:flex;flex-direction:column;gap:10px}
.fl-link{font-size:14px;color:rgba(255,255,255,.42);transition:color .2s;cursor:pointer}.fl-link:hover{color:var(--lav)}
.fl-nl-desc{font-size:14px;color:rgba(255,255,255,.38);line-height:1.7;margin-bottom:14px}
.fl-nl-form{display:flex;flex-direction:column;gap:8px}
.fl-nl-input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:var(--r8);padding:10px 14px;font-size:14px;color:#fff;outline:none;font-family:var(--body);transition:border-color .2s}
.fl-nl-input::placeholder{color:rgba(255,255,255,.22)}
.fl-nl-input:focus{border-color:var(--lav)}
.fl-nl-btn{background:var(--lav);color:#fff;border:none;border-radius:var(--r8);padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--body);transition:background .2s}.fl-nl-btn:hover{background:#7468B8}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:22px 0;display:flex;justify-content:space-between;align-items:center}
.fb-copy{font-size:13px;color:rgba(255,255,255,.18)}
.fb-badges{display:flex;gap:16px;align-items:center}
.fb-badge{font-size:12.5px;color:rgba(255,255,255,.22);display:flex;align-items:center;gap:5px}
/* ═══════════════════════════════════════════════════════
INNER PAGE SHARED
══════════════════════════════════════════════════════ */
.ip-hero{
background:var(--navy);padding:120px 0 80px;
position:relative;overflow:hidden;
}
.ip-hero-glow{position:absolute;border-radius:50%;pointer-events:none;width:600px;height:600px;background:radial-gradient(circle,rgba(107,87,180,.2) 0%,transparent 65%);top:-150px;right:-120px}
.ip-hero-inner{position:relative;z-index:1}
.ip-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ip-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.ip-eyebrow::before{content:'';display:block;width:22px;height:1px;background:var(--lav)}
.ip-h1{font-family:var(--display);font-size:58px;font-weight:300;color:#fff;line-height:1.06;letter-spacing:-.4px}
.ip-h1 em{font-style:italic;font-weight:400;color:var(--lav-2)}
.ip-sub{font-family:var(--display);font-style:italic;font-size:20px;font-weight:300;color:var(--gold);margin:10px 0 22px;opacity:.9}
.ip-hero-body{font-size:16px;line-height:1.85;color:rgba(255,255,255,.52);margin-bottom:32px;max-width:420px}
.ip-hero-visual{
border-radius:var(--r24);background:rgba(255,255,255,.05);
border:1px solid rgba(139,124,200,.18);
aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
overflow:hidden;position:relative;
}
.ip-placeholder{text-align:center;color:rgba(255,255,255,.25)}
.ip-placeholder p{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-top:10px}
/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.35);margin-bottom:28px;cursor:pointer}
.breadcrumb span{color:rgba(255,255,255,.22)}
/* ═══════════════════════════════════════════════════════
ABOUT PAGE
══════════════════════════════════════════════════════ */
.about-story{padding:100px 0}
.as-grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.as-media{position:sticky;top:90px}
.as-img{width:100%;aspect-ratio:3/4;border-radius:var(--r24);background:var(--lav-4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.as-certs{display:flex;flex-direction:column;gap:12px}
.as-cert{background:#fff;border:1px solid var(--border);border-radius:var(--r12);padding:16px 18px;display:flex;align-items:center;gap:14px}
.as-cert-icon{width:38px;height:38px;border-radius:10px;background:var(--lav-4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.as-cert-title{font-size:14px;font-weight:600;color:var(--navy)}
.as-cert-body{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.as-content h2{font-family:var(--display);font-size:42px;font-weight:300;color:var(--navy);line-height:1.1;letter-spacing:-.3px;margin:14px 0 20px}
.as-content h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.as-content h3{font-family:var(--display);font-size:26px;font-weight:500;color:var(--navy);margin:36px 0 12px;line-height:1.2}
.as-content p{font-size:16px;line-height:1.85;color:var(--ink-2);margin-bottom:18px}
.as-pull{font-family:var(--display);font-style:italic;font-size:22px;font-weight:300;color:var(--navy);line-height:1.45;padding:22px 26px;border-left:3px solid var(--lav);background:var(--lav-5);border-radius:0 var(--r8) var(--r8) 0;margin:28px 0}
.as-pull span{color:var(--lav)}
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.val-card{background:#fff;border:1px solid var(--border);border-radius:var(--r16);padding:22px 20px}
.val-icon{width:40px;height:40px;border-radius:10px;background:var(--lav-4);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.val-title{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:6px}
.val-desc{font-size:14px;color:var(--ink-2);line-height:1.65}
/* ═══════════════════════════════════════════════════════
SERVICES PAGE
══════════════════════════════════════════════════════ */
.service-full{padding:100px 0}
.sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:80px}
.sf-grid.reverse > *:first-child{order:2}
.sf-grid.reverse > *:last-child{order:1}
.sf-visual{border-radius:var(--r24);overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;background:var(--lav-4);display:flex;align-items:center;justify-content:center}
.sf-dark-visual{background:var(--navy-2);border-color:rgba(139,124,200,.15)}
.sf-h2{font-family:var(--display);font-size:42px;font-weight:300;color:var(--navy);line-height:1.1;letter-spacing:-.3px;margin:14px 0 14px}
.sf-h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.sf-body{font-size:16px;line-height:1.85;color:var(--ink-2);margin-bottom:22px}
.sf-list{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.sf-list-item{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--border);border-radius:var(--r12)}
.sf-li-icon{width:36px;height:36px;border-radius:9px;background:var(--lav-4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sf-li-title{font-size:14.5px;font-weight:600;color:var(--navy);margin-bottom:3px}
.sf-li-desc{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.sf-divider{height:1px;background:var(--border);margin:80px 0}
/* test anxiety specific */
.brain-visual{background:var(--navy);border-radius:var(--r24);padding:40px 36px;border-color:rgba(139,124,200,.15)}
.brain-steps{display:flex;flex-direction:column;gap:0}
.bs-item{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.bs-item:last-child{border:none}
.bs-num{font-family:var(--display);font-size:40px;font-weight:300;color:rgba(139,124,200,.22);line-height:1;flex-shrink:0;width:42px}
.bs-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:5px}
.bs-desc{font-size:13.5px;color:rgba(255,255,255,.44);line-height:1.65}
.exams-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 28px}
.exam-tag{font-size:13px;font-weight:500;padding:7px 16px;border-radius:var(--rpill);background:var(--lav-4);color:var(--lav);border:1px solid var(--border-2)}
/* ═══════════════════════════════════════════════════════
GRIEF PAGE
══════════════════════════════════════════════════════ */
.grief-intro{padding:100px 0}
.gi-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.gi-h2{font-family:var(--display);font-size:44px;font-weight:300;color:var(--navy);line-height:1.1;letter-spacing:-.3px;margin:14px 0 16px}
.gi-h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.gi-body{font-size:16px;line-height:1.85;color:var(--ink-2);margin-bottom:22px}
.gi-cards{display:flex;flex-direction:column;gap:14px}
.gi-card{display:flex;gap:16px;align-items:flex-start;padding:20px;background:#fff;border:1px solid var(--border);border-radius:var(--r16)}
.gi-card-icon{width:42px;height:42px;border-radius:11px;background:var(--lav-4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gi-card-title{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:5px}
.gi-card-desc{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.grief-philosophy{padding:90px 0;background:var(--navy)}
.gp-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.gp-h2{font-family:var(--display);font-size:44px;font-weight:300;color:#fff;line-height:1.1;letter-spacing:-.3px;margin:14px 0 20px}
.gp-h2 em{font-style:italic;font-weight:400;color:var(--lav-2)}
.gp-body{font-size:16px;line-height:1.85;color:rgba(255,255,255,.52);margin-bottom:22px}
.gp-visual{border-radius:var(--r24);background:rgba(255,255,255,.04);border:1px solid rgba(139,124,200,.2);padding:36px;display:flex;flex-direction:column;gap:18px}
.gp-card{padding:20px;background:rgba(255,255,255,.04);border-radius:var(--r12);border:1px solid rgba(139,124,200,.12)}
.gp-card-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:6px}
.gp-card-body{font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.65}
/* ═══════════════════════════════════════════════════════
PACKAGES PAGE
══════════════════════════════════════════════════════ */
.pkg-full{padding:100px 0}
.pkg-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px}
.pkg-detail{border-radius:var(--r24);border:1px solid var(--border);overflow:visible;position:relative;background:#fff}
.pkg-detail.feat{border:2px solid var(--lav);transform:translateY(-6px);box-shadow:0 24px 60px rgba(13,27,53,.18)}
.pkg-detail-head{padding:28px 28px 22px;border-bottom:1px solid var(--border)}
.pkg-detail.feat .pkg-detail-head{background:var(--navy);border-color:rgba(139,124,200,.2)}
.pkg-detail-body{padding:22px 28px 28px}
.pkg-detail.feat .pkg-detail-body{background:var(--navy)}
.pkg-detail.feat .pkg-detail-body .pkg-list li{color:rgba(255,255,255,.62);border-color:rgba(255,255,255,.07)}
.pkg-detail.feat .pkg-detail-body .chk{background:rgba(139,124,200,.18)}
.pkg-detail.feat .pkg-name{color:#fff}
.pkg-detail.feat .pkg-lbl{color:var(--lav-2)}
.pkg-detail.feat .pkg-dur{color:rgba(255,255,255,.35);border-color:rgba(255,255,255,.08)}
.pkg-comparison{margin-top:60px}
.pc-title{font-family:var(--display);font-size:36px;font-weight:300;color:var(--navy);margin-bottom:6px}
.pc-title em{font-style:italic;font-weight:400;color:var(--lav)}
.pc-sub{font-size:15.5px;color:var(--ink-2);margin-bottom:36px}
.compare-table{width:100%;border-collapse:collapse;min-width:720px}
.compare-table th{background:var(--navy);color:#fff;font-size:13px;font-weight:600;letter-spacing:.4px;padding:16px 20px;text-align:left}
.compare-table th:first-child{background:var(--navy-2)}
.compare-table td{padding:14px 20px;font-size:14.5px;border-bottom:1px solid var(--border);vertical-align:middle}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:nth-child(even) td{background:var(--lav-5)}
.compare-table td:first-child{font-weight:500;color:var(--navy)}
.ct-check{color:var(--lav);font-weight:700;font-size:17px}
.ct-x{color:#ccc;font-size:15px}
/* ═══════════════════════════════════════════════════════
CONTACT PAGE
══════════════════════════════════════════════════════ */
.contact-body{padding:100px 0}
.cb-grid{display:grid;grid-template-columns:5fr 7fr;gap:60px}
.cb-info h2{font-family:var(--display);font-size:42px;font-weight:300;color:var(--navy);line-height:1.1;letter-spacing:-.3px;margin:14px 0 16px}
.cb-info h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.cb-info p{font-size:16px;line-height:1.85;color:var(--ink-2);margin-bottom:24px}
.contact-details{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}
.cd-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:#fff;border:1px solid var(--border);border-radius:var(--r16)}
.cd-icon{width:42px;height:42px;border-radius:11px;background:var(--lav-4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cd-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:4px}
.cd-val{font-size:15px;font-weight:500;color:var(--navy)}
.cd-sub{font-size:13px;color:var(--ink-3);margin-top:2px}
.hours-card{background:var(--navy);border-radius:var(--r16);padding:26px 24px}
.hours-title{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--lav-2);margin-bottom:16px}
.hours-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.hours-row:last-child{border:none}
.hours-day{font-size:14px;color:rgba(255,255,255,.5)}
.hours-time{font-size:14px;font-weight:500;color:#fff}
.hours-closed{color:rgba(255,255,255,.22);font-weight:400}
/* Contact form */
.contact-form-wrap{background:var(--cream);border-radius:var(--r24);padding:40px;border:1px solid var(--border)}
.form-title{font-family:var(--display);font-size:30px;font-weight:500;color:var(--navy);margin-bottom:6px}
.form-sub{font-size:14.5px;color:var(--ink-2);margin-bottom:30px;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:18px}
.form-group.full{grid-column:span 2}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--navy);letter-spacing:.3px;margin-bottom:7px}
.form-input,.form-select,.form-textarea{
width:100%;background:#fff;border:1.5px solid var(--border-2);
border-radius:var(--r8);padding:12px 16px;
font-size:15px;color:var(--ink);outline:none;font-family:var(--body);
transition:border-color .2s;
}
.form-textarea{resize:vertical;min-height:120px}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--lav)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink-3)}
.form-submit{width:100%;background:var(--navy);color:#fff;font-size:15px;font-weight:600;padding:14px 24px;border-radius:var(--rpill);border:none;cursor:pointer;font-family:var(--body);transition:background .2s;letter-spacing:.3px}
.form-submit:hover{background:var(--lav)}
.form-note{text-align:center;font-size:13px;color:var(--ink-3);margin-top:12px}
/* ═══════════════════════════════════════════════════════
FAQ PAGE
══════════════════════════════════════════════════════ */
.faq-body{padding:100px 0}
.faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:70px}
.faq-sidebar h2{font-family:var(--display);font-size:42px;font-weight:300;color:var(--navy);line-height:1.08;letter-spacing:-.3px;margin:14px 0 16px}
.faq-sidebar h2 em{font-style:italic;font-weight:400;color:var(--lav)}
.faq-sidebar p{font-size:16px;color:var(--ink-2);line-height:1.8;margin-bottom:28px}
.faq-cats{display:flex;flex-direction:column;gap:6px}
.faq-cat{font-size:14px;font-weight:500;color:var(--ink-2);padding:10px 14px;border-radius:var(--r8);cursor:pointer;transition:all .18s;text-align:left}
.faq-cat:hover{background:var(--lav-5);color:var(--lav)}
.faq-cat.active-cat{background:var(--lav-4);color:var(--lav);font-weight:600}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border);padding:22px 0}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{font-size:16px;font-weight:500;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-tog{width:28px;height:28px;border-radius:50%;background:var(--lav-4);color:var(--lav);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:all .2s}
details[open] .faq-tog{background:var(--lav);color:#fff;transform:rotate(45deg)}
.faq-a{font-size:15px;color:var(--ink-2);line-height:1.8;margin-top:14px;padding-right:44px}
/* ═══════════════════════════════════════════════════════
FIXES & RESPONSIVE LAYER
══════════════════════════════════════════════════════ */
/* ── Fluid type: headings were hard pixel values and overflowed small screens */
.hero-h1{font-size:clamp(2.4rem,5.2vw,4.375rem)}
.hero-kicker{font-size:clamp(1.05rem,1.7vw,1.375rem)}
.ap-h2,.gi-h2,.gp-h2,.sf-h2{font-size:clamp(1.9rem,3.6vw,2.875rem)}
.svc-h2,.pd-h2,.pkg-h2{font-size:clamp(2rem,4vw,3.125rem)}
.testi-h2{font-size:clamp(1.95rem,3.8vw,3rem)}
.cta-h2{font-size:clamp(2.1rem,4.8vw,3.875rem)}
.cta-h2[data-size="sm"]{font-size:clamp(1.95rem,3.9vw,3.125rem)}
.ip-h1{font-size:clamp(2.15rem,4.6vw,3.625rem)}
.pc-title,.cb-info h2,.faq-sidebar h2,.as-content h2{font-size:clamp(1.85rem,3.4vw,2.625rem)}
/* ── Images (the design had none — every visual was an empty placeholder) */
.ph{width:100%;height:100%;object-fit:cover;display:block}
.hero-card > .ph{position:absolute;inset:0;z-index:0;opacity:.5}
.hero-card-bg{background:linear-gradient(180deg,rgba(13,27,53,.35) 0%,rgba(13,27,53,.55) 45%,rgba(13,27,53,.94) 100%);z-index:1}
.hero-card-art,.hero-card-bottom{z-index:2}
/* The card must own its own stacking context, otherwise its z-indexed children
(the gradient overlay and the quote) paint over the floating chips beside it. */
.hero-card{isolation:isolate;z-index:0}
.chip{z-index:3}
.chip-sub{color:#5F6485}
/* Keep the quote clear of the status chip at every width, not just on phones. */
.hero-card-bottom{padding:28px 28px 78px}
.ap-img,.as-img,.sf-visual,.ip-hero-visual{position:relative;padding:0}
.ap-img .ph,.as-img .ph,.sf-visual .ph,.ip-hero-visual .ph{position:absolute;inset:0}
.ip-hero-visual .ph{opacity:.72}
.sf-dark-visual .ph{opacity:.65}
@media (hover:hover) and (pointer:fine){
.ap-img,.as-img,.sf-visual{overflow:hidden}
.ap-img .ph,.as-img .ph,.sf-visual .ph{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ap-media:hover .ph,.as-media:hover .ph,.sf-grid:hover .sf-visual .ph{transform:scale(1.04)}
}
/* ── Button-element resets (click targets became real buttons for keyboard use) */
.nav-logo,.breadcrumb,.svc-link,.fl-link,.nav-link,.faq-cat{
font-family:var(--body);border:none;background:none;text-align:left;
}
.nav-btn,.pkg-cta-btn,.form-submit,.fl-nl-btn{font-family:var(--body)}
.nav-logo{padding:0}
.breadcrumb{padding:0;background:none}
.svc-link,.fl-link{padding:0}
.pkg-cta-btn{width:100%;display:block;text-align:center}
.pkg-note-link{
font-family:var(--body);font-size:13.5px;color:var(--lav);
text-decoration:underline;background:none;border:none;cursor:pointer;padding:2px 0;
}
/* ── Visible focus states — the original had none anywhere */
:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:4px}
.nav-link:focus-visible,.nav-btn:focus-visible{outline-offset:2px}
.section-dark :focus-visible,.cta-strip :focus-visible,.footer :focus-visible,
.ip-hero :focus-visible,.hero :focus-visible,.process-dark :focus-visible{outline-color:var(--lav-2)}
.skip-link{
position:absolute;left:12px;top:-60px;z-index:400;
background:var(--navy);color:#fff;font-size:14px;font-weight:600;
padding:10px 18px;border-radius:var(--r8);transition:top .2s;
}
.skip-link:focus{top:12px}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ── Mobile navigation (none existed — six links simply overflowed) */
.nav-toggle{
display:none;width:42px;height:42px;border-radius:var(--r8);
align-items:center;justify-content:center;flex-direction:column;gap:5px;
background:var(--lav-5);border:1px solid var(--border);flex-shrink:0;
}
.nav-toggle-bar{
display:block;width:18px;height:1.5px;background:var(--navy);border-radius:2px;
transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .18s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-scrim{
position:fixed;inset:0;z-index:190;background:rgba(13,27,53,.42);
backdrop-filter:blur(2px);opacity:0;transition:opacity .25s;
}
.nav-scrim.show{opacity:1}
body.nav-open{overflow:hidden}
/* ── Forms: status messages and error states */
.form-status,.fl-nl-status{font-size:13.5px;margin-top:10px;text-align:center;min-height:1px}
.form-status.ok{color:#1E7F4F}
.form-status.err{color:#B4444B}
.fl-nl-status{text-align:left;color:var(--lav-2);margin-top:2px}
.form-input.invalid,.form-select.invalid,.form-textarea.invalid,.fl-nl-input.invalid{border-color:#C9707A}
.contact-form-wrap{display:block}
/* ── Comparison table now scrolls instead of bursting its container */
.table-scroll{
width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--border);border-radius:var(--r16);
}
.compare-table th:first-child{position:sticky;left:0;z-index:1}
/* ── FAQ filtering */
.faq-item[hidden]{display:none}
.faq-a{font-size:15px;color:var(--ink-2);line-height:1.8;margin-top:14px;padding-right:44px}
.faq-a p{margin:0}
.faq-empty{padding:28px 0;font-size:15px;color:var(--ink-3)}
/* ── "Most Popular" pill was being clipped by the card's overflow:hidden */
.pkg-detail-head{border-radius:var(--r24) var(--r24) 0 0}
.pkg-detail-body{border-radius:0 0 var(--r24) var(--r24)}
.pkg-detail.feat{overflow:visible}
.pop-pill{z-index:3}
.pkg-full-grid{padding-top:16px}
/* ── Reduced motion */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important;
}
.marquee-track{animation:none}
}
/* ── Contrast: white-on-#8B7CC8 measured 3.61:1 (AA needs 4.5:1).
Filled buttons use the darker lavender already present in the palette. */
.btn-lav{background:var(--lav-btn)}
.btn-lav:hover{background:var(--lav-btn-h)}
.pkg-cta-btn.fil{background:var(--lav-btn)}
.pkg-cta-btn.fil:hover{background:var(--lav-btn-h)}
.fl-nl-btn{background:var(--lav-btn)}
.fl-nl-btn:hover{background:var(--lav-btn-h)}
.nav-btn:hover{background:var(--lav-btn)}
.form-submit:hover{background:var(--lav-btn)}
.btn-navy:hover{background:var(--lav-btn)}
.pop-pill{background:var(--lav-btn)}
.tc-big-left{background:var(--lav-btn)}
.marquee-bar{background:var(--lav-btn)}
.mq-item{color:rgba(255,255,255,.92)}
.chip-cert{background:var(--lav-btn)}
.chip-cert-lbl{color:rgba(255,255,255,.85)}
.tc-big-svc-lbl{color:rgba(255,255,255,.6)}
/* ═════════ 1400px — first step down from the 1380 container ═════════ */
@media (max-width:1400px){
/* trust bar wraps below this width; separators would dangle mid-row */
.ti-sep{display:none}
.trust-inner{gap:2px 6px}
.wrap,.nav-inner,.footer-inner,.trust-inner,.hero-inner{padding-left:64px;padding-right:64px}
.hero-inner{gap:48px}
}
/* ═════════ 1200px — tighten the desktop gutters ═════════ */
@media (max-width:1200px){
.wrap,.nav-inner,.footer-inner,.trust-inner,.hero-inner{padding-left:32px;padding-right:32px}
.ap-grid,.as-grid{gap:48px}
.gp-grid,.gi-grid,.sf-grid,.ip-hero-grid{gap:44px}
.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer-grid > :last-child{grid-column:span 4}
.svc-grid,.pkg-grid,.pkg-full-grid{gap:16px}
.section,.about-preview,.services-section,.testi-section,.process-dark,.pkg-preview{padding-top:92px;padding-bottom:92px}
}
/* ═════════ 1280px — nav collapses to a drawer ═════════ */
@media (max-width:1280px){
.nav-toggle{display:flex}
.nav-links{
position:fixed;top:78px;left:0;right:0;z-index:195;
flex-direction:column;align-items:stretch;gap:4px;
background:#fff;border-bottom:1px solid var(--border);
padding:16px 32px 24px;
box-shadow:0 24px 48px -28px rgba(13,27,53,.45);
transform:translateY(-12px);opacity:0;pointer-events:none;
transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .22s;
max-height:calc(100vh - 78px);overflow-y:auto;
}
.nav-links.open{transform:none;opacity:1;pointer-events:auto}
.nav-link{padding:13px 14px;border-radius:var(--r8);font-size:16px}
.nav-btn{margin:10px 0 0;padding:14px 20px;text-align:center;font-size:15px}
}
/* ═════════ 1024px — layout collapses to single column ═════════ */
@media (max-width:1024px){
.hero{min-height:0}
.hero-inner{grid-template-columns:1fr;gap:0}
.hero-left{padding:104px 0 56px}
.hero-right{padding:0 0 96px;justify-content:flex-start}
.hero-body{max-width:none}
.hero-canvas{max-width:420px}
.hero-stats{gap:28px;flex-wrap:wrap}
.ap-grid,.as-grid,.gi-grid,.gp-grid,.sf-grid,.ip-hero-grid,.cb-grid,.faq-grid,.svc-header{
grid-template-columns:1fr;
}
.as-media{position:static}
.as-img,.ap-img{aspect-ratio:4/3;max-height:440px}
.sf-grid.reverse > *:first-child{order:1}
.sf-grid.reverse > *:last-child{order:2}
.svc-header{gap:26px;align-items:start}
.svc-grid,.pkg-grid,.pkg-full-grid,.testi-grid,.pd-grid{grid-template-columns:repeat(2,1fr)}
.tc-big{grid-column:span 2}
.faq-cats{flex-direction:row;flex-wrap:wrap}
.faq-cat{border:1px solid var(--border);border-radius:var(--rpill);padding:8px 15px}
.faq-a{padding-right:0}
.pkg.star,.pkg-detail.feat{transform:none}
.pkg.star:hover{transform:translateY(-4px)}
.sf-divider{margin:56px 0}
.cta-trust{flex-wrap:wrap;gap:14px 24px}
}
/* ═════════ 900px ═════════ */
@media (max-width:900px){
.wrap,.nav-inner,.footer-inner,.trust-inner,.hero-inner{padding-left:24px;padding-right:24px}
.nav-links{padding-left:24px;padding-right:24px}
.logo-tag{display:none}
.footer-grid{grid-template-columns:1fr 1fr;gap:30px}
.footer-grid > :first-child,.footer-grid > :last-child{grid-column:span 2}
.svc-grid,.pkg-grid,.pkg-full-grid,.testi-grid,.pd-grid,.values-grid,.form-row{grid-template-columns:1fr}
.tc-big{grid-column:span 1;grid-template-columns:1fr}
.tc-big-left{
border-radius:var(--r24) var(--r24) 0 0;
flex-direction:row;align-items:center;justify-content:space-between;
gap:18px;padding:22px 26px;
}
.tc-big-mark{font-size:52px}
.form-group.full{grid-column:span 1}
.section,.about-preview,.services-section,.testi-section,.process-dark,
.pkg-preview,.about-story,.service-full,.grief-intro,.pkg-full,.contact-body,.faq-body{
padding-top:72px;padding-bottom:72px;
}
.grief-philosophy{padding:72px 0}
.cta-strip{padding:88px 0}
.ip-hero{padding:104px 0 64px}
.contact-form-wrap{padding:28px 22px}
.gp-visual{padding:24px}
.brain-visual{padding:28px 24px}
.ti-sep{display:none}
.ti{padding:8px 16px}
}
/* ═════════ 640px ═════════ */
@media (max-width:640px){
.wrap,.nav-inner,.footer-inner,.trust-inner,.hero-inner{padding-left:18px;padding-right:18px}
.nav-links{padding-left:18px;padding-right:18px}
.logo-name{font-size:16px}
.logo-mark{width:34px;height:34px;border-radius:9px}
.hero-actions{flex-direction:column;align-items:stretch;gap:12px}
.hero-actions .btn,.cta-actions .btn{justify-content:center;width:100%}
.btn-ghost-white{justify-content:center}
.hero-stats{gap:20px;margin-top:38px;padding-top:26px}
.hs-num{font-size:28px}
.hero-canvas{max-width:100%}
/* the floating chips hung outside the viewport and got clipped */
.chip-online{left:0;bottom:-12px;padding:11px 14px}
.chip-cert{right:0;top:14px;padding:11px 14px}
.chip-cert-num{font-size:22px}
.hero-card-art svg{width:66px;height:66px}
/* keep the quote clear of the floating status chip */
.hero-card-bottom{padding:22px 20px 64px}
.cta-actions{flex-direction:column;align-items:stretch}
.ap-card{position:static;margin-top:14px;width:100%;box-shadow:none}
.ap-pull,.as-pull{font-size:18px;padding:18px 20px}
.svc-card{padding:28px 22px}
.tc,.pkg{padding:26px 22px}
.pd-step{padding:24px 20px}
.pd-num{font-size:42px;margin-bottom:14px}
.contact-form-wrap{padding:24px 18px;border-radius:var(--r16)}
.cd-item{padding:15px}
.footer{padding-top:56px}
.footer-grid{grid-template-columns:1fr;gap:30px}
.footer-grid > :first-child,.footer-grid > :last-child{grid-column:span 1}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;text-align:left}
.fb-badges{flex-wrap:wrap;gap:10px 16px}
.cta-trust{gap:12px 18px;margin-top:36px;padding-top:26px}
.exams-tags{gap:6px}
.mq-item{padding:0 18px;font-size:11px}
.hours-card{padding:22px 18px}
.hours-row{gap:12px}
.hours-day,.hours-time{font-size:13px}
}
/* ═════════ 380px — very narrow handsets ═════════ */
@media (max-width:380px){
.hero-stats{flex-direction:column;gap:16px}
.chip-online .chip-title{font-size:12.5px}
.cred{font-size:12px;padding:6px 11px}
}
/* ═══════════════════════════════════════════════════════
WORDPRESS INTEGRATION
Classes required by the dynamic theme that the static
build did not need.
══════════════════════════════════════════════════════ */
/* Honeypot — visually gone, still reachable by assistive tech so the
label association stays valid. Not display:none, which some bots detect. */
.nsc-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
/* Announcement bar */
.nsc-announce{background:var(--navy);color:#fff;text-align:center;font-size:13.5px;padding:9px 18px;position:relative;z-index:210}
.nsc-announce a{color:var(--lav-2);text-decoration:underline}
/* Logo image variant */
/* Sizing for both logos lives in the logo block near the end of this file,
driven by the --nsc-logo-h / --nsc-footer-logo-h custom properties. */
/* Header CTA responsive label */
.nsc-cta-short{display:none}
@media (max-width:1280px){
.nsc-cta-full{display:none}
.nsc-cta-short{display:inline}
}
/* wp_nav_menu output — items are inside the flex row */
.nav-links li{list-style:none;display:inline-flex}
.fl-links li{list-style:none;display:block}
/* wp_nav_menu wraps each link in an ; the anchor itself carries .fl-link
and is coloured by the design's own rule, so only layout is set here. */
.fl-links a{display:block}
/* Social row */
.fl-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fl-social{
font-size:12.5px;letter-spacing:.4px;color:rgba(255,255,255,.65);
border:1px solid rgba(255,255,255,.14);border-radius:var(--rpill);
padding:6px 14px;transition:border-color .2s,color .2s;
}
.fl-social:hover{color:#fff;border-color:var(--lav)}
/* Editor content inside dynamic regions */
.nsc-entry-content p{font-size:16px;line-height:1.85;color:var(--ink-2);margin:0 0 16px}
.nsc-entry-content h2,.nsc-entry-content h3{font-family:var(--display);color:var(--navy);margin:28px 0 12px}
.nsc-entry-content a{color:var(--lav-btn);text-decoration:underline}
.nsc-entry-content ul,.nsc-entry-content ol{margin:0 0 16px 20px}
.nsc-entry-content li{font-size:16px;line-height:1.8;color:var(--ink-2);margin-bottom:6px}
.ap-body p:last-child,.as-body p:last-child,.sf-body p:last-child{margin-bottom:0}
/* Package price + notes */
.pkg-price{font-family:var(--display);font-size:26px;color:var(--navy);margin-top:10px}
.pkg-notes{text-align:center;margin-top:26px}
/* Services page stats */
.sf-stats{display:flex;gap:36px;flex-wrap:wrap;margin:26px 0}
/* Inner hero tag pills */
.ip-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.ip-tag{
font-size:12.5px;font-weight:500;color:var(--lav-2);
border:1px solid rgba(155,142,196,.3);border-radius:var(--rpill);padding:7px 15px;
}
/* Submit button disabled state while the request is in flight */
.form-submit[disabled]{opacity:.6;cursor:progress}
/* Admin bar offset so the fixed header is never hidden behind it */
body.admin-bar .nav{top:32px}
body.admin-bar .nav-links{top:110px}
@media (max-width:782px){
body.admin-bar .nav{top:46px}
body.admin-bar .nav-links{top:124px}
}
/* Logo variants */
.nav-logo-narrow{display:none}
@media (max-width:640px){
.nav-logo-wide{display:none}
.nav-logo-narrow{display:block}
}
/* Testimonial photo avatar */
.tc-avatar-img{padding:0;overflow:hidden;background:none}
.tc-avatar-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* ═══════════════════════════════════════════════════════
LEGAL TEMPLATE (Privacy Policy / Terms)
══════════════════════════════════════════════════════ */
.legal-body{padding:82px 0 96px;background:var(--cream)}
.legal-grid{
max-width:1380px;margin:0 auto;padding:0 48px;
display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start;
}
/* Sticky index */
.legal-aside{position:sticky;top:110px}
.legal-aside-title{
font-size:12.5px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;
color:var(--lav-btn);margin-bottom:16px;
}
.legal-toc{display:flex;flex-direction:column;border-left:1px solid rgba(13,27,53,.1)}
.legal-toc-link{
font-size:14.5px;line-height:1.5;color:var(--ink-2);
padding:9px 0 9px 16px;margin-left:-1px;
border-left:2px solid transparent;transition:color .2s,border-color .2s;
}
.legal-toc-link:hover{color:var(--lav-btn);border-left-color:var(--lav)}
.legal-updated{
margin-top:28px;padding:16px 18px;border-radius:var(--r14);
background:#fff;border:1px solid rgba(13,27,53,.07);
}
.legal-updated-lbl{
display:block;font-size:11.5px;font-weight:600;letter-spacing:2px;
text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}
.legal-updated-val{font-size:15px;color:var(--navy);font-weight:500}
.legal-help{margin-top:22px;padding:18px;border-radius:var(--r14);background:rgba(139,124,200,.08)}
.legal-help p{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0 0 8px}
.legal-help-link{font-size:14.5px;font-weight:500;color:var(--lav-btn);word-break:break-word}
.legal-help-link:hover{text-decoration:underline}
/* Body */
.legal-content{max-width:820px}
.legal-lead{
font-family:var(--display);font-size:22px;line-height:1.62;
color:var(--navy);margin:0 0 44px;padding-bottom:32px;
border-bottom:1px solid rgba(13,27,53,.09);
}
.legal-section{margin-bottom:48px;scroll-margin-top:110px}
.legal-section:last-child{margin-bottom:0}
.legal-h2{
display:flex;align-items:baseline;gap:14px;
font-family:var(--display);font-size:27px;font-weight:400;line-height:1.28;
color:var(--navy);margin:0 0 16px;
}
.legal-num{
font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:1.6px;
color:var(--lav);flex-shrink:0;
}
.legal-prose p{font-size:16px;line-height:1.85;color:var(--ink-2);margin:0 0 15px}
.legal-prose p:last-child{margin-bottom:0}
.legal-prose ul,.legal-prose ol{margin:0 0 15px 20px}
.legal-prose li{font-size:16px;line-height:1.8;color:var(--ink-2);margin-bottom:7px}
.legal-prose strong{color:var(--navy);font-weight:600}
.legal-prose a{color:var(--lav-btn);text-decoration:underline;text-underline-offset:2px}
.legal-prose h3{
font-family:var(--display);font-size:19px;font-weight:500;
color:var(--navy);margin:26px 0 10px;
}
@media (max-width:1400px){ .legal-grid{padding:0 64px} }
@media (max-width:1024px){
.legal-body{padding:64px 0 78px}
.legal-grid{grid-template-columns:1fr;gap:38px}
.legal-aside{position:static}
.legal-toc{
flex-direction:row;flex-wrap:wrap;gap:8px;
border-left:0;border-top:1px solid rgba(13,27,53,.1);padding-top:14px;
}
.legal-toc-link{
border-left:0;padding:7px 14px;border-radius:var(--rpill);
background:#fff;border:1px solid rgba(13,27,53,.08);font-size:13.5px;
}
.legal-toc-link:hover{border-color:var(--lav)}
.legal-lead{font-size:20px}
}
@media (max-width:640px){
.legal-grid{padding:0 22px}
.legal-h2{font-size:23px;gap:10px}
.legal-section{margin-bottom:38px}
}
/* Ghost-button arrow circle — the design set this inline on the anchor. */
.ghost-arrow{
display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:50%;
border:1px solid rgba(255,255,255,.2);font-size:12px;margin-left:6px;
}
/* Narrow inner hero — used on pages the design gives no banner image. */
.ip-hero-narrow{max-width:680px}
.ip-hero-narrow .ip-hero-body{max-width:520px}
/* ═══════════════════════════════════════════════════════
RULES THAT WERE INLINE STYLES IN THE STATIC BUILD
The design set these with style="" attributes, so they
never reached the stylesheet. Without them buttons sit
flush against the paragraph above and the featured
testimonial renders dark-on-dark.
══════════════════════════════════════════════════════ */
/* Button spacing */
.services-section .btn-outline{margin-top:16px}
.grief-intro .btn,
.grief-philosophy .btn{margin-top:8px}
.as-content > div:last-child{margin-top:36px}
.pkg-comparison .pkg-note{margin-top:36px}
/* Package cards: the CTA fills the card width */
.pkg-detail-body .pkg-cta-btn{display:block;text-align:center}
/* Featured testimonial sits on the navy panel */
.tc-big .tc-stars{margin-bottom:18px}
.tc-big .tc-quote{color:rgba(255,255,255,.82)}
.tc-big .tc-name{color:#fff}
.tc-big .tc-role{color:rgba(255,255,255,.35)}
.tc-big .tc-avatar{background:rgba(139,124,200,.2);color:#C5B9E3}
/* CTA strip content must sit above the glow layer */
.cta-strip .wrap{position:relative;z-index:1}
body:not(.home) .cta-strip .wrap{text-align:center}
body:not(.home) .cta-strip{padding:100px 0}
/* Inner hero accents */
.ip-eyebrow{color:var(--lav-2)}
body.tpl-faq .ip-hero{padding-bottom:60px}
body.tpl-contact .ip-hero{padding-bottom:70px}
/* Comparison table: the feature column is wider */
.compare-table thead th:first-child{width:35%}
/* FAQ sidebar call-out card */
.faq-cta-card{
margin-top:32px;background:var(--navy);
border-radius:var(--r16);padding:26px 22px;
}
.faq-cta-eyebrow{
font-size:11px;letter-spacing:2px;text-transform:uppercase;
color:var(--lav-2);font-weight:600;margin-bottom:10px;
}
.faq-cta-title{
font-family:var(--display);font-size:20px;font-weight:500;
color:#fff;margin-bottom:6px;
}
.faq-cta-note{font-size:14px;color:rgba(255,255,255,.4);margin-bottom:20px}
.faq-cta-card .btn{width:100%;justify-content:center}
/* Footer bottom row — the copyright and trust badges sat at .18 and .22 alpha,
which is close to invisible on the navy. Matched to the footer links. */
.footer-bottom .fb-copy{color:rgba(255,255,255,.42)}
.footer-bottom .fb-badge{color:rgba(255,255,255,.42)}
.footer-bottom .fb-badge svg rect,
.footer-bottom .fb-badge svg path{stroke:rgba(255,255,255,.42)}
.footer-bottom a.fb-badge{transition:color .2s}
.footer-bottom a.fb-badge:hover{color:var(--lav-2)}
.footer-bottom a.fb-badge:hover svg rect,
.footer-bottom a.fb-badge:hover svg path{stroke:var(--lav-2)}
/* "View full details" link under each package card */
.pkg-detail-link{
display:block;text-align:center;margin-bottom:12px;
font-size:13.5px;font-weight:500;color:var(--lav-btn);
transition:color .2s;
}
.pkg-detail-link:hover{color:var(--navy)}
.pkg-detail.feat .pkg-detail-link{color:var(--lav-2)}
.pkg-detail.feat .pkg-detail-link:hover{color:#fff}
/* ═══════════════════════════════════════════════════════
LOGO SIZING & FOOTER TREATMENT
Heights come from Theme Options as custom properties.
══════════════════════════════════════════════════════ */
:root{--nsc-logo-h:46px;--nsc-footer-logo-h:64px}
.nav-logo-img{
height:var(--nsc-logo-h);max-height:var(--nsc-logo-h);
width:auto;display:block;object-fit:contain;
}
/* The bar grows if the logo is taller than the default row. */
.nav-inner{min-height:78px;height:auto;padding-top:8px;padding-bottom:8px}
.fl-logo{
height:var(--nsc-footer-logo-h);max-height:var(--nsc-footer-logo-h);
width:auto;display:block;object-fit:contain;margin-bottom:18px;
}
/* Renders a colour logo as a solid white mark, so a second white file is
not needed. Works on any logo with transparency. */
.fl-logo-white{filter:brightness(0) invert(1);opacity:.92}
@media (max-width:640px){
.nav-logo-img{height:calc(var(--nsc-logo-h) * .82)}
.fl-logo{height:calc(var(--nsc-footer-logo-h) * .85)}
}
/* Image focal points — set per image field in the admin. */
.ph.pos-top{object-position:center top}
.ph.pos-upper{object-position:center 25%}
.ph.pos-bottom{object-position:center bottom}
.ph.pos-left{object-position:left center}
.ph.pos-right{object-position:right center}
/* ═══════════════════════════════════════════════════════
NAV HEIGHT FOLLOWS THE LOGO
.nav is fixed-height, so a logo taller than the default
row was clipped no matter what height was set.
══════════════════════════════════════════════════════ */
:root{--nsc-nav-h:78px}
.nav{height:var(--nsc-nav-h)}
.nav-inner{min-height:var(--nsc-nav-h);height:auto;padding-top:8px;padding-bottom:8px}
.pt{padding-top:var(--nsc-nav-h)}
.nav-links{top:var(--nsc-nav-h)}
.nav-logo-img{max-width:none}
body.admin-bar .nav-links{top:calc(var(--nsc-nav-h) + 32px)}
@media (max-width:782px){
body.admin-bar .nav-links{top:calc(var(--nsc-nav-h) + 46px)}
}
/* ═══════════════════════════════════════════════════════
PACKAGE CARD DETAILS LINK
══════════════════════════════════════════════════════ */
.pkg-detail-link{margin-top:18px;margin-bottom:14px}
/* A grid holding fewer than three packages should sit centred rather than
hugging the left edge — the single package page shows the other two. */
.pkg-grid.pkg-grid-few{
grid-template-columns:repeat(auto-fit,minmax(280px,360px));
justify-content:center;
}
/* ═══════════════════════════════════════════════════════
HERO CLEARANCE
.pt sets the offset for the fixed nav. It must not flatten
the breathing room each hero was designed with — making it
the last rule removed the gap under the header entirely.
══════════════════════════════════════════════════════ */
.ip-hero.pt{padding-top:calc(var(--nsc-nav-h) + 42px)}
@media (max-width:900px){
.ip-hero.pt{padding-top:calc(var(--nsc-nav-h) + 26px)}
}
/* Homepage package cards: the list grows to fill the card so the two
actions always sit together at the bottom, level across all three. */
.pkg-preview .pkg{display:flex;flex-direction:column}
.pkg-preview .pkg-list{flex:1 1 auto}
.pkg-preview .pkg-detail-link{margin-top:22px;margin-bottom:12px}
/* The dark package card is .pkg.star on the home page and .pkg-detail.feat on
the packages page. Only the second was covered, so on the home page the
details link sat at #7468B8 on navy and its hover resolved to navy itself —
effectively invisible either way. */
.pkg.star .pkg-detail-link,
.pkg-detail.feat .pkg-detail-link{color:var(--lav-2)}
.pkg.star .pkg-detail-link:hover,
.pkg-detail.feat .pkg-detail-link:hover{color:#fff}
/* ═══════════════════════════════════════════════════════
"SHOW THE WHOLE IMAGE"
The frames carry a fixed aspect-ratio and the image fills
them with object-fit:cover, so a portrait photo in a 4:3
frame is cropped hard into its centre. This lets the frame
follow the picture instead.
══════════════════════════════════════════════════════ */
.ip-hero-visual.fit-whole,
.ap-img.fit-whole,
.as-img.fit-whole,
.sf-visual.fit-whole{
aspect-ratio:auto;display:block;max-height:none;
}
.ip-hero-visual.fit-whole .ph,
.ap-img.fit-whole .ph,
.as-img.fit-whole .ph,
.sf-visual.fit-whole .ph{
position:static;inset:auto;
width:100%;height:auto;object-fit:contain;
}
/* The hero frame keeps a sensible ceiling so a tall portrait
does not push the whole banner down. */
.ip-hero-visual.fit-whole{max-width:420px;margin-left:auto}
.ip-hero-visual.fit-whole .ph{max-height:520px;width:auto;margin:0 auto}
@media (max-width:900px){
.ip-hero-visual.fit-whole{max-width:340px;margin:0 auto}
}
/* ═══════════════════════════════════════════════════════
LAPTOP GUTTERS
Above 1400px the 1380px container is centred, so content
sits ~78px from the edge. Below it the container fills the
window and only the padding remains — at 40px the logo
looked pinned to the left. These keep the inset closer to
what a wide screen shows, then ease off as space runs out.
══════════════════════════════════════════════════════ */
@media (max-width:1200px){
.wrap,.nav-inner,.footer-inner,.trust-inner,.hero-inner,.legal-grid{
padding-left:48px;padding-right:48px;
}
}
@media (max-width:900px){
.wrap,.nav-inner,.footer-inner,.trust-inner,.hero-inner,.legal-grid{
padding-left:34px;padding-right:34px;
}
}
@media (max-width:640px){
.wrap,.nav-inner,.footer-inner,.trust-inner,.hero-inner,.legal-grid{
padding-left:22px;padding-right:22px;
}
}
@media (max-width:400px){
.wrap,.nav-inner,.footer-inner,.trust-inner,.hero-inner,.legal-grid{
padding-left:18px;padding-right:18px;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE & TABLET REFINEMENTS
══════════════════════════════════════════════════════ */
@media (max-width:1024px){
/* Tap targets. Tablets are touch devices too, so this starts at 1024. Several links rendered 15–19px tall, well under the ~44px
a finger needs; the padding gives them height without moving anything. */
.fl-link,
.fl-links a{padding:9px 0;min-height:38px;display:flex;align-items:center}
.fl-contact-item a{padding:8px 0;min-height:36px;display:inline-flex;align-items:center}
.breadcrumb{padding:6px 0;min-height:34px}
.svc-link,
.pkg-detail-link,
.pkg-note-link,
.legal-help-link{display:inline-flex;align-items:center;min-height:38px}
.btn-ghost-white{min-height:44px;padding-top:10px;padding-bottom:10px}
.faq-cat{min-height:38px}
.fl-social{min-height:38px;display:inline-flex;align-items:center}
.fb-badge{min-height:32px;display:inline-flex;align-items:center}
}
@media (max-width:900px){
/* The design's micro-labels sit at 10.5–11px. That reads on a desktop at
arm's length; on a phone or tablet it does not. */
.eyebrow,.fc-title,.pkg-lbl,.cd-label,.svc-cat,.ip-eyebrow,
.hero-card-label,.ap-card-lbl,.chip-cert-lbl,.tc-big-svc-lbl,
.legal-updated-lbl,.faq-cta-eyebrow{font-size:12px;letter-spacing:2px}
.chip-sub,.pop-pill,.tag,.ip-tag,.exam-tag{font-size:12px}
.logo-tag{font-size:11px;letter-spacing:1.6px}
/* Long single words in headings should break rather than push the layout. */
.hero-h1,.ip-h1,.cta-h2,.sf-h2,.pkg-h2,.pc-title{overflow-wrap:break-word}
}
@media (max-width:400px){
.hero-actions,.cta-actions{flex-direction:column;align-items:stretch}
.hero-actions .btn,.cta-actions .btn{width:100%;justify-content:center}
}
/* ═══════════════════════════════════════════════════════
ADMIN BAR ON MOBILE
WordPress pins the admin bar only above 600px. Below that
it scrolls away with the page, so holding the header 46px
down left a gap — and the header floating mid-screen —
as soon as the page was scrolled.
══════════════════════════════════════════════════════ */
@media screen and (max-width:600px){
body.admin-bar .nav{top:0}
body.admin-bar .nav-links{top:var(--nsc-nav-h)}
body.admin-bar .nav-scrim{top:0}
}
/* ═══════════════════════════════════════════════════════
FOOTER ON SMALL SCREENS
══════════════════════════════════════════════════════ */
@media (max-width:1024px){
/* The tap-target padding stacks on top of the column gap, which spread the
menus out far more than the design intends. The padding gives the height;
the gap is no longer needed. */
.fl-links{gap:0}
.fl-link,
.fl-links a{padding:6px 0;min-height:34px}
}
@media (max-width:900px){
/* Copyright and badges shared one row and the badge labels broke over two
lines each. They stack instead. */
.footer-bottom{
flex-direction:column;align-items:flex-start;gap:18px;text-align:left;
}
.footer-bottom .fb-copy{font-size:13.5px;line-height:1.6}
.fb-badges{gap:10px 18px;row-gap:10px}
.fb-badge{white-space:nowrap}
}
@media (max-width:480px){
.fb-badges{gap:8px 14px}
.fb-badge{font-size:12px}
}
/* ═══════════════════════════════════════════════════════
CONTACT FORM 7
CF7 wraps every field in its own span and adds its own
response and validation markup. These rules make that
output sit inside the theme's form design.
══════════════════════════════════════════════════════ */
.nsc-cf7 .wpcf7-form-control-wrap{display:block;width:100%}
.nsc-cf7 p{margin:0}
/* CF7 always prints the response element, empty, on first load. With a border
and padding on it that showed as an empty rounded box under the button. */
.nsc-cf7 .wpcf7-response-output:empty{
display:none;margin:0;padding:0;border:0;
}
/* The form's own spacing comes from .form-group / .form-row, so CF7's
wrappers must not add any of their own. */
.nsc-cf7 .form-row{margin-bottom:0}
.nsc-cf7 .form-group > .wpcf7-form-control-wrap{margin:0}
.nsc-cf7 br{display:none}
/* CF7 fields adopt the theme inputs */
.nsc-cf7 .form-input,
.nsc-cf7 .form-select,
.nsc-cf7 .form-textarea,
.nsc-cf7 input[type="text"],
.nsc-cf7 input[type="email"],
.nsc-cf7 input[type="tel"],
.nsc-cf7 select,
.nsc-cf7 textarea{width:100%}
.nsc-cf7 .form-submit,
.nsc-cf7 input[type="submit"]{width:100%;cursor:pointer}
/* Inline validation */
.nsc-cf7 .wpcf7-not-valid{border-color:#b32d2e}
.nsc-cf7 .wpcf7-not-valid-tip{
display:block;margin-top:6px;font-size:13px;color:#b32d2e;
}
/* The response banner under the button */
.nsc-cf7 .wpcf7-response-output{
margin:18px 0 0;padding:12px 16px;border-radius:var(--r12,12px);
font-size:14px;line-height:1.6;border:1px solid transparent;
}
.nsc-cf7 form.sent .wpcf7-response-output{
background:rgba(139,124,200,.1);border-color:rgba(139,124,200,.35);color:var(--navy);
}
.nsc-cf7 form.invalid .wpcf7-response-output,
.nsc-cf7 form.failed .wpcf7-response-output,
.nsc-cf7 form.spam .wpcf7-response-output{
background:rgba(179,45,46,.07);border-color:rgba(179,45,46,.3);color:#8a2324;
}
/* The submitting spinner sits inline with the button */
.nsc-cf7 .wpcf7-spinner{margin:0 auto;display:block}
/* Newsletter form in the dark footer — CF7's