/* ==========================================================================
   Performance Rejuvenation Center — Home
   Built from Figma "Performance Rejuvenation Center - Home page design"
   node 2:2, artboard 1600 x 7221.

   SCALING CONTRACT
   - 1vw === 16px at the 1600px artboard, so every Figma px N maps to
     (N / 16)vw and is written as clamp(min, (N/16)vw, Npx).
   - Every column width is a percentage of its container's CONTENT box.
   - Page gutters are proportional: min((N/16)vw, Npx).
   ========================================================================== */

/* --------------------------------------------------------------- FONTS ---
   PP Mori and Product Sans are not free/licensable, so they are loaded
   locally. Drop these three files into ./fonts/ and they take over
   automatically; until then the stacks fall back to Manrope / Poppins.

   fonts/pp-mori-semibold.woff2       PP Mori SemiBold 600  (display headings)
   fonts/product-sans-regular.woff2   Product Sans 400      (nav)
   fonts/product-sans-bold.woff2      Product Sans 700      (phone number)
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "PP Mori";
  src: url("fonts/pp-mori-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Product Sans";
  src: url("fonts/product-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Product Sans";
  src: url("fonts/product-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- TOKENS -- */
:root {
  /* colours, straight from the design context */
  --c-orange:      #f7a566;
  --c-coral:       #e8735a;
  --c-red:         #f36869;
  --c-blue:        #87b9e1;
  --c-blue-card:   #84b8e3;
  --c-navy:        #1d244d;
  --c-navy-deep:   #11173e;
  --c-ink:         #1d161d;
  --c-muted:       #5c465c;
  --c-slate:       #94a3b8;
  --c-slate-line:  #1e293b;
  --c-slate-bg:    #13192b;
  --c-hairline:    #f1e2df;
  --c-cardborder:  #e5e7eb;

  --f-display: "PP Mori", "Manrope", system-ui, -apple-system, sans-serif;
  --f-brand:   "Product Sans", "Poppins", system-ui, -apple-system, sans-serif;
  --f-body:    "Poppins", system-ui, -apple-system, sans-serif;
  --f-ui:      "Manrope", system-ui, -apple-system, sans-serif;
  --f-quote:   "Pontano Sans", Georgia, serif;

  /* type scale — max value is the Figma px */
  --fs-h1:   clamp(30px,   3.825vw,  61.2px);
  --fs-35:   clamp(22px,   2.1875vw, 35px);
  --fs-31:   clamp(20px,   1.9375vw, 31px);
  --fs-30:   clamp(20px,   1.875vw,  30px);
  --fs-28:   clamp(19px,   1.75vw,   28px);
  --fs-26:   clamp(18px,   1.625vw,  26px);
  --fs-23:   clamp(17px,   1.4375vw, 23px);
  --fs-nav:  clamp(15px,   1.2119vw, 19.39px);
  --fs-tel:  clamp(18px,   1.6494vw, 26.391px);
  --fs-18:   clamp(16px,   1.125vw,  18px);
  --fs-17:   clamp(15px,   1.0695vw, 17.112px);
  --fs-16:   clamp(15px,   1vw,      16px);
  --fs-14:   clamp(13px,   0.875vw,  14px);
  --fs-13:   clamp(12px,   0.8125vw, 13px);

  /* proportional gutters */
  --gut-h: min(3.75vw, 60px);   /* header row  -> 1480 content */
  --gut-a: min(3.875vw, 62px);  /* hero / band -> 1476 content */
  --gut-b: min(5vw, 80px);      /* services / footer -> 1440 content */
  --gut-c: min(6.25vw, 100px);  /* testimonials -> 1400 content */

  --r-panel: min(1.875vw, 30px);  /* 30px rounded panel tops  */
  --r-20:    min(1.25vw, 20px);
  --r-16:    min(1vw, 16px);
  --r-24:    min(1.5vw, 24px);

  --icon-box:   clamp(38px, 3.25vw, 52px);   /* 52  */
  --icon-glyph: clamp(21px, 1.75vw, 28px);   /* 28  */

  /* measured in JS; this is the 1600px value */
  --header-h: 120px;
}

/* --------------------------------------------------------------- RESET --- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* NB: no scroll-padding-top here. It would stack with the per-section
     scroll-margin-top below and land anchors ~2x the header height down. */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--f-body);
  font-size: var(--fs-16);
  line-height: normal;
  /* deliberately no overflow-x:hidden — horizontal overflow is fixed, not masked */
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
hr { border: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Figma resolves Poppins "Auto" leading to 24px at 16px (1.5). The browser's
   `normal` gives ~25px, which compounds into ~14px of cumulative drift by the
   testimonials grid, so every Poppins body run gets the Figma ratio. */
.hero__sub,
.hcard__sub,
.pain__note,
.welcome__body,
.about__body { line-height: 1.5; }
.about__kicker { line-height: 1.5217; }   /* 35 / 23 */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: #000; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:where(a, button):focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; }

/* -------------------------------------------------------- CONTAINERS ----- */
.wrap-h { width: min(100% - (2 * var(--gut-h)), 1480px); margin-inline: auto; }
.wrap-a { width: min(100% - (2 * var(--gut-a)), 1476px); margin-inline: auto; }
.wrap-b { width: min(100% - (2 * var(--gut-b)), 1440px); margin-inline: auto; }
.wrap-c { width: min(100% - (2 * var(--gut-c)), 1400px); margin-inline: auto; }

section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ================================================================ TOPBAR == */
/* 2:542 orange rect is 78px tall; the white header overlaps its lower 36px,
   which is what reveals orange behind the header's 30px top corners. */
.topbar {
  position: relative;
  height: 78px;
  background: var(--c-orange);
  padding-top: 9px;
}
.topbar__text {
  font-family: var(--f-body);
  font-size: var(--fs-16);
  text-transform: capitalize;
  text-align: center;
  color: #000;
  line-height: 1.5;
}
.stick-sentinel { position: absolute; left: 0; top: 42px; width: 1px; height: 1px; }

/* ================================================================ HEADER == */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  margin-top: -36px;
  background: #fff;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  /* Line 1 (2:500) is a zero-height rule sitting at y=162, so it must not add
     to the 120px header box — inset shadow instead of a border. */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .13);
  transition: border-radius .18s ease, box-shadow .18s ease;
}
.site-header.is-stuck {
  border-radius: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .13), 0 6px 18px -10px rgba(0, 0, 0, .28);
}
.header__inner {
  display: flex;
  align-items: center;
  padding: clamp(12px, 1.5vw, 24px) 0 clamp(8px, .875vw, 14px);
}
/* the asset is 2.5:1 but Figma draws it at 206x82, so the leaf box is explicit */
.header__logo img { width: clamp(112px, 12.875vw, 206px); height: auto; aspect-ratio: 206 / 82; object-fit: cover; }

.nav { margin-left: 10.676%; }            /* 158 / 1480 */
.nav__list { display: flex; align-items: center; gap: min(2.5625vw, 41px); }
.nav__link {
  font-family: var(--f-brand);
  font-weight: 400;
  font-size: var(--fs-nav);
  letter-spacing: .01em;                   /* 0.1939 / 19.39 */
  color: #000;
  white-space: nowrap;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav__link:hover { color: var(--c-red); }
.nav__link.is-active { color: var(--c-red); border-bottom-color: var(--c-red); }

.tel { display: inline-flex; align-items: center; gap: min(.6575vw, 10.52px); }
.tel__icon { width: clamp(34px, 3.5579vw, 56.926px); height: auto; flex: none; }
.tel__num {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: var(--fs-tel);
  letter-spacing: -.03em;                  /* -0.7917 / 26.391 */
  white-space: nowrap;
}
.tel--header { margin-left: auto; }
.tel--header .tel__num { color: var(--c-navy); }

.burger { display: none; }
.nav__close { display: none; }             /* panel-only; see the 900 block */
.nav__contact { display: none; }           /* panel-only; see the 900 block */

/* ================================================================== HERO == */
.hero { position: relative; background: #fff; padding-bottom: clamp(24px, 2.875vw, 46px); }
.hero__inner { padding-top: clamp(24px, 2.9375vw, 47px); }

.hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.14;
  letter-spacing: -.02em;                  /* -1.224 / 61.2 */
  color: #000;
  max-width: 52.168%;                      /* 770 / 1476 */
}
.hero__sub {
  margin-top: clamp(10px, 1.125vw, 18px);
  font-size: var(--fs-16);
  color: #000;
}

.hero__cards {
  margin-top: clamp(24px, 2.875vw, 46px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35501%;                           /* 20 / 1476 */
}

/* --- hero card ----------------------------------------------------------- */
.hcard {
  position: relative;
  isolation: isolate;                      /* contain the blend modes */
  /* Type is sized from the CARD, not the viewport. Below 900 the card goes
     full-width (693px at 768 vs 728 at the artboard) while vw-clamped type was
     still pinned at its 20px floor — hence the big dead space on tablet. */
  container-type: inline-size;
  aspect-ratio: 728 / 452;
  border-radius: var(--r-20);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4.1209% 4.1209% 6.456%;         /* 30 / 30 / 47 of 728 */
}
/* The gradient lives on .hcard__art, NOT on .hcard, and .hcard__art must not
   create a stacking context (no z-index). mix-blend-mode only sees a backdrop
   inside its own isolation group — with `z-index: 0` here the lighten and
   color-burn layers blended against nothing and the photos flatly covered the
   gradient. Diffed against the Figma render: 7.8 / 7.6 correct vs 17.7 / 12.6
   unblended. The 163.67% stop is deliberate — it must extrapolate past the box,
   so the far corner only reaches ~54% of the way to the end colour. */
.hcard--trt .hcard__art { background-image: linear-gradient(211.52131108453352deg, #fff 24.847%, var(--c-blue-card) 163.67%); }
.hcard--hgh .hcard__art { background-image: linear-gradient(211.52131108453352deg, #fff 24.847%, var(--c-red) 163.67%); }

.hcard__art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
/* photo layers live in their own box so mobile can shrink them to a band
   without disturbing the gradient, which must keep covering the whole card.
   No z-index / no stacking context here — the blends below depend on it. */
.hcard__photos { position: absolute; inset: 0; }
.hcard__body { display: contents; }        /* a no-op until the mobile stack */
.hcard__bg, .hcard__cut { position: absolute; max-width: none; object-fit: cover; }

/* 14:44 / 14:49 / 14:47 — background photo twice, then the cut-out */
/* At the artboard ratio these boxes match the assets exactly, so `cover` is a
   no-op there; off-ratio it crops instead of shearing. The background and the
   cut-out MUST share an object-position or the composite comes apart.
   100% keeps the flexing arm (alpha bbox reaches x=0.999) inside the frame. */
.hcard--trt .hcard__bg,
.hcard--trt .hcard__cut { left: .01%; top: -5.57%; width: 129.42%; height: 105.57%; object-position: 100% 50%; }
.hcard__bg--lighten { mix-blend-mode: lighten; }
.hcard__bg--fade { opacity: .27; }

/* 15:69 background, 15:70 clipped cut-out box */
.hcard--hgh .hcard__bg { left: .01%; top: -3.76%; width: 123.26%; height: 103.76%; mix-blend-mode: color-burn; opacity: .55; object-position: 62% 50%; }
.hcard__cutwrap { position: absolute; left: 51.374%; top: 0; width: 48.626%; height: 100%; overflow: hidden; }
.hcard--hgh .hcard__cut { left: -105.62%; top: -3.76%; width: 253.49%; height: 103.76%; object-position: 62% 50%; }

.icon-box {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: 50%;
  background: var(--c-coral);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box img { width: var(--icon-glyph); height: var(--icon-glyph); }

.hcard__text { position: relative; z-index: 1; }
.hcard__title {
  font-family: var(--f-display);
  font-weight: 600;
  /* cqw is 1% of the container's CONTENT box (728 - 30 - 30 = 668), not the
     border box — so the ratio is 30/668, not 30/728. */
  font-size: clamp(18px, 4.4910cqw, 30px);
  line-height: 1.14;
  letter-spacing: -.02em;                  /* -0.6 / 30 */
  color: #000;
}
.hcard__sub { font-size: clamp(13px, 2.3952cqw, 16px); color: #000; }  /* 16 / 668 */
/* widths resolve against the card's CONTENT box (728 - 30 - 30 = 668) */
.hcard--trt .hcard__title { width: 34.7305%; }  /* 232 / 668 */
.hcard--trt .hcard__sub   { width: 42.0659%; margin-top: min(.5vw, 8px); }   /* 281 / 668 */
.hcard--hgh .hcard__title { width: 49.7006%; }  /* 332 / 668 */
.hcard--hgh .hcard__sub   { width: 46.7066%; margin-top: min(.6875vw, 11px); } /* 312 / 668 */

/* 15:90 — "50 states" seal, drawn last on the artboard.
   Figma crops the asset inside a 236x189 window, so the box and the leaf
   are sized separately. */
.badge-crop { position: relative; overflow: hidden; }
.badge-crop img {
  position: absolute;
  left: -14.83%; top: -.13%;
  width: 129.66%; height: 106.09%;
  max-width: none;
  object-fit: cover;
}
.hero__badge {
  position: absolute;
  top: min(2.4375vw, 39px);                /* 201 - 162 */
  right: 6.0625%;                          /* (1600 - 1503) / 1600 */
  width: 14.75%;                           /* 236 / 1600 */
  max-width: 236px;
  aspect-ratio: 236 / 189;
  z-index: 2;
}

/* ============================================= "SOUND FAMILIAR?" BAND ==== */
/* No radius on top. 2:544 carries rounded-tl/tr, but its wrapper applies
   -scale-y-100, which flips those corners to the BOTTOM — where the About
   panel (starting 46px early) covers them. Square top, as rendered. */
.band {
  background-image: linear-gradient(36.15382732339313deg, var(--c-blue) 5.2534%, var(--c-red) 76.005%);
  padding-top: clamp(32px, 3.75vw, 60px);
  padding-bottom: clamp(54px, 6.5625vw, 105px);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 120px;
  padding: clamp(7px, .875vw, 14px) clamp(11px, 1.3125vw, 21px);
  font-family: var(--f-body);
  font-size: var(--fs-31);
  line-height: 1.5;
  text-transform: capitalize;
  white-space: pre;                        /* 2:547 keeps its trailing space */
}
.pill--light { color: #fff; }
.pill--dark  { color: #000; }

.pain { text-align: center; }
.pain__grid {
  margin-top: clamp(26px, 3.125vw, 50px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.35501%;                           /* 20 / 1476 */
  text-align: left;
}
.pcard {
  position: relative;
  background: #fff;
  border-radius: var(--r-20);
  min-height: clamp(84px, 9.375vw, 150px);
  display: flex;
  align-items: center;
  /* 2:536/2:535/2:534 use px-60; only 2:537 is pl-40 / pr-80. Either way the
     text box lands on 234, which is why the title below is width:100%. */
  padding: clamp(24px, 2.8125vw, 45px) 16.9492% clamp(20px, 2.3125vw, 37px);
}
.pcard--first { padding-left: 11.2994%; padding-right: 22.5989%; }  /* 40 / 80 */
.pcard__title {
  width: 100%;                             /* the 234px Figma box IS the content box */
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-28);
  line-height: 1.14;
  letter-spacing: -.02em;                  /* -0.56 / 28 */
  text-transform: capitalize;
  color: #000;
}
.pcard__icon {
  position: absolute;
  top: clamp(9px, 1vw, 16px);
  right: 4.5198%;                          /* 16 / 354 */
  width: clamp(32px, 3.5vw, 56px);
  height: auto;
}

.pain__note {
  margin: clamp(22px, 2.6875vw, 43px) auto 0;
  width: 59.2818%;                         /* 875 / 1476 */
  font-size: var(--fs-16);
  color: #fff;
  text-align: center;
}
.band__rule {
  margin-top: clamp(25px, 3.0625vw, 49px);
  border-top: 1px solid rgba(255, 255, 255, .59);
}

/* ------------------------------------------------------------- WELCOME --- */
.welcome {
  margin-top: clamp(22px, 2.625vw, 42px);
  display: grid;
  grid-template-columns: 40.8537% 51.355%; /* 603 / 1476 and 758 / 1476 */
  column-gap: 4.4038%;                     /* 65 / 1476 */
  align-items: center;
}
.welcome__media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 603 / 644;
  border-radius: var(--r-20);
  overflow: hidden;
}
.welcome__bg {
  position: absolute;
  left: -36.27%; top: -26.49%;
  width: 164.68%; height: 231.29%;
  max-width: none;
  object-fit: cover;
}
/* 2:596's #87b9e1 hard-light wash. Paint order inside .welcome__media must be
   photo → wash → outer ring → inner ring → cut-out, exactly as Figma stacks
   them. As a ::after this sat last in tree order and washed OVER the rings,
   turning the exclusion ring into a visible pale disc. Diffed against the
   Figma render: 3.91 in this order vs 8.04 with the wash on top. */
.welcome__wash {
  position: absolute; inset: 0;
  background: var(--c-blue);
  mix-blend-mode: hard-light;
}
.welcome__ring { position: absolute; border-radius: 50%; }
.welcome__ring--outer {                    /* 2:602 */
  left: 6.4677%; top: 10.0932%;
  width: 86.899%; aspect-ratio: 1;
  background: rgba(243, 104, 105, .39);
  mix-blend-mode: exclusion;
}
.welcome__ring--inner {                    /* 2:600 */
  left: 14.4279%; top: 17.5466%;
  width: 70.9784%; aspect-ratio: 1;
  background: var(--c-red);
  mix-blend-mode: hard-light;
}
.welcome__cut {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;                        /* matches the Figma stretch */
  object-position: bottom;
  z-index: 1;
}
.welcome__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 97.098%;                      /* 736 / 758 */
}
.welcome__body {
  margin-top: clamp(11px, 1.3125vw, 21px);
  font-size: var(--fs-16);
  color: #fff;
}

/* =============================================================== ABOUT === */
.about {
  position: relative;
  z-index: 1;
  margin-top: -46px;                       /* panel 2156 vs band end 2202 */
  background: #fff;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  overflow: hidden;
  padding-top: clamp(40px, 4.75vw, 76px);
  padding-bottom: clamp(120px, 61.4375vw, 983px);
  text-align: center;
}
.about__art { position: absolute; inset: 0; overflow: hidden; }
.about__photo, .about__cut {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 53% 62%;                /* runner centroid, measured from alpha */
}
.about__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.about__inner { position: relative; z-index: 1; }

.about__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #000;
}
/* background-clip:text paints the gradient across the ELEMENT box, so as a
   full-width block only the middle ~45% of the ramp ever landed on the glyphs
   and the ends read washed out. Shrink-to-fit puts the box on the text (658px
   at the artboard, matching 2:610) so the ramp runs end to end as designed. */
.about__kicker {
  display: inline-block;
  margin-top: clamp(11px, 1.3125vw, 21px);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--fs-23);
  background-image: linear-gradient(to right, var(--c-blue), var(--c-red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about__body {
  margin: clamp(11px, 1.3125vw, 21px) auto 0;
  width: 77.8293%;
  font-size: var(--fs-16);
  color: #000;
}
.readmore {
  display: inline-flex;
  align-items: center;
  gap: min(.3125vw, 5px);
  margin-top: clamp(18px, 2.1875vw, 35px);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--fs-17);
  color: #000;
}
.readmore img { width: min(1vw, 16px); height: auto; min-width: 12px; }

.partners {
  margin-top: clamp(27px, 3.28125vw, 52.5px);
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.partners__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(5.1vw, 81.6px);                 /* 81.6 measured between logo edges */
  flex: none;
  width: 100%;
}
.partners__track--clone { display: none; }
/* widths are % of the 1476 wrap; the img fills its li so the two agree */
.partners__track li { flex: none; }
.partners__track li:nth-child(1) { width: 12.2315%; }   /* 180.538 / 1476 */
.partners__track li:nth-child(2) { width: 10.4011%; }   /* 153.520 / 1476 */
.partners__track li:nth-child(3) { width: 8.1078%; }    /* 119.673 / 1476 */
.partners__track li:nth-child(4) { width: 21.7016%; }   /* 320.286 / 1476 */
.partners__track li img { width: 100%; height: auto; }

/* ============================================================ SERVICES === */
.services {
  position: relative;
  z-index: 2;
  margin-top: -34px;                       /* panel 3641 vs about photo end 3675 */
  background: #fff;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding-top: clamp(44px, 5.375vw, 86px);
  padding-bottom: clamp(62px, 7.53125vw, 120.5px);
}
.services__inner { text-align: center; }
.services__title {
  margin: clamp(20px, 2.5vw, 40px) auto 0;
  width: 50.6944%;                         /* 730 / 1440 */
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.14;
  letter-spacing: -.02em;
  text-transform: capitalize;
  color: #000;
}

.svc {
  margin-top: clamp(30px, 3.625vw, 58px);
  display: flex;
  flex-direction: column;
  /* a % row-gap resolves against an indefinite height, i.e. 0 — must be a length */
  gap: min(2vw, 32px);
  text-align: left;
}
.svc__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.2222%; }
.svc__row--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.scard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-cardborder);
  border-radius: var(--r-16);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .07);
  aspect-ratio: 458.667 / 340;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* NB: padding stays viewport-based on purpose. Sizing a query container's own
     padding in cqw is circular (the padding defines the content box that cqw
     measures). It isn't needed anyway — see the nowrap note below. */
  container-type: inline-size;
  padding: min(2vw, 32px);
}
.scard--lg { aspect-ratio: 704 / 420; }
.scard__art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.scard__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
}
.scard__img--trt { top: .02%; width: 100%;   height: 121.29%; }
.scard__img--hgh { top: -5.98%; width: 99.98%; height: 114.56%; }
/* Figma's scrim, unmodified: one "transparent -> 55% -> rgba(0,0,0,.7)" ramp on
   every card. An earlier revision strengthened five of these to reach 4.5:1 for
   the white titles; that was reverted on request because it visibly departed
   from the design (diffed against the Figma render, Peptide scored 54.4 with
   the stronger scrim vs 7.9 with this one). See the contrast note in README §4
   — five cards sit below 4.5:1 with this scrim. */
.scard__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, .7) 100%);
}
.scard__title {
  position: relative;
  z-index: 1;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: min(6.5879cqw, 26px);         /* 26 / (458.667 - 64) content box */
  line-height: 1.2;
  color: #fff;
}
.scard--lg .scard__title { font-size: min(4.6875cqw, 30px); }   /* 30 / (704 - 64) */

/* 5:23 is whitespace-nowrap in Figma. Because cqw IS 1% of the content box, the
   condition is padding-independent: the string measures 21.363x its font size,
   so it fits on one line whenever font-size <= 100/21.363 = 4.681cqw, at every
   width. 4.55 leaves margin. (At 30px it wants 641px against 633px available,
   which is exactly why it was wrapping to two lines.) */
.scard--trt .scard__title {
  white-space: nowrap;
  font-size: min(4.55cqw, 29.5px);
}

/* ------------------------------------------------------- ACTION ROW ------ */
.actionrow {
  margin-top: clamp(36px, 4.375vw, 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(2.5vw, 40px);
  background-image: linear-gradient(to right, var(--c-red), var(--c-blue));
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: var(--r-24);
  padding: min(2vw, 32px) min(2.5vw, 40px);
  text-align: left;
}
.actionrow__text {
  width: 58.8235%;                         /* 800 / (1440 - 40 - 40) content box */
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-35);
  line-height: 1.2;
  color: #fff;
}
.tel--action { padding: min(1vw, 16px) min(2vw, 32px); border-radius: min(.75vw, 12px); }
.tel--action .tel__num { color: #fff; }

/* ======================================================== TESTIMONIALS === */
.testimonials {
  position: relative;
  z-index: 3;
  margin-top: -32px;                       /* 5888 vs services end 5920 */
  overflow: hidden;
  background: rgba(247, 165, 102, .22);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding-top: clamp(60px, 7.5vw, 120px);
  padding-bottom: clamp(52px, 6.375vw, 102px);
}
/* 10:38 — the giant open-quote. The design context reports fill:transparent and
   that is literally true: Figma draws it as an OUTLINE, with a stroke on the
   text that the codegen dropped (Tailwind has no text-stroke utility). Scanning
   the Figma render, the contour crosses a single 5.14px sample at ~25% coverage
   (darkest FADABF over a FCEBDD ground) — i.e. a ~1.3px hairline of #F7A566. */
.testimonials__quote {
  position: absolute;
  left: 64.875%;                           /* 1038 / 1600 */
  top: calc(min(5.1875vw, 83px) + .37021em);
  font-family: var(--f-quote);
  font-size: min(97.0726vw, 1553.161px);
  /* line-height 0 puts the baseline at a known offset, so the glyph's INK top
     can be placed on the Figma y (83) rather than its line box.
     0.37021em = (fontBoundingBoxAscent - actualBoundingBoxAscent + fbbDesc)/2 /em */
  line-height: 0;
  color: transparent;
  -webkit-text-stroke-color: var(--c-orange);
  -webkit-text-stroke-width: max(1px, min(.08125vw, 1.3px));
  pointer-events: none;
  user-select: none;
}
.testimonials__inner { position: relative; z-index: 1; }
.testimonials__title {
  margin-top: clamp(22px, 2.75vw, 44px);
  width: 45.7143%;                         /* 640 / 1400 */
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--c-ink);
}
.tgrid {
  margin-top: clamp(22px, 2.75vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2857%;                            /* 32 / 1400 */
  /* Figma staggers the tops by 48 and lands every card on a common bottom
     (380/376/380/376). Content-height cards drifted apart instead — a 26px
     spread at 1600 — so the columns stretch and the cards fill them: tops stay
     exactly 48 apart, bottoms line up at every width. */
  align-items: stretch;
}
.tcol { display: flex; flex-direction: column; }
.tcol--offset { padding-top: min(3vw, 48px); }
.tcard {
  background: #fff;
  border-radius: var(--r-16);
  padding: min(2vw, 32px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: min(1.5vw, 24px);
  filter: drop-shadow(0 12px 12px rgba(92, 69, 88, .07));
}
/* slack goes into the quote so the rule + client stay pinned to the card foot */
.tcard__quote { flex: 1 1 auto; }
.tcard__top { display: flex; align-items: center; justify-content: space-between; }
.tcard__q {
  flex: none;
  width: min(2.5vw, 40px); height: min(2.5vw, 40px);
  min-width: 32px; min-height: 32px;
  border-radius: min(1.25vw, 20px);
  background: rgba(243, 104, 105, .08);
  display: flex; align-items: center; justify-content: center;
}
.tcard__q img { width: min(1vw, 16px); height: auto; min-width: 14px; }
.stars { display: inline-flex; gap: min(.25vw, 4px); }
.stars img { width: min(.875vw, 14px); height: auto; min-width: 12px; }
.stars--tight { gap: min(.125vw, 2px); }
.tcard__quote { font-size: var(--fs-16); line-height: 1.6; color: var(--c-ink); }
.tcard__rule { border-top: 1px solid var(--c-hairline); }
.tcard__user { display: flex; align-items: center; gap: min(1vw, 16px); }
.tcard__avatar {
  flex: none;
  width: min(3vw, 48px); height: min(3vw, 48px);
  min-width: 40px; min-height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-red);
}
.tcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tcard__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcard__name { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-18); color: var(--c-ink); }
.tcard__role { font-size: var(--fs-13); color: var(--c-muted); }

/* ============================================================== FOOTER === */
.site-footer { position: relative; z-index: 4; background: var(--c-navy); color: #fff; }
.site-footer__main { padding: min(3vw, 48px) 0; }
.footer__cols { position: relative; display: flex; gap: 2.7778%; }  /* 40 / 1440 */
.fcol--brand    { width: 22.2222%; }       /* 320 / 1440 */
.fcol--links    { width: 13.8889%; }       /* 200 / 1440 */
.fcol--services { width: 18.0556%; }       /* 260 / 1440 */
.fcol--contact  { width: 34.7222%; }       /* 500 / 1440 */

/* 24px is a length, not min(1.5vw,24px): the logo overflows its frame by a
   fixed 16px top and bottom by design, so a gap that shrinks with the viewport
   lets the two merge on narrow screens. */
.fcol--brand { display: flex; flex-direction: column; gap: 24px; }
/* 16:135 — a 180x50 frame with a 206x82 logo centred and overflowing it,
   exactly as drawn. The box height must not follow the leaf. */
/* The box height must track its own WIDTH, not the viewport. As `min(3.125vw,
   50px)` the frame collapsed to ~28px on tablet while the logo — sized as a
   percentage of the frame — grew to ~100px, so it spilled ~36px into a 13.5px
   gap and collided with the text below. aspect-ratio is safe here because the
   image is absolutely positioned and cannot push the box. */
.fcol__logo {
  position: relative;
  width: 56.25%;                           /* 180 / 320 */
  aspect-ratio: 180 / 50;
  border: 1px solid var(--c-slate-line);
  border-radius: 4px;
}
.fcol__logo img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 114.444%;                         /* 206 / 180 */
  max-width: none;
  height: auto;
}
.fcol__info { display: flex; flex-direction: column; gap: min(.75vw, 12px); }
.fcol__name { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-18); color: #fff; }
.fcol__blurb { font-family: var(--f-ui); font-size: var(--fs-13); line-height: 1.6; color: var(--c-slate); }

.social { display: flex; align-items: center; gap: min(1vw, 16px); }
.social li { flex: 1 1 0; min-width: 0; }
.social__link {
  aspect-ratio: 1;
  background: var(--c-slate-bg);
  border: 1px solid var(--c-slate-line);
  border-radius: min(1.125vw, 18px);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.social__link:hover { background: var(--c-red); }
.social__link img { width: min(1vw, 16px); height: auto; min-width: 14px; }

.fcol--links, .fcol--services, .fcol--contact { display: flex; flex-direction: column; gap: min(1.5vw, 24px); }
.fcol__head { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-16); text-transform: uppercase; color: #fff; }
.flist { display: flex; flex-direction: column; gap: min(.875vw, 14px); }
.flist--contact { gap: min(.75vw, 12px); }
.flist a, .flist span {
  display: flex; align-items: center; gap: min(.5vw, 8px);
  font-family: var(--f-ui);
  font-size: var(--fs-14);
  color: var(--c-slate);
  transition: color .15s ease;
}
.flist--contact a, .flist--contact span { gap: min(.625vw, 10px); }
.flist a:hover { color: #fff; }
.flist img { flex: none; width: min(.625vw, 10px); height: auto; min-width: 9px; }
.flist--contact img { width: min(.875vw, 14px); min-width: 12px; }

/* 15:93 — a white ellipse sits behind the seal in the footer.
   The offset is POSITIVE: the ellipse starts 43.78px inside the badge box
   (1263.78 - 1220). With the sign flipped it sat outside the left edge and
   overflow:hidden sliced a quarter of the seal away. */
.footer__badge::before {
  content: "";
  position: absolute;
  left: 16.05%; top: 5.16%;                /* 43.78/272.58 and 11.3/218.91 */
  width: 67.36%; height: 86.45%;
  border-radius: 50%;
  background: #fefefe;
}
.footer__badge {
  position: absolute;
  top: min(1.3125vw, 21px);                /* 69 - 48 */
  right: 1.9042%;                          /* 27.42 / 1440 */
  width: 18.9292%;                         /* 272.58 / 1440 */
  aspect-ratio: 272.58 / 218.91;
}

.site-footer__bottom { background: var(--c-navy-deep); border-top: 1px solid var(--c-slate-line); }
.footer__bottomrow { display: flex; align-items: center; justify-content: space-between; gap: min(1.5vw, 24px); padding: min(1.5vw, 24px) 0; }
.footer__copy { font-family: var(--f-ui); font-size: var(--fs-13); color: var(--c-slate); }
.footer__rating { display: flex; align-items: center; gap: min(.5vw, 8px); }
.footer__ratingtext { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-13); color: #fff; }
.policy { display: flex; align-items: center; gap: min(1vw, 16px); }
.policy a { font-family: var(--f-ui); font-size: var(--fs-13); color: var(--c-slate); white-space: nowrap; }
.policy a:hover { color: #fff; }
.policy__sep { width: 1px; height: 12px; background: var(--c-slate-line); flex: none; }

/* ===================================================== NAV / BACKDROP ==== */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .2s ease;
}
.nav-backdrop.is-open { opacity: 1; }

/* ========================================================================== */
/*  BREAKPOINT 1  —  1200px                                                   */
/* ========================================================================== */
@media (max-width: 1200px) {
  .pain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.71002%; row-gap: min(1.25vw, 20px); }
  /* The Figma insets are ~17% of the card, which reads as a 57px gutter once
     the cards drop to 2-up. Flat 20px instead, and the icon leaves its absolute
     top-right corner to sit in flow on the heading's centre line. */
  .pcard, .pcard--first { padding: 20px; }
  .pcard { gap: 14px; justify-content: space-between; }
  .pcard__title { width: auto; flex: 1 1 auto; }
  .pcard__icon {
    position: static;                      /* reset the offsets with the position */
    top: auto; right: auto;
    flex: none;
    align-self: center;
  }
  /* Two-up, the 48px stagger just makes half the cards shorter than the other
     half. Dropped here, and grid-auto-rows:1fr equalises the rows, so all four
     boxes come out identical. */
  .tgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4.5714%;
    row-gap: min(3vw, 48px);
    grid-auto-rows: 1fr;
  }
  .tcol--offset,
  .tcol:nth-child(2),
  .tcol:nth-child(4) { padding-top: 0; }
  .testimonials__title { width: 70%; }
  .pain__note { width: 78%; }
}

/* ========================================================================== */
/*  BREAKPOINT 2  —  900px                                                    */
/* ========================================================================== */
@media (max-width: 900px) {
  :root { --header-h: 84px; }

  /* --- header becomes a hamburger --- */
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 3; margin-left: auto;
    width: 44px; height: 44px; padding: 10px 9px;
    /* no z-index: the panel covers it while open and carries its own close
       button, so the X no longer rides with the sticky header */
  }
  .burger span { display: block; height: 2px; background: #000; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .header__logo { order: 1; }
  .tel--header { order: 2; margin-left: auto; margin-right: 12px; }
  .tel--header .tel__num { font-size: clamp(15px, 2.2vw, 20px); }
  .tel__icon { width: clamp(30px, 4.2vw, 40px); }

  .nav {
    order: 4;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 340px);
    margin-left: 0;
    background: #fff;
    z-index: 55;
    /* Self-contained: the close button is inside the panel, so the content
       starts at the top regardless of where the sticky header sits. */
    display: flex;
    flex-direction: column;
    padding: 14px 28px 32px;
    transform: translateX(100%);
    transition: transform .24s ease;
    box-shadow: -10px 0 40px -14px rgba(0, 0, 0, .35);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }

  .nav__close {
    display: block;
    position: relative;
    align-self: flex-end;
    flex: none;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
  }
  .nav__close span {
    position: absolute;
    left: 9px; top: 19px;
    width: 22px; height: 2px;
    background: #000;
    border-radius: 2px;
  }
  .nav__close span:first-child { transform: rotate(45deg); }
  .nav__close span:last-child  { transform: rotate(-45deg); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link {
    display: block;
    font-size: 15.5px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }
  .nav__link.is-active { border-bottom-color: var(--c-red); }
  body.nav-open { overflow: hidden; }

  /* contact details fill the empty lower half of the panel */
  .nav__contact {
    display: block;
    margin-top: 28px;                      /* no rule above it — removed */
  }
  .nav__contact-head {
    font-family: var(--f-ui);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 14px;
  }
  .nav__contact-list { display: flex; flex-direction: column; gap: 12px; }
  .nav__contact-list a,
  .nav__contact-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    color: #3d3d3d;
  }
  .nav__contact-list a:hover { color: var(--c-red); }
  .nav__contact-list img { flex: none; width: 14px; height: auto; }

  /* --- hero --- */
  .hero__title, .hero__sub { max-width: 100%; text-align: center; }
  .hero__badge {
    /* stays `relative`, not `static` — it has an absolutely-positioned child
       that would otherwise escape the clip and re-anchor to .hero */
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    display: block;
    width: clamp(96px, 14vw, 140px);
    max-width: none;
    /* centred, and clear of the cards above it. It sits outside .hero__inner,
       so margin-left:auto used to shove it to the bare viewport edge. */
    margin: 20px auto 14px;
  }
  .hero__cards { grid-template-columns: minmax(0, 1fr); gap: min(2.5vw, 20px); }
  /* the card is now ~artboard width, so the Figma text proportions and padding
     apply unchanged — which is also what keeps the copy clear of the model.
     Single-column, the card can exceed the artboard's 728px (815 at 900), so
     the 30/16 caps are lifted a little to stop the copy stranding at the top
     of a bigger box. The widths stay at the Figma fractions, which is what
     guarantees the text still clears the model. */
  .hcard__title { font-size: clamp(18px, 4.4910cqw, 34px); }
  .hcard__sub   { font-size: clamp(13px, 2.3952cqw, 18px); }

  /* --- welcome --- */
  .welcome {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(20px, 4vw, 36px);
    padding-bottom: 30px;                  /* requested breathing room below the copy */
  }
  .welcome__media { width: min(100%, 460px); margin-inline: auto; }
  .welcome__title { max-width: 100%; }
  .welcome__text { text-align: center; }   /* stacked, the copy centres under the photo */

  /* --- about ---
     Stacked, the full-bleed photo would be cropped to 2.17x at 375px. Instead
     the photo gets its own band at the asset's natural 1600:1518 proportions
     (zoom 1.00) and the copy sits on plain white above it. */
  /* At the asset's own 1600:1518 the band was 714px tall at 768 — and its top
     half is under the white scrim, so it read as a huge empty gap before the
     runner appeared. Cropped to 16:9 (424px) and re-anchored: the subject's
     alpha box (y 41.4-88.5%) still sits fully inside the visible window. */
  .about { padding-bottom: 56.25%; }       /* 9 / 16 */
  .about__art { inset: auto 0 0 0; aspect-ratio: 16 / 9; height: auto; }
  .about__photo, .about__cut { object-position: 53% 87%; }
  .about__body { width: 100%; }

  /* --- services --- */
  .services__title { width: 88%; }
  /* One uniform grid instead of 4 independent rows. Previously the two hero
     cards went full-width while the 3-up rows became 2 + an orphan, which read
     as a broken layout. `display: contents` drops the row wrappers so all 11
     cards become items of a single 2-column grid. */
  .svc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(3.4vw, 32px);
  }
  .svc__row { display: contents; }
  .scard--lg { aspect-ratio: 458.667 / 340; }
  /* Every card is the same size here, so every title is the same size too.
     The two hero cards were running 13.3 / 13.7px against 19.3px on the other
     nine. The TRT title drops its nowrap and wraps to two lines, which is
     fine at this size. */
  .scard--lg .scard__title,
  .scard--trt .scard__title {
    font-size: min(6.5879cqw, 26px);
    white-space: normal;
  }
  .actionrow { flex-direction: column; align-items: flex-start; gap: 20px; }
  .actionrow__text { width: 100%; }
  /* stacked, the button's own 32px inset pushed the phone off the headline's
     left edge — zero it so both start on the row's padding edge */
  .tel--action { padding-left: 0; padding-right: 0; }

  /* --- testimonials --- */
  .testimonials__title { width: 100%; }
  .testimonials__quote { font-size: 620px; left: 52%; top: 40px; }

  /* --- footer --- */
  /* Pin the logo frame to its design size and hold the 24px gap as a length.
     The logo overflows its frame by 16px top and bottom BY DESIGN (206x82 in a
     180x50 box), so the gap below it must stay >= that or the two merge. */
  .fcol__logo { width: 180px; max-width: 100%; }
  .fcol--brand { gap: 24px; }
  .footer__cols { flex-wrap: wrap; gap: 32px 4%; }
  .fcol--brand    { width: 48%; }
  .fcol--links    { width: 48%; }
  .fcol--services { width: 48%; }
  .fcol--contact  { width: 48%; }
  .site-footer__main { padding-top: calc(min(3vw, 48px) + 30px); }
  /* Seal tucks into the empty space under Contact Us, right-aligned. The void
     is there because Contact is ~52px shorter than Services beside it, so the
     seal is pulled up into it. align-items:flex-start stops the columns
     stretching, which keeps the seal's box clear of Contact's. */
  .footer__cols { align-items: flex-start; }
  .footer__badge {
    position: relative;                    /* not static — see .hero__badge */
    top: auto; right: auto; bottom: auto; left: auto;
    display: block;
    width: 150px;
    margin: -60px 0 0 auto;
  }
  .footer__bottomrow { flex-wrap: wrap; justify-content: flex-start; gap: 12px 20px; }
  .policy { flex-wrap: wrap; }
}

/* ========================================================================== */
/*  BREAKPOINT 3  —  600px                                                    */
/* ========================================================================== */
@media (max-width: 600px) {
  :root {
    --header-h: 76px;
    /* Display headings ran to three lines on phones. The longest unbreakable
       first line, "A Decade Of Performance", measures 12.114x its font size.
       Careful: vw counts the scrollbar but the available width does not, so
       the ceiling is (0.9225V - scrollbar) / (0.12114V) -> ~7.23vw at 320 with
       a 15px bar, ~7.6vw without one. 7vw clears both, leaving ~9px of margin
       at 320 and ~13px at 375. */
    --fs-h1: min(7vw, 30px);
  }

  .topbar { height: 62px; padding-top: 7px; }
  .topbar__text { font-size: 12px; padding-inline: 12px; }
  .site-header { margin-top: -28px; }
  .stick-sentinel { top: 34px; }

  /* --- hero cards stack: photo band on top, copy below on the bare gradient.
     Overlaying text on a 331px-wide card put it straight across the model at
     every phone width, so the two are separated instead. The band is set to
     the assets' own 1.92:1 proportions, so `cover` barely crops and the whole
     model stays visible. */
  .hero__cards { gap: 16px; }
  .hcard {
    aspect-ratio: auto;
    min-height: 0;
    display: block;
    padding: 0;
  }
  /* Band is deliberately TALLER than the assets (1.4 vs their ~1.92). At the
     asset ratio there is no horizontal overflow, so object-position has nothing
     to slide and each model sits wherever the source put them — the woman's
     alpha box centres on 62.3%, i.e. well right of centre. A taller band makes
     `cover` scale by height, which crops sideways only: the models stay whole
     top-to-bottom and can be slid horizontally. */
  .hcard .hcard__photos {
    inset: 0 0 auto 0;
    aspect-ratio: 728 / 520;
    overflow: hidden;
  }
  .hcard .hcard__photos .hcard__bg,
  .hcard .hcard__photos .hcard__cut {
    left: 0; top: 0; right: auto; bottom: auto;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* solved so each subject's alpha box centres in the visible window */
  .hcard--hgh .hcard__photos .hcard__bg,
  .hcard--hgh .hcard__photos .hcard__cut { object-position: 96% 50%; }
  /* the man's box already runs to the source's right edge (x 36.6-99.9%), so
     100% is as centred as he goes without exposing bare canvas */
  .hcard--trt .hcard__photos .hcard__bg,
  .hcard--trt .hcard__photos .hcard__cut { object-position: 100% 50%; }
  .hcard--hgh .hcard__cutwrap { left: 0; width: 100%; }
  .hcard__body {
    display: flex;
    flex-direction: column;
    align-items: center;                       /* icon + copy centre under the band */
    text-align: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    padding: calc(71.429% + 16px) 20px 22px;   /* 520 / 728 clears the band */
  }
  .hcard__title, .hcard__sub { width: 100% !important; }
  .hcard__title { font-size: clamp(19px, 6.6cqw, 26px); }
  .hcard__sub   { font-size: clamp(13px, 3.9cqw, 16px); }

  .pain__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pcard, .pcard--first { padding: 20px; min-height: 96px; }
  .pain__note { width: 100%; }

  .welcome__media { width: 100%; }

  /* wide logo strip reads better as a marquee than a wrapped block */
  .partners { justify-content: flex-start; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
  .partners__track { justify-content: flex-start; min-width: max-content; gap: 40px; padding-right: 40px; animation: partners-slide 22s linear infinite; }
  .partners__track--clone { display: flex; }
  .partners__track li:nth-child(1) { width: 120px; }
  .partners__track li:nth-child(2) { width: 102px; }
  .partners__track li:nth-child(3) { width: 80px; }
  .partners__track li:nth-child(4) { width: 213px; }
  @keyframes partners-slide { from { transform: translateX(0); } to { transform: translateX(-100%); } }

  /* full width, so "Everything Runs Through" (11.513x) clears its line */
  .services__title { width: 100%; }
  .svc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .scard, .scard--lg { aspect-ratio: 16 / 11; padding: 20px; }
  .scard__title { text-align: center; }

  .tgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tcol:nth-child(2), .tcol:nth-child(4) { padding-top: 0; }
  .tcard { padding: 22px; gap: 16px; }

  .testimonials__quote { font-size: 380px; left: 46%; top: 24px; }

  .fcol--brand, .fcol--links, .fcol--services, .fcol--contact { width: 100%; }
  .footer__cols { gap: 28px; }
  .fcol__logo { width: 180px; }
  .social li { flex: 0 0 56px; }
  /* stacked, the headline and the phone button centre together, sit closer,
     and the box gets real breathing room top and bottom (was 7.5px at 375) */
  .actionrow { align-items: center; text-align: center; gap: 12px; padding: 22px 20px; }

  /* +30px under the column stack, +10px top and bottom on the legal bar */
  .site-footer__main { padding-bottom: calc(min(3vw, 48px) + 30px); }
  .footer__bottomrow { padding: calc(min(1.5vw, 24px) + 10px) 0; }

  /* Single column, so the Contact list only fills the left ~150px and the right
     of that block is dead space. The seal moves into it — taken out of flow and
     pinned bottom-right of the column stack, which also removes the empty band
     it used to occupy on its own row. Width is capped as a share of the stack
     so it keeps clear of the contact text on narrow phones. */
  .footer__badge {
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto; left: auto;
    width: min(120px, 38%);
    margin: 0;
  }
}

/* very narrow safety */
@media (max-width: 400px) {
  .tel--header .tel__num { font-size: 14px; }
  .tel__icon { width: 28px; }
}