/* GridGuard — site styles
   One navy ground for the whole site, one surface a step lighter, light ink, and the brand cyan kept
   for the action and the electric line. Space Grotesk for headings, Barlow for text. No gradients,
   glows or rules outside the drawn electric line and the call-to-action loop. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-500-700.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* colour roles */
  --bg: #010c30;          /* the ground, everywhere */
  --surface: #071a4b;     /* one step up: tiles, the open question, secondary buttons */
  --surface-hi: #0c2259;  /* that surface under the pointer */
  --ink: #edf2fb;         /* headings and running text */
  --muted: #a8b5cc;       /* secondary text, 9:1 on the ground */
  --accent: #5dd9fe;      /* GridGuard cyan: the action and the electric line */
  --accent-hi: #a8eeff;   /* the action once the current reaches it, and under the pointer */
  --accent-ink: #01103a;  /* text on the accent */

  /* five type sizes */
  --fs-display: clamp(1.9rem, 8.6vw, 5rem);
  --fs-heading: clamp(1.75rem, 1.05rem + 2vw, 2.6rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;

  --header-h: 76px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(72px, 8vw, 120px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* names the electric line and older blocks still use */
  --text: var(--ink);
  --soft: var(--ink);
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 { font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
em { font-style: normal; } /* headline emphasis from the content stays in the headline's own ink */
.prose em { font-style: italic; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.container { width: min(1200px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { width: min(800px, 100%); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------ section heads */
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head__title { font-size: var(--fs-heading); }
.section-head__intro { margin-top: 20px; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
.section-head__intro p { margin: 0; }
.section-head__intro a { color: var(--ink); text-underline-offset: 0.2em; }
.section-head--center { margin-inline: auto; text-align: center; }
/* heading on the left, its intro answering it on the right */
.section-head--split { max-width: none; display: grid; gap: 20px 48px; align-items: end; }
.section-head--split .section-head__intro { margin-top: 0; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 7fr 5fr; }
}

.prose { color: var(--ink); }
.prose p { margin-bottom: 1em; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.prose--lead { font-size: var(--fs-lead); line-height: 1.55; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.text-alert { color: #f87171; }

/* ------------------------------------------------------------ buttons */
/* one shape (the pill), flat fills: cyan for the action, the surface for the rest */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px;
  border: 0; border-radius: 999px;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.btn .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hi); }
.btn--primary:hover .icon { transform: translateX(3px); }
.btn--secondary { background: var(--surface); color: var(--ink); }
.btn--secondary:hover { background: var(--surface-hi); }
.btn--small { min-height: 42px; padding: 10px 20px; font-size: var(--fs-small); }

.actions { margin-top: 36px; }
.actions--center { text-align: center; }
.actions__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.actions--center .actions__buttons { justify-content: center; }
.actions__note { margin-top: 16px; color: var(--muted); font-size: var(--fs-small); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-top: 18px;
  color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.text-link .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.text-link:hover .icon { transform: translateX(3px); }

.icon { flex: none; }

/* ------------------------------------------------------------ header */
/* a plain bar: clear over the hero, the ground colour once the page scrolls */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  transition: background-color .3s var(--ease);
}
.site-header.is-scrolled { background: var(--bg); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 100%; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
.brand__mark { width: 40px; height: 40px; }
.brand__word { width: auto; height: 18px; }

.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.site-nav__list { display: flex; gap: 24px; }
.site-nav a { white-space: nowrap; }
.site-nav__list a {
  position: relative; padding: 6px 0;
  color: var(--muted); font-family: var(--font-head); font-size: var(--fs-small); font-weight: 500; text-decoration: none;
  transition: color .2s;
}
.site-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--ink); }
.site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.nav-toggle .icon { margin: auto; }

@media (max-width: 1199px) {
  .nav-toggle { display: grid; place-items: center; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 24px;
    padding: 12px var(--gutter) 32px;
    background: var(--bg);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s var(--ease); }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: 12px 0; color: var(--ink); font-size: var(--fs-lead); }
  .site-nav__list a::after { display: none; }
  .site-nav__cta { align-self: flex-start; }
}
@media (max-width: 420px) {
  .brand { gap: 10px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__word { height: 15px; }
}

/* ------------------------------------------------------------ sections */
/* every section sits on the same ground; space, not colour, separates them */
.section { position: relative; padding-block: var(--section-y); isolation: isolate; }
.section__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.section__bg-img { width: 100%; height: 100%; object-fit: cover; }
.section__bg::after { content: ""; position: absolute; inset: 0; background: rgba(1, 12, 48, 0.72); } /* flat scrim */

.split { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--faq { grid-template-columns: 5fr 7fr; align-items: start; }
  .split--media { grid-template-columns: 0.9fr 1.1fr; }
  .split--panel { grid-template-columns: 7fr 5fr; }
}
.split__text .section-head { margin-bottom: 24px; }

.media-frame { margin: 0; overflow: hidden; background: var(--surface); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 1 / 1; }

.point-list { display: grid; gap: 14px; margin-top: 24px; }
.point-list li { display: flex; gap: 14px; align-items: flex-start; }
.point-list strong { color: var(--ink); font-weight: 600; }
.point-list__icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--accent); }
.point-list__icon .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.point-list__icon--warn { color: #f87171; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + clamp(56px, 10vw, 140px)) 0 clamp(48px, 6vw, 80px); isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 60%; }
.hero__media::after { /* a navy scrim over the text side of the photograph, and down into the page */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 12, 48, 0.94) 0%, rgba(1, 12, 48, 0.78) 40%, rgba(1, 12, 48, 0.1) 75%),
    linear-gradient(180deg, rgba(1, 12, 48, 0.5) 0%, transparent 25%, transparent 60%, var(--bg) 100%);
}
.hero__copy { max-width: 820px; }
.hero .section-head { margin-bottom: 0; max-width: none; }
.hero .section-head__title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.035em; }
.hero .section-head__intro { max-width: 560px; margin-top: 28px; color: var(--ink); }
.hero .section-head__intro p + p { margin-top: 12px; color: var(--muted); font-size: var(--fs-body); }
.hero--solo { padding-bottom: clamp(96px, 13vw, 190px); } /* keeps the house and its garden in view */
.hero__cards { display: grid; gap: 12px; margin-top: clamp(56px, 9vw, 120px); }
@media (min-width: 640px) { .hero__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hero__cards { grid-template-columns: repeat(4, 1fr); } }
.hero-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--surface); }
.hero-card .icon-badge { display: none; }
.hero-card__title { font-size: var(--fs-lead); }
.hero-card p { color: var(--muted); }
@media (max-width: 760px) {
  .hero__img { object-position: 70% 50%; }
  .hero__media::after { background: linear-gradient(180deg, rgba(1, 12, 48, 0.82) 0%, rgba(1, 12, 48, 0.72) 45%, rgba(1, 12, 48, 0.35) 75%, var(--bg) 100%); }
}

/* ------------------------------------------------------------ index (the services) */
/* one row per service: its photo, its name set large, a line about it; the whole row is the link
   and lifts onto the surface under the pointer */
.index { display: grid; gap: 8px; }
.index__item {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 20px;
  padding: 16px; margin-inline: -16px;
  color: inherit; text-decoration: none;
  transition: background-color .3s var(--ease);
}
a.index__item:hover, a.index__item:focus-visible { background: var(--surface); }
a.index__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0; }
.index__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.index__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
a.index__item:hover .index__media img { transform: scale(1.04); }
.index__body { display: block; }
.index__title { font-size: var(--fs-heading); line-height: 1.1; letter-spacing: -0.02em; }
.index__text { display: block; margin-top: 10px; max-width: 46ch; color: var(--muted); }
.index__go { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.index__go .icon { width: 18px; height: 18px; color: var(--accent); transition: transform .25s var(--ease); }
a.index__item:hover .index__go .icon { transform: translateX(4px); }
@media (min-width: 760px) {
  /* photo on the left; name, line and the cue stacked beside it, centred on the photo */
  .index__item {
    grid-template-columns: 5fr 7fr; grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". ." "media body" "media go" ". ."; column-gap: 48px; row-gap: 20px;
    padding: 20px; margin-inline: -20px;
  }
  .index__media { grid-area: 1 / 1 / 5 / 2; }
  .index__body { grid-area: body; }
  .index__go { grid-area: go; justify-self: start; }
  .index__item--plain { grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "body go"; }
  .index__media { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------ staircase (how it works) */
/* one stage per line, each starting further right: the order is in the position, not in numbers */
.stair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(36px, 4vw, 56px); }
.stair__step { grid-column: 1 / span 12; }
.stair__title { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.035em; }
.stair__text { margin: 14px 0 0; max-width: 34ch; color: var(--muted); font-size: var(--fs-lead); line-height: 1.45; }
@media (max-width: 759px) {
  .stair__step:nth-child(2) { padding-left: 6vw; }
  .stair__step:nth-child(3) { padding-left: 12vw; }
  .stair__step:nth-child(n + 4) { padding-left: 18vw; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .stair__step:nth-child(1) { grid-column: 1 / span 10; }
  .stair__step:nth-child(2) { grid-column: 2 / span 10; }
  .stair__step:nth-child(3) { grid-column: 3 / span 10; }
  .stair__step:nth-child(n + 4) { grid-column: 4 / span 9; }
}
@media (min-width: 1100px) {
  .stair__step:nth-child(1) { grid-column: 1 / span 8; }
  .stair__step:nth-child(2) { grid-column: 3 / span 8; }
  .stair__step:nth-child(3) { grid-column: 5 / span 8; }
  .stair__step:nth-child(n + 4) { grid-column: 7 / span 6; }
}
.section--steps .actions { margin-top: 48px; }

/* ------------------------------------------------------------ text with a side panel or a photo */
.split__photo { aspect-ratio: 4 / 5; }
.split__photo img { object-position: 70% 50%; }
.split--photo .side-panel { margin-top: 48px; }
@media (min-width: 960px) { .split--photo { grid-template-columns: 7fr 5fr; align-items: start; } }
.side-panel { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 4vw, 44px); background: var(--surface); }
.side-panel__title { font-size: var(--fs-lead); }
.side-panel p { color: var(--muted); }
.side-panel .text-link { padding-top: 6px; }

/* ------------------------------------------------------------ faq */
.faq-list { display: grid; gap: 4px; }
.faq { transition: background-color .3s var(--ease); }
.faq[open] { background: var(--surface); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  color: var(--ink); font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 500; line-height: 1.35;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq:not([open]) summary:hover { background: rgba(7, 26, 75, 0.55); }
.faq__icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--accent); transition: transform .25s var(--ease); }
.faq__icon .icon { width: 20px; height: 20px; }
.faq[open] .faq__icon { transform: rotate(45deg); }
.faq__answer { padding: 0 24px 24px; max-width: 62ch; color: var(--muted); }

/* ------------------------------------------------------------ call to action */
/* the close (home section and the inner pages' band): the house again, cropped tight on its lit roof
   line and drifting slowly under a navy scrim, with the copy on the left where the scrim is deepest.
   The current that left the house ends here. */
.section--cta, .cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(120px, 15vw, 220px); }
.section--cta .section__bg, .cta-band__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.section--cta .section__bg-img, .cta-band__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 78% 42%;
  transform-origin: 72% 40%; animation: cta-drift 28s ease-in-out infinite alternate;
}
@keyframes cta-drift { from { transform: scale(1.2); } to { transform: scale(1.3) translate3d(-1.5%, 1%, 0); } }
.section--cta .section__bg::after, .cta-band__bg::after { /* scrim over the copy side of the photograph */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(1, 12, 48, 0.95) 0%, rgba(1, 12, 48, 0.86) 38%, rgba(1, 12, 48, 0.35) 72%, rgba(1, 12, 48, 0.2) 100%);
}
.section--cta .section-head, .cta-band__copy { max-width: 720px; margin-bottom: 0; }
.section--cta .section-head__title, .cta-band__title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.035em; }
.section--cta .section-head__intro, .cta-band__text { max-width: 560px; color: var(--ink); font-size: var(--fs-lead); line-height: 1.5; }
.cta-band__text { margin: 24px 0 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.ticks { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; font-size: var(--fs-small); }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ticks .icon { width: 18px; height: 18px; color: var(--accent); stroke-width: 2.4; }
@media (max-width: 759px) {
  .section--cta .section__bg-img, .cta-band__bg img { object-position: 72% 45%; }
  .section--cta .section__bg::after, .cta-band__bg::after { background: rgba(1, 12, 48, 0.8); }
}

/* ------------------------------------------------------------ inner page header */
.page-head { margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + clamp(48px, 7vw, 104px)) 0 clamp(40px, 5vw, 72px); }
/* the title takes the full width (two lines at most), its lead sits under it */
.page-head__inner { display: grid; gap: 28px; max-width: 1040px; }
.page-head__title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.035em; }
.page-head__lead { margin: 0; max-width: 640px; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 28px; color: var(--muted); font-size: var(--fs-small); }
.crumbs li + li::before { content: "/"; margin-right: 10px; }
.crumbs a { color: var(--ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* ------------------------------------------------------------ service pages */
.split--service { align-items: start; }
@media (min-width: 960px) { .split--service { grid-template-columns: 7fr 5fr; } }
.notice { margin-top: 28px; padding: 22px 24px; background: var(--surface); }
.notice strong { display: block; margin-bottom: 4px; color: var(--ink); font-family: var(--font-head); font-weight: 600; }
.notice p { margin: 0; color: var(--muted); }
.service-aside { display: grid; gap: 12px; }
.service-aside .media-frame { aspect-ratio: 4 / 3; }
.other-services { padding: 24px; background: var(--surface); }
.other-services__title { margin-bottom: 8px; color: var(--muted); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; }
.other-services ul { display: grid; }
.other-services a {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.other-services a > .icon { width: 16px; height: 16px; margin-left: auto; color: var(--accent); transition: transform .2s var(--ease); }
.other-services a:hover > .icon { transform: translateX(3px); }
.other-services a:hover { color: #fff; }

/* the services overview */
.section--index { padding-top: clamp(16px, 2vw, 32px); }

/* ------------------------------------------------------------ text pages */
.page-text { min-height: 40vh; }
.page-text .prose { font-size: var(--fs-lead); line-height: 1.55; }
.page-text .prose h2 { margin: 1.6em 0 0.6em; font-size: var(--fs-heading); }
.page-text .prose h2:first-child { margin-top: 0; }
.page-text .prose ul { margin: 0 0 1.2em; padding-left: 1.2em; list-style: disc; }
.page-text .prose li { margin-bottom: .4em; }
.split--text { align-items: start; }

/* ------------------------------------------------------------ contact page */
.section--contact-page { padding-top: clamp(16px, 2vw, 32px); }
.split--contact { align-items: start; }
.contact-steps__title { margin-bottom: 16px; font-size: var(--fs-lead); }
.contact-steps { display: grid; gap: 12px; margin-bottom: 32px; padding-left: 1.4em; list-style: decimal; }
.contact-steps li::marker { color: var(--muted); font-family: var(--font-head); font-weight: 600; }
.contact-cards { display: grid; gap: 8px; margin-bottom: 20px; }
.phone-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  background: var(--surface); text-decoration: none; transition: background-color .25s var(--ease);
}
a.phone-card:hover { background: var(--surface-hi); }
.phone-card > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.phone-card small { color: var(--muted); font-size: var(--fs-small); }
.phone-card strong { color: var(--ink); font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 600; }
.phone-card a { color: var(--ink); }
.form-card { overflow: hidden; background: var(--surface); }
/* GoHighLevel's form_embed.js hides the iframe until the form reports back; keep it visible regardless */
.form-card iframe {
  display: block; width: 100%; min-height: 760px; border: 0;
  position: static !important; left: auto !important;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}
.form-card noscript a { display: block; padding: 24px; color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------ footer */
.site-footer { padding: clamp(72px, 9vw, 120px) 0 40px; }
.site-footer__grid { display: grid; gap: 40px; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
/* GridGuard lockup: the logo with the tagline as text underneath, as in the owner's artwork (its two
   short rules belong to the lockup) */
.lockup { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: clamp(64px, 8vw, 104px); text-align: center; }
.lockup__logo { display: block; width: clamp(200px, 26vw, 320px); margin-bottom: 10px; }
.lockup__logo img { width: 100%; height: auto; }
.lockup__tagline {
  display: flex; align-items: center; gap: 18px; width: min(100%, 560px); margin: 0;
  color: var(--ink); font-family: var(--font-head); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
}
.lockup__tagline::before, .lockup__tagline::after { content: ""; flex: 1 1 24px; height: 1px; background: rgba(237, 242, 251, 0.6); }
.lockup__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; font-family: var(--font-head); font-size: var(--fs-small); text-transform: uppercase; }
.lockup__list li + li::before { content: "|"; margin: 0 14px; color: var(--accent); }
.lockup__list--services { color: var(--ink); font-weight: 500; letter-spacing: 0.18em; }
.lockup__list--values { color: var(--accent); font-weight: 500; letter-spacing: 0.2em; }
@media (max-width: 560px) {
  .lockup__tagline { letter-spacing: 0.16em; gap: 12px; }
  .lockup__list--services, .lockup__list--values { letter-spacing: 0.1em; }
  .lockup__list { gap: 4px 18px; }
  .lockup__list li + li::before { content: none; } /* on a phone the items wrap, so space separates them */
}
.site-footer__heading { margin-bottom: 10px; color: var(--ink); font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; }
.site-footer__brand p { color: var(--muted); max-width: 360px; }
.site-footer__title { margin-bottom: 14px; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; }
.site-footer__col ul { display: grid; gap: 8px; }
.site-footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.contact-list { gap: 16px !important; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.contact-list .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--accent); }
.contact-list span { display: flex; flex-direction: column; }
.contact-list small { color: var(--muted); font-size: var(--fs-small); }
.contact-list a { color: var(--ink); word-break: break-word; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 72px; color: var(--muted); font-size: var(--fs-small); }
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__credits { margin: 16px 0 0; color: var(--muted); font-size: var(--fs-small); }
.site-footer__credits span + span::before { content: " · "; }
.site-footer__credits a { color: var(--muted); text-decoration: underline; text-underline-offset: 0.15em; }

/* ------------------------------------------------------------ older home sections (hidden by default) */
/* calculator, report, timeline, comparison, stats, insight, features, about and contact: kept so an
   editor can show them again, set in the same flat surfaces */
.panel { position: relative; padding: clamp(22px, 3vw, 32px); background: var(--surface); }
.panel--accent { background: var(--surface-hi); }
.panel__label { margin-bottom: 20px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.panel__note { margin-top: 22px; color: var(--muted); font-size: var(--fs-small); }
.icon-badge { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--accent); }
.icon-badge .icon { width: 26px; height: 26px; }
.eyebrow { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }

.card-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--surface); }
.card__text { color: var(--muted); }
.card__cover { position: absolute; inset: 0; }

.feature-rows { display: grid; gap: clamp(56px, 8vw, 96px); }
.feature-row { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature-row__title { font-size: var(--fs-heading); margin-bottom: 16px; }
.feature-row__text > p { color: var(--muted); }
.feature-row__media { display: grid; gap: 12px; }
.feature-row__media .media-frame { aspect-ratio: 4 / 3; }
.feature-row--pair .feature-row__media { grid-template-columns: 1fr 1fr; }
.feature-row--pair .feature-row__media .media-frame { aspect-ratio: 3 / 4; }
@media (min-width: 960px) {
  .feature-row { grid-template-columns: 1fr 1fr; }
  .feature-row:nth-child(even) .feature-row__media { order: -1; }
}

.insight-chart { padding: 20px; background: var(--bg); }
.insight-chart__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.insight-chart__bars { display: grid; gap: 14px; }
.insight-chart__bar { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 12px; }
.insight-chart__bar small { color: var(--muted); font-size: var(--fs-small); text-align: right; }
.insight-chart__fill { display: block; height: 12px; width: var(--w); border-radius: 99px; background: var(--accent); }
.insight-chart__fill--actual { background: #f5b942; }
.insight-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.insight-stats > div { padding: 18px; background: var(--bg); display: flex; flex-direction: column-reverse; gap: 6px; }
.insight-stats dt { color: var(--muted); font-size: var(--fs-small); }
.insight-stats dd { color: var(--ink); font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 600; }

.calc { display: grid; gap: 12px; }
@media (min-width: 960px) { .calc { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; } }
.calc__field + .calc__field { margin-top: 26px; }
.calc__field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font-weight: 500; }
.calc__field output { flex: none; color: var(--accent); font-family: var(--font-head); font-weight: 600; }
input[type="range"] { --fill: 50%; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) 0 var(--fill), #1a2d5e var(--fill)); } /* a two-part fill, not a gradient: hard stop */
input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: #1a2d5e; }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 4px solid var(--bg); border-radius: 50%; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid var(--bg); border-radius: 50%; background: var(--accent); }
.calc__results { display: flex; flex-direction: column; }
.calc__savings { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--ink); font-family: var(--font-head); font-size: var(--fs-display); font-weight: 600; line-height: 1; }
.calc__savings small { color: var(--muted); font-size: var(--fs-body); }
.calc__sub { margin-top: 10px; }
.calc__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0; }
.calc__metrics > div { padding: 16px; background: var(--bg); display: flex; flex-direction: column-reverse; gap: 4px; }
.calc__metrics dt { color: var(--muted); font-size: var(--fs-small); }
.calc__metrics dd { font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 600; }
.calc__footnote { margin-top: auto; padding-top: 22px; color: var(--muted); font-size: var(--fs-small); }
.meter__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.meter__track { height: 8px; border-radius: 99px; background: #1a2d5e; overflow: hidden; }
.meter__fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--accent); transition: width .4s var(--ease); }
.meter__fill--warn { background: #f5b942; }
.meter--large + .meter--large { margin-top: 18px; }

.timeline { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }
.timeline__item { display: grid; grid-template-columns: 44px 1fr; gap: clamp(14px, 3vw, 28px); }
.timeline__dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--accent); font-family: var(--font-head); font-weight: 600; }
.timeline__card { padding: clamp(20px, 3vw, 28px); background: var(--surface); }
.timeline__card > p { color: var(--muted); }
.timeline__period { margin-bottom: 6px; color: var(--accent) !important; font-size: var(--fs-small); font-weight: 600; }
.timeline__title { margin-bottom: 10px; }
.timeline__metric { margin-top: 6px; font-size: var(--fs-small); }
.timeline__item--critical .timeline__dot { background: #f5b942; color: var(--bg); }

.report { max-width: 1040px; margin-inline: auto; }
.report__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.report__id { margin: 0; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: var(--fs-small); font-weight: 600; }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.report__kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 860px) { .report__kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 18px; background: var(--bg); }
.kpi dt { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.kpi__value { display: block; margin-top: 8px; font-family: var(--font-head); font-size: var(--fs-heading); font-weight: 600; line-height: 1; }
.kpi__value small { margin-left: 4px; color: var(--muted); font-size: var(--fs-body); }
.kpi__sub { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
.kpi--warn .kpi__sub { color: #f5b942; }
.kpi--bad .kpi__sub, .kpi--bad .kpi__value { color: #f87171; }
.report__body { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 860px) { .report__body { grid-template-columns: 1.35fr 1fr; } }
.report__chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.report__chart-head span { color: var(--muted); font-size: var(--fs-small); }
.report__summary { margin-top: 20px; padding: 14px 16px; background: var(--bg); }
.report__health { padding: 22px; background: var(--bg); }
.report__health ul { display: grid; margin-top: 12px; gap: 4px; }
.report__health li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px 0; }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--ok { color: var(--accent); }
.status--warn { color: #f5b942; }
.status--bad { color: #f87171; }
.status--info { color: var(--muted); }
.report__outro { max-width: 640px; margin: 32px auto 0; text-align: center; color: var(--muted); }

.stats { display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
.stats .section-head { margin-bottom: 0; }
@media (min-width: 960px) { .stats { grid-template-columns: 0.85fr 1.15fr; gap: 72px; } }
.stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: clamp(20px, 3vw, 30px); background: var(--surface); }
.stat__value { color: var(--ink); font-family: var(--font-head); font-size: var(--fs-heading); font-weight: 600; line-height: 1.05; }
.stat__label { color: var(--muted); font-size: var(--fs-small); font-weight: 500; }
@media (max-width: 479px) { .stats__grid { grid-template-columns: 1fr; } }

.compare { display: grid; gap: 12px; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { padding: clamp(24px, 3.4vw, 36px); background: var(--surface); }
.compare__col > p:not(.compare__label) { color: var(--muted); }
.compare__label { margin-bottom: 10px; font-size: var(--fs-small); font-weight: 600; }
.compare__title { margin-bottom: 14px; font-size: var(--fs-heading); }
.compare__col--negative .compare__label { color: #f87171; }
.compare__col--positive { background: var(--surface-hi); }
.compare__col--positive .compare__label { color: var(--accent); }

.steps { display: grid; gap: 12px; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step { padding: 28px 24px; background: var(--surface); }
.step p { color: var(--muted); }

.split--contact { align-items: start; }

/* ------------------------------------------------------------ current line */
/* "Live rail": a circuit trace in the left gutter of the home page, built by site.js when
   <main data-current> is set (html.has-current). The cyan current comes out of the house in the hero
   image, then follows the scroll position down the trace (and back up). At each junction a feeder draws
   into a primary button ([data-power]), which ignites once and stays brighter (.is-powered) until the
   current falls back above it. Without JS none of this exists and every button keeps its normal look. */
#main { position: relative; }
.current {
  /* wire x: 48px left of the 1200px container's content edge, or mid-gutter on narrower screens */
  --rail-left: max(calc(var(--gutter) / 2), calc((100% - 1200px) / 2 + var(--gutter) - 48px));
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; contain: strict;
}
.current__axis { position: absolute; top: 0; bottom: 0; left: var(--rail-left); width: 1px; }
/* the trunk: a row of small SVG segments (straight past the junctions, 45° detours into the gutter and
   steps along the staircase), lit by site.js; the wrapper spans its height, and without the house
   lead-in the trunk fades in at the top */
.current__trunk {
  position: absolute; left: 0; right: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 160px);
          mask-image: linear-gradient(180deg, transparent, #000 160px);
}
.current__tail-seg { stroke: #dff8ff; stroke-width: 1.5px; opacity: calc(var(--tail, 1) * 0.3); } /* three stacked dashes: brightest at the head */
.current.in-intro .current__tail-seg, .current.is-static .current__tail-seg { visibility: hidden; }
/* via pads on the detours and where the lead-in joins the trunk: a ring with a dark core */
.current__via {
  position: absolute; left: 0; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--bg); border: 1px solid rgba(148, 163, 184, 0.32);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.current__via.is-on { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 1px, var(--bg) 1.5px); box-shadow: 0 0 10px rgba(93, 217, 254, 0.45); }
.current__junction {
  position: absolute; left: 0; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--bg); border: 1px solid rgba(148, 163, 184, 0.4);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.current__junction.is-on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(93, 217, 254, 0.14), 0 0 12px rgba(93, 217, 254, 0.5); }
.current__junction--end { width: 9px; height: 9px; margin: -4px 0 0 -4px; }
.current__junction--end.is-on { animation: current-arrive 1.4s var(--ease) .2s 1 backwards; }
@keyframes current-arrive {
  from { box-shadow: 0 0 0 0 rgba(93, 217, 254, 0.5), 0 0 12px rgba(93, 217, 254, 0.5); }
  to { box-shadow: 0 0 0 16px rgba(93, 217, 254, 0), 0 0 12px rgba(93, 217, 254, 0.5); }
}

/* feeders: one small SVG per node, its viewBox in <main> coordinates (set by JS), drawn from the
   wire to the button with a dash offset when the node powers */
.current__feeder { position: absolute; overflow: visible; }
.current__feeder path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.current__feeder-base { stroke: rgba(148, 163, 184, 0.14); stroke-width: 1px; }
.current__feeder-halo, .current__feeder-live { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.current__feeder-halo { stroke: rgba(93, 217, 254, 0.16); stroke-width: 6px; }
.current__feeder-live { stroke: var(--accent); stroke-width: 1.5px; }
.current__feeder.is-on .current__feeder-halo,
.current__feeder.is-on .current__feeder-live { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, .4s) var(--ease); }
.current__feeder-tip { fill: var(--accent); stroke: rgba(93, 217, 254, 0.25); stroke-width: 5px; paint-order: stroke; opacity: 0; transition: opacity .15s var(--ease); }
/* powering down (scrolling back up): the feeder retracts quickly */
.current__feeder-halo, .current__feeder-live { transition: stroke-dashoffset .3s var(--ease); }
.current__feeder.is-on .current__feeder-tip { opacity: 1; transition: opacity .2s var(--ease) var(--dur, .4s); }
/* feeders longer than 160px stay quiet near the wire, full strength at the button */
.current__feeder--long { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45), #000 65%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45), #000 65%); }
/* stubs under 24px (rail 16px from the content, 760-1263px wide) drop the tip so dot, tip and glow don't knot */
.current__feeder--short .current__feeder-tip { display: none; }

/* the lead-in from the house: lit by site.js with a dash offset that follows the current */
.current__intro-halo { stroke: rgba(93, 217, 254, 0.16); stroke-width: 6px; }
.current__intro-live { stroke: var(--accent); stroke-width: 1.5px; }
.current__junction--house { width: 9px; height: 9px; margin: -4px 0 0 -4px; }
.current.is-tapped .current__trunk { -webkit-mask-image: none; mask-image: none; } /* the trunk joins the lead-in, no fade */

.current__spark {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #effbff; box-shadow: 0 0 6px 1px rgba(93, 217, 254, 0.7);
  opacity: 0; will-change: transform, opacity;
}
.current__spark::after { /* halo: brighter while the page is scrolling, quiet when it rests */
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 217, 254, 0.32), rgba(93, 217, 254, 0) 65%);
  opacity: 0.45; transition: opacity .4s var(--ease);
}
.current.is-flowing .current__spark::after { opacity: 1; }
.current.is-static .current__spark { display: none; }

/* powered buttons: the current makes the cyan brighter (the unpowered state is the normal look);
   ::after is the one-off ignite ring, outside the pill, never taking clicks */
.has-current .btn[data-power] { position: relative; }
.has-current .btn[data-power]::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1.5px solid var(--accent); pointer-events: none; opacity: 0; }
.btn--primary.is-powered { background: var(--accent-hi); }
.btn--primary.is-powered:hover { background: #d2f6ff; }
.btn.is-powered:focus-visible { outline-color: #fff; }
.btn.is-powering { transition: background-color .5s var(--ease) var(--ignite-delay, 0s), transform .2s var(--ease); }
.btn.is-igniting::after { animation: current-ignite .8s var(--ease) var(--ignite-delay, 0s) 1; }
.btn.is-igniting .icon { animation: current-nudge .5s var(--ease) var(--ignite-delay, 0s) 1; }
@keyframes current-ignite { from { opacity: .9; transform: scale(.96); } to { opacity: 0; transform: scale(1.06, 1.25); } }
@keyframes current-nudge { 50% { transform: translateX(4px); } }

/* end node: the enquiry form lifts a step when the current arrives (it is a reveal target, so keep those transitions) */
.has-current .form-card[data-power] { transition: opacity .7s var(--ease), transform .7s var(--ease), background-color .8s var(--ease); }
.form-card.is-powered, .phone-card.is-powered { background: var(--surface-hi); }

/* phones: the rail sits mid-gutter at x 8, so keep its glow inside the 16px gutter */
@media (max-width: 759px) {
  .current__feeder-tip { display: none; }
  .current__feeder-halo { stroke-width: 4px; }
  .current__spark { box-shadow: 0 0 4px rgba(93, 217, 254, 0.7); }
  .current__spark::after { inset: -4px; } /* halo box ends at x 16, its visible glow at about 15 */
}

/* first state after load (site.js adds html.current-boot for one synchronous step): no transitions */
.current-boot .current *, .current-boot .current *::before, .current-boot .current *::after,
.current-boot [data-power], .current-boot [data-power]::before, .current-boot [data-power]::after { transition: none !important; }

@media print, (forced-colors: active) {
  .current { display: none; }
  .has-current .btn[data-power]::before, .has-current .btn[data-power]::after { content: none; }
}


/* ------------------------------------------------------------ reveal on scroll */
/* each part of a section rises in once as it enters; site.js staggers siblings by 70ms */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease) var(--reveal-delay, 0s), transform .7s var(--ease) var(--reveal-delay, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}