:root{
  /* Colors */
  --bg:#fbf4ee;
  --card:#fff;
  --ink:#2b2b2b;
  --muted:#6b6b6b;

  --teal:#3f8f8b;
  --teal-dark:#2c6f6b;

  --orange:#e39a45;
  --orange-dark:#c98335;

  --brown:#4b3a2f;

  /* Effects */
  --ring: rgba(63,143,139,.25);
  --shadow: 0 10px 30px rgba(20,20,20,.08);

  /* Fluid sizing */
  --radius: clamp(14px, 1.6vw, 18px);
  --gap-1: clamp(8px, 1.2vw, 12px);
  --gap-2: clamp(12px, 1.8vw, 18px);
  --gap-3: clamp(16px, 2.4vw, 26px);

  --pad-1: clamp(10px, 1.4vw, 14px);
  --pad-2: clamp(14px, 2vw, 18px);
  --pad-3: clamp(18px, 2.6vw, 28px);

  --h1: clamp(30px, 4.5vw, 52px);
  --h2: clamp(20px, 2.4vw, 28px);
  --h3: clamp(16px, 2vw, 20px);

  --text: clamp(15px, 1.35vw, 16px);
  --small: clamp(13px, 1.15vw, 14px);

  /* Fonts (brand vibe) */
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  --font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;

}

/* Ensure the HTML hidden attribute actually hides elements */
[hidden] { display: none !important; }

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: 15em;
}

body{
  margin:0;
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: var(--text);
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; height:auto; display:block; }

.container{
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
}

.skip-link{
  position:absolute; left:-999px; top:10px;
  background:var(--card);
  padding: 10px 12px;
  border-radius: 10px;
}
.skip-link:focus{
  left:10px;
  box-shadow:0 0 0 4px var(--ring);
}

/* Headings = UI font */
h1, h2, h3,
.brand-word,
.hero h1,
.section-head h2 {
  font-family: var(--font-ui);
  letter-spacing: -0.015em;
}


h1{
  margin: 0;
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h2{
  margin: 0;
  font-weight: 600;
  font-size: var(--h2);
  letter-spacing: -0.01em;
}
h3{
  margin: 0;
  font-size: var(--h3);
  letter-spacing: -0.01em;
}

.muted{ color: var(--muted); }
.tiny{ font-size: var(--small); }

:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 12px;
}

.hero h1 {
  font-weight: 700;
}