/* Public service landing pages (/services/:slug for visitors and crawlers).
   Builds on directory.css + directory-country.css; only the extra blocks live here. */
.breadcrumb{width:var(--container);margin:18px auto 0;font:500 .6rem "DM Mono",monospace;color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.breadcrumb li+li:before{content:"/";margin-right:8px}
.breadcrumb a:hover{color:var(--blue)}

.service-hero{padding-bottom:60px}
.service-hero .masthead-grid{padding:60px 0 40px}
.service-hero h1{font-size:clamp(3.4rem,7vw,7.4rem);line-height:.84}
.service-hero-side p{max-width:360px}
.service-hero-icon{width:64px;height:64px;border-radius:16px;background:#fff;border:1px solid var(--line);margin:0}
.service-cta{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-left:31%}
.text-link{font-size:.82rem;font-weight:700;border-bottom:1px solid var(--ink);padding:10px 0}
.text-link:hover{color:var(--blue);border-color:var(--blue)}
.service-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:60px 0 0;border-top:2px solid var(--ink)}
.service-facts div{padding:22px 18px 0 0;border-right:1px solid var(--line)}
.service-facts div:last-child{border-right:0}
.service-facts div+div{padding-left:18px}
.service-facts dt{font:500 .58rem "DM Mono",monospace;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.service-facts dd{margin:10px 0 0;font:600 clamp(1.6rem,3vw,2.6rem) "Newsreader",serif;letter-spacing:-.04em}

#countries.catalog{padding-top:70px}
.country-list .country-name{grid-template-columns:42px 1fr}
.row-cta{text-align:right;padding-right:18px}
.row-cta a{color:var(--blue);font-size:.75rem;font-weight:700;white-space:nowrap}
.row-cta a:hover{text-decoration:underline}

.service-steps,.service-faq,.related-services{width:var(--container);margin:auto;padding:110px 0;display:grid;grid-template-columns:1fr 2fr;gap:7%}
.service-steps h2,.service-faq h2,.related-services h2{font-size:clamp(2.8rem,5vw,5rem);line-height:.88;margin-top:22px}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:30px 0;border-bottom:1px solid var(--line)}
.steps li>span{font:500 .7rem "DM Mono",monospace;color:var(--blue)}
.steps h3{font-family:"Manrope",sans-serif;font-size:1.05rem;letter-spacing:0;margin:0 0 8px}
.steps p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.65;max-width:560px}

.service-faq{border-top:1px solid var(--line)}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:grid;grid-template-columns:45px 1fr auto;align-items:center;padding:26px 0;cursor:pointer;font-weight:600;font-size:.95rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font:500 .61rem "DM Mono",monospace;color:var(--blue)}
.faq-list summary i{font-style:normal;font-size:1.3rem;transition:transform .25s}
.faq-list details[open] summary i{transform:rotate(45deg)}
.faq-list details p{color:var(--muted);font-size:.86rem;line-height:1.7;padding:0 45px 24px;margin:0}

.related-services{border-top:1px solid var(--line)}
.related-services ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.related-services li a{display:flex;flex-direction:column;gap:8px;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:100px;transition:background .2s}
.related-services li a:hover{background:rgba(255,255,255,.55)}
.related-services li strong{font-size:.92rem}
.related-services li span{font:500 .6rem "DM Mono",monospace;color:var(--muted)}
.related-services>.text-link{grid-column:2;justify-self:start;margin-top:28px}

main{display:block}
@media(max-width:900px){
  .service-cta{margin-left:0}
  .service-facts{grid-template-columns:1fr 1fr}
  .service-facts div:nth-child(2){border-right:0}
  .service-facts div:nth-child(3){padding-left:0}
  .service-steps,.service-faq,.related-services{grid-template-columns:1fr;padding:80px 0}
  .service-steps header,.service-faq header,.related-services header{margin-bottom:36px}
  .related-services ul{grid-template-columns:1fr 1fr}
  .related-services>.text-link{grid-column:1}
}
@media(max-width:620px){
  .service-hero h1{font-size:3.4rem}
  .related-services ul{grid-template-columns:1fr}
  .row-cta{padding-right:8px}
  .faq-list details p{padding:0 0 22px}
}

/* Section labels sit above their headings (directory.css packs them tight). */
#countries.catalog>header span{display:block;margin-bottom:22px}
#countries.catalog{padding-bottom:40px}
/* Row headers are country names, not table headings: normal weight, row rules. */
.country-list th[scope=row]{height:68px;border-bottom:1px solid var(--line);font:inherit;color:var(--ink)}
.country-list th[scope=row] strong{font-size:.9rem;font-weight:600}
.related-services ul{align-self:start}
#countries th:first-child{width:45%}
