/* ==========================================================================
   SiteSmith Labs: base styles shared by every page.
   Fonts, design tokens, reset, typography, layout helpers and the motion
   library. Written mobile first: plain rules are for phones, min-width
   media queries add the tablet and desktop layouts.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-latin-600.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root {
  /* Ink and paper */
  --ink: #06303F;
  --ink-2: #4E5F66;
  --muted: #6C7C82;
  --faint: #9CA9AE;
  --bg: #F9F6F0;
  --surface: #FFFFFF;
  --surface-2: #FCFAF6;
  --surface-3: #F4F1EA;
  --surface-4: #F0EDE5;
  --line: #EAE4D8;
  --line-2: #EFECE4;
  --overlay: rgba(6, 48, 63, .46);

  /* Brand */
  --brand: #00A9E0;
  --brand-strong: #0090BF;
  --brand-light: #7FD3F0;
  --brand-soft: #CDEBF9;
  --brand-ink: #0A5E85;
  --on-brand: #FFFFFF;

  /* Pastel families: soft background + readable ink */
  --green-soft: #DFF0DC;  --green-ink: #2C6B32;  --green: #3E9A47;
  --yellow-soft: #FCEFC8; --yellow-ink: #7A5A12; --yellow: #E0A32B; --yellow-2: #F6E7AE; --yellow-3: #EBCF6A;
  --orange-soft: #FBDFC7; --orange-ink: #8A4A16; --orange: #D4553A;
  --pink-soft: #F9DDE9;   --pink-ink: #8B3567;   --pink: #C4568F;
  --blue-soft: #CDEBF9;   --blue-ink: #0A5E85;   --blue: #00A9E0;
  --purple-soft: #E7DDF6; --purple-ink: #5A2D82; --purple: #7B4FB0;
  --red-soft: #FBE0DC;    --red-ink: #9B2C1F;    --red: #D4553A;

  /* Type scale (fluid) */
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-md: 15.5px;
  --fs-body: 17px;
  --fs-lead: clamp(17px, 1.6vw, 19px);
  --fs-h3: clamp(21px, 2.2vw, 28px);
  --fs-h2: clamp(32px, 4.4vw, 52px);
  --fs-h1: clamp(40px, 6.2vw, 78px);

  /* Space, radius, shadow */
  --gutter: 20px;
  --container: 1200px;
  --section: clamp(64px, 9vw, 112px);
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-full: 999px;
  --sh-1: 0 2px 8px -4px rgba(6, 48, 63, .25);
  --sh-2: 0 14px 34px -18px rgba(6, 48, 63, .45);
  --sh-3: 0 26px 60px -34px rgba(6, 48, 63, .4);
  --sh-4: 0 34px 80px -30px rgba(6, 48, 63, .5);
  --ring: 0 0 0 3px rgba(0, 169, 224, .35);

  /* Motion */
  --ease: cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .16s;
  --t: .26s;
  --t-slow: .5s;

  /* Safe areas for phones with notches and home bars */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

@media (min-width: 640px) {
  :root { --gutter: 28px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  word-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { flex: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
a { color: var(--brand-strong); text-decoration: none; transition: color var(--t-fast) ease; }
a:hover { color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
::placeholder { color: var(--faint); opacity: 1; }
::selection { background: var(--brand-soft); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }

/* Keyboard focus is always visible, mouse focus stays quiet */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Hide Vue templates until rendered so placeholders never flash */
[v-cloak] { display: none !important; }

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

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  background: var(--ink); color: #fff; font-weight: 700; padding: 12px 18px; border-radius: var(--r-sm);
  transform: translateY(-160%); transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ---------- Typography ---------- */
.h1, .h2, .h3, .h4 { font-weight: 800; letter-spacing: -.035em; word-spacing: .06em; text-wrap: balance; }
.h1 { font-size: var(--fs-h1); line-height: .97; letter-spacing: -.04em; }
.h2 { font-size: var(--fs-h2); line-height: 1; }
.h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.028em; }
.h4 { font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.muted { color: var(--ink-2); }
.faint { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.bold { font-weight: 700; }
.xbold { font-weight: 800; }
.eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-top: var(--section); }
.stack { display: grid; gap: var(--stack, 16px); }
.row { display: flex; align-items: center; gap: var(--row, 12px); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row, 12px); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.ml-auto { margin-left: auto; }
.mt-s { margin-top: 10px; }
.mt { margin-top: 18px; }
.mt-l { margin-top: 30px; }
.hide { display: none !important; }
@media (max-width: 639.98px) { .hide-sm { display: none !important; } }
@media (max-width: 959.98px) { .hide-md { display: none !important; } }

/* ==========================================================================
   Motion library
   ========================================================================== */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.6) } 60% { opacity: 1; transform: scale(1.08) } 100% { transform: scale(1) } }
@keyframes sheetUp { from { transform: translateY(100%) } to { transform: none } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer { from { background-position: 150% 0 } to { background-position: -50% 0 } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(0, 169, 224, .5) } 100% { box-shadow: 0 0 0 12px rgba(0, 169, 224, 0) } }
@keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.7); opacity: .6 } }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes floatCard { 0%, 100% { transform: translateY(0) rotate(-.3deg) } 50% { transform: translateY(-9px) rotate(.3deg) } }
@keyframes drift1 { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(4px, -9px, 0) } }
@keyframes drift2 { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(-6px, -7px, 0) } }
@keyframes drift3 { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(5px, 7px, 0) } }
@keyframes drift4 { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(-5px, -6px, 0) } }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes gradShift { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
@keyframes loadBar { 0% { width: 8% } 55% { width: 92% } 70% { width: 100%; opacity: 1 } 88% { opacity: 0 } 100% { width: 8%; opacity: 0 } }
@keyframes lineIn { 0% { opacity: 0; transform: scaleX(.15) } 12%, 82% { opacity: 1; transform: scaleX(1) } 96%, 100% { opacity: 0; transform: scaleX(1) } }
@keyframes caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes growBar { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes growUp { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes drawStroke { from { stroke-dashoffset: var(--len, 100) } to { stroke-dashoffset: 0 } }
@keyframes rippleOut { from { opacity: .45; transform: scale(0) } to { opacity: 0; transform: scale(1) } }
@keyframes shake { 0%, 100% { transform: translateX(0) } 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }
@keyframes wiggle { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-9deg) } 75% { transform: rotate(9deg) } }
@keyframes revealDown { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@keyframes blob { 0%, 100% { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55% } 50% { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45% } }
@keyframes heroWord { from { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }
@keyframes tickerFade { from { opacity: 0; transform: translateY(60%) } to { opacity: 1; transform: none } }
.anim-scale-in { animation: scaleIn .35s var(--ease) both; }
.anim-pop { animation: popIn .45s var(--ease-spring) both; }

/* Staggered entrance: give children --i (0, 1, 2 ...) */
.stagger > * { animation: fadeUp .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* Scroll reveal. Only hidden when JavaScript is running (html.js), so the
   page is always readable without it. site.js adds .is-in on scroll. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Page-to-page cross fade in browsers that support view transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease both fadeOut; }
::view-transition-new(root) { animation: .32s var(--ease) both fadeUp; }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}