/* =========================================================
   Qurikvoy — Contact page
   desktop ≥1024 · tablet 768–1023 · mobile ≤767
   ========================================================= */
.page-contact {
  --c-ink: #1c1b1b;
  --c-text: #414751;
  --c-muted: #717782;
  --c-blue: #005a9a;
  --c-blue-2: #2373ba;
  --c-navy: #286197;
  --c-deep: #001d36;
  --c-rust: #bf4b0e;
  --c-rust-2: #9a3800;
  --c-badge: #d2e4ff;
  --c-cream: #fcf9f8;
  --c-sand: #f6f3f2;
  --c-chip: #f0eded;
  --c-wa: #25d366;
  --c-wa-ink: #20ba5a;
  --c-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --c-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  background: var(--c-cream);
}

/* ---------- shared ---------- */
.ct-sec { padding: 40px 0; }
.ct-sec--cream { background: var(--c-cream); }
.ct-sec--sand { background: var(--c-sand); }
.ct-sec--last { padding-bottom: 80px; }

.ct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 24px; }
.ct-head--center { flex-direction: column; align-items: center; gap: 4px; max-width: 700px; margin-inline: auto; text-align: center; }
.ct-kicker { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--c-blue); }
.ct-kicker--rust { color: var(--c-rust-2); }
.ct-h2 { margin: 4px 0 0; font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.72px; color: var(--c-ink); }
.ct-h3 { margin: 4px 0 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.24px; color: var(--c-ink); }
.ct-lead { max-width: 640px; margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--c-text); }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--c-badge); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--c-deep); }
.ct-chip--icon { padding: 6px 12px; text-transform: none; letter-spacing: 0.44px; }
.ct-chip img { flex: none; }

.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 12px;
  font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0.14px; white-space: nowrap; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, color 0.25s;
}
.ct-btn img { flex: none; transition: transform 0.25s var(--ease); }
.ct-btn:hover { transform: translateY(-2px); }
.ct-btn:hover img { transform: translateX(2px); }
.ct-btn--xs { padding: 8px 10px; border-radius: 8px; font-size: 11px; line-height: 14px; letter-spacing: 0.44px; gap: 4px; }
.ct-btn--sm { padding: 10px 16px; font-size: 12px; line-height: 16px; letter-spacing: 0.24px; }
.ct-btn--lg { padding: 14px 40px; }
.ct-btn--block { display: flex; width: 100%; padding-block: 10px; font-size: 12px; line-height: 16px; letter-spacing: 0.24px; }
.ct-btn--blue { background: linear-gradient(90deg, var(--c-blue), var(--c-blue-2)); color: #fff; box-shadow: 0 8px 18px -8px rgba(0, 90, 154, 0.6); }
.ct-btn--blue:hover { box-shadow: 0 14px 26px -10px rgba(0, 90, 154, 0.7); }
.ct-btn--soft { background: var(--c-chip); color: var(--c-ink); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
.ct-btn--soft:hover { background: #e7e3e3; }
.ct-btn--blue-text { color: var(--c-blue); }
.ct-btn--navy-text { color: var(--c-navy); }
.ct-btn--rust-text { color: var(--c-rust); }
.ct-btn--wa { background: var(--c-wa); color: #fff; box-shadow: 0 8px 18px -8px rgba(37, 211, 102, 0.7); }
.ct-btn--wa:hover { background: #1fc05b; }
.ct-btn--wa-soft { background: rgba(37, 211, 102, 0.15); color: #127a3a; }
.ct-btn--wa-soft:hover { background: rgba(37, 211, 102, 0.25); }
.ct-btn--rust { background: linear-gradient(90deg, var(--c-rust), var(--c-rust-2)); color: #fff; box-shadow: var(--c-shadow-lg); }
.ct-btn--rust:hover { box-shadow: 0 18px 30px -10px rgba(191, 75, 14, 0.6); }
.ct-btn--gradient { background: linear-gradient(90deg, var(--c-blue), var(--c-blue-2)); color: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.ct-btn:focus-visible, .ct-tag:focus-visible, .ct-acc button:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* =========================================================
   1. HERO
   ========================================================= */
.ct-hero { padding: 8px 0 40px; background: var(--c-cream); }
.ct-crumbs { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 0; list-style: none; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.24px; color: var(--c-text); }
.ct-crumbs li { display: flex; align-items: center; gap: 8px; }
.ct-crumbs a:hover { color: var(--c-blue); }
.ct-crumbs strong { font-weight: 600; color: var(--c-blue); }
.ct-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: center; padding-top: 4px; }
.ct-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ct-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--c-badge); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.275px; color: var(--c-deep); }
.ct-pill i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-blue); animation: ct-pulse 2.2s ease-out infinite; }
@keyframes ct-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 90, 154, 0.5); } 100% { box-shadow: 0 0 0 8px rgba(0, 90, 154, 0); } }
.ct-hero__title { margin: 0; font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -1.2px; color: var(--c-ink); }
.ct-hero__title span { background: linear-gradient(90deg, #005a9a 0%, #2373ba 50%, #bf4b0e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-hero__text { max-width: 576px; font-size: 18px; line-height: 28px; color: var(--c-text); }
.ct-hero__btns { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.ct-hero__metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 0; padding: 8px 0 0; list-style: none; }
.ct-hero__metrics li { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.24px; color: var(--c-ink); }
.ct-hero__metrics li + li::before { content: ''; position: absolute; left: -14px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #c1c7d2; }
.ct-hero__metrics img { flex: none; }

.ct-hero__visual { position: relative; margin: 0; overflow: hidden; border-radius: 24px; background: var(--c-sand); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.ct-hero__img { display: block; width: 100%; height: 616px; object-fit: cover; }
.ct-hero__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 29, 54, 0.7) 0%, rgba(0, 29, 54, 0) 50%); pointer-events: none; }
.ct-hero__rating, .ct-hero__live { position: absolute; z-index: 1; display: flex; align-items: center; border-radius: 16px; background: rgba(252, 249, 248, 0.95); box-shadow: var(--c-shadow-lg); }
.ct-hero__rating { right: 24px; top: 24px; gap: 12px; padding: 10px 16px; }
.ct-hero__rating span, .ct-hero__live-text { display: flex; flex-direction: column; }
.ct-hero__rating strong, .ct-hero__live strong { font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.24px; color: var(--c-ink); }
.ct-hero__rating small, .ct-hero__live small { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-text); }
.ct-hero__live { left: 24px; right: 24px; bottom: 24px; gap: 12px; padding: 16px; }
.ct-hero__hq { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #8fc2fd; font-size: 20px; line-height: 1; }
.ct-hero__hq i { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c-wa); box-shadow: 0 0 0 2px var(--c-cream); }
.ct-hero__live-text { flex: 1; min-width: 0; }
.ct-hero__live b { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--c-blue); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: #fff; }

/* =========================================================
   2. QUICK CONTACT CARDS
   ========================================================= */
.ct-quick { padding: 40px 0; background: var(--c-sand); }
.ct-quick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ct-qcard { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; background: #fff; box-shadow: var(--c-shadow); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ct-qcard:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -14px rgba(0, 29, 54, 0.3); }
.ct-qcard__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; }
.ct-qcard__icon.is-blue { background: var(--c-badge); }
.ct-qcard__icon.is-green { background: rgba(37, 211, 102, 0.15); }
.ct-qcard__icon.is-sky { background: #d1e4ff; }
.ct-qcard__icon.is-peach { background: #ffdbcd; }
.ct-qcard h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--c-ink); }
.ct-qcard p { font-size: 14px; line-height: 20px; color: var(--c-text); }
.ct-qcard strong { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0.14px; color: var(--c-ink); overflow-wrap: anywhere; }
.ct-qcard strong.is-blue { color: var(--c-blue); }
.ct-qcard small { margin-top: -8px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.ct-qcard small.is-green { font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.44px; color: var(--c-wa-ink); }
.ct-qcard > :nth-last-child(2) { margin-bottom: 8px; }
.ct-qcard > .ct-btn { margin-top: auto; }

/* =========================================================
   3. ENQUIRY
   ========================================================= */
.ct-enquiry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.ct-enquiry__story { display: flex; flex-direction: column; gap: 24px; }
.ct-enquiry__story .ct-h2 { margin-top: 12px; }
.ct-enquiry__story .ct-lead { margin-top: 8px; }
.ct-collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 16px; }
.ct-collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; background: var(--c-chip); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.ct-collage img.is-raised { transform: translateY(-16px); }
.ct-guarantees { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 4px 0 0; list-style: none; }
.ct-guarantees li { display: flex; gap: 12px; }
.ct-guarantees li > span { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-badge); }
.ct-guarantees strong { font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0.14px; color: var(--c-ink); }
.ct-guarantees p { font-size: 14px; line-height: 20px; color: var(--c-text); }

.ct-form { padding: 40px; border-radius: 24px; background: #fff; box-shadow: var(--c-shadow-lg); }
.ct-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ct-field { display: flex; flex-direction: column; gap: 7.5px; min-width: 0; padding-top: 6.5px; }
.ct-field--full { grid-column: 1 / -1; }
.ct-field__label { font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: 0.44px; color: var(--c-ink); }
.ct-field__control { position: relative; display: block; }
.ct-field__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%; min-height: 46px; padding: 12px 16px 12px 40px; border: 1px solid transparent; border-radius: 12px; background: var(--c-sand);
  font: inherit; font-size: 14px; line-height: 20px; color: var(--c-ink); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ct-field textarea { min-height: 96px; padding: 16px; resize: vertical; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--c-muted); }
.ct-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23414751' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: rgba(0, 90, 154, 0.45); background-color: #fff; box-shadow: 0 0 0 3px rgba(0, 90, 154, 0.12); }
.ct-field.is-invalid input, .ct-field.is-invalid select, .ct-field.is-invalid textarea { border-color: #d93025; background-color: #fff6f5; }
.ct-field__error { font-size: 11px; font-weight: 600; line-height: 14px; color: #c5221f; }
.ct-btn--submit { display: flex; width: 100%; margin-top: 20px; padding: 16px; }
.ct-btn--submit:disabled { opacity: 0.7; cursor: wait; transform: none; }
.ct-form__status { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 20px; }
.ct-form__status.is-ok { background: rgba(37, 211, 102, 0.12); color: #127a3a; }
.ct-form__status.is-error { background: #fdecea; color: #b3261e; }
.ct-form__status a { text-decoration: underline; font-weight: 700; }
.ct-form__note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-text); text-align: center; }
.ct-form__note img { flex: none; }

/* =========================================================
   4. QUICK PLANNER
   ========================================================= */
.ct-planner { display: flex; flex-direction: column; gap: 24px; padding: 40px; border-radius: 24px; background: #fff; box-shadow: var(--c-shadow); }
.ct-planner__head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.ct-planner__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ct-planner__group { display: flex; flex-direction: column; gap: 7.5px; padding-top: 6.5px; }
.ct-planner__group > p { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; text-transform: uppercase; color: var(--c-text); }
.ct-planner__group > div { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.ct-tag { padding: 6px 12px; border-radius: 999px; background: var(--c-chip); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-text); transition: background 0.2s, color 0.2s, transform 0.2s var(--ease); }
.ct-tag:hover { background: #e4dfdf; color: var(--c-ink); }
.ct-tag.is-active { background: var(--c-blue); color: #fff; }
.ct-planner__result { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: var(--c-sand); }
.ct-planner__result p { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--c-ink); }
.ct-planner__result p img { flex: none; }
.ct-planner__result b { color: var(--c-blue); }

/* =========================================================
   5. SPECIALISTS
   ========================================================= */
.ct-experts-slider { --per: 4; --gap: 16px; }
.ct-expert { display: flex; flex-direction: column; padding: 16px; border-radius: 16px; background: #fff; box-shadow: var(--c-shadow); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ct-expert:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -14px rgba(0, 29, 54, 0.3); }
.ct-expert__media { position: relative; overflow: hidden; margin-bottom: 8px; border-radius: 12px; background: var(--c-chip); }
.ct-expert__media img { display: block; width: 100%; height: 325px; object-fit: cover; object-position: center top; transition: transform 0.6s var(--ease); }
.ct-expert:hover .ct-expert__media img { transform: scale(1.04); }
.ct-expert__media span { position: absolute; right: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(252, 249, 248, 0.95); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-ink); }
.ct-expert h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--c-ink); }
.ct-expert__role { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-blue); }
.ct-expert__text { flex: 1; padding-top: 12px; font-size: 14px; line-height: 20px; color: var(--c-text); }
.ct-expert__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 16px; }
.ct-expert__btns .ct-btn--soft { color: var(--c-ink); }

/* =========================================================
   6. HQ + MAP + HOURS
   ========================================================= */
.ct-hq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.ct-office { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px; border-radius: 24px; background: #fff; box-shadow: var(--c-shadow); }
.ct-office h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.24px; color: var(--c-ink); }
.ct-office address { display: flex; flex-direction: column; gap: 4px; font-style: normal; font-size: 16px; line-height: 24px; color: var(--c-text); }
.ct-office address small { font-size: 14px; line-height: 20px; color: var(--c-muted); }
.ct-office__legal { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 0; padding: 12px; border-radius: 12px; background: var(--c-sand); font-size: 11px; line-height: 14px; letter-spacing: 0.44px; }
.ct-office__legal div { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-office__legal dt { font-weight: 900; color: var(--c-ink); }
.ct-office__legal dd { margin: 0; font-weight: 700; color: var(--c-text); overflow-wrap: anywhere; }
.ct-office__lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ct-office__lines li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.24px; color: var(--c-ink); }
.ct-office__lines img { flex: none; }
.ct-office__lines a:hover { color: var(--c-blue); }
.ct-office__transit { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 9px 0 0; list-style: none; border-top: 1px solid var(--c-chip); }
.ct-office__transit li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-ink); }
.ct-office__transit span { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text); }
.ct-office__transit b { flex: none; }
.ct-office > .ct-btn { margin-top: auto; }

.ct-map { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; overflow: hidden; border-radius: 24px; background: var(--c-chip); box-shadow: var(--c-shadow); }
.ct-map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 29, 54, 0.8) 0%, rgba(0, 29, 54, 0) 50%); pointer-events: none; }
.ct-map__live, .ct-map__card { position: relative; z-index: 1; margin: 24px; background: rgba(252, 249, 248, 0.95); box-shadow: var(--c-shadow-lg); }
.ct-map__live { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.24px; color: var(--c-ink); }
.ct-map__live i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-wa); animation: ct-live 1.8s ease-out infinite; }
@keyframes ct-live { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 100% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } }
.ct-map__card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 16px; }
.ct-map__card div { display: flex; flex-direction: column; min-width: 0; }
.ct-map__card strong { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.24px; color: var(--c-ink); }
.ct-map__card small { font-size: 11px; line-height: 14px; color: var(--c-text); }
.ct-map__card .ct-btn { padding: 8px 14px; border-radius: 12px; gap: 6px; }

.ct-hours-slider { margin-top: 24px; }
.ct-hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ct-hour { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: 16px; background: var(--c-cream); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
.ct-hour__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; background: var(--c-badge); }
.ct-hour--navy .ct-hour__icon { background: #d1e4ff; }
.ct-hour--green .ct-hour__icon { background: rgba(37, 211, 102, 0.2); }
.ct-hour h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--c-ink); }
.ct-hour strong { font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0.14px; color: var(--c-blue); }
.ct-hour--navy strong { color: var(--c-navy); }
.ct-hour--green strong { color: var(--c-wa-ink); }
.ct-hour p { font-size: 14px; line-height: 20px; color: var(--c-text); }

/* =========================================================
   7. DESTINATIONS
   ========================================================= */
.ct-dests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ct-dest { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--c-shadow); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ct-dest:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -14px rgba(0, 29, 54, 0.3); }
.ct-dest__media { position: relative; height: 192px; overflow: hidden; background: var(--c-chip); }
.ct-dest__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.ct-dest:hover .ct-dest__media img { transform: scale(1.05); }
.ct-dest__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 29, 54, 0.6), rgba(0, 29, 54, 0) 70%); }
.ct-dest__media > div { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ct-dest__media span { padding: 1.5px 10px; border-radius: 999px; background: rgba(0, 90, 154, 0.85); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-cream); }
.ct-dest--rust .ct-dest__media span { background: rgba(191, 75, 14, 0.85); }
.ct-dest--navy .ct-dest__media span { background: rgba(40, 97, 151, 0.85); }
.ct-dest--green .ct-dest__media span { background: rgba(37, 211, 102, 0.85); color: #fff; }
.ct-dest--ember .ct-dest__media span { background: rgba(154, 56, 0, 0.85); }
.ct-dest h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--c-cream); }
.ct-dest__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ct-dest__body p { flex: 1; font-size: 14px; line-height: 20px; color: var(--c-text); }
.ct-dest__body .ct-btn { gap: 6px; color: var(--c-blue); }
.ct-dest--rust .ct-btn, .ct-dest--ember .ct-btn { color: var(--c-rust-2); }
.ct-dest--navy .ct-btn { color: var(--c-navy); }
.ct-dest--green .ct-btn { color: var(--c-ink); }

/* =========================================================
   8. CUSTOM TRIP BANNER
   ========================================================= */
.ct-custom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; overflow: hidden; padding: 40px; border-radius: 24px; background: var(--c-deep); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.ct-custom__glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; }
.ct-custom__glow--a { right: -130px; top: -130px; background: radial-gradient(circle, rgba(0, 90, 154, 0.35) 0%, rgba(0, 90, 154, 0) 65%); }
.ct-custom__glow--b { left: -130px; bottom: -130px; background: radial-gradient(circle, rgba(154, 56, 0, 0.32) 0%, rgba(154, 56, 0, 0) 65%); }
.ct-custom__copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 672px; }
.ct-custom__badge { padding: 4px 12px; border-radius: 999px; background: var(--c-rust-2); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: #fff; }
.ct-custom h2 { margin: 0; font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.72px; color: var(--c-cream); }
.ct-custom__copy > p:not(.ct-custom__badge) { font-size: 16px; line-height: 24px; color: #9ecaff; }
.ct-custom ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ct-custom li { padding: 4px 12px; border-radius: 999px; background: #00497c; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-cream); }
.ct-custom > .ct-btn { position: relative; flex: none; }

/* =========================================================
   9. FAQ
   ========================================================= */
.ct-faq { max-width: 896px; }
.ct-acc { display: flex; flex-direction: column; gap: 4px; }
.ct-acc__item { overflow: hidden; border-radius: 16px; background: var(--c-sand); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.ct-acc h3 { margin: 0; }
.ct-acc button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px; text-align: left; font-size: 20px; font-weight: 600; line-height: 28px; color: var(--c-ink); }
.ct-acc button img { flex: none; transition: transform 0.35s var(--ease); }
.ct-acc button[aria-expanded="true"] img { transform: rotate(180deg); }
.ct-acc button:hover span { color: var(--c-blue); }
.ct-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.ct-acc__panel > div { overflow: hidden; }
.ct-acc__item.is-open .ct-acc__panel { grid-template-rows: 1fr; }
.ct-acc__panel p { padding: 0 16px 18px; font-size: 15px; line-height: 24px; color: var(--c-text); }

/* =========================================================
   10. TRUST STRIP
   ========================================================= */
.ct-trust { padding: 24px 0; background: var(--c-sand); }
.ct-trust__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ct-trust__item { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
.ct-trust__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-badge); }
.ct-trust__icon.is-peach { background: #ffdbcd; }
.ct-trust__icon.is-grey { background: #eae7e7; }
.ct-trust__icon.is-green { background: rgba(37, 211, 102, 0.2); }
.ct-trust__item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ct-trust strong { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.24px; color: var(--c-ink); }
.ct-trust small { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: var(--c-text); }

/* =========================================================
   11. SOCIAL GALLERY
   ========================================================= */
.ct-social { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.24px; color: var(--c-ink); }
.ct-social a { padding: 6px 12px; border-radius: 999px; background: var(--c-chip); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; transition: background 0.2s, color 0.2s; }
.ct-social a:hover { background: var(--c-blue); color: #fff; }
.ct-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 182px); gap: 8px; }
.ct-gallery__item { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--c-chip); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.ct-gallery__item--1, .ct-gallery__item--2, .ct-gallery__item--3 { grid-row: span 2; }
.ct-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.ct-gallery__item:hover img { transform: scale(1.06); }
.ct-gallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; background: linear-gradient(0deg, rgba(0, 29, 54, 0.75), rgba(0, 29, 54, 0)); font-size: 12px; font-weight: 700; line-height: 16px; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s var(--ease); }
.ct-gallery__item:hover figcaption { opacity: 1; transform: none; }

/* =========================================================
   12. FINAL CTA
   ========================================================= */
.ct-final { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: hidden; padding: 48px 32px; border-radius: 24px; text-align: center; background: linear-gradient(164deg, #005a9a 0%, #2373ba 50%, #286197 100%); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.ct-final__ring { position: absolute; right: -64px; top: -64px; width: 384px; height: 384px; border: 40px solid rgba(255, 255, 255, 0.1); border-radius: 50%; pointer-events: none; }
.ct-final > *:not(.ct-final__ring) { position: relative; }
.ct-final__badge { padding: 6px 14px; border-radius: 999px; background: rgba(252, 249, 248, 0.2); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--c-cream); }
.ct-final h2 { max-width: 768px; margin: 0; font-size: 36px; line-height: 44px; font-weight: 800; letter-spacing: -0.72px; color: #fff; }
.ct-final__text { max-width: 672px; font-size: 18px; line-height: 28px; color: #f1f5ff; }
.ct-final__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 8px; }
.ct-final__btns .ct-btn--rust { background: var(--c-rust); }
.ct-final__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 0; padding: 4px 0 0; list-style: none; }
.ct-final__points li { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.44px; color: rgba(241, 245, 255, 0.8); }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1023px) {
  .ct-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .ct-hero__title { font-size: 42px; line-height: 50px; }
  .ct-hero__img { height: 480px; }
  .ct-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-enquiry { grid-template-columns: 1fr; }
  .ct-enquiry__story { max-width: 640px; }
  .ct-planner__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ct-experts-slider { --per: 2; }
  .ct-hq { grid-template-columns: 1fr; }
  .ct-map { min-height: 420px; }
  .ct-hours, .ct-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-custom { flex-direction: column; align-items: flex-start; }
  .ct-trust__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 300px; }
  .ct-gallery__item--1, .ct-gallery__item--2, .ct-gallery__item--3 { grid-row: auto; }
  .ct-gallery__item--4, .ct-gallery__item--5 { display: none; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {
  .ct-sec, .ct-quick { padding: 32px 0; }
  .ct-sec--last { padding-bottom: 56px; }
  .ct-head { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
  .ct-head--center { align-items: center; }
  .ct-h2, .ct-custom h2, .ct-final h2 { font-size: 27px; line-height: 34px; letter-spacing: -0.5px; }
  .ct-h3 { font-size: 21px; line-height: 28px; }
  .ct-lead { font-size: 14px; line-height: 22px; }
  .ct-btn--lg { width: 100%; padding: 14px 20px; }

  .ct-hero { padding: 0 0 32px; }
  .ct-crumbs { padding: 12px 0; }
  .ct-hero__copy { gap: 14px; }
  .ct-pill { padding: 6px 12px; font-size: 10px; line-height: 14px; white-space: normal; }
  .ct-hero__title { font-size: 34px; line-height: 41px; letter-spacing: -0.8px; }
  .ct-hero__text { font-size: 15px; line-height: 24px; }
  .ct-hero__btns { width: 100%; flex-direction: column; gap: 10px; }
  .ct-hero__btns .ct-btn { width: 100%; }
  .ct-hero__metrics { gap: 10px 18px; }
  .ct-hero__metrics li + li::before { display: none; }
  .ct-hero__img { height: 400px; }
  .ct-hero__rating { right: 12px; top: 12px; padding: 8px 12px; gap: 8px; }
  .ct-hero__rating > img { width: 26px; height: 26px; }
  .ct-hero__live { left: 12px; right: 12px; bottom: 12px; padding: 12px; gap: 10px; }

  .ct-qcard { padding: 20px; }
  .ct-qcard:hover, .ct-expert:hover, .ct-dest:hover { transform: none; }

  .ct-form { padding: 22px 16px; border-radius: 20px; }
  .ct-form__grid { grid-template-columns: 1fr; gap: 10px; }
  .ct-field input, .ct-field select, .ct-field textarea { font-size: 16px; } /* no iOS zoom */
  .ct-collage img.is-raised { transform: translateY(-10px); }

  .ct-planner { padding: 22px 16px; gap: 18px; border-radius: 20px; }
  .ct-planner__groups { grid-template-columns: 1fr; gap: 14px; }
  .ct-tag { padding: 8px 12px; }
  .ct-planner__result { padding: 14px; }
  .ct-planner__result .ct-btn { width: 100%; }

  .ct-experts-slider { --per: 1; }
  .ct-expert__media img { height: 300px; }

  .ct-office { padding: 24px 18px; }
  .ct-office h3 { font-size: 21px; line-height: 28px; }
  .ct-office address { font-size: 15px; }
  .ct-office__transit li { align-items: flex-start; }
  .ct-map { min-height: 440px; border-radius: 20px; }
  .ct-map__live, .ct-map__card { margin: 12px; }
  .ct-map__live { font-size: 11px; line-height: 14px; }
  .ct-map__card { flex-direction: column; align-items: stretch; }
  .ct-map__card .ct-btn { width: 100%; padding: 10px; }
  .ct-hours-slider { margin-top: 16px; }

  .ct-custom { padding: 28px 18px; gap: 22px; border-radius: 20px; }
  .ct-custom__copy > p:not(.ct-custom__badge) { font-size: 14px; line-height: 22px; }

  .ct-acc button { padding: 14px; font-size: 16px; line-height: 23px; }
  .ct-acc__panel p { padding: 0 14px 16px; font-size: 14px; line-height: 22px; }

  .ct-trust__row { grid-template-columns: 1fr; }
  .ct-trust__item { padding: 12px; gap: 10px; }

  .ct-trust__icon { width: 36px; height: 36px; }

  .ct-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 150px 150px; }
  .ct-gallery__item--1 { grid-column: 1 / -1; grid-row: auto; }
  .ct-gallery__item--2, .ct-gallery__item--3 { grid-row: auto; }
  .ct-gallery__item--4, .ct-gallery__item--5 { display: block; }
  .ct-gallery__item figcaption { opacity: 1; transform: none; padding: 20px 10px 8px; font-size: 11px; }

  .ct-final { padding: 36px 18px; border-radius: 20px; }
  .ct-final__text { font-size: 15px; line-height: 24px; }
  .ct-final__btns { width: 100%; flex-direction: column; gap: 10px; }
}

/* iOS: keep the date field the same height as the other fields */
.ct-field input[type="date"] { height: 46px; line-height: 20px; }