/* SnapHaul public site — industrial, high-contrast, blueprint-ruled. */

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,242,237,.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-in { display: flex; align-items: center; gap: 2rem; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--field); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 1rem;
  letter-spacing: -.05em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.brand-name {
  font-family: var(--display); font-weight: 800; font-size: 1.16rem;
  letter-spacing: -.035em; color: var(--ink);
}
.brand-name em { font-style: normal; color: var(--field); }
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
  padding: .3rem 0; position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--hivis); transition: right .22s var(--ease);
}
.nav-links a:hover::after { right: 0; }
.nav-cta { display: flex; gap: .6rem; align-items: center; }
.nav-burger { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--ink); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 7rem);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero::after {
  /* hi-vis diagonal stripe, bottom-right — the workwear signature */
  content: ''; position: absolute; right: -90px; bottom: -90px;
  width: 340px; height: 340px; transform: rotate(45deg);
  background: repeating-linear-gradient(
    90deg, var(--hivis) 0 18px, transparent 18px 36px);
  opacity: .16; pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 .hl {
  background: linear-gradient(transparent 62%, rgba(245,165,36,.55) 62%);
  padding: 0 .06em;
}
.hero-sub { font-size: 1.18rem; line-height: 1.6; color: var(--ink-2); max-width: 30em; margin-bottom: 1.8rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.hero-trust {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--ink-3);
  padding-top: 1.3rem; border-top: 1px solid var(--rule);
}
.hero-trust b { color: var(--ink); font-family: var(--display); font-weight: 800; }

/* Quote widget — the hero's functional centrepiece */
.quoter {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 8px 8px 0 rgba(20,24,28,.1);
  overflow: hidden;
}
.quoter-head {
  background: var(--slate); color: #fff;
  padding: .85rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.quoter-head strong { font-family: var(--display); font-size: .98rem; letter-spacing: -.01em; }
.quoter-head .tag {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hivis);
}
.quoter-body { padding: 1.35rem; }
.quoter-steps { display: flex; gap: .3rem; margin-bottom: 1.15rem; }
.quoter-steps i {
  height: 3px; flex: 1; background: var(--paper-3); border-radius: 2px;
  transition: background .3s;
}
.quoter-steps i.on { background: var(--field); }
.quoter-result {
  background: var(--field-wash); border: 1px solid var(--field-edge);
  border-radius: var(--r); padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.quoter-price {
  font-family: var(--display); font-weight: 900; font-size: 2.1rem;
  letter-spacing: -.04em; color: var(--field-dark); line-height: 1;
}

/* ---------------------------------------------------------------- logos strip */
.strip {
  background: var(--slate); color: var(--slate-ink-2);
  padding: 1.5rem 0; border-bottom: 1px solid var(--slate-rule);
}
.strip-in { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; justify-content: center; }
.strip-label {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-ink-2);
}
.strip-item {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--slate-ink); opacity: .82; letter-spacing: -.01em;
}

/* ---------------------------------------------------------------- sections */
.sec { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.sec-dark { background: var(--slate); color: var(--slate-ink); border-block: 1px solid var(--slate-rule); }
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: #fff; }
.sec-dark .lead, .sec-dark p { color: var(--slate-ink-2); }
.sec-alt { background: var(--paper-2); border-block: 1px solid var(--rule); }

.sec-head { max-width: 42em; margin-bottom: 2.6rem; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .stamp { justify-content: center; }

/* Choosing between two services.
   Only drawn by a franchise that sells both -- somebody with a garage full of
   furniture and somebody with a flat to hand back on Friday are not browsing
   the same price list, and one list that mixes them asks the visitor to do
   the sorting. Each option carries what it is FOR, not just a brand name: a
   visitor who does not already know the two brands learns nothing from two
   words. */
/* The slim band under the site header, on every template. */
.site-linebar { border-bottom: 1px solid var(--rule); background: var(--surface); }
.site-linebar-in {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem 0;
}
.site-linebar-label {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2); margin-right: .25rem;
}
.site-linepill {
  display: inline-flex; align-items: baseline; gap: .4rem; cursor: pointer;
  padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  font-family: var(--display); font-weight: 700; font-size: .84rem;
  transition: border-color .18s, background .18s, color .18s;
}
.site-linepill span { font-family: var(--sans, inherit); font-weight: 400; font-size: .76rem; opacity: .85; }
.site-linepill:hover { color: var(--ink); border-color: var(--ink-2); }
.site-linepill.on { color: #fff; }
.site-linepill.haul.on { background: #1F6F43; border-color: #1F6F43; }
.site-linepill.clean.on { background: #8E6E1E; border-color: #8E6E1E; }

/* The fuller choice, used on the booking form where it is the first question. */
.site-lines {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .7rem; margin-bottom: 2.2rem;
}
.site-lines.compact { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; margin-bottom: 0; }
.site-line {
  display: flex; flex-direction: column; gap: .2rem; text-align: left;
  padding: .95rem 1.1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color .18s, background .18s, transform .18s var(--ease);
}
.site-lines.compact .site-line { padding: .7rem .85rem; }
.site-line b { font-family: var(--display); font-size: 1.02rem; color: var(--ink); }
.site-lines.compact .site-line b { font-size: .92rem; }
.site-line span { font-size: .82rem; color: var(--ink-2); line-height: 1.35; }
.site-line:hover { border-color: var(--ink-2); }
.site-line.on { border-width: 2px; transform: translateY(-1px); }
.site-line.haul.on { border-color: #1F6F43; background: rgba(31, 111, 67, .05); }
.site-line.clean.on { border-color: #B8912F; background: rgba(184, 145, 47, .07); }
.site-line.clean.on b { color: #7E5F15; }

@media (max-width: 560px) {
  .site-lines, .site-lines.compact { grid-template-columns: 1fr; }
}

/* Service cards */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.1rem; }
.svc {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.5rem;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.svc::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--field); transform: scaleY(0); transform-origin: top;
  transition: transform .26s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--ink-4); }
.svc:hover::before { transform: scaleY(1); }
.svc-icon {
  width: 42px; height: 42px; border-radius: var(--r);
  background: var(--field-wash); color: var(--field-ink);
  display: grid; place-items: center; font-size: 1.25rem; margin-bottom: .9rem;
}
.svc h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.svc p { font-size: .9rem; color: var(--ink-2); margin-bottom: .9rem; }
.svc-price {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  color: var(--field-dark); padding-top: .8rem; border-top: 1px dashed var(--rule);
}

/* Numbered process steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.6rem; counter-reset: s; }
.step { counter-increment: s; position: relative; padding-top: 3.2rem; }
.step::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-weight: 900; font-size: 2.5rem;
  letter-spacing: -.05em; color: var(--hivis); line-height: 1;
}
.step::after {
  content: ''; position: absolute; top: 1.2rem; left: 3.4rem; right: -.8rem;
  height: 1px; background: var(--rule);
}
.step:last-child::after { display: none; }
.step h4 { margin-bottom: .4rem; }
.step p { font-size: .9rem; color: var(--ink-2); margin: 0; }
.sec-dark .step::after { background: var(--slate-rule); }

/* Feature list with ruled rows */
.feat-list { border-top: 1px solid var(--rule); }
.feat-row {
  display: grid; grid-template-columns: 210px 1fr;
  gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.feat-row h4 { margin: 0; font-size: 1rem; }
.feat-row .feat-tag {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); display: block; margin-top: .3rem;
}
.feat-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .55rem 1.5rem; }
.feat-items span { font-size: .9rem; display: flex; gap: .5rem; align-items: baseline; color: var(--ink-2); }
.feat-items span::before { content: '→'; color: var(--field); font-weight: 700; flex: none; }
.sec-dark .feat-list, .sec-dark .feat-row { border-color: var(--slate-rule); }
.sec-dark .feat-items span { color: var(--slate-ink-2); }

/* Coverage map / area list */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.area {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); padding: 1.15rem 1.25rem;
}
.area.planned { border-style: dashed; background: transparent; }
.area h4 { margin-bottom: .2rem; font-size: 1rem; }
.area .cities { font-size: .83rem; color: var(--ink-3); line-height: 1.5; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }
.review {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.35rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.stars { color: var(--hivis); font-size: .95rem; letter-spacing: .1em; }
.review blockquote { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-2); }
.review cite { font-style: normal; font-size: .82rem; color: var(--ink-3); margin-top: auto; }
.review cite b { color: var(--ink); font-weight: 600; display: block; font-style: normal; }

/* Pricing */
/* ---- Pricing ---------------------------------------------------------
   Four plans side by side, each an equal-width column so the eye compares
   like with like. The card is a vertical grid with fixed rows, so the price,
   the limits and the button line up across all four however long the
   "who it's for" line runs. */

.bill-toggle {
  display: flex; justify-content: center; gap: 0;
  margin: 0 auto 2rem; width: fit-content;
  background: var(--paper-2); border: 1.5px solid var(--rule);
  border-radius: 99px; padding: 4px;
}
.bill-toggle button {
  border: 0; cursor: pointer; background: none;
  padding: .5rem 1.15rem; border-radius: 99px;
  font-family: var(--body); font-size: .88rem; font-weight: 600; color: var(--ink-3);
  display: flex; align-items: center; gap: .45rem;
  transition: background .14s, color .14s, box-shadow .14s;
}
.bill-toggle button span {
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--hivis-wash); color: var(--hivis-ink);
  padding: .1rem .34rem; border-radius: 99px;
}
.bill-toggle button.on {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.plan {
  /* Rows: name+audience · price · terms · limits · button · features.
     Naming them keeps the four cards aligned no matter what is inside. */
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: .85rem;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.35rem;
  position: relative;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.plan:hover { border-color: var(--ink-4); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.plan.pop {
  border-color: var(--field);
  box-shadow: 0 0 0 1px var(--field), var(--shadow-2);
}
.plan.pop::before, .plan.current::before {
  content: 'Most popular'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--field); color: #fff;
  font-family: var(--mono); font-size: .61rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 99px; white-space: nowrap;
}
/* The plan you are on is a fact about you, not a sales claim about the plan. */
.plan.current {
  border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-2);
}
.plan.current::before { content: 'Your plan'; background: var(--ink); }
.plan.current:hover { transform: none; }
/* A plan smaller than what the tenant is using is shown, not hidden — but it
   is visibly not an option. */
.plan.too-small { opacity: .62; }
.plan.too-small:hover { transform: none; box-shadow: none; border-color: var(--rule); }

.plan-head { min-height: 4.6rem; }
.plan-name { font-family: var(--display); font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; }
.plan-for { font-size: .8rem; color: var(--ink-3); line-height: 1.4; margin: .3rem 0 0; }

.plan-price {
  font-family: var(--display); font-weight: 900; font-size: 2.9rem;
  letter-spacing: -.05em; line-height: 1; color: var(--ink);
  display: flex; align-items: baseline; gap: .05rem;
}
.plan-price .cur { font-size: 1.4rem; font-weight: 800; align-self: flex-start; margin-top: .35rem; }
.plan-price .per { font-family: var(--body); font-size: .9rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: .15rem; }
.plan-terms {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--ink-4); margin-top: -.5rem;
  /* Two lines whether or not this one wraps, so the limits row below it sits
     at the same height on all four cards. */
  min-height: 2.6em; line-height: 1.3;
}

.plan-limits {
  display: grid; gap: .3rem;
  padding: .7rem 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  font-size: .84rem; color: var(--ink-2);
}
.plan-limits b { font-weight: 600; color: var(--ink); }

.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .42rem; align-content: start; }
.plan li { font-size: .84rem; color: var(--ink-2); display: flex; gap: .5rem; align-items: baseline; line-height: 1.4; }
.plan li::before { content: '✓'; color: var(--field); font-weight: 700; flex: none; }

/* The comparison table answers "what is actually different" without making
   anyone read four feature lists in parallel. */
.plan-compare { margin-top: 2.5rem; overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td { padding: .7rem .8rem; text-align: center; border-bottom: 1px solid var(--rule-soft); }
.cmp th:first-child, .cmp td:first-child {
  text-align: left; font-weight: 500; color: var(--ink-2); font-size: .87rem; min-width: 210px;
}
.cmp thead th {
  font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.cmp td { font-family: var(--mono); font-size: .84rem; color: var(--ink-2); }
.cmp td b { font-family: var(--display); font-size: 1rem; color: var(--ink); }
.cmp .pop { background: var(--field-wash); }
.cmp thead th.pop { color: var(--field-ink); }

@media (max-width: 1040px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-head { min-height: 0; }
}
@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr; }
  .plan.pop::before, .plan.current::before { left: 1.4rem; transform: none; }
}

/* CTA band */
.cta-band {
  background: var(--field); color: #fff;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); }

/* Footer */
.foot { background: var(--slate); color: var(--slate-ink-2); padding: 3.2rem 0 1.8rem; font-size: .88rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.2rem; margin-bottom: 2.4rem; }
.foot h5 {
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  margin: 0 0 .9rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.foot a { color: var(--slate-ink-2); }
.foot a:hover { color: var(--hivis); }
.foot-bottom {
  border-top: 1px solid var(--slate-rule); padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem;
}
.foot .brand-name { color: #fff; }

/* Auth pages */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside {
  background: var(--slate); color: var(--slate-ink);
  padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside h2 { color: #fff; font-size: 2.1rem; }
.auth-main { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.auth-card { width: min(410px, 100%); }
.demo-creds {
  background: var(--slate-2); border: 1px solid var(--slate-rule);
  border-radius: var(--r); padding: 1rem 1.15rem; font-size: .82rem;
}
.demo-creds table { width: 100%; border-collapse: collapse; }
.demo-creds td { padding: .28rem 0; vertical-align: top; }
.demo-creds td:first-child { color: var(--slate-ink-2); padding-right: 1rem; white-space: nowrap; }
.demo-creds code { font-family: var(--mono); font-size: .76rem; color: var(--hivis); }
.demo-creds button {
  background: none; border: 0; color: var(--field-light); cursor: pointer;
  font-family: var(--mono); font-size: .7rem; padding: 0; text-decoration: underline;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}
@media (max-width: 480px) {
  /* Keep one CTA in the bar; "Sign in" lives in the burger menu. */
  .nav-cta .btn-quiet { display: none; }
  .brand-name { font-size: 1rem; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: block; margin-left: auto; }
  .nav-links.open [data-mobile-signin] { display: block !important; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute;
    top: var(--nav-h); left: 0; right: 0; background: var(--paper);
    border-bottom: 1px solid var(--rule); padding: 1.2rem 4vw; gap: 1rem;
    box-shadow: var(--shadow-2);
  }
  .feat-row { grid-template-columns: 1fr; gap: .8rem; }
  .step::after { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* The plan card, reused in SnapHQ where share-of-revenue matters. */
.plan-share { display: flex; align-items: center; gap: .5rem; }

/* The page you are on, marked in the header. */
.nav-links a.on { color: var(--ink); font-weight: 600; }
.nav-links a.on::after {
  content: ''; display: block; height: 2px; margin-top: 3px;
  background: var(--field); border-radius: 2px;
}

/* The first section on an interior page carries the page heading, so it gets
   the graph-paper ground the home hero has and a little more room. */
.sec-first { padding-top: clamp(2.6rem, 5vw, 3.6rem); }
/* Graph paper only on a light ground — on a dark section the same grid is a
   light mesh over the text. */
.sec-first:not(.sec-dark) {
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 26px 26px;
}
.sec-first.sec-dark {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 26px 26px;
}
.sec-first .sec-head { margin-bottom: 1.6rem; }

/* ---- Local conditions strip -----------------------------------------
   On a tenant's own site: their market, their clock, their weather. Rain
   decides whether a cleanout happens today. */
.local-strip {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-size: .82rem;
}
.local-in {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .55rem 0; flex-wrap: wrap;
}
.local-where b { font-weight: 600; }
.local-wx { display: inline-flex; align-items: baseline; gap: .35rem; }
.local-wx .local-icon { font-size: 1rem; }
.local-wx b { font-family: var(--display); font-size: .98rem; }
.local-note {
  color: var(--ink-3); padding-left: .9rem;
  border-left: 1px solid var(--rule);
}
.local-open {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
  color: var(--ink-3); white-space: nowrap;
}
.local-open i {
  width: 7px; height: 7px; border-radius: 99px;
  background: var(--ink-4); flex: none;
}
.local-open.on i { background: var(--field); box-shadow: 0 0 0 3px var(--field-wash); }
.local-open.on { color: var(--field-ink); }

@media (max-width: 680px) {
  .local-note { display: none; }
  .local-open { margin-left: 0; }
}

/* ---- Home directory --------------------------------------------------
   The home page's job is a price or a destination, not the whole site. These
   cards replace eight sections of scroll. */
.home-dir {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: .9rem;
}
.home-card {
  display: grid; gap: .3rem; align-content: start;
  padding: 1.1rem 1rem 1rem;
  border: 1.5px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.home-card:hover {
  border-color: var(--field); transform: translateY(-3px); box-shadow: var(--shadow-2);
}
.home-card-k { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; }
.home-card-b { font-size: .85rem; color: var(--ink-3); line-height: 1.45; }
.home-card-go {
  margin-top: .35rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--field-ink);
}
.home-card:hover .home-card-go { color: var(--field); }

/* The one route from a tenant's site to the platform it runs on. Quiet:
   a customer booking a skip is not shopping for dispatch software. */
.run-on { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; opacity: .75; }
.run-on:hover { opacity: 1; color: var(--field); }

/* A nav item that points off this site entirely. */
.nav-links a.nav-sep {
  margin-left: .5rem; padding-left: .9rem;
  border-left: 1px solid var(--rule); color: var(--ink-4);
}
.nav-links a.nav-sep:hover { color: var(--ink-2); }

/* The booking page's footer carries both the platform link and the credit. */
.app-credit {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  flex-wrap: wrap; padding: 1rem 1rem 1.3rem;
  border-top: 1px solid var(--rule-soft); background: var(--paper);
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4);
}

/* ---- Photography ------------------------------------------------------
   Every photo carries explicit dimensions so the page never reflows when one
   lands, and everything below the fold is lazy. The ratio is set on the
   wrapper rather than the image so a differently-shaped file cannot break the
   grid it sits in. */
.photo {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-3);
}
.photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.photo-4x3  { aspect-ratio: 4 / 3; }
.photo-3x2  { aspect-ratio: 3 / 2; }
.photo-16x9 { aspect-ratio: 16 / 9; }
.photo-1x1  { aspect-ratio: 1 / 1; }
.photo-tall { aspect-ratio: 3 / 4; }

/* A caption that explains what you are looking at, rather than decorating it. */
.photo-cap {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-4);
  margin-top: .5rem; display: block;
}

/* Photo + words side by side, alternating. */
.photo-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
.photo-row.flip > .photo { order: 2; }
@media (max-width: 820px) {
  .photo-row, .photo-row.flip > .photo { grid-template-columns: 1fr; order: 0; }
}

/* Service cards that lead with a photo. */
.svc-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem;
}
.svc-photo {
  border: 1.5px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.svc-photo:hover { border-color: var(--field); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.svc-photo .photo { border-radius: 0; }
.svc-photo-body { padding: .9rem 1rem 1.1rem; display: grid; gap: .25rem; align-content: start; }
.svc-photo-body b { font-family: var(--display); font-size: 1rem; letter-spacing: -.015em; }
.svc-photo-body span { font-size: .84rem; color: var(--ink-3); line-height: 1.45; }

/* A photo used as a section ground, with the words over it. */
.photo-band { position: relative; overflow: hidden; }
.photo-band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.photo-band::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--slate) 12%, rgba(20,24,28,.72) 55%, rgba(20,24,28,.35) 100%);
}
.photo-band > .wrap { position: relative; z-index: 2; }
.photo-band h2, .photo-band h1 { color: #fff; }
.photo-band p { color: rgba(255,255,255,.86); }
@media (max-width: 720px) {
  .photo-band::after { background: linear-gradient(180deg, rgba(20,24,28,.82), rgba(20,24,28,.9)); }
}

/* ---- Photo estimator --------------------------------------------------
   Three steps. The customer's job is to point a phone at a pile; everything
   else about this should get out of the way. */
.est { max-width: 620px; margin: 0 auto; }
.est-rail { display: flex; gap: .4rem; margin-bottom: 1.6rem; }
.est-rail i {
  flex: 1; height: 3px; border-radius: 99px; background: var(--rule);
  transition: background .2s;
}
.est-rail i.done { background: var(--field); }
.est-rail i.cur { background: var(--hivis); }

.est-head { margin-bottom: 1.4rem; }
.est-head h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.5rem); letter-spacing: -.04em;
  line-height: 1.05; margin: .25rem 0 .5rem;
}
.est-head .lead { margin: 0; }

/* The drop target is the whole point of step one, so it is the whole screen. */
.est-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; text-align: center; cursor: pointer;
  min-height: 210px; padding: 1.6rem;
  border: 2px dashed var(--rule); border-radius: var(--r-lg);
  background: var(--paper-2); overflow: hidden; position: relative;
  transition: border-color .14s, background .14s;
}
.est-drop:hover { border-color: var(--field); background: var(--field-wash); }
.est-drop.has { padding: 0; border-style: solid; min-height: 0; }
.est-drop.has img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.est-drop-swap {
  position: absolute; bottom: .7rem; left: 50%; transform: translateX(-50%);
  background: rgba(20,24,28,.82); color: #fff;
  font-size: .78rem; font-weight: 600;
  padding: .35rem .8rem; border-radius: 99px; white-space: nowrap;
}
/* base.css styles every <label> as a mono uppercase form label. The drop
   zone is a label so the whole area is clickable, not because it is one. */
.est-drop, .est-band {
  font-family: var(--body); font-size: 1rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.est-drop-icon { font-size: 2rem; line-height: 1; }
.est-drop-main { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.est-drop-sub { font-size: .8rem; color: var(--ink-3); max-width: 26em; line-height: 1.45; }

.est-alt { margin-top: 1rem; }
.est-alt summary {
  cursor: pointer; font-size: .87rem; color: var(--ink-2);
  padding: .5rem 0; font-weight: 500;
}
.est-bands { display: grid; gap: .5rem; }
.est-band {
  text-align: left; cursor: pointer; padding: .65rem .8rem;
  border: 1.5px solid var(--rule); border-radius: var(--r);
  background: var(--surface); font-family: var(--body); color: var(--ink);
  display: grid; gap: .1rem;
  transition: border-color .12s, background .12s;
}
.est-band:hover { border-color: var(--field-light); }
.est-band.sel { border-color: var(--field); background: var(--field-wash); }
.est-band b { font-size: .92rem; font-weight: 600; }
.est-band span { font-size: .79rem; color: var(--ink-3); }

.est-items { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.est-item {
  font-size: .8rem; padding: .28rem .6rem; border-radius: 99px;
  background: var(--paper-2); border: 1px solid var(--rule-soft); color: var(--ink-2);
}

.est-note-band {
  font-size: .82rem; color: var(--hivis-ink);
  background: var(--hivis-wash); border: 1px solid var(--hivis-edge);
  border-radius: var(--r); padding: .55rem .8rem; margin-bottom: 1rem;
}

.est-lines { border-top: 1.5px solid var(--ink); }
.est-line {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  padding: .75rem .1rem; border-bottom: 1px solid var(--rule-soft); font-size: .92rem;
}
.est-line b.num { white-space: nowrap; font-family: var(--display); }
.est-total { border-bottom: 0; border-top: 1.5px solid var(--ink); padding-top: .9rem; }
.est-total b.num { font-size: 1.25rem; }

.est-flags, .est-assume {
  margin-top: 1.2rem; padding: .9rem 1rem;
  border-radius: var(--r); font-size: .86rem;
}
.est-flags { background: var(--brick-wash); border: 1px solid var(--brick-edge); }
.est-assume { background: var(--paper-2); border: 1px solid var(--rule-soft); }
.est-flags b, .est-assume b { display: block; font-family: var(--display); margin-bottom: .35rem; }
.est-flags ul, .est-assume ul { margin: 0; padding-left: 1.1rem; }
.est-flags li, .est-assume li { margin: .2rem 0; }
.est-flags .tiny, .est-assume .tiny { margin: .5rem 0 0; color: var(--ink-3); }

/* The hero card now holds the full estimator, which needs more room than the
   three-field widget it replaced. */
.quoter:has(#estimator-mount) { padding: 0; }
.quoter:has(#estimator-mount) .quoter-body { padding: 1.4rem 1.3rem 1.6rem; }
.quoter #estimator-mount .est { max-width: none; }
.quoter #estimator-mount .est-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.quoter #estimator-mount .est-drop { min-height: 160px; }