/* v2 — layered on top of site.css, so the preview shares the existing
   palette, header, footer and form styling rather than forking it.
   Everything here is additive; nothing overrides the brand tokens. */

.v2 h1{font-weight:800;letter-spacing:-.022em;font-size:clamp(2rem,4.4vw,3.15rem);line-height:1.08}
.v2 h2{font-weight:750;letter-spacing:-.016em}
.btn--lg{padding:.92rem 1.5rem;font-size:1rem}
.btn--block{display:block;width:100%;text-align:center}
.btn--ghost2{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--ghost2:hover{border-color:var(--teal);color:var(--teal-dk)}
.eyebrow--light{color:#8fd8cb}

/* ── hero ─────────────────────────────────────────────────
   Split by intent: the planner reads the left, the panicking
   visitor sees one orange block and nothing competing with it. */
.hero2{background:linear-gradient(180deg,#fff 0%,var(--sky) 100%);padding:3.1rem 0 3.4rem;border-bottom:1px solid var(--line)}
.hero2__in{display:grid;grid-template-columns:1.35fr .95fr;gap:2.6rem;align-items:start}
.hero2__copy .lead{max-width:46ch;margin-top:.9rem;font-size:1.1rem}
.hero2__acts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
@media(max-width:900px){
  .hero2{padding:2.1rem 0 2.4rem}
  .hero2__in{grid-template-columns:1fr;gap:1.6rem}
}

/* the emergency block — the only alert-coloured thing above the fold */
.urgent{background:#fff;border:2px solid var(--alert);border-radius:14px;padding:1.35rem 1.4rem;
  box-shadow:0 10px 30px rgba(18,48,74,.09)}
.urgent__kicker{margin:0 0 .2rem;font-weight:800;color:var(--alert);font-size:.79rem;
  letter-spacing:.13em;text-transform:uppercase}
.urgent h2{font-size:1.24rem;margin:0 0 .5rem;line-height:1.25}
.urgent p{font-size:.94rem;color:var(--slate);margin-bottom:1rem}
.urgent__note{font-size:.79rem;margin:.75rem 0 0}

/* ── trust strip ──────────────────────────────────────────── */
.trust{background:var(--navy);color:#fff}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;padding:1.05rem 1.15rem}
.trust__in div{display:flex;flex-direction:column;gap:.05rem}
.trust strong{font-size:1.02rem;font-weight:700}
.trust span{font-size:.79rem;color:#a9c8d2}
@media(max-width:820px){.trust__in{grid-template-columns:1fr 1fr;gap:.9rem}}

/* ── the deadline hook ────────────────────────────────────── */
.hook{background:var(--navy);color:#e6f1f4;padding:3rem 0;
  background-image:radial-gradient(circle at 88% 12%,rgba(28,156,138,.30),transparent 46%)}
.hook__in{display:grid;grid-template-columns:1.5fr .8fr;gap:2.4rem;align-items:center}
.hook h2{color:#fff;font-size:clamp(1.45rem,2.7vw,2.05rem);max-width:22ch}
.hook p{color:#c8dee5;max-width:52ch}
.hook strong{color:#fff}
.hook__acts{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-top:1.3rem}
.btn--onhook{background:var(--teal);color:#fff}
.btn--onhook:hover{background:#25b39e}
.arrow--light{color:#8fd8cb}
.hook__facts{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin:0}
.hook__facts>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:.7rem .85rem}
.hook__facts dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8fb6c4}
.hook__facts dd{margin:.15rem 0 0;font-size:1.12rem;font-weight:750;color:#fff}
@media(max-width:900px){.hook__in{grid-template-columns:1fr;gap:1.7rem}}

/* ── services ─────────────────────────────────────────────── */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.9rem}
.svc__card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:1.15rem 1.2rem;text-decoration:none;color:inherit;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.svc__card:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 10px 24px rgba(18,48,74,.10)}
.svc__card h3{margin-bottom:.15rem}
.svc__price{font-weight:700;color:var(--teal-dk);font-size:.9rem;margin:0 0 .35rem}
.svc__card p:not(.svc__price){font-size:.92rem;color:var(--slate);margin:0}
.svc__go{display:inline-block;margin-top:.7rem;font-size:.85rem;font-weight:650;color:var(--teal-dk)}
.svc__go::after{content:" \2192"}
.svc__card--alert{border-color:rgba(217,98,43,.42)}
.svc__card--alert .svc__price{color:var(--alert)}
.svc__card--alert:hover{border-color:var(--alert)}

/* ── diagram ──────────────────────────────────────────────── */
.section--tint{background:var(--sky)}
.diagram{margin:0 0 1.5rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem}
.diagram img{width:100%;height:auto}
.diagram figcaption{font-size:.86rem;color:var(--slate);margin-top:.75rem;text-align:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.two p{color:var(--slate)}
@media(max-width:760px){.two{grid-template-columns:1fr;gap:.6rem}}

/* ── motion: restrained on purpose ────────────────────────
   A tradesman site should not feel like an agency showreel. One
   fade-and-rise on entry, nothing else. */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px)}
  .reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
}