/* ================================================================
   SPECIFYING DYNAMICS v5
   Aesthetic: Editorial · Architectural · Premium Australian
   Display: DM Serif Display (headings) + Plus Jakarta Sans (body)
   Palette: Deep ink · Warm white · #31BC92 accent
   ================================================================ */

/* ── Custom Properties ────────────────────────────────────────── */
:root {
  --green:      #31BC92;
  --green-mid:  #27a07c;
  --green-deep: #1c7a5e;
  --green-wash: #f0faf6;
  --green-mist: #dff2eb;
  --green-glow: rgba(49,188,146,.15);

  --ink:        #111916;
  --ink-2:      #1a2920;

  --text:       #1e3028;
  --text-2:     #3d5a4c;
  --text-3:     #6b8a7a;

  --surface:    #ffffff;
  --surface-2:  #f6f9f7;
  --surface-3:  #ecf4ef;

  --line:       #dde9e3;
  --line-2:     #c5d9cf;

  --dark:       #111916;
  --dark-2:     #0d1510;
  --dark-3:     #192519;

  --err:        #d94f4f;

  --r-s:  3px;
  --r-m:  8px;
  --r-l:  14px;
  --r-xl: 20px;
  --r-f:  999px;

  --sh-1: 0 1px 4px rgba(17,25,22,.05);
  --sh-2: 0 4px 16px rgba(17,25,22,.07);
  --sh-3: 0 8px 32px rgba(17,25,22,.09);
  --sh-4: 0 20px 60px rgba(17,25,22,.12);

  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --t-fast:   .12s;
  --t-mid:    .22s;
  --t-slow:   .4s;

  --nav-h: 84px;
  --bar-h: 30px;
  --max-w: 1180px;
  --pad:   clamp(1.25rem, 4vw, 2.5rem);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--text); background:var(--surface);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
#main-content { flex:1; min-height:calc(100vh - 114px); }
img  { max-width:100%; height:auto; display:block; }
a    { color:var(--green-mid); text-decoration:none; transition:color var(--t-fast); }
a:hover { color:var(--green-deep); }
ul,ol { list-style:none; }
address { font-style:normal; }
button  { font-family:inherit; cursor:pointer; }

/* ── Skip link ─────────────────────────────────────────────────── */
.skip-link {
  position:absolute; top:-100%; left:1rem;
  background:var(--dark); color:#fff;
  padding:.4rem 1rem; border-radius:0 0 var(--r-m) var(--r-m);
  font-size:.8125rem; font-weight:600; z-index:9999;
}
.skip-link:focus { top:0; }

/* ── Load bar ──────────────────────────────────────────────────── */
#load-bar {
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg, var(--green) 0%, #a8e8d4 100%);
  z-index:9999; width:0; border-radius:0 2px 2px 0;
  pointer-events:none; transition:none;
}

/* ── Page content fade ─────────────────────────────────────────── */
#pc { transition:none; min-height:100vh; }

/* ================================================================
   UTILITY STRIP
   ================================================================ */


/* ================================================================
   SITE HEADER
   ================================================================ */
.site-header {
  position:sticky; top:0; z-index:800;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(17,25,22,.07);
  /* Allow logo to overflow below without clipping */
  overflow:visible;
}

/* ── Util strip — slim dark band ── */
.util-strip {
  background:var(--dark-2);
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 var(--pad); height:30px;
}
.util-inner {
  display:flex; align-items:center; gap:1.25rem;
}
.util-strip a {
  font-size:.7rem; font-weight:500; letter-spacing:.03em;
  color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:.3rem;
  transition:color var(--t-fast); white-space:nowrap;
}
.util-strip a:hover { color:var(--green); }
.util-strip a svg { width:10px; height:10px; flex-shrink:0; }
.util-flag svg { vertical-align:middle; margin-right:.35rem; }
.util-flag { display:flex; align-items:center; gap:.3rem; font-size:.7rem; color:rgba(255,255,255,.3); }
.util-flag img { width:13px; border-radius:2px; }

/* ── Nav wrap — logo overflows below ── */
.nav-wrap {
  max-width:var(--max-w); margin-inline:auto;
  padding-inline:var(--pad);
  height:var(--nav-h);
  display:flex; align-items:center; gap:2rem;
  border-bottom:1px solid var(--line);
  position:relative; overflow:visible;
}

/* Logo overflows below the nav bar */
.site-logo {
  display:block; flex-shrink:0;
  /* Pull logo down so it extends below the nav bar */
  position:relative; z-index:10;
}
.site-logo img {
  height:calc(var(--nav-h) + 28px);
  width:auto; display:block;
  /* White bg + shadow so it reads cleanly over whatever's below */
  filter:drop-shadow(0 2px 6px rgba(17,25,22,.12));
}

.primary-nav { flex:1; display:flex; justify-content:flex-end; }
.nav-list { display:flex; align-items:center; gap:.15rem; }
.nav-list a {
  font-size:.8125rem; font-weight:600; letter-spacing:.01em;
  color:var(--text-2);
  padding:.45rem .9rem; border-radius:var(--r-m);
  transition:color var(--t-fast), background var(--t-fast);
  white-space:nowrap; position:relative;
}
.nav-list a:hover { color:var(--text); background:var(--surface-2); }
.nav-list a.active { color:var(--green-deep); }
.nav-list a.active::after {
  content:''; position:absolute; bottom:3px; left:.9rem; right:.9rem;
  height:2px; background:var(--green); border-radius:var(--r-f);
}
.nav-cta {
  background:var(--green) !important; color:#fff !important;
  border-radius:var(--r-f) !important; padding:.45rem 1.2rem !important;
  font-weight:700 !important; letter-spacing:.01em !important;
  box-shadow:0 2px 10px rgba(49,188,146,.28);
  transition:background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) !important;
}
.nav-cta:hover { background:var(--green-mid) !important; transform:translateY(-1px); box-shadow:0 4px 18px rgba(49,188,146,.35) !important; }
.nav-cta.active::after { display:none; }

/* ── Hamburger ──────────────────────────────────── */
.nav-burger {
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; margin-left:auto;
  background:none; border:1.5px solid var(--line); border-radius:var(--r-m);
  transition:border-color var(--t-fast);
}
.nav-burger:hover { border-color:var(--green); }
.burger-bar { width:17px; height:1.5px; background:var(--text); border-radius:2px; transition:all var(--t-fast); }
.nav-burger.open .burger-bar:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open .burger-bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-burger.open .burger-bar:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position:fixed; top:calc(30px + var(--nav-h));
  left:0; right:0; bottom:0; background:var(--surface);
  overflow-y:auto; z-index:750; padding:1rem var(--pad) 4rem;
  border-top:2px solid var(--green);
  display:none; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.mobile-nav.open { display:block; opacity:1; transform:none; pointer-events:all; }
.mobile-nav-link {
  display:flex; align-items:center; gap:.75rem;
  padding:.875rem .25rem; font-size:.9375rem; font-weight:600;
  color:var(--text); border-bottom:1px solid var(--line);
  transition:color var(--t-fast);
}
.mobile-nav-link:hover, .mobile-nav-link.active { color:var(--green-mid); }
.mobile-nav-link svg { width:16px; height:16px; color:var(--green); flex-shrink:0; }

/* ================================================================
   TAB BAR
   ================================================================ */
.tab-bar {
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:calc(30px + var(--nav-h)); z-index:100;
}
.tab-list {
  max-width:var(--max-w); margin-inline:auto;
  padding-inline:var(--pad); display:flex; overflow-x:auto; scrollbar-width:none;
}
.tab-list::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:.8rem 1.1rem;
  font-size:.8125rem; font-weight:600; color:var(--text-3);
  background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--t-fast), border-color var(--t-fast);
  white-space:nowrap; font-family:inherit;
  display:flex; align-items:center; gap:.35rem;
}
.tab-btn { flex-shrink:0; }
.tab-btn svg { width:13px; height:13px; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--green-deep); border-bottom-color:var(--green); font-weight:700; }

/* ================================================================
   PAGE HERO — clean dark band, no curves
   ================================================================ */
.page-hero {
  background:var(--dark);
  padding-block:2.75rem 3rem; padding-inline:var(--pad);
  background-image:
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(49,188,146,.08) 0%, transparent 60%);
}
.page-hero-inner { max-width:var(--max-w); margin-inline:auto; }
.page-hero h1 {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:clamp(1.875rem,3.5vw,2.625rem);
  font-weight:400; color:#fff; line-height:1.2;
  margin-block:.625rem .4rem; letter-spacing:-.01em;
}
.page-hero p { color:rgba(255,255,255,.5); font-size:.9375rem; }

.breadcrumb {
  display:flex; align-items:center; gap:.35rem;
  font-size:.72rem; color:rgba(255,255,255,.35);
}
.breadcrumb a { color:rgba(255,255,255,.45); transition:color var(--t-fast); }
.breadcrumb a:hover { color:var(--green); }
.breadcrumb svg { width:7px; height:7px; }

/* ================================================================
   HOME HERO
   ================================================================ */
.home-hero {
  background:var(--dark);
  padding-block:5.5rem 6.5rem; padding-inline:var(--pad);
  overflow:hidden; position:relative;
  background-image:
    radial-gradient(ellipse 50% 70% at 88% 40%, rgba(49,188,146,.1) 0%, transparent 55%),
    radial-gradient(ellipse 35% 45% at 12% 85%, rgba(49,188,146,.05) 0%, transparent 50%);
}
/* Subtle grid texture overlay */
.home-hero::after {
  content:'';
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(49,188,146,.03) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(49,188,146,.03) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.hero-grid {
  max-width:var(--max-w); margin-inline:auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 340px; gap:5rem; align-items:center;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.69rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green);
  background:rgba(49,188,146,.1); border:1px solid rgba(49,188,146,.2);
  padding:.3rem .85rem; border-radius:var(--r-f); margin-bottom:1.125rem;
}
.hero-eyebrow svg { width:10px; height:10px; }
.hero-h1 {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:clamp(2.5rem,5.5vw,4.25rem);
  font-weight:400; color:#fff; line-height:1.1;
  margin-bottom:1.25rem; letter-spacing:-.02em;
}
.hero-h1 em { color:var(--green); font-style:italic; }
.hero-lead {
  font-size:1.0625rem; color:rgba(255,255,255,.55);
  line-height:1.8; max-width:480px;
  margin-bottom:2rem; font-weight:400;
}
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-stats {
  display:flex; gap:2rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.08);
  justify-content:center;
}
.stat-num {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:2.25rem; font-weight:400; color:#fff; display:block; line-height:1;
}
.stat-label {
  font-size:.675rem; color:rgba(255,255,255,.38);
  text-transform:uppercase; letter-spacing:.08em;
  display:block; margin-top:.3rem;
}

/* Hero aside */
.hero-aside {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl); padding:1.625rem;
  backdrop-filter:blur(8px);
}
.hero-aside-label {
  font-size:.675rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); margin-bottom:.875rem; padding-bottom:.75rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:.4rem;
}
.hero-aside-label svg { width:12px; height:12px; }
.hero-aside-row {
  display:flex; align-items:flex-start; gap:.875rem;
  padding-block:.7rem;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.hero-aside-row:last-child { border:none; padding-bottom:0; }
.hero-aside-icon {
  width:32px; height:32px; flex-shrink:0;
  background:rgba(49,188,146,.12); border-radius:var(--r-m);
  display:flex; align-items:center; justify-content:center; color:var(--green);
}
.hero-aside-icon svg { width:14px; height:14px; }
.hero-aside-text { font-size:.8125rem; color:rgba(255,255,255,.5); line-height:1.45; }
.hero-aside-text strong { color:rgba(255,255,255,.85); display:block; margin-bottom:.1rem; font-size:.875rem; }

/* ================================================================
   SECTIONS
   ================================================================ */
.section {
  padding-block:clamp(3.5rem,6vw,5.5rem); padding-inline:var(--pad);
}
.section-inner { max-width:var(--max-w); margin-inline:auto; overflow-x:hidden; }
.section.s-white  { background:var(--surface); }
.section.s-tint   { background:var(--surface-2); }
.section.s-dark   { background:var(--dark); }

.section-header { margin-bottom:2.75rem; }
.section-header.centered { text-align:center; }
.section-header.centered .section-sub { margin-inline:auto; }

.section-kicker {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.675rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-mid); margin-bottom:.4rem;
}
.section-kicker::before {
  content:''; display:block; width:18px; height:2px;
  background:var(--green); border-radius:var(--r-f); flex-shrink:0;
}
.section-title {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:clamp(1.625rem,3vw,2.375rem);
  font-weight:400; color:var(--ink); line-height:1.2;
  letter-spacing:-.015em; margin-bottom:.6rem;
}
.section-sub {
  font-size:.9375rem; color:var(--text-3); line-height:1.75; max-width:500px;
}
.section.s-dark .section-title { color:#fff; }
.section.s-dark .section-sub   { color:rgba(255,255,255,.5); }
.section.s-dark .section-kicker { color:var(--green); }
.section.s-dark .section-kicker::before { background:var(--green); }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.6rem 1.4rem; font-size:.875rem; font-weight:700;
  line-height:1; border:2px solid transparent; border-radius:var(--r-f);
  cursor:pointer; transition:all var(--t-fast) var(--ease);
  white-space:nowrap; font-family:inherit; text-decoration:none;
  letter-spacing:.01em;
}
.btn:active { transform:scale(.97) !important; }
.btn svg { width:14px; height:14px; flex-shrink:0; }
.btn-primary {
  background:var(--green); color:#fff; border-color:var(--green);
  box-shadow:0 2px 12px rgba(49,188,146,.22);
}
.btn-primary:hover { background:var(--green-mid); border-color:var(--green-mid); color:#fff; transform:translateY(-1px); box-shadow:0 5px 20px rgba(49,188,146,.3); }
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn-ghost:hover { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline { background:transparent; color:var(--green-mid); border-color:var(--green); }
.btn-outline:hover { background:var(--green); color:#fff; transform:translateY(-1px); }
.btn-tint { background:var(--green-wash); color:var(--green-deep); border-color:var(--green-mist); }
.btn-tint:hover { background:var(--green-mist); border-color:var(--green); }
.btn-lg { padding:.75rem 1.875rem; font-size:.9375rem; }
.btn-sm { padding:.35rem .875rem; font-size:.75rem; }

/* ================================================================
   CARDS
   ================================================================ */
/* ── Service cards ──────────────────────────────── */
.service-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem;
}
.service-card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-1); transition:box-shadow var(--t-mid), transform var(--t-mid);
  display:flex; flex-direction:column;
}
.service-card:hover { box-shadow:var(--sh-4); transform:translateY(-4px); }
.service-card-media {
  position:relative; height:200px; overflow:hidden; background:var(--dark-3);
  display:flex; align-items:center; justify-content:center;
}
.service-card-media img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.service-card:hover .service-card-media img { transform:scale(1.04); }
.service-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(17,25,22,.65) 0%, transparent 50%);
}
.service-card-tag {
  position:absolute; top:.875rem; left:.875rem;
  background:var(--green); color:#fff;
  padding:.18rem .7rem; border-radius:var(--r-f);
  font-size:.65rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.service-card-body { padding:1.375rem; flex:1; display:flex; flex-direction:column; }
.service-card-title {
  font-size:1.125rem; font-weight:700; color:var(--ink);
  margin-bottom:.4rem; letter-spacing:-.01em;
}
.service-card-text { font-size:.875rem; color:var(--text-2); line-height:1.7; flex:1; margin-bottom:1.1rem; }

/* ── Feature cards ──────────────────────────────── */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:1.25rem; }
.feat-card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:1.5rem;
  box-shadow:var(--sh-1); transition:box-shadow var(--t-mid), transform var(--t-mid);
}
.feat-card:hover { box-shadow:var(--sh-3); transform:translateY(-3px); }
.feat-card-icon {
  width:44px; height:44px;
  background:var(--green-wash); border-radius:var(--r-m);
  display:flex; align-items:center; justify-content:center;
  color:var(--green-mid); margin-bottom:1rem;
}
.feat-card-icon svg { width:19px; height:19px; }
.feat-card-title { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
.feat-card-text  { font-size:.875rem; color:var(--text-2); line-height:1.7; }

/* ── Supplier grid ──────────────────────────────── */
.supplier-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:.875rem;
}
.supplier-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.125rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.supplier-card:hover { border-color:var(--green); box-shadow:var(--sh-2); transform:translateY(-2px); }
.supplier-logo { width:110px; height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:0; }
.supplier-logo img { max-width:110px; max-height:44px; object-fit:contain; filter:grayscale(15%); transition:filter var(--t-fast); }
.supplier-card:hover .supplier-logo img { filter:none; }
.supplier-initials {
  width:42px; height:42px;
  background:var(--green-mist); border-radius:var(--r-m);
  display:flex; align-items:center; justify-content:center;
  font-size:.875rem; font-weight:700; color:var(--green-deep);
}
.supplier-name  { font-size:.78rem; font-weight:700; color:var(--ink); line-height:1.3; min-height:calc(.78rem * 1.3 * 2); display:flex; align-items:center; justify-content:center; width:100%; margin:.625rem 0 .375rem; }
.supplier-city  { font-size:.72rem; color:var(--text-3); display:flex; align-items:center; gap:.25rem; justify-content:center; margin-bottom:.25rem; }
.supplier-city svg { width:9px; height:9px; color:var(--green); flex-shrink:0; }
.supplier-phone { font-size:.75rem; color:var(--green-mid); margin-top:.375rem; display:block; }

/* ── Branch grid ────────────────────────────────── */
.branch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.1rem; }
.branch-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07); border-radius:var(--r-l);
  padding:1.5rem; text-align:center; width:100%;
  transition:background var(--t-mid), border-color var(--t-mid), transform var(--t-mid);
}
.branch-card:hover { background:rgba(255,255,255,.09); border-color:rgba(49,188,146,.4); transform:translateY(-2px); }
.branch-icon {
  width:40px; height:40px;
  background:rgba(49,188,146,.12); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--green); flex-shrink:0;
}
/* Old centered card style (home page, head-office-card) */
.branch-card .branch-icon,
.head-office-card .branch-icon { margin:0 auto .75rem; }
.branch-icon svg { width:16px; height:16px; }
.branch-city  { font-size:1.0625rem; font-weight:700; color:#fff; margin-bottom:.15rem; }
.branch-state { font-size:.75rem; color:rgba(255,255,255,.5); margin-bottom:.875rem; word-break:break-all; overflow-wrap:anywhere; }
.branch-state a { color:var(--green-mid); word-break:break-all; overflow-wrap:anywhere; }
.branch-tel {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.8125rem; font-weight:600; color:var(--green);
  padding:.35rem .9rem; background:rgba(49,188,146,.1);
  border:1px solid rgba(49,188,146,.18); border-radius:var(--r-f);
  transition:background var(--t-fast), color var(--t-fast);
}
.branch-tel:hover { background:var(--green); color:#fff; }
.branch-tel svg { width:12px; height:12px; }

/* ── Why grid ───────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.1rem; }
.why-item {
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:0 var(--r-m) var(--r-m) 0; padding:1.375rem;
  transition:box-shadow var(--t-fast);
}
.why-item:hover { box-shadow:var(--sh-2); }
.why-num { font-size:1.625rem; font-weight:800; color:var(--green-mist); line-height:1; margin-bottom:.35rem; }
.why-title { font-size:.9375rem; font-weight:700; color:var(--ink); margin-bottom:.35rem; }
.why-text  { font-size:.8125rem; color:var(--text-2); line-height:1.7; }
.why-dl { margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.why-dl-item { padding:1.1rem 1.25rem; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:0 var(--r-m) var(--r-m) 0; }
.why-dl-item dt { font-size:.9375rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; }
.why-dl-item dd { font-size:.875rem; color:var(--text-2); line-height:1.7; margin:0; }

/* ── Portal card (dark) ─────────────────────────── */
.portal-card {
  background:var(--dark); border-radius:var(--r-xl); padding:2rem;
  border:1px solid rgba(255,255,255,.07); position:relative; overflow:hidden;
}
.portal-card::before {
  content:''; position:absolute; bottom:-60px; right:-60px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(49,188,146,.05); pointer-events:none;
}
.portal-card-label {
  font-size:.675rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); margin-bottom:.875rem;
  display:flex; align-items:center; gap:.35rem;
}
.portal-card-label svg { width:12px; height:12px; }
.portal-card-text { color:rgba(255,255,255,.5); font-size:.875rem; line-height:1.75; margin-bottom:1.375rem; }
.portal-feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.portal-feat {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-m); padding:.875rem;
}
.portal-feat svg { width:15px; height:15px; color:var(--green); margin-bottom:.4rem; display:block; }
.portal-feat strong { font-size:.8125rem; color:#fff; display:block; margin-bottom:.15rem; }
.portal-feat span   { font-size:.72rem; color:rgba(255,255,255,.38); }

/* ── Two-col ────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }

/* ── Checklist ──────────────────────────────────── */
.check-list li {
  display:flex; align-items:flex-start; gap:.55rem;
  padding-block:.45rem; font-size:.875rem; color:var(--text-2);
  border-bottom:1px solid var(--line);
}
.check-list li:last-child { border:none; }
.check-list li svg { width:13px; height:13px; color:var(--green); flex-shrink:0; margin-top:.25rem; }

/* ── Pill cloud ─────────────────────────────────── */
.pill-cloud { display:flex; flex-wrap:wrap; gap:.35rem; }
.pill {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.3rem .8rem; font-size:.78rem; font-weight:600;
  color:var(--text-2); background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r-f);
  transition:all var(--t-fast);
}
.pill:hover { border-color:var(--green); color:var(--green-deep); background:var(--green-wash); }
.pill svg { width:10px; height:10px; color:var(--green); }

/* ── CTA band ───────────────────────────────────── */
.cta-band { background:var(--ink); padding-block:4rem; padding-inline:var(--pad); text-align:center; }
.cta-band-inner { max-width:var(--max-w); margin-inline:auto; }
.cta-band .section-title { color:#fff; margin-bottom:.6rem; }
.cta-band .section-sub   { color:rgba(255,255,255,.45); margin-inline:auto; margin-bottom:1.75rem; }
.cta-actions { display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; }

/* ── Highlight card ─────────────────────────────── */
.highlight-card {
  background:var(--dark); border-radius:var(--r-xl); padding:2.25rem;
  text-align:center; border:1px solid rgba(255,255,255,.06);
}
.highlight-card-icon {
  width:52px; height:52px;
  background:rgba(49,188,146,.12); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--green); margin:0 auto .875rem;
}
.highlight-card-icon svg { width:22px; height:22px; }
.highlight-card-title {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:1.875rem; font-weight:400; color:#fff; margin-bottom:.5rem;
}
.highlight-card-text { color:rgba(255,255,255,.5); line-height:1.75; font-size:.875rem; margin-bottom:1.5rem; }

/* ── Report stats ───────────────────────────────── */
.report-stats {
  background:var(--green-wash); border:1px solid var(--green-mist);
  border-radius:var(--r-xl); padding:1.875rem;
}
.report-stats-title {
  font-size:.9375rem; font-weight:700; color:var(--ink); margin-bottom:1.375rem;
  display:flex; align-items:center; gap:.4rem;
}
.report-stats-title svg { width:14px; height:14px; color:var(--green); }
.report-stats-row { display:flex; gap:2rem; flex-wrap:wrap; }
.report-stat-num {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:1.625rem; font-weight:400; color:var(--ink); display:block; line-height:1;
}
.report-stat-lbl { font-size:.675rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; }

/* ── Branch mini-list ───────────────────────────── */
.branch-mini-list li {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  padding-block:.45rem; border-bottom:1px solid var(--line); font-size:.8125rem;
  max-width:100%; overflow:hidden;
}
.branch-mini-list li:last-child { border:none; }
.branch-mini-list strong { font-weight:600; color:var(--ink); }
.branch-mini-list a { color:var(--green-mid); font-weight:600; }

/* ================================================================
   CONTACT
   ================================================================ */
.contact-layout { display:grid; grid-template-columns:1fr 1.45fr; gap:4rem; align-items:start; max-width:100%; }
.contact-info-item { display:flex; align-items:flex-start; gap:.875rem; margin-bottom:1.25rem; }
.contact-info-icon {
  width:36px; height:36px; flex-shrink:0;
  background:var(--green-wash); border-radius:var(--r-m);
  display:flex; align-items:center; justify-content:center; color:var(--green-mid);
}
.contact-info-icon svg { width:14px; height:14px; }
.contact-info-label { font-size:.675rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.contact-info-value { font-size:.9375rem; font-weight:500; color:var(--ink); }
.contact-info-value a { color:var(--green-mid); word-break:break-all; }
.contact-info-value a:hover { color:var(--green-deep); }

/* ================================================================
   FORMS
   ================================================================ */
.form-group  { margin-bottom:1rem; }
.field-label { display:block; font-size:.8125rem; font-weight:600; color:var(--text); margin-bottom:.3rem; }
.field-req   { color:var(--err); }
.field-input {
  width:100%; padding:.6rem .875rem;
  font-family:inherit; font-size:.875rem;
  color:var(--text); background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r-m);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  outline:none; appearance:none;
}
.field-input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(49,188,146,.1); }
textarea.field-input { min-height:120px; resize:vertical; }
select.field-input {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236b8a7a' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .875rem center; padding-right:2.25rem; cursor:pointer;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-alert {
  padding:.75rem .9rem; border-radius:var(--r-m);
  font-size:.875rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.875rem;
}
.form-alert.ok  { background:rgba(49,188,146,.08); border:1px solid rgba(49,188,146,.22); color:var(--green-deep); }
.form-alert.err { background:rgba(217,79,79,.07);  border:1px solid rgba(217,79,79,.2);  color:#a33; }
.form-alert svg { width:14px; height:14px; flex-shrink:0; }
.honeypot { position:absolute; opacity:0; pointer-events:none; height:0; overflow:hidden; }

/* ================================================================
   PRODUCT SEARCH
   ================================================================ */
.search-bar {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:1.375rem;
  box-shadow:var(--sh-2); margin-bottom:1.75rem;
}
.search-row { display:flex; gap:.875rem; flex-wrap:wrap; align-items:flex-end; }
.search-row .form-group { flex:1; min-width:0; margin:0; width:100%; }
.search-row .form-group:first-child { flex:2; min-width:0; }
.search-count { font-size:.875rem; color:var(--text-3); margin-bottom:1.1rem; }
.search-count strong { color:var(--ink); }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:1.1rem; }
.product-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:1.25rem; box-shadow:var(--sh-1);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  display:flex; flex-direction:column;
}
.product-card:hover { border-color:var(--green); box-shadow:var(--sh-2); transform:translateY(-2px); }
.product-cat {
  display:inline-flex; align-items:center; gap:.25rem;
  background:var(--green-wash); color:var(--green-deep);
  padding:.15rem .6rem; border-radius:var(--r-f);
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.55rem;
}
.product-cat svg { width:9px; height:9px; }
.product-name { font-size:.9375rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; line-height:1.35; }
.product-desc { font-size:.8125rem; color:var(--text-2); line-height:1.65; flex:1; margin-bottom:.8rem; }
.product-foot { border-top:1px solid var(--line); padding-top:.55rem; display:flex; flex-direction:column; gap:.25rem; }
.product-supplier { font-size:.75rem; color:var(--text-3); display:flex; align-items:center; gap:.25rem; }
.product-supplier svg { width:11px; height:11px; color:var(--green); flex-shrink:0; }
.product-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.35rem; }
.product-state { font-size:.7rem; color:var(--text-3); display:flex; align-items:center; gap:.2rem; }
.product-state svg { width:9px; height:9px; color:var(--green); }
.product-phone { font-size:.78rem; font-weight:700; color:var(--green-mid); }
.product-phone:hover { color:var(--green-deep); }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { background:var(--dark-2); padding-top:3.25rem; }
.footer-inner { max-width:var(--max-w); margin-inline:auto; padding-inline:var(--pad); }
.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.15fr;
  gap:2.25rem; padding-bottom:2.25rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-brand-logo { height:36px; width:auto; margin-bottom:.875rem; }
.footer-about { font-size:.8125rem; color:rgba(255,255,255,.38); line-height:1.75; margin-bottom:1.1rem; }
.footer-social { display:flex; gap:.375rem; }
.footer-social a {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-m); color:rgba(255,255,255,.4);
  transition:all var(--t-fast);
}
.footer-social a:hover { background:var(--green); color:#fff; border-color:var(--green); transform:translateY(-2px); }
.footer-social svg { width:13px; height:13px; }
.footer-col-title { font-size:.675rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:.875rem; }
.footer-links { display:flex; flex-direction:column; gap:.2rem; }
.footer-links a {
  font-size:.8125rem; color:rgba(255,255,255,.38);
  display:flex; align-items:center; gap:.35rem; padding-block:.2rem; transition:color var(--t-fast);
}
.footer-links a:hover { color:var(--green); }
.footer-links svg { width:7px; height:7px; color:var(--green); flex-shrink:0; }
.footer-contact-row { display:flex; align-items:center; gap:.55rem; margin-bottom:.6rem; font-size:.8125rem; }
.footer-contact-row svg { width:13px; height:13px; color:var(--green); flex-shrink:0; }
.footer-contact-row a { color:rgba(255,255,255,.4); }
.footer-contact-row a:hover { color:var(--green); }

.footer-bottom {
  padding-block:1.1rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem;
}
.footer-copy { font-size:.72rem; color:rgba(255,255,255,.25); }
.footer-copy a { color:rgba(255,255,255,.35); }
.footer-copy a:hover { color:var(--green); }
.footer-sep { margin-inline:.35rem; opacity:.3; }
.footer-flag { display:flex; align-items:center; gap:.5rem; font-size:.72rem; color:rgba(255,255,255,.25); }
.footer-flag svg { width:22px !important; height:22px !important; border-radius:50% !important; flex-shrink:0; }

/* ── Back to top ────────────────────────────────── */
.back-top {
  position:fixed; bottom:1.375rem; right:1.375rem;
  width:38px; height:38px;
  background:var(--green); color:#fff;
  border:none; border-radius:var(--r-m);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-3); cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-mid), transform var(--t-fast);
  z-index:500;
}
.back-top svg { width:14px; height:14px; }
.back-top.visible { opacity:1; pointer-events:all; }
.back-top:hover { background:var(--green-mid); transform:translateY(-2px); }

/* ================================================================
   PAGE BODY (CMS)
   ================================================================ */
.page-body p  { margin-bottom:1rem; line-height:1.8; color:var(--text-2); font-size:.9375rem; }
.page-body h2 { font-family:'DM Serif Display',Georgia,serif; font-size:1.375rem; font-weight:400; color:var(--ink); margin:1.625rem 0 .6rem; }
.page-body h3 { font-size:1.0625rem; font-weight:700; color:var(--ink); margin:1.125rem 0 .4rem; }
.page-body ul { padding-left:1.375rem; list-style:disc; margin-bottom:.875rem; }
.page-body ol { padding-left:1.375rem; list-style:decimal; margin-bottom:.875rem; }
.page-body ol li { margin-bottom:.6rem; }
.page-body a { color:var(--green-mid); text-decoration:underline; }
.page-body a:hover { color:var(--green-deep); }
.page-body li { margin-bottom:.35rem; color:var(--text-2); font-size:.9375rem; }

/* ================================================================
   ERROR
   ================================================================ */
.error-page {
  min-height:60vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:4rem var(--pad);
}
.error-code {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:7rem; font-weight:400; color:var(--green-mist);
  line-height:1; display:block;
}
.error-title { font-family:'DM Serif Display',Georgia,serif; font-size:2rem; font-weight:400; color:var(--ink); margin-bottom:.6rem; }
.error-sub   { color:var(--text-3); margin-bottom:2rem; }

/* ================================================================
   UTILITIES
   ================================================================ */
.tc   { text-align:center; }
.mx-a { margin-inline:auto; }
.max-540 { max-width:540px; }
.max-700 { max-width:700px; }
.mt-2    { margin-top:.75rem; }
.mt-3    { margin-top:1.375rem; }
.mt-4    { margin-top:2rem; }
.mb-4    { margin-bottom:2rem; }
.hr      { border:none; border-top:1px solid var(--line); margin-block:1.375rem; }
.hidden  { display:none !important; }
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:1.75rem;
  box-shadow:var(--sh-1); max-width:100%; overflow:hidden;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1100px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero-grid   { grid-template-columns:1fr; }
  .hero-aside  { display:none; }
}
@media (max-width:900px) {
  :root { --nav-h:58px; --bar-h:26px; }
  .primary-nav  { display:none; }
  .nav-burger   { display:flex; }
  .two-col, .contact-layout { grid-template-columns:1fr; gap:1.75rem; }
  .home-hero { padding-block:3.5rem 5rem; }
}
@media (max-width:640px) {
  .footer-grid  { grid-template-columns:1fr; gap:1.5rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .form-row     { grid-template-columns:1fr; }
  .branch-grid  { grid-template-columns:1fr 1fr; }
  .supplier-grid{ grid-template-columns:1fr 1fr; }
  .portal-feat-grid { grid-template-columns:1fr; }
  .search-row   { flex-direction:column; }
  .hero-stats   { gap:1.25rem; }
  .cta-actions  { flex-direction:column; align-items:center; }
}
@media (max-width:400px) {
  .branch-grid, .supplier-grid { grid-template-columns:1fr; }
}

/* ── Additional utility classes ───────────────────── */
.pill-cloud-center { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; max-width:760px; margin-inline:auto; }
.head-office-card  { max-width:520px; margin-inline:auto; text-align:center; padding:2rem; }
.head-office-card .branch-icon { margin-inline:auto; margin-bottom:.75rem; }
.head-office-heading { font-size:1.1875rem; font-weight:700; color:var(--ink); margin-block:.5rem; }
.contact-heading    { font-size:1.375rem; font-weight:700; color:var(--ink); margin-bottom:1.375rem; }
.contact-subheading { font-size:1.125rem; font-weight:700; color:var(--ink); margin-bottom:1.25rem; display:flex; align-items:center; gap:.45rem; }
.contact-subheading svg { width:14px; height:14px; flex-shrink:0; }
.form-submit-btn   { width:100%; }
.search-btn-wrap   { display:flex; align-items:flex-end; }
.search-empty      { grid-column:1/-1; text-align:center; padding:3rem; color:var(--text-3); }
.kicker-flush      { margin-left:0 !important; }
.section-kicker svg { width:11px; height:11px; vertical-align:middle; }

@media (max-width:900px) {
  .site-logo img { height:var(--nav-h); }
  .util-strip { display:none; }
  #main-content { padding-top:0; }
}
/* Hide footer during page transitions — prevents blink */
/* Hide footer until JS renders first page */

@media (max-width:640px) {
  .contact-layout { gap:1.5rem; }
  .search-row { gap:.6rem; }
  .search-row .form-group,
  .search-row .search-btn-wrap { width:100%; }
  .search-btn-wrap .btn { width:100%; }
  .branch-mini-list li { flex-wrap:wrap; gap:.25rem; }
}
/* Mobile flag in nav bar */
.nav-flag-mobile { display:none; }
@media (max-width:900px) {
  .nav-flag-mobile { display:flex; align-items:center; margin-left:.5rem; line-height:1; }
  .nav-flag-mobile svg { width:28px !important; height:28px !important; border-radius:50% !important; overflow:hidden; box-shadow:none !important; }
}

/* ── Mobile tab nav: 2-col pill grid, always fully visible ── */
@media (max-width:900px) {
  .tab-bar {
    position:static;
    border-bottom:none;
    background:transparent;
    padding:1rem var(--pad) 0;
  }
  .tab-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    padding-inline:0;
    overflow:visible;
  }
  .tab-btn {
    justify-content:center;
    padding:.65rem .75rem;
    border-bottom:none;
    border-radius:2rem;
    border:1.5px solid var(--line);
    margin-bottom:0;
    font-size:.8rem;
    background:var(--surface);
    color:var(--text);
    white-space:normal;
    text-align:center;
    line-height:1.2;
  }
  .tab-btn.active {
    background:var(--green);
    border-color:var(--green);
    color:#fff;
    font-weight:700;
  }
  .tab-btn:hover:not(.active) {
    border-color:var(--green);
    color:var(--green-deep);
    background:var(--green-wash);
  }
}

/* ── Branch cards v2 ──────────────────────────── */
/* ── South Africa banner ───────────────────────── */
.sa-banner {
  display:flex; align-items:center; gap:1.5rem;
  background:var(--green-wash); border:1px solid rgba(49,188,146,.2);
  border-radius:var(--r-l); padding:1.25rem 1.5rem;
  margin-bottom:2rem; flex-wrap:wrap;
}
.sa-preamble { flex:1; min-width:200px; font-size:.9375rem; color:var(--text-2); margin:0; }
.sa-link {
  white-space:nowrap; display:inline-flex; align-items:center; gap:.65rem;
  padding:.55rem 1.25rem .55rem .7rem;
  border:2.5px solid var(--green); border-radius:50px;
  background:#fff; color:var(--green);
  font-weight:600; font-size:.9375rem; letter-spacing:.01em;
  text-decoration:none; transition:background .18s, color .18s, box-shadow .18s;
  box-shadow:0 2px 8px rgba(49,188,146,.15);
}
.sa-link:hover { background:var(--green); color:#fff; box-shadow:0 4px 16px rgba(49,188,146,.3); }
.sa-link svg { border-radius:50%; width:28px !important; height:28px !important; }
@media (max-width:600px) {
  .sa-banner { flex-direction:column; align-items:flex-start; gap:1rem; }
  .sa-link { white-space:normal; width:100%; justify-content:center; }
}

/* Branch cards grid — 1 col mobile, 2 col tablet, 3 col desktop */
.branch-grid2 {
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media (min-width:600px)  { .branch-grid2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px)  { .branch-grid2 { grid-template-columns:repeat(3,1fr); } }

/* Every card identical — no special head office layout */
.branch-card2 {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:1.5rem;
  display:flex; flex-direction:column; gap:1rem;
  box-shadow:0 1px 4px rgba(17,25,22,.06);
  transition:box-shadow var(--t-mid), transform var(--t-mid);
}
.branch-card2:hover { box-shadow:var(--sh-3); transform:translateY(-2px); }
.branch-card2--head { border-color:var(--green); border-width:2px; }

.bc2-header { display:flex; align-items:center; gap:.875rem; }
.bc2-header .branch-city  { color:var(--ink); }
.bc2-header .branch-state { color:var(--text-3); }
.bc2-header .branch-icon { flex-shrink:0; }
.bc2-badge {
  display:inline-block; font-size:.65rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--green-deep);
  background:rgba(49,188,146,.1); border:1px solid rgba(49,188,146,.25);
  padding:.15rem .55rem; border-radius:var(--r-f); margin-left:.4rem;
  vertical-align:middle;
}
.bc2-details {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.5rem;
}
.bc2-details li {
  display:flex; align-items:center; gap:.5rem;
  font-size:.875rem; color:var(--text-2);
}
.bc2-details a { color:var(--green-mid); }
.bc2-details a:hover { color:var(--green-deep); }
.bc2-email { word-break:break-all; }
.bc2-fax   { color:var(--text-2); font-size:.875rem; }
.bc2-addr  { color:var(--text-2); font-size:.8125rem; line-height:1.4; }
.bc2-actions {
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding-top:.75rem; border-top:1px solid var(--line);
}

/* ── Branch email modal ───────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.modal-overlay[hidden] { display:none; }
.modal-box {
  background:var(--surface); border-radius:var(--r-xl);
  padding:2rem; max-width:540px; width:100%;
  max-height:90vh; overflow-y:auto;
  position:relative; box-shadow:var(--sh-4);
}
.modal-close {
  position:absolute; top:.875rem; right:.875rem;
  background:none; border:none; cursor:pointer;
  font-size:1.125rem; color:var(--text-3); line-height:1;
  padding:.35rem; border-radius:var(--r-s);
  transition:color var(--t-fast), background var(--t-fast);
}
.modal-close:hover { color:var(--ink); background:var(--surface-2); }

/* ── South Africa link ────────────────────────── */
.tc { text-align:center; }