/* base — tokens, reset, type, layout primitives, buttons, wave dividers
   Everything section-specific lives in sections.css; the nav in nav.css; the hero in hero.css. */
:root{
  --ink:#0f1317; --ink2:#414c54; --ink3:#6d7981;
  --paper:#ffffff; --wash:#f1f5f4; --wash2:#e7eeec;
  --teal:#0d9488; --teal2:#0f766e; --teal-pale:#d9e8e5;
  --ink-band:#0B1220; --teal-soft:#e7f4f2; --teal-bright:#5eead4; --teal-fill:#0d9488;
  --band:#1f2933;
  --ochre:#a8641f;
  --rule:#dde3e3;
  --max:1180px;
  --pad:clamp(20px,5vw,64px);
  /* dish */
  --D:clamp(300px,33vw,520px); --rot:0deg; --spin:1400ms; --ease:cubic-bezier(.6,0,.14,1);
  --rev:48s; --drift-ms:14000ms;
}
@media(max-width:940px){:root{--D:min(70vw,440px)}}
@media(max-width:600px){:root{--D:min(86vw,440px)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-.028em;font-weight:600;line-height:1.08}
h1{font-size:clamp(38px,5.2vw,64px);font-weight:650;letter-spacing:-.035em}
h2{font-size:clamp(27px,3.3vw,40px)}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:inherit}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(56px,7vw,104px) clamp(28px,3.5vw,52px)}
.wash{background:var(--wash)}
.teal-soft{background:var(--teal-soft)}
.eyebrow{color:var(--teal);margin-bottom:18px;font-size:18px}
.lede{font-size:clamp(17px,1.35vw,19px);color:var(--ink2);max-width:62ch}
/* body paragraph under a section h3 */
.body{margin-top:12px;color:var(--ink2)}

/* buttons — pill + teal */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--teal);color:#fff;text-decoration:none;
  padding:15px 28px;border-radius:999px;font-size:16px;font-weight:600;border:2px solid var(--teal);
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,18,32,.18)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.sm{padding:9px 20px;font-size:13.5px;white-space:nowrap}

/* wavy dividers — each path in index.html has its own control points (adjacent bands must not
   repeat). Every path overshoots to y=92 and the svg is overflow:visible: that kills the 1px dark
   sliver under dark waves on high-DPI screens. Keep both when adding a wave.
   The modifier class is the colour of the band ABOVE the wave; the path fill is the band below. */
svg.wave{display:block;width:100%;height:90px;overflow:visible;position:relative;z-index:1}
.wave.from-ink{background:var(--ink-band)}
.wave.from-wash{background:var(--wash)}
.wave.from-teal-soft{background:var(--teal-soft)}
.wave.from-band{background:var(--band)}