/* Distill Works design system, SERVICE pages (web-design, local-seo, ppc, automation).
 * Loaded on service pages alongside ds-core. Scoped to body.page-service.
 * Editorial-spacious: hairline structure, generous air, evergreen accent.
 */

/* generic service section rhythm */
body.page-service section.svc-sec{padding:78px 0; border-top:1px solid var(--hair);}
body.page-service section.svc-sec > .wrap > h2{font-size:clamp(24px,2.9vw,33px); line-height:1.18; max-width:30ch; margin-bottom:12px;}
body.page-service .section-subtitle,
body.page-service .wyg-subtitle{font-size:16px; color:var(--muted); max-width:62ch; margin-bottom:40px;}

/* hero (split, matches homepage Version C: full-width H1, then lede left + CTA/stats right) */
body.page-service .hero{padding:46px 0 64px;}
body.page-service .hero h1{font-size:clamp(36px,4.5vw,53px); line-height:1.06; max-width:26ch; margin:0 0 32px;}
body.page-service .hero .lower{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:start;}
body.page-service .hero .lede{font-size:18px; color:var(--ink-soft); margin:0;}
body.page-service .hero .right .hero-cta{display:flex; gap:24px; align-items:center; margin-bottom:30px; flex-wrap:wrap;}
body.page-service .hero .stats{display:flex; flex-direction:column; gap:18px; padding-left:28px; border-left:1px solid var(--hair);}
body.page-service .hero .stat .num{display:block; font-family:'Spectral',serif; font-size:24px; color:var(--ink); line-height:1.1;}
body.page-service .hero .stat .lbl{display:block; font-size:13px; color:var(--muted); margin-top:3px;}
/* hero trust quote (mirrors the homepage founder pull-quote) */
body.page-service .hero .qt{padding-left:28px; border-left:1px solid var(--hair);}
body.page-service .hero .qt blockquote{font-family:'Spectral',serif; font-style:italic; font-weight:500; font-size:21px; line-height:1.34; margin:0 0 14px;}
body.page-service .hero .qt blockquote::before{content:"\201C"; color:var(--green); font-size:1.4em; line-height:0; vertical-align:-.15em; margin-right:.04em;}
body.page-service .hero .qt cite{font-style:normal; font-size:13px; letter-spacing:.04em; color:var(--muted);}

/* comparison (good vs bad) */
body.page-service .compare{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
body.page-service .compare .cmp{border:1px solid var(--hair); border-radius:6px; padding:28px 26px; background:var(--card);}
body.page-service .compare .cmp.bad{background:transparent;}
body.page-service .compare h4{font-size:17px; margin-bottom:16px;}
body.page-service .compare ul{list-style:none; margin:0; padding:0;}
body.page-service .compare li{font-size:15px; color:var(--ink-soft); padding-left:24px; position:relative; margin-bottom:10px; line-height:1.45;}
body.page-service .compare .good li::before{content:"\2713"; position:absolute; left:0; color:var(--green); font-weight:600;}
body.page-service .compare .bad li::before{content:"\00d7"; position:absolute; left:0; color:var(--muted); font-weight:600;}

/* feature grid (what you get) */
body.page-service .feat{display:grid; grid-template-columns:repeat(4,1fr); gap:34px 38px;}
body.page-service .feat .card h4{font-size:16px; margin-bottom:8px;}
body.page-service .feat .card p{font-size:14.5px; color:var(--ink-soft); margin:0;}

/* pricing tiers */
body.page-service .tiers{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:860px;}
body.page-service .tier{border:1px solid var(--hair); border-radius:8px; padding:38px 32px; background:var(--card); position:relative; display:flex; flex-direction:column;}
body.page-service .tier .b1{margin-top:auto; align-self:flex-start;}
body.page-service .tier.featured{border-color:var(--green);}
body.page-service .tier .badge{display:inline-block; font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:14px;}
body.page-service .tier.featured .badge{color:var(--green);}
body.page-service .tier .price{font-family:'Spectral',serif; font-size:34px; line-height:1; color:var(--ink);}
body.page-service .tier .psub{font-size:13.5px; color:var(--muted); margin:6px 0 20px;}
body.page-service .tier ul{list-style:none; margin:24px 0 26px; padding:24px 0 0; border-top:1px solid var(--hair);}
body.page-service .tier li{font-size:14.5px; color:var(--ink-soft); padding-left:22px; position:relative; margin-bottom:12px; line-height:1.5;}
body.page-service .tier li::before{content:"\2713"; position:absolute; left:0; color:var(--green);}
body.page-service .tier .pextra{font-size:13px; color:var(--muted); margin:0 0 18px;}
body.page-service .roi{background:var(--paper2); border:1px solid var(--hair); border-radius:6px; padding:22px 26px; margin-top:30px; max-width:860px;}
body.page-service .roi p{font-size:15px; color:var(--ink-soft); margin:0;}
body.page-service .roi strong{color:var(--ink);}
body.page-service .pricing-note{font-size:14px; color:var(--muted); margin-top:18px;}

/* industry tags */
body.page-service .tags{display:flex; flex-wrap:wrap; gap:10px;}
body.page-service .tag{border:1px solid var(--hair); border-radius:3px; padding:7px 13px; font-size:13.5px; color:var(--ink-soft); text-decoration:none;}
body.page-service .tag:hover{border-color:var(--green); color:var(--green);}

/* cross-sell band */
body.page-service .upsell{background:var(--paper2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:64px 0; text-align:center;}
body.page-service .upsell h2{font-size:clamp(23px,2.7vw,30px); max-width:24ch; margin:0 auto 14px;}
body.page-service .upsell p{font-size:16.5px; color:var(--ink-soft); max-width:64ch; margin:0 auto 20px;}
body.page-service .upsell .lnk{font-size:15px; font-weight:600;}

/* risk-reversal */
body.page-service .risk{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:40px;}
body.page-service .risk h3{font-size:19px; margin-bottom:8px;}
body.page-service .risk p{font-size:15px; color:var(--ink-soft); margin:0;}

/* numbered steps (how it works) */
body.page-service .how-sub{font-size:15px; color:var(--muted); margin-bottom:40px;}
body.page-service .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
body.page-service .step .n{font-family:'Spectral',serif; font-size:22px; color:var(--green); margin-bottom:10px;}
body.page-service .step h3{font-size:19px; margin-bottom:10px;}
body.page-service .step p{font-size:15px; color:var(--ink-soft); margin:0;}

/* centered band (deep dive) */
body.page-service .band{background:var(--paper2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:60px 0; text-align:center;}
body.page-service .band .wrap{max-width:780px;}
body.page-service .band h2{font-size:clamp(22px,2.6vw,30px); margin-bottom:14px;}
body.page-service .band p{font-size:16.5px; color:var(--ink-soft); margin:0;}

/* keyword / industry examples */
body.page-service .ex-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
body.page-service .ex-card{border:1px solid var(--hair); border-radius:6px; padding:22px 24px; background:var(--card);}
body.page-service .ex-card h4{font-size:16px; color:var(--green); margin-bottom:12px;}
body.page-service .ex-card ul{list-style:none; margin:0; padding:0;}
body.page-service .ex-card li{font-size:14px; color:var(--ink-soft); margin-bottom:7px;}
body.page-service .ex-foot{text-align:center; margin-top:28px; font-size:15px; color:var(--muted);}

/* live dashboard frame */
body.page-service .dashwrap{max-width:980px; margin:0 auto;}
body.page-service .dashframe{border:1px solid var(--hair); border-radius:8px; overflow:hidden; background:var(--card); margin-top:8px;}
body.page-service .dashbar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--hair); background:var(--paper2);}
body.page-service .dashbar i{width:8px; height:8px; border-radius:50%; background:var(--hair); display:block;}
body.page-service .dashbar .t{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); margin-left:8px;}
body.page-service .dashframe iframe{display:block; width:100%; height:560px; border:0; background:var(--paper);}
body.page-service .dash-note{font-size:13px; color:var(--muted); margin-top:12px; text-align:center;}
body.page-service .dash-links{display:flex; gap:26px; justify-content:center; margin-top:18px; font-size:14.5px; font-weight:600; flex-wrap:wrap;}

/* what-we-build cards (no icon-grid cliche: heading + prose + mono example) */
body.page-service .build-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
body.page-service .bcard h4{font-size:18px; margin-bottom:10px;}
body.page-service .bcard p{font-size:15px; color:var(--ink-soft); margin-bottom:12px;}
body.page-service .bcard .eg{display:block; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); line-height:1.55;}

/* automation contact extras */
body.page-service .contact .proof{border-left:1px solid var(--hair); padding-left:18px; font-size:15px; color:var(--ink-soft); margin-top:20px;}
body.page-service .char-counter{display:block; text-align:right; font-size:12px; color:var(--muted); margin-top:6px;}
body.page-service .form-trust{font-size:13px; color:var(--muted); text-align:center; margin-top:14px;}

/* single centered price box (automation) */
body.page-service .price-box{max-width:560px; margin:0 auto; border:1px solid var(--hair); border-radius:10px; padding:44px 40px; background:var(--card); text-align:center;}
body.page-service .price-box h2{margin-bottom:6px;}
body.page-service .price-range{font-family:'Spectral',serif; font-size:clamp(34px,5vw,46px); color:var(--green); line-height:1; margin:8px 0;}
body.page-service .price-box .pricing-note{font-size:14.5px; color:var(--muted); margin:0 0 24px;}
body.page-service .pricing-includes{list-style:none; margin:0 auto 28px; padding:24px 0 0; border-top:1px solid var(--hair); text-align:left; max-width:340px;}
body.page-service .pricing-includes li{font-size:15px; color:var(--ink-soft); padding-left:24px; position:relative; margin-bottom:11px;}
body.page-service .pricing-includes li::before{content:"\2713"; position:absolute; left:0; color:var(--green);}

/* body prose (problem statements, etc.) */
body.page-service .prose{max-width:80ch;}
body.page-service .prose p{font-size:16px; color:var(--ink-soft); margin-bottom:16px;}
body.page-service .prose p:last-child{margin-bottom:0;}

/* before/after results table */
body.page-service .restable-wrap{overflow-x:auto; max-width:760px;}
body.page-service .restable{width:100%; border-collapse:collapse; font-size:14.5px;}
body.page-service .restable th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; padding:12px 22px 12px 0; border-bottom:1px solid var(--hair);}
body.page-service .restable td{padding:13px 22px 13px 0; border-bottom:1px solid var(--hair); color:var(--ink-soft);}
body.page-service .restable td strong{color:var(--green);}
body.page-service .callout{background:var(--paper2); border:1px solid var(--hair); border-radius:6px; padding:18px 24px; margin-top:26px; max-width:680px;}
body.page-service .callout p{font-size:15.5px; color:var(--ink); margin:0;}

/* richer cross-sell band */
body.page-service .xsell{background:var(--paper2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:64px 0;}
body.page-service .xsell .wrap{max-width:820px;}
body.page-service .xsell h2{font-size:clamp(23px,2.7vw,30px); margin-bottom:16px; max-width:28ch;}
body.page-service .xsell p{font-size:16px; color:var(--ink-soft); margin-bottom:16px;}
body.page-service .xsell .links{display:flex; gap:28px; margin-top:8px; flex-wrap:wrap; font-size:15px; font-weight:600;}

/* 3-tier pricing */
body.page-service .pricing-sub{font-size:16px; color:var(--muted); max-width:66ch; margin-bottom:40px;}
body.page-service .tiers-3{grid-template-columns:repeat(3,1fr); max-width:none;}
body.page-service .tier .ptag{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--green); margin-bottom:8px;}
body.page-service .tier .tagline{font-size:14px; color:var(--muted); margin:4px 0 16px;}
body.page-service .tier .price .per{font-family:'Schibsted Grotesk',sans-serif; font-size:13.5px; color:var(--muted); font-weight:400; margin-left:6px;}
body.page-service .tier .pricing-features{list-style:none; margin:24px 0 26px; padding:24px 0 0; border-top:1px solid var(--hair);}
body.page-service .tier .pricing-features li{font-size:14.5px; color:var(--ink-soft); margin-bottom:12px; line-height:1.5;}
body.page-service .tier .pricing-features li::before{content:none;}
body.page-service .check{color:var(--green); font-weight:600; margin-right:7px;}
body.page-service .x-mark{color:var(--muted); font-weight:600; margin-right:7px;}

@media (max-width:880px){
  body.page-service .compare,
  body.page-service .tiers,
  body.page-service .steps,
  body.page-service .ex-grid,
  body.page-service .tiers-3{grid-template-columns:1fr;}
  body.page-service .feat{grid-template-columns:1fr 1fr; gap:28px;}
  body.page-service .build-grid{grid-template-columns:1fr; gap:28px;}
  body.page-service .dashframe iframe{height:420px;}
  body.page-service .hero .lower{grid-template-columns:1fr; gap:30px;}
  body.page-service .hero .stats{border-left:0; padding-left:0; flex-direction:row; gap:32px; flex-wrap:wrap;}
  body.page-service .hero .qt{border-left:0; border-top:1px solid var(--hair); padding-left:0; padding-top:24px;}
}