/* ==========================================================================
   Soteria Coaching — soteriacoaching.com
   Design system + layout + motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS (self-hosted — no external requests, nothing to configure)
   -------------------------------------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/source-serif-4-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (from logo) */
  --navy:        #0D3749;
  --navy-800:    #0A2C3A;
  --navy-900:    #071F2A;
  --navy-700:    #14455A;
  --rust:        #B85C37;
  --rust-600:    #A24D2B;
  --rust-300:    #D89372;
  --forest:      #4A6053;
  --forest-300:  #8CA093;

  /* Neutrals */
  --paper:       #FFFFFF;
  --cream:       #F8F5F0;
  --cream-2:     #F0EBE3;
  --line:        #E2DCD2;
  --line-strong: #CFC6B8;

  /* Text */
  --ink:         #14242E;
  --ink-2:       #3D5260;
  --ink-3:       #637885;
  --muted:       #5C7180;
  --on-dark:     #EAF0F3;
  --on-dark-2:   #A9BFCA;

  /* Type */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 132px);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .55s;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(13,55,73,.06), 0 4px 14px rgba(13,55,73,.05);
  --shadow-md: 0 2px 6px rgba(13,55,73,.07), 0 18px 40px -12px rgba(13,55,73,.16);
  --shadow-lg: 0 4px 10px rgba(13,55,73,.08), 0 34px 70px -20px rgba(13,55,73,.24);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--rust); color: #fff; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  /* Medium, not semibold. The headlines read as confident without the density
     that made them feel heavy on a phone. The small uppercase labels stay at
     600, because they need the weight at their size. */
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 6.2vw, 4.35rem); line-height: 1.04; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.95rem, 3.8vw, 2.9rem); letter-spacing: -0.022em; }
h3 { font-size: clamp(1.32rem, 2vw, 1.62rem); line-height: 1.22; }
h4 { font-family: var(--sans); font-size: 1.06rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.006em; }

p { text-wrap: pretty; }
p + p { margin-top: 1.15em; }

.eyebrow {
  font-family: var(--sans);
  font-size: .735rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rust);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: .45;
  transition: width 1s var(--ease-out) calc(var(--d, 0s) + .3s);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 0 0 auto; width: 44px; height: 1px; background: currentColor; opacity: .45;
  transition: width 1s var(--ease-out) calc(var(--d, 0s) + .3s);
}
.eyebrow--light { color: var(--rust-300); }

.lead {
  font-size: clamp(1.09rem, 1.55vw, 1.24rem);
  line-height: 1.66;
  color: var(--ink-2);
}
.lead-lg {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.pull {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.92rem);
  line-height: 1.38;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.on-dark { color: var(--on-dark-2); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .lead, .on-dark .lead-lg { color: var(--on-dark-2); }
.on-dark .pull { color: #fff; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }
.section--cream { background: var(--cream); }
.section--cream2 { background: var(--cream-2); }
.section--navy { background: var(--navy); color: var(--on-dark-2); }
.section--navy-deep { background: var(--navy-900); color: var(--on-dark-2); }

.grid { display: grid; gap: clamp(28px, 4vw, 56px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack-sm > * + * { margin-top: 14px; }
.stack > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 34px; }

.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 52ch; }
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 26px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 56px; }

.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.rule--dark { background: linear-gradient(90deg, rgba(255,255,255,.22), transparent); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--rust);
  --btn-bg-hover: var(--navy);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), color .3s var(--ease);
  box-shadow: 0 2px 6px rgba(13,55,73,.10);
  text-align: left;
  line-height: 1.25;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .52s var(--ease-out);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(0); }

.btn .arw {
  flex: 0 0 auto;
  width: 18px; height: 10px;
  transition: transform .45s var(--ease-out);
}
.btn:hover .arw, .btn:focus-visible .arw { transform: translateX(5px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--navy);
  --btn-fg: var(--navy);
  box-shadow: inset 0 0 0 1.5px rgba(13,55,73,.28);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: #fff; box-shadow: inset 0 0 0 1.5px var(--navy), var(--shadow-md); }

.btn--light {
  --btn-bg: #fff;
  --btn-bg-hover: var(--rust);
  --btn-fg: var(--navy);
}
.btn--light:hover, .btn--light:focus-visible { color: #fff; }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-bg-hover: #fff;
  --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
}
.btn--outline-light:hover, .btn--outline-light:focus-visible { color: var(--navy); box-shadow: inset 0 0 0 1.5px #fff; }

/* Text link with sweeping underline */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: .845rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rust);
  padding-bottom: 5px;
}
.tlink::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }
.tlink .arw { width: 16px; height: 9px; transition: transform .45s var(--ease-out); }
.tlink:hover .arw { transform: translateX(5px); }
.tlink--light { color: var(--rust-300); }

.cta-note {
  font-size: .82rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.on-dark .cta-note { color: rgba(255,255,255,.5); }

.cta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 26px;
}

/* --------------------------------------------------------------------------
   6. SCROLL PROGRESS
   -------------------------------------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 2px; width: 100%;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 108px;
  transition: height .45s var(--ease-out);
}
.header.is-stuck {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px -18px rgba(13,55,73,.35);
}
.header.is-stuck .header__inner { height: 82px; }

.logo { display: block; flex: 0 0 auto; }
.logo img {
  width: clamp(186px, 21vw, 246px);
  transition: width .45s var(--ease-out), opacity .35s var(--ease);
}
.header.is-stuck .logo img { width: clamp(166px, 17vw, 204px); }
.logo__white { display: block; }
.logo__navy  { display: none; }
.header.is-stuck .logo__white { display: none; }
.header.is-stuck .logo__navy  { display: block; }
/* Pages with a light hero always use the navy logo */
.header--solid .logo__white { display: none; }
.header--solid .logo__navy  { display: block; }
/* Mobile drawer is light, so the navy logo must show over it */
body.nav-open .logo__white { display: none; }
body.nav-open .logo__navy  { display: block; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 38px); }
.nav__link {
  position: relative;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .035em;
  color: rgba(255,255,255,.86);
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 1.5px; width: 100%;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link:hover { color: #fff; }
.header.is-stuck .nav__link, .header--solid .nav__link { color: var(--ink-2); }
.header.is-stuck .nav__link:hover, .header--solid .nav__link:hover { color: var(--navy); }
.header.is-stuck .nav__link.is-active, .header--solid .nav__link.is-active { color: var(--navy); }

.nav__cta { margin-left: 8px; }
.nav__cta.btn { padding: 13px 22px; font-size: .77rem; letter-spacing: .09em; }
.header:not(.is-stuck):not(.header--solid) .nav__cta.btn {
  --btn-bg: transparent;
  --btn-bg-hover: #fff;
  --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45);
}
.header:not(.is-stuck):not(.header--solid) .nav__cta.btn:hover { color: var(--navy); box-shadow: inset 0 0 0 1.5px #fff; }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  position: relative;
  border-radius: 3px;
  flex: 0 0 auto;
}
.burger span {
  position: absolute; left: 12px;
  width: 22px; height: 1.8px;
  background: #fff;
  border-radius: 2px;
  transition: transform .45s var(--ease-out), opacity .25s var(--ease), background .35s var(--ease), width .45s var(--ease-out);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; width: 15px; }
.burger span:nth-child(3) { top: 29px; }
.header.is-stuck .burger span, .header--solid .burger span { background: var(--navy); }
body.nav-open .burger span { background: var(--navy); }
body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--cream);
  padding: 118px var(--gutter) 48px;
  display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .62s var(--ease-out);
  overflow-y: auto;
  visibility: hidden;
}
body.nav-open .drawer { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer__link {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--navy);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .25s var(--ease);
}
.drawer__link:hover { color: var(--rust); }
body.nav-open .drawer__link { opacity: 1; transform: none; }
body.nav-open .drawer__link:nth-child(1) { transition-delay: .16s; }
body.nav-open .drawer__link:nth-child(2) { transition-delay: .22s; }
body.nav-open .drawer__link:nth-child(3) { transition-delay: .28s; }
body.nav-open .drawer__link:nth-child(4) { transition-delay: .34s; }
body.nav-open .drawer__link:nth-child(5) { transition-delay: .40s; }
.drawer__foot {
  margin-top: 40px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s .46s var(--ease-out), transform .5s .46s var(--ease-out);
}
body.nav-open .drawer__foot { opacity: 1; transform: none; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: flex-end;
  padding-top: 150px;
  padding-bottom: clamp(64px, 9vh, 110px);
  overflow: hidden;
  background: var(--navy-900);
}
.hero__media {
  position: absolute; inset: -2% 0 -8% 0;
  z-index: 0;
  will-change: transform;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  animation: heroDrift 34s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.09) translate3d(0, 0, 0); }
  to   { transform: scale(1.19) translate3d(-2.6%, -1.8%, 0); }
}

.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(7,31,42,.96) 0%, rgba(7,31,42,.82) 26%, rgba(7,31,42,.42) 58%, rgba(7,31,42,.34) 100%),
    linear-gradient(to right, rgba(7,31,42,.62) 0%, rgba(7,31,42,.12) 62%, transparent 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__content { max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: 26px; }
.hero .hero__kicker {
  font-size: clamp(1.16rem, 2.1vw, 1.46rem);
  font-family: var(--serif);
  color: #fff;
  line-height: 1.42;
  font-weight: 400;
  max-width: 30ch;
  margin-bottom: 22px;
}
.hero p.hero__body { color: rgba(233,240,244,.82); max-width: 60ch; font-size: 1.0625rem; }
.hero .cta-row { margin-top: 38px; }

/* staggered hero entrance */
.hero__content > * { opacity: 0; transform: translateY(26px); }
.hero.is-ready .hero__content > * {
  opacity: 1; transform: none;
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
.hero.is-ready .hero__content > *:nth-child(1) { transition-delay: .12s; }
.hero.is-ready .hero__content > *:nth-child(2) { transition-delay: .24s; }
.hero.is-ready .hero__content > *:nth-child(3) { transition-delay: .36s; }
.hero.is-ready .hero__content > *:nth-child(4) { transition-delay: .46s; }
.hero.is-ready .hero__content > *:nth-child(5) { transition-delay: .56s; }
.hero.is-ready .hero__content > *:nth-child(6) { transition-delay: .64s; }

.scroll-hint {
  position: absolute; z-index: 2;
  right: var(--gutter); bottom: clamp(64px, 9vh, 110px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  writing-mode: vertical-rl;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 62px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: hintPulse 2.6s var(--ease) infinite;
}
@keyframes hintPulse { 0%,100% { opacity: .3; transform: scaleY(.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* Interior page hero */
.pagehead {
  position: relative;
  padding-top: 172px;
  padding-bottom: clamp(50px, 6vw, 82px);
  background: var(--cream);
  overflow: hidden;
}
.pagehead::after {
  content: "";
  position: absolute; right: -80px; top: 40px;
  width: 340px; height: 600px;
  background: url("../img/chevron-navy.png") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.pagehead h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.pagehead .lead { margin-top: 22px; max-width: 60ch; }

/* --------------------------------------------------------------------------
   9. REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .95s var(--ease-out) var(--d, 0s),
    transform .95s var(--ease-out) var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-l { opacity: 0; transform: translateX(-34px); transition: opacity 1s var(--ease-out) var(--d,0s), transform 1s var(--ease-out) var(--d,0s); }
.reveal-l.is-in { opacity: 1; transform: none; }
.reveal-r { opacity: 0; transform: translateX(34px); transition: opacity 1s var(--ease-out) var(--d,0s), transform 1s var(--ease-out) var(--d,0s); }
.reveal-r.is-in { opacity: 1; transform: none; }

.reveal-img { overflow: hidden; }
.reveal-img img { transform: scale(1.16); transition: transform 1.5s var(--ease-out) var(--d,0s); }
.reveal-img.is-in img { transform: scale(1); }

/* --------------------------------------------------------------------------
   10. SPLIT SECTIONS
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
}
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: 1.05fr .95fr; }
.split--wide-right { grid-template-columns: .92fr 1.08fr; }
@media (min-width: 1001px) { .is-sticky { position: sticky; top: 128px; } }

/* Question list */
.qlist {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: var(--shadow-sm);
}
.section--cream .qlist { background: var(--paper); }
.qlist__label {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.qlist li {
  position: relative;
  padding-left: 30px;
  font-family: var(--serif);
  font-size: 1.09rem;
  line-height: 1.5;
  color: var(--navy);
}
.qlist li + li { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.qlist li::before {
  content: "";
  position: absolute; left: 0; top: .52em;
  width: 12px; height: 8px;
  background: var(--rust);
  clip-path: polygon(50% 0, 100% 62%, 100% 100%, 50% 38%, 0 100%, 0 62%);
}
.qlist li + li::before { top: calc(17px + .52em); }

/* --------------------------------------------------------------------------
   11. PATHWAY CARDS
   -------------------------------------------------------------------------- */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px, 3vw, 36px); }

.path {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(32px, 3.6vw, 52px);
  overflow: hidden;
  isolation: isolate;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .45s var(--ease);
}
.path::before {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--rust);
  transform: scaleX(0); transform-origin: left;
  transition: transform .65s var(--ease-out);
}
.path::after {
  content: "";
  position: absolute; right: -70px; bottom: -90px; z-index: -1;
  width: 260px; height: 460px;
  background: url("../img/chevron-navy.png") no-repeat center / contain;
  opacity: .03;
  transition: transform .8s var(--ease-out), opacity .6s var(--ease);
}
.path:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.path:hover::before { transform: scaleX(1); }
.path:hover::after { transform: translateY(-16px); opacity: .062; }

.path__num {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 16px;
}
.path h3 { margin-bottom: 18px; }
.path p { font-size: 1rem; }
.path .tlink { margin-top: auto; padding-top: 30px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   12. ABOUT / PORTRAIT
   -------------------------------------------------------------------------- */
.portrait { position: relative; }
.portrait__frame {
  position: relative;
  z-index: 1;
  background: var(--cream-2);
  overflow: hidden;
}
.section--cream .portrait__frame { background: var(--cream-2); }
.portrait__frame img {
  width: 100%;
  mix-blend-mode: multiply;
}
.portrait__chev {
  position: absolute; z-index: 2;
  left: -46px; bottom: -34px;
  width: clamp(88px, 10.5vw, 124px);
  opacity: .92;
  animation: float 7s var(--ease) infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

.portrait__badge {
  position: absolute; z-index: 3;
  right: clamp(-16px, -1.2vw, 0px); bottom: 30px;
  background: var(--navy);
  color: #fff;
  padding: 18px 22px;
  max-width: 205px;
  box-shadow: var(--shadow-md);
}
.portrait__badge .n {
  font-family: var(--serif); font-size: 2.15rem; line-height: 1; color: #fff; display: block;
}
.portrait__badge .t {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.68); margin-top: 8px; display: block; line-height: 1.45;
}

.sig {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--navy);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   13. STEPS
   -------------------------------------------------------------------------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(30px, 4vw, 58px); }
.steps::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 26px;
  height: 1px; background: var(--line);
}
.steps::after {
  content: "";
  position: absolute; left: 0; top: 26px;
  height: 1px; width: 100%;
  background: var(--rust);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.7s var(--ease-out) .18s;
}
.steps.is-in::after { transform: scaleX(1); }
.section--navy .steps::before { background: rgba(255,255,255,.16); }

.step { position: relative; padding-top: 74px; }
.step__n {
  position: absolute; top: 0; left: 0;
  width: 53px; height: 53px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--navy);
  transform: scale(.4); opacity: 0;
  transition: transform .7s var(--ease-out) var(--d,0s), opacity .5s var(--ease) var(--d,0s), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.section--cream .step__n { background: var(--cream); }
.section--navy .step__n { background: var(--navy); border-color: rgba(255,255,255,.28); color: #fff; }
.steps.is-in .step__n { transform: scale(1); opacity: 1; }
.step:hover .step__n { background: var(--rust); border-color: var(--rust); color: #fff; }
.step h3 { margin-bottom: 14px; }
.step p { font-size: 1rem; }

/* --------------------------------------------------------------------------
   14. EXPECT GRID
   -------------------------------------------------------------------------- */
.expect { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.section--navy .expect { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.expect__item {
  position: relative;
  background: var(--paper);
  padding: clamp(30px, 3.4vw, 46px);
  transition: background .45s var(--ease);
}
.section--cream .expect__item { background: var(--cream); }
.section--navy .expect__item { background: var(--navy); }
.expect__item::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--rust);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.expect__item:hover::before { transform: scaleX(1); }
.expect__item:hover { background: var(--paper); }
.section--cream .expect__item:hover { background: var(--paper); }
.section--navy .expect__item:hover { background: var(--navy-800); }
.expect__item h3 { font-family: var(--sans); font-size: 1.09rem; font-weight: 600; margin-bottom: 13px; letter-spacing: -.005em; }
.section--navy .expect__item h3 { color: #fff; }
.expect__item p { font-size: .985rem; }

/* --------------------------------------------------------------------------
   15. CREDENTIALS
   -------------------------------------------------------------------------- */
.creds { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
.cred {
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.15);
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 20px;
  align-items: start;
}
.cred:nth-child(odd) { padding-right: clamp(20px, 4vw, 64px); }
.cred:nth-child(even) { padding-left: clamp(20px, 4vw, 64px); border-left: 1px solid rgba(255,255,255,.15); }
.cred--full { grid-column: 1 / -1; padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; }
.cred__mark {
  width: 18px; height: 12px; margin-top: .5em;
  background: var(--rust-300);
  clip-path: polygon(50% 0, 100% 62%, 100% 100%, 50% 38%, 0 100%, 0 62%);
}
.cred h4 { color: #fff; font-size: 1.03rem; margin-bottom: 6px; }
.cred p { font-size: .93rem; color: var(--on-dark-2); line-height: 1.6; }

/* --------------------------------------------------------------------------
   16. PRICING
   -------------------------------------------------------------------------- */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2.4vw, 30px); align-items: stretch; }
.price {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(30px, 3.2vw, 42px);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s var(--ease);
}
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price--feature { border-color: var(--navy); border-width: 1.5px; }
.price--feature::before {
  content: "Most men start here";
  position: absolute; top: -1px; left: -1px;
  background: var(--navy); color: #fff;
  font-size: .67rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px;
}
.price--feature .price__head { padding-top: 22px; }
.price__name { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rust); margin-bottom: 16px; }
.price__fig { font-family: var(--serif); font-size: clamp(2.1rem, 3.4vw, 2.7rem); color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.price__meta { font-size: .86rem; letter-spacing: .05em; color: var(--muted); margin-top: 10px; text-transform: uppercase; }
.price p.price__desc { margin-top: 20px; font-size: .985rem; }
.price .tlink, .price .btn { margin-top: auto; }
.price__cta { padding-top: 28px; margin-top: auto; }

/* --------------------------------------------------------------------------
   17. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 26px;
  padding: 27px 0;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  color: var(--navy);
  line-height: 1.34;
  transition: color .3s var(--ease);
}
.faq__q:hover { color: var(--rust); }
.faq__icon {
  flex: 0 0 auto; position: relative;
  width: 22px; height: 22px; margin-top: .28em;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--rust);
  transition: transform .48s var(--ease-out), opacity .35s var(--ease);
}
.faq__icon::before { width: 15px; height: 1.6px; transform: translate(-50%,-50%); }
.faq__icon::after  { width: 1.6px; height: 15px; transform: translate(-50%,-50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__item.is-open .faq__q { color: var(--rust); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 30px; max-width: 68ch; }
.faq__a p:first-child { padding-top: 2px; }
.faq__a p + p { padding-bottom: 30px; margin-top: -14px; }

/* --------------------------------------------------------------------------
   18. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: min(520px, 46vw); height: 130%;
  background: url("../img/chevron-white.png") no-repeat center / contain;
  opacity: .06;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 12% 100%, rgba(184,92,55,.20), transparent 62%);
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; max-width: 18ch; }

/* --------------------------------------------------------------------------
   19. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(38px, 5vw, 80px); align-items: start; }

.field { display: block; margin-bottom: 22px; }
.field__label {
  display: block;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px;
}
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.62; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(184,92,55,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #9AA9B2; }
.form-note { font-size: .87rem; color: var(--muted); margin-top: 16px; line-height: 1.6; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.info-card {
  background: var(--navy);
  color: var(--on-dark-2);
  padding: clamp(30px, 3.6vw, 46px);
  position: relative;
  overflow: hidden;
}
.info-card::after {
  content: "";
  position: absolute; right: -60px; bottom: -80px;
  width: 230px; height: 400px;
  background: url("../img/chevron-white.png") no-repeat center / contain;
  opacity: .06;
}
.info-card h3, .info-card h4 { color: #fff; }
.info-card__row { position: relative; z-index: 2; }
.info-card__row + .info-card__row { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.info-card__label { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rust-300); margin-bottom: 8px; }
.info-card a.mail { color: #fff; border-bottom: 1px solid rgba(255,255,255,.32); transition: border-color .3s var(--ease), color .3s var(--ease); font-size: 1.03rem; }
.info-card a.mail:hover { color: var(--rust-300); border-color: var(--rust-300); }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--navy-900); color: var(--on-dark-2); padding-block: clamp(56px, 6vw, 82px) 34px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(32px, 4vw, 60px); }
.footer__logo img { width: 210px; margin-bottom: 22px; }
.footer p { font-size: .95rem; color: var(--on-dark-2); max-width: 40ch; }
.footer__h {
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 20px;
}
.footer__list li + li { margin-top: 12px; }
.footer__list a {
  font-size: .95rem;
  color: var(--on-dark-2);
  position: relative;
  transition: color .3s var(--ease), padding-left .35s var(--ease-out);
}
.footer__list a:hover { color: #fff; padding-left: 12px; }
.footer__list a::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0);
  width: 7px; height: 1.4px; background: var(--rust);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.footer__list a:hover::before { transform: translateY(-50%) scaleX(1); }
.footer__bottom {
  margin-top: clamp(40px, 5vw, 62px);
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-size: .84rem;
  color: rgba(255,255,255,.44);
}
.footer__bottom a:hover { color: #fff; }
.footer__disclaimer { font-size: .84rem; color: rgba(255,255,255,.44); max-width: 62ch; line-height: 1.65; margin-top: 18px; }

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
}

@media (max-width: 1000px) {
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
  .paths { grid-template-columns: 1fr; }
  .prices { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__logo { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps::before, .steps::after { display: none; }
  .step { padding-top: 0; padding-left: 74px; min-height: 53px; }
  .creds { grid-template-columns: 1fr; }
  .cred:nth-child(even) { padding-left: 0; border-left: 0; }
  .cred:nth-child(odd) { padding-right: 0; }
  .portrait { max-width: 460px; }
  .scroll-hint { display: none; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .hero { min-height: auto; padding-top: 132px; }
  .hero__content { max-width: none; }
  .expect { grid-template-columns: 1fr; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .portrait__badge { right: -8px; bottom: 18px; padding: 14px 16px; max-width: 168px; }
  .portrait__badge .n { font-size: 1.7rem; }
  .btn { width: 100%; justify-content: space-between; }
  .cta-row .btn { width: auto; }
  .drawer__link { font-size: 1.6rem; }
  .pagehead { padding-top: 140px; }
}

@media (max-width: 460px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; justify-content: space-between; }
  .cta-note { text-align: center; }
}

/* --------------------------------------------------------------------------
   22. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-l, .reveal-r { opacity: 1 !important; transform: none !important; }
  .reveal-img img { transform: none !important; }
  .hero__content > * { opacity: 1 !important; transform: none !important; }
  .steps::after { transform: scaleX(1) !important; }
  .step__n { opacity: 1 !important; transform: none !important; }
  .hero__media { transform: none !important; }
}

/* Print */
@media print {
  .header, .drawer, .progress, .scroll-hint, .btn, .burger { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   23. MOTION LAYER II
   ========================================================================== */

/* ---- Hero: drifting warm light over the mountains ---- */
.hero__glow {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(46% 52% at 24% 32%, rgba(216,147,114,.26), transparent 68%);
  mix-blend-mode: screen;
  animation: glowDrift 22s var(--ease) infinite alternate;
}
@keyframes glowDrift {
  from { transform: translate3d(-5%, 3%, 0) scale(1);    opacity: .5; }
  to   { transform: translate3d(8%, -4%, 0) scale(1.22); opacity: .95; }
}

/* hero content drifts up and fades as you scroll past it */
.hero__inner { will-change: transform, opacity; }

/* ---- Word-by-word headline rise ---- */
.wr {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.wr > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(112%);
  transition: transform 1.05s var(--ease-out) var(--wd, 0s);
}
.wr-go .wr > i { transform: none; }

/* ---- Card sheen ---- */
.sheen {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; overflow: hidden;
}
.sheen::before {
  content: "";
  position: absolute; top: -60%; left: 0;
  width: 34%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-180%) rotate(14deg);
  transition: transform 1.15s var(--ease-out);
}
.path:hover .sheen::before,
.price:hover .sheen::before { transform: translateX(460%) rotate(14deg); }

.tilt { will-change: transform; }

/* ---- Question list: items stagger in, chevron nudges on hover ---- */
.qlist li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .75s var(--ease-out) var(--qd, 0s),
              transform .75s var(--ease-out) var(--qd, 0s);
}
.qlist.is-in li, .is-in .qlist li { opacity: 1; transform: none; }
.qlist li::before { transition: transform .45s var(--ease-out), background .3s var(--ease); }
.qlist li:hover::before { transform: translateY(-3px); }

/* ---- Expect grid: chevron slides in on hover ---- */
.expect__item { overflow: hidden; }
.expect__item::after {
  content: "";
  position: absolute; right: 26px; bottom: 26px;
  width: 20px; height: 13px;
  background: var(--rust);
  clip-path: polygon(50% 0, 100% 62%, 100% 100%, 50% 38%, 0 100%, 0 62%);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.expect__item:hover::after { opacity: .85; transform: none; }

/* ---- Credential marks lift on hover ---- */
.cred__mark { transition: transform .5s var(--ease-out), background .35s var(--ease); }
.cred:hover .cred__mark { transform: translateY(-4px); background: #fff; }

/* ---- Price figure emphasis ---- */
.price__fig { transition: transform .55s var(--ease-out), color .35s var(--ease); transform-origin: left center; }
.price:hover .price__fig { transform: scale(1.045); color: var(--rust); }

/* ---- Step numbers pulse on hover ---- */
.step:hover .step__n { transform: scale(1.09); }

/* ---- Portrait: gentle continuous life ---- */
.portrait__frame img { transition: transform 1.5s var(--ease-out); }
.portrait:hover .portrait__frame img { transform: scale(1.028); }
.portrait__badge { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.portrait:hover .portrait__badge { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---- CTA band chevron drifts ---- */
.cta-band::before { animation: bandFloat 16s var(--ease) infinite alternate; }
@keyframes bandFloat {
  from { transform: translateY(-52%) scale(1); }
  to   { transform: translateY(-48%) scale(1.07); }
}

/* ---- Page-head watermark drifts ---- */
.pagehead::after { animation: headFloat 20s var(--ease) infinite alternate; }
@keyframes headFloat {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-26px) rotate(-2.5deg); }
}

/* ---- Footer logo ---- */
.footer__logo img { transition: transform .6s var(--ease-out), opacity .4s var(--ease); }
.footer__logo img:hover { transform: translateY(-3px); }

/* ---- Back to top ---- */
.totop {
  position: fixed; z-index: 92;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy); color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(16px) scale(.88);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease-out), background .3s var(--ease);
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--rust); }
.totop svg { width: 15px; height: 10px; transition: transform .45s var(--ease-out); }
.totop:hover svg { transform: translateY(-4px); }

/* ---- Parallax targets ---- */
[data-par] { will-change: transform; }

/* ==========================================================================
   24. TOUCH + TABLET
   ========================================================================== */

/* On touch screens there is no hover, so show the accents that hover reveals. */
@media (hover: none) {
  .path::before { transform: scaleX(1); }
  .expect__item::after { opacity: .5; transform: none; }
  .sheen { display: none; }
  .btn:hover, .path:hover, .price:hover { transform: none; }
}

/* iPad landscape and small laptops: drawer nav, but keep two-column layouts. */
@media (min-width: 1001px) and (max-width: 1080px) {
  :root { --wrap: 980px; }
}

/* iPad portrait */
@media (min-width: 701px) and (max-width: 1000px) {
  :root { --section-y: clamp(64px, 8vw, 96px); }
  h1 { font-size: clamp(2.5rem, 5.6vw, 3.4rem); }
  h2 { font-size: clamp(1.9rem, 4vw, 2.4rem); }
  .hero { min-height: 78vh; padding-top: 168px; }
  .hero__content { max-width: 620px; }
  .portrait { max-width: 420px; margin-inline: auto; }
  .expect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prices { grid-template-columns: 1fr; }
  .price { display: grid; grid-template-columns: minmax(190px, 1fr) 2fr; gap: 22px 40px; align-items: start; }
  .price__head { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .price__desc { grid-column: 2; margin-top: 0; }
  .price__desc + .price__desc { margin-top: -4px; }
  .price__cta { margin-top: 0; padding-top: 6px; grid-column: 1 / -1; }
  .price--feature .price__head { padding-top: 26px; }
  .steps { grid-template-columns: 1fr; gap: 38px; }
  .steps::before, .steps::after { display: none; }
  .step { padding-top: 0; padding-left: 74px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__logo { grid-column: 1 / -1; }
  .drawer__link { font-size: 2.4rem; }
  .totop { width: 48px; height: 48px; }
}

/* Phones */
@media (max-width: 700px) {
  .hero { min-height: 0; padding-top: 138px; padding-bottom: 64px; }
  .hero__media img { object-position: 62% 42%; }
  /* Only the top band is deepened, where the small label sits over the bright
     sky. The middle of the photo keeps its original shading so the mountains
     stay visible as you scroll. */
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(7,31,42,.97) 0%, rgba(7,31,42,.88) 34%, rgba(7,31,42,.55) 72%, rgba(7,31,42,.86) 100%);
  }

  /* The label sits directly on the photo here, so it uses a lighter warm tint.
     Measured 5.2:1 against the deepened shading, comfortably past the 4.5:1
     the standard asks for. It keeps the rust family rather than going white. */
  .hero .eyebrow { color: #E5B094; text-shadow: 0 1px 10px rgba(7,31,42,.95), 0 0 3px rgba(7,31,42,.9); }
  .qlist li { font-size: 1.02rem; }
  .tlink { font-size: .8rem; letter-spacing: .08em; }
  .price--feature::before { position: static; display: inline-block; margin-bottom: 14px; }
  .price--feature .price__head { padding-top: 0; }
  .totop { width: 46px; height: 46px; right: 14px; bottom: 14px; }
  .portrait__chev { width: 76px; left: -26px; bottom: -20px; }
}

/* Short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding-top: 122px; padding-bottom: 52px; }
  .drawer { padding-top: 96px; }
  .drawer__link { font-size: 1.35rem; padding: 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img, .hero__glow, .cta-band::before, .pagehead::after { animation: none !important; }
  .wr > i { transform: none !important; }
  .qlist li { opacity: 1 !important; transform: none !important; }
  .sheen { display: none !important; }
}

/* ==========================================================================
   25. VOICE FRAMING — marks where Kenny speaks in his own words
   ========================================================================== */
.voice-label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--forest);
  margin-top: 30px; margin-bottom: 6px;
}
.voice-label::before {
  content: "";
  flex: 0 0 auto; width: 13px; height: 9px;
  background: var(--forest);
  clip-path: polygon(50% 0, 100% 62%, 100% 100%, 50% 38%, 0 100%, 0 62%);
}
.sig-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.14rem;
  color: var(--forest);
  margin-top: 26px;
}

/* Portrait travels with the story instead of leaving a gap beneath it */
@media (min-width: 1001px) {
  .split--top .portrait { position: sticky; top: 128px; align-self: start; }
}

/* ==========================================================================
   26. REFINEMENTS
   ========================================================================== */

/* ---- Second half of the headline, in rust ---- */
.fwd { display: block; color: var(--rust); }
.on-dark .fwd, .hero .fwd { color: var(--rust-300); }

/* ---- Question list: hover pop ---- */
.qlist li {
  padding-block: 2px;
  border-radius: 3px;
  transition:
    opacity .75s var(--ease-out) var(--qd, 0s),
    transform .75s var(--ease-out) var(--qd, 0s),
    background .35s var(--ease),
    padding-left .4s var(--ease-out);
}
.qlist li .qi {
  display: block;
  transition: transform .42s var(--ease-out), color .3s var(--ease);
}
.qlist li:hover { background: rgba(184, 92, 55, .055); padding-left: 36px; }
.qlist li:hover .qi { transform: translateX(4px); color: var(--rust); }
.qlist li:hover::before { transform: translate(2px, -3px) scale(1.18); }

/* ---- Step numbers: pop and settle out of rust ---- */
.step__n { position: relative; }
.steps.is-in .step__n { animation: numPop 1s var(--ease-out) var(--d, 0s) both; }
@keyframes numPop {
  0%   { transform: scale(.34); opacity: 0;
         background: var(--rust); border-color: var(--rust); color: #fff; }
  52%  { transform: scale(1.16); opacity: 1;
         background: var(--rust); border-color: var(--rust); color: #fff; }
  76%  { transform: scale(.97); }
  100% { transform: scale(1); opacity: 1; }
}
.step__n::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1.5px solid var(--rust);
  opacity: 0;
  pointer-events: none;
}
.steps.is-in .step__n::after { animation: numRing 1.3s var(--ease-out) calc(var(--d, 0s) + .2s) both; }
@keyframes numRing {
  0%   { opacity: .85; transform: scale(.7); }
  70%  { opacity: .2;  transform: scale(1.3); }
  100% { opacity: 0;   transform: scale(1.45); }
}

/* ---- Slow underline under "No pressure." ---- */
.ul-draw { position: relative; display: inline-block; }
.ul-draw::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1.5px;
  background: currentColor;
  opacity: .6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.9s var(--ease-out) .35s;
}
.ul-draw.is-lit::after { transform: scaleX(1); }

/* ---- Lines that arrive one at a time ---- */
.lines > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s var(--ease-out) var(--ld, 0s),
              transform .85s var(--ease-out) var(--ld, 0s);
}
.is-in .lines > *, .lines.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .steps.is-in .step__n, .steps.is-in .step__n::after { animation: none !important; }
  .step__n { opacity: 1 !important; transform: none !important; }
  .lines > * { opacity: 1 !important; transform: none !important; }
  .ul-draw::after { transform: scaleX(1) !important; }
}

/* Clay headings inside the "what you can expect" boxes */
.expect__item h3 { color: var(--rust); }
.section--navy .expect__item h3 { color: var(--rust-300); }

/* Inline clay emphasis (keeps flowing with the sentence, unlike .fwd) */
.clay { color: var(--rust); }
.on-dark .clay, .hero .clay { color: var(--rust-300); }

/* A page fades in on load — no flash of half-built layout */
main#main { animation: pageFade .55s var(--ease); }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

/* Chevron watermark bleeding off the left edge of a section */
.section--markleft { overflow: hidden; }
.section--markleft > .wrap { position: relative; z-index: 1; }
.section--markleft::before {
  content: "";
  position: absolute; z-index: 0;
  left: -12%; top: 50%;
  width: min(430px, 33vw); height: 116%;
  background: url("../img/chevron-navy.png") no-repeat center / contain;
  opacity: .045;
  pointer-events: none;
  transform: translateY(-50%);
  animation: markLeftFloat 19s var(--ease) infinite alternate;
}
@keyframes markLeftFloat {
  from { transform: translateY(-53%) rotate(0deg); }
  to   { transform: translateY(-46%) rotate(2deg); }
}
@media (max-width: 1000px) {
  .section--markleft::before { left: -22%; width: 62vw; opacity: .035; }
}
@media (prefers-reduced-motion: reduce) {
  .section--markleft::before { animation: none !important; }
}

/* A stanza that continues the sentence above it: same size, stepped in */
.sub-stanza { padding-left: 26px; position: relative; }
.sub-stanza::before {
  content: "";
  position: absolute; left: 0; top: .55em; bottom: .35em;
  width: 2px; border-radius: 2px;
  background: var(--rust);
  opacity: .3;
}
@media (max-width: 700px) { .sub-stanza { padding-left: 18px; } }

/* Every full-bleed navy band carries the mark, mirrored from the closing band */
.section--navy:not(.cta-band) { overflow: hidden; }
.section--navy:not(.cta-band) > .wrap { position: relative; z-index: 1; }
.section--navy:not(.cta-band)::before {
  content: "";
  position: absolute; z-index: 0;
  left: -9%; top: 50%;
  width: min(400px, 30vw); height: 118%;
  background: url("../img/chevron-white.png") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
  transform: translateY(-50%);
  animation: markLeftFloat 21s var(--ease) infinite alternate;
}
@media (max-width: 1000px) {
  .section--navy:not(.cta-band)::before { left: -20%; width: 58vw; opacity: .04; }
}
@media (prefers-reduced-motion: reduce) {
  .section--navy:not(.cta-band)::before { animation: none !important; }
}

/* ==========================================================================
   27. QA FIXES
   ========================================================================== */

/* On narrow screens the columns are stacked, so slide them up rather than
   sideways. Also stops the pre-reveal transform poking past the right edge. */
@media (max-width: 1000px) {
  .reveal-l, .reveal-r { transform: translateY(28px); }
  .reveal-l.is-in, .reveal-r.is-in { transform: none; }
}

/* Comfortable finger-sized hit areas without changing how anything looks */
.tlink::before {
  content: "";
  position: absolute;
  inset: -13px -8px -9px -8px;
}
.info-card a.mail { display: inline-block; padding-block: 6px; }
.footer__list a { display: inline-block; padding-block: 3px; }

/* Honeypot: hide it without extending the page box */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  left: auto; opacity: 0;
}

/* Credential headings are h3 now (no skipped heading levels); keep the look */
.cred h3 {
  font-family: var(--sans);
  font-size: 1.03rem; font-weight: 600; line-height: 1.4;
  letter-spacing: -.006em; color: #fff; margin-bottom: 6px;
}

/* One body size across prose and cards */
.path p, .step p, .expect__item p, .price p.price__desc { font-size: 1.0625rem; }

/* Visible to screen readers only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* Pricing cards: keep the figure, the duration and the link on the same
   baseline across all three, whatever the badge or a wrapping name does. */
@media (min-width: 1001px) {
  .price__head { padding-top: 22px; }
  .price__name { min-height: 3.45em; }
}

/* ==========================================================================
   28. EXPECT BOXES + CENTERED LOCATION
   ========================================================================== */

/* White at rest, warm tint on hover (was the other way round) */
.expect__item,
.section--cream .expect__item { background: var(--paper); }
.expect__item:hover,
.section--cream .expect__item:hover { background: var(--cream-2); }

/* The location line sits centred beneath the credential columns */
.cred--full {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: 0 !important;
}
.cred--full .cred__mark { margin-top: 0; }
.cred--full p { max-width: 46ch; }

/* ==========================================================================
   29. CONFIRMATION PAGE
   ========================================================================== */
.thanks { padding-top: clamp(180px, 20vh, 250px); text-align: center; }
.thanks__inner { max-width: 60ch; margin-inline: auto; }
.thanks h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.thanks .lead, .thanks p { margin-inline: auto; }
.thanks__mark {
  display: block;
  width: 62px; height: 42px;
  margin: 0 auto 30px;
  background: var(--rust);
  clip-path: polygon(50% 0, 100% 62%, 100% 100%, 50% 38%, 0 100%, 0 62%);
  animation: thanksRise 1s var(--ease-out) both;
}
@keyframes thanksRise {
  from { opacity: 0; transform: translateY(24px) scale(.8); }
  to   { opacity: 1; transform: none; }
}
.thanks__mail {
  color: var(--rust);
  border-bottom: 1px solid rgba(184,92,55,.4);
  transition: border-color .3s var(--ease);
}
.thanks__mail:hover { border-color: var(--rust); }
@media (prefers-reduced-motion: reduce) { .thanks__mark { animation: none; } }

/* Expect boxes: white at rest, inverting to navy on hover */
.expect__item {
  transition: background .45s var(--ease), color .3s var(--ease);
}
.expect__item h3, .expect__item p { transition: color .3s var(--ease); }
.expect__item:hover,
.section--cream .expect__item:hover { background: var(--navy); }
.expect__item:hover h3 { color: var(--rust-300); }
.expect__item:hover p  { color: var(--on-dark-2); }
.expect__item:hover::after { background: var(--rust-300); }

/* ICF credential badge sitting beside the ACC line */
.cred--badge { grid-template-columns: 26px 1fr auto; }
.cred__badge {
  align-self: center;
  width: clamp(76px, 8vw, 98px);
  height: auto;
  margin-left: 18px;
}
@media (max-width: 700px) {
  .cred--badge { grid-template-columns: 26px 1fr; }
  .cred__badge { grid-column: 2; margin-left: 0; margin-top: 16px; width: 82px; }
}

/* The two things he's pursuing, given room to read as separate items */
.cred__item + .cred__item { margin-top: 16px; }

/* Location: centred on wide screens, plain left-aligned on phones */
@media (max-width: 700px) {
  .cred--full {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 20px;
    align-items: start;
    text-align: left;
  }
  .cred--full .cred__mark { margin-top: .5em; }
  .cred--full p { max-width: none; }
}

/* ==========================================================================
   30. SCRIPTURE CALLOUT
   ========================================================================== */
.verse {
  position: relative;
  margin-inline: 0;
  padding: clamp(28px, 3.4vw, 40px) clamp(26px, 3vw, 38px);
  background: var(--cream);
  border-left: 3px solid var(--forest);
  max-width: 46ch;
}
.verse__mark {
  position: absolute;
  top: clamp(28px, 3.4vw, 40px);
  right: clamp(24px, 3vw, 34px);
  width: 22px; height: 15px;
  background: var(--forest);
  opacity: .28;
  clip-path: polygon(50% 0, 100% 62%, 100% 100%, 50% 38%, 0 100%, 0 62%);
}
.verse blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.52;
  color: var(--navy);
  font-style: italic;
  padding-right: 34px;
}
.verse figcaption {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--forest);
}

/* Keep the hidden anti-spam field from measuring wider than its 1px box */
.hp label, .hp input { width: 1px; max-width: 1px; }

/* --------------------------------------------------------------------------
   31. TOUCH-DEVICE READABILITY
   Phones and iPads are held closer than a desktop monitor but have far less
   room, so the fine editorial sizes that read well at 1440px get thin and
   squinty on glass. This section does two things and nothing else:
     1. Collapses the six near-identical "micro label" sizes (.67 - .77rem)
        into ONE size, so the small caps labels are consistent page to page.
     2. Steps the whole small-text tier up so nothing on a phone falls below
        roughly 14px, and body prose sits comfortably above it.
   Sizes above 1000px are untouched.
   -------------------------------------------------------------------------- */

/* ---- Phones and iPads --------------------------------------------------- */
@media (max-width: 1000px) {

  /* One size for every uppercase micro label. Tracking eases off slightly so
     the larger size doesn't stretch the label past its container. */
  .eyebrow,
  .qlist__label,
  .path__num,
  .step__label,
  .field__label,
  .info-card__label,
  .footer__h,
  .voice-label,
  .verse figcaption,
  .price__name,
  .portrait__badge .t {
    font-size: .805rem;
    letter-spacing: .17em;
  }
  .price--feature::before { font-size: .735rem; letter-spacing: .12em; }

  /* Secondary text: notes, meta, captions, footer */
  .cta-note        { font-size: .89rem; letter-spacing: .05em; }
  .tlink           { font-size: .875rem; letter-spacing: .07em; }
  .price__meta     { font-size: .9rem; }
  .form-note       { font-size: .92rem; }
  .cred p          { font-size: 1rem; }
  .footer p,
  .footer__list a  { font-size: 1rem; }
  .footer__bottom,
  .footer__disclaimer { font-size: .88rem; }

  /* Controls */
  .btn             { font-size: .92rem; }
  .nav__cta.btn    { font-size: .82rem; }
  .nav__link       { font-size: .92rem; }
}

/* ---- Phones only -------------------------------------------------------- */
@media (max-width: 700px) {

  /* Body copy goes UP on a phone, not down. (The old rule shrank it to
     16.5px, which was backwards.) */
  body { font-size: 17.5px; line-height: 1.7; }

  /* Card and step prose matches body instead of sitting a step under it */
  .path p,
  .step p,
  .expect__item p,
  .price p.price__desc { font-size: 1.09rem; }

  .lead            { font-size: 1.18rem; line-height: 1.62; }
  .lead-lg         { font-size: 1.26rem; line-height: 1.56; }
  .hero p.hero__body { font-size: 1.11rem; line-height: 1.66; }

  /* Sub-headings inside cards */
  .expect__item h3,
  .cred h3         { font-size: 1.13rem; }
  .info-card a.mail { font-size: 1.09rem; }

  /* Questions read as headings on a phone, so give them the size */
  .faq__q          { font-size: 1.18rem; }
  .qlist li        { font-size: 1.1rem; }

  /* Controls sit a touch larger again on the smallest screens */
  .btn             { font-size: .96rem; }
  .tlink           { font-size: .92rem; }
  .cta-note        { font-size: .92rem; }
  .price__meta     { font-size: .94rem; }
  .cred p          { font-size: 1.03rem; }
  .footer p,
  .footer__list a  { font-size: 1.03rem; }
}

/* --------------------------------------------------------------------------
   32. FOOTER LABEL SPECIFICITY FIX
   `.footer p { font-size: .95rem }` (0,1,1) was outranking `.footer__h` and
   `.footer__disclaimer` (0,1,0), so the footer's small caps headings and the
   legal disclaimer were both rendering at body size at every width. These
   restate the intended sizes with enough specificity to actually land.
   -------------------------------------------------------------------------- */
.footer p.footer__h { font-size: .72rem; }
.footer p.footer__disclaimer { font-size: .84rem; }

@media (max-width: 1000px) {
  .footer p.footer__h { font-size: .805rem; }
  .footer p.footer__disclaimer { font-size: .88rem; }
  .nav__cta.btn { font-size: .88rem; }
  .tlink { font-size: .9rem; }
}

/* --------------------------------------------------------------------------
   33. TOUCH-DEVICE LAYOUT CORRECTIONS
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* The numbered steps kept a 74px left gutter meant for an absolutely
     positioned number. The number sits in normal flow, so that gutter was
     dead space: on a 390px phone it was eating 21% of the line length and
     squeezing the copy into a narrow column. Reclaim it. */
  .step { padding-left: 0; min-height: 0; }
  .step__n { margin-bottom: 18px; }

  /* Steps run full width once stacked, which makes very long lines on an
     iPad. Hold them to a comfortable measure. */
  .step p { max-width: 60ch; }
}

@media (max-width: 700px) {
  /* Tighter tracking so the long CTA label fits the button cleanly. Paired
     with a non-breaking hyphen in the markup, "30-Minute" can no longer
     break across lines. */
  .btn { letter-spacing: .055em; padding-left: 24px; padding-right: 24px; }
}

/* ---- Desktop: one size for the micro labels here too ---------------------
   These were drifting between .67rem and .77rem depending on which component
   they sat in (11.5px to 12.3px). Unified at 12px so the small caps read the
   same in the footer, the cards, the form and the pricing table. */
@media (min-width: 1001px) {
  .eyebrow,
  .qlist__label,
  .path__num,
  .step__label,
  .field__label,
  .info-card__label,
  .footer p.footer__h,
  .voice-label,
  .verse figcaption,
  .price__name {
    font-size: .75rem;
  }
  .price--feature::before { font-size: .7rem; }
}
/* Same specificity trap: the disclaimer's own 62ch measure was being
   overridden by `.footer p { max-width: 40ch }`, breaking it into a narrow
   ragged column. */
.footer p.footer__disclaimer { max-width: 62ch; }

/* --------------------------------------------------------------------------
   34. CONTINUOUS AMBIENT MOTION
   The drifting elements were all `infinite alternate` on an ease-in-out
   curve. That curve brings velocity to zero at BOTH ends of every leg, so a
   34s hero drift spent roughly ten of those seconds looking frozen before it
   turned around. Sitting at the top of the page, the photo appeared to stop.

   These replace the two-keyframe A-to-B legs with closed loops (the last
   keyframe returns to the first) running at a constant speed, so the motion
   never stalls and never visibly snaps back. Slower overall, because
   constant motion needs less distance to read as alive.
   -------------------------------------------------------------------------- */

.hero__media img {
  animation: heroCircuit 52s linear infinite;
}
@keyframes heroCircuit {
  0%   { transform: scale(1.10) translate3d(0, 0, 0); }
  25%  { transform: scale(1.155) translate3d(-2.2%, -1.4%, 0); }
  50%  { transform: scale(1.21) translate3d(-4.0%, -0.3%, 0); }
  75%  { transform: scale(1.155) translate3d(-2.0%, 1.2%, 0); }
  100% { transform: scale(1.10) translate3d(0, 0, 0); }
}

.hero__glow {
  animation: glowCircuit 54s linear infinite;
}
@keyframes glowCircuit {
  0%   { transform: translate3d(-5%, 3%, 0) scale(1.00);   opacity: .52; }
  25%  { transform: translate3d(1%, -1%, 0) scale(1.11);   opacity: .78; }
  50%  { transform: translate3d(8%, -4%, 0) scale(1.22);   opacity: .92; }
  75%  { transform: translate3d(1.5%, -0.5%, 0) scale(1.10); opacity: .74; }
  100% { transform: translate3d(-5%, 3%, 0) scale(1.00);   opacity: .52; }
}

/* Same treatment for the decorative chevron watermarks */
.cta-band::before { animation: bandCircuit 38s linear infinite; }
@keyframes bandCircuit {
  0%   { transform: translateY(-52%) scale(1); }
  50%  { transform: translateY(-48%) scale(1.07); }
  100% { transform: translateY(-52%) scale(1); }
}

.pagehead::after { animation: headCircuit 46s linear infinite; }
@keyframes headCircuit {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-26px) rotate(-2.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.section--markleft::before { animation: markCircuit 44s linear infinite; }
.section--navy:not(.cta-band)::before { animation: markCircuit 50s linear infinite; }
@keyframes markCircuit {
  0%   { transform: translateY(-53%) rotate(0deg); }
  50%  { transform: translateY(-46%) rotate(2deg); }
  100% { transform: translateY(-53%) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img, .hero__glow, .cta-band::before, .pagehead::after,
  .section--markleft::before,
  .section--navy:not(.cta-band)::before { animation: none !important; }
}

/* ---- Hero drift on small screens ----------------------------------------
   The drift is written as a percentage of the image, so on a phone the same
   animation covers a fraction of the pixels it covers on a desktop monitor
   and reads as almost still. Phones and iPads get a wider circuit and a
   slightly quicker pass so the movement is actually visible. */
@media (max-width: 1000px) {
  .hero__media img { animation: heroCircuitTouch 46s linear infinite; }
  @keyframes heroCircuitTouch {
    0%   { transform: scale(1.11) translate3d(0, 0, 0); }
    25%  { transform: scale(1.175) translate3d(-3.0%, -2.0%, 0); }
    50%  { transform: scale(1.24) translate3d(-5.4%, -0.4%, 0); }
    75%  { transform: scale(1.175) translate3d(-2.7%, 1.8%, 0); }
    100% { transform: scale(1.11) translate3d(0, 0, 0); }
  }
  .hero__glow { animation-duration: 44s; }
}

/* --------------------------------------------------------------------------
   35. iPAD LANDSCAPE AND iPAD PRO
   These report as 1024 and 1180 wide, so they were falling into the desktop
   type rules despite being tablets held at arm's length or closer. Give them
   the same label and control sizes the smaller tablets get.
   -------------------------------------------------------------------------- */
@media (min-width: 1001px) and (max-width: 1200px) {
  .eyebrow,
  .qlist__label,
  .path__num,
  .step__label,
  .field__label,
  .info-card__label,
  .footer p.footer__h,
  .voice-label,
  .verse figcaption,
  .price__name {
    font-size: .805rem;
    letter-spacing: .17em;
  }
  .price--feature::before { font-size: .735rem; letter-spacing: .12em; }
  .btn          { font-size: .92rem; }
  .nav__cta.btn { font-size: .86rem; }
  .nav__link    { font-size: .92rem; }
  .tlink        { font-size: .9rem; }
  .cta-note     { font-size: .89rem; }
  .price__meta  { font-size: .9rem; }
  .form-note    { font-size: .92rem; }
  .cred p       { font-size: 1rem; }
  .footer p,
  .footer__list a { font-size: 1rem; }
  .footer__bottom,
  .footer p.footer__disclaimer { font-size: .88rem; }
}

/* --------------------------------------------------------------------------
   36. ICF BADGE PLACEMENT
   The badge sat in a `1fr auto` track, which pushed it to the far right edge
   of the left-hand cell. It ended up closer to the divider than to its own
   ACC text, so it read as belonging to both top cells, and at full size it
   made the left cell's content noticeably taller than the right's.

   Now the text column is content-sized, so the badge packs immediately after
   the ACC line with a fixed gap and a wide, clear run to the divider. It is
   also a little smaller, which brings the two top cells close in height.
   Below 1000px the credentials are a single column, so none of this applies;
   the phone rule further down still stacks the badge under the text.
   -------------------------------------------------------------------------- */
@media (min-width: 701px) {
  .cred--badge { grid-template-columns: 26px minmax(0, max-content) auto; }
  .cred--badge .cred__badge {
    width: clamp(66px, 5.2vw, 78px);
    margin-left: 26px;
    align-self: center;
  }
}

/* Narrow desktop / iPad landscape: the cell is not wide enough for the text
   at its natural width plus the badge, so the badge drifts back toward the
   divider. Cap the text column there and let it wrap instead, which pulls
   the badge left and keeps it clearly inside its own cell. */
@media (min-width: 1001px) and (max-width: 1090px) {
  .cred--badge { grid-template-columns: 26px minmax(0, 196px) auto; }
}

/* --------------------------------------------------------------------------
   37. THE "WORKING WITH KENNY" NOTE
   Location was wearing credential clothing: the same rust chevron, the same
   heading treatment, sitting in the same grid as the ACC and CCC entries.
   It is not a credential, it is practical information, so it now reads as a
   note rather than a qualification, and it fills the slot the fifth
   credential left empty so the grid closes cleanly at three rows.
   -------------------------------------------------------------------------- */
.cred--note { grid-template-columns: 1fr; }
.cred--note > div {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  padding: 24px 26px 22px;
}
/* A small caps label instead of a credential heading, so the eye files it
   under "useful to know" rather than "another qualification". */
.cred--note h3 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rust-300);
  margin-bottom: 12px;
}
.cred--note .tlink { margin-top: 16px; }

@media (max-width: 1200px) {
  .cred--note h3 { font-size: .805rem; letter-spacing: .17em; }
}
@media (max-width: 1000px) {
  .cred--note > div { padding: 22px 22px 20px; }
}

/* --------------------------------------------------------------------------
   38. RESOURCES
   Four additions: the breadcrumb, the article body, the byline and the
   resource card. Everything else reuses existing components (.pagehead,
   .pull, .cta-band), and the card is built on .path, so resources inherit
   the site's tilt, sheen and hover behaviour for free.
   -------------------------------------------------------------------------- */

/* Breadcrumb above a resource headline */
.crumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--sans);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.crumb a { color: var(--rust); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.crumb a:hover { border-bottom-color: currentColor; }
.crumb span[aria-hidden] { opacity: .5; }

/* The body of a single resource. One column, held to a readable measure. */
.article { max-width: 68ch; }
.article h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.16;
  margin-bottom: 4px;
}
.article h3 { margin-bottom: 4px; }
.article > * + h2 { margin-top: clamp(38px, 4vw, 54px); }
.article .pull {
  max-width: 32ch;
  /* the site's rust edge marks this as a quote, so it never reads as a heading */
  border-left: 3px solid var(--rust);
  padding-left: clamp(20px, 2.4vw, 30px);
}

@media (max-width: 1200px) { .crumb { font-size: .805rem; letter-spacing: .17em; } }
@media (max-width: 700px)  { .article .pull { max-width: none; } }

/* Byline under a resource headline. A visible, named author with a link to
   his credentials is what lets Google and AI tools attribute the answer to Kenny. */
.byline {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin-top: 26px;
  font-family: var(--sans); font-size: .95rem; color: var(--muted);
}
.byline a { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--rust-300); transition: border-color .3s var(--ease); }
.byline a:hover { border-bottom-color: var(--rust); }

/* Resource cards. The whole box is the link: the title first, the format
   underneath. Add the class "path" as well so site.js gives it tilt and sheen. */
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2.4vw, 30px); }
@media (max-width: 1000px) {
  .res-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* a lone last card spans the row instead of leaving a gap beside it */
  .res-grid > .res:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px)  { .res-grid { grid-template-columns: 1fr; } }

.path.res {
  color: inherit;
  padding: clamp(26px, 2.6vw, 36px);
  min-height: clamp(178px, 15vw, 212px);
}
.path.res::after { width: 170px; height: 300px; right: -46px; bottom: -120px; }
.res__title {
  font-size: clamp(1.28rem, 1.7vw, 1.46rem);
  line-height: 1.24;
  margin: 0;
}
.res__meta {
  margin-top: auto; padding-top: 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.res__format {
  font-family: var(--sans);
  font-size: .805rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--forest);
}
.res__go { width: 20px; height: 11px; color: var(--rust); flex: none; transition: transform .45s var(--ease-out); }
.res:hover .res__go { transform: translateX(6px); }
.res:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
@media (min-width: 1201px) { .res__format { font-size: .75rem; letter-spacing: .2em; } }

/* Planned but not yet written: visible for review, not clickable.
   Every card should be a real link before the site goes live. */
.res.is-soon { pointer-events: none; }
.res__soon {
  font-family: var(--sans); font-size: .8rem; font-style: italic; color: var(--muted);
}

/* Links and bold text inside article copy. The site removes underlines
   globally, so in-text links need their own visible treatment. */
.article p a:not(.btn) {
  color: var(--navy); font-weight: 500;
  border-bottom: 1px solid var(--rust-300);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.article p a:not(.btn):hover { color: var(--rust); border-bottom-color: var(--rust); }
.article strong { color: var(--navy); font-weight: 600; }
.article h3 { font-size: clamp(1.2rem, 1.6vw, 1.36rem); line-height: 1.25; }
.article .stack + h3, .article h2 + .stack + h3 { margin-top: clamp(28px, 3vw, 38px); }

/* --------------------------------------------------------------------------
   39. TOUCH TARGETS
   Invisible hit areas that make small links easier to tap on phones and
   iPads (44px, Apple's guideline) without changing how anything looks.
   Each uses the pseudo-element that link wasn't already using.
   -------------------------------------------------------------------------- */
.nav__link::before { content: ""; position: absolute; inset: -4px -6px; }
/* footer links sit 12px apart, so -6px each side meets without overlapping */
.footer__list a::after { content: ""; position: absolute; inset: -6px -4px; }
.crumb a, .byline a { position: relative; }
/* measured from inside the 1px underline, hence 13px rather than 12px */
.crumb a::after, .byline a::after { content: ""; position: absolute; inset: -13px -6px; }

/* --------------------------------------------------------------------------
   40. KENNY'S PHOTOS
   The portrait frame was built for cutouts on white, blended into the cream
   with multiply. Real photos need their true colours, so these variants
   switch that off.
   -------------------------------------------------------------------------- */
.portrait__frame picture { display: block; }
.portrait__frame--photo img,
.portrait__frame--round img { mix-blend-mode: normal; display: block; }
/* About page: a circular headshot sits straight on the page, no cream tile */
.portrait__frame.portrait__frame--round { background: transparent; border-radius: 50%; }

/* --------------------------------------------------------------------------
   41. ARTICLE START ON PHONES
   Pulls the first lines of an article up so they peek above the bottom of
   the screen, even on a small iPhone. Seeing text cut off at the edge is
   the natural cue to keep reading.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .pagehead:has(.crumb) { padding-bottom: 34px; }
  .section--article { padding-top: 34px; }
}

/* --------------------------------------------------------------------------
   42. SIGNATURE
   Kenny's sign-off is set in Caveat so it reads as his hand rather than
   another line of type. Loaded only for this one word, so it is set to
   swap: if it is slow, the serif shows first and nothing shifts about.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007E, U+2014;
}
.sig-line {
  font-family: "Caveat", var(--serif);
  font-style: normal;
  font-size: 2.1rem;
  line-height: 1.1;
}