/* ==========================================================================
   Khanyisa Consulting: stylesheet
   Palette derived from the logo gradient: navy → azure → teal
   ========================================================================== */

:root{
  /* Brand. Deepened from the logo gradient: the earlier tints read as washed
     out on screen, which undercut the credibility this practice needs. */
  --navy-900:#061A30;
  --navy-800:#0A2745;
  --navy-700:#103458;
  --navy-600:#134584;
  --blue-600:#0B4CC0;
  --blue-500:#0A84FF;
  --azure:#0E92D8;
  --azure-text:#0A6E9E;
  --cyan:#17A8C9;
  --teal:#17BFA6;
  /* A restrained gold, used only for small marks of standing. */
  --gold:#B8892B;
  --gold-soft:#F3E7CC;

  /* Neutrals */
  --ink:#061525;
  --body:#33455B;
  --muted:#516479;
  --line:#D6E0EC;
  --line-strong:#A2B7D1;
  /* A tint with actual presence. A card filled with this on a white ground is
     an object; the old 2% tint was indistinguishable from the page. */
  --tint:#E7EFF8;
  --white:#FFFFFF;

  --grad:linear-gradient(120deg,var(--blue-600) 0%,var(--azure) 55%,var(--teal) 100%);
  --grad-soft:linear-gradient(120deg,rgba(11,76,192,.16),rgba(23,191,166,.16));

  --shadow-sm:0 1px 2px rgba(6,26,48,.08),0 4px 12px rgba(6,26,48,.07);
  --shadow-md:0 14px 34px rgba(6,26,48,.15);
  --shadow-lg:0 30px 72px rgba(6,26,48,.24);

  --r-sm:11px;
  --r:18px;
  --r-lg:26px;

  --wrap:1180px;
  --header-h:78px;

  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;

  --ease:cubic-bezier(.22,.85,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}

body{
  font-family:var(--font-body);
  color:var(--body);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{color:var(--ink);line-height:1.14;letter-spacing:-.022em;font-weight:800}
/* Headlines are set in the serif; smaller UI headings stay in the sans so the
   two never compete inside a card. */
h1,h2,.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.08;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5.4vw,4.15rem)}
h2{font-size:clamp(1.95rem,3.6vw,2.95rem)}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}

.grad{
  background:linear-gradient(118deg,var(--blue-600),var(--azure) 92%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.page-hero .grad,
.section-dark .grad,
.cta-band .grad{background-image:linear-gradient(118deg,var(--azure),var(--teal) 92%)}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,860px)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy-800);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--azure-text);outline-offset:3px;border-radius:4px}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.7rem;
  border:0;border-radius:100px;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .2s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(122deg,var(--blue-600),var(--azure) 130%);color:#fff;
  box-shadow:0 10px 24px rgba(11,76,192,.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(11,76,192,.4)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(6,26,48,.16);
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--azure);color:var(--navy-600);transform:translateY(-2px)}
.btn-ghost svg{transition:transform .28s var(--ease)}
.btn-ghost:hover svg{transform:translateX(4px)}

/* Home-page outline actions: preserve the former hover state at rest. */
.btn-home-outline{
  color:var(--navy-600);
  box-shadow:inset 0 0 0 1.5px var(--azure);
  transform:translateY(-2px);
}
.btn-home-outline svg{transform:translateX(4px)}
.btn-home-outline:hover{
  color:var(--navy-700);
  background:var(--grad-soft);
  box-shadow:inset 0 0 0 1.5px var(--azure),0 12px 28px rgba(14,146,216,.2);
  transform:translateY(-5px);
}
.btn-home-outline:hover svg{transform:translateX(8px)}

.btn-sm{padding:.65rem 1.25rem;font-size:.88rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,0);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 rgba(6,26,48,.07),0 6px 24px rgba(6,26,48,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:min(100% - 2.5rem,var(--wrap))}

.brand{display:flex;align-items:center;gap:.7rem}
.brand img{width:40px;height:40px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{
  font-size:1.06rem;font-weight:800;letter-spacing:.14em;color:var(--navy-600);
}
.brand-text em{
  font-style:normal;font-size:.6rem;font-weight:600;letter-spacing:.4615em;
  color:var(--azure);margin-top:.28rem;
}

.nav{display:flex;align-items:center;gap:2rem}
.nav .nav-link{
  display:inline-flex;align-items:center;
  font-size:.94rem;font-weight:600;color:var(--ink);position:relative;padding:.35rem 0;
  transition:color .2s;
}
.nav .nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--grad);border-radius:2px;
  transform:scaleX(0);transform-origin:right;transition:transform .32s var(--ease);
}
.nav .nav-link:hover{color:var(--navy-600)}
.nav .nav-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Services mega-menu ----------
   Opened by hover and by keyboard focus, with no JavaScript: the panel lives
   inside .nav-item, so :focus-within keeps it open while a link inside has
   focus. On narrow screens it flattens into a plain sub-list. */
.nav-item{position:relative;display:flex;align-items:center}
.nav-caret{
  width:11px;height:11px;margin-left:.35rem;opacity:.55;
  transition:transform .26s var(--ease),opacity .2s;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret{transform:rotate(180deg);opacity:1}

.nav-menu{
  position:absolute;top:100%;left:50%;
  width:min(94vw,640px);
  padding-top:1.15rem;
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
  z-index:120;
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%)}

.nav-menu-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:.1rem;
  padding:.8rem;
  background:#fff;
  border:1.5px solid var(--line-strong);border-radius:var(--r);
  box-shadow:var(--shadow-lg);
}
.nav-menu-link{
  display:flex;align-items:flex-start;gap:.8rem;
  padding:.7rem .75rem;border-radius:var(--r-sm);
  transition:background .2s;
}
.nav-menu-link:hover{background:var(--tint)}
.nav-menu-ico{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--grad-soft);color:var(--navy-600);
  transition:background .24s var(--ease),color .24s var(--ease);
}
.nav-menu-ico svg{width:17px;height:17px}
.nav-menu-link:hover .nav-menu-ico{background:var(--grad);color:#fff}
.nav-menu-link strong{display:block;font-size:.9rem;font-weight:700;color:var(--ink)}
.nav-menu-link small{display:block;font-size:.78rem;color:var(--muted);line-height:1.45;margin-top:.1rem}
.nav-menu-all{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.45rem;padding:.85rem 1.05rem;border-radius:var(--r-sm);
  background:var(--navy-900);color:#fff;
  font-size:.88rem;font-weight:700;
  transition:background .24s var(--ease)}
.nav-menu-all:hover{background:var(--blue-600)}
.nav-menu-all svg{width:15px;height:15px;transition:transform .26s var(--ease)}
.nav-menu-all:hover svg{transform:translateX(4px)}

.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;
}
.burger span{
  display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span + span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:calc(var(--header-h) + 5.5rem) 0 6rem;
  overflow:hidden;
  background:linear-gradient(180deg,#F3F8FD 0%,#FFFFFF 78%);
}
.hero-bg{position:absolute;inset:0;pointer-events:none}

/* Background photography changes independently of the hero copy and contact card. */
.hero-with-carousel{background:var(--navy-900);isolation:isolate}
.hero-carousel{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transform:scale(1.05);
  transition:opacity 1s ease-in-out,transform 1s ease-in-out;
  filter:saturate(1.02) contrast(1.04);
}
/* The visible slide fades in and slowly pushes in: a quiet Ken Burns drift that
   keeps the hero alive between crossfades. Restarts each time JS re-activates a
   slide, and is neutralised by the reduced-motion rule at the foot of the file. */
.hero-slide.is-active{opacity:1;animation:heroZoom 6.5s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1.16)}}
/* Two scrims: the left keeps the copy legible, the right edge takes a navy
   wash so the photograph resolves into the brand instead of floating on it. */
.hero-carousel::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 96% at 6% 26%,rgba(8,48,122,.5),transparent 64%),
    linear-gradient(101deg,rgba(6,26,48,.93) 0%,rgba(6,26,48,.86) 34%,rgba(6,26,48,.68) 58%,rgba(6,26,48,.52) 82%,rgba(6,26,48,.46) 100%),
    linear-gradient(180deg,rgba(6,26,48,.62) 0%,transparent 26%,rgba(6,26,48,.42) 100%);
}
/* Below 1000px the hero stacks, so the copy spans the full width and the
   horizontal scrim no longer has a clear side to hide behind. It becomes a
   vertical veil instead: light enough that the photograph is plainly there,
   heavy enough that navy text on it still clears contrast comfortably. */
@media(max-width:1000px){
  .hero-carousel::after{
    background:
      radial-gradient(ellipse 130% 52% at 24% 6%,rgba(8,48,122,.24),transparent 58%),
      linear-gradient(180deg,rgba(6,26,48,.7) 0%,rgba(6,26,48,.6) 40%,rgba(6,26,48,.46) 72%,rgba(6,26,48,.38) 100%);
  }
}
@media(max-width:600px){
  .hero-slide{object-position:62% center}
}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(11,76,192,.5),transparent 68%);top:-160px;right:-120px;animation:float 17s ease-in-out infinite}
.orb-2{width:420px;height:420px;background:radial-gradient(circle,rgba(23,191,166,.48),transparent 68%);top:180px;right:180px;animation:float 21s ease-in-out infinite reverse}
.orb-3{width:380px;height:380px;background:radial-gradient(circle,rgba(14,146,216,.34),transparent 68%);bottom:-140px;left:-120px;animation:float 19s ease-in-out infinite}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-32px,28px) scale(1.07)}
}
.grid-lines{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(6,26,48,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(6,26,48,.045) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 75%);
}

.hero-inner{
  position:relative;display:grid;grid-template-columns:1.35fr .85fr;gap:4rem;align-items:center;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy-600);
  margin-bottom:1.35rem;
}
.eyebrow .dot{width:26px;height:2px;border-radius:2px;background:var(--grad)}
.eyebrow.light{color:#9FD6F2}
.eyebrow.light .dot{background:linear-gradient(90deg,var(--teal),transparent)}

.hero h1{margin-bottom:1.4rem}

/* ---------- Home hero on the photographic overlay ---------- */
.hero-with-carousel h1{color:#fff}
.hero-with-carousel .grad{background-image:linear-gradient(118deg,var(--azure),var(--teal) 92%)}
.hero-with-carousel .lede{color:#C6D9EB}
.hero-with-carousel .eyebrow{color:#8AD2F0}
.hero-with-carousel .eyebrow .dot{background:linear-gradient(90deg,var(--teal),transparent)}
.hero-with-carousel .hero-points li{color:#E3EEF8}
.hero-with-carousel .hero-points svg{color:var(--teal)}
.hero-with-carousel .btn-home-outline{
  color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);
  background:rgba(255,255,255,.06);
}
.hero-with-carousel .btn-home-outline:hover{
  color:#fff;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.68),0 14px 30px rgba(6,26,48,.34);
}
.hero-with-carousel .hero-card{border-color:rgba(255,255,255,.14)}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--body);max-width:33em;line-height:1.6}

.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin:2.2rem 0 2rem}

.hero-points{display:flex;flex-wrap:wrap;gap:.6rem 1.9rem}
.hero-points li{
  display:flex;align-items:center;gap:.5rem;
  font-size:.9rem;font-weight:600;color:var(--ink);
}
.hero-points svg{width:15px;height:15px;color:var(--teal);flex-shrink:0}

/* Hero contact card */
.hero-card{
  background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  border:1.5px solid var(--line-strong);
  overflow:hidden;
}
.hero-card-head{
  display:flex;align-items:center;gap:.6rem;
  padding:1.25rem 1.4rem;
  background:var(--navy-900);color:#fff;
  font-size:.9rem;font-weight:700;letter-spacing:-.01em;
}
/* The headset badge marks this as a line to a person, and carries the live
   pulse the bare dot used to. The @keyframes below is shared with the contact
   page's open/closed status dot, so it stays. */
.head-ico{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(23,191,166,.16);
  color:var(--teal);
  box-shadow:0 0 0 0 rgba(23,191,166,.55);
  animation:pulse 2.4s infinite;
}
.head-ico svg{width:17px;height:17px}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(23,191,166,0)}
  100%{box-shadow:0 0 0 0 rgba(23,191,166,0)}
}
.hero-card-body{padding:.5rem}
.hcard-row{
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem .95rem;border-radius:var(--r-sm);
  transition:background .22s;
}
.hcard-row:hover{background:var(--tint)}
.hcard-ico{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--navy-900);color:#fff;
}
.hcard-ico svg{width:19px;height:19px}
.hcard-ico.wa{background:#25D366;color:#fff}
.hcard-row span span,.hcard-row > span:last-child{display:block}
.hcard-row strong{display:block;font-size:.9rem;color:var(--ink);font-weight:700}
.hcard-row small{display:block;font-size:.82rem;color:var(--muted)}
.hero-card-foot{
  padding:.85rem 1.4rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);background:var(--tint);
}

/* ---------- Business systems strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--tint);padding:3rem 0 2.5rem}
.strip-inner{display:block}
.strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem}
.strip-head .eyebrow{margin-bottom:.75rem}
.strip-head h2{max-width:16ch;font-size:clamp(1.5rem,2.2vw,2.05rem)}
.strip-head > p{max-width:38ch;font-size:.9rem;line-height:1.65;color:var(--body)}
.strip-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;margin-top:2rem}
.strip-list .authority-mark{
  min-width:0;min-height:134px;padding:1rem .7rem;
  border:1.5px solid var(--line-strong);border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  text-align:center;background:#fff;box-shadow:var(--shadow-sm);color:var(--ink);
  transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);
}
.authority-logo{
  width:100%;height:56px;display:flex;align-items:center;justify-content:center;
  opacity:.94;
  transition:opacity .3s var(--ease);
}
.authority-logo img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}
.authority-mark small{display:block;font-size:.68rem;line-height:1.3;color:var(--muted)}
.strip-list .authority-mark:hover{
  border-color:rgba(11,76,192,.55);box-shadow:var(--shadow-md);transform:translateY(-4px);
}
.strip-list .authority-mark:hover .authority-logo{opacity:1}
@media (prefers-reduced-motion:reduce){
  .authority-logo{filter:none;opacity:1}
}
.strip-pitch{
  margin:1.6rem auto 0;max-width:760px;text-align:center;
  font-size:.95rem;line-height:1.7;color:var(--body);
}
.strip-pitch strong{color:var(--ink);font-weight:700}
.strip-pitch-link{
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  margin-left:.15rem;font-weight:700;color:var(--blue-600,#0b4cc0);
  text-decoration:none;border-bottom:1.5px solid transparent;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.strip-pitch-link svg{transition:transform .28s var(--ease)}
.strip-pitch-link:hover{border-bottom-color:currentColor}
.strip-pitch-link:hover svg{transform:translateX(3px)}
.strip-disclaimer{
  margin:.85rem auto 0;max-width:760px;text-align:center;
  font-size:.7rem;line-height:1.5;color:var(--muted);opacity:.8;
}

/* ---------- Sections ---------- */
.section{padding:6.5rem 0}
.section-tint{background:var(--tint)}
.section-dark{
  background:
    radial-gradient(ellipse 62% 80% at 6% 0%,rgba(11,76,192,.34),transparent 60%),
    radial-gradient(ellipse 52% 72% at 96% 100%,rgba(23,191,166,.15),transparent 62%),
    var(--navy-900);
  color:#CFDEEC;
}
.section-dark h2,.section-dark h3{color:#fff}

.section-head{max-width:680px;margin-bottom:3.6rem}
.section-head h2{margin-bottom:1rem}
.section-sub{font-size:1.03rem;color:var(--body);max-width:62ch}
.section-head-center .section-sub{margin-inline:auto}
.section-dark .section-sub{color:#AFC7DB}

/* ---------- Filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.4rem}
.chip{
  padding:.6rem 1.15rem;border-radius:100px;
  border:1.5px solid var(--line-strong);background:#fff;
  font-size:.87rem;font-weight:600;color:var(--body);
  cursor:pointer;
  transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--azure-text);color:var(--navy-600);transform:translateY(-1px)}
.chip.is-active{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(14,146,216,.28);
}

/* ---------- Cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:1.35rem;
}
.card{
  position:relative;
  padding:1.9rem 1.7rem;
  background:var(--tint);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .3s;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(11,76,192,.55)}
.card:hover::before{transform:scaleX(1)}
.card-ico{
  width:50px;height:50px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--navy-900);color:#fff;
  margin-bottom:1.15rem;
  transition:background .34s var(--ease),color .34s var(--ease),transform .34s var(--ease);
}
.card-ico svg{width:23px;height:23px}
.card:hover .card-ico{background:var(--grad);color:#fff;transform:scale(1.06) rotate(-4deg)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.92rem;color:var(--body);line-height:1.6}

.card.is-hidden{display:none}
.cards-empty{text-align:center;padding:3rem 0;color:var(--muted)}

/* ---------- Process steps ---------- */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  counter-reset:step;
}
.step{
  position:relative;
  padding:2rem 1.5rem;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--r);
  transition:background .3s,border-color .3s,transform .34s var(--ease);
}
.step:hover{background:rgba(255,255,255,.12);border-color:rgba(23,191,166,.55);transform:translateY(-5px)}
.step-num{
  display:flex;align-items:center;gap:.7rem;width:100%;
  font-family:var(--font-display);
  font-size:2.4rem;font-weight:600;letter-spacing:-.02em;line-height:1;
  color:var(--teal);
  margin-bottom:.85rem;
}
/* Each number is a lit station on the rail, breathing gently. */
.step-num::before{
  content:"";flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--teal);
  animation:stepNode 2.8s ease-in-out infinite;
}
/* The rail continues out of the number and runs to the edge of the card, where
   the gap connector picks it up. On the last card it simply fades out, which
   reads as the end of the process. */
.step-num::after{
  content:"";flex:1;height:2px;border-radius:2px;
  margin-left:.15rem;margin-right:-1.5rem;
  background:linear-gradient(90deg,rgba(23,191,166,.5),rgba(23,191,166,.12));
}
@keyframes stepNode{
  0%,100%{box-shadow:0 0 0 3px rgba(23,191,166,.18),0 0 10px 1px rgba(23,191,166,.45)}
  50%{box-shadow:0 0 0 7px rgba(23,191,166,0),0 0 18px 4px rgba(23,191,166,.7)}
}
.step h3{margin-bottom:.5rem;font-size:1.06rem}
.step p{font-size:.9rem;color:#AFC7DB;line-height:1.6}

/* The four cards are stations on one rail rather than four separate tiles.
   Between each pair sits a gradient track, and a luminous signal runs along it
   toward the next step, so the eye is pulled 01 -> 02 -> 03 -> 04. The rail sits
   on the same axis as the node dots and the numerals. Horizontal on desktop,
   vertical once the cards stack. All motion is neutralised by the global
   reduced-motion rule at the foot of the file, leaving a clean static rail. */
.step{--rail-axis:3.2rem;--rail-node:1.78rem}
.step:not(:last-child)::before,
.step:not(:last-child)::after{content:"";position:absolute;z-index:1;pointer-events:none}

/* the track */
.step:not(:last-child)::after{
  top:var(--rail-axis);left:calc(100% + .05rem);width:1.55rem;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(23,191,166,.15),rgba(23,191,166,.6));
}
/* the signal travelling along it */
.step:not(:last-child)::before{
  top:calc(var(--rail-axis) - 2.5px);left:calc(100% + .05rem);
  width:7px;height:7px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 10px 2px rgba(23,191,166,.75);
  animation:stepSignal 2.2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes stepSignal{
  0%{transform:translateX(0);opacity:0}
  15%{opacity:1}
  75%{opacity:1}
  100%{transform:translateX(1.5rem);opacity:0}
}
@keyframes stepSignalV{
  0%{transform:translateY(0);opacity:0}
  15%{opacity:1}
  75%{opacity:1}
  100%{transform:translateY(1.5rem);opacity:0}
}
/* Give each connector its own offset so the signals travel as a relay rather
   than firing in unison. */
.step:nth-child(2)::before{animation-delay:.55s}
.step:nth-child(3)::before{animation-delay:1.1s}

/* Stacked: the same rail, turned vertical and dropped under the node dots. */
@media (max-width:860px){
  .steps{grid-template-columns:1fr}
  .step-num{width:auto}
  .step-num::after{display:none}
  .step:not(:last-child)::after{
    top:100%;left:var(--rail-node);width:2px;height:1.6rem;
    background:linear-gradient(180deg,rgba(23,191,166,.6),rgba(23,191,166,.15));
  }
  .step:not(:last-child)::before{
    top:calc(100% + .05rem);left:calc(var(--rail-node) - 2.5px);
    animation-name:stepSignalV;
  }
}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4.5rem;align-items:center}
.about-copy h2{margin-bottom:1.2rem}
.about-copy p{margin-bottom:1.05rem;font-size:1rem}
.about-copy .btn{margin-top:1rem}
.about-copy .ticks{margin-top:1.75rem}
.about-copy .ticks + .btn{margin-top:1.9rem}

/* ---------- Proof panel ----------
   The About page's figures and commitments, as one navy object beside the copy.
   The home page shows the same content differently: a picture beside the copy
   and a full-width .figure-band underneath. Two treatments on purpose, so the
   two pages do not read as the same page twice. */
.proof{
  background:
    radial-gradient(ellipse 84% 92% at 10% 0%,rgba(11,76,192,.52),transparent 62%),
    radial-gradient(ellipse 60% 70% at 100% 100%,rgba(23,191,166,.16),transparent 64%),
    var(--navy-900);
  border-radius:var(--r-lg);
  padding:2.4rem 2.25rem;
  box-shadow:var(--shadow-lg);
}
.proof-figures{
  display:grid;grid-template-columns:1fr 1fr;gap:1.9rem 1.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.proof-figures strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.2rem,3.4vw,2.75rem);font-weight:700;
  letter-spacing:-.02em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.proof-figures span{
  display:block;margin-top:.45rem;
  font-size:.82rem;font-weight:600;color:#8FB1CE;
}
.proof-list{margin-top:1.9rem;display:grid;gap:.15rem}
.proof-list li{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:.72rem 0;
  font-size:.95rem;line-height:1.5;font-weight:500;color:#DEEAF5;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.proof-list li:last-child{border-bottom:0}
.proof-list li::before{
  content:"";flex-shrink:0;width:19px;height:19px;margin-top:.1rem;
  border-radius:50%;background:rgba(23,191,166,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317BFA6' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}

.ticks li{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.7rem 0;border-bottom:1px solid var(--line);
  font-size:.94rem;color:var(--ink);font-weight:500;
}
.ticks li:last-child{border-bottom:0}
.ticks li::before{
  content:"";flex-shrink:0;width:20px;height:20px;margin-top:.15rem;border-radius:50%;
  background:var(--grad-soft) ;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E92D8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}

/* ---------- Who you work with ---------- */
.people-grid{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:4.5rem;align-items:center;
}
.people-visual{
  position:relative;isolation:isolate;
  aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--navy-800);
}
.people-visual img{
  width:100%;height:100%;object-fit:cover;object-position:center 38%;
  filter:saturate(.9) contrast(1.05);
}
.people-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(11,76,192,.14),transparent 46%),
             linear-gradient(180deg,transparent 52%,rgba(6,26,48,.55));
}
.people-copy h2{margin-bottom:1.2rem}
.people-copy p{margin-bottom:1.05rem;font-size:1rem;max-width:52ch}
.people-pledge{margin:2rem 0 0;display:grid;gap:.1rem}
.people-pledge li{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
}
.people-pledge li:last-child{border-bottom:0}
.people-pledge .pledge-num{
  flex-shrink:0;
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  color:var(--gold);line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.people-pledge strong{display:block;font-size:.98rem;color:var(--ink);font-weight:700}
.people-pledge span{display:block;font-size:.92rem;color:var(--body);margin-top:.2rem}

@media (max-width:900px){
  .people-grid{grid-template-columns:1fr;gap:2.5rem}
  .people-visual{aspect-ratio:4/3;max-width:560px}
}

/* ---------- "Why Khanyisa": picture beside the copy, figures underneath ---------- */
.about-visual{
  position:relative;isolation:isolate;
  aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--navy-800);
}
.about-visual img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:saturate(.96) contrast(1.03);
}
/* A quiet navy tie-in at the edges so the photograph belongs to the palette. */
.about-visual::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(210deg,rgba(11,76,192,.16),transparent 44%),
    linear-gradient(180deg,transparent 62%,rgba(6,26,48,.38));
}

/* Beside a copy column the picture fills the column rather than floating
   short of it, which left a gap under the image at desktop widths. */
.about-grid-media{align-items:stretch}
.about-grid-media .about-visual{aspect-ratio:auto;min-height:360px}

/* The figures read as a single statement across the foot of the section. */
.figure-band{
  margin-top:4.5rem;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:
    radial-gradient(ellipse 60% 130% at 8% 0%,rgba(11,76,192,.52),transparent 62%),
    radial-gradient(ellipse 50% 120% at 96% 100%,rgba(23,191,166,.16),transparent 64%),
    var(--navy-900);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.figure-band > div{
  padding:2.4rem 1.75rem;
  border-left:1px solid rgba(255,255,255,.13);
}
.figure-band > div:first-child{border-left:0}
.figure-band strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.3rem,3.6vw,3rem);font-weight:700;
  letter-spacing:-.022em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.figure-band span{
  display:block;margin-top:.5rem;
  font-size:.85rem;font-weight:600;color:#8FB1CE;
}

@media (max-width:900px){
  .figure-band{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:3rem}
  .figure-band > div{padding:2rem 1.5rem}
  .figure-band > div:nth-child(odd){border-left:0}
  .figure-band > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}
}
@media (max-width:520px){
  .figure-band{grid-template-columns:minmax(0,1fr)}
  .figure-band > div{border-left:0;padding:1.6rem 1.4rem}
  .figure-band > div + div{border-top:1px solid rgba(255,255,255,.13)}
}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:.85rem}
.faq details{
  background:var(--tint);border:1.5px solid var(--line-strong);border-radius:var(--r);
  overflow:hidden;transition:box-shadow .3s,border-color .3s;
}
.faq details[open]{box-shadow:var(--shadow-md);border-color:rgba(14,146,216,.35)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.5rem;cursor:pointer;list-style:none;
  font-weight:700;color:var(--ink);font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex-shrink:0;width:22px;height:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E92D8' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--navy-600)}
.faq-body{padding:0 1.5rem 1.35rem;font-size:.95rem;color:var(--body)}

/* ---------- Contact ---------- */
.section-contact{
  background:
    radial-gradient(ellipse 70% 90% at 12% 10%,rgba(11,76,192,.35),transparent 60%),
    radial-gradient(ellipse 60% 80% at 92% 85%,rgba(23,191,166,.28),transparent 62%),
    var(--navy-900);
  color:#CFDEEC;
}
.section-contact h2,.section-contact h3{color:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact-copy h2{margin-bottom:1rem}
.contact-copy .section-sub{color:#AFC7DB;margin-bottom:2.4rem}

.contact-list{display:flex;flex-direction:column;gap:1.4rem}
.contact-list li{display:flex;gap:1rem;align-items:flex-start}
.c-ico{
  flex-shrink:0;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);
  color:var(--teal);
}
.c-ico svg{width:19px;height:19px}
.contact-list strong{display:block;color:#fff;font-size:.94rem;margin-bottom:.15rem}
.contact-list span{font-size:.92rem;color:#AFC7DB;line-height:1.55}
.contact-list a{border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.contact-list a:hover{color:var(--teal);border-color:var(--teal)}

/* Form */
.contact-form{
  background:#fff;border-radius:var(--r-lg);padding:2.2rem;
  box-shadow:var(--shadow-lg);
}
.contact-form h3{font-size:1.35rem;margin-bottom:1.5rem;color:var(--ink)}
.field{margin-bottom:1.1rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{
  display:block;font-size:.83rem;font-weight:700;color:var(--ink);margin-bottom:.4rem;
}
.req{color:var(--azure-text)}
.field input,.field select,.field textarea{
  width:100%;
  padding:.8rem 1rem;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--tint);
  font-size:.94rem;color:var(--ink);
  transition:border-color .22s,background .22s,box-shadow .22s;
}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--azure-text);
  box-shadow:0 0 0 4px rgba(14,146,216,.13);
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6D80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;
  padding-right:2.6rem;
}
.field.has-error input,.field.has-error textarea{border-color:#E0524A;background:#FDF3F2}
.err{display:block;min-height:1rem;font-size:.78rem;color:#D8453B;margin-top:.3rem}

.bot-field{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.privacy-check{
  display:grid;grid-template-columns:20px 1fr;column-gap:.7rem;align-items:start;
  margin:1.25rem 0;
}
.privacy-check input[type="checkbox"]{
  appearance:auto;width:18px;height:18px;padding:0;margin:.15rem 0 0;
  accent-color:var(--navy-600);background:#fff;border:1px solid var(--line);
}
.privacy-check label{margin:0;font-size:.82rem;font-weight:500;line-height:1.55;color:var(--body)}
.privacy-check label a{color:var(--navy-600);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.privacy-check .err{grid-column:2}
.privacy-check.has-error input[type="checkbox"]{outline:2px solid #D8453B;outline-offset:2px}

.form-note{font-size:.85rem;color:var(--muted);text-align:center;margin-top:1rem}
.form-note a{color:var(--navy-600);font-weight:700}
.form-note a:hover{color:var(--azure-text)}

.form-status{
  margin-top:.9rem;font-size:.88rem;font-weight:600;text-align:center;
  padding:0;max-height:0;overflow:hidden;transition:max-height .3s var(--ease),padding .3s;
}
.form-status.show{max-height:120px;padding:.75rem 1rem;border-radius:var(--r-sm)}
.form-status.ok{background:rgba(23,191,166,.14);color:#0E7A6B}
.form-status.bad{background:#FDF3F2;color:#C4392F}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-900);color:#8FA9C0;padding:4.5rem 0 0;
  border-top:3px solid var(--gold);
}
.footer-grid{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:3rem;
  padding-bottom:3rem;
}
.f-brand .brand{margin-bottom:1.1rem}
.f-brand .brand-text strong{color:#fff}
.f-brand .brand-text em{color:var(--teal)}
.f-brand p{font-size:.9rem;line-height:1.65;max-width:30ch}
.f-col h4{
  color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:1.1rem;
}
.f-col ul{display:flex;flex-direction:column;gap:.6rem}
.f-col li{font-size:.9rem;line-height:1.5}
.f-col a{transition:color .2s}
.f-col a:hover{color:var(--teal)}
.f-addr{color:#7995AE}

.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding:1.5rem 0;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.82rem;color:#8FA9C0;
}
.footer-bottom a{color:#CFDEEC;text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:var(--teal)}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:scale(1.09) translateY(-2px);box-shadow:0 16px 34px rgba(37,211,102,.5)}

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

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .about-grid-media .about-visual{aspect-ratio:16/10;min-height:0}
  .hero-inner{grid-template-columns:1fr;gap:3rem}
  .hero-card{max-width:460px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:3rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}

@media (max-width:820px){
  :root{--header-h:70px}
  .burger{display:block}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    /* Fully opaque: this panel now opens over a dark photographic hero, where
       even a few percent of bleed-through makes the links hard to read. */
    background:#fff;
    padding:1rem 1.25rem 1.75rem;
    box-shadow:0 20px 40px rgba(6,26,48,.14);
    border-top:1px solid var(--line);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav .nav-link{display:flex;padding:.95rem .25rem;border-bottom:1px solid var(--line);font-size:1rem}
  .nav .nav-link::after{display:none}
  .nav-cta{margin-top:1.1rem}

  /* The mega-menu flattens into a plain indented sub-list: no hover to rely on,
     and no second tap needed before the category is reachable. */
  .nav-item{display:block}
  .nav-caret{display:none}
  .nav-menu{
    position:static;width:auto;padding-top:0;
    opacity:1;visibility:visible;transform:none;
  }
  .nav-menu-inner{
    display:block;padding:.2rem 0 .6rem .9rem;
    background:none;border:0;border-radius:0;box-shadow:none;
    border-left:2px solid var(--line);margin-left:.25rem;
  }
  .nav-menu-link{padding:.6rem .4rem}
  .nav-menu-ico,.nav-menu-link small{display:none}
  .nav-menu-link strong{font-size:.94rem;font-weight:600;color:var(--body)}
  .nav-menu-all{
    margin-top:.5rem;padding:.6rem .9rem;
    background:var(--tint);color:var(--navy-600);font-size:.86rem;
  }
  .nav-menu-all:hover{background:var(--tint)}
  .site-header.is-stuck,.nav.is-open ~ .site-header{background:rgba(255,255,255,.92)}

  .hero{padding-top:calc(var(--header-h) + 3.25rem);padding-bottom:4rem}
  .section{padding:4.5rem 0}
  .strip-head{display:block}
  .strip-head h2{max-width:none}
  .strip-head > p{margin-top:.8rem;max-width:none}
  .strip-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-form{padding:1.6rem}
  .row{grid-template-columns:1fr}
}

@media (max-width:560px){
  .wrap,.wrap-narrow{width:min(100% - 1.75rem,var(--wrap))}
  .hero-points{gap:.55rem 1.2rem}
  .hero-actions .btn{flex:1 1 100%}
  .strip{padding:2.25rem 0 1.75rem}
  .strip-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .strip-list .authority-mark{min-height:122px;padding:.9rem .55rem}
  .strip-head h2{font-size:1.35rem;max-width:none}
  .strip-head > p{font-size:.85rem}
  .cards{grid-template-columns:1fr}
  .proof{padding:1.75rem 1.4rem}
  .proof-figures{gap:1.5rem 1rem}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:left}
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  .wa-float svg{width:27px;height:27px}
}

/* Touch screens cannot reveal hover-only card details, so show that state at rest. */
@media (max-width:768px),(hover:none),(pointer:coarse){
  a.cat-card,
  .card{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:rgba(11,76,192,.55);
  }
  .js .reveal.cat-card.in,
  .js .reveal.card.in{transform:translateY(-6px)}
  a.cat-card::before,
  .card::before{transform:scaleX(1)}
  a.cat-card .card-ico,
  .card .card-ico{
    background:var(--grad);
    color:#fff;
    transform:scale(1.06) rotate(-4deg);
  }
  a.cat-card .cat-link svg,
  .card .card-open svg{transform:translateX(4px)}
  .card .card-open{color:var(--azure-text)}

  /* A small press response replaces the missing hover interaction. */
  a.cat-card:active,
  .card:active{
    transform:translateY(-2px) scale(.99);
    box-shadow:var(--shadow-sm);
  }
  .js .reveal.cat-card.in:active,
  .js .reveal.card.in:active{transform:translateY(-2px) scale(.99)}
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.wa-float,.hero-bg,.filters,.contact-form{display:none}
  body{color:#000}
  .section{padding:1.5rem 0}
}

/* ==========================================================================
   Multi-page components
   ========================================================================== */

/* ---------- Active nav item ---------- */
.nav .nav-link[aria-current="page"]{color:var(--navy-600)}
.nav .nav-link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* ---------- Inner-page hero ---------- */
.page-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:calc(var(--header-h) + 4.5rem) 0 4.5rem;
  color:#AFC7DB;
  background:
    radial-gradient(ellipse 62% 80% at 6% 0%,rgba(11,76,192,.44),transparent 62%),
    radial-gradient(ellipse 55% 78% at 96% 100%,rgba(23,191,166,.24),transparent 64%),
    var(--navy-900);
}
/* ---------- Photographic page hero ----------
   The same overlay recipe as the home hero, so every hero on the site is lit
   the same way and only the photograph changes. Each page sets --hero-pos to
   frame its own image. */
.page-hero.has-photo{
  background:var(--navy-900);
  --hero-pos:center;
}
.hero-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-pos);
  filter:saturate(1.02) contrast(1.04);
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 96% at 6% 26%,rgba(11,76,192,.46),transparent 64%),
    linear-gradient(101deg,rgba(6,26,48,.9) 0%,rgba(6,26,48,.8) 34%,rgba(6,26,48,.58) 58%,rgba(6,26,48,.42) 82%,rgba(6,26,48,.36) 100%),
    linear-gradient(180deg,rgba(6,26,48,.5) 0%,transparent 32%,rgba(6,26,48,.3) 100%);
}
/* The beam and the orbs were standing in for a picture. With one present they
   are just noise, so they only run on the heroes that have no photograph. */
.page-hero.has-photo::after{display:none}

@media (max-width:1000px){
  .hero-photo::after{
    background:
      radial-gradient(ellipse 120% 60% at 20% 12%,rgba(11,76,192,.46),transparent 66%),
      linear-gradient(180deg,rgba(6,26,48,.78) 0%,rgba(6,26,48,.88) 34%,rgba(6,26,48,.82) 66%,rgba(6,26,48,.66) 100%);
  }
}

.page-hero h1{
  color:#fff;
  font-size:clamp(2.1rem,4.4vw,3.35rem);
  margin-bottom:1rem;
  text-wrap:balance;
}
.page-hero .lede{color:#B8CEE2;margin:0;max-width:34em}
.page-hero .grid-lines{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  mask-image:radial-gradient(ellipse 75% 70% at 30% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 30% 40%,#000,transparent 78%);
}
.page-hero .orb-2{
  width:460px;height:460px;top:-150px;right:-60px;opacity:.4;
  background:radial-gradient(circle,rgba(14,146,216,.6),transparent 68%);
}

/* A slow beam of light sweeping the ground: the "khanyisa" motif, used quietly */
.page-hero::after{
  content:"";position:absolute;z-index:-1;inset:-40% -10% auto -10%;height:150%;
  background:conic-gradient(from 210deg at 50% 0%,
    transparent 0deg,rgba(23,191,166,.13) 28deg,transparent 62deg,
    rgba(11,76,192,.16) 96deg,transparent 130deg);
  animation:beam 26s linear infinite;
  pointer-events:none;
}
@keyframes beam{to{transform:rotate(360deg)}}

.page-hero-inner{
  position:relative;
  display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center;
}
.page-hero-inner.is-single{grid-template-columns:minmax(0,760px)}

.crumbs{
  display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.78rem;font-weight:600;
  color:#8FAAC4;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  padding:.4rem .9rem;border-radius:100px;
  margin-bottom:1.5rem;
}
.crumbs a{color:#CFE4F5}
.crumbs a:hover{color:var(--teal)}
.crumbs span[aria-current]{color:#8FAAC4}

/* ---------- Shared glass panel used by the hero visuals ---------- */
.hero-panel{
  position:relative;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);
  padding:1.25rem;
  box-shadow:0 26px 64px rgba(0,0,0,.32);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.hero-panel-title{
  display:flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#8FAAC4;
  padding:.25rem .5rem 1rem;
}

/* ---------- Services hero: a live legend of the categories ---------- */
.legend-row{
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem .75rem;border-radius:var(--r-sm);
  transition:background .22s,transform .22s var(--ease);
}
.legend-row:hover{background:rgba(255,255,255,.09);transform:translateX(3px)}
.legend-ico{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.09);color:var(--teal);
}
.legend-ico svg{width:17px;height:17px}
.legend-name{flex:1;font-size:.92rem;font-weight:600;color:#EAF3FB}
.legend-count{
  font-size:.82rem;font-weight:800;color:var(--teal);
  font-variant-numeric:tabular-nums;
}

/* ---------- FAQ hero: jump straight to a topic ---------- */
.topic-row{
  display:flex;align-items:center;gap:.8rem;
  padding:.72rem .75rem;border-radius:var(--r-sm);
  transition:background .22s,transform .22s var(--ease);
}
.topic-row:hover{background:rgba(255,255,255,.09);transform:translateX(3px)}
.topic-num{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.09);
  font-size:.76rem;font-weight:800;color:var(--teal);
  font-variant-numeric:tabular-nums;
}
.topic-name{flex:1;font-size:.92rem;font-weight:600;color:#EAF3FB}
.topic-row svg{width:15px;height:15px;color:#7E9BB6;transition:transform .24s var(--ease),color .24s}
.topic-row:hover svg{transform:translateX(3px);color:var(--teal)}

/* ---------- Contact hero: is the office open right now? ---------- */
.status-head{
  display:flex;align-items:center;gap:.6rem;
  padding:.35rem .5rem 1rem;
  font-size:.86rem;font-weight:700;color:#fff;
}
.status-dot{
  width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0;
}
.status-dot.is-open{
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(23,191,166,.7);
  animation:pulse 2.2s infinite;
}
.status-dot.is-closed{background:#F0A93B}
.status-note{
  padding:0 .5rem 1rem;font-size:.86rem;color:#AFC7DB;line-height:1.55;
}
.hours-list{display:flex;flex-direction:column;gap:.1rem;padding:0 .5rem}
.hours-list li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;
  font-size:.86rem;color:#B8CEE2;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hours-list li:last-child{border-bottom:0}
.hours-list li.is-today{color:#fff;font-weight:700}
.hours-list span:last-child{font-variant-numeric:tabular-nums}

/* Header sits on a dark ground on these pages until it becomes sticky */
body.dark-hero .site-header:not(.is-stuck) .brand-text strong{color:#fff}
body.dark-hero .site-header:not(.is-stuck) .brand-text em{color:var(--teal)}
body.dark-hero .site-header:not(.is-stuck) .burger span{background:#fff}
/* Gated on .is-open rather than a width query: the mobile menu panel has its own
   white background, so its links must stay dark whenever it is actually showing. */
body.dark-hero .site-header:not(.is-stuck) .nav:not(.is-open) .nav-link{color:#E6F0F9}
body.dark-hero .site-header:not(.is-stuck) .nav:not(.is-open) .nav-link:hover{color:#fff}
body.dark-hero .site-header:not(.is-stuck) .nav:not(.is-open) .nav-link[aria-current="page"]{color:#fff}

/* Sections that sit directly under a page hero need less top air */
.section-top-tight{padding-top:3.5rem}

/* On a tinted section the fill would match the ground, so cards invert to white.
   The rule is: a card never shares a value with the surface behind it. */
.section-tint .cat-card,
.section-tint .card,
.section-tint .quick-card,
.section-tint .testimonial-card,
.section-tint .faq details{background:#fff}

.section-head-center{margin-inline:auto;text-align:center}
/* This heading is meant to read as one line; the sub-paragraph below it keeps
   its own narrow measure, so widening the header does not stretch it. */
.section-head-wide{max-width:none}
.head-accent{color:var(--blue-500)}
.section-head-center .eyebrow{margin-inline:auto}

/* ---------- Category cards ---------- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.35rem;
}
.cat-grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

.cat-card{
  position:relative;display:flex;flex-direction:column;
  padding:2rem 1.8rem;
  background:var(--tint);border:1.5px solid var(--line-strong);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .3s;
  overflow:hidden;
}
.cat-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
a.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(11,76,192,.55)}
a.cat-card:hover::before{transform:scaleX(1)}
a.cat-card:hover .card-ico{background:var(--grad);color:#fff;transform:scale(1.06) rotate(-4deg)}
.cat-card h3{font-size:1.22rem;margin-bottom:.55rem}
.cat-card p{font-size:.93rem;color:var(--body);line-height:1.6;flex:1}

.cat-count{
  display:inline-block;margin-top:1.1rem;
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy-600);
}
.cat-link{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;
  font-size:.9rem;font-weight:700;color:var(--navy-600);
}
.cat-link svg{transition:transform .28s var(--ease)}
a.cat-card:hover .cat-link svg{transform:translateX(4px)}

/* The "see everything" tile reads as a destination, not a category */
.cat-card-cta{
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%,rgba(11,76,192,.5),transparent 62%),
    var(--navy-900);
  border-color:transparent;
  justify-content:center;
}
.cat-card-cta h3{color:#fff}
.cat-card-cta p{color:#AFC7DB}
.cat-card-cta .cat-link{color:var(--teal)}
a.cat-card-cta:hover{box-shadow:var(--shadow-lg)}
.cat-card-static{cursor:default}

/* ---------- Result count on the services page ---------- */
.result-count{
  font-size:.86rem;font-weight:600;color:var(--muted);
  margin-bottom:1.6rem;
}

/* ---------- FAQ group headings ---------- */
.faq-group-title{
  font-size:1.05rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-600);
  margin:2.75rem 0 1rem;
}
.faq-group-title:first-of-type{margin-top:0}

/* ---------- Testimonials ----------
   A mosaic rather than three equal boxes: one lead card on navy carries the
   strongest quote, the rest sit beside and under it. No portraits, so an
   initials monogram and a gradient quote glyph do the identifying work. */
.testimonial-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;
}
.testimonial-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  margin:0;padding:1.75rem 1.7rem 1.6rem;
  background:var(--tint);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .3s;
}
/* The hairline draws itself in on hover, the same signal the category cards use. */
.testimonial-card::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.testimonial-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-md);
  border-color:rgba(11,76,192,.35);
}
.testimonial-card:hover::after{transform:scaleX(1)}

/* Oversized opening quote, bled off the top-right corner as texture. */
.testimonial-mark{
  position:absolute;top:-1.2rem;right:.9rem;
  font-family:var(--font-display);font-weight:700;
  font-size:6.5rem;line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;opacity:.17;
  pointer-events:none;user-select:none;
}

.testimonial-stars{
  display:inline-flex;gap:2px;margin-bottom:.95rem;color:var(--gold);
}
.testimonial-stars svg{width:15px;height:15px;fill:currentColor}

.testimonial-card blockquote{
  position:relative;margin:0;flex:1;
  font-family:var(--font-display);
  font-size:1.01rem;line-height:1.62;color:var(--body);
}

.testimonial-who{
  display:flex;align-items:center;gap:.8rem;
  width:100%;margin:1.35rem 0 0;padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.testimonial-avatar{
  flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--grad);color:#fff;
  font-size:.82rem;font-weight:800;letter-spacing:.04em;
  box-shadow:0 4px 12px rgba(11,76,192,.28);
}
.testimonial-id{display:flex;flex-direction:column;min-width:0}
.testimonial-who strong{
  font-size:.97rem;color:var(--ink);font-weight:700;line-height:1.3;
}
.testimonial-role{
  font-size:.79rem;color:var(--muted);line-height:1.4;
}

/* Lead card: wider, dark, and set in a larger size so the eye starts here. */
.testimonial-card-lead,
.section-tint .testimonial-card-lead{
  grid-column:span 2;
  background:
    radial-gradient(ellipse 70% 110% at 100% 0%,rgba(11,76,192,.55),transparent 62%),
    var(--navy-900);
  border-color:transparent;
  padding:2.1rem 2rem 1.8rem;
}
.testimonial-card-lead:hover{box-shadow:var(--shadow-lg);border-color:transparent}
.testimonial-card-lead .testimonial-mark{opacity:.3}
.testimonial-card-lead blockquote{font-size:1.28rem;line-height:1.55;color:#E6F0F9}
.testimonial-card-lead .testimonial-who{border-top-color:rgba(255,255,255,.16)}
.testimonial-card-lead .testimonial-who strong{color:#fff}
.testimonial-card-lead .testimonial-role{color:#A8C1D8}

@media (max-width:980px){
  .testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testimonial-card-lead blockquote{font-size:1.16rem}
}
@media (max-width:680px){
  .testimonial-grid{grid-template-columns:1fr;gap:1rem}
  .testimonial-card-lead,
  .section-tint .testimonial-card-lead{grid-column:span 1;padding:1.85rem 1.5rem 1.6rem}
  .testimonial-card-lead blockquote{font-size:1.08rem}
  .testimonial-card{padding:1.6rem 1.4rem 1.5rem}
}

/* ---------- Quick-contact cards ---------- */
.quick-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;
}
.quick-card{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:1.8rem 1.6rem;
  background:var(--tint);border:1.5px solid var(--line-strong);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .3s;
}
.quick-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(14,146,216,.4)}
.quick-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--navy-900);color:#fff;margin-bottom:1.1rem;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.quick-ico svg{width:21px;height:21px}
.quick-ico.wa{background:#25D366;color:#fff}
.quick-card:hover .quick-ico{background:var(--grad);color:#fff}
.quick-card:hover .quick-ico.wa{background:#25D366;color:#fff}
.quick-card strong{font-size:1.02rem;color:var(--ink);font-weight:700}
.quick-card > span{font-size:.94rem;color:var(--navy-600);font-weight:600;margin-top:.15rem;word-break:break-word}
.quick-card em{font-style:normal;font-size:.82rem;color:var(--muted);margin-top:.55rem}

/* ---------- Closing call-to-action band ---------- */
.cta-band{
  background:
    radial-gradient(ellipse 70% 90% at 12% 10%,rgba(11,76,192,.35),transparent 60%),
    radial-gradient(ellipse 60% 80% at 92% 85%,rgba(23,191,166,.28),transparent 62%),
    var(--navy-900);
  color:#CFDEEC;
  padding:4.25rem 0;
}
.cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3vw,2.25rem);margin-bottom:.6rem}
.cta-band p{color:#AFC7DB;font-size:1rem;max-width:52ch}
.cta-band-photo{
  background:
    linear-gradient(90deg,rgba(8,34,61,.92),rgba(8,34,61,.78) 52%,rgba(8,34,61,.58)),
    url("../img/hero-consultation.webp") center 43% / cover no-repeat;
}
.cta-band-photo p{color:#E0EBF5}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap}

.btn-light{
  background:rgba(255,255,255,.1);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26);
}
.btn-light:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .page-hero{padding:calc(var(--header-h) + 2.5rem) 0 2.5rem}
  .section-top-tight{padding-top:2.75rem}
  .cta-band{padding:3.25rem 0}
  .cta-inner{flex-direction:column;align-items:flex-start;gap:1.75rem}
  .faq-group-title{margin-top:2.25rem}
}

@media (max-width:560px){
  .cta-band-photo{
    background-image:linear-gradient(180deg,rgba(8,34,61,.88),rgba(8,34,61,.74)),url("../img/hero-consultation.webp");
    background-position:center,62% center;
  }
  .cat-grid,.cat-grid-3,.quick-grid{grid-template-columns:1fr}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 100%}
}

/* ---------- Inner-page hero: responsive ---------- */
@media (max-width:900px){
  .page-hero-inner{grid-template-columns:1fr;gap:2.75rem}
  .page-hero .lede{max-width:none}
}

@media (max-width:560px){
  .page-hero{padding:calc(var(--header-h) + 2.25rem) 0 2.75rem}
  .hero-panel{padding:1rem}
}

/* ==========================================================================
   Service detail
   ========================================================================== */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- "View details" affordance on each card ---------- */
.card{display:flex;flex-direction:column}
.card p{flex:1}

.card-open{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:1.15rem;padding:0;
  background:none;border:0;cursor:pointer;
  font-size:.87rem;font-weight:700;color:var(--navy-600);
  transition:color .22s,gap .22s var(--ease);
}
.card-open svg{width:15px;height:15px;transition:transform .26s var(--ease)}
.card:hover .card-open{color:var(--azure-text)}
.card:hover .card-open svg{transform:translateX(4px)}

/* Stretch the button over the whole card so the card itself is clickable,
   while the accessible control stays a single real <button>. */
.card-open::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card:focus-within{border-color:rgba(11,76,192,.55);box-shadow:var(--shadow-md)}
.card-open:focus-visible{outline:none}
.card:has(.card-open:focus-visible){outline:3px solid var(--azure-text);outline-offset:3px}

/* ---------- Dialog ---------- */
.modal{
  width:min(100% - 2rem,720px);
  max-height:min(88vh,900px);
  padding:0;border:0;border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:0 40px 90px rgba(6,26,48,.4);
  overflow:auto;
  overscroll-behavior:contain;
}
.modal::backdrop{
  background:rgba(6,26,48,.62);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.modal[open]{animation:modalIn .32s var(--ease)}
.modal[open]::backdrop{animation:fadeIn .32s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal-inner{position:relative;padding:2.25rem}

.modal-close{
  position:absolute;top:1.1rem;right:1.1rem;
  width:38px;height:38px;border-radius:50%;border:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--tint);color:var(--body);
  transition:background .22s,color .22s,transform .22s var(--ease);
}
.modal-close svg{width:17px;height:17px}
.modal-close:hover{background:var(--navy-800);color:#fff;transform:rotate(90deg)}

.modal-cat{
  display:inline-block;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-600);
  background:var(--grad-soft);
  padding:.35rem .8rem;border-radius:100px;
  margin-bottom:1rem;
}
.modal-title{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.7rem;padding-right:2.5rem}
.modal-summary{font-size:1rem;color:var(--body);margin-bottom:1.25rem}

.modal-note{
  display:flex;gap:.6rem;
  padding:.9rem 1.1rem;margin-bottom:1.5rem;
  background:rgba(240,169,59,.1);
  border-left:3px solid #F0A93B;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.9rem;color:#7A5312;
}

.modal-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;
  padding:1.5rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.modal-col h3{
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.85rem;
}
.modal-list li{
  position:relative;padding-left:1.6rem;margin-bottom:.6rem;
  font-size:.92rem;color:var(--ink);line-height:1.55;
}
.modal-list li:last-child{margin-bottom:0}
.ticks-sm li::before{
  content:"";position:absolute;left:0;top:.35rem;width:14px;height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E92D8' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.dots-sm li::before{
  content:"";position:absolute;left:.28rem;top:.62rem;
  width:6px;height:6px;border-radius:50%;background:var(--teal);
}

.modal-turn{
  display:flex;align-items:flex-start;gap:.55rem;
  padding:1.15rem 0 1.5rem;
  font-size:.92rem;color:var(--body);
}
.modal-turn::before{
  content:"";flex-shrink:0;width:17px;height:17px;margin-top:.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6D80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}

.modal-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.modal-foot{
  margin-top:1rem;font-size:.82rem;color:var(--muted);
}

.form-prefill{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;margin-bottom:1.1rem;
  background:var(--grad-soft);
  border-radius:var(--r-sm);
  font-size:.87rem;font-weight:700;color:var(--navy-600);
}

@media (max-width:620px){
  .modal{width:min(100% - 1.25rem,720px);max-height:92vh}
  .modal-inner{padding:1.5rem 1.25rem}
  .modal-cols{grid-template-columns:1fr;gap:1.35rem}
  .modal-actions .btn{flex:1 1 100%}
}

/* Without JavaScript the dialog cannot open, so don't offer a dead control */
html:not(.js) .card-open{display:none}

/* ==========================================================================
   Quote page
   ========================================================================== */

.quote-grid{
  display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:start;
}
.quote-form{padding:2.4rem}
.quote-form h2{font-size:1.6rem;margin-bottom:.5rem}

.form-intro{
  font-size:.9rem;color:var(--muted);margin-bottom:1.6rem;
}

/* "What happens next" inside the hero panel: a real sequence, so numbered */
.step-rows{display:flex;flex-direction:column;gap:.2rem}
.step-row{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.7rem .75rem;border-radius:var(--r-sm);
}
.step-text{display:block;font-size:.86rem;color:#AFC7DB;line-height:1.5}
.step-text strong{display:block;color:#EAF3FB;font-size:.92rem;font-weight:700;margin-bottom:.1rem}

/* Reassurance column beside the form */
.quote-aside{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:calc(var(--header-h) + 1.5rem)}
.assure{
  padding:1.75rem 1.6rem;
  background:var(--tint);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r);
}
.assure h3{font-size:1.05rem;margin-bottom:1rem}
.assure p{font-size:.92rem;color:var(--body)}
.assure .ticks li{font-size:.9rem;padding:.55rem 0}
.assure-alt{background:var(--grad-soft);border-color:rgba(11,76,192,.18)}
.assure-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.assure-actions .btn{background:#fff}
.assure-foot{
  margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.86rem;color:var(--muted);
}
.assure-foot a{color:var(--navy-600);font-weight:700}
.assure-foot a:hover{color:var(--azure-text)}

/* The header CTA marks the quote page it leads to */
.nav-cta[aria-current="page"]{box-shadow:0 0 0 3px rgba(14,146,216,.28)}

@media (max-width:900px){
  .quote-grid{grid-template-columns:1fr;gap:2rem}
  .quote-aside{position:static}
}

@media (max-width:560px){
  .quote-form{padding:1.5rem 1.25rem}
  .assure{padding:1.4rem 1.25rem}
  .assure-actions .btn{flex:1 1 100%}
}

/* ========================================================================== 
   Privacy notice and form-success pages
   ========================================================================== */

.page-hero-compact{padding-bottom:4.25rem}
.page-hero-single{grid-template-columns:minmax(0,780px)}

.policy-copy{max-width:840px}
.policy-updated{font-size:.86rem;font-weight:700;color:var(--muted);margin-bottom:1.5rem}
.policy-callout{
  padding:1.35rem 1.5rem;margin-bottom:2.25rem;
  background:var(--grad-soft);border:1px solid rgba(11,76,192,.18);border-radius:var(--r);
}
.policy-callout strong{display:block;color:var(--navy-600);margin-bottom:.35rem}
.policy-callout p{margin:0}
.policy-copy h2{font-size:1.35rem;margin:2.2rem 0 .75rem}
.policy-copy p,.policy-copy li,.policy-copy address{font-size:.96rem;line-height:1.75}
.policy-copy p{margin-bottom:1rem}
.policy-copy ul{list-style:disc;padding-left:1.3rem;margin:0 0 1rem}
.policy-copy li{margin-bottom:.35rem}
.policy-copy address{font-style:normal;margin-bottom:1rem}
.policy-copy a{color:var(--navy-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.thanks-hero{min-height:100vh;display:grid;align-items:center;padding-block:calc(var(--header-h) + 3rem) 4rem}
.thanks-inner{position:relative;z-index:1;max-width:720px;text-align:center}
.thanks-inner .eyebrow{margin-inline:auto}
.thanks-inner .lede{max-width:620px;margin:1rem auto 2rem}
.thanks-inner .hero-actions{justify-content:center}
.thanks-check{
  width:72px;height:72px;margin:0 auto 1.4rem;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:2rem;font-weight:800;
  box-shadow:0 16px 38px rgba(14,146,216,.3);
}

@media (max-width:560px){
  .page-hero-compact{padding-bottom:3rem}
  .policy-copy h2{font-size:1.2rem}
  .policy-callout{padding:1.15rem 1.2rem}
}

/* ---------- Find us / map band ---------- */
.map-band{background:var(--tint);border-top:1px solid var(--line)}
.map-grid{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:3rem;align-items:center;
}
.map-copy h2{font-size:clamp(1.6rem,2.4vw,2.15rem);margin-bottom:.9rem}
.map-copy .section-sub{max-width:42ch}
.map-facts{display:flex;flex-direction:column;gap:1.15rem;margin:1.8rem 0}
.map-facts li{display:flex;gap:.9rem;align-items:flex-start}
.map-ico{
  flex-shrink:0;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:#fff;border:1.5px solid var(--line-strong);color:var(--blue-600);
  box-shadow:var(--shadow-sm);
}
.map-ico svg{width:19px;height:19px}
.map-facts strong{display:block;font-size:.94rem;color:var(--ink);margin-bottom:.15rem}
.map-facts span{display:block;font-size:.9rem;line-height:1.6;color:var(--body)}
.map-directions{display:inline-flex;align-items:center;gap:.5rem}
.map-directions svg{transition:transform .28s var(--ease)}
.map-directions:hover svg{transform:translateX(3px)}
.map-frame{
  position:relative;border-radius:20px;overflow:hidden;
  border:1.5px solid var(--line-strong);box-shadow:var(--shadow-md);
  background:var(--line);aspect-ratio:4/3;
}
.map-frame iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.9)}

@media (max-width:900px){
  .map-grid{grid-template-columns:1fr;gap:2.2rem}
  .map-copy .section-sub{max-width:none}
  .map-frame{aspect-ratio:16/10}
}
@media (max-width:560px){
  .map-facts{gap:1rem;margin:1.4rem 0}
  .map-frame{aspect-ratio:4/3;border-radius:16px}
}

/* Nested service navigation: kept inside the panel to avoid edge clipping. */
.nav-menu-inner{align-items:start;max-height:calc(100dvh - var(--header-h) - 2rem);overflow-y:auto}
.nav-category{min-width:0}
.nav-category > summary{list-style:none;cursor:pointer}
.nav-category > summary::-webkit-details-marker{display:none}
.nav-category > summary:focus-visible,.nav-submenu a:focus-visible{outline:2px solid var(--blue-600);outline-offset:-2px}
.submenu-caret{margin-left:auto;color:var(--navy-600);font-size:1.3rem;transition:transform .2s}
.nav-category[open] > summary{background:var(--tint)}
.nav-category[open] .submenu-caret{transform:rotate(90deg)}
.nav-submenu{list-style:none;margin:.25rem .4rem .6rem;padding:0 0 0 .75rem;border-left:2px solid var(--line)}
.nav-submenu a{display:block;padding:.5rem .65rem;border-radius:8px;font-size:.82rem;line-height:1.4;color:var(--ink)}
.nav-submenu a:hover{background:var(--tint);color:var(--navy-600)}
.nav-submenu .nav-category-all{font-weight:700;color:var(--navy-600);border-top:1px solid var(--line);margin-top:.25rem}
@media(max-width:820px){
  .nav-menu-inner{max-height:none;overflow:visible}
  .nav-submenu a{padding:.65rem;font-size:.9rem}
}

/* The Services hero uses the same disclosure behavior in its glass palette. */
.legend-category > summary{list-style:none;cursor:pointer}
.legend-category > summary::-webkit-details-marker{display:none}
.legend-category > summary:focus-visible,.legend-submenu a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.legend-caret{font-size:1.3rem;color:var(--teal);transition:transform .2s}
.legend-category[open] .legend-caret{transform:rotate(90deg)}
.legend-category[open] > summary{background:rgba(255,255,255,.09)}
.legend-submenu{list-style:none;margin:.25rem .75rem .75rem;padding:0 0 0 .75rem;border-left:2px solid rgba(255,255,255,.2)}
.legend-submenu a{display:block;padding:.6rem .7rem;border-radius:8px;color:#EAF3FB;font-size:.88rem;line-height:1.4}
.legend-submenu a:hover{background:rgba(255,255,255,.09);color:var(--teal)}
.legend-submenu .legend-category-all{font-weight:700;color:var(--teal);border-top:1px solid rgba(255,255,255,.2);margin-top:.25rem}