/* Static service pages — un-fixes the overlay shell and adds site chrome */
body.svp { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: #fff; color: #1A1A1A; }
.svp .service-page.static {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    z-index: auto;
}

/* nav */
.svp-nav { border-bottom: 1px solid #ECEAE3; background: #fff; position: sticky; top: 0; z-index: 50; }
.svp-nav-in { max-width: 1080px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.svp-logo { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.3rem; color: #556B2F; text-decoration: none; }
.svp-logo span { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.62rem; letter-spacing: .08em; text-transform: uppercase; color: #666; }
.svp-nav nav { display: flex; gap: 22px; margin-left: auto; }
.svp-nav nav a { color: #333; text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.svp-nav nav a:hover { color: #556B2F; }
.svp-cta { background: #556B2F; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.92rem; padding: 10px 20px; border-radius: 8px; }
.svp-cta:hover { background: #6B8E23; }

/* breadcrumbs + hero extras */
.svp-crumbs { max-width: 800px; margin: 0 auto; padding: 20px 24px 0; font-size: var(--t-small); color: #6E6E68; }
.svp-crumbs a { color: #556B2F; text-decoration: none; }
.svp .sp-hero { height: auto; min-height: 0; padding: 40px 24px 28px; }
.svp-lede { max-width: 620px; margin: 4px 0 0; color: #444; line-height: 1.7; font-size: var(--t-lead); }

/* CTA secondary link */
.svp-cta-alt { display: inline-block; margin-left: 16px; color: #556B2F; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* more-services cards are links now */
.svp .sp-more-card { display: block; text-decoration: none; }

/* footer */
.svp-footer { border-top: 1px solid #ECEAE3; margin-top: 24px; padding: 28px 24px 40px; text-align: center; color: #6E6E68; font-size: var(--t-small); }
.svp-footer a { color: #556B2F; }
.svp-footer p { margin: 6px 0; }

@media (max-width: 640px) {
    .svp-nav nav { display: none; }
    .svp-cta-alt { display: block; margin: 14px 0 0; }
}

/* Value stack */
.vs-stack { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 26px 0 14px; }
.vs-chip { border: 1.5px solid #d8d8d2; border-radius: 12px; padding: 12px 10px; background: #fafaf7; min-height: 74px; }
.vs-chip.on { border-color: var(--olive, #6B8E23); background: #eef3df; }
.vs-dim { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a82; }
.vs-chip.on .vs-dim { color: #556B2F; }
.vs-how { display: block; margin-top: 6px; font-size: var(--t-small); line-height: 1.45; color: #444; }
.vs-done { border: 1.5px solid #556B2F; border-radius: 12px; background: #f7f8f2; color: #556B2F;
  font-weight: 600; font-size: var(--t-label); text-align: center; padding: 13px 14px;
  letter-spacing: .06em; text-transform: uppercase; }
.vs-evidence { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0 4px; }
.vs-ev { border: 1.5px solid #d8d8d2; border-radius: 999px; padding: 6px 14px; font-size: var(--t-small); color: #555; background: #fff; }
.vs-foot { text-align: center; color: #8a8a82; font-size: var(--t-label); margin: 10px 0 0; }
@media (max-width: 860px) { .vs-stack { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .vs-stack { grid-template-columns: repeat(2, 1fr); } }

/* v3: shared site shell */
body.svp { padding-top: var(--nav-height); }
body.svp .legal-wrap, body.svp .service-page.static { scroll-margin-top: var(--nav-height); }

/* ---- service explainers ----
   The drawings are phone-first: one drawing per film, never cropped and never
   scrolled sideways, with its type sized to stay readable at 375px. That makes
   them tall, so the constraint here is WIDTH, not height — capped so a tall
   drawing does not swallow the page on a desktop, and centred.
   Each drawing carries its own aspect-ratio inline, since a service may ship a
   tall drawing or a wide one. */
/* Rhythm around the drawings. These were 18px above a 573px-tall drawing,
   40px between two of them, and a 225px hole before the next section —
   tight where it needed air and loose where it needed to join. */
.sp-films { margin: 0 0 40px; }
.sp-film { margin: 0 0 76px; }
.sp-film:last-of-type { margin-bottom: 0; }
.sp-films .sp-diagram-intro { margin-bottom: 46px; }
/* the tall phone drawing is capped so it does not swallow the page; the wide
   desktop one uses the full band it is given */
.sp-film-scroll > object { display: block; width: min(100%, 560px); margin: 0 auto; border: 0; }
@media (min-width: 900px) {
    .sp-film-scroll > object { width: 100%; max-width: none; }
    .sp-film-scroll { width: calc(100% + 280px); margin-left: -140px; }
}
@media (min-width: 900px) and (max-width: 1119px) {
    .sp-film-scroll { width: 100%; margin-left: 0; }
}
.sp-film-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    padding: 14px 2px 0; justify-content: center; text-align: center; }
.sp-film-n { font-weight: 600; font-size: var(--t-label); letter-spacing: .06em; color: #556B2F; }
.sp-film-t { font-size: var(--t-small); color: #6E6E68; }
.sp-film-replay { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-small); color: #6E6E68;
    background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
    text-underline-offset: 3px; }
.sp-film-replay:hover { color: #556B2F; }


/* ---- fit: what the service is and is not for ---- */
.sp-fit-block, .sp-know-block { margin: 0 0 56px; }   /* match the page rhythm */
.sp-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 8px; }
.sp-fit { border: 1.5px solid #DCDCD4; border-radius: 14px; padding: 20px 22px; background: #FAFAF7; }
.sp-fit.yes { border-color: #6B8E23; background: #F3F7E9; }
.sp-fit h3 { font-family: 'Sora', sans-serif; font-size: var(--t-h3); font-weight: 600; margin: 0 0 12px; color: #1A1A1A; }
.sp-fit.yes h3 { color: #556B2F; }
.sp-fit ul { list-style: none; margin: 0; padding: 0; }
.sp-fit li { position: relative; padding-left: 24px; margin: 0 0 10px; font-size: var(--t-body); line-height: 1.65; color: #444; }
.sp-fit li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.sp-fit.yes li::before { content: '✓' / ''; color: #55702A; }
.sp-fit.no li::before { content: '×' / ''; color: #A33; font-size: 1.1rem; line-height: 1.35; }
.sp-fit-note { font-size: var(--t-small); color: #6E6E68; line-height: 1.7; margin: 14px 0 0; }
@media (max-width: 720px) { .sp-fit-grid { grid-template-columns: 1fr; } }

/* ---- know: the practical detail before you buy ---- */
.sp-know { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin: 20px 0 8px; }
.sp-know-item { padding: 18px 0; border-bottom: 1px solid #ECEAE3; }
.sp-know-item h3 { font-family: 'Sora', sans-serif; font-size: var(--t-h3); font-weight: 600; margin: 0 0 7px; color: #1A1A1A; }
.sp-know-item p { font-size: var(--t-body); line-height: 1.7; color: #555; margin: 0; }
@media (max-width: 720px) { .sp-know { grid-template-columns: 1fr; } }

/* diff-card icons are inline line SVGs now, not 2rem emoji */
.svp .sp-diff-icon { width: 30px; height: 30px; margin: 0 auto 12px; }
.svp .sp-diff-icon svg { width: 100%; height: 100%; stroke: #6B8E23; fill: none; stroke-width: 1.4; }

/* breadcrumb links were 39x17 — secondary, but still the way back */
.svp-crumbs a { display: inline-block; padding: 12px 2px; }
.svp-crumbs { padding-top: 8px; }


/* ---- case study block on service pages ---- */
.sp-cases { margin: 0 0 44px; }
.sp-case-grid { display: grid; gap: 20px; }
.sp-case {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 24px; align-items: center; text-decoration: none; color: inherit;
  border: 1px solid #E5E5E5; padding: 18px; background: #fff;
  transition: border-color .25s ease, transform .25s ease;
}
.sp-case:hover { border-color: #6B8E23; transform: translateY(-2px); }
.sp-case:focus-visible { outline: 3px solid #556B2F; outline-offset: 3px; }
.sp-case img { width: 100%; height: auto; display: block; }
.sp-case-text h3 {
  font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 600;
  margin: 0 0 4px; color: #1A1A1A; letter-spacing: -.01em;
}
.sp-case-place {
  font-size: .8125rem; color: #737373; margin: 0 0 12px;
  letter-spacing: .04em; text-transform: uppercase;
}
.sp-case-text p { margin: 0 0 14px; color: #525252; line-height: 1.65; font-size: .95rem; }
.sp-case-go {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; font-size: .9rem; color: #556B2F;
}
.sp-case:hover .sp-case-go { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .sp-case { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sp-case-go { min-height: 44px; }
}