:root {
  --bg: #f7f5f0;
  --card: #ffffff;
  --ink: #1c2733;
  --ink-soft: #4b5b6b;
  --ink-faint: #7c8b99;
  --navy: #1e3a5f;
  --navy-dark: #152d4a;
  --navy-tint: #e8edf4;
  --line: #e3e1da;
  --field: #fbfaf7;
  --shadow: 0 10px 30px rgba(28, 39, 51, 0.08);
  --radius: 16px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
  --bg: #121820;
  --card: #1b232d;
  --ink: #eef1f5;
  --ink-soft: #b1bfcc;
  --ink-faint: #82909d;
  --navy: #4a7bb5;
  --navy-dark: #6b98c9;
  --navy-tint: #1f2c3c;
  --line: #2b3542;
  --field: #212a35;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Reverted from overflow-x: clip — that broke full-width layout site-wide
     (content constrained to a narrow left column, dead space on the
     right). Root cause: setting only overflow-x forces the UA to compute
     overflow-y as auto too (the same rule that bit us with hidden here
     earlier), and apparently "clip" interacts worse with that forced auto
     than "hidden" does for this page's width calculations. hidden is the
     known-good state — it already required removing body's own duplicate
     overflow-x rule (see the comment below) to stop breaking
     position:sticky; that fix stands on its own and is unrelated to this
     revert. */
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition:
    background 0.3s,
    color 0.3s;
  /* No overflow-x here (html's own overflow-x: hidden above already
     covers the "no horizontal scroll from an off-canvas panel" case, and
     that's the one that actually gets propagated to the real viewport).
     Setting overflow-x on body too used to seem harmless, but CSS forces
     an axis left at its default ("visible") to become "auto" the moment
     the other axis is anything else — so this also silently forced
     overflow-y: auto here, turning body into its own nested scroll
     container distinct from the real viewport. position:sticky resolves
     against the nearest such container, so every sticky element on the
     site (the navbar included) was resolving against a "container" that
     never itself receives scroll events, since the real scrolling was
     happening one level up — meaning sticky elements never actually
     stuck. Removing the duplicate rule here restores html's overflow-x as
     the one true viewport-level scroll container. */
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.2;
}

.container {
  max-width: 1100px;
  padding: 1rem;
  margin: 1rem auto;
}

.bs {
  box-shadow: var(--shadow);
}

.section {
  padding: 4rem 0;
}

.bg-light {
  background: var(--field);
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2rem;
}

/* ---------- reveal on scroll ---------- */
html.js-anim .reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(0.22, 0.9, 0.36, 1);
}
html.js-anim .rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 0.9, 0.36, 1);
}
html.js-anim .rv.in,
html.js-anim .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.btn:hover {
  background: var(--navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.3);
}
.btn:active {
  transform: translateY(0);
}
.btn.big {
  width: 100%;
  padding: 15px 22px;
  font-size: 15px;
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn.ghost:hover {
  border-color: var(--navy);
  color: var(--navy-dark);
  background: var(--navy-tint);
  box-shadow: none;
}

/* ---------- chip ---------- */
.chip {
  display: inline-block;
  background: var(--navy-tint);
  color: var(--navy-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

/* ---------- card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition:
    box-shadow 0.35s,
    transform 0.35s,
    border-color 0.35s;
}
.card:hover {
  box-shadow: var(--shadow);
}
.card h2 {
  font-size: 22px;
  margin-bottom: 16px;
}
.muted {
  color: var(--ink-soft);
}
.small {
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- forms ---------- */
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .f-row {
    grid-template-columns: 1fr;
  }
}
.f-field {
  margin-bottom: 14px;
}
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
label .req {
  color: #c0392b;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="month"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  background: var(--field);
  color: var(--ink);
  transition: border-color 0.2s;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: 0;
  border-color: var(--navy);
}
textarea {
  resize: vertical;
  min-height: 84px;
}

/* ---------- icon button (theme toggle etc) ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  /* Matches the theme rather than inverting it: background is the same
     tone as the page in either mode, with the outline (border) and icon
     (stroke="currentColor" on the svg, so it follows `color` here) both
     drawn in --ink — dark outline/icon on a white button in light mode,
     light outline/icon on a dark button in dark mode. */
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s,
    opacity 0.2s;
  flex: none;
}
.icon-btn:hover {
  transform: translateY(-2px) scale(1.05);
  opacity: 0.85;
}
.icon-btn .icon-moon {
  display: none;
}
[data-theme="dark"] .icon-btn .icon-sun {
  display: none;
}
[data-theme="dark"] .icon-btn .icon-moon {
  display: block;
}

.not-found-section {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.not-found-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

[id] {
  scroll-margin-top: 96px;
}

/* Honeypot field on public forms (contact, new convert): off-screen for
   humans, still filled in by bots that complete every input. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* Form feedback (contact, anonymous, new convert): the server's message —
   including "too many submissions" — must read as an error, not body text. */
form .error {
  color: #c0392b;
  font-weight: 500;
  margin-top: 10px;
}
form .success {
  color: #2e7d4f;
  font-weight: 500;
  margin-top: 10px;
}
[data-theme="dark"] form .error {
  color: #ff8a80;
}
[data-theme="dark"] form .success {
  color: #81c995;
}