:root {
  --contact-ink: #071923;
  --contact-ink-2: #102a35;
  --contact-paper: #f4f6f5;
  --contact-ice: #dce9ed;
  --contact-cyan: #64bdd6;
  --contact-line: rgba(23, 68, 82, .18);
}

body { background: var(--contact-paper); }

.contact-hero {
  min-height: min(840px, 100svh);
  padding: 152px clamp(24px, 6vw, 96px) clamp(70px, 7vw, 105px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: end;
  gap: clamp(50px, 8vw, 130px);
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 68%, rgba(100,189,214,.2) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 32%, rgba(100,189,214,.42) 0 5px, transparent 6px),
    linear-gradient(145deg, #071923 0%, #0c2530 58%, #133744 100%);
  color: #f6fafb;
}

.contact-hero-copy { padding-top: clamp(56px, 8vw, 118px); }
.contact-kicker { margin: 0 0 24px; color: var(--contact-cyan); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.contact-hero h1 { max-width: 10ch; margin: 0; font-size: clamp(52px, 6.4vw, 98px); line-height: 1.07; letter-spacing: -.06em; }
.contact-hero-lead { max-width: 56ch; margin: 30px 0 0; color: #abc1c9; font-size: clamp(16px, 1.35vw, 19px); line-height: 2; }
.contact-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.contact-hero-actions a { min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; gap: 30px; border: 1px solid rgba(255,255,255,.32); font-size: 13px; font-weight: 800; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.contact-hero-actions a:first-child { background: #f7f8f7; color: var(--contact-ink); border-color: #f7f8f7; }
.contact-hero-actions a:hover { background: var(--contact-cyan); color: var(--contact-ink); border-color: var(--contact-cyan); }

.contact-dispatch {
  position: relative;
  min-width: 0;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(4, 20, 28, .5);
  backdrop-filter: blur(10px);
}
.contact-dispatch::before { content: ""; position: absolute; top: -1px; right: -1px; width: 92px; border-top: 4px solid var(--contact-cyan); }
.contact-dispatch-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,.16); }
.contact-dispatch-head span { color: #8eaab4; font: 800 10px/1 monospace; direction: ltr; }
.contact-live { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #d7e4e8; font-size: 12px; }
.contact-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7ad3b4; box-shadow: 0 0 0 5px rgba(122,211,180,.1); }
.contact-dispatch-list { display: grid; margin-top: 10px; }
.contact-dispatch-list a { padding: 20px 0; display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-dispatch-list a:last-child { border-bottom: 0; }
.contact-dispatch-list small { color: var(--contact-cyan); font-size: 11px; }
.contact-dispatch-list strong {
  min-width: 0;
  color: white;
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 700;
  text-align: left;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.contact-temp { margin: 22px 0 0; color: #78949f; font-size: 11px; }

.contact-direct,
.contact-map,
.contact-routing { padding: clamp(76px, 9vw, 132px) clamp(24px, 6vw, 96px); }
.contact-section-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: end; margin-bottom: 52px; }
.contact-section-head h2,
.contact-map-copy h2,
.contact-routing h2 { margin: 0; color: var(--contact-ink); font-size: clamp(40px, 5vw, 76px); line-height: 1.13; letter-spacing: -.055em; }
.contact-section-head > p { max-width: 45ch; margin: 0; color: #596e76; line-height: 2; }

.contact-direct-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--contact-line); border-right: 1px solid var(--contact-line); }
.contact-card { min-height: 236px; padding: 30px; display: flex; flex-direction: column; border-left: 1px solid var(--contact-line); border-bottom: 1px solid var(--contact-line); transition: background .2s ease, color .2s ease; }
.contact-card small { color: #4b95aa; font: 800 11px/1 monospace; }
.contact-card strong { margin-top: auto; color: var(--contact-ink); font-size: clamp(20px, 2vw, 30px); }
.contact-card span { margin-top: 8px; color: #64777e; font-size: 12px; }
.contact-card:hover { background: var(--contact-ice); }

.contact-map { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); padding-block: 0; gap: 0; background: var(--contact-ice); }
.contact-map-frame { min-height: 620px; border: 0; background: #c9d9dd; }
.contact-map-canvas { width: 100%; height: 100%; min-height: 620px; background: #c9d9dd; font-family: "NIKCO UI", Tahoma, sans-serif; }
.contact-map-canvas .leaflet-tile-pane { filter: grayscale(.18) saturate(.7) contrast(.96); }
.contact-map-canvas .leaflet-control-zoom { border: 0; box-shadow: 0 8px 24px rgba(7,25,35,.14); }
.contact-map-canvas .leaflet-control-zoom a { width: 42px; height: 42px; line-height: 42px; border: 0; border-bottom: 1px solid rgba(7,25,35,.14); border-radius: 0; color: var(--contact-ink); }
.contact-map-canvas .leaflet-control-zoom a:last-child { border-bottom: 0; }
.contact-map-canvas .leaflet-control-attribution { padding: 4px 7px; background: rgba(255,255,255,.86); color: #52666e; font-size: 9px; }
.contact-map-canvas .leaflet-control-attribution a { color: #267f99; }
.nikco-map-marker { background: transparent; border: 0; }
.nikco-map-pin { width: 52px; height: 52px; display: grid; place-items: center; border: 5px solid rgba(255,255,255,.9); border-radius: 50% 50% 50% 8px; background: var(--contact-ink); color: white; box-shadow: 0 10px 28px rgba(7,25,35,.3); font: 800 18px/1 "NIKCO UI", sans-serif; transform: rotate(-45deg); }
.nikco-map-pin span { transform: rotate(45deg); }
.contact-map-canvas .leaflet-popup-content-wrapper { border-radius: 0; background: var(--contact-ink); color: white; box-shadow: 0 16px 38px rgba(7,25,35,.24); }
.contact-map-canvas .leaflet-popup-tip { background: var(--contact-ink); }
.contact-map-canvas .leaflet-popup-content { margin: 16px 18px; direction: rtl; text-align: right; line-height: 1.8; }
.contact-map-canvas .leaflet-popup-content strong { display: block; color: var(--contact-cyan); font-size: 13px; }
.contact-map-fallback { min-height: 620px; display: grid; place-items: center; color: var(--contact-ink); font-weight: 800; }
.contact-map-copy { padding: clamp(58px, 6vw, 94px); display: flex; flex-direction: column; justify-content: center; background: var(--contact-ink); color: white; }
.contact-map-copy h2 { max-width: 8ch; color: white; }
.contact-address { margin: 38px 0 0; color: #b2c4ca; font-size: 17px; line-height: 2; }
.contact-address strong { display: block; margin-bottom: 8px; color: var(--contact-cyan); font-size: 12px; }
.contact-hours { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); color: #91aab3; font-size: 13px; line-height: 2; }
.contact-map-actions { margin-top: 34px; display: grid; gap: 10px; }
.contact-map-link { width: 100%; min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; background: white; color: var(--contact-ink); font-size: 13px; font-weight: 800; }
.contact-map-link:hover { background: var(--contact-cyan); }

.contact-routing { background: #f7f8f6; }
.contact-routing-head { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; margin-bottom: 50px; }
.contact-routing-head p { max-width: 47ch; margin: 0; color: #5a7078; line-height: 2; }
.contact-routing-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--contact-line); }
.contact-route-card { min-height: 240px; padding: 34px; display: flex; flex-direction: column; position: relative; border-left: 1px solid var(--contact-line); }
.contact-route-card:last-child { border-left: 0; }
.contact-route-card small { color: #4f94a8; font: 800 11px/1 monospace; }
.contact-route-card strong { max-width: 16ch; margin-top: auto; color: var(--contact-ink); font-size: clamp(24px, 2.5vw, 38px); line-height: 1.4; }
.contact-route-card i { position: absolute; left: 30px; bottom: 28px; color: #4f94a8; font-style: normal; font-size: 22px; }
.contact-route-card:hover { background: var(--contact-ice); }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (min-width: 901px) and (max-width: 1100px) {
  .contact-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: clamp(28px, 4vw, 44px);
  }

  .contact-dispatch { padding: 28px; }
  .contact-dispatch-list a { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .contact-dispatch-list strong { font-size: clamp(14px, 1.55vw, 17px); }
}

@media (max-width: 900px) {
  .contact-hero { padding-top: 80px; grid-template-columns: 1fr; align-items: start; min-height: auto; }
  .contact-hero-copy { padding-top: 72px; }
  .contact-dispatch { margin-top: 10px; }
  .contact-section-head, .contact-map, .contact-routing-head { grid-template-columns: 1fr; }
  .contact-direct-grid { grid-template-columns: 1fr 1fr; }
  .contact-card:last-child { grid-column: 1 / -1; }
  .contact-map-copy { order: -1; }
  .contact-map-frame, .contact-map-canvas { min-height: 450px; }
}

@media (max-width: 620px) {
  .contact-hero { padding: 92px 20px 44px; gap: 30px; }
  .contact-hero > * { min-width: 0; }
  .contact-hero-copy { padding-top: 18px; }
  .contact-hero h1 { font-size: clamp(46px, 13vw, 64px); }
  .contact-hero-lead { margin-top: 20px; font-size: 15px; line-height: 1.85; }
  .contact-hero-actions { margin-top: 24px; }
  .contact-hero-actions a { width: 100%; justify-content: space-between; }
  .contact-dispatch { margin-top: 0; padding: 20px; }
  .contact-dispatch-head { padding-bottom: 17px; }
  .contact-dispatch-list { margin-top: 16px; }
  .contact-dispatch-list a { grid-template-columns: 70px 1fr; }
  .contact-dispatch-list strong { font-size: 15px; }
  .contact-dispatch .nikco-mobile-carousel-controls { color: white; }
  .contact-temp { margin-top: 10px; }
  .contact-direct,
  .contact-routing { padding-block: 64px; }
  .contact-section-head,
  .contact-routing-head { gap: 20px; margin-bottom: 32px; }
  .contact-direct-grid, .contact-routing-grid { grid-template-columns: 1fr; }
  .contact-card:last-child { grid-column: auto; }
  .contact-route-card { border-left: 0; border-bottom: 1px solid var(--contact-line); }
  .contact-route-card:last-child { border-bottom: 0; }
  .contact-map-copy { padding: 58px 24px; }
  .contact-map-frame, .contact-map-canvas { min-height: 370px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Homepage typography rhythm */
body{font-family:"NIKCO Body","NIKCO UI",Tahoma,sans-serif;font-weight:400}
:where(h1,h2,h3,h4,.contact-kicker,.contact-hero-actions a,.contact-map-link,.contact-route-card strong,.nikco-header,.nikco-mega-menu){font-family:"NIKCO UI",Abar,Tahoma,sans-serif}
.contact-kicker{font-weight:650;letter-spacing:.02em}
.contact-hero h1{max-width:12ch;font-weight:800;line-height:1.44;letter-spacing:-.035em;text-wrap:balance}
:is(.contact-section-head h2,.contact-map-copy h2,.contact-routing h2){font-weight:700;line-height:1.34;letter-spacing:-.02em;text-wrap:balance}
.contact-route-card strong{font-weight:700;line-height:1.35;letter-spacing:-.015em;text-wrap:balance}
@media(max-width:620px){.contact-hero h1{max-width:10.4ch;font-size:clamp(36px,10.45vw,46px);line-height:1.42}:is(.contact-section-head h2,.contact-map-copy h2,.contact-routing h2){line-height:1.38}}
