/* =====================================================================
   Sigonde Black Mamba (Pty) Ltd — Website Styles
   Palette: vivid emerald + luminous gold on airy off-white
   ===================================================================== */

/* ---------- Tokens: light (default) ---------- */
:root{
  --brand-950:#04241a;
  --brand-900:#06331f;
  --brand-800:#08462f;
  --brand-700:#0b5c3d;
  --brand-600:#0f7a52;
  --brand-500:#149a67;
  --brand-400:#2bbc85;
  --brand-300:#5ed5a5;
  --brand-100:#d6f3e6;

  --gold-700:#9a6f0c;
  --gold-600:#c08c12;
  --gold-500:#e3a91a;
  --gold-400:#f5c33d;
  --gold-300:#ffd970;
  --gold-100:#fff2cc;

  --bg:#ffffff;
  --bg-soft:#f3f9f5;
  --surface:#ffffff;
  --surface-2:#f7fbf8;
  --line:#e0ede6;
  --line-strong:#cfe3d8;

  --ink:#0d2019;
  --ink-2:#3a544c;
  --ink-3:#56685f;

  /* Accent colours safe for TEXT on the current surface. The brand/gold ramps
     above are tuned for fills and borders and are too light to read against
     white, so anything that sets a text colour uses these instead. */
  --brand-text:#0a5236;
  --gold-text:#815b08;

  --on-dark:#f2fbf6;
  --on-dark-2:rgba(233,250,241,.86);

  --ring:rgba(20,154,103,.35);
  --glow-green:rgba(20,154,103,.28);
  --glow-gold:rgba(227,169,26,.38);

  --shadow-sm:0 2px 8px rgba(6,51,31,.05);
  --shadow:0 12px 28px -12px rgba(6,51,31,.16);
  --shadow-lg:0 28px 60px -22px rgba(6,51,31,.28);

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-pill:999px;

  --display:'Bricolage Grotesque','Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --ease:cubic-bezier(.22,.68,.28,1);
  --maxw:1200px;
}

/* ---------- Tokens: dark (system default, no stamp) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08120e;
    --bg-soft:#0c1a14;
    --surface:#0f2019;
    --surface-2:#12271e;
    --line:#1d3a2e;
    --line-strong:#27503f;

    --ink:#e9f7ef;
    --ink-2:#a9c4b8;
    --ink-3:#7f9a8e;

    --brand-100:#0f3325;

    --shadow-sm:0 2px 8px rgba(0,0,0,.4);
    --shadow:0 14px 30px -12px rgba(0,0,0,.6);
    --shadow-lg:0 30px 64px -22px rgba(0,0,0,.75);

    --glow-green:rgba(43,188,133,.3);
    --glow-gold:rgba(245,195,61,.32);
  }
}
/* ---------- Tokens: dark (explicit stamp) ---------- */
:root[data-theme="dark"]{
  --bg:#08120e;
  --bg-soft:#0c1a14;
  --surface:#0f2019;
  --surface-2:#12271e;
  --line:#1d3a2e;
  --line-strong:#27503f;

  --ink:#e9f7ef;
  --ink-2:#a9c4b8;
  --ink-3:#7f9a8e;

  --brand-100:#0f3325;

  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --shadow:0 14px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 30px 64px -22px rgba(0,0,0,.75);

  --glow-green:rgba(43,188,133,.3);
  --glow-gold:rgba(245,195,61,.32);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{font-family:var(--display);margin:0;color:var(--ink);letter-spacing:-.02em;line-height:1.15;text-wrap:balance;}
p{margin:0;}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:4px;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);}
.anim{opacity:0;transform:translateY(20px);}
@media (prefers-reduced-motion:no-preference){
  .reveal{transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s);}
  .anim{animation:riseIn .9s var(--ease) forwards;animation-delay:var(--d,0s);}
}
.reveal.in{opacity:1;transform:none;}
@keyframes riseIn{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .reveal,.anim{opacity:1!important;transform:none!important;animation:none!important;}
  html{scroll-behavior:auto;}
}

/* ---------- Buttons ---------- */
.btn{
  --btn-pad:15px 30px;
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:var(--btn-pad);
  border:none;border-radius:var(--r-pill);
  font-family:var(--body);font-weight:800;font-size:.95rem;letter-spacing:.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-130%);transition:transform .7s var(--ease);
}
.btn:hover::before{transform:translateX(130%);}
.btn-arrow{transition:transform .3s var(--ease);display:inline-block;}
.btn:hover .btn-arrow{transform:translateX(5px);}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#2b1f00;
  box-shadow:0 10px 26px -10px var(--glow-gold),0 0 0 1px rgba(227,169,26,.35);
}
.btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px -12px var(--glow-gold),0 0 0 1px rgba(227,169,26,.5),0 0 34px -6px var(--glow-gold);
}
.btn-ghost{
  background:rgba(255,255,255,.08);
  color:var(--on-dark);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),0 16px 34px -14px rgba(0,0,0,.5);
}
.btn-lg{--btn-pad:18px 38px;font-size:1.02rem;}
.btn-block{width:100%;justify-content:center;}

.text-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-weight:800;font-size:.94rem;color:var(--gold-300);
}
.text-link span{transition:transform .3s var(--ease);}
.text-link:hover span{transform:translateX(6px);}

/* ---------- Top bar (contact + division switcher) ---------- */
.topbar{
  background:var(--brand-950);color:var(--on-dark-2);
  font-size:.83rem;
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-block:9px;
}
.topbar-contact{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.topbar-contact a{font-weight:600;transition:color .25s var(--ease);}
.topbar-contact a:hover{color:var(--gold-300);}
.topbar-sep{width:1px;height:13px;background:rgba(255,255,255,.24);}

.divisions{display:flex;align-items:center;gap:8px;}
.divisions-label{
  font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-right:4px;
}
.division-tab{
  padding:6px 16px;border-radius:var(--r-pill);
  font-weight:700;font-size:.83rem;color:var(--on-dark-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease);
}
.division-tab:hover{background:rgba(255,255,255,.12);color:#fff;}
.division-tab.is-active{
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#2b1f00;box-shadow:0 0 18px -6px var(--glow-gold);
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--bg) 93%,transparent);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.site-header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 8px 30px -18px rgba(6,51,31,.45);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:14px;}
.brand-logo{
  height:54px;width:auto;border-radius:8px;
  transition:height .35s var(--ease),transform .35s var(--ease);
}
.site-header.scrolled .brand-logo{height:44px;}
.brand:hover .brand-logo{transform:scale(1.04);}
.brand-div{
  padding-left:14px;border-left:1px solid var(--line-strong);
  font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-600);white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:6px;}
.nav a[data-link]{
  position:relative;padding:10px 14px;border-radius:var(--r-pill);
  font-weight:700;font-size:.9rem;color:var(--ink-2);white-space:nowrap;
  transition:color .28s var(--ease),background .28s var(--ease);
}
.nav a[data-link]::after{
  content:"";position:absolute;left:50%;bottom:4px;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand-400),var(--gold-400));
  border-radius:2px;transform:translateX(-50%);
  transition:width .32s var(--ease);
}
.nav a[data-link]:hover{color:var(--ink);background:var(--brand-100);}
.nav a[data-link]:hover::after,.nav a[data-link].active::after{width:56%;}
.nav a[data-link].active{color:var(--brand-600);}

.nav-cross{
  padding:10px 16px;border-radius:var(--r-pill);
  font-weight:700;font-size:.86rem;color:var(--gold-700);
  box-shadow:inset 0 0 0 1.5px var(--gold-400);
  transition:background .28s var(--ease),color .28s var(--ease),transform .28s var(--ease);
}
.nav-cross:hover{background:var(--gold-100);transform:translateY(-2px);}

.nav-cta{
  margin-left:8px;padding:12px 24px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--brand-600),var(--brand-800));
  color:#fff!important;font-weight:800;font-size:.9rem;
  box-shadow:0 10px 24px -12px var(--glow-green);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px var(--glow-green),0 0 26px -8px var(--glow-green);}

.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:10px;border-radius:10px;
}
.nav-toggle span{
  width:26px;height:2.5px;background:var(--ink);border-radius:2px;display:block;
  transition:transform .34s var(--ease),opacity .24s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:112px 24px 130px;
  background:
    radial-gradient(120% 90% at 85% 5%,var(--brand-600) 0%,transparent 55%),
    radial-gradient(100% 80% at 5% 95%,var(--brand-700) 0%,transparent 55%),
    linear-gradient(150deg,var(--brand-900) 0%,var(--brand-800) 45%,var(--brand-700) 100%);
  color:var(--on-dark);
}
.hero-bg{position:absolute;inset:0;z-index:-1;}
.orb{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  will-change:transform;
}
.orb-a{width:420px;height:420px;top:-90px;right:-60px;background:radial-gradient(circle,var(--gold-500),transparent 68%);}
.orb-b{width:380px;height:380px;bottom:-120px;left:-70px;background:radial-gradient(circle,var(--brand-400),transparent 68%);}
.orb-c{width:300px;height:300px;top:38%;left:52%;background:radial-gradient(circle,var(--brand-300),transparent 70%);opacity:.32;}
@media (prefers-reduced-motion:no-preference){
  .orb-a{animation:drift1 18s ease-in-out infinite;}
  .orb-b{animation:drift2 22s ease-in-out infinite;}
  .orb-c{animation:drift3 26s ease-in-out infinite;}
}
@keyframes drift1{50%{transform:translate3d(-60px,50px,0) scale(1.12);}}
@keyframes drift2{50%{transform:translate3d(70px,-45px,0) scale(1.08);}}
@keyframes drift3{50%{transform:translate3d(-45px,-60px,0) scale(1.15);}}

.grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 40%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 40%,#000 25%,transparent 78%);
}

.hero-inner{
  position:relative;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px 9px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  font-size:.79rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:26px;
}
.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold-400);
  box-shadow:0 0 0 0 rgba(245,195,61,.75);
}
@media (prefers-reduced-motion:no-preference){
  .pulse-dot{animation:pulse 2.2s infinite;}
}
@keyframes pulse{
  70%{box-shadow:0 0 0 12px rgba(245,195,61,0);}
  100%{box-shadow:0 0 0 0 rgba(245,195,61,0);}
}

.hero h1{
  font-size:clamp(2.4rem,6vw,4.6rem);
  font-weight:800;color:#fff;margin-bottom:22px;letter-spacing:-.035em;
}
.grad-text{
  background:linear-gradient(100deg,var(--gold-300) 0%,var(--gold-500) 40%,var(--brand-300) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;
}
@media (prefers-reduced-motion:no-preference){
  .grad-text{animation:shimmer 7s linear infinite;}
}
@keyframes shimmer{to{background-position:220% center;}}

.hero-tagline{
  font-family:var(--display);font-size:clamp(1.05rem,2vw,1.4rem);font-weight:500;font-style:italic;
  color:var(--gold-300);margin-bottom:20px;
}
.hero-copy{max-width:600px;color:var(--on-dark-2);font-size:1.06rem;margin-bottom:36px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px;}

.hero-chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:.85rem;font-weight:600;color:var(--on-dark-2);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.chip:hover{transform:translateY(-3px);background:rgba(255,255,255,.14);color:#fff;}
.tick{color:var(--brand-300);font-style:normal;font-weight:800;}

.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(to bottom,transparent,var(--bg));
  pointer-events:none;
}

/* ---------- Hero photo composition ---------- */
.hero-visual{position:relative;padding-bottom:56px;}
.hv-main,.hv-sub{margin:0;overflow:hidden;background:var(--brand-900);}
.hv-main{
  border-radius:28px;aspect-ratio:4/3.4;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14);
  transform:rotate(1.4deg);
}
.hv-main img,.hv-sub img{width:100%;height:100%;object-fit:cover;display:block;}
.hv-main img{
  filter:saturate(1.08) contrast(1.04);
  transition:transform 1.1s var(--ease);
}
.hero-visual:hover .hv-main img{transform:scale(1.06);}
.hv-sub{
  position:absolute;left:-34px;bottom:0;width:52%;
  border-radius:20px;aspect-ratio:16/11;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 5px var(--brand-800),0 0 0 6px rgba(255,255,255,.16);
  transform:rotate(-2.4deg);
}
.hv-sub img{filter:saturate(1.05);transition:transform 1.1s var(--ease);}
.hero-visual:hover .hv-sub img{transform:scale(1.07);}

.hv-badge{
  position:absolute;right:-14px;top:34px;
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#2b1f00;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.6),0 0 32px -6px var(--glow-gold);
}
.hv-badge-num{
  font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.08;
  letter-spacing:-.02em;
}
.hv-badge-txt{
  font-size:.68rem;font-weight:800;line-height:1.2;text-transform:uppercase;
  letter-spacing:.08em;padding-left:12px;border-left:2px solid rgba(43,31,0,.35);
}
/* Each float keyframe restates its element's resting rotation, so the animation
   offsets the position without cancelling the tilt. */
@media (prefers-reduced-motion:no-preference){
  .hv-badge{animation:floatBadge 5.5s ease-in-out infinite;}
  .hv-sub{animation:floatSub 6.5s ease-in-out infinite;}
}
@keyframes floatBadge{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-11px);}
}
@keyframes floatSub{
  0%,100%{transform:translateY(0) rotate(-2.4deg);}
  50%{transform:translateY(-14px) rotate(-1.2deg);}
}

/* ---------- Stats ---------- */
.stats-wrap{background:var(--bg);padding:0 0 10px;margin-top:-64px;position:relative;z-index:2;}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.stat{
  background:var(--surface);padding:34px 22px;text-align:center;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.stat:hover{background:var(--surface-2);transform:translateY(-4px);}
.stat-num{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,4vw,3rem);line-height:1;
  background:linear-gradient(135deg,var(--brand-500),var(--gold-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;margin-bottom:8px;
}
.stat-label{font-size:.86rem;font-weight:600;color:var(--ink-3);}

/* ---------- Section scaffolding ---------- */
.section{padding:96px 0;position:relative;}
.section-soft{background:var(--bg-soft);}
.head{max-width:760px;margin-bottom:52px;}
.eyebrow{
  display:inline-block;
  font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-600);margin-bottom:16px;
  padding-left:34px;position:relative;
}
.eyebrow::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:24px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-500),var(--gold-500));
}
.eyebrow-light{color:var(--gold-300);}
.head h2,.section h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:700;}
.u-accent{
  background:linear-gradient(100deg,var(--brand-500),var(--gold-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{margin-top:18px;color:var(--ink-2);font-size:1.04rem;max-width:640px;}

/* ---------- Divisions ---------- */
.div-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.div-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease);
}
.div-card:hover{
  transform:translateY(-8px);border-color:var(--gold-400);
  box-shadow:var(--shadow-lg),0 0 50px -18px var(--glow-gold);
}
.div-card-active{border-color:var(--brand-300);}
.div-card-active:hover{border-color:var(--brand-400);box-shadow:var(--shadow-lg),0 0 50px -18px var(--glow-green);}

.div-media{position:relative;overflow:hidden;aspect-ratio:16/8;background:var(--brand-900);}
.div-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
}
.div-card:hover .div-media img{transform:scale(1.08);}
.div-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,51,31,.72) 0%,rgba(6,51,31,.12) 55%,transparent 100%);
}
.div-body{padding:30px 32px 32px;display:flex;flex-direction:column;flex:1;}
.div-tag{
  align-self:flex-start;margin-bottom:14px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:var(--gold-100);color:var(--gold-700);
  font-size:.71rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.div-tag-current{background:var(--brand-100);color:var(--brand-700);}
.div-body h3{font-size:1.35rem;margin-bottom:12px;}
.div-body>p{color:var(--ink-2);font-size:.97rem;}
.div-facts{margin:18px 0 24px;display:grid;gap:8px;}
.div-facts li{
  font-size:.9rem;color:var(--ink-2);
  padding-left:18px;position:relative;
}
.div-facts li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--brand-400),var(--gold-500));
}
.div-facts strong{color:var(--ink);font-weight:800;}
.div-body .btn{align-self:flex-start;margin-top:auto;}
.btn-outline-green{
  background:transparent;color:var(--brand-700);
  box-shadow:inset 0 0 0 2px var(--brand-400);
}
.btn-outline-green:hover{
  transform:translateY(-3px);background:var(--brand-100);
  box-shadow:inset 0 0 0 2px var(--brand-500),0 14px 30px -14px var(--glow-green);
}

/* ---------- About ---------- */
.who-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;margin-bottom:26px;}
.who-panel{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,var(--brand-900),var(--brand-700));
  color:var(--on-dark);padding:44px;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.panel-glow{
  position:absolute;width:340px;height:340px;top:-120px;right:-100px;z-index:-1;
  background:radial-gradient(circle,var(--gold-500),transparent 68%);
  filter:blur(60px);opacity:.42;
}
.who-panel h3{color:#fff;font-size:1.5rem;margin-bottom:18px;}
.who-panel p{color:var(--on-dark-2);}
.who-panel p+p{margin-top:14px;}

.who-photo{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);
  min-height:340px;background:var(--brand-900);box-shadow:var(--shadow-lg);
}
.who-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;
  transition:transform 1.2s var(--ease);
}
.who-photo:hover img{transform:scale(1.07);}
.who-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,36,26,.94) 0%,rgba(4,36,26,.3) 45%,transparent 75%);
}
.who-photo figcaption{
  position:absolute;left:26px;right:26px;bottom:22px;z-index:1;
  display:flex;align-items:center;gap:10px;
  color:var(--on-dark);font-size:.86rem;font-weight:700;
}
.who-photo figcaption::before{
  content:"";flex-shrink:0;width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-400),var(--gold-400));
}

.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:26px;}
.vm-card{
  position:relative;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px;
  box-shadow:var(--shadow-sm);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.vm-card:hover{
  transform:translateY(-6px);border-color:var(--brand-300);
  box-shadow:var(--shadow-lg),0 0 40px -18px var(--glow-green);
}
.vm-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;margin-bottom:16px;
  background:linear-gradient(135deg,var(--brand-100),transparent);
  color:var(--brand-600);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:transform .4s var(--ease),color .3s var(--ease);
}
.vm-icon svg{width:24px;height:24px;}
.vm-card:hover .vm-icon{transform:rotate(-8deg) scale(1.08);color:var(--gold-600);}
.vm-card h4{font-size:1.15rem;margin-bottom:10px;}
.vm-card p{color:var(--ink-2);font-size:.97rem;}

.values{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:26px 0 60px;}
.value{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px;box-shadow:var(--shadow-sm);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.value:hover{
  transform:translateY(-7px);border-color:var(--gold-400);
  box-shadow:var(--shadow-lg),0 0 40px -16px var(--glow-gold);
}
.value-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:16px;margin-bottom:16px;
  background:linear-gradient(135deg,var(--brand-700),var(--brand-500));
  color:var(--gold-300);font-family:var(--display);font-weight:800;font-size:1.3rem;
  box-shadow:0 10px 22px -10px var(--glow-green);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.value:hover .value-badge{
  transform:translateY(-3px) rotate(-6deg);
  box-shadow:0 16px 30px -10px var(--glow-green),0 0 26px -6px var(--glow-gold);
}
.value h4{font-size:1.03rem;margin-bottom:8px;}
.value p{color:var(--ink-3);font-size:.9rem;}

/* ---------- Service area ---------- */
.area{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(140deg,var(--brand-950),var(--brand-800));
  border-radius:var(--r-lg);padding:48px;color:var(--on-dark);
  box-shadow:var(--shadow-lg);
}
.area-glow{
  position:absolute;width:460px;height:460px;bottom:-220px;right:-120px;z-index:-1;
  background:radial-gradient(circle,var(--brand-400),transparent 65%);
  filter:blur(70px);opacity:.4;
}
.area-head h3{color:#fff;font-size:1.6rem;}
.area-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.pill{
  padding:11px 22px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:.9rem;font-weight:600;color:var(--on-dark-2);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.pill:hover{
  transform:translateY(-4px);background:rgba(255,255,255,.14);color:#fff;
  box-shadow:inset 0 0 0 1px var(--gold-400),0 12px 26px -12px var(--glow-gold);
}
.pill-hub{
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#2b1f00;font-weight:800;box-shadow:0 0 0 0 rgba(245,195,61,.6);
}
@media (prefers-reduced-motion:no-preference){
  .pill-hub{animation:hubGlow 2.8s ease-in-out infinite;}
}
@keyframes hubGlow{
  0%,100%{box-shadow:0 0 18px -4px rgba(245,195,61,.5);}
  50%{box-shadow:0 0 34px 2px rgba(245,195,61,.75);}
}
.pill-hub:hover{color:#2b1f00;}
.pill-dash{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);border-style:dashed;font-weight:500;}

/* ---------- Service index ----------
   A static, clickable directory of the full service range. Each entry links to
   the section that covers it, so this doubles as in-page navigation. */
.svc-index{
  position:relative;overflow:hidden;isolation:isolate;
  padding:66px 0;color:var(--on-dark);
  background:linear-gradient(135deg,var(--brand-900),var(--brand-700) 60%,var(--brand-800));
}
.svc-index-glow{
  position:absolute;width:620px;height:340px;top:-160px;left:50%;transform:translateX(-50%);
  z-index:-1;background:radial-gradient(ellipse,var(--gold-500),transparent 66%);
  filter:blur(76px);opacity:.3;
}
.svc-index-head{text-align:center;max-width:620px;margin:0 auto 34px;}
.svc-index-head .eyebrow{padding-left:0;}
.svc-index-head .eyebrow::before{display:none;}
.svc-index-head h2{color:#fff;font-size:clamp(1.4rem,2.9vw,2.05rem);}
.svc-index-head p{margin-top:12px;color:var(--on-dark-2);font-size:.98rem;}

.svc-index-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.svc-index-list a{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:.93rem;font-weight:600;color:var(--on-dark-2);
  transition:transform .3s var(--ease),background .3s var(--ease),
             color .3s var(--ease),box-shadow .3s var(--ease);
}
.svc-index-list a::before{
  content:"";flex-shrink:0;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--brand-300),var(--gold-400));
  transition:transform .3s var(--ease);
}
.svc-index-list a:hover{
  transform:translateY(-4px);background:rgba(255,255,255,.14);color:#fff;
  box-shadow:inset 0 0 0 1px var(--gold-400),0 14px 28px -14px var(--glow-gold);
}
.svc-index-list a:hover::before{transform:rotate(45deg) scale(1.15);}

/* ---------- Service cards ---------- */
.cards{display:grid;gap:26px;}
.cards-3{grid-template-columns:repeat(3,1fr);}
.cards-4{grid-template-columns:repeat(4,1fr);}
.cards-mt{margin-top:26px;}

.card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease);
}
.card:hover{
  transform:translateY(-9px);border-color:var(--brand-300);
  box-shadow:var(--shadow-lg),0 0 46px -18px var(--glow-green);
}

/* --- photo panel --- */
.card-media{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;background:var(--brand-900);
}
.card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.06) contrast(1.03);
  transition:transform 1.05s var(--ease),filter .5s var(--ease);
}
.card:hover .card-media img{transform:scale(1.1);filter:saturate(1.16) contrast(1.06);}

/* Brand scrim: keeps the tiles reading as one set and lets the icon sit legibly
   on any photo. Lifts slightly on hover so the image comes forward. */
.card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,51,31,.86) 0%,rgba(6,51,31,.24) 44%,rgba(6,51,31,.02) 100%);
  transition:opacity .5s var(--ease);
}
.card:hover .card-media::after{opacity:.72;}
.card-alt .card-media::after{
  background:linear-gradient(to top,rgba(6,51,31,.9) 0%,rgba(122,88,10,.28) 48%,rgba(122,88,10,.05) 100%);
}

/* gold progress rule that fills across the photo's base on hover */
.card-media::before{
  content:"";position:absolute;left:0;bottom:0;z-index:2;
  height:4px;width:54px;
  background:linear-gradient(90deg,var(--gold-400),var(--brand-400));
  transition:width .6s var(--ease);
}
.card:hover .card-media::before{width:100%;}

.card-icon{
  position:absolute;left:22px;bottom:18px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(140deg,var(--brand-600),var(--brand-800));
  color:var(--gold-300);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.16);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.card-icon svg{width:25px;height:25px;}
.card:hover .card-icon{
  transform:translateY(-5px) rotate(-7deg) scale(1.07);
  box-shadow:0 18px 32px -10px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.24),0 0 28px -6px var(--glow-gold);
}
.card-alt .card-icon{background:linear-gradient(140deg,var(--gold-400),var(--gold-600));color:#2b1f00;}
.card-alt:hover{border-color:var(--gold-400);box-shadow:var(--shadow-lg),0 0 46px -18px var(--glow-gold);}

.card-body{padding:26px 28px 28px;flex:1;}
.card h3{font-size:1.14rem;margin-bottom:14px;}
.card ul li{
  position:relative;padding-left:22px;margin-bottom:9px;
  color:var(--ink-2);font-size:.94rem;
}
.card ul li:last-child{margin-bottom:0;}
.card ul li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--brand-400),var(--gold-500));
  transition:transform .3s var(--ease);
}
.card:hover ul li::before{transform:rotate(45deg);}

/* ---------- Roofing feature ---------- */
.roof-feature{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;
  background:linear-gradient(140deg,var(--brand-900),var(--brand-700));
  border-radius:var(--r-lg);padding:48px;color:var(--on-dark);
  box-shadow:var(--shadow-lg);
}
.roof-photo{
  position:relative;margin:0;overflow:hidden;
  border-radius:20px;aspect-ratio:4/3.1;background:var(--brand-950);
  box-shadow:0 30px 60px -26px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.14);
}
.roof-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.08) contrast(1.04);
  transition:transform 1.2s var(--ease);
}
.roof-feature:hover .roof-photo img{transform:scale(1.08);}
.roof-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,36,26,.55),transparent 55%);
}
.roof-glow{
  position:absolute;width:420px;height:420px;top:-160px;left:-120px;z-index:-1;
  background:radial-gradient(circle,var(--gold-500),transparent 66%);
  filter:blur(66px);opacity:.4;
}
.roof-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:18px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#2b1f00;box-shadow:0 14px 30px -12px var(--glow-gold);
}
.roof-icon svg{width:29px;height:29px;}
.roof-body h3{color:#fff;font-size:1.75rem;margin-bottom:20px;}
.roof-list{display:grid;gap:11px;}
.roof-list li{position:relative;padding-left:26px;color:var(--on-dark-2);}
.roof-list li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border-radius:3px;background:var(--gold-400);
  box-shadow:0 0 12px 0 rgba(245,195,61,.6);
}
.roof-quote{
  margin:0;padding:30px 32px;border-radius:var(--r);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  border-left:4px solid var(--gold-400);
  font-family:var(--display);font-size:1.16rem;font-style:italic;font-weight:500;
  color:var(--gold-300);line-height:1.5;
}

/* ---------- Process ---------- */
.proc-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;margin-bottom:56px;}
.proc-grid h3{font-size:1.4rem;margin-bottom:24px;}

.type-list{display:grid;gap:12px;}
.type-list li{
  display:flex;align-items:center;gap:16px;
  padding:15px 20px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
  font-weight:600;font-size:.96rem;
  transition:transform .34s var(--ease),border-color .34s var(--ease),box-shadow .34s var(--ease);
}
.type-list li:hover{
  transform:translateX(8px);border-color:var(--gold-400);
  box-shadow:0 14px 30px -18px var(--glow-gold);
}
.type-list li span{
  flex-shrink:0;font-family:var(--display);font-weight:800;font-size:.9rem;
  color:var(--gold-600);font-variant-numeric:tabular-nums;
}

.steps{display:grid;gap:4px;}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:0 0 26px;position:relative;}
.step:not(:last-child)::before{
  content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;
  background:linear-gradient(to bottom,var(--brand-400),var(--line));
}
.step-num{
  position:relative;z-index:1;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-700),var(--brand-500));
  color:var(--gold-300);font-family:var(--display);font-weight:800;
  box-shadow:0 10px 22px -10px var(--glow-green);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.step:hover .step-num{
  transform:scale(1.12);
  box-shadow:0 14px 28px -10px var(--glow-green),0 0 26px -4px var(--glow-gold);
}
.step h4{font-size:1.05rem;margin:8px 0 6px;}
.step p{color:var(--ink-2);font-size:.94rem;}

.deliver{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(140deg,var(--brand-950),var(--brand-800));
  border-radius:var(--r-lg);padding:48px;color:var(--on-dark);
  box-shadow:var(--shadow-lg);margin-bottom:32px;
}
.deliver-glow{
  position:absolute;width:520px;height:300px;top:-120px;left:30%;z-index:-1;
  background:radial-gradient(ellipse,var(--brand-400),transparent 68%);
  filter:blur(70px);opacity:.35;
}
.deliver h3{color:#fff;font-size:1.5rem;margin-bottom:34px;}
.deliver-track{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;}
.deliver-track::before{
  content:"";position:absolute;left:6%;right:6%;top:24px;height:2px;
  background:linear-gradient(90deg,var(--brand-400),var(--gold-400));
  opacity:.45;
}
.dstep{text-align:center;position:relative;}
.dstep span{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;margin-bottom:14px;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#2b1f00;font-family:var(--display);font-weight:800;font-size:1.05rem;
  box-shadow:0 0 0 6px rgba(4,36,26,.6),0 12px 26px -10px var(--glow-gold);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.dstep:hover span{transform:translateY(-5px) scale(1.08);box-shadow:0 0 0 6px rgba(4,36,26,.6),0 18px 32px -8px var(--glow-gold),0 0 30px -4px var(--glow-gold);}
.dstep p{font-weight:800;font-size:1rem;color:#fff;margin-bottom:5px;}
.dstep small{color:var(--on-dark-2);font-size:.82rem;line-height:1.45;display:block;}

.commit{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.commit-card{
  border-radius:var(--r-lg);padding:36px;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.commit-card:hover{transform:translateY(-6px);}
.commit-card h4{font-size:1.25rem;margin-bottom:12px;}
.commit-green{
  background:linear-gradient(140deg,var(--brand-800),var(--brand-600));
  color:var(--on-dark-2);box-shadow:0 16px 36px -20px var(--glow-green);
}
.commit-green h4{color:var(--gold-300);}
.commit-green:hover{box-shadow:0 26px 50px -20px var(--glow-green),0 0 40px -14px var(--glow-green);}
.commit-gold{
  background:linear-gradient(140deg,var(--gold-400),var(--gold-600));
  color:#33260a;box-shadow:0 16px 36px -20px var(--glow-gold);
}
.commit-gold h4{color:#2b1f00;}
.commit-gold:hover{box-shadow:0 26px 50px -20px var(--glow-gold),0 0 40px -14px var(--glow-gold);}

/* ---------- Why us ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:56px;}
.why{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.why:hover{
  transform:translateY(-8px);border-color:var(--brand-300);
  box-shadow:var(--shadow-lg),0 0 44px -18px var(--glow-green);
}
.why-n{
  display:block;font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;
  background:linear-gradient(135deg,var(--brand-400),var(--gold-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.5;margin-bottom:14px;font-variant-numeric:tabular-nums;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.why:hover .why-n{opacity:1;transform:translateY(-2px);}
.why h4{font-size:1.1rem;margin-bottom:8px;}
.why p{color:var(--ink-2);font-size:.94rem;}

.pledge{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:linear-gradient(140deg,var(--brand-950),var(--brand-800));
  border-radius:var(--r-lg);padding:60px 48px;
  box-shadow:var(--shadow-lg);
}
.pledge-glow{
  position:absolute;width:600px;height:340px;top:-140px;left:50%;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(ellipse,var(--gold-500),transparent 66%);
  filter:blur(72px);opacity:.32;
}
.pledge .eyebrow{padding-left:0;}
.pledge .eyebrow::before{display:none;}
.pledge blockquote{
  margin:0 auto;max-width:800px;
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.85rem);line-height:1.45;
  color:var(--gold-300);
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  padding:72px 0;color:var(--on-dark);
  background:linear-gradient(120deg,var(--brand-800),var(--brand-600) 55%,var(--brand-700));
}
.cta-glow{
  position:absolute;width:600px;height:600px;top:-260px;right:-140px;z-index:-1;
  background:radial-gradient(circle,var(--gold-500),transparent 64%);
  filter:blur(80px);opacity:.42;
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:10px;}
.cta-band p{color:var(--on-dark-2);max-width:520px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:start;}
.contact-card,.contact-form{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:38px;box-shadow:var(--shadow);
}
.contact-logo{height:52px;width:auto;margin-bottom:22px;border-radius:8px;}
.contact-card h3{font-size:1.3rem;margin-bottom:22px;}
.details{display:grid;gap:16px;}
.details dt{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:3px;
}
.details dd{margin:0;color:var(--ink);font-size:.96rem;}
.ct-link{
  font-weight:700;color:var(--brand-600);
  border-bottom:1.5px dashed var(--brand-300);
  transition:color .28s var(--ease),border-color .28s var(--ease);
}
.ct-link:hover{color:var(--gold-600);border-color:var(--gold-400);}
.note{
  margin-top:24px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--bg-soft);border:1px solid var(--line);
  font-size:.83rem;color:var(--ink-3);
}
.note code{background:var(--brand-100);padding:2px 7px;border-radius:5px;font-size:.9em;}

.contact-form{display:grid;gap:18px;}
.field{display:grid;gap:7px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field label{font-size:.82rem;font-weight:800;letter-spacing:.03em;color:var(--ink-2);}
.field input,.field textarea,.field select{
  font-family:var(--body);font-size:.96rem;
  padding:14px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong);
  background:var(--surface-2);color:var(--ink);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease);
  resize:vertical;width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--brand-400);background:var(--surface);
  box-shadow:0 0 0 4px var(--ring);
}
.form-note{font-size:.79rem;color:var(--ink-3);text-align:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--brand-950);color:var(--on-dark-2);padding:64px 0 26px;}
.footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-logo{height:46px;width:auto;margin-bottom:18px;border-radius:8px;}
.footer-brand p{font-size:.92rem;max-width:340px;}
.footer-col h5{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:16px;font-family:var(--body);
}
.footer-col a{
  display:block;font-size:.92rem;margin-bottom:10px;
  transition:color .28s var(--ease),transform .28s var(--ease);
}
.footer-col a:hover{color:var(--gold-300);transform:translateX(5px);}
.footer-addr{font-size:.92rem;line-height:1.7;}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:24px;font-size:.84rem;
}
.back-link{font-weight:700;color:var(--gold-300);transition:transform .28s var(--ease);display:inline-block;}
.back-link:hover{transform:translateY(-3px);}

/* ---------- Floating quote button ---------- */
.fab{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#2b1f00;font-weight:800;font-size:.9rem;
  box-shadow:0 14px 32px -12px var(--glow-gold),0 0 0 1px rgba(227,169,26,.4);
  opacity:0;visibility:hidden;transform:translateY(20px) scale(.9);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,box-shadow .3s var(--ease);
}
.fab.show{opacity:1;visibility:visible;transform:none;}
.fab:hover{box-shadow:0 20px 42px -12px var(--glow-gold),0 0 34px -4px var(--glow-gold);transform:translateY(-3px);}
.fab svg{width:20px;height:20px;}

/* =====================================================================
   Responsive
   ===================================================================== */
/* Both pages carry a long section nav plus a cross-division link, so the header
   tightens before the mobile breakpoint rather than wrapping onto two lines. */
@media (max-width:1560px){
  .nav{gap:2px;}
  .nav a[data-link]{padding:10px 9px;font-size:.85rem;}
  .nav-cross{padding:9px 12px;font-size:.8rem;white-space:nowrap;}
  .nav-cta{margin-left:4px;padding:11px 17px;font-size:.85rem;white-space:nowrap;}
  .brand-div{padding-left:11px;font-size:.72rem;}
  .brand-logo{height:46px;}
}

@media (max-width:1080px){
  .cards-4{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:34px;}
}

@media (max-width:900px){
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:16px 20px 22px;
    box-shadow:0 24px 40px -24px rgba(6,51,31,.5);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .42s var(--ease);
  }
  .nav.open{clip-path:inset(0 0 0 0);}
  .nav a[data-link]{padding:13px 16px;font-size:.98rem;}
  .nav a[data-link]::after{display:none;}
  .nav-cta{margin:8px 0 0;text-align:center;}
  .nav-toggle{display:flex;}

  .hero-inner{grid-template-columns:1fr;gap:56px;}
  .hero-visual{max-width:520px;}
  .who-grid,.proc-grid,.contact-grid,.roof-feature,.vm-grid{grid-template-columns:1fr;}
  .cards-3{grid-template-columns:repeat(2,1fr);}
  .values{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .commit{grid-template-columns:1fr;}
  .deliver-track{grid-template-columns:repeat(2,1fr);gap:28px;}
  .deliver-track::before{display:none;}
  .roof-feature{gap:28px;}
}

@media (max-width:640px){
  html{scroll-padding-top:76px;}
  .section{padding:64px 0;}
  .hero{padding:80px 20px 100px;}
  .cards-3,.cards-4,.values,.why-grid,.field-row,.footer-top{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .who-panel,.area,.roof-feature,.deliver,.pledge{padding:32px 24px;}
  .contact-card,.contact-form{padding:28px 22px;}
  .deliver-track{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .hv-sub{left:0;width:56%;}
  .hv-badge{right:-6px;top:18px;padding:11px 16px;}
  .who-photo{min-height:260px;}
  .fab span{display:none;}
  .fab{padding:16px;right:16px;bottom:16px;}
  .stat{padding:26px 14px;}
}

/* =====================================================================
   Micro Lending page
   ===================================================================== */

/* ---------- Hero loan figures ---------- */
.loan-figures{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px;}
.lf{
  padding:16px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
}
.lf-label{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-300);margin-bottom:5px;
}
.lf-value{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.2rem,2.4vw,1.6rem);color:#fff;letter-spacing:-.02em;
}
.hero-fineprint{
  margin-top:26px;font-size:.82rem;line-height:1.6;
  color:rgba(233,250,241,.62);max-width:520px;
}

/* ---------- Key-fact blocks (reuses the .stats shell) ---------- */
.stats-3{grid-template-columns:repeat(3,1fr);}
.stat-block{text-align:left;padding:30px 26px;}
.stat-head{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.1;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--brand-500),var(--gold-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;
}
.stat-sub{
  display:block;font-size:.71rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-600);margin-bottom:10px;
}
.stat-block p{color:var(--ink-2);font-size:.9rem;}

/* ---------- Notice band ---------- */
.section-tight{padding:44px 0;}
.notice-band{
  display:flex;gap:20px;align-items:flex-start;
  padding:28px 32px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--gold-100),var(--surface));
  border:1.5px solid var(--gold-400);
  box-shadow:var(--shadow-sm);
}
.notice-icon{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:#2b1f00;
}
.notice-icon svg{width:24px;height:24px;}
.notice-band h3{font-size:1.12rem;margin-bottom:6px;color:var(--gold-700);}
.notice-band p{color:var(--ink-2);font-size:.95rem;}

/* ---------- Registration plate ---------- */
.panel-sub{
  margin:22px 0 8px;font-size:.76rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-300);font-family:var(--body);
}
.reg-plate{
  margin-top:26px;padding:22px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.reg-label{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-300);margin-bottom:6px;
}
.reg-num{
  display:block;font-family:var(--display);font-weight:800;
  font-size:1.9rem;color:#fff;letter-spacing:-.02em;line-height:1.1;
}
.reg-sub{display:block;margin-top:6px;font-size:.84rem;color:var(--on-dark-2);}
.area-note-txt{margin-top:20px;font-size:.85rem;color:var(--on-dark-2);}

/* ---------- Loan headline band ---------- */
.loan-band{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);padding:44px 48px;margin-bottom:30px;
  background:linear-gradient(135deg,var(--brand-900),var(--brand-700) 60%,var(--brand-600));
  color:var(--on-dark);box-shadow:var(--shadow-lg);
}
.loan-band-glow{
  position:absolute;width:520px;height:520px;top:-260px;right:-120px;z-index:-1;
  background:radial-gradient(circle,var(--gold-500),transparent 64%);
  filter:blur(76px);opacity:.4;
}
.loan-band h3{color:#fff;font-size:1.5rem;margin-bottom:24px;}
.loan-band-figures{display:flex;align-items:center;gap:36px;flex-wrap:wrap;}
.lb-value{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,4.4vw,3rem);line-height:1;letter-spacing:-.03em;
  color:var(--gold-300);
}
.lb-label{
  display:block;margin-top:8px;font-size:.75rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-2);
}
.lb-divider{width:1px;height:56px;background:rgba(255,255,255,.24);}
.loan-band-note{margin-top:24px;font-size:.86rem;color:var(--on-dark-2);max-width:640px;}

/* ---------- Generic panels ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.two-col-mt{margin-top:30px;}
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-sm);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.panel:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.panel-wide{margin-top:30px;}
.panel-amber{background:linear-gradient(150deg,var(--gold-100),var(--surface));border-color:var(--gold-400);}
.panel h3{font-size:1.25rem;margin-bottom:18px;}
.panel-lede{color:var(--ink-2);font-size:.97rem;}
.panel-sub-dark{
  margin:22px 0 12px;font-size:.76rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-600);font-family:var(--body);
}

.check-list{display:grid;gap:12px;}
.check-list li{
  position:relative;padding-left:30px;color:var(--ink-2);font-size:.95rem;
}
.check-list li::before{
  content:"";position:absolute;left:0;top:.3em;
  width:18px;height:18px;border-radius:6px;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
}
.check-list li::after{
  content:"";position:absolute;left:6.5px;top:.55em;
  width:4px;height:8px;border:2px solid #fff;border-top:0;border-left:0;
  transform:rotate(42deg);
}
.check-list strong{color:var(--ink);font-weight:800;}

.callout{
  margin-top:24px;padding:18px 22px;border-radius:var(--r);
  border-left:4px solid var(--gold-500);background:var(--gold-100);
}
.callout strong{
  display:block;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-700);margin-bottom:6px;
}
.callout p{color:#5b4715;font-size:.92rem;}
.callout-wide{margin-top:30px;}
.callout-fine{margin-top:10px;font-size:.83rem;opacity:.8;}

/* ---------- Dark bands ---------- */
.dark-band{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(140deg,var(--brand-950),var(--brand-800));
  border-radius:var(--r-lg);padding:44px 48px;color:var(--on-dark);
  box-shadow:var(--shadow-lg);margin-top:30px;
}
.dark-band-tight{padding:34px 40px;}
.dark-band-glow{
  position:absolute;width:520px;height:300px;top:-140px;left:35%;z-index:-1;
  background:radial-gradient(ellipse,var(--brand-400),transparent 66%);
  filter:blur(72px);opacity:.34;
}
.dark-band h3{color:#fff;font-size:1.35rem;margin-bottom:14px;}
.band-lede{color:var(--on-dark-2);max-width:820px;font-size:.97rem;}

.elig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px;}
.elig span{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:14px;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#2b1f00;font-family:var(--display);font-weight:800;
  box-shadow:0 12px 26px -10px var(--glow-gold);
  transition:transform .38s var(--ease);
}
.elig:hover span{transform:translateY(-4px) scale(1.08);}
.elig h4{color:#fff;font-size:1.02rem;margin-bottom:7px;}
.elig p{color:var(--on-dark-2);font-size:.89rem;}

.afford-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px;}
.afford{
  padding:22px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.afford:hover{transform:translateY(-5px);background:rgba(255,255,255,.13);}
.afford h4{
  color:var(--gold-300);font-size:.76rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:9px;font-family:var(--body);
}
.afford p{color:var(--on-dark-2);font-size:.89rem;}

.ctrl-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;margin-top:22px;}
.ctrl-list li{
  position:relative;padding-left:24px;color:var(--on-dark-2);font-size:.93rem;
}
.ctrl-list li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;
  background:var(--gold-400);box-shadow:0 0 12px 0 rgba(245,195,61,.55);
}

/* ---------- Apply steps ---------- */
.apply-track{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.astep{
  position:relative;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 24px;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.astep:hover{
  transform:translateY(-8px);border-color:var(--brand-300);
  box-shadow:var(--shadow-lg),0 0 44px -18px var(--glow-green);
}
.astep-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;margin-bottom:16px;
  background:linear-gradient(140deg,var(--brand-600),var(--brand-800));
  color:var(--gold-300);font-family:var(--display);font-weight:800;font-size:1.08rem;
  box-shadow:0 12px 26px -10px var(--glow-green);
  transition:transform .4s var(--ease);
}
.astep:hover .astep-num{transform:translateY(-4px) scale(1.08);}
.astep-final .astep-num{
  background:linear-gradient(140deg,var(--gold-400),var(--gold-600));color:#2b1f00;
  box-shadow:0 12px 26px -10px var(--glow-gold);
}
.astep-final:hover{border-color:var(--gold-400);box-shadow:var(--shadow-lg),0 0 44px -18px var(--glow-gold);}
.astep h4{font-size:1.05rem;margin-bottom:8px;}
.astep p{color:var(--ink-2);font-size:.9rem;}

/* ---------- Pricing ---------- */
.rate-card{
  border-radius:var(--r-lg);padding:38px 36px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.rate-card:hover{transform:translateY(-6px);}
.rate-card-green{
  background:linear-gradient(150deg,var(--brand-100),var(--surface));
  border:1.5px solid var(--brand-300);
  box-shadow:var(--shadow-sm);
}
.rate-card-green:hover{box-shadow:var(--shadow-lg),0 0 44px -18px var(--glow-green);}
.rate-card-amber{
  background:linear-gradient(150deg,var(--gold-100),var(--surface));
  border:1.5px solid var(--gold-400);
  box-shadow:var(--shadow-sm);
}
.rate-card-amber:hover{box-shadow:var(--shadow-lg),0 0 44px -18px var(--glow-gold);}
.rate-kicker{
  font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-700);margin-bottom:12px;
}
.rate-card-green .rate-kicker{color:var(--brand-700);}
.rate-amount{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.025em;
  color:var(--ink);margin-bottom:18px;
}
.rate-label{
  font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;
}
.rate-rows{display:grid;gap:16px;}
.rate-pct{
  display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;
  color:var(--brand-600);letter-spacing:-.02em;
}
.rate-note{display:block;margin-top:3px;font-size:.86rem;color:var(--ink-2);}
.rate-body{color:var(--ink-2);font-size:.97rem;}
.rate-body strong{color:var(--ink);font-weight:800;}
.rate-fine{margin-top:16px;font-size:.83rem;color:var(--ink-3);}

.cost-list{display:grid;gap:16px;margin:0;}
.cost-list>div{
  display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:baseline;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.cost-list>div:last-child{border-bottom:0;padding-bottom:0;}
.cost-list dt{
  font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-600);
}
.cost-list dd{margin:0;color:var(--ink-2);font-size:.95rem;}

/* ---------- Contact extras ---------- */
.contact-div-label{
  margin:-10px 0 20px;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-600);
}

/* ---------- Footer legal ---------- */
.footer-legal{padding:24px 24px 0;}
.footer-legal p{
  font-size:.79rem;line-height:1.7;color:rgba(233,250,241,.55);
  padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
}

/* =====================================================================
   Responsive — divisions + lending page
   ===================================================================== */
@media (max-width:1080px){
  .apply-track{grid-template-columns:repeat(3,1fr);}
  .elig-grid,.afford-grid{grid-template-columns:repeat(2,1fr);}
  .stats-3{grid-template-columns:1fr;}
}

@media (max-width:900px){
  .div-grid,.two-col{grid-template-columns:1fr;}
  .ctrl-list{grid-template-columns:1fr;}
  .topbar-inner{justify-content:center;gap:12px;}
  .brand-div{display:none;}
  .nav-cross{margin-top:6px;text-align:center;}
}

@media (max-width:640px){
  .apply-track{grid-template-columns:1fr;}
  .elig-grid,.afford-grid{grid-template-columns:1fr;}
  .loan-band,.dark-band,.dark-band-tight{padding:30px 24px;}
  .panel,.rate-card{padding:26px 22px;}
  .lb-divider{display:none;}
  .loan-band-figures{gap:22px;}
  .cost-list>div{grid-template-columns:1fr;gap:6px;}
  .topbar{font-size:.78rem;}
  .topbar-contact{gap:10px;justify-content:center;}
  .notice-band{flex-direction:column;gap:14px;padding:24px 22px;}
  .div-body{padding:24px 22px 26px;}
}

/* =====================================================================
   Division switcher + WhatsApp
   ===================================================================== */

:root{
  --wa:#25d366;
  --wa-deep:#128c7e;
  --wa-ink:#0b3d2c;
}

.wa-icon{width:1.05em;height:1.05em;flex-shrink:0;}

/* ---------- Top bar WhatsApp link ---------- */
.topbar-wa{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px;border-radius:var(--r-pill);
  background:rgba(37,211,102,.16);
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.5);
  color:#8ff0b8;font-weight:700;
  transition:background .28s var(--ease),color .28s var(--ease),transform .28s var(--ease);
}
.topbar-wa:hover{background:var(--wa);color:#04241a;transform:translateY(-1px);}

/* ---------- Division switcher (lives in the sticky header) ---------- */
.switch{
  display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
  padding:4px;border-radius:var(--r-pill);
  background:var(--bg-soft);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.switch-opt{
  padding:9px 18px;border-radius:var(--r-pill);
  font-size:.83rem;font-weight:800;white-space:nowrap;
  color:var(--ink-3);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.switch-opt:hover{color:var(--ink);background:var(--surface);}
.switch-opt.is-active{
  background:linear-gradient(135deg,var(--brand-600),var(--brand-800));
  color:#fff;
  box-shadow:0 8px 18px -8px var(--glow-green);
}
.switch-opt.is-active:hover{color:#fff;}

/* The header now carries brand + switcher + nav, so the nav takes the slack. */
.header-inner>.nav{margin-left:auto;}

/* ---------- WhatsApp floating button ---------- */
.fab-wa{
  background:linear-gradient(135deg,var(--wa),var(--wa-deep));
  color:#fff;
  box-shadow:0 14px 32px -10px rgba(18,140,126,.6),0 0 0 1px rgba(37,211,102,.45);
}
.fab-wa:hover{
  box-shadow:0 20px 42px -10px rgba(18,140,126,.7),0 0 34px -4px rgba(37,211,102,.65);
  transform:translateY(-3px);
}
.fab-wa svg{width:22px;height:22px;}

/* ---------- Contact action buttons ---------- */
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.ca{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:var(--r-pill);
  font-size:.88rem;font-weight:800;
  color:var(--brand-700);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
  transition:transform .28s var(--ease),background .28s var(--ease),
             color .28s var(--ease),box-shadow .28s var(--ease);
}
.ca:hover{
  transform:translateY(-3px);background:var(--brand-100);
  box-shadow:inset 0 0 0 1.5px var(--brand-400);
}
.ca-wa{
  background:linear-gradient(135deg,var(--wa),var(--wa-deep));
  color:#fff;box-shadow:0 10px 24px -12px rgba(18,140,126,.7);
}
.ca-wa:hover{
  background:linear-gradient(135deg,var(--wa),var(--wa-deep));color:#fff;
  box-shadow:0 18px 34px -12px rgba(18,140,126,.75),0 0 26px -8px rgba(37,211,102,.6);
}

/* ---------- Footer WhatsApp ---------- */
.footer-col a[href^="https://wa.me"]{color:#8ff0b8;font-weight:700;}
.footer-col a[href^="https://wa.me"]:hover{color:var(--wa);}

/* =====================================================================
   Responsive — switcher stays reachable at every width
   ===================================================================== */
@media (max-width:1240px){
  .switch-opt{padding:8px 13px;font-size:.78rem;}
}

@media (max-width:900px){
  /* The switcher stays in the header bar next to the hamburger so changing
     division never means opening a menu or scrolling back to the top. */
  .header-inner{gap:10px;}
  .switch{margin-left:auto;}
  .switch-opt{padding:8px 12px;font-size:.76rem;}
  .header-inner>.nav{margin-left:0;}
  .topbar-inner{flex-direction:column;gap:8px;}
}

@media (max-width:640px){
  .brand-logo{height:38px;}
  .site-header.scrolled .brand-logo{height:34px;}
  .switch{padding:3px;}
  .switch-opt{padding:7px 10px;font-size:.72rem;}
  .contact-actions .ca{flex:1 1 100%;justify-content:center;}
  .topbar-wa{width:100%;justify-content:center;}
}

@media (max-width:360px){
  .brand{display:none;}
}

/* =====================================================================
   Readability, theme toggle, and theme-safe tinted surfaces
   =====================================================================
   Loaded last so these win over the component rules above.

   The core bug this fixes: several panels were built as a gradient from a
   fixed light tint (--gold-100) to a themed --surface, while their text used a
   themed ink colour. In dark mode the tint stayed light but the text went
   light too, so the first lines of copy vanished. Tinted surfaces are now
   solid, themed tokens instead of cross-theme gradients.
   ===================================================================== */

:root{
  --brand-text:#0b6844;
  --gold-text:#815b08;

  --surface-amber:#fdf5e0;
  --line-amber:#e0bc63;
  --ink-amber:#4a3a0d;

  --surface-green:#eaf7f0;
  --line-green:#9fd9bf;
}

:root[data-theme="dark"]{
  --brand-text:#63d9a8;
  --gold-text:#f2c94f;

  --gold-100:#33290f;
  --surface-amber:#2b2411;
  --line-amber:#6d5a20;
  --ink-amber:#f0e3c2;

  --surface-green:#0f3325;
  --line-green:#2c6349;

  --on-dark-2:rgba(233,250,241,.88);
}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;
  border:none;border-radius:50%;cursor:pointer;
  background:var(--bg-soft);color:var(--brand-text);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
  transition:background .28s var(--ease),color .28s var(--ease),
             transform .28s var(--ease),box-shadow .28s var(--ease);
}
.theme-toggle:hover{
  transform:translateY(-2px);
  background:var(--surface);color:var(--gold-text);
  box-shadow:inset 0 0 0 1.5px var(--gold-400),0 8px 18px -10px var(--glow-gold);
}
.theme-toggle svg{width:20px;height:20px;}
.theme-toggle .icon-sun{display:none;}
.theme-toggle .icon-moon{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

/* ---------- Compact switch label ---------- */
.sw-short{display:none;}

/* ---------- Accent text: readable on either theme ---------- */
.eyebrow{color:var(--brand-text);}
.u-accent,
.stat-num,
.stat-head{
  background:linear-gradient(115deg,var(--brand-text),var(--gold-text));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ct-link{color:var(--brand-text);border-bottom-color:var(--brand-text);}
.ct-link:hover{color:var(--gold-text);border-bottom-color:var(--gold-text);}
.ca{color:var(--brand-text);}
.ca-wa,.ca-wa:hover{color:#fff;}
.btn-outline-green{color:var(--brand-text);box-shadow:inset 0 0 0 2px var(--brand-text);}
.btn-outline-green:hover{box-shadow:inset 0 0 0 2px var(--brand-text),0 14px 30px -14px var(--glow-green);}
.type-list li span{color:var(--gold-text);}
.rate-pct{color:var(--brand-text);}
.rate-card-green .rate-kicker{color:var(--brand-text);}
.rate-kicker,
.stat-sub,
.details dt,
.panel-sub-dark,
.cost-list dt,
.contact-div-label,
.notice-band h3,
.callout strong,
.div-tag{color:var(--gold-text);}
.div-tag-current{color:var(--brand-text);}
.why-n{
  background:linear-gradient(135deg,var(--brand-text),var(--gold-text));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.72;
}
.why:hover .why-n{opacity:1;}

/* ---------- Tinted surfaces: solid and themed ---------- */
.panel-amber,
.rate-card-amber{
  background:var(--surface-amber);
  border-color:var(--line-amber);
}
.rate-card-green{
  background:var(--surface-green);
  border-color:var(--line-green);
}
.notice-band{
  background:var(--surface-amber);
  border-color:var(--line-amber);
}
.callout{
  background:var(--surface-amber);
  border-left-color:var(--gold-500);
}
.callout p{color:var(--ink-amber);}
.div-tag{background:var(--surface-amber);}
.div-tag-current{background:var(--surface-green);}
.note{background:var(--bg-soft);}
.note code{background:var(--surface-green);color:var(--brand-text);}

/* ---------- Small text: raise the floor ---------- */
.lf-label,
.reg-label,
.div-tag,
.stat-sub{font-size:.75rem;}
.details dt{font-size:.76rem;}
.contact-div-label,
.rate-kicker,
.callout strong{font-size:.77rem;}
.form-note,
.footer-legal p{font-size:.83rem;}
.footer-inner p{font-size:.85rem;}
.hero-fineprint{color:rgba(233,250,241,.86);font-size:.85rem;}
.footer-legal p{color:rgba(233,250,241,.78);}
.footer-col a,
.footer-addr,
.footer-brand p{color:rgba(233,250,241,.88);}
.stat-label{color:var(--ink-2);}
.rate-fine,
.callout-fine{opacity:1;color:var(--ink-3);}

/* ---------- Focus visibility on dark grounds ---------- */
.hero :focus-visible,
.topbar :focus-visible,
.site-footer :focus-visible,
.dark-band :focus-visible,
.who-panel :focus-visible,
.area :focus-visible{outline-color:var(--gold-300);}


/* =====================================================================
   Small-screen header + hero fit
   =====================================================================
   The header carries brand, division switcher, theme toggle and menu button
   on one row, so each step down trims it rather than letting it wrap or push
   the page sideways.
   ===================================================================== */

/* Drop "Micro" from the switcher before the row gets tight. */
@media (max-width:560px){
  .sw-full{display:none;}
  .sw-short{display:inline;}
}

/* Once the hero stacks, the offset sub-image must stay inside the viewport. */
@media (max-width:900px){
  .hv-sub{left:0;}
  .hero-visual{margin-inline:auto;}
}

@media (max-width:480px){
  .container,
  .header-inner,
  .topbar-inner,
  .hero-inner{padding-left:16px;padding-right:16px;}
  .header-inner{gap:8px;padding-top:8px;padding-bottom:8px;}
  .brand-logo{height:32px;}
  .site-header.scrolled .brand-logo{height:30px;}
  .theme-toggle{width:36px;height:36px;}
  .theme-toggle svg{width:17px;height:17px;}
  .nav-toggle{padding:8px;}
  .nav-toggle span{width:22px;}
  .switch-opt{padding:7px 11px;font-size:.73rem;}
  .hero{padding-left:0;padding-right:0;}
}

@media (max-width:380px){
  .switch-opt{padding:7px 9px;font-size:.7rem;}
  .theme-toggle{width:34px;height:34px;}
}

/* =====================================================================
   Depth & polish
   =====================================================================
   Layered shadows, an ambient page wash, texture on the tinted sections and
   glow on the accents. Everything below is built from theme tokens so the
   light and dark palettes each get their own version rather than one being a
   washed-out copy of the other.
   ===================================================================== */

:root{
  --edge-hi:rgba(255,255,255,.75);
  --wash-a:rgba(20,154,103,.13);
  --wash-b:rgba(227,169,26,.11);
  --dot:rgba(11,104,68,.09);

  --shadow-sm:0 1px 2px rgba(6,51,31,.05), 0 4px 12px -4px rgba(6,51,31,.09);
  --shadow:0 2px 4px rgba(6,51,31,.05), 0 14px 30px -10px rgba(6,51,31,.15);
  --shadow-lg:0 4px 10px rgba(6,51,31,.06), 0 32px 64px -20px rgba(6,51,31,.28);
}

:root[data-theme="dark"]{
  --edge-hi:rgba(255,255,255,.07);
  --wash-a:rgba(43,188,133,.14);
  --wash-b:rgba(245,195,61,.10);
  --dot:rgba(99,217,168,.10);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 14px -4px rgba(0,0,0,.5);
  --shadow:0 2px 6px rgba(0,0,0,.45), 0 16px 34px -10px rgba(0,0,0,.6);
  --shadow-lg:0 6px 14px rgba(0,0,0,.5), 0 36px 70px -20px rgba(0,0,0,.75);
}

/* ---------- Ambient wash behind the untinted sections ---------- */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 42% at 10% 2%,var(--wash-a),transparent 68%),
    radial-gradient(52% 40% at 94% 10%,var(--wash-b),transparent 68%),
    radial-gradient(46% 38% at 50% 100%,var(--wash-a),transparent 70%);
}

/* ---------- Texture on the tinted sections ---------- */
.section-soft{
  background-color:var(--bg-soft);
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);
  background-size:24px 24px;
}

/* ---------- Section headings get a soft halo ---------- */
.head{position:relative;isolation:isolate;}
.head::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-56px;top:-46px;width:300px;height:190px;
  background:radial-gradient(ellipse at center,var(--wash-b),transparent 70%);
  filter:blur(38px);opacity:.9;
}

/* ---------- Panels: layered shadow + top highlight ---------- */
.card,
.panel,
.value,
.why,
.astep,
.vm-card,
.div-card,
.type-list li,
.contact-card,
.contact-form,
.rate-card{
  box-shadow:var(--shadow-sm),inset 0 1px 0 var(--edge-hi);
}
.card:hover,
.panel:hover,
.div-card:hover,
.rate-card:hover{box-shadow:var(--shadow-lg),inset 0 1px 0 var(--edge-hi);}
.value:hover{box-shadow:var(--shadow-lg),inset 0 1px 0 var(--edge-hi),0 0 44px -16px var(--glow-gold);}
.why:hover,
.astep:hover,
.vm-card:hover{box-shadow:var(--shadow-lg),inset 0 1px 0 var(--edge-hi),0 0 46px -18px var(--glow-green);}

/* ---------- Icon badges lift off the surface ---------- */
.card-icon,
.value-badge,
.vm-icon,
.step-num,
.astep-num,
.roof-icon,
.notice-icon,
.dstep span,
.elig span{filter:drop-shadow(0 6px 14px rgba(6,51,31,.22));}

/* ---------- Stat strip: gradient dividers and a glow seat ---------- */
.stats{
  background:linear-gradient(120deg,var(--brand-400),var(--gold-400) 55%,var(--brand-400));
  box-shadow:var(--shadow-lg),0 0 60px -26px var(--glow-green);
}

/* ---------- Service index chips ---------- */
.svc-index-list a{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 16px -10px rgba(0,0,0,.55);}

/* ---------- Moving sheen across the CTA band ---------- */
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);
  background-size:280% 100%;
}
@media (prefers-reduced-motion:no-preference){
  .cta-band::after{animation:sheen 9s ease-in-out infinite;}
}
@keyframes sheen{
  0%,100%{background-position:120% 0;}
  50%{background-position:-20% 0;}
}

/* ---------- Hero photo frames ---------- */
.hv-main{box-shadow:0 40px 80px -30px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.16),0 0 90px -40px var(--glow-gold);}

/* ---------- Nav polish ---------- */
.nav-cta{white-space:nowrap;}
.nav-cta:hover{box-shadow:0 18px 34px -12px var(--glow-green),0 0 30px -8px var(--glow-green);}
.switch{box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-sm);}

/* ---------- Footer lift ---------- */
.site-footer{box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}

/* Keep the decoration from ever creating a scrollbar. */
body{overflow-x:hidden;}


/* =====================================================================
   Form: honeypot + submission status
   ===================================================================== */

/* Off-screen rather than display:none — hidden fields are skipped by some
   bots, and this keeps the decoy in the DOM where they will still fill it. */
.hp-field{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

.form-status{
  margin:0;padding:0;font-size:.9rem;font-weight:600;line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease),opacity .3s var(--ease),padding .3s var(--ease);
}
.form-status.is-busy,
.form-status.is-ok,
.form-status.is-error{
  max-height:200px;opacity:1;
  padding:13px 16px;border-radius:var(--r-sm);
}
.form-status.is-busy{
  background:var(--bg-soft);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.form-status.is-ok{
  background:var(--surface-green);color:var(--brand-text);
  box-shadow:inset 0 0 0 1.5px var(--line-green);
}
.form-status.is-error{
  background:var(--surface-amber);color:var(--ink-amber);
  box-shadow:inset 0 0 0 1.5px var(--line-amber);
}

button[type="submit"][disabled]{opacity:.65;cursor:progress;}