/* ==========================================================================
   J and R Commercial Winter Funnel. Photo-led variation.
   Full-bleed photo hero and statement bands, ice-tint sections, icon cards,
   accordion questions. Light page, Inter, mobile-390 first.
   Everything is driven by the tokens below. No ad hoc values past :root.
   ========================================================================== */

:root {
  /* Color ---------------------------------------------------------------- */
  --bg: #ffffff;
  --bg-alt: #f7f8f9;
  --ice: #eef4f8;            /* cool winter tint for section bands */
  --ice-line: #dbe6ee;
  --ink: #0f1419;
  --muted: #5a6470;
  --line: #e5e7eb;
  --line-hover: #d3d8de;

  --green: #039932;          /* brand green. Fails AA on white as text. */
  --green-deep: #027024;     /* 6.24:1 on white. Use this for text and CTAs. */
  --green-tint: #e9f6ed;
  --orange: #f66909;         /* sparing accent. Urgency only. */
  --orange-deep: #b84a02;    /* AA on white for small orange text */

  --cta: var(--green-deep);
  --cta-hover: #015a1c;
  --cta-text: #ffffff;
  --scrim: rgb(15 20 25 / .86);

  /* Type scale ----------------------------------------------------------- */
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  clamp(1.75rem, 3.4vw, 2.25rem);
  --fs-3xl:  clamp(2.125rem, 5vw, 3rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-ui: 1.45;
  --measure: 68ch;

  /* Space scale ---------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 88px;

  /* Radius --------------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;

  /* Layout --------------------------------------------------------------- */
  --maxw: 1120px;
  --pad: 20px;
  --nav-h: 62px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  overflow-x: clip;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

h1, h2, h3 { margin: 0 0 var(--s-3); font-weight: 800; text-wrap: balance; }
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.024em; }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: -.021em; margin-bottom: var(--s-4); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: -.014em; margin-bottom: var(--s-2); }
p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a  { color: var(--green-deep); }

.eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green-deep); margin: 0 0 var(--s-2);
}
.eyebrow.orange { color: var(--orange-deep); }
.lede { font-size: var(--fs-lg); color: var(--muted); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); margin-top: var(--s-4); }
.tnum { font-variant-numeric: tabular-nums; }

/* Icons -------------------------------------------------------------------- */
.ico {
  width: 26px; height: 26px; flex: 0 0 auto;
  fill: none; stroke: var(--green-deep); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Focus and selection ------------------------------------------------------ */
:where(a, button, [tabindex], iframe, summary):focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
::selection { background: var(--green-tint); color: var(--ink); }

.skip {
  position: absolute; left: var(--pad); top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); text-decoration: none; font-weight: 700;
  font-size: var(--fs-sm); transition: top .15s ease;
}
.skip:focus { top: var(--s-2); }

/* Nav ---------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .94); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); gap: var(--s-2);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; padding: var(--s-2) 0; }
.brand img { display: block; height: 30px; width: auto; }
.nav-actions { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.tel {
  text-decoration: none; font-weight: 600; color: var(--ink);
  font-size: var(--fs-sm); white-space: nowrap; flex: 0 1 auto;
  padding: var(--s-3) var(--s-2); border-radius: var(--r-sm);
  transition: background .15s ease; font-variant-numeric: tabular-nums;
}
.tel:hover { background: var(--bg-alt); }
@media (max-width: 430px) {
  .nav .tel { display: none; }          /* the dock carries Call on small phones */
  .brand img { height: 26px; }
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cta); color: var(--cta-text); text-decoration: none;
  font-weight: 700; font-size: var(--fs-sm); line-height: var(--lh-ui);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  border: 0; cursor: pointer; white-space: nowrap; min-width: 0; min-height: 44px;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--cta-hover); transform: translateY(-1px); }
.btn.sm { padding: var(--s-3) var(--s-4); flex: 0 1 auto; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg-alt); }
.btn.block { width: 100%; }

/* ==========================================================================
   HERO. Mobile: full-bleed photo under a scrim, white type on top.
   Desktop: split panel so the 675px original stays at honest resolution.
   ========================================================================== */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 78vh; min-height: 78svh; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(9 17 24 / .30) 0%, rgb(9 17 24 / .44) 42%, rgb(9 17 24 / .86) 100%);
}
.hero-inner { width: 100%; padding-top: var(--s-8); padding-bottom: var(--s-7); }
.hero-copy { position: relative; z-index: 1; max-width: 620px; }
.hero-copy .eyebrow { color: #b9f0cb; }
.hero-copy h1 {
  color: #fff; font-size: clamp(2.125rem, 8.4vw, 3.6rem);
  letter-spacing: -.03em; line-height: 1.06; font-weight: 900;
  max-width: 16ch; margin-bottom: var(--s-4);
}
.hero-copy .lede { color: rgb(255 255 255 / .88); margin-bottom: var(--s-6); max-width: 46ch; }
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.hero .btn.ghost { color: #fff; border-color: rgb(255 255 255 / .55); background: rgb(15 20 25 / .18); }
.hero .btn.ghost:hover { background: rgb(255 255 255 / .14); }
@media (max-width: 520px) {
  .hero-cta { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero-cta .btn { width: 100%; }
}

@media (min-width: 900px) {
  .hero { min-height: 0; display: block; background: var(--bg); }
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr); gap: var(--s-8); align-items: stretch; padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .hero-media { position: relative; inset: auto; order: 2; border-radius: var(--r-lg); min-height: 520px; overflow: hidden; }
  .hero-media img { position: absolute; inset: 0; border-radius: var(--r-lg); object-position: 68% 50%; }
  .hero-media::after {
    border-radius: var(--r-lg);
    background: linear-gradient(to top, rgb(9 17 24 / .32) 0%, rgb(9 17 24 / 0) 34%);
  }
  .hero-copy { order: 1; align-self: center; }
  .hero-copy .eyebrow { color: var(--green-deep); }
  .hero-copy h1 { color: var(--ink); font-size: clamp(2.6rem, 4.6vw, 3.75rem); }
  .hero-copy .lede { color: var(--muted); max-width: 52ch; }
  .hero .btn.ghost { color: var(--ink); border-color: var(--line); background: transparent; }
  .hero .btn.ghost:hover { background: var(--bg-alt); }
}

/* Metrics band ------------------------------------------------------------- */
.metrics { border-bottom: 1px solid var(--line); background: var(--bg); }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; }
.metric { padding: var(--s-4) var(--s-3) var(--s-4) 0; }
.metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.metric b {
  display: block; font-size: clamp(1.5rem, 5.4vw, 2rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.05; color: var(--ink);
}
.metric span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }
@media (min-width: 768px) {
  .metrics-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
  .metric, .metric:nth-child(-n+2) { border-bottom: 0; padding: var(--s-5) 0; }
  .metric + .metric { border-left: 1px solid var(--line); padding-left: var(--s-6); }
}

/* Sections ----------------------------------------------------------------- */
section { padding: var(--s-9) 0; }
section.tight { padding: var(--s-8) 0; }
.ice { background: var(--ice); border-top: 1px solid var(--ice-line); border-bottom: 1px solid var(--ice-line); }
.ice + .ice, section + .ice { border-top: 0; }
.section-intro { max-width: var(--measure); }
.section-intro + * { margin-top: var(--s-6); }

.pull { max-width: 34ch; }
.pull h2 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); letter-spacing: -.028em; }
.pull p { max-width: 52ch; font-size: var(--fs-lg); }

/* Proof reel. Auto-scrolling equipment marquee under the metrics band.
   Fixed display height keeps the 600x450 sources crisp; the lineup leads.
   Pause on hover; manual scroll under prefers-reduced-motion. ------------- */
.marquee { overflow: hidden; position: relative; padding: var(--s-6) 0 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg), rgb(255 255 255 / 0)); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--bg), rgb(255 255 255 / 0)); }
.marquee-track { display: flex; gap: var(--s-3); width: max-content; animation: mq 55s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track figure { margin: 0; flex: 0 0 auto; }
.marquee-track img {
  display: block; height: clamp(180px, 24vw, 260px); width: auto;
  border-radius: var(--r-md); object-fit: cover;
}
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* Stakes split: copy left, the 4am night storm right. --------------------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); } }
.split-img { margin: 0; }
.split-img img {
  display: block; width: 100%; max-width: 450px; height: auto;
  border-radius: var(--r-lg);
}
@media (min-width: 820px) { .split-img img { margin-left: auto; } }

/* Ghosted oversized watermark icons behind sections. Decorative only. ----- */
.wm { position: relative; overflow: clip; }
.wm .wrap { position: relative; z-index: 1; }
.wm-icon {
  position: absolute; z-index: 0; pointer-events: none;
  color: var(--green); opacity: .06;
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
  height: min(74%, 460px); width: auto; max-width: 62vw;
  right: -4%; top: 50%; transform: translateY(-50%) rotate(-8deg);
}
@media (max-width: 700px) { .wm-icon { height: min(62%, 320px); max-width: 82vw; right: -14%; } }

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .g3 { grid-template-columns: repeat(3, 1fr); } }

/* Cards -------------------------------------------------------------------- */
.card, .review, .ptype, .formwrap, .mapfig {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: clip; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover, .review:hover, .ptype:hover, .mapfig:hover {
  border-color: var(--line-hover);
  box-shadow: 0 1px 2px rgb(15 20 25 / .04), 0 8px 24px -12px rgb(15 20 25 / .10);
}
.card { padding: var(--s-5); }
.card .ico { margin-bottom: var(--s-3); }
.card p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.55; }

/* Equipment photos inside cards: flush to the card edges, fixed height,
   never a tall crop. ------------------------------------------------------ */
.card-img {
  display: block; width: calc(100% + 2 * var(--s-5));
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4);
  height: 180px; object-fit: cover; background: var(--bg-alt);
}

/* Property photo cards: the photo is the card. -------------------------- */
.ptype { margin: 0; position: relative; }
.ptype img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg-alt); }
.ptype figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  color: #fff; font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em;
  background: linear-gradient(to top, rgb(9 17 24 / .82), rgb(9 17 24 / 0));
}

/* Placeholder property tiles: branded, deliberate, awaiting photography.
   Same structure as the photo cards so a swap upgrades without relayout. -- */
.tile .tile-art {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--green-tint), var(--ice));
}
.tile-ico {
  width: 56px; height: 56px; color: var(--green-deep); opacity: .55;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Coverage map ------------------------------------------------------------- */
.mapfig { display: block; position: relative; text-decoration: none; background: var(--bg-alt); }
.mapfig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mapzoom {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  background: var(--scrim); color: #fff; font-size: var(--fs-sm); font-weight: 700;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); transition: background .18s ease;
}
.mapfig:hover { transform: translateY(-2px); }
.mapfig:hover .mapzoom { background: var(--cta); }

/* Portfolio feature -------------------------------------------------------- */
.feature { display: grid; gap: var(--s-5); margin-top: var(--s-7); align-items: center; }
@media (min-width: 860px) { .feature { grid-template-columns: 1fr .85fr; gap: var(--s-8); } }
.feature-body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.026em; margin-bottom: var(--s-3); }
.feature-body p { color: var(--muted); max-width: 46ch; }
.feature-body p:first-of-type { color: var(--ink); }

/* ==========================================================================
   PHOTO STATEMENT BANDS. Full-bleed real photography under a heavy scrim.
   Structured so higher-res swaps upgrade them with zero relayout.
   ========================================================================== */
.band { position: relative; overflow: hidden; display: flex; align-items: center; padding: 0; min-height: 440px; }
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(9 17 24 / .62), rgb(9 17 24 / .78));
}
@media (min-width: 900px) {
  .band-media::after { background: linear-gradient(to right, rgb(9 17 24 / .82) 0%, rgb(9 17 24 / .62) 55%, rgb(9 17 24 / .38) 100%); }
}
.band-inner { position: relative; z-index: 1; width: 100%; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.band-kicker {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #b9f0cb; margin: 0 0 var(--s-3);
}
.band h2 {
  color: #fff; font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -.028em; line-height: 1.1; max-width: 22ch; margin-bottom: var(--s-4);
}
.band p { color: rgb(255 255 255 / .88); font-size: var(--fs-lg); max-width: 50ch; margin: 0; }

/* Account manager ----------------------------------------------------------- */
.am { display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .am { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }
.am-lead p { font-size: var(--fs-lg); line-height: 1.5; max-width: 44ch; }
.am-lead em { font-style: normal; box-shadow: inset 0 -.5em 0 var(--green-tint); }
.am-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.am-list li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--s-4); align-items: flex-start; }
.am-list .ico { margin-top: 2px; }
.am-list b { display: block; font-size: var(--fs-base); font-weight: 700; }
.am-list span { display: block; font-size: var(--fs-sm); color: var(--muted); }

/* Communication beats ------------------------------------------------------ */
.beat { background: var(--bg); border: 1px solid var(--ice-line); border-radius: var(--r-md); padding: var(--s-5); }
.beat .ico { margin-bottom: var(--s-3); }
.beat h3 {
  color: var(--green-deep); font-size: var(--fs-xs); letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: var(--s-2);
}
.beat p { margin: 0; font-size: var(--fs-base); line-height: 1.55; }

/* Communication band: faint snowfall texture under an ice wash. ------------ */
.comm {
  background:
    linear-gradient(rgb(238 244 248 / .92), rgb(238 244 248 / .96)),
    url('/images/bg-whiteout.jpg') center / cover no-repeat;
}

/* Reviews ------------------------------------------------------------------ */
.review { margin: 0; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.review blockquote {
  margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--ink);
  position: relative; padding-left: var(--s-4);
}
.review blockquote::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; background: var(--green); border-radius: 1px;
}
.review figcaption { display: flex; flex-direction: column; gap: 2px; }
.review figcaption b { font-size: var(--fs-sm); font-weight: 700; }
.review figcaption span { font-size: var(--fs-sm); color: var(--muted); letter-spacing: .005em; }

/* Review rail: runs to the viewport edge, fade only at the very edge,
   chevrons, touch snap-scroll, hidden scrollbar. --------------------------- */
.rail-ctl { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: calc(-1 * var(--s-6)); }
.rail-ctl .chev {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ice-line);
  background: var(--bg); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.rail-ctl .chev:hover { background: var(--green-tint); border-color: var(--green-deep); }
.rail-ctl .chev svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-wrap { position: relative; margin-top: var(--s-5); }
.rail-wrap::before, .rail-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 1; pointer-events: none;
}
.rail-wrap::before { left: 0; background: linear-gradient(to right, var(--ice), rgb(238 244 248 / 0)); }
.rail-wrap::after { right: 0; background: linear-gradient(to left, var(--ice), rgb(238 244 248 / 0)); }
.rev-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 380px);
  gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: var(--s-1) max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) var(--s-3);
}
.rev-rail::-webkit-scrollbar { display: none; }
.rev-rail .review { scroll-snap-align: start; }

/* ==========================================================================
   QUESTIONS. Native details accordions, numbered, compact on mobile.
   ========================================================================== */
.qlist { counter-reset: q; border-top: 1px solid var(--line); }
.q { counter-increment: q; border-bottom: 1px solid var(--line); }
.q summary {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-4) 42px; min-height: 48px;
  cursor: pointer; list-style: none; position: relative;
  font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-snug);
}
.q summary::-webkit-details-marker { display: none; }
.q summary::before {
  content: counter(q); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--green-tint); color: var(--green-deep);
  font-size: var(--fs-xs); font-weight: 800; display: grid; place-items: center;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.q .q-t { flex: 1 1 auto; text-wrap: pretty; }
.q .chev {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.q[open] .chev { transform: rotate(180deg); }
.q summary:hover .q-t { color: var(--green-deep); }
.q-body { padding: 0 var(--s-5) var(--s-5) 42px; }
.q-why { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--s-3); }
.q-ans {
  font-size: var(--fs-base); font-weight: 600; color: var(--ink);
  border-left: 3px solid var(--green); padding-left: var(--s-4); margin: 0;
}
.q-ans.q-defer { border-left-color: var(--line); color: var(--muted); font-weight: 500; }
.qcta { margin-top: var(--s-6); }

/* Steps -------------------------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: var(--s-5); max-width: var(--measure); }
.step { counter-increment: s; padding-left: 52px; position: relative; }
.step::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--ink); color: #fff;
  font-weight: 800; font-size: var(--fs-sm); display: grid; place-items: center;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.step h3 { min-height: 32px; display: flex; align-items: center; margin-bottom: var(--s-2); }
.step p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.55; }

/* Form --------------------------------------------------------------------- */
.formwrap { padding: var(--s-2); }
.formwrap iframe { width: 100%; border: 0; display: block; min-height: 760px; }
/* Collapse the reserved height only while JS is present to restore it on load, so
   a JS failure leaves a full-height, usable form rather than a zero-height one. */
/* Reserve the form's height up front and centre the loading state inside it, so
   the card does not start as a short strip with the message jammed at the top and
   then jump when the embed lands. */
.formwrap { position: relative; min-height: 620px; }
.js .formwrap:not(.loaded) iframe { min-height: 0; height: 0; }
.formwrap.loaded { min-height: 0; }
.formph { position: absolute; inset: 0; display: grid; align-content: center; }
.formwrap.loaded .formph { display: none; }
.formwrap.failed .formph { display: grid; }
.formph a { color: var(--green-deep); font-weight: 700; }
.nojs-form { width: 100%; border: 0; display: block; min-height: 900px; }
.formnote { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-4); max-width: var(--measure); }
.formnote a { display: inline-block; padding: var(--s-2) 0; font-variant-numeric: tabular-nums; }
.formph { padding: var(--s-8) var(--s-5); text-align: center; color: var(--muted); }
.formph strong { display: block; color: var(--ink); margin-bottom: var(--s-2); font-size: var(--fs-md); }
.formph span { font-size: var(--fs-base); }

/* Urgency close. The one place orange appears. ----------------------------- */
.close { border-top: 1px solid var(--line); }
.urgent { border-left: 3px solid var(--orange); padding-left: var(--s-5); max-width: var(--measure); }
.urgent .hero-cta { margin-top: var(--s-5); }
.urgent + * .btn.ghost, .close .btn.ghost { color: var(--ink); border-color: var(--line); background: transparent; }

/* Sticky dock -------------------------------------------------------------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgb(255 255 255 / .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: var(--s-3) var(--pad);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center;
  transition: transform .2s ease;
}
.dock .btn { padding: var(--s-3) var(--s-5); }
.dock.hide { transform: translateY(110%); }
@media (min-width: 1024px) { .dock { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 72px; } }

/* Footer ------------------------------------------------------------------- */
footer { background: var(--ice); border-top: 1px solid var(--ice-line); padding: var(--s-8) 0 var(--s-6); }
.foot-grid { display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.1fr 1fr 1.2fr; gap: var(--s-8); } }
.foot-brand img { display: block; height: 40px; width: auto; margin-bottom: var(--s-3); }
.foot-brand p { font-size: var(--fs-sm); color: var(--muted); max-width: 34ch; }
.foot-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2);
}
.foot-tel {
  display: inline-block; font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 900;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  font-variant-numeric: tabular-nums; margin-bottom: var(--s-4); padding: var(--s-1) 0;
}
.foot-tel:hover { color: var(--green-deep); }
.foot-call .btn { display: inline-flex; }
.foot-area p { font-size: var(--fs-sm); color: var(--muted); max-width: 40ch; }
.foot-link { color: var(--ink); text-decoration: none; font-weight: 600; display: inline-block; padding: var(--s-2) 0; }
.foot-link:hover { color: var(--green-deep); }
.foot-legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--ice-line); }
.foot-legal p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* Reveal. Visible by default so a JS failure cannot blank the page. --------- */
.rv-on .rv { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.rv-on .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv-on .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Print. The buyer brings the twelve questions to a bid meeting. ------------ */
@media print {
  .nav, .dock, .hero, .metrics, .band, .hero-cta, .qcta, .skip,
  .maprow, .mapfig, .formwrap, .formnote, #proposal, .close, footer,
  .ptype, .feature, .marquee, .split-img, .wm-icon,
  .rail-ctl, #reviews, .card-img { display: none !important; }
  body { padding: 0; font-size: 11pt; color: #000; background: #fff; }
  section { padding: 12pt 0; border: 0; page-break-inside: avoid; }
  .ice { background: none; border: 0; }
  h2 { font-size: 15pt; }
  .q { page-break-inside: avoid; }
  .q summary { padding: 8pt 0 4pt 30pt; }
  .q summary::before { background: none; color: #000; border: 1px solid #999; }
  .q .chev { display: none; }
  .q-body { padding: 0 0 8pt 30pt; }
  .q-why, .card p, .beat p { color: #333; }
  .q-ans { border-left-color: #999; }
  a[href^="tel:"]::after { content: " " attr(href); }
}


/* Five property cards ------------------------------------------------------
   Five items in a three-up grid leaves an orphan. Both breakpoints run a
   doubled column count so the short final row centers instead of hanging
   left against empty space. */
@media (min-width: 768px) and (max-width: 1023px) {
  .g5 { grid-template-columns: repeat(4, 1fr); }
  .g5 > * { grid-column: span 2; }
  .g5 > :nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) {
  .g5 { grid-template-columns: repeat(6, 1fr); }
  .g5 > * { grid-column: span 2; }
  .g5 > :nth-child(4) { grid-column: 2 / span 2; }
  .g5 > :nth-child(5) { grid-column: 4 / span 2; }
}
.g5 .ptype img { aspect-ratio: 16 / 10; }

/* Closing band. Dark scrim, so the CTA pair needs the hero's light treatment. */
.close-band .band-kicker { color: #ffd0a3; }
.close-band .hero-cta { margin-top: var(--s-6); }
.close-band .btn.ghost {
  color: #fff; border-color: rgb(255 255 255 / .55); background: rgb(15 20 25 / .18);
}
.close-band .btn.ghost:hover { background: rgb(255 255 255 / .14); }

/* Thank-you page. Renders inside the form's iframe after submission, so it owns
   no page chrome and simply centres itself in whatever height it is given. Also
   holds up if opened directly. */
.thanks {
  display: grid; align-content: center; justify-items: center; text-align: center;
  min-height: 300px; padding: var(--s-7) var(--s-5); max-width: 44ch; margin: 0 auto;
  background: var(--bg);
}
.thanks-tick {
  width: 48px; height: 48px; margin-bottom: var(--s-4);
  color: var(--green-deep); fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.thanks h1 {
  font-size: clamp(1.45rem, 4.6vw, 1.9rem); letter-spacing: -.02em;
  line-height: 1.15; margin-bottom: var(--s-3);
}
.thanks-lede { font-size: var(--fs-lg); color: var(--muted); margin-bottom: var(--s-4); }
.thanks-alt { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.thanks-tel { font-weight: 800; color: var(--green-deep); white-space: nowrap; text-decoration: none; }
.thanks-tel:hover { text-decoration: underline; }