.site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); background: color-mix(in srgb, var(--color-background) 91%, transparent); backdrop-filter: blur(1rem); }
.scroll-progress { position: fixed; z-index: 51; top: calc(var(--header-height) - .12rem); left: 0; width: 100%; height: .16rem; pointer-events: none; background: linear-gradient(90deg, var(--color-primary) 0 88%, var(--color-accent-yellow) 88%); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; will-change: transform; }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: var(--space-3); }
.brand { width: clamp(10.8rem, 16vw, 12.8rem); flex: 0 0 auto; margin-right: auto; }
.brand img { width: 100%; }
.menu-toggle { order: 3; }
.main-nav { visibility: hidden; position: fixed; z-index: 100; inset: 0; contain: layout paint; overflow: clip; display: flex; justify-content: flex-end; background: color-mix(in srgb, #071a26 58%, transparent); opacity: 0; transition: opacity var(--motion-duration-normal) var(--motion-ease-standard), visibility 0s linear var(--motion-duration-normal); }
.main-nav.open { visibility: visible; opacity: 1; transition-delay: 0s; }
body.menu-open { overflow: hidden; }
.nav-drawer { width: min(100%, 32rem); height: 100%; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-5), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left)); background: var(--color-background); box-shadow: var(--shadow-large); transform: translateX(100%); transition: transform var(--motion-duration-normal) var(--motion-ease-enter); }
.main-nav.open .nav-drawer { transform: translateX(0); }
.nav-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); }
.nav-drawer-header .brand { width: min(12rem, 62vw); margin: 0; }
.nav-close { flex: 0 0 2.75rem; font-size: 1.8rem; }
.nav-links, .nav-actions { display: grid; gap: var(--space-2); }
.nav-links a, .nav-group summary { min-height: 3rem; display: flex; align-items: center; border-radius: var(--radius-small); padding: .65rem .75rem; color: var(--color-text); text-decoration: none; font-weight: 560; cursor: pointer; }
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-group summary:hover, .nav-group summary[aria-current="page"] { color: var(--color-primary); background: var(--color-surface-subtle); }
.nav-group summary { list-style: none; }
.nav-group summary::-webkit-details-marker, .language-menu summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: "⌄"; margin-left: .35rem; }
.nav-group[open] summary::after { transform: rotate(180deg); }
.nav-submenu { display: grid; padding-left: var(--space-4); }
.nav-actions { margin-top: var(--space-5); }
.nav-utilities { display: grid; gap: var(--space-4); margin-top: auto; border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.mobile-language { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mobile-language a { min-height: 2.75rem; display: flex; align-items: center; border-radius: var(--radius-small); padding: .55rem .7rem; color: var(--color-text); text-decoration: none; }
.mobile-language a[aria-current="true"] { color: var(--color-primary); background: var(--color-surface-subtle); font-weight: 650; }
.nav-utilities .theme-toggle { width: 100%; justify-content: flex-start; padding-inline: .7rem; }
.nav-utilities .theme-label { position: static; width: auto; height: auto; clip: auto; }
.nav-login { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: .5rem; color: var(--color-text); text-decoration: none; font-weight: 560; }
.header-tools { display: flex; gap: var(--space-1); align-items: center; }
.language-menu { position: relative; }
.language-summary { min-width: auto; padding-inline: .55rem; font-size: .86rem; font-weight: 650; }
.language-list { position: absolute; z-index: 4; right: 0; min-width: 13rem; margin: .45rem 0 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface-elevated); box-shadow: var(--shadow-small); list-style: none; }
.language-list a, .language-heading { display: block; padding: .55rem .7rem; border-radius: var(--radius-small); text-decoration: none; }
.language-list a[aria-current="true"] { color: var(--color-primary); background: var(--color-surface-subtle); font-weight: 650; }
.language-heading { margin-top: var(--space-1); border-top: 1px solid var(--color-border); padding-top: var(--space-3); color: var(--color-text-muted); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.draft-banner { padding: .55rem 1rem; color: var(--color-warning); background: var(--color-warning-surface); text-align: center; font-size: .88rem; font-weight: 600; }

.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 7rem) clamp(5rem, 9vw, 8.5rem); background: var(--gradient-hero); }
.hero::before { content: ""; position: absolute; width: 22rem; aspect-ratio: 1; right: 43%; top: -15rem; border-radius: 50%; background: color-mix(in srgb, var(--color-accent-yellow) 18%, transparent); filter: blur(3rem); }
.hero-grid { position: relative; display: grid; gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.hero-copy { animation: reveal var(--motion-duration-slow) var(--motion-ease-enter) both; }
.eyebrow, .kicker { margin: 0 0 var(--space-4); color: var(--color-primary); font-size: .76rem; font-weight: 680; letter-spacing: .105em; text-transform: uppercase; }
.lead { max-width: 39rem; color: var(--color-text-muted); font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.62; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-note { max-width: 34rem; margin-top: var(--space-3); color: var(--color-text-muted); font-size: .9rem; }
.hero-visual { position: relative; min-height: 22rem; animation: reveal-visual var(--motion-duration-slow) var(--motion-ease-enter) backwards; transform: translate3d(0, var(--parallax-y, 0), 0); will-change: transform; }
.hero-visual::before { content: ""; position: absolute; inset: 8% -5% -7% 10%; border-radius: var(--radius-large); background: color-mix(in srgb, var(--color-accent-blue) 15%, transparent); transform: rotate(4deg); }
.hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-large); object-fit: cover; box-shadow: var(--shadow-medium); }
.hero-caption { position: absolute; z-index: 2; right: -1rem; bottom: 1.5rem; max-width: 15rem; margin: 0; border-radius: var(--radius-medium) 0 0 var(--radius-medium); padding: .8rem 1rem; color: #153346; background: #fff8df; font-size: .84rem; box-shadow: var(--shadow-small); }
.trust-band { position: relative; z-index: 2; margin-top: -2.5rem; }
.trust-band-inner { display: grid; gap: var(--space-4); border-radius: var(--radius-medium); padding: var(--space-5); background: var(--color-surface-elevated); box-shadow: var(--shadow-small); }
.trust-fact { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--space-3); align-items: center; }
.trust-fact span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary); background: var(--color-surface-subtle); font-weight: 700; }
.trust-fact strong { display: block; font-size: .94rem; font-weight: 620; }
.trust-fact small { display: block; line-height: 1.35; }

.section { position: relative; isolation: isolate; padding-block: clamp(4rem, 8vw, 8rem); }
.section::before { content: ""; position: absolute; z-index: -1; width: clamp(9rem, 18vw, 19rem); height: .16rem; top: 0; left: max(1rem, calc((100% - var(--content-width)) / 2)); background: linear-gradient(90deg, var(--color-accent-blue), color-mix(in srgb, var(--color-accent-yellow) 75%, transparent), transparent); transform: rotate(-1.5deg); transform-origin: left; opacity: .55; }
.section:nth-of-type(3n)::before { right: max(1rem, calc((100% - var(--content-width)) / 2)); left: auto; transform: rotate(1.5deg); }
.section-tone-ice + .section-tone-warm, .section-tone-warm + .section-tone-paper { box-shadow: inset 0 2.5rem 4rem -4rem color-mix(in srgb, var(--color-primary) 42%, transparent); }
.section-tone-ice { background: var(--color-surface-subtle); }
.section-tone-warm { background: var(--color-surface-warm); }
.section-tone-paper { background: var(--color-surface); }
.section:last-child { padding-bottom: clamp(6rem, 11vw, 10rem); background-image: linear-gradient(to bottom, transparent 72%, color-mix(in srgb, var(--color-accent-yellow) 9%, var(--color-surface))); }
.section-header { max-width: 43rem; margin-bottom: var(--space-7); }
.section-header p { color: var(--color-text-muted); }
.card-grid, .pricing-grid { display: grid; gap: var(--space-6); }
.service-card { position: relative; overflow: hidden; min-height: 23rem; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--color-surface); }
.service-card { transition: transform var(--motion-duration-normal) var(--motion-ease-standard), box-shadow var(--motion-duration-normal) var(--motion-ease-standard); }
.service-card:hover { transform: translateY(-.25rem); box-shadow: var(--shadow-small); }
.service-card-visual { transition: transform var(--motion-duration-slow) var(--motion-ease-enter); }
.service-card:hover .service-card-visual { transform: scale(1.015); }
.service-card:nth-child(odd) { border-radius: var(--radius-large) var(--radius-large) var(--radius-large) .2rem; }
.service-card:nth-child(even) { border-radius: .2rem var(--radius-large) var(--radius-large) var(--radius-large); background: var(--gradient-deep); }
.service-card:not(:has(.service-card-visual)) { min-height: 15rem; }
.service-card:nth-child(even) h3, .service-card:nth-child(even) p, .service-card:nth-child(even) a, .service-card:nth-child(even) .kicker { color: #f5f7f3; }
.service-card-visual { width: min(80%, 24rem); align-self: flex-end; margin: -1rem -1rem var(--space-5) 0; }
.service-card p, .pricing-grid p, .prose p, .steps p { color: var(--color-text-muted); }
.service-card:nth-child(even) p { color: #c8d8dc; }
.highlight { position: relative; overflow: hidden; display: grid; gap: var(--space-6); align-items: center; border-radius: var(--radius-large); padding: clamp(2rem, 6vw, 4.5rem); color: #f5f7f3; background: var(--gradient-deep); }
.highlight h2, .highlight .eyebrow { color: #f5f7f3; }
.highlight > * { position: relative; z-index: 1; }
.highlight::after { content: ""; position: absolute; width: 42%; height: 170%; right: -14%; top: -40%; border: 1.3rem solid color-mix(in srgb, var(--color-accent-yellow) 75%, transparent); border-radius: 50%; pointer-events: none; transform: rotate(30deg); }
.trust-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.trust-list li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-border); padding-block: var(--space-5); font-size: clamp(1rem, 1.7vw, 1.2rem); }
.trust-list span { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; color: #123044; background: var(--color-accent-yellow); font-weight: 700; }
.steps { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-7); }
.steps::before { content: ""; position: absolute; left: 1.45rem; top: 2.5rem; bottom: 2.5rem; width: 2px; background: linear-gradient(var(--color-accent-yellow), var(--color-accent-blue)); }
.steps li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-5); }
.steps li > span { z-index: 1; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; color: #123044; background: var(--color-accent-yellow); font-weight: 650; }
.section-heading, .price-preview > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.price-preview { display: grid; border-top: 1px solid var(--color-border); }
.price-preview > div { padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.pricing-grid { align-items: stretch; }
.pricing-grid article { min-height: 100%; display: grid; align-content: start; gap: var(--space-3); border-top: .35rem solid var(--color-accent-blue); padding: var(--space-5); background: var(--color-surface); }
.pricing-grid strong { color: var(--color-primary); font-size: 1.65rem; font-weight: 620; }
.faq-list { border-top: 1px solid var(--color-border); }
.faq-list details { border-bottom: 1px solid var(--color-border); }
.faq-list summary { min-height: 4.5rem; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); color: var(--color-text); cursor: pointer; font-weight: 610; }
.faq-list p { max-width: 65ch; color: var(--color-text-muted); }
.faq-list summary span { transition: transform var(--motion-duration-normal) var(--motion-ease-standard); }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-duration-normal) var(--motion-ease-enter); }
.faq-answer > p { overflow: hidden; }
.faq-list details[open] .faq-answer { grid-template-rows: 1fr; }
.notice { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); max-width: 48rem; border: 1px solid color-mix(in srgb, var(--color-info) 28%, var(--color-border)); border-radius: var(--radius-large); padding: clamp(1.15rem, 3vw, 1.65rem); background: color-mix(in srgb, var(--color-info-surface) 48%, var(--color-surface)); box-shadow: var(--shadow-small); }
.notice > span { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius-medium); color: var(--color-primary); background: color-mix(in srgb, var(--color-accent-blue) 20%, var(--color-surface)); font-weight: 700; }
.notice h2 { margin-bottom: var(--space-2); font-size: clamp(1.15rem, 2vw, 1.45rem); }
.notice p { max-width: 62ch; margin: 0; color: var(--color-text-muted); }
.notice-note { border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); }
.notice-success { border-color: color-mix(in srgb, var(--color-success) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-success-surface) 42%, var(--color-surface)); }
.notice-warning { border-color: color-mix(in srgb, var(--color-warning) 48%, var(--color-border)); background: color-mix(in srgb, var(--color-warning-surface) 45%, var(--color-surface)); }
.notice-legal { border-color: var(--color-border-strong); background: var(--color-surface-subtle); }
.boundary-layout { display: grid; gap: clamp(2.5rem, 7vw, 6rem); align-items: start; }
.boundary-intro { position: relative; }
.boundary-intro .lead { max-width: 38rem; }
.boundary-motif { width: min(22rem, 78vw); height: 7rem; position: relative; margin-top: var(--space-6); overflow: hidden; border-radius: 999px 999px var(--radius-large) var(--radius-large); background: var(--gradient-warm); }
.boundary-motif span { position: absolute; width: 70%; height: 1rem; left: -8%; border-radius: 999px; background: var(--color-primary); transform: rotate(-8deg); }
.boundary-motif span:nth-child(1) { top: 1.2rem; }
.boundary-motif span:nth-child(2) { top: 3rem; left: 18%; background: var(--color-accent-yellow); }
.boundary-motif span:nth-child(3) { top: 4.8rem; left: 42%; background: var(--color-accent-blue); }
.boundary-content { border-top: 1px solid var(--color-border-strong); }
.boundary-content article { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); border-bottom: 1px solid var(--color-border); padding-block: var(--space-5); }
.boundary-content article p { max-width: 62ch; margin: 0; color: var(--color-text-muted); }
.boundary-icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; color: #123044; background: var(--color-accent-yellow); font-weight: 700; }
.boundary-emergency { margin-top: var(--space-5); border-left: .18rem solid var(--color-accent-yellow); padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--color-surface-sun) 42%, transparent); }
.boundary-emergency p { max-width: 62ch; margin: .2rem 0 0; color: var(--color-text-muted); }
.prose { font-size: 1.08rem; }
.prose p { max-width: 68ch; }

.contact-layout { display: grid; gap: clamp(2.5rem, 7vw, 6rem); align-items: start; }
.contact-aside { position: sticky; z-index: 0; top: calc(var(--header-height) + 2rem); }
.contact-aside-media { margin-top: var(--space-6); border-radius: var(--radius-large); overflow: hidden; background: var(--gradient-warm); }
.contact-aside-media img { width: 100%; }
.contact-form { position: relative; z-index: 1; isolation: isolate; display: grid; gap: var(--space-4); border-radius: var(--radius-large); padding: clamp(1.25rem, 3vw, 2rem); background: var(--color-surface); box-shadow: var(--shadow-small); }
.field-error { color: var(--color-danger); font-size: .9rem; }
.privacy-note { border-left: .2rem solid var(--color-accent-yellow); padding-left: var(--space-4); color: var(--color-text-muted); font-size: .92rem; }

.emergency-footer { border-bottom: 1px solid rgb(255 255 255 / .16); padding-block: var(--space-5); color: #d9e7e8; background: #0d2c40; }
.emergency-footer .container { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; }
.emergency-footer strong { color: #ffd46a; font-size: 1.4rem; }
.emergency-footer p { margin: 0; }
.emergency-footer a { color: #fff; }
.site-footer { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-5); color: #c8d7da; background: #0a2334; }
.site-footer::after { content: ""; position: absolute; width: min(50rem, 70vw); height: 17rem; right: 0; bottom: -2rem; background: url("../visuals/backgrounds/footer-bridge.svg") center / contain no-repeat; opacity: .62; pointer-events: none; }
.footer-grid, .footer-bottom { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: var(--space-6); }
.footer-brand { max-width: 22rem; }
.footer-brand img { width: 12rem; margin-bottom: var(--space-4); filter: brightness(1.65); }
.site-footer h2 { margin-bottom: var(--space-3); color: #fff; font-size: .95rem; }
.site-footer a { display: block; width: fit-content; padding-block: .28rem; color: #c8d7da; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); border-top: 1px solid rgb(255 255 255 / .16); padding-top: var(--space-4); font-size: .85rem; }

.auth-shell, .booking-shell { min-height: calc(100vh - var(--header-height)); padding-block: clamp(2.5rem, 6vw, 6rem); background: var(--gradient-hero); }
.auth-layout { display: grid; gap: var(--space-7); align-items: stretch; }
.auth-intro { position: relative; overflow: hidden; min-height: 24rem; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--radius-large); padding: clamp(1.8rem, 5vw, 3.5rem); color: #f4f7f4; background: var(--gradient-deep); }
.auth-intro h1, .auth-intro .eyebrow { color: #f4f7f4; }
.auth-intro p { max-width: 32rem; color: #d6e2e4; }
.auth-intro::before { content: ""; position: absolute; inset: 0; background: url("../visuals/services/counselling-space.svg") top right / 68% auto no-repeat; opacity: .38; }
.auth-intro > * { position: relative; z-index: 1; }
.auth-panel { width: auto; margin: 0; align-self: stretch; padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--shadow-small); }
.auth-panel form, .booking-panel form { display: grid; gap: var(--space-5); }
.auth-panel > p:last-child { margin-top: var(--space-6); }
.auth-panel form .form-grid { border-block: 1px solid var(--color-border); padding-block: var(--space-5); }
.auth-panel .confirm { border-radius: var(--radius-medium); padding: var(--space-3); background: var(--color-surface-subtle); }
.auth-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-6); }
.auth-progress span { height: .28rem; border-radius: 1rem; background: var(--color-border); }
.auth-progress span:first-child, .auth-progress span:nth-child(2) { background: var(--color-accent-blue); }
.status-layout { display: grid; gap: var(--space-6); align-items: stretch; }
.status-visual { display: none; overflow: hidden; border-radius: var(--radius-large); background: var(--gradient-deep); }
.status-visual img { width: 100%; height: 100%; object-fit: cover; }
.status-card { width: auto; max-width: none; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.booking-shell > .container-narrow { width: min(calc(100% - 2rem), 68rem); }
.booking-shell .portal-header { position: relative; overflow: hidden; min-height: 18rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; border-radius: var(--radius-large); padding: clamp(1.5rem, 5vw, 3rem); color: #f4f7f4; background: var(--gradient-deep); }
.booking-shell .portal-header::after { content: ""; position: absolute; width: 52%; height: 110%; right: -2%; top: -5%; background: url("../visuals/portal/appointment-flow.svg") center / contain no-repeat; opacity: .55; }
.booking-shell .portal-header > * { position: relative; z-index: 1; max-width: 53%; }
.booking-shell .portal-header h1, .booking-shell .portal-header .eyebrow { color: #f4f7f4; }
.booking-shell .portal-header .lead { color: #d6e2e4; }
.booking-panel { width: auto; margin: var(--space-6) 0 0; box-shadow: var(--shadow-small); }

.portal-header { display: flex; justify-content: space-between; gap: var(--space-5); align-items: end; padding-block: var(--space-7) var(--space-5); }
.portal-header h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
.portal-navigation { position: sticky; z-index: 20; top: var(--header-height); border-block: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 94%, transparent); backdrop-filter: blur(.8rem); }
.portal-navigation ul { display: flex; gap: var(--space-1); margin: 0; padding: var(--space-2) 0; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.portal-navigation a { min-height: 2.65rem; display: flex; align-items: center; border-radius: var(--radius-small); padding: .45rem .72rem; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.portal-navigation a[aria-current="page"] { color: var(--color-primary); background: var(--color-surface-subtle); font-weight: 630; }
.portal-main { padding-block: var(--space-7) var(--space-9); }
.portal-main .container-narrow { width: min(calc(100% - 2rem), 68rem); }
.portal-overview { display: grid; gap: var(--space-7); }
.appointment-primary { position: relative; overflow: hidden; border-radius: var(--radius-large); padding: clamp(1.5rem, 5vw, 3rem); background: var(--gradient-warm); box-shadow: var(--shadow-small); }
.appointment-primary::after { content: ""; position: absolute; width: 45%; height: 100%; right: -2%; top: 0; background: url("../visuals/portal/appointment-flow.svg") center / contain no-repeat; opacity: .5; pointer-events: none; }
.appointment-primary > * { position: relative; z-index: 1; max-width: 58%; }
.quick-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.appointment-list { display: grid; gap: 0; }
.appointment-list article { display: grid; gap: var(--space-2); border-bottom: 1px solid var(--color-border); padding-block: var(--space-5); }
.data-list { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: var(--space-3) var(--space-5); border-block: 1px solid var(--color-border); padding-block: var(--space-5); }
.data-list dt { color: var(--color-text-muted); }
.data-list dd { margin: 0; }

@keyframes reveal { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes reveal-visual { from { opacity: 0; transform: translate(1rem, .75rem); } }

/* Progressive enhancement: the script adds both classes only after observer setup. */
.motion-ready .reveal-pending[data-reveal] { opacity: 0; transform: translateY(var(--motion-distance-medium)); }
.motion-ready .reveal-pending[data-reveal="soft"] { transform: scale(.985); }
.motion-ready [data-reveal] { transition: opacity var(--motion-duration-slow) var(--motion-ease-enter), transform var(--motion-duration-slow) var(--motion-ease-enter); }
.motion-ready .reveal-visible[data-reveal] { opacity: 1; transform: none; }
.motion-ready .reveal-pending[data-reveal="stagger"] > * { opacity: 0; transform: translateY(var(--motion-distance-small)); }
.motion-ready .reveal-visible[data-reveal="stagger"] > * { opacity: 1; transform: none; transition: opacity var(--motion-duration-normal) var(--motion-ease-enter), transform var(--motion-duration-normal) var(--motion-ease-enter); }
.motion-ready .reveal-visible[data-reveal="stagger"] > :nth-child(2) { transition-delay: 80ms; }
.motion-ready .reveal-visible[data-reveal="stagger"] > :nth-child(3) { transition-delay: 160ms; }
.motion-ready .reveal-visible[data-reveal="stagger"] > :nth-child(4) { transition-delay: 240ms; }
.motion-ready .reveal-visible[data-reveal="stagger"] > :nth-child(5) { transition-delay: 320ms; }
.motion-ready .reveal-visible[data-reveal="stagger"] > :nth-child(n+6) { transition-delay: 400ms; }

@media (min-width: 42rem) {
  .trust-band-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.4fr repeat(3, minmax(8rem, 1fr)); }
}
@media (min-width: 48rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(21rem, .98fr); }
  .hero-visual { min-height: clamp(28rem, 46vw, 38rem); }
  .card-grid.two, .pricing-grid, .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid:not(.two) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .auth-layout { grid-template-columns: minmax(18rem, .9fr) minmax(25rem, 1.1fr); }
  .status-layout { grid-template-columns: minmax(18rem, .9fr) minmax(25rem, 1.1fr); }
  .status-visual { display: block; }
  .boundary-layout { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .page-about .prose { position: sticky; top: calc(var(--header-height) + 2rem); }
}
@media (min-width: 62rem) { .trust-band-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); } .highlight { grid-template-columns: 1fr auto; } }
@media (min-width: 74rem) {
  .menu-toggle { display: none; }
  .main-nav { visibility: visible; position: static; z-index: auto; contain: none; overflow: visible; display: flex; align-items: center; gap: var(--space-2); background: transparent; opacity: 1; transition: none; }
  .nav-drawer { width: auto; height: auto; overflow: visible; display: flex; flex-direction: row; align-items: center; gap: var(--space-2); padding: 0; background: transparent; box-shadow: none; transform: none; transition: none; }
  .nav-drawer-header, .nav-utilities { display: none; }
  .nav-links { display: flex; align-items: center; gap: 0; }
  .nav-actions { display: flex; align-items: center; margin: 0; }
  .nav-group { position: relative; }
  .nav-submenu { position: absolute; top: calc(100% + .45rem); left: 0; min-width: 15rem; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface-elevated); box-shadow: var(--shadow-small); }
  .main-nav .button { min-height: 2.55rem; padding: .55rem .85rem; }
  .header-tools { order: 2; }
  body.menu-open { overflow: auto; }
}
@media (max-width: 47.99rem) { .contact-aside { position: static; } }
@media (max-width: 73.99rem) { .site-header { backdrop-filter: none; } .header-tools { display: none; } .menu-toggle { margin-left: auto; } }
@media (max-width: 30rem) {
  .header-inner { gap: var(--space-1); }
  .brand { width: 8.25rem; }
  .language-current-long { display: none; }
  .hero-caption { right: 0; max-width: 13.5rem; }
  .emergency-footer .container { grid-template-columns: auto 1fr; }
  .emergency-footer a { grid-column: 2; }
  .appointment-primary::after { opacity: .16; width: 80%; }
  .appointment-primary > * { max-width: 100%; }
  .booking-shell .portal-header::after { opacity: .18; width: 90%; }
  .booking-shell .portal-header > * { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero-copy, .hero-visual, .alert, .status { animation: none; }
  .hero-visual { transform: none !important; will-change: auto; }
  .motion-ready [data-reveal], .motion-ready [data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .service-card:hover, .service-card:hover .service-card-visual, .button:hover, button:hover { transform: none; }
  .faq-answer { transition: none; }
  .main-nav, .nav-drawer { transition: none; }
}

/* Premium glass edge: bright upper rim, coloured side reflection and a quiet lower edge. */
.trust-band-inner,
.hero-visual img,
.service-card,
.highlight,
.notice,
.contact-aside-media,
.contact-form,
.auth-intro,
.auth-panel,
.booking-shell .portal-header,
.booking-panel,
.appointment-primary {
  border: 1px solid var(--glass-edge-low);
  box-shadow: var(--glass-card-shadow);
}
.pricing-grid article {
  border-right: 1px solid var(--glass-edge-side);
  border-bottom: 1px solid var(--glass-edge-low);
  border-left: 1px solid color-mix(in srgb, var(--glass-edge-top) 72%, transparent);
  box-shadow: var(--glass-card-shadow-quiet);
}
.service-card:hover {
  box-shadow: var(--glass-card-shadow), 0 1.2rem 2.8rem rgb(19 54 73 / .14);
}