/* ============================================================
   Columbus Website Design — Design System (base.css)
   Cool crisp neutrals + ink, navy anchors, ONE blue accent.
   Headings in Poppins (matches the logo). No gradients.
   ============================================================ */

/* ---- Self-hosted fonts (latin, woff2) ---- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/poppins-800.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/hanken-var.woff2') format('woff2');}

:root{
  /* Surfaces — cool, crisp */
  --paper:#f4f6fa;
  --paper-2:#e9edf4;
  --paper-3:#dbe2ec;
  --card:#ffffff;

  /* Ink */
  --ink:#13151b;
  --ink-2:#41454e;
  --ink-3:#717682;
  --line:rgba(17,21,30,.13);
  --line-2:rgba(17,21,30,.07);

  /* Navy anchors */
  --navy:#0c1a33;
  --navy-2:#15294a;
  --navy-deep:#081222;
  --on-navy:#e7edf6;
  --on-navy-mute:#95a4bc;
  --line-navy:rgba(255,255,255,.13);

  /* Single accent */
  --accent:#1f54e0;
  --accent-600:#1742b8;
  --accent-050:#e7eefc;
  --accent-ink:#143bbf;

  /* Functional status (Health Check tool only) */
  --good:#1f8a5b;--warn:#bd7414;--bad:#c23a2b;

  /* back-compat: any leftover spectrum var renders as solid accent, never rainbow */
  --spectrum:var(--accent);
  --spectrum-soft:var(--accent);

  /* Type — Poppins headings match the logo; Hanken Grotesk body */
  --display:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --label:'Poppins',-apple-system,'Segoe UI',sans-serif;
  --mono:'Poppins',-apple-system,'Segoe UI',sans-serif;

  /* Fluid type scale */
  --fs-xs:clamp(.78rem,.76rem + .1vw,.84rem);
  --fs-sm:clamp(.9rem,.87rem + .14vw,.97rem);
  --fs-base:clamp(1.02rem,.99rem + .18vw,1.12rem);
  --fs-md:clamp(1.16rem,1.08rem + .38vw,1.36rem);
  --fs-lg:clamp(1.4rem,1.24rem + .8vw,1.95rem);
  --fs-xl:clamp(1.85rem,1.5rem + 1.65vw,2.9rem);
  --fs-2xl:clamp(2.35rem,1.8rem + 2.8vw,4rem);
  --fs-3xl:clamp(2.9rem,2rem + 4.6vw,5.4rem);

  /* Spacing */
  --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2rem; --sp-6:3rem; --sp-7:4.5rem; --sp-8:6.5rem; --sp-9:9rem;

  /* Radius — architectural, modest */
  --r-sm:5px; --r:8px; --r-lg:12px; --r-xl:18px; --r-pill:999px;

  /* Shadows — tight, used sparingly */
  --sh-1:0 1px 2px rgba(20,22,28,.06);
  --sh-2:0 6px 22px rgba(20,22,28,.09);
  --sh-3:0 18px 44px rgba(11,22,45,.14);

  --container:1180px;
  --container-narrow:740px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);font-size:var(--fs-base);line-height:1.6;color:var(--ink);background:var(--paper);font-weight:400;overflow-x:hidden}
img,picture,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
ul,ol{list-style:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent);color:#fff}

/* ---- Typography ---- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.028em;line-height:1.02}
h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.022em}
h3{font-size:var(--fs-lg);letter-spacing:-.016em}
h4{font-size:var(--fs-md);letter-spacing:-.01em}
p{max-width:66ch}
strong{font-weight:700}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}
a.tlink{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;text-decoration-color:rgba(26,74,209,.35)}
a.tlink:hover{text-decoration-color:var(--accent)}

/* ---- Layout primitives ---- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.narrow{max-width:var(--container-narrow);margin-inline:auto}
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section-sm{padding-block:clamp(2.5rem,5vw,4rem)}
.section--paper2{background:var(--paper-2)}
.section--navy{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy p{color:var(--on-navy-mute)}
.section--ink{background:var(--ink);color:var(--paper)}
.rule{height:1px;background:var(--line);border:0}
.rule-top{border-top:1px solid var(--line)}

.grid{display:grid;gap:clamp(1.1rem,2.4vw,2rem)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* ---- Eyebrow / kicker ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--label);font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:1.05rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)}
.section--navy .eyebrow{color:var(--on-navy-mute)}

/* ---- Section heading block ---- */
.s-head{max-width:58ch}
.s-head h2{margin-bottom:.85rem}
.s-head .lede{font-size:var(--fs-md);color:var(--ink-2);font-weight:400;max-width:52ch;line-height:1.5}
.section--navy .s-head .lede{color:var(--on-navy-mute)}
.center{text-align:center}
.center .s-head,.s-head.center{margin-inline:auto}
.center .eyebrow,.s-head.center .eyebrow{justify-content:center}

/* ---- Accent emphasis on headlines: hand-drawn curved underline ---- */
.mark{color:var(--accent-ink);position:relative;white-space:nowrap;display:inline-block}
.mark .uline{position:absolute;left:0;right:0;bottom:-.12em;width:100%;height:.34em;overflow:visible;pointer-events:none}
.mark .uline path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:380;stroke-dashoffset:380;animation:udraw 1s var(--ease-out) .45s forwards}
@keyframes udraw{to{stroke-dashoffset:0}}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:var(--fs-sm);padding:.85em 1.4em;border-radius:var(--r-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .18s,border-color .18s;line-height:1;text-align:center;white-space:nowrap}
.btn svg{width:1.05em;height:1.05em}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-600);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{transform:translateY(-1px);background:#000}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.section--navy .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px var(--line-navy)}
.section--navy .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.06)}
.btn-lg{padding:1em 1.7em;font-size:var(--fs-base)}
.btn-arrow{transition:transform .2s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* ---- Pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);font-weight:600;padding:.4em .8em;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.pill-dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.pill-dot.live{box-shadow:0 0 0 0 rgba(31,138,91,.5);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 6px rgba(31,138,91,0)}100%{box-shadow:0 0 0 0 rgba(31,138,91,0)}}

/* ---- Cards ---- */
.card{background:var(--card);border-radius:var(--r-lg);padding:clamp(1.4rem,2.6vw,2rem);border:1px solid var(--line);transition:transform .25s var(--ease),border-color .25s}
.card-hover:hover{transform:translateY(-3px);border-color:var(--ink)}
.section--navy .card{background:rgba(255,255,255,.04);border-color:var(--line-navy);color:var(--on-navy)}
.section--navy .card h3{color:#fff}

/* ---- Star rating ---- */
.stars{display:inline-flex;gap:1px;color:#e8a020}
.stars svg{width:1em;height:1em;fill:currentColor}

/* ---- Reveal-on-scroll ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .mark .uline path{animation:none;stroke-dashoffset:0}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---- Utilities ---- */
.flow>*+*{margin-top:1.05em}
.muted{color:var(--ink-3)}
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.hide{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:.5rem;top:-3rem;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:6px;z-index:200;transition:top .2s}
.skip-link:focus{top:.5rem}