/* ==========================================================================
   The Standard — Private Matchmaking
   Stylesheet. Plain CSS, no build step. Read DESIGN.md before editing.

   Table of contents
   1.  Tokens
   2.  Base
   3.  Type helpers
   4.  Buttons and links
   5.  Header and navigation
   6.  Hero (the invitation)
   7.  Story
   8.  Philosophy (quote band)
   9.  Process
   10. Membership (pricing)
   11. Matchmakers
   12. Testimonial
   13. Values
   14. FAQ
   15. Forms (shared controls)
   16. Inquiry section (homepage)
   17. Intake page
   18. Thank-you page
   19. Footer
   20. Motion
   21. Responsive
   22. Reduced motion
   ========================================================================== */


/* 1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — from the brand board. Do not add colors. */
  --espresso:  #241B18;
  --espresso-2:#30231e;   /* slightly lifted espresso, hover surfaces */
  --espresso-3:#1a1310;   /* deepest, gradient ends */
  --cream:     #F5F0E8;
  --ivory:     #FFFFF5;
  --gold:      #C9B28A;   /* "champagne" on the brand board */
  --blue:      #B7C9D6;   /* "powder blue" */
  --taupe:     #CFC3B5;

  /* Derived neutrals (tints of the palette, never plain grey) */
  --ink:       #2d231f;   /* body text on light */
  --ink-soft:  #675b54;   /* secondary text on light */
  --ink-mute:  #8e8179;   /* captions on light */
  --ivory-soft:#efe7df;   /* body text on dark */
  --ivory-mute:#bdb1a9;   /* secondary text on dark */
  --bronze:    #a8916a;   /* gold darkened for numerals on light backgrounds */
  --footer:    #17110f;

  /* Lines */
  --line-gold:       #c9b28a33;
  --line-gold-strong:#c9b28a88;
  --line-light:      #9f9187;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, Arial, sans-serif;

  /* Rhythm */
  --header-h: 82px;
  --section-y: 125px;
  --gutter: 7vw;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .25s;
  --t-med:  .45s;
  --t-slow: .7s;
}


/* 2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.dark { background: var(--espresso); color: var(--ivory); }
.center { text-align: center; max-width: 950px; margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* 3. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 10px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

/* Chapter label: the eyebrow with a hairline on each side. Centered sections use
   this; left-aligned sections use the plain .eyebrow. */
.chapter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.chapter::before, .chapter::after {
  content: "";
  flex: none;
  width: 70px;
  height: 1px;
  background: var(--line-gold-strong);
}

.section-title {
  font: 500 clamp(50px, 6vw, 78px) / .92 var(--serif);
  letter-spacing: -.03em;
  margin: 22px 0 28px;
  text-wrap: balance;
}
.section-title em, .hero h1 em { color: var(--blue); font-style: italic; }

.large {
  font: 400 21px / 1.7 var(--serif);
  max-width: 760px;
  margin: 0 auto 18px;
}
.heading p { font: 18px var(--serif); color: var(--ink-soft); }


/* 4. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-block;
  padding: 15px 24px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid var(--gold);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
/* the sweep */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform var(--t-med) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:hover { transform: translateY(-1px); }

.btn-gold { background: var(--gold); color: var(--espresso); }
.btn-gold::before { background: var(--ivory); }

.btn-outline { background: transparent; color: var(--gold); }
.btn-outline::before { background: var(--gold); }
.btn-outline:hover, .btn-outline:focus-visible { color: var(--espresso); }

.btn-dark { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn-dark::before { background: var(--espresso); }
.btn-dark:hover, .btn-dark:focus-visible { color: var(--ivory); }

/* quiet text link with a travelling arrow */
.link-line {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  transition: color var(--t-fast);
}
.link-line .arrow { display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.link-line:hover { color: var(--gold); }
.link-line:hover .arrow { transform: translateY(3px); }
.link-line.right .arrow { color: var(--gold); }
.link-line.right:hover .arrow { transform: translateX(4px); }

/* inline text link */
.link-inline { color: var(--gold); border-bottom: 1px solid var(--line-gold-strong); transition: border-color var(--t-fast); }
.link-inline:hover { border-color: var(--gold); }


/* 5. Header and navigation
   -------------------------------------------------------------------------- */
/* Transparent over the hero; js/main.js adds .is-scrolled after 60px, which tints
   and shrinks it. Without JavaScript the header stays tinted so it always reads. */
.header {
  position: fixed;
  z-index: 50;
  top: 0;
  width: 100%;
  height: var(--header-h);
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: var(--ivory);
  transition: height var(--t-med) var(--ease-out), background var(--t-med), backdrop-filter var(--t-med);
}
.header.is-scrolled, html:not(.js) .header {
  height: 66px;
  background: rgba(36, 27, 24, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html:not(.js) .header { height: var(--header-h); }

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 16px var(--serif);
  letter-spacing: .26em;
}
.brand img { height: 40px; width: auto; transition: height var(--t-med) var(--ease-out); }
.header.is-scrolled .brand img { height: 32px; }

.nav {
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ivory-mute);
}
.nav a:not(.btn) {
  position: relative;
  padding: 6px 0;
  transition: color var(--t-fast);
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.nav a:not(.btn):hover { color: var(--ivory); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { padding: 12px 20px; border-color: var(--line-gold-strong); }

.hamburger {
  display: none;
  background: none;
  border: 0;
  color: var(--gold);
  font-size: 22px;
  padding: 8px;
  cursor: pointer;
}


/* 6. Hero (the invitation)
   The one place the gilt double frame with corner marks appears. Keep it here.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 760px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 40px) var(--gutter) 90px;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, #33251f 0%, transparent 70%),
    linear-gradient(180deg, var(--espresso) 0%, var(--espresso-3) 100%);
}

/* The frame: two hairlines (outer, inner) and four corner marks. */
.hero-frame {
  position: absolute;
  z-index: 0;
  inset: calc(var(--header-h) + 24px) 36px 36px;
  border: 1px solid #c9b28a55;
  pointer-events: none;
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #c9b28a22;
}
.hero-frame i {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--gold);
}
.hero-frame i:nth-child(1) { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.hero-frame i:nth-child(2) { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.hero-frame i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.hero-frame i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.hero-copy { position: relative; z-index: 1; max-width: 900px; }

/* The seal: monogram with a hairline fading in from each side */
.hero-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 34px;
}
.hero-seal::before, .hero-seal::after {
  content: "";
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold-strong));
}
.hero-seal::after { background: linear-gradient(270deg, transparent, var(--line-gold-strong)); }
.hero-seal img { height: 96px; width: auto; }

.hero h1 {
  font: 500 clamp(58px, 7.5vw, 108px) / .9 var(--serif);
  letter-spacing: -.035em;
  margin: 26px 0 30px;
  text-wrap: balance;
}
.hero p {
  font: 400 21px / 1.6 var(--serif);
  max-width: 600px;
  color: var(--ivory-soft);
  margin: 0 auto;
}
.hero .buttons { display: flex; flex-wrap: wrap; gap: 22px 34px; align-items: center; justify-content: center; margin-top: 44px; }
.hero .btn-gold { padding: 17px 30px; }

.hero-foot {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 58px;
  display: flex;
  justify-content: center;
  gap: 56px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-foot span + span::before { content: "✦"; color: var(--line-gold-strong); margin-right: 56px; }


/* 7. Story
   -------------------------------------------------------------------------- */
.story { padding: var(--section-y) 8vw; }
.story .section-title { margin-top: 30px; }
.story p:not(.large) { max-width: 620px; margin: auto; color: var(--ink-soft); }


/* 8. Philosophy (quote band) — editorial split
   Headline right-aligned against a vertical hairline; the question on the right.
   -------------------------------------------------------------------------- */
.quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 80px;
  min-height: 560px;
  padding: 90px var(--gutter);
}
.quote-head { text-align: right; }
.quote h2 { font: 500 clamp(55px, 6.4vw, 92px) / .9 var(--serif); letter-spacing: -.03em; margin: 22px 0 0; text-wrap: balance; }
.quote h2 em { color: var(--blue); font-style: italic; }
.quote-rule {
  height: 300px;
  background: linear-gradient(180deg, transparent, var(--line-gold-strong) 25%, var(--line-gold-strong) 75%, transparent);
}
.quote-body { max-width: 440px; }
.quote-body p { font: italic 400 30px / 1.35 var(--serif); color: var(--ivory-soft); margin: 0; }
.quote-tag {
  display: block;
  margin-top: 18px;
  padding-top: 18px;
  position: relative;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.quote-tag::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 1px; background: var(--gold); }


/* 9. Process — numerals on a hairline timeline
   -------------------------------------------------------------------------- */
.process { padding: var(--section-y) var(--gutter); background: var(--ivory); }
.steps {
  position: relative;
  max-width: 1240px;
  margin: 90px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
/* the timeline */
.steps::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold-strong) 12%, var(--line-gold-strong) 88%, transparent);
  transform-origin: left;
}
.steps article { transition: transform var(--t-med) var(--ease-out); }
.steps article:hover { transform: translateY(-4px); }
.steps b {
  position: relative;
  display: inline-block;
  font: 400 56px / 56px var(--serif);
  color: var(--bronze);
  background: var(--ivory);
  padding-right: 12px;
  margin-bottom: 26px;
}
/* the diamond on the line, just after the numeral */
.steps b::after {
  content: "";
  position: absolute;
  right: -20px; top: 50%;
  width: 8px; height: 8px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.steps h3 { font: 600 32px var(--serif); margin: 0 0 8px; }
.steps p { font-size: 14px; color: #6b625d; margin: 0; }


/* 10. Membership (pricing) — invitation cards
   -------------------------------------------------------------------------- */
.pricing { padding: var(--section-y) 6vw; background: var(--taupe); }
.pricing .chapter { color: #806a4e; }
.pricing .chapter::before, .pricing .chapter::after { background: #9f8b72; }
.pricing .section-title em { color: var(--ivory); }   /* powder blue disappears on taupe */
.pricing .heading p { color: #4d413a; }

.price-grid {
  max-width: 1250px;
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
/* Each card carries an inner hairline 7px inside its edge (inset box-shadow),
   so the hover rule below has to restate it. */
.price-card {
  --card-bg: var(--cream);
  background: var(--card-bg);
  border: 1px solid #9f8b72;
  box-shadow: inset 0 0 0 7px var(--card-bg), inset 0 0 0 8px #c9b28a77;
  padding: 48px 40px 40px;
  min-height: 640px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 7px var(--card-bg), inset 0 0 0 8px #c9b28a77, 0 30px 60px -20px rgba(36, 27, 24, .35);
}
.price-card.featured {
  --card-bg: var(--espresso);
  background: linear-gradient(180deg, #2b201b 0%, var(--espresso) 100%);
  color: var(--ivory);
  border-color: var(--gold);
  transform: translateY(-16px);
  box-shadow: inset 0 0 0 7px var(--card-bg), inset 0 0 0 8px #c9b28a77, 0 40px 70px -30px rgba(36, 27, 24, .6);
}
.price-card.featured:hover {
  transform: translateY(-22px);
  box-shadow: inset 0 0 0 7px var(--card-bg), inset 0 0 0 8px #c9b28a77, 0 50px 80px -30px rgba(36, 27, 24, .7);
}

.tier { font-size: 10px; letter-spacing: .28em; color: #8f775a; font-weight: 500; }
.tier::after { content: ""; display: block; width: 36px; height: 1px; background: var(--gold); margin: 16px 0 22px; }
.featured .tier { color: var(--gold); }
.price-card h3 { font: 500 60px / 1 var(--serif); margin: 0; }
.price-card small { display: block; margin-top: 10px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.featured small { color: var(--ivory-mute); }
.price-card > p { font: 17px / 1.6 var(--serif); margin: 24px 0 18px; }
.price-card ul { list-style: none; padding: 0; margin: 0; flex: 1; }
.price-card li { padding: 9px 0; font-size: 12px; line-height: 1.5; border-bottom: 1px solid #8c7b6a22; display: flex; gap: 10px; }
.price-card li::before { content: "✦"; color: var(--gold); font-size: 10px; margin-top: 2px; }
.featured li { border-bottom-color: #c9b28a2a; }
.price-card .btn { align-self: flex-start; margin-top: 30px; padding: 13px 24px; }

/* "Most requested": a gold-flanked line above the tier, not a box */
.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--blue);
}
.badge::before, .badge::after { content: "✦"; color: var(--gold); }

.women-note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 56px auto 0;
  text-align: center;
}
.women-note::before, .women-note::after { content: ""; width: 110px; height: 1px; background: #9f8b72; }
.women-note strong { font-size: 10px; letter-spacing: .28em; color: #806a4e; font-weight: 500; }
.women-note span { font: 19px var(--serif); color: var(--espresso); }
.pricing-note { max-width: 820px; text-align: center; margin: 24px auto 0; font-size: 10px; color: #665a52; }


/* 11. Matchmakers
   -------------------------------------------------------------------------- */
.founder-story { display: grid; grid-template-columns: 1fr 1fr; min-height: 800px; }
.founder-image {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 7vw;
  background: linear-gradient(145deg, var(--espresso), #3b2b25);
}
/* a single faint hairline inset from the panel edges */
.founder-image::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid #c9b28a2a;
  pointer-events: none;
}
.founder-panel {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line-gold-strong);
  max-width: 500px;
  width: 100%;
  padding: 56px 44px;
  text-align: center;
  color: var(--ivory);
  background: #241b18a6;
  box-shadow: 0 25px 70px #00000040;
}
.founder-panel::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line-gold); pointer-events: none; }
.founder-panel img { height: 96px; width: auto; margin: 0 auto 26px; filter: drop-shadow(0 10px 24px #00000055); }
.founder-panel h3 { font: 500 42px / .98 var(--serif); margin: 18px 0; text-wrap: balance; }
.founder-panel h3 em { color: var(--blue); font-style: italic; }
.founder-panel p { font: 400 17px / 1.6 var(--serif); color: #e9e0d8; }
.founder-panel-line { width: 55px; height: 1px; background: var(--gold); margin: 26px auto; }
.founder-panel > span { font-size: 8px; letter-spacing: .28em; color: var(--gold); }

.founder-copy { padding: 100px 7vw 90px 6vw; background: var(--ivory); display: flex; flex-direction: column; justify-content: center; }
.founder-copy .section-title { font-size: clamp(46px, 4.6vw, 66px); margin: 20px 0 22px; }
.founder-copy .large { margin-left: 0; font-size: 19px; max-width: 560px; }

.matchmakers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--line-gold-strong);
}
.matchmaker-head { display: flex; align-items: center; gap: 16px; }
.matchmaker-head strong { display: block; font: 500 24px / 1 var(--serif); color: var(--espresso); }
.matchmaker-head small { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #8f775a; }
/* initial tile: stands in for a portrait until one exists */
.initial {
  flex: none;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--espresso);
  color: var(--gold);
  font: italic 400 30px var(--serif);
}
.matchmaker p { margin: 16px 0 0; font: 14px / 1.7 var(--sans); color: var(--ink-soft); }


/* 12. Testimonial
   -------------------------------------------------------------------------- */
.testimonial { position: relative; overflow: hidden; text-align: center; padding: 115px 8vw; }
/* oversized opening quotation mark behind the copy */
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 40px; left: 50%;
  transform: translateX(-50%);
  font: 400 260px / 1 var(--serif);
  color: var(--gold);
  opacity: .14;
  pointer-events: none;
}
.testimonial > div { position: relative; }
.testimonial h2 { font: 500 clamp(45px, 5.6vw, 70px) / .95 var(--serif); letter-spacing: -.02em; max-width: 900px; margin: 26px auto; text-wrap: balance; }
.testimonial h2 em { color: var(--blue); font-style: italic; }
.attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ivory-mute);
}
.attribution::before, .attribution::after { content: ""; width: 70px; height: 1px; background: var(--line-gold-strong); }


/* 13. Values — cream with blue hairlines; blue stays an accent
   -------------------------------------------------------------------------- */
.values { padding: var(--section-y) var(--gutter); background: var(--cream); }
.value-grid {
  max-width: 1240px;
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.value-grid > div { border-top: 1px solid var(--blue); padding-top: 22px; }
.value-grid b { display: block; font: italic 400 34px / 1 var(--serif); color: var(--bronze); }
.value-grid h3 { font: 600 29px var(--serif); margin: 14px 0 6px; }
.value-grid p { font-size: 13px; line-height: 1.7; margin: 0; color: var(--ink-soft); }


/* 14. FAQ — intro column and a numbered list
   -------------------------------------------------------------------------- */
.faq {
  padding: var(--section-y) var(--gutter);
  background: var(--ivory);
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 100px;
  align-items: start;
}
.faq-intro .section-title { font-size: clamp(46px, 4.6vw, 66px); margin: 20px 0 22px; }
.faq-intro p { font: 18px / 1.6 var(--serif); color: var(--ink-soft); margin: 0 0 30px; }

.faq details { border-top: 1px solid var(--line-light); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line-light); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 22px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary b { flex: none; width: 28px; font: 500 10px var(--sans); letter-spacing: .2em; color: var(--bronze); }
.faq summary span { flex: 1; font: 500 24px var(--serif); transition: color var(--t-fast); }
.faq summary:hover span { color: #806a4e; }
.faq summary::after {
  content: "+";
  flex: none;
  font: 400 24px var(--serif);
  color: var(--gold);
  transition: transform var(--t-med) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 14px 0 0 50px; max-width: 620px; color: var(--ink-soft); font-size: 14px; animation: faq-in var(--t-med) var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }


/* 15. Forms (shared controls)
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 0 0 22px;
}
.form-grid .full { grid-column: 1 / -1; }
.field { display: block; }
.field > span, .fieldset > legend {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold);
  font-weight: 500;
}
.field .hint { display: block; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-mute); margin-top: 4px; font-weight: 300; }
.field input, .field select, .field textarea {
  width: 100%;
  display: block;
  margin-top: 8px;
  padding: 14px;
  font: 15px var(--serif);
  outline: 0;
  border-radius: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.field textarea { resize: vertical; min-height: 96px; }

/* dark form (homepage inquiry) */
.form-dark .field input, .form-dark .field select, .form-dark .field textarea {
  background: #ffffff09;
  border: 1px solid #c9b28a66;
  color: var(--ivory);
}
.form-dark .field:hover input, .form-dark .field:hover select, .form-dark .field:hover textarea { border-color: var(--line-gold-strong); }
.form-dark .field input:focus, .form-dark .field select:focus, .form-dark .field textarea:focus { border-color: var(--gold); background: #ffffff10; }
.form-dark .field select option { color: #222; }

/* light form (intake page) */
.form-light .field input, .form-light .field select, .form-light .field textarea {
  background: var(--ivory);
  border: 1px solid #b8a892;
  color: var(--ink);
}
.form-light .field input:focus, .form-light .field select:focus, .form-light .field textarea:focus { border-color: var(--espresso); }
.form-light .field > span, .form-light .fieldset > legend { color: #806a4e; }

/* choice groups (radio / checkbox) */
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 10px; }
.choices.stack { flex-direction: column; gap: 8px; }
.choice { display: flex; align-items: flex-start; gap: 10px; font: 16px / 1.4 var(--serif); cursor: pointer; }
.choice input { margin: 4px 0 0; accent-color: var(--gold); flex: none; width: 16px; height: 16px; }
.form-light .choice input { accent-color: var(--espresso); }
.choice .other { margin: 0 0 0 4px; padding: 4px 8px; font: 15px var(--serif); border: 0; border-bottom: 1px solid #b8a892; background: transparent; width: 200px; max-width: 100%; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 11px; line-height: 1.6; cursor: pointer; }
.check input { width: auto; margin: 3px 0 0; accent-color: var(--gold); flex: none; }
.form-dark .check { color: var(--ivory-mute); }
.form-light .check { color: var(--ink-soft); }

.bot-field { display: none !important; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px; margin-top: 8px; }
.privacy-note { font-size: 10px; margin: 0; max-width: 520px; }
.form-dark .privacy-note { color: var(--ink-mute); }
.form-light .privacy-note { color: var(--ink-mute); margin-top: 18px; }


/* 16. Inquiry section (homepage) — heading outside, form inside one hairline
   -------------------------------------------------------------------------- */
.inquiry {
  padding: var(--section-y) var(--gutter);
  background: linear-gradient(180deg, var(--espresso) 0%, var(--espresso-3) 100%);
  color: var(--ivory);
}
.inquiry-inner { max-width: 1000px; margin: auto; }
.inquiry .section-title { margin: 22px 0; }
.inquiry .large { max-width: 620px; color: var(--ivory-soft); margin-bottom: 0; }
.inquiry-panel {
  margin-top: 54px;
  padding: 54px 60px 48px;
  border: 1px solid var(--line-gold);
  background: #ffffff04;
}


/* 17. Intake page
   -------------------------------------------------------------------------- */
.page-intro {
  padding: calc(var(--header-h) + 90px) var(--gutter) 80px;
  background: linear-gradient(180deg, var(--espresso) 0%, var(--espresso-3) 100%);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line-gold);
}
.page-intro-mark {
  position: absolute; z-index: 0; right: -4%; top: 50%;
  height: 170%; width: auto; transform: translateY(-50%);
  opacity: .06; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
.page-intro-inner { position: relative; z-index: 1; max-width: 900px; margin: auto; }
.page-intro .section-title { margin-bottom: 25px; }
.page-intro .large { max-width: 700px; margin-left: 0; color: var(--ivory-soft); }
.page-intro .meta { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-mute); margin-top: 24px; }

.intake { padding: 80px var(--gutter) var(--section-y); background: var(--cream); }
.intake-inner { max-width: 900px; margin: auto; }
.intake-section { padding: 56px 0; border-top: 1px solid var(--line-light); }
.intake-section:first-child { border-top: 0; padding-top: 0; }
.intake-section-head { display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: baseline; margin-bottom: 32px; }
.intake-section-head b { font: 500 13px var(--sans); letter-spacing: .18em; color: #947e62; }
.intake-section-head h2 { font: 500 clamp(34px, 4vw, 46px) / 1 var(--serif); margin: 0; letter-spacing: -.02em; }
.intake-section-head p { grid-column: 2; margin: 8px 0 0; font: 16px var(--serif); color: var(--ink-soft); }
.intake .form-grid { margin: 0; gap: 26px 22px; }
.intake .form-grid + .form-grid { margin-top: 26px; }
.intake-submit { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line-light); }
.intake-submit .btn { margin-top: 26px; }
.draft-note { font-size: 11px; color: var(--ink-mute); margin-top: 14px; }


/* 18. Thank-you page
   -------------------------------------------------------------------------- */
.thanks {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 60px) var(--gutter) 80px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, #3a2a22 0%, transparent 65%),
    linear-gradient(180deg, var(--espresso) 0%, var(--espresso-3) 100%);
  color: var(--ivory);
}
.thanks-inner { max-width: 720px; }
.thanks img { height: 96px; width: auto; margin: 0 auto 28px; filter: drop-shadow(0 12px 30px #00000055); }
.thanks h1 { font: 500 clamp(48px, 7vw, 84px) / .92 var(--serif); letter-spacing: -.03em; margin: 22px 0; text-wrap: balance; }
.thanks h1 em { color: var(--blue); font-style: italic; }
.thanks p { font: 400 20px / 1.6 var(--serif); color: var(--ivory-soft); max-width: 560px; margin: 0 auto; }
.thanks .buttons { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 22px 30px; justify-content: center; align-items: center; }


/* 19. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--footer); color: #d8cec5; text-align: center; padding: 64px var(--gutter) 25px; }
.footer-mark { height: 64px; width: auto; margin: 0 auto; }
.footer h3 { font: 500 18px var(--serif); letter-spacing: .28em; margin: 18px 0 0; color: var(--ivory); }
.footer .tagline { font-size: 8px; letter-spacing: .3em; color: var(--gold); margin: 6px 0 0; }
.footer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 30px 0 34px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer-line::before, .footer-line::after { content: ""; width: 70px; height: 1px; background: var(--line-gold-strong); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.footer-links a { transition: color var(--t-fast); }
.footer-links a:hover { color: var(--gold); }
.footer-email { font-size: 10px; letter-spacing: .16em; margin: 22px 0 40px; }
.footer-email a { transition: color var(--t-fast); }
.footer-email a:hover { color: var(--gold); }
.legal {
  border-top: 1px solid #c9b28a2d;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 8px 20px;
  font-size: 9px;
  color: var(--ink-mute);
}


/* 20. Motion
   Subtle, short, optional. One easing, three durations. Nothing loops.
   -------------------------------------------------------------------------- */
/* Scroll reveal: js/main.js adds .js to <html> and .is-visible as blocks enter.
   Without JavaScript everything is simply visible. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* grids stagger left to right */
.js .reveal:nth-child(2) { transition-delay: .08s; }
.js .reveal:nth-child(3) { transition-delay: .16s; }
.js .reveal:nth-child(4) { transition-delay: .24s; }

/* Process timeline draws in from the left once the steps are revealed */
.js .steps::before { transform: scaleX(0); transition: transform 1s var(--ease-out) .1s; }
.js .steps:has(.is-visible)::before { transform: scaleX(1); }

/* Hero: copy rises in line by line; the frame settles in behind it a beat later */
.hero-copy > * { animation: rise .8s var(--ease-out) both; }
.hero-copy > *:nth-child(1) { animation-delay: .10s; }
.hero-copy > *:nth-child(2) { animation-delay: .18s; }
.hero-copy > *:nth-child(3) { animation-delay: .26s; }
.hero-copy > *:nth-child(4) { animation-delay: .34s; }
.hero-copy > *:nth-child(5) { animation-delay: .42s; }
.hero-frame { animation: settle 1.4s var(--ease-out) both .35s; }
.hero-foot { animation: rise .8s var(--ease-out) both .7s; }
@keyframes rise   { from { opacity: .001; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: .001; transform: scale(1.012); }    to { opacity: 1; transform: none; } }


/* 21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .quote { gap: 50px; }
  .faq { gap: 60px; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .price-card { padding: 40px 30px 34px; }
}

@media (max-width: 900px) {
  .header { background: rgba(36, 27, 24, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--espresso);
    padding: 18px 7vw 28px;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--line-gold);
  }
  .nav.open { display: flex; }
  .nav a { padding: 9px 0; }
  .nav .btn { margin-top: 8px; text-align: center; }
  .hamburger { display: block; }

  .hero-frame { inset: calc(var(--header-h) + 14px) 16px 16px; }
  .hero-foot { display: none; }

  .quote { grid-template-columns: 1fr; gap: 34px; text-align: center; padding: 100px var(--gutter); }
  .quote-head { text-align: center; }
  .quote-rule { width: 44px; height: 1px; margin: 0 auto; background: var(--gold); }
  .quote-body { margin: 0 auto; }
  .quote-tag::before { left: 50%; transform: translateX(-50%); }

  .steps { grid-template-columns: 1fr 1fr; gap: 44px 40px; }
  .steps::before { display: none; }
  .steps b::after { display: none; }

  .price-grid { grid-template-columns: 1fr; max-width: 560px; }
  .price-card.featured, .price-card.featured:hover { transform: none; }
  .price-card { min-height: 0; }
  .women-note::before, .women-note::after { display: none; }

  .founder-story { grid-template-columns: 1fr; }
  .founder-image { min-height: 520px; padding: 80px 7vw; }
  .founder-copy { padding: 90px var(--gutter); }

  .value-grid { grid-template-columns: 1fr 1fr; }

  .faq { grid-template-columns: 1fr; gap: 40px; }
  .faq-intro .section-title { margin-bottom: 16px; }

  .inquiry-panel { padding: 40px 30px 36px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .legal { flex-direction: column; }
  .intake-section-head { grid-template-columns: 1fr; gap: 6px; }
  .intake-section-head p { grid-column: 1; }
}

@media (max-width: 560px) {
  :root { --section-y: 90px; }
  .brand { font-size: 13px; }
  .brand img { height: 34px; }

  .hero { min-height: 0; height: auto; padding: calc(var(--header-h) + 60px) 9vw 80px; }
  .hero-frame { inset: calc(var(--header-h) + 10px) 10px 10px; }
  .hero-seal { gap: 18px; margin-bottom: 26px; }
  .hero-seal::before, .hero-seal::after { width: 44px; }
  .hero-seal img { height: 72px; }
  .hero h1 { font-size: clamp(50px, 14vw, 62px); }
  .hero p { font-size: 17px; }
  .hero .buttons { flex-direction: column; }

  .chapter { gap: 14px; letter-spacing: .22em; }
  .chapter::before, .chapter::after { width: 28px; }
  .hero .eyebrow, .footer-line { letter-spacing: .22em; }
  .quote h2 { font-size: 52px; }
  .quote-body p { font-size: 24px; }

  .steps, .value-grid { grid-template-columns: 1fr; }
  .steps b { font-size: 44px; line-height: 44px; margin-bottom: 16px; }

  .founder-panel { padding: 42px 28px; }
  .founder-panel h3 { font-size: 34px; }
  .founder-panel > span { letter-spacing: .15em; }
  .matchmakers { grid-template-columns: 1fr; gap: 30px; }

  .testimonial::before { font-size: 180px; top: 30px; }
  .faq summary span { font-size: 20px; }
  .faq details p { margin-left: 0; }

  .inquiry-panel { padding: 30px 20px 28px; }
  .form-actions { flex-direction: column; align-items: flex-start; }
  .page-intro { padding-top: calc(var(--header-h) + 50px); }
  .footer-line::before, .footer-line::after { width: 30px; }
}


/* 22. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .steps::before { transform: none; }
  .hero-copy > *, .hero-frame, .hero-foot { animation: none; }
}