/* ── TOKENS ── */
:root {
  --bg:        #ffffff;
  --bg-alt:    #f5f5f4;
  --fg:        #0a0a0a;
  --fg-muted:  #6b6b6b;  /* 5.3:1 on white — safe for small text */
  --fg-faint:  #8a8a8a;  /* 3.4:1 — large display text only, never <24px */
  --rule:      #e4e4e2;
  --accent:    #0346c5;
  --sans:      'Inter', system-ui, -apple-system, sans-serif;
  --nav-h:     76px;
  --max:       1400px;
  --pad-x:     clamp(20px, 6vw, 96px);
  --sect-y:    clamp(88px, 13vw, 180px);
  --tap:       44px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea, button, select { font: inherit; }
::selection { background: var(--fg); color: var(--bg); }

/* Two-tone emphasis — replaces the old serif italic */
em { font-style: normal; font-weight: 300; color: var(--fg-faint); }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s, background 0.35s;
}
nav.scrolled {
  border-bottom-color: var(--rule);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-logo {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  list-style: none;
}
.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--fg); }
.nav-cta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 26px;
  background: var(--fg);
  color: var(--bg);
  transition: opacity 0.25s;
}
.nav-cta:hover { opacity: 0.78; }

.nav-toggle {
  display: none;
  width: var(--tap); height: var(--tap);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--fg);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 28px var(--pad-x) 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 99;
  transform: translateY(-115%);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer.open { transform: translateY(0); }
.nav-drawer a {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.nav-drawer .drawer-cta {
  margin-top: 20px;
  border-bottom: none;
  background: var(--fg);
  color: var(--bg);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 18px;
}

/* ── HERO ── */
#hero {
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(48px, 9vw, 110px)) var(--pad-x) clamp(36px, 5vw, 60px);
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: clamp(24px, 4vw, 44px);
}
.hero-title {
  font-size: clamp(34px, 7.4vw, 104px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-rotator {
  position: relative;
  display: inline-grid;
  vertical-align: bottom;
  max-width: 100%;
}
/* Rotator sits a step down from the headline so the longest phrase
   ("corporate luncheons") cannot outrun the container and force
   horizontal page scroll. */
.hero-rotator-word {
  grid-area: 1 / 1;
  font-size: 0.82em;
  color: var(--fg-faint);
  font-weight: 300;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.12em);
  transition: opacity 0.6s, filter 0.6s, transform 0.6s;
  white-space: nowrap;
}
.hero-rotator-word.active { opacity: 1; filter: blur(0); transform: translateY(0); }

.hero-rule {
  height: 1px;
  background: var(--rule);
  margin: clamp(36px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
}
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
}
.hero-desc {
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 300;
  color: var(--fg-muted);
  max-width: 56ch;
  line-height: 1.75;
}
.hero-cta-group { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.btn-primary {
  display: inline-block;
  background: var(--fg);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 19px 40px;
  transition: opacity 0.25s;
  white-space: nowrap;
}
.btn-primary:hover { opacity: 0.78; }
.btn-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--fg);
  transition: color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.btn-text:hover { color: var(--accent); border-color: var(--accent); }
.hero-scroll {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ── MARQUEE ── */
.marquee-band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  padding: 24px 0;
  background: var(--bg-alt);
}
.marquee-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee-item {
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-dot { color: var(--fg-faint); font-size: 9px; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── SHARED SECTION ── */
section { max-width: var(--max); margin: 0 auto; padding: var(--sect-y) var(--pad-x); }
.section-header {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
  margin-bottom: clamp(52px, 7vw, 96px);
}
.section-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 18px;
}
.section-title {
  font-size: clamp(30px, 5.2vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  text-wrap: balance;
}
.section-body {
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 300;
  color: var(--fg-muted);
  max-width: 46ch;
  line-height: 1.8;
}

/* ── SERVICES ── */
/* Five services, so column counts are explicit: auto-fit landed on 4 and
   orphaned "Photo & Film Shoots" alone in a second row. Grid carries the
   left rule so the row reads as a closed ruled table. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.service-item {
  padding: clamp(26px, 2.6vw, 38px) clamp(16px, 1.8vw, 26px) clamp(30px, 3vw, 42px);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  transition: background 0.35s;
}
.service-item:hover { background: var(--bg-alt); }
.service-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  margin-bottom: 26px;
}
.service-name {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.service-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-muted);
  line-height: 1.8;
  margin-bottom: 22px;
}
.service-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* ── GALLERY ── */
.gallery-group { margin-bottom: clamp(56px, 7vw, 104px); }
.gallery-group:last-child { margin-bottom: 0; }
.theme-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--rule);
}
.theme-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.theme-title {
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.1;
}
.gallery-group-grid { display: grid; gap: clamp(10px, 1.2vw, 18px); }
.gallery-group-grid.three { grid-template-columns: repeat(3, 1fr); }
.gallery-group-grid.two { grid-template-columns: repeat(2, 1fr); }
.port-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-alt);
  cursor: pointer;
}
.gallery-group-grid.two .port-item { aspect-ratio: 3 / 2; }
.port-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.75s cubic-bezier(0.2, 0, 0.2, 1), filter 0.5s;
  filter: grayscale(0.18);
}
.port-item:hover img,
.port-item:focus-visible img { transform: scale(1.045); filter: grayscale(0); }
.port-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.port-item:hover .port-overlay,
.port-item:focus-visible .port-overlay { opacity: 1; }
.port-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

/* ── ABOUT ── */
#about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.about-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: clamp(36px, 4.6vw, 60px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--rule);
}
.stat-num {
  font-size: clamp(24px, 3.1vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.stat-num span { font-size: 0.44em; font-weight: 500; color: var(--fg-muted); margin-left: 2px; }
.stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 10px;
  line-height: 1.5;
}
.about-visual { position: relative; }
.about-img-main { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-alt); }
.about-img-main img { width: 100%; height: 100%; object-fit: cover; }

/* ── CONTACT ── */
#contact {
  max-width: none;
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
}
.contact-shell { max-width: var(--max); margin: 0 auto; }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(44px, 5.4vw, 72px);
  align-items: start;
}
.contact-desc {
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 300;
  color: var(--fg-muted);
  line-height: 1.8;
  max-width: 46ch;
}
.contact-info-row {
  display: grid;
  gap: 26px;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--rule);
}
.contact-info-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 7px;
}
.contact-info-value {
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color 0.25s;
}
a.contact-info-value:hover { color: var(--accent); }
.contact-form-wrap { background: var(--bg); padding: clamp(22px, 3vw, 40px); }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--rule);
  padding: 44px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
}
.footer-logo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-copy { font-size: 11px; font-weight: 300; color: var(--fg-muted); letter-spacing: 0.04em; }
.footer-links { display: flex; gap: 26px; list-style: none; }
.footer-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color 0.25s;
}
.footer-links a:hover { color: var(--fg); }

/* ── MOTION ──
   Scoped to .js so the page is fully legible when JavaScript fails or
   is disabled. Without this the whole site renders blank. */
.js .fade-up, .js .service-item, .js .port-item,
.js .about-stat, .js .about-visual {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s cubic-bezier(0.2, 0, 0.2, 1), transform 0.85s cubic-bezier(0.2, 0, 0.2, 1);
}
.fade-up.visible, .service-item.visible, .port-item.visible,
.about-stat.visible, .about-visual.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js .fade-up, .js .service-item, .js .port-item,
  .js .about-stat, .js .about-visual { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .section-header { grid-template-columns: 1fr; align-items: start; }
  #about { grid-template-columns: 1fr; }
  .about-visual { max-width: 520px; }
  .contact-inner { grid-template-columns: 1fr; }
  .hero-bottom { grid-template-columns: 1fr; align-items: start; }
}
/* Nav collapses at 900px, not 760px: below ~900 the logo, four links
   and the CTA no longer fit on one line and each wraps. */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 1180px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }

/* Mobile: swipe the tiles instead of stacking five of them vertically.
   The track bleeds to both viewport edges via negative margin, with matching
   padding so the first tile still lines up with the body copy above it. */
@media (max-width: 760px) {
  .services-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad-x);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-left: 0;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
  }
  .services-grid::-webkit-scrollbar { display: none; }

  .service-item {
    flex: 0 0 76%;
    scroll-snap-align: start;
    border-left: 1px solid var(--rule);
    /* Trailing edge closes the last tile, since there is no next border. */
  }
  .service-item:last-child { border-right: 1px solid var(--rule); }

  /* No scroll-reveal here: tiles off to the right would sit blank until
     swiped into view, which reads as broken during a fast swipe. */
  .js .service-item { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .gallery-group-grid.three, .gallery-group-grid.two { grid-template-columns: 1fr 1fr; }
  .about-stat-row { grid-template-columns: 1fr 1fr; gap: 26px; }
  footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .gallery-group-grid.three, .gallery-group-grid.two { grid-template-columns: 1fr; }
  .hero-cta-group { flex-direction: column; align-items: stretch; gap: 16px; }
  .btn-primary, .btn-text { text-align: center; }
  .btn-text { border-bottom: none; padding: 16px; border: 1px solid var(--fg); }
}

/* ══ INQUIRY PAGES ══
   Shared by decor-inquiry.html. Reuses the tokens above so the two pages
   cannot drift apart. */

.page-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(56px, 9vw, 128px)) var(--pad-x) clamp(36px, 5vw, 60px);
}
.page-title {
  font-size: clamp(32px, 6.4vw, 88px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 18ch;
}
.page-lede {
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 300;
  color: var(--fg-muted);
  line-height: 1.75;
  max-width: 56ch;
  margin-top: clamp(24px, 3.4vw, 38px);
}

/* Two-column: supporting copy left, form right */
.inquiry-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.inquiry-aside .section-eyebrow { margin-top: 0; }
.inquiry-list {
  list-style: none;
  margin-top: clamp(26px, 3.2vw, 38px);
  border-top: 1px solid var(--rule);
}
.inquiry-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-muted);
  line-height: 1.7;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
}
.inquiry-list li strong {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  padding-top: 3px;
}
.inquiry-form-panel {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: clamp(22px, 3vw, 44px);
  min-height: 320px;
}

/* Shown only while the embed is unconfigured — never a dead end. */
.form-fallback {
  display: grid;
  gap: 18px;
}
.form-fallback .notice {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg-alt);
  border-left: 2px solid var(--fg);
  padding: 16px 18px;
}
.form-fallback .notice strong {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 7px;
}

/* Venue-only vs decor split */
.path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(34px, 4vw, 52px);
}
.path-card {
  display: block;
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: clamp(24px, 2.8vw, 38px);
  transition: border-color 0.3s, transform 0.3s;
}
.path-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.path-card .path-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
}
.path-card h3 {
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.12;
  margin: 20px 0 14px;
}
.path-card p {
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}
.path-card .path-go {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 3px;
}

@media (max-width: 1000px) {
  .inquiry-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* ══ NATIVE INQUIRY FORM ══ */

.form-grid { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field label .req { color: var(--fg); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 14px 15px;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 132px; line-height: 1.7; }
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236b6b6b' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
  border-color: var(--fg);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-faint); }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: #b3261e; }
.field-error {
  font-size: 12px;
  font-weight: 400;
  color: #b3261e;
  display: none;
}
.field.invalid .field-error { display: block; }

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

.form-submit {
  display: inline-block;
  width: 100%;
  background: var(--fg);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 19px 40px;
  text-align: center;
  transition: opacity 0.25s;
}
.form-submit:hover:not(:disabled) { opacity: 0.78; }
.form-submit:disabled { opacity: 0.4; cursor: progress; }

.form-note { font-size: 12px; font-weight: 300; color: var(--fg-muted); line-height: 1.7; }

.form-status { font-size: 14px; line-height: 1.7; padding: 16px 18px; display: none; }
.form-status.show { display: block; }
.form-status.error { background: #fdf0ef; border-left: 2px solid #b3261e; color: #7a1a14; }

.form-success { text-align: left; }
.form-success h3 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.form-success p { font-size: 14px; font-weight: 300; color: var(--fg-muted); line-height: 1.8; }

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
}