/* ==========================================================================
   Alice Wilton Consulting — Brand Stylesheet
   Palette: Navy #1C2E5B | Gold #C6A24A | Charcoal #25304A | Grey #F4F4F1 | Stone #E7E3D6
   ========================================================================== */

:root{
  --navy: #1C2E5B;
  --navy-dark: #131F3E;
  --gold: #C6A24A;
  --gold-light: #DCC07A;
  --charcoal: #25304A;
  --grey: #F4F4F1;
  --stone: #E7E3D6;
  --white: #FFFFFF;
  --cream: #FBF6EC;
  --terracotta: #C97C56;
  --urgent: #A23B3B;
  --urgent-dark: #7E2C2C;
  --radius: 12px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(28,46,91,0.10);
  --shadow-warm: 0 14px 34px rgba(201,124,86,0.16);
  --transition: 0.25s ease;
}

*{ box-sizing: border-box; margin:0; padding:0; }

/* Fluid base font-size: scales smoothly with viewport width (not fixed breakpoints).
   Since every type size on this site is set in rem, this single line makes ALL
   text on the page scale in relation to screen size — small screens get a smaller
   base, large screens get a larger one, with a smooth ramp in between. */
html{
  scroll-behavior: smooth;
  font-size: clamp(13px, 0.55vw + 11px, 16px);
}

body{
  font-family: 'Calibri','Carlito','Segoe UI','Arial',sans-serif;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}

h1,h2,h3,h4, .logo-word{
  font-family: 'Calibri','Carlito','Segoe UI','Arial',sans-serif;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.25;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
img{ max-width: 100%; display:block; }

.container{
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-block;
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}

.section-head{ text-align:center; max-width: 720px; margin: 0 auto 48px; }
.section-head h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.section-head p{ color:#5a6478; font-size: 1.05rem; }

section{ padding: 88px 0; position: relative; }
.bg-grey{ background: linear-gradient(180deg, var(--cream), var(--grey)); }
.bg-navy{ background: var(--navy); color: var(--stone); }
.bg-navy h2, .bg-navy h3{ color: var(--white); }
.bg-navy .section-head p{ color: var(--stone); }

/* ---------- Legal / policy page prose (privacy.html) ---------- */
.legal-page{ max-width: 760px; margin: 0 auto; }
.legal-page h2{ font-size: 1.25rem; margin-top: 42px; margin-bottom: 12px; }
.legal-page h2:first-child{ margin-top: 0; }
.legal-page p{ color:#4a5468; margin-bottom: 14px; }
.legal-page ul{ margin: 0 0 14px; padding-left: 22px; color:#4a5468; }
.legal-page li{ margin-bottom: 8px; }
.notice-box{
  margin-top: 40px;
  padding: 18px 20px;
  background: var(--cream);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--charcoal);
}

/* ---------- Decorative monogram watermarks (warmth, not corporate flatness) ---------- */
.monogram-watermark{
  position:absolute; pointer-events:none; opacity:0.07; z-index:0;
}
.monogram-watermark img{ width:100%; height:100%; }
.bg-navy .monogram-watermark{ opacity:0.10; filter: brightness(0) invert(1); }
section > .container{ position:relative; z-index:1; }

/* ---------- Friendly pull-quote ---------- */
.pull-quote{
  background: var(--cream); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; margin: 26px 0;
  font-family: 'Calibri','Carlito','Segoe UI','Arial',sans-serif; font-style: italic; color: var(--navy); font-size: 1.05rem;
  box-shadow: var(--shadow);
}
.pull-quote span{ display:block; margin-top:10px; font-family: 'Calibri','Carlito','Segoe UI','Arial',sans-serif; font-style:normal;
  font-size: 0.82rem; font-weight:700; color: var(--gold); letter-spacing: 0.3px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 30px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn-primary{ background: var(--gold); color: var(--navy-dark); }
.btn-primary:hover{ background: var(--gold-light); transform: translateY(-2px); box-shadow: var(--shadow-warm); }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#2fe075; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,211,102,0.28); }
.btn-outline{ border-color: var(--white); color: var(--white); }
.btn-outline:hover{ background: var(--white); color: var(--navy); transform: translateY(-2px); }
.btn-outline-navy{ border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover{ background: var(--navy); color: var(--white); }

/* ---------- Emergency / urgent matter bar ---------- */
.emergency-bar{
  position: fixed; top:0; left:0; right:0; z-index: 1100;
  background: linear-gradient(90deg, var(--urgent-dark), var(--urgent));
  color:#fff; font-size:0.86rem; font-weight:600;
  padding: 10px 20px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  text-align:center;
}
.emergency-bar .pulse-dot{
  width:8px; height:8px; border-radius:50%; background:#fff; flex-shrink:0;
  animation: pulseDot 1.4s infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.4; transform:scale(1.4); } }
.emergency-bar a{
  color:#fff; text-decoration: underline; font-weight:800; letter-spacing:0.3px;
}
.emergency-bar a:hover{ color: var(--gold-light); }
.emergency-bar .close-bar{
  background:none; border:none; color:#fff; opacity:0.75; cursor:pointer; font-size:1rem;
  position:absolute; right:14px; top:50%; transform: translateY(-50%); line-height:1;
}
.emergency-bar .close-bar:hover{ opacity:1; }
body.has-emergency-bar header{ top: 40px; }
body.has-emergency-bar .hero{ padding-top: 40px; }

/* ---------- Header / Nav ---------- */
header{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  background: rgba(255,255,255,0.0);
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition), top var(--transition);
  padding: 22px 0;
}
header.scrolled{
  background: rgba(255,255,255,0.97);
  box-shadow: 0 2px 18px rgba(0,0,0,0.08);
  padding: 12px 0;
  backdrop-filter: blur(6px);
}
.nav-wrap{ display:flex; align-items:center; justify-content: space-between; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 42px; width:auto; transition: height var(--transition); }
header.scrolled .brand img{ height: 34px; }
.brand-text{ font-family: 'Calibri','Carlito','Segoe UI','Arial',sans-serif; }
.brand-text strong{ display:block; font-size: 1.05rem; color: var(--white); letter-spacing: 0.5px; transition: color var(--transition); }
.brand-text span{ display:block; font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
header.scrolled .brand-text strong{ color: var(--navy); }

nav ul{ display:flex; gap: 24px; align-items:center; }
nav a{
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.3px;
  color: var(--white); position: relative; padding-bottom: 4px;
  white-space: nowrap;  /* keep multi-word items such as "Verify a Document" on one line */
  transition: color var(--transition);
}
header.scrolled nav a{ color: var(--charcoal); }
nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--gold);
  transition: width var(--transition);
}
nav a:hover::after, nav a.active::after{ width: 100%; }
nav a:hover, nav a.active{ color: var(--gold); }

.nav-cta{ display:flex; align-items:center; gap:18px; }
.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
.hamburger span{ width:26px; height:2px; background: var(--white); transition: var(--transition); }
header.scrolled .hamburger span{ background: var(--navy); }

/* ---------- Hero ---------- */
.hero{
  min-height: 100vh;
  display:flex; align-items:center;
  position: relative;
  background: linear-gradient(120deg, #1C2E5B 0%, #223a70 55%, #2b4685 100%);
  color: var(--white);
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle at 15% 20%, rgba(198,162,74,0.22), transparent 45%),
                     radial-gradient(circle at 85% 85%, rgba(201,124,86,0.14), transparent 40%);
  pointer-events:none;
}
.hero .monogram-watermark{ top:50%; right:-6%; width:620px; height:620px; transform: translateY(-50%) rotate(-8deg); opacity:0.09; }
.hero-welcome{
  display:inline-flex; align-items:center; gap:10px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 8px 18px 8px 8px;
  margin-bottom: 22px; font-size: 0.85rem; color: var(--stone);
}
.hero-welcome .dotpulse{ width:9px; height:9px; border-radius:50%; background: var(--gold); flex-shrink:0; }
.hero-inner{ position:relative; z-index:2; padding-top: 90px; }
.hero .eyebrow{ color: var(--gold-light); }
.hero h1{
  color: var(--white);
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  max-width: 820px;
  margin-bottom: 22px;
}
.hero h1 em{ color: var(--gold); font-style: normal; }
.hero p.lead{
  max-width: 640px; font-size: 1.15rem; color: var(--stone); margin-bottom: 36px;
}
.hero-actions{ display:flex; gap:18px; flex-wrap: wrap; margin-bottom: 60px; }

.hero-stats{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 24px;
  border-top: 1px solid rgba(255,255,255,0.15); padding-top: 32px; max-width: 900px;
}
.stat h3{
  color: var(--gold); font-size: clamp(1.4rem,2.6vw,2rem); font-family: 'Calibri','Carlito','Segoe UI','Arial',sans-serif; margin-bottom:4px;
}
.stat span{ font-size: 0.82rem; color: var(--stone); letter-spacing: 0.4px; }

.scroll-cue{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%);
  color: var(--stone); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
}
.scroll-cue .dot{
  width:6px; height:6px; border-radius:50%; background: var(--gold);
  animation: bounce 1.6s infinite;
}
@keyframes bounce{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(10px);} }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:center; }
.about-photo{
  background: var(--navy); border-radius: var(--radius); padding: 46px 34px;
  color: var(--white); position: relative; box-shadow: var(--shadow);
}
.about-photo::after{
  content:''; position:absolute; inset:14px; border: 1px solid rgba(198,162,74,0.5); border-radius: 4px; pointer-events:none;
}
.about-photo img{ width: 96px; margin: 0 auto 18px; filter: brightness(0) invert(1); opacity:0.9;}
.about-photo h3{ color: var(--white); text-align:center; font-size:1.3rem; }
.about-photo p.role{ text-align:center; color: var(--gold-light); font-size:0.85rem; letter-spacing: 0.5px; margin-top:6px; }
.about-photo .reg{ text-align:center; margin-top:18px; font-size:0.78rem; color: var(--stone); }
.credential-list{ margin-top: 22px; border-top: 1px solid rgba(255,255,255,0.15); padding-top:18px; }
.credential-list li{ font-size: 0.85rem; padding: 6px 0; display:flex; gap:8px; color: var(--stone); }
.credential-list li::before{ content:'—'; color: var(--gold); }

.about-copy h2{ margin-bottom: 18px; }
.about-copy p{ color:#4b5568; margin-bottom: 16px; }
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.value-chip{
  background: var(--grey); border-left: 3px solid var(--gold);
  padding: 12px 14px; font-size: 0.85rem; font-weight:600; color: var(--navy); border-radius: 4px;
}

/* ---------- Services (dynamic accordion) ---------- */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card{
  background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius-lg);
  padding: 26px; cursor:pointer; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.service-card:hover{ box-shadow: var(--shadow-warm); transform: translateY(-4px); border-color: var(--gold); }
.service-card .icon-badge{
  width:46px; height:46px; border-radius: 14px; background: linear-gradient(135deg, var(--cream), var(--stone));
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px;
}
.service-card .num{ font-family: 'Calibri','Carlito','Segoe UI','Arial',sans-serif; font-size:0.85rem; color: var(--gold); font-weight:700; }
.service-card h3{ font-size: 1.08rem; margin: 10px 0 8px; }
.service-card p.blurb{ font-size: 0.88rem; color:#5a6478; margin-bottom: 14px; }
.service-card .toggle{ font-size: 0.8rem; font-weight:700; color: var(--navy); display:flex; align-items:center; gap:6px; }
.service-card .toggle .chev{ transition: transform var(--transition); }
.service-card.open .toggle .chev{ transform: rotate(180deg); }
.service-card .detail{
  max-height:0; overflow:hidden; transition: max-height 0.35s ease, margin-top 0.35s ease;
}
.service-card.open .detail{ max-height: 400px; margin-top: 14px; }
.service-card .detail ul{ border-top:1px dashed var(--stone); padding-top: 12px; }
.service-card .detail li{ font-size: 0.85rem; color:#4b5568; padding: 4px 0; padding-left: 16px; position:relative; }
.service-card .detail li::before{ content:'•'; color: var(--gold); position:absolute; left:0; }

.services-filter{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom: 40px; }
.filter-btn{
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--stone); background: var(--white);
  font-size: 0.82rem; font-weight:700; color: var(--navy); cursor:pointer; transition: var(--transition);
}
.filter-btn:hover{ border-color: var(--gold); }
.filter-btn.active{ background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- Approach (tabs) ---------- */
.approach-wrap{ display:grid; grid-template-columns: 260px 1fr; gap: 40px; }
.approach-tabs{ display:flex; flex-direction:column; gap:6px; }
.approach-tab{
  text-align:left; padding: 16px 18px; border-radius: var(--radius); border:none; cursor:pointer;
  background: transparent; font-weight:700; color: var(--stone); font-size:0.95rem;
  display:flex; align-items:center; gap:12px; transition: var(--transition);
}
.approach-tab .n{
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0;
}
.approach-tab.active{ background: rgba(198,162,74,0.14); color: var(--gold); }
.approach-tab.active .n{ background: var(--gold); border-color: var(--gold); color: var(--navy-dark); }
.approach-panel{ display:none; animation: fadeIn 0.4s ease; }
.approach-panel.active{ display:block; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
.approach-panel h3{ color: var(--white); font-size:1.5rem; margin-bottom: 14px; }
.approach-panel p{ color: var(--stone); margin-bottom: 18px; max-width: 640px; }
.approach-panel ul{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.approach-panel li{ font-size:0.9rem; color: var(--stone); padding-left:18px; position:relative; }
.approach-panel li::before{ content:'✓'; color: var(--gold); position:absolute; left:0; }

/* ---------- Industries (marquee-ish grid) ---------- */
.industry-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.industry-chip{
  background: var(--white); border:1px solid var(--stone); border-radius: var(--radius);
  padding: 20px 14px; text-align:center; font-size:0.85rem; font-weight:700; color: var(--navy);
  transition: var(--transition);
}
.industry-chip:hover{ border-color: var(--gold); background: var(--grey); transform: translateY(-2px); }

/* ---------- Why us ---------- */
.why-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.why-item{ display:flex; gap:14px; align-items:flex-start; padding: 16px; }
.why-item .tick{
  width:34px; height:34px; border-radius:50%; background: var(--navy); color: var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.why-item p{ font-size:0.95rem; color: var(--charcoal); font-weight:600; padding-top:6px; }

/* ---------- Emergency card (Contact section) ---------- */
.emergency-card{
  background: linear-gradient(135deg, var(--urgent), var(--urgent-dark));
  border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 26px; color:#fff;
  display:flex; align-items:center; gap:18px; box-shadow: 0 14px 30px rgba(162,59,59,0.25);
}
.emergency-card .ic{ font-size:1.8rem; flex-shrink:0; }
.emergency-card h3{ color:#fff; font-size:1.05rem; margin-bottom:4px; }
.emergency-card p{ font-size:0.85rem; color:#f3d9d9; margin-bottom:10px; }
.emergency-card a.btn{
  background:#fff; color: var(--urgent-dark); padding:9px 20px; font-size:0.85rem;
}
.emergency-card a.btn:hover{ background: var(--gold-light); color: var(--navy-dark); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-info h2{ margin-bottom:16px; }
.contact-info p{ color:#4b5568; margin-bottom: 24px; }
.info-row{ display:flex; gap:14px; padding: 14px 0; border-bottom: 1px solid var(--stone); }
.info-row .ic{ color: var(--gold); font-weight:700; width: 26px; }
.info-row strong{ display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.5px; color:#8a90a1; }
.info-row span{ font-size:0.98rem; color: var(--navy); font-weight:600; }

.form-card{ background: var(--grey); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.form-row{ margin-bottom: 18px; }
.form-row label{ display:block; font-size:0.82rem; font-weight:700; color: var(--navy); margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--stone);
  font-family: inherit; font-size:0.92rem; background: var(--white); transition: border-color var(--transition);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color: var(--gold); }
.form-row.two{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form-msg{ margin-top: 14px; font-size:0.88rem; font-weight:700; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ color: #1b7a3d; }

/* ---------- Footer ---------- */
footer{ background: var(--navy-dark); color: var(--stone); padding: 50px 0 24px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.footer-grid h4{ color: var(--white); font-size:1rem; margin-bottom: 14px; }
.footer-grid p, .footer-grid a{ font-size:0.87rem; color: var(--stone); display:block; margin-bottom:8px; }
.footer-grid a:hover{ color: var(--gold); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; text-align:center; font-size:0.8rem; color:#8a90a1;
}
.footer-tagline{ font-family: 'Calibri','Carlito','Segoe UI','Arial',sans-serif; font-style: italic; color: var(--gold-light); margin-bottom:8px; }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; bottom: 28px; right: 28px; width:46px; height:46px; border-radius:50%;
  background: var(--gold); color: var(--navy-dark); border:none; cursor:pointer; font-weight:700;
  box-shadow: var(--shadow); opacity:0; pointer-events:none; transform: translateY(10px);
  transition: var(--transition); z-index: 900;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }

/* ---------- FAQ ---------- */
.faq-list{ max-width: 780px; margin: 0 auto; }
.faq-item{
  background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius);
  margin-bottom: 14px; overflow:hidden; transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item:hover{ border-color: var(--gold); }
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding: 18px 22px; cursor:pointer; font-weight:700; color: var(--navy); font-size:0.98rem;
}
.faq-q .chev{ transition: transform var(--transition); color: var(--gold); flex-shrink:0; }
.faq-item.open .faq-q .chev{ transform: rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-a{ max-height: 300px; }
.faq-a p{ padding: 0 22px 20px; font-size:0.92rem; color:#5a6478; }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab{
  position:fixed; bottom: 28px; left: 28px; z-index: 900;
  display:flex; align-items:center; gap:10px; background:#25D366; color:#fff;
  padding: 12px 20px 12px 14px; border-radius: 999px; font-weight:700; font-size:0.9rem;
  box-shadow: 0 12px 28px rgba(37,211,102,0.35); transition: transform var(--transition);
}
.whatsapp-fab:hover{ transform: translateY(-2px) scale(1.03); }
.whatsapp-fab .wa-ic{ width:22px; height:22px; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .approach-wrap{ grid-template-columns: 1fr; }
  .approach-tabs{ flex-direction:row; overflow-x:auto; }
  .industry-grid{ grid-template-columns: repeat(2,1fr); }
  .why-grid{ grid-template-columns: 1fr; }
  .hero-stats{ grid-template-columns: repeat(2,1fr); }
}
/* Collapse the main navigation to the off-canvas drawer well before the
   phone breakpoint. The horizontal nav carries nine items, which cannot
   fit alongside the logo and the consultation button on a tablet — at
   720px the logo wrapped onto three lines and the button was clipped. */
@media (max-width: 1080px){
  nav{ position: fixed; top:0; right:-100%; width: 78%; max-width:320px; height:100vh;
       background: var(--navy); padding: 100px 30px 30px; transition: right var(--transition);
       overflow-y:auto; z-index: 1001; }
  nav.open{ right:0; box-shadow: -12px 0 30px rgba(0,0,0,0.25); }
  nav ul{ flex-direction:column; gap: 22px; }
  nav a, header.scrolled nav a{ color: var(--white); }
  .hamburger{ display:flex; z-index: 1002; position:relative; }
}
@media (max-width: 720px){
  .nav-cta .btn-primary{ display:none; }
  .services-grid{ grid-template-columns: 1fr; }
  .industry-grid{ grid-template-columns: repeat(2,1fr); }
  .form-row.two{ grid-template-columns: 1fr; }
  section{ padding: 64px 0; }
  .whatsapp-fab span{ display:none; }
  .whatsapp-fab{ padding: 14px; left: 20px; bottom: 20px; }
  .to-top{ right: 20px; bottom: 20px; }
  .emergency-bar{ font-size:0.78rem; padding:8px 40px; }
  body.has-emergency-bar header{ top: 56px; }
  body.has-emergency-bar .hero{ padding-top: 56px; }
  .emergency-card{ flex-direction:column; text-align:center; }
}

/* ---------- POPIA consent block on the enquiry form ----------
   Express, unticked-by-default consent to processing, as required
   by the Protection of Personal Information Act, 4 of 2013. The
   form handler in main.js refuses to submit without it. */
.popia-consent{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  margin:1.1rem 0 .4rem;
  padding:.85rem .9rem;
  background: var(--cream);
  border:1px solid var(--stone);
  border-left:4px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.popia-consent input[type="checkbox"]{
  width:17px;
  height:17px;
  margin-top:.15rem;
  flex:0 0 auto;
  accent-color: var(--navy);
  cursor:pointer;
}
.popia-consent label{
  font-size:.76rem;
  line-height:1.6;
  color: var(--charcoal);
  cursor:pointer;
  margin:0;
}
.popia-consent label strong{
  display:block;
  font-size:.8rem;
  color: var(--navy);
  margin-bottom:.2rem;
}
.popia-consent a{ color: var(--navy); font-weight:600; }

/* ---------- Advocacy Practice & Professional Status (AWC Alignment, 28 Oct 2026) ----------
   Visually distinct from the company's service catalogue on purpose: the advocacy
   practice is a separate professional capacity, not a twelfth-pillar of the company. */
.adv-section{ background: var(--cream); border-top: 4px solid var(--gold); }
.adv-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 28px; }
.adv-card{ background: var(--white); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); border-left: 4px solid var(--navy); }
.adv-card h3{ font-size: 1.08rem; margin-bottom: 6px; }
.adv-card p{ font-size: .88rem; color:#4a5468; margin-bottom: 10px; }
.adv-card ul{ list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 16px; }
.adv-card li{ font-size: .82rem; padding: 3px 0 3px 14px; position: relative; break-inside: avoid; }
.adv-card li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background: var(--gold); }
.adv-brief{ margin-top: 26px; background: var(--white); border-radius: var(--radius); padding: 22px 26px; border: 1px solid var(--stone); }
.adv-brief h3{ font-size: 1rem; margin-bottom: 8px; }
.adv-brief p{ font-size: .9rem; line-height: 1.7; text-align: justify; }
.adv-contact{ margin-top: 10px; font-weight: 600; color: var(--navy); }
.adv-contact a{ color: var(--navy); text-decoration: underline; }
.status-section{ background: var(--grey); }
.status-card{ background: var(--white); border-radius: var(--radius-lg); padding: 34px 38px; box-shadow: var(--shadow); border-top: 4px solid var(--navy); max-width: 920px; margin: 0 auto; }
.status-card h2{ margin: 8px 0 16px; }
.status-card p{ font-size: .92rem; line-height: 1.75; margin-bottom: 11px; text-align: justify; color: var(--charcoal); }
.svc-scope-note, .form-scope-note{ font-size: .84rem; color:#4a5468; background: var(--white); border-left: 4px solid var(--gold); padding: 11px 15px; border-radius: 0 8px 8px 0; margin-top: 22px; line-height: 1.6; }
.form-scope-note{ background: var(--cream); margin: 14px 0 4px; }
.svc-scope-note a, .form-scope-note a{ color: var(--navy); font-weight: 600; text-decoration: underline; }
@media (max-width: 860px){ .adv-grid{ grid-template-columns: 1fr; } .status-card{ padding: 24px 20px; } }
@media (max-width: 520px){ .adv-card ul{ columns: 1; } }

/* Menu links jump to sections; keep each heading clear of the fixed header (and the time-sensitive bar). */
section[id]{ scroll-margin-top: 96px; }
body.has-emergency-bar section[id]{ scroll-margin-top: 136px; }