/* =========================================================
   CoolGrid Technologies — design system v3
   Denser B2B layout benchmarked against Boreas / Emicon /
   CoolNet: utility bar, category-led navigation, spec-sheet
   data blocks, minimal dead space.
   ========================================================= */

:root{
  --navy:        #0A2540;
  --navy-ink:    #071A2B;
  --navy-mid:    #123A5E;
  --blue:        #1C6FD9;
  --blue-deep:   #124A96;
  --cyan:        #43C7EA;
  --cyan-soft:   #E4F8FC;
  --grey:        #556E7F;
  --grey-line:   #DCE5EC;
  --paper:       #F4F8FA;
  --white:       #FFFFFF;
  --ink:         #0E1F2E;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --maxw: 1200px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:104px; }
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy); margin:0 0 .45em; line-height:1.14; letter-spacing:-0.01em; }
p{ margin:0 0 .9em; color:var(--grey); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section{ padding:54px 0; }
.section--tight{ padding:34px 0; }
.section--alt{ background:var(--white); border-top:1px solid var(--grey-line); border-bottom:1px solid var(--grey-line); }
.section--navy{ background:var(--navy); }
.section--navy h2,.section--navy h3,.section--navy h4{ color:var(--white); }
.section--navy p{ color:#B4C8D8; }

.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:9px; margin-bottom:11px;
}
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--cyan); }
.section--navy .eyebrow,.page-header .eyebrow{ color:var(--cyan); }

h1{ font-size:clamp(31px,4.4vw,50px); }
h2{ font-size:clamp(24px,3vw,34px); }
h3{ font-size:19px; }
h4{ font-size:15px; }
.lede{ font-size:17.5px; color:var(--grey); max-width:660px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:14.5px; padding:12px 24px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--blue); color:var(--white); }
.btn-primary:hover{ background:var(--blue-deep); }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-outline{ background:transparent; color:var(--navy); border-color:var(--grey-line); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn-wa{ background:#1FAA59; color:#fff; }
.btn-wa:hover{ background:#178B48; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* ---------- utility bar + header ---------- */
.utility{ background:var(--navy-ink); color:#9FB6C7; font-size:12.5px; }
.utility .wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:7px; padding-bottom:7px; }
.utility a{ color:#C6D7E3; }
.utility a:hover{ color:var(--cyan); }
.utility-left{ display:flex; gap:20px; flex-wrap:wrap; }
.utility .mono{ font-family:var(--font-mono); }
@media (max-width:760px){ .utility-right{ display:none; } .utility .wrap{ justify-content:center; } }

.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--grey-line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; gap:20px; }
@media (max-width:520px){ .brand img{ height:52px; } }
.brand img{ height:76px; width:auto; image-rendering:-webkit-optimize-contrast; }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-mobile-cta{ display:none; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--navy); position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--cyan); transition:width .2s ease; }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ width:100%; }
.nav-links a[aria-current="page"]{ color:var(--blue); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; }
@media (max-width:940px){
  /* Anchor the drawer to the header's own bottom edge (top:100%) instead of a
     hardcoded pixel offset. This stays correct no matter how tall the header
     renders — logo size, utility-bar wrapping, browser chrome all vary. */
  .site-header{ position:sticky; }
  .nav{ position:relative; }
  .nav-links{
    position:fixed;
    top:var(--header-h, 64px);
    left:0; right:0;
    max-height:calc(100vh - var(--header-h, 64px));
    max-height:calc(100dvh - var(--header-h, 64px));
    background:var(--white);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:16px 22px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    border-top:1px solid var(--grey-line);
    box-shadow:0 18px 30px -18px rgba(10,37,64,.4);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links a{ padding:14px 4px; border-bottom:1px solid var(--grey-line); }
  .nav-links.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-toggle{ display:block; }
  .nav-cta .btn{ display:none; }
  .nav-links .nav-mobile-cta{ display:flex; margin-top:16px; border-bottom:none; padding:0; }
  .nav-links .nav-mobile-cta .btn{ width:100%; justify-content:center; }
}

/* ---------- photography ---------- */
.photo{ position:relative; overflow:hidden; background:var(--navy); }
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(10,37,64,.5) 0%, rgba(10,37,64,.12) 45%, rgba(10,37,64,.5) 100%); }
.photo--plain::after{ background:linear-gradient(180deg, rgba(10,37,64,.12), rgba(10,37,64,.25)); }
.tag-chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:rgba(7,26,43,.66); border:1px solid rgba(255,255,255,.32);
  padding:6px 11px 6px 9px; backdrop-filter:blur(3px);
}
.tag-chip::before{ content:""; width:5px; height:5px; background:var(--cyan); flex:none; }
@media (max-width:940px){ .tag-chip{ display:none; } }

/* hero */
.hero-photo{ position:relative; color:#fff; overflow:hidden; min-height:500px; display:flex; align-items:center; }
.hero-photo .photo{ position:absolute; inset:0; }
.hero-photo .photo::after{ background:linear-gradient(100deg, rgba(7,26,43,.94) 0%, rgba(7,26,43,.80) 42%, rgba(7,26,43,.30) 100%); }
.hero-inner{ position:relative; z-index:2; padding:56px 0; width:100%; }
.hero-photo h1{ color:#fff; max-width:700px; }
.hero-photo .lede{ color:#CFDEE9; max-width:620px; }
.hero-actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }

/* spec bar */
.specbar{ background:var(--navy-ink); border-top:1px solid rgba(255,255,255,.1); }
.specbar .wrap{ display:grid; grid-template-columns:repeat(5,1fr); }
.spec{ padding:20px 24px; border-right:1px solid rgba(255,255,255,.1); }
.spec:first-child{ padding-left:0; }
.spec:last-child{ border-right:none; padding-right:0; }
.spec .num{ font-family:var(--font-mono); font-size:26px; color:var(--cyan); line-height:1.1; }
.spec .label{ font-size:12px; color:#93AABB; margin-top:2px; line-height:1.4; }
@media (max-width:1040px){ .specbar .wrap{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .specbar .wrap{ grid-template-columns:repeat(2,1fr); } .spec{ border-bottom:1px solid rgba(255,255,255,.1); } }

/* page header */
.page-header{ background:var(--navy); color:var(--white); position:relative; overflow:hidden; min-height:250px; display:flex; align-items:flex-end; padding:46px 0 34px; }
.page-header .photo{ position:absolute; inset:0; }
/* Two-layer scrim: a flat base so bright daytime photos can't wash out the
   white headline, plus a directional gradient that keeps the right side open. */
.page-header .photo img{ filter:saturate(.85) brightness(.62); }
.page-header .photo::after{ background:linear-gradient(100deg, rgba(7,26,43,.94) 0%, rgba(7,26,43,.86) 48%, rgba(7,26,43,.60) 100%); }
.page-header .wrap{ position:relative; z-index:2; }
.page-header h1{ color:var(--white); font-size:clamp(28px,3.8vw,42px); text-shadow:0 1px 14px rgba(4,15,26,.75); }
.page-header p{ color:#E2ECF3; max-width:640px; margin:0; text-shadow:0 1px 10px rgba(4,15,26,.7); }
.page-header .eyebrow,.page-header .crumb{ text-shadow:0 1px 10px rgba(4,15,26,.8); }
.hero-photo h1,.hero-photo .lede{ text-shadow:0 1px 14px rgba(4,15,26,.6); }
.crumb{ font-family:var(--font-mono); font-size:11.5px; color:#8FA9BC; margin-bottom:10px; }
.crumb a:hover{ color:var(--cyan); }

/* ---------- grids & cards ---------- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{ background:var(--white); border:1px solid var(--grey-line); border-radius:var(--radius); padding:24px 22px; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.card:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:0 16px 30px -22px rgba(10,37,64,.4); }
.card .tag{ font-family:var(--font-mono); font-size:11px; color:var(--blue); letter-spacing:.08em; text-transform:uppercase; }
.card h3{ margin:8px 0 6px; }
.card p{ font-size:14.5px; margin-bottom:0; }
.card--flat:hover{ transform:none; box-shadow:none; border-color:var(--grey-line); }

/* dense checklist */
.checks{ display:grid; gap:7px; }
.checks li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--grey); }
.checks li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--cyan); }
.checks--2{ grid-template-columns:repeat(2,1fr); }
.checks--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:720px){ .checks--2,.checks--3{ grid-template-columns:1fr; } }
.checks strong{ color:var(--navy); font-weight:600; }

/* split photo/content */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.split-photo{ min-height:400px; position:relative; }
/* The content column is half the viewport, but its text must line up with the
   .wrap container or the page grid visibly breaks on wide screens. Capping each
   child at half the container width and anchoring it to the column's inner edge
   does that with plain flexbox — no calc()/max(), so it degrades safely. */
.split-content{
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start;
  padding:56px 48px;
}
.split-content > *{ width:100%; max-width:530px; }
.split.reverse .split-photo{ order:2; }
.split.reverse .split-content{ order:1; align-items:flex-end; }
@media (max-width:940px){
  .split{ grid-template-columns:1fr; }
  .split-photo{ min-height:240px; }
  .split.reverse .split-photo{ order:0; }
  .split.reverse .split-content{ order:0; }
  .split-content,.split.reverse .split-content{ padding:34px 22px; }
}

/* image tile */
.tile{ position:relative; overflow:hidden; border:1px solid var(--grey-line); min-height:200px; display:flex; align-items:flex-end; }
.tile .photo{ position:absolute; inset:0; }
.tile-content{ position:relative; z-index:2; padding:20px; color:#fff; }
.tile-content h3{ color:#fff; margin:0 0 3px; font-size:17px; }
.tile-content p{ color:#D3E1EA; font-size:13.5px; margin:0; }
.tile img{ transition:transform .5s ease; }
.tile:hover img{ transform:scale(1.06); }
.tile{ transition:border-color .18s ease, box-shadow .18s ease; }
.tile:hover{ border-color:var(--blue); box-shadow:0 16px 30px -22px rgba(10,37,64,.5); }
.tile-content .more{ display:inline-block; margin-top:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); }
.tile:hover .tile-content .more{ text-decoration:underline; }

/* numbered process */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--grey-line); border:1px solid var(--grey-line); }
.step{ background:var(--white); padding:22px 20px; }
.step .n{ font-family:var(--font-mono); font-size:12px; color:var(--blue); letter-spacing:.08em; }
.step h3{ margin:6px 0 4px; color:var(--navy); font-size:16px; }
.step p{ font-size:13.5px; margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* industries strip */
.ind-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); }
.ind{ background:var(--navy); padding:20px 18px; }
.ind .mono{ font-family:var(--font-mono); font-size:11px; color:var(--cyan); letter-spacing:.08em; }
.ind h3{ color:#fff; margin:6px 0 3px; font-size:15.5px; }
.ind p{ color:#9FB6C7; font-size:13px; margin:0; }
@media (max-width:900px){ .ind-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ind-grid{ grid-template-columns:1fr; } }

/* partner strip */
.partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.partner{ border:1px solid var(--grey-line); background:var(--white); padding:26px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.partner-logo{ height:52px; width:100%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.partner-logo img{ max-height:52px; width:auto; max-width:180px; object-fit:contain; }
.partner .name{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--navy); letter-spacing:.04em; }
.partner .role{ font-family:var(--font-mono); font-size:11px; color:var(--blue); letter-spacing:.08em; text-transform:uppercase; margin-top:5px; }
.partner p{ font-size:13.5px; margin:9px 0 0; }
@media (max-width:760px){ .partners{ grid-template-columns:1fr; } }

/* spec table */
.spec-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--grey-line); }
.spec-table th,.spec-table td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--grey-line); font-size:13.5px; vertical-align:top; }
.spec-table th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--grey); background:var(--paper); width:40%; font-weight:500; }
.spec-table tr:last-child td,.spec-table tr:last-child th{ border-bottom:none; }

/* flow rule */
.flow-rule{ display:flex; align-items:center; gap:8px; margin:0 0 26px; }
.flow-rule .line{ flex:1; height:0; border-top:1px dashed var(--grey-line); }
.flow-rule .node{ width:6px; height:6px; border-radius:50%; background:var(--cyan); }

.stat-block{ border-left:2px solid var(--cyan); padding-left:15px; }
.stat-block .num{ font-family:var(--font-mono); font-size:26px; color:var(--navy); }
.stat-block .label{ color:var(--grey); font-size:13.5px; }


/* CTA banner */
.cta-banner{ border:1px solid rgba(255,255,255,.2); padding:32px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.cta-banner h2{ color:var(--white); margin:0 0 5px; }

/* ---------- forms ---------- */
.form-field{ margin-bottom:15px; }
.form-field label{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:5px; }
.form-field input,.form-field select,.form-field textarea{ width:100%; padding:11px 13px; border:1px solid var(--grey-line); border-radius:var(--radius); font-family:var(--font-body); font-size:14.5px; background:var(--white); color:var(--ink); }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--blue); outline:none; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
@media (max-width:620px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:12.5px; color:var(--grey); }
#form-success{ display:none; background:var(--cyan-soft); border:1px solid #9FD9EA; color:var(--blue-deep); padding:14px 16px; border-radius:var(--radius); margin-top:14px; font-size:14px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-ink); color:#9FB6C7; padding:46px 0 20px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:30px; }
.footer-grid h3{ color:var(--white); font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px; }
.footer-grid a,.footer-grid p,.footer-grid li{ color:#93AABB; font-size:13.5px; }
.footer-grid li{ margin-bottom:8px; }
.footer-grid a:hover{ color:var(--cyan); }
.footer-brand img{ height:74px; width:auto; margin-bottom:14px; }
.footer-legal{ margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer-legal a{ font-size:12.5px; color:#93AABB; }
.footer-legal a:hover{ color:var(--cyan); }
.footer-bottom{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; color:#728DA1; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; z-index:100; }
.skip-link:focus{ left:12px; top:12px; }

.center{ text-align:center; margin-left:auto; margin-right:auto; }
.mono{ font-family:var(--font-mono); }
.mt-0{ margin-top:0; }

/* ---------- legal / long-form pages ---------- */
.legal{ background:var(--white); }
.legal-body{ max-width:780px; }
.legal-body h2{ font-size:22px; margin-top:34px; }
.legal-body h3{ font-size:16.5px; margin-top:22px; }
.legal-body p,.legal-body li{ font-size:15px; color:var(--grey); }
.legal-body ul{ margin:0 0 16px; display:grid; gap:6px; }
.legal-body li{ position:relative; padding-left:18px; }
.legal-body li::before{ content:""; position:absolute; left:0; top:9px; width:5px; height:5px; background:var(--cyan); }
.legal-updated{ font-family:var(--font-mono); font-size:12.5px; color:var(--grey); border-left:2px solid var(--cyan); padding-left:12px; margin-bottom:26px; }
.legal-toc{ background:var(--paper); border:1px solid var(--grey-line); padding:18px 20px; margin-bottom:30px; }
.legal-toc .toc-label{ margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); font-family:var(--font-mono); font-weight:500; }
.legal-toc li{ margin-bottom:6px; }
.legal-toc a{ font-size:14px; color:var(--blue); }
.legal-toc a:hover{ text-decoration:underline; }

/* Template slots for figures the client must supply. Deliberately conspicuous
   so a placeholder can never ship unnoticed. */
.tbc{ border-bottom:2px dashed rgba(67,199,234,.65); opacity:.55; }

/* ---------- hero slideshow ---------- */
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.hero-slide.is-active{ opacity:1; }
.hero-slide .photo{ position:absolute; inset:0; }
.hero-slide .photo::after{ background:linear-gradient(100deg, rgba(7,26,43,.94) 0%, rgba(7,26,43,.80) 42%, rgba(7,26,43,.30) 100%); }
.hero-dots{ position:absolute; z-index:3; left:0; right:0; bottom:22px; display:flex; gap:9px; justify-content:center; }
.hero-dot{ width:34px; height:4px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.35); transition:background .2s ease; border-radius:2px; }
.hero-dot.is-active{ background:var(--cyan); }
.hero-dot:hover{ background:rgba(255,255,255,.6); }
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
}

/* ---------- inline figure (image within a text column) ---------- */
.inline-photo{ position:relative; overflow:hidden; border:1px solid var(--grey-line); border-radius:var(--radius); }
.inline-photo img{ display:block; width:100%; height:auto; }
.inline-photo figcaption{ position:absolute !important; left:12px; bottom:12px; }