/* ==========================================================================
   CONTACT US page (round 143). Loaded only by pages/show.blade.php for the contact page; everything is scoped to .ct-* / .cf-* so no other page changes.
   Palette: gold #B88632, charcoal #171717, ivory #FBF7F0, white, muted grey #747985. The header bar is the site's normal dark header.
   ========================================================================== */
.ct-page { --ct-gold: #B88632; --ct-gold-deep: #94651A; --ct-ink: #171717; --ct-ivory: #FBF7F0; --ct-grey: #747985; --ct-line: #EADFCB; position: relative; overflow: hidden; background: var(--ct-ivory); color: var(--ct-ink); font-family: var(--hx-sans, "Plus Jakarta Sans", system-ui, sans-serif); }
.ct-hero { position: relative; isolation: isolate; padding-block: clamp(32px, 4.4vw, 72px); }
.ct-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); align-items: start; gap: clamp(28px, 4vw, 72px); width: 100%; max-width: 1480px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 56px); box-sizing: border-box; }
.ct-wrap--wide { display: block; }

/* artwork: the building photo on the left edge (fades into the ivory), a faint skyline along the bottom, gold curves on the right */
.ct-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ct-art__photo { position: absolute; left: 0; top: 0; bottom: 0; width: clamp(160px, 24vw, 380px); height: 100%; object-fit: cover; object-position: 30% 50%; -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 100%); mask-image: linear-gradient(90deg, #000 40%, transparent 100%); opacity: 0.92; }
.ct-art__skyline { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 14vw, 200px); opacity: 0.5; background: linear-gradient(to top, var(--ct-ivory) 6%, transparent), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'><g fill='%23C9B99A' fill-opacity='.55'><rect x='40' y='80' width='38' height='80'/><rect x='84' y='50' width='30' height='110'/><rect x='122' y='96' width='44' height='64'/><rect x='190' y='60' width='34' height='100'/><rect x='232' y='30' width='40' height='130'/><rect x='282' y='88' width='30' height='72'/><rect x='330' y='70' width='46' height='90'/><rect x='640' y='84' width='36' height='76'/><rect x='684' y='40' width='32' height='120'/><rect x='724' y='72' width='44' height='88'/><rect x='780' y='20' width='38' height='140'/><rect x='826' y='66' width='34' height='94'/><rect x='870' y='92' width='46' height='68'/><rect x='930' y='44' width='32' height='116'/><rect x='970' y='78' width='40' height='82'/><rect x='1020' y='58' width='34' height='102'/><rect x='1062' y='90' width='44' height='70'/></g></svg>") center bottom / 100% 100% no-repeat; }
.ct-art__curve { position: absolute; right: -16%; top: -26%; width: min(64vw, 880px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 200deg, rgba(184, 134, 50, 0.55), rgba(236, 208, 143, 0.25), rgba(184, 134, 50, 0.08) 45%, rgba(184, 134, 50, 0.4)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - clamp(34px, 5vw, 80px)), #000 calc(100% - clamp(33px, 5vw, 79px))); mask: radial-gradient(farthest-side, transparent calc(100% - clamp(34px, 5vw, 80px)), #000 calc(100% - clamp(33px, 5vw, 79px))); }

/* left column */
.ct-intro { min-width: 0; padding-left: clamp(0px, 9vw, 170px); }
.ct-eyebrow { display: flex; align-items: center; gap: 14px; margin: clamp(8px, 2vw, 30px) 0 14px; color: var(--ct-ink); font-weight: 700; font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; }
.ct-eyebrow span { display: block; width: 40px; height: 2px; background: var(--ct-gold); }
.ct-title { margin: 0; color: var(--ct-ink); font-weight: 800; font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -0.03em; }
.ct-lead { max-width: 34em; margin: clamp(14px, 1.6vw, 22px) 0 0; color: var(--ct-grey); font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem); line-height: 1.55; }
/* round 187: .ct-lead can now hold the admin's own rich text (Admin > Pages > Contact Us > Body) instead of the fixed sentence - its own paragraphs keep this block's spacing, not their own */
.ct-lead p { margin: 0 0 0.6em; }
.ct-lead p:last-child { margin-bottom: 0; }
.ct-points { display: flex; align-items: stretch; gap: 0; margin: clamp(22px, 2.6vw, 36px) 0 0; padding: 0; list-style: none; }
.ct-points li { display: grid; justify-items: center; gap: 12px; flex: 1 1 0; min-width: 0; padding-inline: clamp(8px, 1.6vw, 28px); text-align: center; }
.ct-points li + li { border-left: 1px solid var(--ct-line); }
.ct-points__ic { display: grid; place-items: center; width: clamp(54px, 5vw, 70px); height: clamp(54px, 5vw, 70px); border-radius: 50%; background: #F4E9D6; box-shadow: 0 0 0 6px rgba(244, 233, 214, 0.45); }
.ct-points__ic i { font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.75rem); line-height: 1; color: var(--ct-gold); }
.ct-points__tx { color: var(--ct-ink); font-weight: 600; font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem); line-height: 1.3; }
.ct-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(20px, 2.4vw, 32px); }
.ct-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border: 1px solid #F0E7D6; border-radius: 14px; background: rgba(255, 255, 255, 0.82); color: var(--ct-ink); text-decoration: none; box-shadow: 0 14px 30px -24px rgba(23, 23, 23, 0.4); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.ct-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ct-card:hover { border-color: rgba(184, 134, 50, 0.55); transform: translateY(-2px); }
.ct-card:focus-visible { outline: 2px solid var(--ct-gold-deep); outline-offset: 3px; }
.ct-card__ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #C99A3D, #94651A); color: #fff; }
.ct-card__ic i { font-size: 1.25rem; line-height: 1; }
.ct-card__tx { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.ct-card__tx strong { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.ct-card__tx small { color: var(--ct-grey); font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; }
.ct-card__go { flex: none; color: var(--ct-ink); font-size: 1rem; }
.ct-script { margin: clamp(16px, 2.4vw, 34px) 0 0 clamp(20px, 6vw, 110px); color: var(--ct-gold-deep); font: 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.15 "Segoe Script", "Lucida Handwriting", "Brush Script MT", "Snell Roundhand", cursive; transform: rotate(-5deg); transform-origin: left center; opacity: 0.9; }

/* right column: the form card (dark header, white body) */
.ct-formwrap { min-width: 0; }
.ct-form { overflow: hidden; border-radius: clamp(20px, 2vw, 28px); background: #FFFFFF; box-shadow: 0 40px 80px -44px rgba(23, 23, 23, 0.55), 0 0 0 1px rgba(23, 23, 23, 0.04); }
.ct-form__head { position: relative; isolation: isolate; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: clamp(22px, 2.2vw, 32px) clamp(22px, 2.6vw, 36px) clamp(26px, 2.8vw, 38px); background: #171717; color: #fff; overflow: hidden; }
.ct-form__head::before, .ct-form__head::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(184, 134, 50, 0.4); border-radius: 50%; pointer-events: none; }
.ct-form__head::before { right: -6%; top: -120%; width: 62%; aspect-ratio: 1; }
.ct-form__head::after { right: -14%; top: -150%; width: 74%; aspect-ratio: 1; border-color: rgba(184, 134, 50, 0.22); }
.ct-form__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: #E7C27A; font-weight: 700; font-size: 0.6875rem; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; }
.ct-form__eyebrow span { display: block; width: 34px; height: 1px; background: var(--ct-gold); }
.ct-form__title { margin: 0; color: #fff; font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.ct-form__lead { margin: 10px 0 0; color: rgba(255, 255, 255, 0.86); font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem); line-height: 1.45; }
.ct-form__ic { flex: none; display: grid; place-items: center; width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px); border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08); }
.ct-form__ic i { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.875rem); line-height: 1; color: var(--ct-gold-deep); }
.ct-form__body { padding: clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 36px) clamp(22px, 2.4vw, 32px); }

/* the shared enquiry form in its contact look */
.ct-form .cf-field { margin-bottom: 14px; }
.ct-form .form-label { margin: 0 0 6px; color: var(--ct-ink); font-size: 0.9375rem; font-weight: 600; }
.ct-form .cf-input { position: relative; }
.ct-form .cf-input > i { position: absolute; left: 16px; top: 16px; z-index: 1; color: #5F6672; font-size: 1.1rem; line-height: 1; pointer-events: none; }
.ct-form .cf-input .form-control { min-height: 50px; padding: 12px 16px 12px 46px; border: 1px solid #ECECEC; border-radius: 12px; background: #F6F6F6; color: var(--ct-ink); font-size: 0.9375rem; box-shadow: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
.ct-form .cf-input .form-control::placeholder { color: #8A8F99; }
.ct-form .cf-input .form-control:focus { border-color: var(--ct-gold); background: #fff; box-shadow: 0 0 0 3px rgba(184, 134, 50, 0.18); outline: none; }
.ct-form .cf-input textarea.form-control { min-height: 110px; resize: vertical; }
.ct-form .cf-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 16px; }
.ct-form .cf-consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ct-gold-deep); }
.ct-form .cf-consent label { color: var(--ct-grey); font-size: 0.875rem; line-height: 1.5; }
.ct-form .cf-consent a { color: #9A610F; text-decoration: underline; text-underline-offset: 2px; }
.ct-form .cf-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #C99A3D 0%, #94651A 100%); color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 16px 28px -18px rgba(148, 101, 26, 0.9); transition: filter 0.2s ease, transform 0.2s ease; }
.ct-form .cf-submit::after { content: "\f138"; font-family: "bootstrap-icons"; font-size: 1.1em; line-height: 1; }
.ct-form .cf-submit:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.ct-form .cf-submit:active:not(:disabled) { transform: translateY(1px); }
.ct-form .cf-submit:disabled { opacity: 0.75; cursor: wait; }
.ct-form .cf-submit:focus-visible, .ct-form .cf-consent input:focus-visible { outline: 2px solid var(--ct-gold-deep); outline-offset: 3px; }
.ct-form .js-enquiry-feedback { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: 0.9375rem; }

.ct-map { padding: 0 0 clamp(28px, 3.6vw, 56px); }
.ct-map__frame { overflow: hidden; border: 1px solid var(--ct-line); border-radius: 20px; background: #fff; }
.ct-map__frame iframe { display: block; width: 100%; height: clamp(280px, 30vw, 420px); border: 0; }

/* tablet: the two columns stay, tighter; phones: stacked, no photo */
@media (max-width: 1199.98px) {
    .ct-intro { padding-left: clamp(0px, 4vw, 60px); }
    .ct-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
}
@media (max-width: 991.98px) {
    .ct-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; }
    .ct-intro { padding-left: 0; }
    .ct-art__photo { opacity: 0.5; width: 150px; }
    .ct-points li { padding-inline: 6px; }
    .ct-script { display: none; }
}
@media (max-width: 767.98px) {
    .ct-wrap { grid-template-columns: minmax(0, 1fr); }
    .ct-cards { grid-template-columns: minmax(0, 1fr); }
    .ct-art__photo, .ct-art__curve { display: none; }
    .ct-art__skyline { height: 90px; }
    .ct-title { font-size: clamp(2.5rem, 12vw, 3.25rem); }
    .ct-points { gap: 6px; }
    .ct-points__ic { width: 50px; height: 50px; }
    .ct-script { display: block; margin-left: 0; }
    .ct-form__ic { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .ct-card, .ct-form .cf-input .form-control, .ct-form .cf-submit { transition: none; } .ct-card:hover { transform: none; } }