/* ==========================================================================
   Practice Success Jess · styles.css
   Tokens first, then base, then components, then sections.
   ========================================================================== */

/* ----- Fonts (self-hosted) ------------------------------------------------ */
/* DISPLAY FONT: Anton (Google Fonts, free for commercial use).
   To swap fonts later, change the src url below. Tracking lives in --track. */
@font-face {
  font-family: "PSJ Display";
  src: url("../fonts/anton-400.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Lato"; src: url("../fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../fonts/roboto-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../fonts/roboto-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ----- Tokens ------------------------------------------------------------- */
:root {
  --warm-white: #FAF7F2;
  --espresso: #3D2E2A;
  --sienna: #C4683C;
  --sienna-deep: #A9542C;
  --plum: #7B4B6A;
  --clay: #E8C4A8;
  --sage: #B5C4B1;
  --brass: #C9A84C;
  --espresso-70: rgba(61, 46, 42, .72);
  --espresso-80: rgba(61, 46, 42, .82);

  --f-display: "PSJ Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --fs-small: .875rem;
  --fs-label: .75rem;
  --fs-h1: clamp(2.4rem, 1.35rem + 3.1vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2vw, 3.2rem);
  --fs-h3: clamp(1.4rem, 1.15rem + .9vw, 1.9rem);
  --fs-big: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem);

  --track: -.018em;
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --gap: clamp(20px, 2.6vw, 36px);
  --section: clamp(72px, 8vw, 128px);
  --header-h: 72px;
  --measure: 40rem;
}

/* ----- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--warm-white);
  color: var(--espresso);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1.25em; }
a { color: inherit; }
strong { font-weight: 700; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1, h2, .display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: var(--track);
  line-height: 1.04;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-bottom: .75em; }
h3 { font-family: var(--f-body); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; color: var(--plum); }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--clay); color: var(--espresso); }
:focus-visible { outline: 2px solid var(--sienna-deep); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--espresso); color: var(--warm-white);
  padding: 10px 16px; font-family: var(--f-mono); font-size: var(--fs-small);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.measure { max-width: var(--measure); }

/* ----- Type components ---------------------------------------------------- */
.eyebrow {
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: .12em; line-height: 1.5;
  color: var(--sienna-deep); margin: 0 0 1.5rem;
}
.kicker { display: block; width: 44px; height: 1px; background: var(--brass); margin-bottom: 1.75rem; }
.micro { font-family: var(--f-mono); font-size: var(--fs-small); line-height: 1.55; color: var(--espresso-70); margin-top: 1rem; }
.lead { font-size: clamp(1.125rem, 1rem + .35vw, 1.3rem); line-height: 1.55; }

/* ----- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 14px 30px;
  background: var(--sienna-deep); color: var(--warm-white);
  font-family: var(--f-body); font-weight: 700; font-size: 1.0625rem; letter-spacing: .02em;
  text-decoration: none; border: 0; border-radius: 2px; cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.btn:hover { background: #95471F; }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: .9375rem; }
.btn--block { width: 100%; }
.cta-row { margin-top: 2.5rem; }

/* ----- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(250, 247, 242, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--brass);
  background: rgba(250, 247, 242, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark {
  font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; letter-spacing: var(--track);
  color: var(--plum); text-decoration: none; line-height: 1; white-space: nowrap;
}
.wordmark span { color: var(--sienna); }

/* ----- Figures + placeholders -------------------------------------------- */
.fig { margin: 0; }
.fig img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholders are hidden on the live site. Add ?preview=1 to show them. */
.ph, .ph-block { display: none; }
html.preview .ph, html.preview .ph-block { display: block; }
.ph {
  margin: 0; position: relative;
  aspect-ratio: var(--ar, 4 / 5);
  background: var(--clay);
  box-shadow: inset 0 0 0 1px var(--brass);
  padding: clamp(18px, 2vw, 28px);
  font-family: var(--f-mono); font-size: .8125rem; line-height: 1.55; color: var(--espresso);
  overflow: auto;
}
.ph .ph-tag { font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; margin-bottom: 1rem; display: block; }
.ph .ph-shot { margin-bottom: .9rem; }
.ph .ph-why { color: var(--espresso-80); font-style: italic; margin: 0; }
.preview-flag {
  display: none; position: fixed; left: 12px; bottom: 12px; z-index: 90;
  background: var(--espresso); color: var(--warm-white);
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px;
}
html.preview .preview-flag { display: block; }

/* ----- Reveal motion ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   01 HERO
   ========================================================================== */
.hero { position: relative; background: #1f1714; color: var(--warm-white); }
.hero__img picture, .hero__img img { display: block; width: 100%; height: 100%; }
.hero__img img { object-fit: cover; object-position: 30% 30%; }
.hero .eyebrow { color: var(--warm-white); }
.hero h1 { color: #fff; line-height: 1.08; margin-bottom: 1.75rem; max-width: 12em; }
.hero__sub { max-width: 34rem; margin-bottom: 2.25rem; }
.hero__sub p { margin: 0 0 1em; }
.hero__sub p:last-child { margin-bottom: 0; }
.hero .btn { box-shadow: inset 0 0 0 1.5px var(--warm-white); }
.hero .micro { color: rgba(250, 247, 242, .85); }
.hero__promise { font-style: italic; color: var(--clay); }

/* Desktop: full-spread photo, copy set over the dark right side */
@media (min-width: 901px) {
  .hero { min-height: clamp(560px, calc(100vh - var(--header-h)), 900px); display: flex; }
  .hero__img { position: absolute; inset: 0; }
  .hero__img::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(20, 14, 12, 0) 38%, rgba(20, 14, 12, .38) 62%, rgba(20, 14, 12, .5) 100%);
  }
  .hero__text {
    position: relative; z-index: 1;
    margin-left: 52%; width: 42%; max-width: 620px;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(40px, 5vh, 80px);
    text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
  }
  .hero .btn { align-self: flex-start; text-shadow: none; }
}
/* Mobile: photo on top, copy on a dark band below */
@media (max-width: 900px) {
  .hero__img { aspect-ratio: 4 / 5; }
  .hero__img img { object-position: 36% 30%; }
  .hero__text { padding: 44px var(--gutter) 56px; background: var(--espresso); }
}

/* ==========================================================================
   02 RECOGNITION
   ========================================================================== */
.recog__text { grid-column: 3 / span 7; }
.recog__ph { grid-column: 10 / span 3; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
html.preview .recog__text { grid-column: 2 / span 7; }
.recog__text p { margin-bottom: 1.6em; max-width: 36rem; }
.recog__title { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.recog__first { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); line-height: 1.4; }
.recog__turn { max-width: 40rem; padding-top: 2rem; margin-top: 2.5rem; border-top: 1px solid var(--brass); }
.recog__payoff {
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2);
  line-height: 1.06; letter-spacing: var(--track); color: var(--espresso); text-wrap: balance;
  margin-top: .5em; max-width: 17em;
}
@media (max-width: 900px) {
  .recog__text, html.preview .recog__text { grid-column: 1 / -1; }
  .recog__ph { grid-column: 1 / -1; position: static; max-width: 420px; margin-top: 1rem; }
}

/* ==========================================================================
   03 REFRAME
   ========================================================================== */
/* Jess 9/29: tightened the gap after the Recognition section (was a full double section space) */
.recog { padding-bottom: calc(var(--section) * .5); }
.recog + .reframe { padding-top: calc(var(--section) * .35); }
.recog__turn p:last-child { margin-bottom: 0; }
.reframe__head { grid-column: 1 / span 9; }
.reframe__body { grid-column: 3 / span 8; }
.reframe__quotes { margin: 0 0 2.25rem; }
.reframe__quotes li {
  font-family: var(--f-mono); font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  color: var(--espresso-70); padding: .35rem 0;
}
.between { margin: .5rem 0 2.5rem; }
.reframe__pivot { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight: 700; line-height: 1.35; margin-bottom: 1rem; color: var(--sienna-deep); }
.reframe__point { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.45; }
.reframe__point strong { color: var(--espresso); }
.between li {
  font-weight: 700; font-size: 1.0625rem; line-height: 1.45;
  padding: .85rem 0; border-top: 1px solid var(--brass);
}
.between li:last-child { border-bottom: 1px solid var(--brass); }

.callout { background: var(--clay); padding-block: clamp(64px, 7vw, 110px); margin-top: var(--section); }
.callout__copy { grid-column: 1 / span 6; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.callout__copy p:first-child { font-size: 1.15em; }
.callout__copy p:last-child { margin-bottom: 0; }
.callout__note { grid-column: 8 / span 5; align-self: center; margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.callout__note div { padding: 1.25rem 1.25rem 1.25rem 0; border-top: 1px solid var(--espresso); }
.callout__note div + div { padding-left: 1.25rem; padding-right: 0; border-left: 1px solid var(--espresso); }
.callout__note dt {
  font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--espresso); margin-bottom: .6rem;
}
.callout__note dd { margin: 0; }
.callout__note .big { display: block; font-family: var(--f-display); font-size: clamp(2.6rem, 2rem + 1.8vw, 3.6rem); line-height: 1; letter-spacing: var(--track); color: var(--sienna-deep); }
.callout__note .small { display: block; margin-top: .5rem; font-size: .9375rem; line-height: 1.4; color: var(--espresso); }
.reframe__ph { grid-column: 7 / span 5; margin-top: var(--gap); --ar: 3 / 2; }
.reframe__phwrap { padding-top: var(--gap); }

@media (max-width: 900px) {
  .reframe__head, .reframe__body, .callout__copy, .callout__note, .reframe__ph { grid-column: 1 / -1; }
  .callout__note { margin-top: 2rem; }
}

/* ==========================================================================
   04 WHY JESS
   ========================================================================== */
.why { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: start; }
.why__img { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); max-height: 980px; }
.why__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.why__story {
  padding-top: clamp(24px, 3vw, 48px);
  padding-left: clamp(40px, 6vw, 110px);
  padding-right: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
}
.why__story .measure { max-width: 37rem; }
.why__story .beat { font-size: 1.2em; line-height: 1.45; margin-block: 2em; }
.why__story .beat + .beat { margin-top: -1.25em; }
.why__story .pair { margin-block: 2em; }
.why__story .pair span { display: block; }
.why__ph { width: 62%; margin: 0 0 2.25rem auto; --ar: 4 / 5; }

.pullquote {
  margin: var(--section) auto 0; max-width: 20em; text-align: center;
  padding-block: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass);
  font-family: var(--f-display); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem);
  line-height: 1.1; color: var(--sienna); text-wrap: balance;
}
.pullquote p { margin: 0; }
.creds {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gap);
  margin: 2.75rem auto 0;
  font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.6;
}
.creds li { padding: 1rem 0; border-top: 1px solid var(--brass); }
@media (max-width: 1000px) { .creds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .why { grid-template-columns: 1fr; }
  .why__img { position: static; height: auto; aspect-ratio: 4 / 5; max-height: none; }
  .why__story { padding: 48px var(--gutter) 0; }
  .why__ph { width: 80%; }
}

/* ==========================================================================
   05 HOW IT WORKS
   ========================================================================== */
.opener { position: relative; }
.opener__img img { width: 100%; height: 100%; object-fit: cover; }
.opener__panel { padding: clamp(40px, 6vw, 72px) var(--gutter) 0; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; }
.opener__panel h2 { margin-bottom: .45em; }
.opener__intro { max-width: 34rem; margin-bottom: 1.75rem; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding: .9rem 0; border-top: 1px solid var(--brass);
}
.steps li:last-child { border-bottom: 1px solid var(--brass); }
.step__num { font-family: var(--f-mono); font-weight: 500; font-size: 1rem; color: var(--sienna-deep); }
.steps h3 { font-size: 1.0625rem; margin-bottom: .15rem; }
.steps p { margin: 0; font-size: 1rem; line-height: 1.5; }

/* Desktop: headline + steps sit on the photo, over the empty wall on the right */
@media (min-width: 1200px) {
  .opener__img { aspect-ratio: 16 / 9; max-height: calc(100vh - var(--header-h) + 120px); }
  .opener__img img { object-position: 30% 30%; }
  .opener__panel {
    position: absolute; top: 50%; transform: translateY(-50%);
    left: 64%; right: max(var(--gutter), 3%); max-width: 520px; margin: 0;
    padding: clamp(24px, 2.4vw, 40px);
    background: rgba(250, 247, 242, .9);
  }
  .opener__panel h2 { font-size: clamp(2rem, 1rem + 1.4vw, 2.7rem); }
  .opener__intro { font-size: 1rem; line-height: 1.55; margin-bottom: 1.25rem; }
}
@media (max-width: 1199px) {
  .opener__img { aspect-ratio: 16 / 9; }
  .opener__img img { object-position: 30% 30%; }
}
@media (max-width: 700px) {
  .opener__img { aspect-ratio: 4 / 5; }
  .opener__img img { object-position: 22% 50%; }
}

.audit { margin-top: clamp(72px, 8vw, 120px); align-items: start; }
.audit__copy { grid-column: 3 / span 8; }
html.preview .audit__copy { grid-column: 2 / span 6; }
.audit__ph { grid-column: 9 / span 4; --ar: 1 / 1; }
.audit__copy h3 { margin-bottom: 1.5rem; }
.ticks li { position: relative; padding: .7rem 0 .7rem 2.1rem; }
.ticks li::before {
  content: ""; position: absolute; left: .2rem; top: 1.05rem;
  width: .45rem; height: .85rem;
  border-right: 2px solid var(--sienna-deep); border-bottom: 2px solid var(--sienna-deep);
  transform: rotate(45deg);
}
.price { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--brass); }
.price__fig { font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 2.2rem + 2.4vw, 4.2rem); line-height: 1; color: var(--sienna); display: block; margin-bottom: .75rem; }
.price p { margin: 0; max-width: 34rem; }
.audit__cta { text-align: center; margin-top: clamp(56px, 6vw, 88px); }
@media (max-width: 900px) {
  .audit__copy, html.preview .audit__copy, .audit__ph { grid-column: 1 / -1; }
  .audit__ph { margin-top: 2rem; max-width: 420px; }
}

/* ==========================================================================
   06 FIT CHECK
   ========================================================================== */
.fit__head { grid-column: 1 / -1; }
.fit__cols { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
.fit__col { padding-right: clamp(24px, 4vw, 64px); }
.fit__col + .fit__col { padding-right: 0; padding-left: clamp(24px, 4vw, 64px); border-left: 1px solid var(--brass); color: var(--espresso-80); }
.fit__col h3 {
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sienna-deep); margin-bottom: 1rem;
}
.fit__col li { padding: 1rem 0; border-top: 1px solid rgba(201, 168, 76, .55); line-height: 1.5; }
@media (max-width: 800px) {
  .fit__cols { grid-template-columns: 1fr; }
  .fit__col { padding: 0; }
  .fit__col + .fit__col { padding: 2.5rem 0 0; border-left: 0; }
}

/* ==========================================================================
   07 PROOF
   ========================================================================== */
.proof__title { font-size: var(--fs-h3); margin-bottom: 1.5rem; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gap); }
.stats li { padding: 1.1rem 0 0; border-top: 1px solid var(--brass); }
.stat__fig { display: block; font-family: var(--f-display); font-size: clamp(1.6rem, 1.3rem + .8vw, 2.1rem); line-height: 1.1; letter-spacing: var(--track); color: var(--sienna); white-space: nowrap; margin-bottom: .4rem; }
.stats p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--espresso-80); }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.75rem; } }
@media (max-width: 600px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proof__ph { margin-top: clamp(40px, 5vw, 64px); max-width: 560px; --ar: 3 / 2; }
.testimonials { margin-top: clamp(64px, 7vw, 110px); }
.testimonials h3 { margin-bottom: 2rem; }
.testimonials__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.tcard { margin: 0; display: flex; flex-direction: column; }
.tcard__img img, .tcard__ph { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.tcard__ph { display: grid; place-items: center; background: #EDE6DC; color: #9A8F82; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; }
.tcard__body { margin-top: 1.5rem; }
.tcard__quote { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--brass); }
/* Align quote text, orange closers, and credits across cards (subgrid) */
/* Photo box reserves its square up front so text can never ride up over it (Safari fix) */
.tcard__img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.tcard__img picture, .tcard__img img { display: block; width: 100%; height: 100%; }
/* Cross-card alignment only when the cards sit three across; phones and tablets stack normally */
@supports (grid-template-rows: subgrid) { @media (min-width: 1001px) {
  .tcard { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
  .tcard__body, .tcard__quote { display: contents; }
  .tcard__text { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--brass); }
  .tcard__pull, .tcard figcaption { align-self: start; }
} }
.tcard__text p { font-size: 1rem; font-style: italic; }
.tcard__quote .tcard__pull { font-family: var(--f-display); font-style: normal; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.15; letter-spacing: var(--track); color: var(--sienna-deep); margin-top: 1.25rem; }
.tcard figcaption { margin-top: 1rem; }
.testimonials cite { font-style: normal; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; }
.testimonials .tcard cite { text-transform: none; letter-spacing: .04em; font-size: var(--fs-small); } /* keeps the ThrIVe spelling intact */
@media (max-width: 1000px) { .testimonials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .testimonials__list { grid-template-columns: 1fr; } }


/* ==========================================================================
   08 FAQ
   ========================================================================== */
.faq__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 40px); }
.faq__list { grid-column: 6 / span 7; }
.faq details { border-top: 1px solid var(--brass); }
.faq details:last-child { border-bottom: 1px solid var(--brass); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.5rem 0; font-weight: 700; font-size: clamp(1.125rem, 1rem + .45vw, 1.35rem); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--sienna-deep); flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--plum); }
.faq__a { padding: 0 2.5rem 1.6rem 0; font-size: clamp(1.0625rem, 1rem + .2vw, 1.15rem); }
.faq__a p { margin: 0; }
@media (max-width: 900px) {
  .faq__head { grid-column: 1 / -1; position: static; }
  .faq__list { grid-column: 1 / -1; }
}

/* ==========================================================================
   09 FINAL CTA + BOOKING
   ========================================================================== */
.final { background: var(--espresso); color: var(--warm-white); }
.final__copy { grid-column: 1 / span 5; align-self: start; }
.final__copy h2 { color: var(--warm-white); }
.final__copy .kicker { background: var(--brass); }
.final__copy p { max-width: 30rem; }
.final__ph { margin-top: 2.5rem; max-width: 340px; }
.final__form { grid-column: 7 / span 6; background: var(--warm-white); color: var(--espresso); padding: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) {
  .final__copy, .final__form { grid-column: 1 / -1; }
  .final__form { margin-top: 2.5rem; }
}

.form-intro { font-family: var(--f-mono); font-size: var(--fs-small); color: var(--espresso-80); margin-bottom: 1.75rem; }
.field { margin-bottom: 1.4rem; }
.field label {
  display: block; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem;
}
.field .opt { color: var(--espresso-70); text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--espresso);
  background: transparent; border: 0; border-bottom: 1px solid var(--espresso); border-radius: 0;
  padding: .55rem 0; -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 7rem; border: 1px solid var(--espresso); padding: .75rem; margin-top: .25rem; }
.field select {
  cursor: pointer; padding-right: 1.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--espresso) 50%), linear-gradient(135deg, var(--espresso) 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--sienna-deep); outline-offset: 3px; }
.field .hint { font-size: var(--fs-small); color: var(--espresso-70); margin: .35rem 0 0; }
.field .error { display: none; font-size: var(--fs-small); color: var(--sienna-deep); font-weight: 700; margin: .4rem 0 0; }
.field.has-error .error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--sienna-deep); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; align-items: end; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-submit { margin-top: 2rem; }
.form-submit .micro { text-align: center; }

/* ----- Footer ------------------------------------------------------------- */
.site-footer { background: var(--espresso); color: var(--warm-white); border-top: 1px solid rgba(201, 168, 76, .5); }
.site-footer .wrap { padding-block: 36px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-family: var(--f-mono); font-size: .8125rem; line-height: 1.7; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 4px 0; }
.site-footer li + li::before { content: "\00B7"; margin: 0 .7rem; color: var(--brass); }
.site-footer a:not(.wordmark) { text-decoration: none; border-bottom: 1px solid rgba(250, 247, 242, .35); }
.site-footer a:not(.wordmark):hover { border-bottom-color: var(--warm-white); }
.site-footer .wordmark { font-size: 1.125rem; color: var(--warm-white); }
.site-footer .wordmark span { color: var(--clay); }

@media (max-width: 700px) {
  .site-footer ul { flex-direction: column; }
  .site-footer li + li::before { display: none; }
}

/* ----- Mobile sticky CTA -------------------------------------------------- */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--warm-white); border-top: 1px solid var(--brass);
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform .3s ease;
  }
  .sticky-cta.is-visible { transform: none; }
  .header-cta { display: none; }
}

/* ==========================================================================
   THANKS PAGE
   ========================================================================== */
.thanks { padding-block: clamp(56px, 7vw, 110px); }
.thanks__head { max-width: 42rem; margin-bottom: 2.5rem; }
.thanks__head h1 { margin-bottom: 1.25rem; }
.thanks__cal { border-top: 1px solid var(--brass); padding-top: 2rem; }
.thanks__cal iframe { display: block; width: 100%; min-height: 720px; border: 0; background: #fff; }
.cal-fallback { font-family: var(--f-mono); font-size: var(--fs-small); margin-top: 1rem; }
.cal-fallback a { color: var(--sienna-deep); }
.cal-missing {
  border: 1px dashed var(--brass); background: rgba(232, 196, 168, .35); padding: 2rem;
  font-family: var(--f-mono); font-size: .875rem;
}

/* Thanks page: keep footer at the bottom on short pages */
body.page-thanks { min-height: 100vh; display: flex; flex-direction: column; }
body.page-thanks main { flex: 1; }