/* KÄNA LifeWorks — shared stylesheet. Mobile first, no framework. */

@font-face { font-family: "Raleway"; src: url("fonts/raleway.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("fonts/raleway-italic.woff") format("woff"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-quote.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }

:root {
  --navy: #002244;
  --navy-soft: #1d4166;
  --green-light: #4ab661;
  --green: #0d8b45;
  --green-dark: #0a7038;
  --ink: #1a1a1a;
  --ink-soft: #545454;
  --paper: #fbfaf7;
  --line: #d9dee3;
  --font-body: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Raleway", system-ui, sans-serif;
  --font-quote: "Fraunces", Georgia, serif;
  --text: 680px;
  --wide: 1200px;
  --gutter: 22px;
  --section: 64px;
}
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 900px) { :root { --gutter: 40px; --section: 104px; } }
@media (min-width: 1200px) { :root { --section: 124px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.68; font-weight: 400; overflow-x: hidden; }
@media (min-width: 900px) { body { font-size: 18px; } }
@media (min-width: 1200px) { body { font-size: 20px; } :root { --text: 760px; } }
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration-color: rgba(13,139,68,.6); text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
p { margin: 0 0 1.1em; }

h1, h2, h3 { font-family: var(--font-head); color: var(--navy); font-weight: 300; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 .6em; }
h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 2.1vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.65rem); font-weight: 400; }
.eyebrow { font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); font-weight: 700; margin-bottom: 1em; }
.lead { font-size: 1.15em; color: var(--ink); }
.statement { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); color: var(--navy); line-height: 1.3; margin: 1.4em 0 0; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; }

/* Layout */
.wrap { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.col { max-width: var(--text); margin-left: auto; margin-right: auto; }
.col.center { margin-left: auto; margin-right: auto; }
.section { padding: var(--section) 0; }
.section.tight { padding-top: calc(var(--section) * .5); }
.section + .section { padding-top: calc(var(--section) * .75); }
.band { background: var(--navy); color: #e8edf3; }
.band h2, .band h3, .band .statement { color: #fff; }
.band a:not(.btn) { color: #fff; }
.divider { width: 100%; max-width: var(--wide); margin: 0 auto; height: 28px; color: var(--line); background: none; }
.divider svg { width: 100%; height: 100%; display: block; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,250,247,.94); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid rgba(0,34,69,.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; padding: 6px 0; }
.logo img { height: 40px; width: auto; }
@media (min-width: 1000px) { .logo img { height: 46px; } }
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy); cursor: pointer; border-radius: 8px; }
.menu-toggle svg { width: 24px; height: 24px; }
.header-actions .btn-book-sm { font-size: .8rem; padding: 10px 12px; min-height: 44px; white-space: nowrap; letter-spacing: 0; }
@media (max-width: 380px) { .logo img { height: 34px; } }

.nav { display: none; }
.nav.open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; box-shadow: 0 20px 30px -24px rgba(0,34,69,.3); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul > li { border-bottom: 1px solid var(--line); }
.nav a { display: block; padding: 14px 0; text-decoration: none; color: var(--navy); font-weight: 500; }
.nav .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
.nav .has-sub > a { flex: 1; }
.sub-toggle { width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy); cursor: pointer; }
.sub-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav .submenu { width: 100%; padding: 0 0 8px 18px; margin-bottom: 10px; }
.nav .submenu a { padding: 10px 0; font-weight: 400; }
.nav .nav-book { display: none; }

@media (min-width: 1000px) {
  .menu-toggle, .header-actions .btn-book-sm { display: none; }
  .nav, .nav.open { display: flex; position: static; padding: 0; background: none; border: 0; box-shadow: none; align-items: center; }
  .nav > ul { display: flex; align-items: center; gap: 4px; }
  .nav > ul > li { border: 0; position: relative; }
  .nav a { padding: 10px 12px; font-size: .95rem; }
  .nav .has-sub { flex-wrap: nowrap; }
  .nav .has-sub > a { padding-right: 2px; }
  .sub-toggle { width: 28px; }
  .nav .submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--paper); border: 1px solid var(--line); border-left: 0; border-top: 2px solid var(--green); padding: 8px 0; margin: 0; box-shadow: 0 16px 30px -20px rgba(0,34,69,.35); }
  .nav .submenu a { padding: 10px 18px; }
  .nav .has-sub:hover .submenu, .nav .has-sub:focus-within .submenu, .nav .submenu.open { display: block; }
  .nav .nav-book { display: block; margin-left: 12px; }
  .nav .nav-book a.btn { padding: 10px 18px; min-height: 44px; color: #fff; font-size: .9rem; }
}
.nav .submenu[hidden] { display: none !important; }
@media (min-width: 1000px) { .nav .has-sub:hover .submenu[hidden], .nav .has-sub:focus-within .submenu[hidden] { display: block !important; } }
@media (max-width: 999px) { .nav .submenu:not([hidden]) { display: block; } }

/* Minimal header on direct-share pages */
.mini-nav { display: flex; gap: 4px; }
.mini-nav a { text-decoration: none; padding: 10px 8px; font-size: .9rem; font-weight: 500; color: var(--navy); }
@media (min-width: 600px) { .mini-nav a { padding: 10px 12px; font-size: .95rem; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 26px; border-radius: 2px; font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .02em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; text-align: center; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; }
.band .btn-secondary, .on-dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,.85); }
.band .btn-secondary:hover, .on-dark .btn-secondary:hover { background: #fff; color: var(--navy); }
.btn-row { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.btn-row .btn { width: 100%; }
@media (min-width: 600px) { .btn-row { flex-direction: row; flex-wrap: wrap; } .btn-row .btn { width: auto; } }
.cta-note { margin: 28px 0 0; color: var(--ink-soft); }

/* Hero */
.hero { --ridge: max(150px, 33.75vw); position: relative; display: flex; align-items: flex-start; overflow: hidden; background: linear-gradient(180deg, #dfe7ee 0%, #eef0ee 55%, #f5f2ec 100%); }
.hero::before { content: ""; position: absolute; right: -10%; top: 10%; width: 70%; height: 70%; background: radial-gradient(closest-side, rgba(255,248,232,.95), rgba(255,248,232,0)); pointer-events: none; }
.hero-bg { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ridge); background: url("img/landscape-light.svg") center bottom / cover no-repeat; }
@media (min-width: 1500px) { .hero { --ridge: 500px; } .hero-bg { background-size: 100% auto; } }
.hero-inner { position: relative; padding-top: clamp(48px, 9vh, 112px); padding-bottom: calc(var(--ridge) * .72); }
.hero .brand { font-family: var(--font-body); font-weight: 700; letter-spacing: .22em; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); color: var(--navy); margin-bottom: .8em; }
.hero-inner > * { max-width: var(--text); margin-left: 0; margin-right: 0; }
.hero-inner > .btn-row { margin-top: 28px; }

.hero .intro p:first-child { font-size: 1.12em; color: var(--navy); }


.page-hero { padding: calc(var(--section) * .8) 0 calc(var(--section) * .6); }


/* Image moments */
.landscape { position: relative; width: 100%; height: 220px; background: center / cover no-repeat; }
@media (min-width: 600px) { .landscape { height: 340px; } }
@media (min-width: 1200px) { .landscape { height: 460px; } }
.landscape.light { background-image: url("img/landscape-wide.svg"); }
.landscape.horizon { background-image: url("img/landscape-horizon.svg"); }
.placeholder-tag { position: absolute; right: 10px; bottom: 10px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.82); color: var(--ink-soft); padding: 4px 8px; border-radius: 2px; }

/* Closing CTA over horizon */
.closing { position: relative; background: var(--navy) url("img/landscape-horizon.svg") center bottom / cover no-repeat; color: #e8edf3; padding: calc(var(--section) * 1.1) 0 calc(var(--section) * 1.6); }
.closing h2 { color: #fff; }
.closing p { color: #dfe6ee; }
.closing .btn-row + p { margin-top: 44px; }

/* Testimonials */
.quote { margin: 0; padding: 0; }
.quote blockquote { margin: 0; font-family: var(--font-quote); font-weight: 300; font-size: 1.32em; line-height: 1.45; color: var(--navy); }
.quote blockquote p { margin: 0; }
.quote figcaption { margin-top: 1.1em; font-size: .95rem; color: var(--ink-soft); letter-spacing: .02em; }
.quote.small blockquote { font-size: 1.22em; line-height: 1.5; }
.quote-pair { display: grid; gap: 48px; }
@media (min-width: 900px) { .quote-pair { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Two paths */
.paths { display: grid; gap: 64px; }
@media (min-width: 900px) { .paths { grid-template-columns: 1fr 1fr; gap: 80px; } }
.path h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); }
.path .btn { margin-top: 10px; }
.path-rule { border-top: 1px solid var(--line); padding-top: 28px; }

/* Media + text split */
.split { display: grid; gap: 32px; align-items: start; }
.split .media { width: 100%; height: 220px; background: center / cover no-repeat; }
@media (min-width: 900px) {
  .split { grid-template-columns: 60fr 40fr; gap: 64px; }
  .split.media-left { grid-template-columns: 40fr 60fr; }
  .split.media-left .media { order: -1; }
  .split .media { height: 100%; min-height: 420px; }
}
.media { position: relative; }
.media.blue-rock { background-image: url("img/blue-rock-placeholder.svg"); }
.media.stone { background-image: url("img/texture-stone.svg"); }

/* Pain points: compact callouts */
.callouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.callouts li { padding: 18px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 1.05em; }
@media (min-width: 900px) {
  .callouts { grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 6px; }
  .callouts li { padding: 22px 0; }
  .callouts li:last-child { grid-column: 1 / -1; max-width: calc(50% - 28px); }
}

/* Light list (insight beat) */
.soft-list { list-style: none; margin: 1.2em 0; padding: 0; }
.soft-list li { padding: 6px 0 6px 26px; position: relative; }
.soft-list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 14px; height: 1.5px; background: var(--green); }

/* How I Work steps */
.steps { counter-reset: step; }
.step { padding: 36px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step h3 { display: flex; gap: 16px; align-items: baseline; }
.step h3 .num { font-family: var(--font-body); font-weight: 300; font-size: 2.2rem; color: var(--green); line-height: 1; min-width: 1.2em; }
@media (min-width: 900px) { .step { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; } .step h3 { margin: 0; } }

/* Leadership patterns */
.patterns { list-style: none; padding: 0; margin: 0; }
.patterns li { padding: 22px 0; border-top: 1px solid var(--line); }
.patterns li:last-child { border-bottom: 1px solid var(--line); }
.patterns h3 { margin: 0 0 .3em; font-size: 1.2rem; font-weight: 500; }
.patterns p { margin: 0; color: var(--ink-soft); }
@media (min-width: 900px) { .patterns li { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: baseline; } }

/* Ripple table */
.ripple { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ripple th { text-align: left; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #b9c8d8; font-weight: 600; padding: 0 0 14px; }
.ripple td { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.18); vertical-align: top; color: #fff; font-size: 1.05rem; }
.ripple td:first-child { width: 45%; padding-right: 20px; color: #cfdae6; }
.ripple td:last-child::before { content: "→ "; color: var(--green-light); }

/* Tags */
.tags { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li { border: 1px solid var(--navy); color: var(--navy); padding: 8px 16px; border-radius: 40px; font-size: .95rem; font-weight: 500; }

/* Three-step sequence */
.sequence { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.sequence .n { display: block; font-size: .8rem; letter-spacing: .18em; color: var(--green-dark); font-weight: 600; margin-bottom: 8px; }
.sequence h3 { margin-bottom: .4em; }
@media (min-width: 900px) { .sequence { grid-template-columns: repeat(3, 1fr); gap: 56px; } }

/* Video placeholder */
.video { margin: 0; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #0f2f52, #002244); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.video-frame .play { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.video-frame .play::after { content: ""; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.video-frame .vt { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem); }
.video-frame .vn { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-top: 8px; }

/* Forms */
.form { max-width: 620px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 8px; font-size: .98rem; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; padding: 14px 14px; border: 1px solid #b8c2cc; border-radius: 2px; background: #fff; color: var(--ink); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--navy); outline: 2px solid rgba(13,139,68,.35); outline-offset: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 24px; }
.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--green); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; }
@media (min-width: 600px) { .form .btn { width: auto; } }
.consent { font-size: .9rem; color: var(--ink-soft); margin-top: 14px; }
.form-status { margin-top: 18px; font-weight: 500; color: var(--navy); }
.form-status.error { color: #a33; }
.band .field label { color: #fff; }
.band .consent { color: #c9d4df; }

/* Dialog (general contact) */
dialog.contact-dialog { border: 0; padding: 0; width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
dialog.contact-dialog::backdrop { background: rgba(0,20,40,.55); }
.dialog-inner { padding: 32px 24px; position: relative; }
@media (min-width: 600px) { .dialog-inner { padding: 40px; } }
.dialog-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.6rem; color: var(--navy); cursor: pointer; }

/* Footer */
.site-footer { padding: 0 0 40px; background: var(--paper); }
.footer-ridge { height: 40px; color: #9fb0c0; margin-bottom: 40px; }
.footer-ridge svg { width: 100%; height: 100%; display: block; }
.footer-grid { display: grid; gap: 32px; }
.footer-logo { width: 150px; height: auto; }
.footer-brand p { color: var(--ink-soft); margin-top: 6px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.footer-links a, .footer-links button { display: inline-block; padding: 8px 0; color: var(--navy); text-decoration: none; font-size: .95rem; background: none; border: 0; font: inherit; font-size: .95rem; cursor: pointer; text-align: left; }
.footer-links a:hover, .footer-links button:hover { color: var(--green-dark); text-decoration: underline; }
.footer-legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr 2fr; } .footer-links { grid-template-columns: repeat(3, 1fr); } }

/* Legal pages */
.legal h2 { font-size: 1.45rem; font-weight: 500; margin-top: 2em; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1em 0 1.6em; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); }
.legal th { color: var(--navy); font-weight: 600; }
.draft-note { border-left: 3px solid #c58b00; padding: 12px 16px; background: #fff8e6; font-size: .95rem; margin-bottom: 2em; }
.legal .table-scroll { overflow-x: auto; }

/* Gentle reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Photos */
.photo { display: block; }
.photo img { width: 100%; height: auto; display: block; }
.photo.portrait img { aspect-ratio: 2 / 3; object-fit: cover; }
.photo.wide img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 60% 40%; }
@media (min-width: 900px) { .photo.wide img { aspect-ratio: 21 / 9; object-position: 60% 35%; } }
.quote-split { align-items: center; }
@media (min-width: 900px) { .quote-split { grid-template-columns: 40fr 60fr; } }
.on-dark-accent, .band .eyebrow, .closing .eyebrow { color: var(--green-light); }

/* Testimonials on a solid navy band */
.quote-band, .section.quote-band, .section + .section.quote-band { padding-top: calc(var(--section) * .55); padding-bottom: calc(var(--section) * .55); }
.quote-band + .section { padding-top: var(--section); }

.quote-band .quote { text-align: center; }
.quote-band { background: var(--navy); }
.quote-band .quote blockquote { color: #fff; }
.quote-band .quote figcaption { color: var(--green-light); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.quote-band .quote figcaption { font-variant: normal; }

/* Wider lists stay centred with their headings */
.mid, .patterns, .steps, .sequence, .callouts { max-width: 960px; margin-left: auto; margin-right: auto; }
.steps .step h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }
.mid p { max-width: var(--text); }

.video-wide { max-width: 960px; margin-left: auto; margin-right: auto; }

/* Home: the two paths, clearly divided */
.paths-divided { gap: 0; }
.paths-divided .path { padding: 8px 0 48px; }
.paths-divided .path + .path { border-top: 1px solid rgba(0,34,68,.35); padding-top: 48px; }
.path-icon { width: 88px; height: 66px; display: block; margin-bottom: 22px; }
.paths-divided .path h2 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem); font-weight: 400; }
.paths-divided .path .btn { margin-top: 16px; }
@media (min-width: 900px) {
  .paths-divided { grid-template-columns: 1fr 1fr; }
  .paths-divided .path { padding: 8px 64px 8px 0; }
  .paths-divided .path + .path { border-top: 0; border-left: 1px solid rgba(0,34,68,.35); padding: 8px 0 8px 64px; }
}
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); color: #fff; }
.paths-divided .path p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.paths-divided .path .path-cta { color: var(--navy); font-weight: 600; margin-top: 1.6em; -webkit-hyphens: none; hyphens: none; }

/* Home: About Dave text with a photo the height of the text */
.about-text p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.about-photo .photo.portrait img { aspect-ratio: auto; height: 380px; object-fit: cover; object-position: 50% 25%; }
@media (min-width: 900px) {
  .about-split { grid-template-columns: 1fr 300px; gap: 56px; align-items: center; }
  .about-photo .photo.portrait img { height: 440px; }
}
@media (min-width: 1200px) { .about-split { grid-template-columns: 1fr 340px; } }

/* Video placeholder: full-width navy cinema band at the final 16:9 shape */
.video-full { width: 100vw; margin-left: calc(50% - 50vw); }
.video-full .video-frame { aspect-ratio: auto; height: min(56.25vw, 80vh); min-height: 220px; background: var(--navy); }
.video-full .video-frame .play { width: clamp(64px, 6vw, 104px); height: clamp(64px, 6vw, 104px); border-width: 1.5px; margin-bottom: clamp(16px, 2vw, 32px); }
.video-full .video-frame .play::after { border-left-width: clamp(16px, 1.5vw, 26px); border-top-width: clamp(10px, .95vw, 16px); border-bottom-width: clamp(10px, .95vw, 16px); }
.video-full .video-frame .vt { font-size: clamp(1.4rem, 1rem + 2vw, 3rem); font-weight: 300; max-width: 90%; }
.video-full .video-frame .vn { color: var(--green-light); opacity: 1; font-size: .85rem; margin-top: 14px; }

/* Home closing: two paths side by side over a light ridgeline */
.closing-split { --ridge: max(150px, 33.75vw); position: relative; overflow: hidden; background: linear-gradient(180deg, #dfe7ee 0%, #eef0ee 60%, #f5f2ec 100%); padding: var(--section) 0 calc(var(--ridge) * .62); }
.closing-ridge { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ridge); background: url("img/landscape-light.svg") center bottom / cover no-repeat; }
@media (min-width: 1500px) { .closing-split { --ridge: 500px; } .closing-ridge { background-size: 100% auto; } }
.closing-grid { position: relative; display: grid; gap: 0; max-width: 1000px; margin: 0 auto; text-align: center; }
.closing-grid > div { padding: 8px 0 40px; }
.closing-grid > div + div { border-top: 1px solid rgba(0,34,68,.35); padding-top: 40px; }
.closing-grid h2 { font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.6rem); margin-bottom: 28px; }
@media (min-width: 900px) {
  .closing-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .closing-grid > div { padding: 8px 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
  .closing-grid > div + div { border-top: 0; border-left: 1px solid rgba(0,34,68,.35); padding-top: 8px; }
}

/* Light centred closing (About) */
.closing-light { --ridge: max(150px, 33.75vw); position: relative; overflow: hidden; background: linear-gradient(180deg, #dfe7ee 0%, #eef0ee 60%, #f5f2ec 100%); padding: var(--section) 0 calc(var(--ridge) * .62); }
@media (min-width: 1500px) { .closing-light { --ridge: 500px; } }
.closing-center { position: relative; text-align: center; }
.closing-center h2 { margin-bottom: 40px; }
.closing-center .eyebrow { color: var(--navy); margin-bottom: 14px; }

/* ===== Site-wide patterns carried over from Home ===== */

/* 2. Justified body paragraphs */
main p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
main .quote p, main .eyebrow, main .statement, main .brand, main .consent, main .form-status, main .path-cta,
main .closing-center p, main .video-frame p { text-align: inherit; -webkit-hyphens: manual; hyphens: manual; }
main .path-cta { text-align: justify; }

/* 3. Secondary buttons: solid navy on light backgrounds (white outline stays on navy) */
.btn-secondary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy-soft); border-color: var(--navy-soft); color: #fff; }
.band .btn-secondary, .on-dark .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.band .btn-secondary:hover, .on-dark .btn-secondary:hover { background: #fff; color: var(--navy); }

/* 4. Text beside an image: image matches the text, text centred against it */
@media (min-width: 900px) {
  .split:not(.about-split):not(.quote-split) { align-items: stretch; }
  .split:not(.about-split):not(.quote-split) .media { height: auto; min-height: 320px; }
  .split:not(.about-split):not(.quote-split) > div:not(.media) { align-self: center; }
  .quote-split { align-items: stretch; }
  .quote-split .photo { position: relative; height: 100%; min-height: 280px; }
  .quote-split .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .quote-split .quote { align-self: center; }
}

/* 5. Thin dividing lines between columns */
@media (min-width: 900px) {
  .sequence { gap: 0; }
  .sequence > li { padding: 0 40px; }
  .sequence > li:first-child { padding-left: 0; }
  .sequence > li:last-child { padding-right: 0; }
  .sequence > li + li { border-left: 1px solid rgba(0,34,68,.35); }
  .quote-pair { gap: 0; }
  .quote-pair > div { padding: 0 48px; }
  .quote-pair > div:first-child { padding-left: 0; }
  .quote-pair > div:last-child { padding-right: 0; }
  .quote-pair > div + div { border-left: 1px solid rgba(255,255,255,.3); }
}
@media (max-width: 899px) {
  .sequence > li + li { border-top: 1px solid rgba(0,34,68,.35); padding-top: 36px; }
  .quote-pair > div + div { border-top: 1px solid rgba(255,255,255,.3); padding-top: 40px; }
}
main .sequence p { text-align: left; }
.statement-accent { color: var(--green); font-weight: 600; padding-top: 22px; position: relative; margin-top: 1.8em; }
.statement-accent::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 1.5px; background: var(--navy); }

/* Personal Coaching: seven pain points with icons */
.callouts-icons li { display: flex; gap: 20px; align-items: flex-start; }
.callouts-icons .ic { flex: none; width: 44px; height: 44px; margin-top: 2px; }
.callouts-icons .ic svg { width: 100%; height: 100%; display: block; }
@media (min-width: 900px) {
  .callouts-icons li:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 28px); max-width: none; }
}
.callouts-icons li > span:last-child { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* Personal Coaching: slightly tighter spacing between sections */
.page-personal { --section: 52px; }
@media (min-width: 900px) { .page-personal { --section: 84px; } }
@media (min-width: 1200px) { .page-personal { --section: 100px; } }
.page-personal .pc-hero { padding-bottom: calc(var(--section) * .4); }
.page-personal .section + .section.pc-pain { padding-top: calc(var(--section) * .4); }

/* Light sky band for a single call to action */
.sky-band { background: linear-gradient(180deg, #dfe7ee 0%, #eef0ee 60%, #f5f2ec 100%); padding: calc(var(--section) * .8) 0; }
.sky-band h2 { margin-bottom: 28px; }
.page-personal .pc-video { padding-bottom: 0; }

/* Personal Coaching: When it works until it doesn't */
.shifts-head { max-width: var(--text); margin: 0 auto; text-align: center; }
main .shifts-head p { text-align: center; }
.shifts-row { list-style: none; margin: 36px auto 8px; padding: 0; max-width: 1100px; border-top: 1px solid rgba(0,34,68,.3); border-bottom: 1px solid rgba(0,34,68,.3); }
.shifts-row li { padding: 16px 12px; color: var(--navy); font-weight: 500; text-align: center; }
.shifts-row li + li { border-top: 1px solid rgba(0,34,68,.15); }
@media (min-width: 900px) {
  .shifts-row { display: grid; grid-template-columns: repeat(5, 1fr); }
  .shifts-row li { padding: 24px 18px; display: flex; align-items: center; justify-content: center; }
  .shifts-row li + li { border-top: 0; border-left: 1px solid rgba(0,34,68,.2); }
}
.shifts .statement-accent { display: inline-block; }
.shifts .statement-accent::before { left: 50%; transform: translateX(-50%); }
.sky-band + .sky-band { border-top: 1px solid rgba(0,34,68,.12); }
/* The five shifts fade from left to right, with an arrow underneath */
.shifts-row li:nth-child(1) { color: #002244; }
.shifts-row li:nth-child(2) { color: #1f3d5e; }
.shifts-row li:nth-child(3) { color: #3a5675; }
.shifts-row li:nth-child(4) { color: #536d89; }
.shifts-row li:nth-child(5) { color: #6b8199; }
.shifts-arrow { display: none; }
@media (min-width: 900px) { .shifts-arrow { display: block; width: 100%; max-width: 1100px; height: 20px; margin: 14px auto 0; } }

/* Personal Coaching: Ready to start on navy, joined to the video */
.ready-navy { background: var(--navy); color: #fff; padding: 0 0 calc(var(--section) * .9); }
.ready-navy h2 { color: #fff; margin-bottom: 28px; }
.page-personal .sky-band.shifts { padding: var(--section) 0; }

/* How I Work: large light green numbers beside each step */
.steps .step { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 36px 0; }
.steps .step .num { font-family: var(--font-body); font-weight: 200; font-size: 64px; line-height: 1; color: var(--green); letter-spacing: -.02em; }
.steps .step h3 { display: block; margin: 0 0 .6em; }
@media (min-width: 900px) {
  .steps .step { grid-template-columns: 160px 1fr; gap: 40px; padding: 44px 0; }
  .steps .step .num { font-size: 96px; }
}
/* How I Work: stronger step headings, bigger numbers */
.steps .step h3 { font-weight: 600; color: var(--navy); }
.steps .step .num { font-size: 80px; }
@media (min-width: 900px) { .steps .step { grid-template-columns: 190px 1fr; } .steps .step .num { font-size: 128px; } }

/* Coaching and Therapy: texture band with the text on a paper block */
.texture-band { position: relative; background: url("img/texture-stone.svg") center / cover no-repeat; padding: calc(var(--section) * 1.1) 0; }
.texture-band .placeholder-tag { z-index: 1; }
.paper-block { position: relative; background: var(--paper); padding: 40px 24px 28px; max-width: 680px; margin: 0 auto; }
@media (min-width: 900px) { .paper-block { padding: 56px 56px 40px; margin-left: auto; margin-right: 6%; } }

/* ===== Personal Coaching patterns carried to the other pages ===== */
.page-tight { --section: 52px; }
@media (min-width: 900px) { .page-tight { --section: 84px; } }
@media (min-width: 1200px) { .page-tight { --section: 100px; } }
.video-join { padding-bottom: 0; }
.band.after-video { padding-top: calc(var(--section) * .9); }
.sky-band:not(.shifts) { padding: var(--section) 0; }
.page-personal .sky-band:not(.shifts) { padding: calc(var(--section) * .8) 0; }
.ripple-sky .ripple th { color: var(--ink-soft); }
.ripple-sky .ripple td { color: var(--navy); border-top-color: rgba(0,34,68,.2); }
.ripple-sky .ripple td:first-child { color: var(--ink-soft); }
.ripple-sky .ripple td:last-child::before { color: var(--green); }
.sequence .big-num { font-family: var(--font-body); font-weight: 200; font-size: 80px; line-height: 1; color: var(--green); letter-spacing: -.02em; margin-bottom: 18px; }
@media (min-width: 900px) { .sequence .big-num { font-size: 112px; } }
.landscape-band { background-image: url("img/landscape-wide.svg"); background-position: center bottom; }
.patterns h3 { font-weight: 600; color: var(--navy); }

/* About: title over Dave's portrait, in the shadowed side */
.photo-hero { position: relative; height: min(78vh, 680px); min-height: 460px; overflow: hidden; background: #111; }
.photo-hero-bg, .photo-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-hero-bg img { object-fit: cover; object-position: 68% 30%; }
.photo-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,20,.78) 0%, rgba(10,14,20,.4) 45%, rgba(10,14,20,0) 72%); }
.photo-hero-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 56px; }
.photo-hero-inner > * { max-width: 12ch; }
.photo-hero .eyebrow { color: #fff; max-width: none; }
.photo-hero h1 { color: #fff; margin: 0; }
@media (max-width: 899px) {
  .photo-hero::after { background: linear-gradient(0deg, rgba(10,14,20,.82) 0%, rgba(10,14,20,.35) 50%, rgba(10,14,20,0) 75%); }
  .photo-hero-bg img { object-position: 62% 30%; }
  .photo-hero-inner > * { max-width: none; }
}
@media (min-width: 900px) { .photo-hero-inner { padding-bottom: 88px; } }

/* About: end of Dave's story */
.story-end { text-align: center; }
main .story-end p { text-align: center; -webkit-hyphens: manual; hyphens: manual; }
.story-end-1 { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.3; color: var(--navy); margin-bottom: 0; }
.story-end-2 { display: inline-block; font-size: 1em; }
.story-end .statement-accent::before { left: 50%; transform: translateX(-50%); }

/* ===== Real landscape photos ===== */
.photo-01 { background-image: url("img/landscapes/01-1200.jpg"); background-image: image-set(url("img/landscapes/01-1200.webp") type("image/webp"), url("img/landscapes/01-1200.jpg") type("image/jpeg")); }
.photo-02 { background-image: url("img/landscapes/02-1200.jpg"); background-image: image-set(url("img/landscapes/02-1200.webp") type("image/webp"), url("img/landscapes/02-1200.jpg") type("image/jpeg")); }
.photo-03 { background-image: url("img/landscapes/03-1200.jpg"); background-image: image-set(url("img/landscapes/03-1200.webp") type("image/webp"), url("img/landscapes/03-1200.jpg") type("image/jpeg")); }
.photo-04 { background-image: url("img/landscapes/04-1200.jpg"); background-image: image-set(url("img/landscapes/04-1200.webp") type("image/webp"), url("img/landscapes/04-1200.jpg") type("image/jpeg")); }
.photo-05 { background-image: url("img/landscapes/05-1200.jpg"); background-image: image-set(url("img/landscapes/05-1200.webp") type("image/webp"), url("img/landscapes/05-1200.jpg") type("image/jpeg")); }
.photo-06 { background-image: url("img/landscapes/06-1200.jpg"); background-image: image-set(url("img/landscapes/06-1200.webp") type("image/webp"), url("img/landscapes/06-1200.jpg") type("image/jpeg")); }
.photo-07 { background-image: url("img/landscapes/07-1200.jpg"); background-image: image-set(url("img/landscapes/07-1200.webp") type("image/webp"), url("img/landscapes/07-1200.jpg") type("image/jpeg")); }
.photo-08 { background-image: url("img/landscapes/08-1200.jpg"); background-image: image-set(url("img/landscapes/08-1200.webp") type("image/webp"), url("img/landscapes/08-1200.jpg") type("image/jpeg")); }
.photo-09 { background-image: url("img/landscapes/09-1200.jpg"); background-image: image-set(url("img/landscapes/09-1200.webp") type("image/webp"), url("img/landscapes/09-1200.jpg") type("image/jpeg")); }
.photo-10 { background-image: url("img/landscapes/10-1200.jpg"); background-image: image-set(url("img/landscapes/10-1200.webp") type("image/webp"), url("img/landscapes/10-1200.jpg") type("image/jpeg")); }
.photo-11 { background-image: url("img/landscapes/11-1200.jpg"); background-image: image-set(url("img/landscapes/11-1200.webp") type("image/webp"), url("img/landscapes/11-1200.jpg") type("image/jpeg")); }
.photo-12 { background-image: url("img/landscapes/12-1200.jpg"); background-image: image-set(url("img/landscapes/12-1200.webp") type("image/webp"), url("img/landscapes/12-1200.jpg") type("image/jpeg")); }
.photo-13 { background-image: url("img/landscapes/13-1200.jpg"); background-image: image-set(url("img/landscapes/13-1200.webp") type("image/webp"), url("img/landscapes/13-1200.jpg") type("image/jpeg")); }
.photo-14 { background-image: url("img/landscapes/14-1200.jpg"); background-image: image-set(url("img/landscapes/14-1200.webp") type("image/webp"), url("img/landscapes/14-1200.jpg") type("image/jpeg")); }
@media (min-width: 900px) {
  .photo-01 { background-image: url("img/landscapes/01-2400.jpg"); background-image: image-set(url("img/landscapes/01-2400.webp") type("image/webp"), url("img/landscapes/01-2400.jpg") type("image/jpeg")); }
  .photo-02 { background-image: url("img/landscapes/02-2400.jpg"); background-image: image-set(url("img/landscapes/02-2400.webp") type("image/webp"), url("img/landscapes/02-2400.jpg") type("image/jpeg")); }
  .photo-03 { background-image: url("img/landscapes/03-2400.jpg"); background-image: image-set(url("img/landscapes/03-2400.webp") type("image/webp"), url("img/landscapes/03-2400.jpg") type("image/jpeg")); }
  .photo-04 { background-image: url("img/landscapes/04-2400.jpg"); background-image: image-set(url("img/landscapes/04-2400.webp") type("image/webp"), url("img/landscapes/04-2400.jpg") type("image/jpeg")); }
  .photo-05 { background-image: url("img/landscapes/05-2400.jpg"); background-image: image-set(url("img/landscapes/05-2400.webp") type("image/webp"), url("img/landscapes/05-2400.jpg") type("image/jpeg")); }
  .photo-06 { background-image: url("img/landscapes/06-2400.jpg"); background-image: image-set(url("img/landscapes/06-2400.webp") type("image/webp"), url("img/landscapes/06-2400.jpg") type("image/jpeg")); }
  .photo-07 { background-image: url("img/landscapes/07-2400.jpg"); background-image: image-set(url("img/landscapes/07-2400.webp") type("image/webp"), url("img/landscapes/07-2400.jpg") type("image/jpeg")); }
  .photo-08 { background-image: url("img/landscapes/08-2400.jpg"); background-image: image-set(url("img/landscapes/08-2400.webp") type("image/webp"), url("img/landscapes/08-2400.jpg") type("image/jpeg")); }
  .photo-09 { background-image: url("img/landscapes/09-2400.jpg"); background-image: image-set(url("img/landscapes/09-2400.webp") type("image/webp"), url("img/landscapes/09-2400.jpg") type("image/jpeg")); }
  .photo-10 { background-image: url("img/landscapes/10-2400.jpg"); background-image: image-set(url("img/landscapes/10-2400.webp") type("image/webp"), url("img/landscapes/10-2400.jpg") type("image/jpeg")); }
  .photo-11 { background-image: url("img/landscapes/11-2400.jpg"); background-image: image-set(url("img/landscapes/11-2400.webp") type("image/webp"), url("img/landscapes/11-2400.jpg") type("image/jpeg")); }
  .photo-12 { background-image: url("img/landscapes/12-2400.jpg"); background-image: image-set(url("img/landscapes/12-2400.webp") type("image/webp"), url("img/landscapes/12-2400.jpg") type("image/jpeg")); }
  .photo-13 { background-image: url("img/landscapes/13-2400.jpg"); background-image: image-set(url("img/landscapes/13-2400.webp") type("image/webp"), url("img/landscapes/13-2400.jpg") type("image/jpeg")); }
  .photo-14 { background-image: url("img/landscapes/14-2400.jpg"); background-image: image-set(url("img/landscapes/14-2400.webp") type("image/webp"), url("img/landscapes/14-2400.jpg") type("image/jpeg")); }
}
.landscape[class*="photo-"] { background-size: cover; background-repeat: no-repeat; background-position: center; }
.landscape.photo-13 { background-position: center 45%; }
.landscape.photo-04 { background-position: center 55%; }
.landscape.photo-12 { background-position: center 62%; }
.landscape.photo-02 { background-position: center 70%; }

/* Home hero: full photo, light veil on the text side */
.hero { background: #dfe7ee; min-height: 88vh; min-height: 88svh; }
.hero::before { display: none; }
.hero .hero-bg[class*="photo-"] { top: 0; height: auto; background-size: cover; background-position: center 72%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,250,247,.82) 0%, rgba(251,250,247,.55) 40%, rgba(251,250,247,0) 68%); pointer-events: none; }
.hero-inner { z-index: 1; padding-bottom: clamp(200px, 30vh, 340px); }
@media (max-width: 899px) { .hero::after { background: linear-gradient(180deg, rgba(251,250,247,.86) 0%, rgba(251,250,247,.7) 55%, rgba(251,250,247,0) 85%); } .hero .hero-bg[class*="photo-"] { background-position: 62% 80%; } }

/* Texture bands with real photos */
.texture-band[class*="photo-"] { background-size: cover; background-position: center; }
.texture-band.photo-09 { background-position: center 55%; }

/* Navy closings over a dark mountain photo */
.closing.closing-photo { background: var(--navy); position: relative; overflow: hidden; }
.closing.closing-photo::before { content: ""; position: absolute; inset: 0; background-image: url("img/landscapes/03-1200.jpg"); background-image: image-set(url("img/landscapes/03-1200.webp") type("image/webp"), url("img/landscapes/03-1200.jpg") type("image/jpeg")); background-size: cover; background-position: center 40%; opacity: .55; }
@media (min-width: 900px) { .closing.closing-photo::before { background-image: url("img/landscapes/03-2400.jpg"); background-image: image-set(url("img/landscapes/03-2400.webp") type("image/webp"), url("img/landscapes/03-2400.jpg") type("image/jpeg")); } }
.closing.closing-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,34,68,.55) 0%, rgba(0,34,68,.75) 100%); }
.closing.closing-photo > .wrap { position: relative; z-index: 1; }
.closing.closing-photo { padding-bottom: calc(var(--section) * 1.1); }

/* Light closings (Home, About): soft fog photo */
.closing-split .closing-ridge, .closing-light .closing-ridge { display: none; }
.closing-split, .closing-light { background: #eef0f2 center 60% / cover no-repeat; padding-bottom: var(--section); position: relative; }
.closing-split::before, .closing-light::before { content: ""; position: absolute; inset: 0; background-image: url("img/landscapes/10-1200.jpg"); background-image: image-set(url("img/landscapes/10-1200.webp") type("image/webp"), url("img/landscapes/10-1200.jpg") type("image/jpeg")); background-size: cover; background-position: center 30%; }
@media (min-width: 900px) { .closing-split::before, .closing-light::before { background-image: url("img/landscapes/10-2400.jpg"); background-image: image-set(url("img/landscapes/10-2400.webp") type("image/webp"), url("img/landscapes/10-2400.jpg") type("image/jpeg")); } }
.closing-split::after, .closing-light::after { content: ""; position: absolute; inset: 0; background: rgba(251,250,247,.6); }
.closing-split > .wrap, .closing-light > .wrap { position: relative; z-index: 1; }
.closing-split, .closing-light { padding-top: calc(var(--section) * 1.1); padding-bottom: calc(var(--section) * 1.1); }