/* public/assets/css/site.css — public website styles.
   Every colour, font, size, radius and shadow comes from theme variables (assets/generated/theme-{version}.css,
   loaded after this file). The :root values below are only fallbacks (Dark Matte) for a site without a published theme.
   Per-section / per-banner values arrive as --sec-* / --b-* variables from generated page/banner CSS. */

:root {
    --color-bg: #080B10; --color-bg-secondary: #101720; --color-surface: #151F2B; --color-elevated: #1B2735;
    --color-primary: #00D4C7; --color-primary-rgb: 0 212 199; --color-secondary: #398BFF; --color-highlight: #8B7CFF;
    --color-text: #F5F7FA; --color-text-muted: #9BA9B9; --color-heading: #F5F7FA; --color-border: rgba(255,255,255,0.09);
    --color-button-bg: #00D4C7; --color-button-text: #061014; --color-success: #2FD27A; --color-warning: #F5B544;
    --color-danger: #FF5C6C; --color-emergency: #FF4757;
    --gradient-primary: linear-gradient(135deg,#00D4C7 0%,#398BFF 100%); --gradient-surface: linear-gradient(180deg,#151F2B 0%,#101720 100%);
    --gradient-hero-overlay: linear-gradient(90deg,rgba(8,11,16,.92) 0%,rgba(8,11,16,.35) 100%);
    --font-heading-family: system-ui,-apple-system,"Segoe UI",sans-serif; --font-body-family: system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-size-base: 1rem; --font-size-h1: 4rem; --font-size-h2: 2.75rem; --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-small: .875rem;
    --font-weight-heading: 600; --font-weight-body: 400; --font-line-height-heading: 1.15; --font-line-height-body: 1.65; --font-letter-spacing-heading: -0.02em;
    --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-button: 999px;
    --shadow-card: 0 12px 32px -12px rgba(0,0,0,.55); --shadow-elevated: 0 24px 60px -20px rgba(0,0,0,.7); --shadow-glow: 0 0 40px rgba(0,212,199,.25);
    --glass-blur: 18px; --glass-opacity: .55;
    --layout-container: 1240px; --layout-container-wide: 1440px; --layout-gutter: 24px; --layout-section-spacing: 7rem; --header-height: 84px;
}
@media (max-width: 1199.98px) { :root { --font-size-h1: 3rem; --font-size-h2: 2.25rem; --layout-section-spacing: 5rem; } }
@media (max-width: 767.98px) { :root { --font-size-h1: 2.25rem; --font-size-h2: 1.75rem; --font-size-h3: 1.375rem; --layout-section-spacing: 3.5rem; --layout-gutter: 16px; --header-height: 68px; } }

/* ---- Base ------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 1rem); }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body-family); font-size: var(--font-size-base);
    font-weight: var(--font-weight-body); line-height: var(--font-line-height-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading-family); font-weight: var(--font-weight-heading); line-height: var(--font-line-height-heading);
    letter-spacing: var(--font-letter-spacing-heading); color: var(--sec-heading, var(--color-heading)); margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: var(--sec-accent, var(--color-primary)); text-underline-offset: 3px; }
img, video { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--layout-container); margin: 0 auto; padding: 0 var(--layout-gutter); }
.narrow { max-width: 820px; }
.muted { color: var(--color-text-muted); }
.visually-hidden, .hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; padding: .6rem 1rem; background: var(--color-primary); color: var(--color-button-text); border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }
.preview-bar { position: sticky; top: 0; z-index: 999; padding: .45rem 1rem; text-align: center; font-size: var(--font-size-small); font-weight: 600; background: var(--color-warning); color: #111; }
.size-display { font-size: calc(var(--font-size-h1) * 1.2); } .size-h1 { font-size: var(--font-size-h1); } .size-h2 { font-size: var(--font-size-h2); }
.size-h3 { font-size: var(--font-size-h3); } .size-h4 { font-size: var(--font-size-h4); }
.eyebrow { color: var(--sec-accent, var(--color-primary)); text-transform: uppercase; letter-spacing: .14em; font-size: var(--font-size-small); font-weight: 600; margin-bottom: .75rem; }

/* ---- Buttons (look comes from theme variant classes .btn-v-*) ----------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .85rem 1.6rem; font: inherit; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-button); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: .55rem 1.1rem; font-size: var(--font-size-small); }
.btn-v-primary { background: var(--color-button-bg); color: var(--color-button-text); }
.btn-v-outline { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-v-ghost { background: transparent; color: var(--color-primary); }

/* ---- Header -------------------------------------------------------------------------------- */
.topbar { background: var(--color-bg-secondary); font-size: var(--font-size-small); border-bottom: 1px solid var(--color-border); }
.topbar-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: .4rem; padding-bottom: .4rem; }
.topbar-item { color: var(--color-text-muted); text-decoration: none; }
.is-emergency, .is-emergency a { color: var(--color-emergency); font-weight: 600; }
.site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg, var(--color-bg)); transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: var(--header-bg-scrolled, var(--color-bg)); border-bottom: var(--header-border-scrolled, 1px solid var(--color-border)); }
.header--glass.is-scrolled, .header--transparent.is-scrolled { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-height); }
.brand { display: inline-flex; align-items: center; color: var(--color-heading); text-decoration: none; font-family: var(--font-heading-family); font-weight: 700; font-size: 1.25rem; }
.brand-logo { max-height: calc(var(--header-height) - 28px); width: auto; }
.main-nav { margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: block; padding: .6rem .8rem; color: var(--color-text); text-decoration: none; font-weight: 500; border-radius: var(--radius-sm); }
.nav-link:hover { color: var(--color-primary); }
.nav-toggle { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; padding: .3rem; }
.nav-sub { list-style: none; margin: 0; padding: .5rem; position: absolute; top: 100%; left: 0; min-width: 240px; display: none; flex-direction: column; align-items: stretch;
    background: var(--color-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); }
.nav-sub .nav-sub { top: 0; left: 100%; }
.nav-item.has-children:hover > .nav-sub, .nav-item.has-children:focus-within > .nav-sub, .nav-item.is-open > .nav-sub { display: flex; }
.nav-item.is-mega > .nav-sub { min-width: 520px; display: none; flex-flow: row wrap; }
.nav-item.is-mega:hover > .nav-sub, .nav-item.is-mega:focus-within > .nav-sub, .nav-item.is-mega.is-open > .nav-sub { display: flex; }
.nav-item.is-mega > .nav-sub > .nav-item { width: 50%; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.emergency-badge { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-emergency); font-weight: 700; text-decoration: none; font-size: var(--font-size-small); }
.pulse { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-emergency); box-shadow: 0 0 0 0 var(--color-emergency); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.menu-button { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; background: var(--color-text); margin: 0 auto; position: relative; content: ""; }
.menu-icon::before { position: absolute; top: -6px; } .menu-icon::after { position: absolute; top: 6px; }
.mobile-menu { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: 1rem var(--layout-gutter) 2rem; }
.mobile-menu .nav-list { flex-direction: column; align-items: stretch; }
.mobile-menu .nav-item { flex-wrap: wrap; }
.mobile-menu .nav-sub { position: static; display: none; box-shadow: none; width: 100%; min-width: 0; }
.mobile-menu .nav-item.is-open > .nav-sub { display: flex; }
.mobile-menu-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.menu--fullscreen { position: fixed; inset: var(--header-height) 0 0 0; overflow-y: auto; }
.menu--drawer { position: fixed; top: var(--header-height); right: 0; bottom: 0; width: min(360px, 90vw); overflow-y: auto; box-shadow: var(--shadow-elevated); }
@media (max-width: 1199.98px) {
    .main-nav, .header-cta { display: none; }
    .menu-button { display: inline-block; }
    .header-actions { margin-left: auto; }
}

/* ---- Sections ------------------------------------------------------------------------------- */
.sec { position: relative; padding: var(--sec-pt, var(--layout-section-spacing)) 0 var(--sec-pb, var(--layout-section-spacing));
    color: var(--sec-text, var(--color-text)); text-align: var(--sec-align, inherit); background: var(--sec-bg, transparent); }
.sec.bg--image { background-image: var(--sec-bg-image); background-size: cover; background-position: center; }
.sec[data-parallax] { background-attachment: fixed; }
.sec-overlay { position: absolute; inset: 0; background: var(--sec-overlay, #000); opacity: var(--sec-overlay-o, .5); pointer-events: none; }
.sec-bg-video, .sec-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec-inner { position: relative; }
.container--narrow .sec-inner { max-width: 820px; } .container--wide .sec-inner { max-width: var(--layout-container-wide); }
.container--full .sec-inner { max-width: none; }
.align--center { --sec-align: center; } .align--right { --sec-align: right; } .align--left { --sec-align: left; }
.sec-head { max-width: 760px; margin: 0 0 2.5rem; }
.align--center .sec-head { margin-left: auto; margin-right: auto; }
.sec-intro { color: var(--color-text-muted); font-size: 1.1rem; }
.sec-cta { margin-top: 2.5rem; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(var(--sec-cols, 3), minmax(0, 1fr)); gap: 1.5rem; text-align: left; }
@media (max-width: 1199.98px) { .grid { grid-template-columns: repeat(min(var(--sec-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .grid { grid-template-columns: repeat(var(--sec-cols-m, 1), minmax(0, 1fr)); } }
.grid.is-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: .5rem; }
.grid.is-carousel > * { flex: 0 0 calc((100% - 1.5rem * (var(--sec-cols, 3) - 1)) / var(--sec-cols, 3)); scroll-snap-align: start; min-width: 240px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split.align-start { align-items: start; }
.layout--image-right .split-media { order: 2; }
@media (max-width: 767.98px) { .split { grid-template-columns: 1fr; } .layout--image-right .split-media { order: 0; } }
.rounded img, img.rounded { border-radius: var(--radius-lg); }
.vis-hide-desktop { } .vis-hide-tablet { } .vis-hide-mobile { }
@media (min-width: 1200px) { .vis-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .vis-hide-tablet { display: none !important; } }
@media (max-width: 767.98px) { .vis-hide-mobile { display: none !important; } }

/* ---- Cards (look from theme variants .card-v-*; default = surface) ------------------------------ */
.card { display: block; height: 100%; background: var(--color-surface); color: var(--color-text); text-decoration: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.cards--glass .card { background: rgb(21 31 43 / var(--glass-opacity)); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.cards--outline .card { background: transparent; box-shadow: none; } .cards--elevated .card { background: var(--color-elevated); box-shadow: var(--shadow-elevated); }
.card-media-wrap img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-icon { padding: 1.5rem 1.5rem 0; font-size: 2rem; color: var(--sec-accent, var(--color-primary)); }
.card-icon img { width: 56px; height: 56px; object-fit: contain; }
.card-body { padding: 1.5rem; }
.card-title { font-size: var(--font-size-h4); margin-bottom: .4rem; } .card-title a { color: inherit; text-decoration: none; }
.card-meta { font-size: var(--font-size-small); color: var(--sec-accent, var(--color-primary)); margin-bottom: .4rem; }
.card-text { color: var(--color-text-muted); margin-bottom: .5rem; } .small { font-size: var(--font-size-small); }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.doctor-photo img, .doctor-initials { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.doctor-initials { display: flex; align-items: center; justify-content: center; font-size: 4rem; background: var(--gradient-surface); color: var(--color-text-muted); }
.price { font-size: 1.4rem; margin: .5rem 0; } .price del { color: var(--color-text-muted); font-size: 1rem; }
.check-list { list-style: none; padding: 0; margin: .5rem 0 0; } .check-list li { padding-left: 1.5rem; position: relative; margin-bottom: .3rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); }
.stat { text-align: center; padding: 2rem 1rem; } .stat-value { font-family: var(--font-heading-family); font-size: var(--font-size-h2); color: var(--sec-heading, var(--color-heading)); margin: 0; }
.stat-label { color: var(--color-text-muted); margin: 0; }
.testimonial blockquote { margin: 0 0 1rem; font-size: 1.05rem; } .rating { color: var(--color-warning); letter-spacing: .1em; }
.testimonial { padding: 1.5rem; } .testimonial-author { display: flex; align-items: center; gap: .75rem; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.faq-list { max-width: 860px; margin: 0 auto; text-align: left; }
.faq { border-bottom: 1px solid var(--color-border); padding: 1rem 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; }
.faq summary::after { content: "+"; float: right; color: var(--color-primary); } .faq[open] summary::after { content: "–"; }
.faq-answer { padding-top: .75rem; color: var(--color-text-muted); }
.gallery-item { margin: 0; } .gallery-item img { border-radius: var(--radius-md); width: 100%; aspect-ratio: 1; object-fit: cover; }
.is-masonry { grid-auto-flow: dense; } .gallery-item figcaption { font-size: var(--font-size-small); color: var(--color-text-muted); margin-top: .4rem; }
.video-frame video { width: 100%; border-radius: var(--radius-lg); }
.logo-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: center; }
.logo-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 140px; }
.logo-img { max-height: 56px; width: auto; filter: grayscale(1) brightness(1.6); opacity: .85; transition: filter .2s; } .logo-item:hover .logo-img { filter: none; opacity: 1; }
.badge { font-size: .75rem; padding: .15rem .5rem; border-radius: var(--radius-button); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.cta-band { padding: 3rem; border-radius: var(--radius-lg); background: var(--sec-bg, var(--gradient-primary)); text-align: center; }
.cta-band .sec-title, .cta-band .sec-intro { color: inherit; } .cta-buttons { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.prose { max-width: 75ch; } .prose h2, .prose h3 { margin-top: 1.5em; } .prose img { border-radius: var(--radius-md); margin: 1.5rem 0; }
.prose blockquote { border-left: 3px solid var(--color-primary); margin: 1.5rem 0; padding-left: 1rem; color: var(--color-text-muted); }

/* ---- Hero slider ---------------------------------------------------------------------------------- */
.sec--hero { padding: 0; } .sec--hero .sec-inner { max-width: none; padding: 0; }
.hero-slider { position: relative; overflow: hidden; }
.hero-slide { position: relative; min-height: var(--b-h, 88svh); display: flex; align-items: center; }
.hero-slider[data-ready] .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.hero-slider[data-ready] .hero-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.hero-media { position: absolute; inset: 0; }
.hero-media picture, .hero-bg-img, .hero-video, .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--b-bg-pos, center); }
.hero-bg-img { transform: scale(var(--b-bg-scale, 1)); }
.ken-burns.is-active .hero-bg-img { animation: kenburns 14s ease-out both; } @keyframes kenburns { to { transform: scale(calc(var(--b-bg-scale, 1) + .08)); } }
.hero-overlay { position: absolute; inset: 0; background: var(--b-overlay, #080B10); opacity: var(--b-overlay-o, .55); }
.overlay--left .hero-overlay { background: var(--gradient-hero-overlay); opacity: 1; }
.overlay--bottom .hero-overlay { background: linear-gradient(0deg, var(--b-overlay, #080B10) 0%, transparent 70%); opacity: 1; }
.overlay--radial .hero-overlay { background: radial-gradient(circle, transparent 20%, var(--b-overlay, #080B10) 100%); opacity: var(--b-overlay-o, .8); }
.hero-content { position: relative; z-index: 2; display: flex; gap: 3rem; align-items: center; padding-top: 4rem; padding-bottom: 5rem; }
.hero-text { max-width: var(--b-maxw, 640px); }
.pos--center, .pos--top-center, .pos--bottom-center { justify-content: center; } .pos--center-right .hero-content, .pos--top-right .hero-content, .pos--bottom-right .hero-content { justify-content: flex-end; }
.pos--center .hero-content, .pos--top-center .hero-content, .pos--bottom-center .hero-content { justify-content: center; }
.pos--top-left, .pos--top-center, .pos--top-right { align-items: flex-start; } .pos--bottom-left, .pos--bottom-center, .pos--bottom-right { align-items: flex-end; }
.hero-slide.align--center .hero-text { text-align: center; } .hero-slide.align--right .hero-text { text-align: right; }
.hero-subtitle { color: var(--b-sub, var(--color-primary)); font-weight: 600; letter-spacing: .08em; } .hero-subtitle.is-upper { text-transform: uppercase; }
.hero-title { color: var(--b-heading, var(--color-heading)); font-weight: var(--b-heading-weight, var(--font-weight-heading)); letter-spacing: var(--b-heading-ls, var(--font-letter-spacing-heading)); }
.hero-description { color: var(--b-text, var(--color-text)); font-size: 1.15rem; max-width: 56ch; }
.hero-slide.align--center .hero-description { margin-left: auto; margin-right: auto; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .hero-slide.align--center .hero-buttons { justify-content: center; }
.hero-foreground { flex: 0 0 40%; } .layout--split-right .hero-content { flex-direction: row-reverse; }
.hero-controls { position: absolute; z-index: 3; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: flex; gap: .5rem; align-items: center; }
.hero-controls button { background: rgb(0 0 0 / .4); color: #fff; border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; min-width: 36px; height: 36px; cursor: pointer; }
.hero-dots { display: flex; gap: .4rem; } .hero-dot { width: 10px; min-width: 10px !important; height: 10px !important; padding: 0; } .hero-dot.is-active { background: var(--color-primary) !important; }
@media (max-width: 767.98px) {
    .hero-foreground { display: none; }
    .pos-m--center .hero-content, .pos-m--bottom-center .hero-content, .pos-m--top-center .hero-content { justify-content: center; }
    .pos-m--bottom-left, .pos-m--bottom-center, .pos-m--bottom-right { align-items: flex-end; }
    .align-m--center .hero-text { text-align: center; } .align-m--left .hero-text { text-align: left; }
    .hide-desc-m .hero-description { display: none; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .pos-t--center .hero-content { justify-content: center; } .align-t--center .hero-text { text-align: center; } .hide-desc-t .hero-description { display: none; }
}

/* ---- Page hero, detail pages ----------------------------------------------------------------------- */
.page-hero { padding: 3rem 0 2rem; background: var(--gradient-surface); border-bottom: 1px solid var(--color-border); }
.page-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.page-hero-img { border-radius: var(--radius-lg); max-height: 420px; width: 100%; object-fit: cover; }
@media (max-width: 767.98px) { .page-hero-grid { grid-template-columns: 1fr; } }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.25rem; font-size: var(--font-size-small); color: var(--color-text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; } .breadcrumbs a { color: var(--color-text-muted); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.detail-side { display: grid; gap: 1.25rem; position: sticky; top: calc(var(--header-height) + 1rem); }
@media (max-width: 991.98px) { .detail-grid { grid-template-columns: 1fr; } .detail-side { position: static; } }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; } .facts dt { color: var(--color-text-muted); } .facts dd { margin: 0; }
.schedule { width: 100%; border-collapse: collapse; } .schedule th, .schedule td { text-align: left; padding: .4rem 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.link-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .link-list a { display: inline-block; padding: .4rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-button); text-decoration: none; }
.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .tag-list li { padding: .2rem .7rem; border-radius: var(--radius-button); background: var(--color-elevated); font-size: var(--font-size-small); }
.author-line { color: var(--color-text-muted); }
.model-viewer { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-elevated); margin-top: 1.5rem; }
.model-viewer picture, .model-viewer picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.model-viewer.is-3d picture { visibility: hidden; }
.model-viewer.can-orbit { cursor: grab; touch-action: pan-y; } .model-viewer.can-orbit:active { cursor: grabbing; }
.model-viewer:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.model-viewer.is-loading::after { content: "Loading 3D view…"; position: absolute; left: 1rem; bottom: 1rem; padding: .35rem .8rem; border-radius: var(--radius-button);
    background: rgb(0 0 0 / .55); color: #fff; font-size: var(--font-size-small); }
.model-viewer-start { position: absolute; right: 1rem; bottom: 1rem; padding: .55rem 1.1rem; border: 0; border-radius: var(--radius-button); cursor: pointer;
    background: var(--color-primary); color: var(--color-button-text); font: inherit; font-weight: 600; }

/* ---- Forms ------------------------------------------------------------------------------------------ */
.site-form { padding: 1.5rem; text-align: left; } .site-form .card-body { padding: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 767.98px) { .form-grid { grid-template-columns: 1fr; } }
.form-row { margin-bottom: 1rem; } .form-row label { display: block; font-size: var(--font-size-small); margin-bottom: .35rem; color: var(--color-text-muted); }
.site-form input, .site-form select, .site-form textarea, .newsletter-form input { width: 100%; padding: .75rem .9rem; font: inherit; color: var(--color-text);
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.site-form input:focus, .site-form select:focus, .site-form textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .25); }
.site-form .is-invalid { border-color: var(--color-danger); } .field-error { color: var(--color-danger); font-size: var(--font-size-small); margin-top: .3rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--font-size-small); margin-bottom: 1rem; } .check input { width: auto; margin-top: .2rem; }
.form-note { font-size: var(--font-size-small); color: var(--color-text-muted); }
.form-status { min-height: 1.5rem; margin-bottom: .75rem; font-size: var(--font-size-small); } .form-status.is-success { color: var(--color-success); } .form-status.is-error { color: var(--color-danger); }
.slot-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1rem; }
.slot-list button { padding: .35rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; }
.slot-list button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-button-text); } .slot-list button:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; text-align: left; } @media (max-width: 767.98px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-details { padding: 1.5rem; } .hours { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; } .hours dd { margin: 0; }
.map-frame { margin-top: 2rem; } .map-frame iframe { width: 100%; height: 380px; border: 0; border-radius: var(--radius-lg); }

/* ---- Footer ------------------------------------------------------------------------------------------- */
.site-footer { background: var(--color-bg-secondary); color: var(--color-text-muted); border-top: 1px solid var(--color-border); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; padding-top: 4rem; padding-bottom: 2rem; }
.footer-brand { font-family: var(--font-heading-family); font-size: 1.3rem; color: var(--color-heading); }
.footer-title { font-size: 1rem; color: var(--color-heading); margin-bottom: 1rem; }
.footer-links, .footer-contact, .footer-legal { list-style: none; padding: 0; margin: 0; } .footer-links li, .footer-contact li { margin-bottom: .5rem; }
.site-footer a { color: var(--color-text-muted); text-decoration: none; } .site-footer a:hover { color: var(--color-primary); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.5rem; border-top: 1px solid var(--color-border); font-size: var(--font-size-small); }
.footer-bottom p { margin: 0; } .footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.inline-field { display: flex; gap: .5rem; } .newsletter-form .form-status { margin-top: .5rem; }

/* ---- Motion: entrance animations are progressive (content visible without JS) -------------------------- */
/* html.js is set by head.js before the first paint; html.gsap once animations.js has taken over (it then sets
   every start state itself, so these CSS-fallback rules stop applying). */
.js:not(.gsap) [data-anim]:not(.is-in) [data-anim-child], .js:not(.gsap) [data-anim].anim-self:not(.is-in),
.js:not(.gsap) [data-anim-children]:not(.is-in) [data-anim-child] { opacity: 0; transform: translateY(24px); }
.js:not(.gsap) [data-anim] [data-anim-child], .js:not(.gsap) [data-anim].anim-self { transition: opacity .7s ease, transform .7s ease; }
html.smooth-scroll { scroll-behavior: smooth; }

/* Page loader (first page of a visit) and page-transition overlay. Both remove themselves even if a script fails. */
.site-loader { position: fixed; inset: 0; z-index: 9995; display: grid; place-items: center; background: var(--color-bg);
    transition: opacity .5s ease, visibility .5s; animation: layer-safety .5s ease 3.5s forwards; }
.site-loader.is-hidden { opacity: 0; visibility: hidden; }
.loader-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgb(var(--color-primary-rgb) / .2); border-top-color: var(--color-primary); animation: loader-spin .9s linear infinite; }
.loader-logo { animation: loader-pulse 1.4s ease-in-out infinite; } .loader-logo img { max-height: 64px; width: auto; }
.loader-logo .brand-name { font-family: var(--font-heading-family); font-size: 1.6rem; color: var(--color-heading); }
.loader-bar { width: min(240px, 60vw); height: 3px; border-radius: 3px; overflow: hidden; background: rgb(var(--color-primary-rgb) / .2); }
.loader-bar span { display: block; width: 40%; height: 100%; background: var(--color-primary); animation: loader-bar 1.1s ease-in-out infinite; }
.page-transition { position: fixed; inset: 0; z-index: 9990; background: var(--color-bg); pointer-events: none; animation: layer-safety .4s ease 2.5s forwards; }
.page-transition.pt-js { animation: none; }
.page-transition.is-done { visibility: hidden; }
@keyframes layer-safety { to { opacity: 0; visibility: hidden; } }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-pulse { 50% { transform: scale(1.08); opacity: .7; } }
@keyframes loader-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Cursor follower and card glare (animations.js, mouse only) */
.cursor-follower { position: fixed; left: 0; top: 0; z-index: 9999; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
    background: rgb(var(--color-primary-rgb) / .35); box-shadow: 0 0 18px rgb(var(--color-primary-rgb) / .6); opacity: 0; transition: opacity .2s, width .25s, height .25s, margin .25s, background .25s; }
.cursor-follower.is-visible { opacity: 1; }
.cursor-follower.is-active { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgb(var(--color-primary-rgb) / .15); }
.card.has-glare { position: relative; overflow: hidden; }
.card-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .18), transparent 60%); }
.card.has-glare:hover .card-glare { opacity: 1; }

/* 3D scenes (assets/js/three/): the canvas fades in after its first frame; fallback image otherwise */
.sec-scene, .hero-scene { pointer-events: none; overflow: hidden; }
.scene-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.scene-ready > .scene-canvas { opacity: 1; }
.scene-fallback-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js:not(.gsap) [data-anim] [data-anim-child], .js:not(.gsap) [data-anim].anim-self, .js:not(.gsap) [data-anim-children] [data-anim-child] { opacity: 1 !important; transform: none !important; }
    .sec[data-parallax] { background-attachment: scroll; }
}