/* ==========================================================================
   BEYOND — design system
   Tokens -> base -> layout -> components -> sections -> utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Breakpoints used throughout this file (documented here, applied via
   @media since CSS has no native token for media queries):
     sm  = 600px   (large phone / small tablet)
     md  = 900px   (tablet, nav switches to horizontal)
     lg  = 1200px  (desktop)
     xl  = 1600px  (large / 4K displays)
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-primary: #f5efe3;
  --color-secondary: #fe7928;
  --color-background: #f5efe3;
  --color-text: #333333;
  /* #756f61 measured ~4.36:1 on --color-background, just under the 4.5:1
     minimum for normal text; darkened slightly to clear it with margin. */
  --color-muted: #6a6357;
  --color-accent: #fe7928;

  /* Supporting neutrals (derived from brand palette for surfaces/contrast) */
  --color-surface: #ffffff;
  --color-surface-alt: #ece2cd;
  --color-border: #e2d8c3;
  --color-accent-dark: #d9601a;
  --color-dark: #201c15;
  --color-dark-text: #f5efe3;
  --color-dark-muted: #b9b2a2;

  /* Spacing scale — never invent values outside this list */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-lg: 1.125rem;
  --leading-body: 1.7;
  --leading-heading: 1.15;
  --type-ratio: 1.25;

  /* Layout */
  --container-width: 85%;
  --container-max: 1360px;
  --container-narrow: 760px;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-pill: 0;
  --shadow-card: 0 20px 45px -24px rgba(32, 28, 21, 0.35);
  --shadow-soft: 0 12px 28px -20px rgba(32, 28, 21, 0.25);
  --border-thin: 1px solid var(--color-border);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 0.35s;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Visible, accessible focus state everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -6rem;
  background: var(--color-dark);
  color: var(--color-dark-text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--duration) var(--ease);
}

.skip-link:focus {
  top: var(--space-4);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   Fluid scale via clamp(); base text stays in rem so it honours the
   user's browser font-size setting.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

h2 {
  font-size: clamp(1.875rem, 1.55rem + 1.4vw, 3rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.375rem, 1.22rem + 0.7vw, 1.875rem);
}

h4 {
  font-size: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
}

h5 {
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h6 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

p {
  margin: 0 0 var(--space-4);
  max-width: 62ch;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 42ch;
}

.text-muted {
  color: var(--color-muted);
}

/* Typographic rules: no justified text, single-letter conjunctions never
   dangle alone at a line end (nbsp inserted in markup, not CSS). */
p,
li {
  text-align: left;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
}

.container--narrow {
  width: var(--container-width);
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-16);
}

.section--tight {
  padding-block: var(--space-12);
}

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-12);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.surface {
  background: var(--color-surface);
}

.surface-alt {
  background: var(--color-surface-alt);
}

.surface-dark {
  background: var(--color-dark);
  color: var(--color-dark-text);
}

.surface-dark h1,
.surface-dark h2,
.surface-dark h3,
.surface-dark h4,
.surface-dark p {
  color: inherit;
}

.grid {
  display: grid;
  gap: var(--space-8);
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   5. COMPONENT — buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--color-secondary);
  /* Dark text on the brand orange: white text here measures ~2.6:1, well
     below the 4.5:1 minimum. Dark text on the same orange measures ~4.8:1. */
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  filter: brightness(0.94);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: currentColor;
}

.btn-outline:hover {
  background: var(--color-text);
  color: var(--color-primary);
}

.surface-dark .btn-outline {
  color: var(--color-dark-text);
  border-color: var(--color-dark-muted);
}

.surface-dark .btn-outline:hover {
  background: var(--color-dark-text);
  color: var(--color-dark);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------------
   6. COMPONENT — navbar
   -------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 239, 227, 0.92);
  border-bottom: var(--border-thin);
}

/* Blur lives on a pseudo-element, not on .navbar itself: backdrop-filter on
   an ancestor creates a new containing block for position:fixed descendants
   (the off-canvas mobile menu below), which breaks its full-viewport sizing. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.navbar__logo {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  letter-spacing: 0.02em;
}


.navbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
}

.navbar__menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(20rem, 85%);
  background: var(--color-surface);
  padding: var(--space-16) var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--duration) var(--ease);
  box-shadow: var(--shadow-card);
}

.navbar__menu[data-open="true"] {
  transform: translateX(0);
}

.navbar__menu a {
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: 600;
}

.navbar__close {
  align-self: flex-end;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text);
}

.navbar__cta {
  margin-top: auto;
}

@media (min-width: 900px) {
  .navbar__toggle,
  .navbar__close {
    display: none;
  }

  .navbar__menu {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    padding: 0;
    box-shadow: none;
    background: transparent;
    transform: none;
    gap: var(--space-8);
  }

  .navbar__menu a {
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .navbar__cta {
    margin-top: 0;
  }
}

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(32, 28, 21, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease);
  z-index: 90;
}

.nav-scrim[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .nav-scrim {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. COMPONENT — hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-12);
}

/* Named areas (rather than relying on source order / the `order` property)
   so the mobile layout can slot the book between the headline and the rest
   of the copy, while the desktop layout keeps the original two columns. */
.hero__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
  grid-template-areas:
    "lead"
    "figure"
    "details";
}

.hero__lead {
  grid-area: lead;
}

.hero__figure {
  grid-area: figure;
}

.hero__details {
  grid-area: details;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.hero__intro {
  font-size: var(--text-sm);
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-6);
}

.hero__badges li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.hero__badges li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-secondary);
}

.hero__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__figure {
  position: relative;
  min-height: clamp(24rem, 22rem + 6vw, 30rem);
  --hero-panel-height: clamp(14rem, 12rem + 5vw, 17rem);
}

/* A wide, short bar centered on the figure, matching the book's centered
   overflow at the bottom edge; extended upward only (bottom edge stays put)
   by adding extra height above that centered baseline. */
.hero__figure::before {
  content: "";
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: calc(50% - (var(--hero-panel-height) / 2));
  height: calc(var(--hero-panel-height) + 4.5rem);
  background: var(--color-surface-alt);
  z-index: 0;
}

.hero__stack {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(22rem, 80%);
  transform: translate(-50%, -50%);
}

.hero__book {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  transition: transform var(--duration) var(--ease);
}

.hero__book:hover {
  transform: translateY(-6px);
}

/* Centered exactly on the panel's bottom-right corner: right/bottom put
   the badge's own corner at that point, then translate(50%, 50%) shifts
   it by half its own size so the corner point lands on its center. */
.hero__badge {
  position: absolute;
  z-index: 2;
  right: var(--space-6);
  bottom: calc(50% - (var(--hero-panel-height) / 2));
  transform: translate(50%, 50%);
  width: 5rem;
  height: 5rem;
  background: var(--color-secondary);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  padding: var(--space-2);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "lead    figure"
      "details figure";
    row-gap: var(--space-6);
    column-gap: var(--space-12);
  }
}

/* --------------------------------------------------------------------------
   8. COMPONENT — highlight strip
   -------------------------------------------------------------------------- */
.highlights {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-block: var(--space-8);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
}

.highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.highlight__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--color-surface-alt);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.highlight h3 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.highlight p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

@media (min-width: 600px) {
  .highlights {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   9. COMPONENT — about / editorial section
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

/* About the book only (not the other sections sharing .about__grid): on
   mobile, slot the photo between the heading and the body text, same as
   the hero. On desktop, heading + text stack in the same column next to
   the image, reproducing the original two-column look. */
.about-split {
  grid-template-areas:
    "heading"
    "figure"
    "text";
}

.about-split__heading {
  grid-area: heading;
  align-self: start;
}

.about-split__figure {
  grid-area: figure;
}

.about-split__text {
  grid-area: text;
  align-self: start;
}

/* Reusable photo frame: an offset accent block behind the image — the same
   layered-card device used for the book on the hero panel. Used wherever a
   section pairs a photo with a column of text (About the book, Behind the
   photographs). */
.framed-figure {
  position: relative;
  margin: var(--space-4) 0 0 var(--space-4);
  max-width: 19rem;
}

.framed-figure::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
  z-index: 0;
}

.framed-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 0.85fr 1.15fr;
    row-gap: var(--space-6);
    column-gap: var(--space-16);
  }

  .about-split {
    grid-template-areas:
      "figure heading"
      "figure text";
  }
}

/* --------------------------------------------------------------------------
   10. COMPONENT — spread showcase (Inside the book)
   -------------------------------------------------------------------------- */
.showcase {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--color-dark);
}

.showcase img {
  width: auto;
  height: auto;
  max-width: 100%;
  /* Capped rather than filling the slide: the whole photo stays visible,
     uncropped, while keeping the section compact. */
  max-height: 55vh;
  margin-inline: auto;
  display: block;
}

.showcase__caption {
  padding: var(--space-6) var(--space-8);
  background: var(--color-dark);
  color: var(--color-dark-text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.showcase__caption p {
  color: var(--color-dark-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* --------------------------------------------------------------------------
   10b. COMPONENT — carousel (Inside the book: paging through spreads)
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
  /* Roughly matches the photos' own rendered width at the capped height,
     so the arrows (inset from this box) sit close to the image rather
     than floating in the wide container's empty margins. */
  max-width: 52rem;
  margin-inline: auto;
}

.carousel__viewport {
  overflow: hidden;
  /* Room for the showcase's own box-shadow to render fully — overflow:hidden
     otherwise clips it hard at the edge, which reads as a strange cut-off
     shadow line right under the photo. */
  padding: 0.5rem 0 2rem;
}

/* All slides stack in the same grid cell (crossfade) rather than sitting
   side by side and sliding — with images of varying rendered widths
   (centred, uncropped), a horizontal slide looked disjointed, like it was
   travelling through empty space. Grid still sizes the row to the tallest
   slide, same as the flex row it replaces. */
.carousel__track {
  display: grid;
}

.carousel__slide {
  grid-area: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.carousel__slide[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  background: var(--color-surface);
  border: none;
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.carousel__arrow:hover {
  background: var(--color-text);
  color: var(--color-surface);
  transform: translateY(-50%) scale(1.08);
}

.carousel__arrow--prev {
  left: var(--space-3);
}

.carousel__arrow--next {
  right: var(--space-3);
}

.carousel__status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* The viewport already carries extra bottom padding for its shadow. */
  margin-top: var(--space-2);
}

.carousel__progress {
  flex: 1;
  height: 2px;
  background: var(--color-border);
}

.carousel__progress-bar {
  display: block;
  height: 100%;
  background: var(--color-secondary);
  transition: width var(--duration) var(--ease);
}

.carousel__count {
  flex: none;
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. COMPONENT — pricing / CTA card (Buy & Support)
   -------------------------------------------------------------------------- */
.offer-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
}

.offer-card__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.75rem);
}

.offer-card__price small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  display: block;
  font-weight: 400;
}

/* The offer card stays a light surface even when its section is dark
   (.surface-dark otherwise makes headings/paragraphs inherit light text,
   which would vanish against the card's white background). */
.surface-dark .offer-card,
.surface-dark .offer-card h2,
.surface-dark .offer-card h3,
.surface-dark .offer-card p {
  color: var(--color-text);
}

.surface-dark .offer-card .note,
.surface-dark .offer-card .text-muted {
  color: var(--color-muted);
}

.surface-dark .offer-card .btn-outline {
  color: var(--color-text);
  border-color: var(--color-text);
}

.surface-dark .offer-card .btn-outline:hover {
  background: var(--color-text);
  color: var(--color-primary);
}


.divider {
  border: none;
  border-top: var(--border-thin);
  margin: 0;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-list i {
  flex: none;
  width: 1.25rem;
  text-align: center;
  color: var(--color-accent-dark);
}

.contact-list a {
  text-decoration: none;
  font-weight: 600;
}

.contact-list a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   13. COMPONENT — form
   -------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .form__row--split {
    grid-template-columns: 1fr 1fr;
  }
}

.form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: inherit;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--color-accent);
}

.form select {
  /* Replace the browser's own dropdown arrow (inconsistent position/style
     across browsers) with a custom one placed consistently on the right. */
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 0.875rem;
}

.form textarea {
  min-height: 7rem;
  resize: vertical;
}

.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  font-size: var(--text-sm);
  min-height: 1.25em;
}

.form__status[data-state="success"] {
  color: #2f6b3a;
}

.form__status[data-state="error"] {
  color: #b23a2f;
}

.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  background: var(--color-surface-alt);
}

.price-breakdown__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.price-breakdown__row dt,
.price-breakdown__row dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.price-breakdown__row--total {
  padding-top: var(--space-2);
  border-top: var(--border-thin);
}

.price-breakdown__row--total dt,
.price-breakdown__row--total dd {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   14. COMPONENT — footer
   -------------------------------------------------------------------------- */
.footer {
  padding-block: var(--space-16) var(--space-8);
}

.footer__top {
  display: grid;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}


.footer nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer nav a {
  text-decoration: none;
  color: var(--color-dark-muted);
  font-size: var(--text-sm);
}

.footer nav a:hover {
  color: var(--color-dark-text);
}

.footer h6 {
  color: var(--color-dark-muted);
  margin-bottom: var(--space-4);
}

.footer__legal {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(245, 239, 227, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-dark-muted);
}

.footer__legal a {
  text-decoration: underline;
  color: var(--color-dark-muted);
}

.footer__legal a:hover {
  color: var(--color-dark-text);
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .footer__top {
    grid-template-columns: 1.2fr 0.6fr 0.6fr 0.9fr;
  }
}

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.lead--center {
  margin-inline: auto;
  /* The global `p { text-align: left }` rule below otherwise wins over the
     inherited center alignment from an ancestor, since a rule matching the
     element directly always beats an inherited value. */
  text-align: center;
}

.grid--top {
  align-items: flex-start;
}

.grid--middle {
  align-items: center;
}

.cluster--center {
  justify-content: center;
}

.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.mb-0 {
  margin-bottom: 0;
}

.mt-12 {
  margin-top: var(--space-12);
}

.note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0;
}

.form-title {
  font-size: var(--text-lg);
  margin-bottom: 0;
}

.footer__tagline,
.footer__contact {
  color: var(--color-dark-muted);
  font-size: var(--text-sm);
}

/* 404 page only: full viewport height, footer pinned to the bottom. */
.page-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-404 main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-404 .error-page {
  padding-block: var(--space-8);
}

.page-404 .footer {
  flex: none;
}

.legal-content h1 {
  margin-bottom: var(--space-2);
}

.legal-content .lead {
  margin-bottom: var(--space-12);
}

.legal-content h2 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text);
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.legal-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-content p {
  color: var(--color-muted);
}

.legal-content ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0 0 var(--space-4);
}

.legal-content li {
  margin-bottom: var(--space-2);
  max-width: 62ch;
  color: var(--color-muted);
}

.legal-content li::marker {
  color: var(--color-accent);
}

.legal-content .legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
}

.legal-content .legal-back:hover {
  color: var(--color-accent);
  border-color: currentColor;
}

.legal-content .legal-back::before {
  content: "←";
}

.error-page {
  text-align: center;
}

.error-page .lead,
.error-page p {
  margin-inline: auto;
}

.error-page .btn {
  margin-top: var(--space-4);
}

.thank-you-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
  background: var(--color-surface-alt);
  color: var(--color-accent-dark);
  font-size: 1.375rem;
}

.error-code {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.9rem + 2.4vw, 6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 var(--space-2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

[data-reveal="true"] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 1600px) {
  :root {
    --container-max: 1560px;
  }
}