/* CTC People — shared site styles
   Consolidated from the 5 approved Claude Design canvas mockups
   (Home, Capabilities, Medical, General ATS, Services). All colour
   tokens below were confirmed consistent across every mockup file
   before merging into this single sheet. */

:root{
  --bg:#FBFCFE; --surface:#FFFFFF; --ink:#0B1220; --ink-soft:#4B5768;
  --navy:#0E1A33; --navy-soft:#16233F; --navy-text:#C7D2E6;
  --accent:#2F5EFF; --accent-deep:#1E3FCC; --accent-soft:#EAF0FF;
  --teal:#0EA98F; --teal-soft:#E8FBF6;
  --border:#E4E9F2;
  --p1:#9AD4F7; --p2:#6EC0F1; --p3:#47ABE9; --p4:#2A93DA; --p5:#1D7EC4;
  --p6:#1568AA; --p7:#0F5590; --p8:#0A4176; --p9:#072E57;
  --p1-soft:#F0FAFF; --p2-soft:#EAF7FE; --p3-soft:#E4F2FD; --p4-soft:#DFEDFB;
  --p5-soft:#DDECF9; --p6-soft:#DCE9F4; --p8-soft:#DCE5EE;
  --wash:#EEF7FD; --coral:#E2703A; --amber:#D99A2B;
}

*{box-sizing:border-box;}
body{margin:0;font-family:'Manrope',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);}
h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;margin:0;letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
a:hover{opacity:0.75;}
img{max-width:100%;}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;}
.btn-primary{color:#fff;}
.btn-ghost{color:var(--ink);border:1.5px solid var(--border);background:#fff;}
.btn-ghost:hover{opacity:1;border-color:var(--ink);}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.icon{flex-shrink:0;}
.bullet{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
.bullet svg{flex-shrink:0;margin-top:2px;}
.node-label{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;}
.row{display:flex;justify-content:space-between;font-size:13.5px;padding:12px 14px;border-radius:10px;}
.chip{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;border:1.5px solid var(--border);background:#fff;font-size:14px;font-weight:600;color:var(--ink);}

/* FAQ accordion — pure CSS (<details>/<summary>), no JS. Content stays in the
   DOM whether expanded or not, so it's fully crawlable/quotable either way. */
.faq-item{border:1.5px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;}
.faq-item + .faq-item{margin-top:12px;}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;font-size:15.5px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:20px;font-weight:400;color:var(--ink-soft);flex-shrink:0;}
.faq-item[open] summary::after{content:'\2212';}
.faq-item p{padding:0 22px 18px;font-size:14.5px;line-height:1.65;color:var(--ink-soft);}

/* ============================================================
   Responsive — mobile nav, stacking grids, scalable graphics,
   and mobile type sizing. Classes below are added alongside the
   existing inline layout styles on each page; nothing here is
   meant to change desktop rendering.
   ============================================================ */

body{overflow-x:hidden;}
h1,h2,h3{overflow-wrap:break-word;}
img{height:auto;}

/* decorative invoice-mock wrapper (fixed-size mock cards) */
.invoice-mock-outer{width:100%;display:flex;justify-content:center;}

/* nav: hidden until the mobile breakpoint, so desktop is untouched */
.nav-toggle-checkbox{display:none;}
.nav-toggle-label{display:none;}

@media (max-width:900px){
  .section{
    padding-left:20px!important;
    padding-right:20px!important;
    padding-top:56px!important;
    padding-bottom:56px!important;
  }
  .grid-2{grid-template-columns:1fr!important;gap:40px!important;}
  .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media (max-width:820px){
  .nav{
    padding-left:20px!important;
    padding-right:20px!important;
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  .nav-links{
    display:none!important;
    flex-basis:100%;
    order:4;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:16px!important;
    padding:16px 0 4px;
    border-top:1px solid var(--border);
    margin-top:14px;
  }
  .nav-toggle-checkbox:checked ~ .nav-links{display:flex!important;}
  .nav-toggle-label{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);
    order:2;cursor:pointer;flex-shrink:0;color:var(--ink);
  }
  .nav-cta{order:3;}
  .nav-cta .nav-contact{display:none;}
  .nav-cta .btn{padding:9px 14px!important;font-size:13px!important;}
}

@media (max-width:680px){
  .h1-hero{font-size:34px!important;line-height:1.15!important;}
  .h2-section{font-size:24px!important;}
  .medical-logo-plate{padding:20px 28px!important;}
  .medical-logo-plate img{height:64px!important;}
}

@media (max-width:600px){
  .invoice-mock-outer{height:300px;overflow:hidden;}
  .invoice-mock{transform:scale(0.7);transform-origin:top center;}
}

@media (max-width:560px){
  .grid-cards{grid-template-columns:1fr!important;}
}

@media (max-width:480px){
  .pill{white-space:normal;text-align:center;max-width:100%;}
}

@media (max-width:460px){
  .btn-row{flex-direction:column!important;width:100%!important;}
  .btn-row>a{width:100%!important;justify-content:center!important;text-align:center;}
  .h1-hero{font-size:28px!important;}
  .invoice-mock-outer{height:230px;}
  .invoice-mock{transform:scale(0.54);}
  .medical-logo-plate{padding:16px 20px!important;}
  .medical-logo-plate img{height:48px!important;}
}