/* ── Custom cursor ──────────────────────────────────────────────────── */
/*
  Two-layer SVG: white outline first (visibility on any bg),
  then solid emerald arrow on top. Hotspot at the tip (2,2).
*/
:root {
  /*
    Layers (back→front):
    1. White soft outline  — visibility on any background
    2. Main emerald fill   — with Q-bezier curves for smooth points
    3. Dark right-face     — 3-D depth shadow
    4. White left-face     — light catching the left plane
    5. Gloss ellipse       — specular highlight near the tip
    Hotspot at tip (2, 2).
  */
  --cur-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='21' viewBox='0 0 14 21'%3E%3Cpath d='M2 1.5L2 15.5Q3.8 13.5 5.5 12.5Q7 16 8 19Q8.8 20.2 9.8 19.2Q8.8 15.5 6.8 11.5L13 11.5Q12 10 2 1.5Z' fill='white' stroke='white' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M2 1.5L2 15.5Q3.8 13.5 5.5 12.5Q7 16 8 19Q8.8 20.2 9.8 19.2Q8.8 15.5 6.8 11.5L13 11.5Q12 10 2 1.5Z' fill='%23137A48'/%3E%3Cpath d='M6.8 11.5L13 11.5Q12 10 2 1.5Q5 5 6.8 11.5Z' fill='%23000' opacity='0.15'/%3E%3Cpath d='M2 1.5L2 8.5L7 5Z' fill='white' opacity='0.32'/%3E%3Cellipse cx='3' cy='4' rx='1.4' ry='0.6' fill='white' opacity='0.65' transform='rotate(-35 3 4)'/%3E%3C/svg%3E") 2 2;
}

html  { cursor: var(--cur-default), auto; }

/* UA sets cursor:default on <button>, so we must be explicit */
button, [role="button"], .btn, select { cursor: pointer; }
a { cursor: pointer; }
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"], textarea { cursor: text; }

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Both html AND body needed to fully kill horizontal scroll */
html {
  scroll-behavior: smooth;
  overflow-x: clip; /* clip ≠ scroll container → sticky nav still works */
  max-width: 100%;
  zoom: 0.82; /* shrinks everything so 100% browser zoom ≈ old 90% view */
}

body {
  position: relative; /* anchor for the absolute dot-grid wrapper */
  padding-top: var(--nav-h); /* push content below the fixed nav */
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
}

::selection { background: var(--emerald); color: #fff; }

/* ── Typographic primitives ─────────────────────────────────────────── */
.serif { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
.mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emerald);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--emerald);
  display: inline-block;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 6.2vw, 88px); line-height: 1.02; }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; }
h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }

p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--emerald);
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  transition: background .3s ease, transform .25s ease, box-shadow .3s;
  box-shadow: 0 6px 16px -6px rgba(19,122,72,.55);
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.005em;
}
.btn:hover { background: var(--emerald-deep); transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(19,122,72,.6); }
.btn .arr { transition: transform .3s ease; }
.btn:hover .arr { transform: translateX(3px); }

.btn-ghost {
  background: transparent;
  color: var(--ink) !important;
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--canvas-sage); border-color: var(--emerald); color: var(--emerald) !important; }