/* Scoped service surfaces. Keep the accepted homepage and commercial widgets intact. */
.th-page {background:#f5f8fb; padding-block-end:clamp(40px,6vw,88px); color:#16334c;}
.th-page__hero {background:linear-gradient(120deg,#083f78,#12354b); color:#fff; padding-block:clamp(48px,7vw,96px);}
/* The hero sets color:#fff and the paragraph inherits it, but thui/base.css
   DIRECTLY assigns a dark ink colour to every heading, and a direct
   declaration beats an inherited one at any specificity. Without an
   explicit colour here the h1 rendered dark navy on the dark navy hero -
   the same failure the destination cards had. State it. */
.th-page__hero h1, .th-page__hero h2 {color:#fff;}
.th-page__hero h1 {font-size:clamp(2rem,4.3vw,3.8rem); font-weight:700; line-height:1.2; max-inline-size:22ch; margin-block:12px 20px;}
.th-page__hero p {max-inline-size:62ch; line-height:1.8;}
.th-page__hero .th-page__eyebrow {color:#8ee6d3; font-size:.82rem; font-weight:700; letter-spacing:.04em;}
.th-page__grid {display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:28px; padding-block-start:36px; align-items:start;}
.th-page__card {min-inline-size:0; background:#fff; border:1px solid #dde6ed; border-radius:20px; padding:clamp(24px,3.2vw,44px); box-shadow:0 8px 28px #083f7808;}
.th-page__card h2 {font-size:clamp(1.4rem,2.3vw,2rem); font-weight:700; line-height:1.35; margin-block:0 20px;}
.th-page__card p {line-height:1.85; margin-block:0 22px; overflow-wrap:anywhere;}
.th-page__badge {display:inline-block; background:#e5f6f1; color:#11604e; padding:6px 12px; border-radius:30px; margin-block-end:20px; font-size:.85rem; font-weight:700;}
.th-page__contact p span {display:block; font-size:.85rem; color:#526878; margin-block-end:4px;}
.th-page__contact a {overflow-wrap:anywhere;}
.th-page__note {border-inline-start:3px solid #f6a800; padding-inline-start:16px;}
.th-page__small {font-size:.85rem; color:#526878; margin-block-start:16px!important;}
.th-page__card .thui-btn {min-block-size:44px; white-space:normal; text-align:center;}
.th-page__card a:focus-visible {outline:3px solid #13a589; outline-offset:4px;}
.th-page__image {inline-size:100%; block-size:auto; max-block-size:420px; object-fit:cover; border-radius:14px; margin-block-end:24px;}
@media(max-width:767px){.th-page__grid{grid-template-columns:1fr;gap:20px}.th-page__hero h1{font-size:2.2rem}.th-page__card{padding:24px}}
.th-dest__routes {list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.th-dest__routes li {padding-block:16px; border-block-start:1px solid #e4ebf1;}
.th-dest__routes li:first-child {border-block-start:0;}
.th-dest__routes a {display:block; font-weight:700; font-size:1.05rem; color:#083f78; text-decoration:none;}
.th-dest__routes a:hover, .th-dest__routes a:focus-visible {text-decoration:underline;}
.th-dest__routes span {display:block; margin-block-start:4px; color:#526878; font-size:.92rem; line-height:1.6;}

/* ---- Contact: two enquiry forms, one pipeline ---------------------------- */
.th-contact__layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:clamp(24px,3vw,44px);align-items:start;padding-block:clamp(32px,4vw,56px)}
.th-contact__panel{margin-block-start:0}
/* The honeypot. Off screen with a direction-neutral idiom so RTL is
   unaffected, and never display:none - some bots skip hidden fields. */


.th-contact__aside{display:grid;gap:18px}
.th-contact__next{margin:0;padding-inline-start:20px;display:grid;gap:8px;color:var(--thui-color-text-muted);font-size:.9rem;line-height:1.55}

@media(max-width:63.999rem){
.th-contact__layout{grid-template-columns:1fr}
}