/* =====================================================================
   TREATMENT-SINGLE.CSS — R3 Medispa Theme
   Loaded only on: single-treatment.php (is_singular('treatment')).
   Ported from 0702_10am_R3_treatment_v13_FINAL.html section-by-section.

   Reuses rather than redefines: .container, .btn/.btn-cta/.btn-ghost/
   .btn-ghost-light, .eyebrow, .reveal/.reveal-group, and all :root
   design tokens already declared in global.css. The mockup's own
   reveal-left/right/stagger variants and btn-primary/btn-ghost-hero
   names were folded into the existing .reveal/.reveal-group and
   .btn-cta/.btn-ghost classes rather than adding new ones — same
   visual result, no duplicate utility CSS or global.js changes needed.

   Color translation from the mockup's local aliases to global.css's
   actual custom properties: --forest -> --forest-800, --sage/
   --forest-light -> --forest-500, --sage-light -> --forest-300,
   --sage-pale -> --forest-50, --terra -> --terra-500, --terra-light
   -> --terra-400, --ink/--charcoal -> --charcoal, --ink-mid/
   --charcoal-mid -> --mid, --muted/--ink-light -> --muted,
   --cream/--pale/--linen -> --cream, --cream-dark/--pale-dark -> --sand-200.
   ===================================================================== */

/* Heading italics — global.css colors <em> forest-green by default (see
   "TYPOGRAPHY" in global.css). The mockup uses terracotta italics on
   light-background section headings, but a lighter sage-green on the
   two dark-gradient sections (How It Works / Why Choose), matching its
   own h2.sh vs h2.sh.light distinction — scoped per-section here. */
.r3-treatment .what-text h2 em,
.r3-treatment .conditions-header h2 em,
.r3-treatment .benefits-header h2 em,
.r3-treatment .suitability-header h2 em,
.r3-treatment .expect-header h2 em,
.r3-treatment .tx-faq-intro h2 em,
.r3-treatment .book-intro h2 em { font-style: italic; color: var(--terra-500); }

.r3-treatment .how-text h2 em,
.r3-treatment .why-header h2 em { font-style: italic; color: var(--forest-300); }

/* Every section-label/eyebrow in the mockup has a short line before the
   text (.section-label::before) — only tx-hero-eyebrow had its own copy
   of this so far. Scoped to .r3-treatment .eyebrow so it applies to every
   other section's label without touching .eyebrow sitewide (used as-is,
   without the line, elsewhere in the theme). */
.r3-treatment .eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;
}
.r3-treatment .eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; flex-shrink: 0; }
/* global.css's .reveal-group only defines stagger rules for the first 8
   children (see .reveal-group.visible > *:nth-child(1..8)) — any 9th+
   item never gets an opacity:1 rule and stays invisible forever while
   still occupying its grid cell (the "cards missing, big empty gap"
   symptom). Several sections here (Conditions, Benefits) can genuinely
   exceed 8 items depending on content, so add a catch-all scoped to
   this template only — doesn't touch global.css or any other page. */
.reveal-group.visible > *:nth-child(n+9) { opacity: 1; transform: none; transition-delay: .54s; }

/* Slide-in variants for split-column sections (image/text panels) — the
   mockup's .reveal-left/.reveal-right move in horizontally, distinct from
   the sitewide .reveal's vertical fade-up. global.js's IntersectionObserver
   already watches these two classes alongside .reveal/.reveal-group. */
.reveal-left { opacity: 0; transform: translateX(-22px); transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(22px); transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Section headings in the mockup use a dedicated h2.sh size scale, slightly
   different from global.css's sitewide h2 clamp() — scoped to this template
   so the rest of the site is unaffected. */
.r3-treatment h2 { font-size: clamp(30px,3.4vw,52px); }

.r3-eyebrow-terra { color: var(--terra-500); }
.r3-eyebrow-light { color: var(--forest-300); }
.r3-eyebrow-center { justify-content: center; }
.r3-eyebrow-center::before { display: none; }

/* ══════════════════════════════════════
   HERO — split, image right
══════════════════════════════════════ */
.tx-hero {
  position: relative;
  min-height: 90vh;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 112px; /* offsets the fixed #nav (112px tall, see global.css) — this hero has
                         a solid white background, unlike the homepage's full-bleed hero, so
                         it can't sit underneath a transparent nav the way that one does. */
  overflow: hidden;
}
.tx-hero-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem 5rem 4.5rem;
  background: #fff;
}
.tx-hero-left::after {
  content: ''; position: absolute; right: 0; top: 10%; bottom: 10%; width: 1px;
  background: rgba(26,58,40,.10);
}
/* Nav legibility fix — #nav's default (non-scrolled) link/logo colors are
   near-white, designed to sit over the homepage's dark full-bleed hero.
   This template's hero has a solid white background instead, so force the
   nav into its solid/legible "scrolled" appearance from page load. Scoped
   to .single-treatment (the body class WP adds for this CPT) so the
   homepage's transparent-over-dark-hero nav behavior is untouched. */
.single-treatment #nav:not(.scrolled) {
  background: rgba(253,252,250,.93);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--forest-100);
}
.single-treatment #nav:not(.scrolled) .nav-links a { color: var(--mid); }
.single-treatment #nav:not(.scrolled) .nav-links a:hover { color: var(--forest-600); }
.single-treatment #nav:not(.scrolled) .nav-phone { color: var(--muted); }

/* Hero load-in animation — matches the homepage hero's .ha/.ha-1..5 pattern
   in home.css exactly (same keyframe, same naming), just re-declared here
   since treatment-single.css and home.css never load on the same page. */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ha { opacity: 0; animation: fadeUp .75s forwards; }
.ha-1 { animation-delay: .05s; }
.ha-2 { animation-delay: .2s; }
.ha-3 { animation-delay: .35s; }
.ha-4 { animation-delay: .5s; }

/* Hero buttons — the mockup's .btn-primary/.btn-ghost-hero are uppercase
   with a terracotta glow shadow, distinct from the sitewide .btn-cta/
   .btn-ghost used everywhere else in the theme (title-case, no glow).
   Scoped to .tx-hero-actions only so the rest of the site is untouched. */
.tx-hero-actions .btn {
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .06em;
  padding: 15px 36px;
  border-radius: 12px;
}
.tx-hero-actions .btn-cta {
  box-shadow: 0 4px 20px rgba(196,83,46,.25);
}
.tx-hero-actions .btn-cta:hover {
  box-shadow: 0 8px 32px rgba(196,83,46,.38);
}
.tx-hero-actions .btn-ghost:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
}

/* Inline consultation CTA buttons — the mockup uses this exact uppercase
   + glow treatment for every "Book a Consultation" button on the page,
   not just the hero. .btn-ghost-light's border-color here is nudged to
   the mockup's exact rgba(255,255,255,.35) — sitewide default is .45,
   close but not identical — scoped so it only affects this section. */
.tx-cta-actions .btn {
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .06em;
  padding: 15px 36px;
  border-radius: 12px;
}
.tx-cta-actions .btn-cta {
  box-shadow: 0 4px 20px rgba(196,83,46,.28);
}
.tx-cta-actions .btn-cta:hover {
  box-shadow: 0 8px 32px rgba(196,83,46,.4);
}
.tx-cta-actions .btn-ghost-light {
  border-color: rgba(255,255,255,.35);
}

.tx-hero-eyebrow {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--forest-500); font-weight: 600; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 10px;
}
.tx-hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--forest-500); flex-shrink: 0; }
h1.tx-hero-headline {
  font-family: var(--serif); font-weight: 300; font-size: clamp(34px,4.5vw,64px);
  line-height: 1.08; color: var(--forest-900); letter-spacing: -.015em; margin-bottom: 1.5rem;
}
h1.tx-hero-headline em { font-style: italic; color: var(--forest-500); }
.tx-hero-sub { font-size: 14px; font-weight: 300; color: var(--mid); line-height: 1.85; max-width: 420px; margin-bottom: 2.5rem; }
.tx-hero-actions { display: flex; gap: .875rem; flex-wrap: wrap; }
.tx-hero-right { position: relative; overflow: hidden; background: var(--sand-200); }
.tx-hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ══════════════════════════════════════
   TRUST STRIP
══════════════════════════════════════ */
.trust-strip {
    background: var(--cream); padding: 1.25rem 4.5rem; display: flex; align-items: center;
  gap: 2.5rem; border-bottom: 1px solid rgba(26,58,40,.10); flex-wrap: wrap;
  justify-content: space-between;   /* ← add this line */
}
.trust-item {
  display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid); font-weight: 400; white-space: nowrap;
}
.trust-icon {
  width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; background: var(--charcoal); border-radius: 50%;
}
.trust-icon svg { width: 14px; height: 14px; stroke: var(--cream); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.trust-divider { width: 1px; height: 24px; background: rgba(26,58,40,.10); flex-shrink: 0; }

/* ══════════════════════════════════════
   WHAT IS — split image + text
══════════════════════════════════════ */
.what-section { background: #fff; padding: 4.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.what-text h2 { margin: 0 0 1.5rem; }
.what-text .what-tagline { font-family: var(--serif); font-style: italic; font-size: clamp(18px,1.8vw,24px); color: var(--forest-800); line-height: 1.35; margin-bottom: 1.5rem; }
.what-text p { font-size: 13.5px; color: var(--mid); line-height: 1.9; margin-bottom: 1.1rem; }
.what-img-col { position: relative; }
.what-img-main { width: 100%; aspect-ratio: 4/5; overflow: hidden; position: relative; }
.what-img-main img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s ease; }
.what-img-main:hover img { transform: scale(1.03); }
.what-img-badge { position: absolute; bottom: 2rem; left: -2rem; background: #fff; padding: 1.25rem 1.5rem; max-width: 200px; border-left: 3px solid var(--terra-500); }
.what-img-badge-num { font-family: var(--serif); font-size: 36px; color: var(--terra-500); line-height: 1; }
.what-img-badge-lbl { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-top: 4px; line-height: 1.4; }

/* ══════════════════════════════════════
   HOW IT WORKS — dark forest gradient, split
══════════════════════════════════════ */
.how-section {
  background: linear-gradient(130deg,#0f2922 0%,#1a4035 50%,#3a8870 100%);
  padding: 88px 4.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.how-img-col { position: relative; height: 520px; overflow: hidden; }
.how-img-col img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s ease; }
.how-img-col:hover img { transform: scale(1.03); }
.how-img-accent { position: absolute; top: 2rem; right: -1.5rem; width: 40%; height: 38%; border: 1px solid rgba(26,58,40,.10); z-index: -1; pointer-events: none; }
.how-text h2 { color: var(--cream); }
.how-body p { font-size: 13.5px; color: rgba(247,243,236,.6); line-height: 1.9; margin-top: 1.25rem; }
.how-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 2.5rem; border-top: 1px solid rgba(247,243,236,.1); }
.how-stat { padding: 1.4rem 0; border-right: 1px solid rgba(247,243,236,.08); padding-right: 1.5rem; margin-right: 1.5rem; }
.how-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.how-stat-num { font-family: var(--serif); font-size: 32px; color: var(--cream); line-height: 1; margin-bottom: 4px; }
.how-stat-lbl { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(247,243,236,.35); line-height: 1.4; }

/* ══════════════════════════════════════
   CONDITIONS — 3-col card grid
══════════════════════════════════════ */
.conditions-section { background: var(--cream); padding: 96px 4.5rem; }
.conditions-header { text-align: center; max-width: 700px; margin: 0 auto 3.5rem; }
.conditions-header h2 { font-size: clamp(24px,2.4vw,38px); }
.conditions-header p { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin-top: 1rem; }
.conditions-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; max-width: 1100px; margin: 0 auto; }
.cond-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(26,58,40,.10);
  border-radius: var(--r-md); padding: 1.5rem 1.75rem 1.75rem; transition: box-shadow .25s, transform .25s;
}
.cond-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cond-tag {
  display: inline-block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--forest-600); font-weight: 500; background: var(--forest-50); border: 1px solid var(--forest-100);
  border-radius: var(--r-pill); padding: 4px 10px; margin-bottom: .85rem;
}
.cond-card h3 { font-family: var(--serif); font-weight: 300; font-size: 17px; color: var(--charcoal); margin-bottom: .6rem; line-height: 1.3; }
.cond-card p { font-size: 12.5px; color: var(--muted); line-height: 1.75; font-weight: 300; flex: 1; }

/* ══════════════════════════════════════
   BENEFITS — 4 + 3 icon-led grid
══════════════════════════════════════ */
.benefits-section { background: var(--cream); padding: 88px 4.5rem; }
.benefits-header { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.benefits-header p { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin-top: 1rem; }
.benefits-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; max-width: 1100px; margin: 0 auto; }

.benefits-grid-row2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1100px;
    margin: 1.25rem auto 0;
}

.benefit-card {
  background: #fff; border: 1px solid rgba(26,58,40,.10); border-radius: var(--r-lg); padding: 2.5rem 1.75rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow .25s, transform .25s;
}
.benefit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.benefit-icon { width: 96px; height: 96px; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; background: var(--forest-50); border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.benefit-icon img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.benefit-card h3 { font-family: var(--serif); font-weight: 300; font-size: 15px; color: var(--charcoal); margin-bottom: .55rem; line-height: 1.25; }
.benefit-card p { font-size: 12px; color: var(--muted); line-height: 1.72; font-weight: 300; }

/* ══════════════════════════════════════
   SUITABILITY — two comparison cards
══════════════════════════════════════ */
.suitability-section { background: var(--cream); padding: 88px 4.5rem; }
.suitability-header { max-width: 660px; margin: 0 auto 3rem; text-align: center; }
.suitability-header h2 { font-size: clamp(24px,2.8vw,38px); }
.suitability-header p { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin-top: 1rem; }
.suitability-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.suit-card { border-radius: var(--r-lg); padding: 2rem 2.25rem 2.25rem; }
.suit-card-for { background: #eef5f0; border: 1px solid #c5dece; }
.suit-card-not { background: #fdf0ed; border: 1px solid #f0cfc6; }
.suit-card h3 { font-family: var(--serif); font-weight: 300; font-size: 1.2rem; color: var(--charcoal); margin-bottom: .6rem; line-height: 1.3; }
.suit-card-intro { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin-bottom: 1.25rem; }
.suit-card ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.suit-card ul li { font-size: 13px; color: var(--mid); line-height: 1.6; display: flex; align-items: flex-start; gap: 10px; font-weight: 300; }
.suit-card-for ul li::before { content: '✓'; font-size: 11px; color: var(--forest-500); flex-shrink: 0; margin-top: .15em; font-weight: 600; }
.suit-card-not ul li::before { content: '✕'; font-size: 11px; color: var(--terra-500); flex-shrink: 0; margin-top: .15em; font-weight: 600; }
.suit-card-disclaimer { font-size: 12px; color: var(--muted); line-height: 1.75; margin-top: 1.5rem; font-style: italic; }

/* ══════════════════════════════════════
   INLINE CONSULTATION CTA (reusable partial)
══════════════════════════════════════ */
.tx-cta { padding: 64px 4.5rem; text-align: center; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.tx-cta-heading { font-family: var(--serif); font-size: clamp(1.6rem,2.5vw,2.2rem); color: #fff; font-weight: 300; margin: 0 0 .75rem; line-height: 1.25; }
.tx-cta-body { font-size: .875rem; color: rgba(255,255,255,.55); margin: 0 0 2rem; line-height: 1.8; max-width: 480px; margin-left: auto; margin-right: auto; }
.tx-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ══════════════════════════════════════
   WHAT TO EXPECT — 3-step grid
══════════════════════════════════════ */
.expect-section { background: var(--cream); padding: 88px 4.5rem; }
.expect-header { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.expect-header p { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin-top: 1rem; }
.expect-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(26,58,40,.10); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.expect-card { padding: 2.5rem 2rem; border-right: 1px solid rgba(26,58,40,.10); }
.expect-card:last-child { border-right: none; }
.expect-step-img { width: 100%; height: 180px; margin-bottom: 1.5rem; overflow: hidden; border-radius: var(--r-md); object-fit: cover; display: block; }
.expect-phase {
  display: inline-block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--forest-600);
  font-weight: 500; background: var(--forest-50); border: 1px solid var(--forest-100); border-radius: var(--r-pill);
  padding: 4px 10px; margin-bottom: 1rem;
}
.expect-card h3 { font-family: var(--serif); font-weight: 300; font-size: 1.1rem; color: var(--charcoal); margin-bottom: .75rem; line-height: 1.3; }
.expect-card p { font-size: 12.5px; color: var(--muted); line-height: 1.75; font-weight: 300; }

/* ══════════════════════════════════════
   AFTERCARE — split, icon list
══════════════════════════════════════ */
.aftercare-section { background: #fff; padding: 88px 4.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.aftercare-img { position: relative; overflow: hidden; }
.aftercare-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center; display: block; transition: transform .5s ease; }
.aftercare-img:hover img { transform: scale(1.03); }
.aftercare-section h2 { margin-bottom: 1.25rem; }
.aftercare-intro { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin-bottom: 1.75rem; }
.aftercare-list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .875rem; }
.aftercare-item { display: flex; align-items: flex-start; gap: 12px; padding: .875rem 1rem; background: #fff; border-left: 2px solid rgba(26,58,40,.10); }
.aftercare-item svg { width: 18px; height: 18px; stroke: var(--forest-800); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }
.aftercare-item p { font-size: 12.5px; color: var(--mid); line-height: 1.68; font-weight: 300; }

/* ══════════════════════════════════════
   WHY CHOOSE — dark forest gradient, 5-col
══════════════════════════════════════ */
.why-section { background: linear-gradient(105deg,#0f2922 0%,#1a4035 50%,#2d7860 100%); padding: 88px 4.5rem; }
.why-header { margin-bottom: 3rem; max-width: 580px; }
.why-header h2 { color: var(--cream); }
.why-header p { font-size: 13.5px; color: rgba(247,243,236,.55); margin-top: 1rem; line-height: 1.85; }
.why-grid { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid rgba(247,243,236,.08); }
.why-card { padding: 2rem 1.375rem 2.25rem; border-right: 1px solid rgba(247,243,236,.08); transition: background .2s; }
.why-card:last-child { border-right: none; }
.why-card:hover { background: rgba(247,243,236,.04); }
.why-icon { width: 84px; height: 84px; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; }
.why-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.why-card h3 { font-family: var(--serif); font-size: 16px; color: var(--cream); margin-bottom: .55rem; line-height: 1.3; }
.why-card p { font-size: 12px; color: rgba(247,243,236,.42); line-height: 1.72; font-weight: 300; }

/* ══════════════════════════════════════
   TEAM
══════════════════════════════════════ */
.team-section { background: #fff; padding: 88px 4.5rem; }
.team-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 3rem; }
.team-intro p { font-size: 13.5px; color: var(--muted); line-height: 1.85; }
.team-feature { border: 1px solid rgba(26,58,40,.10); overflow: hidden; background: var(--cream); margin-bottom: 3rem; }
.team-feature img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center 30%; filter: brightness(.95) saturate(.95); transition: filter .35s, transform .6s; }
.team-feature:hover img { filter: brightness(1) saturate(1); transform: scale(1.02); }
@media(max-width:768px) { .team-feature img { aspect-ratio: 4/3; object-position: center 28%; } }

/* ══════════════════════════════════════
   FAQ — matches homepage's .faq-item/.faq-q markup + global.js toggleFaq()
══════════════════════════════════════ */
.tx-faq-section { background: var(--cream); padding: 88px 4.5rem; display: grid; grid-template-columns: 360px 1fr; gap: 5rem; }
.tx-faq-intro h2 { font-size: clamp(26px,3vw,38px); }
.tx-faq-intro p { font-size: 13.5px; color: var(--muted); margin-top: 1.1rem; line-height: 1.8; }
.tx-faq-list { display: flex; flex-direction: column; }
.tx-faq-list .faq-item { border-bottom: 1px solid rgba(26,58,40,.10); }
.tx-faq-list .faq-item:first-child { border-top: 1px solid rgba(26,58,40,.10); }
.tx-faq-list .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 0; cursor: pointer; gap: 1rem; }
.tx-faq-list .faq-q-text { font-family: var(--serif); font-size: 17px; color: var(--charcoal); line-height: 1.3; font-weight: 300; }
.tx-faq-list .faq-icon { width: 26px; height: 26px; flex-shrink: 0; border: 1px solid rgba(26,58,40,.10); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--forest-800); font-weight: 300; transition: all .2s; line-height: 1; }
.tx-faq-list .faq-a { max-height: 0; overflow: hidden; transition: max-height .38s ease; }
.tx-faq-list .faq-a p { font-size: 13px; color: var(--muted); line-height: 1.82; padding-bottom: 1.4rem; font-weight: 300; }
.tx-faq-list .faq-item.open .faq-a { max-height: 400px; }
.tx-faq-list .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--forest-800); border-color: var(--forest-800); color: var(--cream); }

/* ══════════════════════════════════════
   BOOKING FORM
══════════════════════════════════════ */
.book-section { background: #fff; padding: 88px 4.5rem; }
.book-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.book-intro p { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin-top: 1.25rem; }
.book-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .5rem; }
.form-group label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mid); font-weight: 500; }
.form-group input, .form-group textarea {
  width: 100%; padding: 12px 14px; font-family: var(--sans); font-size: 13px; font-weight: 300;
  color: var(--charcoal); background: #fff; border: 1px solid rgba(26,58,40,.10); outline: none;
  transition: border-color .2s; resize: none; -webkit-appearance: none; border-radius: var(--r-sm);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--forest-800); }
.form-group textarea { min-height: 100px; }
.form-submit { align-self: flex-start; }
.form-reassurance { font-size: 11px; color: var(--muted); letter-spacing: .04em; margin-top: -.25rem; }
.form-alt { display: flex; align-items: center; gap: 1rem; margin-top: .25rem; }
.form-alt-or { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.form-wa-alt {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid rgba(28,35,32,.15);
  color: var(--mid); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400;
  text-decoration: none; transition: all .2s; background: #fff; border-radius: var(--r-sm);
}
.form-wa-alt:hover { border-color: var(--forest-800); color: var(--forest-800); }
.form-wa-alt svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.form-error { font-size: 12px; color: var(--terra-500); margin-top: -.5rem; display: none; }
.form-error.visible { display: block; }
.book-success { display: none; padding: 2.5rem; background: #fff; border: 1px solid rgba(26,58,40,.10); border-radius: var(--r-md); text-align: center; }
.book-success.visible { display: block; }
.book-success-icon { width: 56px; height: 56px; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--forest-50); }
.book-success-icon svg { width: 28px; height: 28px; stroke: var(--forest-800); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.book-success-title { font-family: var(--serif); font-size: 22px; color: var(--charcoal); margin-bottom: .875rem; line-height: 1.25; }
.book-success-body { font-size: 13.5px; color: var(--muted); line-height: 1.85; max-width: 360px; margin: 0 auto; }
.book-success .form-wa-alt { margin: 1.5rem auto 0; display: inline-flex; }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media(max-width:1024px) {
  .tx-hero { grid-template-columns: 1fr; }
  .tx-hero-right { height: 55vw; min-height: 300px; order: -1; }
  .tx-hero-left { padding: 4rem 2.5rem; }
  .tx-hero-left::after { display: none; }
  .trust-strip { padding: 1.25rem 2.5rem; }
  .what-section, .how-section, .aftercare-section, .book-section,
  .conditions-section, .benefits-section, .suitability-section,
  .expect-section, .why-section, .team-section, .tx-faq-section { padding-left: 2.5rem; padding-right: 2.5rem; }
  .what-section { grid-template-columns: 1fr; gap: 3rem; }
  .what-img-badge { left: 1rem; bottom: 1.5rem; }
  .how-section { grid-template-columns: 1fr; gap: 3rem; }
  .how-img-col { height: 380px; order: -1; }
  .how-img-accent { display: none; }
  .conditions-grid, .benefits-grid, .benefits-grid-row2 { grid-template-columns: repeat(2,1fr); }
  .benefits-grid-row2 { max-width: 100%; }
  .suitability-cards { grid-template-columns: 1fr; }
  .expect-grid { grid-template-columns: 1fr 1fr; }
  .expect-card:nth-child(2) { border-right: none; }
  .expect-card:nth-child(1), .expect-card:nth-child(2) { border-bottom: 1px solid rgba(26,58,40,.10); }
  .aftercare-section { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-grid { grid-template-columns: repeat(3,1fr); }
  .why-card:nth-child(3) { border-right: none; }
  .why-card:nth-child(4), .why-card:nth-child(5) { border-top: 1px solid rgba(247,243,236,.08); }
  .team-intro { grid-template-columns: 1fr; gap: 1rem; }
  .tx-faq-section { grid-template-columns: 1fr; gap: 2rem; }
  .book-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media(max-width:768px) {
  .tx-hero-left { padding: 3.5rem 1.25rem; }
  h1.tx-hero-headline { font-size: clamp(30px,9vw,46px); }
  .tx-hero-sub { font-size: 13.5px; max-width: 100%; }
  .tx-hero-actions { flex-direction: column; gap: .75rem; }
  .tx-hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
  .tx-hero-right { height: 56vw; min-height: 220px; }

  .trust-strip { padding: 1rem 1.25rem; gap: 1rem; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .trust-strip::-webkit-scrollbar { display: none; }
  .trust-divider { display: none; }

  .what-section, .how-section, .aftercare-section, .book-section,
  .conditions-section, .benefits-section, .suitability-section,
  .expect-section, .why-section, .team-section, .tx-faq-section { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 56px; padding-bottom: 64px; }

  .what-section { grid-template-columns: 1fr; gap: 2rem; }
  .what-img-badge { left: .75rem; bottom: 1rem; padding: 1rem 1.25rem; }
  .what-img-badge-num { font-size: 28px; }

  .how-section { grid-template-columns: 1fr; gap: 2rem; }
  .how-img-col { height: 260px; order: -1; }
  .how-stats { grid-template-columns: 1fr 1fr; }

  .conditions-grid, .benefits-grid, .benefits-grid-row2 { grid-template-columns: 1fr 1fr; }
  .benefits-grid-row2 { max-width: 100%; }

  .expect-grid { grid-template-columns: 1fr; }
  .expect-card { border-right: none; border-bottom: 1px solid rgba(26,58,40,.10); }
  .expect-card:last-child { border-bottom: none; }

  .aftercare-section { grid-template-columns: 1fr; gap: 2rem; }
  .aftercare-img img { aspect-ratio: 16/9; }

  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-card { border-bottom: 1px solid rgba(247,243,236,.08); }
  .why-card:nth-child(2n) { border-right: none; }
  .why-card:nth-last-child(-n+2) { border-bottom: none; }

  .tx-faq-section { grid-template-columns: 1fr; gap: 1.5rem; }
  .book-inner { grid-template-columns: 1fr; gap: 2rem; }
  .form-submit { width: 100%; text-align: center; justify-content: center; }

  .tx-cta { padding: 48px 1.25rem; }
}

@media(max-width:480px) {
  .benefits-grid, .benefits-grid-row2 { grid-template-columns: 1fr; max-width: 100%; }
  .benefit-card { border-right: none; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card { border-right: none; }
  .conditions-grid { grid-template-columns: 1fr; }
}