.contact-page-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:78px 0 72px;border-bottom:1px solid #ffffff25}
.contact-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 68%;opacity:.7}
.contact-page-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,19,72,.82),rgba(0,19,72,.24));pointer-events:none}
.contact-page-hero>.container{position:relative;z-index:1}
body .contact-page :is(.contact-page-hero h1,.contact-page-hero h1 .script,.contact-photo h2,.contact-photo h2 .script){color:#fff}
.contact-page-hero .eyebrow{color:#b8c9e6;margin-bottom:22px}
.contact-page-hero h1{font-size:clamp(40px,4.6vw,66px);line-height:1.13;letter-spacing:-.035em;margin:0 0 24px}
.contact-page-hero h1 .script{display:inline-block;font-size:1.2em;line-height:1.3;font-weight:400}
.contact-page-hero p{color:#e0e6f0;max-width:650px;margin:0}
.contact-page-main{padding:76px 0 90px;background:#f7f9fb}
.contact-page-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(36px,5vw,86px);align-items:start}
.contact-details>.eyebrow,.contact-form-card>.eyebrow,.contact-address>.eyebrow{font-size:12px;letter-spacing:.12em;color:#617b98;margin-bottom:18px}
.contact-details h2,.contact-form-card h2{font-size:clamp(28px,2.5vw,36px);line-height:1.3;letter-spacing:-.02em;margin:0 0 18px}
.contact-details>p{max-width:410px;color:#52647a}
.contact-methods{margin:28px 0 20px;display:grid;gap:20px}
body .contact-methods dt{font:500 11px/1.5 var(--heading)!important;letter-spacing:.12em!important;color:#617b98;margin-bottom:5px}
.contact-methods dd{margin:0;overflow-wrap:anywhere}
.contact-methods a{font-size:18px;color:var(--navy)}
.contact-message-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 34px}
.contact-message-links a{display:flex;align-items:center;gap:12px;padding:14px 12px;border:1px solid transparent;min-height:76px;min-width:0;color:#06351e;transition:box-shadow 150ms ease,background-color 150ms ease}
.contact-message-links .icon{width:16px;height:16px}
.contact-address{padding-top:28px;border-top:1px solid #cbd5e1}
.contact-address h3{font:500 15px/1.6 var(--heading);margin:0 0 8px}
.contact-address address{font-style:normal;line-height:1.8}
.contact-address address span{display:block}
.contact-directions{display:inline-flex;align-items:center;gap:15px;border-bottom:1px solid var(--navy);padding:10px 0 5px;margin:10px 0}
.contact-directions .icon{width:15px;height:15px}
body .contact-page .contact-small{font-size:12px!important;line-height:1.8!important;color:#52647a;margin:12px 0}
.contact-socials{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;margin-top:28px}
.contact-socials>span{width:100%;font:500 11px/1.5 var(--heading);letter-spacing:.12em;color:#617b98}
.contact-form-card{padding:36px;background:#fff;border:1px solid #dce3ec;border-top:3px solid var(--navy)}
.contact-form-card>p{color:#52647a;margin:0 0 26px}
.contact-form-card fieldset{border:0;padding:0;margin:0;min-width:0}
.contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.contact-fields>div{min-width:0}
body .contact-fields label{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font:500 12px/1.5 var(--heading)!important;letter-spacing:.025em!important;margin:0 0 8px}
.contact-fields label small{font:400 10px/1.5 var(--body);color:#65758a;margin-left:auto}
.contact-fields input,.contact-fields textarea,.contact-fields .marine-select-trigger{width:100%;min-width:0;border:1px solid #b8c6d8;background:#fff;color:var(--navy);padding:12px 14px;border-radius:0;min-height:50px;box-shadow:none}
body .contact-fields :is(input,textarea){font-size:14px!important;letter-spacing:.015em!important}
.contact-fields .marine-select-trigger{font-size:14px;line-height:1.5;gap:12px;display:flex;align-items:center;justify-content:space-between;text-align:left}
.contact-fields input::placeholder,.contact-fields textarea::placeholder{color:#7b8797;opacity:1}
.contact-fields input:focus-visible,.contact-fields textarea:focus-visible,.contact-fields .marine-select-trigger:focus-visible{outline:2px solid #708db5;outline-offset:3px;border-color:var(--navy)}
.contact-fields [aria-invalid=true]{border-color:#a23232}
.contact-fields textarea{resize:vertical;min-height:136px}
.contact-message{grid-column:1/-1}
.contact-field-error{display:block;color:#9c2f2f;font-size:12px;line-height:1.5;margin-top:7px}
body .contact-consent{display:flex;align-items:flex-start;gap:11px;font-size:12px!important;line-height:1.8!important;letter-spacing:.01em!important;margin-top:23px;cursor:pointer}
.contact-consent input{appearance:auto;accent-color:var(--navy);width:18px;height:18px;flex:none;margin:3px 0 0}
.contact-privacy{color:var(--navy);font:inherit;background:none;border:0;border-bottom:1px solid #a7b6cc;padding:0;cursor:pointer}
body .contact-page .contact-submit{position:relative;width:100%;justify-content:center;text-align:center;font-family:var(--heading);font-weight:500;text-transform:uppercase;padding-inline:52px;margin-top:8px;min-height:56px}
.contact-submit>.icon{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
.contact-submit:disabled,fieldset:disabled .contact-submit{opacity:.65;cursor:wait}
.contact-submit-error{padding:16px;background:#fff5f3;color:#912d2d;border-left:3px solid #912d2d;margin-top:20px;font-size:13px}
.contact-success{padding:24px 0;outline-offset:8px}
.contact-success>.icon{height:34px;width:34px;margin-bottom:20px}
.contact-success h3{font-size:26px;line-height:1.35;margin-bottom:15px}
.contact-success .button{margin-top:18px}
.contact-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.contact-photo{position:relative;min-height:390px;display:flex;align-items:center;color:#fff;background:var(--navy);overflow:hidden}
.contact-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%;opacity:.43}
.contact-photo>.container{position:relative;padding-block:60px}
.contact-photo .eyebrow{color:#e0e6f0;font-size:12px;letter-spacing:.1em}
.contact-photo h2{font-size:clamp(32px,3.5vw,48px);line-height:1.4;margin:18px 0 28px}
body .contact-page .contact-photo .button{font-family:var(--heading);font-weight:500;text-transform:uppercase}
.marine-number-stepper{position:relative;display:block;width:100%}
.marine-number-stepper input{width:100%;padding-right:42px!important;appearance:textfield;-moz-appearance:textfield}
.marine-number-stepper input::-webkit-inner-spin-button,.marine-number-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.marine-number-arrows{position:absolute;right:1px;top:1px;bottom:1px;display:grid;grid-template-rows:1fr 1fr;width:34px;border-left:1px solid #b8c6d8}
.marine-number-arrows button{display:grid;place-items:center;background:#f4f7fb;border:0;color:var(--navy);padding:0;font-size:14px;line-height:1;cursor:pointer}
.marine-number-arrows button+button{border-top:1px solid #b8c6d8}
@media(hover:hover) and (pointer:fine){.marine-number-arrows button:hover:not(:disabled){background:#e3ebf5}}
.marine-number-arrows button:focus-visible{outline:2px solid #708db5;outline-offset:-3px;z-index:1}
.marine-number-arrows button:disabled{opacity:.4;cursor:default}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1000px){.contact-page-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px}.contact-form-card{padding:26px}.contact-fields{grid-template-columns:1fr}.contact-page-hero{padding-block:56px}}
@media(max-width:760px){.contact-page-main{padding:40px 0 50px}.contact-page-grid{grid-template-columns:1fr;gap:44px}.contact-form-card{grid-row:1;padding:24px 20px}.contact-page-hero{padding:44px 0}.contact-page-hero p br{display:none}.contact-details>p{max-width:100%}.contact-photo{min-height:340px}.contact-methods a{font-size:16px}.contact-photo>.container{padding-block:46px}}

/* Shared country-code and national-number field, used by every customer form. */
.phone-input-columns{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px;align-items:stretch}
.phone-input-columns>.marine-select-root{min-width:0}
body .contact-fields .phone-input-columns .marine-select-trigger{padding:12px 10px;gap:6px}
.phone-input-columns .marine-select-value,.marine-select-option-label{display:flex;align-items:center;gap:8px}
body .phone-field .phone-country-flag,body .marine-select-panel .phone-country-flag{width:22px;height:15px;flex:0 0 22px;display:inline-block;box-shadow:0 0 0 1px rgba(2,19,66,.12)}
body .contact-fields .phone-field .marine-select-value{font-size:12px!important;white-space:nowrap}
body .contact-fields .phone-field .phone-preview{display:block;margin-top:8px;font-size:11px!important;line-height:1.5;color:var(--navy,#041344);overflow-wrap:anywhere}
@media(max-width:400px){.phone-input-columns{grid-template-columns:128px minmax(0,1fr)}body .contact-fields .phone-input-columns input{padding-left:10px;padding-right:8px}}

/* Keep the country selector and number input aligned across both forms. */
body .contact-fields .phone-input-columns .marine-select-trigger,body .contact-fields .phone-input-columns>input{box-sizing:border-box;height:54px;min-height:54px;margin:0}
.phone-input-columns>.marine-select-root{display:flex;align-items:stretch}

/* Brand chat actions retain a readable dark label against each brand green. */
.contact-message-links .contact-chat-whatsapp{background:#25d366;border-color:#25d366}
.contact-message-links .contact-chat-line{background:#06c755;border-color:#06c755}
.contact-message-links .contact-chat-logo{width:40px;height:40px;flex:0 0 40px;object-fit:contain}
.contact-chat-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
body .contact-message-links .contact-chat-copy strong{font:500 16px/1.3 var(--heading)!important;color:#fff;letter-spacing:0!important}
body .contact-message-links .contact-chat-copy small{font:400 10px/1.5 var(--body)!important;color:#fff;overflow-wrap:anywhere;letter-spacing:0!important}
.contact-message-links a>.icon{width:14px;height:14px;flex:none;color:#fff}
@media(hover:hover) and (pointer:fine){.contact-message-links a:hover{box-shadow:0 4px 12px #00134820;border-color:#06351e}}
.contact-message-links a:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
@media(min-width:761px) and (max-width:1100px){.contact-message-links{grid-template-columns:1fr}}
@media(max-width:440px){.contact-message-links{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.contact-message-links a{transition:none}}

/* Contact-field typography is 20% smaller; controls retain their touch area. */
body .contact-page .contact-fields :is(input,textarea){font-size:12.16px!important}
body .contact-page .contact-fields :is(input,textarea)::placeholder{font-size:15.2px}
body .contact-page .contact-fields .marine-select-trigger,
body .contact-page .contact-fields .marine-select-value{font-size:11.2px}

/* Keep focused fields below the sticky header and avoid Safari's input zoom. */
.contact-fields :is(input,textarea,button){scroll-margin-block:140px}
@media(max-width:760px), (pointer:coarse){
 body .contact-page .contact-fields :is(input,textarea),body .enquiry-dialog .form-grid input,body .enquiry-dialog .notes-label textarea{font-size:16px!important}
 body .contact-page .contact-fields :is(input,textarea)::placeholder{font-size:16px}
 body .contact-page .contact-fields .marine-select-trigger,body .contact-page .contact-fields .marine-select-value{font-size:14px}
 /* Side-by-side arrows keep both touch targets usable without a tall field. */
 .marine-number-arrows{width:88px;grid-template-columns:1fr 1fr;grid-template-rows:1fr}
 .marine-number-arrows button{min-width:44px;min-height:44px}
 .marine-number-arrows button+button{border-top:0;border-left:1px solid #b8c6d8}
 .marine-number-stepper input{padding-right:98px!important;min-height:50px}
}
.marine-number-arrows button:active:not(:disabled){background:#d4e2f2}

/* Dark copy remains legible on the official WhatsApp and LINE greens. */
body .contact-message-links .contact-chat-copy :is(strong,small){color:var(--navy)!important}
.contact-message-links a>.icon{color:var(--navy)}
body .contact-page .contact-fields .phone-field .marine-select-value{font-size:9.6px!important}
body :is(#contact-topic-listbox,#contact-phone-country-listbox) .marine-select-option{font-size:11.2px}
body .contact-page .contact-fields input{min-height:54px}