/* ==========================================================================
   INQUIRY PAGE (Figma node 332:2, "Inquiry fin") — 2026-09-04
   Basis: 1440x1876 (NAV 92 + HERO 440 + META 64 + FORM 860 + FOOTER 420 — sums exactly).
   FOOTER reuses css/about.css's .footer verbatim (pixel-identical in Figma). NAV is
   its own .inq-nav here rather than about.css's .nav, since this page's hero has no
   photo behind it (plain cream) and needs ink-colored nav text, not cream-on-dark.
   FORM's two columns use flexbox (not absolute-positioned-within-an-unsized-parent —
   see the skill's containing-block gotcha) since a real <form> needs normal document
   flow for its inputs/labels to work and reflow sanely on narrow viewports; every
   horizontal offset is still the exact Figma %, just resolved through flow instead of
   position:absolute.
   ========================================================================== */

/* -------------------------------- NAV (332:3) -------------------------------- */

.inq-nav {
  position: relative;
  width: 100%;
  height: 92px;
  background: var(--color-cream);
}

.inq-nav__wordmark {
  position: absolute;
  top: 8px;
  left: 5.556%;                 /* 80px / 1440px */
  width: 9.444%;                /* 136px / 1440px */
  aspect-ratio: 136 / 77;
  background-color: var(--color-ink);
  -webkit-mask-image: url("../assets/webp/wordmark-mask.webp");
  mask-image: url("../assets/webp/wordmark-mask.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Right-anchored flex row — same change, and for the same reason, as .nav__links in
   about.css (2026-09-08): the fixed Figma left offsets overlapped by ~8px at 960px
   even before the SHOP -> ORGANIC rename. */
.inq-nav__links {
  position: absolute;
  inset: auto 5.556% auto auto;
  top: 40px;
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
}

.inq-nav__link {
  position: relative;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.218em;
  text-transform: uppercase;
  color: rgba(36, 30, 22, 0.72);
  white-space: nowrap;
}

/* Only nav on the site with an active-page indicator — Figma shows CONTACT at full
   opacity with an underline rule, since this page IS "Contact". */
.inq-nav__link--active {
  color: var(--color-ink);
}
.inq-nav__link--active::after {
  content: '';
  position: absolute;
  top: 19px;                    /* 59px - 40px */
  left: 0;
  width: 66px;
  height: 1px;
  background: #a89478;
}

.inq-nav__rule {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-rule);
}

/* -------------------------------- HERO (332:4) -------------------------------- */

.inq-hero {
  position: relative;
  width: 100%;
  padding: 80px 24px 76px;
  background: var(--color-cream);
  text-align: center;
}

.inq-hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.218em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 22px;
}

.inq-hero__heading {
  max-width: 800px;
  margin: 0 auto 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.028vw, 58px);
  line-height: 1.138;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Figma's line break reads fine at desktop widths; on narrow phones "we'd love" alone
   wraps onto its own line above it, stranding "LOVE" as a one-word orphan line. Drop
   the forced break there and let the heading reflow naturally. */
@media (max-width: 500px) {
  .inq-hero__br { display: none; }
}

.inq-hero__intro {
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.714;
  color: var(--color-muted);
}

/* -------------------------------- META (332:5) -------------------------------- */

.inq-meta {
  position: relative;
  width: 100%;
  padding: 26px 5.556%;
  background: var(--color-cream);
}

.inq-meta__rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-rule);
}

.inq-meta__left,
.inq-meta__center,
.inq-meta__right {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.236em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.inq-meta__left { position: absolute; left: 5.556%; top: 50%; transform: translateY(-50%); }
.inq-meta__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.inq-meta__right { position: absolute; right: 5.556%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 16px; letter-spacing: 0; text-transform: none; }

/* The three pieces are independently centered/right-aligned by % — fine at desktop
   widths, but "One inbox, read by people" is wide enough at its fixed clamp() floor
   to collide with both neighbors once the viewport itself gets narrow. Stack instead
   of shrinking further. */
@media (max-width: 640px) {
  .inq-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 5.556%;
  }
  .inq-meta__left,
  .inq-meta__center,
  .inq-meta__right {
    position: static;
    transform: none;
  }
}

/* -------------------------------- FORM (332:6) -------------------------------- */

.inq-form {
  display: flex;
  gap: 120px;                    /* 780px - 660px, the real Figma column gap */
  width: 100%;
  padding: 68px 5.556% 96px;
  background: var(--color-cream);
}

.inq-form__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* Vertical divider sits in the middle of the 120px gap, not glued to either column —
   matches Figma's col-divider at x:720 (the true midpoint between the two 580px
   columns), not the edge of either one. */
.inq-form__col--left::after {
  content: '';
  position: absolute;
  top: 0;
  right: -60px;
  bottom: 0;
  width: 1px;
  background: var(--color-rule);
}

.inq-form__eyebrow,
.inq-info__eyebrow {
  margin: 0 0 36px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.218em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Inquiry-type chips — a real radio group (see inquiry.html), styled as pills.
   :has() drives the checked/active look purely in CSS (no JS needed for this part);
   broadly supported in current Chrome/Safari/Firefox, consistent with this project
   already leaning on modern CSS (grid, aspect-ratio, backdrop mask) elsewhere. */
.inq-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 34px;
}
.inq-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 1px solid rgba(36, 30, 22, 0.28);
  border-radius: var(--radius-plate);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.inq-chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.inq-chip span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.inq-chip:has(input:checked) {
  background: #a89478;
  border-color: #a89478;
}
.inq-chip:has(input:checked) span {
  color: var(--color-cream);
}
.inq-chip:has(input:focus-visible) {
  outline: 2px solid #a89478;
  outline-offset: 2px;
}

.inq-field { margin: 0 0 34px; }
.inq-field__label {
  display: block;
  margin: 0 0 13px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.218em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.inq-field__input {
  display: block;
  width: 100%;
  padding: 0 0 8px;
  border: none;
  border-bottom: 1px solid var(--color-rule);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-ink);
  transition: border-color 0.2s ease;
}
.inq-field__input::placeholder { color: rgba(139, 129, 113, 0.7); }
.inq-field__input:focus { outline: none; border-bottom-color: var(--color-ink); }
.inq-field__input--textarea { resize: vertical; min-height: 90px; font-family: inherit; }
.inq-field--message { margin-bottom: 64px; }

.inq-form__submit {
  display: block;
  width: 100%;
  height: 56px;
  border: 1px solid #a89478;
  border-radius: var(--radius-plate);
  background: #a89478;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cream);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.inq-form__submit:hover { background: #8f7c5f; border-color: #8f7c5f; }

/* -- Right column: contact info -- */

.inq-info__block { margin: 0 0 44px; }
.inq-info__head {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.333;
  color: var(--color-ink);
}
.inq-info__body {
  max-width: 460px;
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.692;
  color: var(--color-muted);
}
.inq-info__body--studio { margin-bottom: 0; }
.inq-info__addr {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: #a89478;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inq-info__divider {
  height: 1px;
  margin: 0 0 44px;
  background: var(--color-rule);
}

.inq-social { display: flex; gap: 26px; }
.inq-social__link {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(36, 30, 22, 0.28);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
}

@media (max-width: 860px) {
  .inq-form { flex-direction: column; gap: 56px; }
  .inq-form__col--left::after { display: none; }
  .inq-nav__link { display: none; } /* no mobile menu built yet — flag: nav links need
                                        a mobile treatment (hamburger or stacked) once
                                        the client's ready for a full responsive pass */
}