/* =========================================================
   Unlocal Advisory — shared stylesheet
   ========================================================= */

:root {
  --olive-green: #22301f;
  --olive-green-dark: #1a2517;
  --forest-green: #1f2e1c;
  --forest-green-10: rgba(31, 46, 28, 0.1);
  --forest-green-20: rgba(31, 46, 28, 0.18);
  --lime-yellow: #e3f66b;
  --off-white: #f7f6f1;
  --white: #ffffff;
  --white-5: rgba(255, 255, 255, 0.05);
  --white-20: rgba(255, 255, 255, 0.2);
  --black: #0e130c;
  --black-30: rgba(14, 19, 12, 0.3);
  --text-muted: #5b6357;

  --radius-sm: 8px;
  --radius-md: 10px;
  --container: 1460px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  color: var(--forest-green);
  background: var(--off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

ul { margin: 0; padding: 0; list-style: none; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
h3 { font-size: 1.4rem; font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 700; }
h6 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0; font-size: 1rem; }

.pretitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--olive-green);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
}

.pretitle.on-dark {
  background: var(--white-20);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--olive-green);
  color: var(--white);
}
.btn-primary:hover { background: var(--olive-green-dark); }

.btn-light {
  background: var(--white);
  color: var(--olive-green);
}

.btn-outline {
  background: transparent;
  color: var(--forest-green);
  border: 1px solid var(--forest-green-20);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--forest-green-10);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
  max-width: 1820px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.nav-logo img { height: 74px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex: 1;
}

.nav-links a {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--forest-green);
}
.nav-links a.active,
.nav-links a:hover { color: var(--olive-green); }

.nav-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--forest-green);
  margin: 6px 0;
}

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

.hero {
  background: var(--olive-green);
  color: var(--white);
  padding: 160px 0 110px;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.hero h1 { color: var(--white); }

.hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.8);
  max-width: 560px;
}

.hero-image-wrap {
  position: relative;
  margin-top: -70px;
  z-index: 1;
}
.hero-image-wrap img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* small page hero (non-home) */
.page-hero {
  background: var(--olive-green);
  color: var(--white);
  padding: 150px 0 170px;
  position: relative;
}
.page-hero h1 { color: var(--white); margin-top: 18px; }
.page-hero p { color: rgba(255,255,255,0.78); margin-top: 18px; max-width: 620px; font-size: 1.1rem; }
.page-hero-image {
  margin: -100px 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 420px;
}
.page-hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sections ---------- */

.section { padding: 150px 0; }
.section-tight { padding: 90px 0; }
.section-off { background: var(--off-white); }
.section-white { background: var(--white); }

.section-head {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 56px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.section-head p { font-size: 1.1rem; color: var(--text-muted); }

/* ---------- Service cards (home + services index) ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--forest-green-10);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.service-card:hover {
  box-shadow: 0 16px 36px rgba(31,46,28,0.1);
  transform: translateY(-3px);
}

.service-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.service-card p { color: var(--text-muted); }

.service-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  background: var(--off-white);
  border: 1px solid var(--forest-green-10);
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-green);
}

.service-card .quote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--forest-green-10);
  padding-top: 20px;
  margin-top: auto;
  font-weight: 700;
  font-size: 1.05rem;
}

/* ---------- Stat card ---------- */

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.stat-card {
  background: var(--black-30);
  border-radius: var(--radius-md);
  padding: 44px 40px;
  color: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.stat-card .num { font-size: 2.6rem; font-weight: 800; }
.stat-card .label { font-size: 0.95rem; color: rgba(255,255,255,0.75); }

/* ---------- Steps / four ways ---------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step-card {
  background: var(--white);
  border: 1px solid var(--forest-green-10);
  border-radius: var(--radius-md);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.step-card img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-sm); }
.step-card h3 { font-size: 1.2rem; }

/* ---------- Reviews / testimonial ---------- */

.reviews {
  background: var(--olive-green);
  color: var(--white);
  padding: 70px 0 110px;
  position: relative;
}
.review-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--white-20);
  border-radius: var(--radius-md);
  padding: 44px;
  max-width: 620px;
  margin-left: auto;
}
.review-card p { font-size: 1.2rem; margin-bottom: 24px; line-height: 1.5; }
.review-card .who { font-weight: 700; font-size: 1.05rem; }
.review-card .role { color: rgba(255,255,255,0.7); font-size: 0.9rem; }

/* ---------- Pricing table ---------- */

.pricing-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--forest-green-10);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
.pricing-col {
  padding: 40px 36px;
  border-left: 1px solid var(--forest-green-10);
  display: flex;
  flex-direction: column;
}
.pricing-col:first-child { border-left: none; background: var(--off-white); }
.pricing-col.featured { background: var(--lime-yellow); border-left: none; border-right: none; }
.pricing-col h6 { margin-bottom: 6px; font-size: 1.15rem; }
.pricing-col .plan-desc { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 24px; }
.pricing-col ul { display: flex; flex-direction: column; }
.pricing-col li {
  padding: 14px 0;
  border-bottom: 1px solid var(--forest-green-10);
  font-size: 0.95rem;
}
.pricing-col .fine { font-size: 0.82rem; color: var(--text-muted); margin-top: 20px; }
.pricing-col .btn { margin-top: 24px; align-self: flex-start; }

/* ---------- FAQ accordion ---------- */

.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--forest-green-10);
  padding: 24px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 16px; color: var(--text-muted); font-size: 0.98rem; }

/* ---------- Content blocks (service/blog/legal body) ---------- */

.prose { max-width: 800px; display: flex; flex-direction: column; gap: 22px; }
.prose h2 { margin-top: 14px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.prose h3 { margin-top: 8px; font-size: 1.25rem; }
.prose p { font-size: 1.05rem; line-height: 1.7; }
.prose ul { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; list-style: disc; }
.prose li { font-size: 1.02rem; line-height: 1.6; }
.prose em { color: var(--text-muted); }

.includes-list { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; margin-top: 8px; }

/* ---------- Cross-link cards ---------- */

.crosslink-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.crosslink-card {
  border: 1px solid var(--forest-green-10);
  border-radius: var(--radius-md);
  padding: 26px;
  background: var(--white);
  font-weight: 700;
  font-size: 1rem;
}
.crosslink-card:hover { border-color: var(--olive-green); }

/* ---------- Blog cards ---------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-card img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-md); }
.blog-card .meta { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.blog-card h3 { font-size: 1.2rem; }
.blog-card p { font-size: 0.95rem; color: var(--text-muted); }

/* ---------- Contact form ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.form-field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.form-field label { font-size: 0.85rem; font-weight: 700; }
.form-field input,
.form-field textarea {
  border: 1px solid var(--forest-green-20);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: var(--font);
  font-size: 1rem;
  background: var(--white);
}
.form-field textarea { min-height: 130px; resize: vertical; }

.dm-box {
  background: var(--lime-yellow);
  border-radius: var(--radius-md);
  padding: 50px;
}

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

.site-footer {
  background: var(--olive-green);
  color: var(--white);
  padding: 90px 0 48px;
}
.footer-card {
  background: var(--white-5);
  border: 1px solid var(--white-20);
  border-radius: var(--radius-md);
  padding: 60px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr;
  gap: 34px;
  border-bottom: 1px solid var(--white-20);
  padding-bottom: 40px;
}
.footer-col { padding-left: 28px; border-left: 1px solid var(--white-20); display: flex; flex-direction: column; gap: 18px; }
.footer-col:first-child { padding-left: 0; border-left: none; }
.footer-col h6 { text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); }
.footer-col a { font-size: 0.98rem; color: rgba(255,255,255,0.9); }
.footer-col a:hover { color: var(--lime-yellow); }
.footer-logo img { width: 165px; height: auto; background: var(--white); border-radius: 4px; padding: 8px; }
.footer-tagline { font-size: 0.92rem; color: rgba(255,255,255,0.75); }
.footer-badges { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-badges img { width: 140px; border-radius: 4px; }
.contact-icons { display: flex; flex-direction: column; gap: 14px; }
.contact-icons .row { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; }
.contact-icons .row img { width: 22px; height: 22px; filter: invert(1); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}
.footer-bottom .links { display: flex; gap: 18px; }

/* ---------- 404 ---------- */

.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  padding: 130px 40px;
}
.error-page .code { font-size: 6rem; font-weight: 800; color: var(--olive-green); }

/* ---------- Responsive ---------- */

@media (max-width: 1280px) {
  .container { padding: 0 28px; }
  .nav { padding: 20px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 960px) {
  .services-grid,
  .steps-grid,
  .crosslink-grid,
  .blog-grid,
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-table { grid-template-columns: 1fr; }
  .pricing-col { border-left: none !important; border-top: 1px solid var(--forest-green-10); }
  .pricing-col:first-child { border-top: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-col { border-left: none; padding-left: 0; }
  .footer-card { padding: 36px; }
}

@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .services-grid,
  .steps-grid,
  .crosslink-grid,
  .blog-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero { padding: 110px 0 70px; }
  .page-hero { padding: 110px 0 90px; }
  .section { padding: 70px 0; }
  .container { padding: 0 20px; }
  .nav { padding: 18px 20px; }
}

/* mobile nav (JS toggled) */
.nav-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  padding: 24px;
  gap: 20px;
  border-bottom: 1px solid var(--forest-green-10);
}

/* =========================================================
   ADDITIONS — Sept 2026
   Home stages, footer fixes, service split layouts,
   3-column packages, advisory board, Insights.
   ========================================================= */

/* ---------- Home: "Smart solutions for every stage" ---------- */

.wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.wwd-card {
  background: var(--white);
  border: 1px solid var(--forest-green-10);
  border-radius: var(--radius-md);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wwd-step {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.wwd-card h3 { font-size: 1.3rem; }
.wwd-card p { color: var(--text-muted); line-height: 1.65; }

/* ---------- Footer: centre the brand column ---------- */

.footer-col.footer-brand { align-items: center; text-align: center; }
.footer-col.footer-brand .footer-logo { display: block; margin: 0 auto; }
.footer-col.footer-brand .footer-tagline { max-width: 290px; margin: 0 auto; }

/* ---------- Footer: contact rows ----------
   The phone/email/WhatsApp SVGs are already white (fill="#ffffff"),
   so the previous filter:invert(1) was turning them black against the
   olive footer. Icons are left as-authored; details forced to pure white. */

.contact-icons .row img { filter: none; }
.footer-col .contact-icons .row,
.footer-col .contact-icons .row:link,
.footer-col .contact-icons .row:visited { color: var(--white); }
.footer-col .contact-icons .row:hover { color: var(--lime-yellow); }

/* ---------- Service pages: alternating image / text ---------- */

.svc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.svc-split + .svc-split { margin-top: 110px; }
.svc-split .svc-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.svc-split.reverse .svc-body { order: 2; }
.svc-split.reverse .svc-media { order: 1; }

/* ---------- Packages: three columns ---------- */

.pricing-table.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pricing-col .plan-price {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pricing-col .plan-lead { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 20px; }
.pricing-col.featured .plan-desc,
.pricing-col.featured .plan-lead,
.pricing-col.featured .plan-price,
.pricing-col.featured .fine { color: var(--forest-green); }

/* ---------- Insights ---------- */

.ins-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
}
.ins-chip {
  background: var(--white);
  border: 1px solid var(--forest-green-10);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--forest-green);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ins-chip:hover { border-color: var(--olive-green); }
.ins-chip[aria-pressed="true"] {
  background: var(--olive-green);
  border-color: var(--olive-green);
  color: var(--white);
}
.ins-meta { font-size: 0.86rem; color: var(--text-muted); margin-left: auto; }

.ins-list { display: flex; flex-direction: column; gap: 0; }
.ins-item {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 26px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--forest-green-10);
}
.ins-item:first-child { border-top: 1px solid var(--forest-green-10); }
.ins-src {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ins-title { font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.ins-item:hover .ins-title { color: var(--olive-green); text-decoration: underline; }
.ins-date { font-size: 0.86rem; color: var(--text-muted); white-space: nowrap; }
.ins-empty, .ins-loading { padding: 40px 0; color: var(--text-muted); }

.ins-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.ins-source-card {
  border: 1px solid var(--forest-green-10);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ins-source-card:hover { border-color: var(--olive-green); }
.ins-source-card .n { font-weight: 700; font-size: 1.02rem; }
.ins-source-card .d { font-size: 0.9rem; color: var(--text-muted); }

/* ---------- Responsive for the additions ---------- */

@media (max-width: 960px) {
  .wwd-grid { grid-template-columns: 1fr; }
  .svc-split { grid-template-columns: 1fr; gap: 28px; }
  .svc-split + .svc-split { margin-top: 64px; }
  .svc-split.reverse .svc-body,
  .svc-split.reverse .svc-media { order: 0; }
  .svc-split .svc-media img { aspect-ratio: 16 / 10; }
  .pricing-table.cols-3 { grid-template-columns: 1fr; }
  .ins-sources { grid-template-columns: repeat(2, 1fr); }
  .ins-item { grid-template-columns: 1fr; gap: 6px; }
  .ins-meta { margin-left: 0; width: 100%; }
}

@media (max-width: 680px) {
  .ins-sources { grid-template-columns: 1fr; }
}

.contact-icons .row span { word-break: break-word; }

/* Give the contact column room so the email address fits on one line */
.footer-top { grid-template-columns: 1.25fr 1fr 1fr 0.85fr 1.5fr; }
.contact-icons .row { font-size: 0.95rem; }
@media (max-width: 1280px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 960px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .footer-top { grid-template-columns: 1fr; } }

/* ---------- About: the practice and advisory board ---------- */

.people { display: flex; flex-direction: column; gap: 90px; }

.person {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
/* Mirror the row by assigning tracks explicitly. Using `order` alone
   reverses the DOM order but NOT the column widths, so the photo
   landed in the 1fr track and blew out to full width. */
.person.reverse { grid-template-columns: minmax(0, 1fr) 360px; }
.person.reverse .person-photo { grid-column: 2; grid-row: 1; }
.person.reverse .person-bio   { grid-column: 1; grid-row: 1; }

.person-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radius-md);
  background: var(--off-white);
}

.person-bio { display: flex; flex-direction: column; gap: 16px; }
.person-bio h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.person-bio p { font-size: 1.02rem; line-height: 1.72; color: var(--text-muted); }

.person-role {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--forest-green);
  margin-top: -6px;
}

@media (max-width: 960px) {
  .people { gap: 64px; }
  .person { grid-template-columns: 1fr; gap: 26px; }
  .person.reverse { grid-template-columns: 1fr; }
  .person.reverse .person-photo,
  .person.reverse .person-bio { grid-column: 1; grid-row: auto; }
  .person-photo img { max-width: 340px; aspect-ratio: 4 / 5; }
  .person-bio h3 { font-size: 1.4rem; }
}


/* =========================================================
   ROUND 2 — Oct 2026
   ========================================================= */

/* ---------- Hero: the Framer treatment ----------
   Framer set the headline at 84px / weight 400 / -0.05em tracking on an
   800px measure. Inter is a wider face than Framer's BDO Grotesk, so the
   tracking is eased slightly and the weight lifted to 500 to keep colour
   on the page at this size. */
.hero-inner { max-width: 1040px; gap: 44px; }
.hero h1 {
  font-size: clamp(2.9rem, 6vw, 5.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.038em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero .pretitle { align-self: flex-start; }

/* ---------- Section heads run the full width ----------
   The 700px cap made every heading and its intro sit in the left half of
   the page. These sections now use the container, with the paragraph held
   to a readable measure rather than the whole block. */
.section-head { max-width: none; }
.section-head > .pretitle { align-self: flex-start; }
.section-head > h2 { max-width: 20ch; }
.section-head > p { max-width: 68ch; }
.section-head.center > h2,
.section-head.center > p { max-width: none; }


/* ---------- Testimonials ----------
   Auto-fitting grid: works with 1, 3, 7 or any number of cards. */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.tm-card {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--forest-green-10);
  border-radius: var(--radius-md);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tm-card blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--forest-green);
}
.tm-card blockquote::before { content: "\201C"; }
.tm-card blockquote::after  { content: "\201D"; }
.tm-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--forest-green-10);
}
.tm-who  { font-weight: 700; font-size: 1rem; }
.tm-role { font-size: 0.86rem; color: var(--text-muted); }


/* ---------- Footer badges: CPA and TPB side by side at every width ----------
   The badges column was the narrowest track in the footer grid, so two
   140px logos could not sit together. The column is widened and the logos
   share it evenly, shrinking rather than wrapping. */
.footer-top { grid-template-columns: 1.15fr 0.9fr 0.9fr 1.25fr 1.4fr; }

.footer-badges {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.footer-badges img {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1280px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 960px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  {
  .footer-top { grid-template-columns: 1fr; }
  .footer-badges { justify-content: flex-start; gap: 18px; }
  .footer-badges img { max-width: 150px; }
}

/* ---------- Header fits at every width ----------
   The nav only collapsed to the hamburger below 680px, so between there
   and ~960px the links, CTA and logo together were wider than the screen
   (the original 52px logo already overflowed by 58px at 820px). The
   hamburger now takes over at 960px, and the logo eases down with it. */
@media (max-width: 1100px) { .nav-logo img { height: 62px; } }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 680px) { .nav-logo img { height: 54px; } }

/* A grid item's default min-width is its content, so the badge pair was
   holding the footer column open wider than a 360px screen. */
.footer-col { min-width: 0; }
.footer-badges { max-width: 100%; }
@media (max-width: 480px) {
  .footer-card { padding: 26px 20px; }
  .footer-badges { gap: 14px; }
  .footer-badges img { max-width: 132px; }
}

/* Match the two badges on height, not width: the CPA mark is wide and the
   TPB seal is square, so equal widths made them look mismatched. */
.footer-badges img {
  height: clamp(42px, 4vw, 58px);
  width: auto;
  max-width: 48%;
  flex: 0 1 auto;
}
@media (max-width: 480px) { .footer-badges img { height: 46px; max-width: 46%; } }


/* =========================================================
   ROUND 3 — Oct 2026 (Nirmit's desktop review)
   ========================================================= */

/* ---------- Header: larger mark, links spread across the banner ----------
   logo.png stacked the mark over the wordmark over the strapline, so at a
   74px header height the mark itself was only ~37px — hence "very small".
   logo-horizontal.png sets the mark beside the wordmark and drops the
   strapline, so the same header height gives a mark more than twice the
   size. The links were centred in a flex:1 track with a fixed 44px gap,
   leaving dead space on both sides; space-between pushes them out to fill
   the banner, with the gap acting as a minimum. */
.nav-logo img { height: 84px; width: auto; }
.nav-links {
  justify-content: space-between;
  gap: clamp(16px, 2.2vw, 44px);
  padding: 0 clamp(20px, 3.4vw, 56px);
}

@media (max-width: 1240px) { .nav-logo img { height: 72px; } }
@media (max-width: 1100px) { .nav-logo img { height: 66px; } }
@media (max-width: 680px)  { .nav-logo img { height: 56px; } }

/* ---------- Hero: headline block aligns with the photo below ----------
   .hero-inner carried a 1040px cap inside a 1460px auto-centred container,
   so the pretitle began ~200px in while the photo began at the container
   padding. Dropping the cap puts both on the same left edge; the headline
   keeps its own measure instead. */
.hero-inner { max-width: var(--container); }
.hero h1 { max-width: 20ch; text-wrap: balance; }

/* ---------- Headings and body copy stop breaking mid-phrase ----------
   The 20ch cap split "Smart solutions for every stage" after "every".
   A wider measure plus balanced wrapping keeps short headings on one line
   and splits longer ones evenly; pretty wrapping stops paragraphs ending
   on a single orphaned word. */
.section-head > h2 { max-width: 34ch; text-wrap: balance; }
.section-head > p  { max-width: 72ch; text-wrap: pretty; }
.page-hero p { max-width: 80ch; text-wrap: pretty; }
.prose p { text-wrap: pretty; }
.wwd-card p, .tm-card blockquote { text-wrap: pretty; }

/* ---------- Footer credentials: CPA first, centred, TPB beneath ---------- */
.footer-top { grid-template-columns: 1.15fr 1fr 1fr 0.95fr 1.45fr; }
.footer-badges {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  text-align: center;
}
.footer-badges img {
  height: auto;
  width: clamp(104px, 9vw, 144px);
  max-width: 100%;
  flex: 0 0 auto;
  object-fit: contain;
}
@media (max-width: 1280px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 960px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  {
  .footer-top { grid-template-columns: 1fr; }
  .footer-badges { align-items: flex-start; text-align: left; }
  .footer-badges img { width: 132px; }
}
@media (max-width: 480px) { .footer-badges img { width: 124px; } }

/* Footer logo: stacked mark + wordmark, strapline removed. */
.footer-logo img { width: 150px; padding: 10px 12px; }

/* ---------- Hero CTA ----------
   .hero-image-wrap is pulled up 70px over the text block (the Framer
   overlap) and sits on z-index 1, so a full-width stretched button at the
   foot of .hero-inner was being covered by the photograph entirely. The
   button now sizes to its own content and the block carries enough bottom
   padding for the overlap to land on empty space instead. */
.hero-inner > .btn { align-self: flex-start; }
.hero-inner { padding-bottom: 88px; }
@media (max-width: 680px) { .hero-inner { padding-bottom: 86px; } }

/* The horizontal lockup is wider than the old stacked mark, so on a narrow
   phone the logo, the CTA and the hamburger need to give a little ground to
   each other rather than meeting edge to edge. */
@media (max-width: 560px) {
  .nav { gap: 10px; }
  .nav-logo img { height: 48px; }
  .nav-cta { padding: 11px 18px; font-size: 0.92rem; }
}
@media (max-width: 400px) {
  .nav-logo img { height: 44px; }
  .nav-cta { padding: 10px 15px; font-size: 0.88rem; }
}


/* =========================================================
   ROUND 4 — Oct 2026 (Nirmit's recorded walkthrough)
   ========================================================= */

/* ---------- Home hero: centred block, headline fills the width ----------
   Round 3 pinned the headline to the container's left edge, which left a
   wide empty gutter on the right. Centring the block and dropping the
   measure lets the headline run the full width of the page, with the
   green eyebrow sitting in the middle above it. */
.hero-inner { align-items: center; text-align: center; }
.hero .pretitle,
.hero-inner > .btn { align-self: center; }
.hero h1 { max-width: none; text-wrap: balance; }

/* ---------- Dark page banners read across the full width ----------
   The 620px cap (later 80ch) stacked these intros into a narrow column on
   the left of a 1460px banner. They now run the width of the container,
   so a one-line intro stays on one line. */
.page-hero p { max-width: none; }

/* ---------- Centred section heads ----------
   .section-head.center already existed for "Four ways we can help"; the
   remaining heads now use it too, so no block sits with its text pinned
   left and a wide empty margin on the right. The paragraph keeps a
   readable measure but is centred, so the whitespace falls evenly. */
.section-head.center > .pretitle { align-self: center; }
.section-head.center > h2 { max-width: none; text-wrap: balance; }
.section-head.center > p  { max-width: 92ch; margin-left: auto; margin-right: auto; text-wrap: pretty; }

/* ---------- Service pages: photographs in their own proportion ----------
   The media column was fixed at 4/5 on desktop — a portrait frame — while
   every photograph in the library is landscape, so object-fit: cover was
   throwing away the sides and blowing up the middle. A 4/3 frame matches
   the source material, and the column no longer stretches to the height
   of a long list beside it. */
.svc-split { align-items: start; }
.svc-split .svc-body { align-self: center; }
.svc-split .svc-media { align-self: center; }
.svc-split .svc-media img { aspect-ratio: 4 / 3; max-height: 560px; }

/* ---------- Footer credentials: three badges, equal tiles ----------
   CPA on top, Tax Practitioners Board beneath it, Xero Certified Advisor
   below that. Each sits on a white tile of the same width and keeps its
   own proportion, so nothing is squeezed and the fine print on the TPB
   seal stays legible. */
.footer-top { grid-template-columns: 1.05fr 0.92fr 0.88fr 1.2fr 1.35fr; }
.footer-badges { gap: 14px; }
.footer-badges img {
  width: 100%;
  max-width: 196px;
  height: auto;
  background: var(--white);
  border-radius: 6px;
  padding: 9px 11px;
  object-fit: contain;
}
@media (max-width: 1280px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 960px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  {
  .footer-top { grid-template-columns: 1fr; }
  .footer-badges { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; }
  .footer-badges img { width: auto; max-width: 150px; flex: 0 1 auto; }
}

/* About: the numbers strip sat in a section of its own, so its padding and
   the next section's stacked into one very deep gap. */
.stats-tight { padding-top: 70px; padding-bottom: 0; }

/* ---------- Contact form: honeypot and status line ----------
   .hp-field is a decoy only a bot fills in; it is moved off-screen rather
   than display:none, because some bots skip hidden fields. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form-status {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  min-height: 1.4em;
  color: var(--text-muted);
}
.form-status.is-ok    { color: var(--forest-green); font-weight: 600; }
.form-status.is-error { color: #a1301f; font-weight: 600; }
.dm-box .form-status.is-ok { color: var(--forest-green); }