/* ---------- Base ---------- */
:root {
  --ink: #0d111a;
  --paper: #0f152a;
  --paper-2: #0c1224;
  --muted: #9aa4bc;
  --navy: #0b1533;
  --navy-2: #0e1c45;
  --gold: #c6a760;
  --gold-2: #b08d57;
  --gold-3: #e1c78f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: #fff;
  background: var(--navy);
  line-height: 1.6;
}

/* Container */
.container { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.row { display: flex; gap: 16px; }
.center { align-items: center; }
.space-between { justify-content: space-between; }

/* Topbar/Nav */
.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--navy), transparent 20%);
  border-bottom: 1px solid color-mix(in srgb, #fff, transparent 90%);
}
.brand { display:flex; flex-direction:column; gap:2px; padding: 10px 0; }
.brand-title { letter-spacing: 0.18em; font-weight: 700; font-size: 13px; }
.brand-sub { opacity: .7; font-size: 12px; }

.nav a { color: #fff; opacity:.9; text-decoration: none; margin-left: 18px; font-size: 14px; }
.nav a:hover { opacity: 1; }

.theme-switch {
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2px;
  border-top: 1px solid color-mix(in srgb, #fff, transparent 85%);
}
.theme-switch button {
  appearance:none; border:0; padding: 10px 12px; cursor: pointer; color:#fff; background: transparent; font-size: 13px;
}
.theme-switch button:hover { background: color-mix(in srgb, #fff, transparent 92%); }
.theme-switch .active { background: color-mix(in srgb, #fff, transparent 88%); }

/* Hero */
.hero { padding: 32px 0 8px; }
.hero-grid { display:grid; grid-template-columns: 1.3fr .7fr; gap: 24px; }
.hero-title { font-size: clamp(32px, 5vw, 56px); margin: 6px 0 6px; letter-spacing: -0.02em; }
.hero-sub { opacity: .9; font-size: 18px; margin-bottom: 10px; }
.pills { display:flex; gap:8px; flex-wrap: wrap; }
.pill { border: 1px solid color-mix(in srgb, #fff, transparent 80%); background: color-mix(in srgb, #fff, transparent 92%); padding: 4px 10px; border-radius: 999px; font-size: 12px; opacity: .9; }

.trust { list-style: none; padding:0; margin: 12px 0; opacity: .95; }
.trust li { margin: 6px 0; }

.cta { display:flex; gap:10px; margin: 16px 0 8px; }
.btn { display:inline-block; padding:10px 14px; border-radius:12px; font-weight:600; text-decoration:none; font-size:14px; }
.btn-primary { color: var(--gold-3); border:1px solid var(--gold-2); background: color-mix(in srgb, var(--gold), transparent 90%); }
.btn-primary:hover { background: color-mix(in srgb, var(--gold), transparent 85%); }
.btn-ghost { color:#fff; border:1px solid color-mix(in srgb, #fff, transparent 80%); background: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, #fff, transparent 92%); }

.social { display:flex; gap:10px; flex-wrap: wrap; margin-top: 10px; }
.link { color:#fff; opacity:.9; text-decoration:none; border:1px solid color-mix(in srgb, #fff, transparent 85%); padding:6px 10px; border-radius:10px; }
.link:hover { opacity:1; background: color-mix(in srgb, #fff, transparent 92%); }

.hero-emblem { display:flex; align-items:center; justify-content:center; }
.emblem { width: 124px; height: auto; display: none; opacity:.95; }
.theme-modern .emblem-modern { display:block; }
.theme-roman .emblem-roman { display:block; }
.theme-oxbridge .emblem-oxbridge { display:block; }
.theme-boutique .emblem-boutique { display:block; }

/* Cards/Sections */
.section { padding: 18px 0; }
.section-title { font-size: 24px; margin: 6px 0 12px; }

.card {
  background: color-mix(in srgb, #ffffff, transparent 92%);
  border: 1px solid color-mix(in srgb, #ffffff, transparent 88%);
  border-radius: 18px;
  padding: 18px;
}
.card-practice .icon { font-size: 22px; margin-bottom: 6px; }

.grid-4 { display:grid; grid-template-columns: repeat(1,1fr); gap:12px; }
@media (min-width:640px){ .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (min-width:1024px){ .grid-4{ grid-template-columns: repeat(4,1fr);} }

.grid-3 { display:grid; grid-template-columns: repeat(1,1fr); gap:12px; }
@media (min-width:768px){ .grid-3{ grid-template-columns: repeat(3,1fr);} }

.muted { opacity:.8; font-size: 14px; }

.contacts .contact-grid { display:grid; grid-template-columns: repeat(1,1fr); gap:10px; }
@media (min-width:640px){ .contacts .contact-grid { grid-template-columns: repeat(3,1fr);} }
.contacts a { color:#fff; }

.footer { padding: 28px 0 40px; opacity:.75; border-top:1px solid color-mix(in srgb, #fff, transparent 90%); background: color-mix(in srgb, var(--navy), transparent 15%); }
.footer .container { font-size: 12px; }

/* ---------- Theme palettes ---------- */
/* Modern */
.theme-modern {
  --navy: #070F26;
  --navy-2: #0A1833;
  --gold: #B18A38;
  --gold-2: #9C7A31;
  --gold-3: #D8BA6A;
  --paper: #0E1428;
  --paper-2: #0B1224;
  --muted: #8D96AB;
  background:
    radial-gradient(800px 300px at 120% -10%, rgba(209,176,92,.08), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 70%);
}

/* Roman Law */
.theme-roman {
  --navy: #050A1A;
  --navy-2: #071024;
  --gold: #A67C2B;
  --gold-2: #8F6A24;
  --gold-3: #C9A356;
  --paper: #0A0F20;
  --paper-2: #091227;
  --muted: #94A0B9;
  background:
    radial-gradient(500px 200px at 20% -10%, rgba(166,124,43,.10), transparent 60%),
    radial-gradient(600px 220px at 120% 20%, rgba(166,124,43,.06), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}

/* Oxbridge */
.theme-oxbridge {
  --navy: #0B1634;
  --navy-2: #0E1B3F;
  --gold: #D0B05C;
  --gold-2: #B9994E;
  --gold-3: #E3C878;
  --paper: #0E152D;
  --paper-2: #0C1328;
  --muted: #9AA4BC;
  background:
    radial-gradient(500px 220px at 80% -20%, rgba(224,197,118,.10), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--navy) 110%);
}

/* Boutique */
.theme-boutique {
  --navy: #040813;
  --navy-2: #060B17;
  --gold: #C6A04A;
  --gold-2: #AE8C3F;
  --gold-3: #E0C576;
  --paper: #090E1D;
  --paper-2: #0A1022;
  --muted: #929BB1;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 14px),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}

/* Oxbridge specific hero composition */
.theme-oxbridge .hero-grid { grid-template-columns: 1fr 1fr; }
.theme-oxbridge .card { background: #ffffff; color: var(--navy-2); border:1px solid #e2e8f0; }
.theme-oxbridge .card .muted { color:#64748b; }
.theme-oxbridge .btn-ghost { color: var(--navy-2); border-color: #cbd5e1; }
.theme-oxbridge .link { color: var(--navy-2); border-color:#cbd5e1; }
.theme-oxbridge .link:hover { background:#f1f5f9; }
.theme-oxbridge .hero-sub { color:#1f2937; }
.theme-oxbridge .brand-sub, .theme-oxbridge .nav a { color:#0b1224; }

/* Emblem visibility tweaks inside hero */
.theme-oxbridge .hero-emblem { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 70%); border-radius: 18px; }