/* True Performance: site additions to the vendored APPROVED sheets (v5.css, svc.css, cond.css stay byte-identical).
   1. The Poptin sizing contract (CORE30-POPTIN-PLAYBOOK §3.2: min-height is LOAD-BEARING; container 560, iframe 620).
      The booking rail sits on the dark wine field: the host card keeps its tint on desktop and loses its chrome at <= 768 px
      (§3.3 cardless = chrome, not height; TASK K below). Poptin's fields are white, so they still contrast on the wine field.
   2. The sentinel page (structure awaiting copy) and the 404 page. */
.poptin-embedded { position: relative; width: 100%; min-height: 560px; }
.poptin-embedded iframe { width: 100% !important; min-height: 620px; background: transparent !important; border: 0; display: block; }
/* TASK J (owner, 2026-09-26: "extra right margin" on desktop). This form renders INLINE (playbook 2026-08-11), as one
   absolutely positioned 500 x 500 designer box (.poptin-popup, inset 30px auto 0 LEFT) whose fields sit at fixed pixel
   coordinates, so it cannot fill the card. Poptin pins it to left 0 whenever the column is wider than 500 px (a 70-180 px
   gap on the right only) and, when the column is narrower, scales it about its centre and sets left = W/2 - 250 itself.
   left 50% + translate -50% is that same centring at EVERY width: identical to Poptin's own value when it scales, centred
   when it does not. The individual `translate` property composes with Poptin's inline `transform: scale()` (it never
   replaces it), and the 560 px container min-height is untouched. */
.poptin-embedded > .poptin-popup { left: 50% !important; right: auto !important; translate: -50% 0; }
/* TASK K (owner phone screenshot, 2026-09-26: the form squeezed inside the card with a large empty area above the fields).
   Measured at 390: Poptin scales the 500 px designer box to the container WIDTH (308 px inside the card = 0.616) about
   its CENTRE, 30 px below the container top, so the visible form started 151 px under the card's top edge.
   1. Scale about the top edge at every width (no effect where the box is unscaled, i.e. 1280 px and wider).
   2. At <= 768 px the card's chrome comes off (border, panel, radius, shadow, padding: the playbook's cardless-on-mobile
      ruling) so the box scales to the full content column (358 px at 390 = 0.716), and the box sits at the container top.
   The load-bearing heights stay: .poptin-host and .poptin-embedded keep min-height 560 px at every width. */
.poptin-embedded > .poptin-popup { transform-origin: 50% 0 !important; }
@media (max-width: 768px) {
  .poptin-host { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .poptin-embedded > .poptin-popup { top: 0 !important; }
}

.sentinel { padding: calc(var(--header-height) + 96px) 0 var(--section); background: var(--ink-0); }
.sentinel__h1 { font: 800 clamp(40px, 6vw, 84px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; margin: 18px 0 20px; max-width: 18ch; }
.sentinel__marker { font: 600 12px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.nf { padding: calc(var(--header-height) + 96px) 0 var(--section); }
.nf__h1 { font: 800 clamp(48px, 8vw, 120px)/.9 var(--f-display); text-transform: uppercase; margin: 18px 0 20px; }
.nf__lede { max-width: 52ch; color: var(--muted); margin-bottom: 28px; }
.nf__links { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nf__links a { display: inline-block; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; }
.nf__links a:hover { border-color: var(--crimson); color: var(--crimson-hi); }

/* 3. The office page (/newport-beach/): composed from approved V5 parts (no approved office mockup yet); these four
   rules only set the NAP block the approved visit block has no class for. */
.office-nap { font-style: normal; margin: 18px 0 6px; color: var(--muted); line-height: 1.6; }
.office-tel { margin: 6px 0 10px; }
.office-hours { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.office-chips { margin-top: 18px; }

/* 4. Authority citations rendered in a slot the approved mockups never cited in (writer in_slot values, CONTENT-CONTRACT
   §8): the quiet source line of the approved note box; the contextual cond.css rules (.redflag .auth, .pc__src .auth)
   still win where they apply. */
.svc-block > .auth, .svc-block__head > .auth, .faq__list > .auth, .svc-cost > .auth, .cond-open__txt > .auth,
.w5-lists + .auth, .svc-open > .auth { margin-top: 14px; color: var(--muted); font-size: 15px; max-width: 62ch; }
.svc-block > .auth a, .svc-block__head > .auth a, .faq__list > .auth a, .svc-cost > .auth a, .cond-open__txt > .auth a,
.w5-lists + .auth a, .svc-open > .auth a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--crimson); text-underline-offset: 3px; }

/* 5. NEVER DISTORT MEDIA (TASK G, owner bug 2026-09-26: /sports-medicine/sports-injury-rehab/ "What is" photo squeezed
   ~5x into a tall frame). The board reset is `img, video { display: block; max-width: 100% }` with NO `height: auto`, so
   any img whose width a column narrows keeps its HTML height attribute and object-fit `fill` stretches it. (a) the
   reset gains `height: auto` (a class that sizes a frame still wins: it is more specific); (b) the slot-5 capsule photo
   and the opening figures take their frame ratio from the ASSET (--ar = the manifest's real pixel size, set by the
   component) and cover it, so a landscape photo never sits in a portrait frame. Guard: scripts/check-media-ratio.mjs. */
img, video { height: auto; }
.w5-cap__media .bezel__core { aspect-ratio: var(--ar, 1 / 1); }
.w5-cap__media .bezel__core > img { width: 100%; height: 100%; object-fit: cover; }
.w5-cap__media .gyro__frame { aspect-ratio: var(--ar, 1 / 1); }
.svc-fig .bezel__core { aspect-ratio: var(--ar, 3 / 2); }

/* 6. EXPLORE AFFORDANCE (TASK G owner addition, 2026-09-26; src/lib/explore.ts, components/page/ExploreCta.astro).
   Index rows and cards that point at one page are obviously clickable: the title is a link (accent colour + underline
   sweep on hover / focus), an "Explore <name>" arrow-link ends the row (public/js/site.js nudges its arrow with GSAP;
   reduced motion = none), the row image links too (.xmedia, aria-hidden, tabindex -1) and the whole row highlights. */
.xtitle { color: inherit; text-decoration: none; background: linear-gradient(var(--crimson-hi), var(--crimson-hi)) 0 100% / 0 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color var(--dur) var(--ease-out), background-size .6s var(--ease-out); }
.xrow:hover .xtitle, .xtitle:hover, .xtitle:focus-visible { color: var(--crimson-hi); background-size: 100% 2px; }
.kid__h .xtitle { background-size: 0 .07em; background-position: 0 96%; }
.xrow:hover .kid__h .xtitle, .kid__h .xtitle:hover, .kid__h .xtitle:focus-visible { background-size: 100% .07em; }
.xcta { color: var(--paper); }
.xcta__t { font: 600 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--crimson); padding-bottom: 3px; transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.xrow:hover .xcta__t, .xcta:hover .xcta__t, .xcta:focus-visible .xcta__t { color: var(--crimson-hi); border-color: var(--crimson-hi); }
.xcta .btn__icon svg { display: block; }
.kid__cta { margin-top: 26px; }
.xmedia { display: block; color: inherit; text-decoration: none; }
.kid.xrow { transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.kid.xrow:hover, .kid.xrow:focus-within { background-color: rgba(243, 236, 232, .035); box-shadow: inset 3px 0 0 var(--crimson); }
.cond.xrow, .treat.xrow { transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.cond.xrow:hover, .cond.xrow:focus-within, .treat.xrow:hover, .treat.xrow:focus-within { background-color: #1c1416; box-shadow: inset 0 0 0 1px rgba(236, 107, 126, .32); }
.cond__go .xcta { gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .xtitle, .xcta__t, .kid.xrow, .cond.xrow, .treat.xrow { transition: none; }
  .xcta:hover .btn__icon, .xrow:hover .xcta .btn__icon { transform: none; }
}

/* ══ 7. wave 2b BA (2026-09-26): the ten utility / index / conversion templates ═════════════════════════════════════════════
   Composed from the approved V5 parts (svc.css hero / body / blocks / booking / cost / steps / cards, hub.css intro + index card,
   v5.css locations). These rules only set what the approved sheets have no class for: the compact hero, full-width bands, the
   index tile (the hub .ctile look with the name and the link kept apart), the product card, the region card, the question
   checklist, the note / alert columns, the legal reading column and the 404 link list. Tokens only; no CSS transition on a
   property a GSAP tween animates (TASK V lesson). */
.upage .svc-hero__plate { background: var(--ink-0); }
.util-hero--short { min-height: 0; padding: calc(var(--header-height) + 88px) 0 clamp(48px, 5vw, 76px); }
.util-hero--short .svc-hero__h1 { font-size: clamp(2.8rem, 6vw, 6rem); }
.util-hero--index .util-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: end; gap: clamp(28px, 4vw, 64px); }
.util-hidx .hidx__t { min-width: 0; }

.util-intro--solo .hub-intro__grid { grid-template-columns: minmax(0, 1fr); }
.util-intro--solo .hub-intro__prose p { max-width: 62ch; }

.util-band.chapter { padding-block: clamp(72px, 8vw, 128px); background: var(--ink-0); border-top: 1px solid var(--line); }
.util-band--deep.chapter { background: var(--ink-1); }
.util-band__head { max-width: 900px; }
.util-band .h2 { font-size: clamp(2.4rem, 4.8vw, 4.8rem); max-width: 16ch; }
.util-h3 { margin-bottom: 12px; font: 800 clamp(1.45rem, 2.1vw, 1.9rem)/1 var(--f-display); text-transform: uppercase; }
.util-prose p { color: var(--muted); max-width: 62ch; }
.util-prose.prose--lede p { color: #e3d9d5; }
.util-open { max-width: 900px; }
.util-open .eyebrow { margin-bottom: 22px; }
.util-closer { margin-top: 22px; }
.util-closer p { color: var(--muted); max-width: 62ch; }
.util-cost__ask { margin-top: 22px; }
.util-list { margin-top: clamp(24px, 3vw, 36px); }

/* the index tile (conditions hub, services index): hub.css .ctile, with the NAME as the title and the ANCHOR as the link */
.cidxs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cidx { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; gap: 10px; min-height: 270px; padding: 24px 22px 20px;
  border-radius: var(--radius-in); border: 1px solid var(--line); background: var(--ink-0); }
.cidx--plain { background: radial-gradient(120% 120% at 100% 100%, rgba(99, 18, 50, .7) 0%, var(--ink-0) 65%); }
.cidx--img::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 11, 12, .3) 0%, rgba(14, 11, 12, .62) 40%, rgba(14, 11, 12, .94) 100%); }
.cidx--img .cond__bg img { opacity: .6; }
.cidx::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.cidx:hover::after, .cidx:focus-within::after { transform: scaleX(1); }
.cidx--img:hover .cond__bg img { opacity: .72; }
.cidx__n { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--crimson-hi); }
.cidx__h { margin-top: auto; font: 800 clamp(1.45rem, 1.9vw, 1.85rem)/.96 var(--f-display); text-transform: uppercase; overflow-wrap: break-word; }
.cidx__p p { font-size: 14.5px; line-height: 1.5; color: #d8cdc9; }
.cidx__a { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--crimson); align-self: flex-start; padding-bottom: 2px; }
.cidx__a svg { width: 14px; height: 14px; flex: none; color: var(--crimson-hi); }
.cidx__a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cidx__a:focus-visible { outline: none; }
.cidx:focus-within { outline: 2px solid var(--crimson-hi); outline-offset: 3px; }
.cidx:hover .cidx__a { color: var(--crimson-hi); }
.cidx__tag { font-size: 9.5px; }

/* the services index category head: text + the V5 home index thumbnail for the hub */
.sidx__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 3.4vw, 44px); }
.sidx__count { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-2); color: var(--dim); }
.sidx__hub { display: inline-block; margin-top: 18px; }
.sidx__media .bezel__core { aspect-ratio: 16 / 10; }
.sidx__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.04); }

/* notes column (conditions hub care / emergency / not listed; services index start + offices) */
.util-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.util-notes__col > .w5-note:first-child { margin-top: 0; }
.util-notes__mech { margin-top: 0; }
.util-notes__col .util-notes__mech { margin-top: clamp(28px, 3vw, 40px); }
.util-note { max-width: 760px; }
.util-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); border: 1px solid rgba(236, 107, 126, .4);
  background: linear-gradient(160deg, rgba(99, 18, 50, .55) 0%, rgba(14, 11, 12, 0) 85%); }
.util-alert__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--crimson); color: #fff; }
.util-alert .prose p { color: #eadfdb; }
.util-alert .prose p + p { margin-top: .8em; }
.util-alert .auth { margin-top: 14px; font-size: 15px; color: var(--muted); }
.util-alert .auth a, .svc-block .auth a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--crimson); text-underline-offset: 3px; }

/* booking / request rail additions */
.util-booking__body { margin-top: 18px; }
.util-booking__body p { color: #f3e4e7; max-width: 52ch; }
.util-booking--noform .booking__grid { align-items: start; }
.util-booking__aside { align-self: center; }
.util-callcard__core { padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; background: linear-gradient(160deg, var(--ink-2) 0%, var(--ink-1) 100%); }
.util-callcard__tel { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.util-phone { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 12px; }
.util-phone__h { font: 800 clamp(1.4rem, 2vw, 1.8rem)/1 var(--f-display); text-transform: uppercase; }
.util-phone__prose p { color: #f3e4e7; max-width: 52ch; }

/* contact: the two offices (v5.css .locations) */
.util-offices .loc__nap { gap: 14px; }
.util-offices__badge { align-self: flex-start; }
.util-offices__body p { color: #ddd3cf; font-size: 15.5px; max-width: 48ch; }
.util-offices__cap { caption-side: top; text-align: left; padding-bottom: 8px; font: 600 11px/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.util-offices__k { font: 600 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* commerce: product cards */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pcard { display: flex; flex-direction: column; overflow: clip; border-radius: var(--radius-in); border: 1px solid var(--line); background: var(--ink-0); }
.pcard--text { background: radial-gradient(120% 120% at 100% 0%, rgba(99, 18, 50, .45) 0%, var(--ink-0) 60%); }
.pcard__media { margin: 0; aspect-ratio: 16 / 10; background: var(--ink-2); }
.pcard__media picture, .pcard__media img { display: block; width: 100%; height: 100%; }
.pcard__media img { object-fit: cover; }
.pcard__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.6vw, 30px); flex: 1; }
.pcard__h { font: 800 clamp(1.55rem, 2.3vw, 2.1rem)/.95 var(--f-display); text-transform: uppercase; }
.pcard__for { font-size: 14.5px; color: var(--muted); }
.pcard__k { font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.pcard__prose p { font-size: 15.5px; color: var(--muted); }
.pcard__list { list-style: none; margin: 0; padding: 0; }
.pcard__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: #e6dcd8; }
.pcard__list li svg { margin-top: 3px; color: var(--crimson-hi); width: 16px; height: 16px; }
.pcard__cta { margin-top: auto; align-self: flex-start; }
.util-pgroup { margin-top: clamp(32px, 4vw, 48px); }

/* areas we serve: region cards */
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.area { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius-in); border: 1px solid var(--line); background: var(--ink-1); }
.area__h { font: 800 clamp(1.4rem, 2vw, 1.8rem)/.98 var(--f-display); text-transform: uppercase; }
.area__dl { margin: 0; display: grid; }
.area__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.area__row dt { color: var(--paper); font-weight: 500; }
.area__row dd { margin: 0; color: var(--muted); text-align: right; }
.util-local { grid-template-columns: minmax(0, 1fr); }
.util-local .svc-local__map { min-height: 280px; }

/* traveling: the question checklist, the facts card, the proof row */
.qlist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.qlist__i { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.qlist__n { font: 900 1.9rem/1 var(--f-display); color: var(--crimson-hi); }
.qlist__q { font: 800 clamp(1.25rem, 1.8vw, 1.6rem)/1.02 var(--f-display); text-transform: uppercase; }
.qlist__why { margin-top: 8px; font-size: 15.5px; color: var(--muted); max-width: 60ch; }
.util-facts { max-width: 640px; }
.util-proof { display: grid; gap: 22px; }
.util-proof--clip { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); align-items: start; gap: clamp(24px, 4vw, 48px); }
.util-proof .svc-rating { margin-bottom: 20px; }
.util-proof__clip { --h: 350px; margin: 0; }
.util-railcard .glance__h { margin-bottom: 2px; }

/* legal: the reading column */
.util-updated { margin-top: 18px; }
.legal .svc-block.chapter { padding-block: clamp(36px, 4vw, 56px); }
.legal__h { margin-bottom: 14px; font: 800 clamp(1.5rem, 2.2vw, 2rem)/1 var(--f-display); text-transform: uppercase; }
.legal__prose p { color: #ddd3cf; max-width: 68ch; }
.legal__prose + .legal__list, .legal__list + .legal__prose { margin-top: 14px; }
.legal__list { margin: 14px 0 0; padding-left: 1.2em; color: #ddd3cf; max-width: 66ch; }
.legal__list li { padding: 4px 0; }
.legal__list li::marker { color: var(--crimson-hi); }

/* 404: the curated link list */
.nfl { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nfl__i { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: var(--radius-in); border: 1px solid var(--line); background: var(--ink-1); position: relative; }
.nfl__a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; font: 800 clamp(1.3rem, 1.9vw, 1.7rem)/1 var(--f-display); text-transform: uppercase; color: var(--paper); text-decoration: none; }
.nfl__a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.nfl__a svg { width: 16px; height: 16px; color: var(--crimson-hi); }
.nfl__i:hover { border-color: var(--crimson); }
.nfl__n { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--crimson-hi); }
.nfl__p { font-size: 15px; color: var(--muted); padding-left: 44px; }
.util-help { margin-top: clamp(28px, 3vw, 40px); display: grid; gap: 10px; max-width: 640px; }
.util-help .prose p { color: var(--muted); }

@media (max-width: 1100px) {
  .util-hero--index .util-hero__copy { grid-template-columns: 1fr; }
  .cidxs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .util-notes, .sidx__head, .util-proof--clip { grid-template-columns: 1fr; }
  .sidx__media { max-width: 520px; }
  .pcards { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .util-hero--short { padding: 0 0 8px; }
  .util-hero--short .svc-hero__media { height: min(70vw, 300px); }
  .util-hero--short .svc-hero__h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .cidxs, .areas, .nfl { grid-template-columns: 1fr; }
  .cidx { min-height: 0; }
  .qlist__i { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .nfl__p { padding-left: 0; }
  .area__row { flex-direction: column; gap: 2px; }
  .area__row dd { text-align: left; }
}
.sidx__txt .lede { margin-top: 18px; }
.qlist__b { min-width: 0; }
.nfl__t { min-width: 0; }
.legal > .legal__sec:first-child, .legal__intro + .legal__sec { border-top: 0; }
.legal__intro { padding-bottom: 0; }
.pcard--img .pcard__body { background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 100%); }
.pcard__list--models li { font-weight: 600; color: var(--paper); }
.util-booking .booking__copy > .util-phone:first-child { margin-top: 0; }
.util-intro .hub-intro__prose p { max-width: 58ch; }
.upage .svc-hero__h1 { overflow-wrap: break-word; }
.sidx .cidx { min-height: 230px; }
.util-mech { padding-left: 22px; border-left: 2px solid var(--crimson); }
.util-mech .prose p { color: var(--muted); max-width: 62ch; }
.util-mech .prose p + p { margin-top: .8em; }
.upage .util-hero:not(.util-hero--short) .svc-hero__h1 { font-size: clamp(3rem, 6.2vw, 6.6rem); max-width: 13ch; }
@media (max-width: 768px) { .upage .util-hero:not(.util-hero--short) .svc-hero__h1 { font-size: clamp(2.4rem, 11.2vw, 3.6rem); max-width: none; } }
.sidx .cidxs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sidx .cidxs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .sidx .cidxs { grid-template-columns: 1fr; } }
/* an even card count leaves the last card alone on its row after the full-width first card: it spans the row too */
.util-cards--tail > .cond:last-child { grid-column: 1 / -1; }
/* commerce: an imaged product card takes the full row (photo left, text right); text cards pair up below / between */
.pcard--img { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.pcard--img .pcard__media { aspect-ratio: auto; min-height: 100%; }
[data-page-type="commerce"] .svc-hero__img { opacity: .62; }
@media (max-width: 960px) { .pcard--img { grid-template-columns: 1fr; } .pcard--img .pcard__media { aspect-ratio: 16 / 10; min-height: 0; } }

/* 8. integration IM (2026-09-26): an authority citation after a utility note box (commerce `note`, referral `scope`; the
   writer's in_slot, CONTENT-CONTRACT §8): the quiet source line of section 4, under the note. */
.util-note + .auth { margin-top: 14px; color: var(--muted); font-size: 15px; max-width: 62ch; }
.util-note + .auth a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--crimson); text-underline-offset: 3px; }

/* TASK J (owner, 2026-09-26): the service proof slot with no page-authored athlete media renders the SHARED athlete
   strip (AthleteStrip.astro) under its heading instead of an empty clip column, so the head spans the grid alone. */
.svc-proof__grid--solo { grid-template-columns: minmax(0, 1fr); }

/* TASK M (owner ruling 2026-09-26): the REAL Google map, embedded directly (MapEmbed.astro), replacing the board's
   click-to-load facade on /contact-us/, the home "Visit" card, /areas-we-serve/ and /newport-beach/. It keeps the host
   layout's map class (loc__map / svc-local__map) so it sits exactly where the facade sat, beside the address and the
   "Get directions" link (MapEmbed.astro says how it loads). 4:3 as the minimum on desktop (it stretches to fill the approved card column), 1:1 on phones.
   The board's dark filter on .loc__map iframe (grayscale + invert) is dropped: the owner wants the map to read as the
   genuine Google map ("looks more legitimate"). Inside the V5 bezel card the core already clips to its own radius, so the
   map takes no second radius there; standalone it takes the V5 card radius. */
.map-embed { position: relative; aspect-ratio: 4 / 3; align-self: stretch; border-radius: var(--radius); overflow: clip; background: #1a1416; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: none; }
.loc__main .map-embed { border-radius: 0; }
/* the script-loaded iframe stays invisible until site.js gives it its src (the box shows its dark ground meanwhile); with JS
   off it never gets one, and the <noscript> iframe above it is the map */
.map-embed > iframe:not([src]) { visibility: hidden; }
@media (max-width: 768px) { .map-embed.loc__map { aspect-ratio: 1 / 1; min-height: 0; } }