/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background-color: var(--accent-700);
  border-color: var(--accent-700);
  color: #fff;
}

.btn--outline {
  background-color: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--brand-900);
  color: var(--brand-900);
}

.section--dark .btn--outline {
  border-color: var(--line-dark);
  color: var(--on-dark);
}

.section--dark .btn--outline:hover {
  border-color: var(--on-dark);
  background-color: rgba(253, 246, 243, 0.08);
  color: var(--on-dark);
}

.btn--ghost {
  min-height: var(--tap);
  padding: 0.5rem 0;
  background: none;
  border: 0;
  color: var(--brand-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.btn--ghost:hover {
  color: var(--accent-700);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ==========================================================================
   Wordmark
   ========================================================================== */

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-900);
  text-decoration: none;
  white-space: nowrap;
}

/* The header wordmark is also the home link, so it needs a real 44px tap
   target. The footer wordmark (a <span>, not a link) does not, so this is
   scoped to the anchor only. */
a.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.wordmark__tld {
  color: var(--accent);
}

.site-footer .wordmark {
  color: var(--on-dark);
}

.site-footer .wordmark__tld {
  color: var(--on-dark-muted);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* No backdrop-filter here. A filter (or backdrop-filter) on an ancestor
   establishes a containing block for position: fixed descendants, which would
   confine the off-canvas .site-nav panel to the header's own ~68px box instead
   of the viewport. Confirmed live: the opened panel rendered 88px tall with
   most links unclickable beneath page content. */
.site-header {
  position: sticky;
  top: 0;
  /* z-order: .site-header (106) > .nav-backdrop (105) > .site-nav (110, but
     nested — see below).
     .site-header establishes its own stacking context (position + z-index),
     and #site-nav lives inside it in the DOM. That means #site-nav's own
     z-index: 110 only decides stacking among the header's contents; it can
     never let #site-nav out-rank anything outside the header, no matter how
     high that number is. The header's own z-index is what competes with
     .nav-backdrop (105) — so the header has to sit above 105 for the nav
     panel nested inside it to paint, and hit-test, above the backdrop.
     Deliberate consequence: the scrim dims #main and the footer but not the
     header, so the toggle's X stays visible and clickable while the panel is
     open — the conventional pattern, and preferable to a backdrop that also
     covers the close control. */
  z-index: 106;
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-base) var(--ease);
}

.site-header[data-scrolled] {
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--header-h);
  transition: min-height var(--dur-base) var(--ease);
}

/* Compact on scroll — desktop only, where there is height to spare */
@media (min-width: 768px) {
  .site-header[data-scrolled] .site-header__inner {
    min-height: 60px;
  }
}

/* --- Toggle (mobile only) ------------------------------------------------ */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-1);
  background: none;
  border: 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand-900);
}

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 20px;
}

.nav-toggle__bars span {
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Nav panel ----------------------------------------------------------- */

.site-nav {
  position: fixed;
  inset: var(--header-h) 0 0 auto;
  z-index: 110;
  width: min(88vw, 360px);
  padding: var(--space-3) var(--gutter) var(--space-6);
  background-color: var(--surface);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease),
              visibility 0s linear var(--dur-slow);
}

body[data-nav-open] .site-nav {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease), visibility 0s;
}

.site-nav__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--accent-700);
}

.site-nav__cta {
  width: 100%;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  /* Must stay below .site-header's z-index: 106. The header nests #site-nav
     inside its own stacking context, so this value is what actually decides
     whether the nav panel (and its close button) paint above or below the
     scrim — raising this to 106+ would bury the open panel and its links
     under the backdrop again. See the z-order comment on .site-header. */
  z-index: 105;
  background-color: rgba(28, 20, 22, 0.45);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

body[data-nav-open] .nav-backdrop {
  opacity: 1;
}

@media (min-width: 1024px) {
  .nav-toggle,
  .nav-backdrop {
    display: none;
  }

  .site-nav {
    position: static;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .site-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-3);
    margin: 0;
  }

  .site-nav__list a {
    min-height: auto;
    padding: 0.25rem 0;
    border: 0;
    font-size: var(--step--1);
    font-weight: 600;
    /* A multi-word item must never break mid-label: the row would grow to two
       lines and the whole bar would go ragged. If the set of links ever gets
       long enough not to fit, that is a signal to shorten the menu, not to let
       it wrap silently. */
    white-space: nowrap;
  }

  .site-nav__list a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  .site-nav__cta {
    width: auto;
    padding: 0.6rem 1.1rem;
    /* Match the menu links (--step--1). The default .btn size (--step-0) made
       the CTA read a notch larger than every link beside it, so the bar looked
       like two different type scales sitting on one row. */
    font-size: var(--step--1);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--brand-900);
  color: var(--on-dark-muted);
  padding-block: var(--space-6) var(--space-4);
}

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

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-5);
  }
}

.site-footer__brand p {
  margin-top: var(--space-2);
  max-width: 34ch;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: var(--space-2);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--on-dark-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--on-dark);
  text-decoration: underline;
}

/* --- Items with no destination -------------------------------------------
   An item with no href names a page these variations do not carry. It keeps
   its place in the menu and the footer so the shape of the navigation still
   reads, but it must not invite a click it cannot answer: no pointer, and
   none of the hover feedback its linked neighbours give.
   -------------------------------------------------------------------------- */

.site-nav__list a:not([href]),
.site-footer a:not([href]) {
  cursor: default;
}

.site-nav__list a:not([href]):hover {
  color: var(--ink);
}

.site-footer a:not([href]):hover {
  color: var(--on-dark-muted);
  text-decoration: none;
}

.site-footer__base {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-dark);
  display: grid;
  gap: var(--space-1);
  font-size: var(--step--1);
}

.site-footer__note {
  max-width: 70ch;
}

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */

.wa-fab {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--brand-900);
  color: var(--on-dark);
  box-shadow: var(--shadow-md);
  transition: background-color var(--dur-base) var(--ease);
}

.wa-fab:hover {
  background-color: var(--brand-700);
  color: var(--on-dark);
}

.wa-fab__icon {
  width: 28px;
  height: 28px;
}

/* Keep the FAB clear of page content */
body {
  padding-bottom: calc(56px + var(--space-4) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .wa-fab {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion {
  border-top: 1px solid var(--line);
  max-width: 60rem;
}

.accordion__item {
  border-bottom: 1px solid var(--line);
}

.accordion__item h3 {
  margin: 0;
  font-size: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--brand-900);
  transition: color var(--dur-fast) var(--ease);
}

.accordion__trigger:hover {
  color: var(--accent-700);
}

.accordion__question {
  flex: 1;
}

.accordion__icon {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: var(--accent);
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-base) var(--ease);
}

.accordion__icon::before {
  width: 1.25rem;
  height: 2px;
}

.accordion__icon::after {
  width: 2px;
  height: 1.25rem;
}

[aria-expanded="true"] .accordion__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion__panel {
  padding-bottom: var(--space-3);
  max-width: var(--measure);
}

/* Before JS runs, panels are open. After init, `hidden` governs them. */
.accordion__panel[hidden] {
  display: none;
}

/* ==========================================================================
   Form
   ========================================================================== */

.form {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
  max-width: 34rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--brand-900);
}

.field__req {
  color: var(--accent);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.65rem 0.85rem;
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-muted);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--brand-700);
  box-shadow: inset 3px 0 0 var(--brand-700);
}

.field__hint {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* Errors use brand maroon, never --accent: red belongs to actions. */
.field__error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand-700);
}

.field__error[hidden] {
  display: none;
}

.form__submit {
  justify-self: start;
}

.form__disclaimer {
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: 52ch;
}

/* --- Summary and success panels ------------------------------------------ */

.form-summary,
.form-success {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-left: 4px solid;
}

.form-summary[hidden],
.form-success[hidden] {
  display: none;
}

.form-summary {
  background-color: var(--surface-2);
  border-left-color: var(--brand-700);
}

.form-summary__title {
  font-weight: 700;
  color: var(--brand-900);
}

.form-summary__list {
  margin-top: var(--space-1);
  padding-left: 1.25rem;
  display: grid;
  gap: 0.25rem;
}

.form-summary__list a {
  color: var(--brand-700);
}

.form-success {
  background-color: var(--surface-2);
  border-left-color: var(--accent);
}

.form-success h3 {
  color: var(--brand-900);
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   Media
   --------------------------------------------------------------------------
   Every photograph on the page carries .media and needs no other styling.
   ========================================================================== */

.media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* Every image follows the content it illustrates, so the top gap is universal.
   The bottom gap only applies when something follows the image inside the same
   container (a CTA button, for instance) — where the image is last, the section
   or card padding already provides the space. */
.media {
  margin-top: var(--space-5);
}

.media:not(:last-child) {
  margin-bottom: var(--space-5);
}