/* =========================================================
   Contact page (contact.html) — generated by tools/build_contact.py
   Reuses the service hero (curved gallery), section heads and final CTA
   from pages/service.css; adds contact cards, the booking wizard layout,
   routing tiles, booking steps and the dark map.
   ========================================================= */

.sv-hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.ghost-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 100px; border: 1px solid rgba(255,255,255,.2); font-size: 15px; font-weight: 500; transition: background .3s, border-color .3s; }
.ghost-cta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }

/* ---------- Contact methods ---------- */
.ct-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ct-card { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 28px 26px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(203,54,15,.18), transparent 45%), var(--card); border: 1px solid var(--line);
  transition: border-color .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.ct-card:hover { border-color: rgba(203,54,15,.55); transform: translateY(-6px); }
.ct-card .ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(203,54,15,.14); border: 1px solid rgba(203,54,15,.4); transition: background .4s, transform .5s; }
.ct-card .ic svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.6; transition: stroke .4s; }
.ct-card:hover .ic { background: var(--accent); transform: rotate(-8deg) scale(1.06); }
.ct-card:hover .ic svg { stroke: #fff; }
.ct-card .lbl { margin-top: auto; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--dim); }
.ct-card .val { font-family: var(--serif); font-size: clamp(24px, 2vw, 30px); line-height: 1.1; margin: 8px 0 18px; word-break: break-word; }
.ct-card .val.sm { font-size: clamp(19px, 1.45vw, 22px); word-break: normal; overflow-wrap: anywhere; }
.ct-card .act { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #fff; }
.ct-card .act span { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transition: transform .4s; }
.ct-card .act svg { width: 12px; height: 12px; }
.ct-card:hover .act span { transform: rotate(-45deg); }
.ct-card a.cover { position: absolute; inset: 0; z-index: 2; }

/* ---------- Booking wizard layout (js/booking.js) ---------- */
.form-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.form-side { position: sticky; top: 110px; }
.form-side .c-steps { margin-top: 30px; }
.form-side .alt { margin-top: 26px; font-size: 14px; color: var(--muted); line-height: 1.8; }
.form-side .alt a { color: #fff; border-bottom: 1px solid var(--accent); }

/* ---------- Routing tiles ---------- */
.route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.route a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 24px; border-radius: 18px; overflow: hidden; }
.route img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55); transform: scale(1.04); transition: filter .7s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.route a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.8)); }
.route a:hover img { filter: brightness(.7); transform: scale(1.1); }
.route .txt { position: relative; z-index: 2; }
.route h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.route p { font-size: 13px; color: var(--muted); margin-top: 6px; }
.route .go { position: absolute; z-index: 2; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; transition: background .3s, border-color .3s, transform .4s; }
.route .go svg { width: 14px; height: 14px; }
.route a:hover .go { background: var(--accent); border-color: var(--accent); transform: rotate(-45deg); }

/* ---------- Booking steps (line grows with scroll) ---------- */
.bk { position: relative; list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding-top: 34px; }
.bk::before, .bk-fill { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 1px; background: var(--line); }
.bk-fill { background: var(--accent); transform-origin: left; transform: scaleX(0); }
.bk li:not(.bk-fill) { position: relative; opacity: .35; transition: opacity .5s; }
.bk li.on:not(.bk-fill) { opacity: 1; }
.bk li:not(.bk-fill)::before { content: ""; position: absolute; top: -28px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); transition: background .4s, border-color .4s, box-shadow .4s; }
.bk li.on:not(.bk-fill)::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px rgba(203,54,15,.2); }
.bk .n { font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--accent); line-height: 1; }
.bk h3 { font-size: 16px; font-weight: 600; margin-top: 12px; }
.bk p { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- Map ---------- */
.map-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }
.map-frame { position: relative; min-height: 460px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) grayscale(.6) contrast(.9); }
.map-frame .pin { position: absolute; z-index: 2; left: 18px; bottom: 18px; padding: 10px 16px; border-radius: 100px; background: rgba(17,17,18,.75); backdrop-filter: blur(10px); font-size: 13px; pointer-events: none; }
.map-frame .pin b { color: var(--accent); font-weight: 600; }
.map-info { display: flex; flex-direction: column; padding: 34px; border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(203,54,15,.18), transparent 55%), var(--card); border: 1px solid var(--line); }
.map-info address { font-style: normal; font-family: var(--serif); font-size: 30px; line-height: 1.15; margin: 14px 0 24px; }
.map-info .city-chips { margin-top: auto; padding-top: 26px; }
.map-info .x-lead { font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ct-cards { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-side { position: static; }
  .route { grid-template-columns: 1fr 1fr; }
  .bk { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
  .bk::before, .bk-fill { display: none; }
  .map-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .ct-cards, .route { grid-template-columns: 1fr; }
  .ct-card { min-height: 220px; }
  .route a { min-height: 220px; }
  .bk { grid-template-columns: 1fr; gap: 28px; padding: 0 0 0 30px; }
  .bk::before, .bk-fill { display: block; top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .bk-fill { transform-origin: top; transform: scaleY(0); }
  .bk li:not(.bk-fill)::before { top: 6px; left: -30px; }
  .map-frame { min-height: 340px; }
  .map-info { padding: 26px 22px; }
  .map-info address { font-size: 24px; }
}