/* ════════════════════════════════════════════════════════════
   Service-page components, layered on top of the locked homepage kit
   (kit-tvf styles + extra.css). Adds: breadcrumb, AEO answer block,
   "what's included" grid, a nationwide band, and a sticky mobile
   call/text bar. Everything else reuses the homepage components
   (hero-grid + form, rv-card, aip-card, proc-grid, faq, cta-band,
   ind-chips, section-eyebrow/title/body). 80K tokens (Cormorant +
   Switzer, navy/pink/off-white).
   ════════════════════════════════════════════════════════════ */

/* ── Breadcrumb (in the navy hero) ──────────────────────────── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-family:var(--sans);font-size:12.5px;font-weight:500;}
.crumb a{color:rgba(251,250,251,0.6);text-decoration:none;transition:color .2s;}
.crumb a:hover{color:var(--pink-light);}
.crumb span{color:var(--pink-light);}
.crumb .sep{color:rgba(251,250,251,0.3);}

/* ── AEO answer block (direct-answer card, speakable) ───────── */
.answer-wrap{max-width:880px;margin:0 auto;}
.answer-card{background:#fff;border:1px solid var(--border);border-left:4px solid var(--pink);border-radius:16px;padding:34px 36px;box-shadow:0 18px 44px rgba(19,34,72,0.07);}
.answer-q{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:14px;}
.answer-a{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--navy);line-height:1.4;}
.answer-a strong{font-weight:700;}
.answer-meta{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);font-size:14.5px;color:#42506b;line-height:1.65;}

/* ── "What's included" / deliverables grid ──────────────────── */
.incl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;}
.incl-item{display:flex;gap:13px;align-items:flex-start;}
.incl-item .tick{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--pink-pale);display:flex;align-items:center;justify-content:center;margin-top:2px;}
.incl-item .tick svg{width:12px;height:12px;stroke:var(--pink);fill:none;stroke-width:3;}
.incl-item-t{font-family:var(--sans);font-size:15.5px;font-weight:700;color:var(--navy);}
.incl-item-d{font-size:14px;color:#42506b;line-height:1.55;margin-top:2px;}
.sec--navy .incl-item-t{color:var(--off-white);}
.sec--navy .incl-item-d{color:rgba(251,250,251,0.74);}
.sec--navy .incl-item .tick{background:rgba(200,2,110,0.18);}
.sec--navy .incl-item .tick svg{stroke:var(--pink-light);}

/* ── Pain/symptom list (problem → solution) ─────────────────── */
.symp-list{list-style:none;display:flex;flex-direction:column;gap:14px;max-width:760px;}
.symp-list li{position:relative;padding-left:34px;font-size:16px;color:#3a4159;line-height:1.55;}
.symp-list li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--pink-pale);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/11px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/11px no-repeat;}

/* ── Problem / Solution (two balanced columns) ──────────────── */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
.ps-card{border-radius:18px;padding:38px 36px;display:flex;flex-direction:column;}
.ps-card--problem{background:#fff;border:1px solid var(--border);box-shadow:0 14px 36px rgba(19,34,72,0.06);}
.ps-card--solution{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-mid) 100%);border:1px solid rgba(255,255,255,0.10);box-shadow:0 18px 44px rgba(11,22,48,0.18);}
.ps-label{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;}
.ps-card--problem .ps-label{color:var(--slate);}
.ps-card--solution .ps-label{color:var(--pink-light);}
.ps-title{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.14;margin-bottom:8px;}
.ps-card--problem .ps-title{color:var(--navy);}
.ps-card--problem .ps-title em{color:var(--pink);font-style:italic;}
.ps-card--solution .ps-title{color:var(--off-white);}
.ps-card--solution .ps-title em{color:var(--pink-light);font-style:italic;}
.ps-sub{font-size:14.5px;line-height:1.6;margin-bottom:22px;}
.ps-card--problem .ps-sub{color:#42506b;}
.ps-card--solution .ps-sub{color:rgba(251,250,251,0.78);}
.ps-list{list-style:none;display:flex;flex-direction:column;gap:15px;margin-top:auto;}
.ps-list li{position:relative;padding-left:33px;font-size:15px;line-height:1.5;}
.ps-card--problem .ps-list li{color:#3a4159;}
.ps-card--solution .ps-list li{color:rgba(251,250,251,0.86);}
.ps-list li .ic{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.ps-list li .ic svg{width:11px;height:11px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.ps-card--problem .ps-list li .ic{background:#fbe0ec;}
.ps-card--problem .ps-list li .ic svg{stroke:var(--pink);}
.ps-card--solution .ps-list li .ic{background:rgba(220,95,163,0.22);}
.ps-card--solution .ps-list li .ic svg{stroke:var(--pink-light);}
@media(max-width:768px){.ps-grid{grid-template-columns:1fr;}.ps-card{padding:30px 26px;}}

/* ── Nationwide band ────────────────────────────────────────── */
.nation{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;background:linear-gradient(120deg,var(--navy),var(--navy-mid));border-radius:22px;padding:42px 46px;position:relative;overflow:hidden;}
.nation h2{font-family:var(--serif);font-size:clamp(26px,3vw,34px);font-weight:700;color:var(--off-white);line-height:1.12;}
.nation h2 em{font-style:italic;color:var(--pink-light);}
.nation p{font-size:15.5px;color:rgba(251,250,251,0.8);margin-top:8px;max-width:560px;line-height:1.6;}

/* ── Featured single case study (e.g. FIS on Local SEO) ─────── */
.feat-cs{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-mid) 100%);border:1px solid rgba(255,255,255,0.10);border-radius:22px;padding:46px 48px;display:grid;grid-template-columns:1.25fr 1fr;gap:42px;align-items:center;box-shadow:0 22px 56px rgba(11,22,48,0.2);}
.feat-cs-tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--pink-light);margin-bottom:13px;}
.feat-cs h3{font-family:var(--serif);font-size:clamp(28px,3.2vw,38px);font-weight:700;color:var(--off-white);line-height:1.08;margin-bottom:16px;}
.feat-cs h3 em{font-style:italic;color:var(--pink-light);}
.feat-cs-body{font-size:15.5px;color:rgba(251,250,251,0.82);line-height:1.62;margin-bottom:20px;}
.feat-cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.feat-cs-chips span{font-size:12px;font-weight:600;color:rgba(251,250,251,0.9);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);border-radius:999px;padding:5px 12px;}
.feat-cs-link{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--pink-light);text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
.feat-cs-link:hover{text-decoration:underline;}
.feat-cs-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:16px;padding:30px 28px;}
.feat-cs-stat .v{font-family:var(--serif);font-style:italic;font-size:32px;font-weight:600;color:var(--pink-light);line-height:1;}
.feat-cs-stat .l{font-size:12.5px;color:rgba(251,250,251,0.66);margin-top:7px;line-height:1.35;}
@media(max-width:880px){.feat-cs{grid-template-columns:1fr;padding:34px 28px;gap:28px;}}

/* ── Pricing (GBP packages) ─────────────────────────────────── */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.price-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:36px 32px;display:flex;flex-direction:column;position:relative;transition:transform .35s,box-shadow .35s,border-color .35s;}
.price-card:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(19,34,72,0.10);border-color:var(--border-strong);}
.price-card--rec{border:2px solid var(--pink);box-shadow:0 24px 56px rgba(200,2,110,0.12);}
.price-rec{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 16px;border-radius:999px;white-space:nowrap;}
.price-name{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.price-val{margin:2px 0 4px;display:flex;align-items:baseline;gap:5px;}
.price-val .amt{font-family:var(--sans);font-size:36px;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.price-val .per{font-size:15px;color:var(--slate);font-weight:600;}
.price-sub{font-size:14px;color:#42506b;line-height:1.5;margin:8px 0 20px;padding-bottom:20px;border-bottom:1px solid var(--border);}
.price-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;}
.price-list li{position:relative;padding-left:27px;font-size:14px;color:#3a4159;line-height:1.45;}
.price-list li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--pink-pale);}
.price-list li::after{content:"";position:absolute;left:3px;top:5px;width:11px;height:11px;background:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8026e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");}
.price-cta{margin-top:auto;}
.price-onetime{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;}
.price-ot{background:var(--off-white);border:1px solid var(--border);border-radius:14px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
.price-ot-name{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--navy);}
.price-ot-sub{font-size:13px;color:var(--slate);margin-top:2px;}
.price-ot-val{font-family:var(--sans);font-size:21px;font-weight:800;color:var(--pink);white-space:nowrap;}
.price-note{text-align:center;margin-top:26px;font-size:14px;color:var(--slate);}
@media(max-width:880px){.price-grid{grid-template-columns:1fr;}.price-onetime{grid-template-columns:1fr;}}

/* ── Responsive grid modifiers (use these instead of inline grid-template-columns,
      which has higher specificity than the mobile collapse media query) ── */
.proc-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.price-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:860px;margin:0 auto;}
@media(max-width:768px){.proc-grid.cols-3{grid-template-columns:1fr;}}
@media(max-width:880px){.price-grid.cols-2{grid-template-columns:1fr;}}

/* ── Sticky mobile call/text bar (CRO) ──────────────────────── */
.sticky-cta{display:none;}
@media(max-width:768px){
  .sticky-cta{display:grid;grid-template-columns:1fr 1fr;gap:0;position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:var(--navy-deep);border-top:1px solid rgba(255,255,255,0.12);box-shadow:0 -6px 24px rgba(0,0,0,0.3);}
  .sticky-cta a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;font-family:var(--sans);font-size:15px;font-weight:700;text-decoration:none;}
  .sticky-cta a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;}
  .sticky-cta .sc-call{background:var(--pink);color:#fff;}
  .sticky-cta .sc-book{background:transparent;color:var(--off-white);border-left:1px solid rgba(255,255,255,0.12);}
  body{padding-bottom:54px;}
}

/* ── Service hero proof pills (under H1) ────────────────────── */
.svc-pills{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 4px;}
.svc-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:rgba(251,250,251,0.9);background:rgba(245,239,226,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:999px;padding:8px 14px;}
.svc-pill svg{width:13px;height:13px;stroke:var(--pink-light);fill:none;stroke-width:2.4;}

@media(max-width:768px){
  .incl-grid{grid-template-columns:1fr;}
  .nation{padding:32px 26px;}
  .answer-card{padding:28px 24px;}
  .answer-a{font-size:21px;}
}