/* ============ header / nav ============ */

header.site { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
/* Vertical padding only — a `padding: .9rem 0` shorthand here would cancel
   .wrap's horizontal gutter and jam the logo against the screen edge. */
.navrow { display: flex; align-items: center; justify-content: space-between; padding-block: .9rem; gap: 1.4rem; }
.logo { display: flex; align-items: center; gap: .6rem; }
.logo img { height: 36px; width: auto; }
.navlinks { display: flex; gap: 1.9rem; font-size: .94rem; font-weight: 600; }
.navlinks a { color: var(--ink-soft); }
.navlinks a:hover { color: var(--pine); }
@media (max-width: 860px) { .navlinks { display: none; } }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .65rem; }
@media (max-width: 860px) { .nav-toggle { display: inline-flex; } .navrow .btn-accent.desktop-only { display: none; } }

.mobile-nav { display: none; flex-direction: column; border-top: 1px solid var(--line); background: #fff; padding: 1rem 1.2rem 1.4rem; }
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav a { padding: .6rem 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-of-type { border-bottom: none; }

/* ============ hero — full-bleed video ============ */
.hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; background: var(--dark); }
@media (max-width: 860px) { .hero { min-height: 74vh; } }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Scrim: keeps white type legible over moving footage at any frame. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(16,26,53,.92) 0%, rgba(16,26,53,.78) 42%, rgba(16,26,53,.42) 72%, rgba(16,26,53,.30) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 6rem 0; }
@media (max-width: 640px) { .hero-inner { padding: 4rem 0; } }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 17ch; color: #fff; }
.hero .eyebrow { color: #fff; opacity: .82; }
.hero .dek { margin-top: 1.2rem; max-width: 52ch; color: rgba(255,255,255,.86); font-size: 1.08rem; }
/* On a phone this paragraph pushes the CTAs off screen. Headline + buttons
   carry the hero; the same copy is on the About page and in the meta
   description, so nothing is lost. */
@media (max-width: 640px) { .hero .dek { display: none; } }
.hero .cta-row { display: flex; gap: .8rem; margin-top: 2.2rem; flex-wrap: wrap; }

/* ============ trust bar ============ */
.trustbar { background: #fff; border-bottom: 1px solid var(--line); }
.trustbar .wrap { display: flex; flex-wrap: wrap; }
.trustbar .item { flex: 1 1 220px; padding: 1.25rem 1.4rem; display: flex; align-items: center; gap: .7rem; border-left: 1px solid var(--line); }
.trustbar .item:first-child { border-left: none; padding-left: 0; }
.trustbar .item svg { flex: none; color: var(--pine); }
.trustbar .item span { font-size: .86rem; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 700px) {
  .trustbar .item { border-left: none; border-top: 1px solid var(--line); flex: 1 1 46%; padding-left: 0; }
  .trustbar .item:first-child { border-top: none; }
}
/* Two columns is too narrow for these strings on a phone — they were clipping. */
@media (max-width: 600px) {
  .trustbar .item { flex: 1 1 100%; padding: 1rem 0; }
}

/* ============ section head ============ */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.section-head .eyebrow { margin-bottom: .6rem; display: block; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); max-width: 20ch; }
.section-head p.lede { max-width: 38ch; color: var(--ink-soft); font-size: .95rem; }

/* ============ capability stepper ============ */
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .stepper { grid-template-columns: 1fr; border-bottom: none; } }
.step { padding: 1.7rem 1.4rem; border-left: 1px solid var(--line); }
.step:first-child { border-left: none; padding-left: 0; }
@media (max-width: 900px) { .step { border-left: none; border-bottom: 1px solid var(--line); padding-left: 0; } }
.step .n { font-family: var(--font-mono); color: var(--ink-faint); font-size: .8rem; letter-spacing: .1em; }
.step[data-active="true"] .n { color: var(--pine); }
.step h3 { font-size: 1.05rem; font-weight: 700; margin-top: .6rem; margin-bottom: .5rem; }
.step p { color: var(--ink-soft); font-size: .9rem; }

/* ============ product cards / catalog ============ */
.catalog-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filter-chip {
  font-family: var(--font-mono); font-size: .76rem; padding: .5rem 1rem; border-radius: 99px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer;
}
.filter-chip[aria-pressed="true"] { background: var(--pine); color: #fff; border-color: var(--pine); }

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.prod-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.prod-card .shot { aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; }
.prod-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.prod-card .body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.prod-card h3 { font-size: 1.05rem; font-weight: 700; }
.prod-card p { font-size: .86rem; color: var(--ink-faint); flex: 1; }
.prod-card .link { font-size: .84rem; font-weight: 700; color: var(--pine); margin-top: auto; }

/* ============ team ============ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.8rem 1.4rem; }
@media (max-width: 800px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }
.headshot-initials {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 2.4rem; font-weight: 800; color: var(--pine); background: var(--pine-tint);
}
.team-card { text-align: center; }
.team-card .headshot { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 1rem; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.team-card .headshot img { width: 100%; height: 100%; object-fit: cover; }
.team-card h4 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .15rem; }
.team-card .role { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .7rem; }
.team-card .contact { font-size: .84rem; color: var(--ink-soft); margin-bottom: .7rem; }
.team-card .wa { font-size: .8rem; font-weight: 700; color: var(--pine); display: inline-flex; align-items: center; gap: .35rem; }

/* ============ dark CTA band ============ */
.dark-band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.dark-band .wrap { padding: 3.8rem 2.2rem; }
.dark-band h1, .dark-band h2, .dark-band h3 { color: #fff; }
.dark-band .eyebrow { color: #fff; opacity: .75; }

/* ============ clients & certifications ============ */
/* Client carousel — two rows drifting in opposite directions. The track is
   duplicated in markup so the loop is seamless; the copy is aria-hidden so
   screen readers hear each client once. */
.logo-carousel { position: relative; overflow: hidden; }
/* Fade the edges so logos enter and leave instead of getting chopped. */
.logo-carousel::before, .logo-carousel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.logo-carousel::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.logo-carousel::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }

.logo-track { display: flex; width: max-content; gap: 1rem; padding: .5rem 0; }
.logo-track + .logo-track { margin-top: 1rem; }
.logo-track[data-dir="left"] { animation: logo-drift-left 46s linear infinite; }
.logo-track[data-dir="right"] { animation: logo-drift-right 52s linear infinite; }
.logo-carousel:hover .logo-track { animation-play-state: paused; }

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

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none !important; flex-wrap: wrap; width: 100%; justify-content: center; }
  .logo-carousel::before, .logo-carousel::after { display: none; }
}

.logo-cell {
  flex: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-width: 200px; min-height: 116px; padding: 1.2rem 1.6rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
/* Height cap does the work: these marks range from 4:1 wordmarks to stacked
   icon-over-name lockups and circular badges, so cap both axes and let each
   keep its own aspect. */
.logo-cell img { max-height: 62px; max-width: 156px; width: auto; object-fit: contain; }
/* Name-only fallback until a brand pack arrives. */
.logo-cell .client-name {
  font-weight: 700; font-size: .95rem; color: var(--ink); line-height: 1.25; letter-spacing: -.01em;
}
.logo-cell.placeholder {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--surface); border-style: dashed;
}

.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 800px) { .cert-grid { grid-template-columns: 1fr; } }
.cert-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
}
/* The supplied marks are wide horizontal lockups (up to ~4:1), so they get a
   wide plate and keep their own aspect ratio — boxing them into a square
   crushed them down to a sliver. */
.cert-plate {
  display: flex; align-items: center; justify-content: center;
  padding: 1.8rem 1.6rem; min-height: 132px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.cert-plate img { width: auto; max-width: 220px; max-height: 76px; object-fit: contain; }
.cert-body { padding: 1.2rem 1.4rem 1.4rem; }
.cert-body b { display: block; font-size: 1.06rem; font-weight: 700; margin-bottom: .3rem; }
.cert-body span { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }

/* ============ values list ============ */
.values-list { border-top: 1px solid var(--line); }
.value-row { display: grid; grid-template-columns: 3rem 12rem 1fr; gap: 1.4rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
@media (max-width: 700px) { .value-row { grid-template-columns: 2.4rem 1fr; } .value-row p { grid-column: 2; } }
.value-row .n { font-family: var(--font-mono); color: var(--pine); font-size: .8rem; }
.value-row h3 { font-size: 1rem; font-weight: 700; }
.value-row p { font-size: .92rem; color: var(--ink-soft); }

/* ============ checklist ============ */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.4rem; }
@media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }
.checklist li { display: flex; align-items: flex-start; gap: .6rem; font-size: .94rem; color: var(--ink-soft); }
.checklist svg { flex: none; margin-top: .18rem; color: var(--pine); }

/* ============ photo grids ============ */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 800px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
.photo-tile { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile.tall { aspect-ratio: 3/4; }
.photo-tile.wide { grid-column: span 2; aspect-ratio: 16/9; }

/* ============ spec table ============ */
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .86rem; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table td { padding: .65rem .2rem; vertical-align: top; }
.spec-table td:first-child { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; width: 40%; }

/* ============ footer ============ */
footer.site { background: var(--ink); color: var(--on-dark-soft); }
footer.site .wrap { padding: 3.4rem 2.2rem 1.6rem; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2.2rem; }
@media (max-width: 800px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.site .wrap { grid-template-columns: 1fr; } }
footer.site h5 { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: .9rem; }
footer.site .flogo img { height: 32px; filter: brightness(0) invert(1); margin-bottom: .9rem; }
footer.site p, footer.site a { font-size: .86rem; line-height: 1.7; color: var(--on-dark-soft); }
footer.site a:hover { color: #fff; }
footer.site .fbottom { border-top: 1px solid rgba(255,255,255,.14); padding: 1.1rem 2.2rem; font-family: var(--font-mono); font-size: .7rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ============ responsive two-column split ============ */
/* Inline `grid-template-columns: 1fr 1fr` can't carry a media query, which is
   how the contact page ended up scrolling sideways on a phone. Use these. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.split-2.is-weighted { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 860px) {
  .split-2, .split-2.is-weighted { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ============ legal pages ============ */
.legal-wrap { max-width: 70ch; }
.legal-wrap h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-top: .6rem; }
.legal-updated { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-faint); margin-top: .5rem; }
.legal-wrap h2 { font-size: 1.15rem; margin: 2.2rem 0 .7rem; }
.legal-wrap p { color: var(--ink-soft); margin-bottom: .8rem; }
.legal-wrap ul { color: var(--ink-soft); padding-left: 1.2rem; margin: 0 0 1rem; }
.legal-wrap li { margin-bottom: .5rem; }
.legal-wrap strong { color: var(--ink); }
.legal-wrap a { color: var(--pine); font-weight: 600; }
.legal-flag {
  background: var(--pine-tint); border: 1px solid var(--line); border-left: 3px solid var(--pine);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.4rem 0 2rem;
  font-size: .88rem; color: var(--ink-soft);
}

/* ============ guided quote form ============ */
.quote-wrap { max-width: 620px; }
.quote-wrap h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.quote-lede { margin-top: .6rem; color: var(--ink-soft); font-size: .95rem; }

.quote-progress {
  list-style: none; display: flex; gap: .4rem; margin: 1.4rem 0 1.2rem; padding: 0;
}
.quote-progress li {
  flex: 1; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-top: .5rem; border-top: 3px solid var(--line);
}
.quote-progress li[data-state="current"] { color: var(--pine); border-top-color: var(--pine); }
.quote-progress li[data-state="done"] { border-top-color: var(--pine); }

.quote-form fieldset { border: none; margin: 0; padding: 0; }
.quote-form fieldset[hidden] { display: none; }
.quote-legend {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: 1rem; padding: 0;
}
/* Quote page is a task, not a landing page — get the form above the fold. */
.quote-wrap { padding-top: 0; }
@media (max-width: 640px) {
  .section-pad:has(.quote-wrap) { padding-top: 1.6rem; padding-bottom: 2.4rem; }
}
.form-field .opt { color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field-help { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }
.field-error { font-size: .8rem; color: #b4231c; font-weight: 600; margin-top: .35rem; }

.quote-form input[type="file"] {
  font-family: var(--font-body); font-size: .88rem; padding: .7rem;
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); width: 100%;
}
.file-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.file-list li {
  font-family: var(--font-mono); font-size: .74rem; color: var(--pine);
  background: var(--pine-tint); padding: .35rem .6rem; border-radius: var(--radius);
}

.quote-nav { display: flex; gap: .7rem; margin-top: 1.6rem; }
.quote-nav .btn-accent { flex: 1; justify-content: center; }
@media (max-width: 420px) {
  .quote-nav { flex-direction: column-reverse; }
  .quote-nav .btn { width: 100%; justify-content: center; }
}

.quote-alt {
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-soft);
}
.quote-alt .btn-wa { margin-top: .7rem; }
.quote-foot { margin-top: 1.6rem; font-size: .85rem; color: var(--ink-faint); }
.quote-foot a, .quote-alt a:not(.btn) { color: var(--pine); font-weight: 600; }

/* location combobox */
.location-field { position: relative; }
.location-results {
  list-style: none; margin: .3rem 0 0; padding: .3rem;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto;
}
.location-results button {
  width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius);
  padding: .55rem .7rem; font-size: .9rem; color: var(--ink); font-weight: 500;
}
.location-results button:hover { background: var(--pine-tint); color: var(--pine); }

/* ============ scripted assistant ============ */
/* Sits directly above the WhatsApp bubble, same right edge. column-reverse so
   the panel opens upward from the launcher. */
.assistant {
  position: fixed; right: 1.3rem; bottom: 5.6rem; z-index: 55;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .6rem;
}

/* Small round "?" bubble, matched to the WhatsApp float. */
.assistant-launcher {
  width: 52px; height: 52px; padding: 0; flex: none;
  background: var(--ink); color: #fff; border: none; border-radius: 50%;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.5rem; line-height: 1;
}
.assistant-launcher:hover { background: var(--dark); }
.assistant-launcher[aria-expanded="true"] { display: none; }

.assistant-panel {
  width: 360px; max-width: calc(100vw - 2.6rem); max-height: min(72vh, 560px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); display: flex; flex-direction: column; overflow: hidden;
}
/* `display: flex` above outranks the UA's [hidden] rule, so the close button
   would set hidden="" and the panel would stay on screen. Restore it. */
.assistant-panel[hidden] { display: none; }
@media (max-width: 560px) { .assistant-panel { width: calc(100vw - 2.6rem); } }

.assistant-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem; background: var(--ink); color: #fff;
}
.assistant-head strong { display: block; font-size: .95rem; }
.assistant-head span { font-size: .78rem; color: var(--on-dark-soft); }
.assistant-close { background: none; border: none; color: #fff; padding: .25rem; border-radius: var(--radius); }
.assistant-close:hover { background: rgba(255,255,255,.15); }

.assistant-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.assistant-msg { font-size: .9rem; line-height: 1.5; padding: .7rem .9rem; border-radius: var(--radius-lg); max-width: 92%; }
.assistant-msg.from-site { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); }
.assistant-msg.from-visitor { background: var(--pine); color: #fff; align-self: flex-end; font-weight: 600; }

.assistant-action {
  display: block; margin-top: .7rem; text-align: center;
  font-weight: 700; font-size: .84rem; padding: .6rem .9rem; border-radius: 99px;
  background: var(--pine); color: #fff;
}
.assistant-action:hover { background: var(--pine-deep); }
.assistant-action.is-wa { background: var(--wa); }
.assistant-action.is-wa:hover { background: var(--wa-deep); }

.assistant-choices { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .9rem; }
.assistant-chip {
  font-size: .82rem; font-weight: 600; padding: .5rem .85rem; border-radius: 99px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.assistant-chip:hover { border-color: var(--pine); color: var(--pine); }
.assistant-chip.is-quiet { color: var(--ink-faint); font-weight: 500; }

.assistant-foot {
  border-top: 1px solid var(--line); padding: .7rem 1.1rem;
  font-size: .78rem; color: var(--ink-faint); background: var(--surface);
}
.assistant-foot a { color: var(--pine); font-weight: 700; }

/* ============ whatsapp float ============ */
.wa-float {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); border: none;
}
.wa-float:hover { background: var(--wa-deep); }

/* ============ forms ============ */
.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.form-field label { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.form-field input, .form-field textarea, .form-field select {
  font-family: var(--font-body); font-size: .95rem; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--pine); }
.form-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--ink-soft); margin: 1.1rem 0; }
.form-check input { margin-top: .2rem; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ reveal-on-scroll ============ */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ============ list + photo-swap panel ============ */
.swap-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: stretch; }
@media (max-width: 800px) { .swap-panel { grid-template-columns: 1fr; } }
.swap-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.swap-list li { border-bottom: 1px solid var(--line); }
.swap-list button { width: 100%; text-align: left; background: none; border: none; border-radius: 0; padding: 1rem .4rem; font-family: var(--font-body); font-size: 1rem; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; }
.swap-list button[aria-current="true"] { color: var(--pine); font-weight: 700; }
.swap-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); min-height: 260px; }
.swap-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.swap-photo img[data-active="true"] { opacity: 1; }