/* ============ Design tokens (hypabyte brand kit) ============ */
:root {
  --terracotta: #C46A45;
  --terracotta-deep: #A9552F;
  --terracotta-soft: #EB9670;   /* terracotta that reads on dark */
  --gold: #D4B483;
  --sage: #8A9A7F;
  --charcoal: #3A342E;
  --ink: #26221E;
  --ivory: #F8F6EE;
  --sandstone: #E1D7C9;
  --panel: #ECE6DC;
  --white: #FFFFFF;
  --muted: #6E655B;
  --muted-dark: #A39A8F;
  --line: #E6DDD0;

  --tint-terra: #F6DED1;
  --tint-sage: #E1E8DA;
  --tint-gold: #F3E6CE;
  --tint-sand: #EEE8DF;

  --display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(10px, 1.1vw, 20px);   /* space around framed blocks */
  --radius-xl: clamp(24px, 2vw, 36px);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --wrap: 1640px;
  --pad: clamp(22px, 3.6vw, 72px);
  --shadow-card: 0 24px 48px -28px rgba(38, 34, 30, .4);
}

/* ============ Reset / base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1.55;
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.lock { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.06; letter-spacing: -0.03em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 10px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.framed { margin-left: var(--gutter); margin-right: var(--gutter); border-radius: var(--radius-xl); }
.skip { position: absolute; left: -9999px; z-index: 200; }
.skip:focus { left: 16px; top: 16px; padding: 10px 16px; background: var(--ink); color: var(--ivory); border-radius: 8px; }

/* ============ Buttons (large, fully rounded like the reference) ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: clamp(54px, 3.9vw, 70px);
  padding: 0 clamp(26px, 2vw, 38px);
  border-radius: 999px;
  font: 400 clamp(15px, 1vw, 18px)/1 var(--body);
  border: 1.5px solid transparent; background: transparent; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--terracotta); color: var(--white); }
.btn-accent:hover { background: var(--terracotta-deep); }
.btn-dark { background: var(--ink); color: var(--ivory); }
.btn-dark:hover { background: var(--charcoal); }
.btn-light { background: var(--ivory); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-outline-light { border-color: rgba(248, 246, 238, .7); color: var(--ivory); }
.btn-outline-light:hover { background: rgba(248, 246, 238, .1); border-color: var(--ivory); }
.btn-sm { height: 48px; padding: 0 24px; font-size: 15px; }

/* ============ Pill label (dark pill + icon dot) ============ */
.tag-pill {
  display: inline-flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 8px 0 24px; border-radius: 999px;
  background: var(--ink); color: var(--ivory);
  font: 400 17px/1 var(--body);
}
.icon-dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ivory); color: var(--ink);
  display: grid; place-items: center; flex: none;
}
.icon-dot svg { width: 20px; height: 20px; }

/* ============ Reveal on scroll (only when JS runs) ============ */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal="left"] { transform: translateX(-70px); }
.js [data-reveal="right"] { transform: translateX(70px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-delay="1"] { transition-delay: .1s; }
.js [data-delay="2"] { transition-delay: .2s; }
.js [data-delay="3"] { transition-delay: .3s; }
.js [data-delay="4"] { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}