:root {
  --bg: #12141C;
  --panel: #171A24;
  --panel-2: #1A1E2A;
  --line: rgba(176,141,87,0.22);
  --accent: #B08D57;
  --accent-soft: #C9AC7C;
  --heading: #ECE4D3;
  --body: #C7C1B4;
  --muted: #8A7968;
  --midnight: #1B2340;
  --max: 680px;
  --max-wide: 900px;
  --parchment-bg: #EDE6D6;
  --parchment-heading: #171A24;
  --parchment-body: #4A4436;
  --parchment-accent: #8A6A3D;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  line-height: 1.75;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* Fine film-grain texture over the whole site, very low opacity.
   Non-figurative, keeps the flat dark background from feeling inert. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1, h2, h3, .serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--heading);
  font-weight: 400;
  letter-spacing: 0.01em;
}

a { color: var(--accent-soft); text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: var(--max-wide); margin: 0 auto; padding: 0 28px; }
.wrap-form { max-width: 600px; margin: 0 auto; padding: 0 28px; }
.label-note { text-transform: none; letter-spacing: 0; }
.hero-short { min-height: 80vh; }

/* Section spacing modifiers — named gaps instead of inline magic numbers.
   Every section elsewhere uses the base 130px / .tight 90px rhythm;
   these three cover the handful of places that deliberately break it. */
.section-flush { padding-top: 0; }
.section-tuck { padding-top: 60px; padding-bottom: 0; }
.section-lead { padding-top: 60px; }
.divider-bottom { border-bottom: 1px solid var(--line); }
.link-plain { color: inherit; }
.mt-md { margin-top: 40px; }
.mt-lg { margin-top: 50px; }
.text-center { text-align: center; }
/* A supporting line directly under a section title, pulled tight against
   it instead of leaving the title's full 60px bottom margin. */
.section-subnote { margin-top: -30px; margin-bottom: 50px; }

/* Nav */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(18,20,28,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav.wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; padding-bottom: 20px; max-width: 920px;
}
.wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--heading);
  text-transform: uppercase;
}
.wordmark span { color: var(--accent); }
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-family: 'Inter', sans-serif;
}
.nav-links a:hover { color: var(--accent-soft); }

/* Mobile nav toggle — three-bar icon, hidden on desktop, shown & wired
   up via the .nav-links.is-open class (toggled by a small inline script
   on each page) inside the max-width:720px query below. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--accent-soft);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.btn {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent-soft) !important;
  padding: 11px 26px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
}
.btn:hover { background: var(--accent); color: var(--bg) !important; }
.btn-solid { background: var(--accent); color: var(--bg) !important; }
.btn-solid:hover { background: var(--accent-soft); }

/* Sections */
section { padding: 130px 0; position: relative; }
section.tight { padding: 90px 0; }
/* Alternating panel-tone background for scroll rhythm. Applied to a handful
   of sections (not every other one mechanically) to break up the run of
   identical flat-background sections down the homepage. */
section.section-alt { background: var(--panel); }

/* Parchment panel — a framed, contained parchment card sitting on the
   section's normal dark background, instead of flipping the whole section
   light. Reads as one more object in the site's existing "specimen" family
   (portrait frames, panel-block quote, the corner-marked partner card)
   rather than an environmental color inversion, which is why this replaced
   an earlier full-bleed section.section-flip attempt that felt too stark.
   Used sparingly (once, maybe twice per page). Apply to a .wrap div, not
   the <section> itself — .wrap's max-width/centering still applies, this
   class only adds the parchment fill, border, shadow, & padding, plus
   covers the common contents (eyebrow, headings, lede, body copy, lists,
   divider, links, buttons). A box with pillars/forms inside it may need
   its own override added when it's actually used. */
.parchment-panel {
  background: var(--parchment-bg);
  border: 1px solid rgba(23,20,28,0.12);
  padding: 56px 48px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.45);
}
.parchment-panel .eyebrow { color: var(--parchment-accent); }
.parchment-panel h1, .parchment-panel h2, .parchment-panel h3,
.parchment-panel .lede, .parchment-panel .serif,
.parchment-panel .wordmark { color: var(--parchment-heading); }
.parchment-panel h2.section-title em,
.parchment-panel .lede em,
.parchment-panel .hero h1 em { color: var(--parchment-accent); font-style: italic; }
.parchment-panel p, .parchment-panel .lede-sub, .parchment-panel li,
.parchment-panel blockquote p { color: var(--parchment-body); }
.parchment-panel .criteria li strong { color: var(--parchment-heading); }
.parchment-panel .divider { background: var(--parchment-accent); opacity: 1; }
.parchment-panel a { color: var(--parchment-accent); }
.parchment-panel .btn { border-color: var(--parchment-accent); color: var(--parchment-accent) !important; }
.parchment-panel .btn:hover { background: var(--parchment-accent); color: var(--parchment-bg) !important; }
.parchment-panel .btn-solid { background: var(--parchment-accent); color: var(--parchment-bg) !important; }

/* Subtle background texture, applied directly to a <section> (not a .wrap
   child). Sits behind the section's normal content via z-index:-1 on the
   pseudo-element — section already has position:relative from the base
   rule above, so no extra positioning is needed on the content. Used
   sparingly, one of each per page, never stacked with parchment-panel or
   interlude on the same section. */
.texture-asanoha,
.texture-mist { overflow: hidden; }

/* Asanoha — traditional Japanese hemp-leaf lattice, traced from a real
   reference image (measured, not approximated) at 8% opacity in bronze. */
.texture-asanoha::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='240'%3E%3Cdefs%3E%3Cpattern id='a' width='140' height='240' patternUnits='userSpaceOnUse'%3E%3Cg stroke='%23B08D57' stroke-width='1.6' fill='none'%3E%3Cline x1='0' y1='240' x2='140' y2='240'/%3E%3Cline x1='70' y1='-120' x2='140' y2='0'/%3E%3Cline x1='140' y1='240' x2='210' y2='120'/%3E%3Cline x1='0' y1='240' x2='70' y2='360'/%3E%3Cline x1='0' y1='0' x2='70' y2='-120'/%3E%3Cline x1='70' y1='120' x2='140' y2='0'/%3E%3Cline x1='-70' y1='120' x2='0' y2='0'/%3E%3Cline x1='-70' y1='120' x2='70' y2='120'/%3E%3Cline x1='70' y1='120' x2='140' y2='240'/%3E%3Cline x1='140' y1='240' x2='280' y2='240'/%3E%3Cline x1='140' y1='0' x2='210' y2='-120'/%3E%3Cline x1='140' y1='240' x2='210' y2='360'/%3E%3Cline x1='-70' y1='-120' x2='0' y2='0'/%3E%3Cline x1='70' y1='120' x2='210' y2='120'/%3E%3Cline x1='-140' y1='0' x2='0' y2='0'/%3E%3Cline x1='0' y1='240' x2='70' y2='120'/%3E%3Cline x1='-70' y1='360' x2='0' y2='240'/%3E%3Cline x1='140' y1='0' x2='280' y2='0'/%3E%3Cline x1='-70' y1='120' x2='0' y2='240'/%3E%3Cline x1='0' y1='0' x2='140' y2='0'/%3E%3Cline x1='70' y1='360' x2='140' y2='240'/%3E%3Cline x1='140' y1='0' x2='210' y2='120'/%3E%3Cline x1='-140' y1='240' x2='0' y2='240'/%3E%3Cline x1='0' y1='0' x2='70' y2='120'/%3E%3Cline x1='0' y1='80' x2='-70' y2='120'/%3E%3Cline x1='210' y1='280' x2='140' y2='240'/%3E%3Cline x1='0' y1='320' x2='0' y2='240'/%3E%3Cline x1='140' y1='80' x2='140' y2='0'/%3E%3Cline x1='70' y1='200' x2='70' y2='120'/%3E%3Cline x1='-70' y1='-40' x2='0' y2='0'/%3E%3Cline x1='70' y1='280' x2='140' y2='240'/%3E%3Cline x1='140' y1='80' x2='210' y2='120'/%3E%3Cline x1='-70' y1='200' x2='0' y2='240'/%3E%3Cline x1='0' y1='160' x2='0' y2='240'/%3E%3Cline x1='70' y1='40' x2='0' y2='0'/%3E%3Cline x1='70' y1='40' x2='70' y2='120'/%3E%3Cline x1='210' y1='-40' x2='140' y2='0'/%3E%3Cline x1='-70' y1='280' x2='0' y2='240'/%3E%3Cline x1='140' y1='320' x2='140' y2='240'/%3E%3Cline x1='140' y1='160' x2='140' y2='240'/%3E%3Cline x1='0' y1='160' x2='-70' y2='120'/%3E%3Cline x1='0' y1='-80' x2='0' y2='0'/%3E%3Cline x1='70' y1='200' x2='0' y2='240'/%3E%3Cline x1='70' y1='-40' x2='140' y2='0'/%3E%3Cline x1='140' y1='80' x2='70' y2='120'/%3E%3Cline x1='210' y1='200' x2='140' y2='240'/%3E%3Cline x1='140' y1='160' x2='210' y2='120'/%3E%3Cline x1='-70' y1='40' x2='0' y2='0'/%3E%3Cline x1='0' y1='80' x2='0' y2='0'/%3E%3Cline x1='0' y1='80' x2='70' y2='120'/%3E%3Cline x1='70' y1='280' x2='0' y2='240'/%3E%3Cline x1='210' y1='40' x2='140' y2='0'/%3E%3Cline x1='70' y1='-40' x2='0' y2='0'/%3E%3Cline x1='0' y1='160' x2='70' y2='120'/%3E%3Cline x1='70' y1='40' x2='140' y2='0'/%3E%3Cline x1='140' y1='160' x2='70' y2='120'/%3E%3Cline x1='70' y1='200' x2='140' y2='240'/%3E%3Cline x1='140' y1='-80' x2='140' y2='0'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='140' height='240' fill='url(%23a)'/%3E%3C/svg%3E");
}

/* Drifting mist blooms — soft, blurred bronze washes, no hard edges. */
.texture-mist::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  filter: blur(6px);
  background:
    radial-gradient(ellipse 480px 380px at 18% 22%, rgba(176,141,87,0.16), transparent 70%),
    radial-gradient(ellipse 420px 460px at 82% 78%, rgba(176,141,87,0.13), transparent 70%),
    radial-gradient(ellipse 360px 340px at 55% 8%, rgba(201,172,124,0.11), transparent 70%);
}
/* The About page's bio section is much taller than the other .texture-mist
   usages (Home, The Offer), so the default percentages land the blooms up
   near the top of it. Push them down into the lower half of the section. */
.section-tuck.texture-mist::before {
  background:
    radial-gradient(ellipse 480px 380px at 18% 55%, rgba(176,141,87,0.16), transparent 70%),
    radial-gradient(ellipse 420px 460px at 82% 88%, rgba(176,141,87,0.13), transparent 70%),
    radial-gradient(ellipse 360px 340px at 55% 42%, rgba(201,172,124,0.11), transparent 70%);
}

.divider {
  width: 40px; height: 1px; background: var(--accent);
  margin: 0 auto 34px auto; opacity: 0.7;
}
.eyebrow {
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent); text-align: center; margin-bottom: 22px; display: block;
}
h2.section-title {
  font-size: clamp(30px, 4vw, 44px);
  text-align: center;
  margin: 0 0 60px 0;
  font-weight: 400;
}
h2.section-title em { font-style: italic; color: var(--accent-soft); }
h2.section-title.section-title-sm { font-size: 30px; }

p { margin: 0 0 22px 0; }
p:last-child { margin-bottom: 0; }

/* Hero */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 160px 28px 120px 28px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(176,141,87,0.08), transparent 60%),
    linear-gradient(180deg, #12141C 0%, #0F1118 100%);
  border-bottom: 1px solid var(--line);
}
.hero .eyebrow-top {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 34px;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.25;
  max-width: 880px;
  font-weight: 400;
  margin: 0 0 30px 0;
}
.hero h1 em { font-style: italic; color: var(--accent-soft); }
.hero .sub {
  max-width: 560px;
  color: var(--body);
  font-size: 18px;
  margin: 0 0 48px 0;
}

/* Hero background photograph — fog in pine forest (Adam Bixby, Unsplash,
   free license, no attribution required). Pre-treated in the file itself
   (grayscale, contrast 1.08, brightness 0.6) to match the portrait recipe;
   this layer only handles placement, opacity, & the edge dissolve. */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("images/hero-photo-treated.jpg") center bottom / cover no-repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 30%, #000 55%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.18) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 30%, #000 55%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.18) 100%);
}
/* Bronze-to-dark wash multiplied over the photo, echoing the portrait
   frames' gradient so every photograph on the site shares one cast. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(176,141,87,0.10) 0%, rgba(18,20,28,0.15) 55%, rgba(18,20,28,0.55) 100%);
  mix-blend-mode: multiply;
}
.hero > * { position: relative; z-index: 1; }

/* Portrait block */
.lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--heading);
  line-height: 1.5;
  text-align: center;
  font-weight: 400;
  max-width: 680px;
  margin: 0 auto;
}
.lede em { font-style: italic; color: var(--accent-soft); }
/* Slightly larger than the rest of the .lede line, for a second line
   meant to land as the punchline (e.g. "It's a capacity problem"). */
.lede em.lede-punch { font-size: 1.18em; }
/* Widened variant for a .lede sitting in a .wrap-wide instead of .wrap,
   used when a line is too long to hold on one line at 680px — the default
   .lede max-width still wins over a wider parent unless overridden here. */
.lede-wide { max-width: 820px; }

.panel-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 56px 48px;
}

/* Supporting copy under a bare lede — keeps orphan paragraphs anchored
   instead of floating loose on the flat background. */
.lede-sub {
  text-align: center;
  max-width: 620px;
  color: var(--body);
  font-size: 16px;
  margin: 26px auto 0 auto;
}
.lede-emphasis {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  color: var(--heading);
  font-size: clamp(28px, 4vw, 42px);
  font-style: italic;
  margin: 44px auto 0 auto;
}

/* Interlude bands — short full-width image breaks, one or two per page.
   Images are pre-treated files (grayscale/darkened, embers keep muted
   color); this layer handles placement, opacity, & the edge dissolve. */
.interlude {
  position: relative; min-height: 44vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 80px 28px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.interlude-img {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 30%, #000 70%, rgba(0,0,0,0.25) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 30%, #000 70%, rgba(0,0,0,0.25) 100%);
}
.interlude-tint {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(176,141,87,0.08) 0%, rgba(18,20,28,0.2) 55%, rgba(18,20,28,0.5) 100%);
  mix-blend-mode: multiply;
}
.interlude .line {
  position: relative; z-index: 1;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(24px, 3.2vw, 34px); color: var(--heading);
  line-height: 1.4; max-width: 700px; margin: 0;
}
.interlude .place-label {
  position: relative; z-index: 1; margin: 0;
  font-family: 'Inter', sans-serif; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.interlude-ember .interlude-img { opacity: 0.45; }
.interlude-granite .interlude-img { opacity: 0.4; }

/* Pillars */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pillar {
  background: var(--panel);
  padding: 46px 40px;
  position: relative;
  overflow: hidden;
}
.pillar .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; color: var(--accent);
  letter-spacing: 0.2em;
  display: block; margin-bottom: 14px;
  position: relative;
}
.pillar h3 { font-size: 25px; margin: 0 0 14px 0; position: relative; }
.pillar p { font-size: 15px; color: var(--body); margin: 0; position: relative; }
/* Oversized faint numeral watermark, used only where the .pillar-watermark
   span is present in the markup (the Four Pillars section on the homepage),
   not on every reuse of the .pillar card style elsewhere. */
/* Standalone card for a 3-item pillars row: two cards grid normally, the
   third sits centered below on its own instead of leaving an empty grid
   cell (which showed the grid's gold hairline background as a solid block
   rather than a 1px line). */
.pillar-solo {
  max-width: calc(50% - 0.5px);
  margin: 1px auto 0 auto;
  border: 1px solid var(--line);
}
@media (max-width: 720px) {
  .pillar-solo { max-width: none; }
}

.pillar-watermark {
  position: absolute;
  top: -30px;
  right: -6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 140px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

/* Steps (how I work) */
.steps { counter-reset: step; }
.step { display: flex; gap: 28px; padding: 34px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n {
  counter-increment: step;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; color: var(--accent); min-width: 44px;
}
.step .n::before { content: counter(step, decimal-leading-zero); }
.step h4 { font-size: 20px; margin: 0 0 8px 0; color: var(--heading); font-family: 'Cormorant Garamond', serif; font-weight: 500; }
.step p { font-size: 15px; margin: 0; color: var(--body); }

/* Pricing */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 20px; }
.tier { background: var(--panel); padding: 30px 18px; text-align: center; }
.tier.active { background: var(--panel-2); }
.tier .range { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; }
.tier .price { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: var(--heading); }
.tier.active .price { color: var(--accent-soft); }
.ladder-note { text-align: center; font-size: 13px; color: var(--muted); font-style: italic; }

.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; margin-top: 10px; }
.included-grid .item h4 { font-family: 'Inter'; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-soft); font-weight: 500; margin: 0 0 8px 0; }
.included-grid .item p { font-size: 15px; margin: 0; }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
blockquote {
  margin: 0; background: var(--panel); border-left: 2px solid var(--accent);
  padding: 30px 32px; font-size: 15px; color: var(--body);
}
blockquote.pull { position: relative; padding-top: 50px; overflow: hidden; }
/* Oversized quote mark, the one place on the site with real type-scale
   contrast against the otherwise narrow, even sizing everywhere else. */
blockquote.pull::before {
  content: "\201C";
  position: absolute;
  top: -14px; left: 22px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 84px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.4;
  font-style: normal;
}
blockquote p { font-style: italic; position: relative; }
blockquote.pull p + p { margin-top: 14px; }
blockquote cite {
  display: block; margin-top: 18px; font-style: normal;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-soft);
}

/* Standalone centered card for a 5th testimonial in an otherwise 2-column
   quote grid, same fix as .pillar-solo: sits centered on its own row
   instead of alone in a column with empty space beside it. */
.quote-solo {
  max-width: calc(50% - 15px);
  margin: 30px auto 0 auto;
}

/* Testimonial carousel — one quote visible at a time, manual navigation
   only, no autoplay, on purpose, matches the site's unhurried voice.
   Arrows + dot indicators in the same gold hairline language as
   everything else, replaced the quote-grid + quote-solo layout above
   (left in place, unused, in case a grid is ever wanted again). */
.carousel { position: relative; overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-top: 30px;
}
.carousel-arrow {
  background: none; border: 1px solid var(--line);
  color: var(--accent-soft); width: 38px; height: 38px;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease; font-family: 'Inter', sans-serif;
}
.carousel-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.carousel-dots { display: flex; gap: 10px; }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); border: none; padding: 0; cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.carousel-dot.active { background: var(--accent); transform: scale(1.3); }

/* Editorial split — label sits fixed on the left, content flows on the
   right, instead of everything stacking centered. Used to break the
   center/center/center rhythm that otherwise runs down the whole page. */
.editorial-split { display: grid; grid-template-columns: 220px 1fr; gap: 20px 40px; align-items: start; }
.editorial-split .divider { margin: 0 0 20px 0; }
.editorial-split .eyebrow { text-align: left; margin-bottom: 0; }
.editorial-split .criteria { margin: 0; max-width: none; }
@media (max-width: 720px) {
  .editorial-split { grid-template-columns: 1fr; }
  .editorial-split .divider { margin: 0 auto 20px auto; }
  .editorial-split .eyebrow { text-align: center; }
}

/* Left-reading column with a spine border, echoing the blockquote's
   left-accent treatment. Breaks the centered "poem" stacking of lede-sub
   paragraphs into something that reads like a held argument instead. */
.lede-column {
  max-width: 560px;
  margin: 40px auto 0 auto;
  padding-left: 26px;
  border-left: 1px solid var(--line);
  text-align: left;
}
.lede-column .lede-sub { text-align: left; max-width: none; margin: 0 0 22px 0; }
/* A touch bigger than the base .about-label, scoped to this one usage so
   the smaller about-grid labels on the About page are unaffected. */
.lede-column .about-label { font-size: 13px; }
/* Gold italic subheader breaking up a single .lede-sub paragraph — the
   line it wraps becomes its own heading-like beat, the rest of the
   paragraph continues as body copy on the next line. */
.lede-sub-heading {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--accent-soft);
  font-size: 19px;
  margin-bottom: 8px;
}
.lede-column .lede-sub:last-child { margin-bottom: 0; }

/* Who this is for */
.criteria { list-style: none; padding: 0; margin: 0; max-width: 620px; margin: 0 auto; }
.criteria li {
  padding: 20px 0; border-top: 1px solid var(--line);
  font-size: 16px; color: var(--body);
}
.criteria li:last-child { border-bottom: 1px solid var(--line); }
.criteria li strong { color: var(--heading); font-weight: 500; }

/* Arrow markers for the homepage "What changes" lists only (.criteria.arrows).
   Small bronze arrow at the left of each line, text indented to clear it.
   Scoped with a modifier class so the criteria lists on How I Work & The
   Offer keep their plain, marker-less look. */
.criteria.arrows li { position: relative; padding-left: 32px; }
.criteria.arrows li::before {
  content: "\2192";
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  color: var(--accent-soft); font-size: 15px; line-height: 1;
}


/* Plain serif subheading introducing a .criteria list, for sections that
   already have their own h2.section-title above (e.g. two paired lists
   under one heading, like Home's "What changes when you stop managing it"). */
.section-subhead {
  display: block;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  color: var(--heading);
  font-size: 20px;
  font-weight: 400;
  max-width: 620px;
  margin: 0 auto 18px auto;
}
/* Same slot, italic + gold-accent variant, for when a subheader is meant
   to read as a shift/turn rather than a plain lead-in line. */
.section-subhead-italic {
  display: block;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--accent-soft);
  font-size: 20px;
  max-width: 620px;
  margin: 44px auto 18px auto;
}

/* Partner note */
.partner-block { text-align: center; }
.partner-block .signoff { color: var(--accent-soft); font-style: italic; margin-top: 20px; display: block; }

/* Portrait images (About page) — framed like a specimen/exhibit plate,
   not a box with a border. Mat, corner marks, & a small plaque caption
   are the site's one recurring photographic motif, used the same way
   every time a photo appears. */
.portrait-frame {
  max-width: 460px;
  margin: 0 auto 20px auto;
}
.portrait-frame.portrait-frame-wide { max-width: 540px; margin-top: 44px; margin-bottom: 44px; }
.portrait-frame .mat {
  position: relative;
  padding: 18px;
  background: var(--panel-2);
}
.portrait-frame .mat .frame-inner {
  position: relative;
  overflow: hidden;
}
.portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.1) brightness(0.9);
}
.portrait-frame .frame-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(176,141,87,0.10) 0%, rgba(18,20,28,0.08) 60%, rgba(18,20,28,0.3) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Corner marks — the site's one recurring "this is a specimen, look closely"
   signature. Used on portraits & on the single highest-emphasis panel per
   page (e.g. "For Your Partner"). Deliberately not used on every card —
   a motif reads as intentional because it's rationed, not everywhere. */
.corner-marks { position: relative; }
.corner-marks .corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--accent);
  opacity: 0.85;
}
.corner-marks .corner-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.corner-marks .corner-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.corner-marks .corner-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.corner-marks .corner-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.portrait-frame .caption {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 16px;
}
.portrait-frame .caption em {
  font-style: normal;
  color: var(--accent-soft);
}

/* About, full narrative */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 18px; padding-bottom: 60px; }
.about-label {
  display: block; margin: 26px 0 4px 0;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-family: 'Inter', sans-serif;
}
.about-grid p { font-size: 16px; }

/* CTA band */
.cta-band {
  text-align: center;
  background: linear-gradient(180deg, #171A24 0%, #12141C 100%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cta-band h2 { margin-bottom: 20px; font-size: 32px; }
.cta-band p { max-width: 520px; margin: 0 auto 40px auto; color: var(--body); }

footer { padding: 60px 0 40px 0; text-align: center; }
footer .wordmark { font-size: 15px; margin-bottom: 14px; }
footer .meta { font-size: 12px; color: var(--muted); letter-spacing: 0.05em; }
footer .meta a { color: var(--muted); }

/* Apply page form */
.apply-hero {
  padding: 170px 0 60px 0; text-align: center;
}
.apply-hero h1 { font-size: 42px; }
.apply-hero p { max-width: 540px; margin: 20px auto 0 auto; }

.field { margin-bottom: 30px; }
.field label {
  display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 10px;
}
.field .hint { font-size: 13px; color: var(--muted); margin-top: 8px; font-style: italic; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field textarea,
.field select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--heading);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 2px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { min-height: 90px; resize: vertical; }
.radio-row { display: flex; gap: 24px; flex-wrap: wrap; }
.radio-row label {
  display: flex; align-items: center; gap: 8px;
  text-transform: none; font-size: 15px; color: var(--body);
  letter-spacing: normal; margin-bottom: 0;
}
.scale-row { display: flex; gap: 8px; flex-wrap: wrap; }
.scale-row label {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--line);
  color: var(--body); font-size: 13px; cursor: pointer; margin-bottom: 0;
}
.scale-row input { display: none; }
.scale-row input:checked + label,
.scale-row label:has(input:checked) {}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.submit-row { text-align: center; margin-top: 50px; }
.submit-row button {
  font-size: 12px; padding: 16px 44px; border: none;
}
.privacy-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 24px; max-width: 480px; margin-left: auto; margin-right: auto; }

@media (max-width: 720px) {
  .pillars, .ladder, .included-grid, .quote-grid, .row-2 { grid-template-columns: 1fr; }
  nav.wrap { position: relative; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: -28px;
    right: -28px;
    flex-direction: column;
    background: rgba(15,17,24,0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { display: block; padding: 18px 28px; font-size: 13px; }
  .nav-links a:not(.btn) { border-bottom: 1px solid var(--line); }
  .nav-links .btn { margin: 18px 28px; text-align: center; }
  section { padding: 90px 0; }
  .step { flex-direction: column; gap: 8px; }
  .parchment-panel { padding: 40px 28px; }
}

/* "I'm William" band — full-bleed personal section on the homepage, between
   the Four Pillars & the offer-at-a-glance grid. Diacritic-style: the photo
   IS the section. No border, no eyebrow, no caption, no container. Photo is
   images/me-band-treated.jpg (IMG_4208 couch/mirror shot, muted-gold recipe:
   saturation 0.5, contrast 1.05, brightness 0.55, baked; left side extended
   ~45% with a seamless dark gradient so William sits right of center & the
   type owns the left). Edge fades dissolve into --bg per the interlude
   recipe; bronze multiply wash matches the portrait frames. The heading is
   deliberately the largest type on the site — the one scale-break, do not
   repeat this size anywhere else. */
.me-band { position: relative; min-height: 94vh; display: flex; align-items: center; padding: 0; }
.me-band .me-photo {
  position: absolute; inset: 0;
  background-image: url('images/me-band-treated.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.me-band .me-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #12141C 0%, rgba(18,20,28,0) 16%, rgba(18,20,28,0) 80%, #12141C 100%),
    linear-gradient(90deg, #12141C 0%, rgba(18,20,28,0.55) 22%, rgba(18,20,28,0) 44%, rgba(18,20,28,0) 82%, rgba(18,20,28,0.35) 100%);
}
.me-band .me-wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(176,141,87,0.08) 0%, rgba(18,20,28,0.10) 60%, rgba(18,20,28,0.26) 100%);
  mix-blend-mode: multiply; pointer-events: none;
}
.me-band .me-content { position: relative; z-index: 2; padding: 10vh 4vw 10vh 6vw; max-width: calc(460px + 10vw); }
.me-band h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.98; color: var(--heading); margin: 0 0 28px;
}
.me-band h2 em { color: var(--accent-soft); font-style: italic; white-space: nowrap; }
.me-band p { font-size: 15.5px; color: #D6D0C2; margin: 0 0 14px; max-width: 420px; }
.me-band .me-link { color: var(--accent-soft); font-size: 14px; letter-spacing: 0.02em; border-bottom: 1px solid rgba(176,141,87,0.4); padding-bottom: 2px; }
@media (max-width: 760px) {
  .me-band { min-height: 0; display: block; }
  .me-band .me-photo { position: relative; height: 60vh; inset: auto; background-position: 68% 30%; }
  .me-band .me-fade { background: linear-gradient(180deg, #12141C 0%, rgba(18,20,28,0) 20%, rgba(18,20,28,0) 66%, #12141C 100%); }
  .me-band .me-content { padding: 0 24px 60px; max-width: none; margin-top: -14vh; }
  .me-band h2 { font-size: clamp(48px, 15vw, 72px); }
}