/* ============================================================
   LINHVU.GOLF — SHARED STYLESHEET
   Light-first luxury golf coaching brand
   ============================================================ */


/* ── Design Tokens ── */
:root {
  /* Navy + Warm Stone — quiet luxury, monochromatic structure with stone warmth */
  --obsidian:      #07111C;   /* near-black navy — darkest, hero bg, body text   */
  --burgundy:      #152E48;   /* deep navy — structural dark, primary btn on light*/
  --burgundy-dark: #0A1D30;   /* darker navy — hover state                       */
  --burgundy-soft: rgba(21,46,72,0.07);
  --gold:          #8A7B60;   /* warm stone (dark) — eyebrows & small accents    */
  --gold-light:    #D4C8B0;   /* pale stone — CTAs on dark bg, name highlight    */
  --gold-soft:     rgba(138,123,96,0.1);
  --sage:          #7A9EB8;   /* steel blue — muted supporting text & icons      */
  --taupe:         #B8C8D6;   /* pale blue-grey — muted text on dark bg          */
  --cream:         #F0F5FA;   /* cold pale — page background                     */
  --cream-dark:    #DDE8F2;   /* slightly deeper page bg                         */
  --white:         #FFFFFF;

  --text-primary:   #07111C;  /* near-black navy on pale — 18:1 contrast         */
  --text-secondary: #2B5070;  /* medium navy                                     */
  --text-muted:     #6A8FA8;  /* muted steel                                     */
  --text-on-dark:   #E8F0F6;  /* pale blue-white on dark navy sections           */

  --surface-page:  var(--cream);
  --surface-card:  var(--white);
  --surface-dark:  var(--obsidian);

  --font-heading: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-body:    'Noto Sans', system-ui, -apple-system, sans-serif;

  --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-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --t-fast:   150ms ease;
  --t-mid:    260ms ease;
  --t-slow:   420ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --nav-h:  72px;
  --max-w:  1200px;
  --max-w-sm: 780px;

  --shadow-sm: 0 1px 4px rgba(7,17,28,0.06), 0 2px 8px rgba(7,17,28,0.04);
  --shadow-md: 0 4px 16px rgba(7,17,28,0.08), 0 8px 24px rgba(7,17,28,0.05);
  --shadow-lg: 0 12px 40px rgba(7,17,28,0.12), 0 4px 12px rgba(7,17,28,0.06);

  /* Semantic tokens */
  --color-error:    #C0392B;  /* form validation error */
  --surface-warm:   #F7F3EE;  /* warm off-white alternate section bg */
  --footer-copy-color: rgba(137,148,129,0.55); /* footer copyright muted text */
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--surface-page);
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
address { font-style: normal; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--burgundy); color: var(--cream); }

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

.skip-link {
  position: absolute; top: -100%; left: var(--space-4); z-index: 9999;
  background: var(--burgundy); color: var(--cream); font-family: var(--font-heading);
  font-size: 0.85rem; font-weight: 600; padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; white-space: nowrap;
}
.skip-link:focus { top: 0; outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Typography ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.display-1  { font-size: clamp(2.6rem, 6.5vw, 5rem);   font-weight: 800; }
.display-2  { font-size: clamp(2rem,   4.5vw, 3.5rem);  font-weight: 700; }
.heading-1  { font-size: clamp(1.75rem, 3vw, 2.625rem); font-weight: 700; }
.heading-2  { font-size: clamp(1.3rem,  2.2vw, 1.875rem); font-weight: 600; }
.heading-3  { font-size: 1.2rem; font-weight: 600; }
.body-lg    { font-size: 1.1rem;  line-height: 1.75; }
.body-md    { font-size: 1rem;    line-height: 1.7; }
.body-sm    { font-size: 0.875rem; line-height: 1.65; }
.label      { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px)  { .container { padding-inline: var(--space-8); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-12); } }

.container-sm {
  max-width: var(--max-w-sm);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px) { .container-sm { padding-inline: var(--space-8); } }

.section     { padding-block: var(--space-24); }
.section-md  { padding-block: var(--space-16); }
.section-sm  { padding-block: var(--space-12); }

/* ── Eyebrow ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.eyebrow-line { width: 24px; height: 1px; background: var(--gold); flex-shrink: 0; }
.eyebrow-text {
  font-family: var(--font-heading);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}

/* ── Section header ── */
.section-hdr { margin-bottom: var(--space-12); }
.section-hdr.centered { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-12); }
.section-hdr .eyebrow { display: flex; }
.section-hdr.centered .eyebrow { justify-content: center; }
.section-hdr h2 { margin-bottom: var(--space-4); }
.section-desc { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.75; max-width: 560px; }
.section-hdr.centered .section-desc { margin-inline: auto; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  cursor: pointer; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.btn-primary {
  padding: 0.85rem 1.875rem;
  background: var(--burgundy); color: var(--cream); font-size: 0.82rem; border: none;
}
.btn-primary:hover { background: var(--burgundy-dark); color: var(--cream); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(21,46,72,0.35); }

/* Pale stone CTA on dark hero/sections — warm contrast against cold navy */
.hero-home .btn-primary,
.bg-dark .btn-primary {
  background: var(--gold-light); color: var(--obsidian);
}
.hero-home .btn-primary:hover,
.bg-dark .btn-primary:hover {
  background: var(--gold); color: var(--cream);
  box-shadow: 0 8px 24px rgba(138,123,96,0.3);
}

.btn-primary-dark {
  padding: 0.85rem 1.875rem;
  background: var(--cream); color: var(--obsidian); font-size: 0.82rem; border: none;
}
.btn-primary-dark:hover { background: var(--taupe); transform: translateY(-2px); }

.btn-outline {
  padding: 0.82rem 1.75rem;
  background: transparent; color: var(--obsidian); font-size: 0.82rem;
  border: 1.5px solid rgba(7,17,28,0.25);
}
.btn-outline:hover { border-color: var(--obsidian); background: rgba(7,17,28,0.04); }

.btn-outline-light {
  padding: 0.82rem 1.75rem;
  background: transparent; color: var(--cream); font-size: 0.82rem;
  border: 1.5px solid rgba(240,245,250,0.4);
}
.btn-outline-light:hover { border-color: var(--cream); background: rgba(240,245,250,0.08); }

.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.75rem; }

/* ── Arrow SVG helper ── */
.arrow-icon {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-fast);
}
a:hover .arrow-icon, button:hover .arrow-icon { transform: translateX(3px); }

/* ============================================================
   NAVIGATION
   ============================================================ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: rgba(240,245,250,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(7,17,28,0.09);
  transition: box-shadow var(--t-mid), background var(--t-mid);
}
#nav.scrolled {
  box-shadow: 0 2px 16px rgba(7,17,28,0.08);
  background: rgba(240,245,250,0.97);
}
#nav.nav-dark {
  background: rgba(7,17,28,0.92);
  border-bottom-color: rgba(21,46,72,0.12);
}
#nav.nav-dark.scrolled { background: rgba(7,17,28,0.98); }

.nav-inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-6);
}
@media (min-width: 768px)  { .nav-inner { padding-inline: var(--space-8); } }
@media (min-width: 1024px) { .nav-inner { padding-inline: var(--space-12); } }

/* Logo */
.nav-logo { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.nav-monogram {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--burgundy), var(--burgundy-dark));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem;
  color: var(--gold); letter-spacing: 0.04em; flex-shrink: 0;
}
.nav-name-block { line-height: 1.2; }
.nav-name-main {
  font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700;
  color: var(--obsidian); display: block;
}
.nav-name-sub {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sage); display: block;
}
#nav.nav-dark .nav-name-main { color: var(--cream); }
#nav.nav-dark .nav-name-sub  { color: var(--taupe); }

/* Desktop links */
.nav-links {
  display: none; align-items: center; gap: var(--space-6); flex: 1; justify-content: center;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
  font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); position: relative; padding-block: var(--space-2);
  transition: color var(--t-fast);
}
.nav-link:hover, .nav-link.active { color: var(--obsidian); }
#nav.nav-dark .nav-link { color: rgba(240,245,250,0.75); }
#nav.nav-dark .nav-link:hover, #nav.nav-dark .nav-link.active { color: var(--cream); }

.nav-link::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* Programs dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); cursor: pointer;
  transition: color var(--t-fast);
  padding-block: var(--space-2);
  background: none; border: none;
}
.nav-dropdown-trigger:hover, .nav-dropdown-trigger.active { color: var(--obsidian); }
#nav.nav-dark .nav-dropdown-trigger { color: rgba(240,245,250,0.75); }
#nav.nav-dark .nav-dropdown-trigger:hover { color: var(--cream); }

.nav-dropdown-trigger svg {
  width: 12px; height: 12px; stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-fast);
}
.nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid rgba(7,17,28,0.10);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 260px; padding: var(--space-2);
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid);
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1; pointer-events: all; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 5px;
  font-size: 0.85rem; color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-dropdown-item:hover { background: var(--gold-soft); color: var(--obsidian); }
.nav-dropdown-item-icon {
  width: 28px; height: 28px; border-radius: 4px;
  background: var(--gold-soft); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--navy);
}
.nav-dropdown-item-icon svg { display: block; }
.nav-dropdown-item-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; }
.nav-dropdown-divider { height: 1px; background: rgba(7,17,28,0.08); margin: var(--space-2) 0; }

/* Nav right actions */
.nav-actions { display: none; align-items: center; gap: var(--space-3); }
@media (min-width: 1024px) { .nav-actions { display: flex; } }

.lang-switcher {
  display: flex; align-items: center;
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; gap: 2px;
}
.lang-btn {
  padding: 4px 8px; border-radius: 3px; cursor: pointer;
  color: var(--text-muted); transition: color var(--t-fast), background var(--t-fast);
}
.lang-btn.active { color: var(--obsidian); background: rgba(7,17,28,0.07); }
.lang-btn:hover { color: var(--obsidian); }
#nav.nav-dark .lang-btn { color: rgba(240,245,250,0.45); }
#nav.nav-dark .lang-btn.active { color: var(--cream); background: rgba(240,245,250,0.1); }
#nav.nav-dark .lang-btn:hover { color: var(--cream); }
.lang-sep { color: rgba(7,17,28,0.35); font-size: 0.7rem; }
#nav.nav-dark .lang-sep { color: rgba(240,245,250,0.25); }

.nav-cta {
  padding: 0.55rem 1.25rem;
  background: var(--burgundy); color: var(--cream) !important;
  font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), transform var(--t-fast);
}
.nav-cta:hover { background: var(--gold-light); color: var(--obsidian) !important; transform: translateY(-1px); }

/* Hamburger */
.nav-hamburger {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 40px; height: 40px; padding: 6px;
}
@media (min-width: 1024px) { .nav-hamburger { display: none; } }

.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--obsidian);
  transition: transform var(--t-mid), opacity var(--t-fast);
}
#nav.nav-dark .nav-hamburger span { background: var(--cream); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed; inset: 0; z-index: 999;
  background: var(--obsidian);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + var(--space-8)) var(--space-8) var(--space-8);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid);
  overflow-y: auto;
}
.nav-drawer.open { opacity: 1; pointer-events: all; }

.drawer-link {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700;
  color: var(--cream); letter-spacing: -0.01em;
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(7,17,28,0.1);
  display: flex; align-items: center; justify-content: space-between;
  transition: color var(--t-fast);
}
.drawer-link:hover { color: var(--gold); }

.drawer-programs { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.drawer-programs.open { max-height: 500px; }
.drawer-sub-link {
  display: block; font-family: var(--font-heading);
  font-size: 1rem; font-weight: 600;
  color: var(--taupe); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(7,17,28,0.06);
  transition: color var(--t-fast);
}
.drawer-sub-link:hover { color: var(--gold); }

.drawer-toggle-icon {
  width: 20px; height: 20px; stroke: var(--taupe); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-mid), stroke var(--t-fast);
}
.drawer-programs-open .drawer-toggle-icon { transform: rotate(90deg); stroke: var(--gold); }

.drawer-bottom {
  margin-top: auto; padding-top: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.drawer-cta {
  display: block; text-align: center;
  padding: 0.9rem 2rem; background: var(--gold-light); color: var(--obsidian);
  font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.drawer-lang { display: flex; gap: var(--space-3); }
.drawer-lang a {
  font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; padding: var(--space-2) var(--space-4);
  border: 1.5px solid rgba(7,17,28,0.2); border-radius: var(--radius-sm);
  color: var(--taupe); transition: color var(--t-fast), border-color var(--t-fast);
}
.drawer-lang a.active { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   HERO — Home (full viewport)
   ============================================================ */
.hero-home {
  min-height: 100dvh; position: relative;
  display: flex; align-items: center;
  background: var(--obsidian); overflow: hidden;
  padding-top: var(--nav-h);
}

.hero-home-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero-bg-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--burgundy) 0%, transparent 70%);
  opacity: 0.08;
}
.hero-bg-orb-1 { width: 700px; height: 700px; top: -200px; right: -150px; }
.hero-bg-orb-2 { width: 400px; height: 400px; bottom: -100px; left: -80px; background: radial-gradient(circle, var(--gold) 0%, transparent 70%); opacity: 0.05; }

.hero-home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-20);
  width: 100%;
}
@media (min-width: 1024px) {
  .hero-home-grid {
    grid-template-columns: 1fr 360px;
    gap: var(--space-16);
    padding-block: var(--space-24);
  }
}

.hero-home-title { color: var(--cream); margin-bottom: var(--space-5); }
.hero-home-title em { font-style: normal; color: var(--gold-light); }
.hero-home-sub { color: var(--taupe); font-size: 1.05rem; line-height: 1.8; max-width: 520px; margin-bottom: var(--space-8); }
.hero-home-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Hero card (right column) */
.hero-card {
  background: linear-gradient(155deg, rgba(21,46,72,0.4), rgba(7,17,28,0.6));
  border: 1px solid rgba(21,46,72,0.18);
  border-radius: var(--radius-md);
  padding: var(--space-7, 1.75rem);
  backdrop-filter: blur(8px);
}
.hero-card-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--burgundy), var(--burgundy-dark));
  border: 2px solid rgba(21,46,72,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800;
  color: var(--gold); margin-bottom: var(--space-4);
}
.hero-card-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--cream); }
.hero-card-role { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin-bottom: var(--space-5); }
.hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
.hero-stat {
  text-align: center; padding: var(--space-4);
  background: rgba(240,245,250,0.04);
  border: 1px solid rgba(21,46,72,0.1);
  border-radius: var(--radius-sm);
}
.hero-stat-n { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--gold); line-height: 1; }
.hero-stat-l { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); margin-top: 3px; }
.hero-cred-list { display: flex; flex-direction: column; gap: var(--space-2); }
.hero-cred-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.78rem; color: var(--taupe); }
.hero-cred-dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }

/* ── Page Hero (inner pages) ── */
.page-hero {
  background: var(--obsidian); position: relative; overflow: hidden;
  padding-top: var(--nav-h);
}
.page-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 70% 50%, rgba(21,46,72,0.2) 0%, transparent 60%);
}
.page-hero-inner {
  position: relative; z-index: 1;
  padding-block: var(--space-16) var(--space-12);
}
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.breadcrumb a, .breadcrumb span {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--sage);
}
.breadcrumb a:hover { color: var(--taupe); }
.breadcrumb-sep { color: rgba(137,148,129,0.5); }
.page-hero-eyebrow { margin-bottom: var(--space-4); }
.page-hero h1 { color: var(--cream); margin-bottom: var(--space-4); }
.page-hero-sub { color: var(--taupe); font-size: 1.05rem; line-height: 1.75; max-width: 580px; }

/* ── Marquee band ── */
.marquee-band {
  background: var(--burgundy); padding-block: 13px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding-inline: var(--space-8);
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(240,245,250,0.8); white-space: nowrap;
}
.marquee-dot { width: 3px; height: 3px; background: var(--gold); border-radius: 50%; }

/* ============================================================
   CARDS
   ============================================================ */

/* Program card */
.program-card {
  background: var(--surface-card);
  border: 1px solid rgba(7,17,28,0.09);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-mid);
}
.program-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--burgundy), var(--gold));
  opacity: 0; transition: opacity var(--t-mid);
}
.program-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: rgba(21,46,72,0.3); }
.program-card:hover::before { opacity: 1; }

.program-card-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  background: var(--burgundy-soft);
  border: 1px solid rgba(21,46,72,0.15);
  font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--burgundy); width: fit-content; margin-bottom: var(--space-4);
}
.program-card-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--obsidian), var(--burgundy-dark));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5); font-size: 1.2rem;
}
.program-card-icon svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.program-card h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.program-card-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-4); }
.program-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; flex: 1; margin-bottom: var(--space-6); }
.program-card-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--burgundy);
  transition: gap var(--t-fast), color var(--t-fast);
}
.program-card-link:hover { gap: var(--space-3); color: var(--obsidian); }
.program-card-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Credential card */
.cred-card {
  background: rgba(240,245,250,0.03);
  border: 1px solid rgba(21,46,72,0.12);
  border-radius: var(--radius-md); padding: var(--space-6);
  transition: background var(--t-mid), border-color var(--t-mid), transform var(--t-mid);
}
.cred-card:hover { background: rgba(21,46,72,0.15); border-color: rgba(21,46,72,0.28); transform: translateY(-2px); }
.cred-card-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: rgba(21,46,72,0.12);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4);
}
.cred-card-icon svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cred-card h3 { font-size: 0.85rem; font-weight: 700; color: var(--cream); margin-bottom: var(--space-1); line-height: 1.3; }
.cred-card p { font-size: 0.75rem; color: var(--sage); line-height: 1.55; }

/* Testimonial card */
.testi-card {
  background: var(--surface-card);
  border: 1px solid rgba(7,17,28,0.09);
  border-radius: var(--radius-md); padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-5);
  transition: box-shadow var(--t-mid);
}
.testi-card:hover { box-shadow: var(--shadow-md); }
.testi-stars { display: flex; gap: 2px; }
.testi-stars svg { width: 14px; height: 14px; fill: var(--gold); stroke: var(--gold); stroke-width: 0.5; }
.testi-quote { font-size: 0.93rem; color: var(--text-secondary); line-height: 1.75; font-style: italic; flex: 1; }
.testi-author { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid rgba(7,17,28,0.08); }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--burgundy), var(--obsidian));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700;
  color: var(--gold); flex-shrink: 0;
}
.testi-name { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--obsidian); }
.testi-role { font-size: 0.73rem; color: var(--sage); }

/* Event card */
.event-card {
  background: var(--surface-card);
  border: 1px solid rgba(7,17,28,0.09);
  border-radius: var(--radius-md); padding: var(--space-6) var(--space-8);
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: var(--space-6); align-items: center;
  transition: box-shadow var(--t-mid), border-color var(--t-mid);
}
@media (max-width: 640px) { .event-card { grid-template-columns: 1fr; gap: var(--space-4); } }
.event-card:hover { box-shadow: var(--shadow-md); border-color: rgba(21,46,72,0.3); }

.event-date-box {
  text-align: center; padding: var(--space-3);
  background: var(--burgundy); border-radius: var(--radius-sm);
  color: var(--cream); flex-shrink: 0;
}
.event-date-day { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--gold); }
.event-date-month { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
.event-type-pill {
  display: inline-flex; padding: 2px 8px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: var(--space-2); width: fit-content;
}
.pill-clinic  { background: var(--burgundy-soft); color: var(--burgundy); border: 1px solid rgba(21,46,72,0.15); }
.pill-demo    { background: var(--gold-soft); color: #7A5E2F; border: 1px solid rgba(21,46,72,0.2); }
.pill-free    { background: rgba(137,148,129,0.12); color: #5a6352; border: 1px solid rgba(137,148,129,0.2); }
.event-title  { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--obsidian); margin-bottom: var(--space-1); }
.event-meta   { font-size: 0.8rem; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.event-meta-item { display: flex; align-items: center; gap: var(--space-2); }
.event-meta-item svg { width: 13px; height: 13px; stroke: var(--sage); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.event-spots { font-size: 0.75rem; font-weight: 600; color: var(--burgundy); white-space: nowrap; }
.event-spots.sold { color: var(--sage); }

/* Social channel card */
.social-card {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-card);
  border: 1px solid rgba(7,17,28,0.09);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  text-decoration: none;
}
.social-card:hover { border-color: rgba(21,46,72,0.35); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.social-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.social-icon svg { width: 22px; height: 22px; stroke: var(--white); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.social-icon.yt  { background: #FF0000; }
.social-icon.fb  { background: #1877F2; }
.social-icon.ig  { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.social-icon.tt  { background: #010101; }
.social-icon.th  { background: #000; }
.social-name { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; color: var(--obsidian); }
.social-handle { font-size: 0.78rem; color: var(--sage); }
.social-arrow { margin-left: auto; width: 16px; height: 16px; stroke: var(--taupe); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-band { background: var(--burgundy); padding-block: var(--space-12); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-item { text-align: center; padding: var(--space-6) var(--space-4); border-right: 1px solid rgba(240,245,250,0.1); }
.stat-item:last-child, .stat-item:nth-child(2):last-child { border-right: none; }
@media (max-width: 767px) { .stat-item:nth-child(2) { border-right: none; } }
.stat-num { font-family: var(--font-heading); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; color: var(--cream); line-height: 1; }
.stat-num span { color: var(--gold-light); opacity: 0.8; }
.stat-lbl { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,245,250,0.6); margin-top: var(--space-2); }

/* ============================================================
   NEWSLETTER STRIP
   ============================================================ */
.newsletter-strip { background: var(--cream-dark); border-top: 1px solid rgba(7,17,28,0.09); border-bottom: 1px solid rgba(7,17,28,0.09); }
.newsletter-inner {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-6); align-items: center;
}
@media (min-width: 768px) { .newsletter-inner { grid-template-columns: 1fr 1fr; } }
.newsletter-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--obsidian); }
.newsletter-sub { font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--space-1); }
.newsletter-form { display: flex; gap: var(--space-3); }
.newsletter-input {
  flex: 1; padding: 0.75rem 1rem;
  background: var(--white); border: 1.5px solid rgba(7,17,28,0.15);
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.88rem;
  color: var(--obsidian); transition: border-color var(--t-fast);
  min-width: 0;
}
.newsletter-input::placeholder { color: var(--taupe); }
.newsletter-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,160,100,0.18); }
.newsletter-btn {
  padding: 0.75rem 1.5rem; background: var(--burgundy); color: var(--cream);
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast);
}
.newsletter-btn:hover { background: var(--gold-light); color: var(--obsidian); transform: translateY(-1px); }

/* ============================================================
   CONTACT CHANNELS
   ============================================================ */
.contact-channels { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-channel {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-md);
  border: 1.5px solid; cursor: pointer; text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  font-family: var(--font-heading); font-size: 0.88rem; font-weight: 600;
}
.contact-channel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-channel-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-channel-icon svg { width: 22px; height: 22px; }
.contact-channel-name { font-weight: 700; }
.contact-channel-detail { font-size: 0.78rem; font-weight: 400; opacity: 0.75; }
.channel-email   { border-color: rgba(21,46,72,0.3); color: var(--obsidian); }
.channel-email   .contact-channel-icon { background: var(--gold-soft); }
.channel-email   .contact-channel-icon svg { stroke: var(--gold); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.channel-wa      { border-color: rgba(37,211,102,0.3); color: #128C7E; }
.channel-wa      .contact-channel-icon { background: rgba(37,211,102,0.1); }
.channel-wa      .contact-channel-icon svg { fill: #25D366; stroke: none; }
.channel-viber   { border-color: rgba(127,83,172,0.3); color: #7F53AC; }
.channel-viber   .contact-channel-icon { background: rgba(127,83,172,0.1); }
.channel-viber   .contact-channel-icon svg { fill: #7F53AC; stroke: none; }
.channel-zalo    { border-color: rgba(0,103,216,0.3); color: #0067D8; }
.channel-zalo    .contact-channel-icon { background: rgba(0,103,216,0.1); }
.channel-zalo    .contact-channel-icon svg { fill: #0067D8; stroke: none; }
.channel-fb      { border-color: rgba(24,119,242,0.3); color: #1877F2; }
.channel-fb      .contact-channel-icon { background: rgba(24,119,242,0.1); }
.channel-fb      .contact-channel-icon svg { fill: #1877F2; stroke: none; }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 480px) { .form-row-2 { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 0.75rem 1rem;
  background: var(--white); border: 1.5px solid rgba(7,17,28,0.15);
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem;
  color: var(--obsidian); transition: border-color var(--t-fast);
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,160,100,0.18); }
.form-input.error, .form-textarea.error { border-color: var(--color-error); }
.form-error-msg {
  display: none; font-size: 0.8rem; color: var(--color-error);
  margin-top: var(--space-1); padding-left: var(--space-1);
}
.form-input.error ~ .form-error-msg,
.form-textarea.error ~ .form-error-msg { display: block; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--taupe); }
.form-select { cursor: pointer; color: var(--text-secondary); }
.form-select option { color: var(--obsidian); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-submit {
  width: 100%; padding: 0.95rem; background: var(--burgundy); color: var(--cream);
  font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; border: none;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.form-submit:hover { background: var(--gold-light); color: var(--obsidian); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(21,46,72,0.18); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Dark form variants */
.form-dark .form-input, .form-dark .form-select, .form-dark .form-textarea {
  background: rgba(240,245,250,0.05); border-color: rgba(7,17,28,0.2); color: var(--cream);
}
.form-dark .form-input::placeholder, .form-dark .form-textarea::placeholder { color: rgba(7,17,28,0.35); }
.form-dark .form-input:focus, .form-dark .form-select:focus, .form-dark .form-textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,160,100,0.22); }
.form-dark .form-label { color: var(--taupe); }
.form-dark .form-select { color: rgba(7,17,28,0.7); }
.form-dark .form-select option { background: var(--obsidian); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--obsidian);
  border-top: 1px solid rgba(21,46,72,0.1);
  padding-block: var(--space-16) var(--space-10);
}
.footer-grid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); }
}
.footer-brand-desc { font-size: 0.83rem; color: var(--sage); line-height: 1.7; margin-top: var(--space-4); max-width: 280px; }
.footer-col-title { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-5); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { font-size: 0.83rem; color: var(--sage); transition: color var(--t-fast); }
.footer-links a:hover { color: var(--cream); }
.footer-contact-item { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.8rem; color: var(--sage); margin-bottom: var(--space-3); }
.footer-contact-item svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
  margin-top: var(--space-10); padding-top: var(--space-6);
  border-top: 1px solid rgba(7,17,28,0.07);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: center;
}
.footer-copy { font-size: 0.76rem; color: var(--footer-copy-color); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: rgba(240,245,250,0.04); border: 1px solid rgba(7,17,28,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover { background: rgba(21,46,72,0.12); border-color: rgba(21,46,72,0.3); }
.footer-social svg { width: 15px; height: 15px; stroke: var(--sage); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   UTILITY SECTIONS
   ============================================================ */

/* Philosophy pillars */
.pillar {
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--gold);
  background: rgba(240,245,250,0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-top: 1px solid rgba(21,46,72,0.1);
  border-bottom: 1px solid rgba(21,46,72,0.1);
  border-right: 1px solid rgba(21,46,72,0.1);
  transition: background var(--t-mid);
}
.pillar:hover { background: rgba(21,46,72,0.12); }
.pillar h3 { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--cream); margin-bottom: var(--space-1); }
.pillar p  { font-size: 0.8rem; color: var(--sage); line-height: 1.6; }

/* Quote block */
.quote-block { position: relative; padding-left: var(--space-8); }
.quote-block::before {
  content: '"'; position: absolute; left: 0; top: -12px;
  font-family: var(--font-heading); font-size: 5rem; font-weight: 800;
  color: var(--burgundy); opacity: 0.5; line-height: 1;
}
.quote-text { font-family: var(--font-heading); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 300; color: var(--cream); line-height: 1.6; font-style: italic; }
.quote-text strong { font-weight: 700; font-style: normal; color: var(--gold-light); }
.quote-byline { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.quote-byline-line { width: 20px; height: 1px; background: var(--gold); }
.quote-byline-name { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Two-col with image placeholder */
.about-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); align-items: start; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 400px 1fr; } }
.photo-placeholder {
  width: 100%; aspect-ratio: 3/4; max-height: 500px;
  background: linear-gradient(155deg, var(--obsidian), var(--burgundy-dark));
  border-radius: var(--radius-md);
  border: 1px solid rgba(21,46,72,0.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); position: relative; overflow: hidden;
}
.photo-placeholder-initials { font-family: var(--font-heading); font-size: 4.5rem; font-weight: 800; color: rgba(21,46,72,0.25); user-select: none; }
.photo-placeholder-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(7,17,28,0.35); }
.photo-corner { position: absolute; width: 36px; height: 36px; border-color: rgba(21,46,72,0.2); border-style: solid; border-width: 0; }
.photo-corner-tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.photo-corner-br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.photo-badge {
  position: absolute; bottom: -14px; right: -14px;
  background: var(--burgundy); border: 1px solid rgba(21,46,72,0.2);
  border-radius: var(--radius-sm); padding: var(--space-4); text-align: center;
}
.photo-badge-n { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: var(--gold); line-height: 1; }
.photo-badge-l { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); margin-top: 2px; }
.about-text p { color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--space-5); font-size: 1rem; }

/* Tag list */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.tag {
  padding: 0.38rem 0.85rem; border-radius: 999px;
  border: 1px solid rgba(21,46,72,0.25);
  font-family: var(--font-heading); font-size: 0.73rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--burgundy); background: var(--burgundy-soft);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.tag:hover { background: rgba(21,46,72,0.12); border-color: var(--burgundy); }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Page content spacing ── */
.pt-nav { padding-top: var(--nav-h); }

/* ── Dividers ── */
.divider { height: 1px; background: rgba(7,17,28,0.08); }
.divider-dark { height: 1px; background: rgba(21,46,72,0.1); }

/* ── Text helpers ── */
.text-gold { color: var(--gold); }
.text-burgundy { color: var(--burgundy); }
.text-muted { color: var(--text-muted); }
.text-cream { color: var(--cream); }

/* ── Section with dark bg ── */
.bg-dark { background: var(--obsidian); }
.bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--cream); }
.bg-dark .section-desc { color: var(--taupe); }
.bg-dark .eyebrow-line { background: var(--gold-light); }
.bg-dark .eyebrow-text { color: var(--gold-light); }
.bg-burgundy { background: var(--burgundy); }
.bg-cream-alt { background: var(--surface-warm); }