/* Accessibility: skip-to-content link, visible only on keyboard focus */
.skip-link{position:absolute;top:0;left:0;z-index:9999;background:#061a33;color:#fff;padding:10px 18px;font-weight:600;text-decoration:none;transform:translateY(-120%)}
.skip-link:focus{transform:translateY(0);outline:2px solid #fff;outline-offset:-4px}

:root{
  --navy:#061a33;
  --navy2:#0b2a4d;
  --ink:#0b1630;
  --blue:#0b5fc5;
  --green:#5b8f29;
  --snow:#f7fbff;
  --ice:#e8f3fb;
  --muted:#5b6879;
  --line:#d8e3ee;
  --black:#0a0a0a;
  --white:#fff;
  --radius:22px;
  --shadow:0 16px 50px rgba(2,21,44,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:white;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 36px));margin:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(6,26,51,.96);backdrop-filter:blur(12px);color:white;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;gap:26px;min-height:78px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.28rem;white-space:nowrap}
.brand svg{width:58px;color:white}
.brand small{display:block;color:#8fd2ff;font-size:.67rem;letter-spacing:.07em;font-weight:700}
.links{display:flex;gap:22px;margin-left:auto;align-items:center;font-size:.92rem}
.links a:hover{color:#bfe3ff}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--green);color:#fff;padding:13px 18px;border-radius:10px;font-weight:800;border:0}
.cta.alt{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.cta.light{background:white;color:var(--navy)}
.menu{display:none;background:none;border:0;color:white;font-size:1.5rem}

.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#eff8ff 0%,#d9efff 56%,#f8fbff 100%);min-height:600px}
.hero:before{content:"";position:absolute;inset:auto -10% -30% -10%;height:78%;background:
linear-gradient(155deg,transparent 0 33%,rgba(255,255,255,.93) 33.2% 47%,transparent 47.2%),
linear-gradient(25deg,transparent 0 42%,rgba(194,221,241,.7) 42.2% 48%,transparent 48.2%);
transform:skewY(-3deg)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;padding:76px 0 60px;align-items:center}
.hero h1{font-size:clamp(3rem,6vw,5.4rem);line-height:.96;margin:0 0 22px;letter-spacing:-.05em}
.hero h1 .ai{color:var(--green)}
.kicker{font-weight:800;letter-spacing:.08em;font-size:.88rem;text-transform:uppercase}
.hero p{max-width:650px;font-size:1.15rem;color:#20314a}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 20px}
.micro{display:flex;gap:20px;flex-wrap:wrap;color:#2c3c50;font-size:.9rem}
.trail-signs{display:grid;gap:12px;max-width:430px;margin-left:auto}
.trail{background:rgba(255,255,255,.88);border:1px solid rgba(6,26,51,.12);box-shadow:var(--shadow);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center}
.shape{width:34px;height:34px;display:block}
.circle{border-radius:50%;background:var(--green)}
.square{background:var(--blue)}
.diamond{background:var(--black);transform:rotate(45deg);width:28px;height:28px;margin-left:3px}
.double{display:flex;gap:7px}.double i{display:block;width:24px;height:24px;background:var(--black);transform:rotate(45deg)}
.trail strong{display:block;font-size:1.08rem}
.trail span{font-size:.88rem;color:var(--muted)}
.section{padding:78px 0}
.section.ice{background:var(--snow)}
.eyebrow{color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.03;letter-spacing:-.035em;margin:10px 0 18px}
.lede{font-size:1.1rem;color:var(--muted);max-width:760px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 8px 30px rgba(2,21,44,.06)}
.card h3{margin:8px 0 8px;font-size:1.32rem}
.card p{color:var(--muted)}
.card .mini-icon{font-size:2rem}
.path{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:34px}
.step{text-align:center;position:relative}
.step .num{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:900}
.step:nth-child(1) .num{background:var(--green)}
.step:nth-child(2) .num,.step:nth-child(3) .num{background:var(--blue)}
.step h4{margin:0 0 6px}
.step p{font-size:.88rem;color:var(--muted)}
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.solution{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:white}
.solution-top{height:122px;background:
linear-gradient(165deg,#cae5f7 0 40%,#f8fcff 40% 52%,#aac7dd 52% 61%,#f8fcff 61%);
position:relative}
.solution-top:after{content:"";position:absolute;inset:auto 12px 12px auto;width:86px;height:55px;background:linear-gradient(150deg,transparent 45%,#7799b4 46% 52%,transparent 53%)}
.badge{position:absolute;top:14px;left:14px;background:white;border-radius:999px;padding:7px 10px;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800}
.solution-body{padding:22px}
.solution-body p{color:var(--muted)}
.trailhead{background:var(--navy);color:white;position:relative;overflow:hidden}
.trailhead:before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 20% 70%,transparent 0 24px,rgba(255,255,255,.04) 25px 26px)}
.trailhead-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.map{border:1px solid rgba(255,255,255,.35);border-radius:24px;padding:28px;background:rgba(255,255,255,.05)}
.mapline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0}
.mapline .seg{height:2px;background:rgba(255,255,255,.4);flex:1}
.platforms{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:28px}
.platform{border:1px solid var(--line);padding:16px;border-radius:14px;text-align:center;font-weight:800;font-size:.9rem;background:white}
.footer{background:#031327;color:white;padding:54px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:30px}
.footer p,.footer li{color:#c0cfdf;font-size:.9rem}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin:7px 0}
.copyright{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);color:#9fb0c3;font-size:.82rem}
.page-hero{padding:90px 0 70px;background:linear-gradient(140deg,#f0f8ff,#fff)}
.page-hero h1{font-size:clamp(2.8rem,5vw,5rem);line-height:.98;letter-spacing:-.045em;margin:0 0 20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.list{display:grid;gap:12px;margin-top:24px}
.list div{padding:15px 17px;border-left:4px solid var(--green);background:var(--snow);border-radius:8px}
.form{display:grid;gap:16px}
.form label{font-weight:700}
.form input,.form select,.form textarea{width:100%;padding:14px;border:1px solid #cdd9e5;border-radius:10px;font:inherit}
.form textarea{min-height:150px}
.notice{font-size:.88rem;color:var(--muted)}
@media(max-width:920px){
 .links{display:none}.menu{display:block;margin-left:auto}
 .hero-grid,.trailhead-grid,.two{grid-template-columns:1fr}
 .trail-signs{margin:0;max-width:none}
 .cards,.solution-grid{grid-template-columns:1fr 1fr}
 .path{grid-template-columns:repeat(3,1fr)}
 .platforms{grid-template-columns:repeat(3,1fr)}
 .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 .wrap{width:min(100% - 24px,1180px)}
 .hero-grid{padding:52px 0 42px}
 .hero{min-height:auto}
 .cards,.solution-grid,.path,.platforms,.footer-grid{grid-template-columns:1fr}
 .section{padding:58px 0}
 .hero-actions{flex-direction:column}
 .cta{width:100%}
}

/* V2 visual polish */
.hero{background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.95),transparent 34%),linear-gradient(135deg,#edf7ff 0%,#dbeeff 52%,#f9fcff 100%)}
.hero-grid{grid-template-columns:1.02fr .98fr;min-height:610px}
.hero-copy{padding-right:12px}
.hero-visual{position:relative;min-height:440px;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(2,21,44,.18);border:1px solid rgba(255,255,255,.72)}
.hero-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,26,51,.12),transparent 35%);pointer-events:none}
.hero-badges{position:absolute;right:16px;top:16px;z-index:2;display:grid;gap:8px;width:min(270px,46%)}
.hero-badge{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;border-left:5px solid var(--green);box-shadow:0 10px 24px rgba(5,24,45,.15)}
.hero-badge.blue{border-left-color:var(--blue)} .hero-badge.black{border-left-color:#111}
.hero-badge strong{display:block;font-size:.88rem;line-height:1.1}.hero-badge small{display:block;font-size:.72rem;color:#526175;line-height:1.25;margin-top:2px}
.hero-badge .shape{width:24px;height:24px}.hero-badge .diamond{width:18px;height:18px;margin-left:3px}.hero-badge .double i{width:15px;height:15px}
.value-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.value{border-top:3px solid var(--green);padding:18px 16px;background:#fff;border-radius:0 0 14px 14px;box-shadow:0 8px 28px rgba(3,25,51,.06)}
.value:nth-child(2){border-top-color:var(--blue)}.value:nth-child(3),.value:nth-child(4){border-top-color:#111}
.value strong{display:block;margin-bottom:5px}.value span{color:var(--muted);font-size:.9rem}
.trust-band{background:#061a33;color:#fff;padding:22px 0}
.trust-grid{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:14px;align-items:center}.trust-grid div{font-size:.82rem;color:#c7d4e2}.trust-grid strong{color:#fff}
.cta-panel{background:linear-gradient(135deg,#0a2b50,#061a33);color:white;border-radius:28px;padding:34px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.cta-panel p{color:#c5d4e4}.cta-panel .actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;min-height:auto}.hero-visual{min-height:360px}.value-strip{grid-template-columns:1fr 1fr}.trust-grid{grid-template-columns:1fr 1fr 1fr}.cta-panel{grid-template-columns:1fr}.cta-panel .actions{justify-content:flex-start}}
@media(max-width:620px){.hero-visual{min-height:330px}.hero-badges{width:58%}.hero-badge small{display:none}.value-strip,.trust-grid{grid-template-columns:1fr}}

/* Ski-trail geometry for transformation path */
.trail-path{position:relative;gap:22px}
.trail-path:before{
  content:"";position:absolute;top:31px;left:7%;right:7%;
  border-top:2px dashed #aab8c8;z-index:0
}
.trail-step{position:relative;z-index:1}
.trail-number{
  width:62px;height:62px;margin:0 auto 18px;position:relative;
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:1rem
}
.trail-number span{position:relative;z-index:3}
.circle-number{border-radius:50%;background:var(--green)}
.square-number{background:var(--blue);border-radius:2px}
.diamond-number{background:#071b34;transform:rotate(45deg);width:52px;height:52px;margin-top:5px;margin-bottom:23px}
.diamond-number span{transform:rotate(-45deg)}
.diamond-number.blue-diamond{background:var(--blue)}
.double-diamond-number{background:none;width:76px}
.double-diamond-number i{
  position:absolute;top:10px;width:42px;height:42px;background:#071b34;
  transform:rotate(45deg)
}
.double-diamond-number i:first-child{left:7px}
.double-diamond-number i:nth-child(2){right:7px}
.trail-step h4{font-size:1.05rem}
.green-step h4{color:#315d18}
.blue-step h4{color:#064ca7}
.black-step h4{color:#071b34}
@media(max-width:920px){
  .trail-path:before{display:none}
  .trail-number{margin-top:0}
}

/* Interactive AI Trailhead Assessment */
.assessment-page{background:#f8fbfe}
.assessment-hero{background:linear-gradient(135deg,#edf7ff,#fff);padding:72px 0 58px}
.assessment-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.assessment-hero h1{font-size:clamp(3rem,5vw,5.1rem);line-height:.98;letter-spacing:-.045em;margin:8px 0 20px}
.assessment-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.assessment-pills span{padding:8px 11px;background:white;border:1px solid var(--line);border-radius:999px;font-size:.84rem}
.assessment-legend{display:grid;gap:10px}
.assessment-legend>div{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;background:white;border:1px solid var(--line);padding:14px;border-radius:14px;box-shadow:0 8px 24px rgba(2,21,44,.05)}
.assessment-legend strong,.assessment-legend small{display:block}.assessment-legend small{color:var(--muted)}
.assessment-legend .shape{width:28px;height:28px}.assessment-legend .diamond{width:21px;height:21px;margin-left:3px}.assessment-legend .double i{width:18px;height:18px}

.assessment-shell-section{padding-top:46px}
.assessment-layout{display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:start}
.assessment-sidebar{position:sticky;top:104px;display:grid;gap:16px}
.progress-card,.score-preview,.privacy-note{background:white;border:1px solid var(--line);border-radius:18px;padding:20px}
.progress-top{display:flex;justify-content:space-between;gap:16px;font-size:.9rem}
.progress-track,.dim-track{height:9px;background:#e8eef4;border-radius:999px;overflow:hidden;margin-top:12px}
.progress-track div,.dim-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:999px;transition:width .3s ease}
.score-preview{display:grid;gap:14px}
.score-dim{display:grid;grid-template-columns:1fr 12px;gap:10px;align-items:center;font-size:.86rem}.score-dim i{width:9px;height:9px;border-radius:50%;background:#c7d3de}
.privacy-note{font-size:.82rem;color:var(--muted);background:#f2f8fd}

.assessment-card{background:white;border:1px solid var(--line);border-radius:26px;padding:38px;box-shadow:var(--shadow);min-height:560px}
.question-count{color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.question-block h2{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.08;margin:10px 0 10px}
.question-help{color:var(--muted);font-size:1rem;max-width:760px}
.answer-grid{display:grid;gap:12px;margin-top:28px}
.answer-option{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:center;border:1px solid #cfdbe6;border-radius:14px;padding:16px 18px;cursor:pointer;transition:.15s ease;background:white}
.answer-option:hover{border-color:#8eb8dc;transform:translateY(-1px)}
.answer-option.selected{border:2px solid var(--blue);background:#f2f8ff}
.answer-option input{position:absolute;opacity:0;pointer-events:none}
.answer-index{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#edf2f7;font-weight:800;font-size:.8rem}
.answer-option.selected .answer-index{background:var(--blue);color:white}
.assessment-controls{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.assessment-controls .cta{min-width:132px}
.validation-msg{color:#a4262c;font-size:.9rem;font-weight:700;margin-top:14px;min-height:1.35em}

.results-section{background:white}
.result-header{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:30px}
.result-level{display:flex;gap:14px;align-items:center;background:#f6f9fc;border:1px solid var(--line);border-radius:18px;padding:18px 22px;min-width:245px}
.result-level strong,.result-level span{display:block}.result-level span{color:var(--muted);font-size:.88rem}
.result-symbol{width:38px;height:38px}.result-level .diamond{width:28px;height:28px}
.result-double i{width:24px;height:24px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.result-panel{border:1px solid var(--line);border-radius:22px;padding:26px;background:#fbfdff}
.result-panel h3{margin-top:0}
.dimension-scores{display:grid;gap:18px}
.dimension-row>div:first-child{display:flex;justify-content:space-between;gap:12px}
.recommendations{padding-left:22px}.recommendations li{margin:0 0 14px;padding-left:4px}
.trail-map-panel{margin-top:20px;background:var(--navy);color:white;border-radius:24px;padding:28px}
.recommended-trail{display:flex;gap:18px;align-items:center;margin-top:10px}
.recommended-trail strong{font-size:1.35rem}.recommended-trail p{margin:2px 0 0;color:#c8d7e7}
.result-cta{margin-top:22px;border:1px solid var(--line);border-radius:22px;padding:26px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.result-cta h3{margin:0 0 6px}.result-cta p{margin:0;color:var(--muted)}
.result-actions{display:flex;gap:12px;flex-wrap:wrap}
.link-button{background:none;border:0;color:var(--blue);font:inherit;font-weight:800;cursor:pointer;padding:0}
@media(max-width:920px){
 .assessment-hero-grid,.assessment-layout,.result-grid,.result-header,.result-cta{grid-template-columns:1fr}
 .assessment-sidebar{position:static}
 .assessment-legend{grid-template-columns:1fr 1fr}
 .result-level{width:max-content}
}
@media(max-width:620px){
 .assessment-hero{padding:52px 0 40px}
 .assessment-legend{grid-template-columns:1fr}
 .assessment-card{padding:22px;min-height:auto}
 .assessment-controls{flex-direction:column-reverse}
 .assessment-controls .cta,.result-actions .cta{width:100%}
 .result-actions{display:grid}
}

/* Homepage V3: ski-themed visual system */
.v3-hero{min-height:455px;background:#dbeaf5}
.v3-hero .hero-photo{filter:saturate(1.04) contrast(1.02)}
.route-overlay{
  position:absolute;inset:0 auto 0 0;width:72%;height:100%;object-fit:contain;
  object-position:center;z-index:1;opacity:.92;pointer-events:none
}
.v3-badges{z-index:3}
.hero-principles{gap:12px}
.hero-principles span{
  display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.7);
  border:1px solid rgba(6,26,51,.10);padding:8px 11px;border-radius:999px;
  backdrop-filter:blur(6px);font-weight:700
}
.hero-principles b{font-size:1rem}
.ski-badge-icon{
  width:30px;height:30px;display:grid;place-items:center;color:white;font-weight:900;
  font-size:.82rem;line-height:1
}
.mountain-round{border-radius:50%;background:var(--green)}
.lift-square{background:var(--blue);border-radius:3px;font-size:1rem}
.mountain-diamond{background:#071b34;transform:rotate(45deg);width:24px;height:24px;margin-left:3px}
.mountain-diamond{font-size:.65rem}.mountain-diamond::first-letter{transform:rotate(-45deg)}
.double-mountain{position:relative;width:34px;height:30px;background:none}
.double-mountain i{
  position:absolute;width:21px;height:21px;background:#071b34;transform:rotate(45deg);
  display:grid;place-items:center;font-style:normal;font-size:.5rem
}
.double-mountain i:first-child{left:2px;top:4px}.double-mountain i:nth-child(2){right:2px;top:4px}
.solution-top{background:#d9e9f4;height:150px}
.solution-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.solution-top:after{display:none}
.solution .badge{z-index:2;box-shadow:0 5px 16px rgba(5,24,45,.14)}
.solution{transition:transform .18s ease,box-shadow .18s ease}
.solution:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(2,21,44,.11)}
.solution-body{min-height:220px;display:flex;flex-direction:column}
.solution-body p{flex:1}
@media(max-width:920px){
  .route-overlay{width:66%;opacity:.78}
}
@media(max-width:620px){
  .v3-hero{min-height:390px}
  .route-overlay{display:none}
  .hero-principles span{width:100%;justify-content:flex-start}
  .solution-top{height:170px}
}

/* ══ Header nav v2 ═══════════════════════════════════════════════════════
   Replaces the flat eight-link bar, which wrapped onto two lines once
   Insights was added. Services now sit behind one grouped panel; the markup
   is rendered by src/index.js and the behaviour lives in site.js. */

/* Services are grouped behind one top-level item so the bar stays on a
   single line. The panel opens on hover AND on focus-within, so it works
   with no JavaScript at all; site.js only adds click/tap toggling and the
   aria-expanded state on top of that. */
.links{gap:8px;font-size:.95rem}
/* :not(.cta) throughout — the assessment button is also a direct child of
   .links, and any background set on it would paint a rectangle behind its
   masked snowboard silhouette. */
.links > a:not(.cta){padding:9px 12px;border-radius:9px;line-height:1;transition:background .15s ease,color .15s ease}
.links > a:not(.cta):hover{background:rgba(255,255,255,.08);color:#fff}
.links > a[aria-current="page"]:not(.cta){background:rgba(255,255,255,.12);color:#fff}

.navgroup{position:relative}
.navgroup-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:inherit;
  font:inherit;padding:9px 12px;border-radius:9px;cursor:pointer;line-height:1;
  transition:background .15s ease}
.navgroup-toggle:hover,.navgroup:focus-within .navgroup-toggle,.navgroup-toggle[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.navgroup-toggle .chev{width:11px;height:11px;transition:transform .18s ease}
.navgroup-toggle[aria-expanded="true"] .chev,.navgroup:hover .chev{transform:rotate(180deg)}

.navgroup-menu{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;
  width:560px;padding:12px;background:#fff;color:var(--ink);border-radius:16px;
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(2,21,44,.28);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.navgroup-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.navgroup:hover .navgroup-menu,.navgroup:focus-within .navgroup-menu,
.navgroup-toggle[aria-expanded="true"] + .navgroup-menu{opacity:1;visibility:visible;transform:none}

.navgroup-menu a{display:grid;grid-template-columns:34px 1fr;align-items:start;gap:11px;
  padding:11px 12px;border-radius:11px;transition:background .14s ease}
.navgroup-menu a:hover{background:var(--ice);color:var(--ink)}
.navgroup-menu .ico{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;
  border-radius:9px;background:var(--ice);color:var(--navy2)}
.navgroup-menu a:hover .ico{background:var(--navy2);color:#fff}
.navgroup-menu .ico svg{width:19px;height:19px}
.navgroup-menu strong{font-size:.93rem;font-weight:700;line-height:1.2;margin-bottom:2px}
.navgroup-menu span{font-size:.79rem;color:var(--muted);line-height:1.35}

@media(max-width:1080px){
  .navgroup-menu{width:400px;grid-template-columns:1fr}
  .navgroup-menu span{display:none}
  .navgroup-menu a{grid-template-columns:34px 1fr;align-items:center}
  .navgroup-menu .ico{grid-row:auto}
}

/* Mobile ------------------------------------------------------------- */
/* The old build hid .links entirely below 920px and re-showed them with
   inline styles from site.js. That left no way to style the panel and no
   aria state, so it is done with classes here instead. */
@media(max-width:920px){
  .links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--navy);padding:12px 18px 20px;
    border-bottom:1px solid rgba(255,255,255,.12);
    max-height:calc(100dvh - 78px);overflow:auto}
  .links.open{display:flex}
  .links > a:not(.cta){padding:13px 12px}
  .navgroup{position:static}
  .navgroup-toggle{width:100%;justify-content:space-between;padding:13px 12px}
  .navgroup-menu{position:static;translate:none;transform:none;width:auto;
    opacity:1;visibility:visible;display:none;grid-template-columns:1fr;gap:2px;
    background:rgba(255,255,255,.06);border:0;box-shadow:none;color:#fff;
    border-radius:12px;margin:2px 0 6px;padding:6px}
  .navgroup-menu::before{display:none}
  .navgroup-menu.open{display:grid}
  .navgroup-menu a{color:#fff;align-items:center;grid-template-columns:34px 1fr}
  .navgroup-menu a:hover{background:rgba(255,255,255,.1);color:#fff}
  .navgroup-menu .ico{grid-row:auto;background:rgba(255,255,255,.1);color:#bfe3ff}
  .navgroup-menu a:hover .ico{background:#bfe3ff;color:var(--navy)}
  .navgroup-menu span{display:none}
  /* On desktop the panel is shown by opacity/visibility; here it is shown by
     display, so the hover and focus-within rules above are inert and only the
     .open class (set by site.js) opens it. */
}

/* The brand lockup is nowrap and the tagline is wide, so on a narrow phone it
   pushed the hamburger past the viewport edge and the whole page scrolled
   sideways. Scale the lockup down, and drop the tagline on the narrowest
   screens where it cannot fit beside the button. */
@media(max-width:920px){
  .nav{gap:14px}
  .brand{min-width:0;font-size:1.1rem;gap:10px}
  .brand svg{width:46px;flex:none}
  .brand small{font-size:.58rem;letter-spacing:.04em}
}
@media(max-width:430px){
  .brand small{display:none}
  .brand{font-size:1.02rem}
  .brand svg{width:40px}
}

/* ══ Service pages ═══════════════════════════════════════════════════════
   The service pages carry more than a hero now, so they need two things this
   file did not have: a card that is itself a link, and a plain disclosure list
   for the FAQ. Both reuse the existing card and colour tokens, so nothing new
   is introduced visually. */
a.card{display:block;text-decoration:none;color:inherit;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
a.card:hover{transform:translateY(-3px);border-color:var(--blue);
  box-shadow:0 14px 40px rgba(2,21,44,.12)}
.card .eyebrow{font-size:.72rem;margin-bottom:6px}

.svc-faq{margin-top:30px;display:grid;gap:12px}
.svc-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.svc-faq summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq summary::after{content:"+";font-weight:400;font-size:1.5rem;line-height:1;color:var(--blue);flex:none}
.svc-faq details[open] summary::after{content:"\2212"}
.svc-faq p{margin:12px 0 2px;color:var(--muted);max-width:78ch}

/* The honest-limits note under the assessment result. Deliberately quieter than
   the panels above it - it should read as candour rather than as a warning
   banner, and it sits before the call to action because that is the moment a
   reader decides what the score meant. */
.result-note{margin-top:22px;padding:24px 26px;border-radius:18px;
  background:var(--snow);border:1px solid var(--line)}
.result-note h3{margin:0 0 10px;font-size:1.06rem}
.result-note p{margin:0 0 10px;color:var(--muted);font-size:.94rem;line-height:1.65;max-width:82ch}
.result-note p:last-child{margin-bottom:0}
@media(max-width:620px){ .result-note{padding:20px} }