/* Service pages and the services hub: layout only. Components and tokens come from /shared/ui.css. */

/* hero: the service headline is a full sentence, so it gets a wider measure than the Home display line */
.svc-hero h1{font-size:clamp(2.2rem,3.7vw,3.4rem);max-width:20ch}
.svc-hero .byline a{text-decoration:none}.svc-hero .byline a:hover b{color:var(--white);text-decoration:underline}
.svc-hero .page-hero-art{min-height:100%}

/* who it is for: a checked list, then the key facts */
.fit{list-style:none;margin:0;padding:0;border-top:4px solid var(--ink)}
.fit li{position:relative;padding:18px 0 18px 34px;border-bottom:1px solid var(--line);font-weight:600;line-height:1.5}
.fit li::before{content:"";position:absolute;left:4px;top:24px;width:12px;height:7px;border-left:2px solid var(--violet);border-bottom:2px solid var(--violet);transform:rotate(-45deg)}
.facts-title{font-size:var(--t-h3);margin:clamp(40px,5vw,56px) 0 16px}

/* how it works: the time each step takes, above its heading */
.steps .when{margin:0 0 6px;color:var(--violet);font-size:var(--t-small);font-weight:700}

/* what we do differently: the argument on an onyx band */
.insight{max-width:64ch}
.insight p{color:var(--on-dark-2);font-size:1.08rem;line-height:1.75}
.insight p+p{margin-top:1.1em}
.insight strong{color:var(--white)}
.insight a{color:var(--amethyst)}

/* comparison table at full width */
#compare .data{min-width:640px}
#compare .data td{color:var(--ink)}

/* price: the drivers, then the action beside the proof */
.price-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,72px);align-items:center;margin-top:clamp(40px,5vw,56px)}
.svc-proof{background:var(--onyx);color:var(--on-dark);border-radius:var(--radius);padding:clamp(22px,3vw,30px)}
.svc-proof h3{font-size:1.25rem;letter-spacing:-.02em;line-height:1.25}
.svc-proof p{color:var(--on-dark-2);font-size:.95rem;margin:8px 0 16px}
.svc-proof .link{color:var(--amethyst)}.svc-proof .link:hover{color:var(--white)}

/* questions: sources and related services under the list */
.svc-notes{margin-top:28px;display:grid;gap:12px}
.svc-notes .also{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;color:var(--ink-2);font-size:.95rem}

/* hub: each service tile leads with its illustration */
.svc-tiles{row-gap:56px}
.svc-tile-art{display:grid;place-items:center;background:var(--onyx-2);border-radius:var(--radius);overflow:hidden;padding:22px 8px;margin-bottom:22px;height:230px}
.svc-tile-art .service-art{width:380px;max-width:none;height:210px;margin:0;zoom:.92}
.svc-tiles h3{font-size:var(--t-h3)}
.svc-tiles .tags{margin-top:16px}
.svc-tiles .more{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px}
.svc-ask{color:var(--ink-2);font-weight:600;font-size:.95rem}
.svc-ask:hover{color:var(--violet)}

@media (max-width:1080px){
  .svc-hero .page-hero-art{min-height:0}
  .svc-hero h1{max-width:24ch}
  .price-foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .svc-tile-art{height:auto}
  .svc-tile-art .service-art{zoom:.86}
}