/* ReGlow full-site shared stylesheet draft Scope: html[data-reglow-site] Main component contract ----------------------- Shell: .rg-site-header .rg-nav-shell .rg-nav .rg-menu-toggle .rg-menu-panel .rg-site-footer .rg-booking-rail Layout: .rg-container .rg-section .rg-section-head .rg-grid Actions: .rg-button .rg-text-link .rg-icon-button Hero: .rg-hero .rg-hero--bloom .rg-hero--portrait .rg-hero--compact .rg-hero-backdrop .rg-hero-grid .rg-hero-copy .rg-hero-art .rg-glass-study Proof: .rg-proof-strip .rg-proof-item .rg-stat Treatments: .rg-treatment-grid .rg-treatment-card .rg-service-hero .rg-service-hero--neutral .rg-service-media--abstract .rg-service-anchor-nav .rg-service-layout .rg-option-grid .rg-expect-grid .rg-related-grid Consultation: .rg-story .rg-consultation-steps .rg-consultation-card Team: .rg-team-grid .rg-team-card Contact: .rg-clinic-switch .rg-clinic-grid .rg-clinic-card .rg-contact-grid .rg-map-frame Rewards: .rg-tier-grid .rg-tier-card .rg-tier-table Pricing: .rg-pricing-grid .rg-pricing-card .rg-price-list FAQ: .rg-faq-layout .rg-faq-list Policy: .rg-policy-layout .rg-policy-toc .rg-policy-prose States: .is-active .is-open .is-visible .is-condensed html[data-menu-open="true"] html[data-rail-hidden="true"] Motion: .rg-reveal .rg-reveal-group .rg-parallax-art All page markup should add data-page to the root, for example: */ /* Typography, current state (13 Aug 2026): Chivo throughout — one family for headings and body, self-hosted, so the site still makes no third-party requests. Set by the site owner after reviewing two alternatives. History, so nobody re-litigates it: 1. The ReGlow Skin Brand Kit (page 7) specifies Poynter Old Style Display for headings and body. Poynter is a commercial Font Bureau family (Monotype since 1 July 2024) and is not licensed for this site, so Source Serif 4 stood in as the nearest open-licence oldstyle serif. 2. A later brand-kit screenshot specified SEQUEL for display/headings; Poppins Bold in all caps was trialled as the nearest open-licence geometric match (this is also what the ReGlow Skin Design System substitutes). Reviewed and rejected — too loud against the brand's "gentle luxury, unhurried" tone. 3. Chivo, already approved and already in assets/, replaced both. Chivo is therefore a deliberate divergence from BOTH the brand kit and the Design System, which still pair Source Serif 4 with Poppins. See CLAUDE.md. Three static weights are self-hosted: 400 body, 500 for , 700 spare. The Source Serif 4 @font-face below is retained but unreferenced — an unmatched @font-face triggers no download, so it costs nothing and makes reverting to the serif a one-token change. Delete it and its woff2 if the serif is ruled out. SWAPPING IN A LICENSED FACE: drop the woff2 files into assets/, change the srcs below and the family name in --rg-font-sans. Nothing else references the family. Kit deviation, agreed with the site owner: page 7 says the display face is "not to be used in all caps", but .rg-eyebrow labels are uppercase. Mitigated with the generous 0.17em tracking already on that class. MHGKyokashotaiTHKLight is not used. */ @font-face { font-family: "Chivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/chivo-400.woff2") format("woff2"); } @font-face { font-family: "Chivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/chivo-500.woff2") format("woff2"); } @font-face { font-family: "Chivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/chivo-700.woff2") format("woff2"); } /* Retained but unreferenced — see note above. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/source-serif-4-var.woff2") format("woff2"); } html[data-reglow-site] { /* Colour comes from the ReGlow Skin Brand Kit, page 5 (Aesthetics palette). Kit colours are used directly where the site already had an equivalent role. Values marked "derived" are not in the kit: the kit supplies one off-white (Glow Serum) but the site layers three, so the extra steps are Glow Serum warmed toward Skin Blur. The kit's four saturated accents — Pretty Plum, Sage FX, Refresh Blue, Bronze Touch — have no role assigned in the kit and are deliberately unused here, with two exceptions: the one noted at .rg-stat, and Bronze Touch on the header CTA (.nav-book), added 13 Aug 2026. */ --rg-white: #fff; --rg-canvas: #faf9f6; /* Glow Serum */ --rg-paper: #f3eee7; /* derived */ --rg-paper-light: #f7f4ef; /* derived */ --rg-ink: #2e2b2b; /* Deeva */ --rg-body: #53555f; /* Reglow Grey */ --rg-muted: #686a73; /* derived from Reglow Grey; darkened from the first pass so contrast does not regress against the old #6b6b69 — 5.39 on white vs 5.34 before */ --rg-blush: #e4ccb8; /* Skin Blur */ --rg-blush-soft: #eedccb; /* derived */ --rg-blush-wash: #f7eee5; /* derived */ --rg-bronze: #846f5d; /* Bronze Touch */ --rg-star: #e7a33e; /* rating stars; not a kit colour */ --rg-tier-silver: #dedbd3; --rg-tier-steel: #b8b8b5; --rg-tier-gold: #c9a46c; --rg-font-sans: "Chivo", "Helvetica Neue", Arial, sans-serif; /* Type scale. 128 font-size declarations previously used 66 distinct values, 20 of them between 0.56 and 0.80rem — differences of 0.16px, which is drift rather than design. Sizes now snap to these steps, so resizing a tier of type is one edit. Largest shift from the old values was 0.03rem (about half a pixel). */ --rg-text-3xs: 0.58rem; --rg-text-2xs: 0.62rem; --rg-text-xs: 0.66rem; --rg-text-sm: 0.7rem; --rg-text-base: 0.72rem; --rg-text-md: 0.76rem; --rg-text-lg: 0.82rem; --rg-text-xl: 0.88rem; --rg-text-2xl: 0.95rem; --rg-text-3xl: 1.05rem; --rg-text-4xl: 1.25rem; --rg-text-5xl: 1.6rem; --rg-text-6xl: 3rem; /* One star, tiled five times to build the rating strip. Used as a CSS mask so a single element can be part-filled to a fractional score. */ --rg-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.85 5.77 6.37.93-4.61 4.49 1.09 6.35L12 17.13l-5.7 3.01 1.09-6.35-4.61-4.49 6.37-.93z'/%3E%3C/svg%3E"); --rg-line: rgba(46, 43, 43, 0.16); --rg-line-soft: rgba(46, 43, 43, 0.1); --rg-glass: rgba(255, 255, 255, 0.72); --rg-glass-strong: rgba(255, 255, 255, 0.9); --rg-glass-dark: rgba(46, 43, 43, 0.8); --rg-shadow-sm: 0 10px 30px rgba(46, 43, 43, 0.08); --rg-shadow-md: 0 24px 65px rgba(46, 43, 43, 0.12); --rg-shadow-lg: 0 42px 100px rgba(46, 43, 43, 0.16); --rg-radius-xs: 5px; --rg-radius-sm: 10px; --rg-radius-md: 18px; --rg-radius-lg: 28px; --rg-radius-glass: 22px; --rg-container: 1280px; --rg-reading: 760px; --rg-header-height: 72px; --rg-header-top: 0px; /* flat bar sits flush to the viewport top */ --rg-header-clearance: calc(var(--rg-header-height) + var(--rg-header-top) + 34px); --rg-section-space: clamp(5.5rem, 9vw, 9.5rem); --rg-gutter: clamp(1.25rem, 3.1vw, 3rem); --rg-ease: cubic-bezier(0.22, 1, 0.36, 1); --rg-ease-soft: cubic-bezier(0.2, 0.72, 0.2, 1); --rg-hero-bloom: url("/assets/site/hero-liquid-glass.webp"); --rg-glass-study: url("/assets/site/glass-study.webp"); color-scheme: light; scroll-behavior: auto; scroll-padding-top: calc(var(--rg-header-height) + var(--rg-header-top) + 36px); text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[data-reglow-site] :where(*, *::before, *::after) { box-sizing: border-box; } html[data-reglow-site] body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: clip; background: var(--rg-canvas); color: var(--rg-body); font-family: var(--rg-font-sans); font-size: 16px; font-weight: 400; line-height: 1.65; } html[data-reglow-site] body::selection { background: var(--rg-blush); color: var(--rg-ink); } html[data-reglow-site] :where(img, svg, video, canvas) { display: block; max-width: 100%; } html[data-reglow-site] :where(img, video) { height: auto; } html[data-reglow-site] :where(button, input, textarea, select) { margin: 0; color: inherit; font: inherit; } html[data-reglow-site] :where(button, [role="button"]) { cursor: pointer; } html[data-reglow-site] :where(a) { color: inherit; text-decoration: none; } html[data-reglow-site] :where(p, ul, ol, dl, blockquote, figure) { margin-top: 0; } /* Headings inherit the body family — one typeface site-wide, as before. Sizes are the original serif settings, trimmed slightly at the display end: Chivo is a grotesque and sets wider than Source Serif did at the same size. */ html[data-reglow-site] :where(h1, h2, h3, h4) { margin-top: 0; color: var(--rg-ink); font-weight: 400; letter-spacing: -0.035em; text-wrap: balance; } html[data-reglow-site] h1 { margin-bottom: 1.45rem; font-size: clamp(3.1rem, 6.4vw, 6.35rem); line-height: 0.96; } html[data-reglow-site] h2 { margin-bottom: 1.25rem; font-size: clamp(2.4rem, 4.7vw, 4.75rem); line-height: 1; } html[data-reglow-site] h3 { margin-bottom: 0.8rem; font-size: clamp(1.4rem, 2.15vw, 2.05rem); line-height: 1.1; } html[data-reglow-site] h4 { margin-bottom: 0.65rem; font-size: var(--rg-text-3xl); line-height: 1.3; letter-spacing: -0.015em; } html[data-reglow-site] :where(strong, b) { color: var(--rg-ink); font-weight: 500; } html[data-reglow-site] :where(a, button, summary, input, textarea, select):focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 4px; } /* dark surfaces need a light ring or focus is invisible against the background */ html[data-reglow-site] .rg-section--ink :where(a, button, summary, input, textarea, select):focus-visible, html[data-reglow-site] .rg-final-cta :where(a, button, summary, input, textarea, select):focus-visible, html[data-reglow-site] .rg-site-footer :where(a, button, summary, input, textarea, select):focus-visible, html[data-reglow-site] .rg-booking-rail :where(a, button):focus-visible { outline-color: var(--rg-white); } html[data-reglow-site] .rg-skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 0.75rem 1rem; border: 1px solid var(--rg-ink); background: var(--rg-white); color: var(--rg-ink); font-size: var(--rg-text-lg); font-weight: 500; transform: translateY(-150%); transition: transform 160ms ease; } html[data-reglow-site] .rg-skip-link:focus { transform: translateY(0); } html[data-reglow-site] .rg-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } html[data-reglow-site] .rg-container { width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); margin-inline: auto; } html[data-reglow-site] .rg-reading { width: min(100%, var(--rg-reading)); } html[data-reglow-site] .rg-stack { display: flex; flex-direction: column; gap: var(--rg-stack-gap, 1rem); } html[data-reglow-site] .rg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-cluster-gap, 0.75rem); } html[data-reglow-site] .rg-grid { display: grid; grid-template-columns: repeat(var(--rg-grid-columns, 3), minmax(0, 1fr)); gap: var(--rg-grid-gap, 1.25rem); } html[data-reglow-site] .rg-kicker, html[data-reglow-site] .rg-eyebrow { display: inline-flex; align-items: center; gap: 0.8rem; margin: 0 0 1.25rem; color: var(--rg-ink); /* Slightly larger than the 0.69rem this carried under Times: serif capitals need a touch more size to hold up small. Tracking stays at 0.17em. */ font-size: var(--rg-text-base); font-weight: 500; letter-spacing: 0.17em; line-height: 1.35; text-transform: uppercase; } html[data-reglow-site] .rg-kicker::before, html[data-reglow-site] .rg-eyebrow::before { width: 2.15rem; height: 1px; flex: none; background: currentColor; content: ""; opacity: 0.65; } html[data-reglow-site] .rg-lead { max-width: 58ch; margin-bottom: 2rem; color: var(--rg-body); font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.7; } html[data-reglow-site] .rg-fine-print { margin: 0; color: var(--rg-muted); font-size: var(--rg-text-base); line-height: 1.58; } html[data-reglow-site] .medical-note.rg-section { padding-block: 2.4rem; border-top: 1px solid var(--rg-line-soft); } html[data-reglow-site] .rg-medical-note-inner { max-width: var(--rg-reading); } html[data-reglow-site] .rg-section { position: relative; padding-block: var(--rg-section-space); background: var(--rg-white); } html[data-reglow-site] .rg-section--warm { background: var(--rg-paper-light); } html[data-reglow-site] .rg-section--paper { background: var(--rg-paper); } html[data-reglow-site] .rg-section--blush { background: var(--rg-blush); } html[data-reglow-site] .rg-section--ink { background: var(--rg-ink); color: rgba(255, 255, 255, 0.72); } html[data-reglow-site] .rg-section--ink :where(h1, h2, h3, h4, strong) { color: var(--rg-white); } html[data-reglow-site] .rg-section--ink :where(.rg-kicker, .rg-eyebrow) { color: var(--rg-blush-soft); } html[data-reglow-site] .rg-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr); align-items: end; gap: clamp(2rem, 7vw, 7.5rem); margin-bottom: clamp(2.7rem, 5vw, 5.25rem); } html[data-reglow-site] .rg-section-head > :last-child { max-width: 50ch; justify-self: end; } html[data-reglow-site] .rg-section-head h2 { max-width: 12ch; margin-bottom: 0; } html[data-reglow-site] .rg-hairline { height: 1px; border: 0; margin: 0; background: var(--rg-line); } /* Header and navigation */ /* Flat full-bleed header bar (13 Aug 2026, site owner request). This replaced a floating rounded glass "pill" that was inset 18px from the top and capped at the container width. The bar now spans the viewport and sits flush; .rg-nav-shell became a plain inner wrapper that keeps the contents on the container grid. Consequences worth knowing if this is ever revisited: --rg-header-top is now 0, the shell no longer carries the backdrop blur, and the scroll-progress hairline moved off the shell onto .rg-site-header::after so it can span the full width. */ html[data-reglow-site] .rg-site-header { position: fixed; inset: var(--rg-header-top) 0 auto; z-index: 200; border-bottom: 1px solid var(--rg-line-soft); background: var(--rg-canvas); pointer-events: auto; transition: box-shadow 260ms ease; } /* Scroll progress, spanning the full width of the bar. */ html[data-reglow-site] .rg-site-header::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: linear-gradient(90deg, var(--rg-blush), rgba(132, 111, 93, 0.74)); content: ""; pointer-events: none; transform: scaleX(var(--page-progress, 0)); transform-origin: left; transition: transform 100ms linear; } html[data-reglow-site] .rg-nav-shell { position: relative; width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); min-height: var(--rg-header-height); margin-inline: auto; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.35rem; transition: min-height 320ms var(--rg-ease); } /* The header bar is opaque now, so it is no longer part of the glass family. */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html[data-reglow-site] .rg-menu-panel, html[data-reglow-site] .rg-glass-panel, html[data-reglow-site] .rg-booking-rail { -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%); } } /* Condensing keeps the full-bleed width and just tightens the bar. */ html[data-reglow-site] .rg-site-header.is-condensed, html[data-reglow-site][data-nav-condensed="true"] .rg-site-header { box-shadow: 0 8px 26px rgba(46, 43, 43, 0.07); } html[data-reglow-site] .rg-site-header.is-condensed .rg-nav-shell, html[data-reglow-site][data-nav-condensed="true"] .rg-nav-shell { min-height: 60px; } html[data-reglow-site] .rg-logo { display: inline-flex; align-items: center; min-width: 0; } html[data-reglow-site] .rg-logo img { width: clamp(6.8rem, 9vw, 8.25rem); height: auto; object-fit: contain; } /* Six items now instead of four, so the gap tightens as the type gets larger. */ html[data-reglow-site] .rg-nav { display: flex; align-items: center; justify-content: center; gap: clamp(0.85rem, 1.7vw, 1.7rem); } html[data-reglow-site] .rg-nav-link { position: relative; padding: 0.65rem 0; color: var(--rg-ink); font-size: var(--rg-text-xl); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } /* --------------------------------------------------------------------------- Consultations dropdown (13 Aug 2026) Opens on hover and on keyboard focus. :focus-within is what makes it reachable without a mouse — tabbing to the parent link reveals the eight options, so the menu is not mouse-only. The bridge on ::before keeps it open while the pointer crosses the gap between the link and the panel. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-nav-item { position: relative; display: inline-flex; } html[data-reglow-site] .rg-submenu { position: absolute; top: 100%; left: 50%; z-index: 210; min-width: 15rem; translate: -50% 0; margin-top: 0.55rem; padding: 0.6rem; border: 1px solid var(--rg-line); border-radius: var(--rg-radius-md); display: flex; flex-direction: column; background: var(--rg-white); box-shadow: var(--rg-shadow-md); opacity: 0; transition: opacity 180ms ease, visibility 180ms; visibility: hidden; } /* invisible bridge across the gap, so the menu survives the pointer crossing it */ html[data-reglow-site] .rg-submenu::before { position: absolute; top: -0.6rem; right: 0; left: 0; height: 0.6rem; content: ""; } html[data-reglow-site] .rg-has-submenu:hover .rg-submenu, html[data-reglow-site] .rg-has-submenu:focus-within .rg-submenu { opacity: 1; visibility: visible; } html[data-reglow-site] .rg-submenu a { padding: 0.5rem 0.6rem; border-radius: var(--rg-radius-xs); color: var(--rg-ink); font-size: var(--rg-text-md); letter-spacing: 0; text-transform: none; transition: background-color 150ms ease; } html[data-reglow-site] .rg-submenu a:hover, html[data-reglow-site] .rg-submenu a:focus-visible { background: var(--rg-blush-wash); } /* The dropdown is a desktop affordance; the mobile menu already lists these. */ @media (max-width: 920px) { html[data-reglow-site] .rg-submenu { display: none; } } html[data-reglow-site] .rg-nav-link::after { position: absolute; right: 0; bottom: 0.35rem; left: 0; height: 1px; background: var(--rg-blush); content: ""; transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--rg-ease); } html[data-reglow-site] .rg-nav-link:hover::after, html[data-reglow-site] .rg-nav-link[aria-current="page"]::after, html[data-reglow-site] .rg-nav-link.is-active::after { transform: scaleX(1); transform-origin: left; } html[data-reglow-site] .rg-nav-actions { display: flex; align-items: center; gap: 0.55rem; } html[data-reglow-site] .rg-menu-toggle { width: 2.9rem; height: 2.9rem; padding: 0; border: 1px solid var(--rg-line); border-radius: var(--rg-radius-sm); display: none; place-items: center; background: rgba(255, 255, 255, 0.72); color: var(--rg-ink); } /* Instagram beside the hamburger — mobile only. Sized and bordered to match the hamburger so the pair reads as one control group. Hidden by default and revealed at the same breakpoint the hamburger uses, so the desktop header is untouched. */ html[data-reglow-site] .rg-nav-instagram { width: 2.9rem; height: 2.9rem; border: 1px solid var(--rg-line); border-radius: var(--rg-radius-sm); display: none; place-items: center; background: rgba(255, 255, 255, 0.72); color: var(--rg-ink); transition: color 180ms ease, border-color 180ms ease; } html[data-reglow-site] .rg-nav-instagram svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } html[data-reglow-site] .rg-nav-instagram:hover, html[data-reglow-site] .rg-nav-instagram:focus-visible { border-color: var(--rg-bronze); color: var(--rg-bronze); } html[data-reglow-site] .rg-menu-toggle span, html[data-reglow-site] .rg-menu-toggle::before, html[data-reglow-site] .rg-menu-toggle::after { width: 1.1rem; height: 1px; background: currentColor; content: ""; transition: transform 220ms var(--rg-ease), opacity 160ms ease; } html[data-reglow-site] .rg-menu-toggle { grid-template-rows: repeat(3, auto); align-content: center; gap: 0.25rem; } html[data-reglow-site][data-menu-open="true"] .rg-menu-toggle::before { transform: translateY(5px) rotate(45deg); } html[data-reglow-site][data-menu-open="true"] .rg-menu-toggle span { opacity: 0; } html[data-reglow-site][data-menu-open="true"] .rg-menu-toggle::after { transform: translateY(-5px) rotate(-45deg); } html[data-reglow-site] .rg-menu-panel { position: fixed; top: calc(var(--rg-header-top) + var(--rg-header-height) + 10px); right: var(--rg-gutter); left: var(--rg-gutter); z-index: 190; max-height: calc(100svh - var(--rg-header-clearance)); padding: clamp(1.6rem, 4vw, 3rem); border: 1px solid var(--rg-line); border-radius: var(--rg-radius-glass); overflow: auto; background: rgba(255, 255, 255, 0.95); box-shadow: var(--rg-shadow-md); opacity: 0; pointer-events: none; transform: translateY(-0.75rem) scale(0.99); transform-origin: top; visibility: hidden; transition: opacity 220ms ease, transform 320ms var(--rg-ease), visibility 320ms; } html[data-reglow-site][data-menu-open="true"] .rg-menu-panel, html[data-reglow-site] .rg-menu-panel.is-open { opacity: 1; pointer-events: auto; transform: none; visibility: visible; } html[data-reglow-site][data-menu-open="true"] body { overflow: hidden; } html[data-reglow-site] .rg-menu-panel .menu-top { display: flex; justify-content: flex-end; align-items: center; } html[data-reglow-site] .rg-menu-panel .menu-top .rg-logo { display: none; } html[data-reglow-site] .rg-menu-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 7vw, 7rem); } html[data-reglow-site] .rg-menu-list { padding: 0; margin: 0; list-style: none; } html[data-reglow-site] .rg-menu-list a { padding: 0.8rem 0; border-bottom: 1px solid var(--rg-line-soft); display: flex; align-items: center; justify-content: space-between; color: var(--rg-ink); font-size: clamp(1.45rem, 3vw, 2.55rem); line-height: 1.12; letter-spacing: -0.035em; } /* Buttons and links */ html[data-reglow-site] .rg-button { min-height: 3.45rem; padding: 0.95rem 1.25rem; border: 1px solid var(--rg-ink); border-radius: var(--rg-radius-xs); display: inline-flex; align-items: center; justify-content: center; gap: 1rem; background: var(--rg-ink); color: var(--rg-white); font-size: var(--rg-text-base); font-weight: 500; letter-spacing: 0.11em; line-height: 1.2; text-align: center; text-transform: uppercase; transition: color 190ms ease, background-color 190ms ease, border-color 190ms ease, transform 190ms var(--rg-ease), box-shadow 190ms ease; } html[data-reglow-site] .rg-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; transition: transform 190ms var(--rg-ease); } html[data-reglow-site] .rg-button:hover { background: transparent; color: var(--rg-ink); transform: translateY(-2px); box-shadow: var(--rg-shadow-sm); } html[data-reglow-site] .rg-button:hover svg { transform: translateX(3px); } html[data-reglow-site] .rg-button--light { border-color: var(--rg-white); background: var(--rg-white); color: var(--rg-ink); } html[data-reglow-site] .rg-button--light:hover { border-color: rgba(255, 255, 255, 0.7); background: transparent; color: var(--rg-white); } html[data-reglow-site] .rg-button--ghost { border-color: var(--rg-line); background: rgba(255, 255, 255, 0.5); color: var(--rg-ink); } html[data-reglow-site] .rg-button--ghost:hover { border-color: var(--rg-ink); background: var(--rg-white); } html[data-reglow-site] .rg-button--compact { min-height: 2.9rem; padding: 0.75rem 1rem; font-size: var(--rg-text-xs); } /* Header CTA shares a 375px row with the logo and the menu button, so it must never wrap. Below 430px it swaps to a shorter visual label; the anchor's aria-label keeps the full name for assistive tech. Bronze Touch fill (13 Aug 2026, site owner request). This is the first use of a saturated kit accent on the site — the comment on the palette above notes the four accents were previously unused. Scoped to .nav-book on purpose: .rg-button is site-wide and every other CTA stays ink. */ html[data-reglow-site] .nav-book { white-space: nowrap; } /* One bronze fill shared by the header CTA and the hero "Book now", so the two cannot drift apart. .nav-book keeps the class for its no-wrap rule above. */ html[data-reglow-site] .nav-book, html[data-reglow-site] .rg-button--bronze { border-color: var(--rg-bronze); background: var(--rg-bronze); color: var(--rg-white); } html[data-reglow-site] .nav-book:hover, html[data-reglow-site] .rg-button--bronze:hover { border-color: var(--rg-bronze); background: transparent; color: var(--rg-bronze); } html[data-reglow-site] .rg-book-label--short, html[data-reglow-site] .rg-enquire-label--short { display: none; } html[data-reglow-site] .rg-button--wide { width: 100%; } html[data-reglow-site] .rg-text-link { position: relative; display: inline-flex; align-items: center; gap: 0.65rem; color: var(--rg-ink); font-size: var(--rg-text-base); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; } html[data-reglow-site] .rg-text-link::after { position: absolute; right: 0; bottom: -0.35rem; left: 0; height: 1px; background: currentColor; content: ""; transform-origin: left; transition: transform 190ms var(--rg-ease); } html[data-reglow-site] .rg-text-link:hover::after { transform: scaleX(0.56); } /* Hero system */ html[data-reglow-site] .rg-hero { position: relative; min-height: clamp(44rem, 100svh, 62rem); padding: calc(var(--rg-header-clearance) + 2rem) 0 clamp(4.5rem, 8vw, 7.5rem); display: grid; align-items: center; overflow: clip; background: var(--rg-white); } html[data-reglow-site] .rg-hero-grid { position: relative; z-index: 2; width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(22rem, 0.76fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); } html[data-reglow-site] .rg-hero-copy { position: relative; z-index: 3; max-width: 49rem; } /* --------------------------------------------------------------------------- Google rating badge (13 Aug 2026) Shows the AVERAGE of the two clinics' ratings. The score, the star fill and the visually-hidden accessible label are all written by REGLOW_STATS in script.js; the badge stays [hidden] until real ratings exist, so a placeholder rating can never reach production. The four-colour Google mark is the one deliberate break from the neutral palette — it is nominative use to identify the review source. Worth confirming against Google's brand guidelines before launch. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-google-badge { margin-bottom: 1.35rem; padding: 0.5rem 0.9rem 0.5rem 0.6rem; border: 1px solid var(--rg-line-soft); border-radius: 999px; display: inline-flex; align-items: center; gap: 0.55rem; background: var(--rg-glass-strong); box-shadow: var(--rg-shadow-sm); } html[data-reglow-site] .rg-google-badge[hidden] { display: none; } html[data-reglow-site] .rg-google-badge-mark { width: 1.05rem; height: 1.05rem; flex: none; } html[data-reglow-site] .rg-google-badge-score { color: var(--rg-ink); font-size: var(--rg-text-2xl); font-weight: 700; line-height: 1; } /* Two star rows stacked: a grey track, and a gold fill clipped to the score. */ html[data-reglow-site] .rg-google-badge-stars { position: relative; width: 5.4rem; height: 1rem; flex: none; background: var(--rg-line); -webkit-mask: var(--rg-star-mask) repeat-x left center / 1.08rem 1rem; mask: var(--rg-star-mask) repeat-x left center / 1.08rem 1rem; } html[data-reglow-site] .rg-google-badge-stars-fill { position: absolute; inset: 0 auto 0 0; width: var(--rg-rating-fill, 0%); background: var(--rg-star); } html[data-reglow-site] .rg-google-badge-label { color: var(--rg-muted); font-size: var(--rg-text-sm); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; } html[data-reglow-site].js [data-hero-sequence] > * { opacity: 0; transform: translateY(0.75rem); transition: opacity 520ms ease, transform 650ms var(--rg-ease); } html[data-reglow-site].js[data-hero-ready="true"] [data-hero-sequence] > * { opacity: 1; transform: none; } html[data-reglow-site].js [data-hero-sequence] > :nth-child(2) { transition-delay: 60ms; } html[data-reglow-site].js [data-hero-sequence] > :nth-child(3) { transition-delay: 120ms; } html[data-reglow-site].js [data-hero-sequence] > :nth-child(4) { transition-delay: 180ms; } html[data-reglow-site].js [data-hero-sequence] > :nth-child(n + 5) { transition-delay: 240ms; } html[data-reglow-site] .rg-hero-copy h1 { max-width: 10.5ch; } html[data-reglow-site] .rg-hero-copy h1 span { color: var(--rg-muted); } html[data-reglow-site] .rg-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.2rem; margin-top: 2rem; } /* --------------------------------------------------------------------------- Hero stat tiles (13 Aug 2026) Three tiles straddling the hero's bottom edge. The wrapper is a sibling of .rg-hero, not a child, because .rg-hero is overflow:clip. --rg-tile-overlap pulls the row up over the hero; the matching margin-bottom hands the following section its spacing back, so nothing downstream shifts. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-hero-stats-wrap { --rg-tile-overlap: clamp(2.75rem, 5vw, 5rem); position: relative; z-index: 5; margin-top: calc(var(--rg-tile-overlap) * -1); margin-bottom: clamp(2.5rem, 5vw, 4.25rem); } html[data-reglow-site] .rg-hero-stats { width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); } html[data-reglow-site] .rg-hero-stat { padding: clamp(1.35rem, 2.4vw, 2rem); border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); display: flex; flex-direction: column; gap: 0.45rem; background: var(--rg-white); box-shadow: var(--rg-shadow-sm); } html[data-reglow-site] .rg-hero-stat-value { color: var(--rg-ink); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1; } /* Placeholder styling while a figure is unset — visibly not a real number. */ html[data-reglow-site] .rg-hero-stat-value[data-rg-unset="true"] { color: var(--rg-muted); font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: 0.02em; } html[data-reglow-site] .rg-hero-stat-label { color: var(--rg-muted); font-size: var(--rg-text-base); font-weight: 500; letter-spacing: 0.09em; line-height: 1.4; text-transform: uppercase; } /* --------------------------------------------------------------------------- Popovers — Enquire now / Call us (13 Aug 2026) Desktop: dropdown anchored to its trigger. Below 720px it becomes a bottom sheet, because the hero actions stack there and an anchored dropdown has nowhere sensible to go. Behaviour (focus, Escape, outside click, arrow keys) lives in script.js. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-popover-host { position: relative; display: inline-flex; } html[data-reglow-site] .rg-popover[hidden] { display: none; } /* While open the panel is moved to by script.js and positioned from the trigger's rect. It has to leave the hero: .rg-hero is overflow:clip, and .rg-hero--bloom .rg-hero-copy has a backdrop-filter — which makes it a containing block for fixed descendants — so neither absolute nor fixed positioning can escape the clip from inside. Moving the node is the only reliable fix. z-index clears the header, which sits at 200. */ /* 260 clears the header (200), the contact dock (240) and the booking rail (250), so a panel opened from the dock is never covered by the rail. */ html[data-reglow-site] .rg-popover { position: fixed; z-index: 260; min-width: 17.5rem; } /* --------------------------------------------------------------------------- Floating contact dock (13 Aug 2026) — global, all pages Sits above the persistent booking rail rather than beside it: the rail is a full-width fixed bottom bar, so anything pinned to the bottom edge would collide. --rg-dock-offset lifts the dock by the rail's height whenever the rail is showing, driven by the same attribute the rail itself uses. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-contact-dock { position: fixed; left: 50%; /* Measured desktop gap was 6px; a fifth of that is ~1px, i.e. effectively flush. The booking rail only exists below 720px, so --rg-dock-offset is 0 on desktop and this is the whole gap. */ bottom: calc(0.07rem + var(--rg-dock-offset, 0px)); translate: -50% 0; z-index: 240; width: min(calc(100% - 1.5rem), 34rem); display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.55rem 0.55rem 1.25rem; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-lg); background: var(--rg-glass-strong); box-shadow: var(--rg-shadow-md); opacity: 0; /* Opacity only — a transform on the reveal fights the -50% centring translate and left the dock a couple of pixels off its intended resting position. */ transition: opacity 260ms ease, visibility 260ms; visibility: hidden; } html[data-reglow-site][data-dock-visible="true"] .rg-contact-dock { opacity: 1; visibility: visible; } /* Dismissed for the session, or the menu is open — stay out of the way. */ html[data-reglow-site][data-dock-dismissed="true"] .rg-contact-dock, html[data-reglow-site][data-menu-open="true"] .rg-contact-dock { opacity: 0; visibility: hidden; } html[data-reglow-site][data-booking-rail-visible="true"] .rg-contact-dock, html[data-reglow-site] .rg-booking-rail.is-visible ~ .rg-contact-dock { --rg-dock-offset: 4.75rem; } /* Label pushes the buttons to the right edge of the bar. */ html[data-reglow-site] .rg-contact-dock-label { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--rg-ink); font-size: var(--rg-text-xl); line-height: 1.3; } html[data-reglow-site] .rg-contact-dock-close { width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 999px; display: grid; flex: none; place-items: center; background: transparent; color: var(--rg-muted); font-size: var(--rg-text-4xl); line-height: 1; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } html[data-reglow-site] .rg-contact-dock-close:hover { background: var(--rg-paper); color: var(--rg-ink); } html[data-reglow-site] .rg-popover-panel { padding: 0.85rem; border: 1px solid var(--rg-line); border-radius: var(--rg-radius-md); background: var(--rg-white); box-shadow: var(--rg-shadow-md); } html[data-reglow-site] .rg-popover-title { margin: 0 0 0.6rem; padding-inline: 0.55rem; color: var(--rg-muted); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } html[data-reglow-site] .rg-popover-list { margin: 0; padding: 0; list-style: none; } html[data-reglow-site] .rg-popover-list li + li { margin-top: 0.1rem; } html[data-reglow-site] .rg-popover-list a { padding: 0.6rem 0.55rem; border-radius: var(--rg-radius-xs); display: flex; align-items: center; gap: 0.7rem; color: var(--rg-ink); font-size: var(--rg-text-xl); transition: background-color 160ms ease; } /* Neutral rather than bronze: bronze is still under review as an accent (see CLAUDE.md), so it is not extended beyond the header CTA without a decision. The bare-svg selector is a guard: an icon that loses its class would otherwise render at the SVG default size and blow the row height out (this happened to the contact dock on 13 Aug 2026 — 127px rows instead of ~52px). */ html[data-reglow-site] .rg-popover-list a > svg, html[data-reglow-site] .rg-popover-icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--rg-muted); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } html[data-reglow-site] .rg-popover-label { flex: 1 1 auto; min-width: 0; } html[data-reglow-site] .rg-popover-meta { flex: none; color: var(--rg-muted); font-size: var(--rg-text-base); text-align: right; white-space: nowrap; } html[data-reglow-site] .rg-popover-list a:hover, html[data-reglow-site] .rg-popover-list a:focus-visible { background: var(--rg-blush-wash); } /* Only used by the mobile bottom-sheet presentation. */ html[data-reglow-site] .rg-popover-backdrop { position: fixed; inset: 0; z-index: 255; background: rgba(46, 43, 43, 0.34); animation: rg-popover-fade 180ms ease; } @keyframes rg-popover-fade { from { opacity: 0; } to { opacity: 1; } } html[data-reglow-site] .rg-hero-note { max-width: 55ch; margin: 1rem 0 0; color: var(--rg-muted); font-size: var(--rg-text-md); line-height: 1.6; } html[data-reglow-site] .rg-hero-art { position: relative; min-height: min(68svh, 42rem); overflow: hidden; border: 1px solid var(--rg-line-soft); border-radius: 48% 48% var(--rg-radius-sm) var(--rg-radius-sm) / 26% 26% var(--rg-radius-sm) var(--rg-radius-sm); background: var(--rg-blush-wash); box-shadow: var(--rg-shadow-md); } html[data-reglow-site] .rg-hero-art :where(picture, img) { width: 100%; height: 100%; } html[data-reglow-site] .rg-hero-art img { display: block; object-fit: cover; } html[data-reglow-site] .rg-hero-art img:not(.rg-parallax-media) { transition: transform 1.1s var(--rg-ease); } html[data-reglow-site] .rg-unique-hero-media { width: 100%; height: 100%; position: absolute; inset: 0; object-position: center; } html[data-reglow-site] .rg-hero-art:hover img:not(.rg-parallax-media) { transform: scale(1.018); } html[data-reglow-site] .rg-hero-art:hover .rg-parallax-media { --rg-parallax-hover-scale: 1.012; } html[data-reglow-site] .rg-hero-art-note { position: absolute; right: clamp(1rem, 4vw, 2.4rem); bottom: clamp(1rem, 4vw, 2.4rem); left: clamp(1rem, 4vw, 2.4rem); max-width: 21rem; padding: 1.25rem 1.35rem; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--rg-radius-sm); background: rgba(255, 255, 255, 0.82); box-shadow: var(--rg-shadow-sm); color: var(--rg-ink); font-size: var(--rg-text-xl); line-height: 1.5; } html[data-reglow-site] .rg-hero--bloom { min-height: max(48rem, 100svh); background: var(--rg-paper); } html[data-reglow-site] .rg-hero-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; } html[data-reglow-site] .rg-hero-backdrop-media { position: absolute; inset: -2.5%; display: block; background-image: var(--rg-hero-bloom); background-position: center; background-size: cover; } html[data-reglow-site] .rg-hero-backdrop::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 30%, rgba(255, 255, 255, 0.27) 57%, rgba(255, 255, 255, 0) 78%); content: ""; } html[data-reglow-site] .rg-hero--bloom .rg-hero-grid { grid-template-columns: minmax(34rem, 0.95fr) minmax(18rem, 1.05fr); } /* Tuned for the short headline; retune if the wording changes length. */ html[data-reglow-site] .rg-hero--bloom h1 { max-width: 15ch; font-size: clamp(3.55rem, 5.6vw, 5.35rem); line-height: 0.95; } html[data-reglow-site] .rg-hero--bloom .rg-hero-copy { padding: clamp(1.6rem, 3.5vw, 3rem); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: var(--rg-radius-md); background: rgba(255, 255, 255, 0.56); box-shadow: 0 28px 80px rgba(46, 43, 43, 0.08); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html[data-reglow-site] .rg-hero--bloom .rg-hero-copy { -webkit-backdrop-filter: blur(18px) saturate(110%); backdrop-filter: blur(18px) saturate(110%); } } html[data-reglow-site] .rg-hero--bloom .rg-hero-art { display: none; } html[data-reglow-site] .rg-hero--portrait { background: var(--rg-paper-light); } html[data-reglow-site] .rg-hero--portrait .rg-hero-grid { grid-template-columns: minmax(0, 0.8fr) minmax(23rem, 0.72fr); } html[data-reglow-site] .rg-glass-study { position: relative; min-height: min(70svh, 47rem); overflow: hidden; border: 1px solid rgba(46, 43, 43, 0.09); border-radius: 48% 48% var(--rg-radius-sm) var(--rg-radius-sm) / 18% 18% var(--rg-radius-sm) var(--rg-radius-sm); background-color: var(--rg-paper); background-image: var(--rg-glass-study); background-position: center 48%; background-size: cover; box-shadow: var(--rg-shadow-md); } html[data-reglow-site] .rg-glass-study::after { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: inherit; box-shadow: inset 0 -5rem 7rem rgba(228, 204, 184, 0.08); content: ""; pointer-events: none; } html[data-reglow-site] .rg-glass-study__label { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; max-width: 15rem; padding: 0.85rem 1rem; border: 1px solid rgba(255, 255, 255, 0.68); border-radius: var(--rg-radius-sm); background: rgba(255, 255, 255, 0.78); color: var(--rg-ink); font-size: var(--rg-text-base); line-height: 1.5; } html[data-reglow-site] .rg-hero--compact { min-height: 34rem; padding-bottom: clamp(4rem, 7vw, 6rem); background: var(--rg-paper-light); } html[data-reglow-site] .rg-hero--compact .rg-hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(18rem, 0.5fr); } html[data-reglow-site] .rg-hero--compact h1 { font-size: clamp(3.45rem, 6vw, 6.3rem); } html[data-reglow-site] .rg-bloom-fragment { position: absolute; width: min(34rem, 40vw); aspect-ratio: 1.15; overflow: hidden; border-radius: 50%; opacity: 0.46; pointer-events: none; } html[data-reglow-site] .rg-bloom-fragment::before { position: absolute; inset: -10%; background-image: var(--rg-hero-bloom); background-position: 78% 52%; background-size: 188%; content: ""; transform: rotate(-8deg); } /* Proof and trust */ html[data-reglow-site] .rg-proof-strip { border-block: 1px solid var(--rg-line-soft); background: rgba(255, 255, 255, 0.92); } html[data-reglow-site] .rg-proof-grid { width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-reglow-site] .rg-proof-item { min-height: clamp(8.4rem, 10vw, 10.5rem); padding: clamp(1.4rem, 2.8vw, 2.7rem); border-right: 1px solid var(--rg-line-soft); display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: start; gap: 0.7rem 1.1rem; color: var(--rg-ink); font-size: var(--rg-text-md); line-height: 1.45; } html[data-reglow-site] .rg-proof-item:last-child { border-right: 0; } html[data-reglow-site] .rg-proof-index { padding-top: 0.22rem; color: var(--rg-muted); font-size: var(--rg-text-2xs); font-weight: 500; letter-spacing: 0.12em; } html[data-reglow-site] .rg-proof-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.65rem; } html[data-reglow-site] .rg-proof-copy > span { max-width: 24ch; color: var(--rg-muted); } html[data-reglow-site] .rg-proof-item svg { width: 1.45rem; height: 1.45rem; flex: none; fill: none; stroke: var(--rg-body); stroke-width: 1.35; } html[data-reglow-site] .rg-stat { display: block; max-width: 13ch; color: var(--rg-ink); font-size: clamp(1.8rem, 2.65vw, 2.8rem); font-weight: 400; letter-spacing: -0.055em; line-height: 1.02; } /* Editorial home and conversion modules */ html[data-reglow-site] :where( .rg-editorial-about, .rg-intent-section, .rg-treatment-showcase, .rg-team-preview, .rg-service-resources ) { isolation: isolate; } html[data-reglow-site] .rg-editorial-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(24rem, 0.82fr); align-items: center; gap: clamp(3rem, 9vw, 9rem); } html[data-reglow-site] .rg-editorial-copy { max-width: 40rem; } html[data-reglow-site] .rg-editorial-copy h2 { max-width: 11ch; } html[data-reglow-site] .rg-editorial-copy h2 em { color: var(--rg-bronze); font-style: normal; } /* Sized to match the body paragraph that follows it. The 27ch measure and the tight 1.35 line-height both existed to suit the old larger display size; at body size they would wrap this sentence short and set it tighter than the paragraph beneath. Colour stays on --rg-ink so it still reads as a lead. */ html[data-reglow-site] .rg-editorial-lead { color: var(--rg-ink); font-size: var(--rg-text-3xl); line-height: 1.65; } html[data-reglow-site] .rg-editorial-copy .rg-text-link { margin-top: 1rem; } /* The arch is kept — owner compared it against a plain rounded rectangle on 17 Aug 2026 and chose the arch. It is the same motif the hero and service media carry, so this tile stays part of that family. aspect-ratio rather than min-height so the crop is IDENTICAL at every width. A fixed height cropped a different slice of the photo at every breakpoint, which is why the ceiling ring light survived on some screens and not others. 2/3 against the photo's 9:16 leaves ~15% to come off, and object-position takes all of it from the bottom, so the full ring light is kept. The arch's vertical radius is 15.5%, not the 19% it was before. Those are percentages OF THE BOX, and the box grew from 640px to 785px tall when the ratio replaced the fixed height — 19% would have deepened the arch by 28px and eaten into the ring light this change exists to preserve. 15.5% of 785 reproduces the original 122px arch exactly. */ html[data-reglow-site] .rg-editorial-media { position: relative; /* 80% of the grid column, owner's call 17 Aug 2026. aspect-ratio carries the height down with it, so the tile shrinks by a fifth in both directions and the photo inside is neither restretched nor recropped — the visible band stays 0–84%. Centred in the leftover column space. Reset to full width below 920px, where the grid is a single column and 80% would leave the photo looking stranded. */ width: 80%; margin-inline: auto; aspect-ratio: 2 / 3; margin-block: 0; overflow: hidden; border-radius: 48% 48% var(--rg-radius-md) var(--rg-radius-md) / 15.5% 15.5% var(--rg-radius-md) var(--rg-radius-md); background: var(--rg-blush-wash); box-shadow: var(--rg-shadow-md); } html[data-reglow-site] .rg-editorial-media img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; /* Anchor to the top. cover never distorts — it crops — so the only question is which edge loses. Here that is the floor, not the ring light. */ object-position: 50% 0%; } html[data-reglow-site] .rg-editorial-media figcaption { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2.5rem); left: clamp(1rem, 4vw, 2.5rem); padding: 1.2rem 1.35rem; border: 1px solid rgba(255, 255, 255, 0.68); border-radius: var(--rg-radius-sm); background: rgba(255, 255, 255, 0.78); box-shadow: var(--rg-shadow-sm); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html[data-reglow-site] .rg-editorial-media figcaption { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } } html[data-reglow-site] .rg-editorial-media figcaption span { display: block; margin-bottom: 0.45rem; color: var(--rg-muted); font-size: var(--rg-text-2xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } html[data-reglow-site] .rg-editorial-media figcaption strong { color: var(--rg-ink); font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.25; } /* --------------------------------------------------------------------------- Numbered step row — "Where to begin" (13 Aug 2026) Structure follows the reference layout the owner supplied (four steps in a row, oversized numeral, bold title, short description). Colour and type are ReGlow's own — none of the reference palette was carried over. Semantic
    so the sequence survives without CSS and reads correctly to screen readers. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-step-row { margin: 0; padding: 0; display: grid; /* One equal column per step, however many there are. A hardcoded repeat(4) left an empty quarter on the pages that use three. The narrow override below still forces two columns and wraps. */ grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.75rem); list-style: none; } html[data-reglow-site] .rg-step { padding-top: 1.25rem; border-top: 1px solid var(--rg-line); } html[data-reglow-site] .rg-step-number { display: block; margin-bottom: 0.6rem; color: var(--rg-bronze); font-size: clamp(2.4rem, 4vw, 3.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; } html[data-reglow-site] .rg-step-title { margin: 0 0 0.5rem; color: var(--rg-ink); font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; text-transform: none; text-wrap: balance; } html[data-reglow-site] .rg-step-copy { margin: 0; color: var(--rg-body); font-size: var(--rg-text-xl); line-height: 1.6; } /* --------------------------------------------------------------------------- Marquee — shared by the Treatments and Team rows (13 Aug 2026) The track holds the tiles twice; the animation translates exactly -50%, so the second copy lands where the first began and the loop is seamless. Both copies are in the markup, and the duplicate is aria-hidden so screen readers and the tab order encounter each tile once. --rg-marquee-direction flips the travel for the team row. Hover and keyboard focus both pause, so a tile can be clicked without chasing it. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-marquee { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent); mask: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent); } /* The drag offset uses `translate`, the independent transform property, so it composes with the keyframe `transform` rather than overwriting it. Setting an inline transform here would cancel the animation instead of offsetting it. */ html[data-reglow-site] .rg-marquee-track { display: flex; width: max-content; gap: clamp(0.75rem, 1.5vw, 1.25rem); translate: var(--rg-marquee-shift, 0px) 0; animation: rg-marquee var(--rg-marquee-duration, 60s) linear infinite; animation-direction: var(--rg-marquee-direction, normal); } html[data-reglow-site] .rg-marquee:hover .rg-marquee-track, html[data-reglow-site] .rg-marquee:focus-within .rg-marquee-track, html[data-reglow-site] .rg-marquee.is-dragging .rg-marquee-track { animation-play-state: paused; } html[data-reglow-site] .rg-marquee { cursor: grab; touch-action: pan-y; } html[data-reglow-site] .rg-marquee.is-dragging { cursor: grabbing; user-select: none; } /* Three units are laid down (see script.js), so one cycle travels one third. */ @keyframes rg-marquee { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } } /* Reduced motion: stop the travel and let the row be scrolled by hand. */ @media (prefers-reduced-motion: reduce) { html[data-reglow-site] .rg-marquee { overflow-x: auto; -webkit-mask: none; mask: none; } html[data-reglow-site] .rg-marquee-track { animation: none; } } /* --------------------------------------------------------------------------- Bronze tint on imagery, clearing on hover — SITE-WIDE Bronze Touch (--rg-bronze, #846f5d) is the kit colour requested. Skin Blur (--rg-blush, #e4ccb8) is the paler alternative and is also defined, should this ever need softening. This is the site's standard treatment for content photography, not a home-page flourish — the rules near `.rg-tint` below list the components it applies to. Some imagery is deliberately excluded (maps, the logo, device shots on white, and cards that print white text over the photo). The reasons are in STYLE-GUIDE.md, and `check_imagery_tint` in build/check_site.py fails the build if a new content image lands in a component nobody has classified. --------------------------------------------------------------------------- */ /* Cards inside a marquee — one shape for both Treatments and Team. */ html[data-reglow-site] .rg-scroll-card { width: clamp(13rem, 20vw, 17rem); flex: none; display: flex; flex-direction: column; gap: 0.55rem; color: var(--rg-ink); text-decoration: none; } html[data-reglow-site] .rg-scroll-media { display: block; aspect-ratio: 4 / 5; border-radius: var(--rg-radius-sm); background: var(--rg-paper-light); } html[data-reglow-site] .rg-scroll-media img { width: 100%; height: 100%; object-fit: cover; } /* Treatment names set in caps, per owner request 13 Aug 2026. Team names below override this back to sentence case — a person's name should not be shouted. */ html[data-reglow-site] .rg-scroll-label { padding-top: 0.15rem; color: var(--rg-ink); font-size: var(--rg-text-md); font-weight: 500; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } html[data-reglow-site] .rg-scroll-card--person .rg-scroll-label { font-size: var(--rg-text-xl); letter-spacing: -0.01em; text-transform: none; } html[data-reglow-site] .rg-scroll-meta { color: var(--rg-muted); font-size: var(--rg-text-md); line-height: 1.4; } html[data-reglow-site] .rg-scroll-reg { color: var(--rg-muted); font-size: var(--rg-text-xs); letter-spacing: 0.06em; } html[data-reglow-site] a.rg-scroll-card:hover .rg-scroll-label { text-decoration: underline; text-underline-offset: 0.25em; } /* --------------------------------------------------------------------------- Brands and partners (13 Aug 2026) No logo files are committed — they are third-party trademarks and every media library tried was gated. Until a file is supplied each partner shows its name set in Chivo, in Bronze Touch, which keeps the row cohesive and honest rather than showing empty boxes. Adding a real logo: drop the file in assets/partners/ and add to that
  1. data-logo style="--rg-partner-logo:url('/assets/partners/.svg')" The rule below then masks the file and fills it with Bronze Touch, so the source artwork's own colours are irrelevant and the row reads as one monochrome set. Works for SVG or any raster with transparency. The name text stays in the DOM as the accessible label. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-partner-track { margin: 0; padding: 0; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); list-style: none; } /* Each box is sized to its own artwork so the gaps read evenly. The supplied marks span aspect ratios from 2.17 (Solta) to 10.39 (dermocosmética). With one fixed box width the narrow marks sat marooned in empty boxes while the wide ones filled theirs, which made the spacing look arbitrary. Width now comes from each logo's own ratio via --rg-partner-ratio, capped so the widest wordmarks cannot run away with the row. Either side of that cap the artwork still fills the box horizontally — below it because the box matches the ratio, above it because `contain` fits to width — so the only whitespace left between logos is the flex gap itself. */ html[data-reglow-site] .rg-partner { --rg-partner-height: 2.6rem; --rg-partner-max: 12rem; width: min(calc(var(--rg-partner-ratio, 3) * var(--rg-partner-height)), var(--rg-partner-max)); height: var(--rg-partner-height); flex: none; display: grid; place-items: center; } html[data-reglow-site] .rg-partner-name { color: var(--rg-bronze); font-size: var(--rg-text-3xl); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; } html[data-reglow-site] .rg-partner[data-logo] .rg-partner-name { width: 100%; height: 100%; background: var(--rg-bronze); color: transparent; -webkit-mask: var(--rg-partner-logo) no-repeat center / contain; mask: var(--rg-partner-logo) no-repeat center / contain; } /* The components whose photography always carries the tint. Listing them here rather than adding a class to each element means an image dropped into any of them is tinted with nothing to remember — which is the whole point, since the class was added to the home page and then missed by every page built after. CSS has no way to name a selector list once, so the list repeats across the three rules below. Keep them in step, and see STYLE-GUIDE.md for what belongs in it and what deliberately does not. `.rg-tint` stays as the explicit opt-in for a one-off image outside these components. */ html[data-reglow-site] :is(.rg-tint, .rg-scroll-media, .rg-card-media, .rg-team-photo, .rg-service-media, .rg-option-media, .rg-service-gallery-media, .rg-gallery-media) { position: relative; overflow: hidden; /* Without this the multiply blends through to the page background, not just the image underneath. */ isolation: isolate; } html[data-reglow-site] :is(.rg-tint, .rg-scroll-media, .rg-card-media, .rg-team-photo, .rg-service-media, .rg-option-media, .rg-service-gallery-media, .rg-gallery-media)::after { position: absolute; inset: 0; z-index: 1; background: var(--rg-bronze); content: ""; mix-blend-mode: multiply; opacity: 0.55; pointer-events: none; transition: opacity 320ms var(--rg-ease); } /* Clears when the pointer is anywhere on the card that owns the image, not only over the image itself — these wrappers sit above a text body, so hovering the caption would otherwise leave the tint on while the image zooms. Follows the parent-hover pattern already used by `.rg-card:hover .rg-card-media img`. */ html[data-reglow-site] :is(.rg-tint, .rg-scroll-media, .rg-card-media, .rg-team-photo, .rg-service-media, .rg-option-media, .rg-service-gallery-media, .rg-gallery-media):is(:hover, :focus-visible, :focus-within)::after, html[data-reglow-site] :is(.rg-card, .rg-team-card, .rg-option-card, .rg-scroll-card):is(:hover, :focus-within) :is(.rg-tint, .rg-scroll-media, .rg-card-media, .rg-team-photo, .rg-service-media, .rg-option-media, .rg-service-gallery-media)::after { opacity: 0; } html[data-reglow-site] .rg-intent-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.8rem; } html[data-reglow-site] .rg-intent-card { position: relative; min-height: 15rem; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); grid-column: span 3; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.7); color: var(--rg-body); transition: transform 260ms var(--rg-ease), box-shadow 260ms ease, border-color 200ms ease; } html[data-reglow-site] .rg-intent-card:hover { border-color: var(--rg-line); box-shadow: var(--rg-shadow-sm); transform: translateY(-3px); } html[data-reglow-site] .rg-intent-card > span { margin-bottom: auto; color: var(--rg-muted); font-size: var(--rg-text-2xs); font-weight: 500; letter-spacing: 0.12em; } html[data-reglow-site] .rg-intent-card strong { max-width: 16ch; margin: 2.5rem 0 0.8rem; color: var(--rg-ink); font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.16; } html[data-reglow-site] .rg-intent-card small { max-width: 30ch; font-size: var(--rg-text-base); line-height: 1.55; } html[data-reglow-site] .rg-intent-card svg { width: 1.25rem; height: 1.25rem; position: absolute; right: 1.35rem; top: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 240ms var(--rg-ease); } html[data-reglow-site] .rg-intent-card:hover svg, html[data-reglow-site] .rg-intent-card:focus-visible svg { transform: translateX(0.28rem); } html[data-reglow-site] .rg-intent-card--decision { min-height: 11rem; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(15rem, 0.55fr) minmax(16rem, 0.45fr) auto; align-items: center; gap: 1.25rem 2rem; background: var(--rg-ink); color: rgba(255, 255, 255, 0.7); } html[data-reglow-site] .rg-intent-card--decision > span, html[data-reglow-site] .rg-intent-card--decision strong, html[data-reglow-site] .rg-intent-card--decision small { margin: 0; color: inherit; } html[data-reglow-site] .rg-intent-card--decision strong { color: var(--rg-white); } html[data-reglow-site] .rg-intent-card--decision svg { position: static; } html[data-reglow-site] .rg-section-head--controls { grid-template-columns: minmax(0, 1fr) auto; } html[data-reglow-site] .rg-rail-controls { display: flex; gap: 0.55rem; justify-self: end; } html[data-reglow-site] .rg-rail-controls button { width: 3rem; height: 3rem; border: 1px solid var(--rg-line); border-radius: 50%; display: grid; place-items: center; background: var(--rg-white); color: var(--rg-ink); transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; } html[data-reglow-site] .rg-rail-controls button:first-child svg { transform: rotate(180deg); } html[data-reglow-site] .rg-rail-controls button:hover { background: var(--rg-ink); color: var(--rg-white); transform: translateY(-2px); } html[data-reglow-site] .rg-rail-controls svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; } html[data-reglow-site] .rg-treatment-rail { margin-right: calc((100vw - min(100vw, var(--rg-container))) / -2); padding: 0 max(var(--rg-gutter), calc((100vw - var(--rg-container)) / 2)) 1rem 0; display: flex; gap: 0.9rem; overflow-x: auto; scroll-padding-inline: var(--rg-gutter); scroll-snap-type: x mandatory; scrollbar-width: none; } html[data-reglow-site] .rg-treatment-rail::-webkit-scrollbar { display: none; } html[data-reglow-site] .rg-treatment-rail-card { position: relative; min-height: 34rem; flex: 0 0 clamp(18rem, 26vw, 23.5rem); overflow: hidden; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-md); scroll-snap-align: start; background: var(--rg-paper); color: var(--rg-white); } html[data-reglow-site] .rg-treatment-rail-card > img, html[data-reglow-site] .rg-treatment-rail-shade { width: 100%; height: 100%; position: absolute; inset: 0; } html[data-reglow-site] .rg-treatment-rail-card > img { object-fit: cover; transition: transform 650ms var(--rg-ease); } html[data-reglow-site] .rg-treatment-rail-shade { background: linear-gradient(180deg, rgba(24, 22, 22, 0.02) 32%, rgba(24, 22, 22, 0.88) 100%); } html[data-reglow-site] .rg-treatment-rail-index { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); font-size: var(--rg-text-2xs); } html[data-reglow-site] .rg-treatment-rail-copy { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 1.5rem; display: flex; flex-direction: column; } html[data-reglow-site] .rg-treatment-rail-copy small { color: rgba(255, 255, 255, 0.7); font-size: var(--rg-text-2xs); font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; } html[data-reglow-site] .rg-treatment-rail-copy strong { max-width: 16ch; margin: 0.65rem 0 1.15rem; color: var(--rg-white); font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1.08; } html[data-reglow-site] .rg-treatment-rail-copy > span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: rgba(255, 255, 255, 0.82); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } html[data-reglow-site] .rg-treatment-rail-copy svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; } html[data-reglow-site] .rg-treatment-rail-card:hover > img { transform: scale(1.025); } html[data-reglow-site] .rg-rail-progress { --rg-rail-progress: 0; height: 1px; margin-top: 0.7rem; overflow: hidden; background: var(--rg-line-soft); } html[data-reglow-site] .rg-rail-progress > span { width: 100%; height: 100%; display: block; background: linear-gradient(90deg, var(--rg-blush), var(--rg-bronze)); transform: scaleX(max(0.08, var(--rg-rail-progress))); transform-origin: left; transition: transform 100ms linear; } html[data-reglow-site] .rg-rail-foot { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--rg-muted); font-size: var(--rg-text-xs); } html[data-reglow-site] .rg-journey-copy h2 { max-width: 11ch; } html[data-reglow-site] .rg-journey-intro { max-width: 42ch; color: rgba(255, 255, 255, 0.68); } html[data-reglow-site] .rg-consultation-journey .rg-story-media figcaption { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--rg-radius-sm); background: rgba(46, 43, 43, 0.68); color: rgba(255, 255, 255, 0.78); font-size: var(--rg-text-sm); } html[data-reglow-site] .rg-consultation-journey .rg-consultation-card { border-color: rgba(255, 255, 255, 0.2); } html[data-reglow-site] .rg-consultation-journey .rg-consultation-card :where(h3, .rg-card-index) { color: var(--rg-white); } html[data-reglow-site] .rg-consultation-journey .rg-consultation-card p { color: rgba(255, 255, 255, 0.68); } html[data-reglow-site] .rg-journey-actions, html[data-reglow-site] .rg-final-cta-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; } html[data-reglow-site] .rg-text-link--light { color: var(--rg-white); } html[data-reglow-site] .rg-team-grid--preview { grid-template-columns: repeat(4, minmax(0, 1fr)); } html[data-reglow-site] .rg-clinic-band .rg-section-head > :last-child, html[data-reglow-site] .rg-clinic-band .rg-section-head > :last-child p { color: rgba(255, 255, 255, 0.7); } html[data-reglow-site] .rg-clinic-card a:not(.rg-button) { color: inherit; } html[data-reglow-site] .rg-final-cta-actions { justify-content: center; margin-bottom: 1.5rem; } html[data-reglow-site] .rg-final-cta small { display: block; color: rgba(46, 43, 43, 0.7); font-size: var(--rg-text-sm); line-height: 1.5; } /* Generic cards and media */ html[data-reglow-site] .rg-card { position: relative; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); overflow: hidden; background: var(--rg-white); color: var(--rg-body); box-shadow: 0 1px 0 rgba(46, 43, 43, 0.02); transition: transform 300ms var(--rg-ease), border-color 220ms ease, box-shadow 300ms ease; } html[data-reglow-site] .rg-card :where(h2, h3, h4, strong, .rg-text-link) { color: var(--rg-ink); } html[data-reglow-site] .rg-card:hover { border-color: rgba(46, 43, 43, 0.2); box-shadow: var(--rg-shadow-sm); transform: translateY(-4px); } html[data-reglow-site] .rg-card-media { position: relative; aspect-ratio: var(--rg-media-ratio, 4 / 5); max-height: 65svh; overflow: hidden; background: var(--rg-blush-wash); } html[data-reglow-site] .rg-card-media :where(picture, img, video) { width: 100%; height: 100%; } html[data-reglow-site] .rg-card-media :where(img, video) { object-fit: cover; transition: transform 650ms var(--rg-ease); } html[data-reglow-site] .rg-card:hover .rg-card-media img { transform: scale(1.018); } html[data-reglow-site] .rg-card-body { padding: clamp(1.25rem, 2.5vw, 2rem); } html[data-reglow-site] .rg-card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; color: var(--rg-muted); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } html[data-reglow-site] .rg-card-body p:last-child { margin-bottom: 0; } /* Treatment index */ html[data-reglow-site] .rg-filter-bar { position: relative; z-index: 3; margin-bottom: 2.5rem; padding: 0.55rem; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-md); display: flex; flex-wrap: wrap; gap: 0.45rem; background: rgba(255, 255, 255, 0.82); } html[data-reglow-site] .rg-filter-button { min-height: 2.75rem; padding: 0.7rem 1rem; border: 1px solid transparent; border-radius: var(--rg-radius-sm); background: transparent; color: var(--rg-body); font-size: var(--rg-text-sm); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; } html[data-reglow-site] .rg-filter-button:hover, html[data-reglow-site] .rg-filter-button.is-active, html[data-reglow-site] .rg-filter-button[aria-pressed="true"] { border-color: var(--rg-line); background: var(--rg-ink); color: var(--rg-white); } html[data-reglow-site] .rg-treatment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; } html[data-reglow-site] .rg-treatment-card { min-width: 0; display: flex; flex-direction: column; text-decoration: none; } html[data-reglow-site] .rg-treatment-directory-section .rg-section-head h2 { max-width: 14ch; } html[data-reglow-site] .rg-treatment-grid--directory { grid-auto-rows: 1fr; } html[data-reglow-site] .rg-treatment-grid--directory .rg-treatment-card { height: 100%; } html[data-reglow-site] .rg-treatment-card:focus-visible { outline: 2px solid var(--rg-blush); outline-offset: 4px; } html[data-reglow-site] .rg-treatment-card--consultation .rg-card-meta > span:first-child { color: var(--rg-bronze); } html[data-reglow-site] .rg-treatment-card .rg-card-media { aspect-ratio: 3 / 4; } html[data-reglow-site] .rg-treatment-card h3 { max-width: 16ch; font-size: clamp(1.35rem, 2vw, 1.9rem); } html[data-reglow-site] .rg-treatment-card .rg-card-body { min-height: 14.5rem; display: flex; flex: 1; flex-direction: column; } html[data-reglow-site] .rg-treatment-card .rg-text-link { margin-top: auto; align-self: flex-start; } html[data-reglow-site] .rg-treatment-card:hover .rg-text-link::after { transform: scaleX(0.56); } html[data-reglow-site] .rg-treatment-card--featured { grid-column: span 2; } html[data-reglow-site] .rg-treatment-card--featured .rg-card-media { aspect-ratio: 16 / 10; } html[data-reglow-site] .rg-treatment-card--featured .rg-card-body { min-height: 13rem; } /* Service detail templates */ html[data-reglow-site] .rg-service-hero { position: relative; min-height: 45rem; padding: calc(var(--rg-header-clearance) + 2.5rem) 0 5rem; display: grid; align-items: center; overflow: clip; background: var(--rg-paper-light); } /* Consultation-first neutral variant for higher-risk service routes. It supports verified explanatory copy and abstract/clinic media without requiring procedural imagery, outcome media or price promotion. */ html[data-reglow-site] .rg-service-hero--neutral { background: var(--rg-white); } html[data-reglow-site] .rg-service-hero--neutral .rg-service-hero-grid { grid-template-columns: minmax(0, 0.86fr) minmax(20rem, 0.58fr); } html[data-reglow-site] .rg-service-hero--neutral .rg-service-qualifier { max-width: 58ch; border-left-color: var(--rg-ink); background: var(--rg-paper-light); } html[data-reglow-site] .rg-service-hero-grid { position: relative; z-index: 2; width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.64fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); } html[data-reglow-site] .rg-service-hero h1 { max-width: 12ch; font-size: clamp(3.4rem, 6.3vw, 6.6rem); } html[data-reglow-site] .rg-breadcrumbs { padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; list-style: none; color: var(--rg-muted); font-size: var(--rg-text-xs); letter-spacing: 0.08em; text-transform: uppercase; } html[data-reglow-site] .rg-breadcrumbs li + li::before { margin-right: 0.55rem; content: "/"; opacity: 0.5; } html[data-reglow-site] .rg-service-media { position: relative; aspect-ratio: 4 / 5; max-height: 68svh; overflow: hidden; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-md); background: var(--rg-blush-wash); box-shadow: var(--rg-shadow-md); } html[data-reglow-site] .rg-service-media :where(picture, img) { width: 100%; height: 100%; } html[data-reglow-site] .rg-service-media img { object-fit: cover; } html[data-reglow-site] .rg-service-media--glass { background-image: var(--rg-glass-study); background-position: center; background-size: cover; } html[data-reglow-site] .rg-service-media--abstract { background-color: var(--rg-paper-light); background-image: var(--rg-glass-study); background-position: center 48%; background-size: cover; } html[data-reglow-site] .rg-service-qualifier { margin-top: 1.25rem; padding: 1rem 1.1rem; border-left: 2px solid var(--rg-blush); background: rgba(255, 255, 255, 0.6); color: var(--rg-body); font-size: var(--rg-text-md); line-height: 1.6; } html[data-reglow-site] .rg-service-anchor-nav { position: sticky; top: calc(var(--rg-header-top) + var(--rg-header-height) + 0.75rem); z-index: 80; border-block: 1px solid var(--rg-line-soft); background: rgba(255, 255, 255, 0.94); } html[data-reglow-site] .rg-service-body { position: relative; } html[data-reglow-site] .rg-service-anchor-inner { width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); min-height: 4.1rem; margin-inline: auto; display: flex; align-items: center; gap: 1.25rem; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html[data-reglow-site] .rg-service-anchor-nav { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.8); } } html[data-reglow-site] .rg-service-anchor-list { width: auto; min-height: 3.75rem; padding: 0; margin: 0; display: flex; flex: 1; align-items: center; gap: clamp(1.1rem, 3vw, 2.75rem); overflow-x: auto; list-style: none; scrollbar-width: none; } html[data-reglow-site] .rg-service-anchor-cta { min-width: max-content; flex: none; } html[data-reglow-site] .rg-service-anchor-list::-webkit-scrollbar { display: none; } html[data-reglow-site] .rg-service-anchor-list a { position: relative; padding: 1.2rem 0; color: var(--rg-body); font-size: var(--rg-text-sm); font-weight: 500; letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; } html[data-reglow-site] .rg-service-anchor-list a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--rg-blush); content: ""; transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--rg-ease); } html[data-reglow-site] .rg-service-anchor-list a[aria-current="true"], html[data-reglow-site] .rg-service-anchor-list a.is-active { color: var(--rg-ink); } html[data-reglow-site] .rg-service-anchor-list a[aria-current="true"]::after, html[data-reglow-site] .rg-service-anchor-list a.is-active::after { transform: scaleX(1); transform-origin: left; } html[data-reglow-site] .rg-service-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.34fr); align-items: start; gap: clamp(3rem, 8vw, 8rem); } html[data-reglow-site] .rg-service-layout--aftercare { grid-template-columns: minmax(0, 0.78fr) minmax(28rem, 0.72fr); gap: clamp(3rem, 6vw, 6rem); } html[data-reglow-site] .rg-service-main { min-width: 0; } html[data-reglow-site] .rg-service-aside { position: sticky; top: calc(var(--rg-header-top) + var(--rg-header-height) + 6.25rem); } html[data-reglow-site] .rg-fact-list { padding: 0; margin: 0; border-top: 1px solid var(--rg-line); } html[data-reglow-site] .rg-fact-list > div { padding: 1rem 0; border-bottom: 1px solid var(--rg-line-soft); display: grid; grid-template-columns: minmax(7rem, 0.36fr) minmax(0, 1fr); gap: 1.2rem; } html[data-reglow-site] .rg-fact-list dt { color: var(--rg-muted); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } html[data-reglow-site] .rg-fact-list dd { margin: 0; color: var(--rg-ink); } html[data-reglow-site] .rg-option-grid, html[data-reglow-site] .rg-expect-grid, html[data-reglow-site] .rg-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } html[data-reglow-site] .rg-expect-grid--single { grid-template-columns: minmax(0, 56rem); } html[data-reglow-site] .rg-expect-grid--single .rg-expect-card { min-height: 20rem; } html[data-reglow-site] .rg-option-card, html[data-reglow-site] .rg-expect-card, html[data-reglow-site] .rg-related-card { position: relative; min-height: 18rem; padding: clamp(1.35rem, 3vw, 2.25rem); border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); display: flex; flex-direction: column; background: var(--rg-white); } html[data-reglow-site] .rg-option-card > :last-child, html[data-reglow-site] .rg-expect-card > :last-child, html[data-reglow-site] .rg-related-card > :last-child { margin-top: auto; } html[data-reglow-site] :where( .rg-option-body, .rg-expect-card, .rg-contact-card, .rg-pricing-card-body, .rg-service-gallery-card ) { color: var(--rg-body); } html[data-reglow-site] :where( .rg-option-body, .rg-expect-card, .rg-contact-card, .rg-pricing-card-body, .rg-service-gallery-card ) :where(h2, h3, h4, strong, .rg-text-link) { color: var(--rg-ink); } html[data-reglow-site] .rg-option-card { min-height: 0; padding: 0; overflow: hidden; } html[data-reglow-site] .rg-option-media { aspect-ratio: 4 / 5; max-height: 58svh; overflow: hidden; border-bottom: 1px solid var(--rg-line-soft); background: var(--rg-paper-light); } html[data-reglow-site] .rg-option-media img { width: 100%; height: 100%; object-fit: contain; } html[data-reglow-site] .rg-option-body { min-height: 18rem; padding: clamp(1.35rem, 3vw, 2.25rem); display: flex; flex: 1; flex-direction: column; } html[data-reglow-site] .rg-option-body > :last-child { margin-top: auto; } html[data-reglow-site] .rg-related-card { min-height: clamp(24rem, 36vw, 32rem); padding: 0; overflow: hidden; border-color: rgba(46, 43, 43, 0.16); background: var(--rg-ink); } html[data-reglow-site] .rg-related-link { position: relative; min-height: inherit; overflow: hidden; display: flex; isolation: isolate; color: var(--rg-white); } html[data-reglow-site] .rg-related-media, html[data-reglow-site] .rg-related-shade { position: absolute; inset: 0; } html[data-reglow-site] .rg-related-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms var(--rg-ease); } html[data-reglow-site] .rg-related-shade { z-index: 1; background: linear-gradient(180deg, rgba(26, 24, 24, 0.02) 24%, rgba(26, 24, 24, 0.78) 100%); } html[data-reglow-site] .rg-related-copy { position: relative; z-index: 2; width: 100%; margin-top: auto; padding: clamp(1.35rem, 3vw, 2.25rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.65rem 1rem; color: var(--rg-white); } html[data-reglow-site] .rg-related-copy small { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.78); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } html[data-reglow-site] .rg-related-copy strong { max-width: 18ch; color: var(--rg-white); font-size: clamp(1rem, 1.55vw, 1.35rem); font-weight: 500; letter-spacing: 0.06em; line-height: 1.28; text-transform: uppercase; } html[data-reglow-site] .rg-related-copy svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; transition: transform 190ms var(--rg-ease); } html[data-reglow-site] .rg-related-link:hover .rg-related-media img { transform: scale(1.025); } html[data-reglow-site] .rg-related-link:hover .rg-related-copy svg { transform: translateX(3px); } html[data-reglow-site] .rg-related-link:focus-visible { outline: 2px solid var(--rg-white); outline-offset: -4px; } html[data-reglow-site] .rg-service-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } /* `:where()` contributes zero specificity, so these modifiers previously lost to the plain `.rg-service-gallery` rule above and never took effect — a --count-2 gallery still rendered three across. Written out so they win. */ html[data-reglow-site] .rg-option-grid, html[data-reglow-site] .rg-service-gallery--count-2, html[data-reglow-site] .rg-service-gallery--count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Dynamic vs static lines — two short definitions side by side, then a closing note. Uses the page's normal container width; an earlier version sat in the narrow reading measure and read as a different template. */ html[data-reglow-site] .rg-line-types-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); } html[data-reglow-site] .rg-line-types-grid h3 { margin-bottom: 0.6rem; color: var(--rg-ink); font-size: var(--rg-text-xl); font-weight: 500; } html[data-reglow-site] .rg-line-types-note { margin-top: clamp(1.5rem, 3vw, 2.4rem); padding-top: clamp(1.2rem, 2.5vw, 1.8rem); border-top: 1px solid var(--rg-line-soft); color: var(--rg-muted); } @media (max-width: 720px) { html[data-reglow-site] .rg-line-types-grid { grid-template-columns: 1fr; } } /* Heading above a step row, where one page carries two sets of steps because the treatments genuinely differ — InMode's Morpheus8 and MiniFX have different aftercare, and averaging them would be wrong. */ html[data-reglow-site] .rg-step-group-title { margin: clamp(2rem, 4vw, 3.2rem) 0 clamp(1rem, 2vw, 1.5rem); color: var(--rg-ink); font-size: var(--rg-text-2xl); font-weight: 500; } html[data-reglow-site] .rg-step-group-title:first-of-type { margin-top: 0; } /* The consultation galleries were ALREADY standardised to 4:5 further down this file, with --contain for diagrams (nothing cropped) and --cover for photographs. Nothing to add here; a duplicate rule was removed rather than left to fight it. An empty gallery grid must collapse rather than leave a gap — the Skin Lasers scaffold ships with no cards until images arrive. */ html[data-reglow-site] .rg-service-gallery:empty { display: none; } /* A bulleted list inside a step, for the few cases where the step is a set of instructions rather than a paragraph — aftercare, mainly. Sized to sit with .rg-step-copy rather than inheriting the page's default list spacing. */ html[data-reglow-site] .rg-step-list { margin: 0.55rem 0 0; padding-left: 1.1rem; color: var(--rg-muted); font-size: var(--rg-text-md); line-height: 1.55; } html[data-reglow-site] .rg-step-list li + li { margin-top: 0.35rem; } /* --------------------------------------------------------------------------- Gallery grid — before/after imagery, 15 Aug 2026 Square source images in a compact grid. A tile holding more than one image becomes a carousel: the extra images differ only by annotation arrows, so the viewer is stepping between annotated and clean versions of the same shot. Media carries the bronze tint via the component list above, so it clears on hover — which is also how you read the image properly. --------------------------------------------------------------------------- */ html[data-reglow-site] .rg-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.1rem); } html[data-reglow-site] .rg-gallery-item { margin: 0; } /* A caption under a square gallery tile. Slimming & Lifting has none — its subjects are unlabelled — but the consultation pages label their imagery, so the styling matches .rg-service-gallery-card figcaption rather than inventing a second caption treatment. */ html[data-reglow-site] .rg-gallery-item figcaption { padding: 0.85rem 0.1rem 0; display: flex; align-items: center; gap: 0.8rem; color: var(--rg-ink); font-size: var(--rg-text-sm); font-weight: 500; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; } html[data-reglow-site] .rg-gallery-item figcaption span { color: var(--rg-muted); } html[data-reglow-site] .rg-gallery-media { aspect-ratio: 1 / 1; border-radius: var(--rg-radius-sm); background: var(--rg-blush-wash); } html[data-reglow-site] .rg-gallery-slide { width: 100%; height: 100%; object-fit: cover; } /* Only one slide is in flow at a time, so the tile cannot change height as the viewer steps through. */ html[data-reglow-site] .rg-gallery-slide[hidden] { display: none; } html[data-reglow-site] .rg-gallery-media[data-rg-carousel] { cursor: pointer; } /* Above the tint overlay, which sits at z-index 1. */ html[data-reglow-site] .rg-gallery-dots { position: absolute; z-index: 2; inset: auto 0 0.7rem 0; display: flex; gap: 0.4rem; justify-content: center; } /* The button is a 1.5rem touch target; the visible dot is the small circle drawn inside it. An 8px button would be well under the 24px minimum and fiddly on a phone, even though tapping the tile also advances it. */ html[data-reglow-site] .rg-gallery-dot { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; display: grid; place-items: center; background: transparent; cursor: pointer; } html[data-reglow-site] .rg-gallery-dot::before { width: 0.5rem; height: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 50%; background: transparent; content: ""; transition: background 180ms ease; } html[data-reglow-site] .rg-gallery-dot[aria-current="true"]::before { background: var(--rg-white); } html[data-reglow-site] .rg-gallery-dot:focus-visible { outline: 2px solid var(--rg-white); outline-offset: -4px; border-radius: 50%; } @media (max-width: 820px) { html[data-reglow-site] .rg-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Subheading above a gallery grid, where imagery is split into named categories rather than one undifferentiated set. */ html[data-reglow-site] .rg-gallery-group-title { margin: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(0.8rem, 1.5vw, 1.1rem); color: var(--rg-ink); font-size: var(--rg-text-xl); font-weight: 500; } html[data-reglow-site] .rg-gallery-group-title:first-of-type { margin-top: 0; } html[data-reglow-site] :where(.rg-service-gallery--count-3, .rg-service-gallery--count-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-reglow-site] .rg-service-gallery-card { margin: 0; overflow: hidden; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); background: var(--rg-white); } html[data-reglow-site] .rg-service-gallery-media { aspect-ratio: 4 / 5; /* No max-height. With an aspect-ratio set, clamping the height also shrinks the width, so the image stopped filling its grid cell and left a band of dead space beside it. The ratio alone controls the box. */ overflow: hidden; border-bottom: 1px solid var(--rg-line-soft); background: var(--rg-paper-light); } html[data-reglow-site] .rg-service-gallery-media img { width: 100%; height: 100%; } /* Both variants now fill the tile. --contain used to letterbox, which also carried the tint exclusion with it; the two were never related. Left as a no-op so 14 elements of markup did not need rewriting. */ html[data-reglow-site] .rg-service-gallery-media--contain img, html[data-reglow-site] .rg-service-gallery-media--cover img { object-fit: cover; } html[data-reglow-site] .rg-service-gallery-card figcaption { min-height: 4.4rem; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.8rem; color: var(--rg-ink); font-size: var(--rg-text-sm); font-weight: 500; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; } html[data-reglow-site] .rg-service-gallery-card figcaption span { color: var(--rg-muted); font-size: var(--rg-text-2xs); } html[data-reglow-site] .rg-card-index { margin-bottom: 3.5rem; color: var(--rg-muted); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.12em; } html[data-reglow-site] .rg-aftercare-list { padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--rg-line); list-style: none; counter-reset: rg-aftercare; } @media (min-width: 1100px) { html[data-reglow-site] .rg-service-layout--aftercare .rg-aftercare-list { border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; } html[data-reglow-site] .rg-service-layout--aftercare .rg-aftercare-list li { border-top: 1px solid var(--rg-line-soft); } } html[data-reglow-site] .rg-aftercare-list li { position: relative; min-height: 4.3rem; padding: 1.2rem 1rem 1.2rem 4.25rem; border-bottom: 1px solid var(--rg-line-soft); color: var(--rg-ink); counter-increment: rg-aftercare; } html[data-reglow-site] .rg-aftercare-list li::before { position: absolute; top: 1.25rem; left: 0; color: var(--rg-muted); content: counter(rg-aftercare, decimal-leading-zero); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.12em; } html[data-reglow-site] .rg-disclosure { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(46, 43, 43, 0.18); border-radius: var(--rg-radius-sm); background: var(--rg-paper-light); color: var(--rg-body); font-size: var(--rg-text-lg); line-height: 1.7; } html[data-reglow-site] .rg-disclosure strong { display: block; margin-bottom: 0.45rem; } html[data-reglow-site] .rg-service-proof { border-top: 0; } html[data-reglow-site] .rg-expect-grid--count-1 { grid-template-columns: minmax(0, 56rem); } html[data-reglow-site] .rg-expect-grid--count-2, html[data-reglow-site] .rg-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } html[data-reglow-site] .rg-expect-grid--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-reglow-site] .rg-expect-card { min-height: 22rem; } html[data-reglow-site] .rg-expect-card > :where(p, ul):last-child { margin-bottom: 0; } html[data-reglow-site] .rg-expect-card > ul:not(.rg-aftercare-list) { padding-left: 1.1rem; color: var(--rg-body); } html[data-reglow-site] .rg-expect-card > ul:not(.rg-aftercare-list) li + li { margin-top: 0.65rem; } html[data-reglow-site] .rg-expect-card .rg-aftercare-list { margin-top: 1.5rem; } html[data-reglow-site] .rg-resource-card { position: relative; min-height: 18rem; padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); display: flex; flex-direction: column; background: var(--rg-white); color: var(--rg-body); transition: transform 260ms var(--rg-ease), border-color 180ms ease, box-shadow 260ms ease; } html[data-reglow-site] .rg-resource-card:hover { border-color: var(--rg-line); box-shadow: var(--rg-shadow-sm); transform: translateY(-3px); } html[data-reglow-site] .rg-resource-card > span { color: var(--rg-muted); font-size: var(--rg-text-2xs); font-weight: 500; letter-spacing: 0.12em; } html[data-reglow-site] .rg-resource-card strong { max-width: 21ch; margin: auto 0 0.8rem; color: var(--rg-ink); font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.14; } html[data-reglow-site] .rg-resource-card small { max-width: 48ch; font-size: var(--rg-text-md); line-height: 1.58; } html[data-reglow-site] .rg-resource-card svg { width: 1.3rem; height: 1.3rem; position: absolute; top: 1.5rem; right: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; } html[data-reglow-site] .rg-service-decision { border-block: 1px solid var(--rg-line-soft); } html[data-reglow-site] .rg-decision-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-md); overflow: hidden; } html[data-reglow-site] .rg-decision-grid article { min-height: 20rem; padding: clamp(1.35rem, 2.8vw, 2.35rem); border-right: 1px solid var(--rg-line-soft); display: flex; flex-direction: column; background: var(--rg-white); } html[data-reglow-site] .rg-decision-grid article:last-child { border-right: 0; } html[data-reglow-site] .rg-decision-grid article > span { margin-bottom: auto; color: var(--rg-muted); font-size: var(--rg-text-2xs); font-weight: 500; letter-spacing: 0.12em; } html[data-reglow-site] .rg-decision-grid h3 { max-width: 15ch; font-size: clamp(1.3rem, 2vw, 1.8rem); } html[data-reglow-site] .rg-decision-grid p { margin-bottom: 0; font-size: var(--rg-text-lg); } html[data-reglow-site] .rg-decision-action { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } html[data-reglow-site] .rg-decision-action p { margin: 0; color: var(--rg-muted); font-size: var(--rg-text-sm); } /* Consultation story */ html[data-reglow-site] .rg-story { display: grid; grid-template-columns: minmax(20rem, 0.75fr) minmax(0, 1fr); align-items: start; gap: clamp(3rem, 8vw, 8rem); } html[data-reglow-site] .rg-story-media { position: sticky; top: calc(var(--rg-header-clearance) + 1.5rem); aspect-ratio: 4 / 5; max-height: 67svh; overflow: hidden; border-radius: var(--rg-radius-md); background: var(--rg-blush-wash); } html[data-reglow-site] .rg-story-media :where(picture, img) { width: 100%; height: 100%; } html[data-reglow-site] .rg-story-media img { object-fit: cover; } html[data-reglow-site] .rg-consultation-steps { padding: 0; margin: 0; list-style: none; } html[data-reglow-site] .rg-consultation-card { min-height: 21rem; padding: clamp(2rem, 5vw, 4.5rem) 0; border-bottom: 1px solid var(--rg-line); display: flex; flex-direction: column; justify-content: center; } html[data-reglow-site] .rg-consultation-card:first-child { border-top: 1px solid var(--rg-line); } html[data-reglow-site] .rg-consultation-card .rg-card-index { margin-bottom: 2.4rem; } html[data-reglow-site] .rg-consultation-card p { max-width: 46ch; margin-bottom: 0; } /* Team */ html[data-reglow-site] .rg-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } html[data-reglow-site] .rg-team-card { min-width: 0; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); overflow: hidden; background: var(--rg-white); } html[data-reglow-site] .rg-team-photo { aspect-ratio: 4 / 5; max-height: 62svh; overflow: hidden; background: var(--rg-blush-wash); } html[data-reglow-site] .rg-team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 650ms var(--rg-ease); } html[data-reglow-site] .rg-team-card:hover .rg-team-photo img { transform: scale(1.018); } html[data-reglow-site] .rg-team-body { min-height: 11.5rem; padding: 1.35rem 1.45rem 1.55rem; } html[data-reglow-site] .rg-team-body h3 { max-width: 17ch; font-size: clamp(1.35rem, 2vw, 1.85rem); } html[data-reglow-site] .rg-team-role { margin-bottom: 0.75rem; font-size: var(--rg-text-lg); line-height: 1.5; } html[data-reglow-site] .rg-registration { color: var(--rg-muted); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* Clinics and contact */ html[data-reglow-site] .rg-clinic-switch { width: fit-content; max-width: 100%; padding: 0.4rem; border: 1px solid var(--rg-line); border-radius: var(--rg-radius-sm); display: grid; grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); background: rgba(255, 255, 255, 0.62); } html[data-reglow-site] .rg-clinic-switch button { min-height: 2.9rem; padding: 0.75rem 1rem; border: 1px solid transparent; border-radius: calc(var(--rg-radius-sm) - 3px); background: transparent; color: var(--rg-ink); font-size: var(--rg-text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } html[data-reglow-site] .rg-clinic-switch button.is-active, html[data-reglow-site] .rg-clinic-switch button[aria-selected="true"], html[data-reglow-site] .rg-clinic-switch button[aria-pressed="true"] { border-color: var(--rg-line); background: var(--rg-white); box-shadow: 0 5px 18px rgba(46, 43, 43, 0.08); } html[data-reglow-site] .rg-clinic-grid, html[data-reglow-site] .rg-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; } html[data-reglow-site] .rg-clinic-card { min-height: 40rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--rg-radius-md); display: flex; flex-direction: column; overflow: hidden; background: rgba(255, 255, 255, 0.04); transition: border-color 200ms ease, background-color 200ms ease, transform 260ms var(--rg-ease); } html[data-reglow-site] .rg-clinic-card:hover, html[data-reglow-site] .rg-clinic-card.is-active { border-color: rgba(228, 204, 184, 0.7); background: rgba(255, 255, 255, 0.07); transform: translateY(-3px); } html[data-reglow-site] .rg-clinic-card h3 { margin-top: 0; color: var(--rg-white); font-size: clamp(2.4rem, 4vw, 4.25rem); } html[data-reglow-site] .rg-clinic-media { position: relative; min-height: clamp(14rem, 23vw, 19rem); overflow: hidden; background: var(--rg-paper); } html[data-reglow-site] .rg-clinic-media::before { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 62%, rgba(46, 43, 43, 0.14)); content: ""; pointer-events: none; } html[data-reglow-site] .rg-clinic-media img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; transition: transform 750ms var(--rg-ease); } html[data-reglow-site] .rg-clinic-card-body { min-height: 21rem; padding: clamp(1.5rem, 3vw, 2.6rem); display: flex; flex: 1; flex-direction: column; } html[data-reglow-site] .rg-clinic-card-body > .rg-kicker { margin-bottom: 0.8rem; } html[data-reglow-site] .rg-clinic-card-body > .rg-cluster { margin-top: auto; } html[data-reglow-site] .rg-clinic-details { margin: 1.75rem 0 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } html[data-reglow-site] .rg-clinic-details dt { margin-bottom: 0.4rem; color: var(--rg-blush-soft); font-size: var(--rg-text-2xs); font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; } html[data-reglow-site] .rg-clinic-details dd { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: var(--rg-text-md); line-height: 1.55; } html[data-reglow-site] .rg-contact-card { min-height: 15rem; padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); display: flex; flex-direction: column; background: var(--rg-white); } html[data-reglow-site] .rg-contact-card .rg-button, html[data-reglow-site] .rg-contact-card .rg-text-link { margin-top: auto; align-self: flex-start; } html[data-reglow-site] .rg-map-frame { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-md); background: var(--rg-paper-light); } html[data-reglow-site] .rg-map-frame :where(iframe, img) { width: 100%; height: 100%; border: 0; object-fit: cover; } html[data-reglow-site] .rg-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } html[data-reglow-site] .rg-field { display: flex; flex-direction: column; gap: 0.45rem; } html[data-reglow-site] .rg-field--wide { grid-column: 1 / -1; } html[data-reglow-site] .rg-field label { color: var(--rg-ink); font-size: var(--rg-text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } html[data-reglow-site] .rg-field :where(input, textarea, select) { width: 100%; min-height: 3.35rem; padding: 0.85rem 1rem; border: 1px solid var(--rg-line); border-radius: var(--rg-radius-xs); background: var(--rg-white); color: var(--rg-ink); } html[data-reglow-site] .rg-field textarea { min-height: 9rem; resize: vertical; } html[data-reglow-site] .rg-field :where(input, textarea, select):focus { border-color: var(--rg-ink); outline: 0; box-shadow: 0 0 0 3px rgba(228, 204, 184, 0.28); } /* Rewards presentation support is optional. Render it only when current programme terms and the prominence of complimentary benefits are approved. */ html[data-reglow-site] .rg-tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } html[data-reglow-site] .rg-tier-card { position: relative; min-height: 29rem; padding: clamp(1.4rem, 3vw, 2.25rem); border: 1px solid var(--rg-line); border-radius: var(--rg-radius-md); display: flex; flex-direction: column; overflow: hidden; background: var(--rg-white); } html[data-reglow-site] .rg-tier-card--summary { min-height: 20rem; } html[data-reglow-site] .rg-tier-card::before { position: absolute; inset: 0 0 auto; height: 0.38rem; background: var(--rg-tier-color, var(--rg-blush)); content: ""; } html[data-reglow-site] .rg-tier-card--pearl { --rg-tier-color: var(--rg-tier-silver); } html[data-reglow-site] .rg-tier-card--silver { --rg-tier-color: var(--rg-tier-steel); } html[data-reglow-site] .rg-tier-card--gold { --rg-tier-color: var(--rg-tier-gold); } /* Diamond is distinguished by its bar alone. The card keeps the white background the other three use — an inverted card here was authored early on but never actually rendered, and reads as a different component rather than the top tier of one set. */ html[data-reglow-site] .rg-tier-card--diamond { --rg-tier-color: var(--rg-ink); } html[data-reglow-site] .rg-tier-spend { margin-bottom: 2rem; color: var(--rg-muted); font-size: var(--rg-text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } html[data-reglow-site] .rg-tier-benefits { padding: 0; margin: auto 0 0; list-style: none; } html[data-reglow-site] .rg-tier-benefits li { padding: 0.85rem 0; border-top: 1px solid var(--rg-line-soft); font-size: var(--rg-text-lg); line-height: 1.55; } html[data-reglow-site] .rg-tier-table { width: 100%; border-collapse: collapse; font-size: var(--rg-text-lg); } html[data-reglow-site] .rg-tier-table th, html[data-reglow-site] .rg-tier-table td { padding: 1rem; border-bottom: 1px solid var(--rg-line-soft); text-align: left; vertical-align: top; } html[data-reglow-site] .rg-tier-table th { color: var(--rg-ink); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; } /* Pricing presentation support is optional. Do not render prescription- injectable price sheets or unreviewed service prices merely because styles exist for a general pricing/media route. */ html[data-reglow-site] .rg-pricing-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem; } html[data-reglow-site] .rg-pricing-card { grid-column: span 4; min-height: 19rem; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-md); overflow: hidden; display: flex; flex-direction: column; background: var(--rg-white); } html[data-reglow-site] .rg-pricing-card--wide { grid-column: span 8; } html[data-reglow-site] .rg-pricing-card--media { position: relative; min-height: 31rem; color: var(--rg-white); } html[data-reglow-site] .rg-pricing-card--media::after { position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(46, 43, 43, 0.76)); content: ""; } html[data-reglow-site] .rg-pricing-card--media :where(picture, img) { position: absolute; inset: 0; width: 100%; height: 100%; } html[data-reglow-site] .rg-pricing-card--media img { object-fit: cover; } html[data-reglow-site] .rg-pricing-card-body { position: relative; z-index: 2; margin-top: auto; padding: clamp(1.4rem, 3vw, 2.25rem); } html[data-reglow-site] .rg-pricing-card--media :where(h3, strong) { color: var(--rg-white); } html[data-reglow-site] .rg-price-list { padding: 0; margin: 0; border-top: 1px solid var(--rg-line); list-style: none; } html[data-reglow-site] .rg-price-row { padding: 1rem 0; border-bottom: 1px solid var(--rg-line-soft); display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; } html[data-reglow-site] .rg-price-row span:last-child { color: var(--rg-ink); font-weight: 500; white-space: nowrap; } /* FAQ */ html[data-reglow-site] .rg-faq-layout { display: grid; grid-template-columns: minmax(16rem, 0.46fr) minmax(0, 1fr); align-items: start; gap: clamp(3rem, 9vw, 9rem); } html[data-reglow-site] .rg-faq-intro, html[data-reglow-site] .rg-faq-nav { position: sticky; top: calc(var(--rg-header-clearance) + 1rem); } html[data-reglow-site] .rg-faq-nav ul { padding: 0; margin: 1.8rem 0 0; border-top: 1px solid var(--rg-line); list-style: none; } html[data-reglow-site] .rg-faq-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--rg-line-soft); display: block; color: var(--rg-body); font-size: var(--rg-text-md); } html[data-reglow-site] .rg-faq-list { border-top: 1px solid var(--rg-line); } html[data-reglow-site] .rg-faq-list details { border-bottom: 1px solid var(--rg-line); } html[data-reglow-site] .rg-faq-list summary { position: relative; padding: 1.45rem 3.5rem 1.45rem 0; color: var(--rg-ink); font-size: clamp(1rem, 1.5vw, 1.22rem); font-weight: 500; line-height: 1.4; list-style: none; } html[data-reglow-site] .rg-faq-list summary::-webkit-details-marker { display: none; } html[data-reglow-site] .rg-faq-list summary::before, html[data-reglow-site] .rg-faq-list summary::after { position: absolute; top: 50%; right: 0.35rem; width: 1.1rem; height: 1px; background: var(--rg-ink); content: ""; transition: transform 220ms var(--rg-ease); } html[data-reglow-site] .rg-faq-list summary::after { transform: rotate(90deg); } html[data-reglow-site] .rg-faq-list details[open] summary::after { transform: rotate(0deg); } html[data-reglow-site] .rg-faq-answer { max-width: 68ch; padding: 0 3rem 1.6rem 0; color: var(--rg-body); font-size: var(--rg-text-xl); line-height: 1.78; } html[data-reglow-site] .rg-faq-answer :where(a) { color: var(--rg-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } /* Policy and long-form typography */ html[data-reglow-site] .rg-policy-shell { min-height: 100vh; padding: calc(var(--rg-header-clearance) + 3rem) 0 var(--rg-section-space); background: var(--rg-white); } html[data-reglow-site] .rg-policy-header { max-width: 58rem; margin-bottom: clamp(3.5rem, 7vw, 7rem); } html[data-reglow-site] .rg-policy-header h1 { font-size: clamp(3.4rem, 6vw, 6.2rem); } html[data-reglow-site] .rg-policy-updated { color: var(--rg-muted); font-size: var(--rg-text-base); letter-spacing: 0.08em; text-transform: uppercase; } html[data-reglow-site] .rg-policy-layout { display: grid; grid-template-columns: minmax(14rem, 0.36fr) minmax(0, 1fr); align-items: start; gap: clamp(3rem, 9vw, 9rem); } html[data-reglow-site] .rg-policy-toc { position: sticky; top: calc(var(--rg-header-clearance) + 1rem); } html[data-reglow-site] .rg-policy-toc ol { padding: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--rg-line); list-style: none; counter-reset: rg-policy; } html[data-reglow-site] .rg-policy-toc li { border-bottom: 1px solid var(--rg-line-soft); counter-increment: rg-policy; } html[data-reglow-site] .rg-policy-toc a { padding: 0.7rem 0; display: grid; grid-template-columns: 2rem 1fr; gap: 0.4rem; color: var(--rg-body); font-size: var(--rg-text-base); line-height: 1.45; } html[data-reglow-site] .rg-policy-toc a::before { color: var(--rg-muted); content: counter(rg-policy, decimal-leading-zero); font-size: var(--rg-text-2xs); letter-spacing: 0.08em; } html[data-reglow-site] .rg-policy-prose { max-width: 52rem; color: var(--rg-body); font-size: var(--rg-text-2xl); line-height: 1.82; } html[data-reglow-site] .rg-policy-prose :where(h2, h3) { scroll-margin-top: calc(var(--rg-header-clearance) + 2rem); } html[data-reglow-site] .rg-policy-prose h2 { padding-top: 3rem; margin: 0 0 1.25rem; border-top: 1px solid var(--rg-line); font-size: clamp(1.85rem, 3vw, 2.75rem); line-height: 1.1; } html[data-reglow-site] .rg-policy-prose h2:first-child { padding-top: 0; border-top: 0; } html[data-reglow-site] .rg-policy-prose h3 { margin: 2.2rem 0 0.8rem; font-size: var(--rg-text-4xl); line-height: 1.28; } html[data-reglow-site] .rg-policy-prose :where(ul, ol) { padding-left: 1.3rem; } html[data-reglow-site] .rg-policy-prose li + li { margin-top: 0.5rem; } html[data-reglow-site] .rg-policy-prose a { color: var(--rg-ink); text-decoration: underline; text-underline-offset: 0.18em; } html[data-reglow-site] .rg-policy-prose table { width: 100%; margin: 2rem 0; border-collapse: collapse; font-size: var(--rg-text-xl); } html[data-reglow-site] .rg-policy-prose th, html[data-reglow-site] .rg-policy-prose td { padding: 0.9rem; border: 1px solid var(--rg-line); text-align: left; vertical-align: top; } html[data-reglow-site] .rg-policy-prose th { background: var(--rg-paper-light); color: var(--rg-ink); font-weight: 500; } html[data-reglow-site] .rg-policy-prose blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 2px solid var(--rg-blush); background: var(--rg-paper-light); } /* Closing CTA and footer */ html[data-reglow-site] .rg-final-cta { position: relative; padding: clamp(6rem, 11vw, 11rem) 0; overflow: hidden; background: var(--rg-blush); text-align: center; } html[data-reglow-site] .rg-final-cta::before { position: absolute; top: 8%; left: 50%; width: min(60rem, 88vw); height: min(52rem, 90vw); border: 1px solid rgba(46, 43, 43, 0.17); border-radius: 50% 50% 0 0; content: ""; pointer-events: none; transform: translateX(-50%); } html[data-reglow-site] .rg-final-cta-inner { position: relative; z-index: 2; max-width: 50rem; margin-inline: auto; padding-inline: var(--rg-gutter); } html[data-reglow-site] .rg-final-cta h2 { max-width: 11ch; margin-inline: auto; } html[data-reglow-site] .rg-final-cta p { max-width: 54ch; margin: 0 auto 2rem; color: var(--rg-ink); } html[data-reglow-site] .rg-site-footer { border-top: 1px solid var(--rg-line-soft); background: var(--rg-paper-light); } /* Brand column + four link columns (Treatments column added 13 Aug 2026). The link columns are direct grid children because .rg-footer-links is display: contents, so the count here must match the number of
    s in the footer nav. */ /* Brand/contact column + three link columns. Policies was merged into Information on 13 Aug 2026, taking this back from four columns to three. */ html[data-reglow-site] .rg-footer-grid { width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); margin-inline: auto; padding-block: clamp(3.5rem, 7vw, 6.5rem); display: grid; grid-template-columns: minmax(18rem, 1.15fr) repeat(3, minmax(8.6rem, 0.32fr)); gap: clamp(1.75rem, 3.4vw, 3.5rem); } /* The logo and "Melbourne · Sydney" were removed from this column on 13 Aug 2026 so the clinic headings sit on the same baseline as the link columns. */ html[data-reglow-site] .rg-footer-contact { margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem 1.5rem; } html[data-reglow-site] .rg-footer-hours { grid-column: 1 / -1; } /* Clinic headings and link-column headings share one rule so every column in the footer starts on the same baseline. They were previously styled separately and drifted apart (0.4rem vs 0.45rem below the heading), which is why the Melbourne and Sydney columns sat out of step with Explore. */ html[data-reglow-site] .rg-footer-clinic h3, html[data-reglow-site] .rg-footer-clinic p { margin: 0 0 0.55rem; color: var(--rg-body); font-size: var(--rg-text-md); line-height: 1.7; } html[data-reglow-site] .rg-footer-clinic a { color: var(--rg-body); } html[data-reglow-site] .rg-footer-clinic a:hover { color: var(--rg-ink); text-decoration: underline; text-underline-offset: 0.25em; } /* Socials live in the bottom bar, centred between the copyright line and the locations line. The bar is a space-between flex row, so `order` is not enough — the list needs to grow into the middle and centre its own contents. */ html[data-reglow-site] .rg-footer-social { margin: 1.6rem 0 0; padding: 0; display: flex; gap: 0.6rem; list-style: none; } html[data-reglow-site] .rg-footer-social a { width: 2.35rem; height: 2.35rem; border: 1px solid var(--rg-line); border-radius: 999px; display: grid; place-items: center; color: var(--rg-body); transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease; } html[data-reglow-site] .rg-footer-social a:hover { border-color: var(--rg-bronze); background: var(--rg-white); color: var(--rg-bronze); } html[data-reglow-site] .rg-footer-social svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } html[data-reglow-site] .rg-footer-brand img { width: 8.5rem; height: auto; margin-bottom: 1.5rem; } html[data-reglow-site] .rg-footer-brand p { max-width: 43ch; font-size: var(--rg-text-md); line-height: 1.65; } html[data-reglow-site] .rg-footer-heading { margin-bottom: 1rem; color: var(--rg-ink); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } html[data-reglow-site] .rg-footer-links { display: contents; } html[data-reglow-site] .rg-footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; } html[data-reglow-site] .rg-footer-links > div > span { margin-bottom: 0.45rem; color: var(--rg-ink); font-size: var(--rg-text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } html[data-reglow-site] .rg-footer-links li + li { margin-top: 0.55rem; } html[data-reglow-site] .rg-footer-links a { color: var(--rg-body); font-size: var(--rg-text-md); line-height: 1.7; } html[data-reglow-site] .rg-footer-links a:hover { color: var(--rg-ink); text-decoration: underline; text-underline-offset: 0.25em; } html[data-reglow-site] .rg-footer-bottom { width: min(calc(100% - (var(--rg-gutter) * 2)), var(--rg-container)); min-height: 4rem; margin-inline: auto; padding-block: 1rem; border-top: 1px solid var(--rg-line-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; color: var(--rg-muted); font-size: var(--rg-text-xs); line-height: 1.5; } /* Persistent mobile booking rail */ html[data-reglow-site] .rg-booking-rail { position: fixed; right: 0; bottom: 0; left: 0; z-index: 250; display: none; align-items: center; gap: 0.8rem; padding: 0.65rem var(--rg-gutter) calc(0.65rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rg-line); background: rgba(255, 255, 255, 0.93); box-shadow: 0 -12px 32px rgba(46, 43, 43, 0.1); opacity: 0; pointer-events: none; transform: translateY(110%); visibility: hidden; transition: transform 320ms var(--rg-ease), opacity 220ms ease, visibility 320ms; } html[data-reglow-site] .rg-booking-rail.is-visible, html[data-reglow-site][data-booking-rail-visible="true"] .rg-booking-rail { opacity: 1; pointer-events: auto; transform: none; visibility: visible; } /* The menu-open case deliberately no longer hides the rail: the booking and enquiry buttons must stay reachable while the menu is open. The rail sits at z-index 250 and the menu panel at 190, so it already layers above it. */ html[data-reglow-site][data-rail-hidden="true"] .rg-booking-rail { opacity: 0; pointer-events: none; transform: translateY(110%); visibility: hidden; } /* While the menu is open the rail is pinned open regardless of scroll state, so the CTA never disappears behind the panel. */ html[data-reglow-site][data-menu-open="true"] .rg-booking-rail { opacity: 1; pointer-events: auto; transform: none; visibility: visible; } /* Two equal halves. flex-basis 0 makes them share the row regardless of label length, and min-width:0 lets them shrink below their text width instead of overflowing the bar — the default min-width:auto is what let "Book now" push past the right edge. white-space:nowrap keeps each label on one line. */ html[data-reglow-site] .rg-booking-rail .rg-popover-host, html[data-reglow-site] .rg-booking-rail > .rg-button { flex: 1 1 0; min-width: 0; } html[data-reglow-site] .rg-booking-rail .rg-button { white-space: nowrap; } html[data-reglow-site] .rg-booking-rail .rg-popover-trigger { width: 100%; } html[data-reglow-site] .rg-booking-rail-meta { min-width: 0; flex: 1; color: var(--rg-muted); font-size: var(--rg-text-xs); line-height: 1.35; } html[data-reglow-site] .rg-booking-rail-meta strong { display: block; color: var(--rg-ink); font-size: var(--rg-text-md); } /* Reveal and progressive motion */ html[data-reglow-site].js .rg-reveal { opacity: 0.001; transform: translateY(1.25rem); transition: opacity 480ms ease, transform 620ms var(--rg-ease); } html[data-reglow-site].js .rg-reveal.is-visible, html[data-reglow-site].js .rg-reveal[data-visible="true"] { opacity: 1; transform: none; } html[data-reglow-site].js [data-motion-item] { opacity: 0.001; translate: 0 0.7rem; } html[data-reglow-site].js [data-motion-item].is-motion-visible { opacity: 1; translate: 0 0; animation: rg-motion-item-in 620ms var(--rg-ease) both; animation-delay: calc(var(--rg-motion-order, 0) * 55ms); } @keyframes rg-motion-item-in { from { opacity: 0.001; translate: 0 0.7rem; } to { opacity: 1; translate: 0 0; } } html[data-reglow-site] .rg-parallax-media { transform: translate3d(0, var(--rg-parallax-y, 0), 0) scale(var(--rg-parallax-scale, 1)) scale(var(--rg-parallax-hover-scale, 1)); transform-origin: center; transition: transform 140ms linear; } html[data-reglow-site] .rg-parallax-media.is-motion-active { will-change: transform; } /* Tablet */ @media (max-width: 1120px) { html[data-reglow-site] { --rg-gutter: clamp(1.35rem, 3vw, 2rem); } html[data-reglow-site] .rg-nav { gap: 1rem; } html[data-reglow-site] .rg-nav-link { font-size: var(--rg-text-md); } html[data-reglow-site] .rg-hero-grid, html[data-reglow-site] .rg-service-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.68fr); gap: 3rem; } html[data-reglow-site] .rg-hero--bloom .rg-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(15rem, 0.5fr); } html[data-reglow-site] .rg-treatment-grid, html[data-reglow-site] .rg-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-reglow-site] .rg-treatment-card--featured { grid-column: span 1; } html[data-reglow-site] .rg-treatment-card--featured .rg-card-media { aspect-ratio: 3 / 4; } html[data-reglow-site] .rg-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; } html[data-reglow-site] .rg-intent-card { grid-column: span 6; } html[data-reglow-site] .rg-intent-card--decision { grid-column: 1 / -1; } html[data-reglow-site] .rg-clinic-details { grid-template-columns: 1fr 1fr; } html[data-reglow-site] .rg-clinic-details > div:last-child { grid-column: 1 / -1; } html[data-reglow-site] .rg-footer-grid { grid-template-columns: minmax(15rem, 1fr) repeat(2, minmax(8rem, 0.36fr)); } } @media (max-width: 920px) { html[data-reglow-site] { --rg-header-height: 64px; } html[data-reglow-site] .rg-nav-shell { grid-template-columns: auto 1fr auto; } html[data-reglow-site] .rg-nav { display: none; } html[data-reglow-site] .rg-menu-toggle, html[data-reglow-site] .rg-nav-instagram { display: grid; } html[data-reglow-site] .rg-nav-actions { justify-self: end; } html[data-reglow-site] .rg-menu-panel { display: block; } html[data-reglow-site] .rg-section-head { grid-template-columns: 1fr; gap: 1.5rem; } html[data-reglow-site] .rg-section-head > :last-child { max-width: 56ch; justify-self: start; } html[data-reglow-site] .rg-hero { min-height: auto; } html[data-reglow-site] .rg-hero-grid, html[data-reglow-site] .rg-hero--portrait .rg-hero-grid, html[data-reglow-site] .rg-hero--compact .rg-hero-grid, html[data-reglow-site] .rg-service-hero-grid { grid-template-columns: 1fr 0.72fr; gap: 2rem; } html[data-reglow-site] .rg-hero-art, html[data-reglow-site] .rg-glass-study, html[data-reglow-site] .rg-service-media { min-height: 32rem; } html[data-reglow-site] .rg-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-reglow-site] .rg-proof-item { border-bottom: 0; } html[data-reglow-site] .rg-proof-item:nth-child(2) { border-right: 1px solid var(--rg-line-soft); } html[data-reglow-site] .rg-service-layout, html[data-reglow-site] .rg-story, html[data-reglow-site] .rg-faq-layout, html[data-reglow-site] .rg-policy-layout { grid-template-columns: 1fr; gap: 3rem; } html[data-reglow-site] .rg-editorial-grid { grid-template-columns: 1fr; gap: 3.5rem; } html[data-reglow-site] .rg-editorial-copy { max-width: 47rem; } html[data-reglow-site] .rg-editorial-media { width: 100%; } html[data-reglow-site] .rg-editorial-media { min-height: 40rem; } html[data-reglow-site] .rg-decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-reglow-site] .rg-decision-grid article:nth-child(2) { border-right: 0; } html[data-reglow-site] .rg-decision-grid article:nth-child(-n + 2) { border-bottom: 1px solid var(--rg-line-soft); } html[data-reglow-site] .rg-service-aside, html[data-reglow-site] .rg-story-media, html[data-reglow-site] .rg-faq-intro, html[data-reglow-site] .rg-faq-nav, html[data-reglow-site] .rg-policy-toc { position: static; } html[data-reglow-site] .rg-story-media { aspect-ratio: 16 / 10; max-height: none; } html[data-reglow-site] .rg-option-grid, html[data-reglow-site] .rg-expect-grid, html[data-reglow-site] .rg-related-grid, html[data-reglow-site] .rg-service-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-reglow-site] .rg-clinic-grid, html[data-reglow-site] .rg-contact-grid { grid-template-columns: 1fr; } html[data-reglow-site] .rg-clinic-card { min-height: 36rem; } html[data-reglow-site] .rg-pricing-card, html[data-reglow-site] .rg-pricing-card--wide { grid-column: span 6; } html[data-reglow-site] .rg-footer-grid { grid-template-columns: 1fr 1fr; } html[data-reglow-site] .rg-footer-brand { grid-column: 1 / -1; } } /* Mobile */ @media (max-width: 720px) { html[data-reglow-site] { --rg-header-height: 58px; --rg-header-top: 0px; /* flat bar is flush at every breakpoint */ --rg-gutter: 1rem; --rg-section-space: clamp(4.6rem, 18vw, 6.25rem); scroll-padding-top: calc(var(--rg-header-height) + 28px); } html[data-reglow-site][data-booking-rail="true"] body { padding-bottom: calc(4.65rem + env(safe-area-inset-bottom)); } html[data-reglow-site] h1 { font-size: clamp(3rem, 14vw, 4.65rem); line-height: 0.96; } html[data-reglow-site] h2 { font-size: clamp(2.55rem, 12vw, 4rem); line-height: 0.99; } html[data-reglow-site] .rg-lead { font-size: var(--rg-text-3xl); line-height: 1.65; } html[data-reglow-site] .rg-nav-shell, html[data-reglow-site] .rg-site-header.is-condensed .rg-nav-shell, html[data-reglow-site][data-nav-condensed="true"] .rg-nav-shell { width: calc(100% - 1.6rem); min-height: var(--rg-header-height); padding: 0; gap: 0.5rem; } html[data-reglow-site] .rg-logo img { width: 6.55rem; } html[data-reglow-site] .rg-nav-actions .rg-button { min-height: 2.75rem; padding: 0.7rem 0.85rem; font-size: var(--rg-text-2xs); } html[data-reglow-site] .rg-menu-toggle, html[data-reglow-site] .rg-nav-instagram { width: 2.75rem; height: 2.75rem; } html[data-reglow-site] .rg-nav-shell { gap: 0.4rem; } html[data-reglow-site] .rg-menu-panel { top: calc(var(--rg-header-top) + var(--rg-header-height) + 8px); right: 0.5rem; left: 0.5rem; max-height: calc(100svh - 5.25rem); padding: 1.25rem; border-radius: 17px; } html[data-reglow-site] .rg-menu-grid { grid-template-columns: 1fr; gap: 2rem; } html[data-reglow-site] .rg-menu-list a { font-size: var(--rg-text-5xl); } html[data-reglow-site] .rg-hero, html[data-reglow-site] .rg-service-hero { padding: calc(var(--rg-header-clearance) + 0.75rem) 0 4.5rem; } html[data-reglow-site] .rg-hero-grid, html[data-reglow-site] .rg-hero--portrait .rg-hero-grid, html[data-reglow-site] .rg-hero--compact .rg-hero-grid, html[data-reglow-site] .rg-service-hero-grid { grid-template-columns: 1fr; gap: 2rem; } html[data-reglow-site] .rg-service-hero--neutral .rg-service-hero-grid { grid-template-columns: 1fr; } html[data-reglow-site] .rg-hero-copy { max-width: none; } html[data-reglow-site] .rg-hero-actions { align-items: stretch; flex-direction: column; } html[data-reglow-site] .rg-hero-actions .rg-button { width: 100%; } html[data-reglow-site] .rg-hero-art, html[data-reglow-site] .rg-glass-study, html[data-reglow-site] .rg-service-media { min-height: 0; max-height: none; aspect-ratio: 4 / 5; border-radius: 44% 44% var(--rg-radius-sm) var(--rg-radius-sm) / 18% 18% var(--rg-radius-sm) var(--rg-radius-sm); } html[data-reglow-site] .rg-hero--bloom { min-height: 52rem; padding-top: calc(var(--rg-header-clearance) + 15rem); } html[data-reglow-site] .rg-hero--bloom .rg-hero-grid { display: block; } html[data-reglow-site] .rg-hero--bloom .rg-hero-backdrop { inset: 0 0 auto; height: 22rem; } html[data-reglow-site] .rg-hero--bloom .rg-hero-backdrop-media { background-position: 68% center; background-size: cover; } html[data-reglow-site] .rg-hero--bloom .rg-hero-backdrop::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.94) 92%, var(--rg-white)); } html[data-reglow-site] .rg-hero--bloom .rg-hero-copy { padding: 1.35rem; border-radius: var(--rg-radius-sm); background: rgba(255, 255, 255, 0.84); } html[data-reglow-site] .rg-hero--bloom .rg-hero-art { display: none; } html[data-reglow-site] .rg-glass-study { background-position: center 48%; } html[data-reglow-site] .rg-hero--compact h1, html[data-reglow-site] .rg-service-hero h1, html[data-reglow-site] .rg-policy-header h1 { font-size: clamp(3rem, 13vw, 4.45rem); } html[data-reglow-site] .rg-proof-grid { grid-template-columns: 1fr; } html[data-reglow-site] .rg-proof-item { min-height: 6.6rem; padding: 1.1rem 1rem; border-right: 0; border-bottom: 1px solid var(--rg-line-soft); gap: 0.65rem 0.9rem; font-size: var(--rg-text-sm); } html[data-reglow-site] .rg-proof-item:nth-child(2) { border-right: 0; } html[data-reglow-site] .rg-proof-item:last-child { border-bottom: 0; } html[data-reglow-site] .rg-stat { font-size: var(--rg-text-5xl); } html[data-reglow-site] .rg-editorial-media { min-height: 31rem; } html[data-reglow-site] .rg-intent-grid { grid-template-columns: 1fr; } html[data-reglow-site] .rg-intent-card, html[data-reglow-site] .rg-intent-card--decision { min-height: 13rem; grid-column: 1; } html[data-reglow-site] .rg-intent-card--decision { display: flex; align-items: stretch; } html[data-reglow-site] .rg-intent-card--decision > span { margin-bottom: auto; } html[data-reglow-site] .rg-intent-card--decision strong { margin: 2.5rem 0 0.8rem; } html[data-reglow-site] .rg-intent-card--decision svg { position: absolute; } html[data-reglow-site] .rg-section-head--controls { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } html[data-reglow-site] .rg-treatment-rail { margin-right: calc(var(--rg-gutter) * -1); padding-right: var(--rg-gutter); } html[data-reglow-site] .rg-treatment-rail-card { min-height: 31rem; flex-basis: min(82vw, 20rem); } html[data-reglow-site] .rg-rail-foot > span { display: none; } html[data-reglow-site] .rg-journey-actions, html[data-reglow-site] .rg-final-cta-actions { align-items: stretch; flex-direction: column; } html[data-reglow-site] .rg-journey-actions .rg-button, html[data-reglow-site] .rg-final-cta-actions .rg-button { width: 100%; } html[data-reglow-site] .rg-filter-bar { margin-right: calc(var(--rg-gutter) * -1); padding-right: var(--rg-gutter); border-right: 0; border-radius: var(--rg-radius-sm) 0 0 var(--rg-radius-sm); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } html[data-reglow-site] .rg-filter-bar::-webkit-scrollbar { display: none; } html[data-reglow-site] .rg-filter-button { flex: none; } html[data-reglow-site] .rg-treatment-grid, html[data-reglow-site] .rg-tier-grid, html[data-reglow-site] .rg-option-grid, html[data-reglow-site] .rg-expect-grid, html[data-reglow-site] .rg-resource-grid, html[data-reglow-site] .rg-related-grid, html[data-reglow-site] .rg-service-gallery, html[data-reglow-site] .rg-form-grid { grid-template-columns: 1fr; } html[data-reglow-site] .rg-decision-grid { grid-template-columns: 1fr; } html[data-reglow-site] .rg-decision-grid article, html[data-reglow-site] .rg-decision-grid article:nth-child(2) { min-height: 15rem; border-right: 0; border-bottom: 1px solid var(--rg-line-soft); } html[data-reglow-site] .rg-decision-grid article:last-child { border-bottom: 0; } html[data-reglow-site] .rg-treatment-card .rg-card-media, html[data-reglow-site] .rg-treatment-card--featured .rg-card-media { aspect-ratio: 4 / 5; max-height: 62svh; } html[data-reglow-site] .rg-treatment-card .rg-card-body, html[data-reglow-site] .rg-treatment-card--featured .rg-card-body { min-height: 13.5rem; } html[data-reglow-site] .rg-treatment-directory-section .rg-treatment-card { min-height: 13.5rem; display: grid; grid-template-columns: minmax(7.5rem, 36%) minmax(0, 1fr); } html[data-reglow-site] .rg-treatment-directory-section .rg-treatment-card .rg-card-media { min-height: 13.5rem; aspect-ratio: auto; max-height: none; } html[data-reglow-site] .rg-treatment-directory-section .rg-treatment-card .rg-card-media img { position: absolute; inset: 0; } html[data-reglow-site] .rg-treatment-directory-section .rg-treatment-card .rg-card-body { min-height: 13.5rem; padding: 1.1rem; } html[data-reglow-site] .rg-treatment-directory-section .rg-treatment-card h3 { margin-bottom: 0.65rem; font-size: clamp(1.15rem, 5vw, 1.4rem); } html[data-reglow-site] .rg-treatment-directory-section .rg-treatment-card .rg-card-meta { margin-bottom: 0.7rem; font-size: var(--rg-text-3xs); } html[data-reglow-site] .rg-treatment-directory-section .rg-treatment-card .rg-card-body > p:not(.rg-card-meta) { margin-bottom: 0.9rem; font-size: var(--rg-text-base); line-height: 1.5; } html[data-reglow-site] .rg-treatment-directory-section .rg-treatment-card .rg-text-link { font-size: var(--rg-text-3xs); } html[data-reglow-site] .rg-service-anchor-nav { top: calc(var(--rg-header-top) + var(--rg-header-height) + 0.4rem); } html[data-reglow-site] .rg-service-anchor-inner { width: 100%; padding-left: var(--rg-gutter); } html[data-reglow-site] .rg-service-anchor-list { width: 100%; padding-inline: 0 var(--rg-gutter); } html[data-reglow-site] .rg-service-anchor-cta { display: none; } html[data-reglow-site] .rg-fact-list > div { grid-template-columns: 1fr; gap: 0.35rem; } html[data-reglow-site] .rg-option-card, html[data-reglow-site] .rg-expect-card, html[data-reglow-site] .rg-related-card { min-height: 15rem; } html[data-reglow-site] .rg-option-card { min-height: 0; } html[data-reglow-site] .rg-related-card { min-height: 22rem; } html[data-reglow-site] .rg-story-media { aspect-ratio: 16 / 10; border-radius: var(--rg-radius-sm); } html[data-reglow-site] .rg-consultation-card { min-height: 18rem; } html[data-reglow-site] .rg-team-grid { margin-right: calc(var(--rg-gutter) * -1); margin-left: calc(var(--rg-gutter) * -1); padding: 0 var(--rg-gutter) 1rem; display: flex; gap: 0.8rem; overflow-x: auto; scroll-padding-inline: var(--rg-gutter); scroll-snap-type: x mandatory; scrollbar-width: none; } html[data-reglow-site] .rg-team-grid::-webkit-scrollbar { display: none; } /* Same width expression the home page marquee uses for its team cards, so the photos come out the same size. At 82vw a single card filled the screen and nothing hinted the row scrolled; at ~13rem the next card peeks in. */ html[data-reglow-site] .rg-team-card { flex: 0 0 clamp(13rem, 20vw, 17rem); scroll-snap-align: start; } html[data-reglow-site] .rg-team-photo { max-height: none; } html[data-reglow-site] .rg-clinic-switch { width: 100%; } html[data-reglow-site] .rg-clinic-switch button { min-width: 0; } html[data-reglow-site] .rg-clinic-card { min-height: 34rem; } html[data-reglow-site] .rg-clinic-card-body { min-height: 22rem; padding: 1.35rem; } html[data-reglow-site] .rg-clinic-details { grid-template-columns: 1fr; } html[data-reglow-site] .rg-clinic-details > div:last-child { grid-column: auto; } html[data-reglow-site] .rg-map-frame { aspect-ratio: 4 / 3; } html[data-reglow-site] .rg-tier-card { min-height: 24rem; } html[data-reglow-site] .rg-tier-table-wrap, html[data-reglow-site] .rg-policy-table-wrap { margin-right: calc(var(--rg-gutter) * -1); overflow-x: auto; } html[data-reglow-site] .rg-tier-table, html[data-reglow-site] .rg-policy-prose table { min-width: 42rem; } html[data-reglow-site] .rg-pricing-grid { grid-template-columns: 1fr; } html[data-reglow-site] .rg-pricing-card, html[data-reglow-site] .rg-pricing-card--wide { grid-column: auto; min-height: 16rem; } html[data-reglow-site] .rg-pricing-card--media { min-height: 29rem; } html[data-reglow-site] .rg-faq-answer { padding-right: 1rem; } html[data-reglow-site] .rg-policy-shell { padding-top: calc(var(--rg-header-clearance) + 1.5rem); } html[data-reglow-site] .rg-policy-prose { font-size: var(--rg-text-2xl); } html[data-reglow-site] .rg-policy-prose h2 { padding-top: 2.2rem; } html[data-reglow-site] .rg-footer-grid { grid-template-columns: 1fr; } html[data-reglow-site] .rg-footer-brand { grid-column: auto; } /* Steps go two-up rather than four across. */ html[data-reglow-site] .rg-step-row { /* grid-auto-flow above would keep everything on one row here, so switch back to explicit columns that wrap. */ grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-reglow-site] .rg-footer-contact { grid-template-columns: 1fr; } /* Dock stays centred but tightens up; the label is dropped so the two buttons and the dismiss control still fit a 375px row. */ html[data-reglow-site] .rg-contact-dock { width: calc(100% - 1rem); padding: 0.4rem; gap: 0.35rem; } html[data-reglow-site] .rg-contact-dock-label { display: none; } html[data-reglow-site] .rg-contact-dock .rg-button { min-height: 2.5rem; padding: 0.55rem 0.7rem; font-size: var(--rg-text-2xs); } /* Tiles stack, so they no longer straddle the hero edge — drop the overlap. */ html[data-reglow-site] .rg-hero-stats-wrap { --rg-tile-overlap: 0rem; margin-top: clamp(1.5rem, 5vw, 2.25rem); } html[data-reglow-site] .rg-hero-stats { grid-template-columns: 1fr; } html[data-reglow-site] .rg-hero-stat { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; } html[data-reglow-site] .rg-hero-stat-label { text-align: right; } /* Bottom sheet: the hero actions stack here, so an anchored dropdown has nowhere to go. Driven by the same markup — only the presentation changes. */ html[data-reglow-site] .rg-popover-host { display: flex; } /* !important overrides the inline top/left script.js sets for the desktop dropdown, so the same node becomes a full-width sheet without extra state. */ html[data-reglow-site] .rg-popover { position: fixed; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; min-width: 0; padding: 0.75rem; /* Opacity only, deliberately. A transform-based slide leaves a residual translate under prefers-reduced-motion (which clamps animation-duration but does not fill), which pushed the sheet off the bottom of the screen. Layout position must not depend on animation state. Fades also match the design system's motion guidance. */ animation: rg-popover-fade 200ms ease; } html[data-reglow-site] .rg-popover-panel { padding: 1rem 0.85rem calc(1rem + env(safe-area-inset-bottom)); border-radius: var(--rg-radius-lg); box-shadow: var(--rg-shadow-lg); } html[data-reglow-site] .rg-popover-list a { padding: 0.85rem 0.7rem; font-size: var(--rg-text-2xl); } /* Grid rather than flex: two 1fr columns split the row exactly, whatever the label lengths. Equal flex items still came out uneven here because each button's own padding and border feed back into its base size. */ html[data-reglow-site] .rg-booking-rail { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } /* Header CTAs are dropped on phones — the sticky rail below carries both actions, so repeating them in a 375px header row only crowds it. */ html[data-reglow-site] .rg-nav-actions .nav-book, html[data-reglow-site] .rg-nav-enquire { display: none; } html[data-reglow-site] .rg-booking-rail .rg-button { min-height: 2.9rem; padding: 0.75rem 0.9rem; font-size: var(--rg-text-2xs); } html[data-reglow-site] .rg-bloom-fragment { width: 17rem; opacity: 0.3; } } @media (max-width: 420px) { html[data-reglow-site] h1 { font-size: var(--rg-text-6xl); } html[data-reglow-site] .rg-nav-actions .rg-button span[data-long-label] { display: none; } html[data-reglow-site] .rg-proof-item { font-size: var(--rg-text-2xs); } html[data-reglow-site] .rg-booking-rail-meta { display: none; } /* The rail carries two buttons now, so a 100% width here pushed the second one past the right edge. They share the row instead — see the flex basis rule above. */ html[data-reglow-site] .rg-booking-rail .rg-button { padding-inline: 0.6rem; } } @media (hover: hover) and (pointer: fine) { html[data-reglow-site] .rg-treatment-card:hover .rg-card-media img, html[data-reglow-site] .rg-team-card:hover .rg-team-photo img, html[data-reglow-site] .rg-clinic-card:hover .rg-clinic-media img, html[data-reglow-site] .rg-clinic-card:focus-within .rg-clinic-media img { transform: scale(1.018); } } @media (prefers-reduced-motion: reduce) { html[data-reglow-site] { scroll-behavior: auto; } html[data-reglow-site] *, html[data-reglow-site] *::before, html[data-reglow-site] *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html[data-reglow-site].js .rg-reveal { opacity: 1; transform: none; } html[data-reglow-site].js [data-hero-sequence] > *, html[data-reglow-site].js [data-motion-item] { opacity: 1; translate: none; transform: none; } html[data-reglow-site] .rg-parallax-media { transform: none !important; will-change: auto; } } @media print { html[data-reglow-site] .rg-site-header, html[data-reglow-site] .rg-menu-panel, html[data-reglow-site] .rg-booking-rail, html[data-reglow-site] .rg-final-cta, html[data-reglow-site] .rg-site-footer { display: none !important; } html[data-reglow-site] body { background: #fff; color: #000; font-size: 11pt; } html[data-reglow-site] .rg-policy-shell { padding: 0; } html[data-reglow-site] .rg-policy-layout { display: block; } html[data-reglow-site] .rg-policy-toc { display: none; } html[data-reglow-site] .rg-policy-prose { max-width: none; color: #000; } html[data-reglow-site] a[href^="http"]::after { color: #444; content: " (" attr(href) ")"; font-size: 0.8em; overflow-wrap: anywhere; } } /* Only the narrowest phones need the short header CTA label. Above this the full "Book a consultation" fits on one line. */ @media (max-width: 430px) { html[data-reglow-site] .nav-book .rg-book-label--full { display: none; } html[data-reglow-site] .nav-book .rg-book-label--short { display: inline; } html[data-reglow-site] .rg-nav-enquire .rg-enquire-label--full { display: none; } html[data-reglow-site] .rg-nav-enquire .rg-enquire-label--short { display: inline; } html[data-reglow-site] .nav-book svg { width: 0.85rem; height: 0.85rem; } html[data-reglow-site] .rg-nav-actions { gap: 0.6rem; } } /* --------------------------------------------------------------------------- Additions, 14 Aug 2026 --------------------------------------------------------------------------- */ /* Consultations dropdown: names set in caps, per owner request. */ html[data-reglow-site] .rg-submenu a { font-size: var(--rg-text-sm); letter-spacing: 0.08em; text-transform: uppercase; } /* Google map inside a clinic card. The iframe carries Google's own 600x450 attributes; these override them so the map fills the card responsively. */ html[data-reglow-site] .rg-clinic-map { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rg-radius-sm); background: var(--rg-paper-light); } html[data-reglow-site] .rg-clinic-map iframe { width: 100%; height: 100%; border: 0; display: block; } /* Per-clinic Google rating. Hidden until the API returns a real number, so a placeholder can never be shown as if it were a score. */ html[data-reglow-site] .rg-clinic-rating { margin: 0.35rem 0 0.9rem; display: flex; align-items: baseline; gap: 0.45rem; } html[data-reglow-site] .rg-clinic-rating[hidden] { display: none; } html[data-reglow-site] .rg-clinic-rating-score { color: var(--rg-star); font-size: var(--rg-text-2xl); font-weight: 700; } html[data-reglow-site] .rg-clinic-rating-label { color: inherit; font-size: var(--rg-text-2xs); letter-spacing: 0.1em; opacity: 0.7; text-transform: uppercase; } /* Contact page social band */ html[data-reglow-site] .rg-social-list { margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; list-style: none; } html[data-reglow-site] .rg-social-list a { padding: 0.9rem 1rem; border: 1px solid var(--rg-line-soft); border-radius: var(--rg-radius-sm); display: flex; align-items: center; gap: 0.7rem; background: var(--rg-white); color: var(--rg-ink); transition: border-color 160ms ease, background-color 160ms ease; } html[data-reglow-site] .rg-social-list a:hover { border-color: var(--rg-bronze); background: var(--rg-blush-wash); } html[data-reglow-site] .rg-social-name { flex: 1 1 auto; font-size: var(--rg-text-md); } html[data-reglow-site] .rg-social-handle { color: var(--rg-muted); font-size: var(--rg-text-xs); } /* Rewards tiers */ html[data-reglow-site] .rg-tier-spend { margin: 0 0 0.75rem; color: var(--rg-bronze); font-size: var(--rg-text-lg); font-weight: 500; } html[data-reglow-site] .rg-tier-benefits { margin: 0; padding-left: 1.05rem; color: var(--rg-body); font-size: var(--rg-text-md); line-height: 1.6; } html[data-reglow-site] .rg-tier-benefits li + li { margin-top: 0.35rem; } /* Legal pages: long transcribed documents need clear heading separation. */ html[data-reglow-site] .rg-legal h2 { margin-top: 2.4rem; font-size: var(--rg-text-4xl); } html[data-reglow-site] .rg-legal h3 { margin-top: 1.6rem; font-size: var(--rg-text-2xl); } html[data-reglow-site] .rg-legal p:empty { min-height: 1.2rem; } /* Legal pages: clause lists need room to breathe and clear nesting. */ html[data-reglow-site] .rg-legal ul { margin: 0.6rem 0 1.1rem; padding-left: 1.15rem; color: var(--rg-body); font-size: var(--rg-text-md); line-height: 1.7; } html[data-reglow-site] .rg-legal li + li { margin-top: 0.45rem; } html[data-reglow-site] .rg-legal li ul { margin: 0.45rem 0 0; } html[data-reglow-site] .rg-legal strong { color: var(--rg-ink); } /* FAQ answers can now contain lists (the cancellation policy). */ html[data-reglow-site] .rg-faq-answer ul { margin: 0.65rem 0 0.9rem; padding-left: 1.15rem; } html[data-reglow-site] .rg-faq-answer li + li { margin-top: 0.35rem; } html[data-reglow-site] .rg-faq-answer p + p { margin-top: 0.7rem; } /* --------------------------------------------------------------------------- Price list tiles and viewer (15 Aug 2026) Tiles are