/* ==========================================================================
   THE PRIVATE OFFICE — WEBSITE
   business-enquiries.css — page styles for the /business-enquiries route.
   Reuses the design system (tokens · base · components · site chrome);
   nothing in this file affects any other page.
   ========================================================================== */

/* ==========================================================================
   1 · BREADCRUMB — quiet institutional wayfinding above the hero
   ========================================================================== */
.be-crumbs {
  background: var(--c-white);
  border-bottom: 1px solid rgba(198, 161, 91, 0.22);            /* faint gold hairline */
  padding: calc(var(--header-h) + var(--space-3)) clamp(20px, 4vw, 64px) var(--space-3);
}
.be-crumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.be-crumbs__link,
.be-crumbs__here,
.be-crumbs__sep {
  font-family: var(--font-sub);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.be-crumbs__link {
  color: var(--navy-800);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-standard);
}
.be-crumbs__link:hover { color: var(--gold-600); }
.be-crumbs__link:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: var(--r-xs); }
.be-crumbs__sep { color: var(--gold-500); }
.be-crumbs__here { color: var(--ink-mute); }

/* ==========================================================================
   2 · PAGE HERO — centered navy band (offset provided by the breadcrumb)
   ========================================================================== */
.be-hero {
  background: var(--grad-navy);
  color: var(--ivory-100);
  text-align: center;
  padding: var(--space-7) clamp(24px, 5vw, 64px);
}
.be-hero__inner { max-width: 780px; margin-inline: auto; }
.be-hero .eyebrow { color: var(--gold-400); }
.be-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 3.75rem);
  font-weight: var(--fw-medium);
  line-height: 1.12;
  letter-spacing: var(--track-display);
  color: var(--c-white);
  margin: 18px 0 20px;
  text-wrap: balance;
}
.be-hero__lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: rgba(247, 242, 232, 0.74);
  max-width: 62ch;
  margin-inline: auto;
}

/* ==========================================================================
   Shared page rhythm — shells, container, heads, tags
   ========================================================================== */
.be-who      { background: #FAF8F3; }
.be-cats     { background: var(--c-white); }
.be-formwrap { background: #FAF8F3; }
.be-timeline { background: var(--c-white); }
.be-faq      { background: #FAF8F3; }

.be-who, .be-cats, .be-formwrap, .be-timeline, .be-faq {
  padding: var(--space-7) clamp(20px, 4vw, 64px);
}
.be-inner { max-width: 1440px; margin-inline: auto; }
.be-inner--narrow { max-width: 880px; }

.be-head { max-width: 720px; margin-bottom: var(--space-5); }
.be-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.9vw, 2.625rem);
  font-weight: var(--fw-semi);
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--navy-800);
  margin: 16px 0 12px;
  text-wrap: balance;
}
.be-desc { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-soft); }

/* Step micro-tag — Cinzel label with gold hairline */
.be-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sub);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 14px;
}
.be-tag::after { content: ""; width: 56px; height: 1px; background: var(--grad-gold-line); }

/* ==========================================================================
   3 · WHO SHOULD USE THIS PAGE · 4 · PROPOSAL CATEGORIES
   Shared card grid — existing .card surface, static information cards
   ========================================================================== */
.be-cats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.cat-card { padding: 32px 36px; }
.cat-card__icon { width: 30px; height: 30px; color: var(--gold-600); margin-bottom: 20px; }
.cat-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semi);
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--navy-800);
  margin-bottom: 10px;
}
.cat-card__text { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.7; color: var(--ink-soft); }

/* ==========================================================================
   5 · PROPOSAL SUBMISSION FORM — .card + form kit (.field/.input)/.choice)
   ========================================================================== */
.be-card { max-width: 880px; margin-inline: auto; padding: clamp(28px, 4vw, 48px); }

.be-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px var(--space-3);
}
.be-form__full { grid-column: 1 / -1; }
.textarea--tall { min-height: 190px; }

.be-form__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: var(--space-1); }
.be-submit { gap: 10px; }
.be-form__demo { text-align: center; }

/* File field — dashed gold well prepared for a future storage adapter */
.be-file__input {
  width: 100%;
  padding: 13px 15px;
  background: var(--c-white);
  border: 1.5px dashed rgba(198, 161, 91, 0.5);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.be-file__input:hover:not(:disabled) { border-color: rgba(198, 161, 91, 0.85); }
.be-file__input:focus-visible { outline: none; border-color: var(--gold-500); box-shadow: var(--focus-ring); }
.be-file__input::file-selector-button {
  margin-right: 14px;
  padding: 10px 18px;
  border: 1px solid rgba(198, 161, 91, 0.55);
  border-radius: var(--r-sm);
  background: var(--gold-50);
  color: var(--gold-700);
  font-family: var(--font-sub);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.be-file__input::file-selector-button:hover { background: var(--gold-100); }
.be-file__hint { margin-top: 8px; }

/* Loading state — gold-rim spinner inside the primary button */
.be-submit__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(13, 27, 46, 0.28);
  border-top-color: var(--navy-900);
  animation: be-spin 0.7s linear infinite;
}
.be-submit.is-loading .be-submit__spinner { display: inline-block; }
.be-submit:disabled { cursor: wait; }
@keyframes be-spin { to { transform: rotate(1turn); } }

/* Success panel — replaces the form, announced via role="status" */
.be-success { text-align: center; padding: clamp(12px, 2vw, 28px) 0; }
.be-success__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: var(--shadow-gold);
}
.be-success__badge .icon { width: 28px; height: 28px; color: var(--navy-800); }
.be-success__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  color: var(--navy-800);
  margin-bottom: 10px;
  outline: none;
}
.be-success__text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 auto var(--space-3);
}

/* ==========================================================================
   6 · SUBMISSION PROCESS — gold-railed steps (existing .card surface)
   ========================================================================== */
.be-tl {
  list-style: none;
  position: relative;
  max-width: 880px;
  margin: var(--space-6) 0 0;
  padding: 0 0 0 48px;
}
.be-tl::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(198, 161, 91, 0.55), rgba(198, 161, 91, 0.12));
}
.be-tl__item { position: relative; }
.be-tl__item + .be-tl__item { margin-top: var(--space-4); }
.be-tl__dot {
  position: absolute;
  left: -43px;
  top: 30px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.18);
}
.be-tl__card { padding: 26px 32px; }
.be-tl__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semi);
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--navy-800);
  margin-bottom: 8px;
}
.be-tl__text { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.7; color: var(--ink-soft); }

/* ==========================================================================
   7 · FAQ — native <details> accordions with gold chevrons
   ========================================================================== */
.faq { display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  background: var(--c-white);
  border: 1px solid rgba(198, 161, 91, 0.32);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-2) var(--ease-standard);
}
.faq__item[open] { border-color: rgba(198, 161, 91, 0.6); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-display);
  color: var(--navy-800);
  list-style: none;
  border-radius: var(--r-md);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.faq__chev { flex: none; width: 18px; height: 18px; color: var(--gold-600); transition: transform var(--dur-2) var(--ease-standard); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 24px 22px; }
.faq__a p { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.7; color: var(--ink-soft); }

/* ==========================================================================
   8 · CONTACT BLOCK — centered navy coda
   ========================================================================== */
.be-contact {
  background: var(--grad-navy);
  color: var(--ivory-100);
  text-align: center;
  padding: var(--space-7) clamp(20px, 4vw, 64px);
}
.be-contact .eyebrow { color: var(--gold-400); }
.be-contact__inner { max-width: 1080px; }
.be-contact__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.9vw, 2.625rem);
  font-weight: var(--fw-semi);
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--c-white);
  margin: 16px 0 14px;
  text-wrap: balance;
}
.be-contact__text {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: rgba(247, 242, 232, 0.74);
  max-width: 66ch;
  margin-inline: auto;
}
.be-contact__cols {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: left;
}
.be-contact__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: var(--r-md);
}
.be-contact__icon { width: 26px; height: 26px; color: var(--gold-400); margin-bottom: 6px; }
.be-contact__label {
  font-family: var(--font-sub);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--gold-300);
}
.be-contact__value {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(247, 242, 232, 0.74);
}
.be-contact__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: rgba(247, 242, 232, 0.54);
}
.be-contact__note .icon { width: 15px; height: 15px; color: var(--gold-400); }

/* ==========================================================================
   Responsive — tablet & mobile
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .be-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .be-contact__cols { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 767px) {
  .be-crumbs { padding-top: calc(var(--header-h) + var(--space-2)); }
  .be-hero { padding: var(--space-6) clamp(20px, 5vw, 40px); }
  .be-hero__title { font-size: clamp(2.125rem, 7.6vw, 2.5rem); }
  .be-who, .be-cats, .be-formwrap, .be-timeline, .be-faq { padding-block: var(--space-6); }
  .be-cats__grid { grid-template-columns: 1fr; }
  .be-form__grid { grid-template-columns: 1fr; }
  .be-tl { padding-left: 32px; }
  .be-tl__dot { left: -32.5px; top: 26px; }
  .be-tl::before { left: 5px; }
  .be-tl__card { padding: 22px 24px; }
  .be-contact { padding-block: var(--space-6); }
  .be-contact__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Submission-system helpers (append-only) — honeypot trap, server error
   region, and the reference readout inside the success panel.
   ========================================================================== */
.be-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.be-form__error {
  margin: 0;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: #93372c;
  background: #f9eeec;
  border: 1px solid #d29a93;
  border-radius: var(--r-md, 8px);
}
.be-ref {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
.be-ref__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin: 0;
  flex-wrap: wrap;
}
.be-ref__label {
  font-family: var(--font-sub);
  font-size: var(--fs-2xs, 0.625rem);
  font-weight: var(--fw-semi, 600);
  letter-spacing: var(--track-caps, 0.18em);
  text-transform: uppercase;
  color: var(--ink-mute, #7E838C);
}
.be-ref__value {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy-800);
}