/* CamCore IT Services (/services, /services/home, /services/business, /services/managed),
   /pricing, /contact and the Overview services teaser — built on the v3 design system (tokens,
   .page-panel, .button, .eyebrow, .section-head, .policy-list, .state-card, .glyph,
   .domain-cta) so the pages read as part of the same shell. documentShell loads this sheet
   only on those routes and the Overview. Every colour is a v3 token: no literals here. */

/* Sections ------------------------------------------------------------------ */
.service-section{margin:0 0 62px;scroll-margin-top:105px}
.service-section .section-head{align-items:flex-end}
.service-section .section-head h2{max-width:720px}
.service-section .section-head p a{color:var(--cyan);font-weight:820}
.home-services{margin-top:40px}

/* Audience cards (hub, Overview teaser, "Also from CamCore") */
.service-audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.service-also-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.service-audience-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;padding:23px;transition:transform .16s ease,border-color .16s ease}
.service-audience-card:hover,.service-audience-card:focus-visible{transform:translateY(-2px);border-color:var(--line-strong)}
.service-audience-card h3{margin:4px 0 8px;font-size:1.2rem;letter-spacing:-.03em}
.service-audience-card p:not(.eyebrow){margin:0;color:var(--muted);font-size:.78rem;line-height:1.6}
.service-index{position:absolute;top:15px;right:17px;color:var(--quiet);font-size:.72rem;font-weight:900}

/* Hero aside */
.service-aside{display:flex;flex-direction:column;gap:14px}
.service-facts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.service-facts li{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--elev-04)}
.service-facts a,.service-facts strong{color:var(--text);font-size:.86rem;font-weight:850}
.service-facts a{color:var(--cyan)}
.service-facts span{color:var(--muted);font-size:.74rem;line-height:1.5}
.service-aside .state-card-foot{margin-top:auto}

/* Problems solved */
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.service-card{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:17px;background:var(--elev-04)}
.service-card h3{margin:6px 0 0;font-size:1.02rem;letter-spacing:-.02em}
.service-card p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.6}

/* Included */
.service-included{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:start;padding:26px 28px}
.service-included h2{margin:0;font-size:1.45rem;letter-spacing:-.03em}
.service-included ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.service-included li{position:relative;padding-left:22px;color:var(--muted);font-size:.82rem;line-height:1.6}
.service-included li::before{content:"";position:absolute;top:.55em;left:0;width:8px;height:8px;border-radius:50%;background:var(--brand-bright)}

/* How it works */
.service-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.service-step{display:flex;gap:14px;align-items:flex-start;padding:22px}
.service-step>span{display:grid;flex:none;place-items:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:11px;background:var(--tint-coral-14);color:var(--cyan);font-size:.82rem;font-weight:950}
.service-step h3{margin:6px 0 6px;font-size:1.05rem}
.service-step p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.6}

/* Rates */
.service-rates{display:grid;padding:6px 24px}
.service-rate-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.service-rate-row:last-child{border-bottom:0}
.service-rate-row h3{margin:0 0 4px;font-size:1rem}
.service-rate-row p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.6}
.service-rate-row .service-rate{flex:none;color:var(--text);text-align:right}
.service-rate strong{font-size:1.1rem;letter-spacing:-.03em}
.service-rate span{color:var(--quiet);font-size:.76rem;font-weight:820}
.service-rate a{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:.78rem;font-weight:820}

/* FAQ and proof points, in the .policy-list layout */
.service-faq-list h3,.service-proof-list h3{margin:0 0 5px;font-size:1rem}
.service-faq-list p a{color:var(--cyan);font-weight:820}

/* Closing band */
.service-closing{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 28px}
.service-closing h2{margin:0 0 7px;font-size:1.45rem;letter-spacing:-.03em}
.service-closing p:not(.eyebrow){max-width:760px;margin:0;color:var(--muted);font-size:.8rem;line-height:1.7}
.service-closing .button-row{flex:0 0 auto;margin-top:0}

/* /contact before CAMCORE_ENQUIRY_FORM_ID is set: the email address stands in for the form */
.contact-pending{display:grid;align-content:center;gap:16px;padding:22px}
.contact-pending p{max-width:560px;margin:0;color:var(--muted);font-size:.86rem;line-height:1.65}
.contact-pending .button-row{margin-top:0}

/* Breakpoints match v3.css ---------------------------------------------------- */
@media(max-width:1180px){
  .service-audience-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-steps{grid-template-columns:1fr}
  .service-included{grid-template-columns:1fr;gap:16px}
  .service-closing{align-items:flex-start;flex-direction:column}
}
@media(max-width:760px){
  .home-services{margin-top:28px}
  .service-section{margin-bottom:44px}
  .service-also-grid,.service-grid{grid-template-columns:1fr}
  .service-included,.service-closing{padding:22px 20px}
  .service-rates{padding:4px 18px}
  .service-rate-row{align-items:flex-start;flex-direction:column;gap:8px}
  .service-rate-row .service-rate{text-align:left}
}