/* ==========================================================================
   SKUKUZA LAW CHAMBERS — VINTAGE MODERN LEGAL THEME (MOBILE FIRST)
   Palette: Ink Black / Paper White / Antique Gold
   Style: Centered + justified copy, subtle glass, brass sweeps
   ========================================================================== */

/* ─────────────────────────────
   DESIGN TOKENS
   ───────────────────────────── */
:root{
  --ink:#0b0b0d;
  --ink-2:#121217;
  --paper:#f6f4ef;
  --paper-2:#ffffff;
  --smoke:rgba(255,255,255,.08);

  --gold:#c7a24a;
  --gold-2:#a98533;
  --gold-soft:rgba(199,162,74,.16);
  --gold-line:rgba(199,162,74,.35);

  --text:#ece8de;
  --text-dim:rgba(236,232,222,.78);
  --text-mute:rgba(236,232,222,.60);

  --glass:rgba(255,255,255,.07);
  --glass-strong:rgba(255,255,255,.11);
  --glass-border:rgba(199,162,74,.28);

  --shadow:0 18px 60px rgba(0,0,0,.45);
  --shadow-soft:0 10px 30px rgba(0,0,0,.35);

  --r:16px;
  --r2:22px;
  --pad:1.15rem;

  --nav-h:64px;
  --max:980px;

  --sweep:linear-gradient(90deg,
    transparent,
    rgba(199,162,74,.24),
    rgba(255,255,255,.10),
    rgba(199,162,74,.24),
    transparent);
}

/* ─────────────────────────────
   RESET
   ───────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(199,162,74,.11), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--ink), var(--ink-2));
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow-x:hidden;
  padding-top:var(--nav-h); /* SINGLE nav offset source */
}

/* Browser-native hidden attribute support */
[hidden]{ display:none !important; }

/* ─────────────────────────────
   TYPOGRAPHY
   ───────────────────────────── */
h1,h2,h3{
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper);
}

h1{
  font-size:clamp(1.35rem, 4.4vw, 2.35rem);
  text-align:center;
  margin-bottom:.85rem;
}

h2{
  font-size:clamp(1.1rem, 3.2vw, 1.6rem);
  text-align:center;
  margin:1.6rem 0 1rem;
}

p{
  font-size:1.03rem;
  line-height:1.75;
  color:var(--text-dim);
  text-align:justify;
  max-width:70ch;
  margin:0 auto 1rem;
}

.lead{
  text-align:center;
  color:var(--text);
}

/* ─────────────────────────────
   NAVBAR
   ───────────────────────────── */
.navbar{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:var(--nav-h);
  z-index:10000;
  background: linear-gradient(180deg, rgba(10,10,12,.78), rgba(10,10,12,.55));
  border-bottom:1px solid var(--gold-line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
}

.nav-container{
  height:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.menu-icon{
  width:44px;
  height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  border:1px solid rgba(199,162,74,.22);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
}

.bar{
  width:20px;
  height:2px;
  background: linear-gradient(90deg, var(--paper), var(--gold));
}

.nav-links{
  position:fixed;
  top:var(--nav-h);
  left:0;right:0;
  display:none;
  flex-direction:column;
  gap:.75rem;
  padding:1rem;
  background: rgba(10,10,12,.92);
}

.nav-links.open{display:flex}

.nav-links a.active{
  border-color: rgba(199,162,74,.55);
  box-shadow: 0 0 0 3px rgba(199,162,74,.10);
}

@media (min-width:860px){
  .menu-icon{display:none}
  .nav-links{
    position:static;
    display:flex !important;
    flex-direction:row;
    background:none;
    padding:0;
  }
}

/* ─────────────────────────────
   MAIN / SPA SECTIONS
   ───────────────────────────── */
main,
.main-layout{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.25rem 1rem 5.5rem;
}

/* SPA sections — CRITICAL FIX */
.spw-section{
  width:100%;
}

/* Non-home sections must not inherit hero overlap */
.spw-section:not(#home){
  margin-top:1.25rem;
}

/* ─────────────────────────────
   HERO
   ───────────────────────────── */
.hero{
  width:100%;
  max-width:1200px;
  border-radius: var(--r2);
  overflow:hidden;
  border:1px solid rgba(199,162,74,.22);
  box-shadow: var(--shadow);
}

.hero-video{
  display:block;
  width:100%;
  height: min(62vh, 520px);
  object-fit: cover;
}

/* Glass hero card — SCOPED FIX */
#home .glass-hero-card{
  margin:-2.2rem auto 1.75rem;
  text-align:center;
}

.glass-hero-card p{
  margin-left:auto;
  margin-right:auto;
}

/* ─────────────────────────────
   GLASS PANELS
   ───────────────────────────── */
.glass-panel,
.glass-hero-card,
.policy-panel,
.chambers-panel{
  width:min(94%, var(--max));
  border-radius: var(--r2);
  background: linear-gradient(180deg, var(--glass-strong), var(--glass));
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: clamp(1.1rem, 3.5vw, 2rem);
  position:relative;
  overflow:hidden;
}

/* ─────────────────────────────
   FOOTER / BRANDING
   ───────────────────────────── */
.arcta-branding{
  position:fixed;
  bottom:0;left:0;
  width:100%;
  background: linear-gradient(180deg, rgba(246,244,239,.98), rgba(255,255,255,.95));
  border-top: 1px solid rgba(199,162,74,.22);
  padding:.7rem 1rem;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

/* ─────────────────────────────
   UTILITIES
   ───────────────────────────── */
.center{ text-align:center !important; }
.justify{ text-align:justify !important; }
.gold{ color: var(--gold) !important; }