:root{
  --dark:#24272e;        /* charcoal base */
  --dark-2:#2b2f37;      /* raised panel */
  --dark-3:#353a43;      /* card */
  --ink:#1e2127;         /* deep charcoal */
  --yellow:#f5b01e;
  --yellow-soft:rgba(245,176,30,.13);
  --cream:#eef0f3;
  --muted-d:#9aa1ab;     /* muted on dark */
  --light:#ffffff;
  --light-2:#f3f4f6;     /* grey light section */
  --text-l:#1d2025;      /* text on light */
  --muted-l:#5c626c;     /* muted on light */
  --line-d:rgba(255,255,255,.09);
  --line-l:rgba(20,22,26,.10);
  /* icons are supporting detail, never the focus — one muted tone everywhere.
     Yellow stays reserved for eyebrows, links, CTAs and confirmation ticks. */
  --icon:#6b7280;        /* on light backgrounds */
  --icon-d:#98a0ab;      /* on dark backgrounds  */
  /* brushed charcoal: diagonal grain + soft sheen + dark→light diagonal sweep */
  --brush:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,.03) 1px 2px,transparent 2px 5px);
  --sheen:radial-gradient(140% 100% at 76% 14%,rgba(255,255,255,.09),rgba(255,255,255,0) 58%);
  --charcoal:linear-gradient(118deg,#141720 0%,#1e232c 34%,#333a45 72%,#4b525f 100%);
  --charcoal-bg:var(--brush),var(--sheen),var(--charcoal);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--dark);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;color:var(--text-l);}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
::selection{background:var(--yellow);color:var(--ink);}
h1,h2,h3,.disp{font-family:'Oswald',sans-serif;}
.eyebrow{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:3px;font-size:13px;color:var(--yellow);text-transform:uppercase;}
.btn-y{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:var(--ink);font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:15px;padding:14px 26px;border-radius:6px;box-shadow:0 12px 30px rgba(245,176,30,.28);transition:transform .18s, box-shadow .18s;border:none;cursor:pointer;}
.btn-y:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(245,176,30,.42);}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1.5px solid rgba(255,255,255,.22);color:var(--cream);font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:15px;padding:13px 24px;border-radius:6px;transition:border-color .18s,color .18s;}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow);}
.wrap{max-width:1200px;margin:0 auto;padding:0 5vw;}
.h2{font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:1.03;letter-spacing:.5px;text-transform:uppercase;}
section{overflow:hidden;}
.fade{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
.fade.in{opacity:1;transform:none;}

/* top brand rule with glow */
.brand-rule{position:sticky;top:0;z-index:70;height:4px;background:linear-gradient(90deg,#c98a09 0%,var(--yellow) 42%,#ffd873 50%,var(--yellow) 58%,#c98a09 100%);background-size:200% 100%;animation:brandGlow 6s linear infinite;box-shadow:0 0 14px rgba(245,176,30,.55),0 1px 0 rgba(0,0,0,.25);overflow:hidden;}
.brand-rule::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%,transparent 100%);transform:translateX(-100%);animation:brandSweep 3s ease-in-out infinite;}
.h-1{height:4px;}
@keyframes brandGlow{from{background-position:200% 0;}to{background-position:0 0;}}
@keyframes brandSweep{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}
@media (prefers-reduced-motion: reduce){.brand-rule{animation:none;}.brand-rule::after{animation:none;display:none;}}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(36,39,46,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d);}
.navbar{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-chip{display:inline-flex;align-items:center;background:transparent;border-radius:0;padding:0;box-shadow:none;}
.brand-chip img{height:54px;width:auto;display:block;margin-top:4px;}
.brand .bn{font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;letter-spacing:1px;color:#fff;line-height:1;}
.brand .bs{font-size:10px;letter-spacing:2.5px;color:var(--yellow);font-weight:700;}
.nav-links{display:flex;gap:30px;font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:14px;color:#cdd2d9;align-items:center;}
.nav-links a:hover{color:var(--yellow);}
.nav-right{display:flex;align-items:center;gap:26px;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;}

/* hero */
.hero{position:relative;background:var(--charcoal-bg);background-color:var(--dark);min-height:88vh;display:flex;align-items:center;}
.hero-photo{position:absolute;inset:0;z-index:0;background:var(--ink);}
.hero-photo img,.hero-photo video{width:100%;height:100%;object-fit:cover;}
/* video sits over the poster and cross-fades in once it's genuinely playing */
.hero-photo .hero-video{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none;}
.hero-photo .hero-video.ready{opacity:1;}
@media (prefers-reduced-motion:reduce){.hero-photo .hero-video{display:none;}}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(18,21,29,.95) 0%,rgba(18,21,29,.86) 42%,rgba(18,21,29,.66) 78%,rgba(18,21,29,.5) 100%);}
/* Hero and the quote section both run edge-to-edge inside the 1200px wrap —
   wider than the standard 5vw-inset sections, and identical to each other so
   their two lead cards match. Side padding returns below 1260px (see the media
   query further down) so content never touches the screen edge. */
.hero-inner{position:relative;z-index:2;padding:64px 0;width:100%;}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;}
.hero h1{color:#fff;font-weight:700;font-size:clamp(42px,5.4vw,74px);line-height:.98;letter-spacing:1px;text-transform:uppercase;margin:16px 0 8px;}
.hero h1 .y{color:var(--yellow);}
.hero p.sub{color:#c3c9d2;font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;max-width:520px;margin:14px 0 26px;font-weight:500;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;}
.hero-ticks{display:flex;flex-direction:column;gap:10px;margin:8px 0 26px;}
.hero-ticks .t{display:flex;align-items:center;gap:11px;color:#dfe3e8;font-weight:600;font-size:15px;}
.hero-ticks .t span{width:22px;height:22px;border-radius:50%;background:rgba(245,176,30,.18);color:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;}
.badges{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.badge{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border:1px solid var(--line-d);border-radius:8px;padding:9px 14px;font-size:12.5px;font-weight:600;color:#c7ccd4;}
.badge b{color:var(--yellow);font-family:'Oswald',sans-serif;}
.stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:34px;}
.stat .n{font-family:'Oswald',sans-serif;font-weight:700;font-size:34px;color:var(--yellow);line-height:1;}
.stat .l{font-size:12px;color:var(--muted-d);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-top:4px;}
.stat-div{width:1px;background:var(--line-d);}

/* lead card (hero + reusable) */
.lead-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);}
.lead-card-head{background:var(--charcoal-bg);background-color:var(--ink);color:#fff;padding:22px 26px;}
.offer-badge{display:inline-block;background:var(--yellow);color:var(--ink);font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:16px;padding:5px 12px;border-radius:5px;margin-bottom:21px;}
.lead-card-head h2{font-size:23px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.08;}
.lead-card-head ul{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:7px;}
.lead-card-head li{display:flex;align-items:center;gap:9px;font-size:13px;color:#c7ccd4;font-weight:500;}
.lead-card-head li b{color:var(--yellow);font-size:13px;}
.lead-card-body{padding:22px 26px 24px;}
.field{margin-bottom:13px;}
.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#6a707a;margin-bottom:6px;}
.field .req{color:#e0574d;}
.lead-card input,.lead-card select,.lead-card textarea{width:100%;background:#fff;border:1px solid #d7dbe0;border-radius:8px;padding:12px 13px;color:#1d2025;font-size:16px;font-family:'Manrope',sans-serif;transition:border-color .15s,box-shadow .15s;}
.lead-card input:focus,.lead-card select:focus,.lead-card textarea:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(245,176,30,.18);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.lead-card .btn-y{width:100%;justify-content:center;padding:15px;margin-top:6px;font-size:15px;}
.lead-fine{font-size:11.5px;color:#8a909a;text-align:center;margin-top:11px;line-height:1.5;}
.lead-call{font-size:12px;color:#6a707a;text-align:center;margin-top:9px;}
.lead-call a{color:#c98a0d;font-weight:800;}
.lead-success{padding:34px 26px 38px;text-align:center;}
.lead-success .ok{width:66px;height:66px;border-radius:50%;background:rgba(245,176,30,.16);color:#c98a0d;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.lead-success .ok svg{width:30px;height:30px;}
.lead-success-logo{width:100%;max-width:190px;height:auto;margin:26px auto 0;opacity:.9;}
.lead-success h3{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#1d2025;margin-bottom:8px;}
.lead-success p{color:#5c626c;font-size:15px;line-height:1.6;}
.lead-err{font-size:13px;color:#a3271c;background:#fdecea;border:1px solid #f6c9c3;border-radius:7px;padding:9px 12px;text-align:center;margin-top:10px;}

/* partner strip */
.strip{background:var(--yellow);padding:16px 0;overflow:hidden;}
.marquee{display:flex;gap:60px;white-space:nowrap;animation:scroll 20.8s linear infinite;font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;letter-spacing:1px;color:var(--ink);text-transform:uppercase;align-items:center;}
.marquee span{opacity:.85;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* feature (light) */
.feature{background:var(--light);padding:96px 0;}
.feature.grey{background:var(--light-2);}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.arc-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:480px;overflow:visible;}
.arc-img{position:relative;z-index:2;width:92%;height:452px;object-fit:cover;border-radius:16px;box-shadow:0 30px 60px rgba(20,22,26,.22);}
.arc,.arc-2,.arc-3{position:absolute;z-index:1;border-radius:50%;}
/* section A — ring top-left, glow lower-right, small dot upper-right */
.arc{width:300px;height:300px;top:-38px;left:-40px;border:46px solid var(--yellow);opacity:.26;}
.arc-2{width:260px;height:260px;bottom:-30px;right:-46px;background:radial-gradient(circle,rgba(245,176,30,.32),transparent 70%);}
.arc-3{width:118px;height:118px;top:34px;right:-30px;border:20px solid var(--yellow);opacity:.16;}
/* section B (alt) — scattered differently: ring lower-right, glow top-left, dot lower-left */
.arc-wrap.alt .arc{width:340px;height:340px;top:auto;left:auto;bottom:-52px;right:-46px;border-width:54px;opacity:.22;}
.arc-wrap.alt .arc-2{width:300px;height:300px;bottom:auto;right:auto;top:-48px;left:-40px;background:radial-gradient(circle,rgba(245,176,30,.30),transparent 70%);}
.arc-wrap.alt .arc-3{width:90px;height:90px;top:auto;right:auto;bottom:38px;left:-26px;border-width:16px;opacity:.2;}
.feat-txt h2{color:var(--text-l);margin:14px 0 16px;}
.feat-txt p{color:var(--muted-l);font-size:16.5px;line-height:1.65;font-weight:500;margin-bottom:18px;max-width:520px;}
.ticks{display:flex;flex-direction:column;gap:12px;margin:22px 0 28px;}
.tick{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--text-l);font-size:15.5px;}
.tick .c{width:24px;height:24px;border-radius:50%;background:var(--yellow-soft);color:#a9760a;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}

/* licensed (diagonal image left) */
.licensed{background:var(--light);padding:0 0 96px;}
/* when this section leads rather than follows a .feature, it needs its own
   top padding and a tone that keeps the light/grey rhythm going */
.licensed.grey{background:var(--light-2);padding:96px 0;}
.lic-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.lic-img{position:relative;height:440px;clip-path:polygon(0 0,100% 0,100% 84%,0 100%);border-radius:4px;overflow:hidden;}
.lic-img img{width:100%;height:100%;object-fit:cover;}
.accred{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0;}
.accred .a{background:var(--light-2);border:1px solid var(--line-l);border-radius:8px;padding:10px 14px;font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;letter-spacing:.5px;color:#333;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.accred .a b{color:var(--yellow);filter:brightness(.85);}

/* credentials grid */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:26px;}
.cred{background:var(--light-2);border:1px solid var(--line-l);border-radius:12px;padding:18px 18px;}
/* .cred .ci is styled in the icon-system block near the end of this file */
.cred h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-l);margin-bottom:5px;}
.cred p{font-size:13.5px;color:var(--muted-l);line-height:1.55;font-weight:500;}

/* dark band: power bill */
.band{background:var(--charcoal-bg);background-color:var(--dark);color:var(--cream);padding:0;position:relative;}
.band-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.band-txt{padding:96px 5vw 96px 0;max-width:600px;margin-left:auto;}
.band-txt h2{color:#fff;margin:14px 0 16px;}
.band-txt p{color:var(--muted-d);font-size:16.5px;line-height:1.65;font-weight:500;margin-bottom:26px;}
.band-img{position:relative;min-height:460px;}
.band-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);}

/* steps 1-2-3 */
.steps{background:var(--charcoal-bg);background-color:var(--ink);color:#fff;padding:92px 0;}
.steps-head{margin-bottom:52px;}
.steps-head h2{color:#fff;margin-top:12px;}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.step .ic{width:74px;height:74px;border-radius:50%;background:var(--dark-3);border:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:20px;}
.step h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:1px;color:var(--yellow);margin-bottom:10px;}
.step p{color:var(--muted-d);font-size:15px;line-height:1.6;font-weight:500;}

/* areas we cover */
.areas{background:var(--light-2);padding:88px 0;}
.areas-head{text-align:center;max-width:640px;margin:0 auto 34px;}
.areas-head h2{color:var(--text-l);margin-top:10px;}
.areas-head p{color:var(--muted-l);font-size:16px;line-height:1.6;font-weight:500;margin-top:14px;}
/* auto-fit (not auto-fill) so the five regions share one row on desktop
   instead of leaving an empty track and wrapping the last one */
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;}
/* every tile identical height regardless of how long the suburb name is */
.area{background:#fff;border:1px solid var(--line-l);border-radius:11px;padding:0 16px;
  min-height:62px;font-size:14.5px;font-weight:600;color:var(--text-l);
  display:flex;align-items:center;gap:12px;line-height:1.25;
  transition:border-color .18s,transform .18s,box-shadow .18s;}
.area:hover{border-color:rgba(245,176,30,.55);transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,22,26,.08);}
/* only five regions now, so give them room on desktop: pin above the label,
   centred, and roughly double the height. Phones keep the compact row. */
@media (min-width:901px){
  .area{flex-direction:column;justify-content:center;text-align:center;gap:14px;
    min-height:132px;padding:22px 16px;font-size:17px;letter-spacing:.2px;}
  .area::before{width:34px;height:34px;}
}
/* yellow pin — masked SVG so it takes the brand colour cleanly at any size */
.area::before{content:"";width:26px;height:26px;flex-shrink:0;background:var(--yellow);
  -webkit-mask:var(--pin-mask) center/contain no-repeat;mask:var(--pin-mask) center/contain no-repeat;}
.areas-note{text-align:center;margin-top:24px;color:var(--muted-l);font-size:14.5px;font-weight:600;}

/* savings calculator (light) */
.calc{background:var(--light);padding:96px 0;}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.calc-txt h2{color:var(--text-l);margin:14px 0 14px;}
.calc-txt p{color:var(--muted-l);font-size:16px;line-height:1.6;font-weight:500;margin-bottom:30px;}
.rangewrap .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.rangewrap .lbl{font-size:14px;color:var(--muted-l);font-weight:600;}
.rangewrap .val{font-family:'Oswald',sans-serif;font-size:28px;font-weight:700;color:#c98a0d;}
input[type=range]{width:100%;accent-color:var(--yellow);height:6px;cursor:pointer;}
.ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted-l);font-weight:600;margin-top:6px;}
.result{background:var(--charcoal-bg);background-color:var(--dark);color:#fff;border-radius:18px;padding:38px;box-shadow:0 30px 70px rgba(20,22,26,.25);}
.result .cap{font-size:12.5px;color:var(--muted-d);font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.result .big{font-family:'Oswald',sans-serif;font-size:clamp(42px,6vw,60px);font-weight:700;color:var(--yellow);line-height:1.05;margin:6px 0 4px;}
.result .r{display:flex;justify-content:space-between;margin-bottom:13px;}
.result .r span:first-child{color:var(--muted-d);font-weight:500;}
.result .r span:last-child{font-weight:700;}
.result hr{border:none;height:1px;background:var(--line-d);margin:20px 0;}

/* reviews */
.reviews{background:var(--light-2);padding:92px 0;}
.rev-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--light);border:1px solid var(--line-l);border-radius:14px;padding:20px 26px;margin-bottom:26px;}
.rev-score{display:flex;align-items:center;gap:14px;}
.rev-score .num{font-family:'Oswald',sans-serif;font-size:34px;font-weight:700;color:var(--text-l);}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.rev-card{background:var(--light);border:1px solid var(--line-l);border-radius:14px;padding:24px;box-shadow:0 6px 20px rgba(20,22,26,.05);}
.rev-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.rev-av{width:40px;height:40px;border-radius:50%;background:var(--yellow-soft);color:#a9760a;display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-weight:700;}
.rev-name{font-weight:700;font-size:14.5px;color:var(--text-l);}
.rev-when{font-size:12px;color:var(--muted-l);}
.rev-stars{color:var(--yellow);letter-spacing:2px;font-size:14px;margin-bottom:10px;}
.rev-card p{color:var(--muted-l);font-size:14.5px;line-height:1.6;font-weight:500;}

/* quote (in-page) */
.quote{background:var(--charcoal-bg);background-color:var(--dark);color:var(--cream);padding:96px 0;}
/* same column split, gap and edge-to-edge width as the hero, so the two lead
   cards come out identical */
.quote-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;
  padding-left:0;padding-right:0;}
@media (max-width:1260px){
  .hero-inner,.quote-grid{padding-left:5vw;padding-right:5vw;}
}
.quote-txt h2{color:#fff;margin-bottom:16px;}
.quote-txt p{color:var(--muted-d);font-size:16.5px;line-height:1.6;font-weight:500;margin-bottom:26px;}

/* page hero (subpages) */
.page-hero{position:relative;background:var(--charcoal-bg);background-color:var(--dark);color:#fff;padding:66px 0 54px;}
.page-hero > .wrap{position:relative;z-index:1;}
/* optional background photo behind a subpage hero */
.ph-photo{position:absolute;inset:0;z-index:0;}
.ph-photo img{width:100%;height:100%;object-fit:cover;}
.ph-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(18,21,29,.96) 0%,rgba(18,21,29,.9) 46%,rgba(18,21,29,.74) 78%,rgba(18,21,29,.62) 100%);}
.page-hero .eyebrow{margin-bottom:12px;}
.page-hero h1{color:#fff;font-weight:700;font-size:clamp(36px,5vw,60px);line-height:1;letter-spacing:1px;text-transform:uppercase;}
.page-hero p{color:#c3c9d2;font-size:17px;line-height:1.6;font-weight:500;max-width:600px;margin-top:16px;}
.crumb{font-size:13px;color:var(--muted-d);margin-bottom:18px;font-weight:600;}
.crumb a:hover{color:var(--yellow);}

/* form page layout */
.form-sec{background:var(--light-2);padding:70px 0 90px;}
.form-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start;}
.form-panel{background:#fff;border:1px solid var(--line-l);border-radius:16px;padding:34px;box-shadow:0 20px 50px rgba(20,22,26,.08);}
.form-panel h2{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-l);margin-bottom:6px;}
.form-panel .lede{color:var(--muted-l);font-size:15px;line-height:1.6;margin-bottom:22px;}
.form-panel .field label{color:#5c626c;}
.form-panel input,.form-panel select,.form-panel textarea{width:100%;background:#fff;border:1px solid #d7dbe0;border-radius:8px;padding:12px 13px;color:#1d2025;font-size:16px;font-family:'Manrope',sans-serif;transition:border-color .15s,box-shadow .15s;}
.form-panel textarea{min-height:120px;resize:vertical;}
.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(245,176,30,.18);}
.form-panel .btn-y{width:100%;justify-content:center;padding:16px;margin-top:6px;}
/* Same construction as .lead-card — white body, charcoal header bar. */
.info-card{background:#fff;border-radius:16px;overflow:hidden;padding:0;color:var(--text-l);
  border:1px solid var(--line-l);box-shadow:0 30px 70px rgba(20,22,26,.15);}
.info-card h3{background:var(--charcoal-bg);background-color:var(--ink);color:var(--yellow);
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;
  margin:0;padding:19px 26px;}
.info-card-body{padding:24px 26px 26px;}
.info-row{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;}
.info-row .iv{font-size:15px;color:var(--text-l);font-weight:600;line-height:1.45;}
.info-row .iv a:hover{color:#c98a0d;}
.info-row .il{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-l);font-weight:700;margin-bottom:3px;}
.info-card .divider{height:1px;background:var(--line-l);margin:22px 0;}
.info-sub{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-l);font-weight:700;margin-bottom:12px;}
/* socials are built for dark panels — give them a light-surface variant here */
/* socials are built for dark panels — light-surface variant for the white card.
   The footer keeps the original dark treatment. */
.info-card .socials a{background:var(--light-2);border-color:var(--line-l);color:var(--muted-l);}
.info-card .socials a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow);}

/* socials */
.socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.socials a{width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;color:#cdd2d9;transition:background .15s,color .15s,border-color .15s;}
.socials a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow);}
.socials svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* footer */
footer{background:var(--dark);color:var(--cream);padding:64px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;}
.foot-col h2{font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--yellow);margin-bottom:16px;}
/* direct children only — otherwise this beats `.socials a{display:flex}` on
   source order and the social glyphs lose their centring */
.foot-col > a,.foot-col > span{display:block;color:#b7bcc4;font-size:14.5px;margin-bottom:10px;}
.foot-col a:hover{color:var(--yellow);}
/* contact line with a leading icon — icon sits a shade greyer than the text so
   it reads as a marker rather than part of the number */
.foot-col a.foot-ico{display:flex;align-items:center;gap:9px;}
.foot-col a.foot-ico svg{width:16px;height:16px;flex-shrink:0;color:#7e848e;
  stroke:currentColor;fill:none;transition:color .15s;}
.foot-col a.foot-ico:hover svg{color:var(--yellow);}
.foot-brand{margin-bottom:18px;}
.foot-brand img{width:100%;max-width:230px;height:auto;display:block;}
.foot-legal{color:#8a909a;font-size:13px;line-height:1.6;margin-top:16px;}
.foot-legal b{color:#b7bcc4;font-weight:700;}
.foot-bar{border-top:1px solid var(--line-d);margin-top:44px;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#7c828c;}

@media (max-width:900px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .hero-photo::after{background:linear-gradient(180deg,rgba(18,21,29,.9),rgba(18,21,29,.94));}
  .hero-grid,.feat-grid,.lic-grid,.band-grid,.steps-grid,.calc-grid,.quote-grid,.foot-grid,.form-wrap{grid-template-columns:1fr;gap:36px;}
  .hero{min-height:0;}
  /* keep the side gutter — a `padding:48px 0 56px` shorthand here zeroes it */
  .hero-inner{padding:48px 5vw 56px;}
  .band-txt{padding:70px 5vw;max-width:none;margin:0;}
  .band-img{min-height:300px;}
  .band-img img{clip-path:none;}
  .lic-img{height:300px;}
  .arc{width:340px;height:340px;border-width:38px;}
  .arc-2{width:250px;height:250px;}
  .arc-img{height:320px;}
  .steps-grid{gap:30px;}
  .arc-wrap{min-height:340px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .frow{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
}

/* ============================================================
   v2 — dropdown navigation, service pages, shared components
   ============================================================ */

/* ---------- desktop dropdown nav ---------- */
.nav-links{gap:26px;}
.ni{position:relative;display:flex;align-items:center;}
.ni > .nl{display:inline-flex;align-items:center;gap:7px;height:74px;padding:0;background:none;border:none;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:14px;color:#cdd2d9;
  transition:color .15s;}
.ni > .nl:hover,.ni.open > .nl,.ni.cur > .nl{color:var(--yellow);}
.ni > .nl .cv{width:9px;height:9px;flex-shrink:0;transition:transform .2s;opacity:.75;}
.ni.open > .nl .cv{transform:rotate(180deg);opacity:1;}
.ni.cur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow);border-radius:2px 2px 0 0;}

.dd{position:absolute;top:100%;left:50%;z-index:80;
  background:var(--brush),var(--sheen),linear-gradient(150deg,#171a22 0%,#1f242d 55%,#2b313b 100%);
  border:1px solid var(--line-d);border-top:2px solid var(--yellow);border-radius:0 0 14px 14px;
  box-shadow:0 34px 80px rgba(0,0,0,.62);padding:12px;
  text-transform:none;letter-spacing:normal;font-family:'Manrope',sans-serif;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.ni.open > .dd{opacity:1;visibility:visible;transform:translate(-50%,0);}
.dd.mega{width:min(620px,84vw);}
.dd.small{width:250px;padding:10px;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.mi{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:10px;transition:background .15s;}
.mi:hover{background:rgba(245,176,30,.10);}
/* .mi .mic is styled in the icon-system block near the end of this file */
.mi > span:last-child{min-width:0;}
.mi .mt{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.9px;text-transform:uppercase;color:#e8eaee;line-height:1.15;transition:color .15s;}
.mi:hover .mt{color:var(--yellow);}
.mi .md{display:block;font-size:11.5px;color:#8f96a1;font-weight:500;line-height:1.45;margin-top:5px;}
.dd .ml{display:block;padding:11px 12px;border-radius:9px;font-family:'Oswald',sans-serif;font-weight:500;font-size:13.5px;
  letter-spacing:1px;text-transform:uppercase;color:#cdd2d9;transition:background .15s,color .15s;}
.dd .ml:hover{background:rgba(245,176,30,.10);color:var(--yellow);}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line-d);margin-top:10px;padding:14px 12px 4px;}
.dd-foot .dt{font-size:12.5px;color:#8f96a1;font-weight:500;line-height:1.5;}
.dd-foot .da{font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--yellow);white-space:nowrap;}
.dd-foot .da:hover{text-decoration:underline;}

/* ---------- mobile nav ---------- */
.mnav{display:none;background:var(--dark-2);border-bottom:1px solid var(--line-d);padding:4px 5vw 20px;}
.mnav.open{display:block;}
.mnav a,.mnav .mh{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  color:#cdd2d9;padding:13px 0;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:1px;font-size:14px;
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;text-align:left;}
.mnav .mh .cv{width:10px;height:10px;transition:transform .2s;opacity:.7;}
.mgroup.open .mh{color:var(--yellow);}
.mgroup.open .mh .cv{transform:rotate(180deg);}
.msub{display:none;padding:2px 0 8px 14px;border-left:2px solid rgba(245,176,30,.35);margin:6px 0 10px;}
.mgroup.open .msub{display:block;}
.msub a{font-size:13px;padding:10px 0;border-bottom:none;color:#a8aeb8;letter-spacing:.8px;}
.msub a:hover{color:var(--yellow);}
.mnav .mcta{color:var(--yellow);font-weight:600;border-bottom:none;padding-top:16px;}

/* keep the three hero stats on one row — labels wrap instead */
.hero .stats{gap:24px;}
.hero .stat{max-width:112px;}
.hero .stat .l{line-height:1.35;letter-spacing:.3px;}

/* ---------- generic sections ---------- */
.sec{padding:92px 0;}
.sec.light{background:var(--light);}
.sec.grey{background:var(--light-2);}
.sec.dark{background:var(--charcoal-bg);background-color:var(--dark);color:var(--cream);}
.sec.ink{background:var(--charcoal-bg);background-color:var(--ink);color:var(--cream);}
.sec-head{max-width:700px;margin-bottom:46px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head h2{margin-top:12px;color:var(--text-l);}
.sec-head p{font-size:16.5px;line-height:1.65;font-weight:500;margin-top:16px;color:var(--muted-l);}
.sec.dark .sec-head h2,.sec.ink .sec-head h2{color:#fff;}
.sec.dark .sec-head p,.sec.ink .sec-head p{color:var(--muted-d);}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:22px;}
.svc-card{background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:28px;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(20,22,26,.11);border-color:rgba(245,176,30,.55);}
.sec.dark .svc-card,.sec.ink .svc-card{background:rgba(255,255,255,.045);border-color:var(--line-d);}
/* .svc-card .si is styled in the icon-system block near the end of this file */
.svc-card h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-l);margin-bottom:10px;line-height:1.15;}
.svc-card p{color:var(--muted-l);font-size:14.5px;line-height:1.62;font-weight:500;flex:1;}
.sec.dark .svc-card h3,.sec.ink .svc-card h3{color:#fff;}
.sec.dark .svc-card p,.sec.ink .svc-card p{color:var(--muted-d);}
.svc-card .more{margin-top:18px;font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;color:#c98a0d;}
.sec.dark .svc-card .more,.sec.ink .svc-card .more{color:var(--yellow);}
.svc-card:hover .more{text-decoration:underline;}

/* ---------- checklist / detail list ---------- */
.list-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 40px;}
.li{display:flex;gap:13px;align-items:flex-start;}
.li .c{width:24px;height:24px;border-radius:50%;background:var(--yellow-soft);color:#a9760a;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;margin-top:2px;}
.li > span:last-child{min-width:0;}
.li .lt{display:block;font-weight:700;font-size:15.5px;color:var(--text-l);line-height:1.3;}
.li .ld{display:block;font-size:14.5px;color:var(--muted-l);line-height:1.6;font-weight:500;margin-top:6px;}
.sec.dark .li .lt,.sec.ink .li .lt{color:#fff;}
.sec.dark .li .ld,.sec.ink .li .ld{color:var(--muted-d);}
.sec.dark .li .c,.sec.ink .li .c{background:rgba(245,176,30,.18);color:var(--yellow);}

/* about page: story + summary panel. Was an inline style, which no media query
   could override — so it never collapsed on a phone. */
.about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start;}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:36px;}}

/* ---------- photo in a narrow aside column (about page) ---------- */
.aside-photo{margin:22px 0 0;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-l);box-shadow:0 20px 46px rgba(20,22,26,.14);}
.aside-photo img{width:100%;height:auto;display:block;}
.aside-photo figcaption{padding:14px 18px 16px;background:#fff;
  font-size:12.5px;line-height:1.6;color:var(--muted-l);font-weight:500;}

/* ---------- labelled sub-sections (pages covering several services) ---------- */
.subsec{margin-bottom:54px;}
.subsec:last-child{margin-bottom:0;}
.subsec-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:28px;
  padding-bottom:22px;border-bottom:1px solid var(--line-l);}
.subsec-head .si{width:48px;height:48px;border-radius:12px;}
.subsec-head .si svg{width:23px;height:23px;}
.subsec-head h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:23px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--text-l);margin-bottom:9px;line-height:1.1;}
.subsec-head p{color:var(--muted-l);font-size:15.5px;line-height:1.62;font-weight:500;max-width:640px;}

/* ---------- at-a-glance spec panel ----------
   White card with a charcoal header bar, same construction as .lead-card —
   it needs to read as a distinct object against the dark page hero. */
.spec{background:#fff;border-radius:16px;overflow:hidden;padding:0;color:var(--text-l);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 34px 80px rgba(0,0,0,.45);}
.spec h3{background:var(--charcoal-bg);background-color:var(--ink);color:var(--yellow);
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
  margin:0;padding:17px 26px;}
.spec .sr{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 26px;border-bottom:1px solid var(--line-l);}
.spec .sr:first-of-type{padding-top:18px;}
.spec .sr:last-of-type{border-bottom:none;}
.spec .sr span:first-child{color:var(--muted-l);font-weight:500;font-size:14px;}
.spec .sr span:last-child{font-weight:700;font-size:14.5px;text-align:right;color:var(--text-l);}
/* .spec .spec-note, not .spec-note — inside a page hero it would otherwise
   lose to `.page-hero p` and pick up pale 17px hero body styling. */
.spec .spec-note{margin:0;padding:16px 26px 20px;border-top:1px solid var(--line-l);
  font-size:12.5px;color:var(--muted-l);line-height:1.6;max-width:none;}

/* ---------- process steps (numbered) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:30px;}
.pstep .num{font-family:'Oswald',sans-serif;font-weight:700;font-size:46px;line-height:1;color:rgba(245,176,30,.34);}
.pstep h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;letter-spacing:.9px;text-transform:uppercase;margin:10px 0 9px;color:var(--text-l);}
.pstep p{color:var(--muted-l);font-size:14.5px;line-height:1.62;font-weight:500;}
.sec.dark .pstep h3,.sec.ink .pstep h3{color:var(--yellow);}
.sec.dark .pstep p,.sec.ink .pstep p{color:var(--muted-d);}

/* ---------- FAQ ---------- */
.faq{max-width:840px;}
.faq.center{margin:0 auto;}
.faq details{background:#fff;border:1px solid var(--line-l);border-radius:12px;margin-bottom:12px;overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.4px;color:var(--text-l);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:#c98a0d;}
.faq summary::after{content:"+";font-family:'Manrope',sans-serif;font-weight:700;font-size:23px;line-height:1;color:var(--yellow);flex-shrink:0;}
.faq details[open] summary::after{content:"\2212";}
.faq .fa{padding:0 22px 21px;color:var(--muted-l);font-size:15px;line-height:1.68;font-weight:500;}
.sec.dark .faq details,.sec.ink .faq details{background:rgba(255,255,255,.045);border-color:var(--line-d);}
.sec.dark .faq summary,.sec.ink .faq summary{color:#fff;}
.sec.dark .faq .fa,.sec.ink .faq .fa{color:var(--muted-d);}

/* ---------- manufacturer logo wall ---------- */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;}
.logo-tile{background:#fff;border:1px solid var(--line-l);border-radius:12px;height:104px;
  display:flex;align-items:center;justify-content:center;padding:20px 22px;
  transition:border-color .18s,transform .18s;}
.logo-tile:hover{border-color:rgba(245,176,30,.55);transform:translateY(-2px);}
.logo-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.logo-tile .txt{font-family:'Oswald',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--text-l);text-align:center;line-height:1.25;}

/* ---------- brand chips ---------- */
.bchips{display:flex;flex-wrap:wrap;gap:11px;}
.bchip{background:#fff;border:1px solid var(--line-l);border-radius:10px;padding:12px 18px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-l);}
.sec.dark .bchip,.sec.ink .bchip,.band .bchip,.quote .bchip{background:rgba(255,255,255,.055);border-color:var(--line-d);color:#e8eaee;}
.bgroup{background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:28px;}
.bgroup h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;letter-spacing:.9px;text-transform:uppercase;color:var(--text-l);margin-bottom:8px;}
.bgroup > p{color:var(--muted-l);font-size:14.5px;line-height:1.62;font-weight:500;margin-bottom:18px;}

/* ---------- CTA band ---------- */
/* Flat white — no diagonal grain or sweep. The hairline top rule keeps it from
   merging into the light section above it on pages where one precedes it. */
.cta{background:var(--light);color:var(--text-l);padding:78px 0;border-top:1px solid var(--line-l);}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;}
.cta-in .ct{flex:1 1 440px;}
.cta h2{color:var(--text-l);margin-top:12px;}
.cta p{color:var(--muted-l);font-size:16.5px;line-height:1.62;font-weight:500;margin-top:14px;max-width:580px;}
/* .btn-ghost is built for dark backgrounds — give it dark strokes in here */
.cta .btn-ghost{border-color:rgba(20,22,26,.24);color:var(--text-l);}
.cta .btn-ghost:hover{border-color:var(--yellow);color:#c98a0d;}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- page hero extras ---------- */
.page-hero.tall{padding:76px 0 66px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
/* The two main conversion points — hero and closing CTA — use a larger button
   than the inline ones elsewhere. Ghost padding is 1.5px lighter to offset its
   border, so both sit at the same outer height. */
.hero-btns .btn-y,.cta-btns .btn-y{font-size:17px;padding:19px 38px;letter-spacing:1.2px;}
.hero-btns .btn-ghost,.cta-btns .btn-ghost{font-size:17px;padding:17.5px 36px;letter-spacing:1.2px;}
.ph-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;}
/* full-width hero copy — used where the spec panel sits further down the page */
.ph-wide{max-width:860px;}
.ph-wide h1{font-size:clamp(38px,5.6vw,66px);}
.ph-wide > p{font-size:18.5px;line-height:1.62;max-width:760px;}
/* spec panel alongside the opening section heading */
.spec-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;margin-bottom:52px;}
.spec-grid .spec{box-shadow:0 24px 60px rgba(20,22,26,.13);border-color:var(--line-l);}
.ph-ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;}
.ph-ticks .t{display:flex;align-items:center;gap:9px;color:#dfe3e8;font-weight:600;font-size:14.5px;}
.ph-ticks .t span{width:20px;height:20px;border-radius:50%;background:rgba(245,176,30,.18);color:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex-shrink:0;}

/* ---------- prose (about / long copy) ---------- */
.prose{max-width:760px;}
.prose p{color:var(--muted-l);font-size:16.5px;line-height:1.78;font-weight:500;margin-bottom:20px;}
.prose .prose-h,
.prose h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-l);margin:40px 0 16px;}
.prose .lead{font-size:19px;line-height:1.7;color:var(--text-l);font-weight:600;}
.pull{border-left:3px solid var(--yellow);padding:6px 0 6px 22px;margin:30px 0;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:21px;line-height:1.4;letter-spacing:.4px;color:var(--text-l);}

/* ---------- promise list ---------- */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
/* solid panel, not a translucent wash — border animates to yellow on hover */
.pcard{background:#2d323b;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:22px 24px;display:flex;gap:14px;align-items:flex-start;position:relative;overflow:hidden;
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease,background .28s ease;}
/* a yellow edge that wipes across the top as the border lights up */
.pcard::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .38s ease;}
.pcard:hover{background:#333944;border-color:var(--yellow);transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.28);}
.pcard:hover::after{transform:scaleX(1);}
.pcard .pn{font-family:'Oswald',sans-serif;font-weight:700;font-size:15px;color:var(--yellow);flex-shrink:0;width:26px;transition:transform .28s ease;}
.pcard:hover .pn{transform:translateX(2px);}
.pcard p{color:#dfe3e8;font-size:15px;line-height:1.6;font-weight:500;}
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard::after,.pcard .pn{transition:none;}
  .pcard:hover{transform:none;}
}

/* ---------- related services strip ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.rel{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line-l);border-radius:11px;padding:16px 18px;transition:border-color .15s,transform .15s;}
.rel:hover{border-color:rgba(245,176,30,.6);transform:translateY(-2px);}
/* .rel .ri is styled in the icon-system block near the end of this file */
.rel .rn{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-l);}

@media (max-width:980px){
  .ph-grid,.spec-grid{grid-template-columns:1fr;gap:38px;}
}
@media (max-width:900px){
  .dd{display:none;}
  .svc-grid,.list-grid,.pgrid,.promise,.rel-grid{grid-template-columns:1fr;}
  .sec{padding:66px 0;}
  .cta{padding:60px 0;}
}
@media (max-width:560px){
  /* full-width stacked buttons read better than two cramped ones */
  .hero-btns,.cta-btns{flex-direction:column;align-items:stretch;}
  .hero-btns .btn-y,.cta-btns .btn-y,
  .hero-btns .btn-ghost,.cta-btns .btn-ghost{justify-content:center;padding-left:20px;padding-right:20px;}
  .mega-grid{grid-template-columns:1fr;}
  .spec h3,.spec .sr,.spec-note{padding-left:20px;padding-right:20px;}
  .svc-card{padding:22px;}
}

/* ============================================================
   icon system
   Every icon is drawn in the brand yellow. The chip behind it changes
   with the surface: charcoal with a clipped corner on light sections,
   soft yellow on dark ones — so the icons read consistently either way.
   ============================================================ */
.si svg,.mic svg,.ri svg,.ci svg,.ii svg{display:block;}

/* Solid brand-yellow chip with a charcoal icon — same treatment as .btn-y,
   so it reads consistently on light and dark surfaces alike. */
.si,.ci,.ri,.mic{
  background:var(--yellow);border:none;color:var(--ink);
  box-shadow:0 8px 20px rgba(245,176,30,.28);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .2s ease,box-shadow .2s ease;}
.si svg,.ci svg,.ri svg,.mic svg{stroke-width:1.85;}

/* service / audience cards */
.svc-card .si{width:54px;height:54px;border-radius:13px;margin-bottom:18px;}
.svc-card .si svg{width:25px;height:25px;}
.svc-card:hover .si{transform:translateY(-2px);box-shadow:0 12px 26px rgba(245,176,30,.4);}

/* header mega-menu chip */
.mi .mic{width:34px;height:34px;border-radius:9px;box-shadow:none;}
.mi .mic svg{width:17px;height:17px;}

/* related-services strip (light surface) */
.rel .ri{width:38px;height:38px;border-radius:10px;}
.rel .ri svg{width:18px;height:18px;}

/* credentials block (light surface) */
.cred .ci{width:46px;height:46px;border-radius:12px;margin-bottom:14px;}
.cred .ci svg{width:21px;height:21px;}

/* info-card rows — bare icon on the white body, no chip */
.info-row .ii{color:#c98a0d;width:22px;display:flex;justify-content:center;padding-top:1px;
  background:none;border:none;box-shadow:none;}
.info-row .ii svg{width:19px;height:19px;}

/* confirmation ticks keep the brand yellow — they're a value signal, not chrome */
.hero-ticks .t span svg{width:12px;height:12px;stroke-width:2.9;}
.ph-ticks .t span svg{width:11px;height:11px;stroke-width:2.9;}
.tick .c svg,.li .c svg{width:13px;height:13px;stroke-width:2.9;}
.lead-card-head li b{display:inline-flex;align-items:center;flex-shrink:0;}
.lead-card-head li b svg{width:13px;height:13px;stroke-width:2.9;}

/* pin used by .area::before (styled up in the "areas we cover" block above) */
:root{--pin-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.4c0 6-8 12.2-8 12.2s-8-6.2-8-12.2a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10.2' r='2.9'/%3E%3C/svg%3E");}

/* ---------- phone-only primary CTA ----------
   On a narrow header the logo, quote button and burger all fight for room and
   the button wraps onto two lines. Below 640px the button leaves the header and
   becomes a fixed bar at the bottom of the screen, always within thumb reach. */
.mobile-cta{display:none;}
@media (max-width:640px){
  /* 5vw is only ~16px on a small phone, which reads as no gutter at all.
     Pin a comfortable fixed gutter instead, on every container that sets one. */
  .wrap,.hero-inner,.quote-grid,.band-txt,.mnav{padding-left:22px;padding-right:22px;}
  .nav-right > .btn-y{display:none;}
  .mobile-cta{display:flex;align-items:center;justify-content:center;gap:9px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--yellow);color:var(--ink);
    font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
    font-size:16px;padding:16px 20px;
    box-shadow:0 -6px 22px rgba(0,0,0,.28);
    padding-bottom:calc(16px + env(safe-area-inset-bottom));}
  /* keep the fixed bar from covering the last of the footer */
  body{padding-bottom:64px;}
  /* drawer CTA reads as a button, not another text link */
  .mnav .mcta{background:var(--yellow);color:var(--ink);border-radius:8px;
    justify-content:center;padding:14px 18px;margin:10px 0 14px;font-weight:600;}
  /* three stats never fit one row on a phone — drop the rules, stack evenly */
  .hero .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:28px;}
  .hero .stat{max-width:none;}
  .hero .stat-div{display:none;}
}