/* The Data and AI School of London - Main Styles */
/* ─── Design Tokens ──────────────────────────────────────────────────────────── */
:root {
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --radius: 10px;
  --radius-lg: 18px;
  --transition: 0.2s ease;

  /* Layout, controls max content width and responsive side margins site-wide */
  --site-width: 1040px;
  --side-pad: clamp(1.25rem, 5vw, 3.5rem);
}

/* ─── Light theme: Warm Parchment + Oxford Navy + Academic Gold ──────────────── */
:root,
html[data-theme="light"] {
  --bg-page:          #F5F0E8;       /* warm parchment, welcoming, prestigious */
  --bg-card:          #FFFFFF;
  --bg-elevated:      #EBE4D8;       /* slightly deeper parchment for alt sections */
  --text-primary:     #1B1612;       /* warm near-black */
  --text-muted:       #6B5E52;       /* warm brown-grey */
  --accent:           #0A2240;       /* Oxford deep navy, trust, authority */
  --accent-hover:     #0E3268;       /* slightly lighter navy */
  --accent-muted:     rgba(10,34,64,0.09);
  --on-accent:        #FFFFFF;
  --gold:             #9A6009;       /* academic gold, WCAG AA (4.5:1) on white and parchment */
  --gold-hover:       #C47D0D;
  --gold-muted:       rgba(168,105,10,0.13);
  --on-gold:          #FFFFFF;
  --border:           #D8D0C3;
  --header-bg:        rgba(245,240,232,0.96);
  --footer-bg:        #0A2240;       /* navy footer, classic academic look */
  --footer-text:      rgba(210,220,235,0.75);
  --footer-text-hover:#C89930;       /* gold on hover in footer */
  --footer-border:    #C89930;       /* gold border on footer top */
  --shadow:           0 6px 28px rgba(10,34,64,0.13);
  --shadow-card:      0 2px 12px rgba(10,34,64,0.07);
  --bg-dark: var(--bg-page);         /* alias kept for existing usage */
  --navy:             #0A2240;       /* fixed dark panel (white text), same in both themes */
  --surface-2:        #F0F4F8;       /* subtle inset box (used by migrated blog content) */
}

/* ─── Dark theme: Deep Navy + Gold accents ───────────────────────────────────── */
html[data-theme="dark"] {
  --bg-page:          #0C1524;       /* deep academic night-navy */
  --bg-card:          #112038;       /* card surface */
  --bg-elevated:      #1A3055;       /* elevated surfaces */
  --text-primary:     #EDE5D5;       /* warm cream white */
  --text-muted:       #8DA3BE;       /* cool blue-grey muted */
  --accent:           #C89930;       /* gold becomes primary, pops on dark navy */
  --accent-hover:     #DFB040;
  --accent-muted:     rgba(200,153,48,0.18);
  --on-accent:        #0C1524;
  --gold:             #C89930;
  --gold-hover:       #DFB040;
  --gold-muted:       rgba(200,153,48,0.18);
  --on-gold:          #0C1524;
  --border:           #1E3A5E;
  --header-bg:        rgba(12,21,36,0.97);
  --footer-bg:        #080E1A;
  --footer-text:      rgba(180,200,225,0.65);
  --footer-text-hover:#DFB040;
  --footer-border:    #C89930;
  --shadow:           0 6px 28px rgba(0,0,0,0.45);
  --shadow-card:      0 2px 12px rgba(0,0,0,0.30);
  --bg-dark: var(--bg-page);
  --navy:             #0A2240;
  --surface-2:        #16233A;
}

/* ─── System theme ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg-page:          #F5F0E8;
    --bg-card:          #FFFFFF;
    --bg-elevated:      #EBE4D8;
    --text-primary:     #1B1612;
    --text-muted:       #6B5E52;
    --accent:           #0A2240;
    --accent-hover:     #0E3268;
    --accent-muted:     rgba(10,34,64,0.09);
    --on-accent:        #FFFFFF;
    --gold:             #A8690A;
    --gold-hover:       #C47D0D;
    --gold-muted:       rgba(168,105,10,0.13);
    --on-gold:          #FFFFFF;
    --border:           #D8D0C3;
    --header-bg:        rgba(245,240,232,0.96);
    --footer-bg:        #0A2240;
    --footer-text:      rgba(210,220,235,0.75);
    --footer-text-hover:#C89930;
    --footer-border:    #C89930;
    --shadow:           0 6px 28px rgba(10,34,64,0.13);
    --shadow-card:      0 2px 12px rgba(10,34,64,0.07);
    --bg-dark: var(--bg-page);
    --navy:             #0A2240;
    --surface-2:        #F0F4F8;
  }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg-page:          #0C1524;
    --bg-card:          #112038;
    --bg-elevated:      #1A3055;
    --text-primary:     #EDE5D5;
    --text-muted:       #8DA3BE;
    --accent:           #C89930;
    --accent-hover:     #DFB040;
    --accent-muted:     rgba(200,153,48,0.18);
    --on-accent:        #0C1524;
    --gold:             #C89930;
    --gold-hover:       #DFB040;
    --gold-muted:       rgba(200,153,48,0.18);
    --on-gold:          #0C1524;
    --border:           #1E3A5E;
    --header-bg:        rgba(12,21,36,0.97);
    --footer-bg:        #080E1A;
    --footer-text:      rgba(180,200,225,0.65);
    --footer-text-hover:#DFB040;
    --footer-border:    #C89930;
    --shadow:           0 6px 28px rgba(0,0,0,0.45);
    --shadow-card:      0 2px 12px rgba(0,0,0,0.30);
    --bg-dark: var(--bg-page);
    --navy:             #0A2240;
    --surface-2:        #16233A;
  }
}

/* ─── System-dark overrides ─────────────────────────────────────────────────── */
/* Mirror every html[data-theme="dark"] element override for system dark mode.   */
/* CSS variables are already handled by the @media block above; only hard-coded  */
/* rgba/hex values need explicit system selectors.                                */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .logo-location { color: rgba(255,255,255,0.55); }

  html[data-theme="system"] .nav-portal-btn {
    background: #C89930;
    border-color: #C89930;
    color: #0A2240 !important;
  }
  html[data-theme="system"] .nav-portal-btn:hover {
    background: #DFB040 !important;
    border-color: #DFB040 !important;
    color: #0A2240 !important;
  }

  html[data-theme="system"] .hero::after {
    background-image: radial-gradient(circle, rgba(200,153,48,0.12) 1.5px, transparent 1.5px);
  }
  html[data-theme="system"] .hero-school-badge {
    border-color: rgba(200,153,48,0.25);
  }
  html[data-theme="system"] .tech-chip {
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  html[data-theme="system"] .hero-stats-row {
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  }
  html[data-theme="system"] .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(200,153,48,0.3);
  }
  html[data-theme="system"] .course-card .badge {
    border-color: rgba(200,153,48,0.25);
  }
  html[data-theme="system"] .values-list .value-icon {
    border-color: rgba(200,153,48,0.2);
  }
  html[data-theme="system"] .form-feedback.success {
    color: #4ade80;
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.3);
  }
  html[data-theme="system"] .form-feedback.error {
    color: #f87171;
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.3);
  }
}

/* ─── Cross-browser normalisation ───────────────────────────────────────────── */
/* Ensures consistent rendering across Chrome, Safari, Firefox, Brave, Edge     */

/* 1. Box model */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 2. Font rendering, consistent across macOS/iOS Safari and Chrome/Brave */
html {
  -webkit-text-size-adjust: 100%;   /* stop iOS Safari inflating fonts on rotate */
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;              /* older Safari */
  scroll-behavior: smooth;
  tab-size: 4;
}

/* 3. Form elements, Safari resets native appearance so styled controls match */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  -webkit-appearance: none;         /* Safari: removes default native styling */
  appearance: none;
  border-radius: 0;                 /* Safari adds border-radius on inputs */
}

/* Restore checkbox/radio native rendering (we style accent-color instead) */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
}

/* 4. Links, remove tap highlight on mobile Safari */
a {
  -webkit-tap-highlight-color: transparent;
}

/* 5. Images, prevent overflow and Safari gaps under inline images */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Headings, prevent Safari from applying its own bold weight */
h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
}

/* 7. Lists, Safari and Firefox handle list-style differently */
ul, ol { list-style: none; }

/* 8. Tables */
table { border-collapse: collapse; border-spacing: 0; }

/* 9. Hidden elements */
[hidden] { display: none !important; }

/* 10. Focus visible, consistent keyboard focus ring across all browsers (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--accent, #0A2240);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }
/* The footer is navy in light mode, so a navy ring would be invisible there:
   use gold (6.1:1 on navy) so the focus indicator stays visible (WCAG 1.4.11). */
.site-footer :focus-visible { outline-color: #C89930; }

/* 11. Skip link, lets keyboard / screen-reader users jump past the nav (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 2000;
  background: var(--accent, #0A2240);
  /* Pair the label with the background. In dark theme --accent is the gold
     #C89930, and white on that is 2.6:1; --on-accent darkens to #0C1524 so the
     skip link stays legible in both themes. */
  color: var(--on-accent, #ffffff);
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #C89930;
  outline-offset: 2px;
}

/* 12. Screen-reader-only text utility (accessible names without visible clutter) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* 13. Respect users who ask for reduced motion (WCAG 2.3.3 / 2.2.2) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Reset ──────────────────────────────────────────────────────────────────── */
html { }   /* extended above */

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent-hover); }

/* ─── Header & Navigation ────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.5rem clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.6rem;
}

/* Logo: navy "The Data and AI" + gold "School of London" */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
  border-radius: 8px;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.logo-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.logo-location {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html[data-theme="dark"] .logo-name     { color: var(--gold); }
html[data-theme="dark"] .logo-location { color: rgba(255,255,255,0.55); }

/* Hide text on very small screens to avoid overflow */
@media (max-width: 360px) {
  .logo-text { display: none; }
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
}
.nav-main a {
  color: var(--text-muted);
  padding: 0.45rem 0.4rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav-main a:hover,
.nav-main a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-muted);
}
.nav-main .nav-theme-wrap { margin-left: 0.35rem; }

/* Student Portal nav button */
.nav-portal-item { margin-left: 0.25rem; }
.nav-portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #0A2240;
  color: #C89930 !important;
  border: 2px solid #0A2240;
  border-radius: var(--radius);
  padding: 0.35rem 0.85rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.nav-portal-btn:hover {
  background: #C89930 !important;
  border-color: #C89930 !important;
  color: #0A2240 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200,153,48,0.35);
}
html[data-theme="dark"] .nav-portal-btn {
  background: #C89930;
  border-color: #C89930;
  color: #0A2240 !important;
}
html[data-theme="dark"] .nav-portal-btn:hover {
  background: #DFB040 !important;
  border-color: #DFB040 !important;
  color: #0A2240 !important;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.theme-toggle:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ─── Main content wrapper ───────────────────────────────────────────────────── */
main {
  flex: 1;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 1.5rem var(--side-pad) 2.5rem;
  width: 100%;
}

/* ─── Hero ───────────────────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 2.25rem 0 2.75rem;
  position: relative;
  overflow: hidden;
}

/* Soft radial glows */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, var(--accent-muted) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 50% 80%, var(--gold-muted) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Dot-grid tech overlay */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10,34,64,0.13) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="dark"] .hero::after {
  background-image: radial-gradient(circle, rgba(200,153,48,0.12) 1.5px, transparent 1.5px);
}

.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.hero h1 .highlight {
  background: linear-gradient(100deg, #7A4E06 0%, var(--gold) 38%, var(--gold-hover) 82%, #D28A16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold); /* fallback if background-clip unsupported */
  position: relative;
}

.hero .tagline {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 2.25rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-image {
  margin-top: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.hero-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ─── Hero school badge ──────────────────────────────────────────────────────── */
.hero-school-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.45rem 1.15rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.35rem;
  box-shadow: 0 2px 12px rgba(10,34,64,0.07);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html[data-theme="dark"] .hero-school-badge {
  color: var(--gold);
  box-shadow: 0 2px 12px rgba(0,0,0,0.28);
}

/* ─── Hero tech visual (replaces old image) ──────────────────────────────────── */
.hero-tech-visual {
  margin-top: 1.75rem;
}

/* Floating tech skill chips */
.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.tech-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.45rem 1.05rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(10,34,64,0.07);
  animation: chip-float 4s ease-in-out infinite;
  font-family: var(--font-sans);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tech-chip:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(10,34,64,0.14);
}
@media (prefers-reduced-motion: reduce) {
  .tech-chip { animation: none; }
}
.tech-chip:nth-child(2) { animation-delay: 0.5s; }
.tech-chip:nth-child(3) { animation-delay: 1.0s; }
.tech-chip:nth-child(4) { animation-delay: 1.5s; }
.tech-chip:nth-child(5) { animation-delay: 2.0s; }
.tech-chip:nth-child(6) { animation-delay: 2.5s; }
.tech-chip:nth-child(7) { animation-delay: 3.0s; }
.tech-chip:nth-child(8) { animation-delay: 3.5s; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0);    box-shadow: 0 2px 10px rgba(10,34,64,0.07); }
  50%       { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(10,34,64,0.12); }
}
html[data-theme="dark"] .tech-chip {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Stats bar */
.hero-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.5rem;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 4px 24px rgba(10,34,64,0.08);
  flex-wrap: wrap;
  gap: 0.5rem 0;
}
.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.3rem;
}
.stat-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 0.3rem;
  font-weight: 600;
  white-space: nowrap;
}
.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}
html[data-theme="dark"] .hero-stats-row {
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .stat-val { color: var(--gold); }

/* ─── Image sections ─────────────────────────────────────────────────────────── */
.image-section { margin-bottom: 3rem; }
.image-section img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  object-fit: cover;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.image-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.image-grid img:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.img-with-caption { margin-bottom: 2rem; }
.img-with-caption img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.img-with-caption .caption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
}

.banner-image {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 2.25rem;
  box-shadow: var(--shadow-card);
}
.banner-image img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

.two-col-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2rem;
}
.two-col-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  object-fit: cover;
}
/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  letter-spacing: 0.01em;
  font-family: var(--font-sans);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

/* Primary: navy fill with gold border accent on hover */
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10,34,64,0.25);
}
html[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(200,153,48,0.3);
}

/* Secondary: outlined */
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent-muted);
  transform: translateY(-2px);
}

/* Gold button (used for highlights if needed) */
.btn-gold {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  transform: translateY(-2px);
}

/* ─── Section titles ─────────────────────────────────────────────────────────── */
.section-title {
  font-size: 1.875rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
/* Gold underline accent on section titles */
.section-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-top: 0.5rem;
}

.section-subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
  max-width: 580px;
  font-size: 1rem;
  line-height: 1.65;
}

/* ─── Course cards ───────────────────────────────────────────────────────────── */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.course-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
/* Gold top accent bar */
.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  opacity: 0;
  transition: opacity var(--transition);
}
.course-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.course-card:hover::before {
  opacity: 1;
}
.course-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--accent);
}
.course-card p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.course-card a {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.9rem;
}
.course-card a:hover { color: var(--gold-hover); }

/* Badge, gold pill */
.course-card .badge {
  display: inline-block;
  background: var(--gold-muted);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  margin-bottom: 0.875rem;
  font-family: var(--font-mono);
  border: 1px solid rgba(168,105,10,0.2);
}
html[data-theme="dark"] .course-card .badge {
  border-color: rgba(200,153,48,0.25);
}

/* ─── Content sections ───────────────────────────────────────────────────────── */
.content-section { margin-bottom: 2.5rem; }
.content-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--border);
  position: relative;
  letter-spacing: -0.01em;
}
/* Gold left accent for h2 in content sections */
.content-section h2::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--gold);
}

/* ─── Forms ──────────────────────────────────────────────────────────────────── */
.contact-form,
.apply-form {
  max-width: 560px;
}

.form-group { margin-bottom: 1.375rem; }
.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* Safari: select arrow fix, adds consistent dropdown arrow across browsers */
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B5E52' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Safari: search input clear button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Safari: number input spinner */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Safari: date input styling normalisation */
input[type="date"],
input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.75rem;
}

.form-actions { margin-top: 1.75rem; }

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--footer-bg);
  border-top: 3px solid var(--footer-border);
  margin-top: auto;
}
.footer-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 2rem var(--side-pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}
.footer-inner p {
  color: var(--footer-text);
  font-size: 0.875rem;
}
/* Footer links are always on a navy background in every theme,
   so use a hard-coded gold rather than a theme variable.
   Include :link and :visited so the browser's default visited-link
   colour never overrides us. */
.site-footer .footer-inner p a:link,
.site-footer .footer-inner p a:visited {
  color: #C89930;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer .footer-inner p a:hover,
.site-footer .footer-inner p a:focus {
  color: #ffffff;
}
.footer-inner strong {
  color: var(--footer-text-hover);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  align-items: center;
}
.footer-nav a {
  color: var(--footer-text);
  font-size: 0.875rem;
  transition: color var(--transition);
}
.footer-nav a:hover,
.footer-nav a[aria-current="page"] {
  color: var(--footer-text-hover);
}

/* ─── Page title & intro (inner pages) ──────────────────────────────────────── */
.page-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.page-title {
  font-size: clamp(2.125rem, 4vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 0.6rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--text-primary);
}
.page-title .title-accent {
  background: linear-gradient(100deg, #7A4E06 0%, var(--gold) 38%, var(--gold-hover) 82%, #D28A16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
.page-intro {
  color: var(--text-muted);
  margin-bottom: 2rem;
  max-width: 640px;
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* ─── Values / features list ─────────────────────────────────────────────────── */
.values-list { list-style: none; }
.values-list li {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
}
.values-list li:last-child { border-bottom: none; }
.values-list .value-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--gold-muted);
  color: var(--gold);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  border: 1px solid rgba(168,105,10,0.2);
}
html[data-theme="dark"] .values-list .value-icon {
  border-color: rgba(200,153,48,0.2);
}

/* ─── Utility ────────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Responsive, tablet (≤1024px) ─────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Slightly tighter side padding on tablet */
  :root { --side-pad: clamp(1rem, 4vw, 2.5rem); }

  /* Course grid: 2 columns on tablet */
  .course-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }

  /* Blog grid: 2 columns on tablet */
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  /* Admission form: collapse 2-col grid to 1 col on tablet */
  .form-grid { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: span 1; }

  /* Admission intro grid: stack on tablet */
  .adm-intro-grid { grid-template-columns: 1fr; }
  .adm-checklist { max-width: 100%; }

  /* Hero: tighten up */
  .hero { padding: 1.75rem 0 2.25rem; }

  /* Touch targets: minimum 44px height for all interactive elements */
  .btn { min-height: 60px; }
  input:not([type="radio"]):not([type="checkbox"]), select, textarea { min-height: 60px; }
}

/* ─── Responsive, mobile (≤1040px) ─────────────────────────────────────────── */
/* Nav-only breakpoint: collapse the menu to a hamburger slightly earlier
   (1080px) so the full desktop nav never wraps to a second row. All the
   other responsive rules keep their original 1040px breakpoint below. */
@media (max-width: 1080px) {
  .menu-toggle { display: block; }
  .nav-main {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
  }
  .nav-main.is-open { display: flex; }
  .nav-main a { padding: 0.85rem 0.75rem; font-size: 1rem; min-height: 60px; }
  .header-inner { align-items: center; flex-wrap: wrap; }
  .nav-portal-item { margin-left: 0; margin-top: 0.25rem; }
  .nav-portal-btn {
    display: flex !important;
    justify-content: center;
    width: 100%;
    padding: 0.85rem 0.75rem !important;
    font-size: 1rem !important;
    min-height: 60px;
    border-radius: var(--radius);
  }
  .header-actions { margin-top: 0.5rem; }
}

@media (max-width: 1040px) {

  /* Hero section */
  .hero { padding: 1.5rem 0 1.75rem; }
  .hero h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .hero .tagline { font-size: 1rem; margin-bottom: 1.75rem; }
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    min-height: 48px;
  }
  .hero-image { margin-top: 1.75rem; border-radius: var(--radius); }
  .hero-image img { max-height: 220px; object-fit: cover; }
  .tech-chip { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
  .hero-stat-item { padding: 0 1rem; }
  .stat-val { font-size: 1.2rem; }
  .hero-school-badge { font-size: 0.72rem; padding: 0.35rem 0.9rem; }

  /* Section titles */
  .section-title { font-size: 1.5rem; }
  .section-subtitle { font-size: 0.9375rem; }

  /* Page titles (inner pages) */
  .page-title { font-size: 1.75rem; }
  .page-intro { font-size: 1rem; }

  /* Banner images */
  .banner-image { border-radius: var(--radius); }
  .banner-image img { max-height: 180px; }

  /* Image grids */
  .image-grid { grid-template-columns: 1fr 1fr; gap: 0.875rem; }
  .image-grid img { height: 160px; }
  .img-with-caption img { max-height: 200px; }
  .two-col-image { grid-template-columns: 1fr; }

  /* Course cards */
  .course-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .course-card { padding: 1.25rem; }

  /* Content sections */
  .content-section { margin-bottom: 2.5rem; }

  /* Blog listing page */
  .blog-hero-img img { max-height: 160px; object-fit: cover; }
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .blog-card-img { height: 140px; }

  /* Blog post pages */
  .blog-post { padding: 0; }
  .blog-post-header h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
  .blog-post-header img { max-height: 200px; object-fit: cover; }

  /* Forms: full width, larger touch targets */
  .form-group input,
  .form-group select,
  .form-group textarea { min-height: 48px; font-size: 1rem; }
  .form-group select { background-position: right 0.625rem center; }
  .contact-form, .apply-form { max-width: 100%; }

  /* Admission form: single column */
  .form-grid { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: span 1; }
  .adm-intro-grid { grid-template-columns: 1fr; }
  .form-section-body { padding: 1rem; }

  /* Radio/checkbox groups on mobile: stack vertically */
  .radio-group, .check-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .radio-group label, .check-group label {
    min-height: 60px;
    align-items: center;
  }

  /* Upload zones: full width */
  .upload-zone { padding: 1rem; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-nav { flex-wrap: wrap; gap: 0.25rem 1rem; }
  .footer-nav a { min-height: 60px; display: inline-flex; align-items: center; }

  /* Buttons: minimum touch target */
  .btn { min-height: 60px; }
}

/* ─── Responsive, small mobile (≤480px) ────────────────────────────────────── */
@media (max-width: 480px) {

  /* Side padding tighter */
  :root { --side-pad: 1rem; }

  /* Hero */
  .hero { padding: 2rem 0 1.5rem; }
  .hero h1 { font-size: 1.625rem; letter-spacing: -0.01em; }
  .hero .tagline { font-size: 0.9375rem; }
  .hero-image img { max-height: 180px; }
  .hero-stats-row { padding: 0.85rem 0.75rem; }
  .hero-stat-item { padding: 0 0.65rem; }
  .hero-stat-divider { height: 30px; }
  .hero-tech-visual { margin-top: 2rem; }
  .hero-actions .btn { max-width: 100%; min-height: 52px; font-size: 1rem; }

  /* Titles */
  .page-title { font-size: 1.5rem; }
  .section-title { font-size: 1.375rem; }

  /* Banners */
  .banner-image img { max-height: 140px; }

  /* Image grid: single column */
  .image-grid { grid-template-columns: 1fr; }
  .image-grid img { height: 200px; }
  .img-with-caption img { max-height: 170px; }

  /* Blog */
  .blog-hero-img img { max-height: 130px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-img { height: 160px; }
  .blog-post-header img { max-height: 170px; }

  /* Course grid: single column */
  .course-grid { grid-template-columns: 1fr; }

  /* Blog CTA buttons: stack and full width */
  .blog-cta .btn {
    display: block;
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 0.75rem;
    text-align: center;
    min-height: 52px;
    line-height: 1.4;
  }

  /* Values list */
  .values-list .value-icon { width: 34px; height: 34px; min-width: 34px; font-size: 0.875rem; }

  /* FAQ */
  .faq-item summary { font-size: 0.875rem; padding: 0.875rem 1rem; min-height: 60px; }

  /* Forms */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 1rem; min-height: 52px; }
  .form-group label { font-size: 0.875rem; }
  .form-section-hd { padding: 0.875rem 1rem; }
  .form-section-hd h2 { font-size: 0.9375rem; }

  /* Declaration checkboxes: easier to tap */
  .declaration-item { padding: 0.75rem 0; gap: 0.75rem; }
  .declaration-item input[type="checkbox"] {
    width: 1.25rem; height: 1.25rem; flex-shrink: 0;
  }

  /* Policy TOC */
  .policy-toc ol { columns: 1; }

  /* Team avatars */
  .team-avatar { width: 72px; height: 72px; font-size: 1.25rem; }

  /* Cookie banner */
  .cookie-banner-actions { flex-direction: column; }
  .cookie-banner-actions .btn { width: 100%; min-height: 48px; }
}

/* ─── Testimonials ───────────────────────────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.testimonial-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 0.75rem; left: 1.25rem;
  font-size: 4rem; line-height: 1;
  color: var(--gold); opacity: 0.25;
  font-family: Georgia, serif;
}
.testimonial-stars {
  color: #E8B030; font-size: 1rem;
  margin-bottom: 0.875rem; letter-spacing: 2px;
}
.testimonial-card p {
  font-size: 0.9375rem; line-height: 1.7;
  color: var(--text-primary); font-style: italic;
  margin: 0 0 1.25rem;
}
.testimonial-card footer {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding-top: 1rem; border-top: 1px solid var(--border);
}
.testimonial-card footer strong { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.testimonial-card footer span { font-size: 0.8125rem; color: var(--text-muted); }

/* ─── FAQ / AEO Section ──────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }

/* ── Latest Post (homepage) ──────────────────────────────────────────────── */
.latest-post-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: var(--gold-muted, rgba(200,153,48,0.12));
  border: 1px solid rgba(200,153,48,0.3);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 1.25rem;
}
.latest-post-card {
  display: flex;
  gap: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.latest-post-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 24px rgba(10,34,64,0.12);
}
.latest-post-img {
  flex-shrink: 0;
  width: 300px;
  min-height: 240px;    /* explicit height so Windows browsers don't collapse it */
  position: relative;
  overflow: hidden;
  display: block;
}
.latest-post-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.latest-post-card:hover .latest-post-img img { transform: scale(1.03); }
.latest-post-body {
  flex: 1;
  padding: 1.75rem 1.75rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.latest-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.latest-post-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--text);
}
.latest-post-title a {
  color: inherit;
  text-decoration: none;
}
.latest-post-title a:hover { color: var(--accent); }
.latest-post-excerpt {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.latest-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.latest-post-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.latest-post-btn {
  padding: 0.45rem 1.1rem !important;
  font-size: 0.85rem !important;
}

/* Mobile: stack image above content */
@media (max-width: 700px) {
  .latest-post-card { flex-direction: column; }
  .latest-post-img { width: 100%; height: 200px; }
  .latest-post-body { padding: 1.25rem; }
  .latest-post-footer { flex-direction: column; align-items: flex-start; }
}

.faq-item {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item[open] { border-color: var(--gold); }

.faq-item summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--bg-elevated); }

.faq-item p {
  padding: 0 1.25rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.faq-item p a { color: var(--accent); text-decoration: underline; }

/* ─── Blog listing page, constrained width ─────────────────────────────────── */
.blog-listing {
  max-width: 1000px;
  margin: 0 auto;
}
.blog-listing .page-title,
.blog-listing .page-intro { max-width: 640px; }

.blog-hero-img {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
}
.blog-hero-img img { width: 100%; height: auto; display: block; }

/* ─── Blog filter bar ────────────────────────────────────────────────────────── */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.blog-tag-outline {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.blog-tag-outline:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-muted);
}
.blog-coming-soon {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}
.blog-coming-soon a { color: var(--accent); text-decoration: underline; }

/* ─── Blog cards ──────────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}
.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.blog-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.blog-card-img svg, .blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 1.25rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.blog-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: var(--gold-muted);
  color: var(--gold);
  border: 1px solid rgba(168,105,10,0.2);
  font-family: var(--font-mono);
}
.blog-date, .blog-read-time {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.blog-card h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  line-height: 1.4;
  border: none;
  padding: 0;
}
.blog-card h2::before { display: none; }
.blog-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}
.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.blog-author { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; }
.blog-read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
}
.blog-read-more:hover { color: var(--gold-hover); }

/* ─── Blog post page ──────────────────────────────────────────────────────────── */
.blog-post { max-width: 740px; margin: 0 auto; }
.blog-post-header { margin-bottom: 2rem; }
.blog-post-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.blog-post-meta {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  align-items: center; margin-bottom: 1.5rem;
}
.blog-post-body h2 {
  font-size: 1.375rem; font-weight: 700;
  margin: 2rem 0 0.75rem;
  color: var(--text-primary);
}
.blog-post-body h3 {
  font-size: 1.125rem; font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  color: var(--text-primary);
}
.blog-post-body p { font-size: 1rem; line-height: 1.8; margin-bottom: 1.25rem; color: var(--text-primary); }
.blog-post-body ul, .blog-post-body ol {
  padding-left: 1.5rem; margin-bottom: 1.25rem;
}
.blog-post-body li { font-size: 1rem; line-height: 1.75; margin-bottom: 0.4rem; color: var(--text-primary); }
.blog-post-body strong { color: var(--text-primary); font-weight: 700; }
.blog-post-body a { color: var(--accent); text-decoration: underline; }

/* Panels the article body sets its own background on, such as the closing call to
   action, carry their own text colour inline on the wrapper. The rules above target
   p, li, strong and a directly, and a selector beats an inherited value, so those
   children were being painted --text-primary regardless: near-black on navy, which
   is what shipped on every generated post. Re-inheriting inside such a panel fixes
   it for every past and future article at once, without the generator having to
   remember anything.

   Matched on the inline background because that is what the generator emits. An
   element with a background and no colour of its own is left alone, since there is
   nothing to inherit and the default is already correct. */
.blog-post-body [style*="background"][style*="color"] p,
.blog-post-body [style*="background"][style*="color"] li,
.blog-post-body [style*="background"][style*="color"] strong,
.blog-post-body [style*="background"][style*="color"] em,
.blog-post-body [style*="background"][style*="color"] h2,
.blog-post-body [style*="background"][style*="color"] h3,
.blog-post-body [style*="background"][style*="color"] h4 { color: inherit; }

/* Links inside such a panel must not fall back to the body accent, which is navy
   and therefore invisible on a navy panel. Anything carrying its own background,
   a button, keeps its own colours. */
.blog-post-body [style*="background"][style*="color"] a:not([style*="background"]) {
  color: inherit; text-decoration: underline;
}
.blog-post-body blockquote {
  border-left: 4px solid var(--gold);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--bg-elevated);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--text-muted);
}
.blog-cta {
  background: var(--bg-elevated);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-top: 3rem;
  text-align: center;
}
.blog-cta h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.blog-cta p { color: var(--text-muted); margin-bottom: 1.25rem; }

/* ── Blog share buttons ──────────────────────────────────────────────────────── */
.blog-share {
  margin: 1.75rem 0;
}
.blog-share-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.blog-share-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: 0.25rem;
}
.blog-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.blog-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
  color: #fff;
}
.blog-share-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.blog-share-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.blog-share-btn:active { transform: translateY(0); }

/* Platform colours */
.blog-share-facebook  { background: #1877F2; }
.blog-share-linkedin  { background: #0A66C2; }
.blog-share-twitter   { background: #000; }
.blog-share-whatsapp  { background: #25D366; }
.blog-share-email     { background: var(--accent); }
.blog-share-copy      { background: var(--bg-card); color: var(--text); border: 1.5px solid var(--border); }
.blog-share-copy:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-card); }
.blog-share-copied    { background: #22c55e !important; color: #fff !important; border-color: #22c55e !important; }

/* Mobile native share button, visible only on small screens */
.mobile-share-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 1rem;
  width: 100%;
  justify-content: center;
}
@media (max-width: 640px) {
  .mobile-share-btn { display: flex; }
}

/* Mobile: tighten */
@media (max-width: 560px) {
  .blog-share-inner { padding: 0.875rem 1rem; gap: 0.5rem; }
  .blog-share-label { width: 100%; margin-right: 0; }
  .blog-share-btn { padding: 8px 12px; font-size: 0.8rem; min-height: 40px; }
}

/* ─── Cookie Consent Banner ──────────────────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-card);
  border-top: 3px solid var(--gold);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  padding: 1rem 1.5rem;
}
.cookie-banner-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 200px;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.55;
}
.cookie-banner-text a {
  color: var(--gold);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ─── Footer cookie settings button ─────────────────────────────────────────── */
.footer-cookie-btn {
  background: none;
  border: none;
  color: var(--footer-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  transition: color var(--transition);
}
.footer-cookie-btn:hover { color: var(--footer-text-hover); }

/* ─── Privacy Policy page ────────────────────────────────────────────────────── */
.policy-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.policy-meta {
  background: var(--bg-elevated);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.policy-meta p { margin: 0.25rem 0; }
.policy-toc {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--border);
}
.policy-toc h2 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}
.policy-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  columns: 2;
  column-gap: 2rem;
}
.policy-toc li {
  font-size: 0.875rem;
  margin-bottom: 0.3rem;
  break-inside: avoid;
}
.policy-toc a { color: var(--accent); text-decoration: none; }
.policy-toc a:hover { text-decoration: underline; }

.policy-page h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.policy-page h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.policy-page h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
.policy-page p,
.policy-page li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.policy-page ul,
.policy-page ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}
.policy-table th,
.policy-table td {
  text-align: left;
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--border);
  line-height: 1.5;
  vertical-align: top;
  color: var(--text-primary);
}
.policy-table th {
  background: var(--bg-elevated);
  font-weight: 600;
  white-space: nowrap;
}
.policy-version-history { margin-top: 1.5rem; }

button.cookie-settings-inline {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ─── Form feedback messages ─────────────────────────────────────────────────── */
.form-feedback {
  margin-top: 1rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  display: none;
}
.form-feedback.success {
  display: block;
  background: rgba(34, 197, 94, 0.1);
  border: 1.5px solid rgba(34, 197, 94, 0.4);
  color: #16a34a;
}
html[data-theme="dark"] .form-feedback.success {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
}
.form-feedback.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  color: #dc2626;
}
html[data-theme="dark"] .form-feedback.error {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}

/* ─── Form privacy notice ────────────────────────────────────────────────────── */
.form-privacy-notice {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.875rem;
  line-height: 1.55;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold);
}
.form-privacy-notice a {
  color: var(--accent);
  text-decoration: underline;
}

/* ─── Small screen overrides ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .policy-toc ol { columns: 1; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; text-align: center; }
}


/* ============================================================
   AI CHAT WIDGET
   ============================================================ */

/* ---- Blinking animation ---- */
@keyframes ai-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(168,105,10,0.5); }
  50%       { opacity: 0.82; box-shadow: 0 0 0 8px rgba(168,105,10,0); }
}

/* ---- Floating chat button (bottom-right, visible on all pages) ---- */
.ai-float-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--gold);
  color: var(--on-gold, #fff);
  border: none;
  border-radius: 32px;
  padding: 0.7rem 1.3rem 0.7rem 1rem;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(168,105,10,0.38);
  animation: ai-blink 1.8s ease-in-out infinite;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ai-float-btn:hover,
.ai-float-btn:focus-visible {
  background: var(--gold-hover);
  animation: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 32px rgba(168,105,10,0.45);
  outline: none;
}
.ai-float-icon { font-size: 1.3rem; line-height: 1; }
.ai-float-label { white-space: nowrap; }
/* Pulsing ring around floating button */
.ai-float-pulse {
  position: absolute;
  inset: -5px;
  border-radius: 36px;
  border: 2px solid var(--gold);
  animation: pulse-ring 1.8s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 600px) {
  .ai-float-btn {
    bottom: 20px;
    right: 16px;
    border-radius: 50%;
    padding: 1rem;       /* 56px tap target */
    gap: 0;
  }
  .ai-float-label { display: none; }
  .ai-float-icon { font-size: 1.5rem; }
  .ai-float-pulse { inset: -6px; border-radius: 50%; }
}

/* ---- Hero section button ---- */
.hero-ai-wrap {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero-ai-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--gold);
  color: var(--on-gold, #fff);
  border: none;
  border-radius: 28px;
  padding: 0.75rem 2rem;
  font-size: 1.0625rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.01em;
  animation: ai-blink 1.8s ease-in-out infinite;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 4px 18px rgba(168,105,10,0.28);
}
.hero-ai-btn:hover,
.hero-ai-btn:focus-visible {
  background: var(--gold-hover);
  animation: none;
  transform: scale(1.04);
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Pulsing ring around hero button */
.hero-ai-pulse {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--gold);
  animation: pulse-ring 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse-ring {
  0%   { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.18); }
}

.hero-ai-caption {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---- Chat overlay ---- */
#ai-chat-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,34,64,0.55);
  z-index: 9999;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(3px);
}
#ai-chat-overlay.ai-chat-open {
  display: flex;
}

/* ---- Chat modal ---- */
#ai-chat-modal {
  width: 100%;
  max-width: 520px;
  /* dvh = dynamic viewport height, accounts for Android URL bar hide/show.
     vh fallback for older browsers. */
  height: 75vh;
  height: 75dvh;
  max-height: 640px;
  background: var(--bg-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(10,34,64,0.22);
  overflow: hidden;
  animation: slide-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ---- Header ---- */
#ai-chat-header {
  background: var(--accent);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#ai-chat-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
#ai-chat-avatar {
  font-size: 1.6rem;
  line-height: 1;
}
#ai-chat-title {
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
}
#ai-chat-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  margin-top: 2px;
}
#ai-chat-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--radius);
  transition: color var(--transition);
}
#ai-chat-close:hover { color: #fff; }

/* ---- Body: wraps messages + input and fills the modal, so the messages area
   has a constrained height to scroll within. Without this flex wrapper the
   messages overflow and get clipped by the modal (you cannot scroll up). ---- */
#ai-chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#ai-chat-body[hidden] { display: none; }

/* ---- Messages ---- */
#ai-chat-messages {
  flex: 1;
  min-height: 0;           /* critical: lets flex child shrink below content size */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on Android/iOS */
  overscroll-behavior: contain;        /* stop scroll bleeding to page behind */
  touch-action: pan-y;                 /* allow vertical finger scroll on Android */
  padding: 20px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* scroll-behavior: smooth removed, interferes with programmatic scroll on Android */
}

.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot  { justify-content: flex-start; }

.ai-msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg-user .ai-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg-bot .ai-msg-bubble {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

/* Typing indicator */
.ai-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  min-width: 52px;
}
.ai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-dot 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1;   }
}

/* Suggestion chips */
#ai-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ai-suggestion {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}
.ai-suggestion:hover,
.ai-suggestion:focus-visible {
  background: var(--accent-muted);
  border-color: var(--accent);
  outline: none;
}

/* ---- Input row ---- */
#ai-chat-input-row {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
  background: var(--bg-card);
}
#ai-chat-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-family: inherit;
  background: var(--bg-page);
  color: var(--text-primary);
  resize: none;
  line-height: 1.4;
  max-height: 120px;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
#ai-chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
#ai-chat-input:disabled { opacity: 0.6; }

#ai-chat-send {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}
#ai-chat-send svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}
#ai-chat-send:hover   { background: var(--accent-hover); transform: scale(1.06); }
#ai-chat-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---- Footer note ---- */
#ai-chat-footer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 6px 16px 10px;
  flex-shrink: 0;
  background: var(--bg-card);
}

/* ---- Responsive: full-screen on mobile ---- */
@media (max-width: 560px) {
  #ai-chat-modal {
    max-width: 100%;
    height: 88vh;
    height: 88dvh;   /* dvh adapts when Android URL bar appears/disappears */
    max-height: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .ai-float-btn { bottom: 16px; right: 16px; }
}

/* ── Voice chat controls ──────────────────────────────────────────────────── */
#ai-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Voice toggle button (speaker icon in header) */
#ai-chat-voice-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
#ai-chat-voice-toggle svg { width: 18px; height: 18px; }
#ai-chat-voice-toggle:hover { color: #fff; }
#ai-chat-voice-toggle.ai-voice-on {
  color: var(--gold);
  background: rgba(200,153,48,0.18);
}

/* Microphone button in input row */
#ai-chat-mic {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
#ai-chat-mic svg { width: 16px; height: 16px; stroke: var(--text-muted); }
#ai-chat-mic:hover { background: var(--accent-muted); border-color: var(--accent); }
#ai-chat-mic:hover svg { stroke: var(--accent); }
#ai-chat-mic:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mic active: pulsing red */
#ai-chat-mic.ai-mic-active {
  background: #fee2e2;
  border-color: #ef4444;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
#ai-chat-mic.ai-mic-active svg { stroke: #ef4444; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}

/* Status line (listening / voice on/off feedback) */
#ai-chat-status {
  min-height: 18px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 16px 4px;
  flex-shrink: 0;
}

/* ── iOS tap-to-play button ────────────────────────────────────────────────── */
.ai-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  background: var(--accent-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition);
}
.ai-play-btn svg { width: 12px; height: 12px; }
.ai-play-btn:hover { background: var(--gold-muted); }
.ai-play-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Pre-chat visitor form ─────────────────────────────────────────────────── */
#ai-chat-prechat {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  flex: 1;
  min-height: 0;
}
.ai-prechat-intro {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}
.ai-prechat-hint {
  margin: 0 0 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
#ai-prechat-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-prechat-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-prechat-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ai-prechat-field input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ai-prechat-field input:focus {
  border-color: var(--accent);
}
.ai-prechat-field input.ai-prechat-ok {
  border-color: #22c55e;
}
.ai-prechat-field input.ai-prechat-invalid {
  border-color: #ef4444;
}
.ai-prechat-counter {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.ai-prechat-req {
  color: var(--text-muted);
  opacity: 0.75;
}
.ai-prechat-error {
  font-size: 0.82rem;
  color: #ef4444;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-top: 2px;
}
.ai-prechat-privacy {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 4px 0 8px;
}
.ai-prechat-privacy a { color: var(--accent); }
.ai-prechat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 11px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.ai-prechat-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.ai-prechat-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ─── Policy CMS: hub cards + detail chrome (moved from per-page inline <style>
       so every DB-rendered policy page shares one source of truth) ─────────── */
.policy-back { display:inline-block; margin-bottom:0.9rem; font-size:0.85rem; color:var(--accent); text-decoration:none; font-weight:600; }
.policy-back:hover { text-decoration:underline; }
.policy-ref-badge { display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.04em; color:var(--gold); background:var(--gold-muted); border-radius:5px; padding:0.2rem 0.55rem; margin-bottom:0.6rem; }
.policy-page blockquote { background:var(--bg-elevated); border-left:4px solid var(--gold); border-radius:var(--radius); padding:1rem 1.25rem; margin:0 0 1.75rem; }
.policy-page blockquote p { margin:0.2rem 0; color:var(--text-muted); font-size:0.9rem; }
.policy-cat { margin-bottom: 2.75rem; }
.policy-index { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem; }
.policy-index li { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0; overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.policy-index li:hover { border-color:var(--accent); box-shadow:0 6px 18px rgba(10,34,64,0.10); transform:translateY(-2px); }
.policy-card-link { display:block; padding:1rem 1.15rem; text-decoration:none; color:inherit; height:100%; }
.policy-ref { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.04em; color:var(--gold); background:var(--gold-muted); border-radius:5px; padding:0.18rem 0.5rem; margin-bottom:0.5rem; }
.policy-index h3 { font-size:0.95rem; font-weight:700; color:var(--accent); margin:0 0 0.3rem; }
.policy-index p { font-size:0.85rem; line-height:1.55; color:var(--text-muted); margin:0; }
.policy-index .policy-link { display:block; margin-top:0.55rem; font-size:0.8rem; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
@media (max-width: 640px) { .policy-index { grid-template-columns: 1fr; } }
/* ─── AI chat widget polish ──────────────────────────────────────────────────
   Visual refinements layered over the base #ai-chat-* rules: gradient header
   with a gold underline + live "online" dot, avatar in a soft badge, branded
   gold send button, softer bot bubbles, and gold-accented suggestions + focus. */
#ai-chat-header {
  /* Pinned navy in both themes so the white title/subtitle stay high-contrast
     (in dark mode --accent is gold, which fails contrast against white text). */
  background: linear-gradient(135deg, #0A2240 0%, #0E3268 100%);
  border-bottom: 2px solid var(--gold);
}
#ai-chat-avatar {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 50%;
  font-size: 1.35rem;
}
#ai-chat-subtitle { display: inline-flex; align-items: center; gap: 6px; }
#ai-chat-subtitle::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #34d399; flex-shrink: 0;
  animation: ai-online-pulse 1.9s ease-in-out infinite;
}
@keyframes ai-online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@media (prefers-reduced-motion: reduce) { #ai-chat-subtitle::before { animation: none; } }

.ai-msg-bot .ai-msg-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(10,34,64,0.05);
}

.ai-suggestion:hover,
.ai-suggestion:focus-visible {
  background: var(--gold-muted);
  border-color: var(--gold);
  color: var(--accent);
  transform: translateY(-1px);
}

#ai-chat-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

#ai-chat-send {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-hover) 100%);
  box-shadow: 0 3px 10px rgba(154,96,9,0.32);
}
#ai-chat-send:hover {
  background: linear-gradient(135deg, var(--gold-hover) 0%, var(--gold-hover) 100%);
  transform: scale(1.08);
  box-shadow: 0 5px 14px rgba(154,96,9,0.40);
}

#ai-chat-modal { box-shadow: 0 -10px 44px rgba(10,34,64,0.26); }

/* ─── Policy body tables ─────────────────────────────────────────────────────
   Tables inside policy body_html are bare <table> (no class), so they only got
   border-collapse. Give them clear borders, generous cell padding, a styled
   header and subtle zebra striping for readability. Theme-aware; scrolls on
   narrow screens instead of overflowing the page. ─────────────────────────── */
.policy-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0 1.9rem;
  font-size: 0.9rem;
  line-height: 1.55;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
}
.policy-page th,
.policy-page td {
  text-align: left;
  padding: 0.72rem 1rem;
  border: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-primary);
}
.policy-page thead th,
.policy-page table th {
  background: var(--bg-elevated);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.policy-page tbody tr:nth-child(even) td {
  background: var(--bg-elevated);
}
.policy-page tbody tr:hover td {
  background: var(--accent-muted);
}
/* First column of a 2-column meta table (Policy Owner | value) reads as a label. */
.policy-page td:first-child { color: var(--text-primary); }

@media (max-width: 640px) {
  .policy-page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ─── Hero badge: blinking shocking-pink neon "100% Online" (dance-club sign) ── */
.neon-online {
  color: #cc8513;
  font-weight: 800;
  text-shadow:
    0 0 4px #f2cd83,
    0 0 9px #e0a63a,
    0 0 18px #cc8513,
    0 0 34px #a5680d;
  animation: neonOnlineBlink 1.6s infinite steps(1, end);
  will-change: opacity, text-shadow;
}

@keyframes neonOnlineBlink {
  /* lit, with the odd faulty-sign flicker */
  0%, 39%, 43%, 62%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px #f2cd83,
      0 0 9px #e0a63a,
      0 0 18px #cc8513,
      0 0 34px #a5680d;
  }
  41% { opacity: 0.55; }                 /* quick flicker */
  /* the "off" blink of the sign */
  46%, 58% { opacity: 0.16; text-shadow: none; }
  52% { opacity: 1;                      /* momentary buzz back on */
    text-shadow: 0 0 6px #e0a63a, 0 0 20px #cc8513; }
}

/* Respect users who prefer reduced motion: keep the neon glow, drop the blink. */
@media (prefers-reduced-motion: reduce) {
  .neon-online { animation: none; opacity: 1; }
}