/* ==========================================================================
   Element Power Co — design system
   Charcoal shell, committed orange, signage typography (Archivo variable).
   Motion system: "charge & switch on" (see js/main.js).
   ========================================================================== */

/* ---------- Font ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* color */
  --ink-950: oklch(0.18 0.012 240);
  --ink-900: oklch(0.255 0.012 240);   /* brand charcoal #272C30 */
  --ink-800: oklch(0.31 0.012 240);
  --ink-700: oklch(0.40 0.012 240);
  --ink-400: oklch(0.72 0.01 240);     /* muted text on dark, AA on ink-900 */
  --paper: oklch(0.965 0.004 240);
  --paper-dim: oklch(0.90 0.006 240);
  --ink-on-paper: oklch(0.255 0.012 240);
  --muted-on-paper: oklch(0.42 0.012 240);
  --volt-500: oklch(0.745 0.157 55);   /* brand orange #FD9228 */
  --volt-600: oklch(0.68 0.16 50);
  --volt-300: oklch(0.84 0.115 65);
  --white: oklch(0.985 0.002 240);

  /* type */
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fs-hero: clamp(1.85rem, max(min(9.6vw, 3rem), 4.4vw + 0.5rem), 4.7rem); /* phones track 9.6vw (capped at 3rem for tablets) so 'CAN PAY THE' fits from 320px; desktop keeps the original 4.4vw + 0.5rem */
  --fs-cta: clamp(2rem, min(9.6vw, 2rem + 5vw), 6rem);           /* same idea for 'SWITCH ON?' */
  --fs-h2: clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

  /* rhythm */
  --space-section: clamp(5rem, 4rem + 7vw, 9.5rem);
  --container: 1280px;
  --gutter: clamp(20px, 3vw, 32px);
  --radius: 18px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* z scale */
  --z-marquee: 1;
  --z-nav: 50;
  --z-menu: 60;
  --z-loader: 100;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--white);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

h1, h2, h3 { line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--volt-500); color: var(--ink-950); }

:focus-visible { outline: 3px solid var(--volt-300); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: calc(var(--z-loader) + 1);
  background: var(--volt-500); color: var(--ink-950);
  padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Type voices ---------- */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 850;
  font-stretch: 122%;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.98;
}

/* line-reveal scaffolding: overflow masks, JS animates the inner */
.h-line { display: block; overflow: hidden; padding-block: 0.04em; }
.h-line-inner { display: block; will-change: transform; }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--ink-950);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  /* fail-safe: even with no JS, the loader gets out of the way */
  animation: loader-failsafe 0.5s ease 2s forwards;
}
.loader.is-done { display: none; }
.loader-mark { width: clamp(76px, 12vw, 112px); height: auto; }
.loader-tag {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-400); padding-left: 0.34em;
}
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-weight: 750; font-stretch: 105%; font-size: 0.95rem; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.btn-lg { height: 58px; padding: 0 34px; font-size: 1.02rem; }

/* label roll-up on hover: the label is the mask, the inner text the mover */
.btn-label { display: block; overflow: hidden; }
.btn-text { position: relative; display: inline-block; transition: transform 0.38s var(--ease-out); }
.btn-text::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%;
}
@media (hover: hover) {
  .btn:hover .btn-text { transform: translateY(-100%); }
}

.btn-solid { background: var(--volt-500); color: var(--ink-950); }
.btn-solid:hover { background: var(--volt-600); }

.btn-ghost { border-color: oklch(0.985 0.002 240 / 0.28); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); }

.btn-ink { background: var(--ink-950); color: var(--white); }
.btn-ink:hover { background: var(--ink-900); }

.btn-ghost-ink { border-color: oklch(0.18 0.012 240 / 0.4); color: var(--ink-950); }
.btn-ghost-ink:hover { border-color: var(--ink-950); }

.cta .btn:focus-visible, .btn-solid:focus-visible { outline-color: var(--ink-950); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.nav.is-scrolled {
  background: oklch(0.255 0.012 240 / 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.06);
}
.nav-inner {
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  display: flex; align-items: center; gap: 2rem;
  height: 80px;
}
.nav.is-scrolled .nav-inner { height: 64px; }

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.nav-mark { width: 38px; height: auto; flex: none; }
.nav-word { width: 132px; height: auto; }

/* nav battery = scroll progress: segments light with page progress */
.m-bit { opacity: 0.28; transition: opacity 0.3s var(--ease-out); }
.m-bit.on { opacity: 1; }

.nav-links { display: flex; gap: clamp(1.1rem, 2vw, 2rem); }
.nav-links a {
  position: relative;
  text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--white);
  padding: 6px 2px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--volt-500);
  transition: right 0.3s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.is-active::after { right: 0; }

.nav-cta { display: flex; gap: 10px; }
.nav-cta .btn { height: 46px; padding: 0 20px; font-size: 0.9rem; }

.nav-call {
  display: none;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--volt-500); color: var(--ink-950);
  flex: none;
}
.nav-call svg { width: 21px; height: 21px; }

.nav-burger {
  display: none;
  width: 48px; height: 48px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav-burger span {
  display: block; width: 26px; height: 2.5px; border-radius: 2px;
  background: var(--white);
  transition: transform 0.35s var(--ease-out);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.75px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mmenu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--ink-950);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 110px var(--gutter) 40px;
  visibility: hidden; opacity: 0;
  transition: opacity 0.35s var(--ease-out), visibility 0s 0.35s;
}
.mmenu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.mmenu-links { display: flex; flex-direction: column; }
.mmenu-links a {
  font-size: clamp(2rem, 9vw, 3rem); font-weight: 850; font-stretch: 118%;
  text-transform: uppercase; text-decoration: none; line-height: 1.16;
  color: var(--white); padding: 0.35rem 0;
}
.mmenu-links a:last-child { color: var(--volt-500); }
.mmenu-foot { display: grid; gap: 6px; color: var(--ink-400); font-size: 1rem; }
.mmenu-foot a { color: var(--white); text-decoration: none; font-weight: 600; }

/* nav layering above menu */
.nav { z-index: calc(var(--z-menu) + 1); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--ink-900); }
.hero-inner {
  display: grid;
  /* col 1 is the same inset as .container (gutter, or the centring margin once the
     viewport is wider than the container), so the copy lines up with everything below.
     Percentages resolve against layout width, so it stays exact next to a scrollbar. */
  grid-template-columns: minmax(var(--gutter), calc((100% - var(--container)) / 2)) minmax(0, 1fr) minmax(0, 41%);
  min-height: 100svh;
}
.hero-copy {
  grid-column: 2;
  align-self: center;
  padding: clamp(120px, 16vh, 170px) clamp(20px, 4.5vw, 72px) clamp(56px, 8vh, 90px) 0;
  max-width: calc(800px - var(--gutter));
}
.hero-kicker {
  font-weight: 650; font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  color: var(--volt-300);
  margin-bottom: 1.4rem;
}
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 880; font-stretch: 124%;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 0.96;
  margin-bottom: 1.6rem;
}
.hero-title .accent { color: var(--volt-500); }
.hero-sub {
  max-width: 46ch;
  color: var(--ink-400);
  margin-bottom: 2.2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 1.7rem; }
/* hero buttons at 1.7x the standard large button */
.hero-actions .btn { height: 98px; padding: 0 52px; font-size: 1.65rem; border-width: 2px; }
.hero-cred { font-size: 0.9rem; color: var(--ink-400); }
.hero-cred strong { color: var(--white); font-weight: 700; letter-spacing: 0.04em; }

/* right column: the funnel card floating over the darkened installer photo */
.hero-visual {
  grid-column: 3; position: relative;
  /* the card sits low so the installer stands clear above it */
  display: grid; align-items: end;
  padding: clamp(104px, 13vh, 150px) clamp(20px, 3vw, 48px) clamp(56px, 8vh, 90px);
}
.hero-photo { position: absolute; inset: 0; overflow: hidden; }
/* the crop is taller than any hero column, so cover fits by height: he always
   stands between 17% and 89% of the column, whatever the window shape */
.hero-photo picture, .hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%;
}
/* grade: dark at the seam with the copy column, light enough mid-frame that the
   sky and the installer read, with a top scrim to hold the nav */
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, oklch(0.255 0.012 240 / 0.5), oklch(0.255 0.012 240 / 0) 17%),
    linear-gradient(90deg, oklch(0.255 0.012 240 / 0.88), oklch(0.255 0.012 240 / 0.3) 40%, oklch(0.255 0.012 240 / 0.42));
}
.hero-quote { position: relative; z-index: 1; width: min(100%, 560px); margin-inline: auto; }
/* quote buttons land here: a single ring that swells and fades so the eye finds the card */
.hero-quote.is-pulsing #quote-slot { animation: quote-pulse 1.1s var(--ease-out); border-radius: var(--radius); }
@keyframes quote-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.745 0.157 55 / 0.7); }
  100% { box-shadow: 0 0 0 22px oklch(0.745 0.157 55 / 0); }
}

/* ---------- Marquee ---------- */
.marquee {
  position: relative; z-index: var(--z-marquee);
  background: var(--ink-950);
  border-top: 1px solid oklch(1 0 0 / 0.07);
  border-bottom: 1px solid oklch(1 0 0 / 0.07);
  overflow: hidden;
  padding: 1.05rem 0;
}
.marquee-track {
  display: flex; align-items: center; gap: 3.2rem;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.mq-item {
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 820; font-stretch: 124%;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.mq-mark { width: 1.25em; height: 1.25em; flex: none; }
@keyframes marquee { to { transform: translateX(calc(-100% / 4)); } }

/* ==========================================================================
   Statement
   ========================================================================== */
.statement { background: var(--paper); color: var(--ink-on-paper); padding: var(--space-section) 0; text-align: center; }
.statement-text {
  font-size: clamp(1.55rem, 1rem + 2.6vw, 2.7rem);
  font-weight: 740; font-stretch: 110%;
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin-inline: auto;
}
.statement-text .w { color: oklch(0.66 0.008 240); }
.statement-foot {
  margin-top: 2.4rem;
  font-weight: 620; font-size: 0.98rem;
  color: var(--muted-on-paper);
}

/* ==========================================================================
   Services
   ========================================================================== */
.services { padding: var(--space-section) 0; background: var(--ink-900); }
.services .section-title { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}

.services-stack {
  position: sticky; top: 104px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-800);
}
.stack-img { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 0.55s var(--ease-out), transform 0.7s var(--ease-out); }
.stack-img picture, .stack-img img { width: 100%; height: 100%; object-fit: cover; }
.stack-img.is-active { opacity: 1; transform: scale(1); }

.service { padding: clamp(2rem, 3.5vw, 3rem) 0; border-top: 1px solid oklch(1 0 0 / 0.1); }
.service:last-child { border-bottom: 1px solid oklch(1 0 0 / 0.1); }
.service h3 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 850; font-stretch: 120%;
  text-transform: uppercase; letter-spacing: -0.012em;
  margin-bottom: 0.9rem;
  transition: color 0.35s var(--ease-out);
}
.service.is-active h3 { color: var(--volt-500); }
.service > p { max-width: 56ch; color: var(--ink-400); margin-bottom: 1.4rem; }

.service-includes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 1.5rem; max-width: 560px; }
.service-includes li {
  padding: 0.55rem 0;
  font-weight: 600; font-size: 0.95rem;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
  display: flex; align-items: baseline; gap: 0.6rem;
}
.service-includes li::before { content: "+"; color: var(--volt-500); font-weight: 800; }

.service-photo { display: none; border-radius: 14px; overflow: hidden; margin-top: 1.6rem; }
/* each photo carries its own focal point (--focus on the figure): the subjects
   sit at different heights in the frame and one crop cannot serve all three */
.service-photo img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; object-position: var(--focus, 50% 35%); }

/* ==========================================================================
   Work (horizontal gallery)
   ========================================================================== */
.work { background: var(--ink-950); padding-top: var(--space-section); overflow: clip; }
.work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.work-hint { color: var(--ink-400); font-weight: 650; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; flex: none; }
.work-hint .on-touch { display: none; }
@media (hover: none) { .work-hint .on-pointer { display: none; } .work-hint .on-touch { display: inline; } }

.work-pin { padding-bottom: var(--space-section); }
.work-track {
  display: flex; gap: clamp(1rem, 2vw, 1.8rem);
  width: max-content;
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--container)) / 2));
}
.work-card {
  width: clamp(280px, 34vw, 440px);
  flex: none;
  text-decoration: none;
}
.work-card img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius);
}
.work-card figcaption {
  margin-top: 0.9rem;
  color: var(--ink-400); font-size: 0.95rem; font-weight: 550;
  max-width: 38ch;
}
.work-card-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
  aspect-ratio: 4 / 5; width: clamp(260px, 28vw, 380px);
  border-radius: var(--radius);
  background: var(--ink-800);
  border: 1px solid oklch(1 0 0 / 0.08);
  text-align: center;
  font-size: 1.1rem; line-height: 1.5; color: var(--ink-400); font-weight: 600;
  transition: background-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.work-card-more strong { color: var(--white); font-weight: 800; }
.work-card-more .more-mark { width: 64px; }
.work-card-more:hover { background: var(--ink-700); transform: translateY(-4px); }

/* ==========================================================================
   Why us
   ========================================================================== */
.why { background: var(--paper); color: var(--ink-on-paper); padding: var(--space-section) 0; }
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.why-photo {
  position: sticky; top: 104px;
  border-radius: var(--radius); overflow: hidden;
}
.why-photo img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.why .section-title { margin-bottom: clamp(2rem, 4vw, 3rem); }

.why-facts .fact { padding: 1.7rem 0; border-top: 1px solid oklch(0 0 0 / 0.12); }
.why-facts .fact:last-child { border-bottom: 1px solid oklch(0 0 0 / 0.12); }
.fact dt {
  font-size: 1.3rem; font-weight: 820; font-stretch: 115%;
  margin-bottom: 0.45rem;
}
.fact dd { color: var(--muted-on-paper); max-width: 58ch; }

/* ==========================================================================
   Process
   ========================================================================== */
.process { background: var(--ink-900); padding: var(--space-section) 0; }
.process .section-title { margin-bottom: 0.8rem; }
.process-sub { color: var(--ink-400); margin-bottom: clamp(3rem, 5vw, 4.5rem); }
@media (min-width: 881px) {
  .process .section-title, .process-sub { text-align: center; }
  .process-sub { margin-inline: auto; max-width: 48ch; }
}

.steps-wrap { position: relative; max-width: 760px; margin-inline: auto; }
.steps { display: grid; gap: clamp(2.6rem, 5vw, 3.6rem); }
.steps-line {
  position: absolute; left: 27px; top: 8px; bottom: 8px;
  width: 2px; background: oklch(1 0 0 / 0.12);
  border-radius: 2px;
}
.steps-line-fill {
  display: block; width: 100%; height: 100%;
  background: var(--volt-500);
  transform: scaleY(0); transform-origin: top;
}
.step {
  position: relative;
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  column-gap: clamp(1.4rem, 3vw, 2.2rem);
}
.step-num {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 850; font-size: 1.25rem;
  background: var(--ink-900);
  border: 2px solid oklch(1 0 0 / 0.18);
  color: var(--ink-400);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.step.is-lit .step-num {
  background: var(--volt-500); border-color: var(--volt-500); color: var(--ink-950);
  box-shadow: 0 8px 22px oklch(0 0 0 / 0.35);
}
.step h3 { font-size: var(--fs-h3); font-weight: 800; font-stretch: 112%; margin-bottom: 0.4rem; align-self: center; }
.step h3 + p { grid-column: 2; }
.step p { color: var(--ink-400); max-width: 54ch; }
.step > h3 { grid-column: 2; grid-row: 1; }
.step .step-num { grid-row: 1 / span 2; align-self: start; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--paper); color: var(--ink-on-paper); padding: var(--space-section) 0; }
.faq-grid {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.faq-head { position: sticky; top: 104px; }
.faq-head .section-title { margin-bottom: 1rem; }
.faq-head p { color: var(--muted-on-paper); max-width: 36ch; }
.faq-head a { color: var(--ink-on-paper); font-weight: 700; text-decoration-color: var(--volt-500); text-decoration-thickness: 2px; }

.qa { border-bottom: 1px solid oklch(0 0 0 / 0.14); }
.qa:first-child { border-top: 1px solid oklch(0 0 0 / 0.14); }
.qa summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: 1.12rem; font-weight: 750; font-stretch: 106%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qa summary::-webkit-details-marker { display: none; }
.qa-icon { position: relative; width: 18px; height: 18px; flex: none; transition: transform 0.4s var(--ease-out); }
.qa-icon::before, .qa-icon::after {
  content: ""; position: absolute; background: var(--volt-600); border-radius: 2px;
}
.qa-icon::before { left: 0; right: 0; top: 7.75px; height: 2.5px; }
.qa-icon::after { top: 0; bottom: 0; left: 7.75px; width: 2.5px; }
.qa[open] .qa-icon { transform: rotate(45deg); }
.qa-body { overflow: hidden; }
.qa-body p { padding-bottom: 1.5rem; color: var(--muted-on-paper); max-width: 58ch; }

/* ==========================================================================
   CTA drench
   ========================================================================== */
.cta {
  position: relative;
  background: var(--volt-500); color: var(--ink-950);
  padding: var(--space-section) 0;
  overflow: clip;
}
.cta-watermark {
  position: absolute; right: -6%; bottom: -22%;
  width: clamp(300px, 38vw, 560px); opacity: 0.16;
  pointer-events: none;
}
.cta-inner { position: relative; text-align: center; }
.cta-title {
  font-size: var(--fs-cta);
  font-weight: 900; font-stretch: 124%;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95;
  margin-bottom: 1.4rem;
}
.cta-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; max-width: 42ch; margin-inline: auto; margin-bottom: 2.4rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* band buttons at 1.3x: bigger than standard, deliberately smaller than the hero pair */
.cta-actions .btn { height: 76px; padding: 0 44px; font-size: 1.3rem; border-width: 2px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { background: var(--ink-950); padding: var(--space-section) 0; }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas: "info quote" "details quote";
  column-gap: clamp(3rem, 6vw, 6rem); row-gap: 0; align-items: start;
}
.contact-info { grid-area: info; }
.contact-details { grid-area: details; }
.quote-area { grid-area: quote; }
.funnel-mounted .contact-grid { grid-template-areas: "info details"; align-items: center; }
.funnel-mounted .quote-area { display: none; }
.contact-info > p a { color: var(--white); font-weight: 650; text-decoration-color: var(--volt-500); text-decoration-thickness: 2px; }

/* Runbase funnel theme: the embed reads these custom properties on its host element
   (declared in :host inside its shadow root, so document rules on the host win).
   Hex values on purpose; the embed may read them back in JS. */
#quote-slot [data-runbase-funnel] {
  --rb-font: var(--font);
  --rb-paper: #32373c;        /* card = ink-800 */
  --rb-surface: #3d4349;      /* inputs, slider track */
  --rb-surface-2: #474d53;
  --rb-line: rgba(255, 255, 255, 0.14);
  --rb-ink: #fafafa;
  --rb-ink-2: #d9dce0;
  --rb-muted: #a9aeb5;
  --rb-accent: #fd9228;       /* brand orange */
  --rb-accent-deep: #e07d1c;
  --rb-accent-ink: #15181b;
  --rb-danger: #f08c7a;
  --rb-radius: 18px;
  --rb-radius-sm: 12px;
  --rb-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.contact-info .section-title { margin-bottom: 1.2rem; }
.contact-info > p { color: var(--ink-400); max-width: 44ch; margin-bottom: 2.2rem; }

.contact-list { display: grid; gap: 0; }
.contact-list li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1rem;
  padding: 0.95rem 0; border-top: 1px solid oklch(1 0 0 / 0.1);
  align-items: baseline;
  overflow-wrap: anywhere; /* the email address is one unbreakable word; let it wrap on ≤350px phones */
}
.contact-list li:last-child { border-bottom: 1px solid oklch(1 0 0 / 0.1); }
.contact-list li > span:first-child { font-size: 0.82rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); }
.contact-list .soc { font-size: inherit; }
.contact-list a { color: var(--white); font-weight: 650; text-decoration: none; }
.contact-list a:hover { color: var(--volt-300); }

/* form */
.quote-area { min-width: 0; }
.quote-form { display: grid; gap: 1.3rem; }
.quote-form[hidden] { display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.field { display: grid; gap: 0.5rem; }
.field label, .chips-field legend {
  font-size: 0.92rem; font-weight: 700;
}
.field label em, .chips-field legend em { font-style: normal; font-weight: 500; color: var(--ink-400); }
.field input, .field textarea {
  background: var(--ink-800);
  border: 1.5px solid oklch(1 0 0 / 0.12);
  border-radius: 12px;
  color: var(--white);
  height: 54px; padding: 0 16px;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.field textarea { height: auto; padding: 13px 16px; resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: oklch(0.68 0.01 240); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--volt-500);
  box-shadow: 0 0 0 3px oklch(0.745 0.157 55 / 0.25);
}
.field input.is-invalid { border-color: oklch(0.6 0.18 25); }

.chips-field { border: 0; padding: 0; }
.chips-field legend { margin-bottom: 0.7rem; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid oklch(1 0 0 / 0.18);
  color: var(--ink-400); font-weight: 650; font-size: 0.95rem;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  cursor: pointer;
}
.chip input:checked + span { background: var(--volt-500); border-color: var(--volt-500); color: var(--ink-950); }
.chip input:focus-visible + span { outline: 3px solid var(--volt-300); outline-offset: 3px; }

.form-error { color: oklch(0.78 0.13 25); font-weight: 600; font-size: 0.95rem; }
.btn-submit { justify-self: start; }
.form-note { font-size: 0.88rem; color: var(--ink-400); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--ink-950); border-top: 1px solid oklch(1 0 0 / 0.08); padding: clamp(3rem, 5vw, 4.5rem) 0; }
.footer-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.footer-logo { width: clamp(150px, 16vw, 200px); }
.footer-nav { display: grid; grid-template-columns: repeat(3, max-content); gap: 0.15rem 2.4rem; justify-content: center; }
.footer-nav a { color: var(--ink-400); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: inline-block; padding: 0.4rem 0; }
.footer-nav a:hover { color: var(--white); }
.footer-meta { text-align: right; color: var(--ink-400); font-size: 0.88rem; display: grid; gap: 0.3rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .nav-cta .btn-nav-phone { display: none; }
}

@media (max-width: 880px) {
  .nav-links, .nav-cta { display: none; }
  .nav-inner { gap: 0.6rem; }
  .nav-call { display: flex; }
  .nav-burger { display: flex; margin-right: -10px; }
  .nav-word { width: 116px; }

  /* phones and tablets: one column, and the two hero halves dissolve (display: contents) so
     their children can be ordered as kicker > title > sub > funnel card > buttons > licence > photo */
  .hero-inner { grid-template-columns: minmax(0, 640px); justify-content: center; min-height: 0; padding: 112px var(--gutter) 2.5rem; }
  .hero-copy, .hero-visual { display: contents; }
  .hero-kicker { order: 1; }
  .hero-title { order: 2; }
  .hero-sub { order: 3; margin-bottom: 1.6rem; }
  .hero-quote { order: 4; width: auto; margin: 0.2rem 0 2.2rem; }
  .hero-actions { order: 5; }
  .hero-actions .btn-solid { display: none; } /* one primary per viewport: the card above is the quote action */
  .hero-cred { order: 6; }
  .hero-photo { order: 7; position: relative; inset: auto; margin-top: 2.5rem; border-radius: var(--radius); }
  /* upright crop: the whole figure and the roof edge, filling the frame */
  .hero-photo picture, .hero-photo img { aspect-ratio: 4 / 5; height: auto; object-position: 50% 26%; }
  .hero-photo::after { background: none; }
  .hero-actions .btn { height: 84px; padding: 0 clamp(24px, 7vw, 40px); font-size: clamp(1.15rem, 5.6vw, 1.4rem); } /* fluid so 'Call 0426 283 595' never exceeds a 320px phone */

  .services-grid { grid-template-columns: minmax(0, 1fr); } /* plain 1fr has an auto minimum, which let the includes list force this column to 424px on phones */
  .services-stack { display: none; }
  .service-photo { display: block; }

  /* gallery: native swipe */
  .work-pin { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .work-pin::-webkit-scrollbar { display: none; }
  .work-card { scroll-snap-align: start; width: min(78vw, 420px); }
  .work-card-more { width: min(70vw, 380px); }

  .why-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-areas: "info" "quote" "details"; row-gap: 2.4rem; }
  .funnel-mounted .contact-grid { grid-template-areas: "info" "details"; }
  .contact-info > p { margin-bottom: 0; }
  .why-photo, .faq-head { position: static; }
  .why-photo { max-width: 560px; }
  .why-photo img { aspect-ratio: 4 / 3; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { justify-content: start; }
  .footer-meta { text-align: left; }
}

/* tablets: the photo stacks under the copy with room for a wider frame */
@media (max-width: 880px) and (min-width: 561px) {
  .hero-photo picture, .hero-photo img { aspect-ratio: 3 / 2; object-position: 50% 24%; }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .cta-actions .btn { width: 100%; height: 72px; font-size: clamp(1.1rem, 5vw, 1.3rem); }
  .btn-submit { justify-self: stretch; width: 100%; }
  .step { grid-template-columns: 44px minmax(0, 1fr); }
  .step-num { width: 44px; height: 44px; font-size: 1.05rem; }
  .steps-line { left: 21px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .loader { display: none; }
  .marquee-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 0.6rem; }
  .statement-text .w { color: inherit; }
}