/* ==========================================================================
   CHALK — service×city landing pages (+ blog posts)
   Shared by all /[service]-[city] pages. Depends on styles.css.
   ========================================================================== */

/* ---------- hero ---------- */
.svc-hero{background:var(--black);padding:clamp(9rem,15vw,12rem) clamp(1.5rem,6vw,3.5rem) clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.svc-hero .eyebrow{display:block}
.svc-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.92;max-width:18ch;margin-bottom:1.5rem}
.svc-hero h1 em{color:var(--ink)}
.svc-hero .lede{font-family:var(--font-ui);color:var(--ink-60);max-width:62ch;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.65;margin-bottom:2.25rem}
.svc-hero .lede strong{color:var(--ink)}
.svc-hero__cta{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- prose sections ---------- */
.svc-section{background:var(--black);padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,6vw,3.5rem)}
.svc-section--raised{background:var(--black-raised)}
.svc-narrow{max-width:820px}
.svc-section h2{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:1.25rem}
.svc-section h2 em{color:var(--ink)}
.svc-section h3{font-size:clamp(1.15rem,1.8vw,1.5rem);margin:2rem 0 .75rem;color:var(--ink)}
.svc-section p,.svc-section li{font-family:var(--font-ui);color:var(--ink-60);font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.7;margin-bottom:1.1rem}
.svc-section p strong,.svc-section li strong{color:var(--ink)}
.svc-section ul{list-style:none;padding:0;margin:0 0 1.25rem}
.svc-section ul li{padding-left:1.5rem;position:relative}
.svc-section ul li::before{content:'✓';position:absolute;left:0;color:var(--purple);font-weight:700}
.svc-section a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.svc-section a:not(.btn):hover{color:var(--amber)}

/* ---------- case study feature ---------- */
.svc-case{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,3.5vw,3.5rem);align-items:center;
  background:var(--surface-card);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.75rem);margin:2.5rem 0}
@media (max-width:860px){.svc-case{grid-template-columns:1fr}}
.svc-case__label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block;margin-bottom:.75rem}
.svc-case h3{margin-top:0;color:var(--ink);font-size:clamp(1.5rem,2.6vw,2.1rem)}
.svc-case__media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;background:var(--card-dark);cursor:pointer}
.svc-case__media video{width:100%;height:100%;object-fit:cover}
.svc-case__stats{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1.1rem 0}
.svc-case__stats span{font-family:var(--font-display);font-weight:700;font-size:.85rem;text-transform:uppercase;color:var(--ink)}

/* ---------- steps strip (5-step condensed) ---------- */
.svc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.75rem,1.5vw,1.25rem);margin:2rem 0}
@media (max-width:900px){.svc-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.svc-steps{grid-template-columns:1fr}}
.svc-step{background:var(--surface-card);border-radius:var(--r-card);padding:1.25rem}
.svc-step b{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.05em;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:.4rem}
.svc-step span{font-family:var(--font-ui);color:var(--ink-60);font-size:.88rem;line-height:1.5;display:block}

/* ---------- FAQ ---------- */
.svc-faq{max-width:820px}
.svc-faq details{border-bottom:1px solid var(--hairline);padding:1.1rem 0}
.svc-faq summary{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq summary::after{content:'+';font-weight:400;font-size:1.5rem;color:var(--purple);flex:none;transition:transform .25s var(--ease-out)}
.svc-faq details[open] summary::after{transform:rotate(45deg)}
.svc-faq details p{margin:.9rem 0 0;font-family:var(--font-ui);color:var(--ink-60);line-height:1.65;max-width:64ch}

/* ---------- related work strip + siblings ---------- */
.svc-related{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.5vw,1.25rem);margin-top:1.5rem}
@media (max-width:860px){.svc-related{grid-template-columns:1fr}}
.svc-sib{display:block;background:var(--surface-card);border-radius:var(--r-card);padding:1.4rem 1.5rem;transition:transform .3s var(--ease-out),background .3s}
.svc-sib:hover{transform:translateY(-3px);background:#dad7d445}
.svc-sib b{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1rem;color:var(--ink);margin-bottom:.3rem}
.svc-sib span{font-family:var(--font-ui);color:var(--ink-60);font-size:.88rem;line-height:1.5}

/* ---------- bottom CTA ---------- */
.svc-cta{background:var(--black-raised);text-align:center;padding:clamp(4rem,8vw,6rem) clamp(1.5rem,6vw,3.5rem)}
.svc-cta h2{font-size:clamp(1.8rem,3.6vw,2.8rem);color:#fff;max-width:22ch;margin:0 auto 1rem}
.svc-cta p{font-family:var(--font-ui);color:var(--ink-60);max-width:56ch;margin:0 auto 2rem}
.svc-cta .btn{margin:0 .5rem .75rem}

/* ---------- blog article ---------- */
.post-body{max-width:780px}
.post-body h2{margin-top:2.5rem}
.post-meta{font-family:var(--font-ui);color:var(--ink-60);font-size:.9rem;margin-bottom:2rem}
.post-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-family:var(--font-ui);font-size:.95rem}
.post-body th,.post-body td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--hairline);color:var(--ink-60)}
.post-body th{color:var(--ink);font-family:var(--font-display);text-transform:uppercase;font-size:.78rem;letter-spacing:.05em}