/* ==========================================================================
   Wayfinder Partners — website design system
   Derived from _wayfinder-doc-system/styles/workbook.css (print system).
   Palette source of truth: Notion "Wayfinder Brand". Sora + DM Sans only.
   ========================================================================== */

/* ---------- Fonts (embedded, never linked) ---------- */
@font-face { font-family: 'Sora'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../assets/fonts/Sora-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../assets/fonts/Sora-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../assets/fonts/Sora-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('../assets/fonts/Sora-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 100 1000; font-style: normal; font-display: swap;
  src: url('../assets/fonts/DMSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-weight: 100 1000; font-style: normal; font-display: swap;
  src: url('../assets/fonts/DMSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  /* Brand core (Notion: Wayfinder Brand) */
  --navy:    #0A1931;
  --navy-2:  #080F1E;
  --cyan:    #08CCFC;
  --teal:    #00B4A6;
  --blue:    #4A9EFF;
  --violet:  #7C6FFF;

  /* Derived neutrals */
  --ink:     #0A1931;
  --ink-soft:#42506B;
  --ink-faint:#6B7A94;
  --paper:   #FFFFFF;
  --mist:    #F5F8FB;
  --line:    #E2E9F1;
  --line-dark: rgba(255,255,255,.14);

  /* On-dark text */
  --dark-body: #B9C4D6;
  --dark-faint:#8291AB;

  --grad: linear-gradient(90deg, #00B4A6, #08CCFC 45%, #4A9EFF);

  /* Journey accents */
  --j-grow: var(--teal);
  --j-cash: var(--cyan);
  --j-profit: var(--blue);
  --j-exit: var(--violet);

  --font-display: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --w-max: 1240px;
  --w-narrow: 760px;
  --radius: 14px;
  --header-h: 72px;

  --ease-out: cubic-bezier(.22, .61, .21, 1);
  --shadow-card: 0 1px 2px rgba(10,25,49,.04), 0 12px 32px -16px rgba(10,25,49,.18);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: rgba(8, 204, 252, .25); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.14; letter-spacing: -0.015em; font-weight: 700; }

.container { max-width: var(--w-max); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--w-narrow); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

/* ---------- Type components ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}
.on-dark .eyebrow { color: var(--dark-faint); }

.h-display { font-size: clamp(38px, 5.2vw, 62px); font-weight: 800; letter-spacing: -0.025em; }
.h-section { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.02em; }
.h-sub     { font-size: clamp(20px, 2.2vw, 25px); font-weight: 600; }

/* Signature gradient rule (from the workbook) */
.rule {
  width: 56px; height: 4px; border-radius: 2px;
  background: var(--grad);
  margin: 26px 0;
}
.rule--center { margin-left: auto; margin-right: auto; }

.lede { font-size: clamp(18px, 1.6vw, 20px); color: var(--ink-soft); max-width: 620px; }
.on-dark .lede { color: var(--dark-body); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  padding: 17px 28px;
  border-radius: 10px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s;
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .18s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* Primary buttons carry their own waypoint: the arrow rides in a circular chip */
.btn--primary .arrow {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  margin: -4px -8px -4px 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  font-size: 13px;
}
.on-dark .btn--primary .arrow { background: rgba(8,15,30,.16); }

/* Waypoint link: boxless secondary CTA — label + ring-arrow (the one from the tool pages) */
.btn-way {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  padding: 8px 0;
}
.btn-way .ring {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  color: var(--cyan);
  font-size: 15px;
  transition: background .18s, color .18s, transform .18s var(--ease-out);
}
.btn-way:hover .ring { background: var(--cyan); color: var(--navy-2); transform: translateX(3px); }
.on-dark .btn-way { color: #fff; }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { box-shadow: 0 10px 26px -10px rgba(10,25,49,.5); }
.on-dark .btn--primary { background: var(--cyan); color: var(--navy-2); }
.on-dark .btn--primary:hover { box-shadow: 0 10px 30px -8px rgba(8,204,252,.45); }

.btn--ghost { border: 1.5px solid var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink-faint); }
.on-dark .btn--ghost { border-color: var(--line-dark); color: #fff; }
.on-dark .btn--ghost:hover { border-color: rgba(255,255,255,.4); }

.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.link-more .arrow { transition: transform .18s var(--ease-out); }
.link-more:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .25s, border-color .25s;
}
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }
.brand .logo-light { display: none; }

/* Overlay variant (home): transparent over the dark hero until scrolled */
.site-header--overlay:not(.is-scrolled):not(.is-dark) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header--overlay:not(.is-scrolled) .logo-dark { display: none; }
.site-header--overlay:not(.is-scrolled) .logo-light { display: block; }
.site-header--overlay:not(.is-scrolled) .nav-list > li > a { color: rgba(255,255,255,.85); }
.site-header--overlay:not(.is-scrolled) .nav-list > li > a:hover,
.site-header--overlay:not(.is-scrolled) .nav-list > li > a[aria-current="page"] { color: #fff; }
.site-header--overlay:not(.is-scrolled) .btn--nav { background: var(--cyan); color: var(--navy-2); }
.site-header--overlay:not(.is-scrolled) .nav-toggle { color: #fff; }
/* Mid-hero scrim: solid navy strip (no backdrop blur — it traps the mobile
   menu on iOS) so the light links stay legible over hero text. */
.site-header.site-header--overlay.is-dark {
  background: rgba(8, 15, 30, .9);
  border-bottom-color: var(--line-dark);
}

.site-nav { display: flex; align-items: center; gap: 34px; }
.nav-list { display: flex; align-items: center; gap: 30px; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink-soft);
  padding: 8px 0;
  transition: color .16s;
}
.nav-list > li > a:hover { color: var(--ink); }
.nav-list > li > a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* Journeys dropdown */
.has-menu > a::after {
  content: '';
  display: inline-block;
  margin-left: 7px;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.submenu {
  position: absolute;
  top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 50px -18px rgba(10,25,49,.28);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
}
.has-menu:hover .submenu,
.has-menu:focus-within .submenu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.submenu a:hover { background: var(--mist); color: var(--ink); }
.submenu .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.btn--nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 14.5px;
  padding: 12px 20px;
  border-radius: 9px;
  background: var(--navy); color: #fff;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .25s, color .25s;
}
.btn--nav:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(10,25,49,.5); }
.btn--nav .arrow {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin: -3px -7px -3px 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  font-size: 12px;
  transition: transform .18s var(--ease-out);
}
.btn--nav:hover .arrow { transform: translateX(2px); }
.site-header--overlay:not(.is-scrolled) .btn--nav .arrow { background: rgba(8,15,30,.16); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }

/* Mobile nav panel */
@media (max-width: 900px) {
  .brand, .nav-toggle { position: relative; z-index: 2; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + 28px) 28px 40px;
    background: var(--navy-2);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease-out), visibility .22s;
    overflow-y: auto;
  }
  body.nav-open .site-nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header {
    background: var(--navy-2);
    border-bottom-color: var(--line-dark);
    /* The header's backdrop blur makes it the containing block for the
       fixed nav panel on iOS/modern engines, trapping the menu inside the
       72px header. The open menu is solid navy anyway — drop the blur so
       the panel can span the real viewport. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.nav-open .site-header .logo-dark { display: none; }
  body.nav-open .site-header .logo-light { display: block; }
  body.nav-open .nav-toggle { color: #fff; }
  body.nav-open .nav-toggle .icon-open { display: none; }
  body.nav-open .nav-toggle .icon-close { display: block; }

  .nav-list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-list > li { width: 100%; border-bottom: 1px solid var(--line-dark); }
  .nav-list > li > a {
    display: block;
    font-family: var(--font-display);
    font-size: 24px; font-weight: 600;
    color: #fff !important;
    padding: 18px 0;
  }
  .has-menu > a::after { display: none; }
  .submenu {
    position: static;
    transform: none;
    opacity: 1; visibility: visible;
    background: transparent; border: none; box-shadow: none;
    padding: 0 0 14px 2px;
    min-width: 0;
  }
  .submenu a { color: var(--dark-body); padding: 9px 0; font-size: 16.5px; }
  .submenu a:hover { background: transparent; color: #fff; }
  .site-nav > .btn--nav {
    margin-top: 28px;
    width: 100%;
    justify-content: center;
    display: inline-flex;
    background: var(--cyan); color: var(--navy-2);
    padding: 17px 24px; font-size: 16px;
  }
  .site-nav > .btn--nav .arrow { background: rgba(8,15,30,.16); }
  .nav-toggle { display: flex; }
}

/* ---------- Sections ---------- */
main { display: block; }
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section--mist { background: var(--mist); }
.section--dark { background: var(--navy-2); color: #fff; }
.section--tight { padding: clamp(56px, 7vw, 88px) 0; }

.section-head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-left: auto; margin-right: auto; }
.section-head .lede { margin-top: 18px; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  background: var(--navy-2);
  color: #fff;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 65%;
  opacity: .34;
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,15,30,.5) 0%, rgba(8,15,30,.24) 45%, #080F1E 100%);
}
.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(56px, 9vh, 110px));
  padding-bottom: clamp(64px, 9vh, 120px);
}
.hero__copy .lede { margin: 0 0 36px; }
.hero__title { margin-bottom: 8px; }
.grad-word { color: var(--cyan); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__meta {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  font-size: 14px;
  color: var(--dark-faint);
}
.hero__meta strong { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #fff; letter-spacing: 0; }

/* Route chart (hero signature) */
.route-chart { position: relative; }
.route-chart svg { width: 100%; height: auto; overflow: visible; }
.route-path {
  fill: none;
  stroke: rgba(255,255,255,.9);
  stroke-width: 2;
  stroke-dasharray: 7 9;
  stroke-linecap: round;
}
.route-glow { fill: none; stroke: rgba(8,204,252,.35); stroke-width: 6; filter: blur(6px); }
.wp-dot { transition: r .2s var(--ease-out); }

/* Destination pulse: one ring ripples outward every 6.9s */
.pulse-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: destPulse 6.9s cubic-bezier(.2, .6, .35, 1) infinite;
  animation-delay: 2.8s; /* after the route finishes drawing */
}
@keyframes destPulse {
  0%   { transform: scale(.4);  opacity: .7; }
  20%  { transform: scale(3);   opacity: 0; }
  100% { transform: scale(3);   opacity: 0; }
}
.route-chart .start-label, .route-chart .wp-label {
  font-family: var(--font-body);
  fill: #fff;
}
.route-chart .wp-sub { fill: var(--dark-faint); }

@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .route-chart { max-width: 560px; }
}

/* Proof bar (under the home hero) */
.proof-bar { background: #fff; border-bottom: 1px solid var(--line); }
.proof-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 44px;
  padding-top: 30px;
  padding-bottom: 30px;
}
@media (max-width: 980px) { .proof-bar .container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof-bar .container { grid-template-columns: 1fr; } }
.proof-item { display: flex; gap: 14px; align-items: flex-start; }
.proof-icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--pi, var(--cyan));
  background: color-mix(in srgb, var(--pi, var(--cyan)) 11%, transparent);
}
.proof-icon svg { width: 23px; height: 23px; }
.proof-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 1px;
}
.proof-item span { font-size: 13.5px; color: var(--ink-faint); }

/* "Not sure which journey" nudge */
.journey-nudge {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  background: var(--mist);
  border-radius: var(--radius);
  padding: 26px 32px;
}
.journey-nudge p { color: var(--ink-soft); font-size: 16px; max-width: 640px; }
.journey-nudge p strong { color: var(--ink); }
.journey-nudge .link-more { flex: none; }

/* ---------- Journey cards ---------- */
.grid-journeys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1020px) { .grid-journeys { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid-journeys { grid-template-columns: 1fr; } }

.journey-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s;
  overflow: hidden;
}
.journey-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent, var(--cyan));
}
.journey-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}
.journey-card .kicker {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent, var(--cyan));
  margin-bottom: 12px;
}
.journey-card h3 { font-size: 21px; margin-bottom: 10px; }
.journey-card .want { color: var(--ink-soft); font-size: 15.5px; flex: 1; }
.journey-card .owner-q {
  margin: 18px 0 20px;
  padding: 14px 16px;
  background: var(--mist);
  border-left: 3px solid var(--accent, var(--cyan));
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  font-style: italic;
  color: var(--ink-soft);
}
.journey-card .link-more { color: var(--ink); font-size: 14.5px; }
.journey-card .link-more .arrow { color: var(--accent, var(--cyan)); }

.j-grow   { --accent: var(--j-grow); }
.j-cash   { --accent: var(--j-cash); }
.j-profit { --accent: var(--j-profit); }
.j-exit   { --accent: var(--j-exit); }

/* ---------- Method steps ---------- */
.method-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
@media (max-width: 900px) { .method-steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: 8px 34px 8px 0;
}
.step .step-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 22px;
}
.step .marker {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2.5px solid var(--cyan);
  background: #fff;
  flex: none;
}
.step .track-line {
  flex: 1;
  height: 2px;
  background: var(--line);
}
.step:last-child .track-line { background: linear-gradient(90deg, var(--line), transparent); }
.step .n {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--cyan);
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .step { padding: 0 0 34px 34px; }
  .step .step-track {
    position: absolute;
    left: 0; top: 4px; bottom: 0;
    width: 15px;
    flex-direction: column;
    margin: 0;
  }
  .step .track-line { width: 2px; height: auto; flex: 1; margin-top: 6px; }
  .step:last-child { padding-bottom: 0; }
  .step:last-child .track-line { background: linear-gradient(180deg, var(--line), transparent); }
}

/* ---------- Comparison (traditional vs wayfinder) ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.compare .reveal-copy .lede { margin-top: 0; }
@media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }
.compare__col {
  border-radius: var(--radius);
  padding: 36px 34px;
}
.compare__col h3 {
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.compare__col li {
  padding: 15px 0;
  font-size: 16.5px;
  border-top: 1px solid;
}
.compare__col--them {
  background: var(--mist);
  color: var(--ink-faint);
}
.compare__col--them h3 { color: var(--ink-faint); }
.compare__col--them li { border-color: var(--line); }
.compare__col--us {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 24px 60px -24px rgba(10,25,49,.45);
}
.compare__col--us h3 { color: var(--cyan); }
.compare__col--us li { border-color: var(--line-dark); font-weight: 500; }

/* ---------- Toolkit list ---------- */
.toolkit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
}
@media (max-width: 900px) { .toolkit { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .toolkit { grid-template-columns: 1fr; } }
.tool h3 { font-size: 17.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.tool h3::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad);
  flex: none;
}
.tool p { font-size: 15px; color: var(--ink-soft); }

/* Partner badges */
.partners {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 36px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: center;
  justify-content: space-between;
}
.partners .p-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.partners .p-item { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-soft); }
.partners .p-item span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--ink-faint); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--navy-2);
  color: #fff;
  overflow: hidden;
}
.cta-band__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .22;
}
.cta-band__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #080F1E 0%, rgba(8,15,30,.55) 50%, #080F1E 100%);
}
.cta-band .container {
  position: relative;
  text-align: center;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(80px, 10vw, 130px);
  max-width: 780px;
}
.cta-band .eyebrow { justify-content: center; color: var(--cyan); }
.cta-band .eyebrow::before { background: var(--cyan); }
.cta-band h2 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; letter-spacing: -0.02em; }
.cta-band p { margin: 22px auto 36px; max-width: 560px; color: var(--dark-body); font-size: 18px; }
.cta-band .fine { margin-top: 18px; font-size: 14px; color: var(--dark-faint); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding: calc(var(--header-h) + clamp(56px, 8vw, 96px)) 0 clamp(48px, 6vw, 80px);
}
.page-hero--accent { border-bottom: 1px solid var(--line); }
.page-hero .lede { margin-top: 22px; }

/* ---------- Journey page components ---------- */
.want-strip {
  background: var(--mist);
  border-radius: var(--radius);
  padding: 34px 38px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  border-left: 4px solid var(--accent, var(--cyan));
}
@media (max-width: 640px) { .want-strip { grid-template-columns: 1fr; gap: 10px; padding: 28px 26px; } }
.want-strip .k {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.want-strip .v { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); font-weight: 600; }

.q-list { display: grid; gap: 14px; max-width: 720px; }
.q-item {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 16.5px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.q-item:hover { transform: translateX(4px); box-shadow: var(--shadow-card); }
.q-item .qmark {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent, var(--cyan));
  flex: none;
}

/* Constraint cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.plain-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.plain-card h3 { font-size: 18px; margin-bottom: 10px; }
.plain-card p { font-size: 15px; color: var(--ink-soft); }
.section--mist .plain-card { border-color: transparent; box-shadow: 0 1px 2px rgba(10,25,49,.05); }

/* Callout — names locked: Navigator Insight / Common Detour / Decision Point / Waypoint Check */
.callout {
  border-left: 4px solid var(--cyan);
  background: var(--mist);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 30px;
  max-width: 780px;
}
.callout .c-name {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}
.callout--detour { border-left-color: #E8A33D; }
.callout--detour .c-name { color: #C4841D; }
.callout p { color: var(--ink-soft); font-size: 16px; }

/* Tool feature (journey page → planning tool) */
.tool-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 860px) { .tool-feature { grid-template-columns: 1fr; } }
.tool-feature__visual {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(10,25,49,.5);
}
.tool-feature__visual img { width: 100%; }
.tool-feature .facts {
  display: flex;
  gap: 34px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.tool-feature .facts strong { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--cyan); }
.tool-feature .facts span { font-size: 13.5px; color: var(--ink-faint); }
.tool-feature .facts .fact--ink strong { color: var(--ink); }

/* ---------- About page ---------- */
.ahero {
  position: relative;
  background: var(--navy-2);
  color: #fff;
  overflow: hidden;
}
.ahero .container {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 104px));
  padding-bottom: clamp(56px, 8vw, 104px);
  min-height: clamp(480px, 56vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ahero__copy { max-width: 580px; }
.ahero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 64%;
  background-size: cover;
  /* keep the subject's head in frame at every aspect ratio */
  background-position: 72% 8%;
}
.ahero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #080F1E 0%, rgba(8,15,30,.86) 22%, rgba(8,15,30,.28) 52%, rgba(8,15,30,.12) 74%, rgba(8,15,30,.42) 100%),
    linear-gradient(0deg, rgba(8,15,30,.85) 0%, rgba(8,15,30,0) 34%),
    linear-gradient(180deg, rgba(8,15,30,.55) 0%, rgba(8,15,30,0) 22%);
}
@media (max-width: 860px) {
  .ahero-bg { width: 100%; opacity: .38; }
  .ahero-bg::after {
    background: linear-gradient(180deg, rgba(8,15,30,.6) 0%, rgba(8,15,30,.25) 45%, #080F1E 100%);
  }
}
.ahero-cap {
  position: absolute;
  right: 24px; bottom: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(8,15,30,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 99px;
}
.ahero-cap .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.reach-panel {
  background: var(--mist);
  border-radius: var(--radius);
  padding: 24px;
}
.reach-panel svg { width: 100%; height: auto; overflow: visible; }
.reach-panel .rc-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  fill: var(--ink-faint);
}
.plain-card .proof-icon { margin-bottom: 14px; }

/* ---------- Services ---------- */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
}
.svc-list .svc:first-child { border-top: none; padding-top: 0; }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; gap: 20px; } }
.svc .kicker {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.svc h3 { font-size: clamp(22px, 2.4vw, 27px); margin-bottom: 12px; }
.svc .who { color: var(--ink-soft); font-size: 16px; max-width: 440px; }
.svc-incl li {
  display: flex;
  gap: 13px;
  padding: 10px 0;
  font-size: 16px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.svc-incl li:last-child { border-bottom: none; }
.svc-incl li::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad);
  flex: none;
  margin-top: 8px;
}

/* ---------- Resources ---------- */
.grid-resources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 860px) { .grid-resources { grid-template-columns: 1fr; } }
.res-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: #fff;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
  overflow: hidden;
}
.res-card__body {
  padding: 24px 30px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Card media: the artifact itself */
.res-media {
  margin-top: 4px; /* sits below the accent bar */
  height: 216px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent, var(--cyan)) 8%, var(--mist));
  border-bottom: 1px solid var(--line);
}
.res-media--cover img {
  height: 176px;
  width: auto;
  border-radius: 5px;
  box-shadow: 0 18px 40px -12px rgba(10,25,49,.4);
  transform: rotate(-2.5deg);
  transition: transform .35s var(--ease-out);
}
a.res-card:hover .res-media--cover img { transform: rotate(-1deg) scale(1.04); }
.res-media--screen img {
  width: 82%;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px -14px rgba(10,25,49,.35);
  transform: translateY(18%);
  transition: transform .35s var(--ease-out);
}
a.res-card:hover .res-media--screen img { transform: translateY(10%); }
.res-media--soon {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 75%);
  border-bottom: none;
}
.res-media--soon .rm { text-align: center; padding: 0 24px; }
.res-media--soon .rm-kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dark-faint);
  margin-bottom: 10px;
}
.res-media--soon .rm-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.01em;
}
.res-media--soon .rm-name em { font-style: normal; color: var(--accent, var(--cyan)); }
.res-media--soon .rule { margin: 16px auto 0; }
.res-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent, var(--cyan));
}

/* "Start here" feature card — spans the grid; media matches the sibling
   tiles: a framed screenshot floating in the accent-tinted band */
.res-card--start { grid-column: 1 / -1; flex-direction: row; }
.res-card--start .res-media--panel {
  width: 52%;
  flex: none;
  height: 320px;
  min-height: 0;
  margin-top: 4px;
  border-bottom: none;
  border-right: 1px solid var(--line);
  display: grid;
  place-items: start center;
  overflow: hidden;
  padding: 26px 0 0;
}
/* The checkup preview is wrapped in <picture> (mobile crop swap); make the
   wrapper layout-transparent so the panel's centering reaches the img. */
.res-card--start .res-media--panel picture { display: contents; }
.res-card--start .res-media--panel img {
  width: 84%;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px -14px rgba(10,25,49,.35);
  transform: translateY(0);
  transition: transform .35s var(--ease-out);
}
a.res-card--start:hover .res-media--panel img { transform: translateY(-12%); }
.res-card--start .res-card__body { padding: 30px 34px 32px; justify-content: center; }
@media (max-width: 860px) {
  .res-card--start { flex-direction: column; }
  .res-card--start .res-media--panel {
    width: 100%;
    min-height: 0;
    height: 216px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0;
    place-items: center;
  }
  .res-card--start .res-media--panel img { width: 88%; transform: none; }
  a.res-card--start:hover .res-media--panel img { transform: none; }
}
a.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

/* Tool-page FAQ ("Good to know") — crawlable Q&A for search engines and AI
   assistants; every question here must also exist in the page's FAQPage
   JSON-LD, and vice versa. */
.tfaq-list { margin-top: 6px; }
.tfaq-item { border-top: 1px solid var(--line); padding: 20px 0; }
.tfaq-list .tfaq-item:first-child { border-top: none; padding-top: 0; }
.tfaq-item h3 { font-size: 17px; margin-bottom: 8px; }
.tfaq-item p { color: var(--ink-soft); font-size: 15.5px; max-width: 680px; }
.res-card .kicker {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent, var(--cyan));
  margin-bottom: 14px;
}
.res-card h3 { font-size: 22px; margin-bottom: 10px; }
.res-card p { color: var(--ink-soft); font-size: 15.5px; flex: 1; }
.res-card .link-more { margin-top: 22px; }
.res-card--soon { background: transparent; }
.res-card--soon::before { opacity: .35; }
.res-card--soon h3 { color: var(--ink-soft); }
.badge-soon {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 10px;
  background: #fff;
}

/* ---------- Lead form ---------- */
.gate {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 36px;
  box-shadow: var(--shadow-card);
}
@media (max-width: 560px) { .gate { padding: 30px 24px; } }
.gate h3 { font-size: 21px; margin-bottom: 6px; }
.gate .gate-heading { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-bottom: 6px; color: var(--ink); }
.gate .sub { font-size: 15px; color: var(--ink-soft); margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13.5px; font-weight: 700;
  margin-bottom: 8px;
}
.field input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--mist);
  color: var(--ink);
  transition: border-color .16s, background .16s;
}
.field input:focus { outline: none; border-color: var(--cyan); background: #fff; }
.gate .btn { width: 100%; justify-content: center; margin-top: 6px; }
.gate .privacy { margin-top: 16px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.gate__success { text-align: center; padding: 20px 0 8px; }
.gate__success .tick {
  width: 52px; height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(0,180,166,.12);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.gate [hidden] { display: none !important; }

/* ---------- Booking page ---------- */
.book-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .book-layout { grid-template-columns: 1fr; } }
.book-expect li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-soft);
}
.book-expect li:last-child { border-bottom: none; }
.book-expect .t { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--cyan); flex: none; width: 52px; padding-top: 3px; }
.book-expect strong { color: var(--ink); font-weight: 700; }
.calendly-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #fff;
  min-height: 700px;
}
.calendly-inline-widget { min-width: 280px; height: 700px; }
.book-fallback { margin-top: 18px; font-size: 14.5px; color: var(--ink-faint); text-align: center; }
.book-fallback a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--cyan); }

/* ---------- Story / about ---------- */
.prose { max-width: var(--w-narrow); }
.prose p { margin-bottom: 22px; color: var(--ink-soft); font-size: 17.5px; }
.prose p strong { color: var(--ink); }
.place-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.place-strip .pin { color: var(--cyan); flex: none; }
.place-strip strong { font-family: var(--font-display); display: block; font-size: 17px; }
.place-strip span { font-size: 14.5px; color: var(--ink-faint); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-2);
  color: var(--dark-body);
  padding: clamp(56px, 7vw, 80px) 0 36px;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-dark);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand img { height: 32px; }
.footer-about p { margin: 20px 0; max-width: 300px; color: var(--dark-faint); }
.footer-about a { color: var(--dark-body); }
.footer-about a:hover { color: #fff; }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark-faint);
  margin-bottom: 18px;
}
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: var(--dark-body); transition: color .16s; font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 13.5px;
  color: var(--dark-faint);
}
.footer-base a { color: var(--dark-faint); }
.footer-base a:hover { color: #fff; }

/* ---------- Method hero (approach page) ---------- */
.method-hero {
  position: relative;
  background: var(--navy-2);
  color: #fff;
  overflow: hidden;
}
/* Water: two scales of ripple lines, denser toward the wave, drifting slowly */
.method-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='32' viewBox='0 0 260 32'%3E%3Cpath d='M0 16 Q32.5 4 65 16 T130 16 T195 16 T260 16' fill='none' stroke='%2308CCFC' stroke-opacity='.09' stroke-width='1.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='32' viewBox='0 0 260 32'%3E%3Cpath d='M0 16 Q32.5 4 65 16 T130 16 T195 16 T260 16' fill='none' stroke='%234A9EFF' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 260px 64px, 340px 84px;
  background-position: 0 0, 130px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.3) 40%, #000 92%);
  mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.3) 40%, #000 92%);
  animation: rippleDrift 70s linear infinite;
  pointer-events: none;
}
@keyframes rippleDrift {
  from { background-position: 0 0, 130px 26px; }
  to   { background-position: 260px 0, 470px 26px; }
}
/* Faint glow behind the crest */
.method-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(560px 380px at 76% 52%, rgba(8,204,252,.08), transparent 68%);
  pointer-events: none;
}
.method-hero .container {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 88px));
  padding-bottom: 0;
}
.method-route svg { vertical-align: bottom; margin-bottom: -2px; }
/* Negative top margin tucks the graphic's empty "sky" up beside the lede —
   the crest labels live in the top-right, clear of the left-aligned copy. */
.method-route { margin-top: clamp(-64px, -4vw, -16px); }
.method-route svg { width: 100%; height: auto; overflow: visible; }
.method-route .wp-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  fill: #fff;
}
.method-route .wp-num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  fill: var(--cyan);
}
/* Dark halo keeps labels legible when they sit over the water */
.method-route text {
  paint-order: stroke fill;
  stroke: rgba(6, 13, 26, .6);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
@media (max-width: 720px) { .method-route { display: none; } }
.method-route .wave-back { animation: waveDrift 18s ease-in-out infinite alternate; }
.method-route .wave-front { animation: waveDrift 26s ease-in-out infinite alternate-reverse; }
@keyframes waveDrift {
  from { transform: translateX(-16px); }
  to   { transform: translateX(16px); }
}

/* ---------- Statement moment ---------- */
.statement { max-width: 880px; }
.statement__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.statement__text .u-grad {
  background-image: var(--grad);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 96%;
  padding-bottom: 4px;
}
.statement__sub {
  margin-top: 20px;
  font-size: 17.5px;
  color: var(--ink-soft);
}

/* ---------- Move cards (approach page) ---------- */
.moves-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 980px;
}
@media (max-width: 700px) { .moves-grid { grid-template-columns: 1fr; } }
.move-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px 32px;
  overflow: hidden;
}
.move-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}
.move-card .mn {
  position: absolute;
  top: 20px; right: 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 62px;
  line-height: 1;
  color: var(--cyan);
  opacity: .14;
  pointer-events: none;
}
.move-card h3 { font-size: 20px; margin-bottom: 10px; padding-right: 76px; }
.move-card p { font-size: 15.5px; color: var(--ink-soft); }

/* ---------- Vertical route stepper ---------- */
.route-steps { position: relative; max-width: 720px; }
.route-steps::before {
  content: '';
  position: absolute;
  left: 17px; top: 10px; bottom: 10px;
  border-left: 2px dashed var(--line);
}
.rstep { position: relative; padding: 0 0 38px 66px; }
.rstep:last-child { padding-bottom: 0; }
.rstep .dot {
  position: absolute;
  left: 8px; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--cyan);
}
.rstep--end .dot {
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(8, 204, 252, .16);
}
.rstep .stage {
  font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}
.rstep h3 { font-size: 19px; margin-bottom: 8px; }
.rstep p { color: var(--ink-soft); font-size: 15.5px; max-width: 560px; }

/* ---------- Journey hero ---------- */
.jhero {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.jhero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 420px at 82% 8%,
    color-mix(in srgb, var(--accent, var(--cyan)) 11%, transparent), transparent 72%);
  pointer-events: none;
}
.jhero .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 88px));
  padding-bottom: clamp(44px, 6vw, 72px);
}
@media (max-width: 860px) {
  .jhero .container { grid-template-columns: 1fr; }
  .jhero .route-chart { max-width: 440px; }
}
.jhero .route-chart svg .jr-path {
  fill: none;
  stroke: var(--accent, var(--cyan));
  stroke-width: 2;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
  opacity: .85;
}
.jhero .route-chart .jr-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  fill: var(--ink-faint);
}

/* ---------- Tool mock panel (tools in development) ---------- */
.tool-mock {
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 70%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px -30px rgba(10,25,49,.5);
  padding: clamp(32px, 4vw, 48px);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.tool-mock .tm-brand { display: flex; align-items: center; gap: 10px; }
.tool-mock .tm-brand img { height: 30px; width: auto; }
.tool-mock .tm-mid .tm-kicker {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dark-faint);
  margin-bottom: 14px;
}
.tool-mock .tm-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12;
  color: #fff;
  letter-spacing: -0.02em;
}
.tool-mock .tm-title em {
  font-style: normal;
  color: var(--accent, var(--cyan));
}
.tool-mock .rule { margin: 22px 0 0; }
.tool-mock .tm-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark-faint);
}
.tool-mock .tm-foot .badge-soon {
  background: transparent;
  border-color: rgba(255,255,255,.22);
  color: var(--dark-body);
}

/* ---------- Accent-topped cards & journey switcher ---------- */
.plain-card--accent { position: relative; overflow: hidden; }
.plain-card--accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--cyan));
}
.j-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) { .j-switch { grid-template-columns: 1fr; } }
.j-switch a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.j-switch a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.j-switch .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.j-switch .label { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.j-switch .arrow { margin-left: auto; color: var(--ink-faint); transition: transform .18s var(--ease-out); }
.j-switch a:hover .arrow { transform: translateX(3px); }

/* ---------- Page transitions ---------- */
/* Cross-document crossfade on same-origin navigation (Chrome/Edge/Safari;
   Firefox falls back to the pageFade below). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* The header crossfades on its own, faster — it reads as persistent chrome. */
.site-header { view-transition-name: site-header; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation-duration: .2s; }

@supports not (view-transition-name: root) {
  body { animation: pageFade .4s ease; }
}
@keyframes pageFade { from { opacity: 0; } }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal-group.in > * { opacity: 1; transform: none; }
.reveal-group.in > *:nth-child(2) { transition-delay: .08s; }
.reveal-group.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-group.in > *:nth-child(4) { transition-delay: .24s; }
.reveal-group.in > *:nth-child(5) { transition-delay: .32s; }
.reveal-group.in > *:nth-child(6) { transition-delay: .40s; }

/* Hero load sequence */
[data-rise] {
  opacity: 0;
  transform: translateY(26px);
  animation: rise .8s var(--ease-out) forwards;
}
[data-rise="1"] { animation-delay: .05s; }
[data-rise="2"] { animation-delay: .18s; }
[data-rise="3"] { animation-delay: .31s; }
[data-rise="4"] { animation-delay: .44s; }
[data-rise="5"] { animation-delay: .57s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-group > * { opacity: 1; transform: none; transition: none; }
  [data-rise] { animation: none; opacity: 1; transform: none; }
  .route-path, .route-glow { animation: none !important; stroke-dashoffset: 0 !important; }
  .pulse-ring { animation: none; opacity: 0; }
  .method-route .wave-back, .method-route .wave-front { animation: none; }
  body { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none !important; }
  .method-hero::before { animation: none; }
  .btn, .journey-card, .q-item, .dest-chip, a.res-card { transition: none; }
}

/* ==========================================================================
   Homepage v2 (2026-08: Problem → Promise → Proof structure)
   ========================================================================== */

/* Photo-forward hero: single copy column, atmospheric image weighted right */
.hero--photo .container { grid-template-columns: minmax(0, 1fr); }
.hero--photo .hero__copy { max-width: 640px; }
.hero--photo .hero__bg { opacity: 1; background-position: 74% 58%; }
.hero--photo .hero__bg::after {
  background:
    linear-gradient(90deg, #080F1E 4%, rgba(8,15,30,.93) 32%, rgba(8,15,30,.52) 62%, rgba(8,15,30,.22) 100%),
    linear-gradient(0deg, #080F1E 0%, rgba(8,15,30,0) 30%);
}
.hero__fine { margin-top: 18px; font-size: 14px; color: var(--dark-faint); }
@media (max-width: 860px) {
  .hero--photo .hero__bg { background-position: 60% 55%; }
  .hero--photo .hero__bg::after {
    background: linear-gradient(180deg, rgba(8,15,30,.84), rgba(8,15,30,.7) 55%, #080F1E 100%);
  }
}

/* Tension — the recognition section */
.tension-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 6px 28px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
  max-width: 820px;
}
.tension-list .tension-row:first-child { border-top: none; padding-top: 0; }
.tension-row .is { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.9vw, 21px); }
.tension-row .but { color: var(--ink-soft); font-size: clamp(15.5px, 1.7vw, 18px); }
.tension-close { margin-top: 34px; max-width: 760px; font-size: clamp(16.5px, 1.8vw, 19px); color: var(--ink-soft); }
.tension-close strong { color: var(--ink); }
@media (max-width: 620px) { .tension-row { grid-template-columns: 1fr; padding: 14px 0; } }

/* Journeys: dashed route thread behind the four cards */
.grid-journeys--route { position: relative; }
.grid-journeys--route::before {
  content: '';
  position: absolute; left: 3%; right: 3%; top: 40px;
  border-top: 2px dashed rgba(107,122,148,.35);
}
@media (max-width: 1020px) { .grid-journeys--route::before { display: none; } }

/* Tools showcase (dark) */
.tool-show { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .tool-show { grid-template-columns: 1fr; } }
.ts-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s var(--ease-out), border-color .25s;
}
a.ts-card:hover { transform: translateY(-4px); border-color: rgba(8,204,252,.45); }
.ts-card__media { background: #0D1830; border-bottom: 1px solid var(--line-dark); }
.ts-card__media img { width: 100%; height: 200px; object-fit: cover; object-position: center top; }
.ts-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; align-items: flex-start; }
.ts-card__body h3 { color: #fff; font-size: 18px; }
.ts-card__body p { color: var(--dark-body); font-size: 15px; flex: 1; }
.ts-time {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--tsc, var(--cyan));
}
.ts-card .link-more { color: #fff; }
.ts-card .link-more .arrow { color: var(--tsc, var(--cyan)); }

/* Team / proof */
.team {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } .team__photo { max-width: 440px; } }
.team__photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.team__photo img { width: 100%; aspect-ratio: 4 / 4.5; object-fit: cover; object-position: 72% 8%; display: block; }
.team__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(205deg, rgba(8,204,252,0) 58%, rgba(10,25,49,.38));
}
.team-points { margin: 24px 0 28px; display: grid; gap: 13px; }
.team-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink-soft); }
.team-points .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--tp, var(--cyan)); }

/* Capability pillars */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  border-top: 3px solid var(--pc, var(--cyan));
}
.pillar .p-ic {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--pc, var(--cyan)) 12%, #fff);
  color: var(--pc, var(--cyan));
  margin-bottom: 16px;
}
.pillar .p-ic svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 18.5px; margin-bottom: 8px; }
.pillar p { color: var(--ink-soft); font-size: 15.5px; }

/* Compact dark hero for interior pages (resources) */
.hero--compact .container {
  padding-top: calc(var(--header-h) + clamp(40px, 6vh, 72px));
  padding-bottom: clamp(40px, 6vh, 70px);
}
.hero--compact .route-chart { max-width: 470px; justify-self: end; }
@media (max-width: 980px) { .hero--compact .route-chart { display: none; } }
.section--dark { background: var(--navy-2); color: #fff; }
.section--dark h2 { color: #fff; }

/* Sea hero: abstract depth contours instead of photography */
.hero--sea { background: linear-gradient(180deg, #0A1931 0%, #080F1E 78%); }
.hero--sea .container { grid-template-columns: minmax(0, 1fr); }
.hero--sea .hero__copy { max-width: 640px; }
.hero__sea { position: absolute; inset: 0; }
.hero__sea svg { width: 100%; height: 100%; display: block; }

/* Navigator hero: human in frame over the contour field */
.hero--nav .container { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(36px, 5vw, 72px); }
.hero--nav .hero__copy { max-width: 600px; }
.hero__person {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 34px 80px -34px rgba(0,0,0,.65);
}
.hero__person img { display: block; width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; }
.hero__person figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 20px 15px;
  font-size: 13.5px;
  color: #DCE5F2;
  background: linear-gradient(180deg, rgba(8,15,30,0), rgba(8,15,30,.86) 62%);
}
@media (max-width: 980px) {
  .hero--nav .container { grid-template-columns: 1fr; }
  .hero__person { max-width: 520px; }
}
.hero--nav .hero__title { font-size: clamp(36px, 4.4vw, 56px); }
.hero--nav .container { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); }
.hero--nav .hero__copy { max-width: 660px; }

/* Light variant of the tools showcase */
.tool-show--light .ts-card { background: #fff; border-color: var(--line); }
a.tool-show--light .ts-card:hover, .tool-show--light a.ts-card:hover { border-color: rgba(8,204,252,.6); box-shadow: var(--shadow-card); }
.tool-show--light .ts-card__media { background: var(--mist); border-color: var(--line); }
.tool-show--light .ts-card__body h3 { color: var(--ink); }
.tool-show--light .ts-card__body p { color: var(--ink-soft); }
.tool-show--light .ts-card .link-more { color: var(--ink); }

/* Partnerships & memberships strip */
.logo-strip { background: #fff; border-top: 1px solid var(--line); padding: clamp(34px, 4vw, 52px) 0; }
.ls-label {
  text-align: center; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 24px;
}
.ls-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 56px; }
.ls-item { text-align: center; }
.ls-item strong { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink-soft); }
.ls-item span { font-size: 12.5px; color: var(--ink-faint); }
.hero--photo .hero__copy { max-width: 700px; }
.hero--photo .hero__title { font-size: clamp(36px, 4.5vw, 57px); }

/* Hero video: mirrored loop under the same gradient as the poster */
.hero--video .hero__bg video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero--video .hero__bg video.is-playing { opacity: 1; }
.hero--video .hero__bg::after { z-index: 2; }
.ls-item img { height: 30px; width: auto; display: block; margin: 0 auto 8px; filter: grayscale(1); opacity: .72; transition: filter .25s, opacity .25s; }
.ls-item:hover img { filter: none; opacity: 1; }
.hero--video .container { z-index: 3; }

/* Brand colorizer: a hue-imposing gradient between the hero media and the
   legibility gradient, so any photo or video reads in brand tones. */
.hero--photo .hero__bg::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, #0A1931 0%, #0D3A4A 42%, #14406B 100%);
  mix-blend-mode: color;
  opacity: .88;
}
.hero--photo .hero__bg::after { z-index: 3; }
.hero--video .container, .hero--photo .container { z-index: 4; }
/* Life under the colorizer: lift the media, ease the wash, add horizon bloom */
.hero--photo .hero__bg { filter: contrast(1.1) brightness(1.16) saturate(1.05); }
.hero--photo .hero__bg::before { opacity: .66; }
.hero--photo .hero__bg::after {
  background:
    radial-gradient(58% 70% at 76% 32%, rgba(8,204,252,.17), rgba(8,204,252,0) 70%),
    linear-gradient(90deg, #080F1E 4%, rgba(8,15,30,.88) 30%, rgba(8,15,30,.42) 62%, rgba(8,15,30,.12) 100%),
    linear-gradient(0deg, #080F1E 0%, rgba(8,15,30,0) 28%);
}
/* Overlay, take 3: neutral dark gradient shade (hero-generator style),
   colorizer reduced to a gentle unifier rather than a blue wash */
.hero--photo .hero__bg { filter: contrast(1.07) brightness(1.1) saturate(.92); }
.hero--photo .hero__bg::before {
  background: linear-gradient(115deg, #101823 0%, #14303A 60%, #17394A 100%);
  opacity: .38;
}
.hero--photo .hero__bg::after {
  background:
    radial-gradient(56% 68% at 76% 32%, rgba(8,204,252,.09), rgba(8,204,252,0) 70%),
    linear-gradient(90deg, rgba(9,13,20,.97) 6%, rgba(9,13,20,.82) 32%, rgba(9,13,20,.38) 64%, rgba(9,13,20,.10) 100%),
    linear-gradient(0deg, #080F1E 0%, rgba(8,15,30,0) 26%);
}
/* Overlay, final: even neutral veil (mintwint-style) — footage keeps its
   character; darkness carries legibility, hue-unifier barely-there */
.hero--photo .hero__bg { filter: contrast(1.05) brightness(1.06) saturate(1); }
.hero--photo .hero__bg::before {
  background: linear-gradient(115deg, #111A26 0%, #143038 100%);
  opacity: .18;
}
.hero--photo .hero__bg::after {
  background:
    linear-gradient(90deg, rgba(9,12,18,.66) 8%, rgba(9,12,18,.5) 38%, rgba(9,12,18,.32) 70%, rgba(9,12,18,.28) 100%),
    linear-gradient(0deg, rgba(8,15,30,.9) 0%, rgba(8,15,30,0) 22%);
}
/* Slower, smoother crossfade; navigator clip framed with subject right */
.hero--video .hero__bg video { transition: opacity 1.9s ease-in-out; }
.hero--video .hero__bg video.v-shift { transform: translateX(9%) scaleX(-1.22) scaleY(1.22); }
/* Deeper left band so copy stays readable over the brightest clips */
.hero--photo .hero__bg::after {
  background:
    linear-gradient(90deg, rgba(8,11,17,.86) 10%, rgba(8,11,17,.68) 40%, rgba(9,12,18,.34) 68%, rgba(9,12,18,.24) 100%),
    linear-gradient(0deg, rgba(8,15,30,.9) 0%, rgba(8,15,30,0) 24%);
}

/* Resources hero: still image under a deep shade, chart rides on top */
.hero--charted .hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 42%;
  opacity: 1;
  filter: saturate(.85);
}
.hero--charted .hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.68) 46%, rgba(0,0,0,.52) 100%),
    linear-gradient(0deg, #080F1E 0%, rgba(0,0,0,.08) 32%);
}
.hero--charted .container { position: relative; z-index: 2; }
.hero--compact .route-chart { width: 100%; max-width: 620px; }
.hero--compact .container { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
@media (max-width: 980px) { .hero--compact .container { grid-template-columns: 1fr; } }

/* Hero copy hierarchy (2026-08 refinement): H1 > subhead > services > CTAs */
.hero__sub { margin: 0 0 16px; }
.hero__services {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--dark-body);
  margin: 0 0 34px;
}
.hero__actions { align-items: flex-start; }
.hero__cta2 { display: flex; flex-direction: column; gap: 8px; }
.hero__micro { font-size: 12.5px; color: var(--dark-faint); padding-left: 4px; }
@media (max-width: 560px) {
  .hero--photo .hero__title { font-size: clamp(27px, 7.6vw, 34px); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .hero__cta2 { width: 100%; }
}
/* Service descriptor: journey-colored waypoint dots */
.hero__services { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.svc-tag { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.svc-tag::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sc, var(--cyan));
  box-shadow: 0 0 9px color-mix(in srgb, var(--sc, var(--cyan)) 65%, transparent);
}

/* Consent banner (only appears once LinkedIn measurement is configured) */
#wf-consent {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 200;
  margin: 0 auto; max-width: 620px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(13, 26, 46, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: 0 14px 40px -16px rgba(0,0,0,.6);
  animation: wfcUp .45s cubic-bezier(.22,.61,.21,1);
}
@keyframes wfcUp { from { opacity: 0; transform: translateY(16px); } }
#wf-consent p { flex: 1 1 240px; color: var(--dark-body); font-size: 13px; line-height: 1.45; margin: 0; }
#wf-consent a { color: var(--cyan); }
.wfc-actions { display: flex; gap: 8px; }
.wfc-actions button {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.wfc-accept { background: var(--cyan); color: var(--navy-2); border: none; }
.wfc-decline { background: none; border: 1px solid var(--line-dark); color: var(--dark-body); }
@media (prefers-reduced-motion: reduce) { #wf-consent { animation: none; } }

/* Pain grid: the "that's me" section under the hero */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 0;
  margin-top: 10px;
}
.pain { text-align: center; padding: 0 26px; }
.pain + .pain { border-left: 1px solid var(--line); }
.pain .p-icon { display: block; width: 52px; height: 52px; margin: 0 auto 16px; color: var(--pc, var(--cyan)); }
.pain .p-icon svg { width: 100%; height: 100%; }
.pain h3 { font-size: 17.5px; line-height: 1.4; margin-bottom: 8px; max-width: 240px; margin-left: auto; margin-right: auto; }
.pain p { font-size: 14.5px; color: var(--ink-faint); max-width: 230px; margin: 0 auto; }
@media (max-width: 980px) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .pain:nth-child(3) { border-left: none; }
}
@media (max-width: 560px) {
  .pain-grid { grid-template-columns: 1fr; }
  .pain + .pain { border-left: none; border-top: 1px solid var(--line); padding-top: 26px; }
}

/* Tension band v2: tighter, and the four pains ride one dashed route */
.tension-band { padding: clamp(36px, 4.5vw, 56px) 0 clamp(40px, 4.5vw, 60px); }
.pain-grid { position: relative; }
.pain-grid::before {
  content: '';
  position: absolute; top: 32px; left: 7%; right: 7%;
  border-top: 2px dashed rgba(107,122,148,.4);
}
.pain { position: relative; }
.pain + .pain { border-left: none; }
.pain .p-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--pc, var(--cyan)) 12%, #fff);
  box-shadow: 0 0 0 6px #fff;
  margin: 0 auto 14px;
}
.pain .p-icon svg { width: 30px; height: 30px; }
.tension-close { margin-top: 26px; }
@media (max-width: 980px) { .pain-grid::before { display: none; } }

/* Tension band v3: split layout — argument left, four pains right */
.t-split {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.45fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.t-lead h2 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.015em; }
.t-lead .t-q { color: var(--cyan); }
.t-lead .t-sub { margin-top: 16px; color: var(--ink-soft); font-size: 16px; max-width: 400px; }
.pain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; margin-top: 0; }
.pain-grid::before { display: none; }
.pain { display: flex; gap: 14px; text-align: left; padding: 0; align-items: flex-start; }
.pain .p-icon { flex: none; width: 46px; height: 46px; margin: 0; box-shadow: none; }
.pain .p-icon svg { width: 23px; height: 23px; }
.pain h3 { font-size: 15.5px; line-height: 1.35; margin-bottom: 5px; max-width: none; }
.pain p { font-size: 13.5px; color: var(--ink-faint); max-width: none; margin: 0; }
@media (max-width: 900px) {
  .t-split { grid-template-columns: 1fr; }
  .pain-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   Tension band v4 (council synthesis): straddling card + divergence chart
   ========================================================================== */
.tension-band { background: var(--mist); padding: 0 0 clamp(44px, 5vw, 64px); }
.t-card {
  position: relative; z-index: 5;
  margin-top: -76px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(30px, 4vw, 52px) clamp(26px, 4vw, 56px);
  box-shadow: 0 30px 70px -30px rgba(10,25,49,.35);
}
.t-lead .link-more { margin-top: 20px; }
.t-chart svg { width: 100%; height: auto; display: block; }
.tc-cap { font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.tc-cap-teal { fill: var(--teal); }
.tc-cap-cyan { fill: var(--cyan); }
.tc-cap-blue { fill: var(--blue); font-size: 11px; letter-spacing: 2px; }
.tc-note { font-size: 12px; fill: var(--ink-faint); }
.tc-note-vio { fill: var(--violet); }

/* Draw-on-arrival: lines sweep, callouts fade, when the reveal system fires */
.tc-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal-group.in .tc-line { transition: stroke-dashoffset 1.5s cubic-bezier(.45,.05,.35,1) .25s; stroke-dashoffset: 0; }
.reveal-group.in .tc-cash { transition-delay: .55s; }
.tc-gap, .tc-callout, .tc-today, .tc-hub,
svg .tc-cap-blue, .t-chart .tc-note { opacity: 0; }
.reveal-group.in .tc-gap { transition: opacity 1s ease 1.6s; opacity: 1; }
.reveal-group.in .tc-callout { transition: opacity .6s ease; opacity: 1; }
.reveal-group.in .tc-c1 { transition-delay: 1.5s; }
.reveal-group.in .tc-c2 { transition-delay: 1.8s; }
.reveal-group.in .tc-c3 { transition-delay: 2.1s; }
.reveal-group.in .tc-today, .reveal-group.in svg .tc-cap-blue { transition: opacity .6s ease 2.3s; opacity: 1; }
.reveal-group.in .tc-hub { transition: opacity .7s ease 2.5s; opacity: 1; }
.reveal-group.in .t-chart .tc-note { transition: opacity .6s ease 2.2s; opacity: 1; }

/* Proof bar goes navy: the page keeps its dark register after fold one */
.proof-bar { position: relative; background: var(--navy); border-bottom: none; }
.proof-bar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad);
}
.proof-item strong { color: #fff; }
.proof-item span { color: var(--dark-faint); }
.proof-icon { background: rgba(255,255,255,.08) !important; }
@media (max-width: 900px) {
  .t-card { margin-top: -48px; }
}

/* ==========================================================================
   Homepage v5: photo journey cards, navigator-method merge, Let's talk
   ========================================================================== */

/* 2. Trust strip: bigger gradient-badged icons */
.proof-icon {
  width: 52px !important; height: 52px !important;
  border-radius: 14px;
  background: var(--grad) !important;
  color: var(--navy-2) !important;
  box-shadow: 0 8px 20px -8px rgba(8,204,252,.5);
}
.proof-icon svg { width: 26px; height: 26px; }

/* 3. Journeys: photo cards on a ghosted B&W scene */
.section-journeys { position: relative; }
.section-journeys::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/images/journeys-bg.jpg') center 30% / cover no-repeat;
  opacity: .16;
}
.section-journeys .container { position: relative; }
.journey-card--photo { padding: 0; }
.journey-card--photo .jc-media { overflow: hidden; }
.journey-card--photo .jc-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform .4s var(--ease-out);
}
.journey-card--photo:hover .jc-media img { transform: scale(1.045); }
.journey-card--photo .jc-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 1; }
.journey-card--photo .jc-body .want { flex: 1; }
.journey-nudge--boxed {
  margin-top: 40px;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 26px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  box-shadow: 0 24px 50px -24px rgba(10,25,49,.5);
}
.journey-nudge--boxed p { color: var(--dark-body); max-width: 640px; margin: 0; }
.journey-nudge--boxed p strong { color: #fff; }
.journey-nudge--boxed .btn--primary { background: var(--cyan); color: var(--navy-2); flex: none; }

/* 5. Method + navigator: founder photo behind, shadowed from the left */
.method-nav {
  position: relative;
  background: var(--navy-2);
  color: #fff;
  overflow: hidden;
  padding: clamp(64px, 8vw, 110px) 0;
}
.method-nav__bg {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  background-size: cover;
  background-position: 74% 12%;
}
.method-nav__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #080F1E 0%, rgba(8,15,30,.88) 26%, rgba(8,15,30,.44) 60%, rgba(8,15,30,.24) 100%),
    linear-gradient(0deg, rgba(8,15,30,.55), rgba(8,15,30,0) 40%);
}
.method-nav .container { position: relative; }
.mn-copy { max-width: 560px; }
.mn-steps { display: grid; gap: 20px; margin-bottom: 32px; }
.mn-steps li { display: flex; gap: 18px; align-items: flex-start; }
.mn-steps .n {
  flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--cyan);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(8,204,252,.45);
  display: grid; place-items: center;
}
.mn-steps h3 { font-size: 17.5px; color: #fff; margin-bottom: 3px; }
.mn-steps p { font-size: 14.5px; color: var(--dark-body); }
.mn-links { display: flex; gap: 34px; flex-wrap: wrap; }
.mn-links .link-more { color: #fff; }
@media (max-width: 860px) {
  .method-nav__bg { width: 100%; opacity: .3; }
}

/* 6. Let's talk: copy + embedded Calendly */
.lt-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.lt-cal .calendly-shell { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
@media (max-width: 900px) { .lt-grid { grid-template-columns: 1fr; } }
/* Journeys refinements: taller cards, top-aligned Let's talk */
.journey-card--photo .jc-media img { aspect-ratio: 16 / 11.2; }
.journey-card--photo .jc-body { padding: 24px 24px 28px; }
.lt-grid { align-items: start; }
.section-journeys::before { opacity: .18; background-position: center 55%; }

/* Scroll-cue arrow (ported from the tool pages so any hero can use it) */
.pd-hero__start { margin-top: clamp(30px, 4vw, 44px); }
.pd-start { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; }
.pd-start__label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; transition: color .2s;
}
.pd-start__circle {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.38); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .22s var(--ease-out), color .22s, transform .22s var(--ease-out);
}
.pd-start__circle svg { animation: pdStartBob 2.6s ease-in-out infinite; }
.pd-start:hover .pd-start__label, .pd-start:focus-visible .pd-start__label { color: var(--cyan); }
.pd-start:hover .pd-start__circle, .pd-start:focus-visible .pd-start__circle {
  border-color: var(--cyan); color: var(--cyan); transform: translateY(3px);
}
@keyframes pdStartBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .pd-start__circle svg { animation: none; }
  .pd-start:hover .pd-start__circle { transform: none; }
}
#tools { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ==========================================================================
   Photo sweep across interior pages (2026-08-21)
   ========================================================================== */

/* Journey pages: dark photo heroes */
.jhero--photo { border-bottom: none; background: var(--navy-2); color: #fff; }
.jhero--photo .jhero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 45%;
  filter: saturate(.95);
}
.jhero--photo .jhero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,10,16,.92) 0%, rgba(6,10,16,.72) 44%, rgba(6,10,16,.42) 100%),
    linear-gradient(0deg, rgba(8,15,30,.6), rgba(8,15,30,0) 34%);
}
.jhero--photo .container { z-index: 2; }
.jhero--photo .jr-label { fill: rgba(255,255,255,.7); }
.jhero--photo .lede { color: var(--dark-body); }

/* Approach: instruments band */
.inst-band { position: relative; background: var(--navy-2); color: #fff; overflow: hidden; padding: clamp(60px, 8vw, 100px) 0; }
.inst-band__bg { position: absolute; inset: 0; background-size: cover; background-position: center 40%; }
.inst-band__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,10,16,.93) 0%, rgba(6,10,16,.8) 48%, rgba(6,10,16,.6) 100%);
}
.inst-band .container { position: relative; }
.inst-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.inst-media img { width: 100%; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 26px 60px -26px rgba(0,0,0,.7); }
@media (max-width: 860px) { .inst-split { grid-template-columns: 1fr; } }

/* About: Michigan strip */
.mi-strip { padding: clamp(44px, 6vw, 72px) 0; background: #fff; }
.mi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mi-row figure { overflow: hidden; border-radius: var(--radius); }
.mi-row img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .4s var(--ease-out); }
.mi-row figure:hover img { transform: scale(1.04); }
@media (max-width: 640px) { .mi-row { grid-template-columns: 1fr; } .mi-row img { aspect-ratio: 16/9; } }

/* Services: photo panels */
.svc--media { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.svc-photo { margin: 0; }
.svc-photo img { width: 100%; border-radius: var(--radius); aspect-ratio: 16/11; object-fit: cover; box-shadow: var(--shadow-card); }
@media (max-width: 1020px) { .svc--media { grid-template-columns: 1fr 1fr; } .svc-photo { grid-column: 1 / -1; max-width: 520px; } }
@media (max-width: 860px) { .svc--media { grid-template-columns: 1fr; } }
/* Journey tool previews: real screenshots with the resources-style slide */
.tf-screen {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 430px;
  box-shadow: var(--shadow-card);
  background: var(--mist);
}
.tf-screen img { display: block; width: 100%; transition: transform 2.2s var(--ease-out); }
.tf-screen:hover img { transform: translateY(min(0px, calc(430px - 100%))); }

/* About: core values band */
.values-band { background: var(--navy-2); color: #fff; padding: clamp(64px, 8vw, 104px) 0; }
.values-band h2 { color: #fff; }
.val-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .val-grid { grid-template-columns: 1fr; } }
.val {
  position: relative;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-dark);
  border-top: 3px solid var(--vc, var(--cyan));
  border-radius: var(--radius);
  padding: 30px 30px 28px;
  overflow: hidden;
}
.val-num {
  position: absolute; top: 6px; right: 18px;
  font-family: var(--font-display); font-weight: 800; font-size: 84px;
  color: color-mix(in srgb, var(--vc, var(--cyan)) 14%, transparent);
  line-height: 1;
}
.val h3 { color: var(--vc, var(--cyan)); font-size: 20px; margin-bottom: 10px; }
.val p { color: var(--dark-body); font-size: 15.5px; max-width: 480px; }
/* Values tiles with photos */
.val { padding: 0; }
.val-photo { margin: 0; }
.val-photo img { width: 100%; aspect-ratio: 16/8; object-fit: cover; display: block; }
.val-body { padding: 24px 28px 26px; }
.val .val-num { z-index: 2; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
/* Journey hero legibility over bright imagery */
.jhero--photo .jhero__bg::after {
  background:
    linear-gradient(90deg, rgba(6,10,16,.95) 0%, rgba(6,10,16,.8) 44%, rgba(6,10,16,.52) 100%),
    linear-gradient(0deg, rgba(8,15,30,.66), rgba(8,15,30,.08) 40%);
}
.jhero--photo .route-chart svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.jhero--photo .jr-label {
  fill: #fff;
  paint-order: stroke fill;
  stroke: rgba(6,13,26,.7);
  stroke-width: 3px;
}
.jhero--photo .route-chart svg .jr-path { opacity: 1; }
/* About: owner photo replaces the reach chart */
.story-photo { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.story-photo img { width: 100%; display: block; }
/* Trust strip icons: flat premium chips, no gradient */
.proof-icon {
  background: rgba(255,255,255,.07) !important;
  color: var(--pi, var(--cyan)) !important;
  border: 1px solid var(--line-dark);
  box-shadow: none;
}

/* ==========================================================================
   Animation sweep (2026-08-21): directional entrances on the flat spots
   ========================================================================== */
/* Navigator Method steps ride in from the left, one at a time */
.mn-steps li {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal-group.in .mn-steps li { opacity: 1; transform: none; }
.reveal-group.in .mn-steps li:nth-child(1) { transition-delay: .3s; }
.reveal-group.in .mn-steps li:nth-child(2) { transition-delay: .45s; }
.reveal-group.in .mn-steps li:nth-child(3) { transition-delay: .6s; }
.reveal-group.in .mn-steps li:nth-child(4) { transition-delay: .75s; }

/* Approach instruments image slides in from the right */
.inst-media.reveal { transform: translateX(36px); }
.inst-media.reveal.in { transform: none; }

/* Journey/value photos settle from a slight zoom as their card arrives */
.reveal-group > * .jc-media img, .reveal-group > * .val-photo img { transform: scale(1.06); transition: transform 1s var(--ease-out); }
.reveal-group.in > * .jc-media img, .reveal-group.in > * .val-photo img { transform: scale(1); }
.journey-card--photo:hover .jc-media img { transform: scale(1.045) !important; }

@media (prefers-reduced-motion: reduce) {
  .mn-steps li, .inst-media.reveal { opacity: 1; transform: none; transition: none; }
  .reveal-group > * .jc-media img, .reveal-group > * .val-photo img { transform: none; transition: none; }
}

/* Mobile hero: everything above the fold, CTAs in thumb reach */
@media (max-width: 640px) {
  .hero--photo .container {
    padding-top: calc(var(--header-h) + 20px);
    padding-bottom: 34px;
  }
  .hero--photo .hero__title { font-size: clamp(27px, 8vw, 33px); }
  .hero--photo .rule { margin: 16px 0; }
  .hero--photo .hero__sub { font-size: 16px; line-height: 1.55; margin: 0 0 14px; }
  .hero__services { gap: 7px 16px; margin: 0 0 20px; }
  .svc-tag { font-size: 12.5px; }
  .svc-tag::before { width: 6px; height: 6px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { padding: 15px 22px; }
  .hero__cta2 { gap: 6px; }
  .hero__micro { text-align: center; padding-left: 0; }
}

/* Why Wayfinder */
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--wc, var(--cyan));
  border-radius: var(--radius);
  padding: 28px 30px 26px;
}
.why-card h3 { font-size: 19px; margin-bottom: 10px; }
.why-card p { color: var(--ink-soft); font-size: 15.5px; }

/* ==========================================================================
   De-tiling (2026-08-21): text-only content goes editorial — hairline
   rules and a short color mark instead of rounded boxes. Photo cards
   (journeys, values) keep their frames; media needs an edge, text doesn't.
   ========================================================================== */
.why-card, .plain-card, .plain-card--accent {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 26px 0 8px !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.why-card::before, .plain-card::before {
  content: '';
  display: block;
  width: 28px; height: 3px; border-radius: 2px;
  margin-bottom: 16px;
  background: var(--wc, var(--accent, var(--cyan)));
}
.plain-card .proof-icon { display: none; }
.why-grid { gap: 10px 48px; }
.grid-3 { row-gap: 10px; }
.why-card h3 { font-size: 20px; }
.why-card p, .plain-card p { font-size: 15.5px; }

/* ==========================================================================
   Escalation module (2026-08-25)
   The quiet bridge from a finished tool to the Financial Leadership Readiness
   Checkup. Used inside the Financial Health Checkup and Profit Engine results
   screens and on /resources. Deliberately NOT a banner: a bordered block in
   the same family as the results cards, with the signature gradient as its
   only flourish. No urgency styling, no alarm color.
   ========================================================================== */
.wf-escalate {
  position: relative;
  display: block;
  max-width: 720px;
  margin-top: 34px;
  padding: 24px 26px 22px;
  /* Recessed rather than white: it must not read as a second recommendation
     sitting beside the tool card above it. */
  background: var(--mist);
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              border-color .18s, background .18s;
}
.wf-escalate::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}
.wf-escalate:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: var(--shadow-card);
  border-color: color-mix(in srgb, var(--navy) 22%, #fff);
}
.wf-escalate__kicker {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.wf-escalate__head {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.1vw, 20px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.wf-escalate__body {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 580px;
}
.wf-escalate .link-more { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .wf-escalate { transition: none; }
  .wf-escalate:hover { transform: none; }
}

/* /resources: the escalation tile closes the grid the way the checkup opens
   it — same full-width feature shape, but the accent bar carries the
   signature gradient instead of a journey color, because this tool sits above
   the journeys rather than inside one. */
.res-card--escalate::before { background: var(--grad); }
/* Its preview is a wide crop of the two readings rather than a tall
   screenshot. In the stacked mobile layout the band sizes to the image instead
   of holding the siblings' fixed 216px, so the readings stay full width and
   legible rather than being clipped through the middle or letterboxed down to
   a narrow strip. */
@media (max-width: 860px) {
  .res-card--escalate .res-media--panel {
    height: auto;
    padding: 20px 0;
  }
  .res-card--escalate .res-media--panel img { width: 92%; }
}

/* First-viewport fold: the hero centers its copy inside whatever height the
   fold logic gives it. Desktop height comes from site.js (viewport minus the
   trust bar, so the bar's bottom edge lands at the fold); on mobile the hero
   alone fills the viewport and the trust bar waits just below the fold. */
.hero--video { display: grid; align-items: center; }
.hero--video > .container { width: 100%; }
@media (max-width: 640px) {
  .hero--video { min-height: 100svh; }
}