/* ════════════════════════════════════════════════════════════
   Service page component system
   ───────────────────────────────────────────────────────────
   Shared by every service page (Performance Marketing, Google Ads,
   Meta Ads, CRO, Tracking & Measurement, Marketing Automation & AI).
   Extracted from the original Performance Marketing page so new
   service/industry pages can be added without duplicating this block
   — link this file, reuse the .pm-* classes, done. Uses only tokens
   already defined in /site.css (--ink, --accent, --border, --shadow-*,
   --r-*), so it inherits the site's existing design system rather
   than introducing a new one.
   ════════════════════════════════════════════════════════════ */
body{cursor:auto}
.pm-wrap{max-width:1180px;margin:0 auto;padding:120px 5vw 0}
.crumbs{font-size:.8rem;color:var(--ink4);margin-bottom:1.6rem}
.crumbs ol{list-style:none;display:flex;gap:.45rem;flex-wrap:wrap;margin:0;padding:0}
.crumbs li{display:flex;gap:.45rem;align-items:center}
.crumbs li+li::before{content:'/';opacity:.45}
.crumbs a{color:var(--ink3);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.pm-h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.06;color:var(--ink);margin:.6rem 0 1.1rem}
.pm-h1 em{font-style:normal;color:var(--accent)}
.pm-lede{font-size:1.06rem;line-height:1.75;color:var(--ink3);max-width:62ch;margin:0 0 2rem}
.pm-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:3.5rem}
.pm-sec{padding:0 0 3.25rem}
.pm-sec h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.45rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0 0 1rem;line-height:1.15}
.pm-sec h3{font-family:'Instrument Sans',sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:1.4rem 0 .5rem}
.pm-sec p{font-size:1rem;line-height:1.8;color:var(--ink2);margin:0 0 1.05rem;max-width:68ch}
.pm-sec ul{margin:0 0 1.15rem 1.1rem;padding:0;max-width:68ch}
.pm-sec li{font-size:1rem;line-height:1.75;color:var(--ink2);margin-bottom:.5rem}
.pm-sec a{color:var(--accent);font-weight:600;text-decoration:none}
.pm-sec a:hover{text-decoration:underline}
.pm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:.5rem}
.pm-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.6rem;text-decoration:none;display:block;transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s}
@media(hover:hover){.pm-card:hover{transform:translateY(-3px);border-color:rgba(255,92,40,.35);box-shadow:var(--shadow-md)}}
.pm-card-c{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink4);margin-bottom:.5rem}
.pm-card-n{font-family:'Instrument Sans',sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:.7rem}
.pm-card-v{font-family:'Bricolage Grotesque',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1}
.pm-card-l{font-size:.78rem;color:var(--ink3);margin-top:.3rem}
.pm-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.5rem;margin-top:.5rem}
.pm-step-n{font-family:'Instrument Sans',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--accent);margin-bottom:.4rem}
.pm-step-t{font-family:'Instrument Sans',sans-serif;font-size:1.02rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:.4rem}
.pm-step p{font-size:.93rem;line-height:1.7;color:var(--ink3);margin:0}
.pm-faq{border-bottom:1px solid var(--border);padding:1.1rem 0}
.pm-faq summary{font-family:'Instrument Sans',sans-serif;font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.pm-faq summary::-webkit-details-marker{display:none}
.pm-faq summary::after{content:'+';color:var(--accent);font-size:1.2rem;font-weight:700;flex-shrink:0;transition:transform .2s}
.pm-faq[open] summary::after{content:'\2212'}
.pm-faq p{font-size:.96rem;line-height:1.75;color:var(--ink3);margin:.85rem 0 0;max-width:68ch}
.pm-cta{background:var(--cream2);border:1px solid var(--border);border-radius:var(--r-lg);padding:2.25rem;margin:1rem 0 5rem}
.pm-cta h2{margin-bottom:.6rem}
.pm-cta p{margin-bottom:1.4rem}
@media(max-width:820px){.pm-grid,.pm-steps{grid-template-columns:1fr}}
@media(max-width:560px){.pm-actions .btn-primary,.pm-actions .btn-secondary{width:100%;justify-content:center}}