/* ==========================================================================
   SMB Energy — Design System v2
   Palette derived from the logo: amber flame (gas) + electric blue (power)
   ========================================================================== */

:root {
  /* Brand */
  --amber:        #FFA51F;
  --amber-deep:   #EF8A00;
  --amber-light:  #FFC55C;
  --blue:         #1E63E9;
  --blue-deep:    #0F44B8;
  --blue-light:   #5A96FF;
  --green:        #22A06B;
  --green-light:  #6EE7A8;

  /* Dark canvas */
  --navy-950:     #04070F;
  --navy-900:     #080D1C;
  --navy-800:     #0F1729;
  --navy-700:     #18223C;

  /* Light canvas */
  --white:        #FFFFFF;
  --soft:         #F5F8FC;
  --soft-2:       #E9F0F9;
  --ink:          #080E1F;
  --ink-2:        #2A3650;
  --muted:        #5D6A86;
  --line:         #E2E9F4;

  /* Gradients */
  --grad-brand:   linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 42%, var(--blue) 100%);
  --grad-amber:   linear-gradient(135deg, var(--amber-light), var(--amber-deep));
  --grad-blue:    linear-gradient(135deg, var(--blue-light), var(--blue-deep));
  --grad-green:   linear-gradient(135deg, var(--green-light), var(--green));

  /* Shape & depth */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 2px 8px rgba(8, 14, 31, .06);
  --shadow-md: 0 14px 34px -10px rgba(8, 14, 31, .14);
  --shadow-lg: 0 36px 68px -20px rgba(8, 14, 31, .2);
  --shadow-glow-a: 0 18px 46px -14px rgba(255, 165, 31, .5);
  --shadow-glow-b: 0 18px 46px -14px rgba(30, 99, 233, .5);

  /* Layout */
  --wrap: 1220px;
  --gutter: clamp(20px, 5vw, 48px);
  --sec-y: clamp(68px, 9vw, 124px);

  /* Type */
  --font-display: 'Outfit', 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: `hidden` turns body into a scroll container, which can
     break position:sticky and fixed children. `clip` stops the sideways
     overflow without that side effect. Older browsers fall back to hidden. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--amber); color: var(--navy-950); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.5rem); letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.15rem); letter-spacing: -.032em; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.0625rem; }
p { text-wrap: pretty; }

.grad-text {
  background: linear-gradient(100deg, var(--amber-light) 0%, var(--amber) 38%, var(--blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text--dark {
  background: linear-gradient(100deg, var(--amber-deep) 0%, var(--blue) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout primitives ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sec-y); position: relative; }
.section--soft { background: var(--soft); }
.section--tight { padding-block: clamp(50px, 6vw, 84px); }

.sec-head { max-width: 760px; margin-bottom: clamp(42px, 5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--muted); font-size: 1.075rem; margin-top: 18px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 3px;
  border-radius: 3px;
  background: var(--grad-amber);
}
.sec-head--center .eyebrow::after {
  content: '';
  width: 26px; height: 3px;
  border-radius: 3px;
  background: var(--grad-amber);
}
.eyebrow--light { color: var(--amber); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease), border-color .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn--primary { background: var(--grad-amber); color: var(--navy-950); box-shadow: var(--shadow-glow-a); }
.btn--primary:hover { box-shadow: 0 26px 58px -14px rgba(255, 165, 31, .65); }

.btn--blue { background: var(--blue); color: #fff; box-shadow: var(--shadow-glow-b); }
.btn--blue:hover { background: var(--blue-deep); }

.btn--ghost {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); }

.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }

.btn--sm { padding: 11px 22px; font-size: .925rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue);
  font-size: .975rem;
}
.link-arrow svg { width: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--grad-brand);
  z-index: 200;
  pointer-events: none;
}

/* ==========================================================================
   Top utility bar
   ========================================================================== */
.topbar {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .72);
  font-size: .855rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 46px;
  flex-wrap: wrap;
}
.topbar__list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.topbar__list a, .topbar__list span {
  display: inline-flex; align-items: center; gap: 8px; transition: color .2s;
}
.topbar__list a:hover { color: var(--amber); }
.topbar__list svg { width: 15px; height: 15px; color: var(--amber); flex: none; }
.topbar__tag {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--amber-light); font-weight: 600;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(4, 7, 15, .8);
  backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck { background: rgba(4, 7, 15, .97); box-shadow: 0 10px 36px -14px rgba(0, 0, 0, .8); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 82px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 60px; width: auto; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  position: relative;
  padding: 10px 16px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: .975rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav a[aria-current="page"] { color: #fff; font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--grad-amber);
}
.header__cta { display: flex; align-items: center; gap: 12px; }

/* The three bars are positioned absolutely rather than stacked with margins.
   Grid rows plus margins left their exact centres up to the layout engine, so
   the two rotated bars missed each other and drew a ">" instead of an "X". */
.burger {
  display: none;
  position: relative;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer; padding: 0;
}
.burger span {
  position: absolute;
  left: 13px;                 /* (46 - 20) / 2 */
  width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 15px; }   /* centres: 16 */
.burger span:nth-child(2) { top: 22px; }   /*          23 */
.burger span:nth-child(3) { top: 29px; }   /*          30 */

/* 1 and 3 both move to the middle (23), so they cross into a clean X */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Dark canvas + aurora background
   ========================================================================== */
.dark-canvas {
  position: relative;
  background: var(--navy-950);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.dark-canvas h1, .dark-canvas h2, .dark-canvas h3 { color: #fff; }

.aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .75;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(255, 165, 31, .42), transparent 68%);
  top: -220px; left: -160px;
  animation: drift-a 22s var(--ease) infinite alternate;
}
.aurora span:nth-child(2) {
  width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(30, 99, 233, .45), transparent 68%);
  bottom: -340px; right: -200px;
  animation: drift-b 26s var(--ease) infinite alternate;
}
.aurora span:nth-child(3) {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(90, 150, 255, .3), transparent 70%);
  top: 32%; left: 46%;
  animation: drift-c 30s var(--ease) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(90px, 70px, 0) scale(1.14); } }
@keyframes drift-b { to { transform: translate3d(-110px, -60px, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(-80px, 90px, 0) scale(1.2); } }

.mesh {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 92% 74% at 50% 26%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 92% 74% at 50% 26%, #000 18%, transparent 78%);
}

/* Subtle film grain — keeps big gradients from banding */
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: clamp(60px, 8vw, 108px) clamp(80px, 11vw, 148px); }
.hero__inner {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
}
.hero__lede {
  font-size: clamp(1.075rem, 1.5vw, 1.235rem);
  color: rgba(255, 255, 255, .74);
  max-width: 54ch;
  margin-top: 24px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .875rem; font-weight: 500;
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
  margin-bottom: 28px;
}
.pill b {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 100px;
  background: var(--grad-amber);
  color: var(--navy-950);
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}

.hero__chips {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .11);
}
.hero__chips li {
  display: flex; align-items: center; gap: 9px;
  font-size: .925rem; color: rgba(255, 255, 255, .74);
}
.hero__chips svg { width: 19px; height: 19px; color: var(--amber); flex: none; }

/* Hero glass card */
.hero__visual { position: relative; }
.hero__card {
  position: relative;
  border-radius: var(--r-xl);
  padding: 34px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .17);
  backdrop-filter: blur(24px);
  box-shadow: 0 44px 96px -32px rgba(0, 0, 0, .92);
}
.hero__card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hero__card-top h2 { font-size: 1.075rem; letter-spacing: -.01em; }
.hero__card-top span {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-light);
  display: inline-flex; align-items: center; gap: 7px;
}
.hero__card-top span::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-light);
  box-shadow: 0 0 0 4px rgba(110, 231, 168, .18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 8px rgba(110, 231, 168, 0); }
}

/* Coverage checklist.
   These are binary states (covered / not covered), so they get ticks rather
   than progress bars - a bar implies a quantity that does not exist here. */
.covers { display: grid; }
.cover {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
}
.cover + .cover { border-top: 1px solid rgba(255, 255, 255, .09); }

.cover__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex: none;
}
.cover__icon svg { width: 20px; height: 20px; }
.cover__icon--gas  { background: var(--grad-amber); color: var(--navy-950); }
.cover__icon--elec { background: var(--grad-blue);  color: #fff; }
.cover__icon--both { background: #e89e00; color: #fff; }

.cover__text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  color: #fff; line-height: 1.3;
}
.cover__text small {
  display: block;
  font-size: .8rem;
  color: rgba(255, 255, 255, .52);
  line-height: 1.4;
}

.cover__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 7px;
  border-radius: 100px;
  background: rgba(34, 160, 107, .16);
  border: 1px solid rgba(110, 231, 168, .3);
  color: var(--green-light);
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 600;
  white-space: nowrap;
}
.cover__state svg { width: 14px; height: 14px; }
.cover__state i {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--grad-green);
  color: var(--navy-950);
  flex: none;
}

/* Ticks land one after another once the hero has settled.
   Purely additive: the base rule above leaves them visible, so if animation
   never runs the content is still there. */
@media (prefers-reduced-motion: no-preference) {
  .cover__state {
    opacity: 0;
    transform: translateX(10px);
    animation: tick-in .6s var(--ease-out) forwards;
  }
  .cover:nth-child(1) .cover__state { animation-delay: .60s; }
  .cover:nth-child(2) .cover__state { animation-delay: .78s; }
  .cover:nth-child(3) .cover__state { animation-delay: .96s; }
}
@keyframes tick-in { to { opacity: 1; transform: none; } }

/* Right-aligned: the bottom-LEFT corner is reserved for the floating badge,
   so the note is pushed clear of it rather than sitting underneath. */
.hero__card-foot {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 9px; text-align: right;
  font-size: .84rem; color: rgba(255, 255, 255, .6);
}
.hero__card-foot svg { width: 20px; height: 20px; color: var(--amber); flex: none; }

.hero__float {
  position: absolute;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 20px; border-radius: var(--r-md);
  background: rgba(8, 13, 28, .84);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(18px);
  box-shadow: 0 26px 52px -18px rgba(0, 0, 0, .85);
  animation: bob 5.5s ease-in-out infinite;
}
/* Both badges hang off a corner the card deliberately keeps empty, so they
   never sit on top of the content underneath. */
.hero__float--a { bottom: -28px; left: -34px; }
.hero__float--b { top: -28px; right: -34px; animation-delay: -2.75s; }
.hero__float i {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; flex: none;
}
.hero__float--a i { background: var(--grad-amber); color: var(--navy-950); }
.hero__float--b i { background: var(--grad-blue); color: #fff; }
.hero__float svg { width: 21px; height: 21px; }
.hero__float strong {
  display: block; font-family: var(--font-display);
  font-size: 1rem; color: #fff; line-height: 1.25;
}
.hero__float small { font-size: .78rem; color: rgba(255, 255, 255, .6); }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* ==========================================================================
   Marquee ticker
   ========================================================================== */
.marquee {
  background: var(--navy-900);
  border-block: 1px solid rgba(255, 255, 255, .07);
  padding-block: 22px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.02rem;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
}
.marquee__item svg { width: 19px; height: 19px; color: var(--amber); flex: none; }
.marquee__item::after {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  margin-left: 46px;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Stat band
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.stat {
  background: var(--white);
  padding: clamp(28px, 3.4vw, 42px) clamp(18px, 2.4vw, 30px);
  text-align: center;
  transition: background-color .3s var(--ease);
}
.stat:hover { background: var(--soft); }
.stat i {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: var(--soft-2);
  color: var(--blue-deep);
}
.stat i svg { width: 21px; height: 21px; }
/* Solid, not gradient: clipped-gradient text washes out at this size and the
   numbers are the whole point of the band. Swap to var(--blue-deep) if you
   want them brand-coloured instead. */
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 700; letter-spacing: -.035em; line-height: 1;
  color: var(--ink);
}
.stat__label { margin-top: 12px; font-size: .935rem; color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   Cards
   ========================================================================== */
.grid { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 36px);
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out), border-color .38s;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::after { transform: scaleX(1); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted); font-size: .99rem; }

.card__icon {
  width: 58px; height: 58px; border-radius: 16px;
  display: grid; place-items: center;
  margin-bottom: 22px; color: #fff;
  transition: transform .38s var(--ease-out);
}
.card:hover .card__icon { transform: scale(1.09) rotate(-5deg); }
.card__icon svg { width: 27px; height: 27px; }
.card__icon--amber { background: var(--grad-amber); color: var(--navy-950); box-shadow: var(--shadow-glow-a); }
.card__icon--blue  { background: var(--grad-blue);  box-shadow: var(--shadow-glow-b); }
.card__icon--mix   { background: #eaaf01; box-shadow: 0 18px 40px -14px rgba(120, 100, 200, .5); }

.card--num { padding-top: clamp(30px, 3.4vw, 40px); }
.card__num {
  font-family: var(--font-display);
  font-size: 3.25rem; font-weight: 700; line-height: 1;
  letter-spacing: -.05em; color: var(--soft-2);
  margin-bottom: 14px;
  transition: color .38s var(--ease);
}
.card--num:hover .card__num { color: var(--amber); }

/* ==========================================================================
   Bento grid
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 22px);
}
.bento__cell {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 36px);
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out);
  display: flex; flex-direction: column; gap: 12px;
}
.bento__cell:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.bento__cell h3 { margin-bottom: 2px; }
.bento__cell p { color: var(--muted); font-size: .99rem; }
.bento__cell--wide { grid-column: span 2; }

/* Feature cell — dark, spans two columns */
.bento__cell--feature {
  grid-column: span 2;
  background: var(--navy-900);
  border-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .72);
  justify-content: space-between;
  min-height: 240px;
}
.bento__cell--feature h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.bento__cell--feature p { color: rgba(255, 255, 255, .68); max-width: 46ch; }
.bento__cell--feature::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 31, .3), transparent 68%);
  filter: blur(70px);
  right: -140px; bottom: -180px;
  pointer-events: none;
}
.bento__cell--accent {
  background: var(--grad-brand);
  border-color: transparent;
  color: rgba(255, 255, 255, .92);
}
.bento__cell--accent h3 { color: #fff; }
.bento__cell--accent p { color: rgba(255, 255, 255, .88); }
.bento__cell--accent .bento__icon { background: rgba(255, 255, 255, .2); color: #fff; }

.bento__icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--soft-2); color: var(--blue-deep);
  margin-bottom: 6px; flex: none;
}
.bento__icon svg { width: 24px; height: 24px; }
.bento__cell--feature .bento__icon { background: rgba(255, 255, 255, .1); color: var(--amber); }

.bento__stat {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--ink);
}
.bento__cell--accent .bento__stat, .bento__cell--feature .bento__stat { color: #fff; }

/* ==========================================================================
   Service cards
   ========================================================================== */
.svc {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out), border-color .38s;
}
.svc:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.svc:hover .svc__media img { transform: scale(1.08); }
.svc__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 7, 15, .8), rgba(4, 7, 15, .04) 60%);
}
.svc__badge {
  position: absolute; z-index: 2;
  left: 20px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 100px;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.svc__badge svg { width: 15px; height: 15px; }
.svc__badge--amber { background: var(--grad-amber); color: var(--navy-950); }
.svc__badge--blue  { background: var(--grad-blue); color: #fff; }
.svc__badge--mix   { background: #eaaf01; color: #fff; }
.svc__body {
  padding: clamp(24px, 2.8vw, 32px);
  display: flex; flex-direction: column; flex: 1; gap: 12px;
}
.svc__body p { color: var(--muted); font-size: .99rem; flex: 1; }
.svc__list { display: grid; gap: 10px; margin-top: 4px; }
.svc__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .935rem; color: var(--ink-2); }
.svc__list svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 3px; }
.svc__body .link-arrow { margin-top: 8px; }

/* ==========================================================================
   Comparison table
   ========================================================================== */
.compare-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
  -webkit-overflow-scrolling: touch;
}
.compare { min-width: 720px; font-size: .975rem; }
.compare th, .compare td { padding: 18px 22px; text-align: left; vertical-align: middle; }
.compare thead th {
  background: var(--navy-950);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  letter-spacing: -.01em;
  position: relative;
}
.compare thead th:first-child { font-weight: 500; color: rgba(255, 255, 255, .6); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.compare thead th span {
  display: inline-flex; align-items: center; gap: 9px;
}
.compare thead th svg { width: 18px; height: 18px; flex: none; }
.compare thead th.is-gas svg  { color: var(--amber); }
.compare thead th.is-elec svg { color: var(--blue-light); }
.compare thead th.is-mix svg  { color: var(--green-light); }
.compare thead th.is-mix::after {
  content: 'Best value';
  display: block;
  margin-top: 5px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-950);
  background: var(--grad-amber);
  border-radius: 100px;
  padding: 3px 10px;
  width: max-content;
}
.compare tbody tr { border-top: 1px solid var(--line); }
.compare tbody tr:nth-child(even) { background: var(--soft); }
.compare tbody th {
  font-family: var(--font-display);
  font-weight: 600; color: var(--ink);
  width: 30%;
}
.compare tbody td { color: var(--muted); }
.compare .tick, .compare .cross {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
}
.compare .tick { background: rgba(34, 160, 107, .13); color: var(--green); }
.compare .cross { background: rgba(93, 106, 134, .12); color: var(--muted); }
.compare .tick svg, .compare .cross svg { width: 14px; height: 14px; }

/* ==========================================================================
   Split (image + text)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}
.split--flip .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--r-xl);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}
.split__media::before {
  content: '';
  position: absolute;
  inset: auto -22px -22px auto;
  width: 62%; height: 62%;
  border-radius: var(--r-xl);
  background: var(--grad-brand);
  opacity: .14;
  z-index: -1;
}
.split__badge {
  position: absolute; right: -18px; bottom: 28px;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 18px 24px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 14px;
  max-width: 250px;
}
.split__badge i {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad-amber); color: var(--navy-950);
  display: grid; place-items: center; flex: none;
}
.split__badge svg { width: 22px; height: 22px; }
.split__badge strong {
  display: block; font-family: var(--font-display);
  color: var(--ink); font-size: 1.05rem; line-height: 1.2;
}
.split__badge small { font-size: .8rem; color: var(--muted); }

.split__body > p { color: var(--muted); margin-top: 20px; }
.checklist { display: grid; gap: 14px; margin-top: 28px; }
.checklist li { display: flex; align-items: flex-start; gap: 13px; font-size: 1rem; }
.checklist i {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(34, 160, 107, .12); color: var(--green);
  display: grid; place-items: center; flex: none; margin-top: 2px;
}
.checklist svg { width: 15px; height: 15px; }
.checklist strong { color: var(--ink); font-family: var(--font-display); }
.split__body .btn { margin-top: 32px; }

/* ==========================================================================
   Glossary / rates explainer
   ========================================================================== */
.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 22px); }
.glossary__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-md);
  padding: 24px 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-left-color .3s;
}
.glossary__item:nth-child(even) { border-left-color: var(--blue); }
.glossary__item:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.glossary__item h3 { font-size: 1.075rem; margin-bottom: 8px; }
.glossary__item p { color: var(--muted); font-size: .96rem; }
.glossary__item abbr { text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quote {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out);
}
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.quote__mark {
  font-family: var(--font-display);
  font-size: 4.5rem; line-height: .7;
  color: var(--amber); opacity: .3;
}
.quote h3 { font-size: 1.125rem; }
.quote p { color: var(--muted); font-size: 1rem; flex: 1; }
.quote__stars { display: flex; gap: 3px; }
.quote__stars svg { width: 17px; height: 17px; color: var(--amber); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(28px, 5vw, 60px); flex-wrap: wrap;
}
.cta h2 { max-width: 17ch; }
.cta p { color: rgba(255, 255, 255, .72); margin-top: 16px; max-width: 52ch; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: clamp(28px, 4vw, 52px); align-items: start;
}
.info-card {
  display: flex; gap: 18px; padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.info-card i {
  width: 50px; height: 50px; border-radius: 14px;
  background: #e89e00; color: #fff;
  display: grid; place-items: center; flex: none;
}
.info-card svg { width: 23px; height: 23px; }
.info-card h3 { font-size: 1.05rem; margin-bottom: 5px; }
.info-card p, .info-card a { color: var(--muted); font-size: .99rem; }
.info-card a:hover { color: var(--blue); }

.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: var(--shadow-md);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--ink); }
.field label span { color: #D93636; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--soft);
  font-size: 1rem;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: var(--white);
  box-shadow: 0 0 0 4px rgba(30, 99, 233, .12);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #D93636; }
.field small { font-size: .82rem; color: var(--muted); }
.form .btn { width: 100%; margin-top: 6px; }
.form__note { margin-top: 16px; font-size: .855rem; color: var(--muted); text-align: center; }
.form__status {
  margin-top: 16px; padding: 14px 18px;
  border-radius: var(--r-sm); font-size: .935rem;
  background: rgba(34, 160, 107, .1);
  border: 1px solid rgba(34, 160, 107, .3);
  color: #16794F;
}
.form__status[hidden] { display: none; }
.form__status a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Shown when contact-submit.php sends the visitor back with ?error= */
.form__status--error {
  margin: 0 0 24px;
  background: rgba(217, 54, 54, .08);
  border-color: rgba(217, 54, 54, .35);
  color: #A82323;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: 14px; max-width: 880px; margin-inline: auto; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq details[open] { border-color: rgba(30, 99, 233, .35); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 20px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .3s var(--ease);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details > div { padding: 0 26px 22px; color: var(--muted); }
.faq details > div a { color: var(--blue); font-weight: 600; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero { padding-block: clamp(58px, 7vw, 96px); text-align: center; }
.page-hero p {
  color: rgba(255, 255, 255, .72);
  max-width: 64ch; margin: 20px auto 0;
  font-size: 1.075rem;
}
.crumbs {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: .875rem; color: rgba(255, 255, 255, .5); margin-bottom: 20px;
}
.crumbs a:hover { color: var(--amber); }
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: '/'; color: rgba(255, 255, 255, .28); }
.crumbs [aria-current] { color: var(--amber); }

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */
.mobile-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px;
  border-radius: 100px;
  background: rgba(4, 7, 15, .93);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .7);
  transform: translateY(140%);
  transition: transform .4s var(--ease-out);
}
.mobile-cta.is-on { transform: none; }
.mobile-cta .btn { flex: 1; padding: 13px 18px; font-size: .95rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .62);
  padding-block: clamp(54px, 6vw, 80px) 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 56px);
}
.footer__brand img { height: auto !important; margin-bottom: 20px; }
.footer__brand p { font-size: .96rem; max-width: 36ch; }
.footer h4 { color: #fff; font-size: 1.02rem; margin-bottom: 20px; letter-spacing: -.01em; }
.footer__links { display: grid; gap: 12px; }
.footer__links a { font-size: .96rem; transition: color .2s, padding-left .2s; }
.footer__links a:hover { color: var(--amber); padding-left: 5px; }
.footer__contact { display: grid; gap: 16px; }
.footer__contact li { display: flex; gap: 12px; font-size: .96rem; }
.footer__contact svg { width: 18px; height: 18px; color: var(--amber); flex: none; margin-top: 4px; }
.footer__contact a:hover { color: var(--amber); }

.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: .875rem;
}
.footer__bar p { color: rgba(255, 255, 255, .45); }
.footer__bar strong { color: #fff; font-weight: 600; }

.footer__credit a {
  color: rgba(255, 255, 255, .78);
  font-family: var(--font-display);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.footer__credit a:hover { color: var(--amber); border-color: var(--amber); }

/* ==========================================================================
   Scroll reveal — directional variants
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

[data-reveal-dir="left"]  { transform: translateX(-42px); }
[data-reveal-dir="right"] { transform: translateX(42px); }
[data-reveal-dir="scale"] { transform: scale(.94) translateY(20px); }
[data-reveal-dir="fade"]  { transform: none; }

/* Children stagger in on their own, one after another */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .09s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .18s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .27s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .36s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .45s; }

/* Gentle scroll parallax — offset is written by JS */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* Hero lifts in once on load */
.hero__body > *, .hero__visual {
  animation: rise-in .95s var(--ease-out) both;
}
.hero__body > *:nth-child(1) { animation-delay: .05s; }
.hero__body > *:nth-child(2) { animation-delay: .13s; }
.hero__body > *:nth-child(3) { animation-delay: .21s; }
.hero__body > *:nth-child(4) { animation-delay: .29s; }
.hero__body > *:nth-child(5) { animation-delay: .37s; }
.hero__visual { animation-delay: .3s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 560px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--feature, .bento__cell--wide { grid-column: span 2; }
}

@media (max-width: 940px) {
  .burger { display: block; }

  /* backdrop-filter creates a containing block for position:fixed children,
     which traps the nav drawer inside the header instead of letting it fill
     the screen. Drop the blur here - the drawer covers everything anyway -
     and make the bar opaque to compensate. */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(4, 7, 15, .97);
  }

  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(84vw, 340px);
    flex-direction: column; align-items: stretch; gap: 6px;
    padding: 96px 22px 32px;
    background: var(--navy-950);
    border-left: 1px solid rgba(255, 255, 255, .1);
    transform: translateX(100%);
    transition: transform .4s var(--ease-out);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a { padding: 14px 18px; border-radius: var(--r-sm); font-size: 1.05rem; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { background: rgba(255, 255, 255, .08); }
  .nav .btn { margin-top: 12px; }
  .header__cta .btn { display: none; }
  .nav-scrim {
    position: fixed; inset: 0;
    background: rgba(4, 7, 15, .62);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s; z-index: 99;
  }
  .nav-scrim.is-on { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__badge { right: 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .topbar__list--secondary { display: none; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 84px; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .bento, .glossary { grid-template-columns: 1fr; }
  .bento__cell--feature, .bento__cell--wide { grid-column: span 1; }
  .footer__grid { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .hero__float--a { left: -6px; bottom: -18px; }
  .hero__float--b { right: -6px; top: -16px; }
  .split__badge { position: static; margin-top: 18px; max-width: none; }
  .topbar__inner { justify-content: center; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .hero__actions .btn, .cta__actions .btn { flex: 1 1 100%; }
  .mobile-cta .btn { width: auto; }
}

/* ==========================================================================
   Motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-stagger] > * { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
  .hero__body > *, .hero__visual { animation: none; opacity: 1; transform: none; }
  .cover__state { animation: none; opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .aurora span { animation: none; }
}

@media print {
  .header, .topbar, .cta, .burger, .nav-scrim, .mobile-cta, .marquee, .progress { display: none !important; }
  body { color: #000; padding-bottom: 0; }
  .dark-canvas, .footer { background: #fff !important; color: #000 !important; }
  .dark-canvas h1, .dark-canvas h2 { color: #000 !important; }
  .aurora, .mesh, .grain { display: none !important; }
}

/* Accessibility helpers */
.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;
}
.skip-link {
  position: absolute; left: 50%; top: -60px;
  transform: translateX(-50%); z-index: 210;
  background: var(--amber); color: var(--navy-950);
  padding: 12px 24px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; }