/* =============================================================================
   OCS Legal — site styles. Started from the platform stylesheet; this copy
   is OCS Legal's own. Theme overrides are at the end of the file.
   Single source of truth for typography, colors, layout primitives, and
   shared components used across every static page. Pages should rely on
   these tokens and component classes; avoid inline styles.
   ============================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --c-navy:        #1a2332;
  --c-navy-deep:   #0e1622;
  --c-navy-soft:   #2a3548;
  --c-gold:        #c8a961;
  --c-gold-bright: #d8bb6f;
  --c-cream:       #f7f3ec;
  --c-paper:       #fbfaf7;

  /* Neutral scale */
  --c-ink:         #1a1d24;
  --c-text:        #3a3f4b;
  --c-muted:       #6b7280;
  --c-border:      #e5e2db;
  --c-bg:          #ffffff;
  --c-bg-alt:      #f7f3ec;

  /* Semantic */
  --c-link:        var(--c-navy);
  --c-link-hover:  var(--c-gold);

  /* Typography */
  --font-serif:    "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-sans:     "Inter", "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing rhythm */
  --shadow-sm:     0 1px 2px rgba(15, 22, 36, 0.06);
  --shadow-md:     0 8px 24px rgba(15, 22, 36, 0.08);
  --shadow-lg:     0 24px 60px rgba(15, 22, 36, 0.12);

  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;

  --container:     1200px;
  --nav-h:         88px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 4.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 0.75rem; }
h4 { font-size: 1.15rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-link); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--c-link-hover); }

::selection { background: var(--c-gold); color: var(--c-navy); }

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: clamp(64px, 10vw, 120px) 0;
}

.section-tight {
  padding: clamp(48px, 8vw, 80px) 0;
}

.section-alt {
  background: var(--c-bg-alt);
}

.section-dark {
  background: var(--c-navy);
  color: rgba(255, 255, 255, 0.85);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1rem;
}

.section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}

.gold-rule {
  width: 64px;
  height: 3px;
  background: var(--c-gold);
  margin: 1.25rem auto;
  border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--c-gold);
  color: var(--c-navy);
}
.btn-primary:hover {
  background: var(--c-gold-bright);
  color: var(--c-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-outline:hover {
  background: #fff;
  color: var(--c-navy);
  border-color: #fff;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn-ghost:hover {
  background: var(--c-navy);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Top navigation ---------- */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(26, 35, 50, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200, 169, 97, 0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* Allow the bar to grow when the mobile menu expands below it */
#site-nav.is-open { height: auto; }
#site-nav.is-scrolled {
  background: var(--c-navy);
  box-shadow: var(--shadow-md);
}

.site-nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #fff;
}
.brand img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
  box-shadow: var(--shadow-sm);
}
.brand-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.brand-text small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: 2px;
}
.brand:hover { color: #fff; }
.brand:hover img { box-shadow: 0 0 0 2px var(--c-gold); }

.nav-toggle-btn {
  display: none;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 14px;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

#nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
#nav-list > li { position: relative; }
#nav-list > li > a {
  display: block;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease, background 0.2s ease;
}
#nav-list > li > a:hover,
#nav-list > li > a.active {
  color: var(--c-gold);
  background: rgba(255, 255, 255, 0.05);
}

#nav-list .dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
#nav-list > li:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#nav-list .dropdown li a {
  display: block;
  padding: 10px 14px;
  color: var(--c-text);
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, color 0.2s ease;
}
#nav-list .dropdown li a:hover {
  background: var(--c-cream);
  color: var(--c-navy);
}

.nav-cta {
  background: var(--c-gold);
  color: var(--c-navy) !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem !important;
}
.nav-cta:hover {
  background: var(--c-gold-bright) !important;
}

@media (max-width: 960px) {
  .nav-toggle-btn { display: inline-block; }
  #nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--c-navy);
    padding: 12px;
    gap: 0;
    border-bottom: 1px solid rgba(200, 169, 97, 0.15);
    /* The nav bar is position: fixed, so this absolute child can't push
       body content down — and without an internal scroll the last items
       (Attorney Login, etc.) get clipped off-screen on short phones. Cap
       to viewport-minus-nav and let the menu scroll inside itself. */
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Prefer dvh on browsers that support it: avoids mobile Safari URL-bar
     showing/hiding shifting the max-height as the user scrolls. */
  @supports (height: 100dvh) {
    #nav-list { max-height: calc(100dvh - var(--nav-h)); }
  }
  #site-nav.is-open #nav-list { display: flex; }
  #nav-list > li > a { padding: 14px 16px; }
  /* Mobile dropdowns: collapsed by default. Tap the parent link once to
     expand (handled in nav.js); tap again to navigate to the parent's
     own page. Keeps the open menu short on small phones. */
  #nav-list .dropdown {
    position: static;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    box-shadow: none;
    transform: none;
    padding: 4px 12px 8px 24px;
    margin: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  #nav-list > li.is-expanded > .dropdown {
    display: block;
    margin-bottom: 6px;
  }
  /* Chevron indicator on any parent link that has a dropdown — rotates
     180deg when expanded so the affordance is clear. */
  #nav-list > li:has(> .dropdown) > a::after {
    content: " ▾";
    display: inline-block;
    transition: transform 0.2s ease;
    color: var(--c-gold);
    font-size: 0.8em;
    margin-left: 0.25em;
  }
  #nav-list > li.is-expanded:has(> .dropdown) > a::after {
    transform: rotate(180deg);
  }
  #nav-list .dropdown li a {
    color: rgba(255, 255, 255, 0.75);
  }
  #nav-list .dropdown li a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }
  /* Lift Attorney Login (the .nav-cta button) to the top of the mobile
     menu so the primary action is always reachable with zero scroll.
     Flexbox `order` reorders visually without touching nav.html — desktop
     keeps the CTA right-aligned as the last item in the row. */
  #nav-list > li:has(> .nav-cta) {
    order: -1;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200, 169, 97, 0.2);
  }
}

/* Spacer so fixed nav doesn't overlap page content */
body { padding-top: var(--nav-h); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(14, 22, 34, 0.78), rgba(14, 22, 34, 0.92)),
              center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  background: url("./firm-logo.png") center / contain no-repeat;
  opacity: 0.05;
  filter: brightness(2);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 24px;
  width: 100%;
}
.hero-content {
  max-width: 720px;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  margin-bottom: 1.5rem;
  line-height: 1.05;
}
.hero h1 .accent { color: var(--c-gold); font-style: italic; }
.hero p.lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 2.5rem;
  max-width: 560px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Compact hero for inner pages */
.page-hero {
  position: relative;
  background: linear-gradient(rgba(14, 22, 34, 0.85), rgba(14, 22, 34, 0.95)),
              center / cover no-repeat;
  color: #fff;
  padding: clamp(80px, 12vw, 140px) 24px clamp(60px, 9vw, 100px);
  text-align: center;
}
.page-hero h1 {
  color: #fff;
  margin-bottom: 0.75rem;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 auto;
}
.breadcrumb {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--c-gold); }
.breadcrumb a:hover { color: var(--c-gold-bright); }

/* ---------- Card grids ---------- */
.grid {
  display: grid;
  gap: 28px;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-gold);
}

.service-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.service-card .icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-navy);
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.service-card:hover .icon {
  background: var(--c-gold);
  color: var(--c-navy);
}
.service-card h3 {
  margin-bottom: 0.5rem;
  color: var(--c-navy);
}
.service-card p { color: var(--c-muted); font-size: 0.95rem; margin-bottom: 1rem; }
.service-card .arrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.service-card .arrow::after {
  content: " →";
  transition: margin-left 0.2s ease;
}
.service-card:hover .arrow::after { margin-left: 4px; }

/* ---------- Stats / values strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  text-align: center;
}
.stat {
  padding: 24px;
}
.stat .num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat .label {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Quote / testimonial ---------- */
.quote-block {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}
.quote-block .mark {
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 0.8;
  color: var(--c-gold);
  margin-bottom: 1rem;
  display: block;
}
.quote-block blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-style: italic;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 1.5rem;
}
.quote-block cite {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* ---------- People cards ---------- */
.person-card {
  text-align: center;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.person-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.person-card .photo {
  aspect-ratio: 1;
  background: var(--c-cream) center / cover no-repeat;
}
.person-card .body { padding: 24px; }
.person-card h4 { color: var(--c-navy); margin-bottom: 0.25rem; }
.person-card .role {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.75rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-navy-deep);
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 32px;
}
.site-footer h5 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; }
.footer-brand img { width: 52px; height: 52px; border-radius: 50%; background: #fff; padding: 3px; }
.footer-brand .name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #fff;
}
.footer-brand .name small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: 2px;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 0.6rem; }
.site-footer ul a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
}
.site-footer ul a:hover { color: var(--c-gold); }
.socials { display: flex; gap: 12px; margin-top: 1rem; }
.socials a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.socials a:hover {
  background: var(--c-gold);
  color: var(--c-navy);
  transform: translateY(-2px);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
/* Build version next to the copyright — dimmer so it doesn't draw the
   eye away from the rights line, but still legible for users / support. */
.footer-bottom .footer-version {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Disclaimer popup ---------- */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(14, 22, 34, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.3s ease;
  padding: 24px;
}
.popup.showPopup {
  opacity: 1;
  pointer-events: all;
}
.popup-content {
  background: #fff;
  padding: 48px 40px;
  width: 100%;
  max-width: 640px;
  border-radius: var(--radius-md);
  position: relative;
  transform: translateY(16px);
  transition: transform 0.3s ease;
  box-shadow: var(--shadow-lg);
}
.popup.showPopup .popup-content { transform: translateY(0); }
.popup-content h2 {
  font-size: 1.6rem;
  color: var(--c-navy);
  margin-bottom: 1rem;
  text-align: center;
}
.popup-content p {
  font-size: 0.95rem;
  color: var(--c-text);
  margin-bottom: 1rem;
}
.popup-content .close-x {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 1.5rem;
  color: var(--c-muted);
  cursor: pointer;
  background: none;
  border: 0;
  line-height: 1;
}
.popup-content .close-x:hover { color: var(--c-navy); }
#agreeButton {
  display: block;
  margin: 1.5rem auto 0;
  background: var(--c-gold);
  color: var(--c-navy);
  border: 0;
  padding: 12px 32px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
#agreeButton:hover {
  background: var(--c-gold-bright);
  transform: translateY(-1px);
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================================
   Mobile polish
   Tightens the layout below 768px and 480px without changing the desktop look.
   ========================================================================== */

/* Prevent any element from leaking horizontal scroll on small viewports */
html, body { overflow-x: hidden; }

/* Containers get less padding on small screens to free up reading width */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: clamp(48px, 12vw, 80px) 0; }
}

/* Headings scale down further on phones (clamp() already gives some, but the
   minimum can still be too large on narrow widths) */
@media (max-width: 480px) {
  h1 { font-size: 2rem; line-height: 1.15; }
  h2 { font-size: 1.5rem; }
  .hero h1 { font-size: 2.2rem; line-height: 1.1; }
  .hero p.lead { font-size: 1rem; }
}

/* Cap the hero watermark seal so it never overflows on narrow screens */
@media (max-width: 768px) {
  .hero::before {
    width: min(540px, 90vw);
    height: min(540px, 90vw);
    right: -20%;
    opacity: 0.04;
  }
}

/* Touch-friendly tap targets: nav links, buttons, dropdown items >= 44px */
@media (max-width: 960px) {
  #nav-list > li > a { padding: 14px 16px; min-height: 44px; display: flex; align-items: center; }
  #nav-list .dropdown li a { padding: 12px 16px; min-height: 44px; display: flex; align-items: center; }
  .nav-cta { padding: 14px 22px !important; }
  .btn { padding: 14px 28px; }
}

/* Brand text: keep on one logical block, never overflow */
@media (max-width: 420px) {
  .brand img { width: 44px; height: 44px; }
  .brand-text { font-size: 1rem; }
  .brand-text small { font-size: 0.6rem; letter-spacing: 0.2em; }
}

/* Breadcrumb: allow wrapping rather than horizontal overflow */
.breadcrumb {
  white-space: normal;
  word-spacing: 0.05em;
}

/* Profile data list (Person pages): stack labels above values on narrow widths */
@media (max-width: 540px) {
  .profile-grid dl {
    grid-template-columns: 1fr !important;
  }
  .profile-grid dt { margin-top: 0.5rem; }
  .profile-photo {
    width: 200px !important;
    height: 200px !important;
  }
}

/* Card grids: gap shrinks on narrow widths to keep cards from feeling cramped */
@media (max-width: 480px) {
  .grid { gap: 16px; }
  .card { padding: 24px; }
  .service-card .icon { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* Hero actions stack vertically on phones for clearer tap targets */
@media (max-width: 420px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* Footer: tighten padding + stack social icons cleanly */
@media (max-width: 480px) {
  .site-footer { padding: 56px 0 24px; }
  .footer-grid { gap: 32px; margin-bottom: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* Auth cards: edge-to-edge on tiny screens, less internal padding */
@media (max-width: 480px) {
  .auth-card { padding: 32px 24px; }
  .auth-shell { padding: 32px 16px; }
}

/* Disclaimer popup: shrink internal padding so it fits on phones */
@media (max-width: 480px) {
  .popup-content { padding: 32px 24px; }
}

/* Tables in dark sections (stat-strip etc were removed; safety rule for any
   future table) — allow horizontal scroll inside its wrapper */
.section table { display: block; overflow-x: auto; max-width: 100%; }

/* =============================================================================
   Mobile polish (round 2)
   Surgical fixes for issues found during the May 2026 mobile audit.
   ============================================================================= */

/* Disclaimer popup: give the close-X a proper 44x44 tap target. The old
   `font-size: 1.5rem` with no padding gave ~24px which fails Apple HIG. */
.popup-content .close-x {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 8px;
  right: 8px;
  border-radius: var(--radius-sm);
}
.popup-content .close-x:hover { background: var(--c-cream); }

/* Disclaimer popup: long body text could exceed the viewport on a short
   phone (landscape iPhone SE, etc). Bound the content height and let it
   scroll internally rather than clipping. */
.popup-content {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hero: switch to small viewport height (svh) so the section doesn't jump
   when mobile Safari shows/hides the URL bar. vh fallback for older
   browsers via @supports. */
@supports (height: 100svh) {
  .hero { min-height: 88svh; }
}

/* Respect prefers-reduced-motion: kill the .fade-in entrance animation,
   the .btn hover translateY, .person-card and .card lift on hover, and the
   smooth scroll. Users who set this preference often do so because motion
   triggers vestibular issues; honor it everywhere we set transform/transition. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .person-card:hover, .service-card:hover,
  .socials a:hover, #agreeButton:hover {
    transform: none;
  }
}


/* =============================================================================
   OCS Legal theme — overrides the starting palette above. The shared auth
   screens (Login, Client Portal, …) load this same file, so they pick up
   the theme too.
   ============================================================================= */
:root {
  --c-navy:        #3a1a22;   /* deep maroon — primary */
  --c-navy-deep:   #25101a;
  --c-navy-soft:   #56303a;
  --c-gold:        #b8894d;   /* brass — accent */
  --c-gold-bright: #cfa468;
  --c-cream:       #f7f2ee;
  --c-paper:       #fcfaf8;
  --c-bg-alt:      #f7f2ee;
}

/* Hero without a background photo */
.hero-plain {
  background: linear-gradient(160deg, var(--c-navy-deep) 0%, var(--c-navy) 60%, var(--c-navy-soft) 100%);
}

/* Court cards: a brass rule across the top */
.court-card {
  border-top: 4px solid var(--c-gold);
}
.court-card h3 { margin-bottom: 0.25rem; }
.court-card .court-sub {
  color: var(--c-muted);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}
.court-card ul {
  margin: 0;
  padding-left: 1.1rem;
}
.court-card li { margin-bottom: 0.4rem; }

/* Numbered "how it works" steps */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 4.25rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1.25rem;
  top: 1.35rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-gold-bright);
  font-family: var(--font-serif);
  font-weight: 700;
  display: grid;
  place-items: center;
}
.steps h4 { margin: 0 0 0.35rem; }
.steps p { margin: 0; font-size: 0.95rem; }

/* Colours the starting stylesheet hard-codes rather than taking from the
   variables — re-tinted to the maroon theme. */
#site-nav {
  background: rgba(58, 26, 34, 0.94);
  border-bottom-color: rgba(184, 137, 77, 0.2);
}
#site-nav.is-scrolled { background: rgba(37, 16, 26, 0.97); }
.popup { background: rgba(37, 16, 26, 0.7); }

/* The current-page highlight above would strip a call-to-action button's
   fill (dark text on dark nav). Keep CTAs solid; mark "current" by tone. */
#nav-list > li > a.nav-cta.active {
  background: var(--c-gold-bright);
  color: var(--c-navy-deep);
}

/* "Get in touch" enquiry form (assets/enquiry.js). */
.enquiry-form { text-align: left; padding: 28px; margin-bottom: 2rem; display: grid; gap: 16px; }
.eq-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.eq-field { display: grid; gap: 6px; font-size: 0.92rem; font-weight: 500; color: var(--c-ink); }
.eq-field b { color: #b42318; font-weight: 600; }
.eq-field small { color: var(--c-muted); font-weight: 400; }
.eq-field input, .eq-field select, .eq-field textarea {
  font: inherit;
  font-weight: 400;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  color: var(--c-text);
  width: 100%;
}
.eq-field textarea { resize: vertical; }
.eq-field input:focus, .eq-field select:focus, .eq-field textarea:focus {
  outline: 2px solid var(--c-gold);
  outline-offset: 1px;
  border-color: var(--c-gold);
}
.eq-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--c-text); }
.eq-consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--c-navy); }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.eq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.eq-status { margin: 0; min-height: 1.4em; font-size: 0.92rem; }
.eq-status.eq-ok { color: #067647; }
.eq-status.eq-error { color: #b42318; }
.enquiry-form .btn { justify-self: start; }
.enquiry-form .btn:disabled { opacity: 0.6; cursor: default; }

/* Hero watermark (the logo, large, behind the hero — .hero::before above).
   The monogram logo's big "OCS" lettering read as a second heading at the
   starting strength, so keep it a faint, colourless texture. */
.hero::before { opacity: 0.03; filter: grayscale(1) brightness(1.8); }
@media (max-width: 768px) { .hero::before { opacity: 0.025; } }