/* ===== Fisco Tax Solutions — brand styles =====
   Green  #2A8048 | Gold #E09A17 | Cream #F5F1E8
   Type: Playfair Display (headings) + Jost (body)   */

:root {
  --green: #2A8048;
  --green-dark: #1F6236;
  --green-deep: #17492A;
  --gold: #E09A17;
  --gold-dark: #C4860F;
  /* Accessible companions to the brand gold. The fill is the brand and does
     not change; these are what goes ON it and what small gold TEXT uses.
     --on-gold clears 4.5:1 on the gold fill AND on the darker hover fill,
     which is the binding case: hovering darkens the background, so a text
     colour that only passes on #E09A17 fails the moment the cursor lands.
     --green-deep was the obvious pick and is not dark enough: 4.35:1 flat,
     3.34:1 on hover. */
  --on-gold: #0D2E1B;   /* 6.18:1 on --gold, 4.75:1 on --gold-dark */
  --gold-ink: #7A5200;  /* 6.14:1 on cream, 6.92:1 on white */
  --cream: #F5F1E8;
  --paper: #FDFCF8;
  --ink: #2B3A31;
  --muted: #5C6B61;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Jost', 'Segoe UI', sans-serif;
}

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

/* Native smooth scrolling — replaces the GSAP ScrollToPlugin dependency.
   scroll-padding-top keeps anchor targets clear of the fixed header. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  /* Safety net: a long email address, URL or unspaced string can otherwise
     push a phone-width page sideways. Nothing on the site does this today —
     this is here so future copy can't reintroduce it. */
  overflow-wrap: break-word;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; }

h1, h2, h3 { font-family: var(--serif); color: var(--green-deep); line-height: 1.15; }

/* --green on cream is 4.35:1, just under AA. --green-dark is 6.52:1 and
   reads as the same colour at body size. */
a { color: var(--green-dark); }

/* ===== Scroll reveals =====
   Content is ALWAYS visible by default. script.js adds .reveal-init only to
   elements that are below the fold, then .reveal-in when they scroll into view.
   If the script never runs, nothing is ever hidden. */
[data-reveal].reveal-init {
  opacity: 0;
  transform: translateY(18px);
}
[data-reveal].reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease-out, transform .5s ease-out;
}

/* ===== Entrance accents (CSS only — no library dependency) =====
   Deliberately TRANSFORM-ONLY: these never touch opacity and never use a
   backwards fill, so hero copy is readable at full opacity from the first
   paint. If animations never run — throttled tab, reduced motion, old device —
   the content simply sits at its natural position. It cannot get stranded. */
@keyframes fisco-rise {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
.hero h1,
.hero [data-hero] {
  animation: fisco-rise .55s ease-out;
}
.hero h1            { animation-delay: .04s; }
.hero .hero-lead    { animation-delay: .10s; }
.hero .hero-actions { animation-delay: .16s; }
.hero .hero-badges  { animation-delay: .22s; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23,73,42,.16); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-dark); }
.btn-outline { border: 2px solid var(--green); color: var(--green-dark); }
.btn-outline:hover { background: var(--green); color: #fff; }
.btn-outline-light { border: 2px solid rgba(255,255,255,.7); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253,252,248,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(42,128,72,.14);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 8px 30px rgba(23,73,42,.10); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: padding .3s;
}
.site-header.scrolled .header-inner { padding-top: 8px; padding-bottom: 8px; }

/* flex: none is load-bearing. The nav is ~912px and the brand needs ~180px;
   before 2026-08-15 the header container gave 1072px, so the brand — the only
   shrinkable item — silently gave up ~20px. "TAX SOLUTIONS" wrapped onto two
   lines and the gold rule stretched to the squeezed width, rendering 23% wider
   than the word it sits under. The nav "fit the container"; the logo paid for
   it. Measure brand-against-nav, not nav-against-container. */
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand-mark {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green);
  border: 1.5px solid var(--gold);
  box-shadow: inset 0 0 0 3px var(--green), inset 0 0 0 4px rgba(245,241,232,.55);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.brand-f {
  font-family: var(--serif); font-weight: 600;
  font-size: 28px; color: var(--cream); line-height: 1; margin-top: -2px;
}
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--serif); font-weight: 600;
  /* 28px puts FISCO at 89.4px against the sub-line's 94.7px, so the gold rule
     — which spans the text column — reads as belonging to the word above it.
     At 24px the word was 76.6px under a 113.8px rule. */
  font-size: 28px; letter-spacing: .04em; color: var(--green); line-height: 1.1;
}
.brand-rule { height: 1.5px; background: var(--gold); margin: 3px 0; }
.brand-sub {
  /* nowrap is the guard: this line wrapping is what broke the lockup. .12em
     tracking keeps it near FISCO's width instead of 37px past it. */
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--green); font-weight: 500;
}

.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a {
  text-decoration: none; color: var(--ink);
  font-weight: 500; font-size: 15px;
  white-space: nowrap;
  position: relative;
}
.site-nav a:not(.nav-cta):not(.nav-phone)::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .25s ease;
}
.site-nav a:not(.nav-cta):not(.nav-phone):hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav a:hover { color: var(--green); }

/* Gold booking pill — the primary nav action. */
.site-nav .nav-cta { color: var(--on-gold); padding: 10px 20px; font-weight: 600; }
.site-nav .nav-cta:hover { color: var(--on-gold); }

/* Phone stays available but visually secondary, so it doesn't compete
   with the booking CTA for attention. */
.site-nav .nav-phone {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid rgba(42,128,72,.35);
  color: var(--green-dark); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.site-nav .nav-phone svg { width: 15px; height: 15px; flex: none; }
.site-nav .nav-phone:hover { border-color: var(--green); background: rgba(42,128,72,.07); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 24px; height: 2.5px;
  background: var(--green); margin: 5px 0; border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(224,154,23,.10), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  padding: 56px 0 72px;
}
/* Drifting brand-tone orbs — replaces the old Three.js/WebGL hero canvas.
   Same effect, ~0 KB instead of ~600 KB. */
.hero-orbs {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(42px);
  will-change: transform;
}
.hero-orbs span:nth-child(1) {
  width: 340px; height: 340px; top: -6%; left: 4%;
  background: rgba(42,128,72,.20);
  animation: orb-a 19s ease-in-out infinite;
}
.hero-orbs span:nth-child(2) {
  width: 260px; height: 260px; top: 42%; left: 22%;
  background: rgba(42,128,72,.15);
  animation: orb-b 23s ease-in-out infinite;
}
.hero-orbs span:nth-child(3) {
  width: 300px; height: 300px; top: 8%; right: 12%;
  background: rgba(143,191,162,.22);
  animation: orb-a 27s ease-in-out infinite reverse;
}
.hero-orbs span:nth-child(4) {
  width: 200px; height: 200px; bottom: -4%; right: 28%;
  background: rgba(224,154,23,.14);
  animation: orb-b 21s ease-in-out infinite reverse;
}
.hero-orbs span:nth-child(5) {
  width: 240px; height: 240px; bottom: 10%; left: 40%;
  background: rgba(42,128,72,.12);
  animation: orb-a 25s ease-in-out infinite;
  animation-delay: -8s;
}
.hero-orbs span:nth-child(6) {
  width: 180px; height: 180px; top: 26%; right: 38%;
  background: rgba(143,191,162,.18);
  animation: orb-b 17s ease-in-out infinite;
  animation-delay: -5s;
}
@keyframes orb-a {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(26px, -18px); }
  66%      { transform: translate(-18px, 14px); }
}
@keyframes orb-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-22px, 20px); }
}
/* Single centred column. The hero used to be a 1.2fr/.8fr split with a
   portrait card on the right; that card duplicated /about and squeezed the
   headline into two-thirds of the width. The copy now runs across the whole
   header, capped so lines stay readable on wide screens. */
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-copy { max-width: 760px; margin: 0 auto; }
.eyebrow {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600; margin-bottom: 16px;
}
.eyebrow.center { text-align: center; }

.hero h1 { font-size: clamp(38px, 5vw, 60px); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--green); }
.hero h1 .w { display: inline-block; }
.hero-lead { font-size: 19px; color: var(--muted); max-width: 620px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.hero-badges {
  list-style: none;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 12px 26px;
}
.hero-badges li { font-size: 15px; color: var(--green-dark); font-weight: 500; }
.hero-badges strong { color: var(--green-deep); }
/* The rating gets a tint so the strongest signal is not just another line. */
.hero-badge-rating {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); border-radius: 999px;
  padding: 7px 16px; color: var(--muted);
}

/* Only survivor of the old hero portrait card — the gold stars, reused by the
   rating badge. The card itself, the portrait, the name and the credentials
   block were removed: they repeated /about and made the header feel like a
   business card. (The .hero-logo-* panel before it went the same way.) */
.hero-stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }

.hero-scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(42,128,72,.4);
  border-radius: 14px; z-index: 2;
}
.hero-scroll-hint span {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 4px; height: 8px; border-radius: 2px; background: var(--gold);
  animation: scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  60% { transform: translate(-50%, 14px); opacity: 0; }
}

/* ===== Trust strip ===== */
.trust-strip { background: var(--green); color: #fff; }
.trust-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  padding-top: 26px; padding-bottom: 26px;
  text-align: center;
}
.trust-item strong {
  display: block; font-family: var(--serif);
  font-size: 17px; margin-bottom: 2px;
}
.trust-item span { font-size: 14px; color: rgba(255,255,255,.82); }

/* ===== Sections ===== */
.section { padding: 92px 0; }
.section-cream { background: var(--cream); }
.section-title { font-size: clamp(30px, 4vw, 42px); text-align: center; margin-bottom: 16px; }
.section-lead {
  text-align: center; color: var(--muted); font-size: 18px;
  max-width: 620px; margin: 0 auto 52px;
}

/* ===== Service cards ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
}
.card {
  background: #fff;
  border: 1px solid rgba(42,128,72,.14);
  border-radius: 16px;
  padding: 34px 28px;
  transition: box-shadow .25s;
  transform-style: preserve-3d;
  will-change: transform;
}
.card:hover { box-shadow: 0 18px 44px rgba(23,73,42,.12); }
.card-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(42,128,72,.10); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 21px; margin-bottom: 12px; }
.card p { font-size: 15.5px; color: var(--muted); }

.card-claims-label {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed rgba(42,128,72,.2);
  font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--green-dark) !important;
}
.card-claims {
  list-style: none;
  margin-top: 10px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}
.card-claims li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.card-claims li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--gold); font-weight: 700;
}
.card-claims .claims-more { font-style: italic; color: var(--green); font-weight: 500; }
.card-claims .claims-more::before { content: none; }

.card-featured { border: 2px solid var(--gold); background: #FFFCF4; }
.card-featured .card-icon { background: rgba(224,154,23,.14); color: var(--gold-ink); }
.card-cta {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed rgba(224,154,23,.5);
}
.card-cta strong { color: var(--green-deep); }
.card-cta a { font-weight: 500; white-space: nowrap; }

/* ===== Situations strip ===== */
.situations {
  margin-top: 46px;
  text-align: center;
}
.situations-label {
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 18px;
}
.situations-list {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.situations-list li {
  background: rgba(42,128,72,.08);
  border: 1px solid rgba(42,128,72,.18);
  color: var(--green-deep);
  font-weight: 500; font-size: 14.5px;
  padding: 8px 18px; border-radius: 999px;
}
/* Only the pills that go somewhere react to the cursor. This hover used to
   apply to every li, so all fourteen lifted and turned green and none of them
   were links — the page invited a tap fourteen times and answered none. */
.situations-list li.situation-link {
  padding: 0;
  transition: background .2s, border-color .2s, transform .2s;
}
.situations-list li.situation-link > a {
  display: block; padding: 8px 18px;
  color: inherit; text-decoration: none;
  transition: color .2s;
}
.situations-list li.situation-link:hover,
.situations-list li.situation-link:focus-within {
  background: var(--green); border-color: var(--green); transform: translateY(-2px);
}
.situations-list li.situation-link:hover > a,
.situations-list li.situation-link:focus-within > a { color: #fff; }

/* ===== Pricing ===== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  align-items: stretch;
}
.price-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(42,128,72,.14);
  border-radius: 18px;
  padding: 38px 32px;
  transition: box-shadow .25s;
  transform-style: preserve-3d;
  will-change: transform;
}
.price-card:hover { box-shadow: 0 20px 48px rgba(23,73,42,.13); }
.price-card h3 { font-size: 24px; margin-bottom: 4px; }
.price-card-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.price-list { list-style: none; }
.price-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed rgba(42,128,72,.2);
  font-size: 15.5px;
}
.price-list li:last-child { border-bottom: none; }
.price-list span { color: var(--ink); }
.price-list span em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
}
.price-list strong {
  font-family: var(--serif); font-size: 19px; color: var(--green);
  white-space: nowrap;
}
.price-note {
  margin-top: 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.price-pay {
  margin-top: 8px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.price-pay strong { color: var(--ink); }
.price-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 6px 0 14px;
}
.price-tier {
  background: #fff;
  border: 1px solid rgba(42,128,72,.16);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
}
.pt-label {
  display: block; font-family: var(--serif); font-size: 14px; color: var(--green-deep);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.pt-range {
  display: block; font-family: var(--serif); font-size: 27px; color: var(--green);
  margin: 6px 0 5px;
}
.pt-note { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.price-hst {
  text-align: center; font-size: 13.5px; color: var(--muted); font-weight: 500;
  margin-bottom: 26px;
}
.card-fees {
  font-size: 13px; color: var(--muted); margin: 12px 0 4px; line-height: 1.55;
}

/* ===== Ask for a quote ===== */
.price-cta {
  margin-top: 44px;
  background: #fff;
  border: 1px solid rgba(42,128,72,.16);
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 14px 36px rgba(23,73,42,.08);
  text-align: center;
}
.price-cta h3 { font-size: 24px; margin-bottom: 8px; }
.price-cta p {
  color: var(--muted); font-size: 15.5px; line-height: 1.6;
  max-width: 52ch; margin: 0 auto 22px;
}
.price-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ===== Testimonials ===== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px;
  margin-bottom: 10px;
}
.testimonial {
  background: #fff;
  border: 1px solid rgba(42,128,72,.14);
  border-radius: 16px;
  padding: 32px 28px;
  transition: box-shadow .25s;
  transform-style: preserve-3d;
  will-change: transform;
  display: flex; flex-direction: column;
}
.testimonial:hover { box-shadow: 0 16px 40px rgba(23,73,42,.10); }
.stars { color: var(--gold); font-size: 18px; letter-spacing: .2em; margin-bottom: 16px; }
.testimonial blockquote {
  font-size: 16px; color: var(--ink); line-height: 1.6;
  flex: 1; margin-bottom: 18px;
}
.testimonial figcaption { font-weight: 600; color: var(--green-deep); font-size: 15px; }
.testimonial figcaption span {
  display: block; font-weight: 400; font-size: 13px; color: var(--muted);
}

/* ===== Google reviews CTA ===== */
.google-reviews {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(42,128,72,.16);
  border-radius: 16px;
  padding: 22px 28px;
  margin-top: 30px;
}
.google-reviews-badge { display: flex; align-items: center; gap: 14px; }
.google-reviews-badge strong {
  display: block; font-family: var(--serif); font-size: 18px; color: var(--green-deep);
}
.google-reviews-badge .stars { color: var(--gold); font-size: 16px; letter-spacing: .1em; margin-bottom: 0; }
.google-reviews-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== About stats & founder panel ===== */
.about-stats {
  display: flex; gap: 34px; flex-wrap: wrap;
  margin: 6px 0 30px;
}
.about-stats strong {
  display: block; font-family: var(--serif);
  font-size: 32px; color: var(--green);
}
.about-stats span { font-size: 13.5px; color: var(--muted); }
.about-side { display: flex; flex-direction: column; gap: 22px; }
.founder-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.founder-photo {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; object-position: 50% 30%;
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(245,241,232,.25);
  flex: none;
}
.simba-card {
  background: #fff;
  border: 1px solid rgba(42,128,72,.16);
  border-radius: 16px;
  padding: 20px 22px;
}
.simba-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.simba-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  flex: none;
}
.simba-title {
  font-family: var(--serif); font-size: 20px; color: var(--green-deep);
  line-height: 1.2;
}
.simba-role {
  font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-ink); font-weight: 600;
}
.simba-pose {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  border: 1px solid rgba(42,128,72,.14);
}
.simba-caption { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.founder-name { font-family: var(--serif); font-size: 22px; color: #fff; }
.founder-role { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.92); }
/* Sits inside the dark green founder panel, so it is white with an
   underline rather than the site's gold — gold on this green is the same
   contrast failure logged against the rest of the palette. */
.founder-link { margin-top: 7px; font-size: 14px; }
.founder-link a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.founder-link a:hover, .founder-link a:focus-visible { text-decoration-thickness: 2px; }
.founder-note { margin-top: 18px; font-size: 12.5px; color: rgba(245,241,232,.65); font-style: italic; }

/* ===== Qualifications ===== */
.creds { margin-bottom: 24px; }
.creds-title {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600;
  margin-bottom: 16px;
}
.creds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.cred { display: flex; align-items: center; gap: 12px; }
.cred-icon {
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--gold);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.cred-icon svg { width: 22px; height: 22px; }
.cred strong {
  display: block; font-family: var(--serif);
  font-size: 16px; color: var(--green-deep); line-height: 1.25;
}
.cred span:not(.cred-icon) { font-size: 12.5px; color: var(--muted); }
.cred > div > span { display: block; font-size: 12.5px; color: var(--muted); }

.beyond {
  background: #FFFCF4;
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 30px;
}
.beyond-title {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600;
  margin-bottom: 12px;
}
.beyond-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.beyond-item strong {
  display: block;
  font-family: var(--serif); font-size: 16px; color: var(--green-deep);
  margin-bottom: 4px;
}
.beyond-item p { font-size: 13.5px; color: var(--ink); line-height: 1.55; }

@media (max-width: 560px) {
  .creds-grid { grid-template-columns: 1fr; }
  .beyond-grid { grid-template-columns: 1fr; }
}

/* ===== Document checklist generator ===== */
.checklist-tool {
  margin-top: 52px;
  background: var(--cream);
  border: 1px solid rgba(42,128,72,.18);
  border-radius: 18px;
  padding: 38px 34px;
}
.checklist-head h3 { font-size: 24px; margin-bottom: 6px; }
.checklist-head p { color: var(--muted); font-size: 15.5px; margin-bottom: 24px; }
.checklist-body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; align-items: start; }
.checklist-toggles { display: flex; flex-direction: column; gap: 10px; }
.checklist-toggles label {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid rgba(42,128,72,.18);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14.5px; font-weight: 500; color: var(--green-deep);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.checklist-toggles label:hover { border-color: var(--green); }
.checklist-toggles label:has(input:checked) { background: var(--green); color: #fff; border-color: var(--green); }
.checklist-toggles input { accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.checklist-result {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(42,128,72,.14);
  padding: 26px 26px 24px;
}
.checklist-result h4 {
  font-family: var(--serif); font-size: 19px; color: var(--green-deep);
  margin-bottom: 14px;
}
.checklist-count { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); }
#checklist-items { list-style: none; max-height: 320px; overflow-y: auto; margin-bottom: 18px; }
#checklist-items li {
  position: relative;
  padding: 7px 0 7px 28px;
  font-size: 14.5px;
  border-bottom: 1px dashed rgba(42,128,72,.15);
}
#checklist-items li:last-child { border-bottom: none; }
#checklist-items li::before {
  content: "✓";
  position: absolute; left: 2px;
  color: var(--gold); font-weight: 700;
}
#checklist-items .checklist-group {
  padding-left: 0;
  font-weight: 600; color: var(--green);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: none;
  margin-top: 8px;
}
#checklist-items .checklist-group::before { content: none; }
.checklist-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-sm { padding: 10px 20px; font-size: 14.5px; }

/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: #fff;
  border: 1px solid rgba(42,128,72,.15);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .25s;
}
.faq-item.open { box-shadow: 0 12px 30px rgba(23,73,42,.09); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--green-deep);
  text-align: left;
  padding: 20px 26px;
}
.faq-icon {
  position: relative; width: 18px; height: 18px; flex: none;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: var(--gold); border-radius: 2px;
  transition: transform .3s;
}
.faq-icon::before { left: 0; top: 8px; width: 18px; height: 2.5px; }
.faq-icon::after { left: 8px; top: 0; width: 2.5px; height: 18px; }
.faq-item.open .faq-icon::after { transform: scaleY(0); }
.faq-a { height: 0; overflow: hidden; transition: height .35s ease; }
.faq-a p { padding: 0 26px 22px; color: var(--muted); font-size: 15.5px; }

/* ===== Homepage hub: teaser "read more" links & lists ===== */
.section-more {
  margin-top: 34px; text-align: center;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.faq-teaser-list { list-style: none; margin-top: 6px; }
.faq-teaser-list li { border-bottom: 1px solid rgba(42,128,72,.14); }
.faq-teaser-list li:first-child { border-top: 1px solid rgba(42,128,72,.14); }
.faq-teaser-list a {
  display: block; padding: 16px 34px 16px 4px;
  text-decoration: none; color: var(--ink); font-weight: 500;
  position: relative; transition: color .2s, padding .2s;
}
.faq-teaser-list a::after {
  content: "›"; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); color: var(--gold); font-size: 22px; line-height: 1;
}
.faq-teaser-list a:hover { color: var(--green); padding-left: 10px; }
.closing-contact { margin-top: 26px; text-align: center; color: var(--muted); font-size: 15.5px; }
.closing-contact a { color: var(--green-dark); font-weight: 500; }

/* ===== Specialist service pages ===== */
.svc .section-title { text-align: center; margin-bottom: 26px; }
/* The opening answer is the part people read first and AI tends to quote —
   give it visual weight without turning it into a pull-quote. */
.svc-answer {
  font-size: 19px; line-height: 1.65; color: var(--ink);
  background: var(--cream);
  border-left: 4px solid var(--green);
  border-radius: 0 14px 14px 0;
  padding: 26px 28px;
  margin-bottom: 32px;
}
.svc-actions {
  display: flex; gap: 13px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 12px;
}
/* Sections are separated by whitespace and a short gold rule rather than a
   full-width hairline. The hairline read as a divider in a document; this
   reads as a designed break, and the extra margin gives the page room to
   breathe on what were fairly dense pages. */
.svc-h2 {
  font-size: 27px;
  margin: 56px 0 18px;
}
.svc-h2::before {
  content: ""; display: block;
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--gold);
  margin-bottom: 20px;
}
.svc p { margin-bottom: 17px; color: var(--muted); line-height: 1.72; }

/* Checks sit in a soft green disc instead of being bare glyphs. On
   /what-to-bring, which is five stacked lists, this is most of the difference
   between a wall of bullets and something you can scan. */
.svc-list { list-style: none; display: grid; gap: 13px; margin: 8px 0 26px; }
.svc-list li { padding-left: 34px; position: relative; color: var(--muted); }
.svc-list li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(42,128,72,.12);
}
.svc-list li::after {
  content: "✓"; position: absolute; left: 5px; top: 3px;
  font-size: 12px; font-weight: 700; color: var(--green);
}

/* Gold left edge, echoing the green one on the answer block above: green
   marks the explanation, gold marks the money. */
.svc-price {
  background: var(--paper);
  border: 1px solid rgba(42,128,72,.2);
  border-left: 4px solid var(--gold);
  border-radius: 0 16px 16px 0;
  padding: 24px 26px; margin: 34px 0 8px;
}
.svc-price p { margin-bottom: 16px; }
.svc-price strong { color: var(--green-deep); }
.btn-sm { padding: 9px 20px; font-size: 14.5px; }
.svc-cta {
  margin-top: 60px; padding: 38px 30px;
  background: linear-gradient(120deg, var(--green-deep), var(--green));
  border-radius: 18px; text-align: center; color: #fff;
}
.svc-cta h2 { color: #fff; font-size: 28px; margin-bottom: 12px; }
.svc-cta p { color: rgba(255,255,255,.9); }
.svc-cta .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; }
.svc-cta .btn-outline:hover { background: rgba(255,255,255,.14); color: #fff; }
.svc-cta .closing-contact { color: rgba(255,255,255,.85); margin-top: 18px; }
.svc-cta .closing-contact a { color: #fff; }
@media (max-width: 560px) {
  .svc-answer { font-size: 17.5px; padding: 22px 20px; }
  /* Tighten the section rhythm on phones — 56px of margin that reads as
     generous on a desktop reads as a hole on a 375px screen. */
  .svc-h2 { font-size: 23px; margin: 42px 0 16px; }
  .svc-h2::before { margin-bottom: 16px; }
  .svc-cta { margin-top: 44px; padding: 30px 22px; }
}

/* ===== Specialist service cards ===== */
/* Flex rather than grid, specifically so the final row centres. There are
   eight service cards; at three-across that leaves two on the last row, and
   CSS Grid pins them left with a wide gap beside them. Flex + justify-content
   centres whatever is left over. max-width caps how far those two can grow,
   so a short last row doesn't balloon into two oversized cards. */
.svc-cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px;
  margin-top: 8px;
}
.svc-card {
  flex: 1 1 260px;
  max-width: 344px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(42,128,72,.16);
  border-radius: 16px; padding: 26px 24px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 14px 32px rgba(23,73,42,.12);
}
.svc-card-eyebrow {
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600; margin-bottom: 9px;
}
.svc-card h3 { font-size: 20px; margin-bottom: 9px; }
.svc-card-blurb { color: var(--muted); font-size: 15px; flex: 1; }
.svc-card-go { margin-top: 16px; color: var(--green); font-weight: 600; font-size: 15px; }

/* ===== Rebrand continuity ===== */
.footer-formerly {
  margin-top: 8px; text-align: center;
  font-size: 13.5px; color: rgba(255,255,255,.62);
}
.footer-formerly strong { color: rgba(255,255,255,.82); font-weight: 500; }
.footer-policy { margin-top: 10px; text-align: center; font-size: 13.5px; }
.footer-policy a { color: rgba(255,255,255,.72); text-decoration: underline; }
.footer-policy a:hover { color: #fff; }
.privacy-updated { font-size: 14px; color: var(--muted); font-style: italic; margin-bottom: 4px; }
.formerly-note {
  margin-top: 6px; padding: 14px 18px;
  background: var(--cream); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  font-size: 15px; color: var(--muted);
}
.formerly-note strong { color: var(--green-deep); }

/* ===== Breadcrumbs ===== */
.crumbs { background: var(--cream); border-bottom: 1px solid rgba(42,128,72,.12); }
.crumbs .container { padding-top: 12px; padding-bottom: 12px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--green-dark); text-decoration: none; font-weight: 500; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 9px; color: rgba(42,128,72,.5); }

/* ===== Client forms banner ===== */
.forms-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--green-deep), var(--green));
  color: #fff;
  border-radius: 16px;
  padding: 24px 30px;
  margin-bottom: 34px;
}
.forms-banner p { font-size: 16.5px; max-width: 640px; }
.forms-banner strong { font-family: var(--serif); font-size: 18px; }
.forms-banner .btn { flex: none; }
/* No flex:none here — the container must be allowed to shrink, otherwise
   flex-wrap never engages and the two buttons overflow narrow phones. */
.forms-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; min-width: 0; }
/* The banner is a flex row, so these have to claim a whole line of their own —
   otherwise they sit beside the buttons and squeeze everything. */
.forms-banner-note {
  flex: 1 0 100%;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  opacity: .92;
}
.forms-banner-note + .forms-banner-note { margin-top: -8px; }
.forms-banner-note a { color: #fff; text-decoration: underline; }

/* ===== Contact layout & intake form ===== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 30px;
  margin-bottom: 44px;
  align-items: start;
}
.intake-form {
  background: #fff;
  border: 1px solid rgba(42,128,72,.16);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 14px 36px rgba(23,73,42,.08);
}
.intake-form h3 { font-size: 23px; margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; display: flex; flex-direction: column; }
/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content's intrinsic width. A text input's intrinsic width is its
   `size` attribute — around 200px — which pushed the whole form wider than a
   320px screen and gave the contact page a sideways scroll. */
.form-row, .form-field { min-width: 0; }
.form-field input, .form-field select, .form-field textarea { min-width: 0; max-width: 100%; }
.form-field label {
  font-size: 13.5px; font-weight: 600; color: var(--green-deep);
  margin-bottom: 6px;
}
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(42,128,72,.25);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(42,128,72,.14);
}
.form-field textarea { resize: vertical; }
/* Spam trap — moved off-screen rather than display:none, because some bots
   skip fields that are not rendered. Never focusable, never announced. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare Turnstile. min-height reserves the widget's space so the submit
   button does not jump down when the check finishes loading. */
.cf-turnstile { margin: 20px 0 4px; min-height: 65px; }
.form-status { margin-top: 14px; font-weight: 500; color: var(--green); font-size: 15px; }
.form-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.contact-side { display: flex; flex-direction: column; gap: 18px; }
.contact-side .contact-card { text-align: left; }

/* ===== Chat assistant ===== */
.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 500; }
.chat-fab {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--green); color: var(--cream);
  border: 2px solid var(--gold);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(23,73,42,.30);
  transition: transform .2s, background .2s;
  animation: fab-in .45s cubic-bezier(.34,1.56,.64,1) 1.8s both;
}
@keyframes fab-in {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-fab { animation: none; }
}
.chat-fab:hover { transform: scale(1.07); background: var(--green-dark); }
.chat-fab svg { width: 28px; height: 28px; }
.chat-panel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.chat-panel:not([hidden]) { animation: chat-in .35s ease-out both; }
.chat-panel {
  position: absolute; right: 0; bottom: 74px;
  width: 340px; max-width: calc(100vw - 44px);
  height: 460px; max-height: calc(100vh - 130px);
  background: #fff;
  border: 1px solid rgba(42,128,72,.18);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(23,73,42,.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; gap: 12px;
  background: var(--green); color: #fff;
  padding: 14px 16px;
}
.chat-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cream); color: var(--green);
  border: 1.5px solid var(--gold);
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.chat-title { font-weight: 600; font-size: 15.5px; line-height: 1.2; }
.chat-sub { font-size: 12px; color: rgba(255,255,255,.75); }
.chat-close {
  margin-left: auto; background: none; border: none; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
}
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
}
.chat-msg.bot {
  background: var(--cream);
  border: 1px solid rgba(42,128,72,.14);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.chat-msg.user {
  background: var(--green); color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.chat-msg a { color: var(--green-dark); font-weight: 600; }
.chat-msg.user a { color: #fff; }
.chat-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.chat-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); opacity: .4;
  animation: chatdot 1s infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot { 0%, 100% { opacity: .3; transform: translateY(0);} 50% { opacity: 1; transform: translateY(-3px);} }
.chat-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(42,128,72,.12);
  background: #fff;
}
.chat-chips button {
  background: rgba(42,128,72,.08);
  border: 1px solid rgba(42,128,72,.25);
  color: var(--green-deep);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.chat-chips button:hover { background: var(--green); color: #fff; }
.chat-inputbar {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(42,128,72,.12);
  background: #fff;
}
.chat-inputbar input {
  flex: 1;
  font-family: var(--sans); font-size: 14.5px;
  border: 1px solid rgba(42,128,72,.25);
  border-radius: 999px;
  padding: 9px 16px;
}
.chat-inputbar input:focus { outline: none; border-color: var(--green); }
.chat-inputbar button {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: var(--on-gold); border: none;
  font-size: 15px; cursor: pointer;
  transition: background .2s;
}
.chat-inputbar button:hover { background: var(--gold-dark); }

/* ===== Corporate callout ===== */
.callout { background: linear-gradient(120deg, var(--green-deep), var(--green)); color: #fff; position: relative; overflow: hidden; }
.callout::before {
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  border: 60px solid rgba(224,154,23,.14);
}
.callout-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  padding-top: 60px; padding-bottom: 60px;
}
.callout h2 { color: #fff; font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 10px; }
.callout p { color: rgba(255,255,255,.85); max-width: 560px; }
.callout-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ===== Steps ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
}
.step {
  background: #fff;
  border-radius: 16px;
  padding: 32px 26px;
  border: 1px solid rgba(42,128,72,.12);
  transition: box-shadow .25s;
}
.step:hover { box-shadow: 0 14px 34px rgba(23,73,42,.10); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--green); color: var(--cream);
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  margin-bottom: 18px;
}
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--muted); }

/* ===== Footer social ===== */
.footer-social { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.footer-social .footer-fine { margin: 0; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.82);
  transition: background .2s, color .2s, border-color .2s;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-deep); }
.footer-social svg { width: 19px; height: 19px; }

/* ===== Ways to send documents (inside How it works) ===== */
.ways { margin-top: 42px; }
.ways-title { font-size: 21px; text-align: center; margin-bottom: 6px; }
.ways-lead {
  text-align: center; color: var(--muted); font-size: 15px;
  max-width: 56ch; margin: 0 auto 24px;
}
.ways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.way {
  background: var(--cream);
  border: 1px solid rgba(42,128,72,.12);
  border-radius: 14px;
  padding: 22px 20px;
}
.way h4 { font-size: 16.5px; margin-bottom: 8px; color: var(--green-deep); }
.way p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ===== About ===== */
.about-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: center;
}
.about-copy h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 20px; }
.about-copy p { color: var(--muted); margin-bottom: 18px; }
.about-list { list-style: none; margin: 8px 0 30px; }
.about-list li {
  padding-left: 30px; position: relative;
  margin-bottom: 10px; font-weight: 500; color: var(--green-deep);
}
.about-list li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--gold); font-weight: 700;
}
.about-panel {
  background: var(--green);
  border-radius: 18px;
  padding: 46px 40px;
  color: #fff;
  box-shadow: 0 20px 50px rgba(23,73,42,.18);
  will-change: transform;
}
.about-panel blockquote p {
  font-family: var(--serif); font-size: 22px; font-style: italic;
  line-height: 1.5; margin-bottom: 22px;
}
.about-panel cite {
  font-style: normal; font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.92);
}

/* ===== Contact ===== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
  margin-bottom: 44px;
}
.contact-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(42,128,72,.14);
  padding: 30px 26px;
  text-align: center;
  transition: box-shadow .25s;
  transform-style: preserve-3d;
  will-change: transform;
}
.contact-card:hover { box-shadow: 0 14px 34px rgba(23,73,42,.10); }
.contact-card h3 { font-size: 18px; margin-bottom: 10px; }
.contact-card p { font-size: 16px; }
.contact-card a { font-weight: 500; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
.contact-note { margin-top: 6px; font-size: 13.5px; color: var(--muted); }

.contact-corporate {
  text-align: center;
  background: #FFFCF4;
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  padding: 18px 26px;
  max-width: 720px;
  margin: 0 auto;
  font-size: 16.5px;
}

/* ===== Footer ===== */
.site-footer { background: var(--green-deep); color: rgba(245,241,232,.9); }
.footer-inner {
  padding-top: 52px; padding-bottom: 34px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.5fr;
  gap: 36px;
  align-items: start;
}
.footer-brand { display: flex; align-items: center; gap: 16px; }
.brand-mark-sm { width: 46px; height: 46px; }
.brand-mark-sm .brand-f { font-size: 24px; }
.footer-name { font-family: var(--serif); font-size: 20px; color: #fff; }
.footer-tag { font-size: 14px; color: rgba(245,241,232,.7); margin-top: 4px; }
.footer-col h4 {
  font-family: var(--serif); font-size: 16px; color: #fff; margin-bottom: 15px;
  letter-spacing: .3px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a {
  color: rgba(245,241,232,.85); text-decoration: none; font-size: 15px;
}
.footer-links a:hover { color: var(--gold); }
.footer-contact p { font-size: 15px; margin-bottom: 13px; line-height: 1.5; }
.footer-contact a { color: rgba(245,241,232,.92); text-decoration: none; }
.footer-contact a:hover { color: var(--gold); }
.footer-hours { color: rgba(245,241,232,.78); }
.footer-fine { font-size: 12.5px; color: rgba(245,241,232,.62); line-height: 1.5; }
.footer-map-frame {
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(245,241,232,.18);
  aspect-ratio: 16 / 10; background: rgba(255,255,255,.06);
}
.footer-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.footer-map .footer-fine { margin-top: 11px; }
.footer-legal { font-size: 13px; color: rgba(245,241,232,.6); text-align: center; padding-bottom: 30px; }
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; justify-content: center; text-align: left; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-links { align-items: center; }
  .price-tiers { grid-template-columns: 1fr; }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  /* The hero is a single centred column at every width now, so there is no
     two-column layout left to collapse here. */
  .hero { padding: 60px 0 70px; }
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  .price-cta { padding: 28px 20px; }
  .price-cta-actions .btn { width: 100%; }
  .contact-layout { grid-template-columns: 1fr; }
  .checklist-body { grid-template-columns: 1fr; }
  .checklist-toggles { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* .container is capped at 1120px, so the nav has the SAME space available at
   1200px and at 2560px — a wider screen buys it nothing. These tightened
   values therefore apply at every width where the full nav is shown. */
/* The header gets a wider container than the body so the brand and the ten-item
   nav both fit without either shrinking. The body stays at 1120px. */
.site-header .container { max-width: 1240px; }

@media (min-width: 1181px) {
  /* Ten items now share a 1072px container: seven links, the phone pill, the
     Email Now pill and the booking CTA. Measured at 1280px the row ran 14px
     past the container padding; 11px gaps put it back inside with room over. */
  .site-nav { gap: 11px; }
  .site-nav a { font-size: 14.5px; }
  .site-nav .nav-cta { padding: 9px 15px; }
  .site-nav .nav-phone { padding: 8px 12px; }
  .site-nav .nav-email svg { width: 16px; height: 16px; }
}

/* Raised from 1020px: adding the booking CTA pushed the full nav past what a
   smaller laptop can fit beside the logo, so the menu collapses earlier now. */
@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid rgba(42,128,72,.15);
    flex-direction: column;
    padding: 18px 24px 24px;
    gap: 18px;
    box-shadow: 0 16px 30px rgba(23,73,42,.10);
  }
  .site-nav.open { display: flex; }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .callout-inner { flex-direction: column; align-items: flex-start; }
  .hero-scroll-hint { display: none; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Kill every animation, including the hero entrance and drifting orbs.
     Elements fall back to their natural (visible) state — nothing stays hidden. */
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ===== Featurable Google reviews widget ===== */
.featurable-wrap { margin: 6px 0 30px; }