/* ===========================================================
   Alex Fitness Studio — styles.css

   Values below are pulled directly from the live text/color/size
   data extracted out of the real Illustrator file (exported as a
   compressed PDF with "Preserve Illustrator Editing Capabilities"
   on), not eyeballed from a flattened image. Notes:
   - Larken (the real headline font) is served through Adobe Fonts,
     using the embed code from your Creative Cloud web project
     (use.typekit.net/ife6ywu.css, linked in <head>). That kit only
     includes Larken Light + Light Italic (weight 300, normal/italic)
     since that's all this design ever uses — if a heavier weight
     gets used somewhere later, it needs adding to the web project
     first or it'll silently fall back to Georgia.
   - The "alex" logotype is the real vector logo, exported from the
     provided .ai file as an SVG (images/logo.svg) — not a recreation.
   =========================================================== */

:root {
  --maroon: #381212;       /* exact brand ink/fill color, extracted */
  --maroon-deep: #240b0b;  /* derived, for hover states only */
  --paper: #ffffff;        /* real background is pure white, not cream */
  --true-black: #000000;   /* used specifically for the intro italic copy */
  --line: rgba(56, 18, 18, 0.15);

  --font-display: 'larken', Georgia, serif;   /* real font, via Adobe Fonts */
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif; /* real font */

  --max-width: 1100px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { scroll-behavior: auto !important; }
}

/* Site-wide 1440px cap. The whole design (including full-bleed photo
   sections) was built off a fixed 1440pt-wide artboard, so instead of
   letting sections keep stretching past that on big screens, the page
   itself tops out at 1440px and centers, with plain white margin on
   either side beyond that — matching the source file 1:1 instead of
   guessing how far things should stretch. Every existing clamp() below
   was already tuned to hit its max value right around a 1440px
   viewport, so this doesn't require touching them individually. */
body {
  max-width: 1440px;
  margin: 0 auto;
  /* Safety net for the intro section's accent photo, which intentionally
     bleeds past the right edge of the 1440pt artboard in the source file
     — its own container clips it at that edge, but this guards against
     any stray overflow ever causing a horizontal scrollbar. */
  overflow-x: hidden;
  background: var(--paper);
  color: var(--maroon);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, .placeholder-fill {
  max-width: 100%;
  display: block;
}

a { color: inherit; text-decoration: none; }

ul { padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

/* ===== Sticky header =====
   Updated from the latest source file: it now has real "Inquire" text
   in the header itself — top-left (x0≈81pt, ~5.6% in from the edge),
   plain Jost 18pt, not italic — with the logo staying top-right
   (≈118pt wide × 47pt tall). Both extracted directly, not guessed. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 3vw, 44px) clamp(20px, 5vw, 60px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}

.header-inquire {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.25vw, 18px);
  color: var(--maroon);
}
.header-inquire:hover {
  opacity: 0.7;
}

.logo {
  display: block;
}
.logo img {
  width: clamp(82px, 8.2vw, 118px);
  height: auto;
}

/* Real button text ("Work With Me", "Submit Request", "Inquire") is all
   Jost-Regular — normal weight, sentence case, no letter-spacing. */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  border-radius: 2px;
  cursor: pointer;
  border: none;
}
/* ===== Hero ===== */
.hero {
  position: relative;
}
/* Real hero photos run the full 1440pt width at 770pt tall (near-even
   split down the middle), so sizing is driven by that aspect ratio
   rather than viewport height — matches the mockup's proportions at
   any screen size instead of cropping differently per device. */
.hero-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1440 / 770;
  /* No min-height: that was a safety net from when phones fell back to a
     single full-width image, but paired with aspect-ratio it forces the
     box to grow WIDER than the viewport at narrow widths now that both
     images stay side by side everywhere (an aspect-ratio box with a
     min-height taller than its natural width-driven height expands its
     width to keep the ratio, instead of just overriding the height) —
     that was the real cause of the horizontal scrollbar on phones. */
}
.hero-image {
  position: relative;
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(24px, 5vw, 56px);
  color: var(--paper);
  background: linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
}
/* Stretches the headline so its right edge lines up with "Inquire"
   below it, instead of stopping wherever the text naturally ends.
   text-align-last targets this single line specifically (text-align
   alone won't justify a line that's also the last/only one). */
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 7.4vw, 106px);
  line-height: 1.05;
  margin: 0 0 18px;
  width: 100%;
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 25px);
  margin: 0;
}
.hero-inquire {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 25px);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ===== Intro =====
   Redesigned this round: left-aligned text column + a two-photo
   cluster on the right (previously just empty gap between hero and
   the headline). Column split (41.8% / 47.1% of 1440, with ~5.6%
   margins on each side) and every offset below is pulled straight
   from the source file's real coordinates, not eyeballed. Below 820px
   there isn't a sensible way to keep both photos AND fit the text
   comfortably, so the photo cluster is hidden and the text reverts to
   a simple centered block, matching how the hero already simplifies
   on mobile. */
/* ===== Intro =====
   Rebuilt to match the latest source file 1:1: this is not a two-column
   grid, it's a single organic composition on a fixed-proportion stage
   (1440 x 1038.3pt, the real gap between the hero and the bio photo).
   Every element below — both photos, the headline, the italic copy, and
   the button — is placed with an absolute top/left taken directly from
   the source file's coordinates, expressed as % of that stage so it
   scales together at any width. The accent photo intentionally bleeds
   past the right edge of the page in the source file, so its container
   clips at exactly that edge instead of causing horizontal scroll. */
.intro {
  position: relative;
  aspect-ratio: 1440 / 1038.291;
}
.intro-photos {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.intro-photo {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  object-fit: cover;
}
.intro-photo--main {
  top: 12.84%;
  left: 46.56%;
  width: 36.81%;
  aspect-ratio: 530.0 / 396.6;
}
.intro-photo--accent {
  top: 34.76%;
  left: 86.82%;
  width: 15.44%;
  aspect-ratio: 222.3 / 296.2;
}
.intro-text {
  position: absolute;
  inset: 0;
}
.intro-headline {
  position: absolute;
  top: 61.36%;
  left: 5.5%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 5vw, 72px);
  line-height: 1.05;
}
/* Sized + widened just enough that each <br>-separated line below
   (especially the long middle one) stays on its own single line,
   giving exactly the 3 lines from the source copy. Real size in this
   final file is 26pt (was 31pt), and the copy block now sits close
   enough to the button that they share roughly the same row. */
.intro-copy {
  position: absolute;
  top: 77.9%;
  left: 5.5%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(12px, 1.806vw, 26px);
  /* Real line pitch in the source file is 31.2pt on 26pt text — a tight
     1.2 ratio, not the page's default 1.6 — so the <br> between these two
     lines sits close together, making the gap before the tagline below
     read as a real paragraph break instead of just another line. */
  line-height: 1.2;
  color: var(--true-black);
}
/* The third line is its own paragraph-break-style tagline in the source
   file (a visible gap before it, roughly double the line gap above it),
   so it's a second .intro-copy paragraph with its own top instead of a
   third <span> crammed into the same block. */
.intro-copy--tagline {
  top: 86.91%;
}
.intro-copy span { white-space: nowrap; }
.intro-text .btn-primary {
  position: absolute;
  top: 87.58%;
  /* Aligned to the same right margin used everywhere else on the page
     (header, gallery, footer, etc.) rather than a one-off inset. */
  right: clamp(20px, 5.6vw, 80px);
}
.btn-primary {
  /* em-based so the box scales with the text instead of staying a fixed
     size — matters on mobile, where the font-size below is reduced to
     match the copy above it but the box needs to shrink right along
     with it instead of looking oversized. */
  padding: 0.78em 1.89em;
  background: var(--maroon);
  color: var(--paper);
  font-size: 18px;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--maroon-deep); }

@media (max-width: 820px) {
  .intro {
    aspect-ratio: auto;
    text-align: left;
    padding: clamp(56px, 14.4vw, 177px) 24px clamp(48px, 9.7vw, 139px);
  }
  .intro-photos { display: none; }
  /* Headline + copy stay left-aligned (same as desktop); the button is
     pulled to the right edge via align-self instead of the whole block
     being centered — mirrors desktop's "text on the left, button
     anchored right" composition instead of a generic centered mobile
     stack. */
  .intro-text {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .intro-headline,
  .intro-copy,
  .intro-text .btn-primary {
    position: static;
    margin: 0;
  }
  .intro-text .btn-primary {
    align-self: flex-end;
    /* Matches .intro-copy's own font-size exactly at this breakpoint
       (and the one below) so the button's text reads as part of the
       same paragraph rhythm instead of a conspicuously larger fixed
       18px — the box's padding is em-based (see .btn-primary) so it
       scales down right along with it. */
    font-size: clamp(12px, 1.806vw, 26px);
  }
}

/* ===== Bio =====
   The real photo has a wide band of empty grey studio background built
   into the shot itself (the subject sits in the left ~50%). Source data:
   image runs full-bleed 1440x1051 (ratio 1.37), and the heading/copy sit
   at left 52% / top 19% of that image, inside the empty area — so the
   text lives directly on the photo instead of a separate column. */
.bio {
  position: relative;
}
.bio-photo {
  width: 100%;
  aspect-ratio: 1440 / 1051;
  object-fit: cover;
}
.bio-overlay {
  position: absolute;
  /* Nudged up 30px (at the 1440px/1051pt reference size) from the
     source file's exact 14.75% per a direct request after reviewing a
     preview — was sitting slightly low against the heading. */
  top: 11.9%;
  left: 49.43%;
  right: 6.87%;
}
.section-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3.6vw, 46px);
  color: var(--maroon);
  margin: 0 0 20px;
}
/* The real source file sets this copy in a tight ~1.2 leading (21.6pt
   line pitch on 18pt text), noticeably tighter than the page's default
   1.6 body line-height — needed here since the overlay now holds 3 full
   paragraphs and has to stay clear of the subject in the photo below.
   Font-size is also scaled with viewport width (same 1.25vw rate as the
   column's own width) rather than left fixed at 18px, so the text block
   and the photo it sits on shrink together at tablet widths instead of
   the text overflowing past the photo's bottom edge as the viewport
   narrows. */
.bio-text p,
.bio-closing {
  font-size: clamp(13px, 1.25vw, 18px);
  line-height: 1.3;
  margin-bottom: 14px;
}
.bio-closing {
  margin-bottom: 0;
}
@media (max-width: 1000px) {
  /* Text actually overlaid on the photo, matching the second mockup
     (AlexFitnessStudio_Bio_MobileTall.pdf) for real this time — the
     previous round backed off into a white-background card instead,
     which wasn't what was asked for. Using the full image this time:
     pdfimages pulled the embedded photo straight out of the PDF at its
     real placed resolution (2880x6345) — confirmed via its exact
     placement in the PDF (x0=0,x1=2880, no horizontal scale; height
     6345 matching the source 1:1) that Illustrator isn't resizing it
     at all, just using the page itself as a crop window over one piece
     of this tall file. images/bio-mobile.jpg is now that full 2880x6345
     photo (was a tight 1600x1162 crop in the previous round — wrong
     file was still wired up at first this round too, which is why an
     early test showed only a sliver of her leg blown up full-bleed;
     caught it by checking the element's actual naturalWidth/Height).
     Shared rules below (both tiers): heading upright not italic (flat
     font matrix in the PDF, same check as the first mockup), ink color
     inherits --maroon already. Paragraphs 1-2 flow together in one
     block (margin-bottom: 1.2em between them, matching the PDF's
     one-line-height gap) rather than being pinned at independent fixed
     positions, so the block can grow safely if real text wraps taller
     than the PDF's lines did. Paragraph 3 lives in its own element
     (.bio-closing, sibling of .bio-text — see the HTML and the shared
     base rule above it) so it can be positioned independently without
     nesting inside the first block's positioned box. Desktop is
     unaffected by that split: nothing above 1000px positions it
     separately, so it still just flows in the same column.
     The two tiers below exist because this copy (two full paragraphs)
     doesn't fit above her at true phone widths using the PDF's own
     crop — checked for real, not assumed: with the 2880/3733.7 ratio
     the PDF uses, the text block runs past where she starts until
     about 530px wide. Below that, showing more of the tall source
     (ending at its native, uncropped 2880/6345 ratio — more studio
     floor above and below her, exactly what the extra-tall extension
     was for) buys enough real pixels for the floor-sized text to clear
     her, verified with a 64px margin at the worst case, 320px. From
     531px up there's already natural room, so it switches back to the
     PDF's own tighter crop and its exact measured positions. */
  .bio-overlay {
    /* Neutralized: the desktop rule above makes this position:absolute
       with its own top/left/right, which would otherwise become the
       containing block for the children below and throw off their
       percentages (they need .bio's full box, not a desktop-sized
       sub-box inside it). */
    position: static;
  }
  .section-script {
    position: absolute;
    font-style: normal;
    margin: 0;
  }
  .bio-text {
    position: absolute;
  }
  .bio-text p:first-child {
    margin: 0 0 1.2em;
  }
  .bio-text p:last-child {
    margin: 0;
  }
  .bio-closing {
    position: absolute;
    text-align: right;
  }
}

@media (max-width: 650px) {
  /* Narrow tier: full uncropped photo (2880/6345, its native ratio —
     object-fit:cover can't crop when the box ratio already matches the
     image exactly) for maximum clear room, text pinned with small
     fixed offsets instead of PDF percentages since those were
     calibrated for the much shorter 3733.7-tall crop and would waste
     space scaling up with this much taller one. Column widened to a
     5% right inset (PDF's own column was tuned for a much wider
     reference canvas) and the floor size nudged from 13px to 11.5px —
     both needed to close the last ~15px of a ~220px shortfall at
     320px; verified margin stays positive (64px+) at every width in
     this tier after both changes. */
  /* Cropped from the bottom at 72.5% of the full photo's height (the
     line the client drew on a phone screenshot, ~9% of the image below
     her feet) instead of showing the whole 2880/6345 frame. */
  .bio-photo {
    width: 100%;
    aspect-ratio: 2880 / 4600;
    object-fit: cover;
    object-position: top;
  }
  /* All three paragraphs now live in ONE flowing left-aligned column (the
     overlay itself is the positioned box, 70px from the top, same left and
     right insets as before), so the closing paragraph follows the second
     with exactly the same gap that separates the first two (1.2em), and
     the heading hangs 50px above the column (= the old 20px top). */
  /* Heading + the three paragraphs are now one block centred (flex)
     between the top of the photo and the top of her head (64.97% of the
     photo's height), so the grey space above "Get to know Alex" equals
     the grey space between the last paragraph and her head, at every
     width. padding-bottom compensates for the heading's taller line box
     so the *visible* gaps match, not just the boxes. */
  .bio-overlay {
    position: absolute;
    top: 0;
    bottom: 35.03%;
    left: 6.77%;
    right: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 1.5vw;
  }
  .section-script {
    position: static;
    margin: 0 0 max(9px, calc(5vw - 18px));
    font-size: clamp(20px, 4.956vw, 56px);
  }
  .bio-text {
    position: static;
  }
  .bio-text p,
  .bio-closing {
    font-size: clamp(11.5px, 1.939vw, 20px);
    line-height: 1.2;
  }
  .bio-closing {
    position: static;
    margin-top: 1.2em;
    text-align: left;
  }
}

/* Small phones (iPhone SE/mini 375px, many Androids 360px, 320px): with
   all three paragraphs in one column the text runs down into her head
   (measured with real wrapping: it starts to touch around ~355px and
   overlaps below ~350px), and the photo can't be extended without a
   taller source file. So here the layout goes back to the first two
   paragraphs overlaid on the wall and the closing paragraph, left
   aligned, just under the photo. */
@media (max-width: 355px) {
  .bio-overlay {
    position: static;
    display: block;
    padding-bottom: 0;
  }
  .section-script {
    position: absolute;
    margin: 0;
    top: 20px;
    left: 6.77%;
    right: 5%;
  }
  .bio-text {
    position: absolute;
    top: 70px;
    left: 6.77%;
    right: 5%;
  }
  .bio-closing {
    margin-top: 0;
    padding: 20px 5% 28px 6.77%;
  }
}

@media (min-width: 651px) and (max-width: 1000px) {
  /* Wide tier: the PDF's own crop and exact measured positions —
     already has natural clearance from here up (verified, ~530px is
     the real crossover, not a round number). Heading: top 10.57%, left
     6.77%, size 142.73pt/2880 -> 4.956vw. Paragraph block starts at
     its own top (17.34%) — roughly 30% of the photo's height of clear
     room before she starts, checked against her real position in the
     source file. Body size 55.85pt/2880 -> 1.939vw. Paragraph 3 at its
     own PDF position (top 81.90%, right-aligned, right inset 5.54%,
     left bound loose at 25% — its widest line only reached x0 29.4%). */
  .bio-photo {
    width: 100%;
    aspect-ratio: 2880 / 3733.7;
    object-fit: cover;
    object-position: center 53.2%;
  }
  .section-script {
    top: 10.57%;
    left: 6.77%;
    right: 25%;
    font-size: clamp(20px, 4.956vw, 56px);
  }
  .bio-text {
    top: 17.34%;
    left: 6.77%;
    right: 25%;
  }
  .bio-text p,
  .bio-closing {
    font-size: clamp(13px, 1.939vw, 20px);
    line-height: 1.2;
  }
  .bio-closing {
    top: 81.9%;
    left: 25%;
    right: 5.54%;
  }
}

/* ===== Quick facts =====
   Rebuilt to match the latest source file: the 5 facts are a plain
   left-aligned vertical list now (not scattered — that was last round's
   read of an earlier file), and "Quick Facts" is a single wordmark set
   sideways down the right edge. Section height (497.5pt) and every
   position below is a % of that box, taken straight from the source
   file. The wordmark is real live text — normal upright "Quick" /
   "Facts" lines at their real ~88pt size, rotated 90° as one block via
   transform — which is what actually reproduces a sideways rotated text
   run (last round's per-letter-upright stack was a misread of the same
   data). Below 820px this doesn't have room to stay legible, so it's
   swapped for the original simple single-line version. */
.quick-facts {
  position: relative;
  aspect-ratio: 1440 / 497.5;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.quick-facts-list .fact {
  position: absolute;
  left: 16.67%;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(12px, 1.25vw, 18px);
}
.fact-1 { top: 25.37%; }
.fact-2 { top: 38.39%; }
.fact-3 { top: 51.42%; }
.fact-4 { top: 64.44%; }
.fact-5 { top: 77.47%; }

.quick-facts-mark {
  position: absolute;
  top: 51.07%;
  left: 88.89%;
  transform: translate(-50%, -50%) rotate(90deg);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1;
  color: var(--maroon);
  /* One line now (was two stacked lines at 6.11vw). Scaled down so the
     single rotated line still sits comfortably inside the section's
     height instead of running edge to edge. */
  font-size: clamp(28px, 4.6vw, 66px);
}

.facts-row-mobile {
  display: none;
}

@media (max-width: 820px) {
  /* Re-does the mobile version of this section to actually keep the
     real "Quick Facts" wordmark sideways (per direct feedback — the
     plain upright heading from the last round was a stand-in, not the
     real design), with the 5 facts as a left-aligned stacked list next
     to it instead of the old centered pipe-separated line. The absolute
     %-based positioning from the desktop layout only works on that
     fixed wide/short aspect ratio, so mobile switches to a simple flex
     row instead: list on the left in normal flow (so long facts can
     wrap instead of forcing a nowrap horizontal scroll), wordmark
     pinned to the right edge and vertically centered against it. */
  .quick-facts {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 4vw, 32px);
    padding: clamp(40px, 8.7vw, 125px) 24px clamp(40px, 8.7vw, 125px);
  }
  .quick-facts-list {
    display: block;
    position: static;
  }
  .quick-facts-list .fact {
    position: static;
    display: block;
    white-space: normal;
    text-align: left;
    margin: 0 0 16px;
    font-size: clamp(13px, 3.1vw, 18px);
  }
  .quick-facts-list .fact:last-child {
    margin-bottom: 0;
  }
  .quick-facts-mark {
    display: block;
    position: static;
    flex-shrink: 0;
    /* vertical-rl turns the line sideways the same way rotate(90deg) did
       (top-to-bottom, clockwise) but, unlike a transform, makes the box
       itself tall and narrow — so the one-line wordmark takes up a
       narrow column on the right instead of a wide invisible box that
       would squeeze the facts list. */
    transform: none;
    writing-mode: vertical-rl;
    font-size: clamp(22px, 7vw, 32px);
  }
  .facts-row-mobile {
    display: none;
  }
}

/* ===== Services =====
   Real inset from the top of the maroon panel to the "Services" heading
   was 145pt (~10vw); bottom inset after the last line was 231pt (~16vw). */
.services {
  background: var(--maroon);
  color: var(--paper);
  /* Bottom inset shortened from 231pt to the new source file's ~149pt
     now that the "What's Coming" block is gone and the panel ends right
     after Virtual Coaching's bullet list. */
  padding: clamp(48px, 10vw, 145px) clamp(20px, 6vw, 80px) clamp(48px, 10.35vw, 149px);
}
.services-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 6.4vw, 92px);
  margin: 0 0 48px;
}
.service-block {
  max-width: 640px;
  /* Real gap between the two remaining blocks is ~137pt now that
     there's no third block pulling this down to a generic 48px. */
  margin-bottom: clamp(32px, 9.5vw, 137px);
}
.service-block:last-child {
  margin-bottom: 0;
}
.service-block h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 31px);
  margin: 0 0 14px;
  color: var(--paper);
}
/* Short italic lead-in line under each service's name — real font
   is italic Jost at body size, not the display font used for h3. */
.service-tagline {
  font-style: italic;
  margin: 0 0 14px;
}
.service-block p, .service-block li {
  color: var(--paper);
}

/* ===== Gallery =====
   Back to just the 3 photos (edge-bleed strips removed per the latest
   source file). Real gap between photos is ~36pt; the ~318pt gap above
   (from the maroon Services panel) is much bigger than the ~295pt gap
   below (into the contact section, which supplies its own top padding
   to match), so top/bottom padding here are no longer symmetric. Each
   photo keeps its own natural aspect ratio at a shared height rather
   than a forced crop. */
.gallery {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: clamp(12px, 2.5vw, 36px);
  padding: clamp(48px, 22vw, 317px) clamp(16px, 4vw, 56px) clamp(20px, 3vw, 40px);
}
.gallery-image {
  height: clamp(192px, 37.3vw, 537px);
  width: auto;
  max-width: 100%;
  object-fit: cover;
}

/* ===== Contact =====
   Rebuilt 1:1 from the latest source file. This isn't a centered, evenly
   -split two-column block — it runs the full page width at the same
   side padding as every other section, and the real column widths are
   562pt (info: heading, copy, submit button) to 718pt (the form
   fields), not a near-even split. Real gap from the bottom of the
   gallery to the start of this section is ~296pt (~20.6vw) — the
   biggest breathing room on the page, right before the final CTA. */
/* Single row now — "submit" is no longer its own grid row (see below for
   why), just "intro" next to "form". */
.contact {
  display: grid;
  grid-template-columns: 562fr 718fr;
  grid-template-areas: "intro form";
  align-content: start;
  gap: 0 clamp(24px, 4vw, 58px);
  padding: clamp(56px, 20.6vw, 296px) clamp(20px, 5.6vw, 80px) clamp(64px, 10vw, 120px);
}
.contact-intro { grid-area: intro; }
.contact-form { grid-area: form; }
/* The button now lives inside .contact-intro in the markup (right after
   the paragraph) instead of being its own grid row. A separate "submit"
   row that spans under a "form" column taller than it needs forces the
   grid to stretch that row to fit the much-taller form column (CSS Grid
   distributes a spanning item's extra height across the auto rows it
   spans) — which was quietly pushing the button hundreds of pixels
   below the paragraph instead of the real ~183.7pt gap. Nesting it in
   normal flow after the paragraph sidesteps that entirely: its
   margin-top is a pure, exact gap off the paragraph's real bottom, with
   zero coupling to how tall the form column happens to be. */
.contact .btn-submit {
  margin-top: clamp(36px, 12.76vw, 183.74px);
}
/* Vertical rhythm of this column taken directly from the source file:
   ~145pt from the top of the column to the heading (unchanged), and now
   ~118.7pt from the heading down to the longer, rewritten paragraph
   (was 129pt). */
.contact-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.05;
  margin: clamp(24px, 10.06vw, 145px) 0 clamp(24px, 8.24vw, 118.7px);
}
.contact-title em {
  font-style: italic;
}
.contact-intro p {
  margin: 0;
  max-width: 340px;
  /* Real line pitch here is 21.6pt on 18pt text (1.2 ratio) rather than
     the page's default 1.6 — matters doubly here since the submit
     button's margin-top below is measured as an exact gap from this
     paragraph's real last-line position, so a looser line-height would
     both look wrong and throw the button off its real spot. */
  line-height: 1.2;
}

/* Fields are underlined only (no boxes/background), labels in the body
   font, and values/placeholders set in italic Larken — all matching the
   source file exactly, including the real 18px size (this was
   previously stepped down to 15px; restored here since the wider,
   full-width right column has the room for it now). */
.contact-form { display: flex; flex-direction: column; gap: clamp(24px, 3.5vw, 50px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.25vw, 18px);
  color: var(--maroon);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.25vw, 18px);
  padding: 6px 2px;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--maroon);
  resize: none;
}
/* The source file shows selects as plain underlined text, no dropdown
   caret — matching that exactly rather than the native browser chrome. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--maroon);
  opacity: 0.7;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--maroon);
}
.hidden-field { position: absolute; left: -9999px; }

.btn-submit {
  align-self: flex-start;
  padding: 14px 30px;
  background: var(--maroon);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 18px;
}
.btn-submit:hover { background: var(--maroon-deep); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.form-status {
  font-size: 14px;
  min-height: 1.2em;
}
.form-status.success { color: #2e6b46; }
.form-status.error { color: #a3352b; }

@media (max-width: 820px) {
  /* The button needs to visually land after every form field here, even
     though it now lives in the markup right after the intro paragraph.
     Dissolving .contact-intro's own box with display:contents promotes
     its children (the heading, paragraph, and button) to be direct
     flex items of .contact itself, alongside .contact-form — so each
     one can be given an explicit order, independent of where it
     actually sits in the HTML. */
  .contact {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .contact-intro {
    display: contents;
  }
  .contact-title {
    order: 1;
    margin-top: 0;
    /* The desktop margin-bottom (up to 118.7px) was stacking on top of
       the flex gap below, pulling the paragraph noticeably closer to
       "First Name" than to the heading above it instead of sitting
       evenly between them. Zeroing it lets the gap alone set the
       spacing, evenly, on both sides of the paragraph. */
    margin-bottom: 0;
  }
  .contact-intro p {
    order: 2;
  }
  .contact-form {
    order: 3;
  }
  .contact .btn-submit {
    order: 4;
    margin-top: 0;
  }
}

/* ===== Footer =====
   Redesigned this round: dark maroon background (was white), the logo
   recolored light lavender (images/logo-footer.svg — a copy of the
   real logo with its fill swapped, since the plain maroon logo would
   be invisible on this background) shown large on the left, and the
   links stacked into two right-aligned columns instead of one row. */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  background: var(--maroon);
  color: var(--paper);
  padding: clamp(32px, 6vw, 86px) clamp(20px, 5.6vw, 80px);
}
.footer-logo { display: block; }
.footer-logo img {
  width: clamp(140px, 18vw, 260px);
  height: auto;
}
/* Stacked into a single right-aligned column (Instagram, TikTok, then a
   slightly bigger gap, then the copyright + Terms line) rather than two
   side-by-side columns — matches the real source file, where all 4 lines
   sit directly above one another at the same right edge. */
.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
  /* When the footer wraps (logo on one row, links on the next — which is
     what happens on a phone), a lone wrapped flex item sits at the left
     edge, so the links were right-aligned only relative to each other and
     floated mid-screen. margin-left:auto pins the whole block to the
     right edge of the page at every width. */
  margin-left: auto;
}
.footer-social,
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.footer-nav a,
.footer-copy {
  color: var(--paper);
}
.footer-nav a:hover { opacity: 0.7; }
.footer-copy { margin: 0; }

/* Previously stacked into a single left-aligned column below 480px —
   per direct feedback the footer should keep the logo on the left and
   the nav/social/legal content right-aligned at every width, same as
   desktop, instead of dropping to a stacked layout on phones. The row
   below just gives the two sides a little more room to wrap onto their
   own lines gracefully if a very narrow phone ever needs it. */
@media (max-width: 480px) {
  .site-footer {
    gap: 16px 24px;
  }
}

/* ===== Legal page ===== */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 120px;
}
.legal h1 {
  font-family: var(--font-display);
  font-weight: 300;
  margin-bottom: 8px;
}
.legal-updated {
  opacity: 0.6;
  margin-top: 0;
  margin-bottom: 40px;
}
.legal h2 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  margin: 36px 0 10px;
}
.legal p {
  margin: 0 0 16px;
}
.legal-disclaimer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  opacity: 0.75;
}
.legal-note {
  font-size: 15px;
  opacity: 0.85;
  background: rgba(56, 18, 18, 0.05);
  border-left: 2px solid var(--line);
  padding: 14px 18px;
  margin: 0 0 16px;
}

/* ===== Responsive ===== */
@media (max-width: 820px) {
  /* Both hero images now stay side by side at every width (same 2-column
     split as desktop) instead of dropping to one full-width image with
     the portrait hidden — per direct feedback, mobile should show Alex
     on the left and the texture photo on the right just like desktop. */
  .bio { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* "Strength Training for Women" needs to stay on one line per direct
   feedback, instead of the previous fallback that let it wrap to 2
   lines with a bigger floor size. Found the real single-line ceiling
   by binary search against the actual rendered text (not estimated):
   at the narrowest width tested (320px, 272px of available column
   width inside .hero-overlay's padding) the nowrapped title's true
   natural width tops out a touch above 23px; at 600px it's just under
   46px. 6.5vw stays safely under that curve at every width in between
   (roughly a 10-15% margin), with a 21px floor as backup. Restored
   nowrap + the base rule's text-align-last:justify so the single line
   still stretches to align its right edge with "Inquire" below it,
   same as desktop. Font measurement here used the fallback serif
   (Larken/Typekit can't load from this sandbox) — worth a quick check
   on a real phone once deployed in case the real Larken is wider.
   .intro-headline now uses the exact same clamp so "Strong now." /
   "Stronger tomorrow." reads as the same type scale as the hero
   headline, per direct feedback to unify them — safe to reuse as-is
   since both of its lines are shorter than the hero title's. */
@media (max-width: 600px) {
  .hero-title {
    font-size: clamp(21px, 6.5vw, 106px);
  }
  .intro-headline {
    white-space: normal;
    font-size: clamp(21px, 6.5vw, 106px);
  }
  /* Was clamp(17px, 4.6vw, 30px) — at a 600px viewport that was already
     hitting ~27.6px, bigger than this paragraph ever gets on desktop
     (26px, and only at the full 1440px width). Scaled back so it reads
     at roughly the same relative size on a phone as it does on the full
     site instead of looking oversized against the viewport. */
  .intro-copy {
    font-size: clamp(15px, 3.2vw, 19px);
  }
  .intro-copy span {
    white-space: normal;
  }
  /* The closing line ("For women who want to look and feel better at
     40, 50, and 60...") reads as a tagline, not a continuation of the
     paragraph above it — sized down to match ordinary body copy
     elsewhere on the page (same scale as .bio-text / field labels)
     while staying italic like the rest of the intro copy. */
  .intro-copy--tagline {
    font-size: clamp(14px, 1.25vw, 18px);
  }
  .intro-text .btn-primary {
    /* Matches .intro-copy's new size, same rule as before. */
    font-size: clamp(15px, 3.2vw, 19px);
  }
}

/* At phone widths (iPhone 12 and similar, ~375-430px) the gallery's
   normal gap/padding leave only enough room for 2 of the 3 photos per
   row, so the third wraps to its own line. Tightening gap and padding
   specifically in this range — with a height formula solved so all 3
   photos + 2 gaps + side padding always add up to less than 100% of
   the viewport, with a few px of safety margin against sub-pixel
   rounding — keeps them on a single row instead. */
@media (max-width: 480px) {
  .gallery {
    gap: 8px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
    /* Was a flat 14px on every side, which also flattened the top gap
       into the maroon Services panel to almost nothing. Rebuilt so the
       gap above the row is always exactly equal to the gap below it
       (gallery's own 14px bottom padding + .contact's top padding) per
       direct feedback, instead of two unrelated numbers that happened
       to look uneven. */
    padding-top: calc(clamp(56px, 20.6vw, 296px) + 14px);
  }
  .gallery-image {
    height: clamp(130px, calc(49.5vw - 24px), 220px);
  }
}

/* ===== Unified body-copy size =====
   One shared size for body copy and footer text, matching the bio paragraph
   at every width: the bio's own clamp() at desktop, and its two phone/tablet
   tiers (see the bio media queries above). Kept in a single variable at the
   end of the file so it overrides the older per-section sizes and can be
   changed in exactly one place. Display headlines, the hero, the "Inquire"
   link and the quick-facts row keep their own sizes. */
:root { --body-size: clamp(13px, 1.25vw, 18px); }
@media (max-width: 650px) {
  :root { --body-size: clamp(11.5px, 1.939vw, 20px); }
}
@media (min-width: 651px) and (max-width: 1000px) {
  :root { --body-size: clamp(13px, 1.939vw, 20px); }
}

.service-block p,
.service-block li,
.service-tagline,
.contact-intro p,
.field label,
.field input,
.field select,
.field textarea,
.footer-nav a,
.footer-copy,
.legal p,
.legal li,
.legal-note {
  font-size: var(--body-size);
}

/* Intro paragraph keeps its larger editorial size on desktop; from tablet
   down it joins the shared size. The button text is kept identical to the
   paragraph's, as before. */
@media (max-width: 820px) {
  .intro-copy,
  .intro-copy--tagline,
  .intro-text .btn-primary {
    font-size: var(--body-size);
  }
}

/* ===== Hero text + submit button match (this round) =====
   1) On phones/tablets the hero's "Coaching for longevity" and "Inquire"
      use the same shared size as the intro paragraph below
      ("NYC-based personal training…"), and the whole headline+subline
      group sits tighter and lower in the frame (smaller gap between the
      two, less bottom padding) so Alex's face is no longer behind it.
   2) The Submit Request button is built exactly like the "Work With Me"
      button — same em-based padding, same font size at every width — so
      the two always match. */
@media (max-width: 820px) {
  .hero-tagline,
  .hero-inquire {
    font-size: var(--body-size);
  }
  .hero-overlay {
    padding-bottom: clamp(8px, 2.5vw, 20px);
  }
  .hero-title {
    margin-bottom: clamp(3px, 1.2vw, 10px);
  }
  .hero-meta {
    gap: 6px 12px;
  }
}
.btn-submit {
  padding: 0.78em 1.89em;
  font-size: 18px;
  /* <button> defaults to line-height:normal while the "Work With Me" link
     inherits the page's 1.6, which made the submit button visibly shorter
     at the same padding and font size. */
  line-height: inherit;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .btn-submit {
    font-size: var(--body-size);
  }
}

/* ===== Taller hero panel on phones/tablets =====
   Per direct feedback, the top image panel runs ~16% taller (frame ratio
   1440:770 -> 1440:894), reaching the line the client drew on a phone
   screenshot (measured: 100px of 626px at a 1170px-wide capture). The
   extra height comes out of the white gap above "Strong now.", not out of
   the content below, so the headline stays exactly where it was: the
   intro's top padding drops by the same amount (8.6vw), so nothing below
   the hero moves. Both photos are cropped on the sides to fit (object-fit:
   cover), which keeps Alex fully in frame. */
@media (max-width: 820px) {
  .hero-images {
    aspect-ratio: 1440 / 894;
  }
  .intro {
    padding-top: calc(clamp(56px, 14.4vw, 177px) - 8.6vw);
  }
}

/* ===== Spacing under the hero + matching bio heading size ===== */
/* The white gap between the two hero photos and "Strong now." is doubled
   on phones/tablets: it measured about 6.8vw of visible space (padding
   5.8vw plus the headline's own top leading), so 6.8vw is added to the
   padding. Everything below shifts down by the same amount. */
@media (max-width: 820px) {
  .intro {
    padding-top: calc(clamp(56px, 14.4vw, 177px) - 8.6vw + 6.8vw);
  }
}
/* "Get to know Alex" uses the exact same size as "Strong now." at every
   width up to 1000px (the same clamp()s as .intro-headline above). */
@media (max-width: 1000px) {
  .section-script {
    font-size: clamp(24px, 5vw, 72px);
  }
}
@media (max-width: 600px) {
  .section-script {
    font-size: clamp(21px, 6.5vw, 106px);
  }
}

/* Phone: "NYC-based personal training..." was two hard-broken lines
   (<br> after "strength,"), which left "strength," stranded alone on its
   own line. Below 600px the <br> is dropped so the two sentences flow as
   one paragraph, and text-wrap: balance evens out the line lengths. */
@media (max-width: 600px) {
  .intro-copy br { display: none; }
  .intro-copy:not(.intro-copy--tagline) { text-wrap: balance; }
}

/* ===== Intro copy on two lines (phones) + matched spacing around the intro ===== */
/* "NYC-based personal training..." as exactly two lines on phones. The
   longest line ("...build strength,") measures about 30.6em wide in Larken
   Italic (calibrated from a real phone screenshot), so on 361-600px wide
   screens the size is capped so that line always fits with a little to
   spare (it may use a few px of the right gutter; the copy is ragged-right
   so that is invisible). Above ~410px the normal body size already fits
   and nothing changes. At 360px and below it falls back to the earlier
   balanced 3-line wrap instead of shrinking the type any further. */
@media (min-width: 361px) and (max-width: 600px) {
  .intro-copy:not(.intro-copy--tagline) br { display: inline; }
  .intro-copy:not(.intro-copy--tagline) {
    font-size: min(var(--body-size), calc((100vw - 34px) / 32.5));
  }
  .intro-copy:not(.intro-copy--tagline) span { white-space: nowrap; }
}
/* The white space between the hero photos and "Strong now." now equals the
   space between the last line of the intro copy ("...they did at 30.") and
   the start of the bio photo. That lower distance is: the 20px flex gap +
   the Work With Me button (padding .78em x2 + 1.6 line-height = 3.16em)
   + the section's bottom padding; the -3px offsets the difference between
   the headline's and the paragraph's leading so the visible gaps match. */
@media (max-width: 820px) {
  .intro {
    padding-top: calc(clamp(48px, 9.7vw, 139px) + 20px + 3.16 * var(--body-size) - 3px);
  }
}