/* ============================================================================
   MOCKUP SYSTEM PASS — body.theme-system
   ----------------------------------------------------------------------------
   Master Directive D + Addition 3. Every value here is READ OUT OF
   RACHEL-MOCKUP.html's own <style> block, not approximated from a screenshot.
   Ships behind a body class (standing rule 1) so the default render is untouched
   until one line is deliberately flipped. Preview: ?theme=system

   ROOT CAUSE THIS PASS FIXES
   The reported symptoms — headline drift, stair-stepped cards, uneven widths,
   cramped card interiors, the journey heading colliding with its grid — are almost
   all ONE bug, the same one that broke the hero. blockify emits every design
   container as a core/group, so WP stamps `is-layout-constrained` +
   `has-global-padding` on .section-inner, on .grid-3/.grid-4, AND on every .card.
   WP's layout CSS then caps each of them at theme.json contentSize (68ch).
   MEASURED live on /laser-hair-removal-with-gentlemax-pro/ before this pass:
       .grid-4 width 671.855px (should be 1180)   max-width 671.855px
       gap 2px (should be 22px)
       card padding 44px 32px inside a 166px column -> 102px of usable width
       grid-4 card widths 191 / 186 / 178 / 166 — four different widths in a
       four-equal-column grid, because the cards overflow their tracks
   So the fix is structural first, cosmetic second.

   FONT (approved 2026-07-28): display = Montserrat, the face measured off the
   client wordmark (IoU 0.822 vs a 0.448 floor). WEIGHT TIERING, per approval:
   800 for display headings >= 24px, 700 below that — at 17px an 800 weight closes
   the counters and reads as a solid block. Body stays Inter. Serif retired.
   ============================================================================ */

@font-face{font-family:Montserrat;src:url(../fonts/montserrat-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-800.woff2) format('woff2');font-weight:800;font-display:swap}

/* ---------------------------------------------------------------- 1. TOKENS */
body.theme-system{
  /* --serif is referenced by ~40 rules across the theme. Repointing the TOKEN
     rather than renaming it means every component inherits the flip with no edit,
     which is the whole point of the mobile-menu tokenisation done earlier. */
  --serif:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* mockup :root, verbatim */
  --sys-navy:#0e2a44;   --sys-ink:#1c2b3a;     --sys-ink-soft:#5c6c7c;
  --sys-line:#e2ecf3;   --sys-white:#ffffff;
  --sys-blue-25:#f6fafd;--sys-blue-50:#eaf4fb; --sys-blue-100:#d6eaf6;
  --sys-blue-200:#b3d9ef;--sys-blue-600:#1f78bd;--sys-blue-700:#155d95;
  --sys-shadow:0 4px 16px rgba(14,42,68,.06);
  --sys-shadow-lg:0 18px 44px rgba(14,42,68,.12);
  --sys-radius:14px;

  /* mockup geometry */
  --sys-container:1180px;
  --sys-container-pad:32px;
  --sys-section-pad:90px;
  --sys-head-width:640px;
  --sys-head-gap:52px;
  --sys-gap-3:26px;      /* .card-grid-3 */
  --sys-gap-4:22px;      /* .card-grid-4 */
  --sys-card-pad:30px 26px;
}

/* ------------------------------------------- 2. UNDO WP's CONSTRAINED LAYOUT */
/* Scoped to .entry-content so bespoke (parts-driven) pages are untouched. This is
   the structural fix; everything below is cosmetic and depends on it. */
body.theme-system .entry-content .section,
body.theme-system .entry-content .section-inner,
body.theme-system .entry-content .grid-2,
body.theme-system .entry-content .grid-3,
body.theme-system .entry-content .grid-4,
body.theme-system .entry-content .card,
body.theme-system .entry-content .faq-list,
body.theme-system .entry-content .faq-item{
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}
/* upgrades.css:48 ships `.section{padding:clamp(4.5rem,11vh,9rem) clamp(...)!important}`
   which computed to 110px top — not the mockup's 90px — and, being !important, beat a
   plain rule. Equal force, and the inline padding moves to .section-inner so the
   section itself is edge-to-edge (its background can then span full width). */
body.theme-system .entry-content .section{
  padding:var(--sys-section-pad) 0!important;
  overflow:visible;
}
body.theme-system .entry-content .section-inner{
  max-width:var(--sys-container);
  margin-inline:auto;
  padding-inline:var(--sys-container-pad);
}

/* ------------------------------------------------ 3. TYPE SCALE + ALIGNMENT */
/* !important throughout this block is deliberate and NOT cargo-culted. upgrades.css
   line 50-52 ships the previous display treatment as
     .section-title{font-weight:300!important;font-size:clamp(2rem,4.5vw,3.4rem)!important;max-width:22ch}
     .section-eyebrow{font-size:11px!important;letter-spacing:.28em!important;...}
   — a light-weight 54px display voice, i.e. the exact opposite of the mockup's
   700/800 at 30px. Those are !important at (0,1,0); a plain (0,2,0) rule loses to
   them. MEASURED proof of the collision: with the gate on but before this change,
   font-family flipped to Montserrat (the token repoint worked) while weight stayed
   300 and size stayed 54.4px. So the type scale needs equal force to land. */
body.theme-system h1,
body.theme-system h2,
body.theme-system h3,
body.theme-system h4{
  font-family:var(--serif)!important;
  color:var(--sys-navy)!important;
  line-height:1.18!important;   /* mockup */
  margin:0 0 .5em;              /* mockup */
  letter-spacing:-.01em!important;
}
/* WEIGHT TIERING — the approved 800/700 split */
body.theme-system h1,
body.theme-system h2,
body.theme-system .hero-h1,
body.theme-system .section-title{ font-weight:800!important; }
body.theme-system h3,
body.theme-system h4,
body.theme-system .card-title,
body.theme-system .faq-question{ font-weight:700!important; }

body.theme-system .hero-h1{ font-size:46px!important; margin-bottom:18px; }   /* mockup .hero h1 */
body.theme-system .section-title{
  font-size:30px!important;                 /* mockup section-scale h2 */
  max-width:none;                           /* upgrades.css clamps this to 22ch */
  line-height:1.18!important;
}
body.theme-system .card-title{ font-size:17px!important; margin-bottom:10px; } /* mockup .feature-card h3 */
body.theme-system .card-body{ font-size:14px!important; margin:0; }            /* mockup .feature-card p */
body.theme-system .section-body,
body.theme-system .entry-content p{ color:var(--sys-ink-soft)!important; }
body.theme-system .section-body{
  font-size:16.5px!important;               /* mockup body */
  line-height:1.65!important;
  max-width:none;
}

/* EYEBROW — mockup .eyebrow is 12px/.15em/700/blue-600. Deviation logged: the
   COLOUR is blue-700 not blue-600, because blue-600 on white measures 4.19:1 and
   fails AA for 12px text. Same family, one step darker, 5.9:1. */
body.theme-system .section-eyebrow,
body.theme-system .hero-pretitle{
  font-family:var(--sans)!important;
  font-size:12px!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
  font-weight:700!important;
  color:var(--sys-blue-700)!important;
  /* MUST be `auto` on the inline axis, not 0. .section-eyebrow computes
     display:flex, so it is block-level and centres via auto margins — but the
     shorthand `margin:0 0 14px` here silently overrode the auto set by the
     section-head rule below, and the eyebrow rendered flush-left at x=162 while
     its 640px siblings sat centred at x=400. Caught by measuring per-section left
     edges, not by looking. justify-content centres the flex CONTENT too. */
  margin:0 auto 14px!important;
  justify-content:center;
}

/* SECTION HEAD = ONE ALIGNMENT SYSTEM.
   The mockup groups eyebrow + headline + lede into
   `.section-head{max-width:640px;margin:0 auto 52px;text-align:center}`.
   Our markup has no such wrapper — eyebrow/title/body are siblings of the grid —
   so the same result is produced by giving the three of them a shared centred
   640 column while the grid below keeps the full 1180. That is what removes the
   drift: every head element now resolves to ONE column, instead of each inheriting
   a different constrained width. */
body.theme-system .entry-content .section-inner > .section-eyebrow,
body.theme-system .entry-content .section-inner > .section-title,
body.theme-system .entry-content .section-inner > .section-body{
  max-width:var(--sys-head-width);
  margin-inline:auto;
  text-align:center;
}
body.theme-system .entry-content .section-inner > .section-title{ margin-bottom:.5em; }
/* the last head element before a grid carries the 52px gap */
body.theme-system .entry-content .section-title + .grid-2,
body.theme-system .entry-content .section-title + .grid-3,
body.theme-system .entry-content .section-title + .grid-4,
body.theme-system .entry-content .section-body + .grid-2,
body.theme-system .entry-content .section-body + .grid-3,
body.theme-system .entry-content .section-body + .grid-4,
body.theme-system .entry-content .section-title + .faq-list,
body.theme-system .entry-content .section-body + .faq-list{
  margin-top:var(--sys-head-gap);
}

/* ------------------------------------------------------- 4. THE CARD SYSTEM */
body.theme-system .entry-content .grid-2,
body.theme-system .entry-content .grid-3,
body.theme-system .entry-content .grid-4{
  display:grid;
  align-items:stretch;          /* equal heights, kills the stagger */
  width:100%;
}
body.theme-system .entry-content .grid-2{ grid-template-columns:repeat(2,1fr); gap:var(--sys-gap-3); }
body.theme-system .entry-content .grid-3{ grid-template-columns:repeat(3,1fr); gap:var(--sys-gap-3); }
body.theme-system .entry-content .grid-4{ grid-template-columns:repeat(4,1fr); gap:var(--sys-gap-4); }

body.theme-system .entry-content .card{
  background:var(--sys-white);
  border:1px solid var(--sys-line);
  border-radius:var(--sys-radius);
  box-shadow:var(--sys-shadow);
  padding:var(--sys-card-pad);
  height:100%;
  display:flex;
  flex-direction:column;
  min-width:0;                  /* lets tracks size evenly instead of to min-content */
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.theme-system .entry-content .card:hover{
  border-color:rgba(31,120,189,.4);
  box-shadow:var(--sys-shadow-lg);
  transform:translateY(-2px);   /* lift + shadow only — never a ground change */
}
body.theme-system .entry-content .card > *:last-child{ margin-bottom:0; }

/* NUMBERED / JOURNEY CARDS. The mockup styles the number as its own display
   element (.step-num: 40px, weight 700, blue-200, line-height 1, margin 14px).
   Our journey copy carries the number inline in the h3 ("1. Clinical Assessment"),
   so it is lifted out typographically with ::first-letter-style treatment rather
   than by editing content — content is Rachel's doc and is not ours to restructure
   here. Cards in a .grid-4 whose titles begin with a digit get the treatment. */
body.theme-system .entry-content .grid-4 .card .card-title{
  font-size:17px;
}
body.theme-system .entry-content .grid-4 .card .card-title .step-num,
body.theme-system .entry-content .card-title .step-num{
  display:block;
  font-size:40px;
  font-weight:700;
  color:var(--sys-blue-200);
  line-height:1;
  margin-bottom:14px;
  letter-spacing:0;
}

/* ------------------------------------------------------ 5. FAQ — ONE COMPONENT */
body.theme-system .entry-content .faq-list{
  max-width:820px;
  margin-inline:auto;
}
body.theme-system .entry-content .faq-item{
  border:0;
  border-bottom:1px solid var(--sys-line);
  border-radius:0;
  background:none;
  padding:0;
}
body.theme-system .entry-content .faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  padding:22px 4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-family:var(--serif)!important;
  font-size:18px!important;
  font-weight:700!important;
  color:var(--sys-navy)!important;
  line-height:1.35!important;
}
body.theme-system .entry-content .faq-icon{
  font-size:20px;
  color:var(--sys-blue-600);
  transition:transform .2s ease;
  flex-shrink:0;
  font-family:var(--sans);
  font-weight:400;
}
body.theme-system .entry-content .faq-item.open .faq-icon{ transform:rotate(45deg); }
body.theme-system .entry-content .faq-answer{
  padding:0 4px 22px;
  font-size:14.5px!important;
  max-width:680px;
  margin:0;
  color:var(--sys-ink-soft)!important;
}

/* --------------------------------------------- 6. KILL PER-SECTION OVERRIDES */
/* Addition 3 item 4: equivalent elements must not carry bespoke spacing. These are
   the ad-hoc inline-ish overrides that accumulated across rounds. */
body.theme-system .entry-content .grid-2[style],
body.theme-system .entry-content .grid-3[style],
body.theme-system .entry-content .grid-4[style],
body.theme-system .entry-content .faq-list[style]{ margin-top:var(--sys-head-gap)!important; }
body.theme-system .entry-content .section-alt{ background:var(--sys-blue-50); }
body.theme-system .entry-content .section-light{ background:var(--sys-white); }

/* ------------------------------------------------------- 7. RESPONSIVE */
/* mockup breakpoints, verbatim: 980 and 600 */
@media (max-width:980px){
  body.theme-system .entry-content .grid-3,
  body.theme-system .entry-content .grid-4{ grid-template-columns:1fr 1fr; }
  body.theme-system .hero-h1{ font-size:38px; }
  body.theme-system .section-title{ font-size:26px; }
  body.theme-system .entry-content .section{ padding:64px 0; }
}
@media (max-width:600px){
  body.theme-system .entry-content .grid-2,
  body.theme-system .entry-content .grid-3,
  body.theme-system .entry-content .grid-4{ grid-template-columns:1fr; }
  body.theme-system .hero-h1{ font-size:32px; }   /* mockup @600 */
  body.theme-system .section-title{ font-size:24px; }
  body.theme-system .entry-content .section-inner{ padding-inline:22px; }
  body.theme-system .entry-content .card{ padding:26px 22px; }
}

/* ============================================================================
   8. DARK-GROUND CARD VARIANT
   ----------------------------------------------------------------------------
   The card system has to cover BOTH grounds or it is not a system: light-section
   cards (.card in .entry-content) and dark-section cards (the homepage Signature
   Programs, .sp-prog, which sit on --bg2 navy). Same geometry — identical padding,
   gap, radius and TYPE SCALE — with its own token pairings, so the two variants are
   recognisably one component rather than two designs that happen to coexist.
   Light: white ground, --line hairline, ink text, soft shadow.
   Dark : translucent white ground, white-alpha hairline, white/muted inks, and the
          ghost numeral dropped to a low-opacity white so it reads as a watermark
          rather than competing with the card title.
   NOTE the numeral: on light it is solid --blue-200; on dark a solid tint would
   glare, so it becomes white at low alpha — same visual weight, inverted medium. */
body.theme-system .sp-programs{
  padding:var(--sys-section-pad) clamp(1.5rem,5vw,4rem)!important;
}
body.theme-system .sp-programs__grid{
  gap:var(--sys-gap-3)!important;
  align-items:stretch;
}
body.theme-system .sp-prog{
  padding:var(--sys-card-pad)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:var(--sys-radius)!important;
  background:rgba(255,255,255,.04)!important;
  box-shadow:none!important;
  height:100%;
  min-height:0!important;         /* the 340px floor forced uneven visual rhythm */
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}
body.theme-system .sp-prog:hover{
  border-color:rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.07)!important;
  transform:translateY(-2px);
}
/* type scale matched to the light card, inks re-paired for the dark ground */
body.theme-system .sp-prog__tag{
  font-family:var(--sans)!important;
  font-size:12px!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
  font-weight:700!important;
  color:var(--sys-blue-200)!important;   /* the dark-ground partner of blue-700 */
  margin-bottom:14px!important;
}
body.theme-system .sp-prog__name{
  font-family:var(--serif)!important;
  font-weight:700!important;             /* sub-heading tier, matches .card-title */
  font-size:20px!important;              /* mockup .program-card h3 */
  line-height:1.18!important;
  letter-spacing:-.01em!important;
  color:var(--sys-white)!important;
  margin-bottom:10px!important;
}
body.theme-system .sp-prog__desc{
  font-family:var(--sans)!important;
  font-size:14px!important;
  line-height:1.65!important;
  color:rgba(255,255,255,.72)!important;
  margin:0 0 auto!important;
}
/* ghost numeral — watermark, never a competitor for the title */
body.theme-system .sp-prog__num{
  color:rgba(255,255,255,.07)!important;
  opacity:1!important;
}

/* ------------------------------------------- 9. HEAD / GRID COLLISION GUARD */
/* A section head must never be able to clip at the section top or collide with the
   grid beneath it, at ANY width. Three independent guards, because each failed
   somewhere on this project: no clipping container, a real minimum gap that cannot
   collapse, and no negative pull on the first head element. */
body.theme-system .entry-content .section,
body.theme-system .entry-content .section-inner{ overflow:visible!important; }
body.theme-system .entry-content .section-inner > *:first-child{ margin-top:0!important; }
body.theme-system .entry-content .grid-2,
body.theme-system .entry-content .grid-3,
body.theme-system .entry-content .grid-4,
body.theme-system .entry-content .faq-list{ margin-top:var(--sys-head-gap); }

/* ============================================================================
   10. TEAM GRID — About is the page Rachel inspects first, so it is explicitly in
   the verification set. .team-grid / .team-card are a SEPARATE card family from
   .grid-*/.card and were therefore not covered by section 4; the layout gate caught
   it as unequal row widths (412/445 at 980). Same system, same tokens.
   Cards are photo-free per Master Directive F, so the card is pure type. */
body.theme-system .entry-content .team-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:var(--sys-gap-3)!important;
  align-items:stretch!important;
  max-width:none!important;
  margin-top:var(--sys-head-gap);
}
body.theme-system .entry-content .team-card{
  background:var(--sys-white)!important;
  border:1px solid var(--sys-line)!important;
  border-radius:var(--sys-radius)!important;
  box-shadow:var(--sys-shadow)!important;
  padding:var(--sys-card-pad)!important;
  max-width:none!important;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  text-align:center;
}
body.theme-system .entry-content .team-card-name{
  font-family:var(--serif)!important;
  font-weight:700!important;          /* sub-heading tier */
  font-size:17px!important;
  line-height:1.18!important;
  color:var(--sys-navy)!important;
  margin:0 0 4px!important;
}
body.theme-system .entry-content .team-card-title{
  font-family:var(--sans)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
  color:var(--sys-blue-700)!important;
  margin:0 0 12px!important;
}
body.theme-system .entry-content .team-card-bio{
  font-family:var(--sans)!important;
  font-size:14px!important;
  line-height:1.65!important;
  color:var(--sys-ink-soft)!important;
  margin:0!important;
}

/* THE LASER ME TEAM OF EXCELLENCE — sits beneath the team grid (Master F). It was
   hanging left against a centred grid with ad-hoc indents; pinned to the same centred
   640 head column as every other section head so the page reads as one system. */
body.theme-system .entry-content .team-excellence-title{
  font-family:var(--serif)!important;
  font-weight:800!important;
  font-size:20px!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:var(--sys-navy)!important;
  text-align:center!important;
  max-width:var(--sys-head-width)!important;
  margin:var(--sys-head-gap) auto 12px!important;
}
body.theme-system .entry-content .team-excellence-body{
  font-family:var(--sans)!important;
  font-size:16.5px!important;
  line-height:1.65!important;
  color:var(--sys-ink-soft)!important;
  text-align:center!important;
  max-width:var(--sys-head-width)!important;
  margin:0 auto!important;
}
@media (max-width:980px){
  body.theme-system .entry-content .team-grid{ grid-template-columns:1fr 1fr!important; }
}
@media (max-width:600px){
  body.theme-system .entry-content .team-grid{ grid-template-columns:1fr!important; }
}

/* Grid items must FILL their track. Measured at 980 on /about-us/: tracks resolved to
   `445px 445px` while the first .card computed 412.359px — it was not stretching, so a
   two-card row rendered visibly unequal. justify-self defaults to stretch, but a stray
   intrinsic-width/box-sizing inheritance on the blockified group beat it. Pinned
   explicitly rather than chased, and covered by qa-section-layout's per-row width
   assertion so it cannot silently return. */
body.theme-system .entry-content .grid-2 > *,
body.theme-system .entry-content .grid-3 > *,
body.theme-system .entry-content .grid-4 > *,
body.theme-system .entry-content .team-grid > *{
  justify-self:stretch!important;
  align-self:stretch!important;
  width:100%!important;
  box-sizing:border-box!important;
}

/* ============================================================================
   11. DARK-GROUND HEADINGS — REGRESSION GUARD
   Section 3 sets `h1,h2,h3,h4{color:var(--sys-navy)!important}` to beat upgrades.css.
   That is right on light grounds and WRONG on dark ones: it painted navy-on-navy and
   made the .cta-banner headline ("A higher standard of care") disappear entirely.
   Caught on the About before/after capture, not by a scanner — a contrast scan reads
   the ground as dark and the text as dark and simply reports a failure, but nothing
   was scanning this section, and the heading was invisible rather than low-contrast.
   Any ground that is dark by design re-pairs its inks here. Keep this list in sync
   with any new dark section. */
body.theme-system .cta-banner .cta-title,
body.theme-system .cta-banner h1,
body.theme-system .cta-banner h2,
body.theme-system .cta-banner h3,
body.theme-system .sp-cta h1,
body.theme-system .sp-cta h2,
body.theme-system .sp-programs h1,
body.theme-system .sp-programs h2,
body.theme-system .sp-programs h3,
body.theme-system footer h1,
body.theme-system footer h2,
body.theme-system footer h3,
body.theme-system footer h4{
  color:var(--sys-white)!important;
}
body.theme-system .cta-banner .cta-sub,
body.theme-system .cta-banner .cta-note,
body.theme-system .sp-cta p{
  color:rgba(255,255,255,.78)!important;
}
body.theme-system .cta-banner .cta-eyebrow,
body.theme-system .sp-programs .sp-eyebrow{
  color:var(--sys-blue-200)!important;
}
/* the giant ghost word behind the CTA is decorative; keep it a whisper on dark */
body.theme-system .cta-banner-bg{ color:rgba(255,255,255,.05)!important; }