/* ─── JOANNE DAVID CFP FCSI — Shared Stylesheet ─────────────────────────── */

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

:root {
  --green:       #2a6041;
  --green-dark:  #1b4530;
  --green-light: #3d7a57;
  --green-pale:  #eef4f0;
  --green-mid:   #c8ddd0;
  --gold:        #c9a84c;
  --gold-light:  #f0e0a8;
  --cream:       #faf8f4;
  --white:       #ffffff;
  --charcoal:    #222222;
  --mid:         #555555;
  --light:       #888888;
  --border:      #dde8e2;
}

html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; color: var(--charcoal); background: var(--cream); }

/* ── NAV ─────────────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 600;
  color: var(--green-dark); text-decoration: none;
}
.nav-logo span { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; }
.nav-links a { font-size: 13px; font-weight: 400; color: var(--mid); text-decoration: none; letter-spacing: 0.03em; transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: var(--green); }
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown > a::after { content: ' ▾'; font-size: 10px; }
.dropdown {
  display: none; position: absolute; top: calc(100% + 12px); left: 0;
  background: white; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 0; min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10); z-index: 200;
}
.dropdown a { display: block; padding: 10px 18px; font-size: 13px; color: var(--mid); white-space: nowrap; }
.dropdown a:hover { background: var(--green-pale); color: var(--green); }

.has-dropdown:hover .dropdown { display: block; }
.nav-cta {
  background: var(--green) !important; color: white !important;
  padding: 9px 18px; border-radius: 6px;
  font-weight: 700 !important; font-size: 12px !important;
  letter-spacing: 0.06em !important; text-transform: uppercase;
  transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--green-dark) !important; }
.nav-mobile-btn { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-mobile-btn span { display: block; width: 22px; height: 2px; background: var(--charcoal); margin: 5px 0; border-radius: 2px; }

@media (max-width: 1180px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; flex-direction: column; align-items: flex-start; position: absolute; top: 68px; left: 0; right: 0; background: white; padding: 20px; border-bottom: 1px solid var(--border); gap: 14px; z-index: 100; }
  .nav-links.open { display: flex; }
  .nav-mobile-btn { display: block; }
  .dropdown { position: static; box-shadow: none; border: none; padding: 4px 0 4px 16px; display: block; }
  .has-dropdown > a::after { display: none; }
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--green); color: white;
  padding: 13px 26px; border-radius: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  transition: background 0.2s; display: inline-block; border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary {
  background: transparent; color: var(--green);
  padding: 13px 26px; border-radius: 6px;
  border: 1.5px solid var(--green);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  transition: all 0.2s; display: inline-block;
}
.btn-secondary:hover { background: var(--green-pale); }

/* Hero buttons. Flex rather than a fixed 2-column grid: with the shorter
   labels the three $750 offers fit on one line at desktop width, and the row
   simply re-packs as the window narrows instead of being locked to two.
   Slightly smaller type so each label stays on a single line. //2026-09-02 */
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.hero-btns .btn-primary, .hero-btns .btn-secondary {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 12px 18px;
  white-space: nowrap;
  text-align: center;
}
/* The second row sits tight under the first rather than starting its own
   28px block. */
.hero-btns-more { margin-top: 10px; }

@media (max-width: 640px) {
  .hero-btns .btn-primary, .hero-btns .btn-secondary { white-space: normal; }
}
/* The service-page hero buttons carry an INLINE white colour so they read on
   the dark banner. Inline styles beat stylesheets, so the hover above swapped
   the background to near-white and left white text on it - 1.12:1, invisible.
   Matching on the inline style hits exactly those buttons and no others;
   !important is genuinely required, as nothing else outranks an inline style.
   Dark green on the pale panel measures 9.71:1. //2026-09-01 */
.btn-secondary[style*="255,255,255"]:hover {
  color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
}
.btn-gold {
  background: var(--gold); color: var(--green-dark);
  padding: 13px 26px; border-radius: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  transition: opacity 0.2s; display: inline-block;
}
.btn-gold:hover { opacity: 0.88; }


/* ============================================= */
/* UNIFIED CARDS - Used on Homepage, Services, Who We Serve */
/* ============================================= */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 48px;
}

@media (max-width: 900px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }
}

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

/* Individual Card Styling */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
  height: 100%;
}

.card:hover {
  border-color: var(--green);
  box-shadow: 0 12px 30px rgba(46, 125, 50, 0.15);
  transform: translateY(-6px);
}

.card-icon {
  font-size: 38px;
  margin-bottom: 20px;
  display: block;
}

.card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 12px;
  line-height: 1.3;
}

.card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mid);
  margin-bottom: 20px;
  flex-grow: 1;
}

.card-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: auto;
  display: inline-block;
}

/* ── PAGE HERO (interior pages) ──────────────────────────────────────────── */
.page-hero {
  background: var(--green-dark);
  padding: 72px 80px 64px;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(135deg, transparent, rgba(201,168,76,0.08));
  pointer-events: none;
}
.page-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px; display: block;
}
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600; line-height: 1.2; color: white; margin-bottom: 20px;
}
.page-hero p {
  font-size: 17px; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,0.78); max-width: 620px;
}
.page-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
@media (max-width: 768px) { .page-hero { padding: 52px 24px 44px; } }

/* Every page-hero is a two-column grid with align-items:center, so the height
   of the PHOTO decides where the words start. A long headline fills the column
   and begins at the padding; a short one gets centred and drops 60-90px down
   the panel. That is the whole reason /fee-only-tax-and-financial-services/
   and the insights articles looked to sit lower than every other page - it was
   never the header, and it happens on the pale panels too.

   The text column now always starts at the padding. The photo keeps its
   vertical centring, so nothing that already lined up moves. //2026-09-02 */
.page-hero > div > div:first-child { align-self: start; }


/* ── SITEWIDE MOBILE GRID FIX ────────────────────────────────────────────
   Many pages use inline "display:grid;grid-template-columns:1fr <fixed>px"
   for two-column layouts (hero text + image, heading + search box, etc.).
   These fixed-width columns don't shrink on narrow screens, squeezing the
   first column and creating large empty-looking gaps / overflow.
   Fix: on screens ≤900px, force EVERY element with an inline
   grid-template-columns to stack into a single column. Padding on
   .page-hero is also reclaimed from any inline override. Apply this
   FIRST in the cascade for ≤900px so any later, more specific rules can
   still override it if a particular section needs different handling. */
@media (max-width: 900px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns"] img {
    width: 100% !important;
    max-width: 280px;
    height: auto !important;
  }
  .page-hero {
    padding: 40px 20px !important;
  }
}

/* ── BREADCRUMB ──────────────────────────────────────────────────────────── */
.breadcrumb {
  padding: 14px 80px;
  background: var(--white); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--light);
}
.breadcrumb a { color: var(--green); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; }
@media (max-width: 768px) { .breadcrumb { padding: 14px 20px; } }

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
.section { padding: 80px 80px; }
.section-alt { background: var(--white); }
.section-green { background: var(--green-pale); }
.section-dark { background: var(--green-dark); }
.section-gold { background: var(--gold); }
@media (max-width: 768px) { .section { padding: 56px 24px; } }

.inner { max-width: 1100px; margin: 0 auto; }
.inner-narrow { max-width: 780px; margin: 0 auto; }

.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 12px; display: block;
}
.section-label-gold { color: var(--gold); }
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 600; line-height: 1.25;
  color: var(--charcoal); margin-bottom: 18px;
}
.section-title-white { color: white; }
.section-body {
  font-size: 16px; font-weight: 300; line-height: 1.8;
  color: var(--mid);
}
.section-body-white { color: rgba(255,255,255,0.78); }

/* ── TWO-COL GRID ────────────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.two-col-flip { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.two-col-flip > *:first-child { order: 2; }
.two-col-flip > *:last-child { order: 1; }
@media (max-width: 900px) {
  .two-col, .two-col-flip { grid-template-columns: 1fr; gap: 40px; }
  .two-col-flip > * { order: unset !important; }
}

/* ── SERVICE CARDS ───────────────────────────────────────────────────────── */
.cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 48px;
}
@media (max-width: 900px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards-grid { grid-template-columns: 1fr; } }

.card {
  background: white; border-radius: 12px;
  padding: 28px 24px; border: 1px solid var(--border);
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none; color: inherit; display: block;
}
.card:hover { box-shadow: 0 8px 32px rgba(42,96,65,0.12); transform: translateY(-3px); }
.card-icon { font-size: 26px; margin-bottom: 14px; }
.card h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.card p { font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.7; }
.card-link { font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 14px; display: block; }

/* ── CHECK LIST ──────────────────────────────────────────────────────────── */
/* ── CHECK LIST - FINAL CLEAN VERSION ───────────────────────────────── */
.check-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 28px 0 !important;
}

.check-list li {
    position: relative !important;
    padding-left: 34px !important;
    margin-bottom: 14px !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: var(--charcoal) !important;
}

.check-list li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--green) !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    line-height: 1 !important;
}

/* For white text on dark backgrounds */
.check-list-white li {
    color: rgba(255,255,255,0.9) !important;
}

.check-list-white li::before {
    color: #d4e6b8 !important;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 0; margin-top: 40px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%; text-align: left; padding: 20px 0;
  background: none; border: none; cursor: pointer;
  font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--charcoal); display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-question::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--green); flex-shrink: 0; }
.faq-question.open::after { content: '−'; }
.faq-answer { display: none; padding: 0 0 20px; font-size: 14px; font-weight: 300; color: var(--mid); line-height: 1.75; }
.faq-answer.open { display: block; }

/* ── CTA BAND ────────────────────────────────────────────────────────────── */
.cta-band {
  background: var(--gold);
  padding: 56px 80px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-band h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 600; color: var(--green-dark); }
.cta-band p { font-size: 15px; color: rgba(27,69,48,0.72); margin-top: 6px; font-weight: 300; }
@media (max-width: 768px) { .cta-band { padding: 40px 24px; flex-direction: column; align-items: flex-start; } }

/* ── TRUST STRIP ─────────────────────────────────────────────────────────── */
/* TRUST STRIP - DEBUG / FORCE VERSION */
.trust-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 5px 0 20px 0 !important;
    padding: 12px 15px !important;
    background: #1a3c2e !important;
    color: white !important;
    width: 100% !important;
    border: 2px solid yellow !important;   /* Temporary yellow border to see if CSS is applying */
}

.trust-item {
    font-size: 14.5px !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
}

.trust-dot {
    color: #c9e8a0 !important;
    font-size: 15px !important;
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
/* ── FOOTER ──────────────────────────────────────────────────────────────── */
footer { 
  background: #1C211E; 
  padding: 56px 80px 32px; 
  color: rgba(255,255,255,0.78); 
}

.footer-grid { 
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  margin-bottom: 48px; 
}

/* Keep 5 columns on laptops — drops to 3 columns below 900px */
@media (max-width: 900px) { 
  .footer-grid { 
    grid-template-columns: 1.6fr 1fr 1fr !important; 
  } 
  footer { padding: 40px 24px 24px; } 
}

@media (max-width: 720px) { 
  .footer-grid { grid-template-columns: 1fr 1fr !important; } 
}

/* Mobile — slightly larger fonts */
@media (max-width: 480px) { 
  .footer-grid { grid-template-columns: 1fr !important; } 
  .footer-desc { max-width: none; }

  .footer-brand { font-size: 1.15rem !important; }
  .footer-desc  { font-size: 14px !important; }
  .footer-col h4 { font-size: 11.5px !important; }
  .footer-col ul a { font-size: 14px !important; }
}

.footer-brand { 
  font-family: 'Playfair Display', serif; 
  font-size: 1.05rem; 
  font-weight: 600; 
  color: white; 
  margin-bottom: 10px; 
}
.footer-brand span { color: var(--gold); }

.footer-desc { 
  font-size: 13px; 
  font-weight: 300; 
  line-height: 1.7; 
  max-width: 260px; 
}

.footer-col h4 { 
  font-size: 10px; 
  font-weight: 700; 
  letter-spacing: 0.14em; 
  text-transform: uppercase; 
  color: rgba(255,255,255,0.62); 
  margin-bottom: 14px; 
}

.footer-col ul { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 9px; 
}

.footer-col ul a { 
  font-size: 13px; 
  color: rgba(255,255,255,0.78); 
  text-decoration: none; 
  font-weight: 300; 
  transition: color 0.2s; 
}
.footer-col ul a:hover { color: white; }

.footer-bottom { 
  border-top: 1px solid rgba(255,255,255,0.1); 
  padding-top: 24px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 8px; 
  font-size: 11px; 
}

.footer-disclaimer { 
  font-size: 11px; 
  line-height: 1.65; 
  color: rgba(255,255,255,0.72); 
  margin-top: 16px; 
  border-top: 1px solid rgba(255,255,255,0.06); 
  padding-top: 16px; 
}

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 0.6s ease both; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }

/* ── BOOK-A-CALL PAGE ────────────────────────────────────────────────────── */
.top-band { height: 4px; background: linear-gradient(90deg, var(--green-dark), var(--gold)); }

.hero {
  background: var(--green-dark);
  /* Trimmed from 64px/56px. The hero stands 766px tall, which on a 1366x768
     laptop pushed the credentials strip 60px below the fold - the one thing
     that earns trust in the first few seconds. Desktop only: <=900px and
     <=768px override this, the former with !important. //2026-09-01 */
  padding: 24px 80px 32px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
  background: linear-gradient(135deg, transparent, rgba(201,168,76,0.08));
  pointer-events: none;
}
.hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px; display: block;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600; line-height: 1.2; color: white; margin-bottom: 16px;
}
.hero h1 em { font-style: italic; color: var(--gold-light); }
.gold-rule { width: 48px; height: 3px; background: var(--gold); margin: 20px 0; border-radius: 2px; }
.hero-sub {
  font-size: 16px; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,0.78); max-width: 620px;
}
@media (max-width: 768px) { .hero { padding: 48px 24px 40px; } }

.page-wrap {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 48px; max-width: 1100px; margin: 0 auto;
  padding: 64px 80px;
}
@media (max-width: 900px) {
  .page-wrap { grid-template-columns: 1fr; padding: 48px 24px; gap: 36px; }
}

.sidebar h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 600; color: var(--charcoal); margin-bottom: 14px;
}
.sidebar p { font-size: 14px; font-weight: 300; color: var(--mid); line-height: 1.75; margin-bottom: 20px; }

.expect-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.expect-list li {
  font-size: 14px; font-weight: 300; color: var(--charcoal);
  padding-left: 22px; position: relative; line-height: 1.6;
}
.expect-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }

.trust-box {
  background: var(--green-pale); border-left: 3px solid var(--green);
  border-radius: 8px; padding: 20px 22px;
  font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.75;
}
.trust-box strong { color: var(--green-dark); font-weight: 700; display: block; margin-bottom: 6px; }

.form-card {
  background: white; border-radius: 14px;
  border: 1px solid var(--border);
  padding: 40px 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.form-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 600; color: var(--charcoal); margin-bottom: 6px;
}
.subtitle { font-size: 13px; font-weight: 300; color: var(--light); margin-bottom: 28px; }
.req { color: var(--gold); }

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

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 700; color: var(--charcoal); }
.field input, .field textarea, .field select {
  padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: 7px; font-size: 14px; font-family: 'Lato', sans-serif;
  color: var(--charcoal); background: white;
  transition: border-color 0.2s;
  width: 100%;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--green);
}
.field input.error { border-color: #c0392b; }
.field textarea { min-height: 100px; resize: vertical; }
/* Required-field errors. These were 11px and thin, so a missed field was easy to
   scroll past; now they read as errors - larger, bold, on a red tint, with the field
   itself outlined. Applies to every form on the site. */
.err-msg { font-size: 13px; font-weight: 700; color: #c0392b; display: none; line-height: 1.45; }
.field.invalid .err-msg {
  display: block; margin-top: 7px;
  background: #fdecea; border: 1px solid #f5c6cb; border-radius: 6px; padding: 9px 12px;
}
.field.invalid label { color: #c0392b; }
.field.invalid input, .field.invalid textarea, .field.invalid select {
  border-color: #c0392b; border-width: 2px; background: #fffafa;
}

.avail-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px;
  grid-auto-rows: 1fr;   /* every row the same height, so options with a sub-label do not grow taller */
}
@media (max-width: 480px) { .avail-grid { grid-template-columns: repeat(2, 1fr); } }

.avail-option { position: relative; }
.avail-option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.avail-option label {
  /* flex + height:100% makes each option fill its grid cell, so buttons with a
     sub-label (Open / Non-registered) match those without (RRSP, TFSA). */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; box-sizing: border-box;
  padding: 10px 8px; text-align: center;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 12px; font-weight: 700; color: var(--mid);
  cursor: pointer; transition: all 0.2s; line-height: 1.4;
}
.avail-option label small { display: block; font-weight: 300; font-size: 11px; margin-top: 2px; }
.avail-option input:checked + label {
  background: var(--green); border-color: var(--green); color: white;
}
.avail-option label:hover { border-color: var(--green); color: var(--green); }

/* ── SUBMIT BUTTON: SPINNER + FAILURE NOTICE ─────────────────────────────
   The button used to just swap its label to "Sending...". If the POST never
   completes (this host intermittently RESETS form submissions) the page never
   navigates, so the button sat disabled forever with no explanation and the
   enquiry was silently lost. The spinner shows work is happening; .send-failed
   is revealed by a JS watchdog if nothing has happened after 15s. 2026-09-06 */
.btn-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: 9px;
  vertical-align: -2px; border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff; border-radius: 50%;
  animation: btnspin 0.7s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spin { animation-duration: 2.4s; } }
.send-failed {
  display: none; margin-top: 12px; font-size: 13px; font-weight: 700;
  color: #c0392b; background: #fdecea; border: 1px solid #f5c6cb;
  border-radius: 6px; padding: 10px 13px; line-height: 1.5;
}
.send-failed a { color: #c0392b; text-decoration: underline; }

.submit-btn {
  width: 100%; background: var(--green); color: white;
  padding: 15px 24px; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.2s; margin-top: 8px;
  font-family: 'Lato', sans-serif;
}
.submit-btn:hover { background: var(--green-dark); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.privacy-note {
  font-size: 12px; font-weight: 300; color: var(--light);
  text-align: center; margin-top: 14px; line-height: 1.6;
}

.success-state {
  display: none; text-align: center; padding: 40px 20px;
}
.success-state.visible { display: block; }
.success-icon {
  width: 64px; height: 64px; background: var(--green);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 24px;
}
.success-icon svg {
  width: 28px; height: 28px; stroke: white;
  stroke-width: 2.5; fill: none;
}
.success-state h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 600; color: var(--charcoal); margin-bottom: 12px;
}
 
.success-state p { 
  font-size: 15px; 
  font-weight: 300; 
  color: var(--mid); 
  line-height: 1.75; 
}

/* ── STRONG DROPDOWN FIX — works on EVERY page (homepage + all sub-pages) ── */
.nav-links .has-dropdown {
  position: relative;
}

.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown .dropdown:hover,
.nav-links .has-dropdown:hover > a + .dropdown {
  display: block !important;
}

.dropdown {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: -2px !important;     /* closes the hover gap */
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  z-index: 9999 !important;
}

.dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--mid);
  white-space: nowrap;
  text-decoration: none;
}

.dropdown a:hover {
  background: var(--green-pale);
  color: var(--green);
}

/* MOBILE DROPDOWN — stays open until you tap a child link */
@media (max-width: 900px) {
  .has-dropdown.open .dropdown {
    display: block !important;
    position: static !important;
    box-shadow: none;
    border: none;
    padding-left: 20px;
  }
}


/* ── TAX CALENDAR LANDING PAGE (Form) ───────────────────────────────────── */
.calendar-hero {
  background: var(--green-dark);
  padding: 64px 80px 56px;
  position: relative;
  overflow: hidden;
}

.calendar-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(135deg, transparent, rgba(201,168,76,0.08));
  pointer-events: none;
}

.calendar-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: block;
}

.calendar-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: white;
  margin-bottom: 18px;
}

.calendar-hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.gold-rule {
  width: 48px;
  height: 3px;
  background: var(--gold);
  margin: 18px 0;
  border-radius: 2px;
}

.hero-sub {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.72);
  margin-bottom: 28px;
  max-width: 500px;
}

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.68);
  line-height: 1.5;
}

.check-list li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* FORM */
.hero-form-card {
  background: white;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 28px 26px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}

.hero-form-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.subtitle {
  font-size: 12px;
  font-weight: 300;
  color: var(--light);
  margin-bottom: 18px;
}

.error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #991b1b;
}

/* ── TAX CALENDAR LANDING PAGE ─────────────────────────────────────────────── */

.calendar-hero {
  background: var(--green-dark);
  padding: 64px 80px 56px;
  position: relative;
  overflow: hidden;
}

.calendar-hero::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
  background: linear-gradient(135deg, transparent, rgba(201,168,76,0.08));
  pointer-events: none;
}

.calendar-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 480px;
  gap: 56px; align-items: start; position: relative; z-index: 1;
}

.hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px; display: block;
}

.calendar-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 600; line-height: 1.2; color: white; margin-bottom: 18px;
}

.calendar-hero h1 em { font-style: italic; color: var(--gold-light); }

.gold-rule { width: 48px; height: 3px; background: var(--gold); margin: 18px 0; border-radius: 2px; }

.hero-sub {
  font-size: 15px; font-weight: 300; line-height: 1.8;
  color: rgba(255,255,255,0.72); margin-bottom: 28px; max-width: 500px;
}

/* Year selector */
.year-selector { display: flex; gap: 10px; margin-bottom: 16px; }
.year-opt { flex: 1; }
.year-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.year-opt label {
  display: block; text-align: center; padding: 10px 8px;
  border: 2px solid var(--border); border-radius: 8px;
  font-size: 15px; font-weight: 700; color: var(--mid);
  cursor: pointer; transition: all 0.2s;
}
.year-opt label small { display: block; font-size: 10px; font-weight: 300; margin-top: 2px; color: var(--light); }
.year-opt input:checked + label { background: var(--green); border-color: var(--green); color: white; }
.year-opt input:checked + label small { color: rgba(255,255,255,0.7); }
.year-opt label:hover { border-color: var(--green); color: var(--green); }

/* Form fields */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.field label { font-size: 12px; font-weight: 700; color: var(--charcoal); }
.field input, .field select {
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 7px;
  font-size: 13px; font-family: 'Lato', sans-serif; color: var(--charcoal);
  background: white; transition: border-color 0.2s; width: 100%;
  appearance: none; -webkit-appearance: none;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--green); }
.field-hint { font-size: 10px; color: var(--light); margin-top: 3px; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾'; position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); color: var(--light); pointer-events: none; font-size: 11px;
}
.month-day-row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.day-input { text-align: center; }
.req { color: #dc2626; }
.privacy-note { font-size: 11px; color: var(--light); text-align: center; margin-top: 10px; }
.submit-btn {
  width: 100%; padding: 14px; background: var(--green-dark); color: white;
  border: none; border-radius: 7px; font-family: 'Lato', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; transition: background 0.2s;
}
.submit-btn:hover { background: var(--green); }

/* Radio group */
.radio-group { display: flex; gap: 16px; margin-top: 4px; }
.radio-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--charcoal); cursor: pointer; }
.radio-opt input[type="radio"] {
  width: 15px; height: 15px; accent-color: var(--green); cursor: pointer;
  appearance: radio; -webkit-appearance: radio;
  opacity: 1 !important; visibility: visible !important;
  position: relative !important; margin: 0;
}

/* Entity section */
.entity-section {
  background: var(--green-pale); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--green-mid);
}
.entity-section-title {
  font-size: 11px; font-weight: 700; color: var(--green-dark);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px;
}
.entity-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; cursor: pointer; }
.entity-toggle input[type="checkbox"] {
  width: 16px !important; height: 16px !important; accent-color: var(--green);
  appearance: checkbox; -webkit-appearance: checkbox;
  opacity: 1 !important; visibility: visible !important;
  position: relative !important; margin: 0; cursor: pointer;
}
.entity-toggle-label { font-size: 13px; font-weight: 700; color: var(--charcoal); cursor: pointer; }
.entity-toggle-sub { font-size: 11px; font-weight: 300; color: var(--mid); margin-left: 26px; margin-bottom: 8px; }
.entity-details { display: none; margin-left: 26px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--green-mid); }
.entity-details.visible { display: block; }
.entity-details .field { margin-bottom: 10px; }
.entity-divider { height: 1px; background: var(--green-mid); margin: 10px 0; }

.personal-notice {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--green-dark); font-weight: 400;
  background: var(--green-pale); border-radius: 6px;
  padding: 8px 12px; margin-bottom: 14px; border: 1px solid var(--green-mid);
}
.personal-notice::before { content: '✓'; font-weight: 700; color: var(--green); }

/* Email consent checkbox */
#email_consent {
  width: 18px !important; height: 18px !important; accent-color: var(--green);
  appearance: checkbox; -webkit-appearance: checkbox;
  opacity: 1 !important; visibility: visible !important;
  position: relative !important; margin: 0; cursor: pointer;
}

/* Loading overlay */
.loading-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(27,69,48,0.93); z-index: 999;
  flex-direction: column; align-items: center; justify-content: center;
  color: white; text-align: center;
}
.loading-overlay.active { display: flex; }
.spinner {
  width: 44px; height: 44px;
  border: 2px solid rgba(201,168,76,0.25);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 400; margin-bottom: 6px; color: var(--gold-light);
}
.loading-sub { font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.5); }

/* How it works steps */
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.step-card { background: white; border-radius: 12px; padding: 28px 24px; border: 1px solid var(--border); }
.step-num { font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 400; color: var(--gold); opacity: 0.5; line-height: 1; margin-bottom: 12px; }
.step-card h3 { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.step-card p { font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.7; }

/* Section header with share buttons */
.section-header-share {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 32px;
}
.section-header-share .left { flex: 1; }

@media (max-width: 900px) {
  .calendar-hero { padding: 48px 24px 40px; }
  .calendar-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .steps-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .section-header-share { flex-direction: column; }
}



/* ── TAX CALENDAR THANK YOU / DOWNLOAD PAGE ───────────────────────────────────────────── */
.download-hero {
  background: var(--green-dark);
  padding: 72px 80px 64px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.download-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(135deg, transparent, rgba(201,168,76,0.08));
  pointer-events: none;
}

.download-hero-inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.success-icon {
  width: 72px;
  height: 72px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}

.success-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--green-dark);
  stroke-width: 2.5;
  fill: none;
}

.download-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  color: white;
  margin-bottom: 16px;
  line-height: 1.2;
}

.download-hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.download-hero p {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  margin-bottom: 32px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--green-dark);
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}

.download-btn:hover {
  opacity: 0.88;
}

.download-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--green-dark);
  stroke-width: 2;
  fill: none;
}

.download-note {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
}

/* Share section */
.share-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.share-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.share-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
  white-space: nowrap;
  color: white;
}

.share-btn:hover {
  opacity: 0.85;
}

.share-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.share-btn-linkedin  { background: #0A66C2; }
.share-btn-facebook  { background: #1877F2; }
.share-btn-x         { background: #000000; }
.share-btn-whatsapp  { background: #25D366; }
.share-btn-email     { background: var(--green-dark); border: 1px solid var(--green); }
.share-btn-native    { background: var(--gold); color: var(--green-dark); }

/* Next steps cards */
.next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.next-card {
  background: white;
  border-radius: 12px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

.next-card:hover {
  box-shadow: 0 8px 32px rgba(42,96,65,0.12);
  transform: translateY(-3px);
}

.next-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.next-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.next-card p {
  font-size: 13px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .next-grid { grid-template-columns: 1fr; }
  .share-block { align-items: flex-start; }
  .share-buttons { justify-content: flex-start; }
}

/* ── STRONG MOBILE OVERFLOW FIX (final) ──────────────────────────────────── */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero, .section, .cta-band, .services-grid, .cards-grid, .about-grid, .who-grid, .testimonials-grid, .trust-strip {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero {
    grid-template-columns: 1fr !important;
    /* Horizontal 0 - the `.hero > *` rule below insets the content by 20px.
       Vertical restored: `padding: 0` had removed the 64px/56px too, so the
       headline sat hard against the header. */
    padding: 48px 0 40px !important;
  }
  .hero-text, .hero-image {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Pad any direct child of the hero, not just those two classes. The
     contact and landing heroes wrap their content in an unclassed <div>,
     so the rule above never reached them and their text sat clipped
     against the screen edge. Same 20px, so the homepage is unchanged. */
  .hero > * {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}



/* ── Trust strip: let the long items wrap on narrow screens ───────────────────
   Each <li> has an inline white-space:nowrap so short items do not break
   mid-phrase in the desktop row. On a phone the Edmonton item is wider than the
   screen and ran off the page. Below 700px the items wrap, and the diamond
   separators are hidden because they only make sense in a row.
   !important is needed to beat the inline style. */
@media (max-width: 700px) {
  .trust-strip { gap: 10px !important; padding: 12px 14px !important; }
  .trust-strip li { white-space: normal !important; text-align: center; max-width: 100%; overflow-wrap: break-word; }
  .trust-strip li[aria-hidden="true"] { display: none !important; }
}

/* ── Consent tick ──────────────────────────────────────────────────────────
   Express consent, required before an enquiry may be added to any mailing
   list. Presented as a proper field rather than fine print, because that is
   what it is. Used by the Portfolio Review intake. //2026-09-01 */
.consent-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: #f7faf8;
  border: 1px solid #e3e9e4;
  border-radius: 8px;
}
.consent-box input[type="checkbox"] {
  /* `.field input` styles every input inside a .field as a TEXT box -
     padding, border, white background - which inflates this checkbox to
     27x21px and renders it as an empty rounded rectangle with no tick.
     Undo all of it and put the native control back, exactly as
     #email_consent and .entity-toggle already have to. */
  appearance: checkbox;
  -webkit-appearance: checkbox;
  accent-color: var(--green);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin: 3px 0 0 0;
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer;
}
.consent-box label {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: #555;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

/* ── Tax preparation forms list ─────────────────────────────────────────────
   These nine classes were used by /services/tax-preparation/forms/ but defined
   nowhere, so the page rendered as bulleted blue link text with the name,
   description and PDF tag all run together.

   The document icon is drawn here rather than loaded as an image: there is no
   icon asset on the site, an emoji renders differently on every machine (which
   is why it showed as a tiny grey glyph), and a drawn icon stays sharp at any
   size and survives printing. //2026-09-01 */

.forms-notice {
  background: var(--green-pale);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--charcoal);
}

.forms-section { margin: 0 0 36px; }

.forms-section-header {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--green-dark);
  padding: 0 0 10px;
  margin: 0 0 14px;
  border-bottom: 2px solid var(--green-pale);
}

.forms-list {
  list-style: none;          /* the default bullets sat outside the card */
  margin: 0;
  padding: 0 8px;
}

.forms-list li + li { border-top: 1px solid var(--border); }

/* The whole row is one link, so it is laid out here rather than on the li. */
.forms-list li > a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 12px;
  text-decoration: none;     /* everything was underlined blue */
  color: inherit;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.forms-list li > a:hover { background: var(--green-pale); }

/* Hide the emoji and draw a document icon in its place. */
.form-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 32px;
  font-size: 0;              /* swallows the emoji character */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M3 1h13l7 7v23a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z' fill='%23fff' stroke='%231b4530' stroke-width='1.6'/%3E%3Cpath d='M16 1v7h7' fill='none' stroke='%231b4530' stroke-width='1.6'/%3E%3Crect x='6' y='17' width='14' height='2' rx='1' fill='%23b8973a'/%3E%3Crect x='6' y='22' width='14' height='2' rx='1' fill='%23b8973a'/%3E%3Crect x='6' y='27' width='9' height='2' rx='1' fill='%23b8973a'/%3E%3C/svg%3E") no-repeat center / contain;
  margin-top: 2px;
}

.form-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;              /* lets long descriptions wrap instead of pushing the tag off */
  flex: 1 1 auto;
}

.form-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--green-dark);
  line-height: 1.4;
}

.forms-list li > a:hover .form-name { color: var(--green); }

.form-desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--mid, #5a6a60);
}

.form-tag {
  flex: 0 0 auto;
  align-self: center;
  background: var(--green-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 4px 9px;
  border-radius: 4px;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .forms-list li > a { gap: 11px; padding: 14px 8px; }
  .form-tag { align-self: flex-start; margin-top: 2px; }
  .form-name { font-size: 14px; }
}

/* ── Print / PDF ────────────────────────────────────────────────────────────
   There was no print stylesheet at all, which is why the green hero vanished:
   browsers drop background colours when printing unless told otherwise, so
   white hero text was being painted onto white paper.

   `print-color-adjust: exact` is the instruction that keeps those panels. It is
   applied only to the elements that NEED it - the dark banners and coloured
   callouts - rather than site-wide, so a page does not empty a toner cartridge
   for the sake of a page background.

   Navigation, buttons and share links are hidden: they do nothing on paper, and
   they take up the top third of every page. //2026-09-01 */

.print-url { display: none; }

@media print {

  /* ── The thing that made pages print BLANK ────────────────────────────────
     `.fade-up { animation: fadeUp 0.6s ease both; }` starts at opacity:0, and
     `both` holds that starting state until the animation runs. Animations do
     not run when printing, so every faded-in element printed at opacity 0 -
     a solid green banner with no words on it. Everything must be forced
     visible before anything else here matters. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Things that cannot be clicked on paper. The site header is NOT in this
     list any more: JD wants the printed page to carry the same masthead the
     real page does. Only the burger button goes, which is meaningless on
     paper. //2026-09-02 */
  .nav-mobile-btn,
  .share-btn, .ty-actions, .submit-btn, .breadcrumb,
  .footer-bottom, .hero-form-card,

  /* The footer's navigation columns run to 305mm - longer than an A4 sheet -
     and a printed page cannot be clicked, so they are pure noise on paper.
     The disclaimer and credentials below them are kept: those are the part
     that matters on a document somebody files. */
  .footer-grid, .footer-col, .footer-brand,


  /* The honeypot is an invisible field that traps bots. Printing it would
     both confuse the reader and advertise the trap. The reCAPTCHA token is
     machine data. Neither belongs on a compliance record. */
  input[name="website"], input[type="hidden"],

  /* Google's reCAPTCHA badge is position:fixed, and a fixed element REPEATS
     on every printed sheet. Its content is in an iframe that does not print,
     so it came out as a blank rectangle bottom-right of page after page. */
  .grecaptcha-badge, iframe[src*="recaptcha"] {
    display: none !important;
  }

  /* Decorative overlays print as a grey wash over the text. */
  .hero::after, .page-hero::after, .calendar-hero::after { display: none !important; }

  /* ── The hero ─────────────────────────────────────────────────────────────
     Printed WHITE with dark text rather than reversed out of green. Three
     reasons: a full-bleed dark banner eats a page and a lot of toner; it is
     the failure that made the text invisible in the first place; and it works
     whether or not the reader has background graphics switched on. */
  /* The hero prints as it looks on screen - dark green with the heading
     reversed out - because print-color-adjust keeps the panel and the
     animation reset above keeps the words. Both are needed: the colour
     without the opacity fix is a green rectangle with nothing on it, which
     is exactly what it printed as before. Kept COMPACT so a decorative
     banner does not spend a whole sheet. */
  .hero, .page-hero, .calendar-hero, .section-dark {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: #1b4530 !important;
    color: #fff !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 14px 18px !important;
    margin: 0 0 16px !important;
    page-break-inside: auto;
    break-inside: auto;
  }

  .hero *, .page-hero *, .calendar-hero *, .section-dark * {
    color: #fff !important;
    background: transparent !important;
    text-shadow: none !important;
  }

  .hero-eyebrow, .page-hero-eyebrow {
    color: #d9c07a !important;
    font-size: 8.5pt !important;
  }

  .hero h1, .page-hero h1 {
    font-size: 19pt !important;
    margin: 4px 0 6px !important;
    color: #fff !important;
  }

  .hero-sub { font-size: 10.5pt !important; color: #eaf1ec !important; }

  /* Force the hero's two columns for print. A printed sheet is about 718px
     wide in CSS terms, which trips the <=900px rule and stacks the photo
     UNDER the words - making the banner 128mm tall, nearly half a page. Side
     by side it is both shorter and closer to how the page looks on screen. */
  /* NB the grid goes on the hero's INNER wrapper, not on .hero itself: on the
     contact and landing pages the hero holds a single unclassed <div>, and
     that is what holds the words and the photo. Put on .hero it made a
     two-column grid with one item in it.

     :not([class]) matters. The HOME page hero is built differently - it holds
     TWO classed divs, .hero-text and .hero-image. A bare `.hero > div` turned
     each of THOSE into a two-column grid as well, which split the eyebrow
     from the headline and threw "You've worked hard to get here" over to the
     right-hand column with gaps around it. Restricting the rule to unclassed
     children leaves the home hero to stack normally. //2026-09-01 */
  /* -- The HOME hero, printed as it actually looks -----------------------
     On screen the home hero is two columns, `grid-template-columns: 65% 35%`,
     words on the left and the portrait on the right. That collapses to one
     column below 900px - and a printed sheet is only about 718px, so printing
     tripped the mobile breakpoint. The result was a stacked hero that did not
     resemble the page it came from, with the portrait stranded underneath.

     :has(.hero-image) matters. The contact and landing heroes are built
     differently - a single unclassed wrapper - and putting a two-column grid
     on .hero there produces a two-column grid with ONE item in it, which is
     the mistake the rule below already documents. Only the home hero has a
     .hero-image child, so that is what this keys on. //2026-09-01 */
  .hero:has(.hero-image) {
    grid-template-columns: 65% 35% !important;
    align-items: center !important;
    gap: 8mm !important;
  }

  /* -- The home hero is WHITE, not green ---------------------------------
     The rules near the top of this block paint every .hero solid green with
     white text. That is right for the contact and landing heroes, which are
     genuinely green banners. It is wrong for the HOME hero: measured at
     1500px, .hero is #fff with #222 text and only .hero-image carries the
     green gradient, behind the portrait. Printing it all green did not
     resemble the page at all.

     Scoped by :has(.hero-image) again, so the green heroes are untouched.
     //2026-09-01 */
  .hero:has(.hero-image) {
    background: #fff !important;
    color: #222 !important;
  }
  .hero:has(.hero-image) .hero-text,
  .hero:has(.hero-image) .hero-text * {
    color: #222 !important;
  }
  .hero:has(.hero-image) .hero-text h1 { color: #1b4530 !important; }
  .hero:has(.hero-image) .hero-text .hero-sub { color: #555 !important; }
  /* The pale gold eyebrow is for a dark banner; on white it needs to darken. */
  .hero:has(.hero-image) .hero-eyebrow { color: #7a6a2a !important; }

  /* The photo column keeps its green, forced so it survives a printer with
     background graphics switched off. */
  .hero-image {
    background-image: linear-gradient(135deg, #1b4530 0%, #2a6041 100%) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 6mm 4mm !important;
    border-radius: 3mm !important;
  }
  .hero-image, .hero-image * { color: #fff !important; }

  /* The call-to-action buttons. .btn-primary is white text on green: drop the
     fill and it becomes white text on white paper - invisible. Both are drawn
     explicitly so they read as the controls they are. */
  .hero-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4mm !important;
    margin: 5mm 0 !important;
  }
  .hero:has(.hero-image) .btn-primary {
    background: #1b4530 !important;
    color: #fff !important;
    border: 1px solid #1b4530 !important;
    padding: 2.5mm 5mm !important;
    border-radius: 1.5mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .hero:has(.hero-image) .btn-secondary {
    background: #fff !important;
    color: #1b4530 !important;
    border: 1.5px solid #1b4530 !important;
    padding: 2.5mm 5mm !important;
    border-radius: 1.5mm !important;
  }

  /* Taller than the 45mm general hero cap: in a 35%-wide column a 45mm photo
     looks stranded. Scoped to .hero-image so the other heroes keep their cap. */
  .hero .hero-image img { max-height: 70mm !important; }

  .hero > div:not([class]) {
    display: grid !important;
    grid-template-columns: 1fr 52mm !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .hero-image, .hero > div:last-child { align-self: center !important; }

  /* The hero photo stays - it is part of how the page reads. Capped so it
     sits beside the words as it does on screen, rather than taking a sheet
     of its own, which is what it did unconstrained at 814px tall. */
  .hero img, .page-hero img, .calendar-hero img {
    display: block !important;
    max-height: 38mm !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
    border-radius: 6px;
  }

  /* Panels that carry meaning rather than decoration keep their colour. */
  .forms-section-header, .form-tag, .forms-notice {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── The booking form, printed ───────────────────────────────────────────
     JD prints these for COMPLIANCE, so the record has to show what is asked:
     every label, every field, and the consent wording where a form has one.
     Browsers strip input borders when printing, so the boxes are drawn back
     in explicitly - otherwise the labels sit above empty white space and the
     record does not show that a field existed at all. */
  form, .form-card, #form-wrap, .lp-form-box, .consent-box {
    display: block !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .form-card { border-top: 1px solid #b7cec0 !important; padding-top: 10px !important; }

  form label {
    display: block !important;
    font-weight: 700 !important;
    font-size: 9.5pt !important;
    color: #1b4530 !important;
    margin: 0 0 2px !important;
  }

  form input[type="text"], form input[type="email"], form input[type="tel"],
  form input[type="date"], form select, form textarea {
    display: block !important;
    width: 100% !important;
    min-height: 8mm !important;
    border: 1px solid #9aa79f !important;
    border-radius: 3px !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    margin: 0 0 7px !important;
  }

  form textarea { min-height: 20mm !important; }

  /* The submit button PRINTS. On a compliance record it is part of what the
     person was shown - the wording they acted on. Drawn as an outline rather
     than a filled block so it reads as a record of the control, not as
     something to press on paper. */
  .submit-btn, button[type="submit"], input[type="submit"] {
    display: inline-block !important;
    background: #fff !important;
    color: #1b4530 !important;
    border: 1.5px solid #1b4530 !important;
    border-radius: 4px !important;
    padding: 2.5mm 6mm !important;
    font-weight: 700 !important;
    font-size: 9.5pt !important;
    margin: 3mm 0 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* -- The newsletter banner is not a compliance form -----------------------
     The rules above paint `form` white and set labels dark green, so that the
     booking and service forms print as a clean record. The newsletter signup
     sits INSIDE a coloured banner, where that white came out as a slab behind
     the fields and the consent line.

     Simply removing the white is not enough: the banner has two variants, and
     on the dark green one `color:#1b4530` on the consent label would be dark
     green on dark green - invisible. The white block was accidentally the only
     thing keeping that readable. So the label inherits the banner's own text
     colour instead, which is correct on cream AND on dark green. //2026-09-01 */
  section[aria-label="Newsletter Signup"] form,
  section[aria-label="Newsletter Signup"] .consent-box {
    background: transparent !important;
    border: 0 !important;
  }
  section[aria-label="Newsletter Signup"] form label {
    color: inherit !important;
    font-weight: 400 !important;
    display: inline !important;
  }

  /* The honeypot AGAIN, after the field styling above. `input[name="website"]`
     in the hide list loses to `form input[type="text"]` further down - both
     carry !important, so the more specific, later rule wins and the trap
     printed as a stray unlabelled box on the compliance record. */
  form input[name="website"],
  form input[name="g-recaptcha-response"] {
    display: none !important;
  }

  /* Tick boxes must be visible as boxes, or a printed record cannot show
     which options were offered. */
  form input[type="checkbox"], form input[type="radio"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 3.5mm !important;
    height: 3.5mm !important;
    border: 1px solid #333 !important;
    margin-right: 2mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .avail-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2mm !important;
    margin: 0 0 7px !important;
  }

  /* The option is the flex row - box then words. The LABEL must stay a block:
     it holds a <br> and a <small>, and making it flex laid those out
     side-by-side and pushed the tick box on top of the word. */
  .avail-option {
    display: flex !important;
    align-items: center !important;
    gap: 2.5mm !important;
    border: 1px solid #ccd8d1 !important;
    border-radius: 3px !important;
    padding: 1.6mm 2mm !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .avail-option label {
    display: block !important;
    font-weight: 400 !important;
    font-size: 9pt !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: #222 !important;
  }

  .avail-option label small {
    display: block !important;
    font-size: 7.5pt !important;
    color: #667 !important;
  }

  /* The tick box is position:absolute on screen - the visual design places it
     over the option. Flex cannot lay out an absolutely-positioned child, so
     it printed sitting ON TOP of the word. Returning it to the normal flow
     is what lets the row read as [box] [words]. */
  .avail-option input[type="checkbox"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .avail-option label { padding-left: 0 !important; }

  /* Consent wording is the part a compliance file exists to evidence. */
  .consent-box { border: 1px solid #b7cec0 !important; padding: 6px 8px !important; margin-top: 6px !important; }
  .consent-box label { font-weight: 400 !important; font-size: 8.5pt !important; }
  body {
    background: #fff !important;
    font-size: 11pt;
    line-height: 1.5;
    color: #222;
  }

  /* Side padding goes, because a printed sheet has its own margins - but the
     VERTICAL padding has to stay or consecutive sections butt straight into
     one another, which is what pushed the tax calendar and the retirement
     countdown together on sheet 6. 5mm each side gives 10mm between any two
     neighbouring sections. //2026-09-02 */
  .section, .inner {
    padding: 5mm 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  /* ── The "Ready to begin?" panel on /about/ ──────────────────────────────
     Three separate faults made this one panel print badly, all of them caused
     by rules further up this stylesheet:

     1. It carries BOTH classes (`section section-dark`). `.section-dark` sets
        `padding: 14px 18px`, but `.section, .inner` above sets `padding: 5mm 0`
        and, being LATER with equal specificity, wins - so the side padding went
        and every line sat hard against the green edge. `.section.section-dark`
        raises the specificity and puts the inset back.

     2. `.section-dark *` sets `background: transparent !important` to stop
        translucent overlays printing as grey slabs. It also stripped the GOLD
        off "Book Your Free Call", which printed as bare text on green. Only an
        element that declares its own inline background is exempted.

     3. Its `grid-template-columns:1fr 360px` was collapsed by the sitewide
        mobile rule, so the photo stacked underneath and took a whole sheet of
        its own with 613 characters on it. Two columns restored, photo capped.
     //2026-09-02 */
  .section.section-dark {
    padding: 14px 18px !important;
  }

  /* The regulatory disclosure and the four credential logos are ONE statement.
     They were splitting: the last line of the disclaimer was clipped by the
     running URL at the foot of a sheet and the logos sat alone on the next one
     with nothing else on it. break-after/break-before bind the group; the
     logos row was unclassed, so footer.php now gives it .footer-credentials.
     This is the compliance block - it must never print half-cut. //2026-09-02 */
  .footer-disclaimer {
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }
  .footer-credentials {
    break-inside: avoid;
    page-break-inside: avoid;
    break-before: avoid;
    page-break-before: avoid;
  }
  .section-dark [style*="background:var(--gold)"],
  .section-dark [style*="background: var(--gold)"] {
    background: #c9a84c !important;
    color: #1b4530 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
  }
  .section-dark [style*="grid-template-columns:1fr 360px"] {
    display: grid !important;
    grid-template-columns: 1fr 52mm !important;
    gap: 8mm !important;
    align-items: center !important;
  }
  .section-dark [style*="grid-template-columns:1fr 360px"] img {
    width: 52mm !important;
    max-width: 52mm !important;
    height: 62mm !important;
    object-fit: cover !important;
  }

  /* Do not split a card, a list row or a heading across two sheets. */
  /* `table` was in this list, which meant a LONG table jumped whole to the next
     sheet and left most of a page blank behind it - "What We Help You With" sat
     alone at the foot of a sheet with its table on the following one. A table
     should flow across sheets; it is the ROWS that must not be cut in half. */
  .service-card, .who-point, .forms-list li, .forms-section,
  .ty-card, .card, blockquote, figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* -- Keep a heading with what it introduces ------------------------------
     This was deliberately `auto` for a while, on the grounds that "keep with
     next" moves the whole group to the next sheet when the following block is
     tall, leaving a mostly blank page. That was true while `table` sat in the
     keep-together list above: the entire table was one unbreakable block, so
     the heading dragged all of it.

     Tables now break row by row, so the objection has gone with it. A heading
     moving down to sit with its first rows costs a line or two, not a page.
     //2026-09-02 */
  h1, h2, h3, h4, .forms-section-header, .section-title, .section-label {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* A printed link is a dead end unless the address is on the page - but only
     worth showing for EXTERNAL ones; "/contact/" tells the reader nothing. */
  /* Print the address after an external link, so a printed page is not full
     of dead ends - but NOT for a link that is just a logo. The credential
     badges in the footer are links, and appending a 60-character URL to each
     one wrapped them onto separate lines and destroyed the row. */
  a[href^="http"]:not([href*="joannedavid"]):not([href*="hostingersite"])::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }

  footer a::after,
  a:has(img)::after,
  .credential-badges a::after {
    content: none !important;
  }

  /* Images need a HEIGHT cap, not just a width one. Unconstrained, the hero
     photo printed 814px tall - a whole sheet holding one picture - and each
     footer credential logo came out at over 430px. max-width alone does
     nothing about that. */
  img { max-width: 100% !important; height: auto !important; }

  .hero img, .page-hero img, .calendar-hero img {
    max-height: 45mm !important;
    width: auto !important;
  }

  /* -- Images that run off the bottom of a sheet -------------------------
     `max-width:100%` says nothing about HEIGHT: an image narrower than the
     paper can still be taller than it. The About portrait printed 216mm on a
     246mm sheet - a whole page to itself with not one word on it, which is
     why sheet 10 of the home page looked blank.

     width:auto goes with it. With a definite width and only max-height set,
     the browser squashes the picture instead of scaling it, because aspect
     ratio is preserved only when BOTH are free to move. //2026-09-01 */
  /* The frame around the portrait keeps its own shape with `aspect-ratio:3/4`.
     At 184mm wide that forces it 246mm tall - a full sheet - no matter how
     small the picture inside is. Capping the image alone therefore did not
     fix the wasted page, it just left 168mm of empty white box under a small
     photo. The frame has to be told to hug its contents on paper. */
  /* -- The About section -------------------------------------------------
     Two columns on screen - portrait left in a 340px column, words right -
     collapsed to one by the 900px rule, because a sheet is ~718px. In print
     the photo therefore sat ABOVE the text and the heading was cut in half
     across sheets 7 and 8: "...speaks your language - and" / "understands
     your world."

     Kept whole as well as side by side. The block is about 100mm, well inside
     a 246mm sheet, so avoiding the break here cannot strand a page. //2026-09-02 */
  .about-grid {
    display: grid !important;
    grid-template-columns: 60mm 1fr !important;
    gap: 8mm !important;
    align-items: center !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .about-text { break-inside: avoid; page-break-inside: avoid; }

  .about-photo {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }

  .about-photo img {
    max-height: 78mm !important;
    width: auto !important;
  }

  /* A net for anything added later. No !important, so the specific caps above
     - hero 45mm, footer 12mm, portrait 78mm - all still win. */
  img { max-height: 120mm; }

  /* -- Credential badges printing ON TOP of the words --------------------
     .hero-credentials is a flex row: [two badges] [sentence]. On a printed
     sheet (~718px) the row runs out of width, and because a flex item shrinks
     by default the badge box was squeezed to 25mm while the two images inside
     still needed ~36mm. Images do not shrink with their box, so the FCSI badge
     overflowed to the right and landed on "designation of".

     Worth noting how this hid: measuring the CONTAINER showed no overlap at
     all, because the container really had moved out of the way. Only the
     images had not. //2026-09-01 */
  /* -- Two-column sections, collapsed by a mobile rule ---------------------
     The stylesheet carries a blanket mobile rule:

         @media (max-width: 900px) {
           [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
         }

     A printed sheet is about 718px, so that fires and EVERY inline grid on the
     site stacks when printed - which is why the free tax calendar panel came
     out underneath its own description instead of beside it. The same trap as
     the hero, the trust strip and the header: printing was rendering the phone
     layout, not the page.

     Restored only for grids that are genuinely a 1fr 1fr pair; anything with a
     different template is left stacked, which is usually right on paper.
     The 64px design gap is too wide for a 195mm sheet. //2026-09-02 */
  /* The same blanket mobile rule stacks the inner grid of .page-hero, which 62
     pages use: text on the left, portrait in a fixed right-hand column. In
     print the photo dropped underneath and left a large empty green area
     beside the words. Targeting .page-hero > div rather than each pixel width
     covers all of them at once - the sites use 200px, 260px, 280px, 300px and
     320px for that column. 52mm is the same right-hand column the contact and
     landing heroes already print at. //2026-09-02 */
  .page-hero > div {
    display: grid !important;
    grid-template-columns: 1fr 52mm !important;
    gap: 8mm !important;
    align-items: center !important;
  }

  /* Non-hero sections built the same way: a flexible column beside a fixed one. */
  [style*="grid-template-columns:1fr 320px"], [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 300px"], [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 280px"], [style*="grid-template-columns: 1fr 280px"],
  [style*="grid-template-columns:1fr 260px"], [style*="grid-template-columns: 1fr 260px"],
  [style*="grid-template-columns:1fr 200px"], [style*="grid-template-columns: 1fr 200px"] {
    grid-template-columns: 1fr 50mm !important;
    gap: 8mm !important;
    align-items: center !important;
  }
  [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8mm !important;
  }

  /* Card grids built with auto-fit/minmax. On screen the insight categories sit
     three to a row; the blanket mobile rule collapses them to one for print, so
     each small card took a full sheet width and the section ran to pages of
     mostly white. minmax no longer applies once the template is replaced, so
     the stated 300-380px minimums do not fight this. //2026-09-02 */
  [style*="repeat(auto-fit"], [style*="repeat(auto-fill"],
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4mm !important;
    align-items: stretch !important;
  }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8mm !important;
    align-items: center !important;
  }

  /* -- The masthead ------------------------------------------------------
     Printed as a slim line rather than the full sticky bar: the real header is
     white with a dark wordmark, so it needs no ink beyond a rule under it. The
     green CTA button is dropped - it is the one thing on the bar that only
     means anything when it can be clicked. //2026-09-02 */
  header {
    position: static !important;
    /* Clears the fixed running head, which reserves no space of its own. */

    box-shadow: none !important;
    background: #fff !important;
    border-bottom: 1px solid #c8d4cc !important;
    padding: 0 0 3mm !important;
    margin: 0 0 5mm !important;
  }
  header, header * { color: #1b4530 !important; }
  /* The wordmark is two-tone on screen - dark name, gold designations - and the
     blanket colour above flattened it. */
  header .nav-logo span { color: #b8973a !important; }

  /* The nav collapses to a burger below 1180px and a sheet is ~718px, so the
     links were hidden exactly as they are on a phone. Put back as a plain row.
     The dropdowns are hidden explicitly: "Who We Serve" alone holds nine
     children, and an unfurled menu would swamp the masthead. */
  header nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 3mm 6mm !important;
    padding: 0 !important;
  }
  header .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    gap: 4mm !important;
  }
  header .nav-links a { font-size: 8pt !important; text-decoration: none !important; }
  header .dropdown { display: none !important; }
  /* The masthead CTA. Dropped at first on the reasoning that a button which
     cannot be pressed earns no space - but the point of this print is to look
     like the page, and on the page it is the most prominent thing on the bar.
     Filled green with the colour forced, because white-on-green becomes
     white-on-white the moment the fill is dropped. //2026-09-02 */
  header .nav-cta {
    display: inline-block !important;
    background: #2a6041 !important;
    color: #fff !important;
    border-radius: 1.5mm !important;
    padding: 1.6mm 3.5mm !important;
    font-size: 7.5pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  header .nav-cta, header .nav-cta * { color: #fff !important; }

  /* -- The footer was there, but unreadable ------------------------------
     footer is #1C211E with rgba(255,255,255,0.78) text. The background drops
     when printing, so the disclaimer came out as pale grey on white - JD read
     it as missing. Inverting is right here rather than forcing the dark panel:
     this is the registrant disclosure on a filed document, so it wants to be
     legible, not to empty a toner cartridge. //2026-09-02 */
  footer {
    background: #fff !important;
    border-top: 1px solid #c8d4cc !important;
    padding-top: 4mm !important;
  }
  footer, footer *, .footer-disclaimer, .footer-disclaimer * {
    color: #333 !important;
    background: transparent !important;
  }
  .footer-disclaimer a, footer a { color: #1b4530 !important; }

  /* -- Panels whose background is a CSS VARIABLE --------------------------
     The rules further down match a literal `background:#1b4530` or a literal
     gradient. They miss `background:var(--green-dark)`, which 26 files use -
     including the free tax calendar panel on the home page. Same failure as
     everywhere else tonight: white text on a background that never printed.
     Matching on the variable NAME catches them. //2026-09-02 */
  [style*="background:var(--green-dark)"], [style*="background: var(--green-dark)"],
  [style*="background:var(--green)"],      [style*="background: var(--green)"],
  [style*="background:var(--gold)"],       [style*="background: var(--gold)"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The free-consultation card on the fees page was being cut in half, leaving
     the heading and the first two items on one sheet and the rest overleaf.
     It is one offer and should be read as one. //2026-09-02 */
  .consult-card {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 6mm !important;
  }

  /* -- The gold call-to-action band --------------------------------------
     47 pages carry one, and it was in the hide list above on the reasoning
     that a button nobody can press earns no space. Wrong call, same as the
     masthead: the print is meant to look like the page, and this band is one
     of the loudest things on it. Gold forced, because dropping the fill would
     leave dark text floating with nothing round it. //2026-09-02 */
  .cta-band {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6mm !important;
    background: #c9a84c !important;
    padding: 7mm 8mm !important;
    margin: 6mm 0 !important;
    border-radius: 2mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .cta-band, .cta-band h2, .cta-band p { color: #1b4530 !important; }
  .cta-band h2 { font-size: 15pt !important; margin: 0 !important; }
  .cta-band p  { font-size: 10pt !important; margin: 2mm 0 0 !important; }
  /* The band's own button is dark green on gold - keep that, not the generic
     green-on-white treatment the button rules would otherwise give it. */
  .cta-band .btn-primary, .cta-band .btn-dark, .cta-band a {
    background: #1b4530 !important;
    border: 1px solid #1b4530 !important;
  }
  .cta-band .btn-primary, .cta-band .btn-primary *,
  .cta-band .btn-dark, .cta-band .btn-dark * { color: #fff !important; }

  /* The testimonials sat hard against the edges of their green panel, because
     `.section, .inner { padding: 0 }` further up strips section padding for
     print. On screen the grid has room to breathe inside the green, and that
     is most of what makes it look considered rather than crammed. //2026-09-02 */
  #testimonials {
    padding: 9mm 9mm 11mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #testimonials .section-title { margin-bottom: 2mm !important; }

  /* Three across, as on screen. The rule lives in home.css, not inline, so the
     inline-style restores further up do not reach it - and its own 900px
     breakpoint collapses it to one column on a ~718px sheet. //2026-09-02 */
  .testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5mm !important;
    margin: 7mm auto 0 !important;
  }
  .testimonial-card { padding: 5.5mm 5mm !important; }
  .testimonial-quote { font-size: 1.4rem !important; margin-bottom: 2mm !important; }
  .testimonial-text { font-size: 9pt !important; line-height: 1.5 !important; }
  .testimonial-author { font-size: 8pt !important; }

  /* A testimonial split down the middle by a page break leaves the quote on
     one sheet and the person who said it on the next. */
  .testimonial-card, .testimonials-grid > * {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* -- Buttons, everywhere ------------------------------------------------
     A button is white text on a coloured fill. Printing drops the fill, so
     .btn-primary came out as pale text with nothing round it - 131 of them
     across the site, and only the ones inside the home hero had been given a
     print treatment. JD: "if there is a button on the page then please show it
     as a button."

     Filled buttons keep their fill, forced with print-color-adjust so a printer
     with background graphics off still shows them. Outlined ones are drawn as
     an outline. Nothing here makes them look pressable - they are a record of
     the control that was on the page. //2026-09-02 */
  .btn-primary, .btn-dark, .btn-download, .ty-btn-primary, .sleek-btn, .verify-btn {
    display: inline-block !important;
    background: #2a6041 !important;
    border: 1px solid #1b4530 !important;
    border-radius: 1.5mm !important;
    padding: 2.2mm 5mm !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .btn-primary, .btn-primary *, .btn-dark, .btn-dark *,
  .btn-download, .btn-download *, .ty-btn-primary, .ty-btn-primary *,
  .sleek-btn, .sleek-btn *, .verify-btn, .verify-btn * { color: #fff !important; }

  .btn-secondary, .ty-btn-secondary {
    display: inline-block !important;
    background: #fff !important;
    border: 1.2pt solid #1b4530 !important;
    border-radius: 1.5mm !important;
    padding: 2.2mm 5mm !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  .btn-secondary, .btn-secondary *, .ty-btn-secondary, .ty-btn-secondary * {
    color: #1b4530 !important;
  }

  /* Gold keeps its own colour; dark text on gold is what it uses on screen. */
  .btn-gold {
    display: inline-block !important;
    background: #c9a84c !important;
    border-radius: 1.5mm !important;
    padding: 2.2mm 5mm !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .btn-gold, .btn-gold * { color: #1b4530 !important; }

  /* A printed button must not be split down the middle by a page break. */
  .btn-primary, .btn-secondary, .btn-dark, .btn-gold, .btn-download,
  .ty-btn, .sleek-btn, .verify-btn { break-inside: avoid; page-break-inside: avoid; }

  /* -- FAQs ---------------------------------------------------------------
     Two different FAQ builds on this site, each with its own problem.

     1. Inline cards (46 of them) carry `padding:28px 32px` in a column with a
        24px gap. Generous on screen; on paper it is a lot of white between
        short answers, and a card could be cut in half by a page break.

     2. The accordion (.faq-item / .faq-question / .faq-answer, on 8 pages)
        keeps every answer at `display:none` until it is clicked. Nothing can
        be clicked on paper, so those pages printed a list of QUESTIONS WITH NO
        ANSWERS. Opening them in print is the whole point of printing an FAQ.
        The +/- affordance goes too - it promises an interaction that no longer
        exists. //2026-09-02 */
  [style*="padding:28px 32px"] {
    padding: 4mm 5mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  [style*="flex-direction:column;gap:24px"] { gap: 3mm !important; }

  .faq-answer, .faq-a, .faq-a-inner {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 0 3mm !important;
  }
  .faq-question, .faq-q { padding: 3mm 0 1mm !important; }
  .faq-question::after, .faq-q::after, .faq-icon { content: none !important; display: none !important; }
  .faq-item, .faq-list > * {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .faq-list { gap: 0 !important; margin-top: 4mm !important; }

  /* -- The trust strip -----------------------------------------------------
     A dark green band with pale text, flowing across in a wrapped row. It was
     never mentioned in this print block, so it printed as pale grey on white:
     the background dropped (JD prints with Background graphics OFF, same
     reason the testimonial panels needed forcing) and the text had nothing
     left to sit on.

     It also stacked one item per line. Nothing forces a column - the items are
     simply too wide to pair up on a 195mm sheet when they were sized for a
     1500px screen. Dropping the type a little lets them pair again, which is
     what the band looks like in real life. //2026-09-01 */
  .trust-strip {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: #1a3c2e !important;
    color: #fff !important;
    /* A responsive rule turns this strip into a COLUMN at narrow widths, and a
       printed sheet is ~718px, so printing tripped it. That, not the width of
       the items, is what put one per line: measured at 718px the first five sit
       in 645px against 676px available - they fit on one row easily. */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    font-size: 8pt !important;
    line-height: 1.45 !important;
    gap: 2mm 4mm !important;
    padding: 3.5mm 5mm !important;
    margin: 0 0 5mm !important;
    border-radius: 2mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .trust-strip *, .trust-strip strong, .trust-strip li {
    color: #fff !important;
    background: transparent !important;
  }

  /* Each <li> carries an INLINE `font-size:15px; white-space:nowrap`. The nowrap
     is what put one item per row: every phrase stayed a single unbreakable
     block, and at 195mm only one fits. The inline size also beat the font-size
     set on the strip above, since an inherited value loses to an explicit one.
     Both need !important here to override the attribute. */
  .trust-strip li {
    font-size: 8pt !important;
    white-space: normal !important;
  }
  .trust-strip li[aria-hidden="true"] { font-size: 8pt !important; }
  /* The gold star separators are decoration; at this size they earn their space
     only while items actually sit side by side, which they now do. */
  .trust-strip li[aria-hidden="true"] { color: #c9a84c !important; }

  /* -- Coloured banners breaking across sheets ---------------------------
     These are full-bleed coloured <section>s, so a page break through one
     leaves a slab of ink with nothing on it. Three did exactly that: the
     newsletter banner orphaned "No spam. Unsubscribe anytime." at the top of
     sheet 4, the free-checklist banner broke mid-panel, and the portfolio
     review panel left a large empty green block on the last sheet.

     Measured every one of them first, because `page-break-inside: avoid` on
     an element TALLER than a sheet is what once pushed the hero to page 2 and
     left page 1 completely blank. The tallest banner here is the portfolio
     review at 206mm against 246mm of usable sheet, so all six fit and none
     can trigger that. Anything added later that does not fit will show up as
     a near-empty sheet in the print - check for it. //2026-09-01 */
  section[aria-label], .cta-band {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hero-credentials .credential-badges {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  footer img, .footer-brand img, .credential-badges img {
    max-height: 12mm !important;
    width: auto !important;
  }

  /* The wrappers around those images carry their own heights. */
  .hero > div > div, footer > div > a > div {
    height: auto !important;
    min-height: 0 !important;
  }


  /* -- Dark green panels: testimonials and the reassurance boxes -------------
     41 of these across 21 pages, written as inline styles: cream text on dark
     green. Printers drop background colours by default, which would print them
     as white text on white paper.

     `print-color-adjust: exact` is the instruction that overrides that and
     keeps the panel green on paper. It is applied ONLY to these panels rather
     than site-wide, so a page does not flood the sheet with ink for the sake of
     a background.

     An earlier attempt inverted these to dark-on-white instead, on the theory
     that it would survive a printer with backgrounds switched off. It does -
     but it also throws away the green for everyone else, and the green is the
     point: it is what makes the quote read as a quote. Keep it green.

     The selector matches `background:#1b4530`, NOT a bare `#1b4530`. That same
     colour is used inline as a TEXT colour in 166 other places on this site,
     and a looser selector would catch every one of them. //2026-09-01 */

  /* -- Why hiding the footer here quietly did nothing --------------------
     footer.php carries its own inline <style> block that re-declares
     `.footer-grid { display: grid !important }`. That block sits in the
     document AFTER this stylesheet, so at equal specificity AND equal
     importance it wins on source order. The print rule above listed
     .footer-grid, .footer-col and .footer-brand and had no effect at all -
     the footer navigation and the "Fee-only financial and tax planning..."
     tagline printed on every sheet regardless.

     Doubling the class raises specificity above the inline block without
     depending on the footer tag or its ancestry. .footer-disclaimer is
     deliberately NOT hidden: the registrant and product disclosure is the
     part that matters on a document somebody files. //2026-09-01 */
  .footer-grid.footer-grid,
  .footer-col.footer-col,
  .footer-brand.footer-brand,
  .footer-desc.footer-desc {
    display: none !important;
  }

  /* Same trap as the testimonial panels, in a second disguise. Nineteen files
     carry `linear-gradient(135deg, #1a3c2e, #2e5c45)` with near-white text on
     it. The rule below only matches a FLAT `background:#1b4530`, so none of
     those gradients were covered - and a printer with background graphics off
     would render every one of them as white text on white paper, exactly the
     fault JD reported on the quote panel. //2026-09-01 */
  [style*="linear-gradient(135deg, #1a3c2e"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  [style*="background:#1b4530"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }


  /* Extra top margin makes room for the running head, which sits in it. */
  @page { margin: 12mm 12mm; }

  .print-url {
    display: block !important;
    position: fixed !important;
    /* Chrome will NOT render a fixed element outside the page content box.
       Negative top sent it to the foot of the previous sheet; negative bottom
       removed it from every sheet. bottom:0 is the only position that works,
       so it sits at the foot of the content area with a white ground. */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 7.5pt !important;
    color: #555 !important;
    letter-spacing: 0.02em !important;
    padding-top: 1.5mm !important;
    margin-top: 4mm !important;
    border-top: 0.4pt solid #c8d4cc !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}