/* Contact page (ported from design-reference/contact.html). */

.ct-page .ah{height:62svh;min-height:460px}
.ct-page .ah .wrap{padding-bottom:110px}
.ct-page .ah h1{font-size:clamp(36px,7vw,98px)}

/* quick tiles */
.qt{position:relative;z-index:5;margin-top:-72px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.q{background:var(--surface);border:1px solid var(--line);padding:28px 28px 24px;position:relative;overflow:hidden;display:block;box-shadow:0 30px 60px -38px rgba(var(--sea-rgb),.6);transition:transform .6s var(--ease),border-color .4s;--mx:50%;--my:50%}
.q:hover{transform:translateY(-8px);border-color:var(--gold-t)}
.q:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(183,154,94,.18),transparent 60%)}.q:hover:before{opacity:1}
.q .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-t);display:flex;justify-content:space-between}
.q .k em{font-style:normal;color:var(--ok);display:none;align-items:center;gap:6px}.q .k em.on{display:flex}
.q .k em:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pl 2s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(46,158,107,.5)}50%{box-shadow:0 0 0 6px transparent;opacity:.5}}
.q h2.h3{font-size:19px;margin:12px 0 4px;word-break:break-word}.q h2.em{font-size:15px;margin-top:20px;text-transform:none;letter-spacing:.02em}
.q p{color:var(--mut);font-size:13px}
.q .row{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.q .row span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
:root[data-theme="blue"] .q .row span{color:var(--gold-l)}
.q .cp{background:none;border:1px solid var(--line);color:var(--ink);width:36px;height:36px;border-radius:50%;cursor:pointer;transition:.4s var(--ease);position:relative;z-index:2;font-size:13px}
.q .cp:hover{background:var(--sea);color:#fff;border-color:var(--sea)}.q .cp.d{background:var(--ok);color:#fff;border-color:var(--ok)}
.q.wa{background:var(--sea);color:#fff;border-color:var(--sea)}.q.wa p{color:#CFE0EA}.q.wa .k,.q.wa .row span{color:var(--gold-l)}

/* form + locations */
.main-c{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:start;padding:100px 0}
h2.t{font-size:clamp(26px,3.2vw,42px);margin-bottom:14px}
.lead{color:var(--mut);max-width:540px;margin-bottom:30px}.lead>*+*{margin-top:.8em}
.loc{background:var(--surface);border:1px solid var(--line);margin-bottom:16px;transition:transform .6s var(--ease),border-color .4s;overflow:hidden}
.loc:hover{transform:translateY(-5px);border-color:var(--gold-t)}
.loc .in{padding:26px 28px}.loc .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-t)}
.loc h3{font-size:22px;margin:6px 0}.loc p{color:var(--mut);font-size:14px}
.loc .hr{display:flex;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}.loc .hr b{font-weight:500}
.loc a.m{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:var(--bg);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);transition:.4s}
:root[data-theme="blue"] .loc a.m{color:var(--gold-l)}
.loc a.m:hover{background:var(--sea);color:#fff}
.soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.soc a{border:1px solid var(--line);padding:10px 18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:.4s var(--ease)}
.soc a:hover{background:var(--sea);color:#fff;border-color:var(--sea);transform:translateY(-3px)}

/* map */
.map{background:var(--sea);color:#fff;padding:90px 0;position:relative;overflow:hidden}
.map .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.map .eb{color:var(--gold-l)}.map .eb:before{background:var(--gold-l)}
.map h2{font-size:clamp(26px,3.4vw,44px);margin-bottom:16px}.map p{color:#CFE0EA;max-width:440px}
.map .bt{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.mv{aspect-ratio:5/4;position:relative;border:1px solid rgba(255,255,255,.2);background:#0a3150;overflow:hidden}
.mv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.75) contrast(1.02)}
.mv .cap{position:absolute;right:0;bottom:0;font-size:10px;letter-spacing:.06em;color:#17252E;background:rgba(255,255,255,.85);padding:2px 6px}

/* faq */
.faq{padding:100px 0}.faq .g{display:grid;grid-template-columns:1fr 1.4fr;gap:70px}
.faq details{border-top:1px solid var(--line);padding:22px 0}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font:500 15px var(--font);letter-spacing:.06em;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--gold-t);font-size:24px;line-height:1;transition:transform .5s var(--ease)}.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--mut);max-width:580px}

@media (max-width:1000px){
	.qt,.main-c,.map .wrap,.faq .g{grid-template-columns:1fr}
	.main-c,.faq .g{gap:50px}.main-c{padding:70px 0}
	.ct-page .ah .wrap{padding-bottom:100px}
}
/* Match the site’s editorial typography and quieter card treatment. */
.ct-page h2.t,.ct-page .map h2{font-family:var(--font);font-weight:400;letter-spacing:-.025em;text-transform:none;line-height:1.08}
.ct-page .q,.ct-page .loc{box-shadow:0 10px 30px rgba(19,52,64,.06)}.ct-page .q:hover,.ct-page .loc:hover{transform:translateY(-4px)}
.ct-page .faq summary{text-transform:none;letter-spacing:0;font-size:15px}.ct-page .map{background:#123c53}
.location-extra{max-width:520px;color:var(--mut);font-size:13px;line-height:1.7;margin-top:24px}
/* Keep the contact heading legible over the harbour photograph. */
.ct-page .ah{height:auto;min-height:max(62svh,620px);padding-top:110px}
.ct-page .ah h1{font-size:clamp(38px,5.3vw,74px)}
.ct-page .ah:after{background:linear-gradient(90deg,rgba(3,27,43,.65),rgba(3,27,43,.16) 75%),linear-gradient(0deg,rgba(3,27,43,.8),rgba(3,27,43,.08) 70%)}
@media(max-width:620px){.ct-page .ah{min-height:620px;padding-top:100px}.ct-page .ah h1{font-size:clamp(36px,9vw,48px)}}
/* Keep the boat in the contact hero's crop on narrow screens. */
@media(max-width:620px){.ct-page .hero-im img.f{object-position:65% center}}