/* ==========================================================================
   BUGHUNT — This Room Is Bugged
   Design tokens first, then layout, then components.
   ========================================================================== */

:root {
  /* Surfaces run near-black so the room photograph stays the brightest thing
     on screen. Gold is the only accent and always means "detected". */
  --ink: #050504;
  --surface: #0b0a09;
  --surface-raised: #131110;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);

  --text: #f5f1e9;
  /* Kept high enough to stay comfortably readable on the near-black surfaces
     rather than merely passing contrast. */
  --muted: rgba(245, 241, 233, 0.78);
  --faint: rgba(245, 241, 233, 0.56);

  --gold: #c9a45e;
  --champagne: #ead9b0;

  --font-display: Anton, "Arial Narrow", sans-serif;
  --font-body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-hero: clamp(3.4rem, 1.2rem + 10vw, 10.3rem);
  --text-h2: clamp(2rem, 1.2rem + 3.4vw, 4.1rem);
  --text-h3: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  --text-body: clamp(1.06rem, 1rem + 0.25vw, 1.2rem);
  --text-label: 0.72rem;

  --space-section: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --measure: 62ch;

  --dur-fast: 160ms;
  --dur: 280ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body,
h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }

ul, ol { list-style: none; }

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

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

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

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Shared type -------------------------------------------------------------- */

.eyebrow {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
}

.body-copy {
  color: var(--muted);
  max-width: var(--measure);
}

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--gutter);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-logo small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--faint);
  margin-top: 0.25rem;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}

/* Anchor links would overflow a phone. The page is a single scroll and the
   intake CTA stays put, so drop them rather than hide them behind a menu. */
@media (max-width: 60rem) {
  .nav-links { display: none; }
}

/* Pages without a photographic hero need the bar to carry its own surface. */
.nav--solid {
  position: static;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.confirm {
  padding-block: clamp(4rem, 3rem + 8vw, 9rem) var(--space-section);
}

.confirm .lede { margin-top: 1.2rem; }
.confirm a { color: var(--champagne); }

.nav-links a {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 241, 233, 0.66);
  transition: color var(--dur-fast) ease;
}

.nav-links a:hover { color: var(--text); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--text);
}

.btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.btn--primary:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--ink);
}

/* ==========================================================================
   HERO — the interactive room
   ========================================================================== */

/* The stage is the positioning context the findings overlay onto at wide
   sizes. Below that breakpoint the findings simply flow after the hero, so
   the photograph keeps its own height instead of stretching behind the list. */
.stage { position: relative; }

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("../img/room.webp");
  background-image: image-set(url("../img/room.avif") type("image/avif"),
                              url("../img/room.webp") type("image/webp"));
  background-size: cover;
  background-position: center top;
  filter: brightness(0.86) contrast(1.06) saturate(0.9);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 44%, rgba(0,0,0,0.14) 100%),
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 34%);
}

.hero-inner {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--gutter) 5rem;
  pointer-events: none;
}

.hero-inner > * { pointer-events: auto; }

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  max-width: 12ch;
}

.hero-sub {
  margin-top: 1.6rem;
  max-width: 36ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
}

/* Only meaningful once the markers exist, which requires scripting. */
.hint { display: none; color: var(--champagne); }
.js .hint { display: inline; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ==========================================================================
   FINDINGS

   Base styles are the no-JS fallback: a plain readable list. Placing markers
   on the photograph needs JS to map image-space coordinates onto the drawn
   image, and to toggle one card at a time — so the overlay only engages under
   `.js`. Everything from `.js .findings` down is the real experience.
   ========================================================================== */

.findings-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.finding-trigger {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
}

.finding-dot {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--champagne);
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease;
}

/* The ripple only makes sense where markers sit on the photograph; in the
   stacked list it escapes the card and reads as noise. Enabled at the
   overlay breakpoint below. */
.finding-dot::before,
.finding-dot::after {
  content: "";
  position: absolute;
  display: none;
  border-radius: 50%;
  border: 1px solid rgba(234, 217, 176, 0.45);
  animation: ripple 2.6s ease-out infinite;
}

.finding-dot::before { inset: -7px; }
.finding-dot::after { inset: -14px; animation-delay: 0.7s; }

@keyframes ripple {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(2.4); }
}

.finding-trigger:hover .finding-dot,
.finding-trigger[aria-expanded="true"] .finding-dot {
  transform: scale(1.25);
  background: #fff;
}

.finding-name {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.finding-card {
  border: 1px solid var(--line);
  background: rgba(8, 8, 8, 0.95);
  padding: 1.15rem 1.25rem 1.3rem;
}

/* Each card leads with what was found, then explains it. */
.finding-place {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.finding-device-name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--text);
  margin: 0.4rem 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.finding-card p:not(.finding-place) {
  font-size: 0.95rem;
  line-height: 1.66;
  color: var(--muted);
}

.finding-card p + p { margin-top: 0.7rem; }

/* --- No-JS fallback: a plain list ---------------------------------------- */

.findings {
  position: relative;
  z-index: 20;
  display: grid;
  gap: 0.6rem;
  padding: 0 var(--gutter) var(--space-section);
  background: var(--ink);
}

.findings-intro {
  padding-top: clamp(3rem, 8vw, 5rem);
  padding-bottom: 1.6rem;
}

.finding {
  border: 1px solid var(--line);
  background: var(--surface);
}

.finding > .finding-trigger {
  width: 100%;
  padding: 1rem 1.1rem;
  justify-content: flex-start;
}

.finding-card { border: none; background: none; padding: 0 1.1rem 1.2rem 3.4rem; }

.finding-close { display: none; }

.room-hint { display: none; }

/* --- With JS: markers on the photograph, every size ---------------------- */

.js .findings-intro { display: none; }

.js .finding-dot::before,
.js .finding-dot::after { display: block; }

.js .findings {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  gap: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  /* The ripple rings paint well outside their dot — up to ~50px — so a marker
     near an edge bleeds into the next section without this. */
  overflow: hidden;
}

.js .finding {
  /* left/top are written by site.js from the drawn image rect, because the
     photograph is cropped by object-fit and CSS cannot resolve where a given
     point of the image actually landed. */
  position: absolute;
  border: none;
  background: none;
  pointer-events: auto;
}

/* Grows the touch target to ~40px without moving or resizing the dot. */
.js .finding > .finding-trigger {
  width: auto;
  padding: 12px;
  margin: -12px;
  justify-content: flex-start;
}

/* The label would clutter the photograph; the card carries the detail. */
.js .finding-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.js .finding-card {
  border: 1px solid var(--line);
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1.15rem 1.25rem 1.3rem;
  z-index: 100;
}

.finding-close {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--faint);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--dur-fast) ease;
}

.finding-close:hover { color: var(--text); }

/* --- Wide and wide enough: the room is the full-bleed hero ---------------

   The aspect guard matters as much as the width. A full-bleed crop on a tall
   viewport slices the sides off the photograph and takes the bookshelf and
   potted-plant devices with it. Below 1.4 the whole-room band is used instead
   so all nine stay reachable. */

@media (min-width: 60rem) and (min-aspect-ratio: 7/5) {
  .js .room { display: contents; }

  .js .finding-card {
    position: absolute;
    width: 17rem;
    animation: pop var(--dur-fast) var(--ease) both;
  }

  @keyframes pop {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }

  /* Placement keeps each card inside the viewport near its marker. */
  .js .finding[data-vert="down"] .finding-card { top: 1.75rem; }
  .js .finding[data-vert="up"] .finding-card { bottom: 1.75rem; }
  .js .finding[data-align="right"] .finding-card { left: 1.75rem; }
  .js .finding[data-align="left"] .finding-card { right: 1.75rem; }
}

/* --- Phones: the portrait render, full bleed ----------------------------

   room-mobile is a separately composed portrait scene, not a crop of the
   landscape one, so it keeps the simulator full-screen on a phone instead of
   letterboxing it. Its markers carry their own coordinates (--mx/--my), which
   site.js selects at this same breakpoint. */

@media (max-width: 59.99rem) {
  .js .hero-media {
    background-image: url("../img/room-portrait.webp");
    background-image: image-set(url("../img/room-portrait.avif") type("image/avif"),
                                url("../img/room-portrait.webp") type("image/webp"));
  }

  /* Anchored high: the top of the portrait scene is plain wall and ceiling,
     while every object worth marking sits in the lower two thirds. Keeping the
     copy up here leaves the room itself clear to explore. */
  /* Only the headline stays over the room; site.js lifts .hero-copy out to sit
     under the photograph. Tucked up under the nav, where the portrait scene
     has clear wall and the title has somewhere to sit. */
  .js .hero-inner {
    justify-content: flex-start;
    padding-top: 6rem;
    padding-bottom: 1.6rem;
    flex: 1;
  }

  /* Once out of the hero it needs its own surface. */
  .js body > .hero-copy {
    padding: 1.9rem var(--gutter) 2.3rem;
    background: var(--ink);
    border-top: 1px solid var(--line);
  }

  .js body > .hero-copy .hero-sub { margin-top: 0; }
  .js body > .hero-copy .hero-actions { margin-top: 1.5rem; }
  .js body > .hero-copy .btn { width: 100%; justify-content: center; }
}

/* --- Tall desktop: whole-room band -------------------------------------

   Too wide for the portrait scene but too tall to crop the landscape one
   without losing markers off the sides, so the room is shown whole and
   swiped. */

@media (min-width: 60rem) and (max-aspect-ratio: 7/5) {
  .js .hero { min-height: auto; }
  .js .hero-media { display: none; }
  .js .hero-inner { flex: none; padding: 5.4rem var(--gutter) 1.6rem; }
  .js .hero-bar { display: none; }

  .js .room {
    display: block;
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: #000;
    border-block: 1px solid var(--line);
  }

  .js .room::-webkit-scrollbar { display: none; }

  .js .findings {
    position: relative;
    inset: auto;
    width: max(100%, 34rem);
    aspect-ratio: 3 / 2;
    background-image: url("../img/room.webp");
    background-image: image-set(url("../img/room.avif") type("image/avif"),
                                url("../img/room.webp") type("image/webp"));
    background-size: cover;
    background-position: center top;
  }
}

/* --- Cards become a bottom sheet whenever the room is not the wide hero -- */

@media (max-width: 59.99rem), (max-aspect-ratio: 7/5) {
  .js .finding-card {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-height: 72svh;
    overflow-y: auto;
    z-index: 200;
    border: none;
    border-top: 1px solid var(--line-strong);
    background: rgba(8, 8, 8, 0.97);
    padding: 1.5rem var(--gutter) calc(1.7rem + env(safe-area-inset-bottom));
    animation: sheet 0.24s var(--ease) both;
  }

  @keyframes sheet {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  .js .finding-close { display: grid; right: calc(var(--gutter) - 0.5rem); }
}

/* ==========================================================================
   GENERIC SECTIONS
   ========================================================================== */

.section {
  padding-block: var(--space-section);
  border-top: 1px solid var(--line);
}

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

.section-head { max-width: var(--measure); }
.section-head .section-title { margin-block: 0.9rem 1.1rem; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 60rem) {
  .split { grid-template-columns: 1fr; }
}

/* Cards ------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  background: var(--line);
  border: 1px solid var(--line);
}

.card {
  background: var(--surface-raised);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 12rem;
}

.card h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}

.card p {
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}

/* Tabs -------------------------------------------------------------------- */

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.tab {
  font-family: inherit;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.8rem 1.15rem;
  cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              background var(--dur-fast) ease;
}

.tab:hover { color: var(--text); border-color: var(--line-strong); }

.tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--champagne);
  border-color: var(--champagne);
}

.tabpanel {
  border: 1px solid var(--line);
  border-top: none;
  background: var(--surface-raised);
}

/* Each environment is its own searchable scene, so the photograph runs full
   width with the copy beneath rather than squeezed alongside it. */
.env { display: block; }

/* The box is held at the photograph's own aspect ratio, passed in per panel.
   That makes cover an exact fit, so marker percentages address the image
   directly and need no JS mapping — unlike the cropped hero. */
.env-media {
  display: block;
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  overflow: hidden;
}

.env-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
}

.env-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.js .env-markers .finding {
  left: var(--x);
  top: var(--y);
}

/* Without scripting the markers cannot be opened, so they are hidden and the
   panel is simply a captioned photograph. */
.env-markers { display: none; }
.js .env-markers { display: block; }

.env-copy {
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  align-self: center;
}

.env-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.9rem;
}

.env-copy p { color: var(--muted); }
.env-copy p + p { margin-top: 0.85rem; }

.env-hint {
  margin-top: 1rem;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.env-hint { display: none; }
.js .env-hint { display: block; }

/* Process ----------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  background: var(--line);
  border-block: 1px solid var(--line);
}

.step {
  background: var(--ink);
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  align-items: start;
}

.step-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  line-height: 0.9;
  color: var(--gold);
}

.step h3 {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.step p { color: var(--muted); max-width: var(--measure); }

@media (max-width: 40rem) {
  .step { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* Consultation ------------------------------------------------------------ */

.cta {
  border-top: 1px solid var(--line);
  padding-block: var(--space-section);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201, 164, 94, 0.10), transparent 60%),
    var(--surface);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Intake form ------------------------------------------------------------- */

.intake {
  margin-top: 2.5rem;
  max-width: 46rem;
  display: grid;
  gap: 1.1rem;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
}

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

.field label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field label span {
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--faint);
  text-transform: none;
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  /* Must not drop below 16px: iOS Safari zooms the page on focus if it does. */
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

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

.field select {
  appearance: none;
  /* Chevron drawn inline so the control needs no image request. */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.55);
}

.field--consent label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 0.92rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--muted);
}

.field--consent input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--gold);
  padding: 0;
}

.intake button[type="submit"] { justify-self: start; margin-top: 0.4rem; }

.safety {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: rgba(201, 164, 94, 0.07);
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 46rem;
}

.safety strong { color: var(--text); font-weight: 600; }

.fine-print a { color: var(--champagne); }

.fine-print {
  margin-top: 2.5rem;
  font-size: 0.88rem;
  color: var(--faint);
  max-width: var(--measure);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.2rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

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

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */

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

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

  /* The ripple is decorative; without motion the dot alone reads fine. */
  .finding-dot::before,
  .finding-dot::after { display: none; }
}