/* ===========================================================
   MAMPHOKA ATTORNEYS INC — Stylesheet
   Design language: "Chambers" — navy & brass, drawn from the
   firm's own crest. The recurring arc motif echoes the ring
   behind the M in the crest and the arched chambers window.
   =========================================================== */

:root{
  --ink:        #0B1E3D;   /* deep navy — primary */
  --ink-2:      #12294E;   /* lighter navy panel */
  --ink-3:      #1B3565;   /* hover / border navy */
  --gold:       #B8862E;   /* brass */
  --gold-light: #D9AE5F;   /* light brass for dark bg */
  --gold-dim:   #8C6A24;
  --paper:      #F6F2E7;   /* warm paper */
  --paper-2:    #EFE7D6;   /* deeper paper panel */
  --card:       #FFFFFF;
  --ink-text:   #1C1A14;
  --muted:      #5B5748;
  --muted-on-ink: #A9B3C9;
  --line:       rgba(11,30,61,0.14);
  --line-on-ink: rgba(217,174,95,0.28);

  --font: "Fraunces", "Iowan Old Style", Georgia, serif;

  --max: 1180px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; }
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / section marker ---------- */
.eyebrow{
  font-family:var(--font);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-dim);
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:20px;
  height:1px;
  background:var(--gold-dim);
  display:inline-block;
  margin-top:8px;
  flex:none;
}
.on-ink .eyebrow{ color:var(--gold-light); }
.on-ink .eyebrow::before{ background:var(--gold-light); }

/* ---------- arc motif (signature element) ---------- */
.arc-divider{
  width:100%;
  height:56px;
  display:flex;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
}
.arc-divider svg{ width:200px; height:110px; margin-top:-2px; }

.arc-frame{ position:relative; }
.arc-frame::before{
  content:"";
  position:absolute;
  top:-1px; left:50%;
  transform:translateX(-50%);
  width:120px; height:60px;
  border:1px solid var(--gold);
  border-bottom:none;
  border-radius:120px 120px 0 0;
  opacity:.55;
}

/* =============== HEADER =============== */
.site-header{
  position:sticky; top:0; z-index:50;
  /* Solid background, not translucent+blurred: backdrop-filter on this
     element creates a CSS "containing block" for fixed/absolute
     descendants (the mobile nav panel included), which trapped the menu
     inside the header's own box instead of the viewport on some phones —
     that's what caused the dropdown to freeze/get stuck. Plain opaque
     background gets the same visual result with none of the risk. */
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 32px;
  max-width:var(--max);
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand img{ height:44px; width:auto; flex:none; }
.brand-text{
  font-family:var(--font);
  font-size:19px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.01em;
  line-height:1.1;
}
.brand-text small{
  display:block;
  font-family:var(--font);
  font-size:9.5px;
  letter-spacing:.22em;
  color:var(--gold-dim);
  font-weight:600;
  margin-top:3px;
}
.main-nav ul{
  display:flex;
  gap:2px;
  align-items:center;
}
.main-nav a{
  display:inline-block;
  padding:10px 16px;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
  border-radius:var(--radius);
  transition:color .15s ease;
  position:relative;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:6px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.main-nav a[aria-current="page"]{ color:var(--gold-dim); }

.nav-cta{
  margin-left:8px;
  padding:10px 20px !important;
  background:var(--ink);
  color:var(--paper) !important;
  border-radius:2px;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--ink-3); }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  padding:9px 11px;
  cursor:pointer;
  width:44px; height:44px;
  flex-direction:column;
  align-items:center; justify-content:center;
  flex:none;
}
.nav-toggle span{
  display:block;
  width:20px; height:2px;
  background:var(--ink);
  margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Services dropdown (desktop flyout) ---------- */
.nav-services{ position:relative; }
.nav-services-row{ display:flex; align-items:center; }
.nav-services-row a{ padding-right:6px; }
.nav-caret{
  background:none; border:none; cursor:pointer;
  color:var(--ink); padding:10px 10px 10px 2px;
  display:flex; align-items:center; justify-content:center;
  min-width:32px; min-height:32px;
  position:relative;
  z-index:2;
  touch-action:manipulation;
}
.nav-caret svg{ transition:transform .18s ease; }
.nav-services.open .nav-caret svg,
.nav-caret[aria-expanded="true"] svg{ transform:rotate(180deg); }

.nav-submenu{
  display:none;
  flex-direction:column;
  list-style:none;
  margin:0; padding:0;
}
.nav-services.open .nav-submenu{ display:flex; }

@media (min-width: 881px){
  .nav-submenu{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    min-width:250px;
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:0 12px 28px rgba(11,30,61,.14);
    padding:8px 0;
    z-index:60;
  }
  .nav-submenu a{
    display:block; padding:11px 18px; font-size:14px; font-weight:500; white-space:nowrap;
  }
  .nav-submenu a:hover{ background:var(--paper-2); color:var(--gold-dim); }
  .nav-submenu a::after{ display:none; }

  /* A small invisible bridge so the 10px gap between the link and the
     flyout doesn't register as "mouse left the dropdown" mid-travel.
     Purely cosmetic spacing — nothing here drives open/close state,
     that's click-only, handled entirely in script.js. */
  .nav-services::after{
    content:"";
    position:absolute;
    top:100%; left:0; right:0;
    height:10px;
  }
}

@media (max-width: 880px){
  /* backdrop-filter turns this header into a "containing block" for any
     position:fixed descendant (like .main-nav below), which collapses the
     mobile menu panel down to the header's own height instead of the full
     screen. Disabling it here is what actually makes the menu appear. */
  .site-header{ position:relative; backdrop-filter:none; }
  .main-nav{
    position:fixed;
    top:var(--header-h, 70px);
    left:0; right:0; bottom:0;
    background:var(--paper);
    transform:translateY(-110%);
    transition:transform .25s ease;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid var(--line);
    z-index:49;
    visibility:hidden;
  }
  .main-nav.open{ transform:translateY(0); visibility:visible; }
  .main-nav > ul{ flex-direction:column; align-items:stretch; padding:12px 24px 32px; gap:0; }
  .main-nav a{ padding:16px 4px; border-bottom:1px solid var(--line); font-size:16px; display:block; }
  .main-nav a::after{ display:none; }
  .nav-cta{ margin:16px 4px 0; text-align:center; }
  .nav-toggle{ display:flex; }

  .nav-services{ display:flex; flex-direction:column; position:relative; }
  .nav-services-row{ border-bottom:1px solid var(--line); }
  .nav-services-row a{ flex:1; border-bottom:none; padding:16px 4px; }
  .nav-caret{ min-width:44px; min-height:44px; }

  /* The dropdown's positioning above is scoped to desktop only, so on
     mobile .nav-submenu falls back to normal flow — but it still needs
     its own explicit show/hide rule here rather than relying purely on
     the non-media-scoped base rule, which any later mobile rule in the
     cascade could re-hide. Restating it at this specificity guarantees
     the accordion actually opens on tap. */
  .nav-submenu{ display:none; padding:0 4px 6px 18px; }
  .nav-services.open .nav-submenu{ display:flex; }
  .nav-submenu a{ padding:13px 4px; font-size:14.5px; border-bottom:1px solid var(--line); color:var(--muted); }
  .nav-submenu li:last-child a{ border-bottom:none; }

  .brand{ min-width:0; flex-shrink:1; }
  .brand-text{ font-size:15px; }
  .brand-text small{ font-size:8px; letter-spacing:.12em; white-space:normal; }
  .hero-kicker{ flex-wrap:wrap; }
}

/* =============== HERO =============== */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  padding:96px 0 0;
}
.hero-rings{
  position:absolute;
  top:50%; right:-180px;
  transform:translateY(-50%);
  width:640px; height:640px;
  pointer-events:none;
  opacity:.55;
}
.hero-inner{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px 88px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:end;
}
.hero-kicker{
  font-family:var(--font);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:22px;
  display:flex; align-items:flex-start; gap:10px;
}
.hero-kicker::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--gold-light);
  display:inline-block;
  margin-top:8px;
  flex:none;
}
.hero h1{
  font-size:clamp(2.4rem, 4.6vw, 3.85rem);
  color:#fff;
  max-width:14ch;
  margin-bottom:.4em;
}
.hero h1 em{
  font-style:italic;
  color:var(--gold-light);
}
.hero-lede{
  font-size:18px;
  max-width:46ch;
  color:var(--muted-on-ink);
  margin-bottom:30px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  font-family:var(--font);
  font-weight:600;
  font-size:14.5px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-light); transform:translateY(-1px); }
.btn-outline{ border-color:rgba(246,242,231,.4); color:var(--paper); }
.btn-outline:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.btn-outline-dark{ border-color:var(--ink); color:var(--ink); }
.btn-outline-dark:hover{ background:var(--ink); color:var(--paper); }

.hero-panel{
  border:1px solid var(--line-on-ink);
  padding:26px 26px 22px;
  background:rgba(255,255,255,.03);
}
.hero-panel dl{ display:grid; grid-template-columns:1fr auto; row-gap:14px; column-gap:16px; }
.hero-panel dt{ font-size:14px; color:var(--muted-on-ink); }
.hero-panel dd{ margin:0; font-family:var(--font); font-size:15px; color:#fff; text-align:right; }
.hero-panel-divider{ height:1px; background:var(--line-on-ink); margin:16px 0; }

.hero-strip{
  border-top:1px solid var(--line-on-ink);
  background:rgba(0,0,0,.14);
}
.hero-strip .container{
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  padding:22px 32px;
}
.hero-stat{ min-width:140px; }
.hero-stat b{
  display:block;
  font-family:var(--font);
  font-size:26px;
  color:var(--gold-light);
}
.hero-stat span{ font-size:13px; color:var(--muted-on-ink); }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-panel{ order:-1; }
}
@media (max-width: 520px){
  .hero-panel dl{ grid-template-columns:1fr; row-gap:4px; }
  .hero-panel dd{ text-align:left; color:var(--gold-light); }
}

/* =============== SECTIONS =============== */
section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
.section-head{
  max-width:640px;
  margin-bottom:52px;
}
.section-head h2{ font-size:clamp(1.9rem,3vw,2.5rem); }
.section-head p{ color:var(--muted); font-size:16.5px; max-width:56ch; }

.on-ink{ background:var(--ink); color:var(--paper); }
.on-ink .section-head p{ color:var(--muted-on-ink); }
.on-panel{ background:var(--paper-2); }

/* about / intro */
.about-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;
  align-items:start;
}
.about-grid .lede{
  font-family:var(--font);
  font-size:23px;
  line-height:1.4;
  color:var(--ink);
}
.about-copy p{ color:var(--muted); font-size:15.5px; }
.pull-line{
  border-left:2px solid var(--gold);
  padding-left:18px;
  margin:28px 0;
  font-family:var(--font);
  font-size:18px;
  color:var(--ink);
}
@media (max-width: 760px){
  .about-grid{ grid-template-columns:1fr; gap:24px; }
}

/* process — scale motif */
.process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
  margin-top:36px;
}
.process::before{
  content:"";
  position:absolute;
  top:26px; left:8%; right:8%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
}
.process-step{ position:relative; padding:0 22px; text-align:left; }
.process-step .num{
  width:52px; height:52px;
  border:1px solid var(--gold);
  background:var(--ink);
  color:var(--gold-light);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-weight:600; font-size:14px;
  margin-bottom:22px;
  position:relative; z-index:2;
}
.process-step h4{ font-size:19px; color:#fff; margin-bottom:8px; }
.process-step p{ color:var(--muted-on-ink); font-size:14.5px; margin:0; }
@media (max-width:760px){
  .process{ grid-template-columns:1fr; gap:36px; }
  .process::before{ display:none; }
}

/* cards */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--card);
  border:1px solid var(--line);
  padding:32px 28px;
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.card .card-mark{
  font-family:var(--font);
  font-weight:600;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--gold-dim);
  margin-bottom:16px;
  display:block;
}
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--muted); font-size:14.5px; margin-bottom:0; }
.card ul{ margin-top:14px; }
.card ul li{
  font-size:14px;
  color:var(--muted);
  padding:7px 0;
  border-top:1px solid var(--line);
}
.card ul li:first-child{ border-top:none; }

/* team */
.team-card{
  background:var(--card);
  border:1px solid var(--line);
}
.team-head{
  padding:28px 28px 20px;
  border-bottom:1px solid var(--line);
}
.team-head .initials{
  width:56px; height:56px;
  background:var(--ink);
  color:var(--gold-light);
  font-family:var(--font);
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.team-head h3{ font-size:21px; margin-bottom:6px; }
.team-head .role{
  font-family:var(--font);
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--gold-dim);
  text-transform:uppercase;
}
.team-body{ padding:22px 28px 28px; }
.team-body li{
  font-size:14.5px;
  color:var(--muted);
  padding-left:16px;
  position:relative;
  margin-bottom:12px;
}
.team-body li::before{
  content:"—";
  position:absolute; left:0; top:0;
  color:var(--gold);
}
.team-body li:last-child{ margin-bottom:0; }
.team-body p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 14px;
}
.team-body p:last-child{ margin-bottom:0; }

.team-card-featured{
  display:grid;
  grid-template-columns:260px 1fr;
}
.team-card-featured .team-head{
  border-bottom:none;
  border-right:1px solid var(--line);
}
.team-card-featured .team-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
  align-content:start;
}
.team-grid-secondary{ margin-top:28px; }
@media (max-width:760px){
  .team-card-featured{ grid-template-columns:1fr; }
  .team-card-featured .team-head{ border-right:none; border-bottom:1px solid var(--line); }
  .team-card-featured .team-body{ grid-template-columns:1fr; }
}

/* values */
.values-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:36px; }
.values-item{ background:var(--paper); padding:26px 24px; }
.values-item .letter{
  font-family:var(--font); font-size:26px; color:var(--gold-dim); display:block; margin-bottom:8px;
}
@media (max-width:760px){ .values-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .values-list{ grid-template-columns:1fr; } }

/* services list page */
.service-block{
  border-top:1px solid var(--line);
  padding:44px 0;
  display:grid;
  grid-template-columns:.6fr 1.4fr;
  gap:40px;
}
.service-block:first-of-type{ border-top:none; }
.service-block h3{ font-size:22px; }
.service-block .tag{ font-family:var(--font); font-weight:600; font-size:12px; color:var(--gold-dim); letter-spacing:.1em; }
.tick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 32px; }
.tick-grid li{
  font-size:14.5px; color:var(--muted);
  padding:9px 0 9px 20px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.tick-grid li::before{
  content:"";
  position:absolute; left:0; top:15px;
  width:7px; height:7px;
  background:var(--gold);
}
@media (max-width:760px){
  .service-block{ grid-template-columns:1fr; gap:16px; }
  .tick-grid{ grid-template-columns:1fr; }
}

/* CTA band */
.cta-band{
  background:var(--ink);
  color:var(--paper);
  padding:72px 0;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-inner h2{ font-size:clamp(1.6rem,3vw,2.2rem); color:#fff; max-width:16ch; margin:0; }
@media (max-width:760px){ .cta-inner{ flex-direction:column; align-items:flex-start; } }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-item{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
.contact-item:first-child{ border-top:none; }
.contact-item .ic{
  width:40px; height:40px; flex:none;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-dim);
}
.contact-item h4{ font-size:15.5px; margin-bottom:4px; }
.contact-item p{ margin:0; color:var(--muted); font-size:14.5px; }
.hours-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.hours-table td{ padding:11px 0; border-top:1px solid var(--line); font-size:14.5px; }
.hours-table td:last-child{ text-align:right; font-family:var(--font); font-weight:600; color:var(--ink); }
.map-frame{
  border:1px solid var(--line);
  aspect-ratio:4/3;
  overflow:hidden;
}
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.05); }

/* form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1/-1; }
label{ display:block; font-size:13px; font-family:var(--font); font-weight:600; letter-spacing:.05em; color:var(--muted); margin-bottom:7px; text-transform:uppercase; }
input, select, textarea{
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  padding:13px 14px;
  font-family:var(--font);
  font-size:14.5px;
  color:var(--ink-text);
  border-radius:0;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--gold); }
textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:13px; color:var(--muted); margin-top:14px; }
@media (max-width:760px){ .contact-grid, .form-grid{ grid-template-columns:1fr; } }

/* careers */
.career-track{
  border:1px solid var(--line);
  padding:34px 30px;
  background:var(--card);
  height:100%;
  display:flex;
  flex-direction:column;
}
.career-track .tag{ font-family:var(--font); font-weight:600; font-size:12px; color:var(--gold-dim); letter-spacing:.1em; }
.career-track p{ flex:1; }
.career-cats{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 20px; }
.chip{
  display:inline-block;
  font-size:12.5px;
  font-weight:500;
  padding:6px 12px;
  border:1px solid var(--line);
  color:var(--muted);
  background:var(--paper-2);
}
.btn-sm{ padding:11px 20px; font-size:13.5px; align-self:flex-start; }
.career-track h3{ font-size:21px; margin:10px 0 12px; }
.career-track p{ color:var(--muted); font-size:14.5px; }

/* page hero (inner pages) */
.page-hero{
  background:var(--ink);
  color:var(--paper);
  padding:150px 0 60px;
  position:relative;
  overflow:hidden;
}
.page-hero .eyebrow{ color:var(--gold-light); }
.page-hero h1{ color:#fff; font-size:clamp(2rem,4vw,3.1rem); max-width:18ch; }
.page-hero p{ color:var(--muted-on-ink); max-width:56ch; font-size:16.5px; }
.breadcrumb{
  font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:.08em;
  color:var(--muted-on-ink); margin-bottom:20px; text-transform:uppercase;
}
.breadcrumb a{ color:var(--gold-light); }

/* footer */
.site-footer{
  background:#08162E;
  color:var(--muted-on-ink);
  padding:64px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid var(--line-on-ink);
}
.footer-brand{ font-family:var(--font); font-size:20px; color:#fff; margin-bottom:12px; }
.footer-grid h5{
  font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-light); margin:0 0 18px;
}
.footer-grid li{ margin-bottom:11px; font-size:14px; }
.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:16px;
  line-height:1.5;
}
.footer-contact .ic{
  flex:none;
  width:26px; height:26px;
  border:1px solid var(--line-on-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  margin-top:1px;
}
.footer-grid a:hover{ color:var(--gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding:22px 0; font-size:12.5px;
}
.footer-legal-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal-links a{ margin-right:18px; }
.footer-legal-links a:last-child{ margin-right:0; }
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- modal dialog ---------- */
body.nav-locked{ overflow:hidden; }
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(8,17,35,.6);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  z-index:200;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:var(--paper);
  border-top:3px solid var(--gold);
  max-width:440px; width:100%;
  padding:36px 32px 32px;
  position:relative;
  transform:translateY(10px);
  transition:transform .2s ease;
  box-shadow:0 24px 60px rgba(8,17,35,.35);
}
.modal-overlay.open .modal-box{ transform:translateY(0); }
.modal-icon{
  width:48px; height:48px;
  border:1px solid var(--gold);
  color:var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  margin-bottom:20px;
}
.modal-title{ font-size:1.4rem; margin-bottom:12px; }
.modal-body{ color:var(--muted); font-size:14.5px; margin-bottom:26px; }
.modal-actions{ display:flex; gap:12px; justify-content:flex-end; }
.modal-close-x{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  background:none; border:none; cursor:pointer;
  font-size:18px; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}
.modal-close-x:hover{ color:var(--ink); }

/* utility */
.mt-0{ margin-top:0; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
/* Content is visible by default; JS opts elements into the reveal
   animation by adding .reveal-ready, so nothing depends on JS to be seen. */
.reveal{ opacity:1; transform:none; }
.reveal.reveal-ready{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.reveal-ready.in{ opacity:1; transform:none; }