/* ==========================================================================
   OI DENTAL CLINIC — shared stylesheet
   Single source of truth for typography, brightness, logo scale and layout.
   Every page links this file; no page redefines these values locally.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ---- surface -------------------------------------------------------- */
  --bg: #000;

  /* ---- typeface ------------------------------------------------------- */
  /* Neo-grotesk: circular bowl, straight tail on the Q. Greek + Latin. */
  --font-ui: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fw-display: 200;   /* large type only */
  --fw-light: 300;     /* everything else — never heavier */

  /* ---- brightness scale (black background) ---------------------------- */
  --text-active: #ffffff;
  --text-title: rgba(255, 255, 255, 0.92);
  --text-primary: rgba(255, 255, 255, 0.80);
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-nav: rgba(255, 255, 255, 0.72);
  --hairline: rgba(255, 255, 255, 0.20);

  /* ---- type scale ------------------------------------------------------
     The doctor's name anchors the identity block on About and Contact alike;
     --size-secondary is exactly 90% of it at every viewport, so DDS NYU reads
     as secondary through size alone and never through a drop in brightness.
     --size-location sits between the name and the details, keeping VOULA /
     NIKAIA clearly above the addresses beneath them at every viewport.      */
  --size-name: clamp(0.9rem, 1.665vw, 1.422rem);
  --size-secondary: clamp(0.81rem, 1.499vw, 1.28rem);
  --size-location: clamp(0.8rem, 1.16vw, 1.02rem);
  --size-display: clamp(1rem, 1.85vw, 1.56rem);
  --size-title: clamp(0.9rem, 1.65vw, 1.5rem);
  --size-heading: clamp(0.86rem, 1.3vw, 1.12rem);
  --size-subhead: clamp(0.83rem, 1.12vw, 1rem);
  --size-body: clamp(0.85rem, 1.05vw, 1rem);
  --size-detail: clamp(0.78rem, 0.95vw, 0.9rem); /* contact details — thin and discreet */
  --size-nav: clamp(0.58rem, 1vw, 0.82rem);
  --size-subnav: clamp(0.56rem, 0.9vw, 0.75rem);
  --size-micro: clamp(0.52rem, 0.78vw, 0.66rem);
  --size-input: 1rem; /* never below 16px: stops iOS zooming on focus */

  /* ---- tracking ------------------------------------------------------- */
  --track-title: 0.16em;
  --track-nav: 0.15em;
  --track-sub: 0.12em;
  --track-body: 0.02em;

  /* ---- logo — one definition, identical on every page and breakpoint --- */
  --logo-width: clamp(115px, 16vw, 190px);
  --logo-scale: 2.08;

  /* ---- rhythm --------------------------------------------------------- */
  --header-top: clamp(1.5rem, 4vh, 2.6rem);
  --header-gap: clamp(1.1rem, 2.6vh, 1.9rem);
  --page-pad-x: clamp(1.5rem, 6vw, 5rem);
  --page-pad-y: clamp(1.5rem, 5vw, 3.5rem);
  --footer-h: clamp(5.5rem, 10vh, 7.5rem);
  --measure: 68ch;

  /* measured at runtime — anchors the sticky section title */
  --header-h: 0px;
}

/* ==========================================================================
   BASE
   ========================================================================== */

html {
  background-color: #000;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

html, body { width: 100%; height: 100%; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-weight: var(--fw-light);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

img { max-width: 100%; }
::selection { background: rgba(255, 255, 255, 0.16); color: #fff; }

:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The wrapper is the scroll container; the body never scrolls. */
.wrapper {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  background: #000;
  padding-bottom: var(--footer-h);
}

/* ==========================================================================
   HEADER — logo + navigation. Identical composition on every page.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000;
}

/* Bridges the sub-pixel seam under the header: fractional scroll offsets on
   macOS would otherwise let a hairline of content show through. */
.site-header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2px;
  background: #000;
  pointer-events: none;
}

.top {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: calc(var(--header-top) + env(safe-area-inset-top, 0px));
  background: #000;
  overflow: hidden;
}

.logo-img {
  width: var(--logo-width);
  height: auto;
  display: block;
  transform: scale(var(--logo-scale));
  transform-origin: center center;
  mix-blend-mode: lighten;
}

/* ---- language switch ---------------------------------------------------
   Chrome, not navigation: it sits in the corner of the header, outside the
   nav's flex row, so the five main items keep their exact spacing. The
   current language is the brighter of the two but stays below the active
   nav item, so it never competes with it.
   ------------------------------------------------------------------------ */
.lang-switch {
  position: absolute;
  top: calc(var(--header-top) + env(safe-area-inset-top, 0px));
  right: var(--page-pad-x);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-link {
  font-family: var(--font-ui);
  font-size: var(--size-micro);
  font-weight: var(--fw-light);
  letter-spacing: var(--track-nav);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.42);
  transition: color 180ms ease;
}

.lang-link:hover { color: var(--text-active); }
.lang-link.is-current { color: var(--text-nav); }

.lang-link + .lang-link::before {
  content: '/';
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.22);
}

/* The switch arrives with the navigation, not before it. */
.home-intro-active .lang-switch,
.intro-replay .lang-switch { opacity: 0; }
.home-intro-active.intro-complete .lang-switch,
.intro-replay .lang-switch { animation: navFadeIn 1.95s ease 2.05s forwards; }

.site-nav {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(0.35rem, 1.5vw, 2rem);
  padding: var(--header-gap) var(--page-pad-x) calc(var(--header-gap) * 0.85);
  background: #000;
}

.nav-item { position: relative; }

.nav-link {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--size-nav);
  font-weight: var(--fw-light);
  letter-spacing: var(--track-nav);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-nav);
  cursor: pointer;
  transition: color 180ms ease;
}

.nav-link:hover { color: var(--text-active); }
.nav-link.is-active { color: var(--text-active); }

/* ---- submenu: opens directly under its parent, sharing its left edge ---- */
.dropdown {
  position: absolute;
  top: calc(100% + 0.95rem);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.35vh, 0.9rem);
  padding: 0 1.4rem 1.1rem 0;
  background: #000;
  z-index: 30;
}

.dropdown[hidden] { display: none; }

.dropdown-link {
  font-family: var(--font-ui);
  font-size: var(--size-subnav);
  font-weight: var(--fw-light);
  letter-spacing: var(--track-sub);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.74);
  transition: color 180ms ease;
}

.dropdown-link:hover { color: var(--text-active); }
.dropdown-link.is-active { color: var(--text-active); }

/* ---- one open state at a time ------------------------------------------
   A submenu and the page beneath it are two states of the same surface, never
   both at once. `display: none` takes the old content out of the render tree
   and out of layout entirely — it is closed, not covered by a higher z-index
   and not left sitting underneath the new selection. Closing the submenu
   mounts the page again, exactly as it was.
   ------------------------------------------------------------------------ */
.submenu-open .page-content { display: none; }

/* ==========================================================================
   PAGE CONTENT + TYPOGRAPHY
   ========================================================================== */

.page-content {
  padding: var(--page-pad-y) var(--page-pad-x) clamp(2rem, 6vh, 4rem);
  background: #000;
}

.panel-content {
  max-width: 1120px;
  margin: 0 auto;
}

.panel-content h1,
.page-title h1 {
  font-size: var(--size-title);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-title);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text-title);
}

.panel-content h2 {
  font-size: var(--size-heading);
  font-weight: var(--fw-light);
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-title);
  margin: clamp(1.5rem, 3.6vh, 2.3rem) 0 clamp(0.5rem, 1.4vh, 0.9rem);
}

.panel-content h3 {
  font-size: var(--size-subhead);
  font-weight: var(--fw-light);
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-title);
  margin: clamp(1.05rem, 2.6vh, 1.7rem) 0 clamp(0.35rem, 1vh, 0.6rem);
}

.panel-content p,
.panel-content li {
  font-size: var(--size-body);
  font-weight: var(--fw-light);
  line-height: 1.85;
  letter-spacing: var(--track-body);
  color: var(--text-primary);
  max-width: var(--measure);
}

.panel-content p { margin-bottom: clamp(0.6rem, 1.5vh, 1rem); }
.panel-content ul { list-style: none; margin-bottom: clamp(0.6rem, 1.5vh, 1rem); }
.panel-content li { padding-left: 1rem; }
.panel-content li::before { content: "— "; color: var(--text-secondary); }
.panel-content em { font-style: normal; color: var(--text-secondary); }

.panel-content a { color: inherit; }

.panel-divider {
  width: 30px;
  height: 1px;
  background: var(--hairline);
  margin: clamp(1rem, 3vh, 2rem) 0;
  border: 0;
}

/* Section title stays anchored under the header while the page scrolls. */
/* Full-bleed via negative margins — no ±100vw pseudo-element, so the
   scroll container never gains phantom horizontal width. */
.page-title {
  position: sticky;
  top: var(--header-h, 0px);
  z-index: 40;
  background: #000;
  margin: calc(-1 * var(--page-pad-y)) calc(-1 * var(--page-pad-x)) 0;
  padding: var(--page-pad-y) var(--page-pad-x) clamp(0.8rem, 2vh, 1.4rem);
}

.page-title h1,
.page-title .about-tagline { margin-bottom: 0; }

.page-title p {
  font-size: var(--size-subhead);
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  margin: 0.55rem 0 0;
}

/* ==========================================================================
   DOCTOR IDENTITY BLOCK — shared by About and Contact so they cannot drift.
   Name is the anchor; the credential is 10% smaller at identical brightness.
   ========================================================================== */

.identity { margin: 0; }

.identity .identity-name {
  font-size: var(--size-name);
  font-weight: var(--fw-display);
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-active);
  margin: 0 0 0.15rem;
  max-width: none;
}

.identity .identity-credential {
  font-size: var(--size-secondary);
  font-weight: var(--fw-display);
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-active); /* same brightness as the name — never faded */
  margin: 0;
  max-width: none;
}

/* About page only: name + credential 30% smaller than the shared identity block. */
.about-footer.identity .identity-name {
  font-size: calc(var(--size-name) * 0.7);
}

.about-footer.identity .identity-credential {
  font-size: calc(var(--size-secondary) * 0.7);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-content { max-width: 640px; }

.contact-content h3 {
  font-size: var(--size-location);
  font-weight: var(--fw-light);
  letter-spacing: 0.1em;
  color: var(--text-active);
  margin: clamp(1.2rem, 3vh, 1.9rem) 0 clamp(0.3rem, 0.9vh, 0.55rem);
}

/* One size for every supporting detail: address, phone, email, website. */
.contact-content .contact-detail {
  font-size: var(--size-detail);
  font-weight: var(--fw-light);
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin: 0 0 0.15rem;
  max-width: none;
}

.contact-content .contact-link,
.contact-content .map-link {
  display: inline-block;
  font-size: var(--size-detail);
  font-weight: var(--fw-light);
  line-height: 1.9;
  letter-spacing: 0.06em;
  /* The email and the domain are addresses, not labels: they are shown exactly
     as written. Set explicitly so no ancestor rule can uppercase them. */
  text-transform: none;
  text-decoration: none;
  color: var(--text-primary);
  transition: color 180ms ease;
}

/* Street addresses stay uppercase — they are labels, not addresses to type. */
.contact-content .map-link {
  text-transform: uppercase;
  word-break: break-word;
}
.contact-content .contact-link:hover,
.contact-content .map-link:hover { color: var(--text-active); }

/* Digits sit on one baseline, at one width — no per-character drift. */
.contact-number {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  white-space: nowrap;
  /* One baseline, one weight, no per-character drift: every digit is written
     by the same rule and nothing may offset an individual glyph at rest. */
  transform: none;
  vertical-align: baseline;
  font-size: var(--size-detail);
  font-weight: var(--fw-light);
  line-height: 1.9;
}

.contact-number > * {
  transform: none;
  vertical-align: baseline;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.social-links {
  display: flex;
  gap: 1.5rem;
  margin-top: clamp(0.9rem, 2.4vh, 1.4rem);
}

.social-link {
  font-size: var(--size-detail);
  font-weight: var(--fw-light);
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--text-primary); /* same readable white as every other detail */
  transition: color 180ms ease;
}

.social-link:hover { color: var(--text-active); }

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about-content { max-width: 760px; }

.about-tagline {
  font-size: var(--size-display);
  font-weight: var(--fw-display);
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--text-title);
  margin-bottom: clamp(1.1rem, 3vh, 1.8rem);
}

.about-intro {
  font-size: var(--size-body);
  font-weight: var(--fw-light);
  line-height: 1.9;
  letter-spacing: var(--track-body);
  color: var(--text-primary);
  max-width: var(--measure);
  margin-bottom: clamp(0.6rem, 1.5vh, 1rem);
}

.about-gallery-section { margin-top: clamp(1.8rem, 4.5vh, 3rem); }

.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.28rem, 1vw, 0.55rem);
}

.about-gallery-item {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.about-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(100%);
}

.about-footer { margin-top: clamp(1.9rem, 5vh, 3.2rem); }

/* ==========================================================================
   CASES — centred, complete, generous black around them. No rules, no crops.
   ========================================================================== */

.cases-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.4rem, 7vh, 4.5rem);
}

.case {
  width: min(74vw, 420px); /* mobile: ~74% of the viewport, never full bleed */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.6vh, 1.6rem);
  border: 0;
}

.case-media {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vh, 1.15rem);
}

/* Natural aspect ratio: the whole before/after is always visible. */
.case-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #000;
  border: 0;
}

.case-label {
  font-size: var(--size-micro);
  font-weight: var(--fw-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
}

@media (min-width: 600px) { .case { width: min(62vw, 480px); } }
@media (min-width: 900px) { .case { width: min(40vw, 520px); } }

/* ==========================================================================
   REQUEST FORM
   ========================================================================== */

.book-content { max-width: 640px; }
.book-form { margin: clamp(1.2rem, 3vh, 2rem) 0; }
.book-field { margin-bottom: clamp(1rem, 2.4vh, 1.4rem); }

.book-field input,
.book-field textarea,
.custom-select-trigger {
  width: 100%;
  min-height: 2.9rem; /* keeps the touch target generous */
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  outline: none;
  box-shadow: none;
  color: var(--text-active);
  font-family: var(--font-ui);
  font-size: var(--size-input);
  font-weight: var(--fw-light);
  line-height: 1.5;
  letter-spacing: 0.03em;
  padding: 0.35rem 0 0.85rem;
  -webkit-appearance: none;
  appearance: none;
  resize: none;
  transition: border-color 200ms ease;
}

.book-field textarea { min-height: 4.75rem; }

.book-field input::placeholder,
.book-field textarea::placeholder { color: var(--text-secondary); }

.book-field input:focus,
.book-field textarea:focus,
.custom-select-trigger:focus { border-bottom-color: rgba(255, 255, 255, 0.92); }

.custom-select-trigger {
  display: block;
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
}

.custom-select-trigger.selected { color: var(--text-active); }

.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 62%;
  background: #000;
  z-index: 50;
  padding: 0.4rem 0 0.6rem;
}

.custom-select-options[hidden] { display: none; }

.custom-select-option {
  font-size: var(--size-subnav);
  font-weight: var(--fw-light);
  letter-spacing: var(--track-sub);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  padding: 0.7rem 0;
  cursor: pointer;
  transition: color 180ms ease;
}

.custom-select-option:hover,
.custom-select-option:focus-visible { color: var(--text-active); }

.book-submit,
.request-btn {
  display: inline-block;
  margin-top: clamp(1rem, 2.6vh, 1.6rem);
  padding: 0.2rem 0;
  background: none;
  border: 0;
  font-family: var(--font-ui);
  font-size: var(--size-subhead);
  font-weight: var(--fw-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 180ms ease;
}

.book-submit:hover,
.request-btn:hover { color: var(--text-active); }

.book-confirmation {
  margin-top: clamp(1rem, 2.6vh, 1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.book-confirmation.visible { opacity: 1; }

.book-confirmation p {
  font-size: var(--size-body);
  color: var(--text-secondary);
  line-height: 1.85;
}

/* ==========================================================================
   FOOTER BAR — the single back/home control
   ========================================================================== */

.home-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-h);
  padding: 0 var(--page-pad-x) env(safe-area-inset-bottom, 0px);
  background: #000;
  display: flex;
  align-items: center;
  z-index: 9999;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* covers iOS overscroll below the bar */
.home-bar::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 300px;
  background: #000;
}

.home-btn {
  font-family: var(--font-ui);
  font-size: var(--size-nav);
  font-weight: var(--fw-light);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-nav);
  transition: color 180ms ease;
}

.home-btn:hover { color: var(--text-active); }

/* ==========================================================================
   HOME — intro sequence: logo → tagline → navigation
   ========================================================================== */

.home .wrapper {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.home-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--page-pad-x) clamp(3rem, 12vh, 8rem);
  background: #000;
  pointer-events: none;
}

.home-tagline {
  font-family: var(--font-ui);
  font-size: clamp(0.62rem, 0.95vw, 0.82rem);
  font-weight: var(--fw-light);
  letter-spacing: 0.62em;
  line-height: 2.6;
  text-transform: uppercase;
  text-align: center;
  text-indent: 0.62em; /* balances the trailing letter-space */
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition: opacity 400ms ease;
}

/* The tagline belongs to the home state only. */
.submenu-open .home-tagline { opacity: 0 !important; }

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 600ms ease;
}

.intro-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: introLogoSequence 2.4s linear forwards;
}

.intro-logo-img {
  width: clamp(115px, 22vw, 250px);
  height: auto;
  clip-path: inset(0 0 32% 0);
}

.home-intro-active .wrapper { opacity: 0; transition: opacity 700ms ease; }
.home-intro-active.intro-complete .wrapper { opacity: 1; }
.intro-complete .site-intro { opacity: 0; }
.intro-finished .site-intro { visibility: hidden; pointer-events: none; }

.intro-complete .home-tagline {
  animation: homeTaglineFade 3.5s ease 0.3s forwards;
}

.home-intro-active .site-nav,
.intro-replay .site-nav { opacity: 0; }
.home-intro-active.intro-complete .site-nav,
.intro-replay .site-nav {
  animation: navFadeIn 1.95s ease 2.05s forwards;
}

@keyframes navFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes introLogoSequence {
  0%, 12.5% { opacity: 0; }
  41.67%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes homeTaglineFade {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* No intro when the visitor asked for reduced motion — same end state. */
@media (prefers-reduced-motion: reduce) {
  .intro-logo-mark,
  .intro-complete .home-tagline,
  .home-intro-active.intro-complete .site-nav,
  .intro-replay .site-nav,
  .home-intro-active.intro-complete .lang-switch,
  .intro-replay .lang-switch { animation-duration: 1ms; }
  .home-tagline { transition-duration: 1ms; }
}

/* ==========================================================================
   CARD — minimal standalone landing
   ========================================================================== */

.card .wrapper {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 10vh, 6rem);
  padding-bottom: 0;
  opacity: 0;
  animation: pageFadeIn 1.2s ease 0.3s forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5.5vh, 3.5rem);
}

.card-btn {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--size-subhead);
  font-weight: var(--fw-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-primary);
  transition: color 180ms ease;
}

.card-btn:hover { color: var(--text-active); }