/* Tokens. One block per appearance; the toggle sets data-theme on <html>,
   otherwise the visitor's system setting decides. */
:root {
  --bg: #fff;
  --ink: #1d1d1f;
  --muted: #6e6e73;          /* 5.07:1 on --bg, 4.66:1 on --surface */
  --surface: #f5f5f7;
  --surface-text: #5f5f64;   /* 5.83:1 on --surface */
  --line: #d2d2d7;
  --accent: #c5450f;         /* Burnt orange, OKLCH hue 39. 4.97:1 with --accent-ink; only the ember and the main button */
  --accent-ink: #fff;
  --nav-bg: rgb(255 255 255 / .78);
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000;
    --ink: #f5f5f7;
    --muted: #a1a1a6;        /* 8.16:1 on --bg */
    --surface: #1c1c1e;
    --surface-text: #a1a1a6; /* 6.61:1 on --surface */
    --line: #38383a;
    --accent: #f86834;       /* same hue, dark strength. 7.02:1 with --accent-ink */
    --accent-ink: #000;
    --nav-bg: rgb(0 0 0 / .72);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --surface: #1c1c1e;
  --surface-text: #a1a1a6;
  --line: #38383a;
  --accent: #f86834;
  --accent-ink: #000;
  --nav-bg: rgb(0 0 0 / .72);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font: 1.0625rem/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: inherit; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.wrap {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: .75rem; z-index: 10; background: var(--bg); padding: .5rem .75rem; }

/* Nav: translucent layer, content scrolls under it */
.nav {
  position: sticky; top: 0; z-index: 5;
  padding-top: env(safe-area-inset-top);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 60%, transparent);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav-inner { display: flex; justify-content: space-between; align-items: center; height: 3.25rem; }
.logo { display: flex; align-items: center; gap: .125rem; font-weight: 600; font-size: 1.1875rem; letter-spacing: -.02em; text-decoration: none; }
.logo-mark { width: 1.75rem; height: 1.75rem; margin-inline-start: -.375rem; fill: currentColor; }
.logo-mark .ember { fill: var(--accent); }
.nav nav { display: flex; align-items: center; gap: 1.5rem; font-size: .875rem; }
.nav-link { color: var(--muted); text-decoration: none; }
.nav-pill {
  text-decoration: none; padding: .3125rem .8125rem; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 500;
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 600px) { .nav-link { display: none; } .nav nav { gap: .75rem; } }

/* Appearance toggle: icon button, both icons in the DOM, cross-faded */
.theme-toggle {
  position: relative; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; margin-inline-end: -.375rem;
  border: 0; border-radius: 999px; padding: 0;
  background: transparent; color: var(--muted); cursor: pointer;
}
.theme-toggle svg { grid-area: 1 / 1; width: 1.125rem; height: 1.125rem; }
.theme-icon { transition: opacity 300ms var(--ease-out), scale 300ms var(--ease-out), filter 300ms var(--ease-out); }
/* Show the moon in light (tap to go dark), the sun in dark (tap to go light) */
.icon-sun { opacity: 0; scale: .25; filter: blur(4px); }
:root[data-theme="dark"] .icon-sun { opacity: 1; scale: 1; filter: none; }
:root[data-theme="dark"] .icon-moon { opacity: 0; scale: .25; filter: blur(4px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { opacity: 1; scale: 1; filter: none; }
  :root:not([data-theme="light"]) .icon-moon { opacity: 0; scale: .25; filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-icon { transition: opacity 200ms ease; scale: 1 !important; filter: none !important; }
}

/* Hero */
.hero { padding-block: clamp(5rem, 14vw, 8.75rem) clamp(4.5rem, 11vw, 7rem); text-align: center; }
h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 700;
  max-width: 14ch; margin-inline: auto; text-wrap: balance;
}
.lede {
  font-size: clamp(1.1875rem, 2.4vw, 1.4375rem); color: var(--muted); letter-spacing: -.01em;
  max-width: 34ch; margin: 1.5rem auto 0; text-wrap: pretty;
}
.actions { margin-top: 2.5rem; display: flex; gap: .75rem 1.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }

.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  padding: .875rem 1.625rem; border-radius: 999px; text-decoration: none; font-weight: 500;
  -webkit-user-select: none; user-select: none;
}
.link { color: var(--ink); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .2em; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-pill, .theme-toggle { transition: scale 150ms ease-out; }
  .btn:active, .nav-pill:active, .theme-toggle:active { scale: .96; }
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { color: var(--ink); }
  .theme-toggle:hover { color: var(--ink); }
  .btn:hover { filter: brightness(1.08); }
  .link:hover { text-decoration-color: var(--muted); }
}

/* Sections */
.section { padding-block: clamp(4.5rem, 10vw, 7rem); }
h2 { font-size: clamp(1.875rem, 4.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.sub { color: var(--muted); font-size: clamp(1.0625rem, 2vw, 1.3125rem); max-width: 44ch; margin-top: .875rem; text-wrap: pretty; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.card { background: var(--surface); border-radius: 1.25rem; padding: 1.75rem; }
.card h3, .steps h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.015em; margin-bottom: .5rem; }
.card p { color: var(--surface-text); font-size: .9375rem; }

.band { background: var(--surface); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem 2.5rem; margin-top: 3rem; }
.steps li { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.steps p { color: var(--surface-text); font-size: .9375rem; }

.contact { text-align: center; }
.contact .sub { margin-inline: auto; }
.contact .btn { margin-top: 2rem; }
.address { margin-top: 1rem; color: var(--muted); font-size: .9375rem; }

.footer { padding-block: 0 max(2rem, env(safe-area-inset-bottom)); color: var(--muted); font-size: .8125rem; }
.footer p { border-top: 1px solid var(--line); padding-top: 1.5rem; }