/* Brand tokens, skip link, header and footer: shell.css (loaded first). */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--white); color:var(--ink);
  font:17px/1.65 var(--body); overflow-x:hidden;
}
a { color:inherit; }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible {
  outline:3px solid var(--gold-text); outline-offset:3px;
}

.preview-banner {
  padding:8px 5%; background:var(--dark); color:var(--on-dark);
  font-size:15px; letter-spacing:.06em; text-align:center;
}
.preview-banner a { margin-left:12px; color:var(--on-dark); }
.site-shell { min-width:0; transition:none; }

.gold {
  padding:11px 18px; border:1px solid var(--gold); background:var(--gold); color:var(--dark);
  font-weight:700; text-decoration:none;
}
.gold:hover { border-color:var(--dark); }

/* Typography scale */
.eyebrow {
  display:block; margin-bottom:14px; color:var(--gold-text); font-size:14px;
  font-weight:700; letter-spacing:var(--eyebrow-tracking);
}
.hero h1 {
  max-width:980px; margin:0 0 22px; color:var(--dark);
  font:800 clamp(40px,5.2vw,72px)/1.06 var(--heading); letter-spacing:var(--tracking-tight);
}
.section h2, .proof-intro h2 {
  max-width:780px; margin:0 0 16px; color:inherit;
  font:800 clamp(30px,3.4vw,46px)/1.14 var(--heading); letter-spacing:var(--tracking-tight);
}
.section h2 + p, .proof-intro p, .final-cta p { max-width:640px; }
.hero h1 em {
  color:inherit; font-style:normal; text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:4px; text-underline-offset:.14em;
}

/* Sections: one container and one compact editorial rhythm. White reading
   sections are separated by thin rules; navy marks the few anchors. */
.section, .proof-section {
  padding:var(--section-y) var(--inline); scroll-margin-top:var(--header-h);
  border-top:1px solid var(--line);
}
.cream { background:var(--surface-soft); }
.section--navy {
  border-top:0; background:var(--surface-navy); color:var(--on-navy);
}
.section--navy h2 { color:var(--on-navy); }
.section--navy .eyebrow { color:var(--gold); }

.hero { padding:clamp(48px,5.5vw,80px) var(--inline) clamp(40px,4.5vw,64px); }
.hero-copy { min-width:0; }
.hero p { max-width:640px; margin:0 0 28px; color:var(--muted); font-size:clamp(18px,1.6vw,21px); line-height:1.6; }
.hero-actions, .cta-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button {
  display:inline-flex; align-items:center; min-height:48px; padding:12px 22px;
  border:1px solid var(--dark); font-weight:700; text-decoration:none;
}
.outline { background:transparent; color:var(--dark); }
.outline:hover { background:var(--dark); color:var(--white); }

/* Needs: a quiet recognition list beside the organisation system map
   (LABCShell.diagram "system-map"); under the list on narrow screens. */
.needs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,min(clamp(300px,27vw,360px),40%)); column-gap:calc(var(--gap) * 1.5); }
.needs > * { grid-column:1; }
.needs > .lv-diagram { grid-column:2; grid-row:1 / span 3; align-self:center; }
/* Explainer video on the soft surface: a weighted text column (heading,
   body, the four connected areas as ruled labels) and the 9:16 video beside
   it, both top-aligned and bounded so the video never sets an empty, tall
   section. Text first and the video below on phones. No overlay: the video
   has its own end card. */
.explainer {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,min(clamp(320px,23vw,340px),42%));
  align-items:start;
  column-gap:clamp(32px,5vw,72px);
  background:var(--surface-soft);
}
.explainer-copy { min-width:0; max-width:720px; }
.explainer-copy h2 { margin-bottom:22px; font-size:clamp(34px,4.2vw,56px); line-height:1.08; }
.explainer .explainer-copy p { max-width:680px; margin:0; color:var(--muted); font-size:clamp(17px,1.5vw,20px); line-height:1.6; }
.explainer-pillars {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--gap);
  margin:30px 0 0;
  padding:0;
  border-top:1px solid var(--line-strong);
  list-style:none;
}
.explainer-pillars li {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font:700 17px/1.35 var(--heading);
}
.explainer-pillars li::before { content:""; flex:none; width:8px; height:8px; background:var(--gold); }
.explainer-media { min-width:0; border-bottom:3px solid var(--gold); background:var(--surface-navy); }
.explainer-video { display:block; width:100%; height:auto; aspect-ratio:9 / 16; background:var(--surface-navy); }
.needs-list, .operating-model {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--gap);
  margin:24px 0 0; padding:0; list-style:none;
}
.needs-list li, .operating-model li {
  position:relative; padding:13px 0 13px 24px; border-top:1px solid var(--line-strong);
}
.needs-list li::before, .operating-model li::before {
  content:""; position:absolute; top:24px; left:0; width:8px; height:8px; background:var(--gold);
}

/* Three doors: three starting points, typographic, with thin separators. */
.doors {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin-top:28px;
}
.door { min-width:0; padding-top:20px; border-top:2px solid var(--navy); }
.door h3 { margin:0 0 14px; font:700 clamp(21px,1.8vw,25px)/1.28 var(--heading); letter-spacing:var(--tracking-tight); }
.door p { margin:0 0 12px; color:var(--muted); }
.door .door-capabilities { color:var(--gold-text); font-size:15px; font-weight:600; }
.door ul { margin:14px 0 0; padding:0; list-style:none; }
.door a {
  display:flex; justify-content:space-between; gap:12px; padding:12px 0;
  border-top:1px solid var(--line); font-weight:600; text-decoration:none;
}
.door a b { color:var(--gold-text); }
.door a:hover { color:var(--gold-text); }

/* Six services: a light index, lighter than the doors. */
.service-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--gap); margin-top:24px;
}
.service-card {
  display:flex; flex-direction:column; min-width:0;
  padding:18px 0 20px; border-top:1px solid var(--line-strong); background:transparent;
}
.service-card > div {
  display:flex; justify-content:space-between; color:var(--gold-text);
}
.card-no { font-size:14px; font-weight:700; }
.arrow { font-size:18px; }
.service-card h3 { margin:14px 0 8px; font:700 20px/1.3 var(--heading); }
.service-card p { margin:0 0 14px; color:var(--muted); font-size:16px; }
.service-card button, .service-card [data-page-link] {
  margin-top:auto; padding:0; border:0; background:none; color:var(--dark);
  font-size:15px; font-weight:700; text-align:left; text-decoration:underline;
  text-decoration-color:var(--line-strong); text-underline-offset:5px;
}
.service-card:hover [data-page-link], .service-card:hover button { text-decoration-color:var(--gold); }
.text-link, .all-insights {
  display:inline-block; margin-top:12px; font-weight:700;
  text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px;
}
.services-link { margin-top:16px; }

/* How we work: a process, read left to right; the homepage's methodology
   anchor on navy. */
.method-steps {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px var(--gap);
  margin:28px 0 0; padding:0; list-style:none; counter-reset:step;
}
.method-steps li {
  display:grid; align-content:start; gap:6px; padding-top:16px;
  border-top:1px solid var(--dark); counter-increment:step;
}
.method-steps li::before {
  content:"0" counter(step); color:var(--gold-text); font:700 15px var(--heading);
}
.method-steps strong { font:700 19px/1.3 var(--heading); }
.method-steps span { color:var(--muted); }
.section--navy .method-steps li { border-top-color:var(--on-navy-line); }
.section--navy .method-steps li::before { color:var(--gold); }
.section--navy .method-steps span { color:var(--on-navy-muted); }

/* Proof and trust */
.proof-section { display:block; min-width:0; overflow-wrap:anywhere; background:var(--white); }
.proof-intro {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px var(--gap); align-items:end; margin-bottom:24px;
}
.proof-intro .eyebrow, .proof-intro h2 { grid-column:1; }
.proof-intro h2 { margin-bottom:0; }
.proof-intro p { grid-column:2; grid-row:1 / span 2; align-self:end; margin:0; color:var(--muted); }
.proof-intro, .proof-logos { min-width:0; }
.proof-content { min-width:0; }
.proof-logos {
  display:block; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent);
}
.proof-marquee { overflow:hidden; }
.proof-track { display:flex; width:max-content; animation:proof-scroll 48s linear infinite; }
.proof-track:hover { animation-play-state:paused; }
.proof-track > span, .proof-track { display:flex; align-items:center; gap:16px; }
.proof-track > span { padding-left:16px; }
.proof-logo { display:grid; place-items:center; min-height:88px; padding:12px; border:1px solid transparent; background:var(--white); transition:border-color .2s ease; }
.proof-logo:hover, .proof-logo:focus-visible { border-color:var(--line-strong); }
.proof-logo img { display:block; width:100%; max-height:56px; object-fit:contain; }
.reviews-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px var(--gap); margin-top:28px; }
.review-card { min-width:0; padding-top:20px; border-top:1px solid var(--line-strong); }
.review-stars { color:var(--gold-text); letter-spacing:.12em; font-size:14px; }
.review-card p { margin:12px 0 0; color:var(--dark); font:500 16px/1.55 var(--heading); }
.review-attribution { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; color:var(--muted); font-size:14px; }
.review-attribution strong { color:var(--dark); }

/* Diagnostics: the natural next step, on the navy anchor. */
.diagnostics {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap) calc(var(--gap) * 1.5);
  border-top:0; background:var(--surface-navy); color:var(--on-dark);
}
.diagnostics h2 { color:var(--on-dark); }
.diagnostics p { max-width:480px; color:var(--on-dark-muted); }
.diagnostics .eyebrow, .diagnostic-list b { color:var(--gold); }
.diagnostics .diagnostic-list { align-self:start; }
.diagnostics .diagnostic-list::before { content:"PREVIEW / FREE TOOLS"; display:block; margin:0 0 10px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.12em; }
.diagnostic-list { border-top:1px solid var(--on-dark-line); }
.diagnostic-list a {
  display:flex; justify-content:space-between; gap:16px; padding:15px 0;
  border-bottom:1px solid var(--on-dark-line);
  font:600 18px var(--heading); text-decoration:none;
}
.diagnostic-list a:hover span { color:var(--gold); }
.diagnostic-list a span { display:grid; gap:4px; }
.diagnostic-list a small {
  color:var(--gold); font:700 12px/1.2 var(--body);
  letter-spacing:.08em; text-transform:uppercase;
}
.diagnostic-all-link {
  display:inline-block; margin-top:20px; color:var(--on-dark); font-weight:700;
  text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px;
}
.diagnostic-all-link b { color:var(--gold); }
/* The full list continues the navy diagnostics block. */
.diagnostics-all { padding-top:0; border-top:0; background:var(--surface-navy); color:var(--on-dark); }
.diagnostics-all summary { padding:18px 0; border-top:1px solid var(--on-dark-line); font-weight:700; cursor:pointer; }
.diagnostics-all .diagnostic-list { max-width:720px; }

/* Product ecosystem: a compact teaser. */
.products { background:var(--white); }
.status {
  align-self:flex-start; padding:4px 9px; border:1px solid var(--line-strong);
  color:var(--dark); font-size:14px; font-weight:700;
}
.product-teaser { max-width:980px; margin:20px 0 8px; padding:0; list-style:none; }
.product-teaser li {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; gap:8px 24px;
  align-items:center; padding:14px 0; border-top:1px solid var(--line);
}
.product-teaser strong { font:700 18px var(--heading); }
.product-teaser span { color:var(--muted); }
.product-teaser .status { color:var(--dark); }
.disclaimer {
  max-width:760px; margin:20px 0 0; padding:4px 0 4px 18px;
  border-left:2px solid var(--gold); color:var(--muted); font-size:15px;
}

/* Insights and final call to action */
.insights-state > a {
  display:block; max-width:780px; padding:14px 0; border-top:1px solid var(--line);
  text-decoration:none;
}
.insights-state h3 { margin:0; font:700 19px var(--heading); }
.insights-state p { margin:4px 0; color:var(--muted); font-size:16px; }
/* The closing call to action: a light band before the navy footer. */
.final-cta { border-top:0; background:var(--surface-soft); }
.final-cta p { margin:0 0 22px; font-size:19px; color:var(--muted); }

dialog {
  max-width:460px; padding:36px; border:0; background:var(--cream);
  color:var(--ink); box-shadow:var(--shadow-soft);
}
dialog::backdrop { background:var(--backdrop); }
.dialog-close { float:right; border:0; background:none; font-size:28px; }
.dialog-close + h2 { font:800 28px var(--heading); }
dialog a { font-weight:700; }

@media (max-width:1023px) {
  .needs { grid-template-columns:minmax(0,1fr); }
  .needs > .lv-diagram { grid-column:1; grid-row:auto; margin-top:24px; }
  .doors { grid-template-columns:1fr; gap:28px; }
  .service-grid, .method-steps, .reviews-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .diagnostics { grid-template-columns:1fr; }
}
@media (max-width:767px) {
  .explainer { grid-template-columns:minmax(0,1fr); row-gap:28px; }
  .explainer-copy h2 { margin-bottom:16px; }
  .explainer-pillars { margin-top:22px; column-gap:18px; }
  .explainer-pillars li { padding:12px 0; font-size:16px; }
  .explainer-media { width:100%; max-width:320px; }
  .hero { padding-top:48px; padding-bottom:44px; }
  .hero h1 { font-size:clamp(34px,9.5vw,44px); }
  .service-grid, .needs-list, .operating-model, .method-steps, .proof-intro {
    grid-template-columns:1fr;
  }
  .proof-intro { display:block; margin-bottom:28px; }
  .proof-intro p { margin-top:16px; }
  .product-teaser li { grid-template-columns:1fr; }
  .reviews-grid {
    display:flex; gap:20px; overflow-x:auto; padding:0 0 12px;
    scroll-snap-type:x mandatory; overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }
  .review-card { flex:0 0 86%; scroll-snap-align:start; }
  .hero-actions .button, .cta-actions .button { flex:1 1 220px; justify-content:center; }
}
@keyframes proof-scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .proof-track { animation:none; }
}