/* th-charge-service.css — TNT-synced /service?slug=… pages on theme-lab.
   Binds tokens.css only. Zero raw brand hex. */

body.page-service-detail .svc-masthead-inner .th-title{
    max-width:22ch;margin:.35rem 0 0;
}

/* Split hero: identity + image left, body copy right */
.charge-masthead-split{
    display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:clamp(28px,5vw,56px);align-items:center;
}
.charge-masthead-copy{min-width:0}
.charge-masthead-copy > .lede:first-child{margin-top:0}
.charge-masthead-aside{
    display:flex;flex-direction:column;align-items:center;gap:1.15rem;min-width:0;
}
.charge-masthead-media{
    margin:0;width:100%;border-radius:20px;overflow:hidden;
    border:1px solid var(--gray-line);background:var(--bg-card);
    aspect-ratio:5/4;
}
.charge-masthead-media img{
    display:block;width:100%;height:100%;object-fit:cover;
}
.charge-masthead-identity{
    display:flex;flex-direction:column;align-items:center;gap:.75rem;
    width:100%;text-align:center;
}
.charge-masthead-identity .charge-crumb{
    justify-content:center;margin:0;
}
.charge-masthead-identity .eyebrow{margin:0}
.charge-masthead-identity .th-title{
    margin:0;max-width:18ch;text-align:center;
}

.charge-rates-row{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
    margin-top:1rem;
}
.charge-rates-row .charge-price-pill{margin:0}
.charge-masthead-copy > .charge-labor-note{margin:.7rem 0 0}

@media(max-width:900px){
    .charge-masthead-split{
        grid-template-columns:1fr;gap:1.75rem;
    }
    .charge-masthead-media{aspect-ratio:16/10;max-height:min(42vh,380px)}
}

@media(max-width:560px){
    .charge-rates-row{flex-direction:column;align-items:stretch}
    .charge-rates-row .btn{width:100%;justify-content:center}
    .charge-rates-row .charge-price-pill{width:100%;justify-content:center}
}

/* Breadcrumb */
.charge-crumb{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
    margin:0 0 1.1rem;font-family:var(--font-data);font-size:.66rem;
    letter-spacing:1.2px;text-transform:uppercase;color:var(--gray);
}
.charge-crumb a{color:var(--gray);text-decoration:none;border-bottom:1px solid transparent}
.charge-crumb a:hover{color:var(--blue-light);border-bottom-color:var(--blue-a20)}
.charge-crumb a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.charge-crumb .sep{opacity:.45}
.charge-crumb [aria-current="page"]{color:var(--white)}

/* Published rate */
.charge-price-pill{
    display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
    margin:1.15rem 0 0;padding:10px 16px;border-radius:12px;
    background:var(--blue-a08);border:1px solid var(--blue-a20);
}
.charge-price-label{
    font-family:var(--font-data);font-size:.66rem;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--gray);
}
.charge-price-amount{
    font-family:var(--font-data);font-size:clamp(1.05rem,2vw,1.35rem);
    font-weight:600;letter-spacing:.4px;color:var(--blue);
}
.charge-labor-note{
    margin:.7rem 0 0;max-width:52ch;font-size:.88rem;line-height:1.55;color:var(--gray);
}

/* Masthead meta callouts */
.charge-meta{
    display:flex;flex-direction:column;gap:.85rem;
    margin:1.35rem 0 0;max-width:54ch;
}
.charge-meta-turnaround{
    margin:0;font-family:var(--font-data);font-size:.72rem;
    letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);
}
.charge-when{
    padding:14px 16px;border-radius:12px;
    background:var(--bg-2);border:1px solid var(--gray-line);
}
.charge-when-label{
    margin:0 0 .35rem;font-family:var(--font-data);font-size:.66rem;
    letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);
}
.charge-when p{margin:0;font-size:.92rem;line-height:1.6;color:var(--gray)}
.charge-scope{
    margin:0;font-size:.9rem;line-height:1.6;color:var(--gray);
}
.charge-scope strong{color:var(--white);font-weight:600}

/* Masthead bullets sit tighter under meta */
body.page-service-detail .svc-masthead-inner .svc-detail-points{
    margin:1.4rem 0 0;
}

/* Process flow */
.charge-flow{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px;margin:0;padding:0;list-style:none;
}
.charge-flow-step{
    display:flex;flex-direction:column;gap:.45rem;
    padding:22px 20px;border-radius:16px;
    background:var(--bg-2);border:1px solid var(--gray-line);
    min-width:0;
}
.charge-flow-num{
    font-family:var(--font-data);font-size:.72rem;letter-spacing:2px;
    color:var(--blue);
}
.charge-flow-title{
    font-family:var(--font-display);font-weight:700;font-size:1.05rem;
    letter-spacing:-.2px;color:var(--white);
}
.charge-flow-copy{
    font-size:.88rem;line-height:1.6;color:var(--gray);
}

@media(max-width:560px){
    .charge-price-pill{width:100%}
    .charge-crumb{font-size:.6rem}
}