/* Zangoes service pages. Mobile-first: base rules are for a ~360px phone,
   min-width queries add the larger layouts. Builds on index-*.css variables.
   The footer grid rule at the bottom also applies to the React pages. */

/* ---- page shell ---- */
.svc-page{padding-top:70px;padding-bottom:84px;background:var(--surface);color:var(--ink);font-family:Barlow,sans-serif;overflow-x:hidden}
.svc-page *,.svc-page *::before,.svc-page *::after{box-sizing:border-box}
.svc-page img{max-width:100%;height:auto}
.svc-inner{max-width:1080px;margin:0 auto}
.svc-page .nav-links{display:none}
.svc-page .nav-links a[aria-current],.svc-menu-panel a[aria-current]{color:#fff}

/* ---- mobile menu (no JS) ---- */
.svc-menu summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 12px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;border-radius:8px}
.svc-menu summary::-webkit-details-marker{display:none}
.svc-menu summary::before{content:"";width:18px;height:2px;background:#fff;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}
.svc-menu summary:focus-visible,.svc-page a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.svc-menu-panel{position:absolute;top:70px;left:0;right:0;max-height:calc(100vh - 70px);overflow-y:auto;background:var(--navy-dark);padding:4px 16px 20px;border-bottom:1px solid #ffffff14}
.svc-menu-panel a{display:flex;align-items:center;min-height:48px;color:#ffffffd9;font-size:16px;text-decoration:none;border-bottom:1px solid #ffffff0f}
.svc-menu-panel a.sub{padding-left:16px;font-size:15px;color:#ffffffa6}

/* ---- hero ---- */
.svc-page .page-hero{padding:28px 16px 40px}
.svc-crumbs{margin-bottom:12px;font-size:14px}
.svc-crumbs ol{display:flex;flex-wrap:wrap;gap:0 8px;margin:0;padding:0;list-style:none;color:#ffffffb3}
.svc-crumbs li{display:inline-flex;align-items:center;min-height:36px}
.svc-crumbs li+li::before{content:"\203A";margin-right:8px}
.svc-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:#ffffffe6;text-decoration:none}
.svc-page .page-h1{margin:0 0 14px;font-size:clamp(34px,9.5vw,62px);line-height:1.02;letter-spacing:-.5px}
.svc-tagline{margin:0 0 12px;color:var(--orange);font-size:18px;font-weight:700;line-height:1.35}
.svc-lead{max-width:640px;margin:0 0 24px;color:#ffffffbf;font-size:16px;line-height:1.65}
.svc-page .btn-orange{width:100%;justify-content:center;min-height:48px;text-align:center}
.svc-store-note{margin:10px 0 0;color:#ffffffa6;font-size:13px}

/* ---- content sections ---- */
.svc-section{padding:36px 16px}
.svc-alt{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.svc-page .section-title{margin:0 0 16px;font-size:clamp(28px,7vw,42px)}
.svc-prose p{max-width:720px;margin:0 0 16px;color:var(--ink-mid);font-size:16px;line-height:1.75}
.svc-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:8px 0 0;padding:0;list-style:none}
.svc-card{padding:20px;background:#fff;border:1px solid var(--border);border-radius:14px}
.svc-alt .svc-card{background:var(--surface)}
.svc-card h3{margin:0 0 6px;color:var(--navy);font-size:18px;font-weight:700;line-height:1.3}
.svc-card p{margin:0;color:var(--ink-mid);font-size:16px;line-height:1.6}
.svc-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.svc-page .info-callout{margin-top:20px;font-size:15px;line-height:1.6}
.svc-links{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.svc-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 16px;background:#fff;border:1px solid var(--border);border-radius:12px;color:var(--navy);font-weight:600;text-decoration:none}
.svc-link::after{content:"\2192";color:var(--orange-dark)}

/* ---- closing CTA ---- */
.svc-page .cta-section{padding:44px 16px}
.svc-cta-title{margin:0 0 12px;color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:clamp(28px,7vw,44px);font-weight:800;line-height:1.05;text-transform:uppercase}
.svc-page .cta-sub{margin-bottom:24px;font-size:16px}
.svc-cta-block .svc-store-note{color:#ffffffa6}

/* ---- sticky bottom CTA (phones) ---- */
.svc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:150;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#0f2547f7;border-top:1px solid #ffffff1f}

/* ---- footer ---- */
.svc-page footer.site-footer{gap:20px;padding:40px 16px 24px}
.svc-page .site-footer p{color:#ffffffb3;font-size:14px;line-height:1.6}
.svc-page .footer-col .fh{margin-bottom:6px;color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.svc-page .footer-col a{display:flex;align-items:center;min-height:44px;margin:0;color:#ffffffb3;font-size:15px}
.svc-page .footer-bottom{padding:20px 16px;color:#ffffff8c}

/* ---- tablet ---- */
@media (min-width:600px){
  .svc-page .page-hero{padding:40px 5vw 56px}
  .svc-section{padding:48px 5vw}
  .svc-page .cta-section{padding:56px 5vw}
  .svc-page .btn-orange{width:auto;min-width:240px}
  .svc-grid{grid-template-columns:1fr 1fr;gap:16px}
  .svc-links{grid-template-columns:1fr 1fr}
  .svc-page footer.site-footer{padding:48px 5vw 32px;gap:32px}
}

/* ---- desktop ---- */
@media (min-width:961px){
  .svc-page{padding-bottom:0}
  .svc-page .nav-links{display:flex}
  .svc-menu,.svc-sticky{display:none}
  .svc-page .page-hero{padding:56px 5vw 72px}
  .svc-section{padding:64px 5vw}
  .svc-page .cta-section{padding:80px 5vw}
  .svc-hub{grid-template-columns:repeat(3,1fr)}
  .svc-links{grid-template-columns:repeat(3,1fr)}
  /* 5 columns now that the Services column exists (React pages and these pages) */
  footer.site-footer{grid-template-columns:2fr 1fr 1fr 1fr 1.5fr}
}