/* ==========================================================================
   SunX Solar & Renewable Solutions - Design System
   Sections: 1 Tokens | 2 Reset | 3 Typography | 4 Layout | 5 Buttons
             6 Header/Nav | 7 Hero | 8 Components | 9 Forms | 10 Footer
             11 Utilities | 12 Motion | 13 Responsive | 14 Print
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand - sampled from the SunX identity */
  --graphite-900:#12181a;
  --graphite-800:#1c2427;
  --graphite-700:#2b3236;
  --graphite-600:#3a4348;
  --graphite-500:#5b666c;
  --graphite-400:#8b979d;
  --graphite-300:#c3ccd0;
  --graphite-200:#e2e8ea;
  --graphite-100:#f1f4f5;

  --leaf-700:#3c7a22;
  --leaf-600:#4a8b2c;
  --leaf-500:#63a733;
  --leaf-400:#7dbe3c;
  --leaf-300:#a3d472;
  --leaf-100:#eaf6de;

  --solar-600:#e08a00;
  --solar-500:#f5a623;
  --solar-400:#ffb84d;
  --solar-100:#fff4e0;

  --sky-500:#1f8fb5;
  --sky-100:#e4f4fa;

  --ink:#12181a;
  --body:#4a5559;
  --muted:#77848a;
  --line:#e4e9eb;
  --bg:#ffffff;
  --bg-soft:#f7f9f8;
  --bg-tint:#f2f7ee;

  --grad-brand:linear-gradient(135deg,var(--leaf-600) 0%,var(--leaf-400) 55%,#b6da5f 100%);
  --grad-solar:linear-gradient(135deg,var(--solar-600) 0%,var(--solar-400) 100%);
  --grad-dark:linear-gradient(150deg,#12181a 0%,#1d2a24 55%,#22331f 100%);
  --grad-hero:linear-gradient(108deg,rgba(18,24,26,.95) 0%,rgba(18,24,26,.82) 30%,rgba(22,44,28,.62) 60%,rgba(40,80,36,.42) 100%);

  /* Type */
  --font-head:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --fs-hero:clamp(2.35rem,5.2vw,4.2rem);
  --fs-h1:clamp(2rem,4.2vw,3.15rem);
  --fs-h2:clamp(1.68rem,3.1vw,2.45rem);
  --fs-h3:clamp(1.22rem,1.9vw,1.5rem);
  --fs-h4:1.0625rem;
  --fs-lead:clamp(1.02rem,1.35vw,1.1875rem);
  --fs-body:1rem;
  --fs-sm:.9125rem;
  --fs-xs:.8125rem;

  /* Space & shape */
  --sp-section:clamp(3.75rem,7vw,6.5rem);
  --wrap:1220px;
  --wrap-narrow:880px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --sh-xs:0 1px 2px rgba(18,24,26,.06);
  --sh-sm:0 2px 8px rgba(18,24,26,.06),0 1px 2px rgba(18,24,26,.04);
  --sh-md:0 10px 30px -12px rgba(18,24,26,.16),0 2px 8px rgba(18,24,26,.05);
  --sh-lg:0 26px 60px -22px rgba(18,24,26,.28),0 6px 18px rgba(18,24,26,.07);
  --sh-glow:0 18px 40px -16px rgba(74,139,44,.5);

  --ease:cubic-bezier(.32,.72,.28,1);
  --dur:.36s;
  --header-h:80px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
/* The off-canvas mobile menu is parked outside the right edge; clip it at the
   root so it never creates a horizontal scrollbar. */
html{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip;
}
body.nav-open{overflow:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
/* The browser's built-in [hidden] rule loses to any author display
   declaration, so .btn{display:inline-flex} and .note{display:flex} were
   keeping elements on screen after JS set hidden. Make it authoritative. */
[hidden]{display:none!important}
a{color:var(--leaf-700);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--leaf-500)}
ul,ol{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--leaf-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--leaf-300);color:var(--graphite-900)}
.skip-link{
  position:absolute;left:12px;top:-70px;z-index:2000;background:var(--graphite-900);color:#fff;
  padding:.7rem 1.15rem;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;color:#fff}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-head);color:var(--ink);margin:0 0 .6em;
  line-height:1.14;letter-spacing:-.021em;font-weight:700;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.26}
h4,.h4{font-size:var(--fs-h4);line-height:1.4;letter-spacing:-.01em}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:650}
.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--graphite-500)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-head);font-size:.7825rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--leaf-700);
  margin:0 0 1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad-brand);border-radius:2px}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:var(--leaf-300)}
.gradient-text{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.text-solar{color:var(--solar-500)}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sp-section);position:relative}
.section--tight{padding-block:clamp(2.5rem,4.5vw,4rem)}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--bg-tint)}
.section--dark{background:var(--grad-dark);color:#c9d4d3}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.card--dark .h4{color:#fff}
.section--dark .lead{color:#a9b8b6}
.section--dark p strong{color:#fff}
.section-head{max-width:730px;margin-bottom:clamp(2.25rem,3.5vw,3.25rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head h2{margin-bottom:.75rem}
.grid{display:grid;gap:clamp(1.1rem,2vw,1.75rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4.5vw,4.25rem);align-items:center}
.split--media-first .split__media{order:-1}
.stack-sm{display:flex;flex-direction:column;gap:.75rem}
.cluster{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --btn-bg:var(--graphite-900);--btn-fg:#fff;--btn-bd:var(--graphite-900);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem;border-radius:var(--r-pill);border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-head);font-size:.945rem;font-weight:650;letter-spacing:-.005em;
  line-height:1.2;text-align:center;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn:hover{color:var(--btn-fg);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{--btn-bg:var(--leaf-600);--btn-bd:var(--leaf-600)}
.btn--primary:hover{--btn-bg:var(--leaf-700);--btn-bd:var(--leaf-700);box-shadow:var(--sh-glow)}
.btn--solar{--btn-bg:var(--solar-500);--btn-bd:var(--solar-500);--btn-fg:var(--graphite-900)}
.btn--solar:hover{--btn-bg:var(--solar-400);--btn-bd:var(--solar-400)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--graphite-900);--btn-bd:var(--graphite-300)}
.btn--ghost:hover{--btn-bd:var(--graphite-900);--btn-bg:var(--graphite-900);--btn-fg:#fff}
.btn--light{--btn-bg:#fff;--btn-fg:var(--graphite-900);--btn-bd:#fff}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}
.btn--outline-light:hover{--btn-bg:#fff;--btn-fg:var(--graphite-900);--btn-bd:#fff}
.btn--whatsapp{--btn-bg:#25d366;--btn-bd:#25d366;--btn-fg:#08260f}
.btn--whatsapp:hover{--btn-bg:#1fbb59;--btn-bd:#1fbb59}
.btn--lg{padding:1.05rem 2rem;font-size:1.0125rem}
.btn--sm{padding:.62rem 1.15rem;font-size:.875rem}
.btn--block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none}
.link-arrow{
  display:inline-flex;align-items:center;gap:.42rem;font-family:var(--font-head);
  font-weight:650;font-size:var(--fs-sm);color:var(--leaf-700);
}
.link-arrow svg{width:15px;height:15px;transition:transform var(--dur) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 6. HEADER / NAV ---------- */
.topbar{
  background:var(--graphite-900);color:#a9b8b6;font-size:var(--fs-xs);
  padding:.5rem 0;position:relative;z-index:60;
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar__list{display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap}
.topbar a{color:#c9d4d3;display:inline-flex;align-items:center;gap:.4rem}
.topbar a:hover{color:var(--leaf-300)}
.topbar svg{width:14px;height:14px;flex:none;opacity:.85}
.topbar__tag{display:inline-flex;align-items:center;gap:.45rem;color:#8b979d}

.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck{box-shadow:0 8px 28px -18px rgba(18,24,26,.32)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand .logo{height:46px;width:auto}
@media (max-width:520px){.brand .logo{height:38px}}
.nav__menu{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav__link{
  display:inline-flex;align-items:center;gap:.32rem;padding:.62rem .78rem;border-radius:var(--r-sm);
  font-family:var(--font-head);font-size:.9375rem;font-weight:600;color:var(--graphite-700);
  position:relative;transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav__link:hover{color:var(--leaf-700);background:var(--leaf-100)}
.nav__link[aria-current="page"]{color:var(--leaf-700)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.26rem;height:2px;
  background:var(--grad-brand);border-radius:2px;
}
.nav__link svg{width:12px;height:12px;opacity:.7;transition:transform var(--dur) var(--ease)}
.nav__item{position:relative}
.nav__item--has-menu:hover>.nav__link svg,.nav__item--has-menu:focus-within>.nav__link svg{transform:rotate(180deg)}
.nav__drop{
  position:absolute;top:calc(100% + 4px);left:0;min-width:274px;padding:.55rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.nav__item--has-menu:hover>.nav__drop,.nav__item--has-menu:focus-within>.nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop a{
  display:block;padding:.6rem .8rem;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;color:var(--graphite-700);font-family:var(--font-head);
}
.nav__drop a small{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--fs-xs);color:var(--muted);margin-top:.1rem;line-height:1.45}
.nav__drop a:hover{background:var(--leaf-100);color:var(--leaf-700)}
.nav__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.nav__toggle{
  display:none;width:46px;height:46px;border-radius:var(--r-sm);border:1px solid var(--line);
  align-items:center;justify-content:center;background:#fff;flex:none;
}
.nav__toggle span{display:block;width:20px;height:2px;background:var(--graphite-800);border-radius:2px;position:relative;transition:all var(--dur) var(--ease)}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--graphite-800);border-radius:2px;transition:all var(--dur) var(--ease)}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- 7. HERO ---------- */
.hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;background:var(--graphite-900)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg svg,.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-hero)}
.hero__inner{padding-block:clamp(3.25rem,7.5vw,6.75rem);display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{font-size:var(--fs-hero);color:#fff;margin-bottom:1.15rem;letter-spacing:-.028em}
.hero__lead{font-size:var(--fs-lead);color:#d5e0dd;max-width:34em;margin-bottom:2rem}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .95rem .45rem .5rem;
  border-radius:var(--r-pill);background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  font-size:var(--fs-xs);font-weight:600;font-family:var(--font-head);color:#e7efed;margin-bottom:1.5rem;
  backdrop-filter:blur(6px);
}
.hero__badge b{background:var(--grad-brand);color:#0d1310;padding:.22rem .58rem;border-radius:var(--r-pill);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.4rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.75rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.15)}
.hero__meta div{min-width:116px}
.hero__meta b{display:block;font-family:var(--font-head);font-size:1.5rem;color:#fff;line-height:1.1}
.hero__meta span{font-size:var(--fs-xs);color:#a9b8b6;letter-spacing:.03em}
.hero__card{
  background:rgba(255,255,255,.97);border-radius:var(--r-xl);padding:clamp(1.5rem,2.5vw,2rem);
  box-shadow:var(--sh-lg);color:var(--body);
}
.hero__card h2{font-size:1.26rem;margin-bottom:.35rem}
.hero__card .hero__card-sub{font-size:var(--fs-sm);color:var(--muted);margin-bottom:1.15rem}

/* Page hero (inner pages) */
.page-hero{position:relative;isolation:isolate;background:var(--grad-dark);color:#fff;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 420px at 88% -12%,rgba(125,190,60,.4),transparent 62%),
             radial-gradient(700px 380px at 2% 112%,rgba(245,166,35,.2),transparent 60%);
}
.page-hero__inner{padding-block:clamp(2.75rem,5.5vw,4.5rem)}
.page-hero h1{color:#fff;max-width:22em;margin-bottom:.85rem}
.page-hero p{color:#b9c7c4;max-width:46em;font-size:var(--fs-lead);margin:0}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:var(--fs-xs);color:#93a3a0;margin-bottom:1.1rem}
.breadcrumb a{color:#c9d4d3}
.breadcrumb a:hover{color:var(--leaf-300)}
.breadcrumb span[aria-hidden]{opacity:.5}
.breadcrumb [aria-current]{color:var(--leaf-300);font-weight:600}

/* ---------- 8. COMPONENTS ---------- */

/* Card */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.35rem,2vw,1.75rem);position:relative;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card--hover:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--leaf-300)}
.card h3{margin-bottom:.5rem}
.card p{font-size:var(--fs-sm);color:var(--graphite-500)}
.card__foot{margin-top:1.15rem}
.card--dark{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}
.card--dark h3,.card--dark h4{color:#fff}
.card--dark p{color:#a9b8b6}
.card--dark.card--hover:hover{background:rgba(255,255,255,.075);border-color:rgba(125,190,60,.45)}
.card--pad-lg{padding:clamp(1.75rem,3vw,2.5rem)}

/* Icon chip */
.icon-chip{
  width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--leaf-100);color:var(--leaf-700);margin-bottom:1.15rem;flex:none;
}
.icon-chip svg{width:26px;height:26px}
.icon-chip--solar{background:var(--solar-100);color:var(--solar-600)}
.icon-chip--sky{background:var(--sky-100);color:var(--sky-500)}
.icon-chip--dark{background:rgba(125,190,60,.16);color:var(--leaf-300)}
.icon-chip--sm{width:42px;height:42px;border-radius:10px;margin-bottom:.85rem}
.icon-chip--sm svg{width:21px;height:21px}

/* Service card with media */
.service-card{display:flex;flex-direction:column;overflow:hidden;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.service-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--graphite-100)}
.service-card__media img,.service-card__media svg{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.service-card:hover .service-card__media img,.service-card:hover .service-card__media svg{transform:scale(1.055)}
.service-card__body{padding:clamp(1.25rem,2vw,1.6rem);display:flex;flex-direction:column;flex:1}
.service-card__body h3{font-size:1.18rem;margin-bottom:.45rem}
.service-card__body p{font-size:var(--fs-sm);color:var(--graphite-500);flex:1}
.service-card__tag{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  background:rgba(18,24,26,.78);color:#fff;border-radius:var(--r-pill);
  padding:.3rem .75rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--font-head);backdrop-filter:blur(4px);
}
.service-card__tag--wind{background:rgba(31,143,181,.9)}
.service-card__tag--new{background:var(--solar-500);color:var(--graphite-900)}
.service-card__list{margin:1rem 0 1.15rem;display:flex;flex-direction:column;gap:.4rem}
.service-card__list li{position:relative;padding-left:1.4rem;font-size:var(--fs-xs);color:var(--graphite-500)}
.service-card__list li::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;
  background:var(--grad-brand);
}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.stats--dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1)}
.stat{background:#fff;padding:clamp(1.4rem,2.4vw,2rem);text-align:center}
.stats--dark .stat{background:transparent}
.stat b{
  display:block;font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.6vw,2.85rem);line-height:1;color:var(--ink);margin-bottom:.4rem;
}
.stats--dark .stat b{color:#fff}
.stat span{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.stats--dark .stat span{color:#93a3a0}
.stat .stat__unit{color:var(--leaf-500);-webkit-text-fill-color:currentColor}

/* Feature list with checks */
.checks{display:flex;flex-direction:column;gap:.85rem;margin:1.5rem 0}
.checks li{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--graphite-500)}
.checks li b{color:var(--ink);font-weight:650}
.checks svg{width:20px;height:20px;flex:none;color:var(--leaf-600);margin-top:.15rem}
.checks--light li{color:#b9c7c4}
.checks--light li b{color:#fff}
.checks--light svg{color:var(--leaf-300)}
.checks--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.5rem}

/* Process / steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.1rem,2vw,1.75rem);counter-reset:step}
.step{position:relative;padding-top:1.75rem}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-head);font-size:2.6rem;font-weight:800;line-height:1;
  color:var(--leaf-100);display:block;margin-bottom:.5rem;letter-spacing:-.04em;
}
.section--dark .step::before{color:rgba(125,190,60,.22)}
.step::after{
  content:"";position:absolute;top:.35rem;left:0;width:44px;height:3px;border-radius:3px;background:var(--grad-brand);
}
.step h3{font-size:1.1rem;margin-bottom:.4rem}
.step p{font-size:var(--fs-sm);color:var(--graphite-500)}
.section--dark .step p{color:#a9b8b6}

/* Split media frame */
.frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);background:var(--graphite-100)}
.frame img,.frame svg{width:100%;display:block}
.frame--tilt{transform:rotate(-1.1deg)}
.frame__badge{
  position:absolute;bottom:1.1rem;left:1.1rem;right:1.1rem;
  background:rgba(255,255,255,.96);border-radius:var(--r-md);padding:.9rem 1.1rem;
  display:flex;align-items:center;gap:.85rem;box-shadow:var(--sh-md);
}
.frame__badge b{font-family:var(--font-head);font-size:1.02rem;color:var(--ink);display:block;line-height:1.25}
.frame__badge span{font-size:var(--fs-xs);color:var(--muted)}
.frame__float{
  position:absolute;top:1.1rem;right:1.1rem;background:var(--graphite-900);color:#fff;
  border-radius:var(--r-md);padding:.75rem 1rem;text-align:center;box-shadow:var(--sh-md);
}
.frame__float b{display:block;font-family:var(--font-head);font-size:1.3rem;line-height:1.1}
.frame__float span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf-300)}

/* Accordion (FAQ) */
.accordion{border-top:1px solid var(--line)}
.ac-item{border-bottom:1px solid var(--line)}
.ac-btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;
  padding:1.25rem .25rem;text-align:left;font-family:var(--font-head);font-weight:650;
  font-size:1.02rem;color:var(--ink);line-height:1.4;transition:color var(--dur) var(--ease);
}
.ac-btn:hover{color:var(--leaf-700)}
.ac-btn__icon{
  flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--graphite-200);
  display:grid;place-items:center;position:relative;transition:all var(--dur) var(--ease);margin-top:.1rem;
}
.ac-btn__icon::before,.ac-btn__icon::after{content:"";position:absolute;background:var(--graphite-600);border-radius:2px;transition:all var(--dur) var(--ease)}
.ac-btn__icon::before{width:11px;height:1.8px}
.ac-btn__icon::after{width:1.8px;height:11px}
.ac-btn[aria-expanded="true"] .ac-btn__icon{background:var(--leaf-600);border-color:var(--leaf-600)}
.ac-btn[aria-expanded="true"] .ac-btn__icon::before{background:#fff}
.ac-btn[aria-expanded="true"] .ac-btn__icon::after{transform:rotate(90deg);opacity:0}
.ac-panel{overflow:hidden;height:0;transition:height var(--dur) var(--ease)}
.ac-panel__inner{padding:0 3rem 1.4rem .25rem;font-size:var(--fs-sm);color:var(--graphite-500)}

/* Testimonials */
.quote-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:1rem;height:100%;
}
.quote-card__stars{display:flex;gap:.15rem;color:var(--solar-500)}
.quote-card__stars svg{width:16px;height:16px}
.quote-card blockquote{margin:0;font-size:var(--fs-sm);color:var(--graphite-500);line-height:1.66;flex:1}
.quote-card__who{display:flex;align-items:center;gap:.8rem;padding-top:.35rem;border-top:1px solid var(--line)}
.quote-card__avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad-brand);color:#0d1310;font-family:var(--font-head);font-weight:800;font-size:.95rem;
}
.quote-card__who b{display:block;font-family:var(--font-head);font-size:var(--fs-sm);color:var(--ink);line-height:1.3}
.quote-card__who span{font-size:var(--fs-xs);color:var(--muted)}

/* Logo marquee */
.marquee{overflow:hidden;position:relative;padding-block:.5rem;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:clamp(2rem,5vw,4.5rem);width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  display:flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-weight:700;
  font-size:1.0125rem;color:var(--graphite-400);white-space:nowrap;letter-spacing:-.01em;
}
.marquee__item svg{width:22px;height:22px;opacity:.55}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CTA band */
.cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--grad-dark);color:#fff}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(720px 340px at 82% 8%,rgba(125,190,60,.42),transparent 60%),
             radial-gradient(560px 300px at 6% 96%,rgba(245,166,35,.22),transparent 62%);
}
.cta-band__inner{padding-block:clamp(2.75rem,5.5vw,4.5rem);display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.cta-band h2{color:#fff;margin-bottom:.6rem}
.cta-band p{color:#b9c7c4;margin:0;max-width:44em}
.cta-band__actions{display:flex;flex-direction:column;gap:.75rem}

/* Sticky mobile action bar */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  backdrop-filter:blur(12px);padding:.55rem .75rem;
  box-shadow:0 -8px 24px -18px rgba(18,24,26,.4);
}
.action-bar__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.action-bar a{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem .25rem;
  border-radius:var(--r-sm);font-family:var(--font-head);font-size:.7rem;font-weight:700;
  color:var(--graphite-700);letter-spacing:.02em;
}
.action-bar a svg{width:19px;height:19px;color:var(--leaf-600)}
.action-bar a:active{background:var(--leaf-100)}

/* Back to top */
.to-top{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;width:46px;height:46px;border-radius:50%;
  background:var(--graphite-900);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-md);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all var(--dur) var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--leaf-600);color:#fff}
.to-top svg{width:19px;height:19px}

/* Pills / badges / tabs */
.pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .8rem;border-radius:var(--r-pill);
  background:var(--leaf-100);color:var(--leaf-700);font-size:var(--fs-xs);font-weight:650;
  font-family:var(--font-head);
}
.pill--solar{background:var(--solar-100);color:var(--solar-600)}
.pill--sky{background:var(--sky-100);color:var(--sky-500)}
.pill--dark{background:rgba(255,255,255,.1);color:#c9d4d3}
.pill--outline{background:transparent;border:1px solid var(--line);color:var(--graphite-500)}

.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.tab{
  padding:.6rem 1.15rem;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:#fff;font-family:var(--font-head);font-size:var(--fs-sm);font-weight:650;color:var(--graphite-600);
  transition:all var(--dur) var(--ease);
}
.tab:hover{border-color:var(--leaf-400);color:var(--leaf-700)}
.tab[aria-pressed="true"]{background:var(--graphite-900);border-color:var(--graphite-900);color:#fff}

/* Project card */
.project-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--graphite-900);
  box-shadow:var(--sh-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.project-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.project-card__media{aspect-ratio:4/3;position:relative}
.project-card__media img,.project-card__media svg{width:100%;height:100%;object-fit:cover}
.project-card__overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.25rem;background:linear-gradient(to top,rgba(12,16,17,.93) 8%,rgba(12,16,17,.45) 48%,transparent 78%);
  color:#fff;
}
.project-card__overlay h3{color:#fff;font-size:1.075rem;margin-bottom:.3rem}
.project-card__overlay p{font-size:var(--fs-xs);color:#c9d4d3;margin:0}
.project-card__kv{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.project-card__kv span{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);
  padding:.22rem .6rem;font-size:.7rem;font-weight:650;font-family:var(--font-head);
}

/* Spec / comparison table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.table-wrap table{min-width:640px;font-size:var(--fs-sm)}
.table-wrap th,.table-wrap td{padding:.9rem 1.15rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap thead th{
  background:var(--bg-soft);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--graphite-600);white-space:nowrap;
}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr:hover{background:var(--bg-soft)}
.table-wrap td strong{color:var(--ink)}

/* Note / callout */
.note{
  display:flex;gap:.85rem;padding:1rem 1.2rem;border-radius:var(--r-md);
  background:var(--solar-100);border:1px solid rgba(245,166,35,.34);
  font-size:var(--fs-sm);color:#6d4c11;
}
.note svg{width:19px;height:19px;flex:none;color:var(--solar-600);margin-top:.2rem}
.note--info{background:var(--sky-100);border-color:rgba(31,143,181,.28);color:#155b74}
.note--info svg{color:var(--sky-500)}
.note--leaf{background:var(--leaf-100);border-color:rgba(74,139,44,.28);color:#2f5a1c}
.note--leaf svg{color:var(--leaf-700)}
.note a{color:inherit;text-decoration:underline}

/* Contact detail rows */
.contact-rows{display:flex;flex-direction:column;gap:.35rem}
.contact-row{
  display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line);
}
.contact-row:last-child{border-bottom:0}
.contact-row__ico{
  width:42px;height:42px;border-radius:12px;background:var(--leaf-100);color:var(--leaf-700);
  display:grid;place-items:center;flex:none;
}
.contact-row__ico svg{width:20px;height:20px}
.contact-row h4,.contact-row .h4{margin:0 0 .2rem;font-size:var(--fs-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.contact-row p,.contact-row a{margin:0;font-size:1.0125rem;color:var(--ink);font-weight:500;line-height:1.5}
.contact-row a:hover{color:var(--leaf-600)}
.contact-row small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:400}

/* Map */
.map-embed{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--graphite-100);min-height:340px}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* Calculator */
.calc{display:grid;grid-template-columns:1fr .92fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.calc__panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.35rem,2.4vw,2rem)}
.calc__result{background:var(--grad-dark);color:#fff;border-radius:var(--r-lg);padding:clamp(1.5rem,2.6vw,2.15rem);position:relative;overflow:hidden}
.calc__result::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 260px at 92% -10%,rgba(125,190,60,.4),transparent 62%)}
.calc__result>*{position:relative}
.calc__result h3{color:#fff}
.calc__big{font-family:var(--font-head);font-weight:800;font-size:clamp(2.1rem,4.6vw,3rem);line-height:1.05;letter-spacing:-.03em;color:#fff;margin:.15rem 0 .1rem}
.calc__big small{font-size:.42em;font-weight:700;color:var(--leaf-300);letter-spacing:0}
.calc__kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.13);border-radius:var(--r-md);overflow:hidden;margin-top:1.4rem}
.calc__kpi{padding:.95rem 1.05rem;background:rgba(18,24,26,.35)}
.calc__kpi b{display:block;font-family:var(--font-head);font-size:1.22rem;color:#fff;line-height:1.2}
.calc__kpi span{font-size:var(--fs-xs);color:#93a3a0}
.calc__note{font-size:var(--fs-xs);color:#8b979d;margin-top:1.15rem;line-height:1.6}
.range-row{margin-bottom:1.4rem}
.range-row__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.5rem}
.range-row__head label{font-family:var(--font-head);font-weight:650;font-size:var(--fs-sm);color:var(--ink)}
.range-row__val{font-family:var(--font-head);font-weight:800;color:var(--leaf-700);font-size:1.05rem}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--leaf-500) var(--fill,50%),var(--graphite-200) var(--fill,50%));
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:5px solid var(--leaf-600);box-shadow:var(--sh-sm);cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid var(--leaf-600);
  box-shadow:var(--sh-sm);cursor:grab;
}
.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{
  padding:.55rem 1rem;border-radius:var(--r-pill);border:1.5px solid var(--line);cursor:pointer;
  font-family:var(--font-head);font-size:var(--fs-sm);font-weight:650;color:var(--graphite-600);
  transition:all var(--dur) var(--ease);
}
.seg label:hover{border-color:var(--leaf-400)}
.seg input:checked+label{background:var(--leaf-600);border-color:var(--leaf-600);color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--leaf-500);outline-offset:2px}

/* Team card */
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-align:center;padding:0}
.team-card__media{aspect-ratio:1/1;background:var(--grad-brand);display:grid;place-items:center}
.team-card__media span{font-family:var(--font-head);font-weight:800;font-size:2.6rem;color:rgba(13,19,16,.72);letter-spacing:-.03em}
.team-card__body{padding:1.35rem}
.team-card__body h3{font-size:1.075rem;margin-bottom:.15rem}
.team-card__role{font-size:var(--fs-xs);color:var(--leaf-700);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.7rem}
.team-card__body p{font-size:var(--fs-sm)}
.team-card__links{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.team-card__links a{
  width:34px;height:34px;border-radius:50%;background:var(--graphite-100);color:var(--graphite-600);
  display:grid;place-items:center;transition:all var(--dur) var(--ease);
}
.team-card__links a:hover{background:var(--leaf-600);color:#fff}
.team-card__links svg{width:16px;height:16px}

/* Timeline */
.timeline{position:relative;padding-left:2.1rem}
.timeline::before{content:"";position:absolute;left:7px;top:.6rem;bottom:.6rem;width:2px;background:var(--line)}
.timeline li{position:relative;padding-bottom:1.85rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-2.1rem;top:.45rem;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--leaf-500);
}
.timeline b{display:block;font-family:var(--font-head);color:var(--ink);font-size:1.02rem;line-height:1.35}
.timeline span{font-size:var(--fs-xs);color:var(--leaf-700);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.timeline p{font-size:var(--fs-sm);margin:.35rem 0 0;color:var(--graphite-500)}

/* ---------- 9. FORMS ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;color:var(--graphite-600);letter-spacing:.04em;text-transform:uppercase}
.field label .req{color:#c0392b}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field textarea{min-height:118px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b666c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--leaf-500);box-shadow:0 0 0 4px rgba(99,167,51,.15);
}
.field input::placeholder,.field textarea::placeholder{color:var(--graphite-400)}
.field .error{font-size:var(--fs-xs);color:#c0392b;display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#e07a6c;background:#fdf6f5}
.field.is-invalid .error{display:block}
.field__hint{font-size:var(--fs-xs);color:var(--muted)}
.check-row{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-xs);color:var(--graphite-500);grid-column:1/-1}
.check-row input{width:18px;height:18px;flex:none;margin-top:.15rem;accent-color:var(--leaf-600)}
.form-status{
  grid-column:1/-1;padding:.9rem 1.1rem;border-radius:var(--r-md);font-size:var(--fs-sm);display:none;
}
.form-status.is-ok{display:block;background:var(--leaf-100);border:1px solid rgba(74,139,44,.3);color:#2f5a1c}
.form-status.is-err{display:block;background:#fdecea;border:1px solid rgba(192,57,43,.25);color:#8e2a20}

/* ---------- 10. FOOTER ---------- */
.site-footer{background:var(--graphite-900);color:#93a3a0;font-size:var(--fs-sm)}
.footer-cols{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:clamp(1.75rem,3.5vw,3rem);
  padding-block:clamp(2.75rem,5vw,4.25rem);
}
.site-footer h4,.site-footer .footer-h{
  color:#fff;font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:1.15rem;font-weight:700;
}
.site-footer a{color:#a9b8b6}
.site-footer a:hover{color:var(--leaf-300)}
.footer-brand .logo{height:54px;width:auto;margin-bottom:1.25rem}
.footer-brand p{font-size:var(--fs-sm);color:#8b979d;max-width:34em;margin-bottom:1.35rem}
.footer-list{display:flex;flex-direction:column;gap:.65rem}
.footer-list a{display:inline-flex;align-items:center;gap:.45rem}
.footer-contact{display:flex;flex-direction:column;gap:.9rem}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start;color:#a9b8b6}
.footer-contact svg{width:17px;height:17px;flex:none;color:var(--leaf-400);margin-top:.22rem}
.footer-contact a{color:#e2e8ea;font-weight:500}
.socials{display:flex;gap:.55rem}
.socials a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.075);
  display:grid;place-items:center;color:#c9d4d3;transition:all var(--dur) var(--ease);
}
.socials a:hover{background:var(--leaf-600);color:#fff;transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.footer-bar{
  border-top:1px solid rgba(255,255,255,.09);padding-block:1.35rem;
  display:flex;flex-wrap:wrap;gap:.85rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);color:#77848a;
}
.footer-bar__links{display:flex;flex-wrap:wrap;gap:1.15rem}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.35rem}
.footer-badges span{
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:.28rem .7rem;
  font-size:.7rem;font-weight:650;color:#c9d4d3;font-family:var(--font-head);
}

/* ---------- 11. UTILITIES ---------- */
.tc{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:2.75rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.full{grid-column:1/-1}

/* ---------- 12. MOTION ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.08s}
.js .reveal[data-delay="2"]{transition-delay:.16s}
.js .reveal[data-delay="3"]{transition-delay:.24s}
.js .reveal[data-delay="4"]{transition-delay:.32s}
.spin-slow{animation:spin 22s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse-ring{animation:pulse 3.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-cols{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc{grid-template-columns:1fr}
}
@media (max-width:960px){
  :root{--header-h:70px}
  .nav__toggle{display:flex}
  .nav__menu{
    position:fixed;inset:var(--header-h) 0 0 0;flex-direction:column;align-items:stretch;
    background:#fff;padding:1.25rem clamp(1.15rem,4vw,2rem) 6rem;gap:.15rem;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;margin:0;z-index:99;
    transition:transform var(--dur) var(--ease),visibility var(--dur) var(--ease);
  }
  .nav__menu.is-open{transform:translateX(0);visibility:visible}
  .nav__link{padding:.9rem .25rem;font-size:1.05rem;border-radius:0;border-bottom:1px solid var(--line);justify-content:space-between}
  .nav__link[aria-current="page"]::after{display:none}
  .nav__item--has-menu>.nav__link{cursor:pointer}
  .nav__drop{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:.25rem 0 .5rem .75rem;min-width:0;display:none;background:transparent;
  }
  .nav__item--has-menu.is-open>.nav__drop{display:block}
  .nav__item--has-menu.is-open>.nav__link svg{transform:rotate(180deg)}
  .nav__cta .btn--nav{display:none}
  .hero__inner{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split--media-first .split__media{order:0}
  .cta-band__inner{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .action-bar{display:block}
  body{padding-bottom:64px}
  .to-top{bottom:76px}
}
@media (max-width:720px){
  .topbar__inner{justify-content:center;text-align:center}
  .topbar__tag{display:none}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .checks--grid{grid-template-columns:1fr}
  .calc__kpis{grid-template-columns:1fr}
  .frame--tilt{transform:none}
  .ac-panel__inner{padding-right:1rem}
  .footer-bar{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- 14. PRINT ---------- */
@media print{
  .topbar,.site-header,.action-bar,.to-top,.cta-band,.marquee{display:none!important}
  body{color:#000;background:#fff}
  .section{padding-block:1rem}
  a{color:#000;text-decoration:underline}
  .site-footer{background:#fff;color:#000}
}

/* ==========================================================================
   15. SALES ENQUIRY WIZARD  (sales.html)
   ========================================================================== */

/* Animated hero band */
.sales-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--graphite-900);color:#fff}
.sales-hero::before{
  content:"";position:absolute;inset:-40% -10%;z-index:-1;
  background:
    radial-gradient(46% 46% at 22% 30%,rgba(74,139,44,.62),transparent 62%),
    radial-gradient(40% 40% at 78% 24%,rgba(245,166,35,.42),transparent 64%),
    radial-gradient(50% 50% at 60% 88%,rgba(31,143,181,.38),transparent 66%);
  filter:blur(10px);animation:aurora 26s var(--ease) infinite alternate;
}
.sales-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,24,26,.72),rgba(18,24,26,.92));
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-4%,3%,0) scale(1.08)}
  100%{transform:translate3d(3%,-3%,0) scale(1.04)}
}
.sales-hero__inner{padding-block:clamp(2.5rem,5vw,4.25rem)}
.sales-hero h1{color:#fff;max-width:17em;margin-bottom:.85rem}
.sales-hero p{color:#c2d0cd;max-width:46em;font-size:var(--fs-lead);margin:0}
.sales-hero__sla{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.sales-hero__sla span{
  display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:650;color:#e7efed;
}
.sales-hero__sla svg{width:15px;height:15px;color:var(--leaf-300);flex:none}

/* Wizard shell */
.wiz{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.wiz__main{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.35rem,2.6vw,2.25rem);box-shadow:var(--sh-sm)}

/* Progress rail */
.wiz-progress{margin-bottom:1.9rem}
.wiz-progress__bar{height:5px;border-radius:5px;background:var(--graphite-200);overflow:hidden}
.wiz-progress__fill{display:block;height:100%;width:25%;border-radius:5px;background:var(--grad-brand);transition:width .45s var(--ease)}
.wiz-progress__steps{display:flex;justify-content:space-between;gap:.5rem;margin-top:.85rem}
.wiz-progress__steps li{
  flex:1;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:650;color:var(--graphite-400);
  display:flex;align-items:center;gap:.45rem;transition:color var(--dur) var(--ease);
}
.wiz-progress__steps li b{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--graphite-100);color:var(--graphite-400);font-size:.7rem;font-weight:800;
  transition:all var(--dur) var(--ease);
}
.wiz-progress__steps li.is-current{color:var(--ink)}
.wiz-progress__steps li.is-current b{background:var(--graphite-900);color:#fff}
.wiz-progress__steps li.is-done{color:var(--leaf-700)}
.wiz-progress__steps li.is-done b{background:var(--leaf-600);color:#fff}
.wiz-progress__steps li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Steps */
.wiz-step{border:0;padding:0;margin:0;min-inline-size:0}
.wiz-step[hidden]{display:none}
.wiz-step:not([hidden]){animation:stepIn .42s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wiz-step legend{
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-h3);color:var(--ink);
  padding:0;margin-bottom:.35rem;line-height:1.25;letter-spacing:-.02em;
}
.wiz-step__hint{font-size:var(--fs-sm);color:var(--muted);margin-bottom:1.6rem}
.wiz-block{margin-bottom:1.6rem}
.wiz-block>.wiz-label{
  display:block;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--graphite-600);margin-bottom:.7rem;
}
.wiz-block .req{color:#c0392b}
.wiz-block .form-grid{gap:1.05rem}

/* Selectable cards */
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.choice-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.choice{position:relative}
.choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.choice__box{
  display:flex;flex-direction:column;gap:.4rem;height:100%;padding:1rem;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;
  transition:all var(--dur) var(--ease);
}
.choice__box svg{width:24px;height:24px;color:var(--graphite-400);transition:color var(--dur) var(--ease)}
.choice__box b{font-family:var(--font-head);font-size:var(--fs-sm);color:var(--ink);line-height:1.3}
.choice__box span{font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.choice input:hover + .choice__box{border-color:var(--leaf-400);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.choice input:focus-visible + .choice__box{outline:3px solid var(--leaf-500);outline-offset:2px}
.choice input:checked + .choice__box{
  border-color:var(--leaf-600);background:var(--leaf-100);box-shadow:0 0 0 3px rgba(99,167,51,.16);
}
.choice input:checked + .choice__box svg{color:var(--leaf-700)}
.choice input:checked + .choice__box::after{
  content:"";position:absolute;top:.6rem;right:.6rem;width:16px;height:16px;border-radius:50%;
  background:var(--leaf-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.choice.is-invalid .choice__box{border-color:#e07a6c}

/* Wizard footer nav */
.wiz-nav{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.wiz-nav__spacer{flex:1}
.wiz-nav__count{font-size:var(--fs-xs);color:var(--muted);font-family:var(--font-head);font-weight:600}

/* Review list */
.review{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:0}
.review div{display:flex;gap:1rem;justify-content:space-between;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.review div:last-child{border-bottom:0}
.review div:nth-child(odd){background:var(--bg-soft)}
.review dt{color:var(--muted);flex:none;max-width:48%}
.review dd{margin:0;color:var(--ink);font-weight:600;text-align:right}

/* Live summary rail */
.wiz-aside{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:1rem}
.wiz-card{
  background:var(--grad-dark);color:#c9d4d3;border-radius:var(--r-lg);
  padding:clamp(1.25rem,2.2vw,1.7rem);position:relative;overflow:hidden;
}
.wiz-card::before{content:"";position:absolute;inset:0;background:radial-gradient(460px 240px at 96% -14%,rgba(125,190,60,.4),transparent 62%)}
.wiz-card > *{position:relative}
.wiz-card h2{color:#fff;font-size:1.1rem;margin-bottom:.25rem}
.wiz-card__sub{font-size:var(--fs-xs);color:#8b979d;margin-bottom:1.25rem}
.wiz-est{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:1rem;margin-bottom:1.15rem;background:rgba(255,255,255,.04)}
.wiz-est b{display:block;font-family:var(--font-head);font-weight:800;font-size:1.85rem;color:#fff;line-height:1.05;letter-spacing:-.02em}
.wiz-est b small{font-size:.46em;font-weight:700;color:var(--leaf-300);letter-spacing:0}
.wiz-est > span{font-size:var(--fs-xs);color:#93a3a0}
.wiz-est__row{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-xs)}
.wiz-est__row i{font-style:normal;color:#8b979d}
.wiz-est__row em{font-style:normal;color:#fff;font-weight:650;font-family:var(--font-head)}
.wiz-sum{display:flex;flex-direction:column;gap:.6rem}
.wiz-sum__row{display:flex;justify-content:space-between;gap:.9rem;font-size:var(--fs-xs);align-items:baseline}
.wiz-sum__row i{font-style:normal;color:#8b979d;flex:none}
.wiz-sum__row em{font-style:normal;color:#fff;font-weight:600;text-align:right;font-family:var(--font-head)}
.wiz-sum__row em.is-empty{color:#5b666c;font-weight:400;font-style:italic}

/* Success panel */
.wiz-done{text-align:center;padding:clamp(1.5rem,4vw,3rem) 1rem}
.wiz-done__tick{
  width:74px;height:74px;border-radius:50%;margin:0 auto 1.35rem;display:grid;place-items:center;
  background:var(--leaf-100);color:var(--leaf-700);animation:pop .5s var(--ease) both;
}
.wiz-done__tick svg{width:36px;height:36px}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.wiz-done h2{margin-bottom:.5rem}
.wiz-done p{max-width:44ch;margin-inline:auto;color:var(--graphite-500)}
.wiz-done .cluster{justify-content:center;margin-top:1.75rem}

@media (max-width:1080px){
  .wiz{grid-template-columns:1fr}
  .wiz-aside{position:static}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .choice-grid,.choice-grid--2{grid-template-columns:1fr}
  .wiz-progress__steps li span{display:none}
  .wiz-progress__steps li{flex:0 0 auto}
  .wiz-progress__steps{justify-content:flex-start;gap:.6rem}
  .wiz-nav .btn{flex:1 1 100%}
  .wiz-nav__spacer,.wiz-nav__count{display:none}
  .review div{flex-direction:column;gap:.15rem}
  .review dd{text-align:left}
  .review dt{max-width:none}
}

/* ==========================================================================
   16. CENTRED HERO + LIGHTWEIGHT STATS  (homepage)
   ========================================================================== */
.hero--center .hero__inner{
  grid-template-columns:1fr;text-align:center;
  padding-block:clamp(3.5rem,9vw,7rem) clamp(1.75rem,4vw,2.75rem);
}
.hero--center .hero__body{max-width:840px;margin-inline:auto}
.hero--center .hero__badge{margin-inline:auto}
.hero--center .hero__lead{margin-inline:auto;max-width:56ch}
.hero--center .hero__actions{justify-content:center;margin-bottom:0}
.hero--center h1{letter-spacing:-.03em}

.hero__strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);overflow:hidden;
  margin-bottom:clamp(2rem,5vw,3.25rem);
}
.hero__strip div{
  background:rgba(14,20,21,.62);backdrop-filter:blur(8px);
  padding:1.05rem 1.1rem;text-align:center;
}
.hero__strip b{
  display:block;font-family:var(--font-head);font-weight:700;
  font-size:1.075rem;color:#fff;line-height:1.25;letter-spacing:-.01em;
}
.hero__strip span{font-size:var(--fs-xs);color:#a3b1af;display:block;margin-top:.15rem}

/* Small standalone figures (used under the savings table) */
.stat-mini{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.15rem 1rem;text-align:center;
}
.stat-mini b{
  display:block;font-family:var(--font-head);font-weight:800;letter-spacing:-.025em;
  font-size:1.55rem;line-height:1.15;color:var(--ink);margin-bottom:.2rem;
}
.stat-mini span{font-size:var(--fs-xs);color:var(--muted);line-height:1.45}

@media (max-width:900px){
  .hero__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hero__strip{grid-template-columns:1fr}
  .hero--center .hero__actions .btn{width:100%}
}

/* ---------- Photographic hero + CTA band ---------- */
/* A real photograph needs a stronger, vertical scrim than the angled one
   used over the illustration, so centred white text stays readable. */
.hero--center::after{
  background:
    linear-gradient(180deg,rgba(9,14,15,.74) 0%,rgba(9,14,15,.52) 42%,rgba(9,14,15,.86) 100%),
    radial-gradient(60% 50% at 50% 42%,rgba(9,14,15,.35),transparent 70%);
}
.hero__bg img{filter:saturate(1.05)}

.cta-band--photo{
  background-image:
    linear-gradient(90deg,rgba(11,17,18,.95) 0%,rgba(11,17,18,.86) 42%,rgba(11,17,18,.6) 100%),
    url("../img/photo-city.jpg");
  background-size:cover;
  background-position:center 30%;
}
.cta-band--photo::before{display:none}
@media (max-width:960px){
  .cta-band--photo{
    background-image:
      linear-gradient(180deg,rgba(11,17,18,.92) 0%,rgba(11,17,18,.9) 100%),
      url("../img/photo-city.jpg");
  }
}

/* ==========================================================================
   17. LOCKED ESTIMATE  (sales wizard)
   The figures are computed live but held back until the enquiry is sent,
   so the visitor gets their number and SunX gets a contactable lead.
   ========================================================================== */
.wiz-est{position:relative;overflow:hidden}

.wiz-est__figures{
  transition:filter .55s var(--ease),opacity .55s var(--ease),transform .55s var(--ease);
}
.wiz-est.is-locked .wiz-est__figures{
  filter:blur(10px) saturate(.55);
  opacity:.5;
  transform:scale(.985);
  user-select:none;
  pointer-events:none;
}

.wiz-est__veil{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;text-align:center;padding:1rem .9rem;
  background:linear-gradient(180deg,rgba(18,24,26,.34),rgba(18,24,26,.52));
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.wiz-est__lock{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(125,190,60,.18);border:1px solid rgba(125,190,60,.4);
  color:var(--leaf-300);margin-bottom:.2rem;
}
.wiz-est__lock svg{width:17px;height:17px}
.wiz-est__veil b{
  font-family:var(--font-head);font-size:.95rem;color:#fff;font-weight:700;line-height:1.3;
}
.wiz-est__veil > span:last-child{
  font-size:var(--fs-xs);color:#a9b8b6;line-height:1.45;max-width:24ch;
}
.wiz-est.is-ready .wiz-est__lock{
  background:rgba(245,166,35,.2);border-color:rgba(245,166,35,.5);color:var(--solar-400);
  animation:lockNudge 1.8s var(--ease) infinite;
}
@keyframes lockNudge{
  0%,70%,100%{transform:translateY(0)}
  80%{transform:translateY(-3px)}
  90%{transform:translateY(0)}
}

.wiz-est.is-unlocked .wiz-est__veil{opacity:0;visibility:hidden}
.wiz-est.is-unlocked .wiz-est__figures{
  filter:none;opacity:1;transform:none;user-select:auto;
  animation:revealFigures .7s var(--ease) both;
}
@keyframes revealFigures{
  from{filter:blur(10px);opacity:.5;transform:scale(.985)}
  to{filter:blur(0);opacity:1;transform:scale(1)}
}

/* ---- the revealed figures on the success panel ---- */
.done-est{
  display:grid;grid-template-columns:1.1fr .9fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;max-width:560px;margin:0 auto 1.35rem;text-align:left;
  animation:revealFigures .8s var(--ease) both;
}
.done-est__main{background:var(--grad-dark);padding:1.35rem 1.5rem;color:#fff}
.done-est__main b{
  display:block;font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.8rem,4vw,2.35rem);line-height:1.05;color:#fff;
}
.done-est__main b small{font-size:.42em;font-weight:700;color:var(--leaf-300);letter-spacing:0}
.done-est__main span{font-size:var(--fs-xs);color:#a9b8b6;display:block;margin-top:.3rem}
.done-est__side{display:grid;grid-template-rows:1fr 1fr;gap:1px;background:var(--line)}
.done-est__side div{background:#fff;padding:.85rem 1.15rem}
.done-est__side b{
  display:block;font-family:var(--font-head);font-weight:700;font-size:1.15rem;
  color:var(--ink);line-height:1.2;
}
.done-est__side span{font-size:var(--fs-xs);color:var(--muted)}

@media (max-width:560px){
  .done-est{grid-template-columns:1fr}
  .done-est__side{grid-template-rows:none;grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   18. LOCKED BLOCK  (reusable)
   Same exchange as the quote wizard: the figures are computed live but
   held back until an enquiry is sent. Used on the savings calculator.
   ========================================================================== */
.locked-block{position:relative;overflow:hidden;border-radius:var(--r-md)}
.locked-block > *:not(.locked-block__veil){
  transition:filter .55s var(--ease),opacity .55s var(--ease);
}
.locked-block.is-locked > *:not(.locked-block__veil){
  filter:blur(10px) saturate(.55);
  opacity:.5;
  user-select:none;
  pointer-events:none;
}
.locked-block__veil{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;text-align:center;padding:1rem .9rem;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.locked-block__veil b{
  font-family:var(--font-head);font-size:.95rem;font-weight:700;line-height:1.3;
}
.locked-block__veil > span:last-child{
  font-size:var(--fs-xs);line-height:1.45;max-width:26ch;
}
.locked-block.is-unlocked .locked-block__veil{opacity:0;visibility:hidden}
.locked-block.is-unlocked > *:not(.locked-block__veil){filter:none;opacity:1;user-select:auto}

/* On the dark result panel */
.calc__result .locked-block__veil{
  background:linear-gradient(180deg,rgba(18,24,26,.4),rgba(18,24,26,.62));
}
.calc__result .locked-block__veil b{color:#fff}
.calc__result .locked-block__veil > span:last-child{color:#a9b8b6}

/* On the light input panel */
.calc__panel .locked-block__veil{
  background:linear-gradient(180deg,rgba(247,249,248,.72),rgba(247,249,248,.88));
}
.calc__panel .locked-block__veil b{color:var(--ink)}
.calc__panel .locked-block__veil > span:last-child{color:var(--muted)}
.calc__panel .locked-block .wiz-est__lock{
  background:var(--leaf-100);border-color:rgba(74,139,44,.35);color:var(--leaf-700);
}