/* =========================================================
   Offhand Studio, shared design system.
   No Tailwind CDN: only 13 utility classes were ever needed
   and they're written out at the bottom of this file.
   ========================================================= */

:root {
  --bg:        #e5ded0;   /* base paper, clay      */
  --bg-deep:   #d7cebb;   /* darker end of a fade  */
  --bg-lift:   #f1ece1;   /* near-white end        */
  --bg-blur:   229,222,208; /* nav backdrop, matches the hero sheet */
  --surface:   #ffffff;
  --text:      #16241e;
  --muted:     #5c6357;
  --border:    rgba(15,42,32,0.18);
  --dark:      #0f2a20;
  --dark-2:    #1a3d2e;
  --announce-h: 36px;
  --nav-h:      64px;
  --offset:    100px; /* announce + nav */

  /* Accent scale. Warm steps carry the cost of the problem,
     green carries what you get. Never decorative, always semantic. */
  /* Darkened from the obvious hues so each one clears WCAG contrast
     on the paper background. The vivid version of this scale lives in
     the *d variants below, where the forest ground can carry it. */
  --c-1:  #b23c0c;   /* burnt red    */
  --c-2:  #b5460b;   /* orange       */
  --c-3:  #8a5a07;   /* amber        */
  --c-4:  #7d5d0f;   /* dark gold    */
  --c-ok: #157347;   /* jewel green, same family as the forest dark */

  /* Brighter variants so the same scale reads on deep forest */
  --c-1d:  #fb7185;
  --c-2d:  #fb923c;
  --c-3d:  #fbbf24;
  --c-4d:  #fde047;
  --c-okd: #6ee7a8;
}

/* Accent utilities. Swap to the bright scale inside dark sections. */
.c-1  { color: var(--c-1); }
.c-2  { color: var(--c-2); }
.c-3  { color: var(--c-3); }
.c-4  { color: var(--c-4); }
.c-ok { color: var(--c-ok); }

.problem-section .c-1,  .footer-section .c-1  { color: var(--c-1d); }
.problem-section .c-2,  .footer-section .c-2  { color: var(--c-2d); }
.problem-section .c-3,  .footer-section .c-3  { color: var(--c-3d); }
.problem-section .c-4,  .footer-section .c-4  { color: var(--c-4d); }
.problem-section .c-ok, .footer-section .c-ok { color: var(--c-okd); }

html { scroll-behavior: smooth; overflow-x: hidden; }
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.6;
}

.font-serif { font-family: 'DM Serif Display', Georgia, serif; }

/* ── Announcement bar ── */
.announce-bar {
  background: var(--dark);
  color: #fff;
  text-align: center;
  padding: 0 1.5rem;
  height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 51;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.announce-pill {
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: var(--announce-h);
  left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(var(--bg-blur),0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-link {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
  cursor: pointer;
}
.nav-link:hover { color: var(--text); }

/* Logo lockup */
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; letter-spacing: -0.02em;
}
.brand-name { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }

/* Hamburger, hidden on desktop */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu {
  display: none;
  position: fixed;
  top: calc(var(--announce-h) + var(--nav-h));
  left: 0; right: 0;
  background: rgba(var(--bg-blur),0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 49;
  flex-direction: column;
  padding: 1.5rem 2rem 2rem;
  gap: 0.25rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .mobile-cta {
  margin-top: 1rem;
  background: var(--dark);
  color: #fff;
  text-align: center;
  padding: 0.9rem;
  border-radius: 2px;
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: none;
}

/* ── Buttons ── */
.btn-primary {
  background: var(--dark);
  color: #fff;
  padding: 0.65rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.18s, transform 0.12s;
  border-radius: 2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--dark-2); transform: translateY(-1px); }

.btn-ghost {
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.65rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.18s, background 0.18s;
  border-radius: 2px;
  text-decoration: none;
}
.btn-ghost:hover { border-color: rgba(15,42,32,0.35); background: rgba(15,42,32,0.05); }

/* ── Section padding ── */
.section-pad    { padding: 4.75rem 2.5rem; }
.section-pad-sm { padding: 3rem 2.5rem; }
.wrap { max-width: 1400px; margin: 0 auto; width: 100%; }
.wrap-narrow { max-width: 1100px; margin: 0 auto; width: 100%; }

/* ── Cards ── */
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 1.45rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  text-decoration: none;
  color: inherit;
}
.service-card + .service-card { margin-top: 0.75rem; }
.service-card:hover { border-color: var(--dark); box-shadow: 0 4px 24px rgba(0,0,0,0.07); }
.highlight-card { background: var(--dark); color: #fff; border-color: var(--dark); }
.highlight-card:hover { border-color: var(--dark); }

/* ── Stats bar ── */
.stats-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-bar-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 2rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}

/* ── Client logo strip ── */
.logo-strip { border-top: 1px solid var(--border); background: var(--surface); }
.logo-strip-inner { max-width: 1400px; margin: 0 auto; padding: 2.25rem 2.5rem; }
.logo-strip-label { text-align: center; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-track { display: flex; width: max-content; animation: logo-scroll 30s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-group { display: flex; align-items: center; flex: 0 0 auto; gap: 3.5rem; padding-right: 3.5rem; }
.logo-slot {
  height: 48px; width: 132px;
  border: 1px dashed rgba(15,42,32,0.28);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); opacity: 0.85;
}
.logo-slot.logo-tall { height: 76px; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }

/* ── Ticker ── */
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker { background: var(--dark); color: #fff; overflow: hidden; padding: 0.9rem 0; }
.ticker-track { display: flex; animation: ticker 30s linear infinite; white-space: nowrap; }
.ticker-track span { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding-right: 2rem; opacity: 0.75; }

/* ── Testimonial slider (continuous marquee) ── */
.testi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1.3rem; }
.testi-slider:hover @keyframes testi-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.testi-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #e2e0db; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}

/* ── Tag ── */
.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dark);
  border: 1px solid rgba(15,42,32,0.22);
  padding: 0.25rem 0.65rem;
  border-radius: 2px;
  background: rgba(15,42,32,0.05);
}
.problem-section .tag, .footer-section .tag { color: var(--acc-d); border-color: var(--acc-d); background: transparent; }

/* ── Number badges ── */
.num-badge {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--acc);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  color: var(--acc);
  flex-shrink: 0;
}
.problem-section .num-badge { color: var(--acc-d); border-color: var(--acc-d); }

.problem-section { background: var(--dark); color: #fff; }
.footer-section  { background: var(--dark); color: #fff; }

/* ── Hero: copy left, data stacked vertically on the right ── */
.hero-section { padding: 168px 2.5rem 2.75rem; min-height: 84vh; display: flex; align-items: stretch; }
.hero-inner { width: 100%; display: flex; }
.hero-inner > .grid { flex: 1; }

/* Copy stays vertically centred against the taller rail */
.hero-copy { max-width: 620px; display: flex; flex-direction: column; justify-content: center; }

/* The data column runs the full height, rows sharing it evenly */
.hero-data { display: flex; flex-direction: column; }
.hero-data .stat-rail { flex: 1; }
.hero-data .stat-cell { flex: 1; align-items: center; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.hero-btns a { font-size: 0.9rem; padding: 0.8rem 1.75rem; }

.stars { color: #f59e0b; font-size: 12px; letter-spacing: 1px; }

.rail-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.15rem;
}

/* The four figures, stacked. Number left, claim right, hairline between. */
.stat-rail {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.stat-cell {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--border);
}
.stats-num { font-size: 2.8rem; font-weight: 800; line-height: 1; }
.stat-cell .stats-num { font-size: 2.2rem; min-width: 5.75rem; flex-shrink: 0; }
.stat-cell p:last-child {
  font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-top: 0;
}

.hero-footnote {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: 1.15rem;
  font-size: 0.74rem; color: var(--muted); line-height: 1.6;
}
.hero-footnote::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc); flex-shrink: 0; margin-top: 0.4rem;
}
.hero-footnote strong { color: var(--text); font-weight: 600; }

/* =========================================================
   Section backgrounds. Each section gets a different one so
   nothing reads as a blank canvas twice. All deliberately
   near-invisible: felt, not seen.
   ========================================================= */

/* Tonal base layers, applied to the section itself */
.bg-fade-down { background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-lift) 100%); }
.bg-fade-up   { background: linear-gradient(180deg, var(--bg-lift) 0%, var(--bg-deep) 100%); }
.bg-spotlight {
  background-color: var(--bg-deep);
  background-image: radial-gradient(ellipse 1100px 680px at 50% 45%,
                    #ffffff 0%, rgba(255,255,255,0) 72%);
}

/* -------- Focal pattern layer --------
   Every pattern below is masked so it's densest behind the content and
   dissolves before it reaches the edges. That's what centres the eye:
   the section reads as lit in the middle rather than tiled edge to edge. */
.fx { position: relative; }
.fx > * { position: relative; z-index: 1; }
.fx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Concentric rings radiating from dead centre. Suits symmetric layouts. */
.fx-rings::before {
  background-image: repeating-radial-gradient(circle at 50% 50%,
                    rgba(15,42,32,0.085) 0 1px, transparent 1px 76px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 8%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 8%, transparent 70%);
}

/* Dot field, densest behind the content */
.fx-dots::before {
  background-image: radial-gradient(rgba(15,42,32,0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 66% at 50% 50%, #000 12%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 66% at 50% 50%, #000 12%, transparent 72%);
}

/* Diagonal hairlines, faded to the edges */
.fx-diag::before {
  background-image: repeating-linear-gradient(45deg,
                    rgba(15,42,32,0.07) 0 1px, transparent 1px 15px);
  -webkit-mask-image: radial-gradient(ellipse 66% 68% at 50% 50%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 66% 68% at 50% 50%, #000 10%, transparent 72%);
}

/* A lit column down the middle. Good behind narrow content. */
.fx-beam::before {
  background: linear-gradient(90deg,
              transparent 0%, rgba(255,255,255,0.95) 26%,
              rgba(255,255,255,0.95) 74%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* A large soft disc sitting behind the content */
.fx-arc::before {
  background: radial-gradient(circle 640px at 50% 42%,
              #ffffff 0%, rgba(255,255,255,0.6) 42%, rgba(255,255,255,0) 72%);
}

/* -------- Dark section variants -------- */

/* Rings in white, over the existing glow */
.fx-rings-d::before {
  background-image: repeating-radial-gradient(circle at 50% 45%,
                    rgba(255,255,255,0.055) 0 1px, transparent 1px 82px);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 6%, transparent 68%);
          mask-image: radial-gradient(circle at 50% 45%, #000 6%, transparent 68%);
}

/* Glow off the top right */
.glow-tr { background-image: radial-gradient(ellipse 900px 640px at 82% -8%,
           rgba(255,255,255,0.13), transparent 62%); }

/* Glow rising from the bottom centre */
.glow-b  { background-image: radial-gradient(ellipse 1050px 560px at 50% 108%,
           rgba(255,255,255,0.14), transparent 66%); }

/* The hero keeps its own grid, masked the same way */
.hero-grid::before {
  background-image:
    linear-gradient(to right, rgba(15,42,32,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,42,32,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 38% 45%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 70% at 38% 45%, #000 20%, transparent 78%);
}
/* ── Sourced fact rows (problem section) ──
   Deliberately not proportional bars: the figures are in different units
   (share of businesses, share of GDP, dollars) so bar length would imply
   a comparability that doesn't exist. */
.fact-row {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.fact-row:first-child { padding-top: 0; }
.fact-row:last-child { border-bottom: none; }
.fact-row .f-num {
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  min-width: 6.5rem; flex-shrink: 0; color: #fff;
}
.fact-row .f-num span { font-size: 1rem; }
.fact-row .f-body p { font-size: 0.85rem; color: rgba(255,255,255,0.75); line-height: 1.6; }
.fact-row .f-src {
  display: block; margin-top: 0.3rem;
  font-size: 0.68rem; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
}

/* ── Numbered row: 3 steps laid out horizontally ── */
.num-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.9rem; }
.num-row > div { display: flex; gap: 1rem; align-items: flex-start; }

/* ── Same steps stacked vertically, so they can sit beside a heading
      block instead of below it. Keeps the section short. ── */
.step-col { display: flex; flex-direction: column; gap: 1.15rem; }
.step-col > div { display: flex; gap: 1rem; align-items: flex-start; }

/* ── Before → after comparison band (pricing) ── */
.compare-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.1rem 0;
  display: flex; align-items: center; justify-content: center;
  gap: 3.5rem; flex-wrap: wrap;
}
.compare-side { text-align: center; }
.compare-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); margin-bottom: 0.6rem;
}
.compare-value { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1; }
.compare-value span { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.compare-arrow { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 1.1rem; }
.compare-rule { width: 44px; height: 1px; background: var(--border); }

/* ── Vertical stat stack (proof block) ── */
.stat-stack { display: flex; flex-direction: column; }
.stat-stack > div {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--border);
}
.stat-stack > div:first-child { padding-top: 0; }
.stat-stack > div:last-child { border-bottom: none; }
.stat-stack .n { font-size: 2.1rem; font-weight: 800; line-height: 1; min-width: 5rem; }
.stat-stack .n span { font-size: 1.1rem; }
.stat-stack p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

/* ── Static testimonial grid (replaces the second marquee) ── */
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

/* ── Item cards ── */
.item-card { display: flex; flex-direction: column; gap: 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1.45rem; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.item-card:hover { border-color: var(--dark); box-shadow: 0 6px 28px rgba(0,0,0,0.08); transform: translateY(-2px); }
.item-stat { font-size: 1.35rem; font-weight: 800; color: var(--text); line-height: 1; }
.item-stat-l { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.4; }

/* ── Contact form ── */
.form-field {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field:focus { border-color: rgba(15,42,32,0.4); box-shadow: 0 0 0 3px rgba(15,42,32,0.07); }
.form-field::placeholder { color: #bbb; }
.form-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text); }
.contact-left { position: sticky; top: 140px; }

/* ── FAQ accordion ── */
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.faq-item + .faq-item { margin-top: 0.5rem; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; font-size: 0.95rem; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; user-select: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(15,42,32,0.03); }
.faq-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(15,42,32,0.24); display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s, border-color 0.2s; }
.faq-icon svg { transition: transform 0.2s; }
details[open] .faq-icon { background: var(--dark); border-color: var(--dark); }
details[open] .faq-icon svg { stroke: #fff; transform: rotate(45deg); }
.faq-body { padding: 0 1.5rem 1.1rem; font-size: 0.88rem; color: var(--muted); line-height: 1.8; }

/* ── Nav dropdown ── */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(var(--bg-blur),0.97); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); width: max-content; padding: 12px 0 0.35rem; z-index: 100; }
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem; font-size: 0.82rem; color: var(--muted); text-decoration: none; white-space: nowrap; font-weight: 500; transition: color 0.15s, background 0.15s; }
.nav-dropdown-item:hover { color: var(--text); background: rgba(15,42,32,0.04); }
.nav-dropdown-item.active { color: var(--text); font-weight: 600; }

/* ── Footer ── */
.footer-section { padding: 4.75rem 2.5rem 0; }
.footer-divider-line { height: 48px; width: 1px; background: rgba(255,255,255,0.25); margin: 0 auto 2rem; }
.footer-heading { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.footer-email { font-size: 0.9rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin: 2.25rem 0; }
.footer-nav a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.82rem; }
.footer-nav a:hover { color: #fff; }
.footer-nav span { color: rgba(255,255,255,0.3); font-size: 0.7rem; }
.footer-bar { border-top: 1px solid rgba(255,255,255,0.15); padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-bar p { font-size: 0.75rem; color: rgba(255,255,255,0.5); }
.footer-links { display: flex; gap: 1.25rem; }
.footer-links a { color: rgba(255,255,255,0.6); }

/* ── Placeholder helpers (floor-plan only, delete later) ── */
.ph-img {
  border: 1px dashed rgba(15,42,32,0.32);
  background: repeating-linear-gradient(45deg, rgba(15,42,32,0.03) 0 8px, transparent 8px 16px);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
.problem-section .ph-img, .footer-section .ph-img { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.6); }

/* =========================================================
   Utility classes (the 13 Tailwind classes the reference
   site used, written out so no CDN is needed)
   ========================================================= */
.grid          { display: grid; }
.grid-cols-1   { grid-template-columns: repeat(1, minmax(0,1fr)); }
.gap-4         { gap: 1rem; }
.gap-5         { gap: 1.25rem; }
.gap-6         { gap: 1.5rem; }
.gap-16        { gap: 2.75rem; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* =========================================================
   MOBILE (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --announce-h: 72px;
    --nav-h:      56px;
    --offset:    118px;
  }
  .announce-bar { padding: 10px 1.25rem 10px !important; }
  .announce-pill { display: none !important; }

  .nav-inner { padding: 0 1.25rem; }
  .nav-links  { display: none; }
  .hamburger  { display: flex; }

  .section-pad    { padding: 3.25rem 1.25rem !important; }
  .section-pad-sm { padding: 2.25rem 1.25rem !important; }

  .hero-section { padding: 150px 1.25rem 3rem !important; min-height: auto !important; }
  .hero-btns    { flex-direction: column !important; }
  .hero-btns a  { width: 100%; justify-content: center; }

  .stat-cell { padding: 0.8rem 0; gap: 0.9rem; }
  .stat-cell .stats-num { font-size: 1.8rem; min-width: 4.6rem; }

  .stats-bar-inner { flex-direction: column !important; align-items: flex-start !important; gap: 1.25rem !important; padding: 1.5rem 1.25rem !important; }

  .service-card { padding: 1.25rem !important; }
  .problem-heading br { display: none; }
  .contact-left { position: static !important; }

  .footer-heading { font-size: clamp(2rem, 8vw, 3.5rem) !important; }
  .footer-section { padding: 4rem 1.25rem 0 !important; }
  .footer-divider-line { height: 32px !important; margin-bottom: 1.5rem !important; }
  .footer-bar { flex-direction: column !important; align-items: center !important; gap: 1.25rem !important; text-align: center; }
  .footer-links { flex-direction: column !important; gap: 1rem !important; align-items: center !important; }
  .footer-email { font-size: 0.8rem !important; word-break: break-all; }

  .faq-item summary { padding: 1rem 1.25rem; font-size: 0.88rem; }
  .faq-body { padding: 0 1.25rem 1rem; }

  .form-grid { grid-template-columns: 1fr !important; }

  .num-row     { grid-template-columns: 1fr; gap: 1.5rem; }
  .fact-row    { flex-direction: column; gap: 0.4rem; }
  .fact-row .f-num { font-size: 1.6rem; min-width: 0; }
  .compare-band { gap: 1.75rem; padding: 2rem 0; }
  .compare-arrow { transform: rotate(90deg); }
  .testi-grid  { grid-template-columns: 1fr; }
  .stat-stack .n { font-size: 1.75rem; min-width: 4.25rem; }

  .logo-group { gap: 2.5rem; padding-right: 2.5rem; }
  .logo-slot { height: 42px; width: 110px; }
  .logo-slot.logo-tall { height: 66px; }

  }

@media (prefers-reduced-motion: reduce) {
  .logo-track, .ticker-track { animation: none; }
  .logo-marquee { overflow-x: auto; }
}

/* =========================================================
   Paper set. Four related tones used across the page so the
   scroll moves through a tonal sequence instead of sitting on
   one flat ground. Each carries its own muted text and border
   strength, because a darker sheet needs darker secondary text.
   Applied per section via .paper-* below.
   ========================================================= */

.paper-clay, .paper-sage, .paper-olive, .paper-moss { background-color: var(--bg); }

/* Clay. Warm putty. Opens and closes the page. */
.paper-clay {
  --bg: #e5ded0;  --bg-deep: #d7cebb;  --bg-lift: #f1ece1;
  --muted: #5c6357;  --border: rgba(15,42,32,0.18);
}

/* Sage. Clearly green, same family as the forest dark. */
.paper-sage {
  --bg: #d9e0d3;  --bg-deep: #c8d3c0;  --bg-lift: #e9eee4;
  --muted: #5c6357;  --border: rgba(15,42,32,0.18);
}

/* Olive. Yellow-green, the most distinctive of the four. */
.paper-olive {
  --bg: #ddd9c2;  --bg-deep: #cec8aa;  --bg-lift: #ebe8d8;
  --muted: #565d51;  --border: rgba(15,42,32,0.19);
}

/* Moss. Deepest sheet. Held back for the section that matters most. */
.paper-moss {
  --bg: #c9d5c1;  --bg-deep: #b6c6ac;  --bg-lift: #dde5d7;
  --muted: #4e5548;  --border: rgba(15,42,32,0.22);
  --c-1: #9c3409;  --c-2: #9e3d09;  --c-3: #784e06;  --c-4: #6c500d;  --c-ok: #12633d;
}

/* =========================================================
   Page accents. Separate system to the paper and the forest.
   Cool hues only, so they never collide with the warm scale
   (which means cost) or the green (which means terms).
   Set with a .page-* class on <body>.
   ========================================================= */

:root {
  --acc:    #1d4a5c;  --acc-d:    #7fc4dd;   /* ink  */
  --acc-2:  #4d3a63;  --acc-2d:   #b9a3e0;   /* dusk */
}

.page-xero      { --acc: #14526e; --acc-d: #6cc4ec; --acc-2: #14526e; --acc-2d: #6cc4ec; }
.page-myob      { --acc: #61345c; --acc-d: #dfa0d6; --acc-2: #61345c; --acc-2d: #dfa0d6; }
.page-microsoft { --acc: #3a3f7a; --acc-d: #a3aaf0; --acc-2: #3a3f7a; --acc-2d: #a3aaf0; }
.page-ghl       { --acc: #0f5a52; --acc-d: #5fd3c2; --acc-2: #0f5a52; --acc-2d: #5fd3c2; }
.page-acquisition { --acc: #6b2f3c; --acc-d: #f0a0b0; --acc-2: #6b2f3c; --acc-2d: #f0a0b0; }

/* Second accent, used on a couple of sections so the homepage
   carries two rather than one. */
.tag-alt   { color: var(--acc-2) !important; border-color: var(--acc-2) !important; }
.problem-section .tag-alt, .footer-section .tag-alt {
  color: var(--acc-2d) !important; border-color: var(--acc-2d) !important;
}

/* =========================================================
   Motion. Deliberately small: a short fade and a 14px rise,
   nothing slides in from off-screen and nothing bounces.
   Everything is progressive, so the page is fully readable
   with JavaScript off and for anyone on reduced motion.
   ========================================================= */

:root { --ease: cubic-bezier(.22,.61,.36,1); }

/* Only hide things once JS has confirmed it can reveal them again */
html.js [data-rv] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
html.js [data-rv].rv-in { opacity: 1; transform: none; }

/* Staggered children, for the repeating lists */
html.js [data-rvg] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
html.js [data-rvg].rv-in > * { opacity: 1; transform: none; }
html.js [data-rvg].rv-in > *:nth-child(1) { transition-delay: 0ms;   }
html.js [data-rvg].rv-in > *:nth-child(2) { transition-delay: 70ms;  }
html.js [data-rvg].rv-in > *:nth-child(3) { transition-delay: 140ms; }
html.js [data-rvg].rv-in > *:nth-child(4) { transition-delay: 210ms; }
html.js [data-rvg].rv-in > *:nth-child(5) { transition-delay: 280ms; }
html.js [data-rvg].rv-in > *:nth-child(6) { transition-delay: 350ms; }
html.js [data-rvg].rv-in > *:nth-child(7) { transition-delay: 420ms; }
html.js [data-rvg].rv-in > *:nth-child(8) { transition-delay: 490ms; }

/* Nav lifts off the page once you have scrolled past the hero copy */
.nav { transition: box-shadow .25s var(--ease), background .25s var(--ease); }
.nav.scrolled { box-shadow: 0 1px 20px rgba(15,42,32,0.10); }

/* Card hovers, matched to the ones the service cards already had */
.testi-card, .item-card { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.testi-card:hover { border-color: rgba(15,42,32,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

/* Underline that draws in, on the dark section text link */
.problem-section a[style*="border-bottom"] { transition: border-color .2s var(--ease); }

/* Everything off for reduced motion, and nothing left hidden */
@media (prefers-reduced-motion: reduce) {
  html.js [data-rv], html.js [data-rvg] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .nav { transition: none; }
}