/* ==========================================================================
   civEDGE Consultants — stylesheet
   Palette: #DA2128 red · #0B0B0C near-black · #F4F4F5 grey ground
   Type: Figtree (body/headings) · IBM Plex Mono (technical labels)
   ========================================================================== */

:root {
  --red: #DA2128;
  --red-dark: #B01820;
  --red-tint: #FEF2F2;
  --red-tint-2: #FEF7F7;
  --red-border: #F5C6C8;
  --ink: #0B0B0C;
  --ink-70: #3F3F46;
  --ink-50: #6B6B70;
  --grey-900: #27272A;
  --grey-700: #52525B;
  --grey-600: #71717A;
  --grey-400: #A1A1AA;
  --grey-300: #D4D4D8;
  --grey-200: #E4E4E7;
  --grey-100: #F4F4F5;
  --white: #ffffff;
  --wrap: 1240px;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* --- Base ---------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, blockquote, p { margin: 0; }
p { text-wrap: pretty; }

/* Body copy is left-aligned with a natural ragged right edge. */
.lede, .card p, .step p, .dir-bio {
  text-align: left;
}
img { max-width: 100%; }
button { font-family: inherit; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

*:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

section[id] { scroll-margin-top: 84px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.sec { padding-top: 100px; padding-bottom: 100px; }
.sec-grey { background: var(--grey-100); border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.sec-dark { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }

.split { display: grid; gap: 70px; align-items: start; }

/* --- Section eyebrow ----------------------------------------------------- */

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--grey-200);
  margin-bottom: 4px;
}
.eyebrow-num { font-family: var(--mono); font-size: 12px; color: var(--grey-600); font-weight: 500; }
.eyebrow-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--red); font-weight: 600;
}
.sec-grey .eyebrow, .on-grey .eyebrow { border-bottom-color: var(--grey-300); }
.sec-dark .eyebrow { border-bottom-color: var(--ink-70); }

/* --- Headings ------------------------------------------------------------ */

.h1 { font-size: clamp(46px, 6.6vw, 96px); line-height: 0.94; font-weight: 900; letter-spacing: -0.03em; }
.h2 { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.02; font-weight: 900; letter-spacing: -0.025em; margin-top: 18px; }
.lede { font-size: 18px; line-height: 1.65; color: var(--ink-70); margin-top: 22px; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block; background: var(--red); color: var(--white);
  padding: 17px 34px; font-size: 17px; font-weight: 700; border: none; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 56%, calc(100% - 18px) 100%, 0 100%);
  transition: background 140ms ease;
}
.btn:hover { background: var(--red-dark); color: var(--white); }
.btn-sm { padding: 11px 24px; font-size: 15px; font-weight: 600; clip-path: polygon(0 0, 100% 0, 100% 58%, calc(100% - 12px) 100%, 0 100%); }
.btn-outline {
  display: inline-block; border: 1px solid var(--grey-700); color: var(--white);
  padding: 17px 34px; font-weight: 600; font-size: 17px; background: none; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.btn-outline:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.06); }
.btn-ghost {
  background: none; border: 1px solid var(--grey-300); color: var(--ink);
  padding: 14px 22px; font-weight: 600; cursor: pointer; font-size: 15px;
  transition: border-color 140ms ease;
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; padding: 18px 32px; font-size: 17px; clip-path: polygon(0 0, 100% 0, 100% 52%, calc(100% - 20px) 100%, 0 100%); }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--grey-200);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 16px; padding-bottom: 16px;
}
.logo { height: 34px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav > a, .nav button { white-space: nowrap; }
.nav-link { color: var(--ink); }
.nav-link:hover { color: var(--red); }

.quicklinks { position: relative; }
.quicklinks-btn {
  display: flex; align-items: center; gap: 7px; background: none; border: none;
  padding: 0; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.quicklinks-btn:hover { color: var(--red); }
.caret { font-size: 10px; color: var(--red); display: inline-block; transition: transform 200ms ease; }
.quicklinks.open .caret { transform: rotate(180deg); }
.quicklinks-panel {
  position: absolute; top: calc(100% + 18px); right: 0; width: 340px;
  background: var(--ink); border-top: 2px solid var(--red);
  box-shadow: 0 22px 50px rgba(11,11,12,0.3); padding: 22px;
  display: none; opacity: 0; transform: translateY(-8px);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22,1,0.36,1);
}
.quicklinks.open .quicklinks-panel { display: block; opacity: 1; transform: translateY(0); }
.ql-group { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); font-weight: 500; margin-bottom: 12px; }
.ql-list { display: grid; gap: 2px; margin-bottom: 22px; }
.ql-list:last-of-type { margin-bottom: 0; }
.ql-list a { color: var(--white); font-size: 15px; font-weight: 500; padding: 9px 10px; margin: 0 -10px; }
.ql-list a:hover { background: var(--grey-900); color: var(--white); }
.ql-note { font-size: 13px; line-height: 1.5; color: var(--grey-400); margin-top: 18px; }

.burger {
  display: none; place-items: center; gap: 5px; background: none;
  border: 1px solid var(--grey-300); width: 46px; height: 46px; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); }

.mobile-menu {
  display: none; border-top: 1px solid var(--grey-200); background: var(--white);
  max-height: 0; overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.22,1,0.36,1);
}
.mobile-menu.open { max-height: 780px; }
.mobile-menu-inner { padding: 8px 22px 22px; }
.mobile-menu a {
  display: flex; align-items: center; min-height: 46px;
  color: var(--ink); font-size: 17px; font-weight: 600;
  border-bottom: 1px solid var(--grey-100);
}
.mobile-menu .mm-tool { color: var(--ink-70); font-size: 16px; font-weight: 500; border-bottom: none; }
.mm-group { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); font-weight: 600; margin: 20px 0 6px; }

/* --- Hero ---------------------------------------------------------------- */

.hero { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 60%; opacity: 0.42;
}
.hero-scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(96deg, rgba(11,11,12,0.96) 0%, rgba(11,11,12,0.90) 42%, rgba(11,11,12,0.52) 72%, rgba(11,11,12,0.42) 100%); }
.hero-slash { position: absolute; inset: 0; z-index: 0; background: linear-gradient(104deg, transparent 0 61%, rgba(218,33,40,0.85) 61% 61.35%, transparent 61.35% 67%, rgba(218,33,40,0.16) 67% 67.9%, transparent 67.9% 79%, rgba(255,255,255,0.07) 79% 79.2%, transparent 79.2%); }
.hero-grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 88px 100%; }
.hero-inner { position: relative; z-index: 1; padding-top: 108px; padding-bottom: 100px; }
/* The outlined hero button has no fill, so the decorative red diagonal behind
   the hero reads straight through it — worst at tablet widths, where the band
   crosses the button. A translucent dark fill keeps the button legible while
   still letting the photograph show through faintly. */
.hero-actions .btn-outline { background: rgba(11,11,12,0.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.hero-actions .btn-outline:hover { background: rgba(11,11,12,0.78); }
.hero-copy { max-width: 66ch; }
.hero-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.hero-rule { width: 40px; height: 3px; background: var(--red); display: block; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.hero-kicker span:last-child { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--mono); color: var(--grey-400); font-weight: 500; }
.hero-sub { font-size: 21px; line-height: 1.55; max-width: 52ch; margin-top: 30px; color: var(--grey-300); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

/* --- Qualifier panel ----------------------------------------------------- */

.panel { background: var(--white); border: 1px solid var(--grey-200); padding: 40px; }
.quiz-panel { min-height: 460px; }
.dots { display: flex; gap: 7px; margin-bottom: 30px; }
.dot { height: 4px; flex: 1; background: var(--grey-200); transition: background 200ms ease; }
.dot.on { background: var(--red); }
.quiz-step { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 14px; }
.quiz-q { font-size: 27px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 26px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-opt {
  text-align: left; font-size: 16.5px; font-weight: 500; line-height: 1.4;
  padding: 16px 20px; border: 1px solid var(--grey-300); background: var(--white);
  color: var(--ink); cursor: pointer; min-height: 46px;
  transition: border-color 140ms ease, background 140ms ease;
}
.quiz-opt:hover { border-color: var(--red); background: var(--red-tint); }
.quiz-back { margin-top: 26px; font-size: 15px; background: none; border: none; color: var(--ink-50); cursor: pointer; padding: 0; text-decoration: underline; }
.rec-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); font-weight: 600; margin-bottom: 12px; }
.rec-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.rec-tag { font-size: 14px; font-weight: 600; padding: 8px 15px; background: var(--red-tint); color: var(--red-dark); border: 1px solid var(--red-border); }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.quiz-note { font-size: 14px; line-height: 1.55; color: var(--ink-50); margin-top: 20px; }
.hidden { display: none !important; }

/* --- Client cards -------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 22px; }
.card { border: 1px solid var(--grey-200); padding: 34px; display: grid; gap: 14px; align-content: start; }
.card-kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--mono); color: var(--ink-50); font-weight: 700; }
.card-title { font-size: 22px; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; }
.card p { font-size: 16px; line-height: 1.65; color: var(--ink-70); }

/* --- Service cards ------------------------------------------------------- */

.services-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: 46px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.svc {
  text-align: left; color: var(--white); background-color: var(--ink);
  background-size: cover; background-position: 60% 40%;
  border: 2px solid var(--grey-200); padding: 30px; cursor: pointer;
  display: grid; gap: 12px; align-content: end; min-height: 300px;
  transition: border-color 140ms ease, transform 180ms ease;
}
.svc:hover { border-color: var(--red); }
.svc.on { border-color: var(--red); }
.svc-top { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.svc-name { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; }
.svc-blurb { font-size: 15.5px; line-height: 1.6; color: var(--grey-300); }
.svc-tick {
  flex: none; width: 26px; height: 26px; border: 2px solid rgba(255,255,255,0.75);
  background: transparent; color: var(--white); font-size: 15px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
.svc.on .svc-tick { border-color: var(--red); background: var(--red); }
.svc-cta { justify-self: start; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: var(--grey-300); margin-top: 4px; }
.svc.on .svc-cta { color: var(--white); }

/* --- Process ------------------------------------------------------------- */

.step { display: grid; grid-template-columns: 84px minmax(0, 330px) 1fr; gap: 30px; padding: 26px 0; border-top: 1px solid var(--grey-200); align-items: baseline; }
.step-num { font-size: 32px; font-weight: 900; color: var(--red-border); letter-spacing: -0.02em; }
.step:nth-child(4) .step-num, .step:nth-child(5) .step-num { color: #EE8A8E; }
.step:nth-child(6) .step-num { color: var(--red); }
.step-name { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.step p { font-size: 16px; line-height: 1.65; color: var(--ink-70); }
.step-end { border-top: 1px solid var(--grey-200); }

.trip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.trip figure { margin: 0; }
.trip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; filter: saturate(0.9); }
.trip figcaption { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-600); margin-top: 12px; }
.trip figure:last-child figcaption { color: var(--red); }

/* --- Director ------------------------------------------------------------ */

.dir-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: 0.20; }
.dir-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0.82) 0%, rgba(11,11,12,0.94) 100%); }
.dir-inner { position: relative; padding-top: 92px; padding-bottom: 92px; }
.dir-eyebrow { margin-bottom: 44px; }
.portrait-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; display: block; }
.dir-role { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); font-weight: 500; margin-top: 14px; }
.dir-bio { font-size: 17px; line-height: 1.65; color: var(--grey-300); margin-top: 26px; max-width: 560px; }
.dir-bio + .dir-bio { margin-top: 16px; }
/* Same 560px box as the bio, and border-box sizing means the padding sits
   inside it — so the quote ends on exactly the same right edge as the text
   above it rather than running past it. */
.dir-quote { margin-top: 34px; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.32; font-weight: 800; letter-spacing: -0.02em; border-left: 3px solid var(--red); padding-left: 26px; max-width: 560px; }
/* Forces "with confidence." onto its own line on wide screens, so line two
   ends on "communities —". Hidden on phones, where the non-breaking spaces
   either side keep the whole phrase together on one line instead. */
.qbr { display: inline; }

/* Three equal columns, everything flush left so each number shares its label's
   left edge. Label measures are set per column to land the line counts the
   design calls for: 3 lines under 300+, 4 lines under 260ha+. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 72px; padding-top: 44px; border-top: 1px solid var(--ink-70); align-items: start; }
.stat { display: grid; justify-items: start; text-align: left; }
.stat-num { font-size: clamp(38px, 4.1vw, 56px); font-weight: 900; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--white); }
.stat:nth-child(3) .stat-num { color: var(--red); }
.stat-label { font-size: 14.5px; line-height: 1.45; color: var(--grey-400); margin-top: 14px; }
/* Each label's measure is set by its own first line: "infill dwellings
   contributed to" (189px) and "of greenfield land contributed to" (212px),
   measured in Figtree at 14.5px. A couple of px headroom keeps the break
   stable if font metrics shift slightly. */
.stat:nth-child(2) .stat-label { width: 193px; }
.stat:nth-child(3) .stat-label { width: 216px; }
/* Nudges the third stat right so it sits closer to the section's right edge.
   Dropped below 940px, where the column is too narrow to carry both the 48px
   indent and the label's fixed 216px measure without overflowing. */
.stat:nth-child(3) { padding-left: 48px; }
@media (max-width: 939px) {
  .stat:nth-child(3) { padding-left: 0; }
}

/* --- Booking ------------------------------------------------------------- */

.cal-frame { width: 100%; height: 560px; border: none; display: block; }

/* --- Forms --------------------------------------------------------------- */

.field-label {
  display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--mono); color: var(--ink-50); margin-bottom: 7px; font-weight: 600;
}
.input {
  width: 100%; font-family: var(--sans); font-size: 16px; padding: 13px 16px;
  border: 1px solid var(--grey-300); background: var(--white); color: var(--ink);
}
.input:focus { border-color: var(--red); }
textarea.input { resize: vertical; }

/* Contact details are not repeated in the quote section — they live in the
   footer only. These rules remain for the .contact-label type style, which the
   form step headings share. */
.contact-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--mono); color: var(--ink-50); font-weight: 700; }

.form-step {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--grey-300); margin-bottom: 18px;
}
.form-step-num { font-family: var(--mono); font-size: 12px; color: var(--red); font-weight: 600; }
.form-step-name { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.form-step-count { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-50); }

.picker-box { background: var(--grey-100); border-left: 3px solid var(--red); padding: 26px 26px 22px; margin-bottom: 34px; }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pick {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: var(--white); border: 1px solid var(--grey-300); color: var(--ink-70);
  font-size: 14px; font-weight: 500; line-height: 1.35; padding: 11px 13px;
  cursor: pointer; min-height: 46px;
  transition: border-color 120ms ease, background 120ms ease;
}
.pick:hover { border-color: var(--red); }
.pick.on { background: var(--red); border-color: var(--red); color: var(--white); font-weight: 600; }
.pick-box {
  flex: none; width: 18px; height: 18px; border: 1.5px solid var(--grey-400);
  background: transparent; color: var(--red); font-size: 11px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
.pick.on .pick-box { border-color: var(--white); background: var(--white); }
.picker-note { font-size: 14.5px; line-height: 1.55; color: var(--ink-50); margin-top: 12px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.addr-wrap { position: relative; }
.addr-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--white); border: 1px solid var(--ink);
  box-shadow: 0 16px 36px rgba(11,11,12,0.16); max-height: 260px; overflow-y: auto;
}
.addr-list button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--grey-100); padding: 11px 14px;
  font-size: 14.5px; line-height: 1.4; color: var(--ink); cursor: pointer;
}
.addr-list button:hover { background: var(--red-tint); }
.form-submit { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--grey-200); }
.form-note { font-size: 14px; line-height: 1.55; color: var(--ink-50); margin-top: 14px; }
.form-error { font-size: 14px; line-height: 1.55; color: var(--red-dark); margin-top: 10px; }
.sent { display: grid; gap: 16px; align-content: center; min-height: 320px; }
.sent-mark { width: 52px; height: 52px; background: var(--red); color: var(--white); display: grid; place-items: center; font-size: 26px; font-weight: 800; }

/* --- Attachments --------------------------------------------------------- */

.drop {
  border: 1px dashed var(--grey-400); background: var(--grey-100);
  padding: 22px; text-align: center; cursor: pointer; display: block;
  transition: border-color 140ms ease, background 140ms ease;
}
.drop:hover, .drop.over { border-color: var(--red); background: var(--red-tint); }
.drop-strong { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.drop-hint { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); margin-top: 8px; }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-list { display: grid; gap: 6px; margin-top: 10px; }
.file-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--grey-300);
  padding: 10px 12px; font-size: 14px;
}
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-family: var(--mono); font-size: 12px; color: var(--ink-50); flex: none; }
.file-drop-btn {
  flex: none; background: none; border: none; color: var(--ink-50);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.file-drop-btn:hover { color: var(--red); }
.busy { opacity: 0.6; pointer-events: none; }
.spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 9px;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  border-radius: 50%; animation: spin 700ms linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Sticky quote bar ---------------------------------------------------- */

.quote-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--ink); border-top: 2px solid var(--red);
  box-shadow: 0 -14px 40px rgba(11,11,12,0.28);
  transform: translateY(100%); opacity: 0; pointer-events: none;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}
.quote-bar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.quote-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 18px; padding-bottom: 18px; }
.quote-bar-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.quote-count { flex: none; width: 44px; height: 44px; background: var(--red); color: var(--white); display: grid; place-items: center; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.quote-text { font-size: 17px; font-weight: 700; color: var(--white); }
.quote-bar-right { display: flex; align-items: center; gap: 14px; flex: none; }
.quote-clear { background: none; border: 1px solid var(--ink-70); color: var(--grey-400); padding: 13px 20px; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.quote-clear:hover { border-color: var(--grey-400); color: var(--white); }
.quote-go { background: var(--red); color: var(--white); padding: 15px 30px; font-size: 16px; font-weight: 700; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 54%, calc(100% - 16px) 100%, 0 100%); }
.quote-go:hover { color: var(--white); background: var(--red-dark); }

/* --- Footer -------------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--grey-400); }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 56px; }
.footer-logo { height: 40px; width: auto; display: block; }
.footer-links { display: flex; gap: 28px; font-size: 15px; flex-wrap: wrap; }
.footer-links a, .footer-links span { color: var(--grey-300); }
.footer-links a:hover { color: var(--white); }
.footer-copy { font-size: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (hover: none) {
  * { -webkit-tap-highlight-color: rgba(218,33,40,0.12); }
  .nav-link:hover, .quicklinks-btn:hover { color: var(--ink); }
}

/* Desktop split proportions */
@media (min-width: 1081px) {
  .split-quiz { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 76px; }
  .split-book { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
  .split-quote { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
}

@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .nav { gap: 20px; font-size: 14px; }
}

/* iPad landscape */
@media (min-width: 861px) and (max-width: 1200px) {
  .nav { gap: 18px; }
  .wrap { padding-left: 28px; padding-right: 28px; }
  .cards, .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
  .trip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-frame { height: 620px; }
}

/* iPad portrait */
@media (min-width: 701px) and (max-width: 860px) {
  .logo { height: 28px; }
  .cards, .svc-grid, .trip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; }
  .step { grid-template-columns: 64px 1fr; gap: 10px 20px; }
  .step p { grid-column: 2; }
  .cal-frame { height: 700px; }
  .hero-inner { padding-top: 84px; padding-bottom: 80px; }
  .sec { padding-top: 76px; padding-bottom: 76px; }
  .dir-inner { padding-top: 76px; padding-bottom: 76px; }
}

/* Burger threshold */
@media (max-width: 860px) {
  .nav > a:not(.btn), .quicklinks { display: none; }
  .burger { display: grid; }
  .mobile-menu { display: block; }
  .wrap { padding-left: 22px; padding-right: 22px; }
  .step { grid-template-columns: 58px 1fr; gap: 8px 18px; }
  .step p { grid-column: 2; }
  .picker-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(2) .stat-label, .stat:nth-child(3) .stat-label { width: auto; max-width: 46ch; }
  .quote-bar-row { flex-wrap: wrap; gap: 14px; }
  .quote-bar-right { width: 100%; }
  .quote-go { flex: 1; text-align: center; }
}

@media (max-width: 700px) {
  .trip { grid-template-columns: minmax(0, 1fr); }
  .portrait-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .portrait { max-width: 260px; }
  .cal-frame { height: 720px; }
}

/* Phones */
@media (max-width: 600px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .hero-inner { padding-top: 62px; padding-bottom: 58px; }
  .sec, .dir-inner { padding-top: 58px; padding-bottom: 58px; }
  .h1 { font-size: clamp(34px, 11vw, 52px); letter-spacing: -0.025em; }
  .h2 { font-size: clamp(27px, 8.4vw, 38px); }
  .hero-sub { font-size: 18px; }
  .panel { padding: 24px; }
  .card { padding: 26px; }
  .svc { padding: 24px; min-height: 250px; }
  .picker-box { padding: 20px 20px 18px; }
  .stats { gap: 26px; }
  .stat-num { font-size: 34px; }
  .cal-frame { height: 680px; }
  .portrait { max-width: 220px; }
  .portrait-grid { gap: 24px; }
  /* 18.5px keeps "communities — with confidence." on one line down to a 375px
     phone (283px of a 299px measure); at 20px it overflows and breaks. */
  .dir-quote { font-size: 18.5px; padding-left: 20px; }
  .qbr { display: none; }
  .btn, .btn-outline { width: 100%; text-align: center; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-links { flex-direction: column; gap: 8px; }
  .quote-bar-row { padding-top: 14px; padding-bottom: 14px; }
  .quote-bar-left { gap: 13px; }
}

@media print {
  .site-header, .quote-bar, .mobile-menu { display: none !important; }
  .sec-dark, .hero { background: #fff !important; color: #000 !important; }
}