/* ============================================================
ISLAND HOSPITAL — STYLES v10
Unified Stylesheet: v9 Design Language + Full v7 Coverage
Theme: Luxury Medical Editorial
Palette: Deep Forest Teal · Warm Ivory · Gold Accent
============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Core brand & surface */
  --color-brand-deep: #0a3d3a;              /* forest */
  --color-brand-main: #0f5c57;              /* teal */
  --color-brand-mid: #1a7a73;               /* teal-mid */
  --color-brand-bright: #2ea89e;            /* teal-lt */
  --color-brand-tint: #d4f0ed;              /* teal-xlt */
  --color-accent-gold: #c5973b;             /* gold */
  --color-accent-gold-soft: #e8c97a;        /* gold-lt */
  --color-surface-muted: #f7f3ec;           /* cream */
  --color-surface-base: #fdfaf4;            /* ivory */
  --color-surface-plain: #ffffff;           /* white */
  --color-text-main: #1a1a1a;               /* ink */
  --color-text-muted: #3d3d3d;              /* ink-mid */
  --color-text-subtle: #6b7280;             /* ink-soft */
  --color-border-subtle: #e5ded3;           /* border */

  /* Legacy compatibility aliases */
  --color-primary: var(--color-brand-main);
  --color-secondary: var(--color-brand-main);
  --color-accent: var(--color-accent-gold);
  --color-bg: var(--color-surface-base);
  --color-bg-soft: var(--color-surface-muted);
  --color-text: var(--color-text-muted);
  --color-heading: var(--color-brand-deep);
  --color-border: var(--color-border-subtle);
  --color-title: var(--color-brand-deep);
  --color-subtitle: var(--color-brand-deep);
  --color-subtitle2: var(--color-text-subtle);
  --color-footer: var(--color-brand-deep);
  --subtext-color: var(--color-text-subtle);
  --color-card-bg: #ffffff;
  --color-card-border: #e5ded3;
  --color-card-border-strong: #e5ded3;
  --shadow-card-color: rgba(10,61,58,0.08);
  --color-card-accent: #0f5c57;
  --color-accent-teal: #2ea89e;
  --color-brand-deep-alt: #0a3d3a;
  --color-neutral-muted: #6b7280;
  --color-surface-tint: #d4f0ed;
  --color-surface-tint-soft: #f7f3ec;
  --white-06transparent: rgba(255,255,255,0.06);
  --white-10transparent: rgba(255,255,255,0.1);
  --white-15transparent: rgba(255,255,255,0.15);
  --white-45transparent: rgba(255,255,255,0.45);
  --white-60transparent: rgba(255,255,255,0.6);
  --white-65transparent: rgba(255,255,255,0.65);
  --white-70transparent: rgba(255,255,255,0.7);
  --white-75transparent: rgba(255,255,255,0.75);
  --white-85transparent: rgba(255,255,255,0.85);
  --white-88transparent: rgba(255,255,255,0.88);
  --white-92transparent: rgba(255,255,255,0.92);
  --white-07transparent: rgba(255,255,255,0.07);
  --white-12transparent: rgba(255,255,255,0.12);
  --black-05transparent: rgba(0,0,0,0.05);
  --black-08transparent: rgba(0,0,0,0.08);
  --black-10transparent: rgba(0,0,0,0.1);
  --black-12transparent: rgba(0,0,0,0.12);
  --black-18transparent: rgba(0,0,0,0.18);
  --black-20transparent: rgba(0,0,0,0.2);
  --black-25transparent: rgba(0,0,0,0.25);
  --black-30transparent: rgba(0,0,0,0.3);
  --brand-deep-04transparent: rgba(10,61,58,0.04);
  --brand-deep-06transparent: rgba(10,61,58,0.06);
  --brand-deep-08transparent: rgba(10,61,58,0.08);
  --brand-deep-10transparent: rgba(10,61,58,0.1);
  --brand-deep-12transparent: rgba(10,61,58,0.12);
  --brand-deep-15transparent: rgba(10,61,58,0.15);
  --brand-deep-18transparent: rgba(10,61,58,0.18);
  --brand-deep-20transparent: rgba(10,61,58,0.2);
  --brand-deep-25transparent: rgba(10,61,58,0.25);
  --brand-deep-30transparent: rgba(10,61,58,0.3);
  --brand-deep-35transparent: rgba(10,61,58,0.35);
  --brand-deep-40transparent: rgba(10,61,58,0.4);
  --brand-deep-55transparent: rgba(10,61,58,0.55);
  --brand-deep-70transparent: rgba(10,61,58,0.7);
  --brand-deep-75transparent: rgba(10,61,58,0.75);
  --accent-gold-15transparent: rgba(197,151,59,0.15);
  --accent-gold-35transparent: rgba(197,151,59,0.35);
  --accent-gold-40transparent: rgba(197,151,59,0.4);
  --brand-bright-12transparent: rgba(46,168,158,0.12);
  --social-whatsapp: #25d366;
  --social-whatsapp-hover: #1ebc57;
  --social-whatsapp-40transparent: rgba(37,211,102,0.4);
  --social-whatsapp-55transparent: rgba(37,211,102,0.55);
  --social-whatsapp-60transparent: rgba(37,211,102,0.6);
  --social-facebook: #1877f2;
  --social-facebook-hover: #145cc2;

  /* Typography */
  /*  --ff-display: 'Playfair Display', Georgia, serif; */
  --ff-display: 'Arimo', Arial, sans-serif;
  --ff-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Border Radius Scale */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Shadow Scale */
  --shadow-card: 0 2px 16px var(--brand-deep-08transparent, rgba(10,61,58,0.08));
  --shadow-hover: 0 8px 32px var(--brand-deep-15transparent);
  --shadow-pop: 0 20px 60px var(--brand-deep-18transparent, rgba(10,61,58,0.18));
}

/* ── RESET & BASE ───────────────────────────────────────────── */
*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--color-surface-base);
  color: var(--color-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--ff-display); font-weight: 600; line-height: 1.2; }
h4, h5 { font-family: var(--ff-body); font-weight: 600; }
p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 1em;
}
p:last-child { margin-bottom: 0; }
section { margin-bottom: 4px; }

/* ── CONTAINER ─────────────────────────────────────────────── */
.container { max-width: 680px; margin: 0 auto; padding: 0 20px; }

/* ── TYPOGRAPHY HELPERS ─────────────────────────────────────── */
h1.title {
  font-family: var(--ff-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-brand-deep);
  text-align: center;
  margin: 8px 0 4px;
  letter-spacing: -0.02em;
}

/* .title used on non-h1 elements */
.title {
  font-family: var(--ff-display);
  margin-top: 12px;
  font-size: 1.25rem;
  color: var(--color-brand-deep);
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h3.subtitle {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-brand-mid);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.subtitle {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--color-brand-mid);
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.subtitle2 { font-size: 0.85rem; color: var(--color-text-subtle); margin-bottom: 6px; }
.subheadline { font-size: 1.05rem; color: var(--color-text-muted); margin-bottom: 24px; line-height: 1.6; }
.text-center { text-align: center; }

/* ── LISTS ─────────────────────────────────────────────────── */
ul, ol { margin: 0 0 1em 1.2em; padding: 0; line-height: 1.6; }
ul li, ol li { margin-bottom: 6px; color: var(--color-text-muted); font-size: 0.92rem; }
ul li::marker { color: var(--color-brand-bright); }
ol li::marker { color: var(--color-brand-bright); font-weight: 600; }
ul ul, ol ol { margin-top: 0.4em; margin-bottom: 0.4em; }
li a { color: var(--color-brand-mid); text-decoration: none; }
li a:hover { text-decoration: underline; }
.list-clean { list-style: none; margin: 0; padding: 0; }
.list-clean li { margin: 6px 0; padding: 4px 0; border-bottom: 1px solid var(--color-card-border-strong); }
.list-clean li:last-child { border-bottom: none; }
.list-clean a { text-decoration: none; color: var(--color-text-muted); font-size: 0.95rem; transition: color 0.2s; }
.list-clean a:hover { color: var(--color-brand-bright); }
.list-inline { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.list-inline li { margin: 0; padding: 0; }
.list-inline a { text-decoration: none; color: var(--color-brand-mid); font-weight: 500; }
.list-inline a:hover { text-decoration: underline; }

/* =========================
GLOBAL and LOCAL HEADER
========================= */

.menu-bar{width:100%;background:var(--color-brand-deep);overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;z-index:1;}
.menu-bar::-webkit-scrollbar{display:none;}
.menu-container{display:flex;gap:0;padding:0 20px;max-width:640px;margin:0 auto;}
:root{--global-header-gap:160px;--global-header-height:52px;--surface-frosted:rgba(248,250,250,.88);--brand-muted-05:rgba(74,74,74,.05);--brand-muted-08:rgba(74,74,74,.08);--brand-muted-58:rgba(74,74,74,.58);--shadow-dropdown:rgba(0,0,0,.14);}
.global-header{width:100%;position:relative;z-index:5000;background:var(--surface-frosted);border-bottom:1px solid var(--brand-muted-05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:.84;transition:opacity .25s ease;overflow:visible;}
.global-header:hover{opacity:1;}
.global-header-inner{max-width:1400px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;position:relative;}
.global-logo{flex:0 0 auto;font-family:var(--ff-body);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-subtle);}
.global-logo span{color:var(--color-brand-mid);}
.global-nav{display:flex;gap:24px;margin-left:var(--global-header-gap);flex:0 0 auto;}
.global-nav a{font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-muted-58);transition:color .2s ease;}
.global-nav a:hover{color:var(--color-brand-main);}
.global-menu-toggle{display:none;}
.global-toggle{display:none;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--color-text-subtle);}

@media (max-width:768px){
:root{--global-header-gap:0;}
.global-header{z-index:9999;}
.global-header-inner{width:100%;padding:12px 18px;display:flex;align-items:center;justify-content:flex-start;position:relative;}
.global-logo{flex:1;margin:0;}
.global-toggle{display:block;margin-left:auto;flex:0 0 auto;z-index:10001;}
.global-nav{display:none;position:absolute;top:100%;right:18px;margin-left:0;flex-direction:column;gap:14px;padding:18px;background:var(--color-surface-plain);border:1px solid var(--brand-muted-08);border-radius:14px;box-shadow:0 14px 36px var(--shadow-dropdown);min-width:230px;z-index:10000;}
.global-menu-toggle:checked~.global-nav{display:flex;}
.global-nav a{font-size:.72rem;}
}

.local-header{position:sticky;top:0;z-index:300;width:100%;background:var(--white-92transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border-subtle);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-family:var(--ff-display);font-size:1.1rem;font-weight:700;color:var(--color-brand-deep);letter-spacing:-.01em;}
.logo span{color:var(--color-accent-gold);}

/* ── LEGACY HEADER ──── 
header{position:sticky;top:0;z-index:200;width:100%;background:var(--white-92transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border-subtle);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;} */
header input[type="search"]{flex:1;max-width:400px;margin:0 12px;padding:6px 12px;border-radius:20px;border:1px solid var(--color-border-subtle);background:var(--color-surface-muted);font-size:.9rem;font-family:var(--ff-body);color:var(--color-text-main);outline:none;transition:border-color .2s;}
header input[type="search"]:focus{border-color:var(--color-brand-bright);}


/* ── MENU BAR ───────────────────────────────────────────────── */
.menu-bar {
  width: 100%;
  background: var(--color-brand-deep);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.menu-bar::-webkit-scrollbar { display: none; }

.menu-container {
  display: flex;
  gap: 0;
  padding: 0 20px;
  max-width: 640px;
  margin: 0 auto;
}

.menu-item {
  color: var(--white-65transparent);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 18px;
  flex: 0 0 auto;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.menu-item:hover,
.menu-item.active {
  color: var(--color-accent-gold-soft);
  border-bottom-color: var(--color-accent-gold);
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.layout {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 20px;
  margin-top: 0;
  padding: 24px 16px;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  gap: 0;
}

aside { display: none; flex: 0 0 220px; max-width: 220px; }

@media (min-width: 1000px) {
  aside { display: flex; flex-direction: column; }
  .layout { align-items: flex-start; }
}

/* ── SECTION TAG & HEADER ───────────────────────────────────── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  margin-bottom: 12px;
}
.section-tag::before { content: ''; width: 20px; height: 1.5px; background: var(--color-accent-gold); }

.section-header { margin-bottom: 28px; }
.section-header h2,
.section-header h3 {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-brand-deep);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.section-header p { color: var(--color-text-subtle); font-size: 0.9rem; }

.card-tag {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-mid);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* ── HERO VARIANTS ──────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}

/* Hero with background image (primary) */
.hero-image-bg {
  background-size: cover;
  background-position: center;
  color: var(--color-surface-plain);
  text-align: center;
  padding: 80px 24px 60px;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    var(--brand-deep-75transparent) 0%,
    var(--brand-deep-40transparent) 50%,
    var(--accent-gold-35transparent) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 0 auto;
}
.hero-content h1,
.hero-content h2 {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-surface-plain);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 0 2px 12px var(--black-30transparent, rgba(0,0,0,0.3));
}

.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-gold-soft);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-accent-gold-soft);
  opacity: 0.7;
}

.hero p.subheadline {
  font-size: 1.05rem;
  color: var(--white-85transparent);
  margin-bottom: 24px;
  line-height: 1.65;
}

/* Hero Simple (light bg) */
.hero-simple {
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 60px 24px;
  text-align: center;
}
.hero-simple h1 { font-size: 2rem; color: var(--color-brand-deep); margin-bottom: 12px; }
.hero-simple p.subheadline { color: var(--color-text-muted); font-size: 1rem; margin-bottom: 24px; }

.hero-simple .cta-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--color-brand-mid);
  color: var(--color-surface-plain);
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hero-simple .cta-btn:hover {
  background: var(--color-brand-deep);
  transform: translateY(-2px);
}

/* Hero Gradient */
.hero-gradient {
  background: linear-gradient(135deg, var(--color-brand-deep) 0%, var(--color-brand-mid) 100%);
  color: var(--color-surface-plain);
}
.hero-gradient img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.18;
}
.hero-gradient .hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.hero-gradient h1 { font-size: 2.2rem; color: var(--color-surface-plain); margin-bottom: 12px; }
.hero-gradient p.subheadline { color: var(--white-85transparent); font-size: 1.1rem; margin-bottom: 20px; }
.hero-gradient .cta-btn { background: var(--color-accent-gold); color: var(--color-brand-deep); font-weight: 700; }
.hero-gradient .cta-btn:hover { background: var(--color-accent-gold-soft); }

/* Hero Image (split layout) */
.hero-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 60px 24px;
}
.hero-image .hero-text { max-width: 500px; margin-bottom: 20px; }
.hero-image h1 { font-size: 2rem; color: var(--color-brand-deep); margin-bottom: 12px; }
.hero-image p.subheadline { color: var(--color-text-muted); margin-bottom: 20px; font-size: 1rem; }
.hero-image .hero-visual img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
.hero-image .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--color-brand-mid);
  color: var(--color-surface-plain);
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hero-image .cta-btn:hover {
  background: var(--color-brand-deep);
  transform: translateY(-2px);
}
@media (min-width: 900px) {
  .hero-image {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    gap: 40px;
  }
  .hero-image .hero-text { flex: 1; margin-bottom: 0; }
  .hero-image .hero-visual { flex: 1; }
}

/* CTA Button (generic) */
.cta-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  background: var(--color-brand-mid);
  color: var(--color-surface-plain);
}
.cta-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── HERO STATS ─────────────────────────────────────────────── */
.hero-stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
  justify-content: center;
  background: var(--white-07transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  border: 1px solid var(--white-12transparent);
  overflow: hidden;
}
.hero-stat {
  flex: 1;
  padding: 18px 10px;
  border-right: 1px solid var(--white-10transparent);
  position: relative;
  text-align: center;
}
.hero-stat:last-child { border-right: none; }
.hero-stat .num {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-surface-plain);
  line-height: 1;
}
.hero-stat .num span {
  font-size: 1.2rem;
  color: var(--color-accent-gold-soft);
}
.hero-stat .label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-60transparent);
  margin-top: 4px;
}

/* ── HIGHLIGHT BAR ──────────────────────────────────────────── */
.highlight-title {
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-accent-gold-soft);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 12px;
}

.highlight-bar {
  display: flex;
  align-items: stretch;
  background: linear-gradient(
    135deg,
    var(--color-brand-deep) 0%,
    var(--color-accent-gold) 40%,
    var(--color-accent-gold-soft) 60%,
    var(--color-accent-gold) 100%
  );
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 4px 24px var(--accent-gold-35transparent);
  position: relative;
}
.highlight-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, var(--white-15transparent) 0%, transparent 60%);
  pointer-events: none;
}

.hb-item { flex: 1; min-width: 110px; padding: 20px 16px; text-align: center; position: relative; z-index: 1; }
.hb-item--highlight { background: var(--black-10transparent); }
.hb-divider { width: 1px; background: var(--black-12transparent); flex-shrink: 0; }
.hb-num {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-brand-deep);
  line-height: 1;
  margin-bottom: 4px;
}
.hb-num span {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--brand-deep-55transparent);
}
.hb-label {
  font-size: 0.68rem;
  color: var(--brand-deep-70transparent);
  letter-spacing: 0.04em;
  line-height: 1.4;
  font-weight: 500;
}
@media (max-width: 480px) {
  .hb-divider { display: none; }
  .hb-item { flex: 0 0 100%; border-bottom: 1px solid var(--black-08transparent); padding: 14px; }
  .hb-item:last-child { border-bottom: none; }
  .hb-item--highlight { background: var(--black-18transparent); }
}

/* ── BOX SECTIONS ───────────────────────────────────────────── */
.box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px; }

/* Box Lighter */
.box-lighter {
  background: var(--color-surface-muted);
  border: 1px solid var(--brand-deep-10transparent);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  margin-bottom: 24px;
}

.box-lighter-title {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-brand-deep);
  margin-bottom: 10px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.box-lighter-card-item {
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.box-lighter-card-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-brand-bright);
}
.box-lighter-card-item h3,
.box-lighter-card-item h4 {
  font-size: 0.92rem;
  color: var(--color-brand-deep);
  margin-bottom: 6px;
  font-weight: 600;
}
.box-lighter-card-item p {
  font-size: 0.83rem;
  color: var(--color-text-subtle);
  line-height: 1.6;
}

/* Box Dark */
.box-dark {
  background: var(--color-brand-deep);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.box-dark::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--accent-gold-15transparent) 0%, transparent 70%);
  pointer-events: none;
}
.box-dark-title {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-surface-base);
  margin-bottom: 10px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.box-dark .section-tag { color: var(--color-accent-gold-soft); }
.box-dark .section-tag::before { background: var(--color-accent-gold); }
.box-dark .section-header p { color: var(--white-60transparent); }
.box-dark p { color: var(--white-75transparent); }

/* White-transparent card items (used inside box-dark) */
.card-item-small-whitetransparent {
  background: var(--white-06transparent);
  border: 1px solid var(--white-10transparent);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.card-item-small-whitetransparent:hover {
  background: var(--white-10transparent);
  border-color: var(--accent-gold-40transparent);
  transform: translateY(-2px);
}
.card-item-small-whitetransparent p {
  font-size: 0.8rem;
  color: var(--white-75transparent);
  line-height: 1.6;
  margin-bottom: 0;
}
.card-item-small-whitetransparent h4 {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--white-88transparent);
  line-height: 1.35;
}

/* ── CARD VARIANTS ──────────────────────────────────────────── */
.cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:40px 20px; }
.card {
  background:var(--color-surface-plain);
  border-radius:12px;
  border:1px solid var(--color-border-subtle);
  padding:16px;
  transition:transform 0.2s,box-shadow 0.2s;
}
.card:hover {transform:translateY(-4px);box-shadow:0 4px 10px var(--black-08transparent);}
.card img{width:100%;border-radius:8px;margin-bottom:10px;}
.card h3{font-size:1.1rem;margin-bottom:6px;}
.card p{color:var(--color-text-subtle);font-size:0.95rem;}

/* Card V7 — editorial post/profile card */
.cardv7 {
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
  transition: box-shadow 0.3s ease;
}
.cardv7:hover { box-shadow: var(--shadow-hover); }
.cardv7-cover { position: relative; }
.cardv7-cover img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cardv7:hover .cardv7-cover img { transform: scale(1.02); }
.cardv7-cover-caption {
  font-size: 0.85rem;
  line-height: 1.4;
  padding-left: 16px;
  color: var(--color-text-subtle);
}
.cardv7-avatar {
  position: absolute;
  left: 50%; bottom: -50px;
  transform: translateX(-50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 4px solid var(--color-surface-plain);
  background: var(--color-surface-plain);
  overflow: hidden;
  box-shadow: 0 4px 16px var(--black-18transparent);
}
.cardv7-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cardv7-body { padding: 20px 24px; }
.cardv7-body .title {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-brand-deep);
  text-align: center;
  margin-bottom: 4px;
}
.cardv7-body .subtitle {
  font-size: 0.88rem;
  color: var(--color-text-subtle);
  text-align: center;
  font-weight: 400;
  margin-bottom: 12px;
}
.cardv7-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Card V9 — modern doctor card */
.cardv9 {
  position: relative;
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.cardv9:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-brand-bright);
}
.cardv9-body {
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  line-height: 1.7;
  margin-bottom: 20px;
  text-align: left;
}
.cardv9-divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 16px 0;
  width: 100%;
}
.cardv9-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 16px 20px;
}

/* Card V3 — legacy style */
.cardv3 {
  width: 100%;
  border: 1px solid var(--color-brand-main);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-plain);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.cardv3-header {
  background: var(--color-brand-tint);
  background-size: cover;
  background-position: center;
}
.cardv3-header img { width: 100%; height: auto; display: block; }
.cardv3-body { padding: 20px; flex: 1; }
.cardv3-profile-row { display: flex; align-items: center; margin-bottom: 15px; }
.cardv3profile-pic {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--color-brand-tint);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.cardv3-text-info { margin-left: 15px; }
.cardv3-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-brand-deep);
}
.cardv3-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-subtle);
  margin-top: 4px;
}
.cardv3-content {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.cardv3-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-muted);
}
.cardv3-like-button {
  background: var(--color-brand-mid);
  border: none;
  color: var(--color-surface-plain);
  font-size: 0.95rem;
  padding: 9px 20px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}
.cardv3-like-button:hover { background: var(--color-brand-deep); }

/* ── DOCTOR PROFILE ─────────────────────────────────────────── */
.doctor-photo-wrap {
  width: 120px; height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-border-subtle);
  margin: 0 auto 16px;
  box-shadow: 0 4px 16px var(--brand-deep-12transparent);
}
.doctor-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── PROFILE SECTION ────────────────────────────────────────── */
#profil {
  padding: 20px 24px;
  border-left: 3px solid var(--color-brand-bright);
  background: linear-gradient(90deg, var(--brand-deep-04transparent) 0%, transparent 100%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 24px;
}
#profil p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.75;
}

/* ── POST / FEED ─────────────────────────────────────────────── */
.post {
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.post-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.post-content {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}
.post-image {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 6px;
}
.post-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}
.post-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 6px;
  color: var(--color-text-subtle);
  font-size: 0.9rem;
}
.post-actions div { cursor: pointer; transition: color 0.2s; }
.post-actions div:hover { color: var(--color-brand-bright); }

/* Avatar */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  background: var(--color-border-subtle);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-info { display: flex; flex-direction: column; }
.user-info .name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-brand-deep);
}
.user-info .time {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
}

/* ── FORM ───────────────────────────────────────────────────── */
.form-card {
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-shadow: var(--shadow-card);
}
.form-card h3 {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--color-brand-deep);
  margin-bottom: 16px;
}
form { display: flex; flex-direction: column; gap: 12px; }
input, textarea, select {
  padding: 10px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--ff-body);
  color: var(--color-text-main);
  background: var(--color-surface-base);
  width: 100%;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-brand-bright);
  box-shadow: 0 0 0 3px var(--brand-bright-12transparent);
}
label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-brand-deep);
  margin-bottom: 4px;
  display: block;
}
button.submit-btn {
  background: var(--color-brand-mid);
  color: var(--color-surface-plain);
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--ff-body);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}
button.submit-btn:hover {
  background: var(--color-brand-deep);
  transform: translateY(-1px);
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-brand-deep);
  color: var(--color-surface-plain);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 0.25s ease;
  box-shadow: 0 2px 12px var(--brand-deep-20transparent);
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--color-brand-mid);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px var(--brand-deep-30transparent);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: var(--color-surface-plain);
  color: var(--color-brand-deep);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-brand-deep);
  transition: all 0.25s ease;
  text-decoration: none;
}
.btn-secondary:hover {
  background: var(--color-brand-tint);
  border-color: var(--color-brand-mid);
  transform: translateY(-1px);
}

.btn-primary-big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--color-brand-main) 0%, var(--color-brand-bright) 100%);
  color: var(--color-surface-plain);
  font-family: var(--ff-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px var(--brand-deep-25transparent);
  text-align: center;
  text-decoration: none;
}
.btn-primary-big:hover {
  color: var(--color-surface-plain);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--brand-deep-35transparent);
  background: linear-gradient(135deg, var(--color-brand-deep) 0%, var(--color-brand-mid) 100%);
}

.btn-sm {
  background: var(--color-brand-mid);
  color: var(--color-surface-plain);
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-sm:hover { background: var(--color-brand-deep); }

.cta-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  padding-bottom: 16px;
  letter-spacing: 0.04em;
}

/* ── ICON SIZES ─────────────────────────────────────────────── */
.icon-medium { font-size: 1.5rem; margin-bottom: 8px; }
.icon-big { font-size: 2.2rem; margin-bottom: 10px; }

/* ── REVIEW / TESTIMONIALS ──────────────────────────────────── */
.review {
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 14px;
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.review::before {
  content: '"';
  position: absolute;
  top: -10px; right: 16px;
  font-family: var(--ff-display);
  font-size: 5rem;
  color: var(--color-brand-tint);
  line-height: 1;
  pointer-events: none;
}
.review:hover { box-shadow: var(--shadow-card); }
.stars { color: var(--color-accent-gold); margin-bottom: 8px; font-size: 1rem; letter-spacing: 2px; }
.review p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-style: italic;
  position: relative;
  z-index: 1;
}
.review .author {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-brand-main);
  margin-top: 10px;
  display: block;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list { margin-top: 24px; }
.faq-item {
  border-bottom: 1px solid var(--brand-deep-10transparent);
  overflow: hidden;
}
.faq-item:first-child { border-top: 1px solid var(--brand-deep-10transparent); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-brand-deep);
  gap: 16px;
  transition: color 0.2s;
  text-align: left;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-brand-bright); }

.faq-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1.5px solid var(--color-brand-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-brand-mid);
  font-weight: 300;
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--color-brand-mid);
  color: var(--color-surface-plain);
  border-color: var(--color-brand-mid);
}
.faq-answer {
  padding: 0 4px 18px;
  font-size: 0.88rem;
  color: var(--color-text-subtle);
  line-height: 1.75;
  text-align: left;
}
.faq-answer strong { color: var(--color-brand-deep); }
.faq-answer ul { margin-left: 1.2em; }
.faq-answer li { margin-bottom: 4px; }
details[open] > *:not(summary) { display: block !important; }
details summary { cursor: pointer; pointer-events: auto !important; }

/* ── PROCESS STEPS ──────────────────────────────────────────── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
  gap: 0;
  margin-top: 36px;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 30px; left: 8%; right: 8%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-brand-bright) 0%, var(--color-accent-gold) 100%);
  z-index: 0;
}
.step {
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.step-num {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--color-surface-plain);
  border: 2px solid var(--color-brand-mid);
  display: flex;
  align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-brand-mid);
  box-shadow: 0 0 0 5px var(--color-surface-base);
  transition: background 0.25s, color 0.25s;
}
.step:hover .step-num {
  background: var(--color-brand-mid);
  color: var(--color-surface-plain);
}
.step h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-brand-deep);
  margin-bottom: 6px;
}
.step p {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  line-height: 1.6;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar-block {
  background: var(--color-surface-plain);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.sidebar-block h3 {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-brand-deep);
  margin-bottom: 10px;
}
.sidebar-block p {
  font-size: 0.87rem;
  color: var(--color-text-subtle);
}
.sidebar-menu, .trending-list { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li, .trending-list li { margin: 6px 0; }
.sidebar-menu a, .trending-list a {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.sidebar-menu a:hover,
.trending-list a:hover { color: var(--color-brand-bright); }
.sticky-rail { position: sticky; top: 80px; align-self: flex-start; height: fit-content; }
@media (max-width: 999px) { .sticky-rail { display: none; } }

/* ── BREADCRUMBS ────────────────────────────────────────────── */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.88rem;
  padding: 10px 4px;
  color: var(--color-text-subtle);
}
.breadcrumbs a {
  color: var(--color-brand-mid);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--color-brand-deep); }
.breadcrumbs span { color: var(--color-text-subtle); }

/* ── SOCIAL LINKS ───────────────────────────────────────────── */
.social-links { display: flex; gap: 12px; flex-wrap: wrap; }
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--color-brand-mid);
  color: var(--color-surface-plain);
  border-radius: 50%;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s;
}
.social-links a:hover {
  background: var(--color-brand-deep);
  transform: translateY(-2px);
}

/* ── FLOATING CHAT BUTTON ───────────────────────────────────── */
.floating-chat { position: fixed; bottom: 24px; right: 24px; z-index: 999; }
.floating-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px; height: 56px;
  background: var(--social-whatsapp);
  border-radius: 50%;
  box-shadow: 0 4px 20px var(--social-whatsapp-40transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: waFloat 2s ease-in-out infinite;
  color: white;
  text-decoration: none;
}
.floating-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px var(--social-whatsapp-55transparent);
}
@keyframes waFloat {
  0%, 100% {
    box-shadow: 0 4px 20px var(--social-whatsapp-40transparent),
                0 0 0 0 var(--social-whatsapp-40transparent);
  }
  50% {
    box-shadow: 0 4px 20px var(--social-whatsapp-40transparent),
                0 0 0 14px rgba(37,211,102,0);
  }
}

/* ── FOOTER ─────────────────────────────────────────────────── */
footer, .footer {
  width: 100%;
  background: var(--color-brand-deep);
  color: var(--white-70transparent);
  padding: 36px 24px 28px;
  font-size: 0.85rem;
  line-height: 1.7;
}
footer strong, .footer strong { color: var(--color-accent-gold-soft); }
footer hr, .footer hr {
  border: none;
  border-top: 1px solid var(--white-10transparent);
  margin: 16px 0;
}
footer p, .footer p {
  color: var(--white-65transparent);
  font-size: 0.85rem;
}
footer a, .footer a {
  color: var(--color-accent-gold-soft);
  text-decoration: none;
}
footer a:hover, .footer a:hover { color: var(--color-surface-plain); }
footer .cardv7 {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 12px 0;
}
footer .cardv7-cover img {
  border-radius: var(--radius-sm);
  opacity: 0.85;
}

/* Footer Extended */
.footer-extended {
  background: var(--color-brand-deep);
  color: var(--white-70transparent);
  padding: 48px 24px 28px;
  text-align: left;
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 30px;
  margin-bottom: 20px;
}
.footer-col h4 {
  color: var(--color-accent-gold-soft);
  margin-bottom: 12px;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.footer-extended h4 { color: var(--color-accent-gold-soft); margin-bottom: 12px; }
.footer-extended p { font-size: 0.9rem; color: var(--white-60transparent); }
.footer-extended ul { list-style: none; padding: 0; margin: 0; }
.footer-extended ul li { margin-bottom: 6px; }
.footer-extended a {
  color: var(--white-65transparent);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-extended a:hover { color: var(--color-accent-gold-soft); }
.footer-bottom {
  border-top: 1px solid var(--white-10transparent);
  padding-top: 12px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--white-45transparent);
}

/* ── SHARED ARTICLE (link preview) ─────────────────────────── */
.shared-article {
  display: block;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface-plain);
  margin-top: 10px;
  transition: box-shadow 0.2s ease;
}
.shared-article:hover { box-shadow: var(--shadow-hover); }
.shared-thumb { width: 100%; display: block; height: auto; }
.shared-text { padding: 14px 16px; }
.shared-title {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--color-brand-deep);
  margin: 0 0 4px 0;
}
.shared-desc {
  font-size: 0.875rem;
  color: var(--color-text-subtle);
  margin: 0 0 6px 0;
  line-height: 1.5;
}
.shared-link { font-size: 0.78rem; color: var(--color-brand-mid); }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
main > * { animation: fadeUp 0.5s ease both; }
main > *:nth-child(1) { animation-delay: 0.05s; }
main > *:nth-child(2) { animation-delay: 0.12s; }
main > *:nth-child(3) { animation-delay: 0.18s; }
main > *:nth-child(4) { animation-delay: 0.24s; }

/* ── LAYOUT ALIASES ─────────────────────────────────────────── */
/* main-content: semantic alias for flex column */
.main-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  gap: 0;
}

/* sidebar-left: left aside panel, mirrors sticky-rail */
.sidebar-left {
  display: none;
  flex: 0 0 220px;
  max-width: 220px;
}
@media (min-width: 1000px) {
  .sidebar-left { display: flex; flex-direction: column; }
}

/* section: generic content wrapper */
.section { width: 100%; }
.section h2 {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: var(--color-brand-deep);
}
.section p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  max-width: 600px;
  margin: 0 auto 20px;
}

/* cardv3content: body text inside cardv3 */
.cardv3content {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:640px){h1.title{font-size:1.5rem;}.hero-image-bg{padding:60px 16px 40px;}.hero-content h1,.hero-content h2{font-size:1.2rem;}.box-lighter,.box-dark{padding:24px 16px;}.cardv7-body{padding:16px;}.process-steps::before{display:none;}.highlight-bar{flex-direction:column;}.hb-divider{display:none;}.hb-item{border-bottom:1px solid var(--black-08transparent);padding:14px;}.hero-stats{gap:0;flex-wrap:wrap;}nav .nav-cta span{display:none;}
.features{background:var(--color-surface-muted);padding:50px 20px;text-align:center;}
.features .section-header{margin-bottom:30px;}
.features .section-header h2{font-size:1.6rem;color:var(--color-text-main);margin-bottom:8px;}
.features .section-header p{color:var(--color-text-subtle);font-size:.95rem;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.feature{background:var(--color-surface-plain);border-radius:12px;padding:20px;box-shadow:0 2px 6px var(--black-05transparent,rgba(0,0,0,.05));transition:transform .2s ease,box-shadow .2s ease;}
.feature:hover{transform:translateY(-3px);box-shadow:0 4px 12px var(--black-10transparent);}
.feature img{width:60px;height:60px;margin-bottom:12px;}
.feature h3{font-size:1.1rem;margin-bottom:8px;color:var(--color-text-muted);}
.feature p{color:var(--color-text-subtle);font-size:.95rem;}
.testimonials{background:var(--color-surface-plain);padding:50px 20px;text-align:center;}
.testimonials h2{font-size:1.5rem;margin-bottom:30px;}
.review{max-width:600px;margin:0 auto 20px;padding:20px;border-radius:10px;background:var(--color-surface-muted);}
.review p{font-size:1rem;margin-bottom:12px;}
.review .author{font-weight:600;color:var(--color-text-muted);}
.stars{color:var(--color-accent-gold);margin-bottom:10px;}
.gallery{display:flex;overflow-x:auto;gap:10px;padding:20px;scroll-behavior:smooth;}
.gallery::-webkit-scrollbar{display:none;}
.gallery img{height:180px;border-radius:10px;flex-shrink:0;object-fit:cover;border:1px solid var(--color-border-subtle);}
.contact-info{background:var(--color-surface-plain);padding:40px 20px;text-align:center;}
.contact-info h2{font-size:1.4rem;margin-bottom:20px;}
.contact-info p{font-size:1rem;color:var(--color-text-subtle);margin-bottom:8px;}
.contact-info a{color:var(--social-facebook);text-decoration:none;}
.social-links{display:flex;justify-content:center;gap:16px;margin-top:16px;}
.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--social-facebook);color:var(--color-surface-plain);border-radius:50%;font-size:1.1rem;transition:background .2s;}
.social-links a:hover{background:var(--social-facebook-hover);}
}

/* Wiki */
.wiki-table { width:100%; border-collapse:collapse; font-size:0.88rem; margin:16px 0; }
.wiki-table th { background:var(--color-brand-deep); color:#fff; padding:10px 12px; text-align:left; font-weight:600; font-size:0.82rem; letter-spacing:0.03em; }
.wiki-table td { padding:10px 12px; border-bottom:1px solid var(--color-border-subtle); color:var(--color-text-muted); vertical-align:top; }
.wiki-table tr:nth-child(even) td { background:var(--color-surface-muted); }
.wiki-table tr:hover td { background:var(--color-brand-tint); }
.wiki-table td:first-child { font-weight:700; color:var(--color-brand-deep); white-space:nowrap; }
.wiki-table td a { color:var(--color-brand-mid); font-weight:600; }
.wiki-table td a:hover { text-decoration:underline; }

.qual-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:16px 0; }
.qual-card{background:var(--color-surface-plain);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:18px;text-decoration:none;color:inherit;transition:all .25s ease;display:flex;flex-direction:column;gap:6px;border-left:4px solid var(--color-brand-mid);box-shadow:var(--shadow-card);}
.qual-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); border-left-color:var(--color-accent-gold); }
.qual-card .qc-code { font-family:var(--ff-display); font-size:1.15rem; font-weight:700; color:var(--color-brand-deep); }
.qual-card .qc-fellowship { font-size:0.78rem; font-weight:600; color:var(--color-accent-gold); letter-spacing:0.06em; text-transform:uppercase; }
.qual-card .qc-name { font-size:0.8rem; color:var(--color-text-subtle); line-height:1.45; }
.qual-card .qc-field { font-size:0.82rem; font-weight:600; color:var(--color-brand-mid); margin-top:4px; }

.info-strip{background:var(--color-surface-muted);border-left:4px solid var(--color-brand-bright);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:16px 20px;margin:16px 0;font-size:.9rem;color:var(--color-text-muted);line-height:1.7;}
.info-strip strong{color:var(--color-brand-deep);}
.tag-pill{display:inline-block;background:var(--color-brand-tint);color:var(--color-brand-deep);font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase;margin-right:4px;margin-bottom:4px;}
.tag-pill-gold{background:var(--accent-gold-15transparent);color:var(--color-accent-gold);border:1px solid var(--accent-gold-35transparent);}

.condition-table { width:100%; border-collapse:collapse; font-size:0.87rem; margin:16px 0; }
.condition-table th { background:var(--color-brand-deep); color:#fff; padding:10px 12px; font-size:0.82rem; font-weight:600; text-align:left; }
.condition-table td { padding:10px 12px; border-bottom:1px solid var(--color-border-subtle); vertical-align:top; color:var(--color-text-muted); }
.condition-table tr:nth-child(even) td { background:var(--color-surface-muted); }
.condition-table td:nth-child(2) { font-weight:700; color:var(--color-brand-deep); white-space:nowrap; }
.condition-table td:nth-child(3) { font-weight:600; color:var(--color-accent-gold); font-size:0.82rem; }

.section-divider { border:none; border-top:1px solid var(--color-border-subtle); margin:28px 0; }

.wiki-h2 { font-family:var(--ff-display); font-size:1.3rem; font-weight:700; color:var(--color-brand-deep); margin:28px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--color-brand-tint); }
.wiki-h3 { font-family:var(--ff-body); font-size:1rem; font-weight:700; color:var(--color-brand-main); margin:20px 0 8px; }

/* STICKY FLOATING BAR , alternative to  FLOATING CHAT BUTTON */
/* added 19 Jul 2026 */
/*.floatingfooter { position: fixed; right: 0; bottom: 0; text-align: center;  width: 100%; } */
.floatingfooter {display: block; position: fixed; bottom: 0; left: 50%; margin-left: -300px; }
.floatingfooterbox { width: 598px; height: 56px; border-style: solid;  border-width: 1px; border-color: #afccdc;  background: rgb(255, 255, 255);/* Fallback */ background: rgba(255, 255, 255, 0.7);}
.floatingfooterbox .cta-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;margin:5px;background:var(--color-brand-mid);color:var(--color-surface-plain);border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;}
.floatingfooterbox .btn-primary-big{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;margin:5px;background:linear-gradient(135deg,var(--color-accent-gold-soft) 50%,var(--color-accent-gold) 100%);color:var(--color-surface-plain);font-family:var(--ff-body);font-size:.95rem;font-weight:600;border-radius:50px;transition:all .3s ease;box-shadow:0 4px 20px var(--brand-deep-25transparent);text-align:center;text-decoration:none;}