/* ==========================================================================
   Mid-Florida Marine — Global shell + base styles (M1)
   Tokens live in tokens.css. No raw values where a token exists.
   ========================================================================== */

/* --- Reset / base --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
}

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

h1,
h2,
h3,
p,
ul,
address {
  margin: 0;
}

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

a {
  color: var(--text-primary);
}

address {
  font-style: normal;
}

/* FIX-M3-002: author display rules (e.g. .contact-form { display: grid })
   silently defeat the UA's [hidden] { display: none } — the "hidden" form
   kept rendering under the success panel. The hidden attribute must ALWAYS
   win, for every current and future component. */
[hidden] {
  display: none !important;
}

/* --- Focus (never removed, always visible) -------------------------------- */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Type scale ------------------------------------------------------------ */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}

h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--text-secondary);
  max-width: 38em;
}

.eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.eyebrow--brass { color: var(--accent); }
.eyebrow--fresh { color: var(--fresh-text); }
.eyebrow--salt  { color: var(--salt-text); }

.small {
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* --- Layout ----------------------------------------------------------------- */

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

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

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-8);
  }
}

/* --- Skip link ---------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-button);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-hover) var(--ease-out),
    border-color var(--duration-hover) var(--ease-out),
    color var(--duration-hover) var(--ease-out);
}

.button--primary {
  background: var(--accent);
  color: var(--on-accent);
}

.button--primary:hover {
  background: var(--accent-hover);
}

.button--primary:active {
  background: var(--accent-press);
}

.button--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.button--secondary:hover {
  border-color: var(--text-secondary);
  background: var(--surface-raised);
}

/* --- Header / nav ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--duration-hover) var(--ease-out);
}

/* Translucency + blur live on a pseudo-element, NOT on .site-header itself:
   backdrop-filter on the header would make it the containing block for the
   fixed-position mobile drawer inside it, collapsing the drawer to the
   header's box (found in M1 visual QA). The pseudo has no descendants, so
   the glass effect stays and the drawer positions against the viewport. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 20, 22, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-medium);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  white-space: nowrap;
}

.brand__accent {
  color: var(--accent);
  margin-left: 0.4em;
}

.brand--footer {
  font-size: 1.25rem;
}

/* Desktop nav */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-hover) var(--ease-out);
}

.site-nav__link:hover {
  color: var(--text-primary);
}

.site-nav__link[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.site-nav__cta-item {
  margin-left: var(--space-2);
}

/* Hamburger (mobile only) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-small);
  cursor: pointer;
}

.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.nav-toggle__bars span {
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--duration-hover) var(--ease-out), opacity var(--duration-hover) var(--ease-out);
}

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

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

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

/* Mobile drawer.
   Progressive enhancement: without JS (html.no-js) the nav stays in flow and
   simply wraps below the header — content is never gated on JS. */
@media (max-width: 1023.98px) {
  .nav-toggle {
    display: inline-flex;
  }

  .no-js .nav-toggle {
    display: none;
  }

  /* Only the no-JS fallback (nav in flow) may wrap below the brand row.
     With JS, the drawer is fixed-position — the header stays one row. */
  .no-js .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav {
    flex-basis: 100%;
  }

  .js .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--ink);
    padding: var(--space-5) var(--gutter);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity var(--duration-drawer) var(--ease-out),
      transform var(--duration-drawer) var(--ease-out),
      visibility 0s linear var(--duration-drawer);
  }

  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--duration-drawer) var(--ease-out),
      transform var(--duration-drawer) var(--ease-out);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .site-nav__link {
    font-size: var(--text-h3);
    min-height: var(--touch-target);
    padding: var(--space-2) 0;
    border-bottom: none;
  }

  .site-nav__link[aria-current="page"] {
    color: var(--accent);
  }

  .site-nav__cta-item {
    margin-left: 0;
    margin-top: var(--space-2);
  }

  .site-nav__cta {
    width: 100%;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 639.98px) {
  .container {
    padding-inline: var(--space-3);
  }
}

/* Brand lockup steps down so brand + toggle share one row on small phones */
@media (max-width: 479.98px) {
  .brand {
    font-size: 0.9375rem;
  }
}

/* Smallest phones (<=380px, incl. folded devices): toggle drops its text
   label (aria-label keeps the accessible name), brand and gap tighten.
   Toggle stays >=44px in both axes. Found in Abish's M1 QA at 320px. */
@media (max-width: 379.98px) {
  .site-header__inner {
    gap: var(--space-2);
  }

  .brand {
    font-size: 0.8125rem;
  }

  .nav-toggle__label {
    display: none;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* --- Page intro (interior pages: About, Boats, Contact) ------------------------ */

.page-intro {
  padding-block: var(--space-8) var(--space-7);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, var(--surface), var(--ink));
}

@media (min-width: 1024px) {
  .page-intro {
    padding-block: var(--space-9) var(--space-8);
  }
}

.page-intro .eyebrow {
  margin-bottom: var(--space-3);
}

.page-intro h1,
.page-intro .display {
  margin-bottom: var(--space-4);
  max-width: 14em;
}

.page-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.page-intro .button:only-of-type {
  margin-top: var(--space-5);
}

/* --- 50/50 water panels (About "the two lines"; M1-approved card style) --------- */

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

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

.water-split__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-low);
}

.section--surface .water-split__panel {
  background: var(--surface-raised);
}

.water-split__panel--fresh {
  border-top: 2px solid var(--fresh);
}

.water-split__panel--salt {
  border-top: 2px solid var(--salt);
}

.water-split__panel .eyebrow {
  margin-bottom: var(--space-2);
}

.water-split__panel h2,
.water-split__panel h3 {
  margin-bottom: var(--space-2);
}

.section-copy {
  color: var(--text-secondary);
}

/* --- Hero: full-bleed 50/50 fresh/salt split (Home, M2) --------------------------
   Desktop: two full-height image panels side by side (fresh left, salt right),
   display headline + single brass CTA anchored bottom over --scrim-hero.
   Mobile: panels stack freshwater over saltwater; content overlays the bottom.
   The scrim is the CONTRAST MECHANISM (AA verified against the real images).
   Water-cue chips are SOLID ink: a translucent chip over bright sky cannot
   hold 4.5:1 for 13px text (compositing math, M2) — solid --ink guarantees
   the *-text tokens' measured ratios (fresh 5.2:1, salt 5.4:1). */

/* FIX-M2-001: below 1024px the content block renders on ink ABOVE the
   stacked panels (text-over-image at small sizes put the lead over bright
   sky at the panel seam and collided with the salt cue chip — caught in
   Diana's 320px review). The overlay treatment is desktop-only, where
   --scrim-hero actually covers the text region. */

.hero {
  position: relative;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-7) var(--space-6);
}

.hero__panels {
  display: grid;
}

.hero__panel {
  position: relative;
  overflow: hidden;
  height: 44vh;
  min-height: 300px;
  max-height: 460px;
}

.hero__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__cue {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero__panels {
    grid-template-columns: 1fr 1fr;
  }

  .hero__panel {
    height: 56vh;
    max-height: 560px;
  }
}

@media (min-width: 1024px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }

  .hero__panels {
    position: absolute;
    inset: 0;
    grid-template-columns: 1fr 1fr;
  }

  .hero__panel {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--scrim-hero);
    pointer-events: none;
  }

  .hero__content {
    padding-block: var(--space-8);
  }
}

.hero__content .eyebrow {
  margin-bottom: var(--space-3);
}

.hero__content .display {
  margin-bottom: var(--space-4);
  max-width: 12em;
}

.hero__lead {
  max-width: 34em;
}

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

/* --- Section header (eyebrow + heading + optional lead) -------------------------- */

.section-head {
  margin-bottom: var(--space-6);
}

.section-head .eyebrow {
  margin-bottom: var(--space-3);
}

.section-head h2 {
  margin-bottom: var(--space-3);
  max-width: 18em;
}

.section-head .lead {
  margin-top: var(--space-2);
}

.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

/* Pulls a section closer to the one above when they read as one thought. */
.section--tight {
  padding-block-start: 0;
}

/* --- Boat cards (Home featured teaser; reused by Boats in M3) --------------------- */

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

@media (min-width: 640px) {
  .boat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .boat-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.boat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-low);
  transition:
    transform var(--duration-hover) var(--ease-out),
    border-color var(--duration-hover) var(--ease-out),
    box-shadow var(--duration-hover) var(--ease-out);
}

.boat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-medium);
}

.boat-card:has(.boat-card__title-link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.boat-card__media img {
  width: 100%;
  /* FIX-M2-004: the height="" presentational attribute sets a used CSS
     height; without an explicit auto here both axes are determined and
     aspect-ratio is ignored (cards rendered 366x896 portrait). */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.boat-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-5);
}

.boat-card__title-link {
  color: inherit;
  text-decoration: none;
}

/* Whole card is the tap target (>=44px everywhere). */
.boat-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.boat-card__blurb {
  color: var(--text-secondary);
}

.boat-card__capability {
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--text-muted);
}

.boat-grid__cta {
  margin-top: var(--space-6);
}

/* --- Boats page: full showcase cards (M3) -------------------------------------------
   Same boat-card component, extended: line eyebrow, H2 name, description
   paragraph, capability + Inquire action pinned to the bottom so card
   bottoms align across the grid (Diana: consistent heights, Inquire is
   SECONDARY — brass stays the only primary). */

.boat-card--full .boat-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.boat-card__description {
  color: var(--text-secondary);
}

/* In the full card the capability line gives up the auto-margin to the
   actions row (capability sits with the copy; the button rides the bottom). */
.boat-card--full .boat-card__capability {
  margin-top: 0;
  padding-top: 0;
}

.boat-card__actions {
  margin-top: auto;
  padding-top: var(--space-3);
}

.boat-card__actions .button {
  width: 100%;
}

.boat-grid__note {
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  max-width: 48em;
}

/* --- Lifestyle split rows (image + copy) ------------------------------------------ */

.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.split + .split {
  margin-top: var(--space-8);
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }

  .split--flip .split__media {
    order: 2;
  }
}

.split__media img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.split__rule {
  width: 48px;
  height: 2px;
  margin-bottom: var(--space-3);
}

.split__rule--fresh {
  background: var(--fresh);
}

.split__rule--salt {
  background: var(--salt);
}

.split__body .eyebrow {
  margin-bottom: var(--space-2);
}

.split__body h2 {
  margin-bottom: var(--space-3);
}

.split__body p {
  color: var(--text-secondary);
  max-width: 34em;
}

/* --- CTA band ----------------------------------------------------------------------- */

.cta-band {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: var(--space-8);
  text-align: center;
}

.cta-band__inner .eyebrow {
  margin-bottom: var(--space-3);
}

.cta-band__inner h2 {
  margin-bottom: var(--space-3);
  margin-inline: auto;
  max-width: 16em;
}

.cta-band__inner p {
  color: var(--text-secondary);
  max-width: 36em;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

/* --- Prose (About narrative) ---------------------------------------------------------- */

.prose {
  max-width: 62ch;
}

.prose .eyebrow {
  margin-bottom: var(--space-3);
}

.prose h2 {
  margin-bottom: var(--space-4);
}

.prose p + p {
  margin-top: var(--space-4);
}

.prose--after-band {
  margin-top: var(--space-6);
}

/* --- Full-bleed environment band (About) ------------------------------------------------ */

.env-band {
  margin: 0;
}

.env-band img {
  width: 100%;
  height: clamp(280px, 45vw, 520px);
  object-fit: cover;
}

/* --- Contact page: layout + business info (M3) ------------------------------------ */

.contact-layout {
  display: grid;
  /* FIX-M3-001: minmax(0,1fr), never bare 1fr/auto — a grid item's
     min-width:auto means the select's intrinsic width (its longest
     option label) propagates up and overflows small viewports
     (12px horizontal scroll at 320px). Same guard on .field below. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-7);
  }
}

.contact-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-low);
}

.contact-info__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.contact-info__address {
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.contact-info__list {
  display: grid;
  gap: var(--space-1);
}

.contact-info__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--accent);
  text-decoration: none;
}

.contact-info__list a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.contact-info__note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* --- Contact form (M3) ---------------------------------------------------------------
   DESIGN-SPEC form contract: labels ALWAYS visible (never placeholder-as-
   label), --surface-raised fields, 44px min height, focus = --focus ring +
   --border-strong, error = --error border + inline message below the field,
   success panel replaces the form, error retry never loses typed input. */

.contact-form {
  display: grid;
  gap: var(--space-4);
  max-width: 560px;
}

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

/* FIX-M3-001: a <select> refuses to shrink below its longest option
   without an explicit min-width — the 320px overflow source. */
.field__input {
  min-width: 0;
}

.field__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--text-primary);
}

.field__optional {
  color: var(--text-muted);
  font-weight: 400;
}

.field__input {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  transition: border-color var(--duration-hover) var(--ease-out);
}

.field__input:hover {
  border-color: var(--border-strong);
}

.field__input:focus,
.field__input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--border-strong);
}

.field__input--error,
.field__input[aria-invalid="true"] {
  border-color: var(--error);
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23AEB8B9' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  cursor: pointer;
}

.field__select option {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.field__textarea {
  resize: vertical;
  min-height: 160px;
}

.field__error {
  color: var(--error);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* Honeypot: off-screen for everyone, aria-hidden for AT, tabindex=-1 in
   markup. NEVER display:none — some bots skip hidden inputs. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__actions {
  margin-top: var(--space-2);
}

.button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Non-destructive inline error: typed input stays exactly as it was. */
.form-error {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--error);
  border-left-width: 3px;
  border-radius: var(--radius-card);
}

.form-error p {
  color: var(--text-primary);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.form-error a {
  color: var(--accent);
}

/* Success panel: replaces the form in place on 200. */
.form-success {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--success);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-low);
  max-width: 560px;
}

.form-success:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.form-success__title {
  margin-bottom: var(--space-3);
}

.form-success p {
  color: var(--text-secondary);
}

.form-success p + p {
  margin-top: var(--space-3);
}

.form-success__alt a {
  color: var(--accent);
}

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

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: var(--space-8);
  padding-block: var(--space-7) var(--space-5);
}

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

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

.site-footer__tagline {
  color: var(--text-secondary);
  margin: var(--space-2) 0 var(--space-4);
}

.site-footer__heading {
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.site-footer__address {
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.site-footer__contact,
.site-footer__nav {
  display: grid;
  gap: var(--space-1);
}

.site-footer__contact a,
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-hover) var(--ease-out);
}

.site-footer__contact a:hover,
.site-footer__nav a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.site-footer__fine {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.site-footer__fine p {
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* --- Scroll reveal contract (used from M2 on) ------------------------------------------
   HARD RULE: default state is opacity:1 — content renders on first paint.
   IntersectionObserver may add .is-visible to ANIMATE an element in, but the
   pre-reveal state is only ever applied by JS adding .will-reveal, never in
   markup or base CSS. With JS disabled, everything is simply visible. */

.reveal {
  opacity: 1;
}

.js .reveal.will-reveal {
  opacity: 0;
  transform: translateY(16px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

/* FIX-M2-003: print never scrolls, so the observer never fires — without
   this, below-fold .will-reveal content prints as blank ink. Reveals must
   never gate content in ANY medium. */
@media print {
  .js .reveal.will-reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Reduced motion --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js .reveal.will-reveal {
    opacity: 1;
    transform: none;
  }
}