/* =============================================================================
   clay-theme.css — Warm Local Trust Theme for Your IT and Tech Mates
   Rebuilt from the original clay theme as a hybrid of:
   - Airbnb: warmth, softness, memorable hospitality, tactile cards
   - Intercom: clarity, confidence, conversational utility
   File name intentionally preserved: clay-theme.css
   Version: 2.0 | April 2026
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght,SOFT@9..144,500,100&display=swap');

:root{
  --clay-bg:#fbf7f1;
  --clay-bg-alt:#f6efe5;
  --clay-surface:#fffdf9;
  --clay-surface-soft:#f8f3eb;
  --clay-surface-warm:#f3eadf;
  --clay-text:#2b2723;
  --clay-heading:#171411;
  --clay-muted:#5f5850;
  --clay-faint:#847a6d;
  --clay-accent:#ff6b3d;
  --clay-accent-dark:#de5228;
  --clay-accent-soft:rgba(255,107,61,.10);
  --clay-accent-glow:rgba(255,107,61,.22);
  --matcha-300:#bce8c8;
  --matcha-600:#1f7a4d;
  --matcha-800:#16553a;
  --slushie-500:#9adff2;
  --slushie-800:#19779b;
  --lemon-400:#ffd98d;
  --lemon-500:#ffc85a;
  --lemon-700:#ae7a12;
  --lemon-800:#80590d;
  --ube-300:#d7c8ff;
  --ube-800:#5e3ab6;
  --ube-900:#452796;
  --pomegranate-400:#f38a88;
  --blueberry-800:#234f91;
  --dragonfruit:#d9477b;
  --clay-link:var(--matcha-600);
  --clay-green:#198754;
  --clay-red:#cf3d32;
  --clay-amber:#c98a12;
  --clay-info:#2f6fed;
  --clay-border:#e5d8c9;
  --clay-border-light:#efe6db;
  --clay-border-dark:#413830;
  --shadow-1:0 0 0 1px rgba(43,39,35,.04), 0 6px 18px rgba(43,39,35,.05), 0 14px 32px rgba(43,39,35,.04);
  --shadow-2:0 0 0 1px rgba(43,39,35,.05), 0 10px 24px rgba(43,39,35,.08), 0 18px 42px rgba(43,39,35,.08);
  --shadow-3:0 0 0 1px rgba(43,39,35,.06), 0 18px 40px rgba(43,39,35,.10), 0 26px 60px rgba(43,39,35,.10);
  --shadow-accent:0 12px 32px rgba(255,107,61,.22);
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:38px; --r-3xl:48px; --r-pill:999px;
  --fh:'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fb:'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs:'Fraunces', Georgia, serif;
  --navy:var(--clay-heading); --text:var(--clay-text); --muted:var(--clay-muted); --border:var(--clay-border);
  --glass-border:var(--clay-border); --glass-bg:var(--clay-surface); --teal:var(--matcha-600);
  --accent:var(--clay-accent); --text-on-light:var(--clay-text); --heading-on-light:var(--clay-heading);
  --muted-on-light:var(--clay-muted); --green:var(--clay-green); --red:var(--clay-red);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(circle at top left, rgba(255,107,61,.06), transparent 26%), radial-gradient(circle at top right, rgba(31,122,77,.05), transparent 24%), var(--clay-bg);
  color:var(--clay-text); font-family:var(--fb); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--clay-link);text-decoration:none}
a:hover{text-decoration:underline}
strong{color:var(--clay-heading)}
p{margin-bottom:12px;color:var(--clay-text)}
ul,ol{padding-left:18px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
::selection{background:rgba(255,107,61,.18);color:var(--clay-heading)}

@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}

.site-header{position:sticky;top:0;z-index:100;background:rgba(255,253,249,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(229,216,201,.85)}
.h-inner{max-width:1140px;margin:0 auto;height:74px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:var(--fh);font-weight:800;font-size:1.15rem;color:var(--clay-heading);letter-spacing:-.03em;white-space:nowrap}
.logo span{color:var(--clay-accent)}
.h-nav{display:flex;gap:8px;flex-wrap:wrap}
.h-nav a{color:var(--clay-muted);font-size:.92rem;font-weight:600;padding:10px 14px;border-radius:var(--r-pill);transition:background .2s ease,color .2s ease,transform .2s ease}
.h-nav a:hover{text-decoration:none;color:var(--clay-heading);background:rgba(255,255,255,.8);transform:translateY(-1px)}
.h-ctas{display:flex;gap:10px;align-items:center}
.h-ctas a{min-height:46px;padding:0 18px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.92rem;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.btn-call{background:var(--clay-accent);color:#fff !important;box-shadow:var(--shadow-accent)}
.btn-call:hover{background:var(--clay-accent-dark);transform:translateY(-2px);text-decoration:none}
.btn-wa{background:var(--clay-surface);color:var(--clay-heading) !important;border:1px solid var(--clay-border);box-shadow:var(--shadow-1)}
.btn-wa:hover{background:var(--clay-surface-soft);transform:translateY(-2px);text-decoration:none}

.bc{background:var(--clay-bg-alt);border-bottom:1px solid var(--clay-border);padding:10px 0;font-size:.82rem;color:var(--clay-muted)}
.bc a{color:var(--clay-muted)}
.urg{text-align:center;padding:12px 0;font-size:.86rem;font-weight:700;color:var(--clay-accent-dark);border-top:1px solid rgba(255,107,61,.14);border-bottom:1px solid rgba(255,107,61,.14);background:linear-gradient(90deg, rgba(255,107,61,.08), rgba(255,255,255,.45), rgba(255,107,61,.08));background-size:200% 100%;animation:shimmer 3.6s linear infinite}

.hero{position:relative;overflow:hidden;padding:64px 0 44px;border-bottom:1px solid var(--clay-border-light);background:radial-gradient(circle at 5% 8%, rgba(255,200,90,.18), transparent 18%), radial-gradient(circle at 96% 4%, rgba(154,223,242,.14), transparent 20%), linear-gradient(180deg, #fffaf4 0%, #fbf7f1 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,420px);gap:34px;align-items:center}
.hero-badge-pill,.eyebrow,.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:rgba(255,107,61,.08);border:1px solid rgba(255,107,61,.18);color:var(--clay-accent-dark);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.hero-h1,.hero h1,.page-h1{font-family:var(--fh);font-size:clamp(2.4rem,5vw,4.5rem);line-height:.98;letter-spacing:-.05em;font-weight:800;color:var(--clay-heading);margin-bottom:16px;max-width:13ch}
.hero-h1 em,.hero h1 em,.page-h1 em{font-family:var(--fs);font-style:normal;font-weight:500;color:var(--clay-accent-dark)}
.hero-intro,.hero p.lead,.page-lede,.lead{font-size:1.08rem;line-height:1.8;color:var(--clay-muted);max-width:62ch;margin-bottom:18px}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:9px 14px;background:rgba(255,255,255,.75);border:1px solid var(--clay-border);box-shadow:var(--shadow-1);font-size:.84rem;color:var(--clay-text)}
.hero-ctas,.hero-secondary-cta,.cta-row,.cta-row-2,.cta-button-grid,.cta-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.micro-cta{margin-top:12px;font-size:.92rem;color:var(--clay-muted)}
.hero-img,.hero-img-col img,.hero-visual-wrap img,.hero-visual img,.story-visual img,.refer-img{width:100% !important;max-width:760px !important;aspect-ratio:16 / 10 !important;object-fit:cover !important;object-position:center !important;border-radius:28px !important;border:1px solid rgba(229,216,201,.95) !important;box-shadow:var(--shadow-3) !important;background:#fff}

.btn,.btn-hero,.btn-primary,.btn-secondary,.btn-book,.btn-refer,a.btn,button.btn{position:relative;min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;border:1px solid transparent;font-family:var(--fh);font-weight:800;font-size:.98rem;letter-spacing:-.02em;text-decoration:none !important;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn-hero,.btn-primary,.sticky-mobile__call,.sticky-bottom-cta .sbc-call{background:var(--clay-accent);color:#fff !important;box-shadow:var(--shadow-accent)}
.btn-secondary,.btn-refer,.sticky-bottom-cta .sbc-wa,.sticky-bottom-cta .sbc-pricing{background:var(--clay-surface);color:var(--clay-heading) !important;border-color:var(--clay-border);box-shadow:var(--shadow-1)}
.btn-book,.sticky-mobile__wa,.sticky-bottom-cta .sbc-book{background:var(--matcha-600);color:#fff !important;box-shadow:0 12px 28px rgba(31,122,77,.24)}

.trust-bar{background:rgba(255,255,255,.66);border-top:1px solid var(--clay-border-light);border-bottom:1px solid var(--clay-border-light);padding:18px 0;backdrop-filter:blur(10px)}
.trust-bar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px}
.trust-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px;background:var(--clay-surface);border:1px solid var(--clay-border);box-shadow:var(--shadow-1)}

.section,.section-alt,.section.alt{padding:64px 0}
.section-alt,.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(246,239,229,.56));border-top:1px solid var(--clay-border-light);border-bottom:1px solid var(--clay-border-light)}
.glass,.glass-card,.card,.note,.service,.tool,.proof,.cta-box,.answer-box,.page-meta-card,.service-card,.process-step,.cross-link-card,.service-area-card,.seo-panel,.faq-item,.cause-card,.pro-repair-box,.decision-block,.cat-who,.cat-chooser,.cat-escalate,.premium-proof-card,.comparison-card,.hub-local-panel,.hub-service-panel,.local-cta-block,.comparison-module,.promo-cta{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,246,240,.96));border:1px solid var(--clay-border);border-radius:24px;box-shadow:var(--shadow-1)}
.glass-card,.card,.note,.service,.tool,.proof,.cta-box,.answer-box,.page-meta-card,.seo-panel,.service-card,.process-step,.cross-link-card,.service-area-card,.cause-card,.pro-repair-box,.decision-block,.cat-who,.cat-chooser,.cat-escalate,.premium-proof-card,.comparison-card,.hub-local-panel,.hub-service-panel,.local-cta-block,.comparison-module,.promo-cta{padding:22px}
.bento,.services-bento,.cross-links,.service-areas-grid,.grid-3,.tools,.comparison-grid,.premium-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-2,.split,.seo-upgrade-grid,.hub-local-grid,.next-steps-grid,.refer-grid,.pr-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cross-links{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}

.faq-question,.faq-q{width:100%;border:0;background:transparent;color:var(--clay-heading);font-size:1rem;font-weight:800;text-align:left;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.faq-answer,.faq-a{max-height:0;overflow:hidden;color:var(--clay-muted);transition:max-height .3s ease,padding-bottom .3s ease}
.faq-answer-inner,.faq-a{padding:0 20px 18px;line-height:1.8}

.suburb-tag,.toc-links a,.related-cluster a,.coverage-tag,.mini,.hub-chip-links a,.hub-link-list a,.hub-strip a{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid var(--clay-border);color:var(--clay-heading);text-decoration:none;box-shadow:var(--shadow-1);font-size:.86rem;font-weight:700}

.price-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;margin-top:22px;border:1px solid var(--clay-border);border-radius:22px;background:var(--clay-surface);box-shadow:var(--shadow-1)}
.price-table th{padding:14px 16px;background:rgba(255,107,61,.08);color:var(--clay-accent-dark);font-size:.84rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800;border-bottom:1px solid var(--clay-border)}
.price-table td{padding:13px 16px;border-bottom:1px solid var(--clay-border-light);color:var(--clay-text);font-size:.9rem}

.refer-section{background:radial-gradient(circle at top right, rgba(255,107,61,.10), transparent 22%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,239,229,.96));border-radius:34px;border:1px solid var(--clay-border);padding:34px;box-shadow:var(--shadow-2)}
.final-cta,.final,.page-final-cta{position:relative;overflow:hidden;border-radius:38px;padding:44px 34px;background:radial-gradient(circle at top right, rgba(255,107,61,.10), transparent 22%), radial-gradient(circle at bottom left, rgba(31,122,77,.08), transparent 24%), linear-gradient(180deg, var(--clay-surface) 0%, var(--clay-surface-warm) 100%);border:1px solid var(--clay-border);box-shadow:var(--shadow-2);color:var(--clay-heading)}.final-cta p,.final p,.page-final-cta p{color:var(--clay-muted)}.final-cta h1,.final h1,.page-final-cta h1,.final-cta h2,.final h2,.page-final-cta h2,.final-cta h3,.final h3,.page-final-cta h3,.final-cta strong,.final strong,.page-final-cta strong{color:var(--clay-heading)}.final-cta .suburb-tag,.final .suburb-tag,.page-final-cta .suburb-tag,.final-cta .toc-links a,.final .toc-links a,.page-final-cta .toc-links a,.final-cta .related-cluster a,.final .related-cluster a,.page-final-cta .related-cluster a,.final-cta .coverage-tag,.final .coverage-tag,.page-final-cta .coverage-tag,.final-cta .mini,.final .mini,.page-final-cta .mini,.final-cta .hub-chip-links a,.final .hub-chip-links a,.page-final-cta .hub-chip-links a,.final-cta .hub-link-list a,.final .hub-link-list a,.page-final-cta .hub-link-list a,.final-cta .hub-strip a,.final .hub-strip a,.page-final-cta .hub-strip a{background:rgba(255,255,255,.78);border:1px solid var(--clay-border);color:var(--clay-heading);box-shadow:var(--shadow-1)}

footer,.site-footer{background:var(--clay-bg-alt);border-top:1px solid var(--clay-border);padding:30px 24px 36px;text-align:center;color:var(--clay-muted);font-size:.86rem}

@media (max-width:1080px){.hero-grid{grid-template-columns:1fr;gap:24px}.hero-h1,.hero h1,.page-h1{max-width:none}}
@media (max-width:920px){.grid-2,.split,.seo-upgrade-grid,.hub-local-grid,.next-steps-grid,.refer-grid,.pr-row,.grid-3,.tools,.service-areas-grid,.services-bento,.comparison-grid,.premium-proof-grid,.process-steps{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.h-nav{display:none}}
@media (max-width:760px){.section,.section-alt,.section.alt{padding:46px 0}.wrap{padding:0 18px}.grid-2,.split,.seo-upgrade-grid,.hub-local-grid,.next-steps-grid,.refer-grid,.pr-row,.grid-3,.tools,.service-areas-grid,.services-bento,.comparison-grid,.premium-proof-grid,.process-steps{grid-template-columns:1fr}.refer-section,.final-cta,.final,.page-final-cta,.promo-cta{padding:24px 18px}.cta-row a,.cta-row-2 a,.hero-ctas a,.hero-secondary-cta a,.cta-button-grid a,.cta-actions a{width:100%}}
@media (max-width:640px){.h-inner{height:68px;padding:0 14px}.logo{font-size:1rem}.h-ctas a{padding:0 14px;font-size:.85rem;min-height:42px}}
@media (max-width:480px){.wrap{padding:0 14px}.hero-h1,.hero h1,.page-h1{font-size:clamp(2rem,10vw,3rem)}.btn,.btn-hero,.btn-primary,.btn-secondary,.btn-book,.btn-refer,a.btn,button.btn{min-height:46px;font-size:.94rem}}

:focus-visible{outline:3px solid rgba(255,107,61,.45);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}


/* === Senior dev patch: referral alignment + universal TheFixers section === */
.refer-section{
  overflow:hidden;
}
.refer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:28px;
  align-items:center;
}
.refer-section > .refer-grid,
.refer-section .refer-grid > div,
.refer-section .cta-stack{
  min-width:0;
}
.refer-section .cta-stack{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:22px;
  height:100%;
}
.refer-section .refer-img-wrap{
  width:100%;
  max-width:none !important;
  margin:0;
}
.refer-section .refer-img{
  width:100% !important;
  max-width:none !important;
  aspect-ratio:16 / 7 !important;
  height:auto !important;
  margin:0 !important;
  object-fit:cover !important;
}
.refer-section .glass-card{
  width:100%;
  margin:0;
}
.refer-section .hero-secondary-cta,
.refer-section .cta-compact{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  width:100%;
  align-items:stretch;
}
.refer-section .hero-secondary-cta a,
.refer-section .cta-compact a{
  width:100% !important;
  min-width:0 !important;
  justify-content:center !important;
}
.refer-section .micro-cta{
  margin-top:0;
  text-align:center;
}
@media (max-width: 980px){
  .refer-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
}
@media (max-width: 640px){
  .refer-section .hero-secondary-cta,
  .refer-section .cta-compact{
    grid-template-columns:1fr;
  }
}

/* =============================================================================
   clay-theme normalized shared patterns
   Centralized from repeated page-level inline CSS so service pages inherit the
   same clay theme vocabulary with fewer local overrides.
   ============================================================================= */

/* Reusable glass / surface cards */
.info-card,
.quick-help-card,
.faq-item,
.request-card,
.path-card,
.trust-card,
.form-shell,
.pricing-card,
.pricing-feature-box,
.pricing-highlight,
.pricing-promise,
.pricing-kicker-strip,
.price-table-wrap{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}
.info-card,
.quick-help-card,
.request-card,
.path-card,
.trust-card,
.form-shell,
.pricing-card,
.pricing-feature-box,
.pricing-highlight,
.pricing-promise,
.pricing-kicker-strip,
.price-table-wrap{
  padding:22px;
}
.decision-card,
.objection-card{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  padding:18px;
}
.decision-step{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  padding:22px;
}
.faq-item{
  overflow:hidden;
  margin-bottom:12px;
}
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  color:var(--clay-heading);
}
.faq-item p{
  margin:10px 0 0;
  color:var(--clay-muted);
  line-height:1.7;
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 22px;
  background:transparent;
  border:0;
  font:inherit;
  font-weight:800;
  color:#0f172a;
  text-align:left;
  cursor:pointer;
}
.faq-chevron{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  flex:0 0 auto;
}
.faq-answer{
  display:none;
  padding:0 22px 22px;
}
.faq-item.is-open .faq-answer{display:block}
.faq-answer-inner{color:#334155;line-height:1.7}

/* Shared responsive grids */
.page-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:22px}
.request-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}
.request-paths,
.trust-grid,
.faq-grid,
.decision-grid,
.objection-grid,
.pricing-summary-grid,
.pricing-overview-grid,
.quick-help-grid,
.cross-links{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.pricing-summary-grid,
.pricing-overview-grid,
.quick-help-grid,
.cross-links{
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.decision-steps,
.faq-list{
  display:grid;
  gap:18px;
}
.decision-steps{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:22px;
}
.objection-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:18px}
.hero-pricing-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:24px;
  align-items:start;
}
@media (max-width:980px){.page-grid,.hero-pricing-grid{grid-template-columns:1fr}}
@media (max-width:900px){.request-grid{grid-template-columns:1fr}}

/* Shared text helpers */
.breadcrumbs{font-size:.88rem;color:var(--clay-muted);margin:0 0 14px}
.breadcrumbs a{color:inherit;text-decoration:none}
.decision-kicker,
.request-kicker,
.pricing-card-label,
.mini-label{
  display:inline-block;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  color:#475569;
  margin-bottom:10px;
}
.request-kicker{opacity:.72}
.decision-title,
.request-title{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:8px;
}
.request-copy,
.decision-copy,
.objection-copy{
  font-size:.97rem;
  line-height:1.65;
}
.commercial-note,
.hero-note,
.lead-tight,
.price-note,
.pricing-subprice,
.pricing-model{
  font-size:1rem;
  line-height:1.6;
  color:#334155;
}
.hero-note,
.commercial-note{margin-top:14px}
.hero-commercial-note,
.hero-proof{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:rgba(255,255,255,.7);
}
.hero-commercial-note strong{display:block;margin-bottom:6px}
.inline-list,
.micro-links,
.pricing-pills,
.hero-secondary-cta,
.hub-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.inline-list,
.micro-links,
.pricing-pills{margin-top:16px}
.hub-strip{margin:18px 0 0}
.inline-list span,
.micro-links a,
.hub-strip a,
.pricing-pill,
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
  text-decoration:none;
  font-size:.95rem;
  font-weight:700;
  color:#0f172a;
}
.form-note{font-size:.92rem;opacity:.78;margin-top:10px}
.form-shell code{
  display:block;
  white-space:pre-wrap;
  font-family:inherit;
  background:#fff;
  border:1px dashed rgba(15,23,42,.18);
  padding:18px;
  border-radius:18px;
  margin-top:14px;
}
.checklist li,
.pricing-list li,
.tick-list li,
.mini-list li{margin:0 0 10px;line-height:1.55;color:#1e293b}
.pricing-list,
.tick-list,
.mini-list{margin:0;padding-left:18px}
.pricing-highlight h3,
.pricing-card h3,
.info-card h3,
.quick-help-card h3,
.pricing-promise h3,
.decision-step h3{margin:0 0 8px;color:#0f172a}
.pricing-highlight p,
.info-card p,
.quick-help-card p,
.pricing-promise p,
.pricing-kicker-strip p,
.decision-step p{margin:0;color:#334155;line-height:1.65}

/* Shared dark CTA bars */
.cta-strip,
.request-cta-strip,
.mid-cta-bar{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  background:#0f172a;
  color:#fff;
  border-radius:28px;
  padding:24px;
  margin-top:20px;
}
.request-cta-strip,
.mid-cta-bar{margin-top:22px}
.cta-strip p,
.request-cta-strip p,
.mid-cta-bar p{
  margin:0;
  max-width:760px;
  color:rgba(255,255,255,.9);
  line-height:1.6;
}
.mid-cta-bar strong,
.mid-cta-bar h1,
.mid-cta-bar h2,
.mid-cta-bar h3,
.mid-cta-bar a:not(.btn-primary):not(.btn-secondary):not(.btn-call):not(.btn-wa){
  color:#fff !important;
}
.provider-referral-cta{margin-top:20px}

/* Pricing helpers */
.pricing-card-featured{
  border:2px solid rgba(0,113,227,.22);
  box-shadow:0 18px 42px rgba(0,113,227,.12);
}
.pricing-price{
  font-size:2.3rem;
  line-height:1;
  font-weight:800;
  margin:0 0 8px;
  color:#0f172a;
}
.pricing-price span{
  font-size:1rem;
  font-weight:700;
  color:#64748b;
}
.pricing-summary-grid .pricing-highlight{padding:18px 20px}
.price-table-wrap{overflow-x:auto}
.price-table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}
.price-table th,
.price-table td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid rgba(15,23,42,.08);
  vertical-align:top;
}
.price-table th{
  color:#0f172a;
  font-size:.95rem;
  font-weight:800;
  background:rgba(15,23,42,.03);
}
.price-table td{color:#334155;line-height:1.55}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-weight:800;
  margin-bottom:12px;
}



/* =============================================================================
   clay-theme fourth pass fixes
   - ensure missing tool/guide pages share the global header
   - restore readable dark text for legacy light hero wrappers
   ============================================================================= */

.dark-panel-wrap,
.dark-panel,
.hero-lite .glass-card,
.hero-lite .glass-card.dark-panel-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,246,240,.96));
  border:1px solid var(--clay-border);
  color:var(--clay-text);
  box-shadow:var(--shadow-1);
}
.dark-panel-wrap .breadcrumbs,
.dark-panel-wrap .breadcrumbs a,
.dark-panel-wrap .micro-cta,
.dark-panel-wrap .request-copy,
.dark-panel-wrap .decision-copy,
.dark-panel-wrap .objection-copy,
.dark-panel-wrap .lead,
.dark-panel-wrap .hero-intro,
.dark-panel-wrap p,
.dark-panel p{
  color:var(--clay-muted) !important;
}
.dark-panel-wrap .page-h1,
.dark-panel-wrap h1,
.dark-panel-wrap h2,
.dark-panel-wrap h3,
.dark-panel-wrap strong,
.dark-panel strong{
  color:var(--clay-heading) !important;
}
.dark-panel-wrap .eyebrow,
.dark-panel-wrap .hero-badge-pill,
.dark-panel-wrap .hero-badge{
  color:var(--matcha-600) !important;
  background:rgba(31,122,77,.08);
  border-color:rgba(31,122,77,.18);
}
.dark-panel-wrap a:not(.btn):not(.btn-hero):not(.btn-primary):not(.btn-secondary):not(.btn-book):not(.btn-refer):not(.btn-call):not(.btn-wa){
  color:var(--clay-link) !important;
}
.trust-item .ti-label,
.trust-item strong,
.trust-item b{
  color:var(--clay-heading) !important;
}
.trust-item .ti-sub,
.trust-item small,
.trust-item span{
  color:var(--clay-muted);
}
.hero-commercial-note,
.hero-proof{
  color:var(--clay-text);
}
.hero-commercial-note strong,
.hero-proof strong{
  color:var(--clay-heading) !important;
}



/* =============================================================================
   clay-theme version 2 CRO enhancements
   Preserves SEO/LLM content while improving trust, hierarchy, and CTA discipline.
   ============================================================================= */

.hero-ctas,
.cta-row,
.cta-row-2,
.cta-actions,
.cta-button-grid{
  margin-bottom: 10px;
}
.hero-secondary-cta{
  margin-top: 8px;
}
.hero-secondary-cta a,
.cta-row-2 a,
.cta-actions a.btn-secondary,
.cta-actions a.btn-refer{
  opacity: .96;
  box-shadow: var(--shadow-1);
}
.micro-cta{
  max-width: 72ch;
}

.conversion-trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.conversion-trust-strip span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--clay-border);
  color:var(--clay-heading);
  box-shadow:var(--shadow-1);
  font-size:.85rem;
  font-weight:700;
}
.conversion-trust-strip span small{
  color:var(--clay-muted);
  font-weight:600;
}

.direct-answer,
.answer-block,
.answer-box{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,234,223,.92));
  border:1px solid var(--clay-border);
  border-radius:26px;
  box-shadow:var(--shadow-2);
}
.direct-answer{
  padding:24px 24px 18px;
  margin:22px 0 0;
}
.answer-block,
.answer-box{
  padding:18px 20px;
}
.direct-answer::before,
.answer-block::before,
.answer-box::before{
  content:"Quick answer";
  display:inline-flex;
  align-items:center;
  margin-bottom:12px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(31,122,77,.08);
  border:1px solid rgba(31,122,77,.16);
  color:var(--matcha-800);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.da-label{
  display:none !important;
}
.direct-answer p:last-child,
.answer-block p:last-child,
.answer-box p:last-child{
  margin-bottom:0;
}

.page-meta-strip{
  opacity:.92;
  margin-top:18px;
}
.page-meta-card{
  background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(248,243,235,.9));
  border:1px solid var(--clay-border-light);
  box-shadow:var(--shadow-1);
}
.pm-label{
  color:var(--clay-faint);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.72rem;
}

.final-cta,
.final,
.page-final-cta,
.mid-cta-bar,
.cta-strip,
.request-cta-strip{
  scroll-margin-top: 100px;
}
.final-cta .btn-secondary,
.final .btn-secondary,
.page-final-cta .btn-secondary,
.mid-cta-bar .btn-secondary,
.cta-strip .btn-secondary{
  background:rgba(255,255,255,.76);
}

.section h2,
.section-alt h2,
.section.alt h2{
  letter-spacing:-.02em;
}

@media (max-width:760px){
  .conversion-trust-strip span{
    width:100%;
    justify-content:flex-start;
  }
}


/* =============================================================================
   manual top-20 CRO pass
   ============================================================================= */
.manual-cro-proof{padding-top:18px;padding-bottom:14px}
.manual-cro-shell{background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,239,229,.92));border:1px solid var(--clay-border);border-radius:30px;box-shadow:var(--shadow-2);padding:28px}
.manual-cro-kicker{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:rgba(255,107,61,.08);border:1px solid rgba(255,107,61,.18);color:var(--clay-accent-dark);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.manual-cro-shell h2{margin:0 0 10px;color:var(--clay-heading);font-size:clamp(1.4rem,2.8vw,2rem);line-height:1.1}
.manual-cro-intro{margin:0 0 16px;color:var(--clay-muted);max-width:74ch}
.manual-cro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.manual-cro-card{background:rgba(255,255,255,.82);border:1px solid var(--clay-border-light);border-radius:22px;padding:18px;box-shadow:var(--shadow-1)}
.manual-cro-card h3{margin:0 0 8px;color:var(--clay-heading);font-size:1rem}
.manual-cro-card p{margin:0;color:var(--clay-muted);line-height:1.65}
@media (max-width:860px){.manual-cro-grid{grid-template-columns:1fr}.manual-cro-shell{padding:22px 18px}}


/* Shared reading panel/card pattern for long intro sections */
.shared-panel.reading-split{
  gap:24px;
  align-items:stretch;
}
.shared-panel.reading-split > .shared-card{
  position:relative;
  overflow:hidden;
}
.shared-panel.reading-split > .shared-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--clay-accent), #f59e0b);
  opacity:.9;
}
.reading-card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,244,237,.98));
  border:1px solid var(--clay-border);
  border-radius:28px;
  box-shadow:var(--shadow-1);
}
.reading-card--main{
  padding:26px;
}
.reading-card--aside{
  padding:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,244,.98));
}
.reading-card .page-copy + .page-copy{
  margin-top:16px;
}
.reading-card .cta-strip{
  margin-top:20px;
  padding:18px 20px;
  border:1px solid var(--clay-border-light);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(246,250,246,.95), rgba(255,255,255,.96));
}
.reading-card .cta-strip p{
  margin:0 0 14px;
}
.reading-card .checklist{
  margin-top:10px;
}
.reading-card .page-h3 + .checklist{
  margin-bottom:18px;
}
@media (max-width: 900px){
  .shared-panel.reading-split{
    gap:18px;
  }
  .reading-card--main,
  .reading-card--aside{
    padding:20px;
  }
}


/* Global reading-panel upgrade for longer intro text sections */
.direct-answer{
  padding:28px 28px 24px;
}
.direct-answer p{
  max-width:66ch;
  font-size:1.04rem;
  line-height:1.82;
  color:var(--clay-muted);
}
.direct-answer strong,
.direct-answer h2,
.direct-answer h3{
  color:var(--clay-heading);
}
.direct-answer + .seo-upgrade-grid,
.direct-answer + .page-grid,
.direct-answer + .grid-2{
  margin-top:18px;
  align-items:stretch;
}
.direct-answer + .seo-upgrade-grid .seo-panel,
.direct-answer + .page-grid > .info-card,
.direct-answer + .grid-2 > .info-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,244,237,.98));
  border:1px solid var(--clay-border);
  border-radius:28px;
  box-shadow:var(--shadow-1);
}
.direct-answer + .seo-upgrade-grid .seo-panel::before,
.direct-answer + .page-grid > .info-card::before,
.direct-answer + .grid-2 > .info-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--clay-accent), #f59e0b);
  opacity:.92;
}
.direct-answer + .seo-upgrade-grid .seo-panel-title,
.direct-answer + .page-grid > .info-card .page-h3,
.direct-answer + .grid-2 > .info-card .page-h3{
  color:var(--clay-heading);
}
.direct-answer + .seo-upgrade-grid .toc-links,
.direct-answer + .seo-upgrade-grid .related-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.direct-answer + .seo-upgrade-grid .toc-links a,
.direct-answer + .seo-upgrade-grid .related-links a{
  min-height:44px;
}
.direct-answer + .seo-upgrade-grid .seo-panel-note,
.direct-answer + .page-grid > .info-card p,
.direct-answer + .grid-2 > .info-card p{
  color:var(--clay-muted);
}
@media (max-width:760px){
  .direct-answer{
    padding:22px 20px 18px;
  }
  .direct-answer p{
    font-size:1rem;
    line-height:1.72;
  }
}


/* hard html reading pass */
.seo-enhancement.hard-reading-pass{margin-top:0;}
.seo-enhancement.hard-reading-pass .direct-answer.shared-card{margin-top:20px;}
.seo-enhancement.hard-reading-pass .hard-reading-pass__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-content:start;margin-top:18px;}
.seo-enhancement.hard-reading-pass .hard-reading-pass__grid .seo-panel.shared-card{height:100%;}
@media (max-width: 900px){.seo-enhancement.hard-reading-pass .hard-reading-pass__grid{grid-template-columns:1fr;}}


/* =============================================================================
   targeted visual pass for high-priority intro/tool pages
   ============================================================================= */
body.visual-pass-target .visual-pass-hero{
  position:relative;
}
body.visual-pass-target .visual-pass-proof .manual-cro-shell{
  border-radius:34px;
  box-shadow:var(--shadow-3);
}
body.visual-pass-target .visual-pass-guide .hub-strip,
body.visual-pass-target .visual-pass-tool .hub-strip-soft{
  gap:12px;
}
body.visual-pass-target .visual-pass-guide .hub-strip a,
body.visual-pass-target .visual-pass-tool .hub-strip-soft a,
body.visual-pass-target .visual-pass-tool .hub-strip-soft span{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,243,235,.96));
  border:1px solid var(--clay-border);
  box-shadow:var(--shadow-1);
}
body.visual-pass-target .visual-pass-reading{
  grid-template-columns:minmax(0,1.14fr) minmax(280px,.86fr);
  gap:24px;
}
body.visual-pass-target .visual-pass-reading .reading-card--main{
  padding:30px;
  box-shadow:var(--shadow-2);
}
body.visual-pass-target .visual-pass-reading .reading-card--aside{
  padding:26px;
  box-shadow:var(--shadow-1);
}
body.visual-pass-target .visual-pass-reading .page-h2{
  font-size:clamp(1.8rem,3vw,2.5rem);
  line-height:1.08;
  margin-bottom:12px;
}
body.visual-pass-target .visual-pass-reading .page-h3{
  font-size:1.18rem;
  margin-bottom:8px;
}
body.visual-pass-target .visual-pass-reading .page-copy{
  max-width:64ch;
  font-size:1.05rem;
  line-height:1.82;
}
body.visual-pass-target .visual-pass-reading .checklist li{
  margin-bottom:12px;
}
body.visual-pass-target .visual-pass-reading .cta-strip{
  background:linear-gradient(135deg, rgba(25,135,84,.10), rgba(255,255,255,.98));
  border:1px solid rgba(31,122,77,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-1);
}
body.visual-pass-target .visual-pass-tool .tool-banner{
  max-width:980px !important;
  margin:0 auto 28px !important;
  border-radius:30px !important;
  overflow:hidden;
  box-shadow:var(--shadow-3) !important;
  border:1px solid var(--clay-border) !important;
}
body.visual-pass-target .visual-pass-tool .tool-shell{
  padding:30px !important;
  border-radius:30px;
  box-shadow:var(--shadow-2);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,243,235,.96));
}
body.visual-pass-target .visual-pass-tool .tool-frame{
  padding:26px !important;
  border-radius:24px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,244,.96)) !important;
  border:1px solid var(--clay-border) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), var(--shadow-1);
}
body.visual-pass-target .visual-pass-tool .tool-result-card{
  border-radius:24px !important;
  border:1px solid rgba(31,122,77,.22) !important;
  background:linear-gradient(180deg, rgba(241,253,247,.96), rgba(255,255,255,.98)) !important;
  box-shadow:var(--shadow-1);
}
body.visual-pass-target .visual-pass-tool .tool-dots{
  margin-top:16px !important;
}
body.visual-pass-target .visual-pass-story .wrap > div:first-child,
body.visual-pass-target .visual-pass-story .glass-card:first-child{
  border-radius:30px;
  box-shadow:var(--shadow-2);
}
@media (max-width:900px){
  body.visual-pass-target .visual-pass-reading{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  body.visual-pass-target .visual-pass-reading .reading-card--main,
  body.visual-pass-target .visual-pass-reading .reading-card--aside,
  body.visual-pass-target .visual-pass-tool .tool-shell{
    padding:22px !important;
  }
  body.visual-pass-target .visual-pass-reading .page-copy{
    font-size:1rem;
    line-height:1.74;
  }
}


/* request-help targeted readability patch */
body.request-help-page .hero-copy .shared-panel.reading-split{margin-top:18px;}
body.request-help-page .hero-copy .page-h3{margin:0 0 10px;color:var(--clay-heading);font-size:1.2rem;line-height:1.2;}
body.request-help-page .hero-copy .checklist{padding-left:18px;color:var(--clay-muted);}
body.request-help-page .hero-copy .checklist li + li{margin-top:8px;}
body.request-help-page .hero-copy .reading-card--aside{align-self:stretch;}


/* =============================================================================
   UX/UI sitewide readability pass
   ============================================================================= */
body.ux-sitewide-pass .ux-copy-panel{margin-top:20px;align-items:stretch}
body.ux-sitewide-pass .ux-copy-panel--hero{margin-top:18px}
body.ux-sitewide-pass .ux-copy-card{background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,243,235,.98));border:1px solid var(--clay-border);border-radius:26px;box-shadow:var(--shadow-1)}
body.ux-sitewide-pass .ux-copy-card p{max-width:70ch;line-height:1.82;color:var(--clay-text)}
body.ux-sitewide-pass .ux-copy-card > p:last-child{margin-bottom:0}
body.ux-sitewide-pass .ux-copy-card > h1,
body.ux-sitewide-pass .ux-copy-card > h2,
body.ux-sitewide-pass .ux-copy-card > h3{margin-bottom:14px;line-height:1.1;color:var(--clay-heading)}
body.ux-sitewide-pass .ux-copy-card > ul,
body.ux-sitewide-pass .ux-copy-card > ol{margin:8px 0 0 0;padding-left:20px}
body.ux-sitewide-pass .ux-copy-card > ul li,
body.ux-sitewide-pass .ux-copy-card > ol li{margin:0 0 10px 0;padding-left:2px}
body.ux-sitewide-pass .ux-copy-card--aside{background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,234,223,.96))}
body.ux-sitewide-pass .ux-copy-card--with-list{display:grid;gap:12px}
body.ux-sitewide-pass .hero-grid > div:not(.hero-img-col){min-width:0}
body.ux-sitewide-pass .hero-grid > div > .ux-copy-panel .hero-ctas,
body.ux-sitewide-pass .hero-grid > div > .ux-copy-panel .hero-secondary-cta{margin-top:6px}
body.ux-sitewide-pass .hero-grid > div > .ux-copy-panel .answer-block{margin:4px 0 0 0}
body.ux-sitewide-pass .hero-grid > div > .ux-copy-panel .hero-pills{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
body.ux-sitewide-pass .hero-grid > div > .ux-copy-panel .pill{justify-content:flex-start}
body.ux-sitewide-pass .hero-grid > div > .ux-copy-panel .micro-cta{margin-top:8px}
body.ux-sitewide-pass .local-identity.ux-copy-card,
body.ux-sitewide-pass .llm-block.ux-copy-card,
body.ux-sitewide-pass .qa-content-bridge.ux-copy-card,
body.ux-sitewide-pass .support-local-message.ux-copy-card{padding:24px 24px 22px}
body.ux-sitewide-pass .section .ux-copy-card,
body.ux-sitewide-pass .section-alt .ux-copy-card,
body.ux-sitewide-pass .section.alt .ux-copy-card{margin-top:18px}
@media (max-width:920px){body.ux-sitewide-pass .ux-copy-panel{grid-template-columns:1fr}}
@media (max-width:760px){body.ux-sitewide-pass .ux-copy-card{padding:20px 18px} body.ux-sitewide-pass .ux-copy-card p{max-width:none}}


/* =============================================================================
   clay-theme fifth pass fixes
   - replace remaining dark section shells with the shared soft-green surface
   - force readable dark text on light section backgrounds
   ============================================================================= */
:root{
  --soft-panel-green:#eef6ef;
  --soft-panel-green-2:#e8f2e7;
  --soft-panel-border:#b9d1bc;
}

.final-cta,
.final,
.page-final-cta,
.cta-strip,
.request-cta-strip,
.mid-cta-bar,
.dark-panel-wrap,
.dark-panel,
.nap-block.cta-strip,
.hero-lite .glass-card,
.hero-lite .glass-card.dark-panel-wrap{
  background:linear-gradient(180deg,var(--soft-panel-green) 0%, var(--soft-panel-green-2) 100%) !important;
  color:var(--clay-heading) !important;
  border:1px solid var(--soft-panel-border) !important;
  box-shadow:0 10px 26px rgba(31,122,77,.08), 0 0 0 1px rgba(31,122,77,.04) !important;
}

.final-cta p,
.final p,
.page-final-cta p,
.cta-strip p,
.request-cta-strip p,
.mid-cta-bar p,
.dark-panel-wrap p,
.dark-panel p,
.final-cta .support-local-message,
.final-cta .local-proof,
.final .support-local-message,
.final .local-proof,
.page-final-cta .support-local-message,
.page-final-cta .local-proof{
  color:var(--clay-text) !important;
}

.final-cta h1,.final h1,.page-final-cta h1,
.final-cta h2,.final h2,.page-final-cta h2,
.final-cta h3,.final h3,.page-final-cta h3,
.final-cta strong,.final strong,.page-final-cta strong,
.cta-strip strong,.request-cta-strip strong,.mid-cta-bar strong,
.dark-panel-wrap strong,.dark-panel strong{
  color:var(--clay-heading) !important;
}

.final-cta a:not(.btn):not(.btn-hero):not(.btn-primary):not(.btn-secondary):not(.btn-book):not(.btn-refer):not(.btn-call):not(.btn-wa),
.final a:not(.btn):not(.btn-hero):not(.btn-primary):not(.btn-secondary):not(.btn-book):not(.btn-refer):not(.btn-call):not(.btn-wa),
.page-final-cta a:not(.btn):not(.btn-hero):not(.btn-primary):not(.btn-secondary):not(.btn-book):not(.btn-refer):not(.btn-call):not(.btn-wa),
.cta-strip a:not(.btn):not(.btn-hero):not(.btn-primary):not(.btn-secondary):not(.btn-book):not(.btn-refer):not(.btn-call):not(.btn-wa),
.request-cta-strip a:not(.btn):not(.btn-hero):not(.btn-primary):not(.btn-secondary):not(.btn-book):not(.btn-refer):not(.btn-call):not(.btn-wa),
.mid-cta-bar a:not(.btn):not(.btn-hero):not(.btn-primary):not(.btn-secondary):not(.btn-book):not(.btn-refer):not(.btn-call):not(.btn-wa){
  color:var(--clay-link) !important;
}

.final-cta .trust-bar,
.final .trust-bar,
.page-final-cta .trust-bar{
  background:rgba(255,255,255,.56) !important;
  border-top:1px solid rgba(31,122,77,.10) !important;
  border-bottom:1px solid rgba(31,122,77,.10) !important;
  border-radius:22px;
  margin-top:18px;
}

.final-cta .trust-pill,
.final .trust-pill,
.page-final-cta .trust-pill,
.cta-strip .trust-pill,
.mid-cta-bar .trust-pill{
  background:rgba(255,255,255,.82) !important;
  color:var(--clay-heading) !important;
  border:1px solid rgba(31,122,77,.16) !important;
}

.final-cta .glass-card,
.final .glass-card,
.page-final-cta .glass-card,
.dark-panel-wrap .glass-card,
.dark-panel .glass-card{
  background:rgba(255,255,255,.78) !important;
  color:var(--clay-text) !important;
  border:1px solid rgba(31,122,77,.12) !important;
}


/* =============================================================================
   final template pass — page systems, cards, CTA hierarchy, mobile spacing
   ============================================================================= */
.template-service-page,
.template-suburb-page,
.template-tool-page,
.template-guide-page{
  --page-panel-bg:#edf6ee;
  --page-panel-border:#b8d8c1;
  --page-copy-max:68ch;
}
.template-suburb-page .hero,
.template-service-page .hero,
.template-tool-page .hero,
.template-guide-page .hero{
  padding-top:58px;
}
.template-suburb-page .section,
.template-service-page .section,
.template-tool-page .section,
.template-guide-page .section{
  scroll-margin-top:92px;
}
.template-service-page .wrap > .section-header,
.template-suburb-page .wrap > .section-header,
.template-tool-page .wrap > .section-header,
.template-guide-page .wrap > .section-header,
.section-header--card{
  max-width:960px;
  margin:0 auto 24px;
  padding:24px 26px;
  background:linear-gradient(180deg, rgba(237,246,238,.95), rgba(255,255,255,.94));
  border:1px solid var(--page-panel-border);
  border-radius:24px;
  box-shadow:var(--shadow-1);
}
.section-header--card p,
.template-service-page .section-header p,
.template-suburb-page .section-header p,
.template-tool-page .section-header p,
.template-guide-page .section-header p{
  max-width:var(--page-copy-max);
  margin:12px 0 0;
  color:var(--clay-muted);
}
.intro-template-shell{
  margin:20px 0 0;
  align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
}
.intro-template-main,
.intro-template-aside{
  background:linear-gradient(180deg, rgba(237,246,238,.96), rgba(255,255,255,.96));
  border-color:var(--page-panel-border);
}
.intro-template-main .direct-answer,
.intro-template-aside .seo-upgrade-grid{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}
.intro-template-aside .seo-upgrade-grid{
  display:grid;
  gap:14px;
}
.intro-template-aside .seo-upgrade-grid > *{
  background:rgba(255,255,255,.85);
  border:1px solid var(--clay-border);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow-1);
}
.ux-final-pass .suburb-context-block,
.ux-final-pass .scenario-block,
.ux-final-pass .local-identity,
.ux-final-pass .seo-proof-block{
  background:linear-gradient(180deg, rgba(237,246,238,.95), rgba(255,255,255,.95));
  border:1px solid var(--page-panel-border);
  border-radius:22px;
  padding:20px;
}
.ux-final-pass p{
  max-width:72ch;
}
.ux-final-pass .shared-card p:last-child,
.ux-final-pass .glass-card p:last-child,
.ux-final-pass .direct-answer p:last-child{margin-bottom:0}

/* CTA hierarchy */
.cta-role{min-height:48px}
.cta-primary{
  background:var(--matcha-600) !important;
  color:#fff !important;
  border:1px solid rgba(22,85,58,.2) !important;
  box-shadow:0 10px 24px rgba(31,122,77,.22) !important;
}
.cta-secondary{
  background:#fff !important;
  color:var(--clay-heading) !important;
  border:1px solid var(--clay-border) !important;
  box-shadow:var(--shadow-1) !important;
}
.cta-tertiary{
  background:rgba(255,255,255,.56) !important;
  color:var(--clay-muted) !important;
  border:1px dashed rgba(43,39,35,.18) !important;
  box-shadow:none !important;
}
.ux-final-pass .hero-secondary-cta,
.ux-final-pass .cta-actions,
.ux-final-pass .cta-row,
.ux-final-pass .cta-row-2,
.ux-final-pass .cta-button-grid,
.ux-final-pass .cta-compact{gap:12px}

/* Utility classes replacing inline styles */
.u-text{color:var(--clay-text)}
.u-meta-note{font-size:.88rem;color:var(--clay-muted);margin-top:4px}
.u-meta-note-lg{margin-top:8px;font-size:.9rem;color:var(--clay-muted)}
.u-flex-wrap-10{display:flex;gap:10px;flex-wrap:wrap}
.u-block-center{display:block;text-align:center}
.u-text-border{color:var(--clay-border)}
.u-h2-display{font-family:var(--fh);font-size:1.8rem;font-weight:900;color:var(--heading-on-light);margin:40px 0 14px}
.u-copy-relaxed{color:var(--text);line-height:1.8}
.u-media-frame{max-width:900px;margin:0 auto 32px;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,.12);border:1px solid var(--clay-border)}
.u-media-cover-260{width:100%;height:260px;object-fit:cover;object-position:center 30%;display:block}
.u-copy-muted{color:var(--clay-muted);font-size:.95rem}
.u-stack-center-16{display:flex;flex-direction:column;justify-content:center;gap:16px}
.u-kicker-amber{font-family:var(--fh);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#f59e0b;margin-bottom:8px}
.u-stat-xl{font-family:var(--fh);font-size:3rem;font-weight:900;color:var(--clay-text);line-height:1}
.u-meta-small{font-size:.85rem;color:var(--clay-muted);margin-top:8px}
.u-mt-4{margin-top:4px}
.u-mb-32{margin-bottom:32px}
.u-mt-24{margin-top:24px}
.u-my-24{margin:24px 0}
.u-h3-strong{font-family:var(--fh);font-weight:900;font-size:1.6rem;color:var(--clay-heading);margin:10px 0 16px}
.u-stack-10{display:flex;flex-direction:column;gap:10px}
.u-text-amber{color:var(--clay-amber)}
.u-text-red{color:var(--clay-red)}
.u-mt-12-copy{margin-top:12px;font-size:.9rem}
.u-alert-amber{background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.28);border-radius:10px;padding:14px 18px;margin:16px 0;font-size:.88rem;color:var(--clay-heading)}
.u-note-amber{font-size:.85rem;color:var(--clay-amber);margin:12px 0 0;font-weight:600}
.u-mt-20{margin-top:20px}
.u-copy-muted-sm{color:var(--clay-muted);font-size:.9rem}
.u-soft-panel{padding:24px;background:rgba(255,255,255,.55);border:1px solid var(--clay-border);border-radius:12px}
.u-subhead-strong{font-size:1.05rem;font-weight:700;color:var(--clay-heading);margin-bottom:18px}
.u-kicker-muted{font-size:.78rem;color:var(--clay-muted);margin-bottom:12px}
.u-result-hidden{display:none;padding:24px;border-radius:12px;border:2px solid var(--matcha-600);background:rgba(20,184,166,.07)}
.u-num-xl{font-size:2.2rem;margin-bottom:10px}
.u-h3-display{font-family:var(--fh);font-size:1.5rem;font-weight:900;color:var(--clay-heading);margin-bottom:10px}
.u-copy-relaxed-muted{font-size:.94rem;color:var(--clay-muted);line-height:1.8;margin-bottom:20px}
.u-flex-6-mt14{display:flex;gap:6px;margin-top:14px}
.u-text-matcha{color:var(--matcha-600)}
.u-kicker-matcha{font-family:var(--fh);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--matcha-600);margin-bottom:10px}
.u-mb10-text{margin-bottom:10px;color:var(--clay-text)}

/* page type systems */
.template-service-page .hero-grid,
.template-suburb-page .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr)}
.template-tool-page .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(300px,.98fr)}
.template-guide-page .hero-grid{grid-template-columns:minmax(0,1fr) minmax(260px,.88fr)}
.template-suburb-page .page-meta-strip,
.template-service-page .page-meta-strip,
.template-tool-page .page-meta-strip,
.template-guide-page .page-meta-strip{
  margin-bottom:16px;
}
.template-suburb-page .direct-answer,
.template-service-page .direct-answer,
.template-tool-page .direct-answer,
.template-guide-page .direct-answer{
  background:linear-gradient(180deg, rgba(237,246,238,.98), rgba(255,255,255,.96));
  border:1px solid var(--page-panel-border);
}
.template-tool-page .tool,
.template-tool-page .tool-form,
.template-tool-page .tool-shell,
.template-tool-page .result-card,
.template-tool-page .calculator-card,
.template-tool-page .quiz-card{
  background:linear-gradient(180deg, rgba(237,246,238,.94), rgba(255,255,255,.96));
  border:1px solid var(--page-panel-border);
  border-radius:24px;
  box-shadow:var(--shadow-1);
}
.template-guide-page .cross-link-card,
.template-guide-page .service-card,
.template-guide-page .proof,
.template-guide-page .faq-item{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,252,247,.96));
}

/* mobile-first spacing pass */
@media (max-width: 920px){
  .intro-template-shell,
  .template-service-page .hero-grid,
  .template-suburb-page .hero-grid,
  .template-tool-page .hero-grid,
  .template-guide-page .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .template-service-page .hero,
  .template-suburb-page .hero,
  .template-tool-page .hero,
  .template-guide-page .hero{padding:42px 0 28px}
  .template-service-page .section,
  .template-suburb-page .section,
  .template-tool-page .section,
  .template-guide-page .section,
  .template-service-page .section-alt,
  .template-suburb-page .section-alt,
  .template-tool-page .section-alt,
  .template-guide-page .section-alt{padding:34px 0}
  .section-header--card,
  .template-service-page .wrap > .section-header,
  .template-suburb-page .wrap > .section-header,
  .template-tool-page .wrap > .section-header,
  .template-guide-page .wrap > .section-header,
  .intro-template-main,
  .intro-template-aside{padding:18px}
  .ux-final-pass .shared-card,
  .ux-final-pass .glass-card,
  .ux-final-pass .seo-panel,
  .ux-final-pass .card,
  .ux-final-pass .service-card,
  .ux-final-pass .tool,
  .ux-final-pass .proof{padding:18px}
  .ux-final-pass p{max-width:100%}
  .ux-final-pass .hero-intro,
  .ux-final-pass .page-lede,
  .ux-final-pass .lead{font-size:1rem;line-height:1.7}
}
@media (max-width: 540px){
  .ux-final-pass .page-meta-strip,
  .ux-final-pass .hero-pills,
  .ux-final-pass .suburb-tags,
  .ux-final-pass .hub-strip,
  .ux-final-pass .coverage-tags{gap:8px}
  .ux-final-pass .cta-role{width:100%;justify-content:center}
  .ux-final-pass .cross-link-card,
  .ux-final-pass .service-card,
  .ux-final-pass .faq-item{border-radius:20px}
}

.u-mt-40{margin-top:40px}

/* =============================================================================
   final global cleanup patch — shared panels, cards, contrast, CTA hierarchy
   ============================================================================= */
:root{
  --ink-900:var(--clay-heading);
  --ink-700:var(--clay-text);
  --ink-600:var(--clay-muted);
}
.shared-panel-soft{
  background:linear-gradient(180deg, rgba(237,246,238,.98), rgba(255,255,255,.95)) !important;
  border:1px solid var(--page-panel-border, #b8d8c1) !important;
  color:var(--clay-heading) !important;
  box-shadow:var(--shadow-1);
}
.shared-panel-soft h1,
.shared-panel-soft h2,
.shared-panel-soft h3,
.shared-panel-soft h4,
.shared-panel-soft strong,
.shared-panel-soft .request-title,
.shared-panel-soft .page-h3{color:var(--clay-heading) !important;}
.shared-panel-soft p,
.shared-panel-soft li,
.shared-panel-soft span,
.shared-panel-soft .request-copy,
.shared-panel-soft .s-body{color:var(--clay-text) !important;}
.text-strong{color:var(--clay-heading) !important;}
.btn-tertiary,
.btn.btn-tertiary,
a.btn-tertiary{
  background:rgba(255,255,255,.60) !important;
  color:var(--clay-muted) !important;
  border:1px dashed rgba(43,39,35,.18) !important;
  box-shadow:none !important;
}
.cta-strip,
.request-cta-strip,
.mid-cta-bar,
.dark-panel-wrap,
.dark-panel,
.final-cta,
.final,
.page-final-cta{
  background:linear-gradient(180deg, rgba(237,246,238,.98), rgba(255,255,255,.96)) !important;
  border:1px solid var(--page-panel-border, #b8d8c1) !important;
  color:var(--clay-heading) !important;
}
.cta-strip p,
.request-cta-strip p,
.mid-cta-bar p,
.dark-panel-wrap p,
.dark-panel p,
.final-cta p,
.final p,
.page-final-cta p{color:var(--clay-text) !important;}
.shared-card.reading-card,
.reading-card.reading-card--aside,
.reading-card.reading-card--main{
  min-width:0;
}
.reading-card.reading-card--aside h3{
  margin:0 0 10px;
  color:var(--clay-heading);
  font-size:1.05rem;
}
.reading-card ul,
.reading-card ol{margin:0;padding-left:20px;}
.reading-card li + li{margin-top:8px;}
.ux-final-pass .hero-copy p,
.ux-final-pass .section p,
.ux-final-pass .section-alt p,
.ux-final-pass .glass-card p,
.ux-final-pass .shared-card p,
.ux-final-pass .request-copy,
.ux-final-pass .s-body,
.ux-final-pass .hero-intro{
  max-width:68ch;
}
.ux-final-pass .hero-copy p,
.ux-final-pass .section p,
.ux-final-pass .section-alt p{line-height:1.78;}
.ux-final-pass .inline-list,
.ux-final-pass .micro-links,
.ux-final-pass .hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ux-final-pass .inline-list > span,
.ux-final-pass .micro-links > a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--clay-border);
  box-shadow:var(--shadow-1);
}
@media (max-width:760px){
  .shared-panel.reading-split{gap:16px;}
  .reading-card--main,
  .reading-card--aside,
  .section-header--card,
  .template-service-page .wrap > .section-header,
  .template-suburb-page .wrap > .section-header,
  .template-tool-page .wrap > .section-header,
  .template-guide-page .wrap > .section-header{padding:18px !important;}
  .ux-final-pass p{font-size:.98rem;}
}

/* tool-page inline-style replacement utilities */
.u-ad-center{display:block;text-align:center}
.u-italic-note{font-style:italic}
.u-hidden{display:none}
.u-hidden-border{display:none;border:1px solid var(--clay-border)}
.u-tool-title-xl{font-family:var(--fh);font-weight:900;font-size:1.6rem}
.u-inline-flex-md{display:inline-flex;font-size:1rem}
.u-tool-proof-note{border:1px solid rgba(20,184,166,.15);font-size:.82rem;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.66)}
.u-center{text-align:center}
.u-cta-center-wrap{text-align:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.u-tool-title-lg{font-family:var(--fh);font-weight:900;font-size:1.5rem}
.u-text-sm{font-size:.88rem}
.u-tool-title-md{font-family:var(--fh);font-size:1.1rem;font-weight:900}
.u-copy-sm-relaxed{font-size:.88rem;line-height:1.6}
.u-text-xs{font-size:.8rem}
.u-text-note{font-size:.9rem}
.u-tool-title-sm{font-family:var(--fh);font-weight:900;font-size:1.1rem}
.u-text-btn-sm{font-size:.85rem}
.u-copy-xs-relaxed{font-size:.8rem;line-height:1.6}
.u-copy-md-relaxed{font-size:.95rem;line-height:1.7}
.u-border-red-soft{border-color:rgba(239,68,68,.2)}
.u-border-default{border:1px solid var(--clay-border)}
.u-flex-gap-6{display:flex;gap:6px}
.u-grid-auto-260{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.u-inline-flex-sm{display:inline-flex;font-size:.95rem}
.u-tool-title-compact{font-family:var(--fh);font-size:1.2rem}
.u-tool-title-xl2{font-family:var(--fh);font-size:1.4rem;font-weight:900}
.u-text-82{font-size:.82rem}
.u-copy-92-relaxed{font-size:.92rem;line-height:1.75}
.u-label-strong{font-size:1rem;font-weight:600}
.u-num-2xl{font-size:2rem}
.u-w-full{width:100%}
.u-no-underline{text-decoration:none}
.u-max-1100{max-width:1100px}
.u-grid-fit-230{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.u-maxh-200{max-height:200px}


/* =============================================================================
   PRODUCTION PASS — UX/CTA hierarchy, mobile spacing, dark-panel consolidation
   Generated: April 2026
   ============================================================================= */

/* ---- CTA hierarchy enforcement ---- */
/* Tertiary role: muted, dashed — used for Learn More / See Pricing / Compare */
.cta-role.cta-tertiary,
a.cta-role.cta-tertiary,
.btn-refer.cta-tertiary,
.btn-refer.cta-role.cta-tertiary {
  background: rgba(255,255,255,.55) !important;
  color: var(--clay-muted) !important;
  border: 1px dashed rgba(43,39,35,.20) !important;
  box-shadow: none !important;
  font-weight: 700;
}
.cta-role.cta-tertiary:hover,
a.cta-role.cta-tertiary:hover {
  background: rgba(255,255,255,.85) !important;
  color: var(--clay-text) !important;
  text-decoration: none !important;
}

/* ---- CTA button grid: max 3 per row, 4th wraps ---- */
.cta-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cta-button-grid > a {
  flex: 1 1 auto;
  min-width: 160px;
}
/* On mobile: stack all CTAs */
@media (max-width: 640px) {
  .cta-button-grid > a { width: 100%; flex: 1 0 100%; }
}

/* ---- Final CTA consolidated panel (light-green soft) ---- */
.final-cta,
.final,
.page-final-cta,
.dark-panel-wrap,
.dark-panel,
.dark-section,
.hero-dark,
.section-dark,
.mid-cta-bar,
.cta-strip,
.nap-block.cta-strip,
.request-cta-strip {
  background: linear-gradient(180deg, #eef6ef 0%, #f3f8f3 100%) !important;
  border: 1px solid #b8d8c1 !important;
  color: var(--clay-heading) !important;
  box-shadow: 0 8px 24px rgba(31,122,77,.07) !important;
}
.final-cta *,
.final *,
.page-final-cta *,
.dark-panel-wrap *,
.dark-panel * {
  color: inherit;
}
.final-cta h1, .final h1, .page-final-cta h1,
.final-cta h2, .final h2, .page-final-cta h2,
.final-cta h3, .final h3, .page-final-cta h3,
.dark-panel-wrap h1, .dark-panel-wrap h2, .dark-panel-wrap h3,
.dark-panel h1, .dark-panel h2, .dark-panel h3 {
  color: var(--clay-heading) !important;
}
.final-cta p, .final p, .page-final-cta p,
.dark-panel-wrap p, .dark-panel p,
.cta-strip p, .mid-cta-bar p {
  color: var(--clay-text) !important;
}

/* ---- Mobile-first spacing pass (template pages) ---- */
@media (max-width: 640px) {
  .template-service-page .section,
  .template-suburb-page .section,
  .template-tool-page .section,
  .template-guide-page .section { padding: 34px 0; }

  .template-service-page .section-alt,
  .template-suburb-page .section-alt,
  .template-tool-page .section-alt,
  .template-guide-page .section-alt { padding: 28px 0; }

  .template-service-page .hero,
  .template-suburb-page .hero,
  .template-tool-page .hero,
  .template-guide-page .hero { padding: 34px 0 24px; }

  .refer-section { padding: 22px 14px; }
  .refer-grid { grid-template-columns: 1fr !important; gap: 20px; }

  .trust-bar-inner { gap: 8px 14px; }
  .trust-item { padding: 8px 12px; }
  .hero-pills { gap: 8px; }
  .pill { padding: 7px 11px; font-size: .82rem; }

  .glass-card, .card, .note, .seo-panel,
  .service-card, .cross-link-card, .cause-card {
    padding: 16px;
    border-radius: 18px;
  }

  .final-cta, .final, .page-final-cta { padding: 22px 14px !important; border-radius: 22px; }
  .refer-section { border-radius: 22px; }
}

/* ---- JS tool inline-style colour utilities ---- */
.u-warn-icon { color: #ef4444; }
.u-warn-icon-amber { color: #FF8C42; }
.u-ok-icon { color: #16a34a; }
.dp-item { margin-bottom: 8px; }
.b-msg-action { font-size: .9rem; color: var(--clay-muted); margin-top: 6px; display: block; }

/* ---- Sticky mobile CTA bar (standardised) ---- */
.sticky-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,253,249,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--clay-border);
  padding: 10px 14px;
  gap: 10px;
}
.sticky-mobile-bar > a { flex: 1; min-height: 46px; text-align: center; }
@media (max-width: 640px) { .sticky-mobile-bar { display: flex; } }
body.has-sticky-bar { padding-bottom: 74px; }

/* ---- Shared panel reading-split alignment fix ---- */
.shared-panel.reading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 20px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
@media (max-width: 760px) {
  .shared-panel.reading-split { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- reading-card--aside tightening ---- */
.reading-card--aside {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,246,240,.96));
  border: 1px solid var(--clay-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow-1);
}

/* ---- OG / theme-color cleanup ---- */
/* theme-color should be warm not dark — handled in <head> not CSS */


/* =============================================================================
   PRODUCTION PASS 2 — April 2026
   - Ensure btn-tertiary wins over btn-secondary in compound class usage
   - Add page-grid layout utility
   - Sticky mobile bar — guide pages now include body.has-sticky-bar
   ============================================================================= */

/* btn-tertiary compound-class override: ensures tertiary styling wins */
a.btn-tertiary.cta-role,
button.btn-tertiary.cta-role,
.btn-tertiary.cta-role {
  background: rgba(255,255,255,.58) !important;
  color: var(--clay-muted) !important;
  border: 1px dashed rgba(43,39,35,.20) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
a.btn-tertiary.cta-role:hover,
button.btn-tertiary.cta-role:hover,
.btn-tertiary.cta-role:hover {
  background: rgba(255,255,255,.88) !important;
  color: var(--clay-text) !important;
  text-decoration: none !important;
}

/* page-grid: used on guide template pages */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,.4fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 920px) {
  .page-grid { grid-template-columns: 1fr; }
}

/* info-card: companion to page-grid */
.info-card {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,246,240,.96));
  border: 1px solid var(--clay-border);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
}
.info-card h3 { color: var(--clay-heading); margin: 0 0 10px; font-size: 1rem; }
.info-card ul, .info-card ol { padding-left: 18px; color: var(--clay-text); }
.info-card li + li { margin-top: 6px; }

/* checklist: used in guide aside panels */
.checklist { list-style: none; padding: 0; margin: 0 0 16px; }
.checklist li { padding: 6px 0 6px 24px; position: relative; color: var(--clay-text); }
.checklist li::before { content: "✔"; position: absolute; left: 0; color: var(--matcha-600); font-size: .85rem; top: 7px; }

/* tool-banner + tool-shell utility classes */
.tool-banner { padding: 24px 0; }
.tool-shell { padding: 26px; }

/* u-mt-20 spacing utility */
.u-mt-20 { margin-top: 20px; }

/* promo-cta matcha variant */
.promo-cta--matcha {
  background: linear-gradient(180deg, rgba(237,246,238,.98), rgba(255,255,255,.96));
  border-color: #b8d8c1;
}

/* page-h2, page-h3, page-copy — guide page typography */
.page-h2 { font-family: var(--fh); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; color: var(--clay-heading); margin: 0 0 12px; line-height: 1.1; }
.page-h3 { font-family: var(--fh); font-weight: 700; font-size: 1.1rem; color: var(--clay-heading); margin: 16px 0 8px; }
.page-copy { color: var(--clay-text); line-height: 1.78; margin-bottom: 12px; max-width: 70ch; }
.page-meta-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.page-meta-card { background: var(--clay-surface); border: 1px solid var(--clay-border); border-radius: 12px; padding: 8px 14px; font-size: .84rem; display: flex; align-items: center; gap: 6px; }
.pm-label { color: var(--clay-muted); font-weight: 600; }
.pm-value { color: var(--clay-text); font-weight: 700; }

/* breadcrumbs on guide/lite hero */
.hero-lite .breadcrumbs,
.breadcrumbs { font-size: .82rem; color: var(--clay-muted); margin-bottom: 12px; }
.breadcrumbs a { color: var(--clay-muted); }
.breadcrumbs a:hover { color: var(--clay-heading); }

/* hero-commercial-note */
.hero-commercial-note { background: rgba(255,200,90,.12); border: 1px solid rgba(255,200,90,.4); border-radius: 12px; padding: 10px 14px; font-size: .88rem; color: var(--clay-text); margin: 12px 0 16px; }
.hero-commercial-note strong { display: block; color: var(--clay-heading); margin-bottom: 4px; }

/* hero-lite variant */
.hero-lite { padding: 36px 0 28px; }

/* skip-link accessibility */
.skip-link { position: absolute; left: -9999px; top: 6px; background: var(--clay-accent); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 700; z-index: 999; }
.skip-link:focus { left: 14px; }



/* =============================================================================
   STICKY MOBILE CONTAINER — .sticky-mobile (original pattern, 200+ pages)
   Was missing from CSS — child classes (__wa, __call) were defined but
   the container was not. Fixed here.
   ============================================================================= */
.sticky-mobile {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,253,249,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--clay-border);
  padding: 10px 14px;
  gap: 10px;
}
.sticky-mobile > a {
  flex: 1;
  min-height: 46px;
  text-align: center;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none !important;
}
@media (max-width: 640px) {
  .sticky-mobile { display: flex; }
  body { padding-bottom: 74px; }
}

/* u-mt-8 utility (used in JS-generated result panels) */
.u-mt-8 { margin-top: 8px; }


/* =============================================================================
   PRODUCTION PASS 2 — CTA normalisation, tool widget classes, panel system
   April 2026
   ============================================================================= */

/* ---- Normalised CTA hierarchy (replaces cta-role system) ----
   btn btn-primary  = orange / call-to-action
   btn btn-secondary = surface / support action
   btn btn-tertiary  = muted / lowest emphasis
*/
.btn { position:relative; min-height:50px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:16px; border:1px solid transparent; font-family:var(--fh); font-weight:800; font-size:.98rem; letter-spacing:-.02em; text-decoration:none !important; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease; }
.btn.btn-primary { background:var(--clay-accent); color:#fff !important; box-shadow:var(--shadow-accent); }
.btn.btn-primary:hover { background:var(--clay-accent-dark); transform:translateY(-2px); text-decoration:none !important; }
.btn.btn-secondary { background:var(--clay-surface); color:var(--clay-heading) !important; border-color:var(--clay-border); box-shadow:var(--shadow-1); }
.btn.btn-secondary:hover { background:var(--clay-surface-soft); transform:translateY(-2px); text-decoration:none !important; }
.btn.btn-tertiary { background:rgba(255,255,255,.58); color:var(--clay-muted) !important; border:1px dashed rgba(43,39,35,.20); box-shadow:none; font-weight:700; }
.btn.btn-tertiary:hover { background:rgba(255,255,255,.85); color:var(--clay-text) !important; text-decoration:none !important; }
@media (max-width:640px) { .btn { min-height:46px; font-size:.94rem; } }

/* ---- Tool widget classes (replaces JS .style.cssText) ---- */
.tool-btn-option {
  background:#fff; border:1px solid var(--clay-border); color:var(--clay-text);
  padding:13px 16px; border-radius:9px; cursor:pointer; text-align:left;
  font-size:.92rem; transition:all .18s; width:100%; font-family:var(--fb);
  display:block;
}
.tool-btn-option:hover, .tool-btn-option.selected {
  background:rgba(255,107,61,.08); border-color:rgba(255,107,61,.35);
  color:var(--clay-heading);
}
.tool-link-primary {
  background:var(--matcha-600); color:#fff !important; padding:11px 20px;
  border-radius:9px; font-size:.88rem; font-weight:700;
  text-decoration:none; display:inline-block;
}
.tool-link-primary:hover { background:var(--matcha-800); text-decoration:none !important; }
.tool-link-secondary {
  background:#fff; color:var(--clay-heading) !important; border:1px solid var(--clay-border);
  padding:11px 18px; border-radius:9px; font-size:.88rem; font-weight:600;
  text-decoration:none; display:inline-block;
}
.tool-link-secondary:hover { background:var(--clay-surface-soft); text-decoration:none !important; }
.tool-btn-reset {
  background:none; border:1px solid var(--clay-border); color:var(--clay-muted);
  padding:11px 18px; border-radius:9px; font-size:.85rem; cursor:pointer;
}
/* Progress dot states */
.tool-progress-dot {
  width:8px; height:8px; border-radius:50%; background:var(--clay-border);
  transition:background .2s; display:inline-block;
}
.tool-progress-dot--done { background:var(--matcha-600); }
.tool-progress-dot--active { background:var(--clay-heading); }

/* ---- JS result state colours ---- */
.result-ok, .v-result-ok { color:var(--clay-green) !important; }
.result-warn, .v-result-warn { color:var(--clay-amber) !important; }
.result-danger, .v-result-danger { color:var(--clay-red) !important; }

/* dp-item spacing (replaces JS margin-bottom:8px) */
.dp-item { margin-bottom:8px; display:flex; align-items:flex-start; gap:6px; }

/* ---- Panel / card system consolidation ---- */
.page-intro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:20px;
}
@media (max-width:760px) { .page-intro-grid { grid-template-columns:1fr; gap:14px; } }
.intro-main-card {
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,246,240,.96));
  border:1px solid var(--clay-border); border-radius:22px; padding:24px;
  box-shadow:var(--shadow-1);
}
.intro-aside-card {
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,246,240,.96));
  border:1px solid var(--clay-border); border-radius:22px; padding:22px;
  box-shadow:var(--shadow-1);
}
.intro-aside-card h3 { font-size:1rem; color:var(--clay-heading); margin-bottom:10px; }
.intro-aside-card ul { padding-left:18px; margin:0; }
.intro-aside-card li { color:var(--clay-text); margin-bottom:6px; font-size:.94rem; }

/* Lead paragraph — one short para at top of intro card */
.intro-lead { font-size:1.06rem; line-height:1.78; color:var(--clay-muted); max-width:62ch; margin-bottom:14px; }


/* =============================================================================
   PRODUCTION PASS v4 — Selected-state CSS, readability utilities, card system
   April 2026
   ============================================================================= */

/* ---- Tool button selected/hover state (replaces JS borderColor+background) ---- */
.tool-btn-option:hover,
.tool-btn-option.tool-selected {
  border-color: var(--matcha-600) !important;
  background: rgba(20,184,166,.06) !important;
  color: var(--clay-heading);
}
.tool-btn-option:not(:hover):not(.tool-selected) {
  border-color: var(--clay-border);
  background: #fff;
}

/* ---- Readability wrapper: limits long prose to readable line length ---- */
.prose-cap p,
.prose-cap li {
  max-width: 68ch;
}
.prose-cap .page-copy + .page-copy {
  margin-top: 12px;
}

/* ---- Meta-copy: secondary explanatory text, visually quieter ---- */
.meta-copy {
  font-size: .92rem;
  color: var(--clay-muted);
  line-height: 1.7;
  max-width: 66ch;
  border-left: 3px solid var(--clay-border-light);
  padding-left: 14px;
  margin-top: 10px;
}

/* ---- Content grid: 2-col intro split used across guide/service pages ---- */
.content-grid-2 {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 760px) {
  .content-grid-2 { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- Answer box — quick-answer callout ---- */
.answer-callout {
  background: rgba(31,122,77,.06);
  border: 1px solid rgba(31,122,77,.18);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 14px 0;
}
.answer-callout strong { color: var(--clay-heading); }
.answer-callout p { color: var(--clay-text); margin: 0; font-size: .95rem; }

/* ---- Checklist card used in aside panels ---- */
.aside-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.aside-checklist li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid var(--clay-border-light);
  font-size: .93rem;
  color: var(--clay-text);
}
.aside-checklist li:last-child { border-bottom: none; }
.aside-checklist li::before { content: "✓"; color: var(--matcha-600); font-weight: 700; flex-shrink: 0; }

/* ---- Section intro: compact header for dense content sections ---- */
.section-intro-block {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
  gap: 18px;
  margin-bottom: 28px;
}
.section-intro-block .intro-lead-col p:first-child {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--clay-text);
  max-width: 60ch;
}
@media (max-width: 760px) {
  .section-intro-block { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- FAQ item base (shared across pages) ---- */
.faq-item { border-bottom: 1px solid var(--clay-border-light); }
.faq-item:last-child { border-bottom: none; }


/* prose-cap sitewide via class on persistent wrappers */
.local-proof,
.seo-proof-body,
.suburb-context-copy,
.local-identity p,
.proof-note,
.proof-disclaimer,
.cta-provider-note {
  max-width: 68ch;
  line-height: 1.78;
}

/* answer-block callout styling (subtle left-bordered highlight) */
.answer-block {
  background: rgba(31,122,77,.05);
  border-left: 3px solid rgba(31,122,77,.25);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: .95rem;
  color: var(--clay-text);
}
.answer-block strong {
  color: var(--clay-heading);
  display: block;
  margin-bottom: 4px;
}

/* tool-selected state (CSS-driven hover) */
.tool-btn-option {
  border: 1px solid var(--clay-border);
  background: #fff;
  transition: border-color .18s, background .18s;
}
.tool-btn-option.tool-selected,
.tool-btn-option:hover {
  border-color: var(--matcha-600) !important;
  background: rgba(20,184,166,.06) !important;
}

/* ---- answer-block enhanced styling (replaces bare margin rule) ---- */
.answer-block {
  background: rgba(31,122,77,.05);
  border-left: 3px solid rgba(31,122,77,.25);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: .95rem;
  color: var(--clay-text);
}
.answer-block strong {
  color: var(--clay-heading);
  display: block;
  margin-bottom: 4px;
}

/* =============================================================================
   readability refactor pass — shared intro/aside panels for long-copy sections
   ============================================================================= */
.reading-split,
.shared-panel.reading-split,
.page-intro-grid.reading-split,
.intro-template-shell.reading-split,
.seo-upgrade-grid.reading-split,
.u-mobile-stack{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(280px,.95fr);
  gap:22px;
  align-items:stretch;
}

.reading-card-main,
.reading-card--main{
  min-width:0;
}

.reading-card-aside,
.reading-card--aside,
.intro-aside-card,
.intro-template-aside,
.info-card.reading-card-aside,
.proof-card.reading-card-aside,
.seo-proof-block.reading-card-aside{
  min-width:0;
  background:linear-gradient(180deg, rgba(237,246,238,.98), rgba(255,255,255,.96));
  border:1px solid var(--page-panel-border, #b8d8c1);
}

.intro-main-card > .reading-card-main,
.intro-template-main > .reading-card-main,
.page-intro-grid .reading-card-main,
.intro-template-shell .reading-card-main,
.visual-pass-reading .reading-card-main,
.ux-copy-panel .reading-card-main{
  height:100%;
}

.intro-aside-card,
.intro-template-aside,
.page-intro-grid > .intro-aside-card,
.page-intro-grid > .info-card.reading-card-aside{
  padding:22px;
  border-radius:26px;
  box-shadow:var(--shadow-1);
}

.shared-panel-soft .checklist,
.reading-card-aside .checklist,
.intro-aside-card .checklist{
  display:grid;
  gap:10px;
}

.shared-panel-soft .checklist li,
.reading-card-aside .checklist li,
.intro-aside-card .checklist li{
  margin:0;
}

.local-identity.shared-panel-soft,
.llm-block.shared-panel-soft,
.scenario-block.shared-panel-soft,
.direct-answer.shared-panel-soft,
.proof-card.shared-panel-soft,
.seo-proof-block.shared-panel-soft{
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(237,246,238,.92));
  border:1px solid var(--page-panel-border, #b8d8c1);
}

.proof-card.shared-panel-soft .proof-card__lead,
.proof-card.shared-panel-soft .proof-card__footnote,
.seo-proof-block.shared-panel-soft .seo-proof-body,
.seo-proof-block.shared-panel-soft .seo-proof-quote,
.local-identity.shared-panel-soft p,
.scenario-block.shared-panel-soft p{
  max-width:66ch;
}

.proof-card.shared-panel-soft .proof-card__footnote,
.seo-proof-block.shared-panel-soft .seo-proof-quote,
.local-identity.shared-panel-soft .cta-context-note{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(185,209,188,.8);
}

.section-header--card.shared-panel-soft,
.section-header.shared-panel-soft{
  background:linear-gradient(180deg, rgba(237,246,238,.92), rgba(255,255,255,.92));
}

.final-cta.reading-card-main,
.page-final-cta.reading-card-main{
  border-radius:28px;
}

@media (max-width: 980px){
  .reading-split,
  .shared-panel.reading-split,
  .page-intro-grid.reading-split,
  .intro-template-shell.reading-split,
  .seo-upgrade-grid.reading-split,
  .u-mobile-stack{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .reading-card-main,
  .reading-card--main,
  .reading-card-aside,
  .reading-card--aside,
  .intro-aside-card,
  .intro-template-aside{
    padding:20px;
    border-radius:22px;
  }

  .shared-panel-soft .checklist,
  .reading-card-aside .checklist,
  .intro-aside-card .checklist{
    gap:8px;
  }
}


/* =============================================================================
   PUBLICATION FIX — Missing button classes, final-cta consolidation
   April 2026
   ============================================================================= */

/* btn-dark: was undefined — map to secondary style */
.btn-dark,
a.btn-dark,
button.btn-dark {
  background: var(--clay-surface) !important;
  color: var(--clay-heading) !important;
  border: 1px solid var(--clay-border) !important;
  box-shadow: var(--shadow-1) !important;
}
.btn-dark:hover, a.btn-dark:hover {
  background: var(--clay-surface-soft) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* btn-warm: was undefined — map to tertiary style */
.btn-warm,
a.btn-warm,
button.btn-warm {
  background: rgba(255,255,255,.58) !important;
  color: var(--clay-muted) !important;
  border: 1px dashed rgba(43,39,35,.20) !important;
  box-shadow: none !important;
  font-weight: 700;
}
.btn-warm:hover, a.btn-warm:hover {
  background: rgba(255,255,255,.85) !important;
  color: var(--clay-text) !important;
  text-decoration: none !important;
}

/* final-cta-btns: was undefined flex container */
.final-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
@media (max-width: 640px) {
  .final-cta-btns { flex-direction: column; }
  .final-cta-btns > a { width: 100%; justify-content: center; }
}

/* calc-btn: tool calculator button */
.calc-btn {
  background: var(--clay-accent);
  color: #fff !important;
  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: var(--fh);
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.calc-btn:hover { background: var(--clay-accent-dark); transform: translateY(-1px); }

/* CANONICAL FINAL-CTA RULE — light green, dark readable text
   This must be the LAST rule to win the cascade.
   Covers: .final-cta, .final, .page-final-cta, .final.cta-box
*/
.final-cta,
.final,
.page-final-cta,
.final.cta-box {
  background: linear-gradient(180deg, #eef6ef 0%, #f2f8f2 100%) !important;
  border: 1px solid #b8d8c1 !important;
  border-radius: 28px !important;
  color: var(--clay-heading) !important;
  box-shadow: 0 8px 24px rgba(31,122,77,.08) !important;
}

/* All text inside final-cta: dark and readable */
.final-cta *,
.final *,
.page-final-cta *,
.final.cta-box * {
  color: inherit;
}
.final-cta h1, .final-cta h2, .final-cta h3, .final-cta h4,
.final h1, .final h2, .final h3, .final h4,
.page-final-cta h1, .page-final-cta h2, .page-final-cta h3,
.final.cta-box h1, .final.cta-box h2, .final.cta-box h3 {
  color: var(--clay-heading) !important;
}
.final-cta p, .final p, .page-final-cta p, .final.cta-box p {
  color: var(--clay-text) !important;
}
.final-cta .support-local-message,
.final-cta .local-proof,
.final .support-local-message,
.final .local-proof {
  color: var(--clay-muted) !important;
}

/* Trust pills inside final-cta: always readable */
.final-cta .trust-pill,
.final .trust-pill,
.page-final-cta .trust-pill {
  background: rgba(255,255,255,.86) !important;
  color: var(--clay-heading) !important;
  border: 1px solid rgba(31,122,77,.18) !important;
}
.final-cta .trust-bar,
.final .trust-bar,
.page-final-cta .trust-bar {
  background: rgba(255,255,255,.56) !important;
  border-color: rgba(31,122,77,.12) !important;
  border-radius: 18px;
  margin-top: 18px;
}

/* nap-block inside final-cta */
.final-cta .nap-block,
.final .nap-block,
.page-final-cta .nap-block {
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(31,122,77,.14) !important;
  border-radius: 14px;
  padding: 12px 18px;
  color: var(--clay-muted) !important;
  font-size: .88rem;
  margin-top: 14px;
}

/* suburb-context-block inside final-cta */
.final-cta .suburb-context-block,
.final .suburb-context-block {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(31,122,77,.14) !important;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.final-cta .suburb-context-title,
.final .suburb-context-title {
  color: var(--clay-heading) !important;
  font-weight: 700;
  margin-bottom: 6px;
}
.final-cta .suburb-context-copy,
.final .suburb-context-copy {
  color: var(--clay-text) !important;
  font-size: .93rem;
}


/* hero image safety pass */
body .hero-img-col{display:flex!important;align-items:center!important;justify-content:center!important}
body .hero-img,body .hero-img-col img,body .hero-visual-wrap img,body .hero-visual img{width:min(100%,640px)!important;max-width:100%!important;height:auto!important;max-height:min(42vw,420px)!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center center!important;display:block!important;margin-inline:auto!important;background:transparent!important}
@media (max-width: 900px){body .hero-img,body .hero-img-col img,body .hero-visual-wrap img,body .hero-visual img{max-height:320px!important}}

/*
   global ux/ui alignment pass
   - stop aggressive anywhere-wrap from breaking header buttons, numbers and labels
   - stabilise shared header alignment across desktop widths
   - align hero columns/cards to a cleaner top edge
*/
html,body{
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.site-header,
.site-header *,
.h-nav,
.h-nav a,
.h-ctas,
.h-ctas a,
.logo,
.btn,
.btn-hero,
.btn-primary,
.btn-secondary,
.btn-book,
.btn-refer,
.btn-call,
.btn-wa,
.sticky-mobile > a,
.sticky-bottom-cta a,
.quick-nav__links a,
.trust-item,
.pill,
.hub-strip a,
.cross-link-card,
.page-meta-card,
.pm-value,
.ti-label,
.ti-sub{
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
}

.h-inner{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
}
.h-nav{
  min-width:0;
  justify-content:center;
  align-content:center;
  row-gap:4px;
}
.h-nav a,
.h-ctas a,
.btn-call,
.btn-wa{
  white-space:nowrap;
}
.h-ctas{
  flex-wrap:nowrap;
  justify-content:flex-end;
  flex-shrink:0;
}
.h-ctas .btn-wa,
.h-ctas .btn-call{
  min-width:136px;
  padding-inline:18px;
}
.h-ctas .btn-call{min-width:148px;}

.hero-grid,
.template-service-page .hero-grid,
.template-suburb-page .hero-grid,
.template-tool-page .hero-grid,
.template-guide-page .hero-grid,
.hero-pricing-grid,
.page-grid,
.reading-split,
.seo-upgrade-grid{
  align-items:start !important;
}
.hero-grid > *,
.page-grid > *,
.reading-split > *,
.seo-upgrade-grid > *{
  min-width:0;
}
.template-service-page .hero-copy,
.template-suburb-page .hero-copy,
.template-tool-page .hero-copy,
.template-guide-page .hero-copy,
.template-service-page .hero-grid > div:first-child,
.template-suburb-page .hero-grid > div:first-child,
.template-tool-page .hero-grid > div:first-child,
.template-guide-page .hero-grid > div:first-child{
  max-width:100%;
}
.template-service-page .hero-h1,
.template-service-page .page-h1,
.template-suburb-page .hero-h1,
.template-suburb-page .page-h1,
.template-tool-page .hero-h1,
.template-tool-page .page-h1,
.template-guide-page .hero-h1,
.template-guide-page .page-h1{
  max-width:15ch;
}
.shared-panel.reading-split,
.ux-copy-panel,
.reading-card,
.section-header--card,
.page-meta-strip,
.hero-pills,
.cta-button-grid,
.hero-secondary-cta,
.hero-ctas{
  width:100%;
}

@media (max-width: 1180px){
  .h-inner{grid-template-columns:auto minmax(0,1fr) auto !important;gap:12px !important;}
  .h-nav a{padding:9px 12px;font-size:.89rem;}
  .h-ctas .btn-wa{min-width:124px;}
  .h-ctas .btn-call{min-width:138px;}
}
@media (max-width: 980px){
  .h-nav a{padding:8px 10px;font-size:.86rem;}
  .h-ctas .btn-wa,.h-ctas .btn-call{min-width:auto;}
  .template-service-page .hero-h1,
  .template-service-page .page-h1,
  .template-suburb-page .hero-h1,
  .template-suburb-page .page-h1,
  .template-tool-page .hero-h1,
  .template-tool-page .page-h1,
  .template-guide-page .hero-h1,
  .template-guide-page .page-h1{max-width:17ch;}
}
@media (max-width: 860px){
  .h-inner{display:flex !important;}
}

/* =============================================================================
   april 2026 layout hotfix pass
   fixes oversized svg icons, lone quick-answer wrappers, full-width card stacks,
   off-centre media blocks, and desktop/mobile CTA bar collisions.
   ============================================================================= */

.container,
.section .container,
.section-alt .container,
.seo-related-links .container,
.hero-visual-section .container {
  width: min(1140px, calc(100% - 44px));
  max-width: 1140px;
  margin-inline: auto;
}
@media (max-width: 760px) {
  .container,
  .section .container,
  .section-alt .container,
  .seo-related-links .container,
  .hero-visual-section .container {
    width: calc(100% - 28px);
  }
}

.section-heading,
.section-header {
  max-width: 74ch;
  margin: 0 0 20px;
}

.card-grid,
.card-grid-2,
.card-grid-3 {
  display: grid;
  gap: 18px;
}
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 920px) {
  .card-grid-2,
  .card-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .card-grid-2,
  .card-grid-3 { grid-template-columns: 1fr; }
}

.sc-icon,
.ti-icon,
.service-icon,
.feature-icon,
.problem-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255,107,61,.08);
  border: 1px solid rgba(255,107,61,.14);
  color: var(--clay-accent-dark);
  flex: 0 0 56px;
  margin-bottom: 14px;
}
.sc-icon svg,
.ti-icon svg,
.service-icon svg,
.feature-icon svg,
.problem-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.sc-icon svg circle,
.sc-icon svg path,
.sc-icon svg line,
.sc-icon svg polyline,
.sc-icon svg polygon,
.ti-icon svg circle,
.ti-icon svg path,
.ti-icon svg line,
.ti-icon svg polyline,
.ti-icon svg polygon {
  fill: none;
  stroke: currentColor;
}
.trust-item .ti-icon {
  margin-bottom: 0;
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 12px;
}
.trust-item .ti-icon svg {
  width: 20px;
  height: 20px;
}

.direct-answer.hero-answer.shared-panel.reading-split,
.hero .direct-answer.shared-panel.reading-split {
  display: block !important;
  width: min(1140px, calc(100% - 44px));
  max-width: 1140px;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.direct-answer.hero-answer.shared-panel.reading-split::before,
.hero .direct-answer.shared-panel.reading-split::before {
  display: none !important;
}
.direct-answer.hero-answer.shared-panel.reading-split > .shared-card,
.hero .direct-answer.shared-panel.reading-split > .shared-card {
  max-width: min(760px, 100%);
}

.hero-visual-section,
.section .hero-visual-section,
.section-alt .hero-visual-section {
  padding-inline: 0;
}
.hero-visual-wrap,
.story-visual,
.refer-img-wrap,
.page-media,
.figure-wrap {
  width: min(1140px, calc(100% - 44px));
  max-width: 1140px;
  margin-inline: auto;
}
.hero-visual-wrap img,
.story-visual img,
.page-media img,
.figure-wrap img {
  width: min(100%, 760px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  display: block;
}
.refer-section .refer-img-wrap,
.refer-section .refer-img {
  max-width: 100% !important;
}
.refer-section .refer-img {
  aspect-ratio: 16 / 9 !important;
}

.seo-related-links .card,
.card-grid .card,
.card-grid article.card {
  padding: 20px;
  border-radius: 22px;
}
.card-grid .card h3,
.card-grid article.card h3 { margin: 0 0 8px; }
.card-grid .card p,
.card-grid article.card p { margin: 0; }

.sticky-bottom-cta { display: none; }
@media (max-width: 760px) {
  .sticky-bottom-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 170;
    background: rgba(255,253,249,.96);
    border-top: 1px solid var(--clay-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 10px 12px;
  }
  .sticky-bottom-cta .sbc-wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr .95fr;
    gap: 8px;
  }
  .sticky-bottom-cta a {
    min-height: 44px;
    border-radius: 14px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none !important;
  }
  body { padding-bottom: 82px; }
}
@media (max-width: 520px) {
  .sticky-bottom-cta .sbc-wrap { grid-template-columns: 1fr 1fr 1fr; }
  .sticky-bottom-cta a { font-size: .82rem; padding: 0 8px; }
}
@media (max-width: 760px) {
  .sticky-mobile { display: none !important; }
}

.hero-copy,
.section-header,
.section-heading,
.manual-cro-shell,
.direct-answer,
.page-meta-strip,
.seo-enhancement,
.seo-related-links {
  min-width: 0;
}


/* =============================================================================
   may 2026 qa header + alignment hardening pass
   fixes wrapped header CTAs, desktop sticky-bar leakage, start-here hero balance,
   and makes urgent phone actions more visually distinct.
   ============================================================================= */

html, body{
  word-break: normal !important;
  overflow-wrap: anywhere;
}

body,
p,
li,
.card,
.shared-card,
.feature-card,
.cross-link-card,
.page-meta-card{
  overflow-wrap: break-word;
}

.site-header,
.site-header *{
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.site-header{
  isolation: isolate;
}

.h-inner{
  min-height: 84px !important;
  height: auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto !important;
  grid-template-areas: "logo nav ctas" !important;
  align-items: center !important;
  column-gap: 16px !important;
  row-gap: 8px !important;
}

.logo{
  grid-area: logo;
  align-self: center;
}

.h-nav{
  grid-area: nav;
  min-width: 0;
  justify-content: center;
  align-items: center;
  row-gap: 6px;
}

.h-nav a{
  white-space: nowrap !important;
}

.h-ctas{
  grid-area: ctas;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}

.h-ctas a,
.btn-wa,
.btn-call{
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

.h-ctas .btn-wa{
  min-width: 120px !important;
  padding-inline: 16px !important;
}

.h-ctas .btn-call{
  min-width: 166px !important;
  padding-inline: 16px !important;
  background: var(--matcha-600) !important;
  color: #fff !important;
  border-color: rgba(17, 24, 39, .06) !important;
  box-shadow: 0 12px 28px rgba(31,122,77,.24) !important;
}

.h-ctas .btn-call:hover{
  background: var(--matcha-800) !important;
}

.h-ctas .btn-call::before{
  content: "!" !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin-right: .45em;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-weight: 900;
  line-height: 1;
}

.hero-img-col{
  align-items: flex-start !important;
  justify-content: center !important;
}

.start-here-page .hero-grid{
  grid-template-columns: minmax(0,1.06fr) minmax(320px,500px) !important;
  gap: 28px !important;
  align-items: start !important;
}

.start-here-page .hero-copy{
  min-width: 0;
}

.start-here-page .hero-copy .reading-card--main{
  max-width: 720px;
}

.start-here-page .hero-h1,
.start-here-page .page-h1{
  max-width: 12ch !important;
}

.start-here-page .hero-img{
  max-width: 500px !important;
  margin-top: 14px !important;
}

.start-here-page .hero-ctas{
  align-items: stretch;
}

.start-here-page .hero-ctas a{
  min-width: 220px;
}

.start-here-page .hero-secondary-cta a{
  min-width: 180px;
}

.sticky-bottom-cta{
  display: none !important;
}

@media (max-width: 1180px){
  .h-inner{
    grid-template-columns: auto minmax(0,1fr) auto !important;
  }
  .h-nav{
    justify-content: center;
  }
  .h-nav a{
    padding: 9px 11px !important;
    font-size: .87rem !important;
  }
  .h-ctas .btn-wa{
    min-width: 112px !important;
  }
  .h-ctas .btn-call{
    min-width: 154px !important;
  }
}

@media (max-width: 1024px){
  .h-inner{
    grid-template-columns: auto auto !important;
    grid-template-areas:
      "logo ctas"
      "nav nav" !important;
    align-items: start !important;
  }
  .h-nav{
    justify-content: flex-start;
    padding-top: 2px;
  }
  .start-here-page .hero-grid{
    grid-template-columns: 1fr !important;
  }
  .start-here-page .hero-h1,
  .start-here-page .page-h1{
    max-width: 14ch !important;
  }
  .start-here-page .hero-img{
    margin-top: 0 !important;
  }
}

@media (max-width: 860px){
  .h-inner{
    display: flex !important;
    min-height: 72px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .h-nav{
    display: none !important;
  }
  .h-ctas{
    margin-left: auto;
  }
}

@media (max-width: 760px){
  .sticky-bottom-cta{
    display: block !important;
    position: sticky;
    bottom: 0;
    z-index: 60;
  }
  .start-here-page .hero-ctas a,
  .start-here-page .hero-secondary-cta a{
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 560px){
  .h-ctas{
    gap: 8px;
  }
  .h-ctas .btn-wa{
    min-width: 98px !important;
    padding-inline: 12px !important;
  }
  .h-ctas .btn-call{
    min-width: 132px !important;
    padding-inline: 12px !important;
  }
  .h-ctas .btn-call::before{
    margin-right: .35em;
  }
}


/* Referral utility and tertiary CTA rules */
.footer-referral-link,.referral-link-quiet{display:inline-flex;align-items:center;gap:6px;color:#0f6b57;font-weight:700;text-decoration:none}
.footer-referral-link:hover,.referral-link-quiet:hover{text-decoration:underline}
.footer-referral-link{white-space:nowrap}
.referral-link-quiet{font-size:.96rem}
.refer-eyebrow{display:inline-flex;align-items:center;gap:6px}
@media (max-width: 720px){
  .footer-referral-link{display:inline}
}

/* =============================================================================
   june 2026 header unification pass
   audit result: 248 pages with shared headers. this final layer makes the header
   layout consistent across page types using a true 3-zone desktop grid and a
   stacked CTA column so buttons never collapse or wrap awkwardly.
   ============================================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 240;
  background: rgba(255,253,249,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header .h-inner,
.site-header .wrap.h-inner{
  max-width: 1180px !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 12px 22px !important;
  display: grid !important;
  grid-template-columns: minmax(190px,240px) minmax(0,1fr) 210px !important;
  grid-template-areas: "logo nav ctas" !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 10px !important;
}

.site-header .logo{
  grid-area: logo;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  line-height: 1.05;
}

.site-header .h-nav{
  grid-area: nav;
  min-width: 0;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 6px 8px;
}

.site-header .h-nav a{
  padding: 8px 12px !important;
  border-radius: 999px;
  font-size: .9rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.site-header .h-ctas{
  grid-area: ctas;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 210px;
  min-width: 210px;
  margin-left: auto;
}

.site-header .h-ctas a{
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

.site-header .btn-wa,
.site-header .btn-call{
  border-radius: 14px !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
}

.site-header .btn-wa{
  min-width: 0 !important;
  background: var(--clay-surface) !important;
  color: var(--clay-heading) !important;
  border: 1px solid var(--clay-border) !important;
  box-shadow: var(--shadow-1) !important;
}

.site-header .btn-wa::before{
  content: "💬";
  font-size: .95rem;
  line-height: 1;
}

.site-header .btn-call{
  min-width: 0 !important;
  background: var(--matcha-600) !important;
  color: #fff !important;
  border: 1px solid rgba(17,24,39,.05) !important;
  box-shadow: 0 12px 28px rgba(31,122,77,.24) !important;
}

.site-header .btn-call:hover{
  background: var(--matcha-800) !important;
}

.site-header .btn-call::before{
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 1180px){
  .site-header .h-inner,
  .site-header .wrap.h-inner{
    grid-template-columns: minmax(180px,1fr) 210px !important;
    grid-template-areas:
      "logo ctas"
      "nav nav" !important;
    align-items: start !important;
  }

  .site-header .h-nav{
    justify-content: flex-start;
    padding-top: 2px;
  }
}

@media (max-width: 860px){
  .site-header .h-inner,
  .site-header .wrap.h-inner{
    display: flex !important;
    min-height: 72px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .site-header .h-nav{
    display: none !important;
  }

  .site-header .h-ctas{
    width: auto;
    min-width: 0;
    flex-direction: row;
    gap: 8px;
    margin-left: auto;
  }

  .site-header .h-ctas a{
    width: auto !important;
    min-width: 0 !important;
    padding: 0 14px !important;
  }
}

@media (max-width: 560px){
  .site-header .h-ctas .btn-wa,
  .site-header .h-ctas .btn-call{
    font-size: .86rem !important;
  }

  .site-header .h-ctas .btn-call::before{
    margin-right: 0;
  }
}


/* Contact preference banner */
/* Contact preference banner
   Future on/off control:
   - keep visible: :root{--contact-pref-banner-display:block}
   - hide sitewide later: change to none in this one file
   - optional per-page hide: add class 'hide-contact-pref-banner' to body
*/
:root{--contact-pref-banner-display:block;}
body.hide-contact-pref-banner .contact-pref-banner{display:none !important;}
.contact-pref-banner{display:var(--contact-pref-banner-display);background:linear-gradient(90deg,rgba(255,122,61,.10),rgba(255,255,255,.7));border-top:1px solid rgba(226,96,42,.14);border-bottom:1px solid rgba(226,96,42,.14)}
.contact-pref-banner .wrap{display:flex;align-items:center;justify-content:center;gap:10px;max-width:1200px;margin:0 auto;padding:10px 18px;text-align:center;flex-wrap:wrap}
.contact-pref-banner strong{color:#c45124;font-weight:800}
.contact-pref-banner p{margin:0;color:#594a42;font-size:.97rem;line-height:1.45}
.contact-pref-banner a{font-weight:800;color:#0f4c81;text-decoration:none}
.contact-pref-banner a:hover{text-decoration:underline}
@media (max-width:768px){.contact-pref-banner .wrap{padding:10px 14px}.contact-pref-banner p{font-size:.93rem}}

/* =============================================================================
   request-help hero and contact banner centring fix
   - stack the intro cards in the request-help hero
   - hard-center the contact preference banner text
   ============================================================================= */
body.request-help-page .hero .shared-panel.reading-split,
body.request-help-page .hero .visual-pass-reading.shared-panel.reading-split{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:16px !important;
  max-width:680px;
}
body.request-help-page .hero .reading-card--aside,
body.request-help-page .hero .reading-card--main{
  width:100%;
  max-width:none;
}
body.request-help-page .hero .reading-card--aside{
  align-self:start;
}
.contact-pref-banner,
.contact-pref-banner .wrap{
  text-align:center !important;
}
.contact-pref-banner .wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
.contact-pref-banner p{
  width:100%;
  margin:0 auto;
  text-align:center !important;
}


/* =============================================================================
   QA LAYOUT PASS — Full-site hero, header, chip, sticky-bar and banner fixes
   Issues fixed:
   1.  .ti-text missing — trust chip text was collapsing inline
   2.  hero-grid with no image col left a giant blank column
   3.  inner reading-split+aside when hero-img-col present = 3 visual columns
   4.  empty hero-secondary-cta divs adding phantom spacing
   5.  sticky-mobile + sticky-mobile-bar both rendering = double bar
   6.  sticky-bottom-cta conflicting with sticky-mobile on mobile
   7.  contact-pref-banner not fully centred on all viewports
   8.  header CTA stacking fight at 861-1024px
   9.  direct-answer.hero-answer double card padding
   10. hero-grid cols on no-image pages still rendering 2-column
   ============================================================================= */

/* ---- 1. Trust chip: stack label and sub-text vertically ---- */
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-item .ti-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trust-item .ti-label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--clay-heading);
  white-space: nowrap;
  line-height: 1.2;
}
.trust-item .ti-sub {
  display: block;
  font-size: .78rem;
  color: var(--clay-muted);
  white-space: nowrap;
  line-height: 1.2;
}
.trust-bar-inner {
  justify-content: center;
  gap: 14px 20px;
}
@media (max-width: 640px) {
  .trust-bar-inner { justify-content: flex-start; gap: 10px 14px; }
  .trust-item .ti-label, .trust-item .ti-sub { white-space: normal; }
}

/* ---- 2 & 10. hero-grid: collapse to single-column when no image present ---- */
.hero-grid:not(:has(.hero-img-col)) {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 880px;
}
.hero-grid:not(:has(.hero-img-col)) .shared-panel.reading-split {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
}
@media (max-width: 760px) {
  .hero-grid:not(:has(.hero-img-col)) .shared-panel.reading-split {
    grid-template-columns: 1fr;
  }
}

/* ---- 3. inner reading-split when hero-img-col IS present: collapse aside ---- */
.hero-grid:has(.hero-img-col) .shared-panel.reading-split {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px;
}
.hero-grid:has(.hero-img-col) .shared-panel.reading-split > .reading-card--aside {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.hero-grid:has(.hero-img-col) .shared-panel.reading-split > .reading-card--aside .hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.hero-grid:has(.hero-img-col) .shared-panel.reading-split > .reading-card--aside .request-kicker {
  display: none;
}
.hero-grid .hero-img-col {
  align-self: start;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ---- 4. Empty hero-secondary-cta: suppress phantom spacing ---- */
.hero-secondary-cta:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- 5 & 6. Sticky bar normalisation ---- */
@media (max-width: 640px) {
  body:has(.sticky-mobile) .sticky-mobile-bar { display: none !important; }
  body:has(.sticky-mobile) .sticky-bottom-cta { display: none !important; }
}
@media (min-width: 641px) {
  .sticky-mobile, .sticky-mobile-bar, .sticky-bottom-cta { display: none !important; }
}

/* ---- 7. Contact preference banner — complete centring ---- */
.contact-pref-banner { text-align: center !important; }
.contact-pref-banner .wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 860px !important;
  margin-inline: auto !important;
  padding: 10px 18px !important;
  text-align: center !important;
}
.contact-pref-banner p {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
@media (max-width: 640px) {
  .contact-pref-banner .wrap { padding: 10px 14px !important; }
  .contact-pref-banner p { font-size: .9rem; }
}

/* ---- 8. Header CTA: resolve stacking conflict at 861-1024px ---- */
@media (min-width: 861px) and (max-width: 1024px) {
  .site-header .h-inner,
  .site-header .wrap.h-inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "logo nav ctas" !important;
    align-items: center !important;
  }
  .site-header .h-ctas {
    flex-direction: row !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .site-header .h-ctas a { width: auto !important; min-width: 0 !important; padding: 0 14px !important; }
  .site-header .h-ctas .btn-wa { min-width: 110px !important; }
  .site-header .h-ctas .btn-call { min-width: 150px !important; }
}

/* ---- 9. direct-answer.hero-answer double card padding fix ---- */
.direct-answer.hero-answer.shared-panel.reading-split > .shared-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.direct-answer.hero-answer {
  display: block !important;
  width: 100%;
  margin-top: 20px;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(237,246,238,.96), rgba(255,255,255,.96)) !important;
  border: 1px solid var(--page-panel-border, #b8d8c1) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-1) !important;
}
.direct-answer.hero-answer::before { display: none !important; }
.direct-answer.hero-answer p {
  max-width: 72ch;
  color: var(--clay-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
}

/* ---- Hero image: correct sizing in column ---- */
.hero-img-col .hero-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 24px !important;
  border: 1px solid var(--clay-border) !important;
  box-shadow: var(--shadow-3) !important;
  display: block;
}
.hero-grid:has(.hero-img-col) {
  align-items: start;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 420px);
}
@media (max-width: 920px) {
  .hero-grid:has(.hero-img-col) { grid-template-columns: 1fr !important; }
  .hero-img-col .hero-img { max-width: 580px !important; margin-inline: auto !important; aspect-ratio: 16 / 9 !important; }
}

/* ---- Pills below reading-card--main when aside collapses ---- */
.reading-card--main .hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

/* ---- Footer: guaranteed centring ---- */
footer, .site-footer { text-align: center !important; }
footer .wrap p, .site-footer .wrap p { margin-left: auto; margin-right: auto; }

/* ---- Used-laptops / hero-lite layout ---- */
.hero-lite { padding: 40px 0 32px; border-bottom: 1px solid var(--clay-border-light); }
.hero-lite .glass-card.dark-panel-wrap, .hero-lite .glass-card {
  max-width: 900px;
  margin-inline: auto;
  padding: 28px;
}
@media (max-width: 760px) {
  .hero-lite { padding: 28px 0 22px; }
  .hero-lite .glass-card.dark-panel-wrap, .hero-lite .glass-card { padding: 20px; }
}

/* ---- urg bar: single line on desktop ---- */
.urg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 540px) {
  .urg { white-space: normal; text-overflow: unset; padding: 10px 14px; font-size: .82rem; }
}

/* ---- Quick-nav: scroll on narrow screens ---- */
.quick-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.quick-nav__links { flex-wrap: nowrap; min-width: max-content; }
@media (max-width: 640px) {
  .quick-nav .wrap { padding: 0; }
  .quick-nav__links { padding: 0 14px; }
}

/* ---- min-width guard inside hero reading-split ---- */
.hero .shared-panel.reading-split > * { min-width: 0; }

/* =============================================================================
   QA LAYOUT PASS — END
   ============================================================================= */


/* =============================================================================
   UX/ELEMENT FIX PASS — April 2026
   Fixes: missing element classes, gapping issues, two-column layout problems,
   hero-visual-section spacing, decision-block layout, seo-upgrade-grid parity,
   strong-cta-bar alias, and sitewide visual consistency.
   ============================================================================= */

/* ── Breadcrumb separator ────────────────────────────────────────────────── */
.bc-sep {
  margin: 0 6px;
  color: var(--clay-faint);
  font-size: .84rem;
}

/* ── Section typography aliases (s-title / s-body) ─────────────────────── */
.s-title {
  font-family: var(--fh);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--clay-heading);
  margin: 0 0 12px;
}
.s-body {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--clay-muted);
  max-width: 68ch;
  margin: 0;
}

/* ── Cross-link card internals ───────────────────────────────────────────── */
.cl-label {
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--clay-faint);
  margin-bottom: 6px;
  display: block;
}
.cl-title {
  font-size: .97rem;
  font-weight: 700;
  color: var(--clay-heading);
  margin-bottom: 6px;
  line-height: 1.3;
  display: block;
}
.cl-desc {
  font-size: .86rem;
  color: var(--clay-muted);
  line-height: 1.55;
  display: block;
  max-width: 52ch;
}
.cross-link-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration: none !important;
}
.cross-link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(31,122,77,.22);
  text-decoration: none !important;
}

/* ── Service card link (sc-link) ─────────────────────────────────────────── */
.sc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--clay-link);
  text-decoration: none;
}
.sc-link:hover { text-decoration: underline; }

/* ── Process step number (ps-num) ────────────────────────────────────────── */
.ps-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--clay-accent);
  color: #fff;
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* ── Decision block: 3-column grid with styled items ─────────────────────── */
.decision-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.decision-item {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--clay-border);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.di-label {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clay-accent-dark);
  margin-bottom: 10px;
  display: block;
}
.di-body {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--clay-muted);
}
.di-body a {
  color: var(--clay-link);
  font-weight: 700;
}
@media (max-width: 860px) {
  .decision-block { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .decision-block { grid-template-columns: 1fr; }
}

/* ── Suburbs list (flex pill row) ────────────────────────────────────────── */
.suburbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* ── Local identity label ────────────────────────────────────────────────── */
.local-identity {
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(237,246,238,.95), rgba(255,255,255,.95));
  border: 1px solid var(--page-panel-border, #b8d8c1);
  border-radius: 20px;
  margin-top: 24px;
  box-shadow: var(--shadow-1);
}
.li-label {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--matcha-600);
  margin-bottom: 10px;
  display: block;
}

/* ── Local note (small italic text) ─────────────────────────────────────── */
.local-note {
  font-size: .85rem;
  color: var(--clay-faint);
  font-style: italic;
  margin-top: 12px;
  line-height: 1.6;
}

/* ── Hub strip label ─────────────────────────────────────────────────────── */
.hub-strip-label {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--clay-faint);
  white-space: nowrap;
  align-self: center;
}

/* ── SEO proof block internals ───────────────────────────────────────────── */
.seo-proof-label {
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--matcha-600);
  margin-bottom: 12px;
  display: block;
}
.seo-proof-body {
  font-size: .97rem;
  line-height: 1.78;
  color: var(--clay-muted);
  max-width: 68ch;
  margin-bottom: 14px;
}
.seo-proof-quote {
  font-size: .94rem;
  line-height: 1.7;
  color: var(--clay-faint);
  font-style: italic;
  padding-top: 14px;
  border-top: 1px solid var(--clay-border-light);
  margin-top: 0;
}

/* ── SEO panel internals (toc-links / related-links) ────────────────────── */
.seo-panel-title {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--clay-faint);
  margin-bottom: 14px;
  display: block;
}
.seo-panel-note {
  font-size: .84rem;
  color: var(--clay-faint);
  line-height: 1.6;
  margin-top: 14px;
  font-style: italic;
}
.toc-links,
.related-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toc-links a,
.related-links a {
  font-size: .9rem;
  font-weight: 600;
  color: var(--clay-link);
  text-decoration: none;
  line-height: 1.4;
  padding: 4px 0;
  border-bottom: 1px solid var(--clay-border-light);
}
.toc-links a:last-child,
.related-links a:last-child { border-bottom: none; }
.toc-links a:hover,
.related-links a:hover { text-decoration: underline; }

/* ── SEO-upgrade-grid: equal 2-column panels ─────────────────────────────── */
/* When seo-upgrade-grid is used as a reading-split, both panels should
   be equal width (not 1.7fr vs narrow), since both hold similar content */
.seo-upgrade-grid.reading-split,
.seo-upgrade-grid.shared-panel.reading-split {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px;
}
.seo-upgrade-grid.reading-split > .seo-panel,
.seo-upgrade-grid.shared-panel.reading-split > .seo-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,246,240,.96));
  border: 1px solid var(--clay-border);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
}
@media (max-width: 680px) {
  .seo-upgrade-grid.reading-split,
  .seo-upgrade-grid.shared-panel.reading-split {
    grid-template-columns: 1fr !important;
  }
}

/* ── NAP block (standalone, not as cta-strip) ────────────────────────────── */
.nap-block {
  padding: 12px 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--clay-border-light);
  border-radius: 14px;
  font-size: .86rem;
  color: var(--clay-muted);
  margin-top: 16px;
}
.nap-block strong { color: var(--clay-heading); }

/* ── Support-local-message ───────────────────────────────────────────────── */
.support-local-message {
  font-size: .9rem;
  color: var(--clay-muted);
  line-height: 1.65;
  margin-top: 14px;
  max-width: 68ch;
}

/* ── Trust pill (inside final-cta trust bar) ─────────────────────────────── */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(31,122,77,.14);
  color: var(--clay-heading);
  font-size: .84rem;
  font-weight: 700;
  box-shadow: var(--shadow-1);
}
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ── hero-visual-section: tight spacing, no full section padding ─────────── */
.hero-visual-section {
  padding: 24px 0 !important;
  background: transparent !important;
  border: none !important;
}
.hero-visual-section + .section,
.hero-visual-section + .section-alt {
  padding-top: 40px;
}
.hero-visual-wrap {
  max-width: min(880px, calc(100% - 44px));
  margin-inline: auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--clay-border);
}
.hero-visual-wrap img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 7 !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  display: block !important;
  margin: 0 !important;
}
@media (max-width: 760px) {
  .hero-visual-section { padding: 16px 0 !important; }
  .hero-visual-wrap { border-radius: 16px; }
  .hero-visual-wrap img { aspect-ratio: 16 / 9 !important; }
}

/* ── Hub-link-list (named service links block) ───────────────────────────── */
.hub-link-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.hub-link-list a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.76);
  border: 1px solid var(--clay-border);
  text-decoration: none !important;
  transition: background .2s, border-color .2s, transform .2s;
}
.hub-link-list a:hover {
  background: #fff;
  border-color: rgba(31,122,77,.22);
  transform: translateY(-2px);
}
.hub-link-list a strong {
  font-size: .94rem;
  color: var(--clay-heading);
}
.hub-link-list a span {
  font-size: .84rem;
  color: var(--clay-muted);
  line-height: 1.5;
}

/* ── Hub-chip-links (pill chip group) ───────────────────────────────────── */
.hub-chip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.hub-chip-links a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--clay-border);
  font-size: .86rem;
  font-weight: 700;
  color: var(--clay-heading);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.hub-chip-links a:hover {
  background: rgba(237,246,238,.96);
  border-color: rgba(31,122,77,.22);
  text-decoration: none;
}

/* ── Hub-local-grid (two panel layout) ───────────────────────────────────── */
.hub-local-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 18px;
  margin-top: 24px;
}
@media (max-width: 760px) {
  .hub-local-grid { grid-template-columns: 1fr; }
}

/* ── Hub panels ──────────────────────────────────────────────────────────── */
.hub-local-panel,
.hub-service-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,246,240,.96));
  border: 1px solid var(--clay-border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-1);
}
.hub-local-panel h3,
.hub-service-panel h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--clay-heading);
  margin: 0 0 10px;
}
.hub-local-panel p,
.hub-service-panel p {
  font-size: .92rem;
  color: var(--clay-muted);
  line-height: 1.65;
  margin-bottom: 0;
}

/* ── mid-cta-bar spacing (when appearing inside content) ─────────────────── */
.mid-cta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  margin: 24px 0;
  border-radius: 22px;
}
.mid-cta-bar p {
  margin: 0;
  max-width: 64ch;
  font-size: .97rem;
  line-height: 1.65;
}
.mid-cta-bar .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 680px) {
  .mid-cta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
  }
}

/* ── Section wrapping: nested section padding collapse ───────────────────── */
/* When a .section contains another .section, avoid double-padding */
.section .section,
.section .section-alt,
.section-alt .section {
  margin-top: 32px;
  padding-top: 0 !important;
}
/* But the nested section still needs some bottom padding */
.section .section:last-child,
.section .section-alt:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0;
}

/* ── direct-answer (standalone in seo-enhancement) ───────────────────────── */
.direct-answer {
  margin-bottom: 18px;
}
.direct-answer::before {
  content: "Quick answer";
}
/* When it's reading-card--main (not hero-answer), no before pseudo */
.direct-answer.reading-card--main::before,
.seo-upgrade-grid .direct-answer::before {
  display: none !important;
}

/* ── hero-answer: single block display fix ────────────────────────────────── */
.direct-answer.hero-answer {
  display: block !important;
  margin: 20px 0 0;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(237,246,238,.96), rgba(255,255,255,.96)) !important;
  border: 1px solid var(--page-panel-border, #b8d8c1) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-1) !important;
}
.direct-answer.hero-answer::before { display: none !important; }
.direct-answer.hero-answer p {
  max-width: 72ch;
  color: var(--clay-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
}

/* ── quick-nav label style ───────────────────────────────────────────────── */
.quick-nav__label {
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clay-faint);
  white-space: nowrap;
}

/* ── card-grid visual consistency ───────────────────────────────────────── */
.card-grid .card h3,
.card-grid article.card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clay-heading);
  margin: 0 0 8px;
}
.card-grid .card p,
.card-grid article.card p {
  font-size: .9rem;
  color: var(--clay-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── section-heading max width ───────────────────────────────────────────── */
.section-heading {
  max-width: 74ch;
  margin: 0 auto 22px;
}
.section-heading h2 {
  font-family: var(--fh);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--clay-heading);
  margin: 0 0 10px;
}
.section-heading p {
  color: var(--clay-muted);
  font-size: .97rem;
  line-height: 1.7;
  margin: 0;
}

/* ── Sitewide mobile gap fix ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .decision-block { gap: 12px; }
  .cross-link-card { padding: 14px 16px; border-radius: 18px; }
  .local-identity { padding: 16px 18px; border-radius: 18px; }
  .hub-local-panel, .hub-service-panel { padding: 18px; border-radius: 18px; }
  .suburbs-list { gap: 8px; }
}

/* =============================================================================
   UX/ELEMENT FIX PASS END
   ============================================================================= */

/* UX fix: keep the business systems hero readable on desktop and mobile. */
.business-systems-hero .hero-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(300px,.78fr) !important;
  align-items:start !important;
  gap:28px !important;
}
.business-systems-hero .hero-h1{
  max-width:19ch !important;
  font-size:clamp(2.55rem,4.15vw,4.85rem) !important;
  line-height:.96 !important;
  margin-bottom:18px !important;
}
.business-systems-hero .ux-copy-card{
  max-width:760px;
}
.business-systems-hero .business-hero-aside{
  margin-top:22px;
}
.business-systems-hero .business-hero-aside .btn{
  width:100%;
  margin-top:16px;
  justify-content:center;
}
.site-header .btn,
.h-ctas a,
.h-ctas .btn{
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
}
@media (max-width:1080px){
  .business-systems-hero .hero-grid{grid-template-columns:1fr !important;}
  .business-systems-hero .hero-h1{max-width:14ch !important;}
  .business-systems-hero .business-hero-aside{margin-top:0;}
}
@media (max-width:640px){
  .business-systems-hero .hero-h1{font-size:clamp(2.15rem,12vw,3.35rem) !important;max-width:12ch !important;}
  .business-systems-hero .reading-card--main{padding:20px !important;}
}

/* =============================================================================
   SITEWIDE HERO UX FIX PASS — April 2026
   Fixes oversized hero headlines, empty right-column gaps, cramped header CTAs,
   and tall first-screen hero layouts across service, guide and tool pages.
   ============================================================================= */
.hero{
  padding-top:clamp(34px,5vw,56px) !important;
  padding-bottom:clamp(30px,4vw,44px) !important;
}
.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(280px,.82fr) !important;
  gap:clamp(20px,3vw,32px) !important;
  align-items:center !important;
}
.hero-h1,
.hero h1,
.page-h1{
  max-width:20ch !important;
  font-size:clamp(2.15rem,4.2vw,4rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  margin-bottom:16px !important;
}
.hero-intro,
.hero p.lead,
.page-lede,
.lead{
  font-size:clamp(1rem,1.4vw,1.08rem) !important;
  line-height:1.68 !important;
  max-width:68ch !important;
}
.hero-copy,
.hero-content,
.hero-text{
  min-width:0 !important;
}
.hero .reading-card,
.hero .glass-card,
.hero-card,
.hero .answer-block,
.hero .direct-answer{
  max-width:780px;
}
.hero .trust-bar{
  margin-top:16px;
  padding:12px 14px;
  border:1px solid var(--clay-border-light);
  border-radius:18px;
  background:rgba(255,255,255,.68);
}
.hero .trust-pill,
.hero .pill{
  line-height:1.35;
}
.hero-img,
.hero-img-col img,
.hero-visual-wrap img,
.hero-visual img,
.hero-image img,
.story-visual img{
  max-height:420px !important;
  object-fit:cover !important;
}
/* If a hero grid only has one child, let it use the full width instead of leaving a blank right column. */
.hero-grid:not(:has(> :nth-child(2))){
  grid-template-columns:1fr !important;
}
.hero-grid:not(:has(> :nth-child(2))) .hero-h1,
.hero-grid:not(:has(> :nth-child(2))) h1{
  max-width:22ch !important;
}
.hero-grid:not(:has(> :nth-child(2))) .hero-intro,
.hero-grid:not(:has(> :nth-child(2))) .lead,
.hero-grid:not(:has(> :nth-child(2))) p{
  max-width:74ch !important;
}
/* Tool/article pages often have long explanatory H1s and no artwork; keep them readable above the fold. */
body:has(.hero-grid:not(:has(img))) .hero-h1,
body:has(.hero-grid:not(:has(img))) .hero h1,
body:has(.hero-grid:not(:has(img))) .page-h1{
  max-width:24ch !important;
  font-size:clamp(2rem,3.65vw,3.55rem) !important;
  line-height:1.04 !important;
}
/* Keep top header buttons readable instead of splitting words/numbers. */
.h-ctas,
.site-header .h-ctas{
  flex-shrink:0;
}
.h-ctas a,
.site-header .btn,
.site-header .btn-wa,
.site-header .btn-call{
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  min-width:max-content !important;
}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr !important;align-items:start !important;}
  .hero-h1,.hero h1,.page-h1{max-width:18ch !important;font-size:clamp(2.15rem,7vw,3.65rem) !important;}
  .hero-img,.hero-img-col img,.hero-visual-wrap img,.hero-visual img,.hero-image img,.story-visual img{max-height:360px !important;}
}
@media (max-width:760px){
  .hero{padding-top:30px !important;padding-bottom:32px !important;}
  .hero-h1,.hero h1,.page-h1{font-size:clamp(2rem,10vw,3rem) !important;line-height:1.04 !important;max-width:16ch !important;}
  .hero .reading-card,.hero .glass-card,.hero-card{padding:18px !important;border-radius:20px !important;}
  .hero .trust-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
}
@media (max-width:520px){
  .hero-h1,.hero h1,.page-h1{max-width:14ch !important;}
  .hero-badge-pill,.eyebrow,.hero-badge{font-size:.7rem;line-height:1.25;}
}


/* =========================================================
   GLOBAL SUPPLEMENT — site-fixes.css  (appended to clay-theme)
   Fixes missing component classes, mobile layout issues,
   accessibility improvements, and CTA consistency.
   April 2026
   ========================================================= */

/* ── 1. CONTACT PREFERENCE BANNER ── */
.contact-pref-banner {
  background: rgba(255,200,90,.15);
  border-bottom: 1px solid rgba(255,200,90,.35);
  padding: 10px 0;
  font-size: .88rem;
  color: var(--clay-heading);
}
.contact-pref-banner p { margin: 0; color: var(--clay-heading) !important; }
.contact-pref-banner a { color: var(--clay-accent-dark) !important; font-weight: 700; }

/* ── 2. BREADCRUMBS ── */
.bc {
  background: var(--clay-bg-alt);
  border-bottom: 1px solid var(--clay-border);
  padding: 10px 0;
  font-size: .82rem;
  color: var(--clay-muted);
}
.bc a { color: var(--clay-muted); }
.bc a:hover { color: var(--clay-accent-dark); }
.bc-sep { margin: 0 6px; color: var(--clay-faint); }

/* ── 3. SECTION HEADER ── */
.section-header { margin-bottom: 28px; }
.section-header .eyebrow { display: block; margin-bottom: 8px; }
.section-header .s-title,
.section-header h2 { margin-bottom: 10px; }
.section-header p { margin-bottom: 0; }
.section-header--card {
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 22px;
}
.section-heading {
  margin-bottom: 24px;
}
.section-heading h2 { margin-bottom: 8px; }

/* ── 4. CARDS GRIDS (cards-3, cards-4) ── */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 22px;
}
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: 22px;
}
@media (max-width: 920px) {
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .cards-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cards-3,
  .cards-4 { grid-template-columns: 1fr; }
}

/* ── 5. CARD GRID (generic card-grid, card-grid-3) ── */
.card-grid { display: grid; gap: 18px; margin-top: 18px; }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px) { .card-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .card-grid-3 { grid-template-columns: 1fr; } }

/* The .card class already gets glass-card styles; add padding safety */
article.card { padding: 22px; }
.card h3 { margin-bottom: 8px; }
.card p { margin-bottom: 0; }

/* ── 6. NEXT-STEPS CARD (.ns-card) ── */
.ns-card {
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: 18px;
  padding: 20px;
}
.ns-card.minor { border-left: 3px solid var(--matcha-600); }
.ns-card.serious { border-left: 3px solid var(--clay-accent); }
.ns-card h4 { margin-bottom: 10px; font-size: 1rem; color: var(--clay-heading); }
.ns-card ul { padding-left: 1.2rem; }
.ns-card li { margin-bottom: 4px; font-size: .92rem; color: var(--clay-muted); }

/* ── 7. U-MT UTILITY ── */
.u-mt-24 { margin-top: 24px; }
.u-mt-16 { margin-top: 16px; }

/* ── 8. FEATURE CARD ── */
.feature-card a.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--clay-accent-dark) !important;
  font-weight: 700;
  font-size: .9rem;
  margin-top: 12px;
  text-decoration: none;
}
.feature-card a.text-link:hover { text-decoration: underline; }

/* ── 9. TEXT LINK (standalone) ── */
a.text-link {
  color: var(--clay-accent-dark) !important;
  font-weight: 700;
  text-decoration: none;
}
a.text-link:hover { text-decoration: underline; }

/* ── 10. TICK LIST ── */
.tick-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: .92rem;
  color: var(--clay-text);
}
.tick-list li::before {
  content: "✓";
  color: var(--matcha-600);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── 11. PREMIUM PROOF SHELL (school cluster) ── */
.premium-proof-shell {
  background: var(--clay-bg-alt);
  border-top: 1px solid var(--clay-border);
  border-bottom: 1px solid var(--clay-border);
  padding: 48px 0;
}
.premium-section-head {
  text-align: center;
  max-width: 72ch;
  margin: 0 auto 32px;
}
.premium-section-head h2 { margin-bottom: 10px; }
.premium-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-bottom: 28px;
}
@media (max-width: 860px) { .premium-proof-grid { grid-template-columns: 1fr; } }
.premium-proof-card {
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-1);
}
.premium-proof-kicker {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clay-accent-dark);
  margin-bottom: 8px;
}
.premium-proof-card h3 { margin-bottom: 8px; font-size: 1rem; }
.premium-proof-card p { font-size: .92rem; margin-bottom: 0; }

/* ── 12. COMPARISON MODULE ── */
.comparison-module {
  margin-top: 28px;
}
.comparison-module__intro { margin-bottom: 18px; }
.comparison-module__intro h3 { margin-bottom: 6px; }

/* ── 13. HUB STRIP ── */
.hub-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--clay-border-light);
}
.hub-strip-label {
  font-size: .84rem;
  font-weight: 700;
  color: var(--clay-muted);
  white-space: nowrap;
}

/* ── 14. HUB LOCAL GRID ── */
.hub-local-grid {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 860px) { .hub-local-grid { grid-template-columns: 1fr; } }
.hub-local-panel, .hub-service-panel {
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-1);
}
.hub-local-panel h3, .hub-service-panel h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--clay-heading);
}
.local-note {
  margin-top: 14px;
  font-size: .84rem;
  color: var(--clay-muted);
  font-style: italic;
}
.hub-chip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.hub-chip-links a {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--clay-border);
  color: var(--clay-heading) !important;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background .18s, color .18s;
}
.hub-chip-links a:hover {
  background: var(--clay-accent);
  color: #fff !important;
  border-color: var(--clay-accent);
  text-decoration: none;
}
.hub-link-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.hub-link-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--clay-border);
  transition: background .18s;
}
.hub-link-list a:hover { background: var(--clay-surface-soft); text-decoration: none; }
.hub-link-list a strong { color: var(--clay-heading) !important; font-size: .94rem; }
.hub-link-list a span { color: var(--clay-muted) !important; font-size: .84rem; }

/* ── 15. SUBURB TAGS ── */
.suburb-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--clay-surface); border: 1px solid var(--clay-border); color: var(--clay-heading) !important; font-size: .84rem; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-1); transition: background .18s, color .18s; }
.suburb-tag:hover { background: var(--clay-accent); color: #fff !important; border-color: var(--clay-accent); text-decoration: none; }
.suburb-tag.primary { background: var(--clay-accent-soft); border-color: var(--clay-accent-dark); color: var(--clay-accent-dark) !important; }
.suburbs-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ── 16. REFER SECTION ── */
.refer-eyebrow {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clay-accent-dark);
  margin-bottom: 10px;
}
.refer-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
.refer-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rs-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--clay-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  flex-shrink: 0;
}
.refer-step strong { display: block; color: var(--clay-heading) !important; margin-bottom: 2px; }
.cta-copy-tight { font-size: .88rem; color: var(--clay-muted) !important; margin: 0 !important; }

/* ── 17. CTA STAT ── */
.cta-kicker { font-size: .78rem; font-weight: 800; color: var(--clay-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.cta-stat-value { font-size: 2.4rem; font-weight: 800; color: var(--clay-accent-dark); line-height: 1; }
.cta-meta { font-size: .84rem; color: var(--clay-muted); margin-top: 4px; }
.cta-stack { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.cta-stack-center { align-items: center; text-align: center; }
.cta-actions-center { justify-content: center; }
.cta-actions-lg .btn { min-height: 54px; font-size: 1rem; }
.cta-compact { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 18. TRUST PILLS ── */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--clay-border);
  font-size: .82rem;
  font-weight: 700;
  color: var(--clay-heading);
}
.trust-bar .trust-pill { display: inline-flex; }
.final-cta .trust-bar,
.final .trust-bar,
.page-final-cta .trust-bar,
.shared-panel-soft .trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 16px 0 10px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ── 19. NAP BLOCK ── */
.nap-block {
  font-size: .84rem;
  color: var(--clay-muted);
  text-align: center;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.6);
}
.nap-block strong { color: var(--clay-heading) !important; }

/* ── 20. LOCAL PROOF / SUPPORT LOCAL ── */
.support-local-message { font-size: .9rem; color: var(--clay-muted); text-align: center; margin: 8px 0 0; }
.local-proof { font-size: .84rem; color: var(--clay-muted); }
.local-identity { padding: 14px 0; margin: 12px 0; border-top: 1px solid var(--clay-border-light); }
.li-label { font-weight: 700; font-size: .84rem; color: var(--clay-accent-dark); margin-bottom: 6px; }

/* ── 21. PAGE META STRIP ── */
.page-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.page-meta-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  font-size: .84rem;
}
.pm-label { font-weight: 700; color: var(--clay-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.pm-value { color: var(--clay-text); }

/* ── 22. DIRECT ANSWER / QUICK ANSWER ── */
.direct-answer, .quick-answer, .hero-answer {
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 16px 0;
}
.da-label {
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clay-accent-dark);
  margin-bottom: 8px;
}

/* ── 23. LLM BLOCK ── */
.llm-block {
  padding: 22px;
  margin-bottom: 22px;
}

/* ── 24. SEO PROOF BLOCK ── */
.seo-proof-block { padding: 22px; margin-bottom: 22px; }
.seo-proof-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--clay-accent-dark); margin-bottom: 10px; display: block; }
.seo-proof-body { color: var(--clay-text) !important; font-size: .94rem; }
.seo-proof-quote { color: var(--clay-muted) !important; font-style: italic; margin-top: 10px; border-left: 3px solid var(--clay-accent-soft); padding-left: 12px; }

/* ── 25. SHARED PANEL / READING CARD ── */
.reading-split {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(220px,.9fr);
  gap: 18px;
  margin: 16px 0;
}
@media (max-width: 760px) { .reading-split { grid-template-columns: 1fr; } }
.reading-card, .shared-card {
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.reading-card--aside {
  font-size: .9rem;
}
.ux-copy-panel { display: contents; }

/* ── 26. ANSWER BLOCK ── */
.answer-block {
  background: rgba(255,107,61,.06);
  border: 1px solid rgba(255,107,61,.18);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: .9rem;
}
.answer-block strong { display: block; color: var(--clay-heading) !important; margin-bottom: 4px; }

/* ── 27. LOCAL CTA BLOCK ── */
.local-cta-block {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 22px;
  align-items: center;
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-1);
}
@media (max-width: 700px) { .local-cta-block { grid-template-columns: 1fr; } }
.local-cta-block .eyebrow { display: block; margin-bottom: 6px; }
.local-cta-block h2 { margin-bottom: 8px; }

/* ── 28. PROMO CTA ── */
.promo-cta--matcha {
  border-left: 4px solid var(--matcha-600) !important;
}
.promo-cta__title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--clay-heading) !important;
  margin-bottom: 6px;
}
.promo-cta__copy {
  color: var(--clay-muted) !important;
  font-size: .94rem;
  margin-bottom: 16px;
}

/* ── 29. MANUAL CRO GRID ── */
.manual-cro-shell { padding: 4px 0; }
.manual-cro-kicker { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--clay-accent-dark); margin-bottom: 10px; }
.manual-cro-intro { color: var(--clay-muted); margin-bottom: 18px; }
.manual-cro-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 860px) { .manual-cro-grid { grid-template-columns: 1fr; } }
.manual-cro-card {
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: 18px;
  padding: 18px;
}
.manual-cro-card h3 { margin-bottom: 6px; font-size: .98rem; }
.manual-cro-card p { font-size: .9rem; color: var(--clay-muted) !important; margin: 0; }

/* ── 30. STICKY MOBILE BAR SAFETY ── */
.sticky-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  gap: 0;
}
.sticky-mobile a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none !important;
  white-space: nowrap;
}
.sticky-mobile__wa {
  background: var(--clay-heading) !important;
  color: #fff !important;
}
.sticky-mobile__call {
  background: var(--clay-accent) !important;
  color: #fff !important;
}
/* Push page body up above sticky bar on mobile */
@media (max-width: 768px) {
  body { padding-bottom: 56px; }
}
@media (min-width: 769px) {
  .sticky-mobile { display: none; }
}

/* ── 31. RELATED LINKS (seo-panel inner) ── */
.related-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}
.related-links a {
  font-size: .88rem;
  font-weight: 600;
  color: var(--clay-link) !important;
  text-decoration: none;
}
.related-links a:hover { text-decoration: underline; }
.seo-panel-note { font-size: .8rem; color: var(--clay-muted) !important; margin-top: 10px; }
.seo-panel-title { font-weight: 800; font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clay-muted); margin-bottom: 10px; display: block; }

/* ── 32. TOC / QUICK NAV LINKS ── */
.toc-links { display: flex; flex-direction: column; gap: 6px; }
.toc-links a { font-size: .88rem; font-weight: 600; color: var(--clay-link) !important; text-decoration: none; }
.toc-links a:hover { text-decoration: underline; }

/* ── 33. CROSSLINK LIST ── */
.crosslink-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crosslink-list li a { font-weight: 600; color: var(--clay-link) !important; font-size: .94rem; }

/* ── 34. FOOTER HUBS ── */
.footer-hubs { margin-top: 6px; font-size: .84rem; }
.footer-referral-link { font-weight: 700; }

/* ── 35. SC-ICON & SC-LINK (service card) ── */
.sc-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--clay-accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sc-icon svg { width: 22px; height: 22px; stroke: var(--clay-accent-dark); fill: none; stroke-width: 2; }
a.sc-link { display: inline-flex; align-items: center; gap: 4px; color: var(--clay-link) !important; font-weight: 700; font-size: .88rem; margin-top: 12px; text-decoration: none; }
a.sc-link:hover { text-decoration: underline; }

/* ── 36. DECISION BLOCK ── */
.decision-block { display: flex; flex-direction: column; gap: 14px; }
.decision-item { background: var(--clay-surface); border: 1px solid var(--clay-border); border-radius: 16px; padding: 16px 18px; }
.di-label { font-weight: 800; color: var(--clay-heading) !important; font-size: .9rem; margin-bottom: 6px; }
.di-body { font-size: .9rem; color: var(--clay-text); }

/* ── 37. PROCESS STEP NUMBER ── */
.ps-num { width: 38px; height: 38px; border-radius: 50%; background: var(--clay-accent-soft); color: var(--clay-accent-dark); font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }

/* ── 38. HERO PILLS ── */
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.82); border: 1px solid var(--clay-border); font-size: .82rem; color: var(--clay-text); box-shadow: var(--shadow-1); }

/* ── 39. STICKY BAR ALT (sticky-mobile-bar variant) ── */
.sticky-mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: none; }
@media (max-width: 768px) { .sticky-mobile-bar { display: flex; } }

/* ── 40. HERO IMG COL fallback (no-image state) ── */
.hero-img-col { min-width: 0; }
.hero-img-col:empty { display: none; }

/* ── 41. FAQ LIST SAFETY ── */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { overflow: hidden; border-radius: 18px; }
.faq-question { cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; }
.faq-chevron { width: 18px; height: 18px; stroke: currentColor; fill: none; flex-shrink: 0; transition: transform .25s; }
.faq-item[open] .faq-chevron,
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-answer { max-height: 600px; }

/* ── 42. QUICK NAV ── */
.quick-nav { background: var(--clay-bg-alt); border-bottom: 1px solid var(--clay-border); padding: 10px 0; font-size: .84rem; }
.quick-nav__label { font-weight: 700; color: var(--clay-muted); margin-right: 10px; }
.quick-nav__links { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-nav__links a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--clay-border); background: var(--clay-surface); color: var(--clay-muted) !important; font-weight: 600; font-size: .82rem; white-space: nowrap; }
.quick-nav__links a:hover { background: var(--clay-surface-warm); color: var(--clay-heading) !important; text-decoration: none; }

/* ── 43. H-CTAS OVERFLOW FIX (supplement) ── */
@media (max-width: 420px) {
  .h-ctas { gap: 6px; }
  .h-ctas a { padding: 0 10px; font-size: .8rem; min-height: 38px; }
  .btn-wa { display: none; } /* hide WhatsApp on very small screens; call is still visible */
}

/* ── 44. SKIP LINK ── */
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { left: 14px; top: 14px; z-index: 9999; padding: 10px 16px; border-radius: 10px; background: var(--clay-heading); color: #fff !important; text-decoration: none; box-shadow: var(--shadow-2); }

/* ── 45. IMAGE SAFETY ── */
img { max-width: 100%; height: auto; }
.hero-img-col img, .hero-image img { max-height: 440px; object-fit: cover; }

/* ── 46. TABLE RESPONSIVE ── */
.price-table-wrap { overflow-x: auto; }
table { width: 100%; }

/* ── 47. FOOTER REFERRAL ── */
.footer-referral-link { color: var(--clay-accent-dark) !important; font-weight: 700; }

/* ── 48. BACK-TO-TOP / body padding for sticky ── */
@media (max-width: 768px) {
  footer, .site-footer { padding-bottom: 72px; }
}


/* ── CONTAINER ALIAS (maps to .wrap) ── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
@media (max-width: 760px) { .container { padding: 0 18px; } }
@media (max-width: 480px) { .container { padding: 0 14px; } }

/* ── HERO VISUAL SECTION (secondary hero image) ── */
.hero-visual-section {
  padding: 0;
  overflow: hidden;
}
.hero-visual-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 22px;
}
.hero-visual-wrap img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 24px;
  margin: 0 auto 28px;
  display: block;
}

/* ── CONVERSION TRUST STRIP (injected by JS) ── */
.conversion-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: .84rem;
  color: var(--clay-muted);
}
.conversion-trust-strip span { display: inline-flex; align-items: center; gap: 4px; }
.conversion-trust-strip small { font-size: .78rem; }

/* ── CTA BUTTON GRID ── */
.cta-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 18px 0 14px;
}
@media (max-width: 520px) {
  .cta-button-grid { flex-direction: column; }
  .cta-button-grid .btn { width: 100%; justify-content: center; }
}

/* ── REQUEST KICKER ── */
.request-kicker {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clay-accent-dark);
  margin-bottom: 8px;
  display: block;
}

/* ── HERO ASIDE (sidebar trust panel) ── */
.hero-aside, .hero-aside-badge, .hero-aside-stats { display: block; }

/* ── SHARED PANEL SOFT (final CTA container) ── */
.shared-panel-soft.final-cta,
.shared-panel-soft.page-final-cta,
.final-cta.shared-panel-soft {
  text-align: center;
  padding: 36px 28px;
}
@media (max-width: 600px) {
  .final-cta.shared-panel-soft,
  .shared-panel-soft.final-cta { padding: 24px 18px; }
}

/* ── SUMMARY LEAD ── */
.summary-lead, .content-note.summary-lead {
  color: var(--clay-muted);
  font-size: .9rem;
  line-height: 1.7;
}



/* =============================================================================
   AI CLUSTER UX FIX PASS — April 2026
   Fixes: cards-2 missing grid, contact-pref-banner text centering,
   section gap reduction on service/guide/tool pages, footer centering.
   ============================================================================= */

/* ── cards-2: two-column grid (was undefined, defaulting to block layout) ─── */
.cards-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
@media (max-width: 680px) {
  .cards-2 { grid-template-columns: 1fr; gap: 14px; }
}

/* ── contact-pref-banner: centre the paragraph text inside the flex wrap ── */
.contact-pref-banner p {
  text-align: center !important;
  width: 100%;
}
.contact-pref-banner .wrap {
  justify-content: center !important;
  text-align: center !important;
}

/* ── footer: ensure both paragraph rows are centred ──────────────────────── */
.site-footer p,
.site-footer .footer-hubs {
  text-align: center !important;
  margin-inline: auto;
}

/* ── section gap reduction for AI cluster pages ──────────────────────────── */
/* The default 64px top+bottom creates 128px dead space between adjacent sections.
   Reduce to 40px on service, guide and tool pages. */
.template-service-page .section,
.template-service-page .section-alt,
.template-guide-page .section,
.template-guide-page .section-alt,
.template-tool-page .section,
.template-tool-page .section-alt {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Hero section keeps its own breathing room */
.template-service-page .hero,
.template-guide-page .hero,
.template-tool-page .hero {
  padding-top: 48px !important;
  padding-bottom: 40px !important;
}

/* First section immediately after hero-visual-section needs less top gap */
.hero-visual-section + .section,
.hero-visual-section + .section-alt {
  padding-top: 32px !important;
}

/* Consecutive same-type sections: only 32px between them */
.section + .section,
.section-alt + .section-alt {
  padding-top: 24px !important;
}

/* ── glass-card inside cards-2: ensure equal height columns ──────────────── */
.cards-2 > .glass-card {
  height: 100%;
  box-sizing: border-box;
}

/* Mobile: restore comfortable padding */
@media (max-width: 760px) {
  .template-service-page .section,
  .template-service-page .section-alt,
  .template-guide-page .section,
  .template-guide-page .section-alt,
  .template-tool-page .section,
  .template-tool-page .section-alt {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .hero-visual-section + .section,
  .hero-visual-section + .section-alt {
    padding-top: 20px !important;
  }
}

/* =============================================================================
   AI CLUSTER UX FIX PASS END
   ============================================================================= */

/* ── HERO-BAND TWO-COLUMN FIX (appended) ─────────────────────────────────────
   hero-band pages use a bare <div> as the copy col (no .hero-copy class).
   Ensure hero-grid still collapses to single-col on mobile.              */
.hero-band .hero-grid {
  grid-template-columns: minmax(0,1.05fr) minmax(260px,400px);
  gap: 32px;
  align-items: center;
}
.hero-band .hero-grid > div:first-child { min-width: 0; }
.hero-band .hero-img-col img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--clay-border, #e5d8c9);
  box-shadow: var(--shadow-2, 0 8px 32px rgba(0,0,0,.10));
  display: block;
}
@media (max-width: 860px) {
  .hero-band .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-band .hero-img-col { order: -1; }
  .hero-band .hero-img-col img { max-height: 280px; }
}
/* ─────────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   FINAL UX POLISH — appended
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CARDS-2 grid (used in readiness checkers) ── */
.cards-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 16px;
}
@media (max-width: 640px) { .cards-2 { grid-template-columns: 1fr; } }

/* ── Service card hover lift ── */
.glass-card { transition: transform .18s ease, box-shadow .18s ease; }
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.13);
}

/* ── cross-link-card grid responsive ── */
div[style*="grid-template-columns:repeat(3"] {
  display: grid !important;
}
@media (max-width: 760px) {
  div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Hero-band two-col: ensure correct min-height ── */
.hero-band .hero-img-col {
  min-height: 280px;
  align-self: stretch;
}
.hero-band .hero-img-col img {
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

/* ── Used-laptops pages: body bottom padding for sticky bar ── */
.used-laptops-page body,
body.used-laptops { padding-bottom: 56px; }

/* ── Sticky bar: ensure text never wraps ── */
.sticky-mobile a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── FAQ chevron direction ── */
details[open] summary .faq-chevron,
details[open] .faq-chevron { transform: rotate(180deg); }

/* ── img: prevent overflowing containers ── */
img { max-width: 100%; height: auto; }
.hero-img { max-width: 100% !important; }

/* ── Section spacing consistency ── */
.section, .section-alt {
  scroll-margin-top: 72px; /* offset for sticky nav */
}

/* ── Button gap on mobile ── */
@media (max-width: 520px) {
  .hero-ctas, .cta-actions, .h-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn, .cta-actions .btn, .h-ctas a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── Breadcrumb ellipsis on very narrow screens ── */
@media (max-width: 400px) {
  .bc { font-size: .76rem; }
  .bc-sep { margin: 0 3px; }
}

/* ── Print: hide nav, sticky, CTAs ── */
@media print {
  .site-header, .sticky-mobile, .sticky-mobile-bar,
  .hero-ctas, .cta-actions, .final-cta { display: none !important; }
  body { padding-bottom: 0 !important; }
  a[href]:after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}


/* =============================================================================
   QA UX FIX PASS — April 2026
   Fixes: hero-img-col full-width overflow, intro-template-shell 3-col collapse,
   quick-answer/direct-answer empty oval, hero right column gap,
   cl-label Customer insight, image overflow guards, section padding guards.
   ============================================================================= */

/* ── 1. intro-template-shell: 3 children (main + img-col + aside) ──────────
   The shell has reading-split = 2-col grid but hero-img-col is a 3rd child,
   so it overflows. Redefine to 3 named columns when hero-img-col is present. */
.intro-template-shell.reading-split {
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, .65fr) minmax(220px, .75fr) !important;
  gap: 18px !important;
  align-items: start !important;
}
/* When no hero-img-col (just main + aside) keep original 2-col */
.intro-template-shell.reading-split:not(:has(.hero-img-col)) {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .95fr) !important;
}
@media (max-width: 1100px) {
  .intro-template-shell.reading-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .intro-template-shell.reading-split .hero-img-col {
    grid-column: 1 / -1;
    order: -1;
  }
}
@media (max-width: 720px) {
  .intro-template-shell.reading-split {
    grid-template-columns: 1fr !important;
  }
}

/* ── 2. hero-img-col: constrain image — don't let it take entire width ─────── */
.hero-img-col {
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
}
.hero-img-col img,
.hero-img-col .hero-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  display: block !important;
}
.hero-img-col--primary img {
  aspect-ratio: 16 / 10 !important;
}

/* ── 3. direct-answer / hero-answer: fix empty oval blob ───────────────────
   The double-wrap was causing the inner content to be invisible because the
   outer blob was a flex/grid container with no height defined, and the inner
   card was collapsing. Ensure single-card renders with visible height. */
.direct-answer {
  display: block !important;
  min-height: unset !important;
}
.direct-answer .da-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--clay-accent-dark, #c44a1a);
  margin-bottom: 8px;
  display: block;
}
/* hero-answer: remove the old pill/blob shape that was overriding padding */
.direct-answer.hero-answer {
  background: linear-gradient(180deg, rgba(237,246,238,.96), rgba(255,255,255,.96)) !important;
  border: 1px solid var(--page-panel-border, #b8d8c1) !important;
  border-radius: 20px !important;
  padding: 18px 22px !important;
  box-shadow: var(--shadow-1) !important;
  margin-top: 18px !important;
  /* Remove any blob/oval shape from inherited styles */
  clip-path: none !important;
  border-radius: 20px !important;
}
.direct-answer.hero-answer p {
  margin: 0;
  font-size: .97rem;
  line-height: 1.72;
  color: var(--clay-muted);
}

/* ── 4. seo-enhancement section: full-width layout guard ───────────────────
   Prevents the hero section from creating dead white space on the right side */
.seo-enhancement .wrap,
.section.seo-enhancement .wrap {
  max-width: var(--wrap-max, 1280px);
}
.intro-template-shell {
  width: 100%;
}

/* ── 5. Image overflow guard — sitewide ────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}
/* Hero section images: constrain width so they don't go edge-to-edge on desktop */
.hero img:not(.hero-img):not([class*="hero-img"]) {
  max-width: min(800px, 100%);
}

/* ── 6. cl-label "Customer insight" styling ────────────────────────────────── */
/* Ensure the updated label text still looks styled like a badge */
.cross-links .cl-label {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--matcha-600, #1f7a4d);
  margin-bottom: 6px;
}

/* ── 7. hero-grid right gap — when hero-aside is absent ────────────────────── */
.hero-grid:not(:has(.hero-aside)):not(:has(.hero-img-col)) .hero-copy {
  max-width: 860px;
}

/* ── 8. Large stand-alone hero image sections: constrain width ─────────────── */
/* Fixes screenshot 5: image was rendering at ~55% page width as a standalone block */
section.section > .wrap > .hero-img,
section.section > .wrap > img.hero-img,
.page-section > .wrap > img {
  max-width: min(900px, 100%);
  margin-inline: auto;
  display: block;
  border-radius: 24px;
}

/* =============================================================================
   QA UX FIX PASS END
   ============================================================================= */

/* === Migrated inline CSS from service HTML pages
   QA migration: moved from style block tags into the shared master stylesheet.
   Keep this section below the core theme rules so existing page appearance is preserved.
   Next refactor step: consolidate repeated selectors into clean template sections.
=== */

/* Migrated inline block 1; used on 252 page(s); first seen: services/ai-automation-small-business-melbourne.html; hash: 16bb539e0e0b */
html{scroll-padding-top:96px} :target{scroll-margin-top:96px} body{overflow-wrap:anywhere} main img{max-width:100%;height:auto} .prose-cap p,.reading-card p,.page-copy,.hero-intro,.hero-copy,.s-body,.cl-desc,.faq-answer-inner,.cta-lead{max-width:72ch} .quick-nav__links a,.hub-strip a,.cross-link-card,.btn,.btn-primary,.btn-secondary,.btn-tertiary{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease} .cross-link-card:hover,.hub-strip a:hover{transform:translateY(-1px)} .hero-ctas,.hero-secondary-cta,.cta-button-grid{row-gap:10px} table{display:block;overflow-x:auto;max-width:100%} code,pre{max-width:100%;overflow:auto} ul,ol{padding-left:1.25rem} .trust-bar,.hub-strip,.quick-nav{scroll-margin-top:110px} .site-header a:focus-visible,.h-nav a:focus-visible,.btn:focus-visible,.quick-nav__links a:focus-visible{outline:3px solid rgba(0,113,227,.4);outline-offset:3px} @media (max-width:768px){.cross-links{gap:14px}.hero-img,.hero-image img{max-height:340px}}

/* Migrated inline block 2; used on 252 page(s); first seen: services/ai-automation-small-business-melbourne.html; hash: d0d17a04f922 */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible;z-index:10000;padding:12px 16px;border-radius:10px;background:#111827;color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.2)}
main:focus{outline:none}.quick-nav{margin:18px auto 26px}.quick-nav .wrap{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.quick-nav__label{font-weight:700}.quick-nav__links{display:flex;gap:10px;flex-wrap:wrap}.quick-nav__links a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(15,23,42,.12);text-decoration:none}.quick-nav__links a:hover{text-decoration:underline}.summary-lead{max-width:72ch}.site-header--unified,.site-footer--unified{width:100%}.used-laptops-shell .micro-cta{display:none}.used-laptops-shell .hero-secondary-cta a:last-child{display:none}.used-laptops-shell .page-shell-intro{margin:16px 0 0;max-width:70ch}.used-laptops-shell .quick-nav{margin-top:10px}.used-laptops-shell .site-footer--unified{margin-top:48px}.content-note{padding:14px 16px;border-radius:14px;background:rgba(15,23,42,.04);margin:18px 0 0}.content-note strong{display:block;margin-bottom:4px}@media (max-width:768px){.quick-nav .wrap{display:block}.quick-nav__label{display:block;margin-bottom:8px}}

/* Migrated inline block 3; used on 124 page(s); first seen: services/ai-automation-small-business-melbourne.html; hash: 16de60587f8a */
.quick-nav{margin:18px auto 12px !important}.summary-lead,.content-note.summary-lead{display:block !important;box-sizing:border-box !important;width:min(1180px,calc(100% - 32px)) !important;max-width:min(1180px,calc(100% - 32px)) !important;margin:12px auto 0 !important;padding:16px 18px !important}.summary-lead strong,.content-note.summary-lead strong{display:block !important;margin-bottom:6px !important}@media (max-width:768px){.summary-lead,.content-note.summary-lead{width:calc(100% - 24px) !important;max-width:calc(100% - 24px) !important;margin:10px auto 0 !important;padding:14px 14px !important}}

/* Migrated inline block 4; used on 11 page(s); first seen: services/guides/small-business-ai-where-to-start.html; hash: 877ba9971d44 */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible;z-index:10000;padding:12px 16px;border-radius:10px;background:#111827;color:#fff;text-decoration:none}
main:focus{outline:none}.quick-nav{margin:18px auto 26px}.quick-nav .wrap{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.quick-nav__label{font-weight:700}.quick-nav__links{display:flex;gap:10px;flex-wrap:wrap}.quick-nav__links a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(15,23,42,.12);text-decoration:none}.quick-nav__links a:hover{text-decoration:underline}
.tool-callout{background:linear-gradient(180deg,rgba(237,246,238,.96),rgba(255,255,255,.96));border:1px solid #b8d8c1;border-radius:24px;padding:28px;margin:0;text-align:center}.tool-callout .eyebrow{margin-bottom:10px}.tool-callout h2{margin:0 0 12px}.tool-callout p{max-width:58ch;margin:0 auto 18px}.ai-checker{max-width:720px;margin:0 auto}.checker-q{background:#fff;border:1px solid var(--clay-border,#e5d8c9);border-radius:16px;padding:16px 18px;margin-bottom:12px}.checker-q label{display:flex;gap:12px;cursor:pointer;font-size:.96rem;align-items:flex-start}.checker-q input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:#1f7a4d}.checker-result{display:none;padding:22px 24px;border-radius:18px;margin-top:22px;border:2px solid #b8d8c1;background:linear-gradient(180deg,rgba(237,246,238,.96),rgba(255,255,255,.96))}.checker-result.show{display:block}.checker-result h3{margin:0 0 10px;color:var(--clay-heading,#171411)}.checker-result p{color:var(--clay-muted,#5f5850);margin:0 0 14px}.checker-result a{color:#1f7a4d;font-weight:700}
@media (max-width:768px){.quick-nav .wrap{display:block}.quick-nav__label{display:block;margin-bottom:8px}}

/* Migrated inline block 5; used on 11 page(s); first seen: services/guides/small-business-ai-where-to-start.html; hash: c625f0b9c039 */
html{scroll-padding-top:96px} :target{scroll-margin-top:96px} body{overflow-wrap:anywhere} main img{max-width:100%;height:auto} .prose-cap p,.reading-card p,.page-copy,.hero-intro,.s-body{max-width:72ch} .cross-link-card,.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease} .cross-link-card:hover{transform:translateY(-1px)} .hero-ctas{row-gap:10px} .site-header a:focus-visible,.btn:focus-visible{outline:3px solid rgba(0,113,227,.4);outline-offset:3px}

/* Migrated inline block 6; used on 7 page(s); first seen: services/ai-automation-small-business-melbourne.html; hash: 148ce1b0da4c */
.service-grid-3,.service-grid-2{display:grid;gap:18px}.service-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.service-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card,.price-card,.fit-card{padding:22px;border-radius:24px;background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(15,23,42,.06);border:1px solid rgba(15,23,42,.08)}.service-card h3,.price-card h3,.fit-card h3{margin:0 0 10px}.service-card p,.price-card p,.fit-card p{margin:0}.section-intro{max-width:75ch}.quote-box{padding:18px 20px;border-left:4px solid #0f766e;background:rgba(15,118,110,.08);border-radius:16px}.check-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.mini-steps{counter-reset:step}.mini-step{position:relative;padding:18px 18px 18px 62px;border-radius:20px;background:rgba(255,255,255,.88);box-shadow:0 10px 28px rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.08)}.mini-step::before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:999px;background:#0f766e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.price-range{font-size:1.2rem;font-weight:800;color:#0f172a;margin-bottom:6px}.hero-note{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(15,23,42,.05)}@media (max-width:900px){.service-grid-3,.service-grid-2,.check-columns{grid-template-columns:1fr}}

/* Migrated inline block 7; used on 3 page(s); first seen: services/how-it-works.html; hash: 11b330ecb5b4 */
html{scroll-padding-top:96px}:target{scroll-margin-top:96px}body{overflow-wrap:anywhere}main img{max-width:100%;height:auto}.quick-nav__links a,.cross-link-card,.btn,.btn-primary,.btn-secondary,.btn-tertiary{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}.site-header a:focus-visible,.h-nav a:focus-visible,.btn:focus-visible,.quick-nav__links a:focus-visible{outline:3px solid rgba(0,113,227,.4);outline-offset:3px}

/* Migrated inline block 8; used on 3 page(s); first seen: services/how-it-works.html; hash: 9f6ffd201939 */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible;z-index:10000;padding:12px 16px;border-radius:10px;background:#111827;color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.2)}
main:focus{outline:none}.quick-nav{margin:18px auto 26px}.quick-nav .wrap{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.quick-nav__label{font-weight:700}.quick-nav__links{display:flex;gap:10px;flex-wrap:wrap}.quick-nav__links a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(15,23,42,.12);text-decoration:none}.quick-nav__links a:hover{text-decoration:underline}
.hero-img-col{display:flex;align-items:center;justify-content:center}.hero-img{width:100%;max-width:520px;border-radius:26px;box-shadow:0 12px 28px rgba(15,23,42,.12);object-fit:cover}.reading-card--aside{align-self:flex-start}.inline-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.inline-list span,.hub-chip-links a{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.08);text-decoration:none;color:inherit}.grid-3,.cards-3,.comparison-grid,.cross-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.feature-card,.glass-card,.cross-link-card,.manual-cro-card,.comparison-card,.page-meta-card,.value-card{padding:20px;border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.06)}.cross-link-card{display:block;text-decoration:none;color:inherit;border:1px solid rgba(15,23,42,.06)}.cross-link-card:hover{transform:translateY(-1px)}.cl-label,.eyebrow,.da-label,.comparison-card__label,.pm-label,.hero-badge-pill,.value-kicker{font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:.78rem;color:#0f4c81}.hero-ctas,.hero-secondary-cta,.hub-link-list,.quick-nav__links{display:flex;gap:12px;flex-wrap:wrap}.answer-block,.cta-strip,.shared-panel-soft,.local-identity{padding:14px 16px;border-radius:16px;background:rgba(15,23,42,.04);margin-top:14px}.motto-band{padding:18px 20px;border-radius:22px;background:linear-gradient(135deg,rgba(0,113,227,.08),rgba(15,23,42,.04));border:1px solid rgba(0,113,227,.08)}.motto-line{font-size:1.05rem;font-weight:700}.page-meta-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0 24px}.faq-list details{padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 10px 26px rgba(15,23,42,.05);margin-bottom:14px}.faq-list summary{font-weight:700;cursor:pointer}.note-list li,.checklist li{margin-bottom:10px}.section-header--card,.manual-cro-shell,.premium-proof-shell,.hub-local-panel,.hub-service-panel,.request-card,.trust-card,.shared-card{border-radius:24px}.hub-local-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.hub-link-list a{display:block;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.05);text-decoration:none;color:inherit}.section-header p,.s-body,.hero-intro,.page-copy,.cl-desc,.cta-lead{max-width:72ch}.local-proof{margin-top:14px}.section-header{margin-bottom:18px}.comparison-module__intro{margin-bottom:16px}.related-links a{text-decoration:none}.micro-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.micro-links a,.text-link{font-weight:600}.sticky-bottom-cta{margin-top:36px}@media (max-width:980px){.grid-3,.cards-3,.comparison-grid,.cross-links,.page-meta-strip,.hero-grid,.hub-local-grid{grid-template-columns:1fr}.hero-img{max-height:340px}}

/* Migrated inline block 9; used on 2 page(s); first seen: services/tools/ai-readiness/ai-booking-readiness-checker.html; hash: 4ddbd47a94f4 */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible;z-index:10000;padding:12px 16px;border-radius:10px;background:#111827;color:#fff;text-decoration:none}
main:focus{outline:none}
.checker-wrap{max-width:680px;margin:0 auto;padding:0 0 32px}
.checker-q{background:#fff;border:1px solid var(--clay-border,#e5d8c9);border-radius:16px;padding:18px 20px;margin-bottom:12px;transition:border-color .2s}
.checker-q:focus-within{border-color:#1f7a4d}
.checker-q label{display:flex;gap:14px;cursor:pointer;font-size:.97rem;align-items:flex-start;color:var(--clay-text,#2b2723);line-height:1.55}
.checker-q input[type=checkbox]{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:#1f7a4d;cursor:pointer}
.checker-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:16px;background:var(--clay-accent,#ff6b3d);color:#fff;font-weight:800;font-size:1rem;border:none;cursor:pointer;transition:background .2s,transform .2s;margin-top:8px}
.checker-btn:hover{background:#de5228;transform:translateY(-2px)}
.checker-btn:focus-visible{outline:3px solid rgba(0,113,227,.4);outline-offset:3px}
.result-panel{display:none;margin-top:24px;padding:26px 28px;border-radius:22px;border:2px solid #b8d8c1;background:linear-gradient(180deg,rgba(237,246,238,.97),rgba(255,255,255,.97))}
.result-panel.show{display:block}
.result-panel h2{margin:0 0 10px;font-size:1.35rem;color:var(--clay-heading,#171411)}
.result-panel .result-score{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#1f7a4d;margin-bottom:12px;display:block}
.result-panel p{color:var(--clay-muted,#5f5850);line-height:1.7;margin-bottom:12px}
.result-panel .result-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.result-panel .result-links a{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;border:1px solid var(--clay-border,#e5d8c9);background:#fff;color:var(--clay-heading,#171411);font-size:.88rem;font-weight:700;text-decoration:none;transition:border-color .2s,background .2s}
.result-panel .result-links a:hover{border-color:#1f7a4d;background:rgba(237,246,238,.8)}
.result-panel .btn-primary-result{background:#1f7a4d;color:#fff !important;border-color:#1f7a4d}
.result-panel .btn-primary-result:hover{background:#16553a}
.result-not-ready{border-color:rgba(239,68,68,.3);background:linear-gradient(180deg,rgba(255,250,250,.97),rgba(255,255,255,.97))}
.result-almost{border-color:rgba(245,158,11,.3);background:linear-gradient(180deg,rgba(255,253,247,.97),rgba(255,255,255,.97))}
.result-ready{border-color:#b8d8c1;background:linear-gradient(180deg,rgba(237,246,238,.97),rgba(255,255,255,.97))}
@media (max-width:640px){.result-panel{padding:20px 18px}.checker-q{padding:14px 16px}}

/* === Merged final UX polish layer
   Merged from assets/final-ux-polish.css so clay-theme.css acts as the master stylesheet.
=== */

/* Final UX/UI polish layer
   Purpose: safe shared layout improvements without changing URLs, content structure or brand identity. */

:root {
  --yitm-max: 1120px;
  --yitm-radius: 18px;
  --yitm-border: rgba(68, 54, 40, 0.14);
  --yitm-soft-bg: #fffaf2;
  --yitm-card-bg: rgba(255, 255, 255, 0.86);
  --yitm-shadow: 0 14px 40px rgba(42, 34, 24, 0.08);
  --yitm-shadow-soft: 0 8px 24px rgba(42, 34, 24, 0.06);
  --yitm-text: #171411;
  --yitm-muted: #655b50;
  --yitm-accent: #df4f2a;
  --yitm-green: #23834a;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--yitm-text);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

main,
.site-main,
.page-main,
.wrap,
.container,
.content-wrap,
.breadcrumbs,
.breadcrumb,
.page-intro,
.quick-use,
.quick-note {
  max-width: var(--yitm-max);
}

.container,
.wrap,
.content-wrap,
.breadcrumbs,
.breadcrumb,
.page-intro,
.quick-use,
.quick-note {
  margin-left: auto;
  margin-right: auto;
}

.hero,
.hero-grid,
.page-hero,
.service-hero,
.local-hero {
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3rem);
}

.hero img,
.hero-grid img,
.page-hero img,
.service-hero img,
.local-hero img,
.hero-visual img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: #fff6ea;
  border-radius: var(--yitm-radius);
}

.hero-visual,
.hero-media,
.hero-image,
.visual-card {
  overflow: hidden;
  border-radius: var(--yitm-radius);
  box-shadow: var(--yitm-shadow-soft);
}

.card,
.info-card,
.service-card,
.link-card,
.related-card,
.tool-card,
.guide-card,
.quick-answer,
.faq-item,
.notice,
.callout {
  border-color: var(--yitm-border);
  box-shadow: var(--yitm-shadow-soft);
}

.card:hover,
.info-card:hover,
.service-card:hover,
.link-card:hover,
.related-card:hover,
.tool-card:hover,
.guide-card:hover {
  transform: translateY(-1px);
}

a,
button,
.btn,
.cta,
.nav a,
.site-nav a {
  text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.cta:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(35, 131, 74, 0.36);
  outline-offset: 3px;
  border-radius: 10px;
}

.btn,
.cta,
.button,
.whatsapp,
.call-button,
.phone-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

p,
li {
  line-height: 1.68;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li,
.quick-answer,
.callout,
.notice {
  text-wrap: pretty;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap,
.pricing-table,
.compare-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sticky-cta,
.mobile-cta,
.bottom-cta {
  z-index: 30;
}

@media (max-width: 820px) {
  body {
    font-size: 16px;
  }

  main,
  .site-main,
  .page-main,
  .wrap,
  .container,
  .content-wrap,
  .breadcrumbs,
  .breadcrumb,
  .page-intro,
  .quick-use,
  .quick-note {
    width: min(100% - 32px, var(--yitm-max));
  }

  .hero,
  .hero-grid,
  .page-hero,
  .service-hero,
  .local-hero,
  .two-col,
  .split,
  .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .hero h1,
  .page-hero h1,
  .service-hero h1,
  .local-hero h1 {
    font-size: clamp(2.05rem, 11vw, 3.25rem);
    line-height: 0.98;
  }

  .hero img,
  .hero-grid img,
  .page-hero img,
  .service-hero img,
  .local-hero img,
  .hero-visual img {
    max-height: 360px;
  }

  .nav,
  .site-nav,
  header nav {
    gap: 0.45rem;
  }

  .nav a,
  .site-nav a,
  header nav a {
    padding: 0.5rem 0.6rem;
  }

  .card-grid,
  .related-grid,
  .service-grid,
  .tool-grid,
  .guide-grid,
  .areas-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  main,
  .site-main,
  .page-main,
  .wrap,
  .container,
  .content-wrap,
  .breadcrumbs,
  .breadcrumb,
  .page-intro,
  .quick-use,
  .quick-note {
    width: min(100% - 24px, var(--yitm-max));
  }

  .topbar,
  .site-header,
  header {
    position: relative;
  }

  .hero,
  .page-hero,
  .service-hero,
  .local-hero {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .quick-use,
  .quick-note,
  .page-intro,
  .notice,
  .callout,
  .quick-answer,
  .card,
  .info-card,
  .service-card,
  .link-card,
  .related-card,
  .tool-card,
  .guide-card {
    border-radius: 16px;
  }

  .btn,
  .cta,
  .button,
  .whatsapp,
  .call-button,
  .phone-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Post-merge UX regression guards === */
:root {
  --yitm-content-width: 1120px;
}

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

main,
.container,
.wrap,
.content-wrap,
.breadcrumb,
.breadcrumbs {
  max-width: var(--yitm-content-width);
  margin-left: auto;
  margin-right: auto;
}

img {
  max-width: 100%;
  height: auto;
}

.hero img,
.hero-visual img,
.hero-media img,
.page-hero img,
.service-hero img,
.local-hero img {
  object-fit: cover;
}

a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 820px) {
  .hero,
  .hero-grid,
  .page-hero,
  .service-hero,
  .local-hero,
  .two-col,
  .split,
  .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .card-grid,
  .related-grid,
  .service-grid,
  .tool-grid,
  .guide-grid,
  .areas-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === Migrated inline style attributes from HTML === */
.yitm-style-6d5382a730 { font-size:1rem;margin-bottom:8px; }
.yitm-style-8354774b47 { color:var(--clay-heading);text-decoration:none; }
.yitm-style-579b5612de { display:inline-block;margin-top:10px;font-size:.88rem;font-weight:700;color:var(--clay-accent-dark,#c94a1a); }
.yitm-style-298e2c464c { display:flex;flex-direction:column;padding:14px 16px;border-radius:16px;border:1px solid var(--clay-border,#e5d8c9);background:var(--clay-surface,#fff);text-decoration:none;transition:transform .2s; }
.yitm-style-6425a7cdb8 { font-size:.9rem;color:var(--clay-muted,#5f5850);margin:0; }
.yitm-style-6e32f143c9 { color:var(--clay-heading,#171411);font-size:.94rem;margin-bottom:4px; }
.yitm-style-9018c5a7d5 { display:block; text-align:center; }
.yitm-style-420a738796 { padding:22px; }
.yitm-style-9ca36af688 { font-size:.88rem;font-weight:700;color:var(--clay-accent-dark,#c94a1a); }
.yitm-style-f4cfce9d1c { font-size:.9rem;color:var(--clay-muted);margin:0 0 10px; }
.yitm-style-a26bda7d11 { margin-top:20px; }
.yitm-style-86de7ac63a { margin-top:18px; }
.yitm-style-2257672f7e { margin-top:24px;display:flex;flex-wrap:wrap;gap:12px; }
.yitm-style-5100680bdb { display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--clay-border-light,#f0e8dc);padding-top:18px;margin-top:6px; }
.yitm-style-9f15d01e5b { border-left:4px solid #1f7a4d;padding:24px; }
.yitm-style-a0dd025771 { color:#1f7a4d;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px; }
.yitm-style-a2f0ebb688 { margin:0;color:var(--clay-muted,#5f5850);font-size:.92rem; }
.yitm-style-ed1741af94 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px; }
.yitm-style-f06aec1133 { margin:0 0 10px; }
.yitm-style-fdb1d884d6 { font-size:.9rem;color:var(--clay-muted);margin:0; }
.yitm-style-6288a5493f { margin-top:16px;display:flex;flex-wrap:wrap;gap:10px; }
.yitm-style-f8f932812d { max-width:760px;margin:0 auto; }
.yitm-style-2c194cbc71 { font-size:.88rem;color:var(--clay-muted); }
.yitm-style-36eeaeb854 { max-width:58ch;margin:0 auto 18px; }
.yitm-style-472a923846 { display:flex;flex-wrap:wrap;gap:12px;justify-content:center; }
.yitm-style-5ae18299b7 { border:none;padding:0;margin:0; }
.yitm-style-8c0a2d36ed { width:100%;float:none; }
.yitm-style-8ec3933d6e { padding:24px;text-align:center; }
.yitm-style-a846a4ca88 { font-size:1.3rem;margin-bottom:10px; }
.yitm-style-d5a03b8835 { gap:16px; }
.yitm-style-e48de06d29 { text-align:center;padding:28px; }
.yitm-style-e4ad4a163b { margin-bottom:8px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: var(--clay-heading, #1f1a14);
  border: 2px solid var(--clay-accent-dark, #c94a1a);
  border-radius: 10px;
}
.skip-link:focus {
  left: 12px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.redirect-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--clay-bg, #fff7ec);
}
.redirect-page main {
  max-width: 720px;
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--clay-surface, #fff);
  box-shadow: 0 14px 40px rgba(42, 34, 24, 0.08);
}

/* === TheFixers.app referral section === */
.tf-referral-section {
  width: min(100% - 32px, 1120px);
  margin: clamp(2.5rem, 5vw, 4.5rem) auto;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
  border: 1px solid rgba(83, 61, 40, 0.18);
  border-radius: 28px;
  background: radial-gradient(circle at 92% 8%, rgba(255, 249, 238, 0.92), transparent 34%), linear-gradient(135deg, #fffdfa 0%, #f9efe4 100%);
  box-shadow: 0 26px 70px rgba(61, 45, 28, 0.14);
}
.tf-referral-kicker {
  margin: 0 0 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f2643b;
}
.tf-referral-kicker span {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #148246;
  background: rgba(35, 131, 74, 0.09);
  font-weight: 900;
}
.tf-referral-copy h2 {
  margin: 0 0 0.75rem;
  max-width: 620px;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: #16120e;
}
.tf-referral-copy h2 em {
  font-style: italic;
  font-weight: 750;
}
.tf-referral-copy > p {
  margin: 0;
  max-width: 620px;
  color: #5f5146;
  font-size: 1.03rem;
  line-height: 1.7;
}
.tf-referral-copy strong {
  color: #15110d;
}
.tf-referral-steps {
  margin: 1.55rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.35rem;
}
.tf-referral-steps li {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.tf-referral-steps li > span {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff774c, #f4512b);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(244, 81, 43, 0.23);
}
.tf-referral-steps strong {
  display: block;
  margin-top: 0.05rem;
  font-size: 1.02rem;
  color: #16120e;
}
.tf-referral-steps p {
  margin: 0.35rem 0 0;
  color: #66584d;
  line-height: 1.55;
  font-size: 0.96rem;
}
.tf-referral-media {
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.tf-referral-media img {
  width: 100%;
  max-height: 270px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(61, 45, 28, 0.18);
  box-shadow: 0 20px 46px rgba(61, 45, 28, 0.16);
  background: #fff7e9;
}
.tf-commission-card {
  width: 100%;
  padding: 1.25rem 1.45rem;
  border-radius: 20px;
  border: 1px solid rgba(83, 61, 40, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(61, 45, 28, 0.12);
}
.tf-commission-card p {
  margin: 0 0 0.35rem;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fa6d2c;
}
.tf-commission-card strong {
  display: block;
  margin: 0;
  font-size: clamp(2.7rem, 6vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: #191510;
}
.tf-commission-card span {
  display: block;
  margin-top: 0.35rem;
  color: #594c42;
  font-size: 0.95rem;
}
.tf-referral-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 14px;
  border: 1px dashed rgba(83, 61, 40, 0.24);
  background: rgba(255, 255, 255, 0.82);
  color: #6a5b4d;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(61, 45, 28, 0.07);
}
.tf-referral-button:hover {
  color: #191510;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(61, 45, 28, 0.11);
}
@media (max-width: 860px) {
  .tf-referral-section {
    grid-template-columns: 1fr;
  }
  .tf-referral-media {
    justify-items: stretch;
  }
  .tf-referral-button {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .tf-referral-section {
    width: min(100% - 24px, 1120px);
    border-radius: 22px;
  }
  .tf-referral-steps li {
    grid-template-columns: 1.9rem minmax(0, 1fr);
  }
  .tf-referral-steps li > span {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* === Stable TheFixers.app referral block using proven refer-section markup === */
.refer-section {
  border: 1px solid rgba(83, 61, 40, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 249, 238, 0.92), transparent 34%),
    linear-gradient(135deg, #fffdfa 0%, #f9efe4 100%);
  box-shadow: 0 26px 70px rgba(61, 45, 28, 0.14);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  overflow: hidden;
}

.refer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}

.refer-eyebrow {
  margin: 0 0 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f2643b;
}

.refer-section h2 {
  margin: 0 0 0.75rem;
  max-width: 620px;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: #16120e;
}

.refer-section h2 em {
  font-style: italic;
  font-weight: 750;
}

.refer-section .cta-lead {
  margin: 0;
  max-width: 620px;
  color: #5f5146;
  font-size: 1.03rem;
  line-height: 1.7;
}

.refer-steps {
  margin: 1.55rem 0 0;
  display: grid;
  gap: 1.35rem;
}

.refer-step {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.rs-num {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff774c, #f4512b);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(244, 81, 43, 0.23);
}

.refer-step strong {
  display: block;
  margin-top: 0.05rem;
  font-size: 1.02rem;
  color: #16120e;
}

.refer-step p,
.refer-step .cta-copy-tight {
  margin: 0.35rem 0 0;
  color: #66584d;
  line-height: 1.55;
  font-size: 0.96rem;
}

.refer-section .cta-stack,
.refer-section .cta-stack-center {
  display: grid;
  gap: 1rem;
  justify-items: start;
  align-content: center;
}

.refer-img-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(61, 45, 28, 0.18);
  box-shadow: 0 20px 46px rgba(61, 45, 28, 0.16);
  background: #fff7e9;
}

.refer-img-wrap img,
.refer-img {
  width: 100%;
  max-height: 270px;
  object-fit: cover;
  display: block;
}

.refer-section .glass-card {
  width: 100%;
  padding: 1.25rem 1.45rem;
  border-radius: 20px;
  border: 1px solid rgba(83, 61, 40, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(61, 45, 28, 0.12);
}

.refer-section .cta-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fa6d2c;
}

.refer-section .cta-stat-value {
  margin: 0;
  font-size: clamp(2.7rem, 6vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: #191510;
  font-weight: 900;
}

.refer-section .cta-meta {
  display: block;
  margin-top: 0.35rem;
  color: #594c42;
  font-size: 0.95rem;
}

.refer-section .hero-secondary-cta,
.refer-section .cta-compact {
  margin: 0;
}

.refer-section .btn {
  min-height: 48px;
}

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

  .refer-section .cta-stack,
  .refer-section .cta-stack-center {
    justify-items: stretch;
  }

  .refer-section .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .refer-section {
    border-radius: 22px;
    padding: 1.35rem;
  }

  .refer-step {
    grid-template-columns: 1.9rem minmax(0, 1fr);
  }

  .rs-num {
    width: 1.8rem;
    height: 1.8rem;
  }
}



/* === Publication spacing compact pass: remove gaping vertical space across all pages === */
.template-service-page .section,
.template-suburb-page .section,
.template-tool-page .section,
.template-guide-page .section {
  padding: 36px 0 !important;
}
.template-service-page .section-alt,
.template-suburb-page .section-alt,
.template-tool-page .section-alt,
.template-guide-page .section-alt {
  padding: 30px 0 !important;
}
.template-service-page .hero,
.template-suburb-page .hero,
.template-tool-page .hero,
.template-guide-page .hero {
  padding-top: 40px !important;
}
.section-header--card,
.template-service-page .wrap > .section-header,
.template-suburb-page .wrap > .section-header,
.template-tool-page .wrap > .section-header,
.template-guide-page .wrap > .section-header {
  margin-bottom: 18px !important;
  padding: 20px 22px !important;
}
.glass-card,
.card,
.note,
.seo-panel,
.service-card,
.cross-link-card,
.cause-card,
.page-meta-card,
.comparison-card,
.proof-card,
.premium-proof-card,
.local-cta-block,
.comparison-module,
.promo-cta {
  padding: 18px !important;
}
.cross-links,
.services-bento,
.comparison-grid,
.premium-proof-grid,
.causes-grid,
.page-meta-strip,
.service-areas-grid,
.grid-3,
.tools {
  gap: 14px !important;
}
.content-proof-block,
.local-identity,
.scenario-block,
.seo-proof-block,
.final-cta,
.final,
.page-final-cta,
.mid-cta-bar,
.cta-strip,
.request-cta-strip,
.shared-panel-soft,
.refer-section {
  padding: 20px !important;
}
.content-proof-block p,
.local-identity p,
.scenario-block p,
.seo-proof-block p,
.final-cta p,
.final p,
.page-final-cta p,
.mid-cta-bar p,
.cause-card p,
.cross-link-card p,
.glass-card p,
.service-card p {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}
.final-cta .suburb-context-block,
.final .suburb-context-block,
.page-final-cta .suburb-context-block {
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
}
.final-cta .suburb-context-title,
.final .suburb-context-title,
.page-final-cta .suburb-context-title {
  margin: 0 0 6px !important;
}
.final-cta h1,
.final-cta h2,
.final-cta h3,
.final h1,
.final h2,
.final h3,
.page-final-cta h1,
.page-final-cta h2,
.page-final-cta h3 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.final-cta .cta-button-grid,
.final .cta-button-grid,
.page-final-cta .cta-button-grid,
.mid-cta-bar .cta-actions,
.hero-ctas,
.hero-secondary-cta,
.cta-row,
.cta-row-2 {
  gap: 10px !important;
  margin-top: 12px !important;
}
.trust-bar {
  padding: 12px 0 !important;
}
.trust-bar-inner {
  gap: 10px 14px !important;
}
.final-cta .trust-bar,
.final .trust-bar,
.page-final-cta .trust-bar {
  margin-top: 14px !important;
  padding: 10px 12px !important;
}
.nap-block.cta-strip,
.final-cta .nap-block,
.final .nap-block,
.page-final-cta .nap-block {
  margin-top: 12px !important;
  padding: 10px 14px !important;
}
.section + .section,
.section + .section-alt,
.section-alt + .section,
.section-alt + .section-alt {
  margin-top: 0 !important;
}
@media (max-width: 920px) {
  .template-service-page .section,
  .template-suburb-page .section,
  .template-tool-page .section,
  .template-guide-page .section {
    padding: 30px 0 !important;
  }
  .template-service-page .section-alt,
  .template-suburb-page .section-alt,
  .template-tool-page .section-alt,
  .template-guide-page .section-alt {
    padding: 26px 0 !important;
  }
}
@media (max-width: 640px) {
  .section-header--card,
  .template-service-page .wrap > .section-header,
  .template-suburb-page .wrap > .section-header,
  .template-tool-page .wrap > .section-header,
  .template-guide-page .wrap > .section-header {
    padding: 16px !important;
    margin-bottom: 14px !important;
  }
  .glass-card,
  .card,
  .note,
  .seo-panel,
  .service-card,
  .cross-link-card,
  .cause-card,
  .page-meta-card,
  .comparison-card,
  .proof-card,
  .premium-proof-card,
  .content-proof-block,
  .local-identity,
  .scenario-block,
  .seo-proof-block,
  .final-cta,
  .final,
  .page-final-cta,
  .mid-cta-bar,
  .cta-strip,
  .request-cta-strip,
  .shared-panel-soft,
  .refer-section {
    padding: 16px !important;
  }
  .cross-links,
  .services-bento,
  .comparison-grid,
  .premium-proof-grid,
  .causes-grid,
  .page-meta-strip,
  .service-areas-grid,
  .grid-3,
  .tools {
    gap: 12px !important;
  }
}


/* === Header logo spacing fix === */
.site-header .logo,
.site-header a.logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.22em !important;
  white-space: nowrap !important;
}
.site-header .logo span,
.site-header a.logo span {
  display: inline-block;
}