/* ==========================================================================
   Platinya Clinic — Color System (Luxury Healthcare Concierge Palette)
   ========================================================================== */

:root {
  /* Brand Primary — Deep Violet (dark grounds only)
     Replaces the former obsidian/slate for ALL dark backgrounds. */
  --color-primary-950: #1A0F2E;
  --color-primary-900: #1E1233;
  --color-primary-800: #241640; /* Deep Violet — main dark brand */
  --color-primary-700: #2E1B50;
  --color-primary-600: #3A245F;
  --color-primary-500: #48316F;

  /* Brand Secondary — Champagne Gold (Luxury Accent) */
  --color-accent-gold-700: #9A7B2C;
  --color-accent-gold-600: #B89535;
  --color-accent-gold-500: #D4AF37;
  --color-accent-gold-400: #E5C358;
  --color-accent-gold-100: #FAF5E4;

  /* Medical Authority — Calm Emerald / Sage Accent */
  --color-medical-700: #0F766E;
  --color-medical-600: #0D9488;
  --color-medical-500: #14B8A6;
  --color-medical-100: #CCFBF1;

  /* Neutral Backgrounds — Warm Alabaster / Cream (light grounds, unchanged) */
  --color-bg-base: #F8FAFC;
  --color-bg-surface: #FFFFFF;
  --color-bg-surface-elevated: #F1F5F9;
  --color-bg-dark: #241640; /* Deep Violet */

  /* Text & Content */
  /* --color-ink stays near-black for TEXT on LIGHT backgrounds (unchanged look).
     Deep Violet (--color-primary-*) is reserved for DARK backgrounds only. */
  --color-ink: #0F172A;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-text-inverse: #F8FAFC;
  --color-text-accent: #D4AF37;

  /* Borders & Dividers */
  --color-border-light: #E2E8F0;
  --color-border-medium: #CBD5E1;
  --color-border-accent: rgba(212, 175, 55, 0.3);

  /* Status Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
}

/* ==========================================================================
   Platinya Clinic — Typography System (Editorial Serif + Modern Sans)
   ========================================================================== */

:root {
  /* Font Families */
  --font-family-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-family-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;

  /* Font Sizes (Fluid Scale) */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-widest: 0.15em;
}

/* ==========================================================================
   Platinya Clinic — Spatial & Grid System
   ========================================================================== */

:root {
  /* Spacing Scale (8pt Grid) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Section Spacing */
  --section-padding-y: var(--space-20);
  --section-padding-y-lg: var(--space-32);

  /* Container Max Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* Border Radius System */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows & Elevation */
  --shadow-subtle: 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
  --shadow-luxury: 0 20px 35px -10px rgba(15, 23, 42, 0.08), 0 10px 15px -5px rgba(212, 175, 55, 0.08);
  --shadow-dropdown: 0 12px 30px rgba(15, 23, 42, 0.12);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Platinya Clinic — Breakpoint System
   ========================================================================== */

:root {
  --breakpoint-xs: 375px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ==========================================================================
   Platinya Clinic — Variables Entry
   ========================================================================== */

/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Prevent horizontal overflow on mobile (page sliding left/right) */
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: var(--line-height-normal);
  font-family: var(--font-family-body);
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ensure nothing pushes the page wider than the viewport */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
}

/* Global Styles & Layout Helpers */
/* The Google Fonts request lives in src/template.html <head> (with preconnect) so the
   browser starts it with the stylesheet instead of waiting for the JS bundle. */

/* Typography Base Classes */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }

@media (max-width: 768px) {
  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }
}

/* Luxury Accent Utilities */
.text-gold {
  color: var(--color-accent-gold-500);
}

.bg-dark-obsidian {
  background-color: var(--color-primary-800);
  color: var(--color-text-inverse);
}

.card-luxury {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card-luxury:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-luxury);
  border-color: var(--color-border-accent);
}

/* ==========================================================================
   Arabic typography
   --------------------------------------------------------------------------
   The site loads Playfair Display (headings) and Plus Jakarta Sans (body).
   Neither contains a single Arabic glyph, so every Arabic page was silently
   falling back to the DEVICE default — Times New Roman on Windows, a different
   face on Android, Geeza Pro on Apple. Three visitors, three designs.

   IBM Plex Sans Arabic is a real, complete Arabic family with the same
   humanist proportions as Plus Jakarta Sans, so the Arabic pages now match the
   Latin ones instead of looking like an unstyled page.

   It is overridden through the design tokens, so every component — hero,
   cards, footer, forms — picks it up without touching a single component.
   ========================================================================== */

html[lang="ar"] {
  --font-family-heading: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-family-body: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;

  /* Arabic sits on a deeper baseline than Latin: slightly looser leading keeps
     the diacritics and descenders from colliding. */
  --line-height-tight: 1.35;
  --line-height-snug: 1.5;
  --line-height-normal: 1.7;
  --line-height-relaxed: 1.9;
}

/* Letter-spacing BREAKS Arabic: the script is cursive, and tracking separates
   the joined letters into disconnected shapes. The design uses 0.12em tracking
   on badges, buttons and section subtitles — correct for Latin caps, wrong for
   Arabic. Neutralise it across the whole Arabic page. */
html[lang="ar"] body * {
  letter-spacing: normal !important;
}

/* The brand's italic accent is a Playfair-italic look. Arabic has no italic
   tradition and a synthesised slant reads as a rendering bug, so the accent
   keeps the gold colour and drops the slope. */
html[lang="ar"] .title-highlight,
html[lang="ar"] em,
html[lang="ar"] i {
  font-style: normal;
}

/* Latin fragments inside Arabic (brand name, e-mail, phone) keep the Latin
   family so they do not render in an Arabic face with odd metrics. */
html[lang="ar"] .lang-option,
html[lang="ar"] .brand-latin,
html[lang="ar"] .nav-link[data-latin] {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ==========================================================================
   Container System (Responsive Layout Wrapper)
   ========================================================================== */

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
}

@media (min-width: 640px) {
  .container { max-width: var(--container-sm); padding-right: var(--space-6); padding-left: var(--space-6); }
}

@media (min-width: 768px) {
  .container { max-width: var(--container-md); }
}

@media (min-width: 1024px) {
  .container { max-width: var(--container-lg); padding-right: var(--space-8); padding-left: var(--space-8); }
}

@media (min-width: 1280px) {
  .container { max-width: var(--container-xl); }
}

@media (min-width: 1440px) {
  .container { max-width: var(--container-2xl); }
}

/* ==========================================================================
   Grid System (Responsive Reusable Grid Utilities)
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-8);
}

/* 12-column responsive grid */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);
}

/* Simple responsive columns */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

/* Auto-fit cards (intrinsically responsive) */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-8);
}

/* Column spans */
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-12 { grid-column: span 12 / span 12; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .col-span-8, .col-span-6 { grid-column: span 12 / span 12; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .col-span-4, .col-span-3, .col-span-2 { grid-column: span 12 / span 12; }
}

/* ==========================================================================
   Header & Navigation (Responsive Luxury Styling)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(36, 22, 64, 0.94); /* Deep Violet translucent */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  transition: all var(--transition-normal);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.25);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}

/* Logo Styling — Model 3 vertical stack */
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-img {
  height: 72px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(15, 23, 42, 0.4));
  transition: transform var(--transition-fast);
}

.brand-logo-img-footer {
  height: 88px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 16px rgba(15, 23, 42, 0.45));
}

.logo-link:hover .brand-logo-img {
  transform: scale(1.03);
}

/* Desktop Navigation — inside .navbar-collapse */
.navbar-collapse {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.main-nav .nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-inverse);
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-accent-gold-500);
  transition: width var(--transition-normal);
}

.nav-link:hover {
  color: var(--color-accent-gold-500);
}

.nav-link:hover::after {
  width: 100%;
}

/* Hide the in-menu CTA on desktop (CTA lives in header-actions) */
.navbar-actions {
  display: none;
}

/* Luxury Action & Language Switcher */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Ministry of Health / Health Türkiye badge — floats on the header/body
   divider line (bottom border of the header), on the right side, larger. */
.health-badge {
  position: absolute;
  right: clamp(8px, 2vw, 40px);
  bottom: -140px; /* straddle the header bottom border (divider line) */
  height: 160px;
  width: auto;
  object-fit: contain;
  z-index: 5;
  pointer-events: auto;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.35));
}

.health-badge:hover {
  transform: scale(1.05);
}

/* Below 700px — keep the logo LARGE and properly scaled (not tiny),
   reduce the bottom offset a little so it stays on the divider line. */
@media (max-width: 700px) {
  .health-badge {
    right: 8px;
    bottom: -90px;          /* keep it hovering on the divider line */
    height: 120px;          /* large enough on mobile too */
    max-width: 45vw;        /* never exceeds half the screen width */
  }
}

.lang-switcher {
  position: relative;
  display: flex;
  flex-direction: column;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.lang-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--color-accent-gold-500);
  color: var(--color-accent-gold-500);
}

.lang-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent-gold-500);
}

.lang-arrow {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* The invisible bridge element keeps the button and dropdown connected on hover,
   eliminating the gap where the menu previously disappeared. */
.lang-btn {
  position: relative;
  z-index: 3;
}

.lang-switcher::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  z-index: 2;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 168px;
  background: var(--color-primary-800);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 6; /* above the health-badge (z-index 5) so it stays clickable */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.lang-switcher:hover .lang-dropdown,
.lang-switcher:focus-within .lang-dropdown,
.lang-switcher.is-open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.lang-option:hover, .lang-option.active {
  background: rgba(212, 175, 55, 0.12);
  color: var(--color-accent-gold-500);
}

/* Luxury Action Buttons */
.btn-luxury-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #D4AF37 0%, #B89535 100%);
  color: #0F172A;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-subtle);
  transition: all var(--transition-normal);
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

.btn-luxury-gold:hover {
  background: linear-gradient(135deg, #E5C358 0%, #D4AF37 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

/* Mobile Toggle Button */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.mobile-toggle .hamburger-line {
  width: 100%;
  height: 2px;
  background-color: var(--color-bg-base);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.mobile-toggle.is-active .hamburger-line:first-child {
  transform: translateY(10px) rotate(45deg);
}

.mobile-toggle.is-active .hamburger-line:last-child {
  transform: translateY(-10px) rotate(-45deg);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Large tablet / small desktop: tighten spacing */
@media (max-width: 1200px) {
  .main-nav .nav-list {
    gap: var(--space-6);
  }
  .navbar-collapse {
    gap: var(--space-6);
  }
  .nav-link {
    font-size: var(--font-size-xs);
  }
  .header-actions {
    gap: var(--space-4);
  }
}

/* Tablet & Mobile: switch to collapsible drawer menu */
@media (max-width: 1024px) {
  .header-container {
    height: 84px;
  }

  .brand-logo-img {
    height: 62px;
  }

  /* Hide desktop navigation + desktop CTA, show toggle + in-menu CTA */
  .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    background: var(--color-primary-900);
    border-left: 1px solid var(--color-border-accent);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 96px var(--space-8) var(--space-8);
    transform: translateX(100%);
    transition: transform var(--transition-smooth);
    z-index: 998;
    box-shadow: var(--shadow-dropdown);
    overflow-y: auto;
  }

  .navbar-collapse.is-open {
    transform: translateX(0);
  }

  .navbar-collapse .main-nav {
    width: 100%;
  }

  .navbar-collapse .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
  }

  .navbar-collapse .nav-link {
    display: block;
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-base);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .navbar-collapse .nav-link::after {
    display: none;
  }

  /* In-menu CTA visible only on mobile drawer */
  .navbar-actions {
    display: block;
    width: 100%;
    margin-top: var(--space-8);
  }

  .navbar-actions .header-contact-cta {
    width: 100%;
  }

  /* Hide the desktop CTA copy in the header actions on mobile */
  .header-cta-desktop {
    display: none;
  }

  /* Raise the header above the drawer */
  .site-header {
    z-index: 1000;
  }

  .header-container {
    position: relative;
    z-index: 1001;
  }

  .mobile-toggle {
    display: flex;
  }
}

/* Small phone: shrink logo a touch, keep spacing tight */
@media (max-width: 480px) {
  .header-container {
    height: 76px;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .brand-logo-img {
    height: 52px;
  }

  .lang-btn {
    padding: 0.4rem 0.6rem;
  }

  .header-actions {
    gap: var(--space-3);
  }
}

/* ==========================================================================
   Hero Section Layout & Styling (High Fidelity Luxury)
   ========================================================================== */

.hero-section {
  position: relative;
  background-color: var(--color-primary-900);
  color: var(--color-text-inverse);
  padding-top: var(--space-20);
  padding-bottom: var(--space-24);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-accent);
}

.hero-backdrop-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(36, 22, 64, 0) 70%);
  pointer-events: none;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: var(--space-16);
  position: relative;
  z-index: 10;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 1rem;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.badge-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-accent-gold-500);
  border-radius: var(--radius-full);
}

.badge-text {
  font-size: var(--font-size-xs);
  color: var(--color-accent-gold-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}

.hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  color: var(--color-bg-base);
  margin-bottom: var(--space-6);
}

.title-highlight {
  color: var(--color-accent-gold-500);
  font-style: italic;
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
  max-width: 620px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #D4AF37 0%, #B89535 100%);
  color: #0F172A;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
  transition: all var(--transition-normal);
}

.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: transparent;
  color: var(--color-bg-base);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
}

.btn-hero-secondary:hover {
  border-color: var(--color-accent-gold-500);
  color: var(--color-accent-gold-500);
}

/* Trust Bar */
.hero-trust-bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-item {
  display: flex;
  flex-direction: column;
}

.trust-value {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold-500);
}

.trust-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.trust-divider {
  width: 1px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Hero Media Card */
.hero-card-luxury {
  position: relative;
  background: linear-gradient(145deg, rgba(58, 36, 95, 0.8), rgba(36, 22, 64, 0.9));
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-2xl);
  padding: 0; /* image is full-bleed */
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  box-shadow: var(--shadow-luxury);
}

.hero-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1; /* keep the approved bright image fully vibrant */
}

/* Very light viole wash only — no multiply darkening, keeps sunlighter look */
.hero-card-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(58, 36, 95, 0.06) 0%, rgba(36, 22, 64, 0.06) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Minimal bottom scrim — only enough to keep the concierge badge readable,
   leaving the rest of the bright lobby unobscured. */
.hero-card-luxury::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.0) 40%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.hero-card-luxury .concierge-preview-badge {
  position: relative;
  z-index: 2;
  margin: var(--space-6);
}

.card-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.concierge-preview-badge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: rgba(36, 22, 64, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  width: 100%;
}

.badge-icon {
  color: var(--color-accent-gold-500);
  font-size: var(--font-size-lg);
}

.badge-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-bg-base);
}

.badge-sub {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* Show the hero image below the text on mobile (was hidden) */
  .hero-media {
    display: block;
    order: 2;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .hero-card-luxury {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .hero-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-trust-bar {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .trust-divider {
    display: none;
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  .hero-description {
    font-size: var(--font-size-base);
  }
}

/* ==========================================================================
   Services Section (High Fidelity Styling)
   ========================================================================== */

.section-services {
  padding-top: var(--section-padding-y-lg);
  padding-bottom: var(--section-padding-y-lg);
  background-color: var(--color-bg-base);
}

.section-header {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-16);
  text-align: center;
}

.section-subtitle {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-gold-600);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--font-size-4xl);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.section-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Manual left/right arrows for the services carousel */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(22, 19, 48, 0.55);
  color: var(--color-accent-gold-400);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}
.carousel-arrow span { display: block; margin-top: -3px; }
.carousel-arrow:hover {
  background: rgba(212, 175, 55, 0.9);
  color: #161330;
  border-color: var(--color-accent-gold-500);
}
/* Positions are intentionally swapped (visual side only) per request:
   the "prev" button is drawn on the right and the "next" on the left.
   Each button keeps its original behaviour — only the side changes. */
.carousel-arrow--prev { right: 8px; }
.carousel-arrow--next { left: 8px; }
@media (max-width: 760px) {
  .carousel-arrow { width: 40px; height: 40px; font-size: 1.5rem; }
  .carousel-arrow--prev { right: 2px; }
  .carousel-arrow--next { left: 2px; }
}

/* Services carousel — flat, reliable, centred. */
.services-carousel {
  position: relative;
  margin: 0 0 var(--space-12);
  overflow: hidden;
  min-height: 440px; /* fixed height so the banner below never shifts */
}

/* Whole-card link: click anywhere on a service card opens its page */
a.service-card-clickable {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.service-card-clickable:hover { transform: translateY(-4px); }
a.service-card-clickable .link-luxury { pointer-events: none; }

.carousel-stage {
  display: flex;
  align-items: center;
  justify-content: center; /* keep the visible cards centred */
  gap: 0;
  min-height: 420px;
  position: relative; /* separates its layout from the banner below */
}

.carousel-card {
  flex: 0 0 320px;
  margin: 0 var(--space-2);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  opacity: 0.5;
  transform: scale(0.92);
}

.carousel-card.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 3;
}

.carousel-card.is-peek-left {
  opacity: 0.8;
  transform: scale(0.95) translateX(-12px);
  z-index: 2;
}

.carousel-card.is-peek-right {
  opacity: 0.8;
  transform: scale(0.95) translateX(12px);
  z-index: 2;
}

@media (max-width: 1024px) {
  .services-carousel, .carousel-stage { min-height: 380px; }
  .carousel-card { flex-basis: 280px; }
}
@media (max-width: 640px) {
  .services-carousel { min-height: 0; }
  .carousel-stage { min-height: 0; flex-direction: column; align-items: center; }
  .carousel-card, .carousel-card.is-active, .carousel-card.is-peek-left, .carousel-card.is-peek-right {
    flex-basis: 100%;
    width: 100%;
    opacity: 1;
    transform: none;
    margin: var(--space-3) 0;
  }
}

.service-card-luxury {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

/* Approved service image — flush header at the top of the card */
.service-card-media {
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-surface-elevated);
}

.service-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-smooth);
}

.service-card-luxury:hover .service-card-img {
  transform: scale(1.05);
}

.service-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}

.service-card-luxury::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-gold-500), transparent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.service-card-luxury:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-luxury);
  border-color: var(--color-border-accent);
}

.service-card-luxury:hover::before {
  opacity: 1;
}

.card-header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.service-number {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold-500);
  line-height: 1;
}

.service-tag {
  font-size: var(--font-size-xs);
  padding: 0.25rem 0.6rem;
  background: var(--color-bg-surface-elevated);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.service-title {
  font-size: var(--font-size-2xl);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.service-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.link-luxury {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color var(--transition-fast);
}

.link-luxury:hover {
  color: var(--color-accent-gold-600);
}

.link-luxury .arrow {
  transition: transform var(--transition-fast);
}

.link-luxury:hover .arrow {
  transform: translateX(4px);
}

/* All-Inclusive Concierge Journey — rich, staged luxury experience */
.concierge-banner-luxury {
  background: var(--color-primary-800);
  color: var(--color-text-inverse);
  border-radius: var(--radius-2xl);
  padding: var(--space-12);
  border: 1px solid var(--color-border-accent);
  box-shadow: var(--shadow-luxury);
  /* Clear separation from the Services carousel above */
  margin-top: var(--space-12);
}

.concierge-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-10);
}

.banner-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  color: var(--color-accent-gold-500);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.banner-title {
  font-size: var(--font-size-3xl);
  color: var(--color-bg-base);
  margin-bottom: var(--space-3);
}

.banner-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.concierge-journey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.journey-step {
  position: relative; /* anchor for the absolute journey-index */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}

.journey-step:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

.journey-marker {
  display: flex;
  flex-direction: column;         /* stack number above the icon */
  align-items: center;
  justify-content: center;        /* center the icon + number in the line */
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  width: 100%;
}

.journey-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(212, 175, 55, 0.1);
  color: var(--color-accent-gold-500);
}

.journey-index {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xs, 0.7rem);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.2em;
}

.journey-title {
  font-size: var(--font-size-lg);
  color: var(--color-bg-base);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-tight);
}

.journey-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

@media (max-width: 1024px) {
  .concierge-journey {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .concierge-journey {
    grid-template-columns: 1fr;
  }

  .concierge-banner-luxury {
    padding: var(--space-6);
  }

  .services-grid {
    gap: var(--space-5);
  }

  .service-card-luxury {
    padding: var(--space-6);
  }

  .section-services {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* ==========================================================================
   Homepage Sections Styling (High Fidelity Luxury)
   ========================================================================== */

/* About Section */
.section-about {
  padding-top: var(--section-padding-y-lg);
  padding-bottom: var(--section-padding-y-lg);
  background: var(--color-bg-surface);
}

.about-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-16);
}

.about-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-accent-gold-100);
  color: var(--color-accent-gold-700);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  margin-top: 2px;
}

.highlight-title {
  font-size: var(--font-size-base);
  color: var(--color-ink);
  margin-bottom: 2px;
}

.highlight-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.btn-about-luxury {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.75rem;
  background: var(--color-primary-800);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
}

.btn-about-luxury:hover {
  background: var(--color-accent-gold-600);
  color: var(--color-primary-900);
}

.about-media-card {
  min-height: 400px;
  background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  display: flex;
  align-items: flex-end;
}

.media-stat-box {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-accent);
}

.stat-number {
  display: block;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold-500);
}

.stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-inverse);
  margin-top: 4px;
}

/* Why Choose Us Section */
.section-why-us {
  padding-top: var(--section-padding-y-lg);
  padding-bottom: var(--section-padding-y-lg);
}

.text-inverse { color: var(--color-text-inverse); }

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
}

.why-us-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: all var(--transition-normal);
}

.why-us-card:hover {
  border-color: var(--color-border-accent);
  background: rgba(212, 175, 55, 0.05);
  transform: translateY(-4px);
}

.why-icon {
  font-size: var(--font-size-3xl);
  color: var(--color-accent-gold-500);
  margin-bottom: var(--space-4);
}

.why-title {
  font-size: var(--font-size-xl);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.why-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* Testimonials Section */
.section-testimonials {
  padding-top: var(--section-padding-y-lg);
  padding-bottom: var(--section-padding-y-lg);
  background: var(--color-bg-surface-elevated);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
}

.testimonial-card-luxury {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.review-rating {
  color: var(--color-accent-gold-500);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}

.review-quote {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.author-name {
  font-size: var(--font-size-base);
  color: var(--color-ink);
}

.author-details {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Contact Section & Form */
.section-contact {
  padding-top: var(--section-padding-y-lg);
  padding-bottom: var(--section-padding-y-lg);
  background: var(--color-bg-base);
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: flex-start;
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.channel-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.channel-icon {
  font-size: var(--font-size-2xl);
  color: var(--color-accent-gold-600);
}

.channel-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.channel-value {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.luxury-form {
  padding: var(--space-10);
  background: var(--color-bg-surface);
}

.form-title {
  font-size: var(--font-size-2xl);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.form-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-accent-gold-500);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* Country code (type-to-resolve) + local number — elegant phone input */
.form-phone-row { margin-top: var(--space-4); }
.form-phone-fields {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1.5fr);
  gap: var(--space-2);
  align-items: center;
}

.country-input { position: relative; }
.country-input .country-key {
  width: 100%;
  padding-right: 74px; /* room for the flag+code chip */
}
.country-preview {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-family-heading);
  color: var(--color-ink);
  letter-spacing: 0.02em;
  pointer-events: none;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.4;
}
.country-preview .flag { font-size: 14px; line-height: 1; }


/* Optional photo upload (dashed luxury drop-target) */
.form-upload-group { margin-top: var(--space-4); }
.form-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border: 1px dashed rgba(212, 175, 55, 0.55);
  border-radius: var(--radius-lg);
  background: rgba(212, 175, 55, 0.05);
  color: var(--color-accent-gold-600);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.form-upload-btn:hover { background: rgba(212, 175, 55, 0.12); border-color: rgba(212, 175, 55, 0.9); }
.form-upload-icon { display: inline-flex; align-items: center; }
.form-upload-files {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}
.form-upload-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  opacity: 0.85;
}
.form-upload-error {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #d23f3f;
}
.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #d23f3f;
}

.btn-submit-luxury {
  width: 100%;
  position: relative;
  padding: 1rem;
  background: linear-gradient(135deg, #D4AF37 0%, #B89535 100%);
  color: #0F172A;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
  transition: all var(--transition-normal);
}

.btn-submit-luxury:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(212, 175, 55, 0.35);
}

/* In-flight state: the button keeps its size, loses its lift, and shows a
   spinner on the leading edge (inset-inline-start flips with the RTL layout). */
.btn-submit-luxury:disabled,
.btn-submit-luxury.is-sending {
  cursor: progress;
  transform: none;
  box-shadow: 0 6px 14px rgba(212, 175, 55, 0.18);
}

.btn-submit-luxury.is-sending::after {
  content: "";
  position: absolute;
  inset-inline-start: 1.15rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.22);
  border-top-color: #0f172a;
  animation: form-spin 0.7s linear infinite;
}

@keyframes form-spin {
  to { transform: rotate(360deg); }
}

/* The answer to "did it send?" — visible without leaving the page. */
.form-status {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.65;
  text-align: center;
  border: 1px solid transparent;
  animation: form-status-in 0.35s ease both;
}

.form-status.is-sending {
  color: var(--color-text-secondary, #475569);
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.28);
}

.form-status.is-success {
  color: #14603c;
  background: rgba(20, 96, 60, 0.09);
  border-color: rgba(20, 96, 60, 0.28);
}

.form-status.is-error {
  color: #8a2020;
  background: rgba(210, 63, 63, 0.08);
  border-color: rgba(210, 63, 63, 0.3);
}

@keyframes form-status-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Motion is decoration here too: the spinner still turns, but nothing slides. */
@media (prefers-reduced-motion: reduce) {
  .form-status { animation: none; }
  .btn-submit-luxury.is-sending::after { animation-duration: 1.6s; }
}

@media (max-width: 1024px) {
  .about-container, .contact-container {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  /* Tighter section rhythm on small screens */
  .section-about,
  .section-why-us,
  .section-testimonials,
  .section-contact,
  .contact-info-col,
  .about-story-grid {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .luxury-form {
    padding: var(--space-6);
  }

  .channel-card {
    padding: var(--space-3) var(--space-4);
  }

  .about-story-grid {
    gap: var(--space-8);
  }
}

/* Extra-small phones: single column trust & tighter stats */
@media (max-width: 400px) {
  .contact-channels {
    gap: var(--space-4);
  }
}

/* ==========================================================================
   Turkish Licenses Section (Dark Violet Trust Section)
   ========================================================================== */

.section-licenses {
  background-color: var(--color-primary-900);
  color: var(--color-text-inverse);
  padding-top: var(--section-padding-y-lg);
  padding-bottom: var(--section-padding-y-lg);
  border-top: 1px solid var(--color-border-accent);
  border-bottom: 1px solid var(--color-border-accent);
}

.licenses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--space-8);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.license-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  /* Deliberately static: these are official licences and the Health Türkiye
     mark, not a product card. Lifting or zooming a certificate on hover made it
     look like a clickbait tile, so the card stays put. The zoom-in cursor still
     tells the visitor it opens. */
}

/* Make the certificate clickable (opens in the lightbox) */
.license-zoom {
  display: block;
  width: 100%;
  cursor: zoom-in;
  padding: 0;
  background: none;
  border: none;
}

.license-media {
  background: var(--color-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  min-height: 280px;
  /* subtle frame inside the card */
  border-bottom: 1px solid var(--color-border-accent);
}

.license-zoom .license-img {
  transition: none;
}

.license-img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.license-caption {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}

.license-badge {
  display: inline-block;
  width: fit-content;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-gold-500);
  padding: 0.25rem 0.75rem;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
}

.license-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  color: var(--color-bg-base);
  line-height: var(--line-height-tight);
  margin: 0;
}

.license-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .section-licenses {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .license-media {
    min-height: 220px;
  }

  .licenses-grid {
    gap: var(--space-5);
  }
}

/* ==========================================================================
   Lightbox — fullscreen black viewer for certificate images
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: var(--space-8);
  cursor: zoom-out;
  animation: lightboxFade var(--transition-fast);
}

.lightbox-open {
  overflow: hidden;
}

.lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-luxury);
}

.lightbox-close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

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

/* ==========================================================================
   Partner Facilities Section (Dark Violet — collaborating hospitals, shown via
   logo + facility proof, descriptions never name the hospitals)
   ========================================================================== */

.section-partner-facilities {
  background-color: var(--color-primary-900);
  color: var(--color-text-inverse);
  padding-top: var(--section-padding-y-lg);
  padding-bottom: var(--section-padding-y-lg);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-6);
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.partner-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-accent);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.partner-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-luxury);
  border-color: var(--color-accent-gold-500);
}

.partner-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-primary-800);
  border-bottom: 1px solid var(--color-border-accent);
}

.partner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.partner-card:hover .partner-img {
  transform: scale(1.05);
}

.partner-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  flex-grow: 1;
}

/* Logo sits on a dark plaque so LIGHT-coloured logos remain clearly visible */
.partner-logo-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-950);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  min-height: 72px;
}

.partner-logo {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: none; /* no transparency/opacity washing */
}

.partner-module {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-gold-500);
}

.partner-caption {
  font-size: var(--font-size-sm);
  /* Was var(--color-bg-base): near-black text on a dark violet card, which made
     the description almost unreadable (and looked like clipped text). */
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
  /* Long Turkish/German-style compounds and Arabic without spaces must wrap
     instead of pushing the card wider than its grid column. */
  overflow-wrap: anywhere;
}

/* Responsive */
@media (max-width: 640px) {
  .section-partner-facilities {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  .partner-grid {
    gap: var(--space-5);
  }
}

/* ==========================================================================
   Legal Disclaimer (licensing statement — current language only)
   ========================================================================== */

.section-legal-disclaimer {
  background-color: var(--color-primary-950);
  color: var(--color-text-inverse);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  border-top: 1px solid var(--color-border-accent);
}

.legal-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-accent-gold-500);
  text-align: center;
  margin-bottom: var(--space-4);
}

.legal-statement {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-muted, #a0a0b8);
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms of Service)
   ========================================================================== */

.section-legal {
  padding-top: var(--space-16);
  padding-bottom: var(--space-24);
  background-color: var(--color-bg-base);
}

.legal-wrap {
  max-width: 820px;
}

.legal-block {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.legal-index {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold-600);
  line-height: 1;
  flex-shrink: 0;
}

.legal-heading {
  font-size: var(--font-size-xl);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.legal-paragraph {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.legal-updated {
  margin-top: var(--space-8);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .legal-block {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Hotel Page (5-Star Luxury Accommodation service)
   ========================================================================== */

/* Hero with hotel-icon "HOTEL" label on top of the main hotel photo background */
.hotel-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-primary-900);
}

.hotel-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotel-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(30, 18, 51, 0.45) 55%, rgba(30, 18, 51, 0.15) 100%);
}

.hotel-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.hotel-hero-icon {
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--color-accent-gold-400);
  backdrop-filter: blur(6px);
}
.hotel-hero-icon svg { width: 46px; height: 46px; }

.hotel-hero-label {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  letter-spacing: 0.35em;
  color: var(--color-bg-base);
  text-transform: uppercase;
}

.hotel-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  color: var(--color-bg-base);
  margin: 0;
}

.hotel-hero-sub {
  max-width: 560px;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Intro */
.section-hotel-intro { padding: var(--space-20) 0; background: var(--color-bg-base); }
.hotel-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.hotel-intro-text .section-title { margin-bottom: var(--space-4); }
.hotel-intro-text .section-description { margin-bottom: var(--space-8); }
.hotel-intro-img img {
  width: 100%;
  /* Capped so the hotel photo matches the breathing room of the treatment rows
     instead of towering over the text column. */
  height: clamp(260px, 28vw, 420px);
  aspect-ratio: auto;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-luxury);
  object-fit: cover;
}

/* Amenities */
.section-hotel-amenities { padding: var(--space-20) 0; }
.hotel-amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.amenity-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}
.amenity-card:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, 0.4); }
.amenity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(212, 175, 55, 0.12);
  color: var(--color-accent-gold-500);
  margin-bottom: var(--space-4);
}
.amenity-title { font-size: var(--font-size-lg); color: var(--color-bg-base); margin-bottom: var(--space-2); }
.amenity-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; line-height: var(--line-height-relaxed); }

/* Gallery */
.section-hotel-gallery { padding: var(--space-20) 0; background: var(--color-bg-base); }
.hotel-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.hotel-photo {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}
.hotel-photo img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.hotel-photo:hover img { transform: scale(1.05); }

@media (max-width: 1024px) {
  .hotel-intro-grid, .hotel-amenities-grid, .hotel-gallery-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .section-hotel-intro, .section-hotel-amenities, .section-hotel-gallery { padding: var(--space-14) 0; }
  .hotel-intro-grid, .hotel-amenities-grid, .hotel-gallery-grid { grid-template-columns: 1fr; }
  .hotel-hero-label { font-size: var(--font-size-3xl); }
  .hotel-hero { min-height: 60vh; }
}

/* ==========================================================================
   FAQ block — question/answer pairs kept fully visible (no accordion).
   Hidden answers are weaker for both search engines and impatient readers.
   Used by the journey pages (airport, transfers, interpreter, hotel, concierge).
   ========================================================================== */

.section-faq {
  padding: var(--space-20) 0;
  background: var(--color-bg-base);
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.faq-item {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.faq-item:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-card);
}

.faq-q {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.faq-a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Step list on the journey pages (dark ground, same cards as the amenities grid).
   A 2x2 grid: a 3-column track would leave the fourth card alone on its own row. */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.journey-index-line {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  letter-spacing: 0.25em;
  color: var(--color-accent-gold-500);
}

@media (max-width: 900px) {
  .faq-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section-faq { padding: var(--space-12) 0; }
  .faq-list { margin-top: var(--space-8); }
  .steps-grid { grid-template-columns: 1fr; margin-top: var(--space-8); }
}

/* ==========================================================================
   Dental Page — Aesthetic Dentistry (namespaced dental-, not hotel-)
   - Full-width dental hero over the treatment-room photo (second reference).
   - Alternating rows: image one side ⇄ 3-point text the other, in a gold frame.
   - Light page background for a seamless transition from the rest of the site.
   ========================================================================== */
.page-dental { background: var(--color-bg-base); }

/* ---------- Hero (namespace .dental-hero, image background) ---------- */
.dental-hero {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-primary-900);
}
.dental-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.dental-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(30, 18, 51, 0.5) 55%, rgba(30, 18, 51, 0.22) 100%);
}
.dental-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-14) 0;
}
.dental-hero-icon {
  width: 92px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--color-accent-gold-400);
  backdrop-filter: blur(6px);
}
.dental-hero-icon svg { width: 44px; height: 44px; }
.dental-hero-label {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  letter-spacing: 0.35em;
  color: var(--color-bg-base);
  text-transform: uppercase;
}
.dental-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  color: var(--color-bg-base);
  margin: 0;
  max-width: 760px;
}
.dental-hero-sub {
  max-width: 580px;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}
.dental-hero-cta { margin-top: var(--space-5); }

/* ---------- Intro ---------- */
.dental-intro { padding: var(--space-16) 0; background: var(--color-bg-base); }

/* ---------- Alternating treatment rows ---------- */
.dental-treatments {
  background: var(--color-bg-base);
  padding: 0 0 var(--space-20);
}

/* Each row: image + text, a gold frame with inner white edge. Cards kept
   moderate so a full treatment keeps breathing room (not oversized) with
   consistent vertical margin between rows. */
.dental-row {
  position: relative;
  display: grid;
  /* The photo used to take a slightly larger share than the copy (1.05fr vs
     1fr). It is a tight macro shot, and at that width it dominated the card and
     felt uncomfortable to look at. The text now leads, the photo supports. */
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(44px, 6vw, 84px);
  padding: clamp(10px, 1.2vw, 16px);
  background: var(--color-bg-surface);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: calc(var(--radius-2xl) + 6px);
  box-shadow: 0 14px 40px -18px rgba(15, 23, 42, 0.18);
}
.dental-row::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-2xl);
  pointer-events: none;
}

.dental-row-media {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* A capped height instead of a fixed 4:3 box: the photo can no longer grow
     into a wall-sized image on a wide screen, and the extra padding makes it
     sit inside the gold frame with room to breathe. */
  height: clamp(240px, 25vw, 380px);
  padding: clamp(6px, 0.8vw, 10px);
  background: var(--color-bg-surface-elevated);
}
.dental-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius-xl) - 8px);
  transition: transform var(--transition-slow);
}
@media (hover: hover) and (pointer: fine) {
  .dental-row:hover .dental-row-media img { transform: scale(1.02); }
}

.dental-row-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.dental-row.is-flipped .dental-row-media { order: 2; }
.dental-row.is-flipped .dental-row-body { order: 1; }

/* meta = gold number + tag */
.dental-row-meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.dental-row-num { font-family: var(--font-family-heading); font-size: var(--font-size-3xl); font-weight: 600; line-height: 1; color: var(--color-accent-gold-500); }
.dental-row-tag {
  display: inline-flex; align-items: center; padding: 3px 12px;
  border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 999px;
  background: rgba(212, 175, 55, 0.08); color: var(--color-accent-gold-600);
  font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}

.dental-row-title { font-family: var(--font-family-heading); font-size: var(--font-size-2xl); color: var(--color-ink); line-height: 1.2; margin: 0 0 var(--space-3); }

.dental-row-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dental-row-list li { position: relative; padding-left: 24px; font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.5; }
.dental-row-list li::before { content:""; position:absolute; left:0; top:0.42em; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--color-accent-gold-500); }

.dental-row-link { display:inline-flex; align-items:center; gap:var(--space-2); font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--color-accent-gold-600); text-decoration:none; transition: color var(--transition-normal), gap var(--transition-normal); margin-top: var(--space-1); }
.dental-row-link:hover { color: var(--color-accent-gold-500); gap: var(--space-3); }
.dental-row-arrow { display:inline-block; width:22px; height:2px; background: currentColor; position:relative; }
.dental-row-arrow::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }

.dental-cta { text-align:center; margin-top: var(--space-4); }

/* ---------- Techniques ---------- */
.dental-tech { margin-top: clamp(64px, 9vw, 120px); }
.dental-tech-head { margin-bottom: var(--space-8); }
.dental-tech-visual {
  margin: 0 auto clamp(28px, 3.5vw, 48px);
  max-width: 760px;            /* matches the hair page — not full width */
  border-radius: calc(var(--radius-2xl) + 4px);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 14px 40px -20px rgba(15, 23, 42, 0.22);
  background: var(--color-bg-surface);
  padding: clamp(8px, 1vw, 12px);
}
.dental-tech-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}
.dental-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}
.dental-tech-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--radius-2xl) + 4px);
  border: 1px solid rgba(212, 175, 55, 0.6);
  background: var(--color-bg-surface);
  box-shadow: 0 14px 40px -20px rgba(15, 23, 42, 0.22);
}
/* Generous inner padding so the text never touches the gold frame. */
.dental-tech-body {
  padding: clamp(30px, 3.2vw, 46px) clamp(28px, 3.2vw, 46px) clamp(34px, 3.4vw, 50px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  height: 100%;
}
/* Title centred on its own line. */
.dental-tech-name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  color: var(--color-ink);
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.dental-tech-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  text-align: center;
}

/* RTL mirroring */
[dir="rtl"] .dental-row-list li { padding-left:0; padding-right:24px; }
[dir="rtl"] .dental-row-list li::before { left:auto; right:0; }
[dir="rtl"] .dental-row-arrow::after { right:auto; left:0; transform:rotate(-135deg); }

/* Responsive */
@media (max-width: 1024px) {
  .dental-hero { min-height: 66vh; }
  .dental-hero-label { font-size: var(--font-size-2xl); }
  .dental-tech-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dental-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .dental-row.is-flipped .dental-row-media,
  .dental-row.is-flipped .dental-row-body { order: initial; }
  .dental-row-media { height: auto; aspect-ratio: 4 / 3; }
  .dental-treatments { padding-bottom: var(--space-16); }
}

/* ==========================================================================
   Hair Transplant & Restoration Page (namespaced .hair-)
   - Full-width hair hero over the approved clinic photo.
   - Alternating rows: image ⇄ 3-point text, wrapped in a gold double frame.
   - Techniques section (DHI / FUE) as two elegant framed cards.
   Light page background for a seamless feel with the rest of the site.
   ========================================================================== */
.page-hair { background: var(--color-bg-base); }

/* ---------- Hero ---------- */
.hair-hero {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-primary-900);
}
.hair-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hair-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(30, 18, 51, 0.55) 55%, rgba(30, 18, 51, 0.26) 100%);
}
.hair-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-14) 0;
}
.hair-hero-icon {
  width: 92px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--color-accent-gold-400);
  backdrop-filter: blur(6px);
}
.hair-hero-icon svg { width: 44px; height: 44px; }
.hair-hero-label {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  letter-spacing: 0.35em;
  color: var(--color-bg-base);
  text-transform: uppercase;
}
.hair-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  color: var(--color-bg-base);
  margin: 0;
  max-width: 780px;
}
.hair-hero-sub {
  max-width: 620px;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}
.hair-hero-cta { margin-top: var(--space-5); }

/* ---------- Intro ---------- */
.hair-intro { padding: var(--space-16) 0 0; background: var(--color-bg-base); }

/* ---------- Area rows ---------- */
.hair-areas {
  background: var(--color-bg-base);
  padding: var(--space-4) 0 var(--space-10);
}
.hair-row {
  position: relative;
  display: grid;
  /* Text leads, photo supports: the media column was wider than the copy, which
     made the close-up shots dominate the card. */
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(10px, 1.2vw, 16px);
  background: var(--color-bg-surface);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: calc(var(--radius-2xl) + 6px);
  box-shadow: 0 14px 40px -18px rgba(15, 23, 42, 0.18);
}
.hair-row::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-2xl);
  pointer-events: none;
}
.hair-row-media {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Capped height + inner padding: the photo stays a comfortable size on wide
     screens and sits inside the gold frame instead of filling it edge to edge. */
  height: clamp(240px, 25vw, 380px);
  padding: clamp(6px, 0.8vw, 10px);
  background: var(--color-bg-surface-elevated);
}
.hair-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius-xl) - 8px);
  transition: transform var(--transition-slow);
}
@media (hover: hover) and (pointer: fine) {
  .hair-row:hover .hair-row-media img { transform: scale(1.02); }
}
.hair-row-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.hair-row.is-flipped .hair-row-media { order: 2; }
.hair-row.is-flipped .hair-row-body { order: 1; }
.hair-row-meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.hair-row-num { font-family: var(--font-family-heading); font-size: var(--font-size-3xl); font-weight: 600; line-height: 1; color: var(--color-accent-gold-500); }
.hair-row-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--color-accent-gold-600);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hair-row-title { font-family: var(--font-family-heading); font-size: var(--font-size-2xl); color: var(--color-ink); line-height: 1.2; margin: 0 0 var(--space-3); }
.hair-row-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hair-row-list li { position: relative; padding-left: 24px; font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.5; }
.hair-row-list li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--color-accent-gold-500); }
.hair-row-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent-gold-600); text-decoration: none; transition: color var(--transition-normal), gap var(--transition-normal); margin-top: var(--space-1); }
.hair-row-link:hover { color: var(--color-accent-gold-500); gap: var(--space-3); }
.hair-row-arrow { display: inline-block; width: 22px; height: 2px; background: currentColor; position: relative; }
.hair-row-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* ---------- Techniques ---------- */
.hair-tech { margin-top: clamp(56px, 8vw, 104px); }
.hair-tech-head { margin-bottom: var(--space-8); }
.hair-tech-visual {
  margin: 0 auto clamp(24px, 3vw, 40px);
  max-width: 760px;           /* smaller than full width, per request */
  border-radius: calc(var(--radius-2xl) + 4px);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 14px 40px -20px rgba(15, 23, 42, 0.22);
  background: var(--color-bg-surface);
  padding: clamp(8px, 1vw, 12px);
}
.hair-tech-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}
.hair-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 3vw, 40px);
}
.hair-tech-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--radius-2xl) + 4px);
  border: 1px solid rgba(212, 175, 55, 0.6);
  background: var(--color-bg-surface);
  box-shadow: 0 14px 40px -20px rgba(15, 23, 42, 0.22);
}
.hair-tech-body {
  padding: clamp(28px, 3vw, 44px) clamp(26px, 3vw, 44px) clamp(32px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}
.hair-tech-name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  color: var(--color-ink);
  margin: 0;
  text-align: center;
  width: 100%;
}
.hair-tech-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  text-align: center;
}
.hair-tech-why {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-accent-gold-600);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: var(--line-height-relaxed);
  padding: 0 var(--space-2);
  text-align: center;
}
.hair-tech-why svg { width: 16px; height: 16px; margin-top: 0.28em; flex: none; }

.hair-cta { text-align: center; margin-top: var(--space-14); }

/* RTL mirroring */
[dir="rtl"] .hair-row-list li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .hair-row-list li::before { left: auto; right: 0; }
[dir="rtl"] .hair-row-arrow::after { right: auto; left: 0; transform: rotate(-135deg); }

/* Responsive */
@media (max-width: 1024px) {
  .hair-hero { min-height: 66vh; }
  .hair-hero-label { font-size: var(--font-size-2xl); }
}
@media (max-width: 760px) {
  .hair-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .hair-row.is-flipped .hair-row-media,
  .hair-row.is-flipped .hair-row-body { order: initial; }
  .hair-row-media { height: auto; aspect-ratio: 4 / 3; }
  .hair-tech-grid { grid-template-columns: 1fr; }
  .hair-cta { margin-top: var(--space-10); }
}

/* ==========================================================================
   Plastic & Aesthetic Surgery Page (namespaced .plastic-)
   - Full-width hero over the clinic visual.
   - Two grouped listings (Facial / Body): each item an alternating row
     (image ⇄ 3-point text) inside a gold double frame.
   - Light page background for a seamless transition with the rest of the site.
   ========================================================================== */
.page-plastic { background: var(--color-bg-base); }

/* ---------- Hero ---------- */
.plastic-hero {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-primary-900);
}
.plastic-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.plastic-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(30, 18, 51, 0.5) 55%, rgba(30, 18, 51, 0.24) 100%);
}
.plastic-hero-content {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding: var(--space-14) 0;
}
.plastic-hero-icon {
  width: 92px; height: 92px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.5); color: var(--color-accent-gold-400);
  backdrop-filter: blur(6px);
}
.plastic-hero-icon svg { width: 44px; height: 44px; }
.plastic-hero-label {
  font-family: var(--font-family-heading); font-size: var(--font-size-4xl);
  letter-spacing: 0.35em; color: var(--color-bg-base); text-transform: uppercase;
}
.plastic-hero-title { font-family: var(--font-family-heading); font-size: var(--font-size-2xl); color: var(--color-bg-base); margin: 0; max-width: 820px; }
.plastic-hero-sub { max-width: 620px; font-size: var(--font-size-base); color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin: 0; }
.plastic-hero-cta { margin-top: var(--space-5); }

/* ---------- Intro ---------- */
.plastic-intro { padding: var(--space-16) 0 0; background: var(--color-bg-base); }

/* ---------- Groups ---------- */
.plastic-areas { background: var(--color-bg-base); padding: var(--space-4) 0 var(--space-10); }

.plastic-group-head { display: flex; align-items: center; gap: var(--space-4); margin: clamp(40px, 5vw, 72px) 0 0; }
.plastic-group-head--spaced { margin-top: clamp(64px, 8vw, 120px); }
.plastic-group-kicker { font-family: var(--font-family-heading); font-size: var(--font-size-3xl); font-weight: 600; color: var(--color-accent-gold-500); line-height: 1; }
.plastic-group-title { font-family: var(--font-family-heading); font-size: var(--font-size-3xl); color: var(--color-ink); margin: 0; }
.plastic-group-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(212,175,55,0.6), rgba(212,175,55,0)); }

/* ---------- Rows ---------- */
.plastic-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(32px, 5vw, 64px);
  padding: clamp(10px, 1.2vw, 16px);
  background: var(--color-bg-surface);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: calc(var(--radius-2xl) + 6px);
  box-shadow: 0 14px 40px -18px rgba(15, 23, 42, 0.18);
}
.plastic-row::before {
  content: ""; position: absolute; inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-2xl); pointer-events: none;
}
.plastic-row-media {
  margin: 0; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--color-bg-surface-elevated);
}
.plastic-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.plastic-row:hover .plastic-row-media img { transform: scale(1.04); }
.plastic-row-body { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.plastic-row.is-flipped .plastic-row-media { order: 2; }
.plastic-row.is-flipped .plastic-row-body { order: 1; }
.plastic-row-meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.plastic-row-num { font-family: var(--font-family-heading); font-size: var(--font-size-3xl); font-weight: 600; line-height: 1; color: var(--color-accent-gold-500); }
.plastic-row-tag {
  display: inline-flex; align-items: center; padding: 3px 12px;
  border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 999px;
  background: rgba(212, 175, 55, 0.08); color: var(--color-accent-gold-600);
  font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.plastic-row-title { font-family: var(--font-family-heading); font-size: var(--font-size-2xl); color: var(--color-ink); line-height: 1.2; margin: 0 0 var(--space-3); }
.plastic-row-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plastic-row-list li { position: relative; padding-left: 24px; font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.5; }
.plastic-row-list li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--color-accent-gold-500); }
.plastic-row-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent-gold-600); text-decoration: none; transition: color var(--transition-normal), gap var(--transition-normal); margin-top: var(--space-1); }
.plastic-row-link:hover { color: var(--color-accent-gold-500); gap: var(--space-3); }
.plastic-row-arrow { display: inline-block; width: 22px; height: 2px; background: currentColor; position: relative; }
.plastic-row-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

.plastic-cta { text-align: center; margin-top: var(--space-14); }

/* RTL mirroring */
[dir="rtl"] .plastic-row-list li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .plastic-row-list li::before { left: auto; right: 0; }
[dir="rtl"] .plastic-row-arrow::after { right: auto; left: 0; transform: rotate(-135deg); }

/* Responsive */
@media (max-width: 1024px) {
  .plastic-hero { min-height: 62vh; }
  .plastic-hero-label { font-size: var(--font-size-2xl); }
}
@media (max-width: 760px) {
  .plastic-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .plastic-row.is-flipped .plastic-row-media,
  .plastic-row.is-flipped .plastic-row-body { order: initial; }
  .plastic-group-title { font-size: var(--font-size-2xl); }
}

/* ==========================================================================
   Internal Pages Styling (High Fidelity Luxury)
   ========================================================================== */

.page-banner {
  padding-top: var(--space-20);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border-accent);
}

.page-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  color: var(--color-bg-base);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.page-description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  max-width: 680px;
  line-height: var(--line-height-relaxed);
}

/* Services Catalog Page */
.section-services-catalog {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y-lg);
  background: var(--color-bg-base);
}

.service-detail-card {
  padding: var(--space-10);
  margin-bottom: var(--space-10);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-10);
  align-items: center;
}

.detail-tag {
  font-size: var(--font-size-xs);
  color: var(--color-accent-gold-600);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.detail-title {
  font-size: var(--font-size-3xl);
  color: var(--color-ink);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.detail-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

.detail-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-size: var(--font-size-xs);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

.media-box-luxury {
  position: relative;
  min-height: 240px;
  background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-accent);
  display: flex;
  align-items: flex-end;
  padding: var(--space-6);
  overflow: hidden;
}

.detail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.media-box-luxury .media-badge {
  position: relative;
  z-index: 1;
}

.media-badge {
  font-size: var(--font-size-xs);
  padding: 0.4rem 1rem;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--color-accent-gold-500);
  color: var(--color-accent-gold-500);
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Doctors Grid */
.section-doctors-list {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y-lg);
  background: var(--color-bg-base);
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}

.doctor-card-luxury {
  padding: var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.doctor-avatar-box {
  width: 80px;
  height: 80px;
  background: var(--color-bg-surface-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-4);
}

.doctor-name {
  font-size: var(--font-size-xl);
  color: var(--color-ink);
  margin-bottom: 2px;
}

.doctor-title {
  font-size: var(--font-size-xs);
  color: var(--color-accent-gold-600);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-4);
}

.doctor-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.meta-tag {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.doctor-accreditation {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.btn-doctor-consult {
  width: 100%;
  padding: 0.75rem;
  background: var(--color-primary-800);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-doctor-consult:hover {
  background: var(--color-accent-gold-600);
  color: var(--color-primary-900);
}

/* Testimonials Catalog */
.section-testimonials-catalog {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y-lg);
  background: var(--color-bg-base);
}

.testimonials-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-8);
}

.journey-card {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}

.journey-rating {
  color: var(--color-accent-gold-500);
  margin-bottom: var(--space-4);
}

.journey-quote {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.journey-author .author-name {
  font-size: var(--font-size-base);
  color: var(--color-ink);
}

.author-location {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.treatment-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  padding: 0.2rem 0.6rem;
  background: var(--color-accent-gold-100);
  color: var(--color-accent-gold-700);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
}

/* About Story */
.section-about-story {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y-lg);
  background: var(--color-bg-base);
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-12);
  align-items: center;
}

.story-stats-card {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--color-primary-800);
  color: var(--color-text-inverse);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.stat-num {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold-500);
  min-width: 80px;
}

.stat-text {
  font-size: var(--font-size-sm);
  color: var(--color-bg-base);
}

@media (max-width: 1024px) {
  .detail-grid, .about-story-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page-banner {
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);
  }

  .page-title {
    font-size: var(--font-size-3xl);
  }

  .service-detail-card {
    padding: var(--space-6);
  }

  .detail-grid {
    gap: var(--space-6);
  }

  .doctors-grid,
  .testimonials-catalog-grid {
    gap: var(--space-5);
  }

  .doctor-card-luxury,
  .journey-card {
    padding: var(--space-6);
  }

  .section-services-catalog,
  .section-doctors-list,
  .section-about-story,
  .section-testimonials-catalog {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .stat-num {
    font-size: var(--font-size-2xl);
    min-width: 60px;
  }
}

/* ==========================================================================
   Treatment pages (.tr-) — one real page per operation.
   Inserted between the service-group pages and the contact page, so it borrows
   their palette: violet grounds, champagne-gold rules, cream surfaces.
   All spacing uses logical properties so Arabic mirrors without overrides.
   ========================================================================== */

.page-treatment {
  background: var(--color-bg-base);
}

/* ---------- Hero ---------- */
.tr-hero {
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-950));
  color: var(--color-text-inverse);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.tr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.tr-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.6);
  margin-block-end: 1.25rem;
}

.tr-crumbs a {
  color: var(--color-accent-gold-400);
  text-decoration: none;
}

.tr-crumbs a:hover {
  text-decoration: underline;
}

.tr-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-gold-500);
  padding-block-end: 0.55rem;
  border-block-end: 1px solid var(--color-accent-gold-600);
  margin-block-end: 1.1rem;
}

.tr-title {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 1rem;
  color: #fff;
}

.tr-lead {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.85;
  color: rgba(248, 250, 252, 0.82);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}

.tr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-block-end: 2rem;
}

.tr-ghost-link {
  color: rgba(248, 250, 252, 0.85);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-block-end: 1px solid rgba(212, 175, 55, 0.45);
  padding-block-end: 2px;
}

.tr-ghost-link:hover {
  color: var(--color-accent-gold-400);
}

.tr-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(248, 250, 252, 0.14);
}

.tr-stat dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.55);
  margin-block-end: 0.35rem;
}

.tr-stat dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-accent-gold-400);
}

.tr-hero-media {
  margin: 0;
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.tr-hero-media img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 460px);
  object-fit: cover;
  border-radius: 2px;
}

/* ---------- Shared section shell ---------- */
.tr-section {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.tr-section:nth-of-type(even) {
  background: var(--color-bg-surface);
}

.tr-h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0 0 1rem;
}

.tr-body {
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
  margin: 0;
}

.tr-two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.tr-col-head .tr-h2 {
  position: relative;
  padding-block-end: 0.9rem;
}

.tr-col-head .tr-h2::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 64px;
  height: 2px;
  background: var(--color-accent-gold-500);
}

/* ---------- Candidate list ---------- */
.tr-checks {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.tr-checks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.tr-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-block-start: 2px;
  border-radius: 50%;
  border: 1px solid var(--color-border-accent);
  color: var(--color-accent-gold-600);
}

.tr-check svg {
  width: 12px;
  height: 12px;
}

.tr-note {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--color-border-accent);
}

/* ---------- Technique cards ---------- */
.tr-techniques {
  background: var(--color-bg-surface-elevated);
}

.tr-section-head {
  max-width: 62ch;
  margin-block-end: 2rem;
}

.tr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.tr-card {
  position: relative;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-block-start: 2px solid var(--color-accent-gold-500);
  border-radius: 3px;
  padding: 1.5rem 1.35rem;
}

.tr-card-num {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-accent-gold-600);
  margin-block-end: 0.65rem;
}

.tr-card-title {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 0.6rem;
}

.tr-card-text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Journey timeline ---------- */
.tr-timeline {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.tr-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--color-border-light);
}

.tr-step:last-child {
  border-block-end: 1px solid var(--color-border-light);
}

.tr-step-num {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent-gold-600);
  padding-block-start: 2px;
}

.tr-step-title {
  font-size: 1.02rem;
  color: var(--color-ink);
  margin: 0 0 0.4rem;
}

/* ---------- Risks ---------- */
.tr-risks {
  background: var(--color-bg-surface);
}

.tr-risks-head {
  max-width: 62ch;
  margin-block-end: 1.5rem;
}

.tr-risk-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.6rem 2rem;
}

.tr-risk-list li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.tr-risk-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-gold-600);
}

.tr-note-strong {
  color: var(--color-text-primary);
  max-width: 78ch;
}

/* ---------- FAQ ---------- */
.tr-faq-list {
  margin-block-start: 1.5rem;
  border-block-start: 1px solid var(--color-border-light);
}

.tr-faq-item {
  border-block-end: 1px solid var(--color-border-light);
}

.tr-faq-item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding-block: 1.1rem;
  padding-inline-end: 2.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

.tr-faq-item summary::-webkit-details-marker {
  display: none;
}

.tr-faq-item summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0.95rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-accent-gold-600);
  transition: transform 200ms ease;
}

.tr-faq-item[open] summary::after {
  content: "−";
}

.tr-faq-item summary:hover {
  color: var(--color-accent-gold-700);
}

.tr-faq-item p {
  padding-block-end: 1.15rem;
  max-width: 82ch;
}

/* ---------- CTA ---------- */
.tr-cta {
  background: linear-gradient(120deg, var(--color-primary-800), var(--color-primary-600));
  color: var(--color-text-inverse);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.tr-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.tr-cta-title {
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  margin: 0 0 0.5rem;
  color: #fff;
}

.tr-cta-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(248, 250, 252, 0.78);
  max-width: 60ch;
}

/* ---------- Disclaimer ---------- */
.tr-disclaimer {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  padding-block: 1.5rem 2rem;
  max-width: 90ch;
}

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .tr-hero-grid,
  .tr-two-col {
    grid-template-columns: minmax(0, 1fr);
  }

  .tr-hero-media {
    order: -1;
  }

  .tr-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .tr-stat dd {
    font-size: 0.92rem;
  }

  .tr-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.9rem;
  }

  .tr-cta-inner {
    align-items: flex-start;
  }
}

/* Motion: keep the hero from animating when the visitor asked it not to. */
@media (prefers-reduced-motion: reduce) {
  .tr-faq-item summary::after {
    transition: none;
  }
}

/* ---------- Index of a group's treatment pages ---------- */
.tr-index {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  background: var(--color-bg-surface);
  border-block-start: 1px solid var(--color-border-light);
}

.tr-index-title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--color-ink);
  margin: 0 0 1.5rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--color-border-accent);
  display: inline-block;
}

a.tr-card-link {
  display: block;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}

a.tr-card-link:hover,
a.tr-card-link:focus-visible {
  border-block-start-color: var(--color-accent-gold-700);
  transform: translateY(-2px);
}

.tr-card-more {
  display: inline-block;
  margin-block-start: 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-gold-700);
}

@media (prefers-reduced-motion: reduce) {
  a.tr-card-link:hover {
    transform: none;
  }
}

/* ==========================================================================
   404 / Not Found Page
   ========================================================================== */

.page-notfound {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-primary-900);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.notfound-code {
  display: block;
  font-size: 6rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-accent-gold-500);
}

.notfound-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  color: var(--color-bg-base);
  margin: var(--space-4) 0;
}

.notfound-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 auto var(--space-8);
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Footer Layout (High Fidelity Luxury Styling)
   ========================================================================== */

.site-footer {
  background-color: var(--color-primary-900);
  color: var(--color-text-inverse);
  padding-top: var(--space-20);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-border-accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.footer-brand .brand-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.accreditation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.badge-tag {
  font-size: var(--font-size-xs);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  color: var(--color-accent-gold-500);
  background: rgba(212, 175, 55, 0.05);
  font-weight: var(--font-weight-medium);
}

.footer-heading {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-gold-500);
  margin-bottom: var(--space-6);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-bg-base);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.contact-link {
  font-size: var(--font-size-sm);
  color: var(--color-bg-base);
  font-weight: var(--font-weight-medium);
}

.contact-link:hover {
  color: var(--color-accent-gold-500);
}

/* WhatsApp call-to-action (footer + contact channels) — subtle luxury pill */
.footer-whatsapp,
.channel-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.45);
  color: #25D366 !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.footer-whatsapp:hover,
.channel-whatsapp:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.8);
  transform: translateY(-1px);
}
.footer-whatsapp .whatsapp-badge,
.channel-whatsapp .whatsapp-badge {
  display: inline-flex;
  color: #25D366;
}

/* Floating WhatsApp bubble — a real support agent's face instead of the glyph,
   so the visitor sees a person waiting to answer, not a logo. The green ring and
   the small corner glyph keep the WhatsApp cue unmistakable at any size. */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  width: 60px;
  height: 60px;
  text-decoration: none;
}
.whatsapp-float-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px solid #25d366;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, 0.55), 0 2px 10px rgba(15, 23, 42, 0.18);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.whatsapp-float-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.whatsapp-float-glyph {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}
.whatsapp-float-glyph svg { width: 11px; height: 11px; }

/* A soft "someone is online" ripple — motion that reads as availability rather
   than decoration. */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0% { transform: scale(0.94); opacity: 0.7; }
  70% { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}
.whatsapp-float:hover .whatsapp-float-photo {
  transform: translateY(-3px) scale(1.04);
}

@media (max-width: 640px) {
  .whatsapp-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .whatsapp-float-glyph { width: 18px; height: 18px; }
  .whatsapp-float-glyph svg { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::before { animation: none; opacity: 0; }
  .whatsapp-float:hover .whatsapp-float-photo { transform: none; }
}

.contact-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Ministry of Health / Health Türkiye trust badge lives in the header (see header.css) */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.legal-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.legal-links a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.legal-links a:hover {
  color: var(--color-accent-gold-500);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .site-footer {
    padding-top: var(--space-16);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}
/* ---------------------------------------------------------------------------
   Proactive greeting beside the WhatsApp button.
   Sits just above the avatar, talks about the page the visitor is on, and is
   dismissible. Hidden by default and only opened by the motion layer, so it can
   never obscure the page for a crawler or a no-JS visitor.
   --------------------------------------------------------------------------- */
.wa-teaser {
  position: fixed;
  right: 20px;
  bottom: 98px;
  width: min(286px, calc(100vw - 40px));
  display: flex;
  gap: 10px;
  padding-block: 12px;
  padding-inline: 12px 34px; /* the close button lives on the inline end */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 42px -18px rgba(15, 23, 42, 0.45), 0 2px 10px rgba(15, 23, 42, 0.07);
  z-index: 998;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.wa-teaser[hidden] { display: none; }
.wa-teaser.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* the little tail pointing down at the avatar button */
.wa-teaser::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: -6px;
  width: 13px;
  height: 13px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}
.wa-teaser-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #25d366;
}
.wa-teaser-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-teaser-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wa-teaser-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-gold-600);
}
html[dir="rtl"] .wa-teaser-name { letter-spacing: 0; }
.wa-teaser-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1f2937;
}
.wa-teaser-close {
  position: absolute;
  top: 7px;
  inset-inline-end: 7px; /* stays opposite the avatar in both LTR and RTL */
  z-index: 2;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.wa-teaser-close:hover { background: rgba(15, 23, 42, 0.12); color: #0f172a; }
/* whole bubble opens WhatsApp; the close button sits above this layer */
.wa-teaser-open { position: absolute; inset: 0; z-index: 1; border-radius: 16px; }

.wa-teaser-dots { display: none; gap: 3px; align-items: center; height: 18px; }
.wa-teaser.is-typing .wa-teaser-dots { display: flex; }
.wa-teaser.is-typing .wa-teaser-text { display: none; }
.wa-teaser-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94a3b8;
  animation: wa-dot 1.1s infinite;
}
.wa-teaser-dots i:nth-child(2) { animation-delay: 0.15s; }
.wa-teaser-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wa-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 640px) {
  .wa-teaser {
    right: 16px;
    bottom: 84px;
    width: min(272px, calc(100vw - 32px));
    padding-block: 11px;
    padding-inline: 11px 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-teaser { transition: none; transform: none; }
  .wa-teaser-dots i { animation: none; opacity: 0.6; }
}

/* ==========================================================================
   RTL → LTR support — smooth, readable layout when switching to Arabic (or
   any RTL language). The <html dir="rtl"> attribute + this stylesheet keep
   text, alignment, icons and spacing correct so translation reads naturally.
   ========================================================================== */

/* Base direction handled by the <html dir> attribute already. These rules
   fix RTL-specific alignment quirks so Arabic reads comfortably. */

html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  text-align: right;
}

/* Keep numbers/digits readable in RTL paragraphs */
html[dir="rtl"] .stat-row,
html[dir="rtl"] .trust-value,
html[dir="rtl"] .service-number,
html[dir="rtl"] .legal-index {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

/* Center-aligned sections stay centered */
html[dir="rtl"] .section-header,
html[dir="rtl"] .text-center,
html[dir="rtl"] .hero-content,
html[dir="rtl"] .legal-statement,
html[dir="rtl"] .health-turkiye-wrap {
  text-align: center;
}

/* Flex rows flip naturally; ensure any that should flip do */
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .hero-trust-bar,
html[dir="rtl"] .card-header-meta,
html[dir="rtl"] .feature-chip,
html[dir="rtl"] .lang-btn {
  flex-direction: row;
}

/* Comfortable line-height for long translated paragraphs */
html[dir="rtl"] .section-description,
html[dir="rtl"] .service-description,
html[dir="rtl"] .detail-text,
html[dir="rtl"] .legal-paragraph,
html[dir="rtl"] .brand-description {
  line-height: 1.9;
}

/* Arrow glyphs in buttons should point left in RTL */
html[dir="rtl"] .arrow {
  transform: rotate(180deg);
  display: inline-flex;
}

/* Icons next to text should sit on the correct side automatically via
   flex direction; keep spacing comfortable */
html[dir="rtl"] .btn-luxury-gold,
html[dir="rtl"] .link-luxury {
  gap: var(--space-2);
}


/* ==========================================================================
   Motion layer — progressive enhancement ONLY
   --------------------------------------------------------------------------
   Nothing here hides a single pixel unless JavaScript has added the class
   .motion-ready to <html>. That means:
     • the pre-rendered HTML Google crawls is always fully visible,
     • a visitor with JS blocked still sees the complete page,
     • the animation is a bonus, never a requirement.

   Transforms use the individual `translate` / `scale` properties instead of
   `transform`, because the components already animate `transform` on hover
   (card lift, button rise). Sharing one property would let the reveal rule win
   on specificity and silently kill every hover effect on the site.
   ========================================================================== */

html.motion-ready [data-reveal] {
  opacity: 0;
  translate: 0 var(--reveal-y, 40px);
  will-change: opacity, translate;
  transition:
    opacity var(--reveal-dur, 900ms) cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    translate var(--reveal-dur, 900ms) cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    scale var(--reveal-dur, 900ms) cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

html.motion-ready [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

/* Images drift less and settle from a very slight zoom — the classic
   editorial "the photo was already there" feel. */
html.motion-ready [data-reveal="image"] {
  --reveal-y: 20px;
  --reveal-dur: 1100ms;
  scale: 1.06;
}

html.motion-ready [data-reveal="image"].is-visible {
  scale: 1;
}

/* --------------------------------------------------------------------------
   Reading-progress bar — a 2px gold hairline that fills as the visitor scrolls.
   Gold on obsidian: reads as "expensive" without adding visual noise.
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9998;
  pointer-events: none;
  background: transparent;
}

.scroll-progress__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #b89535 0%, #d4af37 45%, #f2d98a 100%);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.75), 0 1px 3px rgba(0, 0, 0, 0.45);
}

html[dir="rtl"] .scroll-progress__fill {
  transform-origin: 100% 50%;
}

/* --------------------------------------------------------------------------
   Gold buttons: a single specular sweep on hover, clipped to the button.
   -------------------------------------------------------------------------- */
html.motion-ready .btn-luxury-gold,
html.motion-ready .btn-hero-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html.motion-ready .btn-luxury-gold::after,
html.motion-ready .btn-hero-primary::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.42) 47%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.42) 53%,
    transparent 66%
  );
  translate: -130% 0;
  transition: translate 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-ready .btn-luxury-gold:hover::after,
html.motion-ready .btn-hero-primary:hover::after {
  translate: 130% 0;
}

html[dir="rtl"].motion-ready .btn-luxury-gold::after,
html[dir="rtl"].motion-ready .btn-hero-primary::after {
  translate: 130% 0;
}

html[dir="rtl"].motion-ready .btn-luxury-gold:hover::after,
html[dir="rtl"].motion-ready .btn-hero-primary:hover::after {
  translate: -130% 0;
}

/* --------------------------------------------------------------------------
   Hero photograph: a slow push-in on hover.
   -------------------------------------------------------------------------- */
html.motion-ready .hero-card-luxury .hero-card-img {
  transition: scale 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.motion-ready .hero-card-luxury:hover .hero-card-img {
  scale: 1.05;
}

/* --------------------------------------------------------------------------
   Ambient life: everything below is decoration and is switched off completely
   for visitors who asked their device to reduce motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .badge-dot {
    animation: pl-badge-pulse 2600ms ease-in-out infinite;
  }

  html.motion-ready .hero-backdrop-glow {
    animation: pl-glow-drift 16s ease-in-out infinite alternate;
  }
}

@keyframes pl-badge-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55);
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 7px rgba(212, 175, 55, 0);
    opacity: 0.75;
  }
}

@keyframes pl-glow-drift {
  from {
    translate: 0 0;
    opacity: 0.85;
  }
  to {
    translate: -34px 26px;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Hard stop. A visitor who set "reduce motion" in their OS gets the finished
   page immediately: no reveals, no sweeps, no pulsing.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal="image"] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    transition: none !important;
    animation: none !important;
  }

  html.motion-ready .btn-luxury-gold::after,
  html.motion-ready .btn-hero-primary::after {
    display: none;
  }
}

/* ==========================================================================
   Phase 2 — smooth scroll, counters, swipeable carousel
   ========================================================================== */

/* Lenis drives the scroll position itself; native smooth scrolling would fight
   it. Also lets anchor jumps stay instant while the script is in charge. */
html.has-smooth-scroll {
  scroll-behavior: auto;
}

/* The number that counts up must not jitter the line while its width changes. */
.trust-value.is-counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The carousel is draggable with a finger or the mouse. */
#carousel-stage {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
#carousel-stage.is-dragging {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  #carousel-stage { cursor: default; }
}

/* ==========================================================================
   Phase 3 — the gold rule
   A hairline under each section title that draws itself out from the centre as
   the heading arrives, plus a small dash beside the eyebrow label.

   Both are VISIBLE BY DEFAULT and only collapsed once JavaScript has marked the
   header for reveal. A visitor without JS, or a crawler, therefore sees a
   finished static rule instead of an empty gap — the same rule as the rest of
   the motion layer: enhancement, never a precondition.
   ========================================================================== */
.section-header .section-title::after {
  content: "";
  display: block;
  width: min(88px, 42%);
  height: 2px;
  margin: var(--space-4) auto 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent-gold-500) 22%,
    var(--color-accent-gold-500) 78%,
    transparent 100%
  );
  transform: scaleX(1);
  transform-origin: center;
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

.section-header .section-subtitle::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-inline-end: 0.6rem;
  vertical-align: middle;
  background: var(--color-accent-gold-500);
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

html[dir="rtl"] .section-header .section-subtitle::before { transform-origin: right; }
html[dir="ltr"] .section-header .section-subtitle::before { transform-origin: left; }

/* Collapsed only once the motion layer has taken responsibility for it. */
.section-header[data-reveal] .section-title::after { transform: scaleX(0); }
.section-header[data-reveal] .section-subtitle::before { transform: scaleX(0); }

.section-header.is-visible .section-title::after,
.section-header.is-visible .section-subtitle::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .section-header .section-title::after,
  .section-header .section-subtitle::before,
  .section-header[data-reveal] .section-title::after,
  .section-header[data-reveal] .section-subtitle::before {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Platinya Clinic — Main Stylesheet
   ========================================================================== */

/* 1. Abstracts */

/* 2. Base */

/* 3. Layout */

/* RTL support — must come last so it can override layout rules */

/* 4. Utilities */

/* 5. Motion — progressive enhancement, loaded last so it never overrides layout */


/*# sourceMappingURL=styles.d343173733eaf0e0486e.css.map*/