/* ============================================================
   TEND, SITE LAYER
   Marketing + assessment website built on the TEND design system.
   Tokens come from tokens/*.css. This file is layout + page chrome
   only, it never invents colours or type outside the token set.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--aqua-tint); color: var(--aqua-ink); }

/* ---- Layout primitives ------------------------------------ */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 56px); }
.wrap-narrow { max-width: 920px; }
.section { padding-block: clamp(56px, 9vw, 124px); }
.section-sunk { background: var(--surface-sunk); }
.section-ink { background: var(--tend-ink); color: var(--tend-page); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--tend-page); }
.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }

.grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* ---- Type roles ------------------------------------------- */
.eyebrow {
  font-family: var(--font-data);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--energy-core, var(--aqua-core)); }
.eyebrow.no-rule::before { display: none; }
.display-xl { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; font-size: clamp(44px, 7vw, 92px); margin: 0; }
.display-l  { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.018em; font-size: clamp(34px, 4.6vw, 58px); margin: 0; }
.display-m  { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.014em; font-size: clamp(27px, 3.2vw, 40px); margin: 0; }
.display-s  { font-family: var(--font-display); font-weight: 600; line-height: 1.18; font-size: clamp(21px, 2.2vw, 27px); margin: 0; }
.lead { font-family: var(--font-body); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--text-secondary); margin: 0; }
.body { font-family: var(--font-body); font-size: 17px; line-height: 1.62; color: var(--text-secondary); }
.caption { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.kbd { font-family: var(--font-data); }

/* The verbal signature, used to close artefacts */
.signoff { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); color: var(--text-body); }

/* ---- Wordmark --------------------------------------------- */
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 25px; letter-spacing: 0.06em; color: var(--text-body); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.wordmark .tm { font-size: 11px; vertical-align: super; color: var(--text-muted); margin-left: -3px; }
.wordmark .mk { width: 22px; height: 22px; color: var(--aqua-core); display: inline-flex; }

/* ============================================================
   NAVIGATION, quiet mega-menu
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--tend-page) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.nav.scrolled { border-bottom-color: var(--rule); }
@media (max-width: 560px) { .nav-cta .nav-start { display: none; } }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 16px clamp(20px, 5vw, 56px); max-width: 1400px; margin: 0 auto; }
.nav-links { display: flex; align-items: stretch; gap: 4px; }
@media (max-width: 1080px) { .nav-links { display: none; } }
.nav-item { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--text-secondary); background: none; border: 0; cursor: pointer; padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nav-trigger:hover, .nav-item.open .nav-trigger { color: var(--tend-ink); background: color-mix(in srgb, var(--tend-page-sunk) 70%, transparent); }
.nav-trigger .chev { width: 9px; height: 9px; transition: transform var(--dur-base) var(--ease-out); opacity: 0.6; }
.nav-item.open .nav-trigger .chev { transform: rotate(180deg); }

.mega { position: absolute; top: calc(100% + 10px); left: 0; min-width: 320px; background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); }
.nav-item.open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega.wide { min-width: 640px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; }
.mega-list { display: flex; flex-direction: column; gap: 2px; }
.mega-link { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: var(--r-sm); text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.mega-link:hover { background: var(--surface-sunk); }
.mega-link .ml-t { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--tend-ink); display: flex; align-items: center; gap: 9px; }
.mega-link .ml-d { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.mega-link .ml-ico { width: 18px; height: 18px; color: var(--energy-deep, var(--aqua-deep)); flex: none; }
.mega-aside { background: var(--surface-sunk); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.mega-aside .ma-eyebrow { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.mega-aside .ma-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--tend-ink); margin: 6px 0 0; }
.mega-aside .ma-body { font-family: var(--font-body); font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
@media (max-width: 1080px) { .nav-cta .cta-secondary { display: none; } }
.btn-link { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--text-secondary); text-decoration: none; cursor: pointer; }
.btn-link:hover { color: var(--tend-ink); }

/* Mobile nav button */
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--tend-ink); }
@media (max-width: 1080px) { .nav-burger { display: inline-flex; } }
.mobile-menu { display: none; }
.mobile-menu.open { display: block; position: fixed; inset: 64px 0 0; background: var(--surface-page); z-index: 99; padding: 24px clamp(20px,5vw,56px); overflow-y: auto; }
.mobile-group { border-bottom: 1px solid var(--rule); padding: 16px 0; }
.mobile-group > .mg-t { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.mobile-group a { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--tend-ink); text-decoration: none; padding: 8px 0; }

/* ---- Buttons (anchors styled like DS buttons) ------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: 0.005em; padding: 13px 22px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); white-space: nowrap; }
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn-ink { background: var(--tend-ink); color: var(--tend-page); border-color: var(--tend-ink); }
.btn-ink:hover { background: #1d1916; }
.btn-accent { background: var(--aqua-deep); color: #fff; border-color: var(--aqua-deep); }
.btn-accent:hover { filter: brightness(0.93); }
.btn-outline { background: transparent; color: var(--tend-ink); border-color: var(--rule-strong); }
.btn-outline:hover { background: var(--surface-sunk); border-color: var(--tend-ink-mute); }
.btn-ghost { background: transparent; color: var(--tend-ink); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-sunk); }
.btn-lg { padding: 16px 30px; font-size: 17px; }
.btn-arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.section-ink .btn-outline { color: var(--tend-page); border-color: color-mix(in srgb, var(--tend-page) 35%, transparent); }
.section-ink .btn-outline:hover { background: color-mix(in srgb, var(--tend-page) 10%, transparent); }

/* ---- Cards ------------------------------------------------ */
.card { background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.card-pad { padding: clamp(22px, 2.4vw, 32px); }
.card-quiet { background: transparent; border: 1px solid var(--rule); box-shadow: none; }

/* energy accent top rule on a card */
.accent-top { position: relative; overflow: hidden; }
.accent-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--energy-core, var(--aqua-core)); }

/* ---- Pill / chip ------------------------------------------ */
.pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--rule-strong); color: var(--text-secondary); background: var(--surface-card); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--energy-core, var(--aqua-core)); }

/* ---- Footer ----------------------------------------------- */
.footer { background: var(--tend-ink); color: var(--tend-page); padding-block: clamp(56px, 8vw, 92px) 36px; }
.footer a { color: color-mix(in srgb, var(--tend-page) 78%, transparent); text-decoration: none; }
.footer a:hover { color: var(--tend-page); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--tend-page) 55%, transparent); margin: 0 0 16px; font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col ul a { font-family: var(--font-body); font-size: 15px; }
.footer-brand .wm { color: var(--tend-page); font-size: 28px; }
.footer-brand .wm .tm { color: color-mix(in srgb, var(--tend-page) 60%, transparent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--tend-page) 16%, transparent); }
.footer-legal { font-family: var(--font-body); font-size: 12.5px; color: color-mix(in srgb, var(--tend-page) 58%, transparent); line-height: 1.55; max-width: 62ch; }
/* The ONmedia Collective logo: 48px tall minimum, clear space 30% of its height (15px) on every side. Never recoloured or stretched. */
.footer-tomc { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.footer-tomc img { height: 48px; width: auto; max-width: none; flex: none; margin: 15px 15px 15px 0; object-fit: contain; }
.footer-tomc p { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--tend-page) 72%, transparent); margin: 0; max-width: 34ch; }

/* ---- Reveal-on-scroll ------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 480ms cubic-bezier(.2,.7,.1,1), transform 480ms cubic-bezier(.2,.7,.1,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-block: clamp(40px, 7vw, 92px) clamp(48px, 8vw, 104px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-eyebrow { font-family: var(--font-data); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.hero-eyebrow .he-line { width: 30px; height: 1px; background: var(--aqua-core); }
.hero h1 { font-family: var(--font-display); font-weight: 600; line-height: 1.0; letter-spacing: -0.025em; font-size: clamp(46px, 6.6vw, 96px); margin: 0; text-transform: uppercase; }
.hero h1 .em { font-style: italic; font-weight: 400; text-transform: none; }
.hero-lead { font-family: var(--font-body); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--text-secondary); margin: 28px 0 0; max-width: 46ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 18px; align-items: center; margin-top: 30px; flex-wrap: wrap; font-family: var(--font-body); font-size: 14px; color: var(--text-muted); }
.hero-trust .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rule-strong); }
.hero-compass-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-energy-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.hero-compass-hint { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 14px; display: flex; align-items: center; gap: 9px; }
.hero-compass-hint .hh-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua-core); animation: hhpulse 2.6s var(--ease-out) infinite; }
@keyframes hhpulse { 0%,100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero-compass-hint .hh-pulse { animation: none; } }

/* ============================================================
   TEND BEARING
   ============================================================ */
.bearing { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .bearing { grid-template-columns: 1fr; } }
.bearing-compass { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.bearing-progress { display: flex; gap: 8px; }
.bp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.bp-dot.on { background: var(--aqua-core); transform: scale(1.15); }
.bearing-panel { min-height: 360px; display: flex; flex-direction: column; justify-content: center; }
.bearing-stmt { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.7vw, 34px); line-height: 1.18; letter-spacing: -0.012em; margin: 14px 0 30px; min-height: 2.4em; text-wrap: balance; }
.bearing-scale { display: flex; flex-direction: column; gap: 8px; }
.bearing-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 13px 16px; cursor: pointer; font-family: var(--font-body); font-size: 16px; color: var(--tend-ink); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.bearing-btn:hover { border-color: var(--aqua-core); background: var(--aqua-tint); transform: translateX(4px); }
.bb-mark { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rule-strong); flex: none; transition: border-color var(--dur-fast) var(--ease-out); }
.bearing-btn:hover .bb-mark { border-color: var(--aqua-core); }
.bearing-read { animation: fadeUp var(--dur-slow) var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   PARTNERSHIP PATH, scroll-driven story
   ============================================================ */
.path { position: relative; }
.path-rail { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.path-stage-track { display: flex; flex-direction: column; gap: 0; }
.path-intro { max-width: 540px; }
.path-steps { position: relative; }
.path-step { padding: clamp(40px,9vh,90px) 0; border-top: 1px solid var(--rule); }
.path-step:first-child { border-top: 0; }
.path-num { font-family: var(--font-data); font-size: 13px; letter-spacing: 0.1em; color: var(--text-muted); }
.path-step h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; margin: 10px 0 0; transition: color var(--dur-base) var(--ease-out); }
.path-step .ps-body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--text-secondary); max-width: 48ch; margin-top: 16px; }
.path-sticky-visual { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.path-glyph-ring { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.path-glyph { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--rule); transition: all var(--dur-slow) var(--ease-out); }
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); }
@media (max-width: 860px) { .path-grid { grid-template-columns: 1fr; } .path-sticky-visual { position: relative; height: auto; padding: 20px 0 40px; } }

/* ============================================================
   PACKAGE CARDS
   ============================================================ */
.pkg-card { display: flex; flex-direction: column; gap: 0; height: 100%; }
.pkg-card .pk-head { padding: 26px 26px 22px; border-bottom: 1px solid var(--rule); }
.pkg-card .pk-glyph { width: 40px; height: 40px; color: var(--energy-deep, var(--aqua-deep)); margin-bottom: 16px; }
.pkg-card .pk-meta { font-family: var(--font-data); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); display: flex; gap: 10px; align-items: center; }
.pkg-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 25px; margin: 12px 0 0; line-height: 1.1; }
.pkg-card .pk-body { padding: 22px 26px; flex: 1; }
.pkg-card .pk-desc { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.pkg-card ul.pk-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pkg-card ul.pk-list li { display: flex; gap: 10px; font-family: var(--font-body); font-size: 14.5px; color: var(--text-secondary); line-height: 1.45; }
.pkg-card ul.pk-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--energy-core, var(--aqua-core)); margin-top: 8px; flex: none; }
.pkg-card .pk-foot { padding: 0 26px 26px; }

/* ---- Stat row --------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
@media (max-width: 680px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface-card); padding: 28px 24px; }
.stat .sv { font-family: var(--font-data); font-size: clamp(30px, 3.4vw, 42px); font-weight: 500; color: var(--tend-ink); letter-spacing: -0.01em; }
.stat .sl { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); margin-top: 8px; line-height: 1.4; }

/* ---- Quote ------------------------------------------------- */
.pullquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.22; letter-spacing: -0.015em; max-width: 18ch; }
.pullquote .q-energy { color: var(--energy-deep, var(--aqua-deep)); }

/* ---- Energy legend ---------------------------------------- */
.energy-legend { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 760px) { .energy-legend { grid-template-columns: 1fr 1fr; } }
.energy-cell { padding: 22px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface-card); }
.energy-cell .ec-top { display: flex; align-items: center; gap: 10px; }
.energy-cell .ec-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--energy-deep); }
.energy-cell .ec-card { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 4px; }
.energy-cell .ec-who { font-family: var(--font-body); font-size: 15px; color: var(--text-secondary); line-height: 1.45; }

/* ---- Video frame ------------------------------------------ */
.video-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule); background: var(--tend-ink); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.video-frame .vf-play { width: 84px; height: 84px; border-radius: 50%; background: color-mix(in srgb, var(--tend-page) 92%, transparent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--dur-base) var(--ease-out); }
.video-frame .vf-play:hover { transform: scale(1.06); }
.video-frame .vf-play svg { margin-left: 5px; }
.video-frame .vf-meta { position: absolute; left: 22px; bottom: 20px; color: var(--tend-page); }
.video-frame .vf-poster { position: absolute; inset: 0; opacity: 0.42; object-fit: cover; width: 100%; height: 100%; }

/* ============================================================
   JOURNEY BUILDER
   ============================================================ */
.journey-layout { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 980px) { .journey-layout { grid-template-columns: 1fr; } }
.journey-config { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.jc-block {}
.jc-label { display: block; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--tend-ink); margin: 16px 0 10px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--surface-sunk); padding: 5px; border-radius: var(--r-sm); }
.seg-btn { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); background: transparent; border: 0; padding: 9px 16px; border-radius: var(--r-xs); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); white-space: nowrap; }
.seg-btn:hover { color: var(--tend-ink); }
.seg-btn.on { background: var(--surface-card); color: var(--tend-ink); font-weight: 600; box-shadow: var(--shadow-xs); }

.mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 620px) { .mod-grid { grid-template-columns: 1fr; } }
.mod-card { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 16px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); position: relative; overflow: hidden; }
.mod-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--energy-core); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-base) var(--ease-out); }
.mod-card:hover { border-color: var(--energy-core); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mod-card.on { border-color: var(--energy-core); background: color-mix(in srgb, var(--energy-tint, var(--aqua-tint)) 55%, var(--surface-card)); }
.mod-card.on::before { transform: scaleY(1); }
.mod-card.anchor { cursor: default; }
.mc-glyph { width: 26px; height: 26px; flex: none; display: inline-flex; }
.mc-text { flex: 1; min-width: 0; }
.mc-name { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--tend-ink); line-height: 1.25; }
.mc-meta { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }
.mc-toggle { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--rule-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 16px; color: var(--text-secondary); transition: all var(--dur-fast) var(--ease-out); }
.mc-toggle.on { background: var(--energy-deep); border-color: var(--energy-deep); color: #fff; }
.mc-state.locked { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-deep); background: var(--aqua-tint); padding: 5px 10px; border-radius: var(--r-xs); flex: none; }

.journey-summary { position: relative; }
.js-sticky { position: sticky; top: 88px; }
.js-card { background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 24px; }
.js-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.js-head > div:first-child { flex: none; }
.js-type { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--tend-ink); }
.js-cadence { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.js-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.js-stat-v { font-family: var(--font-data); font-size: 26px; font-weight: 500; color: var(--tend-ink); letter-spacing: -0.01em; }
.js-stat-l { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.js-timeline { display: flex; flex-direction: column; gap: 2px; padding: 18px 0; max-height: 260px; overflow-y: auto; }
.js-tl-item { display: flex; gap: 14px; padding: 9px 0; position: relative; }
.js-tl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--energy-core); margin-top: 3px; flex: none; position: relative; z-index: 1; }
.js-tl-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: -4px; width: 1px; background: var(--rule-strong); }
.js-tl-name { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--tend-ink); line-height: 1.25; }
.js-tl-meta { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.js-bespoke { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--violet-tint); border-radius: var(--r-sm); font-family: var(--font-body); font-size: 13px; color: var(--violet-deep); line-height: 1.4; }
.js-recap-line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); }
.js-recap-line:last-child { border-bottom: 0; }
.js-recap-line strong { color: var(--tend-ink); font-weight: 600; }

/* ============================================================
   ASSESSMENT, dark focus mode
   ============================================================ */
.assess { min-height: 100vh; background: var(--surface-page); color: var(--text-body); display: flex; flex-direction: column; }
.assess-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px,5vw,44px); border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: color-mix(in srgb, var(--tend-page) 90%, transparent); backdrop-filter: blur(8px); z-index: 20; }
.assess-bar .ab-wm { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: 0.06em; color: var(--tend-ink); display: inline-flex; align-items: center; gap: 9px; }
.assess-bar .ab-wm .tm { font-size: 10px; vertical-align: super; color: var(--text-muted); }
.assess-bar .ab-right { display: flex; align-items: center; gap: 20px; }
.assess-quit { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer; }
.assess-quit:hover { color: var(--text-secondary); }
.assess-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(28px,5vw,64px) clamp(20px,5vw,44px); }
.assess-panel { width: 100%; max-width: 640px; animation: fadeUp var(--dur-slow) var(--ease-out); }
.assess-panel.wide { max-width: 820px; }
.assess-eyebrow { font-family: var(--font-data); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aqua-deep); margin-bottom: 20px; }
.assess-card { background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(28px,4vw,44px); box-shadow: var(--shadow-md); }

/* timer */
.timer { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-data); font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.timer .t-ring { width: 22px; height: 22px; }
.timer.low { color: var(--coral-deep); }

/* progress */
.assess-progress { height: 3px; background: var(--tend-line); border-radius: 999px; overflow: hidden; }
.assess-progress .bar { height: 100%; background: var(--aqua-core); transition: width var(--dur-base) var(--ease-out); }

/* pacing bar (gentle, per question) */
.pace { height: 2px; background: var(--tend-line); border-radius: 999px; overflow: hidden; margin-top: 18px; }
.pace .pb { height: 100%; background: color-mix(in srgb, var(--aqua-core) 55%, transparent); width: 0; }
.pace .pb.run { animation: paceFill 30s linear forwards; }
@keyframes paceFill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pace .pb.run { animation: none; width: 30%; } }

/* item */
.item-num { font-family: var(--font-data); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.item-stmt { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px,3vw,34px); line-height: 1.22; letter-spacing: -0.01em; margin: 16px 0 32px; text-wrap: balance; min-height: 2.2em; }
.likert5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
@media (max-width: 560px) { .likert5 { grid-template-columns: 1fr; } }
.likert-opt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; background: var(--surface-page); border: 1px solid var(--rule-strong); border-radius: var(--r-md); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.likert-opt:hover, .likert-opt:focus-visible { border-color: var(--aqua-core); background: color-mix(in srgb, var(--aqua-core) 14%, var(--surface-page)); }
.likert-opt:focus-visible { outline: 2px solid var(--aqua-core); outline-offset: 2px; }
.likert-opt .lo-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rule-strong); transition: all var(--dur-fast) var(--ease-out); }
.likert-opt:hover .lo-dot { border-color: var(--aqua-core); background: var(--aqua-core); }
.likert-opt .lo-lbl { font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); text-align: center; line-height: 1.3; }
.likert-opt.lg .lo-dot { width: 22px; height: 22px; }
@media (max-width: 560px) { .likert-opt { flex-direction: row; justify-content: flex-start; gap: 14px; } .likert-opt .lo-lbl { font-size: 14px; } }

/* checklist */
.checklist { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.check-item { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; background: var(--surface-page); border: 1px solid var(--rule); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); text-align: left; }
.check-item:hover { border-color: var(--rule-strong); }
.check-item.on { border-color: var(--aqua-core); background: color-mix(in srgb, var(--aqua-core) 14%, var(--surface-page)); }
.check-item:focus-visible { outline: 2px solid var(--aqua-core); outline-offset: 2px; }
.check-box { width: 22px; height: 22px; border-radius: var(--r-xs); border: 1.5px solid var(--rule-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: 13px; transition: all var(--dur-fast) var(--ease-out); }
.check-item.on .check-box { background: var(--aqua-deep); border-color: var(--aqua-deep); }
.check-txt { font-family: var(--font-body); font-size: 15.5px; color: var(--text-body); line-height: 1.45; }

/* generating */
.gen-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.gen-spin { animation: genSpin 8s linear infinite; }
@keyframes genSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gen-spin { animation: none; } }

/* results */
.result-hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px,4vw,48px); align-items: center; }
@media (max-width: 720px) { .result-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.report-spread { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 720px) { .report-spread { grid-template-columns: 1fr; } }
.report-page { background: var(--surface-page); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 20px; }
.report-page .rp-n { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }
.report-page .rp-t { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 8px 0 6px; }
.report-page .rp-d { font-family: var(--font-body); font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }

/* ---- Misc ------------------------------------------------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.wrap-flex { flex-wrap: wrap; }
.energy-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Revision 5, 7.3: page changes cross-fade over 200ms where supported. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}

/* Revision 5, 7.6: touch targets at least 44px, form text at 16px so phones do not zoom. */
.btn{min-height:44px}
.mobile-menu a,.footer-col a{display:inline-flex;align-items:center;min-height:44px}
.mega-link{min-height:44px}
input,select,textarea{font-size:16px}

/* ---- 17 October 2026 ---- */
html{scroll-padding-top:96px}
.tend-c,.ld-tend{background:linear-gradient(90deg,var(--aqua-deep),var(--coral-deep),var(--amber-deep),var(--violet-deep),var(--aqua-deep));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:ldText 14s linear infinite}
@keyframes ldText{to{background-position:300% 0}}
.section-ink .tend-c,.footer .tend-c{background-image:linear-gradient(90deg,var(--aqua-core),var(--coral-core),var(--amber-core),var(--violet-core),var(--aqua-core))}
.tn{font-size:.88em;letter-spacing:.05em;font-weight:600;color:var(--tend-ink)}
.section-ink .tn{color:inherit}
a.nav-trigger{text-decoration:none}
a.nav-trigger.is-on{color:var(--tend-ink)}
.mobile-group a.mg-t{display:block;text-decoration:none;color:inherit}
/* the four current marks, centred and matched in size inside square boxes */
.cmark{display:inline-flex;flex:none;overflow:hidden}
.cmark img{width:100%;height:100%;object-fit:contain;display:block}
.cmark .m-aqua{transform:translateY(13.5%) scale(1.065)}
.cmark .m-coral{transform:scale(.94)}
.cmark .m-amber{transform:translateX(2.3%) scale(.9)}
.cmark .m-violet{transform:translateY(9.4%) scale(1.075)}
.cmark-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,28px)}
.cmark-row li{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:16px}
/* stat rows in the four currents */
.stat-row.cur4 .stat{position:relative;transition:background var(--dur-base) var(--ease-out)}
.stat-row.cur4 .stat::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c-core);transform:scaleX(.18);transform-origin:left;transition:transform 700ms var(--ease-out)}
.stat-row.cur4.in .stat::before,.stat-row.cur4 .stat:hover::before,.stat-row.cur4 .stat:focus-visible::before{transform:scaleX(1)}
.stat-row.cur4 .stat:nth-child(2)::before{transition-delay:90ms}.stat-row.cur4 .stat:nth-child(3)::before{transition-delay:180ms}.stat-row.cur4 .stat:nth-child(4)::before{transition-delay:270ms}
.stat-row.cur4 .stat .sv{color:var(--c-deep)}
.stat-row.cur4 .stat:hover{background:var(--c-tint)}
.stat-row.cur4 .stat .sdot{display:block;width:10px;height:10px;border-radius:50%;background:var(--c-core);margin-bottom:14px}
/* progress in the spectrum of the four currents, with no counts */
.spec{position:relative;height:6px;border-radius:999px;overflow:hidden;background:linear-gradient(90deg,var(--aqua-core),var(--coral-core),var(--amber-core),var(--violet-core))}
.spec .rest{position:absolute;top:0;right:0;bottom:0;background:var(--tend-line);transition:width var(--dur-base) var(--ease-out)}
.spec-top{position:relative;overflow:hidden}
.spec-top::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--aqua-core) 0 25%,var(--coral-core) 25% 50%,var(--amber-core) 50% 75%,var(--violet-core) 75%)}
a.ab-wm{text-decoration:none}
a.ab-wm:focus-visible{outline:2px solid var(--aqua-deep);outline-offset:4px;border-radius:4px}
/* cookies */
.cookie{position:fixed;left:clamp(12px,3vw,24px);right:clamp(12px,3vw,24px);bottom:clamp(12px,3vw,24px);z-index:80;display:flex;justify-content:center;pointer-events:none}
.cookie-in{pointer-events:auto;width:100%;max-width:720px;background:var(--surface-card);color:var(--text-body);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:22px 22px 20px;display:grid;gap:10px;animation:fadeUp var(--dur-base) var(--ease-out)}
.cookie-t{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0;color:var(--tend-ink)}
.cookie-b{font-family:var(--font-body);font-size:15px;line-height:1.55;margin:0;color:var(--text-secondary)}
.cookie-b a{color:var(--aqua-deep);font-weight:600}
.cookie-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.footer-policy{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 24px}
.footer-policy a,.footer-policy button{font-family:var(--font-body);font-size:13.5px;color:color-mix(in srgb,var(--tend-page) 80%,transparent);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:8px 0;cursor:pointer}
.footer-policy a:hover,.footer-policy button:hover{color:var(--tend-page)}
/* plain form fields for selects and checkboxes */
.pf{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--text-body)}
.pf select,.pf input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--rule-strong);border-radius:var(--r-sm);font:inherit;font-weight:400;font-size:16px;background:var(--surface-card);color:var(--text-body)}
.pf select:focus-visible,.pf input:focus-visible{outline:2px solid var(--aqua-deep);outline-offset:1px}
.pf-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.pf-check{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--text-body);cursor:pointer}
.pf-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--aqua-deep)}
.pf-check a{color:var(--aqua-deep)}
/* legal and long-form pages */
.legal{max-width:72ch}
.legal h2{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin:44px 0 12px;color:var(--tend-ink)}
.legal h3{font-family:var(--font-display);font-weight:600;font-size:19px;margin:26px 0 8px;color:var(--tend-ink)}
.legal p,.legal li{font-family:var(--font-body);font-size:16.5px;line-height:1.65;color:var(--text-secondary)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px;display:grid;gap:6px}
.legal a{color:var(--aqua-deep)}
.legal-note{padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface-sunk);font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--text-secondary);margin-bottom:28px}
@media (prefers-reduced-motion:reduce){.tend-c,.ld-tend{animation:none;background-position:0 0}.stat-row.cur4 .stat::before{transition:none;transform:none}.cookie-in{animation:none}.spec .rest{transition:none}}

.sci-mark{width:150px;flex:none;display:flex;align-items:center;justify-content:center;padding:16px}
@media (max-width:560px){.sci-mark{width:104px;padding:10px}.sci-mark .cmark{width:80px!important;height:80px!important}}
/* practitioners: the Compass in motion */
.pr-compass{margin:0;display:inline-flex;flex-direction:column;align-items:center;gap:14px}
.pr-dial{position:relative;display:inline-flex;padding:clamp(20px,3vw,40px);background:var(--surface-sunk);border-radius:var(--r-lg);isolation:isolate}
.pr-ring{position:absolute;inset:clamp(8px,1.4vw,18px);border-radius:50%;background:conic-gradient(from 0deg,var(--aqua-core),var(--coral-core),var(--amber-core),var(--violet-core),var(--aqua-core));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));opacity:.6;animation:prRing 24s linear infinite;z-index:-1}
@keyframes prRing{to{transform:rotate(360deg)}}
.pr-cap{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-data);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);animation:fadeUp var(--dur-base) var(--ease-out)}
.pr-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.pr-reg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.pr-reg{grid-template-columns:1fr}}
.pr-marks{margin-top:26px}
.pr-marks li{padding:14px 12px 10px;background:var(--c-tint);border-radius:var(--r-md);min-width:84px;transition:transform var(--dur-base) var(--ease-out)}
.pr-marks li:hover{transform:translateY(-3px)}
/* how it works: the steps */
.hw-steps{list-style:none;margin:0 auto;padding:0;display:grid;gap:18px;max-width:880px}
.hw-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start;position:relative}
.hw-step::before{content:"";position:absolute;left:27px;top:56px;bottom:-18px;width:2px;background:var(--c-core);opacity:.35}
.hw-step:last-child::before{display:none}
.hw-n{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-data);font-size:15px;color:var(--c-deep);background:var(--c-tint);border:2px solid var(--c-core)}
.hw-body{display:grid;gap:10px;border-top:3px solid var(--c-core)}
.hw-body .body{margin:0}
.hw-head{display:flex;gap:12px;align-items:center}
.hw-head h2{margin:0}
.hw-cta{color:var(--c-deep);font-weight:600}
@media (max-width:520px){.hw-step{grid-template-columns:40px minmax(0,1fr);gap:12px}.hw-n{width:40px;height:40px;font-size:13px}.hw-step::before{left:19px;top:40px}}
.mt-points{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mt-points li{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:16px;color:var(--text-secondary)}
.mt-points b{font-weight:600}
.why-marks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:clamp(14px,3vw,28px);justify-content:center}
.why-marks li{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:18px;padding:18px 22px;background:var(--surface-card);border:1px solid var(--rule);border-radius:var(--r-lg);transition:transform var(--dur-base) var(--ease-out)}
.why-marks li:hover{transform:translateY(-3px)}
.blog-cats .seg-btn{display:inline-flex;align-items:center;gap:8px}
.blog-empty{display:grid;gap:14px;max-width:760px}
.blog-sub{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.blog-sub .btn{min-height:48px}
.legal-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.legal-toc{position:sticky;top:96px}
.legal-toc ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.legal-toc a{font-family:var(--font-body);font-size:14.5px;color:var(--text-secondary);text-decoration:none;display:block;padding:6px 0}
.legal-toc a:hover{color:var(--aqua-deep)}
.legal h2{scroll-margin-top:96px}
.legal h2:first-of-type{margin-top:0}
@media (max-width:860px){.legal-grid{grid-template-columns:1fr}.legal-toc{position:static}}
/* packages */
.pk-price-head .section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(24px,5vw,72px);align-items:end}
.pk-price-head .section-head .eyebrow{grid-column:1/-1}
.pk-price-head .section-head .lead{margin:0!important;max-width:46ch}
@media (max-width:900px){.pk-price-head .section-head{grid-template-columns:1fr}.pk-price-head .section-head .lead{margin-top:16px!important}}
.pk-tn{font-weight:600}
.pk-tn .tn{color:inherit}
.pk-topic{transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)}
.pk-topic:hover,.pk-topic:focus-visible{border-color:var(--c-core)!important;background:color-mix(in srgb,var(--c-core) 8%,transparent)}
.pk-topic-cta{display:inline-block;margin-top:14px;font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--tend-page)}
.pc-lead{display:flex;gap:18px;align-items:center}
.ck-marks{margin:18px 0 6px;gap:16px}
.ck-marks li{font-size:14px}
.ck .ck-check input{accent-color:var(--energy-deep)}
.lb-spec{margin-top:14px}
@media (prefers-reduced-motion:reduce){.pr-ring,.pr-cap{animation:none}.pr-marks li,.why-marks li{transition:none}}
.pr-compass.still .pr-ring{animation:none}

/* ============================================================
   PHOTOGRAPHS, 17 October 2026
   Unsplash photographs, served from our own domain through /img/u
   (credits in design-source/photo-credits.md). Each page script has
   a small TPhoto helper that writes the figure below. One gentle
   grade lets photographs from different photographers sit together
   on the warm page: a little less saturation and a whisper of the
   page colour. Corners match the large-surface radius.
   ============================================================ */
.ph { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-sunk); isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); }
.ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--tend-page); opacity: 0.08; mix-blend-mode: multiply; pointer-events: none; }
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--wide { aspect-ratio: 16 / 7; }
@media (max-width: 680px) { .ph--wide { aspect-ratio: 3 / 2; } }

/* Page header with a photograph beside it (below it on narrow screens). */
.ph-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 940px) { .ph-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.ph-hero > .ph { width: 100%; max-width: 460px; justify-self: end; }
@media (max-width: 939px) { .ph-hero > .ph { max-width: none; justify-self: stretch; aspect-ratio: 3 / 2; } }

/* A wide photograph under a short page header. */
.ph-band { margin-top: clamp(28px, 4vw, 48px); }

/* Photograph inside a two-column section. */
.ph-side { width: 100%; justify-self: center; }
.pr-photo { margin-top: 26px; }