/* ==========================================================================
   Components — buttons, plates, cards, forms, quotes, accordion
   ========================================================================== */

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.75rem 0.34rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--brass-wash);
  color: var(--brass);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.eyebrow--plain { background: none; padding-inline: 0; color: var(--ink-3); }
.eyebrow--plain::before { background: var(--brass); }

/* ---------- Buttons ---------- */
/* The primary action is claret rather than ink. Ink was the same value as the
   body text, so the one thing on the page you are meant to press looked like
   punctuation. Claret is already in the palette, sits next to the brass without
   fighting it, and measures 7.6:1 against the paper it carries. */
.btn {
  --btn-bg: var(--cta-bg);
  --btn-fg: var(--cta-fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 1.35rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: -0.004em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: transform var(--d-press) var(--ease-out),
              box-shadow var(--d-hover) var(--ease-out),
              background-color var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out);
}

.btn:active { transform: scale(0.972); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: var(--shadow-2); }
}

/* The trailing glyph always sits inside its own disc */
.btn__disc {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--btn-fg) 14%, transparent);
  transition: transform 380ms var(--ease-out), background-color var(--d-hover) var(--ease-out);
}

.btn__disc svg { width: 0.75rem; height: 0.75rem; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__disc {
    transform: translate(3px, -2px) scale(1.06);
    background: color-mix(in srgb, var(--btn-fg) 24%, transparent);
  }
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line-2);
}

@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--surface); box-shadow: var(--shadow-1); }
}

.btn--brass { --btn-bg: var(--brass); --btn-fg: var(--paper); }
:root[data-theme="dark"] .btn--brass { --btn-fg: #17120A; }

.btn--sm { padding: 0.42rem 0.42rem 0.42rem 1rem; font-size: var(--t--2); gap: 0.55rem; }
.btn--sm .btn__disc { width: 1.5rem; height: 1.5rem; }

.btn--bare {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  padding-left: 0;
  box-shadow: none;
}

/* Quiet text link with a drawn rule */
.link-rule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.2rem;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.link-rule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-2);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out), background-color 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link-rule:hover::after { background: var(--brass); transform: scaleX(1.04); }
  .link-rule:hover svg { transform: translate(3px, -2px); }
}

.link-rule svg { width: 0.7rem; height: 0.7rem; color: var(--brass); transition: transform 320ms var(--ease-out); }

/* ---------- Section headers ---------- */
.head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

@media (min-width: 900px) {
  .head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--s-8);
  }
}

.head__title { max-width: 18ch; }
.head__lede { max-width: 46ch; color: var(--ink-2); font-size: var(--t-1); }

.rule-draw {
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}

[data-reveal="in"] .rule-draw, .rule-draw[data-reveal="in"] { transform: scaleX(1); }

/* ---------- Plate: the double bezel ---------- */
.plate {
  position: relative;
  padding: 6px;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}

.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg, var(--glass-edge-1), transparent 46%, var(--glass-edge-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.plate__core {
  position: relative;
  border-radius: calc(var(--r-xl) - 6px);
  background: var(--surface);
  box-shadow: var(--inner-lift);
  overflow: hidden;
}

.plate--flush { padding: 5px; }
.plate--flush .plate__core { border-radius: calc(var(--r-xl) - 5px); }

/* ---------- Figures ---------- */
.figure { position: relative; overflow: hidden; background: var(--surface-2); }
.figure img { width: 100%; height: 100%; object-fit: cover; }

.figure--4x3 { aspect-ratio: 4 / 3; }
.figure--3x2 { aspect-ratio: 3 / 2; }
.figure--1x1 { aspect-ratio: 1 / 1; }
.figure--4x5 { aspect-ratio: 4 / 5; }
.figure--16x10 { aspect-ratio: 16 / 10; }

/* The scrim has to hold 4.5:1 over a bright photograph, not just a dark one,
   so it stays near-opaque through the whole band the text occupies and only
   fades out above it. */
.figure__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-9) var(--s-4) var(--s-4);
  background: linear-gradient(to top,
    rgba(10, 8, 5, 0.88) 0%,
    rgba(10, 8, 5, 0.78) 42%,
    rgba(10, 8, 5, 0.32) 74%,
    rgba(10, 8, 5, 0) 100%);
  color: #F7F3EA;
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Listing card ---------- */
.listing {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 480ms var(--ease-out);
}

.listing__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.listing__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 900ms var(--ease-out), filter 600ms var(--ease-out);
}

.listing__index {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding-inline: 0.4rem;
  border-radius: var(--r-pill);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--brass);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.listing__status {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.listing__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.listing__status[data-status="active"] { color: #2F6B45; }
.listing__status[data-status="pending"] { color: var(--brass); }
.listing__status[data-status="sold"] { color: var(--claret); }
:root[data-theme="dark"] .listing__status[data-status="active"] { color: #79C098; }

.listing__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
}

.listing__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.listing__price {
  font-family: var(--font-display);
  font-size: var(--t-2);
  letter-spacing: -0.02em;
  line-height: 1;
}

.listing__type {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Card link ----------
   The <a> sits on the address for a meaningful accessible name, and its
   ::after covers the card so the whole thing is clickable. z-index keeps it
   above the media veil but below nothing else, so no other control is
   swallowed; there are none inside a card today, and if one is added it needs
   a higher z-index to stay reachable. */
.listing[data-linked="true"] { cursor: pointer; }

.listing__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.listing__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

/* Focus lands on the link but has to read as the card being focused */
.listing:has(.listing__link:focus-visible) {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* An outbound mark, so it is clear the listing opens on remax.ca */
.listing__link::before {
  content: "";
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E561F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--d-hover) var(--ease-out), transform var(--d-hover) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .listing:hover .listing__link::before { opacity: 1; transform: scale(1); }
}

.listing:has(.listing__link:focus-visible) .listing__link::before { opacity: 1; transform: scale(1); }

.listing__address {
  font-size: var(--t-0);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.008em;
}

.listing__area { font-size: var(--t--1); color: var(--ink-3); }

.listing__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.listing__spec {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t--1);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.listing__spec svg { width: 0.875rem; height: 0.875rem; color: var(--ink-3); flex: 0 0 auto; }

/* Media reveal on hover: the rule draws, the frame breathes */
.listing__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(12, 10, 7, 0.55), transparent 55%);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .listing:hover .listing__media img { transform: scale(1.045); }
  .listing:hover .listing__veil { opacity: 1; }
  .listing:hover /* ---------- Card link ----------
   The <a> sits on the address for a meaningful accessible name, and its
   ::after covers the card so the whole thing is clickable. z-index keeps it
   above the media veil but below nothing else, so no other control is
   swallowed; there are none inside a card today, and if one is added it needs
   a higher z-index to stay reachable. */
.listing[data-linked="true"] { cursor: pointer; }

.listing__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.listing__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

/* Focus lands on the link but has to read as the card being focused */
.listing:has(.listing__link:focus-visible) {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* An outbound mark, so it is clear the listing opens on remax.ca */
.listing__link::before {
  content: "";
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E561F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--d-hover) var(--ease-out), transform var(--d-hover) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .listing:hover .listing__link::before { opacity: 1; transform: scale(1); }
}

.listing:has(.listing__link:focus-visible) .listing__link::before { opacity: 1; transform: scale(1); }

.listing__address { color: var(--brass); }
}

.listing:focus-visible { outline-offset: 8px; }

/* ---------- Stats ---------- */
/* Column gap is generous on purpose. Montserrat sets appreciably wider than
   the face this site launched with, and at the old 16px gap "17 days" ran
   straight into the next column. */
.stats {
  display: grid;
  gap: var(--s-6) var(--s-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat { display: flex; flex-direction: column; gap: 0.3rem; }

/* Sized so the longest value, "17 days", stays on one line in the narrowest
   column it ever sits in. nowrap is the guarantee: if a future value is longer
   it will overflow visibly rather than silently wrap and break the row. */
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.05vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  white-space: nowrap;
}

.stat__unit {
  margin-left: 0.28em;
  font-family: var(--font-ui);
  font-size: 0.46em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.stat__label {
  font-size: var(--t--2);
  color: var(--ink-3);
  letter-spacing: 0.02em;
  max-width: 22ch;
}

/* ---------- Quote ---------- */
.quote { display: grid; gap: var(--s-5); }

.quote__text {
  font-family: var(--font-display);
  font-size: var(--t-2);
  line-height: 1.34;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

.quote__by {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t--1);
  color: var(--ink-3);
}

.quote__by b { font-weight: 600; color: var(--ink-2); }

.quote__by::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--brass);
  flex: 0 0 auto;
}

/* ---------- Numbered steps ---------- */
.step { display: grid; gap: var(--s-3); }

.step__num {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.step__body { color: var(--ink-2); font-size: var(--t--1); max-width: 40ch; }

.listing__kind {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-ui);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

/* A listing the board has not photographed yet.

   Sized in normal flow rather than absolutely: the media box takes its height
   from the image's aspect ratio, so with no image an absolutely positioned
   placeholder collapsed the whole frame to nothing. */
.listing__blank {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 30%, var(--brass-wash), transparent 62%),
    var(--surface-2);
  color: var(--brass);
  overflow: hidden;
}

.listing__blank-art {
  width: min(52%, 11rem);
  height: auto;
  opacity: 0.5;
  transform: translateY(-6%);
}

/* Drawn on as the card comes in, so the placeholder animates like the rest of
   the page instead of sitting there inert. */
@media (prefers-reduced-motion: no-preference) {
  .listing__blank-art path,
  .listing__blank-art rect {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: draw-house 1.4s var(--ease-out) forwards;
  }

  .listing__blank-art path:nth-child(2) { animation-delay: 90ms; }
  .listing__blank-art path:nth-child(3) { animation-delay: 180ms; }
  .listing__blank-art rect:nth-child(4) { animation-delay: 260ms; }
  .listing__blank-art rect:nth-child(5) { animation-delay: 320ms; }
  .listing__blank-art path:nth-child(6) { animation-delay: 380ms; }
  .listing__blank-art path:nth-child(7) { animation-delay: 440ms; }
}

@keyframes draw-house { to { stroke-dashoffset: 0; } }

.listing__blank-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.65rem var(--s-4);
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Category sub-tabs ----------
   A bigger decision than the chips below them, so they read as a segmented
   control rather than another row of filters. */
.subtabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.subtab {
  min-height: 2.5rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .subtab:hover { color: var(--ink); }
}

.subtab[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* ---------- Filter controls ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  width: 100%;
}

/* ---------- Search ---------- */
.search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  max-width: 26rem;
}

.search__icon {
  position: absolute;
  left: 0.95rem;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--ink-3);
  pointer-events: none;
}

.search input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 2.6rem 0.55rem 2.65rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t--1);
  transition: border-color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out);
}

.search input::placeholder { color: var(--ink-3); }

.search input:focus-visible {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-wash);
}

.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.search__clear {
  position: absolute;
  right: 0.4rem;
  display: none;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out);
}

.search__clear svg { width: 0.75rem; height: 0.75rem; }
.search[data-filled="true"] .search__clear { display: grid; }

@media (hover: hover) and (pointer: fine) {
  .search__clear:hover { color: var(--ink); background: var(--brass-wash); }
}

.chipset { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  padding: 0.44rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t--1);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out),
              border-color var(--d-hover) var(--ease-out),
              transform var(--d-press) var(--ease-out);
}

.chip:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--line-2); color: var(--ink); }
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.select-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select-field select {
  appearance: none;
  padding: 0.5rem 2.2rem 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t--1);
  cursor: pointer;
  transition: border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .select-field select:hover { border-color: var(--line-2); color: var(--ink); }
}

.select-field svg {
  position: absolute;
  right: 0.85rem;
  width: 0.7rem;
  height: 0.7rem;
  color: var(--ink-3);
  pointer-events: none;
}

.result-count {
  margin-left: auto;
  font-size: var(--t--1);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- Empty state ---------- */
/* display:grid beats the user agent's [hidden] rule, so restate it here or the
   panel stays on screen underneath a full set of results. */
.empty[hidden] { display: none; }

.empty {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;
  padding: var(--s-11) var(--s-4);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--ink-2);
}

.empty svg { width: 2.25rem; height: 2.25rem; color: var(--ink-3); }

/* ---------- Form ---------- */
.form { display: grid; gap: var(--s-5); }

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

.field__label {
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field__label .req { color: var(--claret); margin-left: 0.15rem; }

.field input, .field textarea, .field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-0);
  transition: border-color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out);
}

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

.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 0.75; }

.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-wash);
}

.field__hint { font-size: var(--t--2); color: var(--ink-3); }

.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t--2);
  font-weight: 500;
  color: var(--claret);
}

.field__error svg { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; }

.field[data-invalid="true"] .field__error { display: flex; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: var(--claret); }

.form__status {
  display: none;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--t--1);
  color: var(--ink-2);
}

.form__status[data-state="ok"], .form__status[data-state="error"], .form__status[data-state="info"] { display: flex; }
.form__status[data-state="ok"] { border-color: var(--line-brass); }
.form__status[data-state="error"] { border-color: var(--claret); color: var(--claret); }
.form__status svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: 0.15rem; }

/* Honeypot: present for bots, gone for people and screen readers */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--line); }

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

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-1);
  font-weight: 500;
  letter-spacing: -0.008em;
  transition: color var(--d-hover) var(--ease-out);
}

.accordion summary::-webkit-details-marker { display: none; }

@media (hover: hover) and (pointer: fine) {
  .accordion summary:hover { color: var(--brass); }
}

.accordion summary svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  color: var(--ink-3);
  transition: transform 320ms var(--ease-out), color var(--d-hover) var(--ease-out);
}

.accordion details[open] summary svg { transform: rotate(45deg); color: var(--brass); }

.accordion__body {
  padding-bottom: var(--s-5);
  max-width: 60ch;
  color: var(--ink-2);
  font-size: var(--t--1);
}

.accordion__body p + p { margin-top: var(--s-3); }

/* ---------- Included list ---------- */
.included { display: grid; }

.included li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.2rem var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.included svg {
  grid-row: 1 / span 2;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  color: var(--brass);
}

.included p {
  font-size: var(--t--1);
  color: var(--ink-2);
  max-width: 48ch;
}

/* ---------- Misc ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tag {
  padding: 0.28rem 0.62rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: var(--t--2);
  color: var(--ink-3);
  white-space: nowrap;
  text-decoration: none;
}

a.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  transition: color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a.tag:hover { color: var(--brass); border-color: var(--line-brass); }
}

.hairline { height: 1px; background: var(--line); }

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


/* ---------- Question carousel ----------
   One question at a time, the question set bold above its answer. The track
   translates by whole slides; each slide is exactly the viewport width, so
   there is no measuring and nothing to recalculate on resize. */
.qa { position: relative; }

.qa__viewport { overflow: hidden; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }

.qa__track {
  display: flex;
  transition: transform 620ms var(--ease-out);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .qa__track { transition: none; }
}

.qa__slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: var(--s-6) 0 var(--s-7);
  /* Every slide keeps the height of the tallest, so the controls below do not
     jump as the questions rotate. */
  min-height: 12.5rem;
}

.qa__q {
  font-family: var(--font-display);
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--ink);
  max-width: 30ch;
}

.qa__a {
  margin-top: var(--s-4);
  font-size: var(--t-0);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 62ch;
}

.qa__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
}

.qa__nav {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--d-hover) var(--ease-out),
              border-color var(--d-hover) var(--ease-out),
              background-color var(--d-hover) var(--ease-out);
}

.qa__nav svg { width: 0.8rem; height: 0.8rem; }
.qa__nav[data-qa-prev] svg { transform: rotate(90deg); }
.qa__nav[data-qa-next] svg { transform: rotate(-90deg); }

@media (hover: hover) and (pointer: fine) {
  .qa__nav:hover { color: var(--brass); border-color: var(--brass); background: var(--brass-wash); }
}

.qa__dots { display: flex; align-items: center; gap: 0.4rem; }

.qa__dot {
  width: 2rem;
  height: 2.75rem;                 /* a real touch target around a small mark */
  padding: 0;
  cursor: pointer;
  position: relative;
}

.qa__dot::after {
  content: "";
  position: absolute;
  inset: calc(50% - 1px) 0.35rem auto;
  height: 2px;
  border-radius: 2px;
  background: var(--line-2);
  transition: background-color var(--d-hover) var(--ease-out), transform var(--d-hover) var(--ease-out);
}

.qa__dot[aria-current="true"]::after { background: var(--brass); transform: scaleY(2); }

@media (hover: hover) and (pointer: fine) {
  .qa__dot:hover::after { background: var(--ink-3); }
}