/* ==========================================================================
   PPC Audits — static site styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

:root{
  --ink: #1C1730;
  --ink-soft: #4A4459;
  --paper: #FAF9FC;
  --paper-dim: #F1EEF6;
  --purple: #4B3F71;
  --purple-deep: #2C2447;
  --purple-mid: #6C5D9B;
  --rust: #B23B1D;
  --rust-rgb: 178,59,29;
  --gold: #A9862F;
  --emerald: #1F7A5C;
  --line: #DEDAE8;
  --line-dark: rgba(250,249,252,0.18);
  --radius: 12px;
  --radius-lg: 20px;
  --max: 1120px;
  --serif: "Outfit", -apple-system, sans-serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Outfit", -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: 100px; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
p{ margin: 0 0 1em; }
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}
:focus-visible{
  outline: 2px solid var(--purple-mid);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 0.5em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85em 1.5em;
  border-radius: var(--radius);
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn-primary{
  background: var(--purple);
  color: var(--paper);
}
.btn-primary:hover{ background: var(--purple-deep); }
.btn-ghost{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.btn-on-dark{
  background: var(--paper);
  color: var(--purple-deep);
}
.btn-on-dark:hover{ background: var(--paper-dim); }
.btn-ghost-on-dark{
  background: transparent;
  border-color: var(--line-dark);
  color: var(--paper);
}
.btn-ghost-on-dark:hover{ border-color: var(--paper); }
.btn-accent{
  background: var(--emerald);
  color: var(--paper);
}
.btn-accent:hover{ background: #185f49; }

.text-link{
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  font-weight: 500;
}
.text-link:hover{ text-decoration-color: currentColor; }

/* ---------- header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--purple-deep);
  box-shadow: 0 6px 20px -8px rgba(21,17,38,0.45);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 76px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.brand-logo-img{ height: 40px; width:auto; }
.footer-logo-img{ height: 24px; width:auto; margin-bottom:12px; }
.main-nav{
  display:flex;
  align-items:center;
  gap: 34px;
}
.main-nav ul{
  display:flex;
  gap: 28px;
  list-style:none;
  margin:0; padding:0;
}
.main-nav a{
  text-decoration:none;
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(250,249,252,0.72);
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  color: var(--paper);
  border-color: var(--emerald);
}
.main-nav .btn{ background: var(--paper); color: var(--purple-deep); border-bottom: none; padding: 0.75em 1.7em; }
.main-nav .btn:hover{ background: var(--paper-dim); color: var(--purple-deep); }
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding: 8px;
  color: var(--paper);
}
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width: 780px){
  .main-nav{
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--purple-deep);
    flex-direction: column;
    align-items:flex-start;
    padding: 24px 28px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    border-top: 1px solid rgba(250,249,252,0.14);
  }
  .main-nav.open{
    opacity:1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .main-nav ul{ flex-direction: column; gap: 18px; width:100%; }
  .main-nav .btn{ margin-top: 20px; width:100%; justify-content:center; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  padding: 88px 0 64px;
  border-bottom: 1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items:center;
}
.eyebrow-line{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--purple);
  margin-bottom: 18px;
}
.eyebrow-line::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--purple);
  display:inline-block;
}
.hero h1{
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  font-weight: 700;
  max-width: 15ch;
}
.hero .lede{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 1.6em;
}
.hero .cta-row{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 2.2em;
}
.trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap: 22px 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.trust-strip div{
  font-size: 0.86rem;
  color: var(--ink-soft);
  display:flex;
  align-items:center;
  gap: 8px;
}
.trust-strip strong{
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1rem;
}

/* ---------- hero photo ---------- */
.hero-photo{ position:relative; margin:0; }
.hero-photo img{
  width:100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display:block;
  border: 1px solid var(--line);
}
.hero-photo .badge{
  position:absolute;
  bottom:20px;
  left:20px;
}

/* ---------- section scaffolding ---------- */
section{ padding: 76px 0; }
.section-head{
  max-width: 640px;
  margin-bottom: 44px;
}
.section-head p{ color: var(--ink-soft); font-size: 1.05rem; margin-bottom:0; }
.divider-top{ border-top: 1px solid var(--line); }
.bg-dim{ background: var(--paper-dim); }
.bg-dark{ background: var(--purple-deep); color: var(--paper); }
.bg-dark h2, .bg-dark h3{ color: var(--paper); }
.bg-dark .ink-soft, .bg-dark p{ color: rgba(250,249,252,0.78); }

/* ---------- intro / make every click count ---------- */
.intro-split{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items:center;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: var(--emerald);
  color: var(--paper);
  font-family: var(--serif);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:7px 16px;
}
.intro-split .num-mark{
  margin-top: 8px;
  margin-bottom: 16px;
}
.intro-split h2{ font-size: 1.9rem; }
.intro-photo{ margin:0; align-self:center; position:relative; }
.intro-photo img{
  width:100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display:block;
  border: 1px solid var(--line);
}
.intro-photo .badge{ position:absolute; top:20px; left:20px; }
.intro-photo figcaption{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* ---------- benefits grid ---------- */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid-3 > div{
  background: var(--paper);
  padding: 30px 28px;
}
.grid-3 h3{
  font-size: 1.05rem;
  margin-bottom: 0.5em;
}
.grid-3 p{ color: var(--ink-soft); font-size: 0.94rem; margin-bottom:0; }
.card-index{
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.72rem;
  color: var(--purple-mid);
  display:block;
  margin-bottom: 10px;
}

/* ---------- process steps ---------- */
.steps{
  counter-reset: step;
}
.step{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.step:first-child{ padding-top: 0; }
.step:last-child{ border-bottom:none; }
.step .step-num{
  counter-increment: step;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--purple-mid);
}
.step .step-num::before{ content: counter(step, decimal-leading-zero); }
.steps-accent .step-num{ color: var(--emerald); }
.step h3{ font-size: 1.08rem; margin-bottom: 0.4em; }
.step p{ color: var(--ink-soft); margin-bottom:0; max-width: 62ch; }

/* ---------- image placeholders (to be replaced with real photography) ---------- */
.img-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background: var(--paper-dim);
  background-image: repeating-linear-gradient(135deg, rgba(75,63,113,0.07) 0px, rgba(75,63,113,0.07) 1px, transparent 1px, transparent 14px);
  border: 2px dashed var(--purple-mid);
  color: var(--purple-mid);
  padding: 24px;
  text-align:center;
  box-sizing:border-box;
}
.img-placeholder svg{ width:30px; height:30px; opacity:0.85; }
.img-placeholder .ph-label{
  font-family: var(--serif);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  max-width: 30ch;
}
.img-placeholder .ph-sub{
  font-family: var(--sans);
  font-size:0.78rem;
  color: var(--ink-soft);
  font-weight:500;
  max-width: 34ch;
}
.img-placeholder.on-dark{
  background: rgba(250,249,252,0.05);
  background-image: repeating-linear-gradient(135deg, rgba(250,249,252,0.06) 0px, rgba(250,249,252,0.06) 1px, transparent 1px, transparent 14px);
  border-color: rgba(250,249,252,0.35);
  color: var(--paper);
}
.img-placeholder.on-dark .ph-sub{ color: rgba(250,249,252,0.65); }
.ph-wide{ aspect-ratio: 21/6; width:100%; object-fit:cover; display:block; border:1px solid var(--line); }
.ph-portrait{ aspect-ratio: 4/5; width:100%; object-fit:cover; display:block; border:1px solid var(--line); }
.ph-banner{ aspect-ratio: 16/6; width:100%; object-fit:cover; display:block; border:1px solid var(--line); }
@media (max-width: 700px){
  .ph-wide, .ph-banner{ aspect-ratio: 4/3; }
}

/* ---------- audit pricing cards ---------- */
.audit-cards{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.audit-card{
  border: 1px solid var(--line);
  background: var(--paper);
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
}
.audit-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:5px;
}
.audit-card.ac-ppc::before{ background: var(--purple); }
.audit-card.ac-ecom::before{ background: var(--emerald); }
.ac-tag{
  display:inline-block;
  margin: 28px 32px 0;
  padding: 5px 12px;
  font-family: var(--serif); font-weight:700; font-size:0.72rem;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--paper); align-self:flex-start;
}
.ac-ppc .ac-tag{ background:var(--purple); }
.ac-ecom .ac-tag{ background:var(--emerald); }
.audit-card h3{ font-size:1.5rem; margin: 16px 32px 4px; }
.ac-for{ margin: 0 32px 20px; color:var(--ink-soft); font-size:0.9rem; }
.ac-price{ margin: 0 32px 24px; font-family:var(--serif); font-weight:800; font-size:2.2rem; }
.ac-price span{ font-family:var(--sans); font-weight:500; font-size:0.9rem; color:var(--ink-soft); }
.ac-divider{ border-top:1px solid var(--line); margin:0 32px; }
.ac-list{ list-style:none; margin:20px 32px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; }
.ac-list li{ display:flex; gap:10px; font-size:0.92rem; color:var(--ink-soft); align-items:flex-start; }
.ac-list li svg{ flex:none; width:18px; height:18px; margin-top:2px; }
.ac-ppc .ac-list li svg{ color:var(--purple); }
.ac-ecom .ac-list li svg{ color:var(--emerald); }
.audit-card .btn{ margin: 4px 32px 32px; justify-content:center; }
@media (max-width: 760px){
  .audit-cards{ grid-template-columns:1fr; }
}

/* ---------- benefits list (varied rhythm from grid-3) ---------- */
.media-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: 48px;
  align-items:start;
}
.media-grid.media-reverse{ grid-template-columns: 1.4fr 0.85fr; }
.media-grid .img-placeholder{ position:sticky; top:100px; }
.benefits-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.benefit-item{
  display:grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.benefit-item:first-child{ padding-top:0; }
.benefit-item .b-num{
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--purple-mid);
  line-height:1;
}
.benefit-item h3{ font-size: 1.05rem; margin-bottom: 0.35em; }
.benefit-item p{ color: var(--ink-soft); font-size: 0.92rem; margin-bottom:0; }
@media (max-width: 860px){
  .media-grid{ grid-template-columns: 1fr; }
  .media-grid .img-placeholder{ position:static; }
}

/* ---------- product teasers ---------- */
/* ---------- FAQ ---------- */
.faq-list{ border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding: 22px 4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 20px;
  font-family: var(--serif);
  font-size: 1.08rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .faq-icon{
  flex: none;
  width: 20px; height:20px;
  position:relative;
}
.faq-item .faq-icon::before, .faq-item .faq-icon::after{
  content:"";
  position:absolute;
  background: var(--purple);
  top:50%; left:50%;
  transform: translate(-50%,-50%);
}
.faq-item .faq-icon::before{ width:14px; height:2px; }
.faq-item .faq-icon::after{ width:2px; height:14px; transition: transform 160ms ease; }
.faq-item[open] .faq-icon::after{ transform: translate(-50%,-50%) rotate(90deg) scale(0); }
.faq-body{
  padding: 0 4px 24px;
  color: var(--ink-soft);
  max-width: 68ch;
}
.faq-body ul{ padding-left: 20px; margin: 10px 0; }
.faq-body li{ margin-bottom: 6px; }

/* ---------- why choose ---------- */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 34px;
}
.why-grid h3{
  font-size: 1.05rem;
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.why-grid ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap: 9px;
}
.why-grid li{
  font-size: 0.92rem;
  color: rgba(250,249,252,0.82);
  padding-left: 16px;
  position:relative;
}
.why-grid li::before{
  content:"";
  position:absolute; left:0; top:0.6em;
  width:6px; height:1px;
  background: var(--gold);
}

/* ---------- final CTA band ---------- */
.cta-band{
  background: var(--purple-deep);
  color: var(--paper);
  text-align:left;
  padding: 72px 0;
}
.cta-band .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-band h2{ color: var(--paper); font-size: 1.9rem; max-width: 20ch; margin-bottom: 0.3em; }
.cta-band p{ color: rgba(250,249,252,0.78); margin-bottom:0; max-width: 42ch; }
.cta-band .cta-actions{ display:flex; gap: 14px; flex-wrap:wrap; }

/* ---------- footer ---------- */
.site-footer{
  background: var(--ink);
  color: rgba(250,249,252,0.85);
  padding: 56px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(250,249,252,0.14);
}
.footer-grid p{ font-size: 0.88rem; color: rgba(250,249,252,0.6); max-width: 32ch; }
.footer-grid h4{
  font-family: var(--sans);
  font-weight:600;
  font-size: 0.82rem;
  letter-spacing:0.03em;
  color: rgba(250,249,252,0.9);
  margin-bottom: 14px;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ text-decoration:none; font-size:0.92rem; color: rgba(250,249,252,0.72); }
.footer-grid a:hover{ color: var(--paper); }
.footer-bottom{
  padding-top: 24px;
  display:flex;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
  font-size: 0.82rem;
  color: rgba(250,249,252,0.5);
}

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero .hero-photo{ order:-1; }
  .intro-split{ grid-template-columns: 1fr; gap: 28px; }
  .grid-3{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; gap: 26px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  section{ padding: 56px 0; }
  .hero{ padding: 56px 0 44px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
}

/* ---------- illustrative diagram blocks ---------- */
.diagram-section{ padding: 0 0 76px; }
.diagram-fig{ margin: 0; border: 1px solid var(--line); background: var(--paper); padding: 32px 28px 22px; }
.diagram-fig svg{ width: 100%; height: auto; display: block; }
.diagram-caption{
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

/* ---------- page header (non-home pages) ---------- */
.page-head{
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-head .eyebrow-line{ margin-bottom: 14px; }
.page-head h1{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); max-width: 22ch; }
.page-head .lede{ color: var(--ink-soft); font-size: 1.08rem; max-width: 56ch; margin-bottom:0; }

/* ---------- product hero (pricing panel) ---------- */
.product-hero .wrap{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items:start;
  padding: 56px 0 64px;
}
.product-hero h1{ font-size: clamp(2rem, 3.8vw, 2.7rem); }
.price-panel{
  border: 1px solid var(--line);
  background: var(--paper-dim);
  padding: 28px;
}
.price-panel .pp-label{
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.72rem;
  color: var(--purple);
  margin-bottom: 6px;
  display:block;
}
.price-panel .pp-amount{
  font-family: var(--serif);
  font-size: 2rem;
  margin-bottom: 4px;
}
.price-panel .pp-amount sup{ font-size: 0.95rem; color: var(--ink-soft); font-weight:500; }
.price-panel .pp-note{ font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 18px; }
.price-panel ul{ margin: 0 0 20px; padding-left: 18px; font-size:0.92rem; color: var(--ink-soft); }
.price-panel li{ margin-bottom:6px; }
.price-panel .btn{ width:100%; justify-content:center; }
.tier-table{
  width:100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  font-size: 0.88rem;
}
.tier-table th, .tier-table td{
  text-align:left;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.tier-table th{ color: var(--ink-soft); font-weight:500; }

/* ---------- coverage checklist ---------- */
.coverage-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.coverage-col h4{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.coverage-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.coverage-col li{
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.coverage-col li svg{ flex:none; width:16px; height:16px; margin-top:3px; color: var(--emerald); }
@media (max-width: 760px){
  .coverage-grid{ grid-template-columns: 1fr; gap:28px; }
}

/* ---------- included grid (image-led cards) ---------- */
.included-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
}
.included-grid .inc-photo{ margin-bottom: 18px; aspect-ratio: 4/3; width:100%; object-fit:cover; display:block; border:1px solid var(--line); }
.included-grid h3{ font-size: 1.1rem; }
.included-grid p{ color: var(--ink-soft); font-size:0.92rem; margin-bottom:0; }

/* ---------- mid-page light CTA band ---------- */
.cta-band-light{
  background: rgba(31,122,92,0.06);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 48px 0;
}
.cta-band-light .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 28px;
  flex-wrap:wrap;
}
.cta-band-light h3{ font-size: 1.3rem; margin-bottom:0.2em; }
.cta-band-light p{ color:var(--ink-soft); margin-bottom:0; max-width:46ch; }

/* ---------- why-not-free accordion reuse (details) already styled via faq classes ---------- */

.contact-hero .wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 64px 0;
  align-items:start;
}
.contact-panel{
  border: 1px solid var(--line);
  background: var(--paper-dim);
  padding: 32px;
}
.contact-panel h2{ font-size: 1.3rem; }
.email-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  border: 1px solid var(--ink);
  padding: 16px 20px;
  margin-top: 18px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
}
.email-cta a{ text-decoration:none; font-weight:600; }
.contact-list{ list-style:none; margin: 22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.contact-list li{ display:flex; gap:12px; align-items:baseline; font-size:0.94rem; color:var(--ink-soft); }
.contact-list strong{ color: var(--ink); min-width: 110px; font-weight:600; }


/* =====================================================================
   Illustrated-card styling (v2)
   ===================================================================== */

/* announcement bar */
.notice{
  background: var(--emerald);
  color: var(--paper);
  text-align:center;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 9px 20px;
}
.notice a{ color: var(--paper); font-weight:700; margin-left:10px; text-decoration: underline; text-underline-offset:3px; }
@media (max-width: 780px){ .notice{ display:none; } }

/* softer, rounder surfaces */
.hero-photo img, .intro-photo img, img.ph-wide, img.ph-portrait, img.ph-banner,
.included-grid .inc-photo, .diagram-fig, .price-panel, .cta-band-light .wrap, .report-mock{
  border-radius: var(--radius-lg);
}
.diagram-fig{ overflow:hidden; }
.badge, .ac-tag{ border-radius: 999px; }
.faq-item{ }
.btn{ border-radius: 12px; }

/* tags + text links */
.tag{
  display:inline-block;
  font-size:0.74rem; font-weight:700; letter-spacing:0.02em;
  color: var(--emerald);
  background: rgba(31,122,92,0.1);
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 12px;
}
.textlink{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:0.92rem; color: var(--purple);
}
.textlink::after{ content:"\2192"; transition: transform 160ms ease; }
a:hover > .textlink::after, .textlink:hover::after{ transform: translateX(4px); }

/* illustration palette */
.illus{ display:block; width:100%; height:auto; }
.illus .f-bg{ fill:#EEEAF7; } .illus .f-w{ fill:#fff; } .illus .f-p{ fill:var(--purple); }
.illus .f-pm{ fill:var(--purple-mid); } .illus .f-ps{ fill:#DCD5EE; } .illus .f-e{ fill:var(--emerald); }
.illus .f-es{ fill:#CFE8DF; } .illus .f-k{ fill:var(--ink); } .illus .f-l{ fill:var(--line); }
.illus .f-r{ fill:var(--rust); } .illus .f-rs{ fill:#F3D9D0; }
.illus .s-p{ stroke:var(--purple); } .illus .s-e{ stroke:var(--emerald); } .illus .s-k{ stroke:var(--ink); }
.illus .s-l{ stroke:var(--line); } .illus .s-w{ stroke:#fff; } .illus .s-r{ stroke:var(--rust); }
.illus .t{ font-family: var(--serif); font-weight:700; } .illus .tb{ font-family: var(--sans); font-weight:700; }

/* service / audit-coverage cards */
.svc-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.svc-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; transition: transform 180ms ease, box-shadow 180ms ease;
}
.svc-card:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(44,36,71,0.45); }
.svc-card .art{ padding: 14px 14px 0; }
.svc-card .body{ padding: 18px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.svc-card h3{ font-size:1.12rem; margin:0; }
.svc-card p{ color: var(--ink-soft); font-size:0.92rem; margin:0 0 6px; }
.svc-card .textlink{ margin-top:auto; }
@media (max-width: 1000px){ .svc-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .svc-grid{ grid-template-columns: 1fr; } }

/* pricing cards: illustration replaces the colour bar */
.audit-card{ border-radius: var(--radius-lg); }
.audit-card::before{ display:none; }
.audit-card .art{ padding:14px 14px 0; }
.audit-card .ac-tag{ margin-top: 22px; }

/* why-choose cards */
.why-grid{ gap: 22px; }
.why-grid > div{
  background: rgba(250,249,252,0.06);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 26px 26px 24px;
}
.why-grid .why-ico{
  width:46px; height:46px; border-radius:14px; margin-bottom:16px;
  background: rgba(31,122,92,0.22); color:#7ADBB5;
  display:flex; align-items:center; justify-content:center;
}
.why-grid .why-ico svg{ width:23px; height:23px; }
.why-grid h3{ border-bottom: none; padding-bottom:0; margin-bottom: 12px; }

.svc-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.svc-card.static:hover{ transform:none; box-shadow:none; }
@media (max-width: 1000px){ .svc-grid.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .svc-grid.cols-3{ grid-template-columns: 1fr; } }

/* ---------- v3: dropdown nav ---------- */
.main-nav > ul{ align-items:center; }
.has-sub{ position:relative; }
.sub-toggle{
  background:none; border:none; border-bottom:1px solid transparent;
  font: inherit; font-weight:500; font-size:0.95rem;
  color: rgba(250,249,252,0.72);
  padding:4px 2px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition: color 150ms ease, border-color 150ms ease;
}
.sub-toggle svg{ width:11px; height:11px; transition: transform 150ms ease; }
.has-sub:hover .sub-toggle, .sub-toggle[aria-expanded="true"], .sub-toggle.is-current{ color: var(--paper); border-color: var(--emerald); }
.sub-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
.main-nav .sub{
  display:none; flex-direction:column; gap:2px;
  position:absolute; top:100%; left:-18px; margin-top:16px;
  min-width: 300px; padding:10px;
  background: var(--paper); border:1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 48px -18px rgba(21,17,38,0.5);
  list-style:none; z-index:60;
}
.main-nav .sub::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.has-sub:hover .sub, .has-sub.open .sub{ display:flex; }
.main-nav .sub a{
  display:block; color: var(--ink); border-bottom:none;
  padding:10px 14px; border-radius:10px; line-height:1.3;
}
.main-nav .sub a strong{ display:block; font-weight:600; font-size:0.93rem; }
.main-nav .sub a span{ display:block; font-size:0.8rem; color: var(--ink-soft); font-weight:400; margin-top:2px; }
.main-nav .sub a:hover{ background: var(--paper-dim); color: var(--ink); border-bottom:none; }
.main-nav .sub a[aria-current="page"]{ background:#E4F1EB; color: var(--ink); }
.main-nav .sub a[aria-current="page"] strong{ color: var(--emerald); }

@media (max-width: 780px){
  .main-nav{ overflow-y:auto; }
  .main-nav > ul{ align-items:stretch; }
  .has-sub{ width:100%; }
  .sub-toggle{ width:100%; justify-content:space-between; padding:4px 0; font-size:1rem; }
  .main-nav .sub{
    position:static; margin:8px 0 0; min-width:0; padding:4px 0 4px 14px;
    background:transparent; border:none; border-left:2px solid rgba(250,249,252,0.18); border-radius:0; box-shadow:none;
  }
  .main-nav .sub::before{ display:none; }
  .has-sub:hover .sub{ display:none; }
  .has-sub.open .sub{ display:flex; }
  .main-nav .sub a{ color: rgba(250,249,252,0.8); padding:8px 6px; }
  .main-nav .sub a span{ color: rgba(250,249,252,0.5); }
  .main-nav .sub a:hover{ background:transparent; color:var(--paper); }
  .main-nav .sub a[aria-current="page"]{ background:transparent; }
  .main-nav .sub a[aria-current="page"] strong{ color:#7fd1b2; }
}

/* ---------- v3: footer 5 col ---------- */
.footer-grid{ grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- v3: fit grid ---------- */
.fit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
.fit-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:30px 30px 26px; }
.fit-card.yes{ border-top:4px solid var(--emerald); }
.fit-card.no{ border-top:4px solid var(--line); background: var(--paper-dim); }
.fit-card h3{ font-size:1.15rem; margin-bottom:14px; }
.fit-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fit-card li{ position:relative; padding-left:30px; font-size:0.95rem; color: var(--ink-soft); }
.fit-card li::before{ content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background: var(--emerald) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }
.fit-card.no li::before{ background: var(--line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4459' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/11px no-repeat; }
@media (max-width: 760px){ .fit-grid{ grid-template-columns: 1fr; } }

/* ---------- v3: area chips, local strip, link cards ---------- */
.area-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.area-chips a, .area-chips span{
  display:inline-block; padding:8px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color: var(--ink);
  font-size:0.9rem; font-weight:500; text-decoration:none;
}
.area-chips a:hover{ border-color: var(--emerald); color: var(--emerald); }
.area-chips.on-dark a, .area-chips.on-dark span{ background: rgba(250,249,252,0.08); border-color: rgba(250,249,252,0.2); color: var(--paper); }
.local-strip{ background:#E4F1EB; border-top:1px solid #C6E2D6; border-bottom:1px solid #C6E2D6; padding:56px 0; }
.local-strip .wrap{ display:grid; grid-template-columns: 1fr 1.2fr; gap:48px; align-items:center; }
.local-strip h2{ font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom:0.4em; }
.local-strip p{ color: var(--ink-soft); margin-bottom:0; max-width:46ch; }
.local-strip .area-chips{ margin-bottom:16px; }
@media (max-width: 860px){ .local-strip .wrap{ grid-template-columns:1fr; gap:24px; } }

.area-panel{ border:1px solid var(--line); background: var(--paper-dim); padding:28px; border-radius: var(--radius-lg); }
.area-panel .pp-label{ font-family: var(--mono); font-weight:600; letter-spacing:0.02em; font-size:0.72rem; color: var(--purple); display:block; margin-bottom:12px; }
.area-panel .area-chips{ margin-bottom:20px; }
.area-panel .btn{ width:100%; justify-content:center; }
.area-panel p{ font-size:0.88rem; color: var(--ink-soft); }

.link-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.link-card{
  display:flex; flex-direction:column; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding:22px 24px; text-decoration:none; color: var(--ink);
  transition: border-color 150ms ease, transform 150ms ease;
}
.link-card:hover{ border-color: var(--emerald); transform: translateY(-2px); }
.link-card h3{ font-size:1.05rem; margin:0; }
.link-card p{ font-size:0.9rem; color: var(--ink-soft); margin:0; }
.link-card .go{ margin-top:auto; padding-top:8px; font-size:0.88rem; font-weight:600; color: var(--emerald); }
@media (max-width: 900px){ .link-cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .link-cards{ grid-template-columns: 1fr; } }

.area-notes{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.area-note{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--emerald); border-radius: var(--radius); padding:20px 22px; }
.area-note h3{ font-size:1.02rem; margin-bottom:6px; }
.area-note p{ font-size:0.9rem; color: var(--ink-soft); margin:0; }
@media (max-width: 900px){ .area-notes{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .area-notes{ grid-template-columns: 1fr; } }

/* ---------- v3: compare table ---------- */
.compare-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius-lg); background:#fff; }
.compare-table{ width:100%; border-collapse:collapse; min-width:560px; font-size:0.95rem; }
.compare-table th, .compare-table td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.compare-table thead th{ font-family: var(--serif); font-size:1.05rem; background: var(--paper-dim); }
.compare-table thead th.hc{ background:#E4F1EB; color: var(--emerald); }
.compare-table tbody th{ font-weight:600; color: var(--ink); width:20%; }
.compare-table td{ color: var(--ink-soft); }
.compare-table tr:last-child th, .compare-table tr:last-child td{ border-bottom:none; }

/* ---------- v4: enquiry form ---------- */
.enquiry-form{ display:flex; flex-direction:column; gap:16px; margin:18px 0 24px; }
.enquiry-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.88rem; font-weight:600; color: var(--ink); }
.enquiry-form input[type="text"], .enquiry-form input[type="email"], .enquiry-form select, .enquiry-form textarea{
  font: inherit; font-weight:400; font-size:0.95rem; color: var(--ink);
  padding: 12px 14px; border:1px solid var(--line); border-radius: 10px; background:#fff; width:100%;
}
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus{ outline:2px solid var(--emerald); outline-offset:1px; border-color: var(--emerald); }
.enquiry-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.enquiry-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.enquiry-form .consent{ flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; color: var(--ink-soft); }
.enquiry-form .consent input{ margin-top:4px; accent-color: var(--emerald); }
.enquiry-form .btn{ align-self:flex-start; }
@media (max-width: 640px){ .enquiry-form .field-row{ grid-template-columns:1fr; } }

/* ---------- v4: todo markers, legal ---------- */
.todo{ background:#FFF3B0; color:#5b4a00; padding:1px 6px; border-radius:4px; font-weight:600; }
p.todo{ display:inline-block; padding:8px 12px; margin-top:14px; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:18px; font-size:0.8rem; color: rgba(250,249,252,0.6); }
.footer-legal a{ color: rgba(250,249,252,0.75); text-decoration:none; }
.footer-legal a:hover{ color: var(--paper); }
.footer-legal .todo{ flex-basis:100%; }
.legal .narrow{ max-width: 760px; }
.legal h2{ font-size:1.25rem; margin:1.8em 0 0.5em; }
.legal p, .legal li{ color: var(--ink-soft); font-size:0.98rem; }
.legal ul{ padding-left:20px; }

/* ---------- v4: cookie banner ---------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80; max-width:760px; margin:0 auto;
  background: var(--purple-deep); color: var(--paper); border-radius:16px; padding:18px 22px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; box-shadow:0 20px 50px -12px rgba(21,17,38,0.6);
}
.cookie-banner p{ margin:0; font-size:0.88rem; flex:1 1 320px; color: rgba(250,249,252,0.85); }
.cookie-banner a{ color:#7ADBB5; }
.cookie-banner .cb-actions{ display:flex; gap:10px; }
.cookie-banner button{ font: inherit; font-weight:600; font-size:0.9rem; padding:10px 18px; border-radius:999px; cursor:pointer; border:1px solid rgba(250,249,252,0.35); background:transparent; color: var(--paper); }
.cookie-banner button.accept{ background: var(--emerald); border-color: var(--emerald); }

/* ---------- v4: link cards (two), waste calculator, where to start ---------- */
.link-cards.two{ grid-template-columns: 1fr 1fr; }
@media (max-width: 700px){ .link-cards.two{ grid-template-columns: 1fr; } }
.link-card .price{ font-family: var(--serif); font-size:1.15rem; color: var(--ink); margin:2px 0; }
.link-card .price small{ font-family: var(--sans); font-size:0.8rem; color: var(--ink-soft); font-weight:500; }

.calc{ display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:center; background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:36px; }
.calc h2{ font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.calc .sliders{ display:flex; flex-direction:column; gap:22px; margin-top:20px; }
.calc label{ display:flex; flex-direction:column; gap:8px; font-size:0.9rem; font-weight:600; }
.calc label span.val{ font-family: var(--serif); font-size:1.15rem; color: var(--purple); }
.calc input[type="range"]{ width:100%; accent-color: var(--emerald); }
.calc .result{ background:#E4F1EB; border-radius: var(--radius-lg); padding:28px; text-align:center; }
.calc .result .big{ font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--emerald); font-weight:700; display:block; line-height:1.1; }
.calc .result p{ font-size:0.88rem; color: var(--ink-soft); margin:10px 0 18px; }
.calc .note{ font-size:0.78rem; color: var(--ink-soft); margin-top:16px; }
@media (max-width: 860px){ .calc{ grid-template-columns:1fr; padding:26px; } }
[hidden]{ display:none !important; }

/* ---------- v5: location landing copy ---------- */
.copy-cols{ columns:2; column-gap:48px; max-width:none; }
.copy-cols p{ break-inside:avoid; color: var(--ink-soft); }
@media (max-width: 800px){ .copy-cols{ columns:1; } }