*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  /* Solid ink on the root canvas so iOS Safari rubber-band overscroll (and
     the gap exposed when the bottom URL bar retracts) matches the dark
     footer. Top overscroll also shows ink, which blends with the dark
     hero at the top of the page. Body provides the paper background for
     the actual content area. */
  background: var(--ink);
  /* Custom scrollbar matching the paper theme so it doesn't stand out. */
  scrollbar-color: rgba(20, 14, 10, 0.25) var(--paper);
  /* Native anchor-scroll / back-forward fallback — mirrors the Lenis offset
     (see getHeaderOffset() in main.js). Keeps anchored targets clear of the
     sticky header when JS doesn't intercept the click. */
  scroll-padding-top: 96px;
}
@media (max-width: 640px) {
  html {
    scroll-padding-top: 80px;
  }
}
section[id],
[id="book"] {
  scroll-margin-top: 96px;
}
@media (max-width: 640px) {
  section[id],
  [id="book"] {
    scroll-margin-top: 80px;
  }
}
html::-webkit-scrollbar {
  width: 14px;
}
html::-webkit-scrollbar-track {
  background: var(--paper);
}
html::-webkit-scrollbar-thumb {
  background: rgba(20, 14, 10, 0.25);
  border: 3px solid var(--paper);
  border-radius: 7px;
}
html::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 14, 10, 0.4);
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Always fill the dynamic viewport so a retracting Safari toolbar never
     exposes an empty strip at the bottom. dvh reflects the current
     visible area after toolbar collapse. */
  min-height: 100vh;
  min-height: 100dvh;
  font-feature-settings: "ss01", "cv11";
  /* Flex column so the dark footer is pinned to the bottom of body when
     content is shorter than the viewport, preventing the paper background
     from showing below it on iOS Safari (dvh changes when toolbar hides). */
  display: flex;
  flex-direction: column;
}
body > .footer {
  margin-top: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  max-width: 100%;
  display: block;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}
summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}

:root {
  /* Accent (blue) + warm editorial palette */
  --red: #1456cf;
  --red-dark: #0e3fa0;
  --red-ink: #0a2b6e;
  --accent-soft: #e3ecff;

  --ink: #121010;
  --ink-2: #2a2624;
  --soft: #706660;

  --paper: #f6f1ea; /* warm off-white */
  --paper-2: #efe8de;
  --paper-3: #e8dfd1;
  --line: #dfd4c3;

  --cream: #f0e7d6;
  --ochre: #d47a3a;
  --ochre-soft: #e8c9a3;
  --sage: #a8b89a;
  --sage-soft: #d4dbc8;
  --blue-dusk: #2b3e5c;

  --white: #ffffff;
  --success: #2d7a4f;

  /* Shadows — softer, more natural */
  --sh-1: 0 1px 2px rgba(20, 14, 10, 0.05);
  --sh-2: 0 6px 16px rgba(20, 14, 10, 0.08);
  --sh-3: 0 20px 40px rgba(20, 14, 10, 0.1);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --pill: 999px;

  /* Typography */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, sans-serif;

  /* Transitions */
  --t: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}
.section {
  padding: 56px 0;
}
.section__head {
  max-width: 920px;
  margin: 0 auto 64px;
  text-align: center;
}
.section__head--split {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}
.section__head--split .eyebrow {
  margin-bottom: 18px;
}
.section__intro {
  font-size: 17px;
  color: var(--soft);
  line-height: 1.6;
  width: 100%;
}
.section__head--split .section__intro {
  justify-self: start;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--red);
  margin-bottom: 14px;
}
.eyebrow--light {
  color: rgba(255, 255, 255, 0.7);
}

.h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 14px;
}
.h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.link {
  color: var(--red);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link:hover {
  color: var(--red-dark);
}
.accent {
  color: var(--red);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 10000;
  font-weight: 600;
}
.skip:focus {
  left: 0;
}

/* ==========================================================================
   Visibility utilities — toggled by ACF `mobile_only` sub-fields.
   ========================================================================== */

@media (min-width: 641px) {
  .u-mobile-only {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .u-desktop-only {
    display: none !important;
  }
}

/* ==========================================================================
   Icons
   ========================================================================== */

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.icon--xs {
  width: 16px;
  height: 16px;
}
.icon--sm {
  width: 18px;
  height: 18px;
}
.icon--md {
  width: 28px;
  height: 28px;
}
.icon--lg {
  width: 40px;
  height: 40px;
}
.back-top .icon,
.reviews__nav .icon,
.nav__close .icon,
.modal__close .icon {
  stroke-width: 2.2;
}

/* ==========================================================================
   Buttons — pill-shaped, confident
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--pill);
  transition: all var(--t);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  line-height: 1;
}
.btn--primary {
  background: var(--ink);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--red);
  transform: translateY(-1px);
}
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn--outline:hover {
  background: var(--red);
  color: var(--white);
  border: var(--red) solid 1.5px;
}
.btn--white {
  background: var(--white);
  color: var(--ink);
}
.btn--white:hover {
  background: var(--red);
  color: var(--white);
}
.btn--link-light {
  color: rgba(255, 255, 255, 0.85);
  padding: 14px 0;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.btn--link-light:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.btn--xl {
  padding: 18px 34px;
  font-size: 16px;
}
.btn--sm {
  padding: 9px 18px;
  font-size: 13px;
}
.btn--block {
  width: 100%;
}

/* ==========================================================================
   Responsive — base primitives
   ========================================================================== */

@media (max-width: 1100px) {
  .section__head--split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .section__intro {
    justify-self: start;
  }
}

@media (max-width: 768px) {
  /* iOS zoom prevention — text inputs/textarea must be ≥16px.
     Select opens a native wheel picker (no keyboard → no zoom), so it can
     stay smaller — important so long options don't get clipped. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="submit"]
    ):not([type="button"]):not([type="hidden"]),
  textarea {
    font-size: 16px !important;
  }
  select {
    font-size: 14px !important;
  }
  .section__head {
    margin-bottom: 40px;
  }
  .section__head--split {
    gap: 14px;
  }
  .section__intro {
    font-size: 15px;
    line-height: 1.55;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 56px 0;
  }
  .container {
    padding: 0 18px;
  }
  .btn,
  .btn--sm {
    min-height: 44px;
  }
  .btn--xl {
    min-height: 50px;
    padding: 14px 24px;
    font-size: 15px;
  }
  .h2 {
    font-size: clamp(22px, 6.2vw, 26px);
    line-height: 1.1;
  }
  .h3 {
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.25;
  }
  .section__head {
    margin-bottom: 32px;
  }
  .section__intro {
    font-size: 14.5px;
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
}

@media (max-width: 380px) {
  .container {
    padding: 0 16px;
  }
  .h2 {
    font-size: 22px;
  }
  .section__intro {
    font-size: 14px;
  }
  .btn--xl {
    min-height: 46px;
    padding: 12px 20px;
    font-size: 14px;
  }
}