/* ===== Added sections: process, FAQ, contact, footer =====
   Additive only. Uses the existing tokens (--cream, --brown-dark,
   --brown-text, --gap, --font-display, --font-body) and the same visual
   language as the bands above: cream ground, Benton for display type,
   Jost for everything else, wide-tracked uppercase for small labels,
   and the 6px gutter as the unit of spacing. */

.sec {
  padding: 14vh calc(var(--gap) * 4);
  background: var(--cream);
}

.sec__inner {
  max-width: 1200px;
  margin-inline: auto;
}

/* Small tracked label that sits above a heading. */
.sec__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brown-text);
  opacity: 0.75;
  margin-bottom: 1.5em;
}

/* The visible gap under an eyebrow is mostly the empty band above the
   capitals inside the line box, not margin. text-box trims the box to the
   cap height; the negative margin approximates it where that is not
   supported. Same treatment on both display headings. */
.sec__title,
.reviews__title {
  margin-top: -0.2em;
}

@supports (text-box: trim-both cap alphabetic) {
  .sec__title,
  .reviews__title {
    text-box: trim-both cap alphabetic;
    margin-top: 0;
  }
}

.sec__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.2rem);
  /* Benton's caps fill only part of the em box, so 1.02 still reads as a
     wide gap between lines at display sizes. 0.9 closes it without letting
     descenders collide with the line beneath. */
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--brown-dark);
  margin-bottom: 0.45em;
}

.sec__lede {
  margin-top: 1.2em;
  max-width: 46ch;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  line-height: 1.6;
  color: var(--brown-text);
}

/* ===== Shared button =====
   Same ink-wipe idea as the hero CTA, inverted for a cream ground:
   outlined by default, brown fill sweeps in on hover. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.5em;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--brown-dark);
  background: var(--brown-dark);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.15em 1.8em;
  cursor: pointer;
  transition:
    color 0.55s cubic-bezier(0.65, 0, 0.35, 1),
    letter-spacing 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn:hover,
.btn:focus-visible {
  color: var(--brown-dark);
  letter-spacing: 0.22em;
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

/* For use on the dark footer: starts cream, wipes to brown. */
.btn--light {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--brown-dark);
}
.btn--light::before { background: var(--brown-dark); }
.btn--light:hover,
.btn--light:focus-visible { color: var(--cream); }

/* ===== Process ===== */

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8vw;
  margin-top: 6vh;
}

/* The step is the positioning context for the number that hangs over
   the image. */
.step { position: relative; }

/* Same 4:3 crop as the services cards, so the two rows of imagery read as
   one system down the page. The bottom margin leaves room for the half of
   the numeral that sits below the photo. */
.step__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.35em;
}

.step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Oversized cream numeral straddling the bottom edge of the photo.
   translateY(-0.34em) lifts it so roughly a third overlaps the image and
   the rest breaks onto the cream below, which is what gives the editorial
   feel. Being em-based, the overlap holds at every size. */
.step__num {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8vw, 9rem);
  line-height: 0.8;
  /* Digits set almost flush so the pair reads as one mark. */
  letter-spacing: -0.07em;
  color: var(--cream);
  opacity: 1;
  /* Lifted far enough that the whole numeral sits on the photo, with its
     baseline landing at the image's bottom edge. em-based, so the position
     holds as the type scales. */
  transform: translateY(-0.72em);
  margin-bottom: -0.56em;
  pointer-events: none;
}

.step__title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown-dark);
  margin-bottom: 0.9em;
}

.step__copy {
  font-size: clamp(0.8rem, 0.95vw, 0.95rem);
  line-height: 1.6;
  color: var(--brown-text);
}

/* ===== FAQ ===== */

/* Heading on the left, accordion on the right, matching source order. */
.faq__layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 6vw;
  align-items: start;
}

.faq__list { border-top: 1px solid rgba(58, 44, 31, 0.22); }

.faq__item { border-bottom: 1px solid rgba(58, 44, 31, 0.22); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  padding: 1.5em 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.15vw, 1.08rem);
  color: var(--brown-dark);
  transition: opacity 0.35s ease;
}

.faq__q:hover { opacity: 0.62; }

/* Plus that becomes a minus. */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--brown-dark);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }

/* Height animation via grid rows: works with content of unknown height. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
  padding-bottom: 1.8em;
  max-width: 58ch;
  font-size: clamp(0.8rem, 0.95vw, 0.95rem);
  line-height: 1.65;
  color: var(--brown-text);
}

.faq__more { margin-top: 3.5vh; }

/* ===== Contact ===== */

.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 6vw;
  align-items: start;
}

.contact__details {
  margin-top: 4vh;
  display: grid;
  gap: 1.6em;
}

.contact__label {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brown-text);
  opacity: 0.7;
  margin-bottom: 0.5em;
}

.contact__value {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  color: var(--brown-dark);
  text-decoration: none;
  line-height: 1.5;
}

a.contact__value:hover { opacity: 0.6; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4em;
}

.field { margin-bottom: 1.4em; }

.field label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown-text);
  opacity: 0.75;
  margin-bottom: 0.7em;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  /* Full box rather than a single underline: the hit area reads clearly. */
  border: 1px solid rgba(58, 44, 31, 0.28);
  border-radius: 0;
  padding: 0.85em 1em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--brown-dark);
  transition: border-color 0.35s ease, background 0.35s ease;
}

.field input:not([type="checkbox"]):not([type="radio"]):hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(58, 44, 31, 0.5);
}

.field textarea { resize: vertical; min-height: 6em; }

.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brown-dark);
  background: rgba(255, 255, 255, 0.45);
}

.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.4em;
  /* Caret drawn as a background gradient pair, so no icon asset is needed. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brown-dark) 50%),
    linear-gradient(135deg, var(--brown-dark) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: calc(100% - 1.15em) center, calc(100% - 0.8em) center;
  background-repeat: no-repeat;
}

.form__note {
  margin-top: 1.6em;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--brown-text);
  opacity: 0.7;
}

/* ===== Footer =====
   Editorial layout: a masthead statement with the email set as the main
   move, hairline-ruled columns underneath, then the wordmark oversized and
   cropped at the baseline the way a magazine sets a back cover. */

.footer {
  position: relative;
  /* Own stacking context, so the cacti below can sit at z-index -1 and land
     above the footer's own background instead of behind the page. */
  isolation: isolate;
  background: var(--brown-dark);
  color: var(--cream);
  padding: 13vh calc(var(--gap) * 4) 0;
  overflow: hidden;
}

/* Cacti in the bottom right corner, behind everything in the footer.
   The PNG supplies only the shape: it is a mask, and the colour comes from
   background-color, so it is one flat tone a few shades under the footer
   and can be retuned here without touching the file. */
.footer__cacti {
  --cacti-size: 42vw;

  position: absolute;
  z-index: -1;
  right: -2vw;
  bottom: 0;
  width: var(--cacti-size);
  height: var(--cacti-size);
  background-color: #16444d;
  -webkit-mask: url(../images/home/6.png) no-repeat bottom right / contain;
          mask: url(../images/home/6.png) no-repeat bottom right / contain;
}

/* The wordmark is absolutely positioned at the footer's bottom edge, so it
   takes no space in flow. This padding reserves the part of it that shows
   and keeps the legal bar clear of it.

   Measured from the glyphs, not the box: line-height 0.72 is less than 1, so
   the letters overflow their own line box and the cap tops sit about 0.61em
   above the footer's bottom edge. At 33vw that is ~20vw, plus a little air.
   Padding here, not margin on the bar: that margin collapsed out of this
   container and added no height at all. */
.footer__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-bottom: 10vw;
}

/* --- Masthead --- */

.footer__masthead {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4vw;
  align-items: end;
}

.footer__say {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.footer__reach { justify-self: start; }

.footer__reach .footer__head {
  margin-bottom: 1em;
  padding-top: 0;
  border-top: 0;
}

/* Rule that grows in from the left on hover. */
.footer__mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  color: var(--cream);
  text-decoration: none;
  padding-bottom: 0.18em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.footer__mail:hover { background-size: 0% 1px; }

.footer__tel {
  display: block;
  margin-top: 1.1em;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.footer__tel:hover { opacity: 1; }

/* --- Columns --- */

.footer__top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  padding: 7vh 0 9vh;
}

.footer__head {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 1.8em;
  padding-top: 1.1em;
  border-top: 1px solid rgba(246, 242, 228, 0.18);
}

.footer__list { list-style: none; display: grid; gap: 1em; }

.footer__list a,
.footer__contact a {
  position: relative;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.9rem;
  opacity: 0.82;
  transition: opacity 0.3s ease, padding-left 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.footer__list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.footer__list a:hover {
  opacity: 1;
  padding-left: 1.5em;
}

.footer__list a:hover::before { width: 1em; }

.footer__contact a:hover { opacity: 1; }

.footer__contact {
  display: grid;
  gap: 1em;
  font-size: 0.9rem;
  opacity: 0.82;
  line-height: 1.5;
}

/* --- Oversized wordmark ---
   Anchored to the bottom of the footer and pushed past it, so the page edge
   does the cropping. The legal bar then sits on top of the letterforms
   rather than below them.

   --wordmark-size sets the width (31.2vw ≈ full viewport for HAVEN in
   Benton); --wordmark-drop is how far it hangs below the page edge. */

.footer__wordmark {
  --wordmark-size: 33vw;
  --wordmark-drop: -0.3em;

  position: absolute;
  bottom: var(--wordmark-drop);
  left: 50%;
  /* The box hugs the text (max-content) and is then centred, rather than
     centring a line inside a 100vw box: an overflowing centred line gets
     anchored at the left edge by the browser, which threw all the overflow
     onto the right and made the word look shifted.
     max-content already measures the ink, so no trailing-space correction is
     needed here. --wordmark-shift is a free nudge if you want it off-centre. */
  --wordmark-shift: 0em;
  width: max-content;
  transform: translateX(calc(-50% + var(--wordmark-shift)));
  z-index: 0;

  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--wordmark-size);
  line-height: 0.72;
  letter-spacing: -0.035em;
  text-align: center;
  white-space: nowrap;
  /* A shade under the footer's --brown-dark, so the letters read as a
     debossed shape rather than a lighter overlay. */
  color: #f6f2e4;
  user-select: none;
  pointer-events: none;
}

/* --- Legal bar --- */

/* Full-bleed cream bar pinned to the bottom edge, sitting on top of the
   wordmark so the letters are cropped by it rather than colliding with the
   text. Negative inline margins let it escape the footer's own padding. */
.footer__bar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: space-between;
  align-items: center;
  margin-inline: calc(var(--gap) * -4);
  padding: 1.15em calc(var(--gap) * 4);
  background: var(--cream);
  color: var(--brown-dark);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__bar-right {
  display: flex;
  gap: 2em;
}

.footer__bar a {
  color: var(--brown-dark);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.footer__bar a:hover { opacity: 1; }

@media (max-width: 700px) {
  .footer__bar {
    justify-content: flex-start;
    gap: 0.7em 1.5em;
    font-size: 0.6rem;
  }
  .footer__bar-right { gap: 1.2em; }
}

/* ===== Scroll reveal (additive; matches the bands' 2.1s fade-up) ===== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 0.84, 0.44, 1),
    transform 1.2s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

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

/* ===== Responsive ===== */

@media (max-width: 900px) {
  .sec { padding: 10vh calc(var(--gap) * 3); }
  .process__grid,
  .faq__layout,
  .contact__layout { grid-template-columns: 1fr; gap: 5vh; }
  .footer__masthead { grid-template-columns: 1fr; gap: 5vh; align-items: start; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 6vh; }
  .footer__wordmark { --wordmark-size: 40vw; }
  .footer__inner { padding-bottom: 10vw; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* ===== Reviews marquee =====
   Two rows drifting in opposite directions at slightly different speeds.
   Each track holds the same set of cards twice; the animation moves it
   exactly -50%, so the second copy lands where the first began and the
   loop is seamless with no JS. */

.reviews {
  padding: 12vh 0 13vh;
  background: var(--cream);
  overflow: hidden;
}

.reviews__head {
  text-align: center;
  margin-bottom: 6vh;
  padding-inline: calc(var(--gap) * 4);
}

.reviews__head .sec__eyebrow { margin-bottom: 1.2em; }

.reviews__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brown-dark);
}

/* Fade the cards out at both edges so they drift in and out of nothing
   rather than being chopped off by the viewport. */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee + .marquee { margin-top: 1.6rem; }

.marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 1.6rem;
  padding-right: 1.6rem;
  will-change: transform;
  animation: marquee-left var(--speed, 64s) linear infinite;
}

.marquee--rtl .marquee__track { animation-name: marquee-right; }

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.marquee:hover .marquee__track { animation-play-state: paused; }

/* ===== Review card ===== */

.rev {
  flex: 0 0 auto;
  width: clamp(260px, 26vw, 380px);
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  padding: 2.2em 2.2em 1.9em;
  background: var(--white);
  border: 1px solid rgba(58, 44, 31, 0.12);
}

.rev__stars {
  display: flex;
  gap: 0.28em;
  color: #b0894f;
}

.rev__stars svg { width: 13px; height: 13px; display: block; }

.rev__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.98rem, 1.15vw, 1.18rem);
  line-height: 1.5;
  color: var(--brown-dark);
  margin: 0;
}

.rev__by {
  margin-top: auto;
  padding-top: 0.4em;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown-dark);
}

.rev__meta {
  margin-top: 0.5em;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--brown-text);
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ===== Two-form contact block ===== */

/* The whole block is a bordered card: tabs at the top, a scrolling field
   area, and the submit pinned underneath so it never scrolls out of reach. */
.forms {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(58, 44, 31, 0.28);
  background: rgba(255, 255, 255, 0.32);
  padding: 2.2em 2.4em 2em;
}

.forms__tabs {
  display: flex;
  gap: 2.2em;
  margin-bottom: 2.4em;
}

.contact__form {
  display: block;
  overflow-y: auto;
  max-height: 56vh;
  padding-right: 1.2em;
  margin-right: -0.4em;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 44, 31, 0.35) transparent;
}

.contact__form::-webkit-scrollbar { width: 4px; }
.contact__form::-webkit-scrollbar-track { background: transparent; }
.contact__form::-webkit-scrollbar-thumb { background: rgba(58, 44, 31, 0.3); }
.contact__form::-webkit-scrollbar-thumb:hover { background: rgba(58, 44, 31, 0.5); }

.form__foot {
  padding-top: 1.8em;
}

/* The first field sits right under the tabs; no extra top gap. */
.form__fields > .form__row:first-child .field,
.form__fields > .field:first-child { margin-top: 0; }

.forms__tab {
  position: relative;
  background: none;
  border: 0;
  padding: 0 0 1em;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brown-text);
  opacity: 0.5;
  transition: opacity 0.35s ease;
}

/* Rule that slides out under the active tab. */
.forms__tab::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--brown-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.forms__tab:hover { opacity: 0.8; }

.forms__tab.is-active { opacity: 1; }
.forms__tab.is-active::after { transform: scaleX(1); }

.contact__form.is-hidden { display: none; }

.form__row--three { grid-template-columns: repeat(3, 1fr); }

/* Fieldsets carry browser chrome by default; strip it back to a plain block. */
.field--group {
  border: 0;
  padding: 0;
  margin-top: 2.2em;
}

.field--group legend {
  padding: 0;
  margin-bottom: 1.1em;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown-text);
  opacity: 0.75;
}

/* --- Segmented radio --- */

.seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(58, 44, 31, 0.3);
}

.seg__opt { position: relative; }

.seg__opt + .seg__opt { border-left: 1px solid rgba(58, 44, 31, 0.3); }

/* Input stays in the DOM for keyboard and form data, visually replaced. */
.seg__opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.seg__opt span {
  display: block;
  padding: 1em 0.6em;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--brown-text);
  transition: background 0.35s ease, color 0.35s ease;
}

.seg__opt input:checked + span {
  background: var(--brown-dark);
  color: var(--cream);
}

.seg__opt input:focus-visible + span {
  outline: 2px solid var(--brown-dark);
  outline-offset: 2px;
}

/* --- Checkboxes --- */

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85em 1.6em;
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.75em;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--brown-text);
}

.choice input {
  appearance: none;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1px solid rgba(58, 44, 31, 0.45);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.choice input:checked {
  background: var(--brown-dark);
  border-color: var(--brown-dark);
}

/* Checkmark drawn with a rotated corner rather than an icon font. */
.choice input:checked::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  margin: 1px auto 0;
  border: solid var(--cream);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.choice input:focus-visible {
  outline: 2px solid var(--brown-dark);
  outline-offset: 2px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--brown-text);
  opacity: 0.38;
}

@media (max-width: 900px) {
  .form__row--three { grid-template-columns: 1fr 1fr; }
  .seg { grid-template-columns: 1fr 1fr; }
  .seg__opt:nth-child(3) { border-left: 0; }
  .seg__opt:nth-child(n+3) { border-top: 1px solid rgba(58, 44, 31, 0.3); }
  .choices { grid-template-columns: 1fr; }
}

/* `.field label` (uppercase, tracked, block) also matched the radio and
   checkbox labels, which are <label> elements inside a .field. Reassert the
   control styles at a higher specificity. */
.field--group .seg__opt,
.field--group .choice {
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}

.field--group .choice {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: 0.85rem;
  color: var(--brown-text);
}

.field--group .seg__opt {
  display: block;
  font-size: inherit;
}

.field--group .seg__opt span {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.64rem;
}

/* A nested scroll area is more trouble than help on a phone, so the field
   list returns to normal flow there. Declared last so it wins on order. */
@media (max-width: 900px) {
  .forms { padding: 1.6em 1.4em 1.4em; }
  .contact__form {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-right: 0;
  }
}