/* ==========================================================================
   Written Enquiry — /contact/enquiry/, 18 August 2026 (wqx v1).

   Same system as the Dukes Assistant rebuild and the three reference routes
   (/sales/sellers-guide/ is the declared authority): rounded islands floating
   on the cool blue-grey ground #d9e5e5, warm papers punctuated by one navy,
   the asymmetric blown corner above the working chapter and symmetric radii
   within it, oxblood actions on light, gold on navy only, Gloock 400
   statements, one focus ring.

   IMPORTANT: this layer is paint only. Every form hook (data-wq-*, the field
   ids, the honeypot, the error nodes, the review panel) is untouched, because
   the enquiry workflow is real and the review-before-send behaviour is the
   honest part of it.
   ========================================================================== */

.page--written-enquiry {
  --wqx-night: #0d1d31;
  --wqx-ink: #10233a;
  --wqx-ink-note: #384b59;
  --wqx-oxblood: #7b2430;
  --wqx-oxblood-dark: #5e1924;
  --wqx-green: #17483c;
  --wqx-cream: #fbf8f2;
  --wqx-ivory: #f7f1e7;
  --wqx-stone: #eee3d4;
  --wqx-gold: #b48a45;
  --wqx-shell: min(94vw, 1400px);
  --wqx-line: 1px solid rgba(15, 35, 58, 0.14);
  --wqx-plate-shadow: 0 18px 44px rgba(15, 35, 58, 0.07);
  --wqx-card-shadow: 0 12px 28px rgba(15, 35, 58, 0.07);
  --wqx-row-shadow: 0 10px 26px rgba(15, 35, 58, 0.06);
  background: #f2ede4;
  color: var(--wqx-ink);
}

.page--written-enquiry .main {
  background: #d9e5e5;
  padding-top: 0;
}

/* The breadcrumb was stranded between the header and the title. */
.page--written-enquiry .crumbs { display: none; }

.page--written-enquiry :where(a, button, input, select, summary, textarea):focus-visible {
  outline: 3px solid #f0bd77;
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   The opening island — navy, with the authority's blown bottom-right corner.
   ----------------------------------------------------------------------- */

.page--written-enquiry .wq-hero {
  width: var(--wqx-shell);
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3.5vw, 4rem);
  border-radius: 18px 18px 64px 18px;
  background: var(--wqx-night);
  color: #fff9ef;
}

.page--written-enquiry .wq-hero__copy { width: min(100%, 760px); }

.page--written-enquiry .wq-hero .eyebrow {
  margin: 0 0 0.9rem;
  color: #e5bf82;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  line-height: 1;
  text-transform: uppercase;
}

.page--written-enquiry .wq-hero h1 {
  max-width: 17ch;
  margin: 0;
  color: #fff9ef;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(2.5rem, 3.4vw, 3.75rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

.page--written-enquiry .wq-hero .lede {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  color: rgba(255, 249, 239, 0.8);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.58;
}

/* The privacy statement is the page's most important sentence, so it becomes a
   real device on the navy rather than a floating note. */
.page--written-enquiry .wq-hero__privacy {
  display: grid;
  gap: 0.4rem;
  max-width: 60ch;
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--wqx-gold);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 252, 246, 0.06);
  color: rgba(255, 249, 239, 0.86);
  font-size: 0.95rem;
  line-height: 1.6;
}

.page--written-enquiry .wq-link,
.page--written-enquiry .wq-hero__privacy a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  color: #e5bf82;
  font-weight: 750;
  text-underline-offset: 0.22em;
}

/* --------------------------------------------------------------------------
   The working chapter — an ivory island holding the form.
   ----------------------------------------------------------------------- */

.page--written-enquiry .band.wq {
  width: var(--wqx-shell);
  max-width: none;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.25rem, 4vw, 4rem) clamp(1.25rem, 3vw, 3rem);
  border: var(--wqx-line);
  border-radius: 30px;
  background: var(--wqx-ivory);
  box-shadow: var(--wqx-plate-shadow);
}

/* The no-JS fallback: real routes, as ledger rows. */
.page--written-enquiry .wq__fallback-title {
  margin: 0 0 0.6rem;
  color: var(--wqx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
}

.page--written-enquiry .wq__fallback-copy {
  max-width: 62ch;
  margin: 0 0 1.4rem;
  color: var(--wqx-ink-note);
  font-size: 1rem;
  line-height: 1.68;
}

.page--written-enquiry .wq__routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.75vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--written-enquiry .wq__route {
  display: flex;
  align-items: center;
  min-height: 72px;
  height: 100%;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(15, 35, 58, 0.12);
  border-radius: 14px;
  background: var(--wqx-cream);
  box-shadow: var(--wqx-row-shadow);
  color: var(--wqx-ink);
  font-weight: 750;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--written-enquiry .wq__route:hover {
    border-color: rgba(15, 35, 58, 0.26);
    box-shadow: 0 16px 38px rgba(15, 35, 58, 0.13);
  }
}

/* The form itself, on a near-white card inside the plate. */
.page--written-enquiry .wq__form,
.page--written-enquiry .wq__review {
  width: min(100%, 1060px);
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid rgba(15, 35, 58, 0.12);
  border-radius: 22px;
  background: #fffdf8;
  box-shadow: var(--wqx-card-shadow);
}

.page--written-enquiry .wq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.page--written-enquiry .wq__field { display: grid; align-content: start; gap: 0.35rem; }
.page--written-enquiry .wq__field--wide { grid-column: 1 / -1; }

.page--written-enquiry .form__label {
  color: var(--wqx-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page--written-enquiry .form__hint {
  color: var(--wqx-ink-note);
  font-size: 0.875rem;
  line-height: 1.45;
}

.page--written-enquiry .form__control {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(15, 35, 58, 0.22);
  border-radius: 9px;
  background: var(--wqx-cream);
  color: var(--wqx-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 180ms ease, background 180ms ease;
}

.page--written-enquiry textarea.form__control { min-height: 11rem; resize: vertical; }

.page--written-enquiry .form__control:hover { border-color: rgba(15, 35, 58, 0.38); }

.page--written-enquiry .form__control:focus {
  border-color: var(--wqx-green);
  background: #fffdf8;
  outline: none;
}

.page--written-enquiry .wq__error {
  margin: 0;
  color: var(--wqx-oxblood);
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.45;
}

.page--written-enquiry .wq__summary-errors {
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.3rem;
  border-left: 3px solid var(--wqx-oxblood);
  border-radius: 0 14px 14px 0;
  background: #f7ece9;
}

.page--written-enquiry .wq__errors-title {
  margin: 0 0 0.5rem;
  color: var(--wqx-oxblood);
  font-size: 0.95rem;
  font-weight: 800;
}

.page--written-enquiry .wq__errors-list { margin: 0; padding-left: 1.1rem; color: var(--wqx-ink); font-size: 0.95rem; }

/* The honeypot stays out of sight and out of the tab order. */
.page--written-enquiry .wq__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page--written-enquiry .wq__status {
  max-width: 66ch;
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--wqx-green);
  border-radius: 0 12px 12px 0;
  background: rgba(23, 72, 60, 0.06);
  color: var(--wqx-ink-note);
  font-size: 0.95rem;
  line-height: 1.6;
}

.page--written-enquiry .wq__status--strong { color: var(--wqx-ink); font-weight: 750; }

.page--written-enquiry .wq__form-actions,
.page--written-enquiry .wq__send {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.6rem 0 0;
}

.page--written-enquiry .wq__form-actions .btn,
.page--written-enquiry .wq__send .btn,
.page--written-enquiry .wq__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.page--written-enquiry .btn--primary { background: var(--wqx-oxblood); color: #fff9ef; }

.page--written-enquiry .btn--quiet,
.page--written-enquiry .wq__edit {
  border: 1px solid rgba(15, 35, 58, 0.28);
  background: transparent;
  color: var(--wqx-ink);
}

@media (hover: hover) and (pointer: fine) {
  .page--written-enquiry .btn--primary:hover { background: var(--wqx-oxblood-dark); }
  .page--written-enquiry .btn--quiet:hover,
  .page--written-enquiry .wq__edit:hover { border-color: var(--wqx-green); background: rgba(23, 72, 60, 0.06); }
}

/* The review panel — the moment the enquiry becomes real. */
.page--written-enquiry .wq__review-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.page--written-enquiry .wq__review-mark { width: 64px; height: auto; }

.page--written-enquiry .wq__review-title {
  margin: 0;
  color: var(--wqx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
}

.page--written-enquiry .wq__review-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.page--written-enquiry .wq__review-list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: var(--wqx-cream);
}

.page--written-enquiry .wq__review-list dt {
  color: var(--wqx-ink-note);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page--written-enquiry .wq__review-list dd { margin: 0; color: var(--wqx-ink); font-size: 1rem; line-height: 1.55; }

.page--written-enquiry .wq__copied {
  margin: 0.9rem 0 0;
  color: var(--wqx-green);
  font-size: 0.95rem;
  font-weight: 750;
}

.page--written-enquiry .wq__back { margin: 1.2rem 0 0; }

/* --------------------------------------------------------------------------
   The closing chapter — the confirmed routes, always visible, plus the one
   crown watermark the authority allows on a small warm panel.
   ----------------------------------------------------------------------- */

.page--written-enquiry .wqx-direct {
  position: relative;
  width: var(--wqx-shell);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem);
  overflow: hidden;
  border: var(--wqx-line);
  border-radius: 30px;
  background: var(--wqx-stone);
  box-shadow: var(--wqx-plate-shadow);
}

.page--written-enquiry .wqx-direct::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: -2.5rem;
  width: 150px;
  height: 110px;
  background: url("/assets/brand/dukes-crown.png") center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
}

.page--written-enquiry .wqx-direct__head {
  width: min(100%, 720px);
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
}

.page--written-enquiry .wqx-kicker {
  margin: 0 0 0.7rem;
  color: var(--wqx-oxblood);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page--written-enquiry .wqx-direct__head h2 {
  margin: 0;
  color: var(--wqx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(2rem, 2.9vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

.page--written-enquiry .wqx-direct__intro {
  max-width: 58ch;
  margin: 1rem auto 0;
  color: var(--wqx-ink-note);
  font-size: 1rem;
  line-height: 1.68;
}

.page--written-enquiry .wqx-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.75vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--written-enquiry .wqx-ledger a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.3rem;
  min-height: 72px;
  height: 100%;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(15, 35, 58, 0.12);
  border-radius: 14px;
  background: var(--wqx-cream);
  box-shadow: var(--wqx-row-shadow);
  color: var(--wqx-ink);
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--written-enquiry .wqx-ledger a:hover {
    border-color: rgba(15, 35, 58, 0.26);
    box-shadow: 0 16px 38px rgba(15, 35, 58, 0.13);
  }
}

.page--written-enquiry .wqx-ledger a > span {
  grid-column: 1;
  color: var(--wqx-oxblood);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page--written-enquiry .wqx-ledger a > strong {
  grid-column: 1;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.12;
}

.page--written-enquiry .wqx-ledger a > em {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--wqx-oxblood);
  font-size: 1.1rem;
  font-style: normal;
}

.page--written-enquiry .wqx-ledger a > em::after { content: "\2192"; }

.page--written-enquiry .wqx-direct__office {
  display: grid;
  gap: 0.3rem;
  width: min(100%, 720px);
  margin: clamp(1.5rem, 2.5vw, 2rem) auto 0;
  padding: 1.15rem 1.35rem;
  border-left: 3px solid var(--wqx-oxblood);
  border-radius: 0 14px 14px 0;
  background: var(--wqx-cream);
}

.page--written-enquiry .wqx-direct__office p { margin: 0; }

.page--written-enquiry .wqx-direct__office-label {
  color: var(--wqx-oxblood);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page--written-enquiry .wqx-direct__office-value { color: var(--wqx-ink); font-size: 1rem; font-weight: 750; line-height: 1.45; }
.page--written-enquiry .wqx-direct__office-note { color: var(--wqx-ink-note); font-size: 0.9375rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Responsive.
   ----------------------------------------------------------------------- */

@media (max-width: 64em) {
  .page--written-enquiry .wq__routes,
  .page--written-enquiry .wqx-ledger { grid-template-columns: 1fr; }
}

@media (max-width: 48em) {
  .page--written-enquiry .wq-hero,
  .page--written-enquiry .band.wq,
  .page--written-enquiry .wqx-direct {
    width: auto;
    margin-inline: 0.625rem;
    border-radius: 20px;
  }
  .page--written-enquiry .wq-hero { border-radius: 16px 16px 36px 16px; }
  .page--written-enquiry .wq__grid { grid-template-columns: 1fr; }
  .page--written-enquiry .wq__review-list > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .page--written-enquiry .wq__form-actions .btn,
  .page--written-enquiry .wq__send .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page--written-enquiry .form__control,
  .page--written-enquiry .wq__route,
  .page--written-enquiry .wqx-ledger a,
  .page--written-enquiry .wq__form-actions .btn,
  .page--written-enquiry .wq__send .btn,
  .page--written-enquiry .wq__edit { transition: none !important; }
}