/* ============================================================================
   FHA — Section 5 : REVIEWS (51 Testimonials · 52 Ratings · 53 Transformations)
   Loads AFTER section4.css, BEFORE section3.css. Pages carry body classes
   `s2 s3 s4 s5 s5-<page>`; every override of an S2/S3/S4 masthead/title
   declaration carries the page class for +1 specificity (the standing law).
   One link per stylesheet, ordered — the round-6 duplicate-link lesson. */

@media (min-width: 992px) {

  /* ---- masthead: Reviews + TESTIMONIALS --------------------------------
     Art 1709x607 (aspect 2.816). Height law clamp(89.6px,7.1168vw,120px).
     TESTIMONIALS caps centre measured at 64.63% -> translateX(-14.63%),
     on the a > img ALONE (the double-shift law). */
  .s5.s5-testimonials.theme-teal .banner .banner-detail-container .brand-logo *,
  .s5.s5-testimonials.theme-teal .banner .banner-detail-container .brand-logo img,
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .brand-logo *,
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .brand-logo img,
  .s5.s5-transformations.theme-teal .banner .banner-detail-container .brand-logo *,
  .s5.s5-transformations.theme-teal .banner .banner-detail-container .brand-logo img {
    width: auto; height: clamp(89.6px, 7.1168vw, 120px);
    max-width: none; object-fit: contain; margin-left: 0; margin-right: 0;
    transform: none; }
  .s5.s5-testimonials.theme-teal .banner .banner-detail-container .brand-logo a > img,
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .brand-logo a > img,
  .s5.s5-transformations.theme-teal .banner .banner-detail-container .brand-logo a > img {
    transform: translateX(-14.63%); }
  .s5.s5-testimonials.theme-teal .banner .banner-detail-container .brand-logo,
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .brand-logo,
  .s5.s5-transformations.theme-teal .banner .banner-detail-container .brand-logo {
    width: auto; max-width: none; margin: 0 auto 1.7vw; justify-content: center; }

  /* ---- page titles + scripts on the GOLD CORES (21.59 / 20.12 at 1440).
     Heights = core / corefrac; corefracs measured off the baked/re-inked art:
     ttl-testimonials .7810 -> 27.64px = 1.9195vw
     ttl-ratings      .7681 -> 28.11px = 1.9518vw
     ttl-transformations .7664 -> 28.17px = 1.9562vw
     sub corefracs filled by build (see section5 build log). */
  .s5.s5-testimonials.theme-teal .banner .banner-detail-container .menu-log img {
    width: auto; height: clamp(19.05px, 1.9195vw, 28.79px);
    max-width: none; object-fit: contain; }
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .menu-log img {
    width: auto; height: clamp(19.37px, 1.9518vw, 29.28px);
    max-width: none; object-fit: contain; }
  .s5.s5-transformations.theme-teal .banner .banner-detail-container .menu-log img {
    width: auto; height: clamp(19.41px, 1.9562vw, 29.34px);
    max-width: none; object-fit: contain; }
  .s5.s5-testimonials.theme-teal .banner .banner-detail-container .details .our-mission-img *,
  .s5.s5-testimonials.theme-teal .banner .banner-detail-container .details .our-mission-img img {
    width: auto; height: clamp(30.4px, 3.0445vw, 45.7px);
    max-width: none; object-fit: contain; }
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .details .our-mission-img *,
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .details .our-mission-img img {
    width: auto; height: clamp(29.0px, 2.9019vw, 43.5px);
    max-width: none; object-fit: contain; }
  .s5.s5-transformations.theme-teal .banner .banner-detail-container .details .our-mission-img *,
  .s5.s5-transformations.theme-teal .banner .banner-detail-container .details .our-mission-img img {
    width: auto; height: clamp(29.9px, 3.0004vw, 45.0px);
    max-width: none; object-fit: contain; }
  .s5.s5-testimonials.theme-teal .banner .banner-detail-container .details .our-mission-img,
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .details .our-mission-img,
  .s5.s5-transformations.theme-teal .banner .banner-detail-container .details .our-mission-img {
    margin-top: 2px; margin-bottom: clamp(4px, .5vw, 8px); }

  /* ---- the ★★★★★ strip under the RATINGS title ------------------------- */
  .s5 .s5starsRow { text-align: center; line-height: 0; margin: 0 0 clamp(4px,.7vh,8px); }
  .s5 .s5starsRow img { width: auto; height: clamp(11px, 1.9vh, 17px); }

  /* ---- the review carousel --------------------------------------------- */
  .s5 .s5main { display: flex; flex-direction: column; justify-content: center;
    flex: 1 1 auto; min-height: 0; }
  .s5 .s5mod { position: relative; perspective: 1200px; }
  .s5 .s5spot { display: flex; flex-direction: column; align-items: center;
    perspective: 1100px; }
  .s5 .s5slide { display: flex; flex-direction: column; align-items: center;
    width: 100%; }
  /* panel: pxd 950x850u, LIQUID GLASS, live text sized by container units */
  .s5 .s5card { position: relative; width: min(88%, 42vh);
    aspect-ratio: 950 / 850; container-type: inline-size; z-index: 1; }
  /* 53's tile is TALLER (950:1000, the pxd) — width capped so the height
     stays inside the same vertical budget */
  .s5.s5-transformations .s5card, .s5.s5-portfolio .s5card { aspect-ratio: 950 / 1000;
    width: min(85.5%, 39vh); }

  /* nav: chrome ctls + 9 live dots with the directional gradient trail */
  .s5 .s5nav { display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: clamp(2px,.5vh,5px); margin-top: clamp(5px,.9vh,9px); }
  .s5 .s5ctl { position: relative; border: 0; background: none; cursor: pointer;
    padding: 0 6px; height: clamp(13px,2vh,17px); }
  .s5 .s5ctl img { height: 100%; width: auto; display: block;
    transition: opacity .15s ease; }
  .s5 .s5ctl img.p { position: absolute; left: 6px; top: 0; opacity: 0; }
  .s5 .s5ctl:hover img.p, .s5 .s5ctl:active img.p, .s5 .s5ctl.held img.p { opacity: 1; }
  .s5 .s5dots { display: flex; gap: max(0px, calc(clamp(6px,1.1vh,11px) - 8px));
    width: 100%; justify-content: center; margin-top: clamp(3px,.6vh,6px); }
  /* AUDIT r11: the dot keeps its size but the TAP TARGET grows via padding
     (background-clip keeps the padding invisible) */
  .s5 .s5dot { width: calc(clamp(7px,1.2vh,11px) + 8px); aspect-ratio: 1;
    border-radius: 50%; border: 0; padding: 4px; cursor: pointer;
    background: linear-gradient(135deg, #A2E7E8, #4DB1B1);
    background-clip: content-box;
    transition: opacity .3s ease, filter .2s ease; }
  .s5 .s5dot.on { filter: drop-shadow(0 2px 3px rgba(2,24,38,.55)); }

  /* descriptor + consult slot (the 42 descriptor law) */
  .s5 .s5svc { position: relative; width: 88%; margin-top: clamp(14px,2.4vh,24px); }
  .s5 .s5script { padding: clamp(2px,.4vh,4px) 0; margin-bottom: clamp(4px,.8vh,8px); }
  .s5 .s5script img { display: block; margin: 0 auto; width: auto;
    height: clamp(24px, 4.2vh, 40px); max-width: 92%; object-fit: contain;
    filter: drop-shadow(0 1px 0.5px rgba(2,24,38,.7)); } /* r13 shadow law */
  .s5 .s5svc .s2slot { margin-bottom: 0; }

  /* 52 round-9: the Questions thumb slot carries the Love-Your-Hair-Again
     review CTA instead (link to Google reviews) */
  .s5.s5-ratings .question .question-img { max-width: max(19.5vw, 228px); }
  /* the RATINGS leave-a-review CTA (mobile pane bottom; desktop uses the
     Questions slot, so the module's copy hides inside .banner) */
  .s5.s5-ratings .banner .s5review { display: none; }
  .s5 .s5review { text-align: center; line-height: 0; margin-top: clamp(6px,1vh,10px); }
  .s5 .s5review a { display: inline-block; }
  .s5 .s5review img { width: auto; height: clamp(15px,2.5vh,21px);
    filter: drop-shadow(0 1px 0.5px rgba(2,24,38,.6)); /* r13 shadow law */
    transition: filter .15s ease, transform .15s ease; }
  .s5 .s5review a:hover img { transform: scale(1.03); }

}


/* ---- COMPONENT CORE (desktop + mobile panes share these; sizes are
   container units, so they scale with whichever .s5card holds them.
   Round-9 lesson: these lived inside the desktop media query and the
   mobile pane rendered UNSTYLED — never scope cqw component rules. */
.s5 .s5face { position: absolute; inset: 0; border-radius: 2px;
  background: var(--fha-glass, rgba(235,248,249,.22));
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--fha-glass-edge, rgba(255,255,255,.35));
  box-shadow: var(--fha-glass-lift, inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(2,24,38,.25)); }
.s5 .s5txt { position: absolute; left: 6%; top: 4.5%; width: 88%; height: 91%;
  margin: 0; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; text-align: center; }
.s5 .s5txt p { margin: 0; font-family: 'Raleway', sans-serif; font-weight: 600;
  color: var(--fha-bright, #E7F4F4); font-size: 3.66cqw; line-height: 1.24;
  letter-spacing: -0.01em; text-shadow: 0 1px 1px rgba(2,44,68,.5);
  white-space: pre-line; }
/* the signature — HIS font (Distant Stroke, the pxd runs: 51 regular 150pt,
   52 Medium 120pt against the 55pt body) */
.s5 .s5txt .sig { margin: .25em 0 0; font-family: 'Distant Stroke', cursive;
  font-weight: 300; color: var(--fha-bright, #E7F4F4); font-size: 11cqw;
  line-height: 1; text-shadow: 0 1px 0.5px rgba(2,24,38,.8); white-space: nowrap; } /* r13b: harder */
/* r13: the dashes are RETIRED (his call) — the bare signature centers true */
.s5 .s5txt .sig .d { display: none; }
.s5 .s5txt .sig .d { font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: .47em; vertical-align: .14em; margin-right: .2em;
  color: var(--fha-bright, #E7F4F4); }
.s5.s5-ratings .s5txt .sig { font-weight: 500; font-size: 9cqw; }
/* emojis in the reviews render GRAYSCALE — his law: color emoji distracts */
.s5 .s5txt .emo, .s5 .s5story .emo { filter: grayscale(1) brightness(1.05);
  opacity: .9; }
/* 52: the five stars ride the TOP of each tile */
.s5 .s5txt .cstars { line-height: 0; margin-bottom: .8em; } /* r13: air under the stars */
.s5 .s5txt .cstars img { width: auto; height: 4.4cqw; display: inline-block; }
/* long reviews step down a size (flagged at build); their signatures step
   down with them so the panel budget holds */
.s5 .s5slide.longer .s5txt p:not(.sig) { font-size: 3.24cqw; line-height: 1.2; }
.s5 .s5slide.longer .s5txt .sig { font-size: 9.7cqw; }
.s5.s5-ratings .s5slide.longer .s5txt .sig { font-size: 8.1cqw; }

/* the edge slivers: gradient impressions of the neighbouring glass panels */
.s5 .s5peek { position: absolute; top: 7%; height: 86%; width: 25%;
  border: 0; padding: 0; background: none; cursor: pointer;
  overflow: hidden; z-index: 0; opacity: .5; transition: opacity .22s ease; }
.s5 .s5peek .g { position: absolute; top: 0; height: 100%; width: 400%;
  border-radius: 2px; background: var(--fha-glass, rgba(235,248,249,.22));
  border: 1px solid var(--fha-glass-edge, rgba(255,255,255,.35));
  box-shadow: 0 5px 12px rgba(2,24,38,.4); }
.s5 .s5peek img { position: absolute; top: 0; height: 100%; width: 400%;
  object-fit: cover; }
.s5 .s5peek.pkL { left: -28%;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.9), transparent 94%);
  mask-image: linear-gradient(to left, rgba(0,0,0,.9), transparent 94%); }
.s5 .s5peek.pkL .g, .s5 .s5peek.pkL img { right: 0; }
.s5 .s5peek.pkR { right: -28%;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.9), transparent 94%);
  mask-image: linear-gradient(to right, rgba(0,0,0,.9), transparent 94%); }
.s5 .s5peek.pkR .g, .s5 .s5peek.pkR img { left: 0; }
.s5 .s5peek:hover { opacity: .85; }

/* ---- 53: the flip card ------------------------------------------------ */
.s5 .s5flip { position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .4s ease-in-out; }
.s5 .s5flip.flipped { transform: rotateY(180deg); }
.s5 .s5flip .s5face { backface-visibility: hidden; }
.s5 .s5flip .s5back { transform: rotateY(180deg); }
/* 53's tile per HIS pxd (round-10 correction): the glass panel is 950x1000u,
   the photo an 850x850u SQUARE fully visible inside it (50u side + top
   margins, 100u bottom band) — NEVER crop his collages. Caption ABOVE the
   tile, exactly the pxd. */
.s5 .s5photo { position: absolute; left: 5.26%; top: 5%; width: 89.47%;
  height: 85%; object-fit: cover; border-radius: 2px;
  box-shadow: 0 2px 8px rgba(2,24,38,.35); backface-visibility: hidden; }
/* the name rides the glass band BELOW the photo (round-10b) */
.s5 .s5bcap { position: absolute; left: 12%; right: 12%; top: 90%;
  height: 10%; margin: 0; display: flex; align-items: center;
  justify-content: center; text-align: center;
  font-family: 'Playfair Display', serif; font-weight: 700; color: #DCE7EA;
  font-size: 3.15cqw; letter-spacing: .05em; line-height: 1.1;
  text-shadow: 0 1px 2px rgba(2,24,38,.6); }
.s5 .s5ic { position: absolute; right: 2.2%; bottom: 1.1%; width: 8.6%;
  aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer;
  display: block; z-index: 2; }
.s5 .s5ic img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transition: opacity .14s ease; }
.s5 .s5ic img.p { opacity: 0; }
.s5 .s5ic:hover img.p, .s5 .s5ic:active img.p { opacity: 1; }
.s5 .s5story { position: absolute; left: 6.5%; top: 6%; width: 87%; height: 88%;
  margin: 0; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; text-align: center; }
.s5 .s5story p { margin: 0; font-family: 'Raleway', sans-serif; font-weight: 500;
  color: var(--fha-bright, #E7F4F4); font-size: 3.66cqw; line-height: 1.28;
  text-shadow: 0 1px 1px rgba(2,44,68,.5); }
.s5 .s5story .pt { font-family: 'Playfair Display', serif; font-weight: 700;
  color: #DCE7EA; letter-spacing: .08em; margin-bottom: .5em; font-size: 3.4cqw; }
.s5 .s5slide.longer .s5story p { font-size: 3.34cqw; line-height: 1.24; }


/* short-viewport tier */
@media (min-width: 992px) and (max-height: 880px) {
  .s5 .s5card { width: min(84%, 38vh); }
  .s5.s5-transformations .s5card, .s5.s5-portfolio .s5card { width: min(81.5%, 34.7vh); }
  .s5 .s5script img { height: clamp(21px, 3.7vh, 33px); }
  .s5 .s5svc { margin-top: clamp(10px,1.8vh,18px); }
  .s5 .s5nav { margin-top: clamp(3px,.6vh,6px); }
  .s5 .s5dots { margin-top: 2px; }
  .s5 .s5starsRow { margin-bottom: 2px; }
  .s5 .s5starsRow img { height: clamp(10px, 1.6vh, 14px); }
  .s5 .s5review { margin-top: clamp(4px,.7vh,7px); }
  .s5 .s5review img { height: clamp(13px, 2.2vh, 18px); }
}

/* ---- slide + peek transitions: SHARED (the 42 swing language) ----------- */
.s5 .s5slide.inR { animation: s5in .42s cubic-bezier(.3,1.15,.5,1); }
.s5 .s5slide.inL { animation: s5inL .42s cubic-bezier(.3,1.15,.5,1); }
.s5 .s5slide.outL, .s5 .s5slide.outR { display: none; }
/* AUDIT r11b: the mobile pane's #fhaMobile display:flex out-ranked the line
   above, so the outgoing slide stayed in flow for 420ms and the incoming tile
   flashed BELOW it — the ID-scoped twin restores the intended vanish */
#fhaMobile.s5m .s5slide.outL, #fhaMobile.s5m .s5slide.outR { display: none; }
@keyframes s5in  { from { opacity: 0; transform: translateX(13%) rotateY(-22deg); } }
@keyframes s5inL { from { opacity: 0; transform: translateX(-13%) rotateY(22deg); } }
.s5mod [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .s5 .s5slide.inR, .s5 .s5slide.inL { animation: none; }
}

/* ---- the HERO quote wall (51/52): right-anchored, S fade ---------------- */
.s5 .s5hero { position: absolute; inset: 0; overflow: hidden;
  container-type: size; /* cq units drive the S centering below */ }
.s5 .s5hero .s5wall { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center; }
/* the quote space is WIDER than the wall canvas (his quotes ran past the
   right edge) — pinned to the RIGHT so nothing clips; the left slides under
   the column as the screen narrows (Steven's anchoring law) */
.s5 .s5hero .s5quotes { position: absolute; top: 0; height: 100%; right: 0;
  width: auto; /* inline aspect-ratio + the 100% height set the width */ }
.s5 .s5q { position: absolute; opacity: 0;
  filter: drop-shadow(0 2px 6px rgba(2,24,38,.35)); }
/* beat style.css's `.image *` (100%/100%/cover) and the services-page tab
   display:none — the shell body keeps its legacy classes (the cascade law) */
/* each quote fills its pxd box (inline l/t/w/h); the trimmed export letter-
   boxes inside it via contain, so ink lands centred on the box — no stretch */
.s5 .s5hero .s5q { object-fit: contain; }
.s5.services-page .tabing-container .image .s5hero img { display: block; }
.s5 .s5q.run { animation: s5qIn .95s ease forwards; }
@keyframes s5qIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .s5 .s5q { opacity: 1 !important; animation: none !important; }
}

/* ---- mobile pane -------------------------------------------------------- */
#fhaMobile.s5m .ptitle { max-height: 26px; max-width: 96%; } /* r12: hug the ink */
#fhaMobile.s5m .psub { max-height: 40px; max-width: 96%; } /* r12: hug the ink */
#fhaMobile.s5m .s5starsRow { text-align: center; margin: 0 0 6px; }
#fhaMobile.s5m .s5starsRow img { height: 14px; width: auto; }
#fhaMobile.s5m .s5mod { position: relative; perspective: 1100px; }
#fhaMobile.s5m .s5spot { display: flex; flex-direction: column; align-items: center; }
#fhaMobile.s5m .s5slide { display: flex; flex-direction: column; align-items: center; width: 100%; }
#fhaMobile.s5m .s5card { position: relative; width: 88%; aspect-ratio: 950/850;
  container-type: inline-size; z-index: 1; }
#fhaMobile.s5m .s5peek { width: 14%; }
#fhaMobile.s5m .s5peek.pkL { left: -15%; }
#fhaMobile.s5m .s5peek.pkR { right: -15%; }
#fhaMobile.s5m .s5peek .g, #fhaMobile.s5m .s5peek img { width: 715%; }
#fhaMobile.s5m .s5nav { display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 4px; margin-top: 8px; }
#fhaMobile.s5m .s5ctl { position: relative; border: 0; background: none;
  padding: 8px 10px; height: 31px; }
#fhaMobile.s5m .s5ctl img { height: 100%; width: auto; display: block; }
#fhaMobile.s5m .s5ctl img.p { position: absolute; left: 10px; top: 8px; opacity: 0; }
#fhaMobile.s5m .s5ctl:active img.p, #fhaMobile.s5m .s5ctl.held img.p { opacity: 1; }
#fhaMobile.s5m .s5dots { display: flex; gap: 0; width: 100%;
  justify-content: center; margin-top: 5px; }
#fhaMobile.s5m .s5dot { width: 17px; aspect-ratio: 1; border-radius: 50%;
  border: 0; padding: 4px; background: linear-gradient(135deg, #A2E7E8, #4DB1B1);
  background-clip: content-box; transition: opacity .3s ease, filter .2s ease; }
#fhaMobile.s5m .s5dot.on { filter: drop-shadow(0 2px 3px rgba(2,24,38,.55)); }
#fhaMobile.s5m .s5svc { position: relative; width: 94%; margin-top: 18px; }
#fhaMobile.s5m .s5script { padding: 3px 0; margin-bottom: 6px; }
#fhaMobile.s5m .s5script img { display: block; margin: 0 auto; width: auto;
  height: 30px; max-width: 92%; object-fit: contain;
  filter: drop-shadow(0 1px 0.5px rgba(2,24,38,.7)); } /* r13 shadow law */
#fhaMobile.s5m.pg-transformations .s5card,
#fhaMobile.s5m.pg-portfolio .s5card { aspect-ratio: 950/1000; }
/* r13b: the mobile leave-a-review prompt is RETIRED — the sticky footer's
   Google icon already carries the review link (his call) */
#fhaMobile.s5m .s5review { display: none; }
/* the mobile hero: blank wall (the entrance machinery slides it in), then the
   quote fade runs — section5.js starts it after the entrance settles. The
   quote space FITS the pane width (centered vertically) so no text clips. */
#fhaMobile.s5m .heroImg > img { object-position: right center; }
#fhaMobile.s5m .s5quotes { position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); width: 100%; height: auto; }
#fhaMobile.s5m .s5q { position: absolute; object-fit: contain; }

/* ==== r13: the 51-53 mobile choreography + REVIEW LEGIBILITY ============
   THE CONSULTATION docks into the CTA slot 3s after the column is seen
   (the title + couplet stay above the carousel — the tuck was retired,
   his call). Review text was ~10px on a phone — his
   glasses complaint. The card widens 88% -> 94% (raises every cqw unit with
   ZERO overflow risk — the type/panel ratio is scale-invariant), the text
   block fills more of the glass, sizes step up, and the ink gets the snug
   1px shadow. */
@media (max-width: 991px) {
#fhaMobile.s5m .svcDock .s5svc { width: 100%; margin: 0; }
#fhaMobile.s5m.ctuck .psub { margin-top: -54px; }  /* 40px script + margin */
/* r13d: SE-class short phones — the tall 53 card steps down so its dots
   clear the docked consultation */
/* r13d: height-aware card clamps — the dots always clear the docked
   consultation, whatever the viewport shape */
#fhaMobile.s5m .s5card { width: min(94%, calc((100dvh - 420px) * 1.0)); }
#fhaMobile.s5m.pg-transformations .s5card,
#fhaMobile.s5m.pg-portfolio .s5card { width: min(94%, calc((100dvh - 448px) * 0.95)); }
#fhaMobile.s5m .s5card { width: 94%; }
#fhaMobile.s5m .s5txt { left: 3.5%; width: 93%; top: 3%; height: 94%; }
#fhaMobile.s5m .s5txt p:not(.sig) { font-size: 4cqw; color: #F2FBFB;
  text-shadow: 0 1px 0.5px rgba(2,30,46,.6); }
#fhaMobile.s5m .s5slide.longer .s5txt p:not(.sig) { font-size: 3.5cqw; }
/* the #fhaMobile * margin reset (1,0,1) eats class-scoped margins — the
   MOBILE-SCOPE law: ID twins for the star gap and the signature gap */
#fhaMobile.s5m .s5txt .cstars { margin-bottom: .7em; }
#fhaMobile.s5m .s5txt .sig { margin-top: .25em; }
/* the one monster ratings review (slide 1) needs a hair back */
#fhaMobile.pg-reviews-ratings .s5slide.longer .s5txt p:not(.sig) { font-size: 3.42cqw; }
#fhaMobile.pg-reviews-ratings .s5slide.longer .s5txt .sig { font-size: 7.9cqw; }
}

/* ============================================================
   54 PORTFOLIO — the image IS the tile: full-bleed photo with
   its baked white border (transformations width law), no glass,
   no flip. 22-dot rail sized down so it never wraps or crowds.
   ============================================================ */
.s5.s5-portfolio .s5photo { left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 2px;
  box-shadow: 0 6px 18px rgba(2,24,38,.35); }
.s5.s5-portfolio .s5dot { width: calc(clamp(5px,.9vh,8px) + 8px); padding: 4px; }
#fhaMobile.s5m.pg-portfolio .s5photo { left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 2px; }
#fhaMobile.s5m.pg-portfolio .s5dot { width: 13px; padding: 3px; }
#fhaMobile.s5m.pg-portfolio .s5dots { gap: 1px; }

/* 54 PORTFOLIO masthead (desktop) — same laws as transformations; couplet
   height scaled by art-height ratio (sub-portfolio 220 vs sub-transf. 204) */
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .brand-logo *,
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .brand-logo img {
  width: auto; height: clamp(89.6px, 7.1168vw, 120px);
  max-width: none; object-fit: contain; margin-left: 0; margin-right: 0;
  transform: none; }
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .brand-logo a > img {
  transform: translateX(-14.63%); }
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .brand-logo {
  width: auto; max-width: none; margin: 0 auto 1.7vw; justify-content: center; }
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .menu-log img {
  width: auto; height: clamp(19.41px, 1.9562vw, 29.34px);
  max-width: none; object-fit: contain; }
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .details .our-mission-img *,
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .details .our-mission-img img {
  width: auto; height: clamp(32.2px, 3.2357vw, 48.5px);
  max-width: none; object-fit: contain; }
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .details .our-mission-img {
  margin-top: 2px; margin-bottom: clamp(4px, .5vw, 8px); }

/* 54 PORTFOLIO r2 (his calls): centered mobile hero; longer CTA bar
   (art 2000x300) displayed wider so the type keeps the consult scale */
#fhaMobile.s5m.pg-portfolio .heroImg > img { object-position: center center; }
.s5.s5-portfolio .s5svc { width: 97.78%; } /* bar height == consult height exactly */
#fhaMobile.pg-portfolio .svcDock { width: min(370px, 94vw); }

/* 54 PORTFOLIO r2b — card budget with the couplet KEPT (tall screens);
   .ctuck (short screens, applied at load) returns the 53 budget */
#fhaMobile.s5m.pg-portfolio .s5card { width: min(94%, calc((100dvh - 538px) * 0.95)); }
#fhaMobile.s5m.pg-portfolio.ctuck .s5card { width: min(94%, calc((100dvh - 448px) * 0.95)); }

/* 54 PORTFOLIO r2c — mobile title matches the family cap (22px like 51-53;
   the narrower PORTFOLIO art was hitting the 26px cap instead) */
#fhaMobile.s5m.pg-portfolio .ptitle { max-height: 22px; }

/* 54 eBOOK slide tease — the Coming Soon script flares when the slider
   is pulled (it always springs home; downloads open with the book) */
.s5 .s5script img, #fhaMobile .svcDock .s5script img { transition: filter .28s ease; }
.s5svc.tease .s5script img {
  filter: drop-shadow(0 1px 0.5px rgba(2,24,38,.7))
          drop-shadow(0 0 7px rgba(242,251,251,.95)) brightness(1.5) !important; }

/* r18 (his calls): the 54 scripts step up to family presence —
   the couplet fills like the sister pages, Coming Soon owns the CTA */
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .details .our-mission-img *,
.s5.s5-portfolio.theme-teal .banner .banner-detail-container .details .our-mission-img img {
  height: clamp(32.1px, 3.2211vw, 48.3px); } /* family font scale x art 219/204 */

/* r18 — reclaim the 8px the larger scripts cost the desktop column */

/* r18 fit trims: 1px @900, 8px @720 desktop; 5px in the mobile dock */

/* ============================================================
   r19 — SECTION ALIGNMENT LOCK (his call: 51/52/53/54 share the
   same horizontal lines for title, couplet, carousel, script and
   CTA). Fixed-height blocks own the lines; oversized art (54's
   couplet + Coming Soon) bleeds through its block without moving
   anything. 52's stars strip lives inside the couplet budget, and
   the Questions slot is height-locked so the column base matches.
   ============================================================ */
@media (min-width: 992px) {
  .s5.theme-teal .banner .banner-detail-container .menu-log {
    height: clamp(19.5px, 1.965vw, 29.5px);
    display: flex; align-items: center; justify-content: center; }
  .s5.theme-teal .banner .banner-detail-container .details .our-mission-img {
    height: clamp(29.9px, 3.0vw, 45px);
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px; margin-bottom: clamp(4px, .5vw, 8px); }
  .s5 .s5main { min-height: 0; }
  .s5 .s5mod { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .s5 .s5spot { flex: 1 1 auto; min-height: 0; justify-content: center; }
  .s5 .s5nav { flex: 0 0 auto; }
  .s5 .s5dots { height: clamp(15px, 2.1vh, 19px); align-items: center; }
  .s5 .s5script { height: clamp(24px, 4.2vh, 40px);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0; margin-bottom: clamp(4px, .8vh, 8px); }
  .s5 .s5svc { flex: 0 0 auto; }
  .s5.theme-teal .banner .banner-detail-container .question {
    height: clamp(40px, 3.89vw, 58.4px);
    display: flex; align-items: center; justify-content: center; }
}
}

/* r20 (his call): 52's review CTA sits a touch lower, optically centered
   within the Questions text bounds */
@media (min-width: 992px) {
  .s5.s5-ratings.theme-teal .banner .banner-detail-container .question img {
    transform: translateY(7px); }
}