/* ============================================================
   Covers & Co. — Hospitality Accountants
   Design system: deep forest / cream / champagne gold
   ============================================================ */

:root {
  --ink: #121d17;
  --forest: #1c3329;
  --forest-2: #244335;
  --pine: #35614c;
  --sage: #7e9a8b;
  --cream: #faf7f0;
  --cream-2: #f2ecdf;
  --paper: #ffffff;
  --gold: #c39a3b;
  --gold-soft: #e7d3a1;
  --copper: #b56a3c;
  --muted: #5c6a62;
  --line: #e4ddcc;
  --line-dark: rgba(250, 247, 240, 0.14);
  --good: #2e7d52;
  --warn: #c98a1f;
  --bad: #b34a3a;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px -18px rgba(18, 29, 23, 0.25);
  --shadow-soft: 0 10px 30px -14px rgba(18, 29, 23, 0.18);
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --max: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

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

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--copper);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--gold);
}
.on-dark .eyebrow { color: var(--gold-soft); }

.section-title { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 18px; }
.section-lede { font-size: 18px; color: var(--muted); max-width: 640px; }
.on-dark .section-lede { color: rgba(250,247,240,0.72); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 620;
  font-size: 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(195,154,59,0.55); }
.btn-gold:hover { background: #d3ab4e; }
.btn-dark { background: var(--forest); color: var(--cream); }
.btn-dark:hover { background: var(--forest-2); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.on-dark .btn-ghost { border-color: var(--line-dark); color: var(--cream); }
.on-dark .btn-ghost:hover { border-color: var(--cream); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn .arr { transition: transform 0.18s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 240, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: 0 8px 30px -18px rgba(18,29,23,0.3); }
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 24px;
}
/* ---------- Logo: HA monogram ----------
   A sage disc holding the two initials, wordmark set beside it.
   Everything scales from --logo-size, so one variable resizes the lockup.
   Colours are existing palette tokens — no new colours introduced. */
.logo {
  --logo-size: 40px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-size) * 0.3);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.logo-disc {
  flex: none;
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
  background: var(--sage);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(var(--logo-size) * 0.355);
  line-height: 1;
  letter-spacing: 0.015em;
  font-variation-settings: "SOFT" 60;
  /* Optical centring: the cap-height block sits marginally high otherwise. */
  padding-top: calc(var(--logo-size) * 0.02);
}
.logo-words { display: block; }
.logo-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(var(--logo-size) * 0.42);
  line-height: 1.03;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-variation-settings: "SOFT" 60;
}
.logo-tag {
  display: block;
  font-family: var(--font-body);
  font-size: calc(var(--logo-size) * 0.165);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: calc(var(--logo-size) * 0.1);
}

/* Reversed — for dark grounds. Disc becomes an outlined ring. */
.logo--reversed .logo-disc { background: transparent; border: 2px solid var(--cream); color: var(--cream); }
.logo--reversed .logo-name { color: var(--cream); }
.logo--reversed .logo-tag { color: var(--gold-soft); }

/* Solid reversed — sage disc kept, wordmark reversed out. */
.logo--onDark .logo-name { color: var(--cream); }
.logo--onDark .logo-tag { color: var(--gold-soft); }

/* Avatar — disc alone, for favicons, social and tight spaces. */
.logo--avatar .logo-words { display: none; }

/* One-line wordmark, for very wide or very small placements. */
.logo--inline .logo-name br { display: none; }

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a { font-size: 14.5px; font-weight: 540; color: var(--ink); position: relative; padding: 6px 0; white-space: nowrap; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--gold);
  transition: width 0.22s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* "Client login" exists twice — as a nav link (for narrow screens / the mobile
   menu) and as a button in .nav-cta. Show only one at any given width. */
.nav-links li:has([data-auth-link]) { display: none; }
@media (max-width: 1120px) {
  .nav-links li:has([data-auth-link]) { display: list-item; }
}

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.25s; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(195,154,59,0.16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(53,97,76,0.25), transparent 55%),
    var(--forest);
  color: var(--cream);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(250,247,240,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding-top: 92px;
  padding-bottom: 100px;
}
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero p.lede { font-size: 18.5px; color: rgba(250,247,240,0.78); max-width: 540px; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-meta { display: flex; gap: 28px; flex-wrap: wrap; font-size: 13.5px; color: rgba(250,247,240,0.65); }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* Hero floating card mock */
.hero-visual { position: relative; }
.flash-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55);
  transform: rotate(-1.2deg);
}
.flash-card h4 { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 4px; font-weight: 680; }
.flash-card .big { font-family: var(--font-display); font-size: 38px; font-weight: 600; }
.flash-card .big small { font-size: 16px; color: var(--good); font-family: var(--font-body); font-weight: 640; margin-left: 8px; }
.flash-rows { margin-top: 16px; border-top: 1px solid var(--line); }
.flash-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.flash-row b { font-weight: 640; }
.pill { font-size: 11.5px; font-weight: 680; padding: 3px 10px; border-radius: 999px; }
.pill-good { background: rgba(46,125,82,0.12); color: var(--good); }
.pill-warn { background: rgba(201,138,31,0.14); color: var(--warn); }
.pill-bad { background: rgba(179,74,58,0.12); color: var(--bad); }

.float-chip {
  position: absolute;
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
  font-size: 13px;
  animation: floaty 5s ease-in-out infinite;
}
.float-chip b { display: block; font-size: 15px; }
.chip-1 { top: -26px; right: -14px; animation-delay: 0.6s; }
.chip-2 { bottom: -24px; left: -20px; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- Sections ---------- */
section { padding: 96px 0; }
.section-head { margin-bottom: 52px; }
.section-head.center { text-align: center; }
.section-head.center .section-lede { margin: 0 auto; }
.section-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }

.bg-cream2 { background: var(--cream-2); }
.bg-dark { background: var(--forest); color: var(--cream); }
.bg-ink { background: var(--ink); color: var(--cream); }

/* ---------- Stats strip ---------- */
.stats-strip { background: var(--ink); color: var(--cream); padding: 44px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; }
/* The row mixes big figures with short phrases. Giving the value area a shared
   minimum height and bottom-aligning it puts every value on one baseline, so
   the four labels start at the same point instead of stepping down. */
.stat { display: flex; flex-direction: column; }
.stat .num {
  /* flex:1 makes every value box fill the same leftover height (grid stretches
     the tiles equally), so values bottom-align on one line whether they are a
     big figure or a phrase that wraps. */
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  color: var(--gold-soft);
  font-weight: 580;
  line-height: 1.04;
}
/* Statement tiles carry a short phrase rather than a counted figure. */
.stat .num.num-text { font-size: clamp(20px, 2.05vw, 27px); line-height: 1.22; letter-spacing: -0.012em; }
/* Reserve two lines so a label that wraps cannot shift its neighbours. */
.stat .lbl { font-size: 13.5px; line-height: 1.45; min-height: 2.9em; color: rgba(250,247,240,0.62); margin-top: 10px; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--gold-soft); }
.card .icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--cream-2);
  color: var(--forest);
  display: grid; place-items: center;
  margin-bottom: 18px;
  font-size: 20px;
  transition: background 0.22s ease, color 0.22s ease;
}
/* Icons are stroke SVGs drawn in currentColor, so they pick up the card's
   own colour — including the reversed cards on dark sections. */
.card .icon svg { width: 22px; height: 22px; display: block; }
.card:hover .icon { background: var(--forest); color: var(--gold-soft); }
/* Cards on dark grounds set their own icon colours inline; don't override. */
.card .icon[style] { transition: none; }
.card .icon[style]:hover, .card:hover .icon[style] { background: rgba(250,247,240,0.1); }
.card h3 { font-size: 20.5px; margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--muted); }
.card .card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 14px; font-weight: 640; color: var(--forest); }
.card .card-link:hover { color: var(--copper); }
.card ul { margin: 12px 0 0; padding-left: 0; list-style: none; }
.card ul li { font-size: 14px; color: var(--muted); padding: 6px 0 6px 24px; position: relative; }
.card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* ---------- Pain points ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pain-grid.pain-3 { grid-template-columns: repeat(3, 1fr); }
.pain {
  display: flex; gap: 18px;
  background: rgba(250,247,240,0.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pain:hover { background: rgba(250,247,240,0.09); border-color: rgba(231,211,161,0.4); }
.pain .n { font-family: var(--font-display); font-size: 22px; color: var(--gold-soft); min-width: 34px; }
.pain h3 { font-size: 17.5px; margin-bottom: 6px; }
.pain p { font-size: 14px; color: rgba(250,247,240,0.68); }

/* ---------- Process timeline ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: step; }
.timeline::before {
  content: ""; position: absolute; top: 27px; left: 4%; right: 4%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--line));
  z-index: 0;
}
.t-step { position: relative; z-index: 1; text-align: left; }
.t-step .bubble {
  counter-increment: step;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 620;
  color: var(--forest);
  margin-bottom: 16px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.t-step .bubble::after { content: counter(step); }
.t-step:hover .bubble { background: var(--forest); color: var(--gold-soft); transform: scale(1.08); }
.t-step h3 { font-size: 16.5px; margin-bottom: 7px; }
.t-step p { font-size: 13.5px; color: var(--muted); }
.t-step .day { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--copper); margin-bottom: 8px; }

/* ---------- Integrations marquee ---------- */
.marquee { overflow: hidden; position: relative; padding: 8px 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--cream-2), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--cream-2), transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: scroll 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.logo-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 640;
  font-size: 15px;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.logo-chip .ld { width: 9px; height: 9px; border-radius: 3px; background: var(--gold); }

/* ---------- Locations ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.loc-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--forest-2);
  color: var(--cream);
  padding: 34px 30px;
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--line-dark);
  transition: transform 0.22s ease;
}
.loc-card:hover { transform: translateY(-5px); }
.loc-card .flag { font-size: 30px; position: absolute; top: 26px; left: 28px; }
.loc-card .tz { position: absolute; top: 30px; right: 28px; font-size: 12px; letter-spacing: 0.08em; color: rgba(250,247,240,0.55); font-variant-numeric: tabular-nums; }
.loc-card h3 { font-size: 24px; margin-bottom: 8px; }
.loc-card p { font-size: 14px; color: rgba(250,247,240,0.7); }
.loc-card .loc-tag { display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-soft); }
.loc-1 { background: linear-gradient(160deg, #21392e, #16271f); }
.loc-2 { background: linear-gradient(160deg, #3d3422, #241e12); }
.loc-3 { background: linear-gradient(160deg, #2c3a45, #16222b); }

/* ---------- Testimonials ---------- */
.quote-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; }
.quote-card .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; font-size: 15px; }
.quote-card blockquote { font-family: var(--font-display); font-size: 18.5px; line-height: 1.45; margin-bottom: 20px; font-weight: 480; }
.quote-card .who { display: flex; align-items: center; gap: 13px; }
.quote-card .ava { width: 44px; height: 44px; border-radius: 50%; background: var(--forest); color: var(--gold-soft); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.quote-card .who b { display: block; font-size: 14.5px; }
.quote-card .who span { font-size: 13px; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(195,154,59,0.22), transparent 55%),
    var(--ink);
  color: var(--cream);
  border-radius: 26px;
  padding: 64px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(26px, 3.4vw, 40px); max-width: 540px; }
.cta-band p { color: rgba(250,247,240,0.7); margin-top: 10px; max-width: 480px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(250,247,240,0.75); padding: 70px 0 36px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.site-footer h4 { color: var(--cream); font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 18px; font-weight: 680; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 11px; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-bottom { border-top: 1px solid rgba(250,247,240,0.12); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(250,247,240,0.45); }
.footer-brand p { margin-top: 14px; max-width: 300px; font-size: 13.5px; color: rgba(250,247,240,0.55); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 660; margin-bottom: 7px; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(195,154,59,0.15);
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-error { color: var(--bad); font-size: 13.5px; margin-top: 4px; display: none; }
.form-error.show { display: block; }

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  outline: none;
  padding: 0;
  border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--forest);
  border: 3px solid var(--gold);
  cursor: pointer;
  transition: transform 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--forest);
  border: 3px solid var(--gold);
  cursor: pointer;
}

/* ---------- Calculator (GP checker) ---------- */
.calc-layout { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 28px; align-items: start; }
.calc-layout > *, .booking-layout > *, .dash-grid > *, .card-grid > * { min-width: 0; }
.calc-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; }
.calc-panel h3 { font-size: 21px; margin-bottom: 22px; }
.range-field { margin-bottom: 24px; }
.range-field .rf-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.range-field label { font-size: 13.5px; font-weight: 660; }
.range-field output { font-family: var(--font-display); font-size: 19px; font-weight: 620; color: var(--forest); font-variant-numeric: tabular-nums; }

.gauge-wrap { text-align: center; padding: 8px 0 4px; }
.gauge-value { font-family: var(--font-display); font-size: 46px; font-weight: 600; margin-top: -58px; }
.gauge-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 680; margin-top: 2px; }

.verdict {
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 14.5px;
  margin-top: 18px;
  border: 1px solid;
}
.verdict.good { background: rgba(46,125,82,0.08); border-color: rgba(46,125,82,0.3); color: #1d5b3a; }
.verdict.warn { background: rgba(201,138,31,0.09); border-color: rgba(201,138,31,0.35); color: #7d5613; }
.verdict.bad { background: rgba(179,74,58,0.08); border-color: rgba(179,74,58,0.3); color: #82352a; }
.verdict b { display: block; margin-bottom: 4px; font-size: 15px; }

.metric-bars { margin-top: 22px; }
.metric-bar { margin-bottom: 18px; }
.metric-bar .mb-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 640; margin-bottom: 7px; }
.metric-bar .mb-top .val { font-variant-numeric: tabular-nums; }
.metric-bar .track { height: 10px; background: var(--cream-2); border-radius: 999px; position: relative; overflow: visible; }
.metric-bar .fill { height: 100%; border-radius: 999px; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s; }
.metric-bar .bench {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--ink); opacity: 0.55;
}
.metric-bar .bench::after {
  content: attr(data-label);
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.opportunity {
  margin-top: 24px;
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
}
.opportunity .opp-num { font-family: var(--font-display); font-size: 32px; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.opportunity p { font-size: 13.5px; color: rgba(250,247,240,0.75); margin-top: 5px; }

/* ---------- Blog ---------- */
.post-meta {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
}
.post-card h3 { font-size: 22px; line-height: 1.2; }

/* Article body — narrow measure, generous rhythm. */
.article { max-width: 680px; margin: 0 auto; }
.article > p { font-size: 17.5px; line-height: 1.68; margin-bottom: 22px; color: #2e3a33; }
.article > p.standfirst {
  font-size: 20px; line-height: 1.55; color: var(--muted);
  padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line);
}
.article h2 {
  font-size: 27px; margin: 44px 0 16px; letter-spacing: -0.015em;
}
.article h3 { font-size: 20px; margin: 32px 0 12px; }
.article ul, .article ol { margin: 0 0 24px 0; padding-left: 0; list-style: none; }
.article ul li, .article ol li {
  font-size: 17px; line-height: 1.6; color: #2e3a33;
  padding: 7px 0 7px 28px; position: relative;
}
.article ul li::before { content: "—"; position: absolute; left: 0; color: var(--sage); font-weight: 700; }
.article ol { counter-reset: step; }
.article ol li { counter-increment: step; }
.article ol li::before {
  content: counter(step); position: absolute; left: 0; top: 7px;
  font-family: var(--font-display); font-weight: 700; color: var(--copper); font-size: 15px;
}
.article blockquote {
  margin: 32px 0; padding: 22px 26px;
  background: var(--cream-2); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display); font-size: 19px; line-height: 1.45;
}
.article .pull {
  margin: 34px 0; padding: 26px 28px;
  background: var(--forest); color: var(--cream);
  border-radius: var(--radius-sm);
}
.article .pull b { color: var(--gold-soft); }
.article .pull p { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(250,247,240,0.86); }
.article-foot {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center;
}

/* ---------- Stepped form ---------- */
.step-bar { display: flex; gap: 8px; margin-bottom: 28px; }
.step-pip { flex: 1; }
.step-pip .track { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.step-pip .track span { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.35s ease; }
.step-pip.done .track span, .step-pip.current .track span { width: 100%; }
.step-pip.current .track span { background: var(--forest); }
.step-pip .lbl {
  display: block; margin-top: 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.step-pip.current .lbl { color: var(--forest); }
.step-panel[hidden] { display: none; }
.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.step-nav .spacer { flex: 1; }

/* Fields we can guess get a subtle "we estimated this" cue. */
.field.estimated input { border-color: var(--gold-soft); background: rgba(195,154,59,0.05); }
.field .est-note { font-size: 12px; color: var(--copper); margin-top: 6px; font-weight: 600; }

/* ---------- Package picker ---------- */
.pkg-grid { display: grid; gap: 14px; }
.pkg-card {
  position: relative;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.pkg-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.pkg-card.on { border-color: var(--forest); box-shadow: var(--shadow-soft); }
.pkg-card .pkg-top { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.pkg-card h4 { font-family: var(--font-display); font-size: 21px; font-weight: 640; }
.pkg-card .pkg-tag {
  font-size: 10.5px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); border-radius: 999px; padding: 3px 10px;
}
.pkg-card .pkg-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.pkg-card ul { list-style: none; margin: 14px 0 0; }
.pkg-card ul li { font-size: 13.5px; color: var(--muted); padding: 5px 0 5px 24px; position: relative; }
.pkg-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--sage); font-weight: 800; }
.pkg-card .pkg-check {
  position: absolute; top: 20px; right: 22px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); display: grid; place-items: center;
  transition: all 0.18s ease;
}
.pkg-card.on .pkg-check { background: var(--forest); border-color: var(--forest); }
.pkg-card.on .pkg-check::after { content: "✓"; color: var(--cream); font-size: 12px; font-weight: 800; }
.pkg-card.has-tag .pkg-check { top: 54px; }

.disclosure {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 640;
  color: var(--forest); text-decoration: underline; text-underline-offset: 3px;
}
.disclosure:hover { color: var(--copper); }

/* ---------- Quote builder ---------- */
.svc-list { border-top: 1px solid var(--line); margin-top: 6px; }
.svc-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s ease;
}
.svc-item:hover { background: rgba(195, 154, 59, 0.05); }
.svc-item.locked { cursor: not-allowed; opacity: 0.9; }
.svc-check {
  flex: none;
  width: 22px; height: 22px;
  border: 2px solid var(--line);
  border-radius: 7px;
  display: grid; place-items: center;
  margin-top: 2px;
  transition: all 0.15s ease;
  background: var(--paper);
}
.svc-check::after {
  content: "✓";
  font-size: 13px;
  font-weight: 800;
  color: var(--cream);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.15s ease;
}
.svc-item.on .svc-check { background: var(--forest); border-color: var(--forest); }
.svc-item.on .svc-check::after { opacity: 1; transform: scale(1); }
.svc-body { flex: 1; min-width: 0; }
.svc-body b { display: block; font-size: 15px; font-weight: 660; }
/* Direct child only — the tag inside <b> must stay inline. */
.svc-body > span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.svc-price {
  flex: none;
  text-align: right;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  min-width: 92px;
}
.svc-price small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--muted); }
.svc-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 7px;
  vertical-align: 1px;
}

.quote-sticky { position: sticky; top: 94px; }
.quote-total {
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
}
.quote-total .qt-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: rgba(250, 247, 240, 0.6); }
.quote-total .qt-big {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 4px 0 2px;
}
.quote-total .qt-sub { font-size: 13.5px; color: rgba(250, 247, 240, 0.72); }
.quote-lines { margin: 18px 0 0; }
.quote-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.quote-line:last-child { border-bottom: none; }
.quote-line .ql-name { color: var(--muted); }
.quote-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-line.discount b { color: var(--good); }
.quote-empty { font-size: 13.5px; color: var(--muted); padding: 18px 0; text-align: center; }

.draft-banner {
  background: rgba(201, 138, 31, 0.12);
  border: 1px solid rgba(201, 138, 31, 0.4);
  color: #7d5613;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 26px;
}

/* ---------- Booking ---------- */
.booking-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: start; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 24px; }
.day-cell {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 4px;
  text-align: center;
  cursor: pointer;
  background: var(--paper);
  transition: all 0.15s ease;
}
.day-cell:hover { border-color: var(--gold); }
.day-cell.selected { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.day-cell.selected .dc-num { color: var(--gold-soft); }
.day-cell .dc-dow { font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.day-cell.selected .dc-dow { color: rgba(250,247,240,0.6); }
.day-cell .dc-num { font-family: var(--font-display); font-size: 20px; font-weight: 620; }
.day-cell .dc-mon { font-size: 10.5px; color: var(--muted); }
.day-cell.selected .dc-mon { color: rgba(250,247,240,0.6); }
.slot-btn {
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  padding: 11px 6px;
  font-size: 13.5px;
  font-weight: 620;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.slot-btn:hover:not(.taken) { border-color: var(--gold); transform: translateY(-1px); }
.slot-btn.selected { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.slot-btn.taken { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.booking-summary {
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px dashed var(--gold);
}
.booking-summary b { font-family: var(--font-display); font-size: 16.5px; }

/* Confirmation */
.confirm-box { text-align: center; padding: 30px 10px 10px; }
.confirm-box .tick {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(46,125,82,0.12); color: var(--good);
  display: grid; place-items: center;
  font-size: 34px; margin: 0 auto 22px;
}
.confirm-box h3 { font-size: 26px; margin-bottom: 10px; }
.confirm-box p { color: var(--muted); max-width: 400px; margin: 0 auto 24px; }

/* ---------- Auth / gate ---------- */
.auth-card { max-width: 520px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 42px 40px; box-shadow: var(--shadow-soft); }
.auth-card h1 { font-size: 30px; margin-bottom: 8px; }
.auth-card .sub { color: var(--muted); font-size: 14.5px; margin-bottom: 28px; }
.auth-tabs { display: flex; background: var(--cream-2); border-radius: 999px; padding: 5px; margin-bottom: 28px; }
.auth-tabs button {
  flex: 1; border: none; background: transparent; padding: 10px;
  border-radius: 999px; font-weight: 650; font-size: 14px; cursor: pointer;
  font-family: var(--font-body); color: var(--muted);
  transition: all 0.18s ease;
}
.auth-tabs button.active { background: var(--forest); color: var(--cream); }
.auth-benefits { margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
.auth-benefits li { list-style: none; font-size: 13.5px; color: var(--muted); padding: 5px 0 5px 26px; position: relative; }
.auth-benefits li::before { content: "✦"; position: absolute; left: 2px; color: var(--gold); }

/* ---------- Dashboard ---------- */
.dash-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.dash-top h1 { font-size: clamp(28px, 3.6vw, 40px); }
.dash-top .sub { color: var(--muted); margin-top: 6px; font-size: 14.5px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.kpi {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px 22px 18px;
}
.kpi .k-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.kpi .k-val { font-family: var(--font-display); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .k-delta { font-size: 12.5px; font-weight: 680; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.kpi .k-delta.up { color: var(--good); }
.kpi .k-delta.down { color: var(--bad); }
.dash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.panel h3 { font-size: 18px; margin-bottom: 4px; }
.panel .p-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); padding: 8px 10px; border-bottom: 1.5px solid var(--line); }
.data-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; }
.data-table th.num { text-align: right; }

.deadline { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.deadline:last-child { border-bottom: none; }
.deadline .dl-date {
  min-width: 52px; text-align: center; background: var(--cream-2); border-radius: 10px; padding: 7px 4px;
}
.deadline .dl-date b { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.1; }
.deadline .dl-date span { font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.deadline .dl-info b { font-size: 14px; display: block; }
.deadline .dl-info span { font-size: 12.5px; color: var(--muted); }
.deadline .dl-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--copper); white-space: nowrap; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { background: var(--forest); color: var(--cream); padding: 76px 0 64px; position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(195,154,59,0.18), transparent 65%);
}
.page-hero h1 { font-size: clamp(34px, 4.6vw, 54px); max-width: 760px; position: relative; z-index: 1; }
.page-hero p { color: rgba(250,247,240,0.75); margin-top: 16px; max-width: 600px; font-size: 17px; position: relative; z-index: 1; }

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  font-family: var(--font-display); font-size: 18.5px; font-weight: 560;
  padding: 22px 40px 22px 0; cursor: pointer; position: relative; color: var(--ink);
}
.faq-q::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 26px; color: var(--gold); font-weight: 400; transition: transform 0.25s ease;
}
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a p { padding: 0 0 22px; color: var(--muted); font-size: 15px; max-width: 720px; }

/* ---------- Reveal animations ----------
   Hidden state only applies under html.js (set by main.js), so content
   is always visible if JavaScript is disabled or fails to load. */
.reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--cream);
  padding: 14px 26px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); z-index: 300; opacity: 0;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .nav-cta .btn-ghost { display: none; }
  .nav-links { gap: 20px; }
  .nav-bar { gap: 16px; }
}

/* Between the full nav and the hamburger there isn't room for the wordmark
   alongside six nav links. The avatar variant is the sanctioned mark for
   exactly this, so the header falls back to the disc alone. */
@media (max-width: 1020px) and (min-width: 721px) {
  .site-header .logo .logo-words { display: none; }
}

@media (max-width: 1020px) {
  /* Stacked layout — the quote panel is taller than the viewport, so sticky
     stops being useful and just complicates scrolling. */
  .quote-sticky { position: static; }
  .logo { --logo-size: 36px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13.5px; }
  .nav-cta .btn-gold { padding: 10px 15px; font-size: 13px; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 72px; }
  .hero-visual { max-width: 480px; }
  .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat .num { min-height: 46px; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .timeline::before { display: none; }
  .calc-layout, .booking-layout { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
  .pain-grid, .pain-grid.pain-3 { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  section { padding: 64px 0; }
  .wrap { padding: 0 20px; }
  .nav-bar { gap: 8px; }
  .logo { --logo-size: 32px; }
  .nav-cta { gap: 2px; }
  .nav-cta .btn-gold { padding: 8px 11px; font-size: 12.5px; }
  .nav-toggle { padding: 6px 2px 6px 6px; }
  .nav-toggle span { width: 20px; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 74px; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 20px 28px 26px; gap: 18px;
    box-shadow: var(--shadow-soft);
  }
  .card-grid, .card-grid.cols-4, .card-grid.cols-2 { grid-template-columns: 1fr; }
  .btn { white-space: normal; text-align: center; }
  .day-strip { grid-template-columns: repeat(4, 1fr); }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .cta-band { padding: 44px 30px; }
  .float-chip { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 32px 24px; }
}