/* A Energy Solutions
   One stylesheet, no framework, no build step.

   Two rules that shaped this file:

   1. White is the primary surface. Dark sections are used deliberately for
      contrast, roughly three per page plus the footer, not as the default.
   2. Colour rule: bright orange only on dark backgrounds or as a button fill.
      On white, orange text uses --flame-deep, which measures 5.18:1 and passes AA.
      Tan (--sand) is decorative only. It measures 2.5:1 and is never text on white. */

/* ---------- fonts (self hosted, variable) ---------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2-variations'), url('../fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora.woff2') format('woff2-variations'), url('../fonts/sora.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --paper: #ffffff;
  --paper-2: #f7f6f3;
  --ink: #0e0e12;
  --ink-2: #16161c;
  --ink-3: #1f1f27;
  --line: #e5e2dc;
  --line-dark: #292932;

  /* ink */
  --text-dark: #121216;
  --text-dark-muted: #56565f;
  --text-light: #ffffff;
  --text-light-muted: #b4b4bd;

  /* accent */
  --flame: #f97316;
  --flame-deep: #c2410c;
  --sand: #c89b72;

  /* Gradient ramps. Every stop is contrast checked against the surface it is
     allowed on, because these are used for text as well as for backgrounds.
     --grad-hot on the near-black: #ffb703 is 13.9:1, #f97316 is 7.5:1 and
     #fb7185 is 6.0:1, so all three pass AA comfortably.
     --grad-deep on white: #7c2d12 is 9.4:1, #c2410c is 5.2:1, #9a3412 is 7.3:1.
     Do NOT put --grad-hot on a light surface. Bright orange on white is 2.8:1
     and fails. */
  --grad-hot: linear-gradient(100deg, #ffb703 0%, #f97316 45%, #fb7185 100%);
  --grad-deep: linear-gradient(100deg, #7c2d12 0%, #c2410c 55%, #9a3412 100%);

  /* geometry. Deliberately tight: the brief was less round, more minimal. */
  --r-btn: 5px;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;

  --wrap: 1200px;
  --gap: clamp(1.1rem, 2.4vw, 1.75rem);
  --pad-y: clamp(3.75rem, 8vw, 7.5rem);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --display: 'Sora', 'Inter', system-ui, sans-serif;

  --shadow: 0 1px 2px rgba(18, 18, 22, .04), 0 4px 14px rgba(18, 18, 22, .05);
  --shadow-lift: 0 1px 2px rgba(18, 18, 22, .05), 0 14px 34px rgba(18, 18, 22, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text-dark);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.45rem + 3.1vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.15rem, 1.08rem + .35vw, 1.3rem); letter-spacing: -.018em; font-weight: 600; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--flame-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-dark); }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: .45em; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 2px solid var(--flame-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--dark :focus-visible, .cta :focus-visible, .contact-card :focus-visible,
.callbar :focus-visible, .topbar :focus-visible, .site-footer :focus-visible {
  outline-color: var(--flame);
}
/* Older browsers without :focus-visible fall back to :focus, so a keyboard
   user is never left with no visible focus at all. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus {
    outline: 2px solid var(--flame-deep);
    outline-offset: 3px;
  }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.band { padding-block: var(--pad-y); }
.band--tint { background: var(--paper-2); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* The dark sections. Used about three times per page for contrast, never as
   the default surface. Each one carries a faint warm aura, which is the only
   place gradients appear at any real strength. */
.band--dark {
  background: var(--ink); color: var(--text-light);
  position: relative; isolation: isolate; overflow: hidden;
}
.band--dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 26rem at 88% -8%, rgba(249, 115, 22, .16), transparent 62%),
    radial-gradient(36rem 22rem at 4% 106%, rgba(200, 155, 114, .10), transparent 60%);
}
/* Colour blobs. Opt in with .band--glow, on a light or a dark section. The
   blobs live on a decorative pseudo-element behind the content, so animating
   their opacity and transform can never hide anything readable. */
.band--glow { position: relative; isolation: isolate; overflow: hidden; }
.band--glow::before {
  content: ''; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30rem 24rem at 14% 16%, rgba(249, 115, 22, .22), transparent 62%),
    radial-gradient(26rem 20rem at 84% 6%, rgba(251, 113, 133, .16), transparent 60%),
    radial-gradient(34rem 26rem at 72% 94%, rgba(255, 183, 3, .18), transparent 62%),
    radial-gradient(24rem 20rem at 4% 92%, rgba(200, 155, 114, .16), transparent 60%);
}
.band--dark.band--glow::before {
  background:
    radial-gradient(32rem 25rem at 12% 14%, rgba(249, 115, 22, .30), transparent 62%),
    radial-gradient(26rem 21rem at 86% 4%, rgba(251, 113, 133, .22), transparent 60%),
    radial-gradient(36rem 27rem at 74% 96%, rgba(255, 183, 3, .20), transparent 62%),
    radial-gradient(26rem 21rem at 2% 94%, rgba(200, 155, 114, .18), transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .band--glow::before { animation: drift 28s ease-in-out infinite alternate; }
  .hero::after { animation: drift 34s ease-in-out infinite alternate; }
}
@keyframes drift {
  from { transform: translate3d(-1.6%, -1.2%, 0) scale(1); }
  to   { transform: translate3d(1.8%, 1.6%, 0) scale(1.08); }
}

.band--dark h1, .band--dark h2, .band--dark h3 { color: #fff; }
.band--dark p { color: var(--text-light-muted); }
.band--dark a { color: var(--flame); }
.band--dark a:hover { color: #fff; }
.band--dark li { color: var(--text-light-muted); }
.band--dark strong { color: #fff; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.1fr .9fr; }
}

/* Bordered pill label, borrowed from the reference site. The only rounded
   thing left on purpose: a 4px version of this reads as a broken tag. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--flame-deep); margin: 0 0 1.25rem;
  padding: .4rem .85rem .4rem .7rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
.eyebrow::before {
  content: ''; width: .4rem; height: .4rem; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--flame), var(--sand));
}
.band--tint .eyebrow { background: #fff; }
.band--dark .eyebrow { color: var(--flame); background: rgba(255, 255, 255, .04); border-color: var(--line-dark); }

.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--text-dark-muted); max-width: 62ch; line-height: 1.6; }
.band--dark .lede { color: var(--text-light-muted); }
.measure { max-width: 68ch; }
.center { text-align: center; margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.mt-lg { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.stack > * + * { margin-top: 1.1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  padding: .85rem 1.4rem; border-radius: var(--r-btn); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn--primary { background: var(--flame); color: #14100c; border-color: var(--flame); }
.btn--primary:hover { background: #e0620c; border-color: #e0620c; color: #14100c; }
.btn--ghost { background: transparent; color: var(--text-dark); border-color: #cfcbc3; }
.btn--ghost:hover { background: var(--text-dark); color: #fff; border-color: var(--text-dark); }
.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }
.center .btn-row { justify-content: center; }

/* Every dark surface on the site, listed once. A ghost button inherits dark ink
   by default, which is invisible on these, and context rules like `.nav a` and
   `.band--dark a` are more specific than `.btn--primary` and would repaint a
   button label white or orange on an orange fill, measuring 2.8:1. Both are
   pinned here. ADD ANY NEW DARK SURFACE TO BOTH LISTS or its buttons will
   silently become unreadable. */
.band--dark .btn--ghost,
.cta .btn--ghost,
.contact-card .btn--ghost,
.callbar .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }

.band--dark .btn--ghost:hover,
.cta .btn--ghost:hover,
.contact-card .btn--ghost:hover,
.callbar .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

.nav a.btn--primary,
.hero a.btn--primary,
.pagehead a.btn--primary,
.band--dark a.btn--primary,
.cta a.btn--primary,
.contact-card a.btn--primary,
.callbar a.btn--primary { color: #14100c; }

/* ---------- top strip (the one dark line above a white header) ---------- */
.topbar { background: var(--ink); color: var(--text-light-muted); font-size: .8rem; }
.topbar__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; padding-block: .55rem; }
.topbar ul { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.topbar li { margin: 0; }
.topbar a { color: var(--text-light-muted); text-decoration: none; }
.topbar a:hover { color: var(--flame); text-decoration: underline; }
@media (max-width: 52rem) { .topbar { display: none; } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; }

.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--text-dark); }
.brand img { width: 56px; height: 56px; }
.brand span {
  font-family: var(--display); font-weight: 700; font-size: 1.14rem;
  letter-spacing: -.025em; line-height: 1.15;
}
.brand small {
  display: block; font-family: var(--sans); font-weight: 400; font-size: .715rem;
  color: var(--text-dark-muted); letter-spacing: .01em; margin-top: .1rem;
}
.site-footer .brand { color: #fff; }
.site-footer .brand small { color: var(--text-light-muted); }

.nav ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: .5rem .8rem; border-radius: var(--r-sm);
  color: var(--text-dark); text-decoration: none; font-weight: 500; font-size: .94rem;
}
.nav a:hover { background: var(--paper-2); color: var(--flame-deep); }
.nav a[aria-current='page'] { color: var(--flame-deep); }
/* .nav a sets its own radius, and is more specific than .btn, so restate it
   here or the nav button ends up 4px while every other button is 5px. */
.nav .btn { margin-left: .6rem; padding: .65rem 1.15rem; font-size: .9rem; border-radius: var(--r-btn); }

/* Icon only. The word "Menu" was crowding the logo on small screens, so the
   button carries aria-label="Menu" instead. 44px square keeps the tap target
   at the accessible minimum. */
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; flex: 0 0 auto;
  background: var(--paper); color: var(--text-dark); border: 1px solid var(--line);
  border-radius: var(--r-btn); cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 17px; height: 1.5px; background: currentColor; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor;
  transition: transform .2s var(--ease), top .2s var(--ease);
}
.menu-toggle__bars::before { top: -5.5px; }
.menu-toggle__bars::after { top: 5.5px; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* .nav--drawer is added by JS. Without JS the nav stays in normal flow and
   simply stacks under the logo, so every link is still reachable. */
@media (max-width: 60rem) {
  .menu-toggle { display: inline-flex; }
  .menu-toggle[hidden] { display: none; }
  .nav--drawer {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.35rem;
    max-height: calc(100dvh - 100%); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: .85rem .4rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav .btn { margin: 1rem 0 0; padding: .9rem 1.5rem; }
  .site-header__inner { flex-wrap: wrap; }
  .brand img { width: 48px; height: 48px; }
}

/* ---------- hero (light, with a soft warm aura) ---------- */
.hero { position: relative; background: var(--paper); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.hero::after {
  content: ''; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34rem 26rem at 78% 6%, rgba(249, 115, 22, .20), transparent 62%),
    radial-gradient(28rem 22rem at 96% 44%, rgba(251, 113, 133, .14), transparent 60%),
    radial-gradient(32rem 26rem at 60% 96%, rgba(255, 183, 3, .16), transparent 62%),
    radial-gradient(30rem 24rem at -2% 88%, rgba(200, 155, 114, .18), transparent 60%);
}
.hero__inner { display: grid; gap: clamp(2.25rem, 5vw, 4rem); padding-block: clamp(3rem, 6.5vw, 5.5rem); align-items: center; }
@media (min-width: 62rem) { .hero__inner { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-bottom: .5em; }

/* Gradient keyword highlight. Stops are contrast checked, see --grad-hot and
   --grad-deep. The @supports fallback means the text is never left transparent
   on a browser that cannot clip a background to it. */
.accent {
  background-image: var(--grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.band--dark .accent, .cta .accent, .contact-card .accent { background-image: var(--grad-hot); }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .accent { background-image: none; color: var(--flame-deep); }
  .band--dark .accent, .cta .accent, .contact-card .accent { color: var(--flame); }
}

.hero__media { position: relative; }
.hero__media img {
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
}
.hero__badge {
  position: absolute; left: -.75rem; bottom: -1.25rem;
  background: var(--paper); color: var(--text-dark);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .85rem 1.1rem; box-shadow: var(--shadow-lift); max-width: 16rem;
}
.hero__badge strong { display: block; font-family: var(--display); font-size: .98rem; letter-spacing: -.02em; }
.hero__badge span { font-size: .82rem; color: var(--text-dark-muted); }
@media (max-width: 40rem) { .hero__badge { position: static; margin-top: 1rem; max-width: none; } }

.ticks { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-weight: 500; font-size: .97rem; }
.ticks svg { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .28rem; color: var(--flame-deep); }
.band--dark .ticks li { color: #fff; }
.band--dark .ticks svg { color: var(--flame); }

/* ---------- page header (interior pages, light) ---------- */
.pagehead { background: var(--paper); position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.pagehead::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46rem 24rem at 88% -14%, rgba(249, 115, 22, .12), transparent 60%);
}
.pagehead__inner { padding-block: clamp(2.5rem, 5.5vw, 4.25rem); }
.pagehead p { color: var(--text-dark-muted); max-width: 62ch; }
.crumbs { font-size: .82rem; color: var(--text-dark-muted); margin: 0 0 1.25rem; }
.crumbs a { color: var(--text-dark-muted); text-decoration: none; }
.crumbs a:hover { color: var(--flame-deep); text-decoration: underline; }
.crumbs span { padding: 0 .45rem; opacity: .45; }

/* ---------- cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.6vw, 1.85rem); display: flex; flex-direction: column;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--text-dark-muted); font-size: .95rem; }
.card__link { margin-top: auto; padding-top: 1.1rem; font-weight: 600; font-family: var(--display); font-size: .9rem; text-decoration: none; color: var(--flame-deep); }
.card__link::after { content: ' \2192'; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: #d2cdc4; }
a.card:hover .card__link { text-decoration: underline; }
.band--dark .card { background: var(--ink-2); border-color: var(--line-dark); }
.band--dark .card p, .band--dark .card li { color: var(--text-light-muted); }
.band--dark a.card:hover { border-color: rgba(249, 115, 22, .45); box-shadow: none; }
.band--dark .card__link { color: var(--flame); }
.band--tint .card { background: #fff; }

.card__icon {
  width: 2.6rem; height: 2.6rem; border-radius: 8px; margin-bottom: 1.1rem;
  display: grid; place-items: center; color: #14100c;
  background: linear-gradient(135deg, var(--flame), var(--sand));
}
.card__icon svg { width: 1.35rem; height: 1.35rem; }

.card--media { padding: 0; overflow: hidden; }
.card--media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card--media .card__body { padding: clamp(1.25rem, 2.4vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }

/* ---------- numbered steps ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--gap); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; margin: 0; padding-top: 3rem; position: relative; }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font-family: var(--display); font-weight: 700; font-size: .95rem; color: #14100c;
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--flame), var(--sand));
}
.steps h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.steps p { font-size: .93rem; color: var(--text-dark-muted); margin: 0; }
.band--dark .steps p { color: var(--text-light-muted); }

/* ---------- trust strip ---------- */
.trust { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.trust div { border-left: 2px solid; border-image: linear-gradient(180deg, var(--flame), var(--sand)) 1; padding-left: 1.1rem; }
.trust strong { display: block; font-family: var(--display); font-size: 1.02rem; letter-spacing: -.02em; margin-bottom: .2rem; }
.trust span { font-size: .9rem; color: var(--text-dark-muted); }
.band--dark .trust strong { color: #fff; }
.band--dark .trust span { color: var(--text-light-muted); }

/* ---------- FAQ (native details, no JS) ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 1.6rem;
  width: .55rem; height: .55rem; border-right: 1.5px solid var(--flame-deep); border-bottom: 1.5px solid var(--flame-deep);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq details > div { padding-bottom: 1.4rem; }
.faq p { color: var(--text-dark-muted); }
.band--dark .faq, .band--dark .faq details { border-color: var(--line-dark); }
.band--dark .faq summary::after { border-color: var(--flame); }
/* `.faq p` and `.band--dark p` have equal specificity and .faq p comes later,
   so without this the answers keep dark grey ink on the near-black. 2.65:1. */
.band--dark .faq p { color: var(--text-light-muted); }

/* ---------- dark CTA block ---------- */
.cta {
  background: var(--ink); border-radius: var(--r-lg);
  padding: clamp(1.85rem, 4vw, 3.25rem); color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
}
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28rem 18rem at 92% 10%, rgba(249, 115, 22, .2), transparent 62%),
    radial-gradient(22rem 14rem at 2% 100%, rgba(200, 155, 114, .12), transparent 60%);
}
.cta h2 { margin-bottom: .45em; color: #fff; }
.cta p { color: var(--text-light-muted); }
.cta a { color: var(--flame); }

.note {
  background: var(--paper-2); border: 1px solid var(--line); border-left: 2px solid var(--flame);
  border-radius: var(--r-sm); padding: 1.1rem 1.3rem; font-size: .95rem;
}
.note p { color: var(--text-dark-muted); }
.note :last-child { margin-bottom: 0; }
.band--dark .note { background: var(--ink-2); border-color: var(--line-dark); border-left-color: var(--flame); }
.band--dark .note p { color: var(--text-light-muted); }

/* ---------- form ---------- */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .35rem; }
.field > label { font-weight: 600; font-size: .92rem; }
.field .hint { font-size: .83rem; color: var(--text-dark-muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--text-dark);
  background: #fff; border: 1px solid #d6d2ca; border-radius: var(--r-sm);
  padding: .8rem .9rem; width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--flame); box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
}
.field input[aria-invalid='true'], .field select[aria-invalid='true'], .field textarea[aria-invalid='true'] {
  border-color: #b3261e; background: #fdf6f5;
}
.field .error { font-size: .85rem; font-weight: 600; color: #9f1c14; }
.field .error:empty { display: none; }
.req { color: #9f1c14; }

.consent { display: flex; align-items: flex-start; gap: .65rem; }
.consent input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .3rem; accent-color: var(--flame-deep); }
.consent label { font-size: .91rem; color: var(--text-dark-muted); }

.botcheck { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form__status { border-radius: var(--r-sm); font-size: .95rem; }
.form__status:not(:empty) { padding: 1rem 1.15rem; border: 1px solid; }
.form__status[data-state='ok'] { background: #f2fbf5; border-color: #8dbf9f; color: #12492a; }
.form__status[data-state='error'] { background: #fdf6f5; border-color: #dda29c; color: #7a1c15; }
.form__status :last-child { margin-bottom: 0; }
.form__status a { color: inherit; font-weight: 600; }

/* ---------- contact panel ---------- */
.contact-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: .78fr 1.22fr; align-items: start; } }
.contact-card {
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.2vw, 2.35rem); position: relative; overflow: hidden; isolation: isolate;
}
.contact-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(20rem 15rem at 100% 0%, rgba(249, 115, 22, .2), transparent 64%);
}
.contact-card h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); color: #fff; }
.contact-card p, .contact-card address { color: var(--text-light-muted); }
.contact-card a { color: var(--flame); }
.contact-card strong { color: #fff; }
.contact-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.05rem; }
.contact-list li { display: flex; gap: .8rem; margin: 0; }
.contact-list svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .4rem; color: var(--flame); }
.contact-list strong { display: block; font-family: var(--display); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-light-muted); font-weight: 600; margin-bottom: .1rem; }
.contact-list a, .contact-list span { color: #fff; font-size: 1.02rem; text-decoration: none; }
.contact-list a:hover { color: var(--flame); text-decoration: underline; }
address { font-style: normal; }

/* ---------- area chips ---------- */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { margin: 0; }
.chips span, .chips a {
  display: inline-block; padding: .4rem .8rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: #fff; font-size: .88rem; text-decoration: none; color: var(--text-dark);
}
.band--dark .chips span, .band--dark .chips a { background: var(--ink-2); border-color: var(--line-dark); color: #fff; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--text-light-muted); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.site-footer h2, .site-footer h3 {
  color: #fff; font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.15rem;
}
.site-footer__grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer li { margin: 0; font-size: .93rem; }
.site-footer a { color: var(--text-light-muted); text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: var(--flame); text-decoration: underline; }
.site-footer p { color: var(--text-light-muted); font-size: .93rem; }
.site-footer .brand { margin-bottom: 1.1rem; }
.footer-bottom {
  margin-top: clamp(2.25rem, 5vw, 3.25rem); border-top: 1px solid var(--line-dark);
  padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .83rem;
}
.gassafe {
  display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.2rem;
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  padding: .7rem .95rem; font-size: .84rem; color: var(--text-light-muted);
}
.gassafe strong { color: #fff; display: block; font-family: var(--display); font-size: .84rem; }

/* ---------- sticky mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: .55rem; padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(14, 14, 18, .97); border-top: 1px solid var(--line-dark);
}
.callbar .btn { flex: 1; padding: .8rem 1rem; font-size: .94rem; }
@media (max-width: 52rem) {
  .callbar { display: flex; }
  body { padding-bottom: 4.4rem; }
}

/* ---------- long-form prose ---------- */
.prose h2 { margin-top: 2.75rem; }
.prose h3 { margin-top: 1.85rem; }
.prose ul { margin-bottom: 1.2em; }
.prose li { color: var(--text-dark-muted); }

/* ---------- image utilities ---------- */
.rounded { border-radius: var(--r-lg); }
.shadowed { box-shadow: var(--shadow-lift); }
.cover { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.cover--tall { aspect-ratio: 3 / 4; }

/* ---------- motion ----------
   Deliberately transform only, never opacity.

   An entrance animation that fades from opacity 0 needs a fill mode to hold the
   start state, which means that if the animation never runs, the content is
   invisible. That is a real failure: a throttled or non-rendered frame, a page
   restored from the back-forward cache, or a browser that stalls the animation
   clock all leave the hero blank. Measured in testing: the hero sat at opacity 0
   when its frame never composited.

   Sliding the transform has no such failure mode. If the animation never runs,
   the element is simply already where it belongs, at full opacity. The scroll
   reveals use a CSS view timeline, so they need no JavaScript and just do not
   run on browsers that lack it. Everything here is off under
   prefers-reduced-motion. */
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hero__inner > div > *, .pagehead__inner > * { animation: rise .5s var(--ease) both; }
  .hero__inner > div > :nth-child(2), .pagehead__inner > :nth-child(2) { animation-delay: .05s; }
  .hero__inner > div > :nth-child(3), .pagehead__inner > :nth-child(3) { animation-delay: .1s; }
  .hero__inner > div > :nth-child(4), .pagehead__inner > :nth-child(4) { animation-delay: .15s; }
  .hero__inner > div > :nth-child(5) { animation-delay: .2s; }

  @supports (animation-timeline: view()) {
    .card, .steps li, .trust div {
      animation: rise .5s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 2% cover 20%;
    }
  }
}