/* mōvit shared site styles — extracted from index.html so every page (home + solutions/*.html) can share one stylesheet instead of re-embedding it. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --navy: #090C9B;
  --violet: #5200C6;
  --ice: #D6E5E3;
  --frost: #EBF7F7;
  --black: #000000;
  --white: #ffffff;
  --navy-dim: rgba(9,12,155,0.08);
  --violet-dim: rgba(82,0,198,0.1);
}
html { scroll-behavior: smooth; }
body {
  background: var(--frost);
  color: var(--black);
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 3rem;
  background: #000000;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(214,229,227,0.08);
}
.nav-logo img { height: 28px; display: block; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
.nav-links a {
  color: rgba(235,247,247,0.55);
  text-decoration: none; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; transition: color 0.2s;
}
.nav-links a:hover { color: var(--frost); }
.nav-cta {
  border: 1px solid var(--ice) !important;
  color: rgba(235,247,247,0.7) !important;
  padding: 0.55rem 1.35rem;
  border-radius: 100px;
  background: none !important;
}
.nav-cta:hover { color: var(--frost) !important; border-color: var(--frost) !important; }

/* HERO */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5rem;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}
.hero-blob {
  position: absolute; width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9,12,155,0.5) 0%, rgba(82,0,198,0.3) 50%, transparent 70%);
  right: -100px; top: 50%; transform: translateY(-50%);
  filter: blur(60px);
  pointer-events: none;
}
.hero-blob2 {
  position: absolute; width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(82,0,198,0.25) 0%, transparent 70%);
  left: 5%; bottom: 10%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-bottom: 2rem;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy); flex-shrink: 0;
}
.hero-eyebrow span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(214,229,227,0.6);
  background: rgba(9,12,155,0.25);
  border: 1px solid rgba(9,12,155,0.5);
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
}
.hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3.8rem, 8vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 1.75rem;
  max-width: 800px;
}
.hero-headline .accent {
  color: var(--ice);
  display: block;
}
.hero-sub {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  color: rgba(214,229,227,0.55);
  max-width: 460px;
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 3rem;
}
.hero-actions {
  display: flex; gap: 1.25rem; align-items: center; justify-content: center; flex-wrap: wrap;
}
/* Homepage hero only: the aircraft photo sits absolutely on the right
   half of this hero (.hero-plane, 1360px+ only), so centering across the
   FULL width would push the buttons under the photo. Center them within
   the text column's own width instead -- same max-width as the headline. */
.hero-card:not(.hero-card--sub) .hero-actions{ max-width: 800px; }
.btn-primary {
  background: var(--white);
  color: var(--black);
  padding: 0.9rem 2.25rem;
  border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; display: inline-block;
  border-radius: 100px;
  transition: background 0.2s, transform 0.15s, color 0.2s;
}
.btn-primary:hover {
  background: var(--ice);
  transform: translateY(-2px);
}
.btn-outline {
  border: 1px solid rgba(214,229,227,0.3);
  color: rgba(214,229,227,0.7);
  padding: 0.9rem 2.25rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; display: inline-flex;
  align-items: center; gap: 0.5rem;
  border-radius: 100px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover {
  border-color: var(--ice);
  color: var(--white);
}
.hero-scroll-indicator {
  position: absolute; bottom: 2.5rem; left: 5rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.scroll-line {
  width: 40px; height: 1px;
  background: linear-gradient(to right, rgba(214,229,227,0.5), transparent);
}
.scroll-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(235,247,247,0.3);
}

/* DESKTOP SECTION STYLES - restored */
}





@media (max-width: 768px) {
  
  
  /* Animate to X when checked */
  
  
  

}


/* ===================== */
/* DESKTOP SECTION STYLES */
/* ===================== */

/* TICKER */
.ticker {
  background: var(--navy);
  padding: 0.85rem 0;
  overflow: hidden; white-space: nowrap;
}
.ticker-inner {
  display: inline-flex; gap: 0;
  animation: ticker 140s linear infinite;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0 2.5rem;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(235,247,247,0.7); font-weight: 500;
}
.ticker-sep { color: rgba(235,247,247,0.3); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ticker-slow { from { transform: translateX(-50%); } to { transform: translateX(0); } }


/* LANES */
.lanes { padding: 6rem 3rem; background: var(--frost); }
.lanes-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 3rem; margin-bottom: 3.5rem;
}
.lanes-head-copy{ flex: 1 1 auto; min-width: 0; }
.lanes-head-copy .section-title{ margin-bottom: 1.1rem; }
.lanes-head-copy .lanes-sub{ margin-bottom: 0; }
/* U.S. Domestic sits in the header row, between the copy and the world
   image, so the remaining 6 lanes below form a clean 3x2 grid instead of
   an odd 5-plus-1 split. */
.lanes-head-card{
  flex: 0 0 auto; width: clamp(220px, 19vw, 270px);
  align-self: center;
}
/* Sits beside the title, not a tiny corner box and not a full-width
   strip -- sized so the 1400px source is comfortably above the
   rendered size even at 2x pixel density, so it stays sharp. A longer,
   more elongated rectangle than a plain 16:9 crop. */
.lanes-head-visual{
  flex: 0 0 auto; width: clamp(340px, 38vw, 560px);
  aspect-ratio: 2 / 1;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(9,12,155,0.14);
}
.lanes-head-visual img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px){
  .lanes-head{ flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .lanes-head-visual{ width: 100%; aspect-ratio: 2 / 1; }
  .lanes-head-card{ width: 100%; }
}
.section-label {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--ice); max-width: 60px;
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--black); margin-bottom: 3.5rem;
}
.lanes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px){
  .lanes-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .lanes-grid{ grid-template-columns: 1fr; }
}
.lanes-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem; font-weight: 300;
  color: rgba(0,0,0,0.45); line-height: 1.7;
  margin-bottom: 2.5rem; max-width: 480px;
}
.lane-card {
  background: var(--white);
  border: 1px solid var(--ice);
  border-radius: 16px;
  padding: 2rem;
  position: relative; overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.lane-card:hover {
  border-color: rgba(9,12,155,0.25);
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
  transform: translateY(-3px);
}
.lane-bar { display: none; }
.lane-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem; font-weight: 600;
  color: var(--black); margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.lane-route {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(0,0,0,0.35); font-weight: 500;
}

/* SERVICES */
.services { padding: 6rem 3rem; background: var(--black); position: relative; overflow: hidden; }
.services-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(82,0,198,0.15) 0%, transparent 60%);
}
.services .section-label { color: var(--ice); }
.services .section-label::after { background: rgba(214,229,227,0.2); }
.services .section-title { color: var(--white); }
.services-accordion { margin-top: 2rem; }
.acc-item { border-top: 1px solid rgba(214,229,227,0.1); }
.acc-item:last-child { border-bottom: 1px solid rgba(214,229,227,0.1); }
.acc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 0; cursor: pointer; transition: opacity 0.2s;
}
.acc-head:hover { opacity: 0.8; }
.acc-head-left { display: flex; align-items: center; gap: 1rem; }
.acc-head-left svg { width: 20px; height: 20px; color: rgba(214,229,227,0.5); flex-shrink: 0; }
.acc-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 500;
  color: var(--white); letter-spacing: -0.01em;
}
.acc-toggle {
  font-size: 1.4rem; font-weight: 300;
  color: rgba(214,229,227,0.4); line-height: 1;
  transition: transform 0.25s, color 0.2s; display: inline-block;
}
.acc-item.open .acc-toggle { transform: rotate(45deg); color: var(--ice); }
.acc-item.open .acc-head-left svg { color: var(--ice); }
.acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s ease;
  padding: 0 0 0 2.25rem;
}
.acc-item.open .acc-body { max-height: 200px; padding: 0 0 1.5rem 2.25rem; }
.acc-body p {
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem; font-weight: 300;
  color: rgba(214,229,227,0.5); line-height: 1.75; margin: 0;
}
.acc-bullets { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.acc-bullets li {
  font-family: 'Sora', sans-serif; font-size: 0.85rem; font-weight: 300;
  color: rgba(214,229,227,0.4); display: flex; align-items: center; gap: 0.75rem;
}
.acc-bullets li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(9,12,155,0.8); flex-shrink: 0;
}

/* CONTACT */
.contact {
  padding: 6rem 3rem; background: var(--frost);
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 4rem; align-items: start;
}
.contact-divider {
  width: 1px;
  height: 100%;
  background: rgba(0,0,0,0.08);
  align-self: stretch;
}
.contact-body {
  font-size: 0.95rem; color: rgba(0,0,0,0.5);
  line-height: 1.7; margin-top: 1.25rem; max-width: 380px; font-weight: 300;
}
.contact-info { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ci-row { display: flex; gap: 1rem; align-items: flex-start; }
.ci-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; min-width: 60px; padding-top: 2px;
}
.ci-val { font-size: 0.875rem; color: rgba(0,0,0,0.65); }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(0,0,0,0.4); font-weight: 600;
}
.form-group input, .form-group select, .form-group textarea {
  background: var(--white); border: 1px solid var(--ice);
  color: var(--black); font-family: 'Sora', sans-serif;
  font-size: 0.9rem; font-weight: 300;
  padding: 0.75rem 1rem; border-radius: 10px; outline: none;
  transition: border-color 0.2s; -webkit-appearance: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--navy); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-submit {
  background: var(--navy); color: var(--white);
  padding: 0.95rem 2.5rem; border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  border-radius: 100px; align-self: flex-start; margin-top: 0.5rem;
}
.form-submit:hover { background: var(--violet); transform: translateY(-1px); }

/* FOOTER */
footer {
  background: var(--black);
  border-top: 1px solid rgba(235,247,247,0.06);
  padding: 2.5rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-logo img { height: 22px; opacity: 0.6; }
.footer-copy { font-size: 0.72rem; color: rgba(235,247,247,0.2); letter-spacing: 0.06em; }
.footer-email { text-align: right; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.7s ease both; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.32s; } .d4 { animation-delay: 0.46s; }


/* WHY MOVIT */
.why-movit {
  background: var(--frost);
  padding: 5rem 3rem;
  border-bottom: 1px solid var(--ice);
}
.why-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  width: 100%;
}
.why-pillar {
  text-align: center;
  padding: 2.5rem 3.5rem;
}
.why-divider {
  width: 1px;
  height: 80px;
  background: var(--ice);
  flex-shrink: 0;
}
.why-icon {
  width: 44px; height: 44px;
  margin: 0 auto 1.25rem;
  color: var(--navy);
}
.why-icon svg { width: 44px; height: 44px; }
.why-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-weight: 600;
  color: var(--black); margin-bottom: 0.65rem;
  letter-spacing: -0.01em;
}
.why-body {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem; font-weight: 300;
  color: rgba(0,0,0,0.5); line-height: 1.7;
  margin: 0; max-width: 220px; margin: 0 auto;
}

@media (max-width: 768px) {
  .why-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .why-divider {
    width: 60px; height: 1px;
    margin: 0 auto;
  }
  .why-pillar { padding: 1.75rem 1rem; }
  .why-body { max-width: 100%; }
}

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 10000;
  position: relative;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(235,247,247,0.85);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .hamburger { display: flex; }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 140px 0 0 0;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;
    background: #000000;
    z-index: 9999;
    overflow: hidden;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li {
    width: 80%;
    text-align: center;
    border-bottom: 1px solid rgba(235,247,247,0.08);
    padding: 1.25rem 0;
  }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: rgba(235,247,247,0.8);
    text-decoration: none;
    display: block;
  }
  .nav-links .nav-cta {
    border: 1px solid rgba(235,247,247,0.3) !important;
    border-radius: 100px;
    padding: 0.4rem 1.25rem;
    display: inline-block;
    margin-top: 0.25rem;
  }
}





@media (max-width: 768px) {
  #worldCanvas { display: none !important; }
}




/* ======================================================= */
/* v3 — plain ice-frost header, framed hero card, dropdown nav */
/* ======================================================= */

:root{
  --glass-light-bg: rgba(255,255,255,0.55);
  --glass-light-border: rgba(9,12,155,0.10);
  --radius-ctrl: 12px;
  --radius-pill: 14px;
}

/* ---------- HEADER: frosted glass bar on the ice-frost page, pushed right ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem;
  background: rgba(235,247,247,0.7);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(9,12,155,0.08);
}
.nav-right{ display: flex; align-items: center; gap: 0.9rem; }

/* the "glass pill" itself: more translucent + more blurred than the bar
   behind it, with an inner highlight so it reads as its own frosted object */
.nav-pill{
  position: relative;
  display: flex; align-items: center; gap: 0.15rem;
  padding: 0.35rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 30px rgba(9,12,155,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
}
.nav-pill-indicator{
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 2px 10px rgba(9,12,155,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.25s cubic-bezier(.22,1,.36,1), width 0.25s cubic-bezier(.22,1,.36,1), opacity 0.15s ease;
  opacity: 0; pointer-events: none;
}
.nav-pill-indicator.active{ opacity: 1; }
.nav-link:hover{ background: rgba(255,255,255,0.35); }

.nav-item{ position: relative; display: flex; }
.nav-link{
  position: relative; z-index: 1;
  padding: 0.6rem 1.05rem;
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border-radius: 9px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
  display: flex; align-items: center; gap: 0.3rem;
}
.nav-link:hover, .nav-link.active{ color: var(--navy); }
.nav-caret{ width: 8px; height: 8px; opacity: 0.5; transition: transform 0.2s ease; flex-shrink: 0; }
.nav-item:hover .nav-caret, .nav-item.dd-open .nav-caret{ transform: rotate(180deg); }

.nav-dropdown{
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 230px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(9,12,155,0.10);
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 44px rgba(9,12,155,0.14);
  padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 50;
}
.nav-dropdown::before{ content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav-item:hover .nav-dropdown, .nav-item.dd-open .nav-dropdown{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a{
  display: block; padding: 0.62rem 0.85rem; border-radius: 8px;
  color: rgba(0,0,0,0.62); text-decoration: none;
  font-family: 'Sora', sans-serif; font-size: 0.85rem; font-weight: 400;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown a:hover{ background: rgba(9,12,155,0.06); color: var(--navy); }

.nav-cta{
  text-decoration: none !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: 1px solid var(--navy) !important;
  border-radius: var(--radius-ctrl) !important;
  padding: 0.62rem 1.35rem;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-cta:hover{ background: var(--violet) !important; border-color: var(--violet) !important; }

@media (min-width: 769px){ .nav-links{ display: none !important; } }
@media (max-width: 768px){
  .nav-pill{ display: none !important; }
  .nav-right > .nav-cta{ display: none !important; }
}

/* mobile full-screen menu: nested Solutions / Coverage disclosures */
.nav-links details{ width: 100%; }
.nav-links details > summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 1.1rem; letter-spacing: 0.1em; color: rgba(235,247,247,0.8);
  padding: 1.25rem 0;
}
.nav-links details > summary::-webkit-details-marker{ display: none; }
.nav-links details[open] > summary{ color: var(--frost); }
.nav-links .sub-links{ display: flex; flex-direction: column; align-items: center; gap: 0; padding-bottom: 1rem; }
.nav-links .sub-links a{
  font-size: 0.82rem; letter-spacing: 0.08em; padding: 0.55rem 0;
  color: rgba(235,247,247,0.5); text-decoration: none; text-transform: uppercase;
}

/* ---------- HERO: framed rounded card sitting on the ice-frost page ---------- */
.hero-shell{ padding: 0 1.25rem 1.25rem; background: var(--frost); }
.hero.hero-card{
  border-radius: 28px;
  min-height: 0;
  height: min(74vh, 720px);
  padding: 3.25rem 3.5rem;
}
.hero.hero-card.hero-card--sub{
  height: auto;
  min-height: 300px;
  padding: 3rem 3.5rem;
  justify-content: flex-end;
  /* sub-pages have no canvas map to supply the dark base, so give the
     card its own brand-gradient background (the blob glows still sit
     on top of this, same as the home hero). */
  background: linear-gradient(160deg, #05060f 0%, #0c0d2e 55%, #1c0740 100%);
}
.hero-breadcrumb{
  font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(214,229,227,0.55); margin-bottom: 1rem; position: relative; z-index: 2;
}
.hero-breadcrumb a{ color: rgba(214,229,227,0.55); text-decoration: none; }
.hero-breadcrumb a:hover{ color: var(--frost); }

/* sub-page titles ("Air Freight", "Ground Freight", "On Board Courier"...)
   are one to three words, not the two-line home headline, so they run in
   a single line at a size that scales down with viewport width -- the
   800px max-width + huge desktop clamp from .hero-headline was wrapping
   the longer ones ("Ground Freight", "On Board Courier") onto a second
   line and left a lot of the wide hero card unused. The photo used to
   live inside this same card (.hero-plane, floated over the text) which
   is why the title was kept modest -- now that the photo has moved into
   its own section below the hero, the card is text-only again, so the
   title can run bigger and still fit one line with room to spare. */
.hero-card--sub .hero-headline{
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2.15rem, 6.4vw, 5.75rem);
}
.hero-card--sub .hero-sub{ position: relative; z-index: 2; max-width: 640px; }

/* photo of an aircraft on the tarmac, floated over the map on the right
   side of the home hero -- same 18px corner radius used on cards
   elsewhere on the site, so it reads as part of the same system.
   (Sub-pages no longer use this -- their photos sit in .solution-intro
   below the hero instead -- so this only affects the homepage hero now.) */
.hero-plane{
  position: absolute; z-index: 1;
  right: 2.5%; top: 50%; transform: translateY(-50%);
  width: 54%; max-width: 680px; min-width: 300px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 6px 20px rgba(0,0,0,0.35);
}
.hero-plane img{ display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
/* hidden below this width -- at this size, this large, it starts to
   crowd the headline text ("on." was nearly touching the frame at
   1280px); only show it once there's room for both */
@media (max-width: 1360px){ .hero-plane{ display: none; } }

/* SOLUTION INTRO -- two-column section below the sub-page hero: the intro
   copy on the left, the page's photo on the right, in its own section
   instead of floated over the hero text. Widened from 1220 to 1320px so
   pages with more content (Project Cargo) have room to breathe instead
   of reading as a narrow column stuck in the middle of the page. */
.solution-intro{
  display: flex; align-items: center; gap: 3.5rem;
  max-width: 1320px; margin: 0 auto; padding: 5.5rem 3rem 1rem;
}
.solution-intro-text{ flex: 1 1 50%; min-width: 0; }
.solution-intro-text.detail-body{ padding: 0; margin: 0; max-width: none; }
.solution-intro-visual{
  flex: 1 1 46%; min-width: 0;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 45px rgba(9,12,155,0.12);
  aspect-ratio: 4 / 3;
}
.solution-intro-visual img{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* --stack variant: the text column also carries the sub-service cards
   (or the "when it's the right call" bullets) stacked vertically, and
   the photo stretches to match however tall that column ends up being,
   so text + list + photo read as one balanced block. */
.solution-intro--stack{ align-items: flex-start; }
.solution-intro-col{ flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
/* The photo no longer stretches to match the (often much taller) text +
   cards column -- that forced an extreme, over-cropped portrait shape.
   Instead it keeps a normal photographic aspect ratio, sized to use its
   column's width, and centers vertically alongside the text. */
.solution-intro--stack .solution-intro-visual{
  flex: 0 0 42%; align-self: center;
  aspect-ratio: 4 / 3; min-height: 0; max-width: 460px;
}
.solution-cards-stack{ display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0.5rem; }
/* Ground Freight: a bigger photo than the default stack, text column
   narrower to match -- still capped and centered, not stretched. */
.solution-intro--wide-visual .solution-intro-col{ flex: 1 1 46%; }
.solution-intro--wide-visual .solution-intro-visual{ flex: 0 0 48%; max-width: 540px; }

@media (max-width: 900px){
  .solution-intro{ flex-direction: column; gap: 2rem; padding: 3.5rem 1.5rem 0.5rem; }
  .solution-intro-visual{ width: 100%; aspect-ratio: 16 / 10; }
  .solution-intro--stack .solution-intro-visual{ min-height: 220px; aspect-ratio: 16 / 10; max-width: none; align-self: stretch; }
}

@media (max-width: 768px){
  .hero.hero-card{ height: auto; min-height: 600px; padding: 2.5rem 1.5rem; border-radius: 20px; }
  .hero.hero-card.hero-card--sub{ min-height: 220px; padding: 2.25rem 1.5rem; }
  /* the canvas map is hidden below 768px (see the base stylesheet's
     #worldCanvas rule) -- without it the home hero-card needs its own
     dark base, same brand gradient the sub-hero pages use everywhere. */
  .hero.hero-card:not(.hero-card--sub){
    background: linear-gradient(160deg, #05060f 0%, #0c0d2e 55%, #1c0740 100%);
  }
}

/* ---------- Buttons: rounded rectangles, not full pills ---------- */
.btn-primary, .btn-outline{ border-radius: var(--radius-ctrl); }

/* ---------- ICE-FROST ATMOSPHERE (shared texture for light sections) ---------- */
.ice-atmosphere{ position: relative; isolation: isolate; }
.ice-atmosphere::before{
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 15%, rgba(82,0,198,0.055) 0%, transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(9,12,155,0.06) 0%, transparent 48%);
  animation: iceDrift 34s ease-in-out infinite alternate;
}
.ice-atmosphere::after{
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwLjA1IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
  opacity: 0.6;
}
.ice-atmosphere > *{ position: relative; z-index: 1; }
@keyframes iceDrift{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-2%, 2%) scale(1.04); }
}

.glass-panel{
  background: var(--glass-light-bg);
  border: 1px solid var(--glass-light-border);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(9,12,155,0.06);
}

/* ---------- PROBLEM / SOLUTION SECTION ---------- */
.problem{ padding: 8rem 3rem; background: var(--frost); }
.problem-inner{ max-width: 1220px; margin: 0 auto; }
.problem-heading-row{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: center; margin-bottom: 4rem; }
.problem-intro{
  font-family: 'Sora', sans-serif; font-size: 1.02rem; font-weight: 300;
  color: rgba(0,0,0,0.5); line-height: 1.8; max-width: 640px; margin-bottom: 0;
}
/* photo next to the heading, same 18px corner radius as the cards below it */
.problem-visual{ border-radius: 18px; overflow: hidden; box-shadow: 0 20px 45px rgba(9,12,155,0.12); }
.problem-visual img{ display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
@media (max-width: 900px){
  .problem-heading-row{ grid-template-columns: 1fr; gap: 1.75rem; margin-bottom: 2.5rem; }
  .problem-visual{ order: -1; }
}
.problem-columns-header{ display: grid; grid-template-columns: 1fr 72px 1fr; margin-bottom: 1.75rem; }
.pc-col-label{
  font-family: 'Space Grotesk', sans-serif; font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 0 2.75rem;
}
.pc-col-label--standard{ color: rgba(0,0,0,0.38); }
.pc-col-label--ours{ color: var(--navy); text-align: right; }
.problem-rows{ display: flex; flex-direction: column; gap: 1.75rem; }
.problem-row{ display: grid; grid-template-columns: 1fr 72px 1fr; align-items: stretch; gap: 0; }
.problem-card{ padding: 2.25rem 2.5rem; }
.pc-label{
  font-family: 'Space Grotesk', sans-serif; font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 0.9rem; display: none; align-items: center; gap: 0.5rem;
}
.pc-label--problem{ color: rgba(0,0,0,0.32); }
.pc-label--problem::before{ content:''; width:5px; height:5px; border-radius:50%; background: rgba(0,0,0,0.28); }
.pc-label--solution{ color: var(--navy); }
.pc-label--solution::before{ content:''; width:5px; height:5px; border-radius:50%; background: var(--violet); }
.pc-title{
  font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 600;
  color: var(--black); margin-bottom: 0.65rem; letter-spacing: -0.01em;
}
.pc-body{
  font-family: 'Sora', sans-serif; font-size: 0.9rem; font-weight: 300;
  color: rgba(0,0,0,0.5); line-height: 1.7; margin: 0;
}
.problem-card--solution{ border-color: rgba(82,0,198,0.16); box-shadow: 0 6px 28px rgba(82,0,198,0.08); }
.problem-connector{ position: relative; height: 2px; align-self: center; margin: 0 -1px;
  background: linear-gradient(90deg, rgba(9,12,155,0.18), rgba(82,0,198,0.4), rgba(9,12,155,0.18)); }
.connector-dot{
  position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet); transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(82,0,198,0.7);
  animation: flowRight 2.6s ease-in-out infinite;
}
@keyframes flowRight{ 0%{left:0%;opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{left:100%;opacity:0;} }
@media (max-width: 900px){
  .problem-columns-header{ display: none; }
  .pc-label{ display: flex; }
  .problem-row{ grid-template-columns: 1fr; }
  .problem-card{ padding: 1.85rem 2rem; }
  .problem-connector{ width: 2px; height: 34px; margin: 0.5rem auto; }
  .connector-dot{ top:0; left:50%; transform:translateX(-50%); animation-name: flowDown; }
}
@keyframes flowDown{ 0%{top:0%;opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{top:100%;opacity:0;} }

/* ---------- WHY-US SECTION ---------- */
.why-us{ padding: 8.5rem 3rem; background: var(--white); }
.why-us-grid{ max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6rem; align-items: start; }
.why-us-copy .section-title{ margin-bottom: 2rem; }
.why-us-p{ font-family:'Sora',sans-serif; font-size:1.02rem; font-weight:300; color:rgba(0,0,0,0.55); line-height:1.9; margin-bottom:1.6rem; max-width:560px; }
.why-us-p:last-child{ margin-bottom:0; }
/* Energy/industrial photo, sized to fill the space below the copy that
   the taller pillars column leaves empty -- smaller than a full-width
   banner, no text overlay (the caption lived in the section heading
   already). */
.why-us-visual{
  margin-top: 2.25rem; max-width: 560px;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(9,12,155,0.12);
  height: clamp(180px, 22vw, 260px);
}
.why-us-visual img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px){
  .why-us-visual{ max-width: 100%; height: clamp(160px, 42vw, 220px); }
}
.why-us-pillars .why-inner{ display:flex; flex-direction:column; gap:1.5rem; }
.why-us-pillars .why-pillar{ text-align:left; padding:2.25rem; background:var(--frost); border:1px solid var(--ice); border-radius:18px; }
.why-us-pillars .why-icon{ margin:0 0 1.1rem; }
.why-us-pillars .why-body{ margin:0; max-width:none; }
.why-us-pillars .why-divider{ display:none; }
@media (max-width: 900px){ .why-us-grid{ grid-template-columns:1fr; gap:3rem; } .why-us{ padding: 6rem 2rem; } }

/* ---------- LANES: animated route line, clickable cards + spacing override ---------- */
.lanes{ padding: 8.5rem 3rem; }
.lanes-grid{ gap: 2rem !important; margin-top: 1rem; }
.lanes-sub{ margin-bottom: 3.5rem; }
.lane-card{ display: block; text-decoration: none; padding: 2.5rem !important; }
.lane-route-viz{ display: flex; align-items: center; gap: 0; margin-top: 1.8rem; }
.lrv-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--navy); flex-shrink: 0; }
.lrv-dot--end{ background: var(--violet); }
.lrv-line{ flex: 1; height: 1px; margin: 0 7px; position: relative; overflow: hidden; background: linear-gradient(90deg, var(--navy), var(--violet)); }
.lrv-line::after{ content:''; position:absolute; top:0; left:-30%; width:30%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent); animation: laneSweep 2.8s ease-in-out infinite; }
@keyframes laneSweep{ 0%{left:-30%;} 100%{left:130%;} }

/* ---------- Services accordion: spacing override ---------- */
.services{ padding: 8.5rem 3rem; }
.services-accordion{ margin-top: 3rem; }
.acc-head{ padding: 1.75rem 0; }
.acc-item.open .acc-body{ max-height: 340px; padding: 0 0 2.25rem 2.25rem; }
.acc-more{
  display: inline-block; margin-top: 0.9rem;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ice); text-decoration: none;
  border-bottom: 1px solid rgba(214,229,227,0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.acc-more:hover{ color: var(--white); border-color: var(--white); }

/* ---------- Solutions / Coverage overview + detail pages ---------- */
.overview-section{ padding: 7rem 3rem; max-width: 1220px; margin: 0 auto; }
.overview-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem; margin-top: 3.75rem; }
.overview-card{
  display: block; text-decoration: none; padding: 2.5rem;
  border-radius: 18px; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.overview-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(9,12,155,0.08); }
.overview-card-icon{ width: 30px; height: 30px; color: var(--navy); margin-bottom: 1.25rem; }
.overview-card-icon svg{ width: 30px; height: 30px; }
.overview-card-name{ font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:600; color:var(--black); margin-bottom:0.6rem; }
.overview-card-body{ font-family:'Sora',sans-serif; font-size:0.88rem; font-weight:300; color:rgba(0,0,0,0.5); line-height:1.7; margin:0; }
.overview-card-route{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(0,0,0,0.35); font-weight:500; margin-bottom:0.85rem; }
@media (max-width: 768px){ .overview-grid{ grid-template-columns: 1fr; } }

.detail-body{ padding: 7rem 3rem; max-width: 780px; margin: 0 auto; }
.detail-body p{ font-family:'Sora',sans-serif; font-size:1.02rem; font-weight:300; color:rgba(0,0,0,0.6); line-height:1.9; margin-bottom:1.75rem; }
.detail-bullets{ list-style:none; padding:0; margin: 1.5rem 0 2.5rem; display:flex; flex-direction:column; gap:0.75rem; }
.detail-bullets li{ font-family:'Sora',sans-serif; font-size:0.95rem; color:rgba(0,0,0,0.62); display:flex; align-items:center; gap:0.75rem; }
.detail-bullets li::before{ content:''; width:5px; height:5px; border-radius:50%; background: var(--navy); flex-shrink:0; }
.detail-cta{ padding-top: 1rem; text-align: center; }

.section-title{ text-wrap: balance; }

/* hero vignette overlay — used on every hero card, home and sub-pages */
.hero-vignette{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 38%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.16) 72%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0.38) 100%);
}

/* Balanced trade-lane header and solution page layouts. */
.lanes-head { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.lanes-head-card { width:100%; min-width:0; }
.lanes-head-visual { width:100%; min-width:0; }
.lane-card { min-height:190px; }
.lanes-head-card { height:190px; }
.solution-intro { max-width:1536px; gap:clamp(2rem,5vw,5rem); padding:5rem 3rem 3rem; }
.solution-intro-col { flex:1 1 50%; }
.solution-intro--stack { align-items:center; }
.solution-intro--stack .solution-intro-visual,
.solution-intro--wide-visual .solution-intro-visual { flex:1 1 50%; max-width:none; aspect-ratio:4/3; }
.solution-intro-col > .detail-body { padding:0; max-width:none; margin:0; }
.solution-cards-grid { max-width:1536px; margin:0 auto; padding:0 3rem 3rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.solution-extra { max-width:1536px; margin:0 auto; padding:0 3rem 3rem; }
body > .detail-body { max-width:1536px; padding:1.5rem 3rem 2rem; }
body > .detail-body p { max-width:90ch; }
.detail-cta { max-width:1536px; margin:0 auto; padding:1.5rem 3rem 5rem; text-align:left; }
.form-note { font-size:.8rem; line-height:1.6; color:rgba(0,0,0,.65); }
.form-note a { color:inherit; }
@media (max-width:1100px) {
 .solution-cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .lanes-head .lane-card { padding:1.5rem !important; }
}
@media (max-width:900px) {
 .lanes-head { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .lanes-head-copy { grid-column:1/-1; }
 .solution-intro { padding:3rem 1.5rem 2rem; }
 .solution-intro-col { width:100%; }
 .solution-intro--stack .solution-intro-visual { flex:auto; width:100%; min-height:0; aspect-ratio:16/10; }
 .solution-cards-grid,.solution-extra { padding:0 1.5rem 2rem; }
 body > .detail-body { padding:1rem 1.5rem; }
 .detail-cta { padding:1.5rem 1.5rem 4rem; }
}
@media (max-width:560px) {
 .lanes { padding:4rem 1.5rem; }
 .lanes-head,.solution-cards-grid { grid-template-columns:1fr; }
 .lanes-head-copy { grid-column:auto; }
 .lane-card { height:190px; }
 .lanes-head .lane-card { padding:2.5rem !important; }
}
.lane-card { height:190px; }
.contact-left,.contact-right,.form-group { min-width:0; }
.form-group input,.form-group textarea { width:100%; }
@media (max-width:900px) {
 .contact { grid-template-columns:1fr; gap:2.5rem; padding:4rem 1.5rem; }
 .contact-divider { display:none; }
}
@media (max-width:560px) { .form-row { grid-template-columns:1fr; } }

/* Domestic coverage and map share equal columns and stretch to one row height. */
.lanes-head { align-items:stretch; }
.lanes-head-copy { align-self:center; }
.lanes-head .lanes-head-card,
.lanes-head .lanes-head-visual {
  align-self:stretch; width:100%; height:auto; min-height:280px;
}
.lanes-head .lanes-head-card { display:flex; flex-direction:column; justify-content:center; }
.lanes-head .lanes-head-visual { aspect-ratio:auto; position:relative; }
.lanes-head .lanes-head-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lane-description { margin-top:1rem; font-family:'Sora',sans-serif; font-size:.85rem; font-weight:300; line-height:1.75; color:rgba(0,0,0,.6); }
#cognito-contact { width:100%; min-width:0; }
@media(max-width:560px) {
  .lanes-head .lanes-head-card, .lanes-head .lanes-head-visual { min-height:300px; }
}

.contact-details { display:flex; flex-direction:column; gap:1.55rem; }
.contact-detail-label { display:inline-block; min-width:72px; margin-right:14px; color:var(--violet); font-family:'Space Grotesk',sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; vertical-align:top; }
.cd-line br { line-height:1.8; }

/* Contact details: a calm, evenly spaced information stack. */
.contact-details { display:flex; flex-direction:column; gap:.72rem; line-height:1.45; }
.contact-details .cd-company { margin-bottom:.38rem; font-weight:500; }
.contact-details .cd-email { margin-top:.28rem; }
.contact-details .cd-email + .cd-email { margin-top:.12rem; }
@media (max-width:700px) { .contact-details { gap:.58rem; } }