/* =====================================================================
   PURNELL PHILANTHROPY(R) - Strategic Fundraising & Campaign Architecture
   Institutional gravitas with a consciousness-research sensibility.
   Palette echoes the two-P logo: navy primary, blue + green dual accent.
   Fraunces (display serif) + Plus Jakarta Sans (UI/body). Syne is never used.
   ===================================================================== */

:root {
  /* Logo-derived palette */
  --navy:        #1C3E63;   /* primary text, deep sections */
  --navy-deep:   #0E1B2C;   /* deepest section background */
  --navy-2:      #16314e;   /* lifted dark surface */
  --blue:        #2A78C2;   /* blue accent (P #1) */
  --blue-deep:   #1f5d99;   /* darker blue for AA on light */
  --green:       #5BA83E;   /* green accent (P #2) */
  --green-deep:  #468230;   /* darker green for AA on light */

  --ink:         #16273a;   /* deep navy near-black body text */
  --ink-soft:    #3c4d61;   /* secondary text */
  --ink-faint:   #66798f;   /* tertiary / captions */

  --paper:       #FFFFFF;   /* white */
  --light:       #F5F8FB;   /* light tint */
  --light-2:     #eaf1f8;   /* slightly deeper light neutral */
  --card:        #ffffff;   /* card surface */
  --line:        #d8e3ee;   /* hairline on light */
  --line-dark:   rgba(214,228,243,0.16);

  --maxw: 1500px;
  --gutter: clamp(0.75rem, 2.5vw, 2rem);
  --radius: 16px;
  --radius-lg: 26px;

  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 460;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  color: var(--navy);
}
p { margin: 0 0 1.1em; }
.lead { font-size: clamp(1.08rem, 2.1vw, 1.32rem); color: var(--ink-soft); line-height: 1.6; }
strong { font-weight: 600; color: var(--navy); }

.eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue-deep);
  margin: 0 0 1.1rem;
  display: inline-block;
}
.eyebrow .reg { letter-spacing: 0; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap .wrap { padding-left: 0; padding-right: 0; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }
.narrow { max-width: 880px; }
.center { text-align: center; }

/* Section tones */
.tone-paper   { background: var(--paper); }
.tone-paper2  { background: var(--light); }
.tone-dark    { background: var(--navy-deep); color: #d7e2ef; }
.tone-dark h1, .tone-dark h2, .tone-dark h3, .tone-dark h4 { color: #f1f6fb; }
.tone-dark .eyebrow { color: var(--green); }
.tone-dark .lead { color: #c5d4e4; }
.tone-dark p { color: #c0d0e1; }
.tone-dark strong { color: #eaf2fa; }

/* ===================================================================
   HEADER / NAV
   =================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem var(--gutter);
  background: rgba(255,255,255,0.74);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--line);
  padding-top: 0.6rem; padding-bottom: 0.6rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__logo { height: 56px; width: auto; }
.brand__logo--footer { height: 38px; }
.brand__text {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 520;
  letter-spacing: 0.01em;
  color: var(--navy);
  /* The header logo image carries the wordmark, so the text lockup is hidden by
     default. It still shows as the onerror fallback if the image fails to load,
     and is re-enabled in the dark footer (where the dark logo would not read). */
  display: none;
}
.brand .reg { font-size: 0.55em; vertical-align: super; color: var(--blue-deep); }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-soft); position: relative; padding: 0.2rem 0;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--blue); transition: width .35s var(--ease);
}
.nav a:hover { color: var(--blue-deep); }
.nav a:hover::after { width: 100%; }
/* Active page state (multi-page nav) */
.nav a.active { color: var(--navy); font-weight: 600; }
.nav a.active::after { width: 100%; background: var(--green); }
.nav a.nav-cta.active { color: #fff !important; background: var(--blue); }

.nav-cta {
  border: 1px solid var(--blue);
  color: var(--blue-deep) !important;
  border-radius: 100px;
  padding: 0.5rem 1.15rem !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--blue); color: #fff !important; }

.menu-toggle {
  display: none; background: none; border: 0; padding: 0.4rem;
  flex-direction: column; gap: 5px; width: 38px;
}
.menu-toggle span { display: block; height: 2px; width: 24px; background: var(--navy); transition: .3s var(--ease); }

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 0.92rem 1.7rem; border-radius: 100px;
  transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--navy); color: #fff;
  box-shadow: 0 12px 30px -14px rgba(28,62,99,0.6);
}
.btn-primary:hover { background: var(--blue-deep); box-shadow: 0 18px 40px -16px rgba(42,120,194,0.55); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-deep); }
.tone-dark .btn-ghost { color: #e6eef7; border-color: var(--line-dark); }
.tone-dark .btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-light { background: #f1f6fb; color: var(--navy); }
.btn-light:hover { background: #fff; }
.btn .btn-arrow svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.btn:hover .btn-arrow svg { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; font-size: 0.9rem; color: var(--green);
  letter-spacing: 0.01em;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative; min-height: 86vh; display: flex; align-items: center;
  padding: 9rem 0 6rem;
  background:
    radial-gradient(1100px 640px at 80% 14%, rgba(42,120,194,0.16), transparent 60%),
    radial-gradient(820px 560px at 8% 90%, rgba(91,168,62,0.14), transparent 62%),
    linear-gradient(168deg, #ffffff 0%, #f3f8fd 55%, #e9f1f9 100%);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 3; max-width: 880px; }

/* Hero video background: full-width ambient loop, veil fades it in from the left */
.hero--video .hero-media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero--video .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(2px) brightness(0.90) saturate(0.95); }
.hero--video .hero-media-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,1.00) 0%,
      rgba(255,255,255,1.00) 14%,
      rgba(243,248,253,0.92) 26%,
      rgba(235,243,251,0.68) 42%,
      rgba(228,238,248,0.36) 60%,
      rgba(228,238,248,0.10) 78%,
      rgba(228,238,248,0.02) 100%
    ),
    linear-gradient(180deg, rgba(28,62,99,0.04) 0%, rgba(28,62,99,0.14) 100%);
}
@media (min-width: 900px) { .hero--video .hero__inner { max-width: 620px; } }
@media (max-width: 899px) {
  .hero--video .hero-media-veil {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.80) 38%, rgba(233,241,249,0.64) 100%),
      linear-gradient(0deg, rgba(28,62,99,0.10), rgba(28,62,99,0.10));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero-video { display: none; }
  /* with the looping video hidden, hold the poster still as a cover background so
     the hero keeps its image under the existing veil */
  .hero--video .hero-media {
    background: url('assets/hero-poster.jpg') center / cover no-repeat;
  }
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 0.55em;
}
.hero .hero-sub {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 640px; line-height: 1.45; margin-bottom: 2.3rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* breathing orb motif - the two-P mark echo */
.orb {
  position: absolute; border-radius: 50%; filter: blur(2px);
  pointer-events: none; z-index: 1;
  animation: breathe 12s ease-in-out infinite;
}
.orb--1 { width: 480px; height: 480px; right: -110px; top: 6%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,0.5), rgba(42,120,194,0.16) 46%, transparent 72%); }
.orb--2 { width: 320px; height: 320px; left: -80px; bottom: 8%; animation-delay: -5s;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.45), rgba(91,168,62,0.16) 48%, transparent 72%); }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
}
.scroll-cue .line { width: 1px; height: 44px; background: linear-gradient(var(--blue), transparent); animation: cue 2.6s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(0.4); opacity:.4;} 50% { transform: scaleY(1); opacity:1; } }

/* ===================================================================
   PROSE BLOCKS
   =================================================================== */
.prose p { color: var(--ink-soft); }
.tone-dark .prose p { color: #c0d0e1; }
.prose p.emphasis,
p.emphasis {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  color: var(--navy);
  margin-top: 1.4rem;
}
.tone-dark p.emphasis { color: #f1f6fb; }

/* "She understands how..." stacked statements */
.understands {
  margin: 2.2rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--green);
}
.understands p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 0.45em;
}
.understands p:last-child { margin-bottom: 0; }

/* pullquote (Stephenie Purnell bridges that gap.) */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.25;
  color: #f1f6fb;
  margin: 1.6rem 0 0;
}
.tone-dark .pullquote { color: #f1f6fb; }

/* ===================================================================
   COMPLEXITY / LEAD CHECKLIST
   =================================================================== */
.checklist { list-style: none; margin: 1.1rem 0; padding: 0; display: grid; gap: 0.66rem; }
.checklist li { position: relative; padding-left: 1.7rem; color: var(--ink-soft); line-height: 1.55; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 4px rgba(42,120,194,0.13);
}
.checklist li:nth-child(even)::before { background: var(--green); box-shadow: 0 0 0 4px rgba(91,168,62,0.14); }
.tone-dark .checklist li { color: #c5d4e4; }
.tone-dark .checklist li::before { background: var(--green); box-shadow: 0 0 0 4px rgba(91,168,62,0.2); }
.tone-dark .checklist li:nth-child(even)::before { background: #4f97da; box-shadow: 0 0 0 4px rgba(79,151,218,0.2); }

.checklist--lead li {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: #eaf2fa;
  padding-left: 1.6rem;
}
.checklist--lead li::before { top: 0.55em; }

/* ===================================================================
   SECTION HEADERS
   =================================================================== */
.section-head { max-width: 880px; margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.section-head h2 { font-size: clamp(2.15rem, 4.7vw, 3.35rem); margin-bottom: 0.4em; }
.section-head h3 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); }
.section-head .eyebrow--headline {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.4vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: 0.12em;
  color: #f1f6fb;
}
.section-head .lead { margin-bottom: 0.6em; }
.section-head .lead + p { color: var(--ink-faint); }

/* two-column grid */
.grid-2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.grid-2--top { align-items: start; }

/* ===================================================================
   CORE ENGAGEMENT PILLS
   =================================================================== */
.pill-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pill-grid li {
  font-size: 0.95rem; font-weight: 500; color: var(--navy);
  background: #fff; border: 1px solid var(--line);
  padding: 0.7rem 1.25rem; border-radius: 100px;
  position: relative; padding-left: 2.2rem;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pill-grid li::before {
  content: ""; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--green));
}
.pill-grid li:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 12px 28px -18px rgba(28,62,99,0.4); }

/* ===================================================================
   ABOUT PORTRAIT
   =================================================================== */
.about-body { margin-top: clamp(2rem, 5vw, 3.4rem); }
.portrait-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 100% at 30% 12%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(160deg, var(--navy), #122a44 60%, var(--navy-deep));
  box-shadow: 0 30px 70px -32px rgba(14,27,44,0.5);
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.portrait-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 70% 28%, rgba(42,120,194,0.5), transparent 70%),
    radial-gradient(52% 42% at 24% 78%, rgba(91,168,62,0.4), transparent 70%);
  mix-blend-mode: screen;
}
/* real founder portrait fills the frame; hide the placeholder navy wash beneath it */
.portrait-frame--photo::before { display: none; }
.portrait-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.portrait-label {
  padding: 1rem 0 0; color: var(--navy); width: 100%;
}
.portrait-label .pname { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy); margin-bottom: 0.15rem; }
.portrait-label .prole { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-deep); }
.portrait-note {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.24);
  padding: 0.25rem 0.6rem; border-radius: 100px;
}

/* ===================================================================
   IMAGE BAND (full-width photo strips between sections)
   =================================================================== */
.image-band {
  position: relative; width: 100%;
  min-height: clamp(320px, 46vw, 560px);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.image-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,27,44,0.14) 0%, transparent 24%, transparent 74%, rgba(14,27,44,0.18) 100%);
}
.image-band--women { background-image: url('assets/women-philanthropy.jpg'); background-position: center 40%; }

/* ===================================================================
   SERVICES
   =================================================================== */
/* Find Your Path card */
.path-card {
  background: linear-gradient(170deg, #ffffff, #f3f8fd);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.2rem);
  box-shadow: 0 24px 60px -40px rgba(28,62,99,0.35);
}
.path-card__title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 1.4rem; }
.path-q {
  padding: 1.3rem 0; border-top: 1px solid var(--line);
}
.path-q:first-of-type { border-top: 0; padding-top: 0; }
.path-q .q { font-family: var(--font-display); font-size: 1.12rem; color: var(--navy); margin-bottom: 0.5rem; line-height: 1.4; }
.path-q .a { color: var(--blue-deep); font-weight: 600; margin: 0 0 0.2rem; }
.path-examples { list-style: none; margin: 0.5rem 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.path-examples li {
  font-size: 0.86rem; color: var(--ink-soft); background: var(--light-2);
  border: 1px solid var(--line); padding: 0.35rem 0.85rem; border-radius: 100px;
}
.path-close {
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.12rem; color: var(--navy);
}

/* Service blocks */
.svc {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  padding: clamp(2.4rem, 5vw, 3.6rem) 0;
  border-top: 1px solid var(--line);
}
.svc__head h3 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 0.4rem; }
.svc__tag {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.1rem; color: var(--ink-soft); margin: 0;
}
.svc__body > p { color: var(--ink-soft); }
.svc__sub { font-weight: 600; color: var(--navy); margin: 1.3rem 0 0.4rem; }
.svc__invest {
  margin: 1.6rem 0; padding: 1.3rem 1.5rem;
  background: var(--light); border: 1px solid var(--line); border-radius: var(--radius);
}
.svc__invest-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-deep); font-weight: 600; display: block; margin-bottom: 0.5rem; }
.svc__invest p { margin: 0 0 0.3rem; color: var(--ink-soft); }
.svc__invest p:last-child { margin-bottom: 0; }
.svc__price-line { font-size: 1.05rem; color: var(--navy); }
.svc__price-line strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--blue-deep); font-weight: 500; }

/* Retainers */
.retainers-tag { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 2.8vw, 1.8rem); color: var(--ink-soft); margin-bottom: 0.6rem; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tier {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.8rem; display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.tier:hover { transform: translateY(-4px); box-shadow: 0 26px 56px -34px rgba(28,62,99,0.4); }
.tier--feature { border-color: var(--blue); background: linear-gradient(180deg, #f4faff, #eaf3fc); box-shadow: 0 20px 48px -30px rgba(42,120,194,0.4); }
.tier__name { font-family: var(--font-display); font-size: 1.45rem; color: var(--navy); margin-bottom: 0.35rem; }
.tier__dash { display: none; }
.source-integrity-note { display: none !important; }
.tier__price { font-family: var(--font-display); font-size: 2rem; color: var(--blue-deep); line-height: 1.05; margin-bottom: 0.5rem; }
.tier__price small { font-size: 0.92rem; color: var(--ink-faint); font-family: var(--font-ui); }
.tier__from { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); font-weight: 600; margin: 0 0 0.8rem; }
.tier__desc { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 1rem; }
.tier__includes { font-weight: 600; color: var(--navy); margin: 0 0 0.4rem; font-size: 0.92rem; }
.tier .checklist { margin: 0.2rem 0 0; }
.tier .checklist li { font-size: 0.9rem; }
.retainers-note { margin: 1.6rem 0 1.6rem; color: var(--ink-faint); font-style: italic; font-family: var(--font-display); }

/* price rows (hourly) */
.price-rows { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 0.6rem; }
.price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 0.1rem; border-bottom: 1px solid var(--line);
}
.price-row .label { font-weight: 500; color: var(--navy); }
.price-row .amt { font-family: var(--font-display); font-size: 1.3rem; color: var(--blue-deep); white-space: nowrap; }
.price-row .amt small { font-family: var(--font-ui); font-size: 0.74rem; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; display: block; text-align: right; }

/* Ethical standards */
.ethics p { color: var(--ink-soft); }
.afp-quote {
  margin: 1.8rem 0 0; padding: 1.8rem 2rem;
  background: var(--light); border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.afp-quote p {
  font-size: 1rem; line-height: 1.75; color: var(--navy);
  margin: 0 0 1rem;
}
.afp-quote ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--navy); }
.afp-quote li { margin-bottom: 0.35rem; line-height: 1.65; }
.afp-quote cite {
  font-style: normal; font-family: var(--font-ui); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep);
}

/* CTA bands */
.cta-band { max-width: 840px; margin: 0 auto; }
.cta-band h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.cta-band .lead { margin-bottom: 1.8rem; }
#right-path .cta-band, #discovery-call .cta-band { margin-left: auto; margin-right: auto; }
#discovery-call .btn, #right-path .btn { margin-top: 0.4rem; }

/* ===================================================================
   BREADCRUMB (engagement pages)
   =================================================================== */
.breadcrumb {
  background: var(--light);
  border-bottom: 1px solid var(--line);
  padding-top: calc(64px + 0.9rem);   /* clear the fixed header */
  padding-bottom: 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.breadcrumb .wrap { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb a { color: var(--blue-deep); font-weight: 600; transition: color .3s var(--ease); }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumb__sep { color: var(--ink-faint); }
.breadcrumb__current { color: var(--ink-soft); font-weight: 500; }
/* Interior pages open directly with a section (no hero): pad its top so content
   does not sit under the fixed header. The hero handles its own clearance, and
   engagement pages lead with the breadcrumb, which supplies clearance, so reset
   their first section back to normal. */
main > .section:first-child:not(.hero) { padding-top: clamp(9rem, 12vw, 11rem); }
.breadcrumb + main > .section:first-child:not(.hero) { padding-top: clamp(2.6rem, 5vw, 4rem); }

/* ===================================================================
   ENGAGEMENT OVERVIEW CARDS (Services hub)
   =================================================================== */
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
}
.engagement-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.engagement-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 26px 56px -34px rgba(28,62,99,0.4); }
.engagement-card__name { font-size: 1.32rem; margin-bottom: 0.4rem; }
.engagement-card__tag {
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; color: var(--ink-soft); line-height: 1.45; margin: 0 0 1.2rem;
  flex: 1 1 auto;
}
.engagement-card__more { margin-top: auto; }
.engagement-card:hover .engagement-card__more svg { transform: translateX(4px); }

/* ===================================================================
   FIELD NOTES
   =================================================================== */
.byline { margin-bottom: 2rem; }
.byline p { margin: 0; color: var(--ink-soft); font-weight: 500; }
.byline p:first-child { color: var(--navy); }
.notes-empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 2.4rem; text-align: center; background: var(--light);
}
.notes-empty__label { margin: 0; color: var(--ink-faint); font-style: italic; font-family: var(--font-display); font-size: 1.1rem; }

/* ===================================================================
   FIELD NOTES — article list (populated state)
   =================================================================== */
.notes-list { display: flex; flex-direction: column; gap: 3rem; margin-top: 0.5rem; }

.note-article {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 2px 16px -6px rgba(28,62,99,0.07);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.note-article:hover {
  box-shadow: 0 12px 40px -12px rgba(28,62,99,0.18);
  transform: translateY(-3px);
}

.note-article__thumb {
  display: block; width: 100%; height: 260px;
  overflow: hidden; position: relative; margin: 0;
}
.note-article__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.note-article:hover .note-article__thumb img { transform: scale(1.03); }

.note-article__thumb--placeholder {
  background:
    radial-gradient(ellipse 60% 70% at 70% 40%, rgba(42,120,194,0.52), rgba(28,62,99,0.24) 60%, transparent 82%),
    radial-gradient(ellipse 50% 60% at 26% 66%, rgba(91,168,62,0.28), transparent 70%),
    linear-gradient(148deg, #0a192b 0%, var(--navy) 52%, #1f4e7a 100%);
}

.note-article__content { padding: clamp(1.4rem, 3vw, 2.2rem); }

.note-article__meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.note-article__cat {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue-deep);
  background: rgba(42,120,194,0.08); border-radius: 100px;
  padding: 0.2rem 0.62rem;
}
.note-article__date { font-size: 0.8rem; color: var(--ink-faint); }

.note-article__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 500; line-height: 1.26;
  color: var(--navy); margin: 0 0 1.1rem;
}

.note-article__body { color: var(--ink-soft); }
.note-article__body p { margin: 0 0 1rem; line-height: 1.78; }
.note-article__body p:last-child { margin-bottom: 0; }
.note-article__body strong { color: var(--navy); font-weight: 600; }
.note-article__body ul { margin: 0.7rem 0 1rem; padding: 0; list-style: none; }
.note-article__body ul li {
  padding-left: 1.3rem; position: relative;
  margin-bottom: 0.45rem; line-height: 1.65; color: var(--ink-soft);
}
.note-article__body ul li::before {
  content: ''; position: absolute; left: 0; top: 0.68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}

.note-article__byline {
  margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.note-article__byline p {
  margin: 0; font-size: 0.86rem; color: var(--ink-faint);
  font-style: italic; font-family: var(--font-display); line-height: 1.65;
}

/* ===================================================================
   FIELD NOTES — blog index + individual post pages
   =================================================================== */

/* Two-column layout: main content + sticky sidebar */
.fn-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(2rem, 4vw, 3.2rem);
  align-items: start;
}
@media (max-width: 960px) {
  .fn-layout { grid-template-columns: 1fr; }
}

/* ---------- Blog index — card list ---------- */
.fn-cards { display: flex; flex-direction: column; gap: 1.8rem; }

.fn-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 2px 14px -5px rgba(28,62,99,0.07);
  transition: box-shadow .3s var(--ease), transform .28s var(--ease);
  text-decoration: none;
}
.fn-card:hover {
  box-shadow: 0 10px 38px -10px rgba(28,62,99,0.18);
  transform: translateY(-3px);
}
.fn-card__thumb-wrap { position: relative; overflow: hidden; }
.fn-card__thumb {
  width: 100%; height: 100%; min-height: 220px;
  object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.fn-card:hover .fn-card__thumb { transform: scale(1.05); }
.fn-card__body {
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  display: flex; flex-direction: column;
}
.fn-card__meta {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.7rem; flex-wrap: wrap;
}
.fn-card__cat {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--blue-deep);
  background: rgba(42,120,194,0.09); border-radius: 100px;
  padding: 0.18rem 0.58rem;
}
.fn-card__date { font-size: 0.78rem; color: var(--ink-faint); }
.fn-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  font-weight: 500; line-height: 1.28; color: var(--navy);
  margin: 0 0 0.65rem;
}
.fn-card__title a { color: inherit; text-decoration: none; }
.fn-card__title a:hover { color: var(--blue-deep); }
.fn-card__excerpt {
  font-size: 0.88rem; color: var(--ink-soft); line-height: 1.66;
  margin: 0 0 1rem; flex: 1;
}
.fn-card__cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 600; color: var(--blue-deep);
  text-decoration: none; letter-spacing: 0.01em; margin-top: auto;
  transition: gap .2s var(--ease), color .2s;
}
.fn-card__cta:hover { color: var(--navy); gap: 0.55rem; }
.fn-card__cta svg { width: 13px; height: 13px; flex-shrink: 0; }

@media (max-width: 700px) {
  .fn-card { grid-template-columns: 1fr; }
  .fn-card__thumb { min-height: 200px; height: 200px; }
}

/* ---------- Sidebar ---------- */
.fn-sidebar {
  position: sticky; top: 130px;
  display: flex; flex-direction: column; gap: 1.3rem;
}
@media (max-width: 960px) { .fn-sidebar { position: static; } }

.fn-widget {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; background: var(--card);
}
.fn-widget--dark {
  border-color: transparent;
  background:
    radial-gradient(130% 110% at 70% 0%, rgba(42,120,194,0.28), transparent 58%),
    linear-gradient(145deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.fn-widget--light { background: var(--light); }

.fn-widget__title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 500;
  color: var(--navy); margin: 0 0 0.55rem; line-height: 1.3;
}
.fn-widget--dark .fn-widget__title { color: #f1f6fb; }

.fn-widget__body {
  font-size: 0.86rem; line-height: 1.65;
  color: var(--ink-soft); margin: 0 0 1rem;
}
.fn-widget--dark .fn-widget__body { color: #aac2d9; }

.fn-widget__form { display: flex; flex-direction: column; gap: 0.5rem; }
.fn-widget__form input[type="email"] {
  padding: 0.6rem 0.8rem; border: 1px solid var(--line);
  border-radius: 8px; font-family: var(--font-ui); font-size: 0.86rem;
  color: var(--ink); background: var(--paper); width: 100%;
  transition: border-color .2s;
}
.fn-widget__form input[type="email"]:focus { outline: none; border-color: var(--blue); }
.fn-widget__form .btn { width: 100%; justify-content: center; }

.fn-widget__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 600; color: var(--blue-deep);
  text-decoration: none;
  transition: gap .2s var(--ease), color .2s;
}
.fn-widget__link:hover { color: var(--navy); gap: 0.5rem; }
.fn-widget__link svg { width: 13px; height: 13px; }

/* ---------- Individual post pages ---------- */

/* Featured image strip (handles fixed-header clearance) */
.fn-post-featured-wrap { padding-top: 130px; background: var(--navy-deep); overflow: hidden; }
.fn-post-featured-img {
  width: 100%; height: clamp(260px, 34vw, 460px);
  object-fit: cover; display: block;
}

/* Post header/body inside the content section */
.fn-post-breadcrumb {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 1.6rem;
}
.fn-post-breadcrumb a {
  color: var(--blue-deep); font-weight: 500; text-decoration: none;
  transition: color .2s;
}
.fn-post-breadcrumb a:hover { text-decoration: underline; }
.fn-post-breadcrumb__sep { color: var(--line); }

.fn-post__meta {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0.8rem; flex-wrap: wrap;
}
.fn-post__cat {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--blue-deep);
  background: rgba(42,120,194,0.08); border-radius: 100px;
  padding: 0.2rem 0.58rem;
}
.fn-post__date { font-size: 0.78rem; color: var(--ink-faint); }

.fn-post__title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.6vw, 2.6rem);
  font-weight: 500; line-height: 1.2; color: var(--navy);
  margin: 0 0 2rem;
}

.fn-post__body { color: var(--ink-soft); }
.fn-post__body p { margin: 0 0 1.1rem; line-height: 1.82; font-size: 1.04rem; }
.fn-post__body p:last-child { margin-bottom: 0; }
.fn-post__body strong { color: var(--navy); font-weight: 600; }
.fn-post__body ul { margin: 0.8rem 0 1.2rem; padding: 0; list-style: none; }
.fn-post__body ul li {
  padding-left: 1.4rem; position: relative;
  margin-bottom: 0.5rem; line-height: 1.72; font-size: 1.04rem;
}
.fn-post__body ul li::before {
  content: ''; position: absolute; left: 0; top: 0.68em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}

.fn-post__byline-card {
  margin-top: 2.4rem; padding: 1.3rem 1.5rem;
  background: var(--light); border-radius: var(--radius);
  border-left: 3px solid var(--blue);
}
.fn-post__byline-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue-deep); margin: 0 0 0.45rem;
}
.fn-post__byline-text {
  margin: 0; font-size: 0.9rem; color: var(--ink-soft);
  font-style: italic; font-family: var(--font-display); line-height: 1.7;
}

.fn-post__back {
  margin-top: 1.8rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.83rem; font-weight: 600; color: var(--blue-deep);
  text-decoration: none;
  transition: gap .2s var(--ease), color .2s;
}
.fn-post__back:hover { color: var(--navy); gap: 0.6rem; }
.fn-post__back svg { width: 14px; height: 14px; transform: rotate(180deg); }

/* ===================================================================
   CONTACT
   =================================================================== */
.contact-card {
  background: linear-gradient(160deg, var(--navy-2), var(--navy-deep));
  border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 4rem);
  color: #d7e2ef; position: relative; overflow: hidden;
}
.contact-card::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(58% 70% at 86% 8%, rgba(42,120,194,0.26), transparent 60%),
              radial-gradient(50% 60% at 8% 96%, rgba(91,168,62,0.2), transparent 62%);
}
.contact-card > * { position: relative; z-index: 2; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,3.6rem); align-items: start; }
.contact-intro h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.contact-intro .btn { margin-top: 0.6rem; }
.contact-form-wrap { background: rgba(255,255,255,0.05); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1.6rem; }
.embed-note { color: #9fb4cc; font-size: 0.92rem; text-align: center; margin: 0; line-height: 1.6; }

/* ===================================================================
   FORMS (Netlify) - shared field styling
   Two contexts: on the dark contact card (default, light text/inputs) and
   the light FP101 panel (.pp-form--light). Real <label for> on every field,
   visible required marker, AA-contrast focus ring, inline error text.
   =================================================================== */
.pp-form { display: grid; gap: 1.05rem; }
.pp-form__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.pp-field { display: grid; gap: 0.4rem; }
.pp-field label,
.pp-fieldset legend {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  color: #eaf2fa;
}
.pp-field .req { color: var(--green); margin-left: 0.1rem; }
.pp-form input,
.pp-form select,
.pp-form textarea {
  font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.5;
  color: #f1f6fb;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.pp-form textarea { resize: vertical; min-height: 96px; }
.pp-form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c2dc' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 16px;
  padding-right: 2.4rem;
}
.pp-form input::placeholder,
.pp-form textarea::placeholder { color: #93a9c2; }
.pp-form input:focus,
.pp-form select:focus,
.pp-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(91,168,62,0.35);
  background-color: rgba(255,255,255,0.1);
}
.pp-form [aria-invalid="true"] {
  border-color: #ff9f9f;
  box-shadow: 0 0 0 3px rgba(255,120,120,0.3);
}
.field-error { color: #ffc4c4; font-size: 0.78rem; min-height: 1em; line-height: 1.3; }
.form-status { color: #c5d4e4; font-size: 0.85rem; margin: 0.2rem 0 0; min-height: 1em; }

/* Checkbox + radio groups */
.pp-fieldset { border: 1px solid var(--line-dark); border-radius: 12px; padding: 0.9rem 1rem 1rem; margin: 0; }
.pp-fieldset legend { padding: 0 0.4rem; }
.pp-choice { display: flex; align-items: center; gap: 0.55rem; padding: 0.32rem 0; }
.pp-choice input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--green); margin: 0; }
.pp-choice label { font-weight: 400; font-size: 0.92rem; color: #d7e2ef; cursor: pointer; }

/* Inline field row, used for the 3 / 6 / 9 / 12 month projections */
.pp-field-inline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.pp-field-inline .pp-field label { font-size: 0.82rem; }
@media (max-width: 560px) { .pp-field-inline { grid-template-columns: repeat(2, 1fr); } }

/* Inline success state shown after submit (progressive enhancement). */
.form-success {
  background: rgba(91,168,62,0.12);
  border: 1px solid rgba(91,168,62,0.4);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.form-success h3 { color: #f1f6fb; margin-bottom: 0.5rem; font-size: 1.4rem; }
.form-success p { color: #c5d4e4; margin: 0; }
.form-success:focus { outline: none; }

/* FP101 panel: light surface variant */
.pp-form-panel {
  background: linear-gradient(170deg, #ffffff, #f3f8fd);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: 0 24px 60px -40px rgba(28,62,99,0.35);
}
.pp-form--light label,
.pp-form--light .pp-fieldset legend { color: var(--navy); }
.pp-form--light input,
.pp-form--light select,
.pp-form--light textarea {
  color: var(--ink); background-color: #fff; border-color: var(--line);
}
.pp-form--light select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5d99' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.pp-form--light input::placeholder,
.pp-form--light textarea::placeholder { color: var(--ink-faint); }
.pp-form--light input:focus,
.pp-form--light select:focus,
.pp-form--light textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,120,194,0.25); background-color: #fff;
}
.pp-form--light [aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,0.18); }
.pp-form--light .field-error { color: #b3261e; }
.pp-form--light .form-status { color: var(--ink-soft); }
.pp-form--light .pp-fieldset { border-color: var(--line); }
.pp-form--light .pp-choice label { color: var(--ink-soft); }
.pp-form--light .req { color: var(--green-deep); }
.pp-form-panel .form-success { background: rgba(91,168,62,0.1); border-color: rgba(91,168,62,0.35); margin-top: 1.4rem; }
.pp-form-panel .form-success h3 { color: var(--navy); }
.pp-form-panel .form-success p { color: var(--ink-soft); }

/* Services hub direct link to FP101 assessment */
.services-hub-link {
  margin: 1.8rem 0 0; color: var(--ink-soft); font-size: 0.98rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

/* ===================================================================
   FIND YOUR PATH - interactive recommender (client-side only)
   =================================================================== */
.path-quiz {
  background: linear-gradient(160deg, var(--navy-2), var(--navy-deep));
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1.8rem; color: #d7e2ef;
  box-shadow: 0 24px 60px -40px rgba(14,27,44,0.5);
}
.path-quiz .eyebrow { color: var(--green); }
.path-quiz__title { color: #f1f6fb; font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 0.4rem; }
.path-quiz__intro { color: #c5d4e4; margin-bottom: 1.4rem; }
.path-quiz__progress { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin: 0 0 0.7rem; }
.path-quiz__question {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.35; color: #f1f6fb; margin: 0 0 1.2rem;
}
.path-quiz__question:focus { outline: none; }
.path-quiz__answers { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.path-quiz__answer { text-align: left; }
.path-quiz__result { margin-top: 0.2rem; }
.path-quiz__result:focus { outline: none; }
.path-quiz__rec-name { color: #f1f6fb; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 0.5rem; }
.path-quiz__rec-note { color: #c5d4e4; margin-bottom: 1.3rem; }
.path-quiz__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.path-quiz__restart {
  margin-top: 1.4rem; background: none; border: 0; padding: 0; color: var(--green);
  font-family: var(--font-ui);
}
.path-quiz__restart:hover { color: #7fcf5f; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { background: var(--navy-deep); color: #aabfd5; padding: clamp(3.2rem, 6vw, 5rem) 0 2.4rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(2rem,5vw,4rem); margin-bottom: 2.6rem; }
/* The dark-blue logo would not read on the dark footer, so the footer keeps the
   light text wordmark and hides the logo image. */
.footer-brand .brand__logo { display: none; }
.footer-brand .brand__text { display: inline; color: #f1f6fb; font-size: 1.5rem; }
.footer-brand p { color: #8da6c1; font-size: 0.95rem; max-width: 38ch; margin-top: 0.8rem; }
.footer-col h4 { color: #cfe0f0; font-family: var(--font-ui); font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 600; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a { color: #aabfd5; font-size: 0.95rem; transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--green); }

.sister-brand {
  border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1.4rem 1.6rem;
  background: rgba(42,120,194,0.07); display: flex; flex-direction: column; gap: 0.5rem;
  margin-bottom: 2.6rem; max-width: 520px;
}
.sister-brand .label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); }
.sister-brand .name { font-family: var(--font-display); font-size: 1.3rem; color: #f1f6fb; }
.sister-brand .name .reg { font-size: 0.55em; vertical-align: super; }
.sister-brand p { color: #8da6c1; font-size: 0.92rem; margin: 0; max-width: 60ch; }

.footer-bottom {
  border-top: 1px solid var(--line-dark); padding-top: 1.8rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: #7d96b2;
}
.footer-bottom .reg, .footer-bottom .trade { font-size: 0.85em; vertical-align: super; }
.footer-bottom .legal { max-width: 64ch; line-height: 1.6; }

/* ===================================================================
   REVEAL ANIMATION
   =================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .orb, .scroll-cue .line { animation: none; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 940px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2--top .about-portrait { max-width: 360px; }
  .svc { grid-template-columns: 1fr; gap: 1rem; }
  .tier-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }

  .nav { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 0.6rem var(--gutter) 1.2rem;
    transform: translateY(-120%); opacity: 0; visibility: hidden; transition: .4s var(--ease); }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
  .nav a::after { display: none; }
  .nav-cta { text-align: center; margin-top: 0.8rem; border: 1px solid var(--blue); }
  .menu-toggle { display: flex; }
  .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .afp-quote { padding: 1.4rem 1.3rem; }
}

/* ===================================================================
   SELF-GUIDED NAVIGATION (Services page, plain text, no JavaScript)
   =================================================================== */
.self-guide {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--green-deep);
  border-radius: var(--radius); padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
.self-guide__title {
  font-size: clamp(1.4rem, 3vw, 1.95rem); color: var(--navy);
  margin-bottom: 1.1rem; line-height: 1.25;
}
.self-guide p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1rem; }
.self-guide a { color: var(--blue-deep); font-weight: 600; }
.self-guide a:hover { color: var(--navy); }
.self-guide__list { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.self-guide__list li { color: var(--ink-soft); line-height: 1.6; }
.self-guide__close { color: var(--ink-faint); margin-bottom: 0; }

/* ===================================================================
   INTEGRATION HOLDING STYLES (clearly labeled, not wired)
   =================================================================== */
.integration-placeholder {
  margin-top: 1.6rem;
  background: var(--light); border: 1px dashed var(--blue-deep);
  border-radius: var(--radius); padding: 1.3rem 1.4rem;
}
.integration-placeholder__label {
  display: inline-block; font-family: var(--font-ui);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--blue-deep);
  background: rgba(42,120,194,0.10); border-radius: 999px;
  padding: 0.3rem 0.7rem; margin-bottom: 0.9rem;
}
.integration-placeholder__head { font-weight: 600; color: var(--navy); margin: 0 0 0.5rem; }
.integration-placeholder__list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.integration-placeholder__list li { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.integration-placeholder__list a { color: var(--blue-deep); font-weight: 600; }
.integration-placeholder__note { margin: 0.8rem 0 0; color: var(--ink-faint); font-size: 0.9rem; }

/* ===================================================================
   LEGAL PAGES (placeholder body)
   =================================================================== */
.legal-body { color: var(--ink-soft); line-height: 1.7; max-width: 70ch; }
.legal-body p { margin-bottom: 1rem; }

/* ===================================================================
   FOOTER: Kit email signup placeholder + legal links
   =================================================================== */
.footer-signup .embed-note { text-align: left; color: #9fb4cc; margin-bottom: 0.8rem; }
.footer-signup__form { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-signup__form input[type="email"] {
  background: rgba(255,255,255,0.06); border: 1px solid var(--line-dark);
  border-radius: 10px; padding: 0.7rem 0.9rem; color: #d7e2ef;
  font-family: var(--font-ui); font-size: 0.95rem;
}
.footer-signup__form input::placeholder { color: #7d96b2; }
.footer-signup__form .btn { width: 100%; justify-content: center; }

.footer-legal-links { display: flex; align-items: center; gap: 0.6rem; }
.footer-legal-links a { color: #aabfd5; }
.footer-legal-links a:hover { color: var(--green); }
.footer-legal-sep { color: #5d7592; }

/* Visually hidden but available to assistive technology. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===================================================================
   SERVICES HERO + FIND YOUR PATH interactive quiz
   Two-column hero: copy on one half, the quiz on the other. The quiz
   asks branching questions and ends with one CTA to a service page.
   =================================================================== */
.services-hero { grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(1.8rem, 4vw, 3.4rem); }
.services-hero .section-head { max-width: none; margin-bottom: 0; }

.fyp-quiz { align-self: start; }
.fyp-intro { color: var(--ink-soft); margin: -0.4rem 0 1.4rem; font-size: 0.98rem; }
.fyp-stage { min-height: 230px; }

.fyp-step { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 0.7rem; }
.fyp-q { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--navy); line-height: 1.3; margin: 0 0 1.3rem; }
.fyp-opts { display: grid; gap: 0.7rem; }
.fyp-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-ui); font-size: 1rem; color: var(--navy);
  background: var(--light); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.fyp-opt:hover { border-color: var(--blue); background: #fff; transform: translateY(-1px); }
.fyp-nav { margin-top: 1.1rem; min-height: 1.2rem; }
.fyp-back, .fyp-restart {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-ui); font-size: 0.86rem; color: var(--ink-faint);
}
.fyp-back:hover, .fyp-restart:hover { color: var(--navy); text-decoration: underline; }

.fyp-result-eye { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 0.6rem; }
.fyp-result-name { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--navy); line-height: 1.2; margin-bottom: 0.8rem; }
.fyp-result-blurb { color: var(--ink-soft); line-height: 1.6; margin: 0 0 1.4rem; }
.fyp-cta { display: inline-flex; }
.fyp-restart { display: block; margin-top: 1rem; }
.fyp-noscript { color: var(--ink-soft); }
.fyp-also { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--ink-faint); line-height: 1.55; }
.fyp-also-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.4rem; }
.fyp-also a { color: var(--blue-deep); font-weight: 600; }
.fyp-also a:hover { text-decoration: underline; }

@media (max-width: 899px) {
  .services-hero { grid-template-columns: 1fr; }
}

/* ============================ SERVICES PAGE ============================
   svc-banner: dark hero section with boardroom image as a translucent overlay.
   svc-photo: full-bleed image in the two-column service feature sections. */

.svc-banner {
  position: relative;
  background: var(--navy-deep);
  color: #d7e2ef;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  overflow: hidden;
}
.svc-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/services-hero.jpg');
  background-size: cover;
  background-position: center right;
  opacity: 0.30;
  pointer-events: none;
}
.svc-banner .wrap { position: relative; z-index: 1; }
.svc-banner h2    { color: #f1f6fb; }
.svc-banner .eyebrow { color: var(--green); }
.svc-banner .prose p { color: #c0d0e1; }
.svc-banner p.emphasis { color: #f1f6fb; font-style: italic; }

.svc-photo {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 24px 56px -24px rgba(28,62,99,0.28);
}
.svc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

@media (max-width: 680px) {
  .svc-photo { border-radius: 8px; }
  .svc-photo img { border-radius: 8px; }
}

/* ===== 2026-06-16: interior page hero bands (navy) ===== */
.page-hero { position: relative; min-height: 42vh; display: flex; align-items: center;
  padding: 8rem 0 4rem; overflow: hidden; background-size: cover; background-repeat: no-repeat;
  background-position: center right; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--green); }
.page-hero h1 { color: #fff; max-width: 860px; margin: 0; font-size: clamp(2.45rem, 5.5vw, 4.4rem); }

.about-complexity { color: #c5d4e4; margin-bottom: 0.6rem; }