/* Enquiries and Thank You — page layout from Enquiries.dc.html and Thank You.dc.html.
   The form controls themselves (.f-label, .f-input, .chip, .tier, .check,
   .form-nav…) are shared and live in site.css. */

/* ── Enquiries: title, photo, form ──────────────────────────── */
.enq { padding-top: 7vh; }
.enq__head { text-align: center; margin-bottom: 6vh; padding: 0 24px; }
.enq__head .trail { margin-bottom: 5vh; }
.enq__head .trail a { display: inline-block; padding: 15px 4px; margin: -15px -4px; }
.enq__rule { width: 56px; border-top: 1px solid var(--ink); margin: 0 auto 22px; }
.enq__head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.8vw, 44px); line-height: 1.15; margin-top: 12px; text-wrap: balance; }
.enq__lede { max-width: 560px; margin: 22px auto 0; color: var(--ink-70); text-wrap: pretty; }

.enq__grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1920px; margin: 0 auto; align-items: start; }
/* Phone and tablet: the photo is smaller, above the form, and does not stay. */
.enq__photo { position: relative; min-width: 0; justify-self: center; width: min(72%, calc(52svh * .75)); }
.enq__photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.enq__form { min-width: 0; padding: 8vh clamp(24px, 6vw, 96px) 10vh; scroll-margin-top: 64px; }
.enq__inner { max-width: 620px; margin: 0 auto; }
/* Desktop: two columns; the photo, whole and unframed, stays beside the form,
   below the sticky navigation. */
@media (min-width: 840px) {
  .enq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enq__photo { position: sticky; top: calc(6vh + 58px); margin-top: 6vh; width: min(100% - 48px, calc((88svh - 58px - 6vh) * .75)); }
}

/* ── The form ───────────────────────────────────────────────── */
.enq-form { scroll-margin-top: 80px; }
.enq-form fieldset { border: 0; min-width: 0; }
.enq-form legend { padding: 0; }
.enq-form .step-label { font-family: var(--body); font-weight: 400; line-height: 1.75; scroll-margin-top: 90px; }
.enq-form .step-label:focus { outline: none; }
.enq-form .step-label:focus-visible { outline: 1px solid var(--sage); outline-offset: 6px; }
.f-who { margin-bottom: 24px; }
.f-who .chips { gap: 4px 22px; }
.chip span { line-height: 1.75; }
.f-note--under { margin-top: 4px; }
.enq-form .check { padding: 8px 0; min-height: 44px; }
.enq-form .check--ink { font-size: 16px; color: var(--ink); }
.enq-form .check--ink input { margin-top: 6px; }
.office-consent { margin-top: 12px; }
.f-note--48 { margin-top: 22px; text-wrap: pretty; }
.cd-intro { margin-top: 22px; font-size: 15.5px; color: var(--ink-78); text-wrap: pretty; }
.inv-lead { font-family: var(--display); font-size: 22px; line-height: 1.4; text-wrap: pretty; }
.inv-note { margin: 6px 0 16px; }
.tier span { gap: 16px; }
.form-nav { gap: 16px; }
.form-next { background: var(--ivory); }

/* Without JavaScript every step shows, one after the other, with one "Send" at
   the end; the family-office sentence is the only guide. */
.js .nojs { display: none; }
html:not(.js) .step + .step { margin-top: 72px; }
html:not(.js) .office { margin-top: 28px; padding-top: 4px; }
html:not(.js) .office-consent { display: none; }

@media (max-width: 719px) {
  .enq__head .trail { margin-bottom: 4vh; }
  .enq__form { padding-top: 6vh; }
  .form-nav button { padding-left: 24px; padding-right: 24px; }
}

/* ── Thank You: letter on hunter, then the embossed card on sand ── */
.ty { background: var(--hunter); color: var(--ivory); overflow: hidden; }
.ty-letter { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; padding: 24px; overflow-y: auto; }
.ty-letter p, .ty-letter h1 { color: var(--ivory); opacity: 0; transform: translateY(8px); animation: ty-rise 1.6s ease forwards; }
.ty-letter .ty-dear { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.3; animation-delay: .4s }
.ty-letter .ty-body { max-width: 46ch; margin-top: 22px; font-size: 18px; line-height: 1.9; animation-delay: 1.2s; text-wrap: pretty; }
.ty-letter .ty-h { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(28px, 4vw, 42px); line-height: 1.2; margin-top: 34px; animation-delay: 2.2s }
.ty-card { position: fixed; inset: 0; background: #DBD3C0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; opacity: 0; animation: ty-appear 2.4s ease 6.5s forwards; pointer-events: none; }
.ty-card img { width: min(760px, 92vw); max-height: 68vh; height: auto; object-fit: contain; }
.ty-return { pointer-events: auto; margin-top: -4vh; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); padding: 10px 2px 6px; min-height: 44px; display: inline-flex; align-items: flex-end; opacity: 0; visibility: hidden; animation: ty-show 1.2s ease 8.6s forwards; transition: border-color .3s; }
.ty-return:hover { color: var(--ink); border-color: var(--ink); }
@keyframes ty-rise { to { opacity: 1; transform: none; } }
@keyframes ty-appear { to { opacity: 1; } }
/* The link cannot be clicked or focused before it is seen. */
@keyframes ty-show { to { opacity: 1; visibility: visible; } }
/* Reduced motion: the letter is there at once; the card still replaces it after
   the same pause, without a fade (site.css shortens every animation). */
@media (prefers-reduced-motion: reduce) {
  .ty-letter p, .ty-letter h1 { animation: none; opacity: 1; transform: none; }
}