/* ============================================================================
   Bermy — design system
   Apple-level clarity: near-white paper, one confident green, huge whitespace,
   one idea per section.
   ========================================================================== */

:root {
  --paper: #fcfcfa;
  --paper-2: #f4f7f2;
  --paper-3: #edf2ec;
  --ink: #0b1210;
  --ink-2: #3a4640;
  --ink-3: #6d7a74;
  --ink-4: #9aa5a0;
  --line: rgba(11, 18, 16, 0.09);
  --line-2: rgba(11, 18, 16, 0.055);

  --green: #0e8f52;
  --green-deep: #0a6e3f;
  --green-bright: #17bd6c;
  --green-tint: #e7f5ed;
  --green-tint-2: #d6efe0;

  --amber: #b26a00;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --shadow-sm: 0 1px 2px rgba(11, 18, 16, 0.05), 0 4px 14px rgba(11, 18, 16, 0.05);
  --shadow: 0 2px 6px rgba(11, 18, 16, 0.05), 0 18px 44px rgba(11, 18, 16, 0.09);
  --shadow-lg: 0 4px 12px rgba(11, 18, 16, 0.06), 0 34px 80px rgba(11, 18, 16, 0.14);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 11vw, 148px);
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 0.9, 0.24, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" 1, "ss01" 1;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--green-tint-2); color: var(--ink); }

/* -------------------------------------------------------------- utilities */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--paper-2); }
.section--paper { background: var(--paper); }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink-2); line-height: 1.58; }
.muted { color: var(--ink-3); }
.small { font-size: 14.5px; line-height: 1.55; }
.center { text-align: center; }
.stack > * + * { margin-top: 18px; }

/* ------------------------------------------------------------------ glow
   The one-word emphasis used on statements throughout the page. A soft green
   halo behind a word so the point of a sentence lands before it is read.

   `display: inline-block` matters: WebKit refuses to paint a text-shadow on an
   inline element that crosses a line box, so a highlighted word wrapping across
   lines would silently lose its glow. It is also slightly exaggerated — the
   colour is chosen to sit on the tint and paper backgrounds, not to be subtle.
   ------------------------------------------------------------------------- */
.glow {
  display: inline-block;
  color: var(--green-deep);
  font-weight: 800;
  text-shadow:
    0 0 1px rgba(14,143,82,.55),
    0 0 12px rgba(14,143,82,.40),
    0 0 26px rgba(141,231,183,.55);
}
/* In the narrow comparison verdicts the glow sits in a short, tight line of
   text, where an inline-block word forces its own line box and shreds the
   sentence ("a very / unhappy / patch of grass"). Inline there, so it flows. */
.demo__verdict .glow {
  display: inline;
  color: inherit;
  text-shadow:
    0 0 10px rgba(141,231,183,.85),
    0 0 24px rgba(79,203,139,.65);
}
/* On dark or photographic surfaces the halo needs to be lighter, not greener. */
.plan--featured .glow {
  color: inherit;
  text-shadow:
    0 0 10px rgba(141,231,183,.85),
    0 0 24px rgba(79,203,139,.65);
}
/* Respect anyone who has asked the OS to reduce motion or transparency. */
@media (prefers-reduced-motion: reduce) {
  .glow { text-shadow: 0 0 1px rgba(14,143,82,.6); }
}

.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-inline: auto; }
.section-head h2 { font-size: clamp(30px, 4.6vw, 54px); }
.section-head .lede { margin-top: 20px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--green);
  --btn-fg: #fff;
  appearance: none;
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  padding: 15px 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .18s ease, opacity .18s ease;
  box-shadow: 0 1px 2px rgba(14, 143, 82, .22), 0 10px 26px rgba(14, 143, 82, .24);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--green-deep); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(14,143,82,.24), 0 16px 34px rgba(14,143,82,.28); }
.btn:active { transform: translateY(0) scale(.99); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover { --btn-bg: rgba(11,18,16,.04); box-shadow: inset 0 0 0 1.5px rgba(11,18,16,.16); transform: none; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); box-shadow: var(--shadow-sm); }
.btn--light:hover { --btn-bg: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn--lg { padding: 17px 34px; font-size: 17px; }
.btn--sm { padding: 11px 20px; font-size: 15px; }

.link {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1.5px solid transparent;
  transition: border-color .18s ease;
}
.link:hover { border-bottom-color: currentColor; }

/* -------------------------------------------------------------------- nav */
/* The bar is always solid white.
   Two things made it look transparent before: (1) it only gained a background
   once scrolled, so at the top the links sat over the hero gradient, and (2) it
   used the same colour as the body, so even when "solid" there was nothing to
   see. Pure white against the off-white page is what actually reads as a bar. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 14px 0;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}
.nav.is-stuck {
  background: #fff;
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(11, 18, 16, .06);
  padding: 10px 0;
}
.nav__inner { display: flex; align-items: center; gap: 20px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; letter-spacing: -0.04em;
  text-decoration: none; color: var(--ink);
}
.brand__mark { width: 30px; height: 30px; flex: 0 0 30px; }
.nav__links { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-size: 15.5px; font-weight: 550; color: var(--ink-2);
  text-decoration: none; transition: color .18s ease;
}
.nav__links a:hover { color: var(--ink); }
@media (max-width: 860px) { .nav__links a:not(.btn) { display: none; } }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding-top: clamp(120px, 17vh, 190px);
  padding-bottom: clamp(56px, 9vw, 96px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80vh;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(23, 189, 108, 0.14), transparent 68%),
    radial-gradient(40% 40% at 82% 12%, rgba(14, 143, 82, 0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero h1 {
  font-size: clamp(40px, 7.4vw, 86px);
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.hero h1 .hl {
  background: linear-gradient(180deg, var(--green-bright), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  font-size: clamp(18px, 2.1vw, 22px);
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto;
}

/* --------------------------------------------------------- the address box */
.address {
  margin: clamp(34px, 5vw, 52px) auto 0;
  max-width: 720px;
}
.address__box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 8px 8px 24px;
  box-shadow: var(--shadow-lg);
  border: 1.5px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
  position: relative;
}
.address__box:focus-within { border-color: var(--green-bright); }
.address__box.is-error { border-color: #d64545; }
.address__icon { flex: 0 0 20px; color: var(--ink-4); }
.address__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 17.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 14px 0;
}
.address__input::placeholder { color: var(--ink-4); font-weight: 450; }
.address__box .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .address__box { flex-wrap: wrap; border-radius: var(--radius-lg); padding: 14px; }
  .address__input { width: 100%; padding: 8px 0 4px; }
  .address__box .btn { width: 100%; justify-content: center; }
  .address__icon { display: none; }
}

.address__hint {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.address__error { margin-top: 14px; font-size: 14.5px; color: #c0392b; font-weight: 550; }

/* autocomplete suggestions */
.suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-2);
  padding: 8px;
  z-index: 40;
  max-height: 340px;
  overflow-y: auto;
  text-align: left;
  animation: pop .18s var(--ease) both;
}
.suggest[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Flipped above the input when there is not enough room below it — the closing
   CTA sits low on the page, and opening downward put the whole list off-screen. */
.suggest.is-above {
  top: auto;
  bottom: calc(100% + 10px);
  animation: popUp .18s var(--ease) both;
}
@keyframes popUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.suggest__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-xs);
  cursor: pointer; font-size: 15.5px; font-weight: 500; color: var(--ink-2);
  transition: background .12s ease;
}
.suggest__item:hover, .suggest__item.is-active { background: var(--green-tint); color: var(--ink); }
.suggest__item svg { flex: 0 0 16px; color: var(--ink-4); }
.suggest__item.is-active svg { color: var(--green); }
.suggest__empty { padding: 14px; font-size: 15px; color: var(--ink-3); line-height: 1.5; }
.suggest__empty strong { color: var(--ink); font-weight: 650; }

.suggest__text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.suggest__text b { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.suggest__text small {
  color: var(--ink-3); font-size: 13px; font-weight: 450;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest__text mark { background: rgba(23, 189, 108, .22); color: inherit; border-radius: 3px; padding: 0 1px; }
.suggest__flag {
  margin-left: auto; flex: 0 0 auto; font-style: normal;
  font-size: 11px; font-weight: 650; letter-spacing: .02em;
  color: var(--amber); background: #fdf3e3; padding: 3px 8px; border-radius: 999px;
}

/* searching spinner, injected next to the submit button */
.address__spinner {
  flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--green);
  animation: spin .7s linear infinite;
}
.address__spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* trust chips under the hero */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px; font-weight: 550; color: var(--ink-2);
}
.chip svg { color: var(--green); flex: 0 0 15px; }

/* ------------------------------------------------------------- map / tool */
.tool { padding-block: 0 var(--section-y); }
.tool__panel {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.tool__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, #fff, #fcfdfc);
}
.tool__addr { font-weight: 650; letter-spacing: -0.015em; font-size: 16px; min-width: 0; }
.tool__addr span { display: block; font-weight: 450; font-size: 13.5px; color: var(--ink-3); letter-spacing: 0; }
.tool__bar .btn { margin-left: auto; }

.map {
  position: relative;
  height: clamp(340px, 52vh, 560px);
  background: #0d1512;
  /* Contain every Leaflet z-index (panes go to 700, controls to 1000) so the
     map can never paint over dialogs that live outside it. */
  isolation: isolate;
}
#map { position: absolute; inset: 0; }
.map__overlay {
  position: absolute; z-index: 500; pointer-events: none;
  left: 18px; right: 18px; bottom: 30px; /* clears the Leaflet attribution strip */
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.map__readout {
  pointer-events: auto;
  background: rgba(12, 18, 16, .74);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #fff; border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 14px; min-width: 190px;
}
.map__readout b { font-size: 20px; letter-spacing: -0.02em; display: block; font-variant-numeric: tabular-nums; }
.map__readout small { color: rgba(255,255,255,.62); font-size: 12.5px; display: block; margin-top: 2px; }
.map__actions { pointer-events: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.map__note {
  position: absolute; z-index: 500; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: center; pointer-events: none;
}
.map__note span {
  background: rgba(12,18,16,.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff; font-size: 13.5px; font-weight: 550;
  padding: 9px 16px; border-radius: 999px;
  animation: pop .3s var(--ease) both;
}

/* ------------------------------------------------- the berm outline (SVG)
   The outline is now a Leaflet polygon rather than a DOM box, so it stays glued
   to the ground while the map rotates. These rules only style the SVG itself
   and the drag handles.
   ---------------------------------------------------------------------- */
.berm-fill {
  cursor: grab;
  filter: drop-shadow(0 0 6px rgba(23, 189, 108, .85));
}
.berm-fill:active { cursor: grabbing; }
/* The dimming panels. Non-interactive so clicks fall through to the map, which
   is what moves the outline. */
.berm-mask { pointer-events: none; }

.berm-handle {
  background: #fff;
  border: 2.5px solid var(--green-bright);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  box-sizing: border-box;
}
.berm-handle--frontage { cursor: ew-resize; }
.berm-handle--depth { cursor: ns-resize; }
/* Round, so "rotate" is visually distinct from the axis handles. */
.berm-handle--rotate {
  border-radius: 50%;
  background: var(--green-bright);
  border-color: #fff;
  cursor: grab;
}
.berm-handle--rotate:active { cursor: grabbing; }

/* ------------------------------------------------------------- the steps */
/* Centred explicitly rather than relying on the grid's default stretch: the
   row is capped and centred, and each track centres its card. If any ancestor
   ever constrains this block differently, the row stays centred anyway. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  inline-size: 100%;
  max-inline-size: 1084px;
  margin-inline: auto;
  justify-content: center;
  justify-items: center;
}
/* Two columns below this width. The third card then has no partner, so it is
   centred across both columns rather than left stranded — an odd card sitting
   hard left is what "not centred on the page" looks like. */
@media (max-width: 940px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > .step:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: 100%;
    max-inline-size: 420px;
  }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; max-inline-size: none; }
  /* Single column again, so every card is full width. */
  .steps > .step:nth-child(3) { max-inline-size: none; }
}
/* The card itself fills its track. */
.step { inline-size: 100%; }
.step {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 28px 24px 26px;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step__n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green-tint); color: var(--green-deep);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 750; margin-bottom: 18px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--ink-2); line-height: 1.58; }

/* -------------------------------------------------------------- the problem */
.problem__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 76px); align-items: center; }
@media (max-width: 880px) { .problem__grid { grid-template-columns: 1fr; } }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
@media (max-width: 560px) { .stat-row { grid-template-columns: 1fr; } }
.stat { background: var(--paper-2); border-radius: var(--radius-sm); padding: 20px; }
.stat b { display: block; font-size: 30px; font-weight: 750; letter-spacing: -0.03em; color: var(--green-deep); }
.stat span { font-size: 14px; color: var(--ink-3); line-height: 1.45; display: block; margin-top: 4px; }

/* ---------------------------------------------------------------- cutaway */
.cutaway { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 44px); }
.cutaway__svg { width: 100%; height: auto; }

/* --------------------------------------------------------------- pricing */
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 820px) { .price-grid { grid-template-columns: 1fr; } }
.plan {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(28px, 3.4vw, 42px);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan--featured { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--shadow); }
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.plan h3 { font-size: 24px; margin-bottom: 6px; }
.plan__blurb { color: var(--ink-3); font-size: 15.5px; min-height: 46px; }
.plan__price { margin: 22px 0 4px; font-size: clamp(42px, 5.4vw, 58px); font-weight: 750; letter-spacing: -0.045em; line-height: 1; }
.plan__price sup { font-size: .42em; font-weight: 650; top: -0.85em; margin-right: 3px; letter-spacing: 0; }
.plan__price small { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.plan__incl { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.plan ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.plan li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.plan li svg { flex: 0 0 19px; margin-top: 2px; color: var(--green); }
.plan .btn { margin-top: auto; justify-content: center; }

.upgrades { margin-top: 26px; background: var(--paper-2); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
.upgrades h3 { font-size: 18px; margin-bottom: 6px; }
.upgrade-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 20px; }
@media (max-width: 560px) { .upgrade-list { grid-template-columns: 1fr; } }
.upgrade { background: #fff; border-radius: var(--radius-sm); padding: 18px 20px; border: 1px solid var(--line-2); }
.upgrade b { display: block; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.upgrade p { font-size: 14px; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
.upgrade .poa { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 650; color: var(--amber); background: #fdf3e3; padding: 4px 10px; border-radius: 999px; }
.upgrade .note { display: block; margin-top: 10px; font-size: 13px; color: var(--amber); line-height: 1.45; }

/* ------------------------------------------------------------------ trust */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 940px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } }
.trust {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 26px 22px;
}
.trust__icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--green-tint);
  display: grid; place-items: center; color: var(--green-deep); margin-bottom: 16px;
}
.trust h3 { font-size: 17px; margin-bottom: 6px; }
.trust p { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }

/* ------------------------------------------------------ performance demo */
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .demo { grid-template-columns: 1fr; } }
.demo__card {
  border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
}
.demo__head { padding: 18px 22px 14px; }
.demo__head b { font-size: 16.5px; letter-spacing: -0.015em; display: block; }
.demo__head span { font-size: 14px; color: var(--ink-3); }
.demo__stage { position: relative; aspect-ratio: 16 / 10; background: #d9e6d7; }
.demo__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo__verdict { font-weight: 600; font-size: 14.5px;
  display: flex; align-items: center; gap: 9px;
  padding: 14px 22px; font-size: 14.5px; font-weight: 600;
  border-top: 1px solid var(--line-2);
}
.demo__card--bad .demo__verdict { font-weight: 600; font-size: 14.5px; color: #b3402f; background: #fdf1ee; }
.demo__card--good .demo__verdict { font-weight: 600; font-size: 14.5px; color: var(--green-deep); background: var(--green-tint); }

/* -------------------------------------------------------------------- FAQ */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 26px 44px 26px 0; position: relative;
  font-size: clamp(17px, 2vw, 19.5px); font-weight: 650; letter-spacing: -0.018em;
  color: var(--ink); line-height: 1.4;
}
.faq__q::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.2px solid var(--ink-3); border-bottom: 2.2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .28s var(--ease);
}
.faq__item.is-open .faq__q::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a { overflow: hidden; height: 0; transition: height .34s var(--ease); }
.faq__a > div { padding: 0 60px 28px 0; color: var(--ink-2); font-size: 16px; line-height: 1.66; }
.faq__a strong { color: var(--ink); font-weight: 650; }
.faq__callout {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--paper-2); border-left: 3px solid var(--green);
  font-size: 15px; color: var(--ink-2);
}

/* ----------------------------------------------------------------- footer */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(32px, 5vw, 60px); letter-spacing: -0.04em; }
.cta-final .address { margin-top: 34px; }

.footer { background: var(--paper-3); padding: 56px 0 40px; }
.footer__inner { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.footer__brand { max-width: 320px; }
.footer__brand p { font-size: 14.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.55; }
.footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-4); margin-bottom: 14px; font-weight: 700; }
.footer__col a { display: block; font-size: 15px; color: var(--ink-2); text-decoration: none; margin-bottom: 10px; }
.footer__col a:hover { color: var(--green); }
.footer__legal {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-3); line-height: 1.62;
}
.footer__legal p + p { margin-top: 12px; }
.footer__bottom { margin-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-4); }

/* ----------------------------------------------------------- scroll reveal */
/* Reveal-on-scroll.
   Visible by default: if the script never runs, or the observer never fires, the
   page is still readable. Only once JS has confirmed it is in charge (`.js` on
   <html>) does the animation start from hidden. The other way round — hidden by
   default, revealed by script — means any JS failure blanks the whole page,
   which is exactly what happened. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ modal */
/* z-index must clear Leaflet's controls (1000), or an open dialog ends up
   behind the map. The map also sets `isolation: isolate` as a second guard. */
.modal {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(10, 16, 13, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fade .25s ease both;
}
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal__card {
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  width: min(600px, 100%); max-height: 88vh; overflow-y: auto;
  animation: rise .3s var(--ease) both;
}
@keyframes rise { from { transform: translateY(16px) scale(.985); opacity: 0 } to { transform: none; opacity: 1 } }
.modal__head { padding: 28px 30px 0; display: flex; align-items: flex-start; gap: 16px; }
.modal__head h3 { font-size: 25px; }
.modal__head p { color: var(--ink-3); font-size: 15px; margin-top: 6px; }
.modal__close {
  margin-left: auto; border: 0; background: var(--paper-2); cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-3); flex: 0 0 34px;
}
.modal__close:hover { background: var(--paper-3); color: var(--ink); }
.modal__body { padding: 24px 30px 30px; }
.modal__foot { padding: 0 30px 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.modal__foot .btn { flex: 1 1 auto; justify-content: center; }

/* ------------------------------------------------------------------ forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper-2); border: 1.5px solid transparent;
  border-radius: var(--radius-xs); padding: 13px 15px; outline: 0;
  transition: border-color .18s ease, background .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  background: #fff; border-color: var(--green-bright);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- quote list */
.quote-lines { display: grid; gap: 2px; margin-bottom: 20px; }
.quote-line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 2px; font-size: 15.5px; border-bottom: 1px solid var(--line-2);
}
.quote-line span:first-child { color: var(--ink-2); }
.quote-line span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-line--sub span:first-child { color: var(--ink-3); font-size: 14.5px; }
.quote-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px 2px 0; font-size: 17px; font-weight: 650;
}
.quote-total b { font-size: 34px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.quote-note { font-size: 13.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.55; }

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 550;
  padding: 13px 22px; border-radius: 999px; box-shadow: var(--shadow-lg);
  z-index: 3000; animation: pop .25s var(--ease) both;
}
.toast[hidden] { display: none; }

/* ------------------------------------------------------------- leaflet tweaks */
.leaflet-container { background: #0d1512; font-family: var(--font); }
.leaflet-control-attribution {
  background: rgba(12, 18, 16, .66) !important; color: rgba(255,255,255,.72) !important;
  font-size: 10.5px !important; backdrop-filter: blur(8px);
}
.leaflet-control-attribution a { color: rgba(255,255,255,.86) !important; }
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow-sm) !important; }
.leaflet-bar a {
  background: rgba(255,255,255,.94) !important; color: var(--ink) !important;
  border-bottom-color: var(--line-2) !important;
  width: 34px !important; height: 34px !important; line-height: 34px !important;
  font-size: 19px !important;
}
.leaflet-bar a:hover { background: #fff !important; }