/* ============================================================
   ConstructionSync — "one current plan" system
   Light, drafting-table palette: navy ink, signal-blue accent,
   mist paper. Signature motif: a blueprint grid with a single
   sync pulse traveling between two points — office and field,
   always converging on one current line.
   ============================================================ */
:root{
  --navy:#011128;
  --signal:#164B87;
  --signal-tint:#7FA4C8;
  --graphite:#3A3F47;
  --mist:#E7EBF0;
  --white:#FFFFFF;
  --line:#D3DCE6;

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px;
  --s-section:clamp(80px, 10vw, 144px);
  --gutter:clamp(20px, 5vw, 56px);
  --maxw:1200px;

  --ease-spring:cubic-bezier(.2,.9,.3,1.15);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow-elevated:
    0 1px 2px rgba(1,17,40,.06),
    0 16px 36px -22px rgba(1,17,40,.28);
  --shadow-floating:
    0 2px 6px rgba(1,17,40,.06),
    0 26px 56px -26px rgba(1,17,40,.34),
    0 0 44px -20px rgba(22,75,135,.18);
}

/* ---------- custom cursor: pinned dot + lagging ring, aura glued to the ring ---------- */
.cs-cursor-dot, .cs-cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cs-cursor-dot{ width:6px; height:6px; background:var(--signal) }
.cs-cursor-ring{
  width:34px; height:34px; border:1.5px solid var(--signal-tint);
  box-shadow:0 0 18px 6px rgba(22,75,135,.35);
  transition:width .28s var(--ease-spring), height .28s var(--ease-spring),
             border-color .25s var(--ease-out), opacity .25s var(--ease-out),
             box-shadow .28s var(--ease-out);
}
.cs-cursor-ring.is-active{
  width:52px; height:52px; border-color:var(--signal); background:rgba(22,75,135,.06);
  box-shadow:0 0 26px 10px rgba(22,75,135,.45);
}
.cs-cursor-dot, .cs-cursor-ring{ opacity:0 }
html.cs-custom-cursor .cs-cursor-dot, html.cs-custom-cursor .cs-cursor-ring{ opacity:1 }
html.cs-custom-cursor, html.cs-custom-cursor a, html.cs-custom-cursor button,
html.cs-custom-cursor input, html.cs-custom-cursor textarea{ cursor:none }
@media (hover:none), (pointer:coarse){
  .cs-cursor-dot, .cs-cursor-ring{ display:none }
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--white);
  color:var(--graphite);
  font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Faint grid ground — the drafting-table paper this whole system sits on. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--mist) 1px, transparent 1px),
    linear-gradient(90deg, var(--mist) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.55;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}

/* ---------- type roles ---------- */
.cs-display{
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.04;
  color:var(--navy);
  margin:0;
}
.cs-h2{
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.85rem,3.8vw,2.75rem);
  letter-spacing:-.025em;
  line-height:1.08;
  color:var(--navy);
  margin:0;
}
.cs-h3{
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  font-size:1.05rem; font-weight:600;
  letter-spacing:-.008em; line-height:1.35;
  color:var(--navy); margin:0;
}
.cs-mark{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--signal);
}
.cs-body{ color:var(--graphite); margin:0 }
.cs-lede{ color:var(--graphite); font-size:clamp(1.02rem,1.3vw,1.15rem); line-height:1.7; margin:0 }

/* ---------- layout ---------- */
.cs-wrap{ position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.cs-band{ position:relative; z-index:2; padding-block:var(--s-section) }
.cs-band-half{ padding-top:0; padding-bottom:calc(var(--s-section) / 2) }

/* Per-section sync-pulse backdrop — same signature motif behind every band. */
.cs-band-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.5;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 38%, #000 22%, transparent 76%);
          mask-image:radial-gradient(85% 75% at 50% 38%, #000 22%, transparent 76%);
}

.cs-eyebrow{ display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-3) }
.cs-eyebrow::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent) }

/* ---------- nav ---------- */
.cs-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(14px) saturate(1.2);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.cs-nav[data-scrolled='true']{ background:rgba(255,255,255,.92); border-bottom-color:var(--line); box-shadow:0 8px 24px -20px rgba(1,17,40,.3) }
.cs-nav-inner{
  max-width:var(--maxw); margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.cs-logo{ display:inline-flex; align-items:center; border-radius:8px }
.cs-logo img{ display:block; height:66px; width:auto }

.cs-navlinks{ display:none; align-items:center; gap:var(--s-5) }
@media (min-width:820px){ .cs-navlinks{ display:flex } }

/* Below 820px the full nav links are hidden (see above), so the header is
   just logo + lang switch + CTA — but that CTA's full sentence still doesn't
   fit next to the logo on a phone, so it swaps to a short label there. */
.cs-nav .cs-btn-label-short{ display:none }
@media (max-width:819px){
  .cs-nav-inner{ gap:var(--s-2) }
  .cs-logo img{ height:44px }
  .cs-nav .cs-btn{ padding:10px 14px; font-size:.85rem }
  .cs-nav .cs-btn-label-full{ display:none }
  .cs-nav .cs-btn-label-short{ display:inline }
}
.cs-navlink{
  position:relative; color:var(--graphite); text-decoration:none;
  font-size:.9rem; padding:6px 2px; border-radius:6px;
  white-space:nowrap;
  transition:color .25s var(--ease-out);
}
.cs-navlink::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-spring);
}
.cs-navlink:hover{ color:var(--navy) }
.cs-navlink:hover::after,
.cs-navlink[aria-current='page']::after{ transform:scaleX(1) }
.cs-navlink[aria-current='page']{ color:var(--navy) }

/* ---------- language switch ---------- */
.cs-lang{
  display:flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em;
}
.cs-lang a, .cs-lang span{
  color:var(--signal-tint); text-decoration:none; padding:2px 1px;
  transition:color .25s var(--ease-out);
}
.cs-lang a:hover{ color:var(--navy) }
.cs-lang span{ color:var(--navy); font-weight:600 }
.cs-lang-sep{ color:var(--line) }

/* ---------- buttons ---------- */
.cs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Archivo',sans-serif; font-size:.925rem; font-weight:600;
  letter-spacing:-.005em; text-decoration:none; white-space:nowrap;
  padding:13px 22px; border-radius:9px; border:1px solid transparent;
  cursor:pointer;
  transition:transform .3s var(--ease-spring), box-shadow .3s var(--ease-out),
             background-color .25s var(--ease-out), border-color .25s var(--ease-out),
             color .25s var(--ease-out);
}
.cs-btn-primary{
  background:var(--signal); color:var(--white);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px -14px rgba(22,75,135,.55);
}
.cs-btn-primary:hover{ transform:translateY(-2px); background:#123E70; box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 20px 38px -16px rgba(22,75,135,.65) }
.cs-btn-primary:active{ transform:translateY(0) scale(.985) }

.cs-btn-invert{ background:var(--white); color:var(--navy) }
.cs-btn-invert:hover{ transform:translateY(-2px); background:var(--mist) }
.cs-btn-invert:active{ transform:translateY(0) scale(.985) }

.cs-btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line) }
.cs-btn-ghost:hover{ transform:translateY(-2px); border-color:var(--signal); background:rgba(22,75,135,.06) }
.cs-btn-ghost:active{ transform:translateY(0) scale(.985) }

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2px solid var(--signal); outline-offset:3px; border-radius:8px;
}

/* ---------- hero ---------- */
.cs-hero{ position:relative; z-index:2; padding-top:clamp(128px,16vw,180px); padding-bottom:var(--s-section) }
.cs-hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 85% at 68% 30%, #000 14%, rgba(0,0,0,.4) 48%, transparent 76%);
          mask-image:radial-gradient(120% 85% at 68% 30%, #000 14%, rgba(0,0,0,.4) 48%, transparent 76%);
}
.cs-hero-title{ font-size:clamp(2.4rem,5.6vw,4.4rem); max-width:18ch }
.cs-hero-lede{ max-width:54ch; margin-top:var(--s-3) }
.cs-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-5) }

.cs-hero-page{ position:relative; z-index:2; padding-top:clamp(128px,16vw,180px); padding-bottom:var(--s-6) }
.cs-hero-page .cs-hero-title{ font-size:clamp(2.1rem,4.6vw,3.4rem); max-width:20ch }

/* hero load-in: cascades in on page load, no scroll trigger needed since it's above the fold */
@keyframes cs-hero-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.cs-hero .cs-mark, .cs-hero-page .cs-mark{ animation:cs-hero-in .7s var(--ease-out) both }
.cs-hero .cs-hero-title, .cs-hero-page .cs-hero-title{ animation:cs-hero-in .7s var(--ease-out) .08s both }
.cs-hero .cs-hero-lede, .cs-hero-page .cs-hero-lede{ animation:cs-hero-in .7s var(--ease-out) .17s both }
.cs-hero-actions{ animation:cs-hero-in .7s var(--ease-out) .26s both }

/* ---------- split (two halves) ---------- */
.cs-split-head{ display:grid; gap:var(--s-3); margin-bottom:var(--s-6) }
.cs-split-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden }
@media (min-width:760px){ .cs-split-grid{ grid-template-columns:1fr 1fr } }
.cs-split{
  position:relative; background:var(--white); padding:var(--s-5) var(--s-4);
  display:grid; gap:12px; align-content:start;
  transition:background-color .35s var(--ease-out);
}
.cs-split::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  opacity:0; transition:opacity .35s var(--ease-out);
}
.cs-split:hover{ background:#FBFCFD }
.cs-split:hover::before{ opacity:.6 }
.cs-split p{ font-size:.98rem; line-height:1.7; color:var(--graphite); margin:0 }
.cs-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  color:var(--signal); text-decoration:none; font-weight:600; font-size:.92rem;
  width:fit-content; border-radius:6px;
  transition:gap .3s var(--ease-spring), color .25s var(--ease-out);
}
.cs-link svg{ transition:transform .35s var(--ease-spring) }
.cs-link:hover{ color:var(--navy) }
.cs-link:hover svg{ transform:translateX(3px) }

/* ---------- card grid (why / platform features) ---------- */
.cs-grid-head{ display:grid; gap:var(--s-3); max-width:60ch; margin-bottom:var(--s-6) }
.cs-card-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden }
@media (min-width:680px){ .cs-card-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1020px){ .cs-card-grid.cs-cols-3{ grid-template-columns:repeat(3,1fr) } }
.cs-card{
  position:relative; background:var(--white); padding:var(--s-4) var(--s-4) var(--s-5);
  display:grid; gap:10px; align-content:start;
  transition:background-color .35s var(--ease-out);
}
.cs-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  opacity:0; transition:opacity .35s var(--ease-out);
}
.cs-card:hover{ background:#FBFCFD }
.cs-card:hover::before{ opacity:.6 }
.cs-card-icon{ color:var(--signal); display:block; transition:transform .35s var(--ease-spring) }
.cs-card:hover .cs-card-icon{ transform:translateY(-3px) scale(1.08) }
.cs-card p{ font-size:.96rem; line-height:1.68; color:var(--graphite); margin:0 }

/* ---------- stat blocks (quantified pain points, standalone cards) ---------- */
.cs-stat-row{ display:grid; grid-template-columns:1fr; gap:var(--s-4) }
@media (min-width:680px){ .cs-stat-row{ grid-template-columns:repeat(3,1fr) } }
.cs-stat-block{
  background:var(--white); border:1px solid var(--line); border-radius:22px;
  padding:var(--s-5) var(--s-4); box-shadow:var(--shadow-elevated);
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease-out);
}
.cs-stat-block:hover{ transform:translateY(-5px); box-shadow:var(--shadow-floating) }
.cs-stat-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--navy); letter-spacing:-0.03em; margin:0 0 14px; line-height:1 }
.cs-stat-label{ margin:0; font-size:.98rem; line-height:1.6; color:var(--graphite); max-width:32ch }

/* ---------- service explorer (services: expandable spec sheet) ---------- */
.cs-svc-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden }
@media (min-width:880px){ .cs-svc-grid{ grid-template-columns:1fr 1fr } }
.cs-svc-card{ position:relative; background:var(--white); padding:var(--s-3) var(--s-4); transition:background-color .3s var(--ease-out), box-shadow .3s var(--ease-out) }
.cs-svc-card:hover{ background:#FBFCFD }
.cs-svc-card[open]{ background:#FBFCFD; box-shadow:inset 3px 0 0 var(--signal) }
.cs-svc-card summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3) }
.cs-svc-card summary::-webkit-details-marker{ display:none }
.cs-svc-card summary::marker{ content:'' }
.cs-svc-card summary:focus-visible{ outline:2px solid var(--signal); outline-offset:6px; border-radius:6px }
.cs-svc-num{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.78rem; color:var(--signal-tint); margin-bottom:6px }
.cs-svc-card h3{ margin:0 0 6px }
.cs-svc-short{ margin:0; font-size:.9rem; line-height:1.6; color:var(--graphite) }
.cs-svc-plus{ position:relative; width:20px; height:20px; flex:none; margin-top:6px }
.cs-svc-plus::before, .cs-svc-plus::after{ content:''; position:absolute; background:var(--signal); border-radius:1px; transition:transform .3s var(--ease-spring), opacity .3s var(--ease-out) }
.cs-svc-plus::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%) }
.cs-svc-plus::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%) }
.cs-svc-card[open] .cs-svc-plus::after{ opacity:0; transform:translateX(-50%) rotate(90deg) }
.cs-svc-body{ margin:var(--s-2) 0 0; padding-top:var(--s-2); border-top:1px dashed var(--line); font-size:.96rem; line-height:1.68; color:var(--graphite); animation:cs-svc-fade .35s var(--ease-out) }
@keyframes cs-svc-fade{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .cs-svc-body{ animation:none } }

/* ---------- process rows (about: audit / build / adopt) ---------- */
.cs-proc-head{ display:grid; gap:var(--s-3); max-width:58ch; margin-bottom:var(--s-6) }
.cs-stage{
  display:grid; grid-template-columns:1fr; gap:var(--s-2);
  padding-block:var(--s-5);
  border-top:1px solid var(--line);
}
.cs-stage:last-child{ border-bottom:1px solid var(--line) }
@media (min-width:760px){
  .cs-stage{ grid-template-columns:120px minmax(0,1fr); gap:var(--s-5); align-items:start }
}
.cs-stage-num{
  font-family:'IBM Plex Mono',monospace; font-size:.8rem; letter-spacing:.1em;
  color:var(--signal-tint); line-height:1;
}
.cs-stage-body{ display:grid; gap:8px }
.cs-stage-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.4rem; letter-spacing:-.02em; color:var(--navy); margin:0 }
.cs-stage-body p{ margin:0; color:var(--graphite); font-size:.985rem; line-height:1.7; max-width:60ch }

/* ---------- process page: detailed stage rows with blueprint diagrams ---------- */
.cs-process-stage{
  display:grid; gap:var(--s-4);
  padding-block:var(--s-6);
  border-top:1px solid var(--line);
}
.cs-process-stage:last-child{ border-bottom:1px solid var(--line) }
@media (min-width:880px){
  .cs-process-stage{ grid-template-columns:1fr 1.3fr; gap:var(--s-7); align-items:center }
  .cs-process-stage.cs-process-rev .cs-process-diagram{ order:2 }
  .cs-process-stage.cs-process-rev .cs-process-detail{ order:1 }
}
.cs-process-diagram{
  position:relative; overflow:hidden;
  background:var(--navy); border-radius:16px;
  padding:clamp(32px,6vw,56px);
  display:grid; place-items:center;
  box-shadow:var(--shadow-elevated);
  background-image:
    linear-gradient(var(--signal) 1px, transparent 1px),
    linear-gradient(90deg, var(--signal) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:center;
}
.cs-process-diagram::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 50% 50%, rgba(1,17,40,.15), var(--navy) 78%);
}
.cs-process-diagram svg{ position:relative; width:100%; max-width:180px; height:auto; color:var(--signal-tint) }
.cs-process-detail{ display:grid; gap:var(--s-3) }
.cs-process-detail .cs-stage-name{ font-size:1.6rem }
.cs-process-detail > p{ margin:0; color:var(--graphite); font-size:1rem; line-height:1.7; max-width:56ch }
.cs-process-facts{ display:grid; gap:var(--s-3); margin:0; padding:0 }
.cs-process-facts dt{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); margin:0 }
.cs-process-facts dd{ margin:4px 0 0; color:var(--graphite); font-size:.95rem; line-height:1.6; max-width:52ch }

/* ---------- pull quote ---------- */
.cs-quote{
  position:relative; border-left:3px solid var(--signal);
  padding-left:var(--s-4);
}
.cs-quote p{
  font-family:'Poppins',sans-serif; font-weight:600; color:var(--navy);
  font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.45; letter-spacing:-.012em; margin:0;
}

/* ---------- lead feature (services: Schedule Sync) ---------- */
.cs-feature{
  background:var(--navy); color:var(--white);
  border-radius:16px; padding:clamp(28px,4vw,44px);
  display:grid; gap:8px; margin-bottom:1px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-floating);
}
.cs-feature-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5 }
.cs-feature-inner{ position:relative; display:grid; gap:8px; max-width:52ch }
.cs-feature h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.5rem; color:var(--white); margin:0; letter-spacing:-.02em }
.cs-feature p{ color:var(--signal-tint); margin:0; font-size:1rem; line-height:1.65 }

/* ---------- statement band ---------- */
.cs-statement{
  position:relative; overflow:hidden;
  background:var(--navy);
  padding-block:clamp(72px,10vw,128px);
  text-align:center;
}
.cs-statement-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.4 }
.cs-statement-inner{ position:relative; display:grid; gap:var(--s-4); justify-items:center }
.cs-statement h2{
  font-family:'Poppins',sans-serif; font-weight:700; color:var(--white);
  font-size:clamp(2.2rem,6vw,4rem); letter-spacing:-.03em; line-height:1.05; margin:0; max-width:16ch;
}
.cs-statement h2 em{ font-style:normal; color:var(--signal-tint) }
.cs-statement p{ color:#B9C9DC; max-width:44ch; margin:0; font-size:1.05rem }

/* ---------- closing CTA (quiet) ---------- */
.cs-cta{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:18px;
  background:var(--mist);
  padding:clamp(32px,5vw,64px);
  text-align:center;
}
.cs-cta-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5 }
.cs-cta-inner{ position:relative; display:grid; gap:var(--s-3); justify-items:center }
.cs-cta p{ max-width:46ch }

/* ---------- contact ---------- */
.cs-contact-grid{ display:grid; grid-template-columns:1fr; gap:var(--s-6) }
@media (min-width:880px){ .cs-contact-grid{ grid-template-columns:1fr 1.1fr; gap:var(--s-7) } }

.cs-eyebrow{ display:flex; align-items:center; gap:9px }
.cs-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--signal); flex:none }

.cs-contact-details{ display:grid; margin-top:var(--s-5); border-top:1px solid var(--line) }
.cs-contact-block{ display:grid; gap:4px; padding-block:var(--s-3); border-bottom:1px solid var(--line) }
.cs-contact-block .cs-meta{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--signal); margin:0 }
.cs-contact-block p{ margin:0; color:var(--navy); font-size:1.05rem }
.cs-contact-block a{ color:var(--navy); text-decoration:none }
.cs-contact-block a:hover{ color:var(--signal) }
.cs-contact-block .cs-mono{ font-family:'IBM Plex Mono',monospace; font-size:1rem }
.cs-contact-block .cs-contact-caption{ margin:0; color:var(--signal-tint); font-size:.85rem }

.cs-panel{
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:clamp(24px,3.4vw,40px);
  box-shadow:var(--shadow-elevated);
}
.cs-panel-lede{ color:var(--graphite); font-size:.95rem; line-height:1.65; margin:var(--s-3) 0 0 }
.cs-panel-note{ color:var(--signal-tint); font-size:.9rem; line-height:1.65; margin:var(--s-2) 0 0 }
.cs-panel-note a{ color:var(--signal); font-weight:600; text-decoration:none }
.cs-panel-note a:hover{ text-decoration:underline }
.cs-panel form{ margin-top:var(--s-4) }

.cs-field-row{ display:grid; grid-template-columns:1fr; gap:0 var(--s-3) }
@media (min-width:560px){ .cs-field-row{ grid-template-columns:1fr 1fr } }

.cs-field{ display:grid; gap:6px; margin-bottom:var(--s-3) }
.cs-field span{ font-size:.85rem; font-weight:600; color:var(--navy) }
.cs-field .cs-field-optional{ font-weight:500; color:var(--signal-tint); text-transform:none; letter-spacing:0 }
.cs-field input, .cs-field textarea, .cs-field select{
  font-family:inherit; font-size:.95rem; color:var(--graphite);
  border:1px solid var(--line); border-radius:9px; padding:11px 13px;
  background:var(--white); resize:vertical;
  transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.cs-field select{
  appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233A3F47' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.cs-field input:focus, .cs-field textarea:focus, .cs-field select:focus{
  outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(22,75,135,.14);
}
.cs-form-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-3) }
.cs-form-foot .cs-meta{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-tint) }

/* ---------- footer ---------- */
.cs-foot{ position:relative; z-index:2; border-top:1px solid var(--line); padding-block:var(--s-6) var(--s-5) }
.cs-foot-grid{ display:grid; gap:var(--s-5); grid-template-columns:1fr }
@media (min-width:760px){ .cs-foot-grid{ grid-template-columns:1.6fr 1fr 1fr; gap:var(--s-6) } }
.cs-foot-col{ display:grid; gap:12px; align-content:start }
.cs-foot-col h4{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#8695A6; margin:0 0 2px; font-weight:500 }
.cs-foot-col img{ height:26px; width:auto }
.cs-foot-link{ color:var(--graphite); text-decoration:none; font-size:.925rem; width:fit-content; border-radius:6px; transition:color .25s var(--ease-out), transform .3s var(--ease-spring) }
.cs-foot-link:hover{ color:var(--navy); transform:translateX(2px) }
.cs-foot-bottom{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); justify-content:space-between; align-items:center; margin-top:var(--s-6); padding-top:var(--s-3); border-top:1px solid var(--line) }
.cs-foot-fine{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:#8695A6; margin:0 }

/* ---------- process page: per-stage diagram motion ---------- */
.cs-process-diagram{ transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-out) }
.cs-process-diagram:hover{ transform:translateY(-4px); box-shadow:var(--shadow-floating) }

.cs-process-diagram[data-motion="pulse"] .cs-diagram-flow{
  animation:cs-diagram-flow 1.6s linear infinite;
}
@keyframes cs-diagram-flow{ to{ stroke-dashoffset:-18 } }

.cs-process-diagram[data-motion="scan"] .cs-diagram-scan{
  transform-box:fill-box; transform-origin:center;
  animation:cs-diagram-scan 2.8s var(--ease-spring) infinite;
}
@keyframes cs-diagram-scan{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(4px,4px) } }

.cs-process-diagram[data-motion="spin"] .cs-diagram-gear{
  transform-box:fill-box; transform-origin:center;
  animation:cs-diagram-spin 9s linear infinite;
}
@keyframes cs-diagram-spin{ to{ transform:rotate(360deg) } }

.cs-process-diagram[data-motion="check"] .cs-diagram-check{
  stroke-dasharray:40; stroke-dashoffset:40;
  transition:stroke-dashoffset 1s var(--ease-out) .25s;
}
.cs-rise[data-shown='true'] .cs-process-diagram[data-motion="check"] .cs-diagram-check{
  stroke-dashoffset:0;
}

/* staggered reveal of the fact list within each process stage */
.cs-process-facts > div{
  opacity:0; transform:translateY(10px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.cs-rise[data-shown='true'] .cs-process-facts > div{ opacity:1; transform:none }
.cs-process-facts > div:nth-child(1){ transition-delay:.05s }
.cs-process-facts > div:nth-child(2){ transition-delay:.18s }
.cs-process-facts > div:nth-child(3){ transition-delay:.31s }

/* ---------- scroll reveal ---------- */
.cs-rise{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.cs-rise[data-shown='true']{ opacity:1; transform:none }
.cs-foot{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.cs-foot[data-shown='true']{ opacity:1; transform:none }

/* card grids and split panels cascade in one at a time instead of fading as one block */
.cs-card-grid.cs-rise, .cs-split-grid.cs-rise, .cs-svc-grid.cs-rise, .cs-stat-row.cs-rise{ opacity:1; transform:none; transition:none }
.cs-card-grid.cs-rise .cs-card,
.cs-split-grid.cs-rise .cs-split,
.cs-svc-grid.cs-rise .cs-svc-card,
.cs-stat-row.cs-rise .cs-stat-block{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.cs-card-grid.cs-rise[data-shown='true'] .cs-card,
.cs-split-grid.cs-rise[data-shown='true'] .cs-split,
.cs-svc-grid.cs-rise[data-shown='true'] .cs-svc-card,
.cs-stat-row.cs-rise[data-shown='true'] .cs-stat-block{ opacity:1; transform:none }
.cs-stat-row.cs-rise .cs-stat-block:nth-child(1){ transition-delay:.03s }
.cs-stat-row.cs-rise .cs-stat-block:nth-child(2){ transition-delay:.13s }
.cs-stat-row.cs-rise .cs-stat-block:nth-child(3){ transition-delay:.23s }
.cs-card-grid.cs-rise .cs-card:nth-child(1), .cs-split-grid.cs-rise .cs-split:nth-child(1){ transition-delay:.03s }
.cs-card-grid.cs-rise .cs-card:nth-child(2), .cs-split-grid.cs-rise .cs-split:nth-child(2){ transition-delay:.13s }
.cs-card-grid.cs-rise .cs-card:nth-child(3){ transition-delay:.23s }
.cs-card-grid.cs-rise .cs-card:nth-child(4){ transition-delay:.33s }
.cs-svc-grid.cs-rise .cs-svc-card:nth-child(1){ transition-delay:.03s }
.cs-svc-grid.cs-rise .cs-svc-card:nth-child(2){ transition-delay:.09s }
.cs-svc-grid.cs-rise .cs-svc-card:nth-child(3){ transition-delay:.15s }
.cs-svc-grid.cs-rise .cs-svc-card:nth-child(4){ transition-delay:.21s }
.cs-svc-grid.cs-rise .cs-svc-card:nth-child(5){ transition-delay:.27s }
.cs-svc-grid.cs-rise .cs-svc-card:nth-child(6){ transition-delay:.33s }
.cs-svc-grid.cs-rise .cs-svc-card:nth-child(7){ transition-delay:.39s }
.cs-svc-grid.cs-rise .cs-svc-card:nth-child(8){ transition-delay:.45s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .cs-rise{ opacity:1; transform:none }
}