/*
  TRACK/FIELD — page layout

  Mobile-first. Every spacing, size and type value is lifted from the Figma file
  "Track/Field — Website Design System" (hW7vw3CK7v07sVV44ftibd):

    mobile  390 board  →  base styles           gutter 20
    tablet  834 board  →  min-width: 768px      gutter 48
    desktop 1440 board →  min-width: 1200px     gutter 80

  Pixel values are written in rem with the Figma px alongside, so a value can
  always be traced back to its frame. Where this file departs from the boards it
  says why — almost always WCAG (see CLAUDE.md § 10).
*/

/* Filtering hides cards with [hidden]; any component `display` would beat the
   user-agent rule, so this has to outrank them all. */
[hidden] { display: none !important; }

/* ---- Frame --------------------------------------------------------------- */

.fo-frame {
  width: 100%;
  max-width: calc(var(--fo-content) + (var(--fo-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--fo-gutter);
}

a { color: var(--fo-color-text); text-decoration: none; }
a:hover { color: var(--fo-color-interactive); }

.fo-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--fo-space-3) var(--fo-space-5);
  background: var(--fo-color-text); color: var(--fo-color-on-inverse);
  font-family: var(--fo-font-display); font-size: var(--fo-text-xs);
}
.fo-skip:focus { left: var(--fo-gutter); }

/* Plain section: the homepage contact block and the staging page. 48px at every
   breakpoint, as the contact boards set it. */
.fo-section { padding-block: 3rem; }

.fo-rule { margin: 0; border: 0; border-top: 1px solid var(--fo-color-border); }

/* ---- Labels -------------------------------------------------------------- */

.fo-kicker {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 0.6875rem;                   /* 11 mobile */
  font-weight: var(--fo-weight-regular);
  letter-spacing: var(--fo-tracking-label);
  text-transform: uppercase;
  color: var(--fo-ink-kicker);
}
@media screen and (min-width: 768px) { .fo-kicker { font-size: 0.75rem; } }   /* 12 */

/* ---- Buttons ------------------------------------------------------------- */

.fo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;              /* 14 / 28 */
  border: 0;
  border-radius: var(--fo-radius-sm);
  background: var(--fo-color-text);
  color: var(--fo-color-on-inverse);
  font-family: var(--fo-font-display);
  font-size: var(--fo-text-sm);           /* 14 */
  font-weight: var(--fo-weight-semibold);
  letter-spacing: var(--fo-tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--fo-duration) var(--fo-ease);
}
.fo-button:hover { opacity: 0.86; color: var(--fo-color-on-inverse); }
.fo-button--block { display: flex; width: 100%; }

/* ---- Header (inventory + item detail) ------------------------------------ */
/* The homepage has none — its hero is the entry point (handover § 4). */

.fo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 16 top; 15 + the 1px rule below, since Figma draws the stroke inside its 66 */
  padding-block: 1rem calc(1rem - 1px);
  border-bottom: 1px solid var(--fo-color-border);
}

.fo-header__mark { display: block; width: 4.6875rem; height: 1.5625rem; }  /* 75 × 25 */
.fo-header__mark img, .fo-footer__mark img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }

.fo-header__menu {
  display: flex;
  padding: 0.5rem;                        /* 8 → a 34px target */
  border: 0;
  background: none;
  cursor: pointer;
}
.fo-header__menu img { display: block; width: 1.125rem; height: 1.125rem; }   /* 18 */

@media screen and (min-width: 768px) {
  .fo-header { padding-block: 2rem; border-bottom: 0; }                      /* 32 → 94 tall */
  .fo-header__mark { width: 5.625rem; height: 1.875rem; }                    /* 90 × 30 */
  .fo-header__menu { display: none; }
}

/* Mobile menu. The design specifies the trigger and its contents (Inventory,
   Contact) but draws no open state, so this stays in the system's vocabulary. */
.fo-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem var(--fo-gutter);
  background: var(--fo-color-bg);
  overflow-y: auto;
}
.fo-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.fo-drawer__close {
  width: 2.125rem; height: 2.125rem; padding: 0; border: 0; background: none;
  font-size: 1.75rem; line-height: 1; color: var(--fo-color-text); cursor: pointer;
}
.fo-drawer__nav { display: flex; flex-direction: column; border-top: 1px solid var(--fo-color-border); }
.fo-drawer__nav a {
  padding-block: 1rem;
  border-bottom: 1px solid var(--fo-color-border);
  font-family: var(--fo-font-display);
  font-size: 1.5rem;
  font-weight: var(--fo-weight-semibold);
}

/* ---- Hero ---------------------------------------------------------------- */

.fo-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;                            /* 24 */
  min-height: 52.75rem;                   /* 844 mobile board */
  padding-block: 2rem;                    /* 32 */
  text-align: center;
}

.fo-hero__mark { width: min(100%, 28.125rem); margin: 0; opacity: 0.9; }    /* 450 */
.fo-hero__mark img { display: block; width: 100%; height: auto; }

.fo-hero__tagline {
  margin: 0;
  font-family: var(--fo-font-body);
  font-size: 1.125rem;                    /* 18 */
  line-height: 1.4;
  text-wrap: balance;
}

.fo-hero__actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }  /* 16 */

/* The mobile board drops the social icons; tablet and desktop show them */
.fo-hero__social { display: none; align-items: center; gap: 1.5rem; }       /* 24 */
.fo-hero__social a { display: block; width: 0.875rem; height: 0.875rem; }
.fo-hero__social img { display: block; width: 100%; height: 100%; }

.fo-hero__hint {
  position: absolute;
  left: 50%;
  bottom: 2rem;                           /* 32 mobile */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;        /* 44 */
  border: 1px solid var(--fo-color-text);
  border-radius: 1.375rem;
  /* Figma 35% measures 2.12:1; 1.4.11 needs 3:1 for a graphic boundary */
  opacity: 0.5;
}
.fo-hero__hint img { width: 0.875rem; height: 0.875rem; display: block; }

@media screen and (min-width: 768px) {
  .fo-hero { min-height: 56.25rem; padding-block: 3rem; }                   /* 900, 48 */
  .fo-hero__mark { width: min(100%, 42.1875rem); }                         /* 675 */
  .fo-hero__tagline { font-size: 1.375rem; }                               /* 22 */
  .fo-hero__social { display: flex; }
  .fo-hero__hint { bottom: 3rem; }                                         /* 48 */
}
@media screen and (min-width: 1200px) { .fo-hero { padding-block: 5rem; } } /* 80 */

/* ---- Selected Objects (homepage) ----------------------------------------- */

.fo-selected {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "grid" "link";
  row-gap: 1.5rem;                        /* 24 */
  padding-block: 2.5rem;                  /* 40 */
}

.fo-selected__head { grid-area: head; display: flex; flex-direction: column; gap: 0.375rem; }   /* 6 */
.fo-selected > .fo-grid { grid-area: grid; }

.fo-selected__title {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 1.75rem;                     /* 28 */
  font-weight: var(--fo-weight-semibold);
  line-height: 1.2;
}

.fo-selected__link {
  grid-area: link;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-sm);           /* 14 */
  text-transform: uppercase;
  color: var(--fo-ink-meta);
}
.fo-selected__link:hover { color: var(--fo-color-interactive); }

@media screen and (min-width: 768px) {
  .fo-selected {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head link" "grid grid";
    align-items: end;
    column-gap: 1.5rem;
    row-gap: 2.5rem;                      /* 40 */
    padding-block: 3rem;                  /* 48 */
  }
  .fo-selected__head { gap: 0.5rem; }                                       /* 8 */
  .fo-selected__title { font-size: 2rem; }                                  /* 32 */
  .fo-selected__link { font-weight: var(--fo-weight-semibold); white-space: nowrap; }
}

@media screen and (min-width: 1200px) {
  .fo-selected { row-gap: 4rem; }                                           /* 64 */
  .fo-selected__head { gap: 0.75rem; }                                      /* 12 */
  .fo-selected__title { font-size: 2.25rem; }                               /* 36 */
  .fo-selected__link { font-size: 0.9375rem; font-weight: var(--fo-weight-regular); }  /* 15 */
  /* Desktop board sets this kicker in olive rather than charcoal */
  .fo-selected .fo-kicker { color: var(--fo-color-label-quiet); }
}

/* Two pieces on the mobile and tablet boards, three on desktop */
@media screen and (max-width: 1199.98px) { .fo-grid--curated > :nth-child(n + 3) { display: none; } }

/* ---- Object grid + card -------------------------------------------------- */

.fo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }      /* 32 */

@media screen and (min-width: 768px) {
  .fo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }   /* 48 / 32 */
}
@media screen and (min-width: 1200px) {
  .fo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem 3rem; }   /* 64 / 48 */
  .fo-grid--curated { column-gap: 2rem; }                                           /* 32 */
}

.fo-card { display: flex; flex-direction: column; gap: 0.75rem; }           /* 12 */

.fo-card__media {
  position: relative;
  display: block;
  height: 16.25rem;                       /* 260 — inventory mobile */
  overflow: hidden;
  background: var(--fo-color-photo-backdrop);
}
.fo-grid--curated .fo-card__media { height: 18.75rem; }                     /* 300 — homepage mobile */

.fo-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--fo-duration-slow) var(--fo-ease);
}
/* Framed card photographs (scripts/images.py) put every piece at the same scale.
   Shown whole: cropping them again would undo that. */
.fo-card__media--framed img { object-fit: contain; }
@media (hover: hover) { .fo-card:hover .fo-card__media img { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
  .fo-card__media img { transition: none; }
  .fo-card:hover .fo-card__media img { transform: none; }
}

/* A Product Photos placeholder fills the frame it replaces */
.fo-card__media .fo-photo-placeholder,
.fo-detail__media .fo-photo-placeholder { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; }

.fo-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0.25rem 0.5rem;                /* 4 / 8 */
  background: #ffffff;                    /* sits over photography, so explicitly white */
  border: 1px solid var(--fo-color-text);
  font-family: var(--fo-font-display);
  font-size: 0.5625rem;                   /* 9 */
  font-weight: var(--fo-weight-semibold);
  letter-spacing: var(--fo-tracking-label);
  text-transform: uppercase;
  color: var(--fo-color-text);
}

.fo-card__meta { display: flex; flex-direction: column; gap: 0.25rem; }     /* 4 */
.fo-card__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.fo-card__name {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 1rem;                        /* 16 */
  font-weight: var(--fo-weight-semibold);
  line-height: 1.25;
}
.fo-card__name a { color: inherit; }

.fo-card__price {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 0.8125rem;                   /* 13 */
  font-weight: var(--fo-weight-medium);
  color: var(--fo-ink-body);
  white-space: nowrap;
}

.fo-card__attrs { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--fo-font-body); font-size: 0.75rem; }  /* 8, 12 */
.fo-card__cat { text-transform: uppercase; color: var(--fo-color-text); }
.fo-card__dot { width: 3px; height: 3px; border-radius: 1.5px; background: #f0ece4; }   /* decorative */
.fo-card__era { color: var(--fo-ink-meta); }

/* The homepage mobile board sets the category in rust */
@media screen and (max-width: 767.98px) { .fo-grid--curated .fo-card__cat { color: var(--fo-rust); } }

@media screen and (min-width: 768px) {
  .fo-card { gap: 1rem; }                                                   /* 16 */
  .fo-card__media, .fo-grid--curated .fo-card__media { height: 20rem; }     /* 320 */
  .fo-badge { padding: 0.25rem 0.625rem; font-size: var(--fo-text-badge); } /* 4 / 10, 10 */
  .fo-card__meta { gap: 0.375rem; }                                         /* 6 */
  .fo-card__name { font-size: var(--fo-text-lg); }                          /* 18 */
  .fo-card__price { font-size: var(--fo-text-sm); }                         /* 14 */
  .fo-card__attrs { font-size: var(--fo-text-xs); }                         /* 13 */
}
@media screen and (min-width: 1200px) {
  .fo-card__media, .fo-grid--curated .fo-card__media { height: 23.75rem; }  /* 380 */
  /* Only the homepage desktop board insets the badge and darkens the dot */
  .fo-grid--curated .fo-badge { top: 0.75rem; left: 0.75rem; }             /* 12 */
  .fo-grid--curated .fo-card__dot { background: rgba(36, 36, 35, 0.25); }
}

/* ---- Inventory: intro, filters, grid ------------------------------------- */

.fo-intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;                              /* 16 */
  padding-block: 2rem 1.5rem;             /* 32 / 24 */
}

.fo-intro__title {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 2.25rem;                     /* 36 */
  font-weight: var(--fo-weight-bold);
  line-height: 1.1;
  text-transform: uppercase;
}

.fo-intro__body {
  margin: 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-sm);           /* 14 */
  line-height: 1.5;
  color: var(--fo-ink-body);
  text-wrap: pretty;
}

@media screen and (min-width: 768px) {
  .fo-intro { gap: 2.5rem; padding-block: 3rem; }                           /* 40, 48 */
  .fo-intro__title { font-size: var(--fo-text-h1); }                        /* 48 */
  .fo-intro__body { font-size: var(--fo-text-base); line-height: 1.6; color: var(--fo-color-text); }
}
@media screen and (min-width: 1200px) {
  .fo-intro { flex-direction: row; align-items: flex-start; gap: 6rem; padding-block: 4rem; }   /* 96, 64 */
  .fo-intro__title { flex: 0 0 25rem; font-size: 3.5rem; }                 /* 400 wide, 56 */
  .fo-intro__body { flex: 1 1 0; font-size: var(--fo-text-lg); }           /* 18 */
}

/* Line, row, line — then the grid. */
.fo-filters { margin-bottom: 1.5rem; }                                      /* 24 */
.fo-filters__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;                       /* tabs 16 apart */
  padding-block: 0.75rem;                 /* 12 line-to-row */
  border-top: 1px solid var(--fo-color-border);
  border-bottom: 1px solid var(--fo-color-border);
}

.fo-filter {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--fo-font-display);
  font-size: 0.75rem;                     /* 12 */
  font-weight: var(--fo-weight-medium);
  letter-spacing: var(--fo-tracking-label);
  text-transform: uppercase;
  color: var(--fo-ink-quiet);
  cursor: pointer;
}
.fo-filter:hover { color: var(--fo-color-interactive); }
.fo-filter[aria-pressed='true'] { font-weight: var(--fo-weight-bold); color: var(--fo-color-interactive); }

@media screen and (min-width: 768px) {
  .fo-filters { margin-bottom: 2rem; }                                      /* 32 */
  .fo-filters__bar { gap: 0.5rem 2rem; padding-block: 1.25rem; }            /* 32; 16 + 4 */
  .fo-filter { font-size: var(--fo-text-xs); }                              /* 13 */
}
@media screen and (min-width: 1200px) {
  .fo-filters { margin-bottom: 2.25rem; }                                   /* 36 */
  .fo-filters__bar { gap: 0.5rem 2.5rem; padding-block: 1.5rem; }           /* 40; 16 + 8 */
}

.fo-inventory { padding-bottom: 2rem; }                                     /* 32 */
@media screen and (min-width: 768px) { .fo-inventory { padding-bottom: 3rem; } }   /* 48 */

/* ---- Item detail --------------------------------------------------------- */

.fo-back {
  /* block, not inline-block: an inline box leaves a baseline gap under it */
  display: block;
  width: fit-content;
  padding-block: 0.5rem;                  /* 8 → a 32px bar */
  line-height: normal;                    /* the board's leading; 1.5 added 4px */
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-xs);           /* 13 */
  text-transform: uppercase;
  color: var(--fo-ink-quiet);
}
.fo-back:hover { color: var(--fo-color-interactive); }

@media screen and (min-width: 768px) { .fo-back { padding-block: 1rem; font-size: var(--fo-text-sm); } }   /* 48 bar */
@media screen and (min-width: 1200px) { .fo-back { padding-block: 2rem 0; } }                         /* pt 32 */

.fo-detail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                            /* 24 */
  padding-block: 1rem 2rem;               /* 16 / 32 */
}

@media screen and (min-width: 768px) {
  .fo-detail {
    display: grid;
    grid-template-columns: minmax(0, 350fr) minmax(0, 348fr);
    align-items: start;
    gap: 2.5rem;                          /* 40 */
    padding-block: 2rem 3rem;             /* 32 / 48 */
  }
}
@media screen and (min-width: 1200px) {
  .fo-detail { grid-template-columns: minmax(0, 760fr) minmax(0, 456fr); gap: 4rem; padding-block: 4rem; }  /* 64 */
}

.fo-detail__gallery { display: flex; flex-direction: column; gap: 0.75rem; }   /* 12 */
@media screen and (min-width: 768px) { .fo-detail__gallery { gap: 1rem; } }    /* 16 */

.fo-detail__media { position: relative; height: 17.5rem; background: var(--fo-color-photo-backdrop); }   /* 280 */
@media screen and (min-width: 768px) { .fo-detail__media { height: 26.25rem; } }    /* 420 */
@media screen and (min-width: 1200px) { .fo-detail__media { height: 36.25rem; } }   /* 580 */

/* The whole object stays in frame on the page that sells it */
.fo-detail__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

.fo-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }   /* 8 */

.fo-thumb {
  position: relative;
  height: 3.625rem;                       /* 58 */
  padding: 0;
  background: var(--fo-color-photo-backdrop);
  /* A control boundary: 0.55 is 3.60:1, clearing 1.4.11 */
  border: 1px solid var(--fo-color-border-strong);
  cursor: pointer;
  transition: border-color var(--fo-duration) var(--fo-ease);
}
.fo-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fo-thumb:hover, .fo-thumb[aria-current='true'] { border-color: var(--fo-color-text); }

@media screen and (min-width: 768px) { .fo-thumb { height: 4rem; } }                                  /* 64 */
@media screen and (min-width: 1200px) { .fo-thumbs { gap: 1rem; } .fo-thumb { height: 8.125rem; } }   /* 16, 130 */

.fo-detail__body { display: flex; flex-direction: column; gap: 1.5rem; }    /* 24 */
@media screen and (min-width: 1200px) { .fo-detail__body { gap: 2rem; } }   /* 32 */

.fo-detail__top { display: flex; flex-direction: column; gap: 0.5rem; }     /* 8 */
.fo-detail__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fo-detail__meta .fo-badge { position: static; }

.fo-detail__cat {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 0.75rem;                     /* 12 */
  letter-spacing: var(--fo-tracking-label);
  text-transform: uppercase;
  color: var(--fo-ink-quiet);
}

.fo-detail__title {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 2rem;                        /* 32 */
  font-weight: var(--fo-weight-bold);
  line-height: 1.15;
}

.fo-detail__price {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 1.25rem;                     /* 20 */
  font-weight: var(--fo-weight-medium);
}

.fo-detail__section { display: flex; flex-direction: column; gap: 0.625rem; }   /* 10 */
.fo-detail__specs-block { display: flex; flex-direction: column; gap: 0.75rem; } /* 12 */

.fo-detail__heading {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: var(--fo-text-xs);           /* 13 */
  font-weight: var(--fo-weight-bold);
  text-transform: uppercase;
}

.fo-detail__prose {
  margin: 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-sm);           /* 14 */
  line-height: 1.5;
  color: var(--fo-ink-body);
  text-wrap: pretty;
}

.fo-specs { display: flex; flex-direction: column; margin: 0; font-size: var(--fo-text-xs); }   /* 13 */

/* Label left, value right; a long value wraps inside its own column */
.fo-specs > div {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  align-items: baseline;
  padding-block: 0.5rem;                  /* 8 */
  border-bottom: 1px solid #e2ddd4;       /* decorative divider, per the boards */
}
.fo-specs dt { margin: 0; font-family: var(--fo-font-body); color: var(--fo-ink-meta); }
.fo-specs dd { margin: 0; font-family: var(--fo-font-body); font-weight: var(--fo-weight-semibold); text-align: right; }

.fo-detail__cta { display: flex; flex-direction: column; gap: 0.75rem; }    /* 12 */
.fo-detail__cta .fo-button { padding: 1rem 1.5rem; font-size: var(--fo-text-xs); }   /* 16 / 24, 13 */

.fo-detail__note {
  margin: 0;
  font-family: var(--fo-font-body);
  font-size: 0.6875rem;                   /* 11 */
  text-align: center;
  color: var(--fo-ink-quiet);
}

@media screen and (min-width: 768px) {
  .fo-detail__top { gap: 0.75rem; }                                         /* 12 */
  .fo-detail__cat { font-size: var(--fo-text-xs); color: var(--fo-color-text); }   /* 13 */
  .fo-detail__section { gap: 0.75rem; }                                     /* 12 */
  .fo-detail__specs-block { gap: 0.5rem; }                                  /* 8 */
  .fo-detail__heading { font-size: var(--fo-text-sm); }                     /* 14 */
  .fo-detail__prose { font-size: 0.9375rem; }                               /* 15 */
  .fo-detail__cta { gap: 0.5rem; }                                          /* 8 */
  .fo-detail__note { font-size: var(--fo-text-eyebrow); }                   /* 12 */
}

@media screen and (min-width: 1200px) {
  .fo-detail__top { gap: 1rem; }                                            /* 16 */
  .fo-detail__title { font-size: 2.75rem; line-height: 1.1; }               /* 44 */
  .fo-detail__price { font-size: 1.5rem; }                                  /* 24 */
  .fo-detail__section { gap: 1rem; }                                        /* 16 */
  .fo-detail__specs-block { gap: 0.75rem; }                                 /* 12 */
  .fo-detail__heading { font-size: var(--fo-text-eyebrow); }                /* 12 */
  .fo-detail__prose { font-size: var(--fo-text-base); line-height: 1.6; color: rgba(36, 36, 35, 0.85); }  /* 16, 85% */
  .fo-specs { font-size: var(--fo-text-sm); }                               /* 14 */
  .fo-specs > div { padding-block: 0.625rem; border-bottom-color: #e5e7eb; }   /* 10 */
  .fo-detail__cta { gap: 0.75rem; padding-top: 1rem; }                      /* 12, 16 */
  .fo-detail__cta .fo-button { padding: 1.125rem 1.5rem; font-size: var(--fo-text-sm); color: #ffffff; }  /* 18, 14 */
  .fo-detail__note { font-size: var(--fo-text-xs); }                        /* 13 */
}

/* ---- Contact ------------------------------------------------------------- */

.fo-contact { display: flex; flex-direction: column; gap: 2rem; }           /* 32 */
.fo-contact__copy { display: flex; flex-direction: column; gap: 0.75rem; }  /* 12 */

.fo-contact__title {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: 2rem;                        /* 32 */
  font-weight: var(--fo-weight-bold);
  line-height: 1.15;
}

.fo-contact__body {
  margin: 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-sm);           /* 14 */
  line-height: 1.5;
  color: var(--fo-ink-body);
  text-wrap: pretty;
}

.fo-form { display: flex; flex-direction: column; gap: 1rem; }              /* 16 */
.fo-form__field { display: flex; flex-direction: column; gap: 0.375rem; }   /* 6 */
.fo-form__label { font-family: var(--fo-font-body); font-size: var(--fo-text-xs); font-weight: var(--fo-weight-semibold); }   /* 13 */

/*
  Bottom-rule inputs at every breakpoint. The boards disagree — desktop draws a
  charcoal bottom rule, tablet a full #e2ddd4 box (1.3:1), mobile no boundary at
  all — and only the desktop treatment clears WCAG 1.4.11's 3:1.
*/
.fo-form input, .fo-form select, .fo-form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;              /* 12 / 14 */
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fo-color-text);
  border-radius: 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-sm);           /* 14 */
  color: var(--fo-color-text);
}
.fo-form textarea { height: 6.25rem; resize: vertical; }                     /* 100 */
.fo-form input::placeholder, .fo-form textarea::placeholder { color: var(--fo-ink-placeholder); }
.fo-form select {
  appearance: none;
  background-image: url('found-objects-chevron.svg');
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 0.75rem;
  padding-right: 2.5rem;
}
.fo-form .fo-button { padding: 0.875rem 1.5rem; font-size: var(--fo-text-xs); }   /* 14 / 24, 13 */

@media screen and (min-width: 768px) {
  .fo-contact { flex-direction: row; align-items: flex-start; gap: 3rem; }  /* 48 */
  .fo-contact__copy { flex: 0 0 17.5rem; gap: 1.25rem; }                    /* 280, 20 */
  .fo-contact__title { font-size: 2.25rem; }                                /* 36 */
  .fo-contact__body { font-size: 0.9375rem; }                               /* 15 */
  .fo-form { flex: 1 1 0; gap: 1.25rem; }                                   /* 20 */
  .fo-form input, .fo-form select, .fo-form textarea { padding: 0.75rem 1rem; font-size: var(--fo-text-input); }   /* 12/16, 15 */
  .fo-form .fo-button { padding: 0.875rem 2rem; }                           /* 14 / 32 */
}

@media screen and (min-width: 1200px) {
  .fo-contact { gap: 6rem; }                                                /* 96 */
  .fo-contact__copy { flex-basis: 30rem; gap: 1.5rem; }                     /* 480, 24 */
  .fo-contact__title { font-size: var(--fo-text-contact); }                 /* 44 */
  .fo-contact__body { font-size: var(--fo-text-base); line-height: 1.6; }   /* 16 */
  .fo-form { gap: 1.5rem; }                                                 /* 24 */
  .fo-form__field { gap: 0.5rem; }                                          /* 8 */
  .fo-form textarea { height: 7.5rem; }                                     /* 120 */
  .fo-form .fo-button { padding: 1rem 2rem; font-size: var(--fo-text-sm); } /* 16 / 32, 14 */
}

/* ---- Footer -------------------------------------------------------------- */

.fo-footer { padding-block: 3rem 2rem; }                                    /* 48 / 32 */
.fo-footer__inner { display: flex; flex-direction: column; gap: 2.5rem; }   /* 40 */
.fo-footer__cols { display: flex; flex-direction: column; gap: 2.5rem; }    /* 40 */
.fo-footer__identity { display: flex; flex-direction: column; gap: 0.75rem; }   /* 12 */
.fo-footer__links { display: flex; flex-direction: column; gap: 1.5rem; }   /* 24 */
.fo-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }   /* 10 */

.fo-footer__mark { display: block; width: 5.25rem; height: 1.75rem; }       /* 84 × 28 */

.fo-footer__blurb { margin: 0; font-family: var(--fo-font-body); font-size: var(--fo-text-sm); line-height: 1.5; color: var(--fo-ink-body); }
.fo-footer__head {
  margin: 0;
  font-family: var(--fo-font-display);
  font-size: var(--fo-text-eyebrow);      /* 12 */
  font-weight: var(--fo-weight-bold);
  text-transform: uppercase;
  color: var(--fo-color-label);
}
.fo-footer__col a { font-family: var(--fo-font-body); font-size: var(--fo-text-sm); }   /* 14 */

.fo-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                            /* 8 */
  font-family: var(--fo-font-display);
  font-size: 0.625rem;                    /* 10 */
  text-transform: uppercase;
  color: var(--fo-ink-quiet);
}
.fo-footer__bottom p { margin: 0; }

@media screen and (min-width: 768px) {
  .fo-footer { padding-block: 3rem 4rem; }                                  /* 48 / 64 */
  .fo-footer__inner { gap: 4rem; }                                          /* 64 */
  /* Identity and each column sit side by side, spread edge to edge */
  .fo-footer__cols { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
  .fo-footer__links { display: contents; }
  .fo-footer__identity { flex: 0 0 18.75rem; }                              /* 300 */
  .fo-footer__col { gap: 0.75rem; }                                         /* 12 */
  .fo-footer__col--inquiries { display: none; }   /* the tablet board drops it */
  .fo-footer__mark { width: 6.5625rem; height: 2.1875rem; }                 /* 105 × 35 */
  .fo-footer__blurb { color: var(--fo-ink-blurb); }                         /* 70% */
  .fo-footer__bottom { flex-direction: row; justify-content: space-between; font-size: var(--fo-text-footer-meta); }   /* 11 */
}

@media screen and (min-width: 1200px) {
  .fo-footer__identity { flex-basis: 22.5rem; gap: 1rem; }                  /* 360, 16 */
  .fo-footer__col { gap: 1rem; }                                            /* 16 */
  .fo-footer__col--inquiries { display: flex; flex: 0 0 17.5rem; }          /* 280 */
}

/* ---- Staging (no Figma board; built from the same parts) ----------------- */

.fo-staging-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; max-width: var(--fo-measure); }
.fo-staging-intro .fo-intro__title { text-transform: none; }

.fo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.fo-head__text { display: flex; flex-direction: column; gap: 0.75rem; }
.fo-head__title { margin: 0; font-family: var(--fo-font-display); font-size: 1.75rem; font-weight: var(--fo-weight-semibold); line-height: 1.2; }
@media screen and (min-width: 768px) { .fo-head__title { font-size: 2rem; } }
@media screen and (min-width: 1200px) { .fo-head__title { font-size: 2.25rem; } }