/* =========================================================================
   page.css

   Everything the landing pages need on top of style.css, and nothing the
   homepage uses. Loaded only by pages built from _build/template.py.

   The homepage is a piece of theatre: parallax, a custom cursor, a film.
   These pages are not, and should not be. Somebody opens one of them at
   two in the morning, in pain, one-handed, on a phone, looking for a
   phone number and an instruction. So: one column, large type, the call
   button never more than a thumb away, and no motion of any kind.

   Every colour, radius and easing here comes from the tokens in
   style.css. Nothing new is invented.
   ========================================================================= */

/* ------------------------------------------------------------------ nav */

.lp-nav{
  position:sticky; top:0; z-index:90;
  background:rgba(0,2,5,.72);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.lp-nav-in{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.lp-logo img{ width:140px; height:auto; }

/* The nav call button is the only one on screen while the hero is out of
   view on desktop, so it does not shrink below the standard control size. */
@media (max-width:520px){
  .lp-logo img{ width:118px; }
  .lp-nav .btn{ --bh:38px; font-size:.86rem; padding:0 14px; }
}

/* ----------------------------------------------------------------- hero */

.lp-hero{ padding:clamp(30px,5vw,64px) 0 clamp(38px,5vw,66px); }

.lp-crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.78rem; color:var(--text-3); margin-bottom:26px;
}
.lp-crumbs a{ color:var(--text-2); }
.lp-crumbs a:hover{ color:var(--text); }

.lp-kicker{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 20px;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2);
  border:1px solid var(--border); border-radius:var(--r-pill);
  padding:7px 14px 7px 12px;
  background:rgba(255,255,255,.02);
}
/* Static on purpose. A blinking dot next to the words "on call now" is
   decoration, and this page is read by people who do not need any. */
.lp-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 3px rgba(77,162,255,.16);
  flex:none;
}

.lp-hero h1{ max-width:16ch; margin-bottom:22px; }

.lp-lede{
  max-width:52ch;
  font-size:clamp(1.06rem,1.5vw,1.28rem);
  line-height:1.55;
  color:var(--text-2);
  margin:0 0 30px;
}

.lp-acts{ display:flex; flex-wrap:wrap; gap:12px; }

.lp-trust{
  list-style:none; margin:44px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(26px,5vw,64px);
  border-top:1px solid var(--border-soft); padding-top:26px;
}
.lp-trust li{ display:flex; flex-direction:column; gap:3px; }
.lp-trust b{
  font-family:var(--display); font-weight:700; font-synthesis:none;
  font-size:clamp(1.9rem,3.4vw,2.6rem); letter-spacing:-.04em; line-height:1;
}
.lp-trust i{ font-style:normal; }
.lp-trust span{ font-size:.78rem; color:var(--text-3); }

/* ----------------------------------------------------------------- body */

/* One column, held at a measure that stays readable at arm's length on a
   phone and does not sprawl on a desktop.

   The measure goes on the children, not on the column itself. Constraining
   the column and letting it centre put the body text in the middle of the
   screen while the hero above it started at the left edge of the 1400px
   wrap, and the step between the two read as a broken layout. Everything
   now shares one left edge all the way down the page. */
.lp-col{ max-width:var(--wrap); }
.lp-col > *{ max-width:760px; }

.lp-body{ padding-bottom:clamp(40px,5vw,70px); }
.lp-body p{
  color:var(--text-2);
  font-size:1.02rem;
  line-height:1.75;
  margin:0 0 1.15em;
}
.lp-body a,
.lp-faq a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:rgba(77,162,255,.5);
  text-underline-offset:3px;
}
.lp-body a:hover,
.lp-faq a:hover{ text-decoration-color:var(--blue); }

.lp-lead{
  font-size:1.14rem !important;
  line-height:1.65 !important;
  color:var(--text) !important;
  margin-bottom:1.4em !important;
}

.lp-h2{
  margin:clamp(48px,5vw,72px) 0 22px;
  padding-top:clamp(28px,3vw,38px);
  border-top:1px solid var(--border-soft);
  max-width:20ch;
}
.lp-col > .lp-h2:first-child{ margin-top:0; padding-top:0; border-top:0; }

.lp-note{
  font-size:.92rem !important;
  color:var(--text-3) !important;
  line-height:1.65 !important;
  margin-top:1.4em !important;
}

/* ------------------------------------------------------- steps and cards */

.lp-steps{
  list-style:none; counter-reset:s;
  margin:26px 0 0; padding:0;
  display:grid; gap:2px;
}
.lp-steps li{
  counter-increment:s;
  position:relative;
  padding:22px 22px 22px 66px;
  background:var(--surface-1);
  border:1px solid var(--border-soft);
  border-radius:var(--r-card);
}
.lp-steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:22px; top:21px;
  font-family:var(--display); font-weight:700; font-synthesis:none;
  font-size:1rem; letter-spacing:-.02em;
  color:var(--blue);
}
.lp-steps h3{ margin:0 0 7px; color:var(--text); }
.lp-steps p{ margin:0 !important; font-size:.98rem !important; }

.lp-cards{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;
}
.lp-cards li{
  padding:22px;
  background:var(--surface-1);
  border:1px solid var(--border-soft);
  border-radius:var(--r-card);
}
.lp-cards h3{ margin:0 0 7px; color:var(--text); }
.lp-cards p{ margin:0 !important; font-size:.96rem !important; }

.lp-list{ margin:22px 0 1.15em; padding:0; list-style:none; }
.lp-list li{
  position:relative;
  padding:11px 0 11px 26px;
  color:var(--text-2);
  line-height:1.7;
  border-bottom:1px solid var(--border-soft);
}
.lp-list li:last-child{ border-bottom:0; }
.lp-list li::before{
  content:""; position:absolute; left:4px; top:20px;
  width:6px; height:6px; border-radius:50%; background:var(--blue);
}

/* --------------------------------------------------------------- rows */

/* Prices and drive times. Deliberately plain: a table of numbers is the
   most persuasive thing on these pages precisely because it is not styled
   like a sales panel. */
.lp-rows{
  margin:26px 0 0;
  border-top:1px solid var(--border);
}
.lp-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--border-soft);
}
.lp-row span{ color:var(--text-2); font-size:.98rem; }
.lp-row b{
  font-family:var(--display); font-weight:700; font-synthesis:none;
  font-size:1.06rem; letter-spacing:-.02em; white-space:nowrap;
  text-align:right;
}
@media (max-width:420px){
  .lp-row{ flex-direction:column; gap:4px; }
  .lp-row b{ text-align:left; }
}

/* --------------------------------------------------------------- urgent */

/* Used at most once per page. If it appears twice, neither one is urgent. */
.lp-urgent{
  margin:32px 0 0;
  padding:22px 24px;
  border:1px solid rgba(77,162,255,.34);
  border-left-width:3px;
  border-radius:var(--r-card);
  background:linear-gradient(90deg, rgba(77,162,255,.09), rgba(77,162,255,.02));
}
.lp-urgent p{
  margin:0 !important;
  color:var(--text) !important;
  font-size:1.02rem !important;
  line-height:1.65 !important;
}

/* ------------------------------------------------------------------ faq */

.lp-faq{ padding-bottom:clamp(50px,6vw,80px); }
.lp-q{
  border-bottom:1px solid var(--border-soft);
}
.lp-q summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:var(--acc-pad); padding-inline:0;
  font-size:var(--acc-size); line-height:var(--acc-lh);
  color:var(--text);
}
.lp-q summary::-webkit-details-marker{ display:none; }
.lp-q summary::after{
  content:""; flex:none; margin-top:6px;
  width:11px; height:11px;
  background:
    linear-gradient(var(--text-2),var(--text-2)) center/11px 1px no-repeat,
    linear-gradient(var(--text-2),var(--text-2)) center/1px 11px no-repeat;
  transition:transform .2s var(--ease);
}
.lp-q[open] summary::after{ transform:rotate(90deg); background-size:11px 1px, 0 0; }
.lp-q summary:hover{ color:var(--blue-hot); }
.lp-q > div{ padding:0 0 20px; }
.lp-q p{
  margin:0;
  color:var(--text-2); font-size:.99rem; line-height:1.7;
  max-width:64ch;
}
@media (prefers-reduced-motion: reduce){
  .lp-q summary::after{ transition:none; }
}

/* ---------------------------------------------------------------- close */

.lp-close{
  padding:clamp(56px,7vw,96px) 0;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(77,162,255,.07), transparent 70%);
  text-align:center;
}
.lp-close h2{ max-width:18ch; margin:0 auto 18px; }
.lp-close > .wrap > p{
  max-width:50ch; margin:0 auto 30px;
  color:var(--text-2); font-size:1.04rem; line-height:1.65;
}
.lp-close .lp-note{
  margin:24px auto 0 !important;
  max-width:46ch;
}

/* ----------------------------------------------------------------- more */

.lp-more{ padding:clamp(46px,6vw,76px) 0; }
.lp-more h2{
  font-size:.72rem; font-weight:400; font-family:var(--sans);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); margin:0 0 22px;
}
.lp-more ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;
}
.lp-more a{
  display:flex; flex-direction:column; gap:6px; height:100%;
  padding:22px;
  border:1px solid var(--border-soft); border-radius:var(--r-card);
  background:var(--surface-1);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.lp-more a:hover{ border-color:rgba(255,255,255,.19); background:var(--surface-2); }
.lp-more b{
  font-family:var(--display); font-weight:700; font-synthesis:none;
  font-size:1.14rem; letter-spacing:-.025em;
}
.lp-more span{ color:var(--text-3); font-size:.9rem; line-height:1.5; }
@media (prefers-reduced-motion: reduce){
  .lp-more a{ transition:none; }
}

/* ----------------------------------------------------------------- foot */

/* The homepage footer nav is a row of same-page anchors, which do not exist
   here, so the template leaves it out. Close the gap it left behind. */
.lp .foot-bar{ margin-top:34px; }