/* ==========================================================================
   sections.css — per-band layout, driven off measurements taken from the
   reference exports (see design-spec/SUMMARY.md and tools/measure.py).

   All absolute values are in rem so they scale with the fluid root: the
   numbers below are the comp's pixel values at its native 1440px / 16px root.
   ========================================================================== */

/* ==========================================================================
   1 — HERO
   Measured: canvas 1440x793 · logo 82,32 299x219 · h1 cap-top y291,
   74px/66px Times · scrim y490 h302 · sub-line y704 · doctors x747 y213
   ========================================================================== */

.hero {
  position: relative;
  height: 49.5625rem;                        /* 793px */
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Base plate. `cover` keeps the sunset and the building balanced as the
   viewport grows from 1366 to 1920; object-position holds the sun. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Foreground physicians — RGBA cutout, anchored bottom-right so the
   composition survives every crop. */
.hero__doctors {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 92%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom right;
}

/* Rotated "MEDICAL-LEGAL / EXCELLENCE / …" mark, 54% opacity in the comp.
   The supplied PNG already has the -18 deg rotation baked in, so no CSS
   transform is applied here — rotating again would compound it.
   Decorative only; the same words are exposed once as screen-reader text. */
.hero__badge {
  position: absolute;
  top: 10.34%;                               /* measured y82 */
  right: 1.25%;                              /* measured x1246 */
  width: 12.22%;                             /* 176px of 1440 */
  height: auto;
  opacity: 0.541;
}

/* Dark gradient rising from the bottom edge. The comp's overlay layer is
   302px tall and already near-opaque by two thirds of the way up. */
.hero__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 38.18%;                            /* 302 / 793 */
  background: linear-gradient(
    to bottom,
    rgba(var(--scrim-navy), 0) 0%,
    rgba(var(--scrim-navy), 0) 18%,
    rgba(var(--scrim-navy), 0.30) 38%,
    rgba(var(--scrim-navy), 0.74) 58%,
    rgba(var(--scrim-navy), 0.93) 78%,
    rgba(var(--scrim-navy), 0.97) 100%
  );
}

/* Content sits in a rail so it tracks the centred composition, while the
   media runs full bleed. */
.hero__body {
  position: relative;
  z-index: 2;
  height: 100%;
  pointer-events: none;
}

.hero__body > * {
  pointer-events: auto;
}

.hero__title {
  position: absolute;
  left: 0.4375rem;                           /* measured x87 vs rail x80 */
  top: 17.625rem;                            /* line-box top; cap-top = 291 */
  /* The <br> tags in the markup own the line breaks, so this only needs to
     be wide enough not to force an extra wrap. Trajan is a wide inscriptional
     face: at the old 74px setting "Medical-Legal Practice" needed ~750px and
     the 46rem column folded it onto a fourth line. 50rem clears it at 48px
     with room to spare. */
  max-width: 50rem;
  font-family: var(--font-heading);
  font-variant-caps: small-caps;
  font-size: var(--fs-hero);                 /* 48px — was 74px */
  font-weight: 400;
  line-height: var(--lh-hero);
  letter-spacing: -0.02em;
  /* Black, not white: on desktop the headline sits over open sky (mean
     luminance ~187) and the dark ink carries far better than a glow.
     Below the tablet breakpoint the hero scrim deepens to ~70% navy
     (luminance ~32), where black would be unreadable — so the stacked
     layout puts the headline back to white with its glow. */
  color: #000000;
}

.hero__actions {
  position: absolute;
  left: 0;
  top: 31.5625rem;                           /* 505px — pill top in the comp */
  display: flex;
  align-items: center;
  gap: 1.375rem;
}

.hero__sub {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 3.9rem;                            /* tuned: box-top lands at y694 */
  transform: translateX(-50%);
  width: min(100% - (2 * var(--gutter)), var(--rail));
  margin-inline: auto;
  padding-left: 1.0625rem;                   /* measured x97 */
  font-family: var(--font-ui);
  font-size: var(--fs-hero-sub);            /* 30px — hero standfirst, per spec */
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.3;
  color: var(--white);
  text-shadow: 0 1px 18px rgba(4, 23, 55, 0.35);
}

/* Hero reflows to a normal document flow below the tablet breakpoint. */
@media (max-width: 991px) {
  .hero {
    height: auto;
    min-height: 44rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 3.5rem;
  }

  .hero__bg {
    object-position: 62% 34%;
  }

  .hero__doctors {
    height: 58%;
    right: -14%;
    bottom: 0;
  }

  /* On desktop this CTA sits over the bright horizon; on mobile it lands on
     the dark scrim, so it flips to white. */
  .hero__actions .link-cta {
    color: var(--white);
  }

  /* Hidden on small screens — it collides with the headline. */
  .hero__badge {
    display: none;
  }

  /* Deepened so white type stays legible over the bright sunset. */
  .hero__scrim {
    height: 62%;
    background: linear-gradient(
      to bottom,
      rgba(var(--scrim-navy), 0.12) 0%,
      rgba(var(--scrim-navy), 0.45) 38%,
      rgba(var(--scrim-navy), 0.82) 68%,
      rgba(var(--scrim-navy), 0.95) 100%
    );
  }

  .hero__body {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding-top: 8rem;
  }

  .hero__title,
  .hero__actions {
    position: static;
    max-width: none;
  }

  /* Below the tablet breakpoint the hero is a stacked column, so the
     display scale switches from root-relative to viewport-relative and the
     comp's forced line breaks are released. */
  .hero__title {
    color: var(--white);
    text-shadow: 0 1px 24px rgba(4, 23, 55, 0.28);
    /* Scales DOWN to the tablet breakpoint: 39px at 820, landing on the
       desktop 48px at 992. The old 6.6vw ran the other way — it peaked at
       53px on an 820px tablet, larger than the desktop size. */
    font-size: clamp(2.125rem, 4.8vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .hero__actions {
    flex-wrap: wrap;
  }

  .hero__sub {
    position: static;
    transform: none;
    width: min(100% - (2 * var(--gutter)), var(--rail));
    margin-top: 2.5rem;
    /* Ramps from the desktop 30px down to 17px instead of stepping straight
       from 28.5px to 17px at the breakpoint. */
    font-size: clamp(1.125rem, 1.9vw + 9.5px, 1.875rem);
  }
}

@media (max-width: 639px) {
  .hero {
    min-height: 40rem;
  }

  .hero__sub {
    font-size: 1rem;
  }
}

/* ==========================================================================
   1b — TRUST BAR
   Measured: 1440x137 · icons at x76/362/592/812 · divider x1097 · tagline x1126
   ========================================================================== */

.trustbar {
  position: relative;
  background: linear-gradient(
    100deg,
    #E4E9ED 0%,
    #F2F6FA 22%,
    #EDF6FC 45%,
    #F6F7FA 68%,
    #E9EEF2 100%
  );
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.trustbar__inner {
  display: grid;
  /* Fixed tracks reproduce the measured item starts (x76/362/592/812)
     rather than an even split, which drifts 40-60px off at 1440. */
  grid-template-columns: 15.75rem 12.5rem 11.875rem 1fr max-content;
  align-items: center;
  column-gap: 1.875rem;                      /* 30px */
  min-height: 8.5625rem;                     /* 137px */
  padding-block: 1.75rem;
}

.trustbar__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.trustbar__icon {
  flex: none;
  width: 2.125rem;                           /* 34px — icon starts x76, label x130 */
  height: 2.125rem;
  color: var(--navy);
}

.trustbar__icon svg {
  width: 100%;
  height: 100%;
}

.trustbar__figures {
  display: block;
  font-family: var(--font-ui);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.trustbar__label {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.trustbar__tagline {
  justify-self: end;
  padding-left: 1.75rem;                    /* 28px — measured rule gap x1098 -> x1126 */
  border-left: 1px solid rgba(10, 30, 63, 0.28);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1875rem;                      /* 19px */
  line-height: 1.21;                         /* 23px pitch, 3 lines = 69px as measured */
  color: var(--navy);
  /* 28px rule gap + 201px text = 229px. Width must include the padding
     or the longest line wraps and the band grows past its 137px height. */
  width: 14.3125rem;
  margin-right: 1.0625rem;                  /* 17px -> tagline block ends at x1327 */
}

@media (max-width: 1199px) {
  .trustbar__inner {
    grid-template-columns: repeat(4, auto);
    row-gap: 1.75rem;
  }

  .trustbar__tagline {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: none;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 991px) {
  .trustbar__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

@media (max-width: 479px) {
  .trustbar__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .trustbar__tagline {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   2 — RUN YOUR PRACTICE
   Measured: canvas 1438x841 · copy column x647-1377 (730px) · H2 cap-top y82,
   cap height 46px, small-cap 39px (ratio 0.814), line pitch 60px ·
   sub-headline y233 · body y310, pitch 36px, 36px between paragraphs
   ========================================================================== */

.practice {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
}

/* The plate carries the embossed caduceus at 21% opacity — it is the whole
   left half of the composition, so it runs full bleed while copy stays in
   the right column. */
.practice__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* <picture> is display:block with auto height, so a percentage height on the
   img would resolve against a content-sized parent — a cyclic dependency that
   browsers silently treat as auto. The wrapper has to carry the height. */
.practice__media picture,
.practice__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.practice__media img {
  object-fit: fill;
  object-position: 50% 50%;
  /* The PSD sets this layer to 21.2% over white: the plate's own #2C2C2C
     shadows land at the export's #D1D1D1. Full opacity reads far too dark. */
  opacity: 0.212;
}

/* Carries .container like .founder__inner, so the copy stays inside the 80rem
   rail instead of drifting to the viewport edge. Without it the plate's
   caduceus (left of frame) and the copy column (hard right) separate as the
   screen widens — at 2560 the gap between them is ~700px. */
.practice__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding-block: 5.125rem;                   /* 82px — lands the H2 cap top on y82 */
  /* The copy column is right-anchored at x1377 on the 1438px canvas; the
     caduceus plate owns everything to its left. */
  padding-right: 3.9375rem;
}

/* 60% of the inner container, as specified. At 1920 that is ~776px of a
   1360px rail. */
.practice__copy {
  width: 50%;
  color: var(--ink);
}

/* --- Small-caps display heading -----------------------------------------
   The comp sets "Run Your Practice." in Trajan Pro small caps: word
   initials at full height, everything else at ~0.8. Trajan ships no
   small-caps feature, so the browser synthesises it from
   `font-variant-caps`, which reproduces the look and keeps the markup free
   of per-letter spans. Weight, size and tracking are tuned to the measured
   ink widths (620 / 729px) and cap height (46px).
   ---------------------------------------------------------------------- */
.practice__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);                  /* 36px — was 3.5rem (56px) */
  line-height: var(--lh-h2);
  font-variant-caps: small-caps;
  /* -0.023em was measured against 56px in a 730px column. At 36px the line
     is ~470px, so the column no longer constrains it; the tracking is kept
     because Trajan's default spacing still reads loose at this size. */
  letter-spacing: -0.023em;
  color: var(--ink);
}

.practice__lead {
  margin-top: 1.5rem;                        /* 24px — sub-headline ink at y233 */
  font-family: var(--font-body);
  font-size: var(--fs-lead);                 /* 24px — was 1.875rem (30px) */
  font-weight: 700;
  font-style: italic;
  line-height: var(--lh-lead);
  color: var(--ink);
}

.practice__body {
  margin-top: 2.3125rem;                     /* 37px — first body line ink at y310 */
  font-family: var(--font-body);
  font-size: var(--fs-body);                 /* 16px — was 1.5rem (24px) */
  font-weight: 400;
  line-height: var(--lh-body);               /* 1.6 -> 25.6px pitch, was 36px */
  color: var(--ink);
}

.practice__body p + p {
  margin-top: 2.25rem;                      /* 36px */
}

/* The export breaks the closing line after "dependable,", but that break was
   measured against the old 22.7px body. At 1.5rem the measure already falls one
   word short, so a forced break there orphaned "dependable," onto a line of its
   own. The paragraph is left to wrap naturally instead, which returns it to the
   export's four lines. */

/* 1199px and below the copy runs against the full gutter-to-gutter width, which
   at 820px and 640px put 104-113 and 84-92 characters on a line. Capped at
   30rem (~61 characters) instead; 991px and below go full width, where the
   column is already narrow enough to measure well. */
@media (max-width: 1199px) {
  .practice__copy {
    width: min(100%, 30rem);
  }
}

/* Stacks below the tablet breakpoint: the caduceus plate stays as a
   backdrop but the copy takes the full width. */
@media (max-width: 991px) {
  .practice__inner {
    padding-block: 3.5rem;
    padding-inline: var(--gutter);
  }

  /* Full width only where that still measures well. Between ~640 and 991px a
     full-width column ran 92-141 characters a line (measured, not estimated),
     so it is capped at 36rem -- about 74 characters -- and only goes truly
     full below 640px, where the measure lands at 38-70. */
  .practice__copy {
    width: min(100%, 36rem);
  }

  /* Mobile keeps cover: the band is far taller than the plate's 1.71 aspect
     here, so fill would squash the artwork far harder than on desktop.

     Positioned hard left. At 390px the plate is displayed 1214px wide in a
     390px box, so cover crops 824px horizontally -- 412px off each edge at
     50%. The caduceus lives in the left half of the artwork, so centring it
     threw the artwork off-frame entirely and left only the copy side. These
     are the source x ranges actually shown:
        0%  -> 0..617     5%  -> 65..682
       17%  -> 222..838  50% -> 652..1268
     5% keeps the caduceus whole. */
  .practice__media img {
    object-fit: cover;
    object-position: 5% 50%;
  }

  .practice__title {
    /* Scales DOWN into the tablet range, landing on the desktop 36px at 992.
       The old 6.4vw peaked at 50px on an 820px tablet. The 1.625rem floor is
       what keeps "We'll Handle the Rest." on one line at 390px -- at 1.875rem
       it wrapped and left a 73px orphan. */
    font-size: clamp(1.625rem, 3.5vw + 1.4px, 2.25rem);
    line-height: var(--lh-h2);
  }

  .practice__lead {
    font-size: 1.3125rem;
  }

  .practice__body {
    font-size: 1.0625rem;
    line-height: 1.62;
  }

  .practice__body p + p {
    margin-top: 1.5rem;
  }
}

/* ==========================================================================
   3 — BUILT BY PHYSICIANS
   Measured from Physicians.jpg (1441x901): plate #0E1A26 · About Us button
   x100 y46 113x44 · H2 cap-top y129, cap height 44px, pitch 56px ·
   body ink y319, pitch 33.5px, 12 lines · founder name ink y740
   ========================================================================== */

.founder {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0E1A26;
  color: var(--white);
}

/* The PSD canvas is 1536 wide but the export is 1440, so the portrait layer
   (x575, 893px wide) overhangs the right edge by 28px in the comp. That
   overhang is reproduced with a negative inset, which scales with the
   fluid root the same way the rest of the layout does. */
/* Rebuilt from "Physician Owned revised.jpg" (1440x901). That comp drops the
   portrait to 645x832 at x695/y69 bleeding off the bottom edge, against a
   558px copy column at x99 -- versus the 893px portrait and hidden "DOCTOR
   OWNED" watermark the previous export carried.

   The watermark is gone: that layer is flagged hidden in the PSD and there is
   no faint ink for it anywhere in either export, so the previous build was
   drawing something the comp never showed.

   The portrait is scaled to the new type scale rather than held at 832px --
   at 16px body the copy no longer fills a 901px band, and a 901px section
   would be mostly empty. It keeps the comp's 645px width, anchored 615px from
   the rail so the copy and the portrait stay in step at every width. --gutter
   is exactly the rail's left offset, which is what lets the photo track the
   copy instead of drifting open on a centred large screen. */
.founder__media {
  position: absolute;
  inset: 0 auto 0 calc(var(--gutter) + 38.4375rem);   /* x695 at 1440 */
  z-index: 0;
  width: 40.3125rem;                         /* 645px — the comp's portrait width */
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.founder__media picture {
  display: block;
  width: 100%;
}

.founder__media img {
  display: block;
  width: 100%;
  height: auto;
  /* The plate is 953x915, so 645px wide comes to 619px tall -- bottom-aligned
     it bleeds off the band edge the way it does in the comp. The cap keeps it
     from outrunning a band that has been shortened further. */
  max-height: 42rem;
  object-fit: cover;
}

/* The "DOCTOR OWNED" watermark is gone with the rest of the old comp. The
   layer is hidden in the PSD and absent from both exports; see .founder__media. */

.founder__inner {
  position: relative;
  z-index: 1;
  padding-block: 3.375rem 3.0625rem;         /* 54px top / 49px bottom */
}

/* The revised comp puts the copy in a 558px column at x99 and the portrait
   clear of it at x695. Held to the comp's measure: widening it past ~557px
   pushes the copy under the portrait, which is anchored to the rail. */
.founder__copy {
  width: min(100%, 34.8125rem);
  margin-left: 1.1875rem;
}

/* --- About Us pill ------------------------------------------------------ */

.founder__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;                           /* 44px */
  padding-inline: 1.125rem;                  /* 18px */
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.founder__eyebrow:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
}

/* --- Heading (Trajan small caps, same treatment as section 2) ----------- */

.founder__title {
  margin-top: 1.9375rem;                     /* 31px */
  font-family: var(--font-heading);
  font-weight: 700;
  /* Width no longer forced: at 36px the heading is far narrower than the
     620px column, so the old 37rem override that existed only to stop the
     56px line wrapping is not needed. */
  font-size: var(--fs-h2);                  /* 36px — was 3.5rem (56px) */
  line-height: var(--lh-h2);
  font-variant-caps: small-caps;
  letter-spacing: -0.023em;
  color: var(--white);
  text-align: center;
}

/* --- Body ---------------------------------------------------------------- */

.founder__body {
  margin-top: 1.5rem;                        /* 24px — was 14px */
  font-family: var(--font-body);
  font-size: var(--fs-body);                 /* 16px — was 1.175rem (18.8px) */
  line-height: var(--lh-body);               /* 1.6 -> 25.6px pitch, was 33.5px */
  color: rgba(255, 255, 255, 0.93);
  text-align: justify;

}

.founder__body strong {
  font-weight: 700;
  color: var(--white);
}

/* --- Founder byline ------------------------------------------------------ */

.founder__byline {
  margin-top: 1.625rem;                      /* 26px */
}

.founder__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;                         /* 24px — was 2.125rem (34px) */
  line-height: 1.1;
  font-variant-caps: small-caps;
  letter-spacing: -0.01em;
  color: var(--white);
  text-align: center;
}

.founder__role {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;                       /* 18px — was 1.8125rem (29px) */
  font-style: italic;
  line-height: 1.2;
  font-variant-caps: small-caps;
  letter-spacing: -0.01em;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.founder__cred {
  margin-top: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;                      /* 13px — was 1.0625rem (17px) */
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
}

/* Between 1200 and ~1279 the rail is still narrower than its 80rem cap (the
   root sits at its 15.2px floor, so the rail only reaches 1216px) and the
   full-size portrait runs past the rail's right edge -- 35px of it clipped by
   the section. Trim offset and width for that band; from 1280 up the rail is
   at its cap and the geometry above fits at every width. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .founder__media {
    inset: 0 auto 0 calc(var(--gutter) + 35rem);
    width: 37rem;
  }
}

@media (max-width: 1199px) {
  .founder__media {
    inset: auto;
    width: 50rem;
  }
}

/* Portrait leads on tablet and below so the portrait is never cropped
   awkwardly beside a narrow copy column. At 1024px (iPad Pro portrait) the
   side-by-side overlaps, so stack like mobile: image above text. */
@media (max-width: 1199px) {
  .founder {
    display: flex;
    flex-direction: column;
  }

  /* Portrait leads on tablet and below. The image sizes from its own width
     (height:auto), so the box is sized by the picture rather than fixed —
     object-position has no effect once height is auto. */
  .founder__media {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    pointer-events: auto;
  }

  .founder__media picture {
    width: min(100%, 23rem);
  }

  .founder__inner {
    padding-block: 1.5rem 3.5rem;
  }

  .founder__copy {
    width: 100%;
    margin-left: 0;
  }

  .founder__title {
    width: 100%;
    /* Scales DOWN into the tablet range, landing on the desktop 36px at 992.
       The old 6.2vw peaked at 51px on an 820px tablet. */
    font-size: clamp(1.625rem, 3.5vw + 1.4px, 2.25rem);
    line-height: var(--lh-h2);
  }

  .founder__body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .founder__name {
    font-size: clamp(1.25rem, 2.2vw + 8px, 1.5rem);
  }

  .founder__role,
  .founder__cred {
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   4 — LEARN. LEAD. GROW.
   The export is 1338x836 sitting inside a 1440 canvas, so every value below
   is the measured one scaled by 1440/1338 = 1.0762:
   photo 630px · copy x730 w711 · band 900px ·
   H1 cap-top y26 · lead ink y116 (pitch 43) · body ink y276 (pitch 38.7) ·
   benefits y547 · bullets pitch 43
   ========================================================================== */

.education {
  position: relative;
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
}

/* Anchored between two offsets and sized from the copy, exactly as
   .operations__media does. The photo keeps its native 0.666 ratio -- cover was
   displaying it at 0.95 and slicing off 43% of its height -- and the 82px
   insets match .practice__inner's padding.

   --gutter is the rail's left offset, so the photo tracks the copy at every
   width instead of drifting to the viewport edge. */
.education__media {
  position: absolute;
  inset: 5.125rem auto 5.125rem calc(var(--gutter) + 1.5rem);
  z-index: 0;
  display: flex;
  align-items: flex-end;
}

.education__media picture {
  display: block;
  height: 100%;
}

.education__media img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.education__inner {
  position: relative;
  display: flex;
  justify-content: flex-end;
  /* Top inset is exactly practice's 82px. The bottom carries 22px extra so the
     photo comes out 569px tall at 1440 -- matching section 5's photo height --
     without moving the 82px white line above and below the image. */
  padding-block: 5.125rem calc(5.125rem + 1.375rem);
}

.education__copy {
  width: 52%;                 /* tuned so the copy runs ~96% of the photo height */
}

/* --- Heading: Trajan small caps, as sections 2 and 3 -------------------- */

.education__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);                  /* 36px — was 3.5rem (56px) */
  line-height: var(--lh-h2);
  font-variant-caps: small-caps;
  letter-spacing: -0.02em;
  color: var(--black);
}

.education__lead {
  margin-top: 0.625rem;                      /* 10px */
  font-family: var(--font-body);
  font-size: var(--fs-lead);                 /* 24px — was 1.875rem (30px) */
  font-weight: 700;
  font-style: italic;
  line-height: var(--lh-lead);
  color: var(--black);
}

.education__body {
  margin-top: 2.0625rem;                     /* 33px */
  font-family: var(--font-body);
  font-size: var(--fs-body);                 /* 16px — was 1.5rem (24px) */
  font-weight: 400;
  line-height: var(--lh-body);               /* 1.6 -> 25.6px pitch, was 38.7px */
  color: var(--black);
}

.education__benefits-title {
  margin-top: 2.4375rem;                     /* 39px */
  font-family: var(--font-body);
  font-size: var(--fs-lead);                 /* 24px — was 1.85rem (29.6px) */
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

.education__list {
  margin-top: 0.625rem;                      /* 10px */
  font-family: var(--font-body);
  font-size: var(--fs-body);                 /* 16px — matches the body above it */
  /* Rides with the body's 16px; plus the li gap below it sets the pitch. */
  line-height: 1.35;
  color: var(--black);
}

.education__list li {
  position: relative;
  padding-left: 2.25rem;                     /* 36px — marker to text */
}

.education__list li + li {
  margin-top: 0.40625rem;                     /* 6.5px — 43px pitch with the 36.5px line box */
}

.education__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;                               /* sits on the first line's x-height */
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

@media (max-width: 1199px) {
  .education__copy {
    width: min(100%, 38rem);
  }
}

/* Below the tablet breakpoint the photo stacks above the copy, as in section 5. */
@media (max-width: 991px) {
  /* Same stack as section 5: the photo is a sibling of .education__inner, so
     the air around it has to live here rather than inheriting that block's
     padding. 26rem reproduces section 5's mobile plate exactly -- both images
     are 0.666 portraits, so both land on 395x593. */
  .education__media {
    position: relative;
    inset: auto;
    order: -1;
    display: block;
    width: min(100%, 26rem);
    margin: 2.5rem auto;
  }

  .education__media picture {
    height: auto;
  }

  .education__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .education__inner {
    padding-block: 0 3.5rem;
    padding-inline: var(--gutter);
  }

  .education__copy {
    width: 100%;
  }

  .education__title {
    /* Scales DOWN into the tablet range, landing on the desktop 36px at 992.
       The old 7vw peaked at 57px on an 820px tablet. */
    font-size: clamp(1.625rem, 3.5vw + 1.4px, 2.25rem);
  }

  .education__lead {
    font-size: 1.25rem;
    line-height: var(--lh-lead);
  }

  .education__body,
  .education__list {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .education__benefits-title {
    font-size: 1.125rem;
  }

  .education__list li + li {
    margin-top: 0.25rem;
  }
}

/* ==========================================================================
   5 — STREAMLINE OPERATIONS
   The export is exactly 1440x1064, so no scaling is needed:
   plate #06659B · heading cap-top y117 on a 60px pitch inside a phrase and
   80px between phrases · body ink y555 on a 36px pitch, 11 lines ·
   collage x738 y47 650x975 · copy column x139 w471
   ========================================================================== */

.operations {
  position: relative;
  overflow: hidden;
  background: #06659B;
  color: var(--white);
}

.operations__inner {
  position: relative;
  z-index: 1;
  /* Was 7.375rem/7.4375rem (118/119px), measured off the comp's 1064px
     band when the body ran 11 lines. At 9 lines that left the collage
     swimming; 6rem keeps the band comfortable without the excess. */
  padding-block: 6rem;
}

/* 480px, not the 471px the PSD text box reports: "practice performance,
   and focus more" measures 471px, so a 471px measure leaves that line one
   hair too long to keep and pushes the paragraph onto an extra line. */
.operations__copy {
  /* A share of the rail rather than 30rem. The rail caps at 80rem while the
     fluid root keeps growing, so a rem measure widened with the viewport and
     closed the gap from the inside. 37.5% is 480px in a 1280 rail at 1440 --
     the comp's measure, unchanged. */
  width: 37.5%;
  margin-left: 3.6875rem;                    /* 59px -> copy starts at x139 */
}

.operations__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);                  /* 36px — was 3.5rem (56px) */
  line-height: var(--lh-h2);
  font-variant-caps: small-caps;
  letter-spacing: -0.015em;
  color: var(--white);
}

.operations__phrase {
  display: block;
}

/* 80px between phrases against the 60px line box = 20px of extra air. */
.operations__phrase + .operations__phrase {
  margin-top: 1.25rem;
}

.operations__body {
  margin-top: 1.9375rem;                     /* 31px */
  font-family: var(--font-body);
  font-size: var(--fs-body);                 /* 16px — was 1.5rem (24px) */
  font-weight: 400;
  line-height: var(--lh-body);               /* 1.6 -> 25.6px pitch, was 36px */
  color: var(--white);
}

/* The collage is anchored between two offsets rather than given a fixed
   height. The band is sized by the copy, so the artwork scales with however
   much text the column holds instead of overrunning it -- at the export's own
   numbers that is 975px tall against 818px of copy, a 1.19 ratio, and holding
   the ratio means the two stay in step if the copy is edited.

   The bottom inset is the export's: artwork ends at y1022 in a 1064px band,
   leaving 42px. Without it the image runs flush into the section edge, which
   reads as a crop rather than a margin. */
.operations__media {
  position: absolute;
  top: 2.9375rem;                           /* y47 */
  bottom: 2.625rem;                         /* 42px clear of the band floor */
  /* Spans the rail, exactly as .container measures it, so the collage tracks
     the copy instead of the viewport. The old `left: 46.125rem; right: 0` held
     a fixed x738 while `right: 0` ran the plate to the window edge: the copy is
     railed and therefore moved right as the window grew (x619 -> x853 between
     1440 and 1920) while the plate stayed put, so they overlapped by 69px at
     1920 and by 9px at 1800. */
  left: var(--gutter);
  right: var(--gutter);
  max-width: var(--rail);
  margin-inline: auto;
  /* 242px holds the collage at the comp's x738-x1118 inside a 1440 rail. */
  padding-right: 15.125rem;
  display: flex;
  justify-content: flex-end;
}

.operations__media img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;                      /* 3:2 plate, never distorted */
}

@media (max-width: 1199px) {
  .operations__copy {
    width: min(100%, 26rem);
  }

  /* Beside the copy but free-floating, so it stops claiming a vertical band:
     the offsets are released and it is sized off the width instead. */
  .operations__media {
    left: auto;
    right: 1.5rem;
    max-width: none;
    margin-inline: 0;
    padding-right: 0;
    top: 2.9375rem;
    bottom: auto;
    width: min(42%, 26rem);
    opacity: 0.55;
  }

  .operations__media img {
    height: auto;
    width: 100%;
  }
}

/* The collage is decorative once it stacks under the copy, so it becomes a
   banner above it rather than competing beside it. */
@media (max-width: 991px) {
  .operations {
    display: flex;
    flex-direction: column;
  }

  /* The banner needs air on all four sides now that it starts the band. It is
     a sibling of .operations__inner rather than a child, so it cannot pick up
     that block's padding -- the top margin has to live here. Matches the
     desktop band's 2.9375rem head gap in spirit and the 2.5rem already below. */
  .operations__media {
    position: relative;
    inset: auto;
    order: -1;
    max-width: none;
    padding-right: 0;
    width: min(100%, 26rem);
    margin: 2.5rem auto;
    opacity: 1;
  }

  .operations__inner {
    padding-block: 0 3.5rem;
    padding-inline: var(--gutter);
  }

  .operations__copy {
    width: 100%;
    margin-left: 0;
  }

  .operations__title {
    /* Scales DOWN into the tablet range, landing on the desktop 36px at 992.
       The old 6vw peaked at 49px on an 820px tablet. */
    font-size: clamp(1.625rem, 3.5vw + 1.4px, 2.25rem);
    line-height: var(--lh-h2);
  }

  .operations__phrase + .operations__phrase {
    margin-top: 0.75rem;
  }

  .operations__body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
}

/* ==========================================================================
   6 — READY TO JOIN OUR TEAM
   The export is exactly 1440x831, so no scaling is needed:
   plate #D8E6E7 · eyebrow pill x80 y118 140x28 · H1 cap-top y170 (765px
   ink) · phone y245 (308px) · CTA x1170 y193 196x54 · cards y328-649 in
   three 420px tracks with 18px gaps · number ink y368-446 · card title
   y483 · card body y545 on a 24px pitch
   ========================================================================== */

.join {
  position: relative;
  overflow: hidden;
  background: var(--plate);
  color: var(--ink);
  /* Was 11.375rem (182px), sized when the step cards were 54px type.
     With 20px titles the cards are shorter and 182px left a visible dead
     band under them. 6rem matches the top padding. */
  padding-bottom: 6rem;
}

.join__inner {
  position: relative;
  padding-top: 4rem;                         /* was 7.375rem (118px) */
}

/* --- Eyebrow pill --------------------------------------------------------- */

.join__eyebrow {
  display: inline-block;
  margin: 0;
  padding: 0.4375rem 0.6875rem;             /* 7px 11px -> 28px tall */
  background: var(--white);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.8125rem;                      /* 13px — matches the 117px ink width */
  font-weight: 700;
  line-height: 1.0769;                      /* 14px -> 28px pill with 7px padding */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.join__title {
  margin-top: 1.5625rem;                     /* 25px */
  margin-left: -0.5625rem;                    /* -9px — ink starts left of the rail */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);                  /* 36px — was 3.5rem (56px) */
  line-height: var(--lh-h2);
  font-variant-caps: small-caps;
  letter-spacing: -0.025em;
  color: #121818;
}

/* --- Two CTA buttons side by side --------------------------------------- */

.join__cta-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  justify-content: center;
}

.join__cta-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 32rem;
}

.join__cta-label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.125rem;                      /* 18px — matches the PSD label */
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem;                    /* label sits directly above its button */
  text-align: center;
}

/* Shared button style — matches the teal plate on the new export. */
.join__cta {
  position: relative;
  width: 100%;
  max-width: 26rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  height: 3.375rem;                          /* 54px */
  padding-left: 2.125rem;                    /* 34px */
  padding-right: 0.3125rem;                  /* 5px */
  border-radius: var(--radius-pill);
  background: #19898B;                       /* teal plate from the export */
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.join__cta:hover {
  background: #147675;
  transform: translateY(-1px);
}

.join__cta-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;                             /* 40px */
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
}

.join__cta-icon svg {
  width: 1rem;
  height: 1rem;
}

/* --- Steps ---------------------------------------------------------------- */

/* Three 420px tracks separated by 18px, spanning x70-x1364. */
.join__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
  margin: 3.1875rem 4.75rem 0 4.375rem;      /* 51px top · x70 to x1364 */
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* The export is 1440 wide, so the tracks stop growing there. Left uncapped they
   stretch with the window -- 420px columns in the export, 1082px at 3440 -- and
   the step copy ends up stranded at 36 words a line. The section is full-bleed
   and the grid is not railed, so the cap has to be centred explicitly. */
@media (min-width: 1480px) {
  .join__steps {
    max-width: 1440px;
    margin-inline: auto;
  }
}

.join__step {
  position: relative;
  padding: 2.4375rem 1.625rem 2.3125rem;      /* 39px top · 26px sides · 37px base -> 321px card */
  background: var(--white);
  border-radius: var(--radius-md);
}

.join__num {
  display: block;
  position: relative;
  top: -5px;                                  /* glyph ink lands on y369 */
  /* The export's numerals are a geometric sans, not the Trajan used for the
     section headings: the "1" carries a flag and no foot serif. */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 4.875rem;                       /* 78px — was 5.75rem (92px).
     Held at the same ratio to .join__step-title as the export had (92px
     against 23.4px); the title is now 20px, so an unscaled 92px numeral
     read as a headline rather than a card index. */
  line-height: 0.89;
  letter-spacing: 0.07em;
  /* Stops are expressed against the box, not the glyph: full teal from y369
     to nothing at y463 is a 94px ramp inside an 82px box, so the first stop
     starts a little way in and the second runs well past 100%. */
  background: linear-gradient(180deg, #4E9F9D 8.6%, rgba(78, 159, 157, 0) 123%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The connector disc sits in the gutter between two cards. The export rings it
   with a flat band of the band colour rather than a shadow, so the ring is
   painted in --plate -- the same token as the band itself, so the two cannot
   drift apart. */
.join__step + .join__step::before {
  content: '';
  position: absolute;
  top: 8.65625rem;                            /* 138.5px — disc centre y488.5 */
  left: -2.1875rem;                           /* -35px; the export sits 4px left of the gutter centre */
  width: 2.75rem;                             /* 44px — the white disc */
  height: 2.75rem;
  border-radius: 50%;
  background: var(--white);
  /* Measured off the export: plate band x462-470 and x516-524, so 10px either
     side of a 44px disc, 64px overall. Drop to 0.5rem if a lighter ring reads
     better at small sizes. */
  box-shadow: 0 0 0 0.625rem var(--plate);
}

/* 13x11px teal arrow centred in the disc. */
.join__step + .join__step::after {
  content: '';
  position: absolute;
  /* Centred on the disc, which sits 13px left of the card edge and 22px below
     the card top: 160.5 - 6.25 on y, -13 - 7.5 on x. */
  top: 9.640625rem;                           /* 154.25px */
  left: -1.28125rem;                          /* -20.5px */
  width: 0.9375rem;                           /* 15px — up from 13 */
  height: 0.78125rem;                         /* 12.5px — up from 11 */
  background: var(--teal);
  -webkit-mask: var(--arrow-right) no-repeat center / contain;
  mask: var(--arrow-right) no-repeat center / contain;
}

.join__step-title {
  margin-top: 1.875rem;                      /* 30px */
  min-height: 2.7em;                         /* always two lines, so every body starts at y545 */
  font-family: 'Trajan Pro', var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;                        /* 20px — was 1.4625rem (23.4px) */
  line-height: var(--lh-lead);
  font-variant-caps: small-caps;
  letter-spacing: -0.01em;
  color: var(--black);
}

.join__step-body {
  margin-top: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);                /* 15px — was 1.09375rem (17.5px) */
  line-height: var(--lh-body);               /* 1.6 -> 24px pitch, was the same */
  color: #474747;
}

@media (max-width: 1199px) {
  .join__cta-group {
    flex-direction: column;
  }

  .join__cta {
    position: static;
    width: 100%;
    max-width: 28rem;
    justify-content: center;
  }

  .join__steps {
    margin-inline: var(--gutter);
  }

  .join__step + .join__step::before,
  .join__step + .join__step::after {
    display: none;
  }
}

@media (max-width: 991px) {
  .join__inner {
    padding-top: 3.5rem;
    padding-inline: var(--gutter);
  }

  .join__title {
    /* Scales DOWN into the tablet range, landing on the desktop 36px at 992.
       The old 6.4vw peaked at 52px on an 820px tablet. */
    font-size: clamp(1.625rem, 3.5vw + 1.4px, 2.25rem);
  }

  .join__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
  }

  .join__step {
    padding: 2rem 1.5rem;
  }

  .join__num {
    font-size: 3.25rem;
  }

  .join__step-title {
    font-size: 1.125rem;
  }

  .join__step-body {
    font-size: 1rem;
    line-height: 1.55;
  }

  /* The desktop title needs a hard break; stacked cards are wide enough to wrap. */
  .join__step-break {
    display: none;
  }

  .join__step-title {
    min-height: 0;
  }
}

/* ==========================================================================
   7 · Reviews
   Two panels on the #ECF0F1 field: a photo panel carrying the heading and the
   4.9 badge, and a white card holding a rotating testimonial.
   ========================================================================== */

.reviews {
  background: var(--reviews-field);
  padding: 7.625rem 1.3125rem 5.1875rem 1.8125rem;  /* 122 top · 21 right · 83 bottom · 29 left */
  color: var(--ink);
}

.reviews__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6875rem;                                 /* 27px */
}

/* Same 1440 cap and same 1480 trigger as section 6's .join__steps, so the two
   bands share one measure on wide displays. */
@media (min-width: 1480px) {
  .reviews__grid {
    max-width: 1440px;
    margin-inline: auto;
  }
}

/* --- Photo panel ---------------------------------------------------------- */

.reviews__panel {
  position: relative;
  /* 12.8125rem of section padding + 27.75rem = 40.5625rem, which is the join
     section's own total. Holding the same rem budget makes this band track
     section 6 exactly at every root size -- 616px at 1366, 649 at 1440, 689.5
     at 1920 -- instead of running 173px taller than it on wide displays. */
  height: 27.75rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.reviews__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.reviews__title {
  position: absolute;
  top: 3.3125rem;                                 /* 53px — ink starts at y175 */
  left: 2.1875rem;                                /* 35px */
  margin: 0;
  /* Was var(--font-body) -- the only section heading on Arial. Trajan is the
     brand standard and the other five headings already carry small-caps. */
  font-family: var(--font-heading);
  font-variant-caps: small-caps;
  font-size: var(--fs-h2);                         /* 36px — was 3.5rem (56px) */
  font-weight: 400;
  line-height: var(--lh-h2);
  letter-spacing: -0.023em;
  color: var(--white);
}

.reviews__title span {
  color: #667A7C;
}

.reviews__rating {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14.9375rem;                              /* 239px */
  height: 14.875rem;                              /* 238px */
  /* Top and left carry the 21px field band, so the padding clears it; the
     right and bottom sit flush against the panel and keep the tighter inset.
     All four corners now take the radius the bottom-right already had. */
  padding: 2.25rem 1.375rem 1.1875rem 2.25rem;
  border-radius: var(--radius-md);
  background: #0779AF;
  color: var(--white);
}

/* The badge is inset from the panel edge on the top and left only, so a band of
   the field shows through. The PSD carries four solid rows of it along the top
   (lum 237 against a fill of 93) and a lighter band down the left; the right and
   bottom edges sit flush, so the band is drawn on those two sides alone. Same
   token as the field itself, so the two cannot drift apart. */
.reviews__rating::before {
  content: '';
  position: absolute;
  inset: 0;
  /* The band only wraps the card at the top-left. Where it merely ends --
     bottom-left down the left band, top-right along the top band -- the
     radius would leave a stub and a blob, so those two stay square. */
  border-radius: var(--radius-md) 0 0 0;
  /* Sized off the .reviews__grid gap: 1.3125rem is 21px, 78% of that 27px. */
  border-top: 1.3125rem solid var(--reviews-field);
  border-left: 1.3125rem solid var(--reviews-field);
  pointer-events: none;
}

.reviews__score {
  margin: 0;
  font-family: var(--font-body);
  font-size: 5rem;                                /* 80px — 59px digit height */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.reviews__stars {
  margin-top: 3.8125rem;
  color: var(--white);
}

.reviews__stars svg {
  display: block;
  width: 5.75rem;                                 /* 92px */
  height: 1rem;
  fill: currentColor;
}

.reviews__count {
  margin: 0.75rem 0 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;                           /* 17px — 166px on one line */
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* --- Testimonial card ----------------------------------------------------- */

.reviews__card {
  position: relative;
  /* Matches .reviews__panel so the grid row is driven by one number. */
  height: 27.75rem;
  /* The inner geometry below is the comp's, pulled in together to fit that
     height: mark 79->60, slides 265->200, attribution 231->168, avatar 84->64.
     The relationships between them are unchanged. */
  padding: 3rem 3.25rem 0 2.5rem;
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}

.reviews__mark {
  display: block;
  width: 3.75rem;                                 /* 60px */
  color: #0581B5;
}

.reviews__mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.reviews__slides {
  position: relative;
  height: 12.5rem;                                /* 200px between mark and attribution */
  margin-top: 2rem;                               /* 32px below the mark */
}

.reviews__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease);
}

.reviews__slide[data-active] {
  opacity: 1;
  visibility: visible;
}

.reviews__quote {
  margin: 0;
  flex: 1;
}

.reviews__quote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);                      /* 16px — was 1.5rem (24px) */
  line-height: var(--lh-body);                    /* 1.6 -> 25.6px pitch, was 32px */
  color: #1F2933;
}

/* --- Attribution ---------------------------------------------------------- */

.reviews__who {
  position: absolute;
  left: 0;                                        /* aligns with the quote column */
  right: -0.9375rem;                              /* rule runs to x1366 */
  top: 10.5rem;                                   /* 168px -> divider lands inside the shorter card */
  padding-top: 1.5rem;                            /* 24px */
  border-top: 1px dashed #C9CFD1;
}

.reviews__avatar {
  position: absolute;
  top: 1.5rem;                                    /* 24px */
  left: 0;
  width: 4rem;                                    /* 64px */
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
}

.reviews__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews__avatar--mono {
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
  font-family: 'Trajan Pro', var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
}

.reviews__name {
  margin: 0.9375rem 0 0 6.125rem;                 /* 15px below · 98px across */
  font-family: var(--font-display);                 /* Times: Trajan is caps-only */
  font-style: italic;
  font-size: 1.5rem;                              /* 24px — was 2rem (32px) */
  font-weight: 700;
  line-height: 1;
  color: var(--black);
}

.reviews__role {
  margin: 0.0625rem 0 0 6.25rem;                  /* 100px across */
  font-family: var(--font-ui);
  font-size: 0.8125rem;                           /* 13px — was 1rem */
  line-height: 1.2;
  color: #6B7680;
}

/* --- Dots ----------------------------------------------------------------- */

.reviews__dots {
  position: absolute;
  right: 4.5rem;                                  /* 72px */
  bottom: 3rem;                                   /* 48px */
  display: flex;
  align-items: center;
  gap: 0.4375rem;                                 /* 7px */
}

.reviews__dot {
  width: 0.5625rem;                               /* 9px */
  height: 0.5625rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #C9D3D6;
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}

.reviews__dot[aria-selected='true'] {
  width: 3.5rem;                                   /* 56px pill */
  border-radius: 62.4375rem;
  background: var(--teal);
}

.reviews__dot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1199px) {
  .reviews__card {
    padding-inline: 3rem;
  }

  .reviews__name,
  .reviews__role {
    margin-left: 6rem;
  }

  .reviews__who {
    left: 3rem;
    right: 3rem;
  }
}

@media (max-width: 991px) {
  .reviews {
    padding: 4.5rem var(--gutter);
  }

  .reviews__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  /* The photo keeps its own box and the badge keeps overlapping it, so the
     panel simply grows to whatever the photo needs. */
  .reviews__panel {
    height: auto;
  }

  .reviews__photo {
    position: relative;
    height: 21rem;
  }

  .reviews__title {
    top: 1.75rem;
    left: 1.75rem;
    /* Scales DOWN into the tablet range; the old 7vw peaked at 54px. */
    font-size: clamp(1.625rem, 3.5vw + 1.4px, 2.25rem);
  }

  .reviews__rating {
    width: 12.5rem;
    height: auto;
    /* Must clear the 1.3125rem field band ::before paints over the top and
       left edges. The 1.25rem/1.125rem this replaces sat under that band: the
       17px left inset was smaller than the 19px band and was swallowed whole,
       leaving the 4.9 hard against the photo with no top or left padding at
       all. Band plus 1rem restores the ~16px gap the desktop measure has. */
    padding: calc(1.3125rem + 1rem) 1.125rem 1.25rem calc(1.3125rem + 1rem);
  }

  .reviews__score {
    font-size: 3rem;
  }

  .reviews__stars {
    margin-top: 0.75rem;
  }

  .reviews__stars svg {
    width: 4.5rem;
    height: 0.8125rem;
  }

  .reviews__count {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
  }

  /* Slides drop out of the absolute crossfade and back into normal flow so the
     card can size itself to the quote it is currently showing. */
  .reviews__card {
    height: auto;
    padding: 2.25rem 1.75rem 2rem;
  }

  .reviews__slides {
    height: auto;
    margin-top: 1.5rem;
  }

  .reviews__slide {
    position: static;
    display: none;
  }

  .reviews__slide[data-active] {
    display: flex;
    opacity: 1;
    visibility: visible;
  }

  .reviews__quote p {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .reviews__who {
    position: static;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
  }

  .reviews__avatar {
    position: static;
    width: 4rem;
    height: 4rem;
    float: left;
    margin-right: 1rem;
  }

  .reviews__name {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
  }

  .reviews__role {
    margin: 0;
    clear: none;
  }

  .reviews__who::after {
    content: '';
    display: block;
    clear: both;
  }

  .reviews__dots {
    position: static;
    margin-top: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__slide,
  .reviews__dot {
    transition: none;
  }
}

/* ==========================================================================
   8 · Footer
   ========================================================================== */

.site-footer {
  --footer-silver: #D8DCE3;
  position: relative;
  /* Top padding reduced so the footer band (≈863px at 1440px) stays at or under
     the background image's natural height (864px). With `background-size: cover`
     that keeps the scale at ≤1.0 so the photo isn't upscaled/stretched on large
     viewports; it scales by width instead, showing the full image width. */
  padding: 3.375rem 0 1.5rem;                        /* 54px top · 24px base */
  background: #101823 url('../img/sections/footer-bg-new.webp') center / cover no-repeat;
  color: var(--white);
  isolation: isolate;
}

/* The stock art is far lighter than the reference; a navy wash brings it to
   the #101823 / #132238 tones the creative direction calls for. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 24, 35, 0.55), rgba(19, 34, 56, 0.66));
  z-index: -1;
}

.site-footer a {
  color: inherit;
}

/* --- Masthead ------------------------------------------------------------- */

.site-footer__masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-footer__brand {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-hero);                      /* 48px — was 2.75rem (44px).
     The footer's brand line plays the same role as the hero headline, so it
     takes the same size rather than a third value of its own. */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--white);
}

.site-footer__logo {
  width: auto;
  max-width: 14rem;
  height: auto;
  display: block;
  margin: 0 auto 1.25rem;
}

.site-footer__rule {
  width: 9.5rem;                                  /* 152px */
  height: 2px;
  margin: 1.25rem 0 1.25rem;
  background: var(--gold);
}

.site-footer__rule--col {
  width: 2.5rem;                                  /* 40px */
  height: 2px;
  margin: 1.125rem 0 1.375rem;
}

.site-footer__tagline {
  max-width: 44rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);                              /* 24px */
  font-style: italic;
  line-height: 1.45;
  color: var(--white);
}

/* --- Columns -------------------------------------------------------------- */

/* The reference runs its content from x100 to x1362, wider than the 80rem
   rail used elsewhere, so the footer opts out of the shared container. */
.site-footer__inner {
  max-width: 78.875rem;                            /* 1262px */
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 2.15fr 1fr 1fr 2.1fr;
  gap: 1.5rem;
  margin-top: 3.25rem;                            /* 52px */
  padding-top: 2.5rem;
  border-top: 1px solid rgba(216, 220, 227, 0.35);
}

.site-footer__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
}

.site-footer__blurb {
  margin: 1.25rem 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);                      /* 16px — unchanged, now shared */
  line-height: var(--lh-body);                    /* 1.6 -> 25.6px pitch, was 24px */
  color: var(--footer-silver);
}

.site-footer__subheading {
  margin: 0.25rem 0 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
}

.site-footer__subheading--contact {
  margin-top: 0.875rem;
  font-size: 1.75rem;
}

/* --- Social --------------------------------------------------------------- */

.site-footer__social {
  display: flex;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;                                 /* 44px */
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: #101823;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.site-footer__social a:hover {
  background: #C79A66;
  transform: translateY(-1px);
}

.site-footer__social-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* --- Contact -------------------------------------------------------------- */

.site-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--footer-silver);
}

.site-footer__contact-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--white);
}

.site-footer__contact a:hover {
  text-decoration: underline;
}

/* --- Link lists ----------------------------------------------------------- */

.site-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links li {
  position: relative;
  padding-left: 1.25rem;
  margin-top: 1.6875rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--footer-silver);
}

.site-footer__links li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.375rem;                                /* 6px */
  height: 0.375rem;
  border-radius: 50%;
  background: var(--gold);
}

.site-footer__links a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* --- Subscribe ------------------------------------------------------------ */

.site-footer__email {
  width: 100%;
  height: 3.25rem;                                /* 52px */
  margin-top: 1.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
}

.site-footer__subscribe {
  width: 100%;
  height: 3.25rem;                                /* 52px */
  margin-top: 1.125rem;                           /* 18px */
  border: 0;
  border-radius: 0;
  background: var(--gold);
  color: #101823;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.site-footer__subscribe:hover {
  background: #C79A66;
}

.site-footer__form-status {
  margin: 0.75rem 0 0;
  min-height: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
}

.site-footer__form-status[data-kind='error'] {
  color: #FFC9C9;
}

.site-footer__form-status[data-kind='success'] {
  color: #B9E6D2;
}

/* --- Legal ---------------------------------------------------------------- */

.site-footer__legal {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(216, 220, 227, 0.35);
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--footer-silver);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1199px) {
  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }

  .site-footer__col--about,
  .site-footer__col--connect {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding-top: 4rem;
  }

  .site-footer__brand {
    /* Scales DOWN into the tablet range; the old 7vw peaked at 48px. */
    font-size: clamp(1.5rem, 3vw + 6px, 3rem);
  }

  .site-footer__tagline {
    font-size: 1.125rem;
  }

  .site-footer__columns {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 2.5rem;
  }

  .site-footer__col--about,
  .site-footer__col--connect {
    grid-column: auto;
  }
}