/* 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;

  /* Type — Newsreader (display) + IBM Plex Sans (body/UI), per the
     restyle brief. Scale is Perfect Fourth (1.333) off a 17px base,
     exposed as tokens rather than arbitrary per-element px values.
     The two largest steps are separate fluid clamp() tokens (below)
     since a hero headline and a big numeral are the only places that
     need to scale continuously with viewport width. */
  /* --font-display:'Newsreader','Newsreader Fallback',Georgia,serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans Fallback',Arial,sans-serif; */

  /* CONFIRMED, 2026-09-05 — trialled then approved by CJ ("looks
     good"). Matches the nav logo's own font, identified as Century
     Gothic: geometric, near-perfectly circular C, large round P bowl,
     and the tell — an E with a noticeably shorter middle arm than its
     top/bottom arms. Century Gothic itself is a commercial Monotype
     font with no self-hosted web license, so League Spartan (Google
     Fonts, free) is used instead — the closest widely-available
     match, sharing the same short-middle-arm E and circular geometry.
     Both --font-display and --font-body point here for one font
     sitewide, per CJ's ask. Metrics-matched fallback face computed
     properly below (same rigor as Newsreader/IBM Plex Sans), not left
     at trial-grade. To revert to the original pairing: uncomment the
     two lines above and delete these two. */
  --font-display:'League Spartan','League Spartan Fallback',Arial,sans-serif;
  --font-body:'League Spartan','League Spartan Fallback',Arial,sans-serif;
  --step--1:12.75px;
  --step-0:17px;
  --step-1:22.7px;
  --step-2:30.2px;
  --step-3:40.3px;
  /* fluid hero step: 36px at a 400px viewport, 64px at 1400px+,
     derived properly (not eyeballed) — slope 2.8vw, intercept 1.55rem */
  --step-fluid-hero:clamp(2.25rem, 1.55rem + 2.8vw, 4rem);
}

*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:400;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
a:hover{opacity:0.75;}
img{max-width:100%;}

/* ============================================================
   Fonts — self-hosted variable woff2, no third-party CDN request
   at runtime. One file per family (weight axis only — Newsreader's
   optical-size axis is deliberately dropped; not needed for a
   website and keeps "one file per family" literal). Metrics-matched
   fallback @font-face rules computed from real font metrics
   (via @capsizecss/metrics — Newsreader against Georgia,
   IBM Plex Sans against Arial), not eyeballed, so local text doesn't
   visibly reflow once the real font swaps in.
   ============================================================ */
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations'),
      url('../fonts/newsreader-latin-wght-normal.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations'),
      url('../fonts/newsreader-latin-wght-italic.woff2') format('woff2');
  font-weight:400 600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('../fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2-variations'),
      url('../fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader Fallback';
  src:local('Georgia');
  size-adjust:96.12%;
  ascent-override:76.47%;
  descent-override:27.57%;
  line-gap-override:0%;
}
@font-face{
  font-family:'IBM Plex Sans Fallback';
  src:local('Arial');
  size-adjust:101.17%;
  ascent-override:101.32%;
  descent-override:27.18%;
  line-gap-override:0%;
}
/* CJ approved the trial ("looks good") — promoted to a real font,
   metrics-matched fallback computed properly (via @capsizecss/core
   createFontStack against League Spartan's own regular-weight metrics
   and Arial's), same rigor as Newsreader/IBM Plex Sans above. Self-
   hosted variable woff2 (weight 100-900), no third-party CDN. */
@font-face{
  font-family:'League Spartan';
  src:url('../fonts/league-spartan-latin-wght-normal.woff2') format('woff2-variations'),
      url('../fonts/league-spartan-latin-wght-normal.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'League Spartan Fallback';
  src:local('Arial'), local('ArialMT');
  ascent-override:75.4681%;
  descent-override:23.7185%;
  line-gap-override:0%;
  size-adjust:92.7544%;
}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:10px;font-weight:500;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);}

/* Testimonial carousel — for a Proof section holding 2+ references.
   Fully JS-controlled via a transform on .carousel-track (see js/site.js)
   -- deliberately NOT native overflow-scroll/scroll-snap. That combo was
   the original build and caused a real reported bug: hovering the
   carousel made it jitter/bounce between slides, because the browser's
   own scroll-snap "settling" physics fought with the autoplay timer and
   any incidental wheel/trackpad delta. A transform-driven track has no
   native scroll surface at all, so there's nothing left to fight —
   position is 100% owned by the script's own index state. Touch/drag
   swipe is reimplemented explicitly via pointer events in site.js.  */
.carousel{width:100%;max-width:1040px;overflow:hidden;}
.carousel-track{display:flex;transition:transform 0.5s ease;}
.carousel-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding:0 4px;}
.carousel-quote{display:flex;flex-direction:column;gap:14px;max-width:1040px;}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px;}
.carousel-arrow{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink);flex-shrink:0;padding:0;}
.carousel-arrow:hover{border-color:var(--ink);opacity:1;}
.carousel-dots{display:flex;gap:8px;}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;padding:0;cursor:pointer;}
.carousel-dot.is-active{background:var(--accent);}

/* Back to top — fixed bottom-right, fades in once the reader has scrolled
   past the hero on any page. Click handler + visibility toggle in
   js/site.js. */
.back-to-top{position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(11,18,32,0.25);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 0.25s ease,transform 0.25s ease,visibility 0.25s,background 0.2s;z-index:60;}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--accent);opacity:1;}
@media (max-width:600px){.back-to-top{right:16px;bottom:16px;width:42px;height:42px;}}

/* The FAQ accordion (.faq-item, <details>/<summary>, a +/− stock
   component) that lived here is deliberately removed, not just
   restyled — see .faq-list below and the brief's own instruction to
   remove one thing before calling a page done. It was the FAQ's only
   consumer anywhere on the site, so nothing else depended on it. */

/* ============================================================
   Restyle (design-brief.md) — Home page components.
   New classes, not a repurposing of .h1-hero/.h2-section/.grid-cards/
   .faq-item etc — those stay exactly as they are for every page this
   restyle hasn't reached yet, so this pass can't disturb them.
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.h1-display{font-family:var(--font-display);font-weight:400;font-size:var(--step-fluid-hero);line-height:1.08;letter-spacing:-0.01em;}

/* structural link affordance replacing "label →" — the border/weight/
   hover state is the affordance, not an arrow glyph */
.link-affordance{display:inline-flex;align-items:center;padding:9px 18px;border-radius:9px;border:1.5px solid currentColor;font-weight:500;font-size:14px;}
.link-affordance:hover{opacity:1;background:currentColor;}
.link-affordance:hover span{color:var(--surface);}
.link-affordance span{color:inherit;}

/* Two paths — v2, after CJ's live review of v1 found two real faults:
   (1) the elevated navy Medical card next to a large pale, mostly-empty
   General card inverted the intended hierarchy (Medical read as the
   primary product); (2) the absolute-position overlap clipped the
   General panel's corner and visibly escaped the section below on the
   live page, reading as a layout bug, not a deliberate branch. Fixed
   by dropping the overlap technique entirely: ONE bordered card,
   contained via CSS Grid (no absolute positioning, nothing can escape
   its box), General taking the larger share and carrying real weight
   (an accent-coloured spine, first in reading order), Medical
   contained as a narrower, unshadowed navy zone inside the same card —
   still visually distinct, no longer dominant. */
.two-paths-card{width:100%;display:grid;grid-template-columns:1.75fr 1fr;border:1.5px solid var(--border);border-radius:20px;overflow:hidden;align-items:stretch;}
.two-paths-general{background:var(--surface);border-left:5px solid var(--accent);padding:44px 40px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;text-align:left;}
.two-paths-general h3{font-family:var(--font-display);font-weight:400;font-size:28px;color:var(--ink);}
.two-paths-general .meta{font-size:14px;color:rgba(11,18,32,0.55);}
.two-paths-general .desc{font-size:16px;line-height:1.65;color:var(--ink);max-width:520px;}
.two-paths-medical-panel{background:var(--navy);padding:36px 32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;}
.two-paths-medical-panel h3{font-family:var(--font-display);font-weight:400;font-size:28px;color:#fff;}
.two-paths-medical-panel .meta{font-size:14px;color:rgba(255,255,255,0.6);}
.two-paths-medical-panel .desc{font-size:16px;line-height:1.65;color:rgba(255,255,255,0.85);}

/* Capabilities — v3. Back to nine even cards per CJ's explicit ask,
   replacing the weighted anchor/list-band split (which he found still
   read wrong) and dropping the screenshot slot entirely. Clean and
   even: identical size, identical treatment, no colour-coded top bar. */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pillar-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:24px 22px;display:flex;flex-direction:column;gap:10px;}
.pillar-card h3{font-family:var(--font-display);font-weight:400;font-size:18px;color:var(--ink);}
.pillar-card p{font-size:14px;line-height:1.55;color:var(--ink);}

/* Proof — v3. Reverted to two equal columns per CJ, Vicky Putt first —
   the featured/secondary hierarchy from round 2 is dropped. */
.proof-heading{font-family:var(--font-display);font-weight:400;font-size:var(--step-2);color:var(--ink);margin-bottom:36px;text-align:center;}
.proof-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;width:100%;max-width:1160px;}
.proof-split--3{grid-template-columns:repeat(3,1fr);max-width:1320px;gap:40px;}
.proof-split blockquote{margin:0;padding-left:22px;border-left:2.5px solid var(--accent);}
.proof-split p{font-size:16.5px;line-height:1.65;color:var(--ink);}
.proof-split cite{display:block;margin-top:16px;font-style:italic;font-family:var(--font-display);font-size:15px;color:var(--ink-soft);}
.proof-split cite b{font-style:normal;font-weight:600;color:var(--ink);}

/* FAQ — plain, always-visible list, not an accordion */
.faq-list dt{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--ink);margin-top:28px;}
.faq-list dt:first-child{margin-top:0;}
.faq-list dd{margin:8px 0 0;font-size:15px;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;}

  /* Hero: was a fixed 1fr/460px grid with no mobile override at all --
     real bug, not a rendering quirk. Below 900px it never had room for
     both a text column and a fixed 460px image column, so the browser
     squeezed the text column down to almost nothing instead of
     stacking -- collapsing the heading, wrapping the two buttons, and
     shoving the screenshot slot toward the edge. Stack to one column;
     the screenshot slot's own max-width:460px (in the markup) keeps it
     from blowing out full-bleed on a tablet-width single column. */
  .hero-grid{grid-template-columns:1fr!important;gap:32px!important;}

  /* Medical hero: once stacked, the logo (now the first column) should
     sit higher on the page — the desktop padding-top was designed for
     a two-column layout with room to breathe, not a stacked one. */
  .medical-hero{padding-top:40px!important;}

  /* Two paths: single card stacks to one column; the accent spine
     moves from left edge to top edge to match */
  .two-paths-card{grid-template-columns:1fr;}
  .two-paths-general{border-left:none;border-top:5px solid var(--accent);padding:32px 26px;}
  .two-paths-medical-panel{padding:28px 26px;}

  .pillar-grid{grid-template-columns:repeat(2,1fr);}
  .proof-split{grid-template-columns:1fr;gap:36px;}
}

@media (max-width:640px){
  .pillar-grid{grid-template-columns:1fr;}
}

@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);
  }
}

@media (max-width:680px){
  .h2-section{font-size:24px!important;}
  .medical-logo-plate{padding:20px 28px!important;}
  /* No img height override here any more — it fought the plate's own
     width:100%/height:auto sizing with a fixed !important px height,
     which is exactly what kept "skewing" the logo on mobile no matter
     what the inline styles said. The image now scales by width alone
     at every breakpoint, so it can't distort. */
}

@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;}
  .invoice-mock-outer{height:230px;}
  .invoice-mock{transform:scale(0.54);}
  .medical-logo-plate{padding:16px 20px!important;}
  /* Same fix as the 680px breakpoint above — no fixed-height override. */
}