/*
Theme Name: Gradespace Clinic
Theme URI: https://thegradespace.com
Description: A block theme for eye clinics and optical shops: clean, clinical but warm, with circular “lens” pictures, a blur-to-sharp focus reveal and eye-chart headings. Four designs (Clarity, Atelier, Hometown and the original Default) with their colour palettes, chosen under Site Settings → Design & colours. Design only: bookings, patient records and the shop live in the Gradespace Clinic plugin.
Author: Gradespace
Author URI: https://thegradespace.com
Version: 0.2.2
Update URI: https://thegradespace.com/updates/gradespace-clinic-theme
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: gradespace-clinic-theme
License: GPL-2.0-or-later
*/

/* Bump Version above on every deploy: it busts browser caches (?ver=).

   Colour rules (so every design and palette works):
   - surfaces use the "white" slug, text the "navy" slug, muted text "slate";
   - "sky-deep" is the brand (carries white text), "sky" the bright accent
     (carries dark text), "sky-tint" the pale brand background;
   - dark panels use the band variables; only text on photos stays literal. */

:root {
	/* Gradespace Core's dialogs and contact sheet use these. */
	--gsc-brand: var(--wp--preset--color--sky-deep);
	--gsc-ink: var(--wp--preset--color--navy);
	--gsc-muted: var(--wp--preset--color--slate);
	--gsc-line: var(--wp--preset--color--line, #dce5f0);
	--gsc-surface: var(--wp--preset--color--white); /* card background: the dark design turns it dark, so text stays readable */
	--gsc-band-bg: var(--wp--preset--color--sky-deep); /* main buttons in Core's cookie banner and contact sheet */
	--gsc-band-text: var(--gscl-on-deep);
	--gsc-tint: var(--wp--preset--color--sky-tint);
	--gsc-danger: var(--wp--preset--color--red, #c4283f);
	--gscl-band-bg: var(--wp--preset--color--navy);
	--gscl-band-text: #fff;
	--gscl-band-soft: #c9d6ea;
	--gscl-on-deep: #fff; /* text on the brand colour (a dark design flips it) */
	--gscl-ring: color-mix(in srgb, var(--wp--preset--color--sky-deep) 22%, transparent);
	--gscl-gutter: clamp(1rem, 4vw, 3.5rem);
}

html, body { overflow-x: clip; }
/* Anchor links land below the sticky header: its measured height (Gradespace Core's --gsc-header-h,
   kept up to date as the header changes) plus the admin bar when there is one. On phones the admin bar
   scrolls away, so only the header counts. With the header set to scroll away, Core sets this to 0. */
html { scroll-padding-top: calc(var(--gsc-header-h, 7.5rem) + var(--wp-admin--admin-bar--height, 0px) + 1rem); }
@media (max-width: 600px) { html { scroll-padding-top: calc(var(--gsc-header-h, 5rem) + 1rem); } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--wp--preset--color--sky-deep); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--wp--preset--color--sky-tint); color: var(--wp--preset--color--navy); }
.gscl-main { overflow-wrap: break-word; }
.gscl-measure { max-width: 42rem; margin-left: auto !important; margin-right: auto !important; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--wp--preset--color--sky-deep); }
.wp-block-post-content > .alignfull:first-child, .gscl-main > .alignfull:first-child { margin-top: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; } /* header, main and footer sit flush */

/* ==========================================================================
   Header
   ========================================================================== */
/* Sticky header: blur on a pseudo-element, never on the header itself —
   backdrop-filter would trap the fixed mobile menu inside the header. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
header.wp-block-template-part::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent); backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 10px 30px -24px rgb(11 31 58 / 0.4);
}
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0); }

.gscl-topbar { gap: 0.4rem 1.5rem; }
.gscl-topbar a { color: inherit; text-decoration: none; }
.gscl-topbar a:hover { text-decoration: underline; }
.gscl-topbar .gscl-ci__icon { color: var(--wp--preset--color--sky); }
.gscl-topbar__contact { gap: 0.25rem 1.25rem; }
.gscl-topbar .gscl-ci--phones .gscl-ci__sep { padding: 0 0.35rem; }

.gscl-header__bar { position: relative; }
/* Desktop: logo | menu centred on the page | actions. Equal outer columns keep the menu truly centred. */
@media (min-width: 1024px) {
	.gscl-header__bar.gscl-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 1.5rem; } /* the actions never shrink under the menu; the brand column gives way instead */
	.gscl-header__bar > .gscl-brand { justify-self: start; }
	.gscl-header__bar > .gscl-nav { justify-self: center; }
	.gscl-header__bar > .gscl-header__actions { justify-self: end; }
}
/* The brand is the only part of the bar that gives way: a long name wraps (two lines at most,
   then an ellipsis) and a logo scales down, so the icons and the menu button never get pushed off. */
.gscl-brand { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.gscl-brand .wp-block-site-logo { min-width: 0; flex-shrink: 1; }
.gscl-brand .wp-block-site-logo img { width: clamp(118px, 12vw, 150px); max-width: 100%; height: auto; }
.gscl-brand .wp-block-site-title { margin: 0; line-height: 1.1; min-width: 0; overflow-wrap: break-word; }
.gscl-brand .wp-block-site-title a { color: var(--wp--preset--color--navy); text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* When a logo is set it already says the name: keep the title for screen readers only. */
.gscl-brand:has(.wp-block-site-logo img) .wp-block-site-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.gscl-nav .wp-block-navigation-item__content { font-weight: 500; color: var(--wp--preset--color--navy); text-decoration: none; padding: 0.35rem 0; position: relative; }
.gscl-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--wp--preset--color--sky-deep); transform: scaleX(0); transition: transform 0.25s; }
.gscl-nav .wp-block-navigation-item__content:hover::after,
.gscl-nav .current-menu-item > .wp-block-navigation-item__content::after,
.gscl-nav [aria-current="page"]::after { transform: scaleX(1); }

.gscl-header__actions { flex-shrink: 0; }
.gscl-header__phone { font-weight: 600; white-space: nowrap; }
.gscl-header__phone a { color: var(--wp--preset--color--navy); text-decoration: none; }
.gscl-header__phone .gscl-ci__icon { width: 1.05rem; height: 1.05rem; }
.gscl-header__book .wp-block-button__link { padding: 0.7rem 1.25rem; font-size: 0.9375rem; white-space: nowrap; }
.gscl-header__account a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--wp--preset--color--navy); }
.gscl-header__account svg { width: 1.35rem; height: 1.35rem; }
.gscl-header__cart .wc-block-mini-cart__button { min-width: 44px; min-height: 44px; color: var(--wp--preset--color--navy); }
.gscl-header__cart .wc-block-mini-cart__badge { background: var(--wp--preset--color--sky-deep); color: var(--gscl-on-deep); border-color: var(--wp--preset--color--white); }

/* Mobile menu: full height, last item clear of the phone toolbar. */
.wp-block-navigation__responsive-container.is-menu-open {
	height: 100dvh;
	padding: 1.25rem var(--gscl-gutter) calc(4rem + env(safe-area-inset-bottom));
	overflow-y: auto;
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--navy) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.375rem; font-weight: 600; padding: 0.55rem 0; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--navy); }

@media (min-width: 600px) and (max-width: 1599px) {
	.gscl-header__phone { display: none; } /* The top bar already shows the numbers; this keeps the centred menu clear. */
}
@media (max-width: 1040px) {
	.gscl-nav { --wp--style--block-gap: 1.1rem; }
	.gscl-nav .wp-block-navigation-item__content { font-size: 0.9375rem; }
}
@media (max-width: 781px) {
	.gscl-topbar { display: none !important; }
}
/* Phones and tablets: logo, then icons + Book button + menu button on the right.
   WordPress only collapses the menu below 600px; collapse it up to 1023px. */
@media (max-width: 1023px) {
	.gscl-header__bar .gscl-nav { order: 3; flex-shrink: 0; margin-left: 0.25rem !important; }
	.gscl-header__bar > .gscl-header__actions { margin-left: auto !important; gap: 0.15rem !important; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.gscl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.gscl-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.gscl-header__actions { gap: 0.5rem !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: center; gap: 0.5rem; }
}
@media (max-width: 599px) {
	/* Phones: name, then phone / account / cart / menu as a tight row of 44px icons on the right. */
	.gscl-header__bar { column-gap: 0.5rem !important; }
	.gscl-header__bar .gscl-nav { margin-left: 0 !important; }
	.gscl-brand .wp-block-site-title { font-size: clamp(1rem, 0.75rem + 1.6vw, 1.2rem) !important; }
	.gscl-brand .wp-block-site-logo img { width: clamp(72px, 24vw, 118px); }
}
@media (max-width: 374px) {
	.gscl-header__bar { padding-left: 0.75rem !important; padding-right: 0.75rem !important; column-gap: 0.25rem !important; }
	.gscl-brand .wp-block-site-title { font-size: 0.95rem !important; }
}
@media (max-width: 599px) {
	.gscl-header__book { display: none !important; }
	.gscl-header__phone { display: flex; }
	.gscl-header__actions { align-items: center; }
	.gscl-header__phone, .gscl-header__phone .gscl-ci__item, .gscl-header__phone a,
	.gscl-header__account, .gscl-header__account a { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 !important; padding: 0; line-height: 1; }
	.gscl-header__phone .gscl-ci__icon { display: block; margin: 0; }
	/* Icon only: the call link (number kept for screen readers) is stretched invisibly over the icon, so tapping the icon calls. */
	.gscl-header__phone .gscl-ci__item { position: relative; }
	.gscl-header__phone .gscl-ci__text { position: absolute; inset: 0; overflow: hidden; }
	.gscl-header__phone .gscl-ci__text a { position: absolute; inset: 0; z-index: 1; font-size: 0; color: transparent; }
	.gscl-header__phone .gscl-ci__text a:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: -2px; border-radius: 8px; }
	.gscl-header__phone .gscl-ci__icon { width: 1.3rem; height: 1.3rem; color: var(--wp--preset--color--navy); }
}

/* ==========================================================================
   Building blocks: labels, buttons, cards, lists, icons
   ========================================================================== */
/* Eyebrow with a small iris mark. */
.is-style-eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 0.6rem; }
.is-style-eyebrow::before { content: ""; flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid currentColor; background: radial-gradient(circle, currentColor 0 28%, transparent 30%); }
.has-text-align-center.is-style-eyebrow { justify-content: center; }
.is-style-chip { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; padding: 0.4rem 0.95rem; border-radius: 999px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--sky-deep); box-shadow: inset 0 0 0 1px var(--gscl-ring); font-size: 0.875rem; font-weight: 600; }
.is-style-chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--wp--preset--color--sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--sky) 30%, transparent); }
.wp-block-post-terms.is-style-chip a { color: inherit; text-decoration: none; }

/* Buttons */
.wp-element-button, .wp-block-button__link { transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; min-height: 44px; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--wp--preset--color--sky-deep) 80%, transparent); }
.wp-block-button.is-style-soft .wp-block-button__link { background: var(--wp--preset--color--sky-tint); color: var(--wp--preset--color--sky-deep); }
.wp-block-button.is-style-soft .wp-block-button__link:hover { background: var(--wp--preset--color--sky-deep); color: var(--gscl-on-deep); }
.wp-block-button.is-style-white .wp-block-button__link { background: var(--wp--preset--color--white); color: var(--wp--preset--color--sky-deep); }
.wp-block-button.is-style-white .wp-block-button__link:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.gscl-actions { align-items: center; }

/* Cards */
.is-style-card {
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	box-shadow: var(--wp--custom--shadow--soft);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
	height: 100%;
}
.is-style-card:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--lift); border-color: color-mix(in srgb, var(--wp--preset--color--sky-deep) 30%, var(--wp--preset--color--line)); }
.is-style-card > * { margin-block: 0; }
.gscl-card-link { margin-top: auto !important; padding-top: 0.4rem; font-weight: 600; }
.gscl-card-link a { text-decoration: none; }
.gscl-card-link a::after { content: " →"; display: inline-block; transition: transform 0.2s; }
.gscl-card-link a:hover::after { transform: translateX(3px); }
.gscl-card-link a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card clickable */
.gscl-card-cta { justify-content: center; }
.gscl-card-cta, .gscl-card-cta h3, .gscl-card-cta p { color: var(--gscl-on-deep) !important; }

/* Grids: fixed column counts so rows never leave one card alone. */
@media (min-width: 1100px) {
	.gscl-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.gscl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 700px) and (max-width: 1099px) {
	.gscl-grid-4, .gscl-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 700px) {
	.gscl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 699px) {
	.gscl-grid-4, .gscl-grid-3, .gscl-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
}
.gscl-stagger > * { min-width: 0; }

/* Ticked lists */
.gscl-ticks { list-style: none; padding-left: 0; display: grid; gap: 0.55rem; }
.gscl-ticks li { position: relative; padding-left: 2rem; }
.gscl-ticks li::before {
	content: ""; position: absolute; left: 0; top: 0.2em; width: 1.3rem; height: 1.3rem; border-radius: 50%;
	background: var(--wp--preset--color--sky-tint);
	box-shadow: inset 0 0 0 1.5px var(--gscl-ring);
}
.gscl-ticks li::after {
	content: ""; position: absolute; left: 0.3rem; top: calc(0.2em + 0.3rem); width: 0.7rem; height: 0.7rem;
	background: var(--wp--preset--color--sky-deep);
	-webkit-mask: var(--gscl-i-check) center / contain no-repeat; mask: var(--gscl-i-check) center / contain no-repeat;
}
.gscl-hero--home .gscl-ticks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.9375rem; color: var(--wp--preset--color--slate); }

/* Icons (Feather-style line icons, MIT). Coloured by the palette through a mask. */
:root {
	--gscl-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--gscl-i-glasses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='15' r='4'/%3E%3Ccircle cx='18' cy='15' r='4'/%3E%3Cpath d='M10 15a2 2 0 0 1 4 0M2 15 4.5 7.5 6 7M22 15l-2.5-7.5L18 7'/%3E%3C/svg%3E");
	--gscl-i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
	--gscl-i-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
	--gscl-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21.3l7.8-7.8 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
	--gscl-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.2L5.8 21 7 14.2 2 9.3l6.9-1z'/%3E%3C/svg%3E");
	--gscl-i-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E");
	--gscl-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--gscl-i-droplet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 17.7 8.3a8 8 0 1 1-11.3 0z'/%3E%3C/svg%3E");
	--gscl-i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4'/%3E%3C/svg%3E");
	--gscl-i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 10 5-10 5L2 7zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
	--gscl-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
	--gscl-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--gscl-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	--gscl-i-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 8.5-8.5 8.4 8.4 0 0 1 8.5 8.5z'/%3E%3C/svg%3E");
	--gscl-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--gscl-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}
.gscl-ico { padding-top: calc(var(--wp--preset--spacing--50) + 4.25rem) !important; }
.gscl-ico::before {
	content: ""; position: absolute; top: var(--wp--preset--spacing--50); left: var(--wp--preset--spacing--40);
	width: 3.25rem; height: 3.25rem; border-radius: 50%;
	background: var(--wp--preset--color--sky-tint);
	box-shadow: inset 0 0 0 1.5px var(--gscl-ring), 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--sky-tint) 45%, transparent);
	transition: transform 0.3s;
}
.gscl-ico::after {
	content: ""; position: absolute; top: calc(var(--wp--preset--spacing--50) + 0.8rem); left: calc(var(--wp--preset--spacing--40) + 0.8rem);
	width: 1.65rem; height: 1.65rem; background: var(--wp--preset--color--sky-deep);
	-webkit-mask: var(--gscl-i) center / contain no-repeat; mask: var(--gscl-i) center / contain no-repeat;
}
.gscl-ico:hover::before { transform: scale(1.08); }
.gscl-ico--eye { --gscl-i: var(--gscl-i-eye); }
.gscl-ico--glasses { --gscl-i: var(--gscl-i-glasses); }
.gscl-ico--target { --gscl-i: var(--gscl-i-target); }
.gscl-ico--activity { --gscl-i: var(--gscl-i-activity); }
.gscl-ico--heart { --gscl-i: var(--gscl-i-heart); }
.gscl-ico--star { --gscl-i: var(--gscl-i-star); }
.gscl-ico--smile { --gscl-i: var(--gscl-i-smile); }
.gscl-ico--shield { --gscl-i: var(--gscl-i-shield); }
.gscl-ico--droplet { --gscl-i: var(--gscl-i-droplet); }
.gscl-ico--sun { --gscl-i: var(--gscl-i-sun); }
.gscl-ico--layers { --gscl-i: var(--gscl-i-layers); }
.gscl-ico--clock { --gscl-i: var(--gscl-i-clock); }
.gscl-ico--check { --gscl-i: var(--gscl-i-check); }
.gscl-ico--calendar { --gscl-i: var(--gscl-i-calendar); }
.gscl-ico--message { --gscl-i: var(--gscl-i-message); }
.gscl-ico--pin { --gscl-i: var(--gscl-i-pin); }
.gscl-ico--phone { --gscl-i: var(--gscl-i-phone); }

/* ==========================================================================
   Signature 1: the "lens" — circular photos with an iris ring
   ========================================================================== */
.wp-block-image.is-style-lens { position: relative; isolation: isolate; margin: 8% auto; max-width: min(100%, 34rem); }
.wp-block-image.is-style-lens img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 30px 60px -30px rgb(11 31 58 / 0.45); }
/* Outer thin ring and the iris "striations" ring around the photo. */
.wp-block-image.is-style-lens::before,
.wp-block-image.is-style-lens::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.wp-block-image.is-style-lens::before { inset: -9%; border: 1.5px solid var(--gscl-ring); background: radial-gradient(circle, transparent 62%, color-mix(in srgb, var(--wp--preset--color--sky-tint) 70%, transparent) 63%); }
.wp-block-image.is-style-lens::after {
	inset: -4.5%;
	background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wp--preset--color--sky-deep) 55%, transparent) 0 1.2deg, transparent 1.2deg 6deg);
	-webkit-mask: radial-gradient(circle, transparent 66.5%, #000 67%, #000 69.5%, transparent 70%);
	mask: radial-gradient(circle, transparent 66.5%, #000 67%, #000 69.5%, transparent 70%);
}
.gscl-lens-col { position: relative; }

/* No photo chosen yet: a soft lens motif (assets/images/lens.svg, white
   rings on transparent) over a gradient from the palette, so it suits every
   design and palette. Select the picture and Replace to use a photo. */
.gscl-ph img,
.wp-block-cover.gscl-ph .wp-block-cover__image-background {
	--gscl-ph-a: 150deg;
	background:
		radial-gradient(90% 90% at 22% 12%, color-mix(in srgb, var(--wp--preset--color--sky) 30%, #fff) 0%, transparent 60%),
		linear-gradient(var(--gscl-ph-a), var(--wp--preset--color--sky-tint) 0%, color-mix(in srgb, var(--wp--preset--color--sky) 70%, var(--wp--preset--color--sky-tint)) 55%, var(--wp--preset--color--sky-deep) 100%);
	object-fit: cover;
}
.gscl-ph--team img, .gscl-ph--fitting img { --gscl-ph-a: 210deg; }
.gscl-ph--story img, .gscl-ph--frames img { --gscl-ph-a: 115deg; }
.gscl-ph--kids img, .gscl-ph--trying img { --gscl-ph-a: 250deg; }

/* Signature 2: focus — the hero photo sharpens from a soft blur on load;
   other photos sharpen as they scroll into view. */
@media (prefers-reduced-motion: no-preference) {
	.gscl-focus img { animation: gscl-focus 1.6s cubic-bezier(.2, .7, .2, 1) both 0.15s; }
	.wp-block-image.is-style-lens::after { animation: gscl-spin 90s linear infinite; }
	.gscl-will-reveal .wp-block-image img { filter: blur(8px); transform: scale(1.03); transition: filter 1s ease-out 0.15s, transform 1s ease-out 0.15s; }
	.gscl-will-reveal.is-in .wp-block-image img { filter: none; transform: none; }
}
@keyframes gscl-focus { from { filter: blur(14px) saturate(0.6); transform: scale(1.06); } to { filter: none; transform: none; } }
@keyframes gscl-spin { to { transform: rotate(360deg); } }

/* Signature 3: eye-chart headings — rows get smaller, like a sight test. */
.gscl-chart { display: grid; gap: 0.15em; font-family: var(--wp--preset--font-family--display); font-weight: 700; line-height: 1; color: currentColor; }
.gscl-chart__row { margin: 0 !important; letter-spacing: 0.22em; position: relative; padding-right: 3.8rem; }
.gscl-chart__row::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; opacity: 0.6; font-family: var(--wp--preset--font-family--body); }
.gscl-chart__row:nth-child(1) { font-size: clamp(3.5rem, 9vw, 6.5rem); letter-spacing: 0.08em; }
.gscl-chart__row:nth-child(1)::after { content: "20/200"; }
.gscl-chart__row:nth-child(2) { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.gscl-chart__row:nth-child(2)::after { content: "20/100"; }
.gscl-chart__row:nth-child(3) { font-size: clamp(1.35rem, 2.8vw, 2rem); }
.gscl-chart__row:nth-child(3)::after { content: "20/50"; }
.gscl-chart__row:nth-child(4) { font-size: clamp(1rem, 1.9vw, 1.35rem); }
.gscl-chart__row:nth-child(4)::after { content: "20/20"; }
.gscl-chart--center { justify-items: center; }
.gscl-chart--center .gscl-chart__row { padding-left: 3.8rem; }
.gscl-chart-col .gscl-chart { padding: 1.5rem 0; border-bottom: 2px solid currentColor; border-top: 2px solid currentColor; }

/* ==========================================================================
   Heroes
   ========================================================================== */
.gscl-hero--home { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--wp--preset--color--sky-tint) 0%, var(--wp--preset--color--white) 70%); }
.gscl-hero--home::before { content: ""; position: absolute; width: 58rem; height: 58rem; right: -20rem; top: -18rem; border-radius: 50%; border: 1px solid var(--gscl-ring); outline: 1px solid color-mix(in srgb, var(--wp--preset--color--sky-deep) 12%, transparent); outline-offset: 4.5rem; pointer-events: none; }
.gscl-hero__media img { object-position: 74% 50%; }
.gscl-hero--home > * { position: relative; }
.gscl-hero__title { line-height: 1.05 !important; }
.gscl-hero__media { position: relative; }
.gscl-float-card {
	position: absolute; left: 0; bottom: 6%; z-index: 2;
	background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy);
	padding: 0.85rem 1.1rem; border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--lift); border: 1px solid var(--wp--preset--color--line);
	font-weight: 600; font-size: 0.9375rem; max-width: 18rem;
}
.gscl-float-card p { margin: 0; }
.gscl-float-card .has-small-font-size { font-weight: 400; }
@media (max-width: 781px) {
	.gscl-hero--home::before { display: none; }
	.gscl-hero--home .wp-block-columns { flex-direction: column-reverse; }
	.gscl-hero__media { max-width: 22rem; margin: 0 auto; width: 100%; }
	.gscl-float-card { left: 50%; transform: translateX(-50%); bottom: -0.5rem; white-space: nowrap; max-width: none; }
}

.gscl-page-hero { position: relative; overflow: hidden; }
.gscl-page-hero::after { content: ""; position: absolute; width: 26rem; height: 26rem; right: -6rem; top: 50%; transform: translateY(-50%); border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wp--preset--color--sky-deep) 30%, transparent) 0 1deg, transparent 1deg 5deg);
	-webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, #000 60%, transparent 61%, transparent 74%, #000 75%, #000 76%, transparent 77%);
	mask: radial-gradient(circle, transparent 54%, #000 55%, #000 60%, transparent 61%, transparent 74%, #000 75%, #000 76%, transparent 77%);
	pointer-events: none; }
.gscl-page-hero > * { position: relative; z-index: 1; }
@media (max-width: 781px) { .gscl-page-hero::after { width: 16rem; height: 16rem; right: -7rem; top: 1rem; transform: none; } }

/* Photo hero's fade (saved in content as white) follows the palette. */
@media (min-width: 782px) {
	.gscl-hero-fade > .wp-block-cover__background.has-background-gradient {
		background: linear-gradient(90deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 36%, color-mix(in srgb, var(--wp--preset--color--white) 86%, transparent) 48%, transparent 72%) !important;
	}
}
@media (max-width: 781px) {
	.gscl-hero-fade > .wp-block-cover__background.has-background-gradient { background: color-mix(in srgb, var(--wp--preset--color--white) 86%, transparent) !important; }
}
@media (prefers-reduced-motion: no-preference) {
	.gscl-hero-anim > * { animation: gscl-up 0.8s cubic-bezier(.2, .7, .2, 1) both; }
	.gscl-hero-anim > :nth-child(2) { animation-delay: 0.08s; }
	.gscl-hero-anim > :nth-child(3) { animation-delay: 0.16s; }
	.gscl-hero-anim > :nth-child(4) { animation-delay: 0.24s; }
	.gscl-hero-anim > :nth-child(5) { animation-delay: 0.32s; }
}
@keyframes gscl-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Sections
   ========================================================================== */
/* Trust bar */
.gscl-trust { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--custom--shadow--soft); }
.gscl-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) !important; }
.gscl-stat { padding-left: 1.1rem; border-left: 3px solid var(--wp--preset--color--sky); }
.gscl-stat p { margin: 0; }
.gscl-stat__value { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--x-large); line-height: 1.1; color: var(--wp--preset--color--sky-deep); }
.gscl-stat__label { font-size: 0.9375rem; line-height: 1.4; }

/* Booking steps */
.gscl-steps { counter-reset: gscl-step; }
.gscl-step { position: relative; counter-increment: gscl-step; padding-top: 5rem; text-align: left; }
.gscl-step::before {
	content: counter(gscl-step); position: absolute; top: 0; left: 0;
	width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.35rem;
	background: var(--wp--preset--color--sky-deep); color: var(--gscl-on-deep);
	box-shadow: 0 0 0 7px var(--wp--preset--color--sky-tint), 0 0 0 8px var(--gscl-ring);
}
@media (min-width: 900px) {
	.gscl-step:not(:last-child)::after { content: ""; position: absolute; top: 1.75rem; left: 5rem; right: -1rem; border-top: 2px dashed var(--gscl-ring); }
}
.gscl-step > * { margin: 0; }

/* Offer (sits on the brand colour) */
.gscl-offer { position: relative; overflow: hidden; }
.gscl-offer::after { content: ""; position: absolute; width: 30rem; height: 30rem; right: -10rem; bottom: -14rem; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); box-shadow: 0 0 0 3rem color-mix(in srgb, currentColor 5%, transparent); pointer-events: none; }
.gscl-offer, .gscl-offer h2, .gscl-offer p { color: var(--gscl-on-deep) !important; }
.gscl-offer .is-style-eyebrow { opacity: 0.85; }
.gscl-offer > * { position: relative; z-index: 1; }

/* Testimonials */
.gscl-stars { color: var(--wp--preset--color--sky-deep); letter-spacing: 0.15em; font-size: 0.95rem; margin: 0; }
.gscl-testimonial__text { font-size: 1.0625rem; line-height: 1.7; }
.gscl-testimonial__text::before { content: "“"; display: block; font-family: Georgia, serif; font-size: 3.2rem; line-height: 0.6; height: 1.3rem; color: var(--wp--preset--color--sky); }
.gscl-testimonial__name { margin-top: auto !important; font-weight: 600; color: var(--wp--preset--color--navy); }
.gscl-testimonial__name::before { content: "— "; color: var(--wp--preset--color--sky-deep); }
.gscl-quote { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xx-large); line-height: 1.3; font-weight: 500; }

/* People */
.gscl-person { text-align: center; align-items: center; }
.gscl-avatar {
	width: 6.5rem; height: 6.5rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 0.75rem !important;
	font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; font-weight: 600; letter-spacing: 0.05em;
	color: var(--wp--preset--color--sky-deep); background: var(--wp--preset--color--sky-tint);
	box-shadow: 0 0 0 6px var(--wp--preset--color--white), 0 0 0 7.5px var(--gscl-ring);
}
.gscl-person .is-style-eyebrow { justify-content: center; }
.gscl-person .is-style-eyebrow::before { display: none; }

/* FAQ accordion */
.gscl-accordion-list > * { margin-block: 0; }
.gscl-accordion { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm); padding: 0; transition: border-color 0.2s, box-shadow 0.2s; }
.gscl-accordion[open] { border-color: color-mix(in srgb, var(--wp--preset--color--sky-deep) 40%, var(--wp--preset--color--line)); box-shadow: var(--wp--custom--shadow--soft); }
.gscl-accordion summary { list-style: none; cursor: pointer; padding: 1rem 3.5rem 1rem 1.25rem; font-weight: 600; position: relative; min-height: 44px; }
.gscl-accordion summary::-webkit-details-marker { display: none; }
.gscl-accordion summary::after {
	content: ""; position: absolute; right: 1.1rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -0.8rem; border-radius: 50%;
	background: var(--wp--preset--color--sky-tint) linear-gradient(var(--wp--preset--color--sky-deep), var(--wp--preset--color--sky-deep)) center / 0.7rem 2px no-repeat;
}
.gscl-accordion summary::before { content: ""; position: absolute; right: calc(1.1rem + 0.8rem - 1px); top: 50%; width: 2px; height: 0.7rem; margin-top: -0.35rem; background: var(--wp--preset--color--sky-deep); z-index: 1; transition: transform 0.25s; }
.gscl-accordion[open] summary::before { transform: scaleY(0); }
.gscl-accordion > :not(summary) { padding: 0 1.25rem; margin-top: 0; color: var(--wp--preset--color--slate); }
.gscl-accordion > :last-child { padding-bottom: 1.1rem; }
.gscl-faq-side { position: sticky; top: 8rem; }

/* Blog cards */
.gscl-posts .wp-block-post-template { margin: 0; padding: 0; }
.gscl-post-card { height: 100%; }
.gscl-post-card > * { margin: 0; }
.gscl-post-card .wp-block-post-featured-image { margin-bottom: 0.5rem; overflow: hidden; border-radius: var(--wp--custom--radius--md); }
.gscl-post-card .wp-block-post-featured-image img { border-radius: var(--wp--custom--radius--md); transition: transform 0.5s; }
.gscl-post-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.gscl-post-card .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.gscl-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--sky-deep); }
.gscl-post-card .wp-block-post-date { color: var(--wp--preset--color--slate); }
.gscl-post-card .wp-block-post-excerpt { color: var(--wp--preset--color--slate); }
.gscl-post-card .wp-block-post-excerpt__excerpt { margin: 0; }
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--60); gap: 0.5rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 999px; }
.wp-block-query-pagination .current { background: var(--wp--preset--color--sky-deep); color: var(--gscl-on-deep); }

/* Single article */
.gscl-single-image img { border-radius: var(--wp--custom--radius--lg); }
.gscl-article h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: var(--wp--preset--spacing--50); }
.gscl-article li + li { margin-top: 0.4rem; }
.gscl-article-cta { background: var(--wp--preset--color--sky-tint); border-color: transparent; }
.gscl-article-cta:hover { transform: none; }
.gscl-post-nav a { font-weight: 600; text-decoration: none; }

/* CTA band with lens rings */
.gscl-cta-band { position: relative; overflow: hidden; }
.gscl-rings::before, .gscl-rings::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.gscl-rings::before { width: 30rem; height: 30rem; left: -10rem; top: -13rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--sky) 35%, transparent); outline: 1px solid color-mix(in srgb, var(--wp--preset--color--sky) 18%, transparent); outline-offset: 3.5rem; }
.gscl-rings::after { width: 22rem; height: 22rem; right: -8rem; bottom: -10rem; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wp--preset--color--sky) 45%, transparent) 0 1deg, transparent 1deg 6deg); -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%, #000 64%, transparent 65%); mask: radial-gradient(circle, transparent 55%, #000 56%, #000 64%, transparent 65%); }
.gscl-cta-band > * { position: relative; z-index: 1; }
.gscl-cta-band .gscl-actions { justify-content: center; }

/* Booking form panel */
.gscl-booking-card { padding: var(--wp--preset--spacing--50) !important; }
.gscl-booking-card:hover, .gscl-booking-side:hover, .gscl-faq-side:hover { transform: none; }
.gscl-booking-side { position: sticky; top: 8rem; background: var(--wp--preset--color--sky-tint); border-color: transparent; }

/* Gallery */
.gscl-gallery img { border-radius: var(--wp--custom--radius--md); aspect-ratio: 4 / 3; object-fit: cover; }

/* Contact cards */
.gscl-ico .gscl-clinic-info + .gscl-clinic-info { margin-top: 0.25rem; }

/* Photos with a soft frame */
.gscl-shadow img { box-shadow: var(--wp--custom--shadow--lift); }
.gscl-zoom .wp-block-image { overflow: hidden; border-radius: var(--wp--custom--radius--lg); }

/* Dots and glow (used by some helpers) */
.gscl-glow { position: relative; overflow: hidden; }
.gscl-dots { background-image: radial-gradient(color-mix(in srgb, currentColor 12%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; }

/* Search */
.gscl-search .wp-block-search__input { min-height: 48px; border-radius: 999px; padding: 0 1.1rem; border: 1px solid var(--wp--preset--color--line); font-size: 1rem; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); }
.gscl-search .wp-block-search__button { border-radius: 999px; margin-left: 0.5rem; }

/* ==========================================================================
   Footer: columns share the width evenly (brand row on small laptops, 2 per row
   on phones and portrait tablets).
   ========================================================================== */
.gscl-footer { position: relative; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--sky) 20%, transparent); }
.gscl-footer::before { content: ""; position: absolute; width: 36rem; height: 36rem; right: -14rem; top: -20rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--wp--preset--color--sky) 22%, transparent); outline: 1px solid color-mix(in srgb, var(--wp--preset--color--sky) 12%, transparent); outline-offset: 4rem; pointer-events: none; }
.gscl-footer > * { position: relative; }
/* Footer columns share the width evenly however many there are: remove or add a
   column in the Site Editor and the rest close up (no gaps). The brand column is a
   little wider. */
.gscl-footer__grid { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.gscl-footer__grid > * { flex: 1 1 0; margin: 0 !important; min-width: 0; }
.gscl-footer__grid > .gscl-footer__brand { flex-grow: 1.35; }
.gscl-footer__title { font-size: 0.8125rem !important; font-family: var(--wp--preset--font-family--body); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--sky) !important; margin: 0; }
.gscl-footer__links { line-height: 2.1; margin: 0; }
.gscl-footer a { color: inherit; text-decoration: none; }
.gscl-footer a:hover { color: var(--wp--preset--color--sky); text-decoration: underline; }
.gscl-footer__soft, .gscl-footer .gscl-ci--address, .gscl-footer__bottom { color: var(--gscl-band-soft); }
.gscl-footer .gscl-ci__icon { color: var(--wp--preset--color--sky); }
.gscl-footer__tagline { font-weight: 600; font-size: var(--wp--preset--font-size--large); margin: 0; }
.gscl-footer .wp-block-site-logo img { background: #fff; border-radius: 12px; padding: 6px 10px; width: 150px; height: auto; }
.gscl-footer__hours { font-size: 0.9375rem; width: 100%; }
.gscl-footer .gscl-clinic-info { font-size: 0.9375rem; }
.gscl-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--gscl-band-soft) 25%, transparent); gap: 0.5rem 2rem; }
.gscl-footer__bottom p, .gscl-footer__bottom .gscl-clinic-info { margin: 0; }
.gscl-social { gap: 0.5rem; }
.gscl-social .wp-social-link { background: color-mix(in srgb, #fff 12%, transparent) !important; color: #fff !important; }
.gscl-social .wp-social-link:hover { background: var(--wp--preset--color--sky) !important; color: var(--wp--preset--color--navy) !important; }
@media (max-width: 1100px) {
	.gscl-footer__grid > .gscl-footer__brand { flex-basis: 100%; } /* brand on its own row; the rest share the next row */
}
@media (max-width: 781px) {
	/* Two per row; an odd one out stretches to the full width instead of leaving a hole. */
	.gscl-footer__grid > * { flex-basis: calc(50% - var(--wp--preset--spacing--40)); }
}
@media (max-width: 480px) {
	.gscl-footer__grid { column-gap: 1rem; }
	/* Address, hours and phone numbers need the full width on small phones (by content, not position). */
	.gscl-footer__grid > :has(.gscl-ci--address, .gscl-footer__hours, .gscl-ci--phones) { flex-basis: 100%; }
}
@media (pointer: coarse) {
	.gscl-footer__links { line-height: 1.4; }
	.gscl-footer__links a { display: inline-block; padding: 0.7rem 0; }
	.gscl-footer .gscl-clinic-info a { display: inline-block; line-height: 1.4; padding: 0.7rem 0; }
	.gscl-footer .gscl-ci--phones, .gscl-footer .gscl-ci--email { gap: 0; }
	.gscl-footer .gscl-ci__item { align-items: center; }
}

/* ==========================================================================
   Dark panels and saved colours
   ========================================================================== */
/* Soft light text saved in content on navy bands. */
.has-navy-background-color [style*="color:#c9d6ea"] { color: var(--gscl-band-soft) !important; }
.has-navy-background-color .wp-block-button.is-style-soft .wp-block-button__link { background: color-mix(in srgb, #fff 14%, transparent); color: #fff; }
.has-navy-background-color .wp-block-button.is-style-soft .wp-block-button__link:hover { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--navy); }
.has-navy-background-color .gscl-ci__icon { color: currentColor; }
.has-navy-background-color .is-style-eyebrow { color: var(--wp--preset--color--sky); }

/* Reveal on scroll (assets/js/motion.js adds .gscl-will-reveal and .is-in) */
@media (prefers-reduced-motion: no-preference) {
	.gscl-will-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s, transform 0.7s; }
	.gscl-will-reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Blog: article + sidebar (booking, offer, shop items), related posts
   ========================================================================== */
.gscl-blog-layout { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
.gscl-blog-layout > * { margin: 0 !important; min-width: 0; }
@media (min-width: 960px) {
	.gscl-blog-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
	.gscl-blog-aside { position: sticky; top: 7.5rem; }
}
.gscl-blog-main .gscl-article { max-width: 46rem; }
.gscl-blog-main .gscl-single-image { margin: 0; }
.gscl-sidebar > * { margin: 0 !important; width: 100%; }
.gscl-side-card { border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--40); }
.gscl-side-card > * { margin: 0 !important; }
.gscl-side-book:hover { transform: none; }
.gscl-side-offer { background: var(--gscl-band-bg) !important; color: var(--gscl-band-text) !important; }
.gscl-side-offer__big { font-weight: 700; line-height: 1; }
.gscl-side-shop { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); }
.gscl-sidebar .gscl-side-products .wc-block-product-template { display: grid !important; gap: 0.9rem !important; margin: 0; padding: 0; list-style: none; }
.gscl-sidebar .gscl-side-products .wc-block-product {
	display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.85rem; row-gap: 0.15rem;
	align-items: center; text-align: left; margin: 0; width: auto !important;
	padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.gscl-sidebar .gscl-side-products .wc-block-product:hover { transform: none; box-shadow: none; }
.gscl-sidebar .gscl-side-products .wc-block-product > * { margin: 0 !important; }
.gscl-sidebar .gscl-side-products .wc-block-components-product-image { grid-row: 1 / span 2; width: 72px; border-radius: var(--wp--custom--radius--sm); overflow: hidden; background: var(--wp--preset--color--mist); }
.gscl-sidebar .gscl-side-products .wp-block-post-title { font-size: 0.9375rem !important; line-height: 1.35; align-self: end; text-align: left; }
.gscl-sidebar .gscl-side-products .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.gscl-sidebar .gscl-side-products .wp-block-post-title a:hover { color: var(--wp--preset--color--sky-deep); }
.gscl-sidebar .gscl-side-products .wc-block-components-product-price { font-weight: 600; font-size: 0.9375rem; color: var(--wp--preset--color--sky-deep); align-self: start; text-align: left !important; }
.gscl-side-more a { font-weight: 600; color: var(--wp--preset--color--sky-deep); text-decoration: none; }
.gscl-sidebar .gscl-ci { font-size: 0.9375rem; }
.gscl-related-band h2 { margin-bottom: var(--wp--preset--spacing--40); }
.gscl-post-card, .gscl-post-card .wp-block-post-featured-image { width: 100%; align-self: stretch; }

/* Book / Call buttons at the end of the menu: only inside the opened phone menu. */
.gscl-nav .gscl-nav-cta { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .gscl-nav-cta { display: flex !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .gscl-nav-cta--book { margin-top: 1.25rem; }
.wp-block-navigation__responsive-container.is-menu-open .gscl-nav-cta .wp-block-navigation-item__content {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0.8rem 1.25rem;
	border-radius: 999px; font-size: 1.0625rem; font-weight: 600; text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .gscl-nav-cta--book .wp-block-navigation-item__content { background: var(--wp--preset--color--sky-deep); color: var(--gscl-on-deep, #fff) !important; }
.wp-block-navigation__responsive-container.is-menu-open .gscl-nav-cta--call .wp-block-navigation-item__content { border: 2px solid var(--wp--preset--color--sky-deep); color: var(--wp--preset--color--sky-deep) !important; }
.wp-block-navigation__responsive-container.is-menu-open .gscl-nav-cta .wp-block-navigation-item__content::after { display: none; }