/* ===================================================================
   UnitedCan Logistics — design system
   Blue + white carry the site (a deep marine navy, nodding to ocean
   freight and trustworthy corporate blues); red is used only as a
   tertiary accent, kept to a couple of small, specific spots rather
   than spread across nav, buttons, and backgrounds.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --black: #0A0A0A;
  --white: #FFFFFF;
  --blue: #0B3D66;
  --blue-dark: #072A47;
  --blue-light: #E9F0F6;
  --red: #D52B1E;
  --red-dark: #A81F16;
  --fog: #F2F2F0;
  --fog-dark: #E6E5E1;
  --grey-600: #55565B;
  --grey-400: #8B8C90;
  --grey-300: #D8D8D5;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  --wrap: 1240px;
  --header-h: 76px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 2px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.01em;
}

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 2px;
  background: var(--blue);
  display: inline-block;
}

:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background: var(--blue); color: var(--white); }
.btn-primary:hover{ background: var(--blue-dark); }
.btn-dark{ background: var(--black); color: var(--white); }
.btn-dark:hover{ background: #262626; }
.btn-light{ background: var(--white); color: var(--blue); }
.btn-light:hover{ background: var(--blue-light); }
.btn-outline{ background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover{ background: var(--blue); color: var(--white); }
.btn-outline-light{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover{ background: var(--white); color: var(--blue); }
.btn-block{ width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header{
  /* Transparent at rest so the hero footage (and the navy sub-page hero) runs
     clean to the top of the viewport. Fixed rather than sticky: sticky would
     still occupy 76px of flow and leave a white gap above the hero. The border
     stays in the box as transparent so gaining it on scroll shifts nothing. */
  background: transparent;
  border-bottom: 1px solid transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background .25s ease, border-color .25s ease;
}
/* Scoped to the video hero only. The navy sub-page hero already gives white
   text 11:1, where a scrim would just muddy a flat colour; the footage is the
   only backdrop whose exposure moves under the nav. Where :has() is missing
   the scrim is simply absent, and white still measures 4.8:1 on the footage —
   above AA, just with less headroom. */
body:has(.hero) .site-header::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 160%;
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.16) 55%, transparent 100%);
  pointer-events: none;
  transition: opacity .25s ease;
}
body:has(.hero) .site-header.is-solid::before{ opacity: 0; }
/* Solid once the hero has scrolled past, and while the mobile menu is open —
   past that point the header sits over white body content, where white-on-dark
   header text would be unreadable. Toggled in script.js. */
.site-header.is-solid{
  background: var(--white);
  border-bottom-color: var(--grey-300);
}

/* --- Light-on-dark treatment, only while the header is transparent --- */
.site-header:not(.is-solid) .logo{ color: var(--white); }
.site-header:not(.is-solid) .logo span{ color: var(--white); }
.site-header:not(.is-solid) .nav-link{ color: var(--white); }
.site-header:not(.is-solid) .nav-link:hover,
.site-header:not(.is-solid) .nav-item.current .nav-link,
.site-header:not(.is-solid) .main-nav a.current{ color: var(--white); }
.site-header:not(.is-solid) .nav-item.current .nav-link,
.site-header:not(.is-solid) .main-nav a.current{ text-decoration: underline; text-underline-offset: 6px; }
/* The hero is video, so exposure shifts under the nav as the loop plays; a
   shadow holds the text the way the hero copy below it is held. */
.site-header:not(.is-solid) .logo,
.site-header:not(.is-solid) .nav-link{ text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.site-header:not(.is-solid) .menu-toggle span{ background: var(--white); }
/* Navy-on-dark has no contrast, and a second solid white button would compete
   with the hero's own CTA — so the header CTA goes outline while transparent. */
.site-header:not(.is-solid) .header-cta .btn-primary{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.55);
}
.site-header:not(.is-solid) .header-cta .btn-primary:hover{
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}
.header-inner{
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
  /* Lifts the bar above the scrim pseudo-element, which is absolutely
     positioned and would otherwise paint over this static content. */
  position: relative;
  z-index: 1;
}
.logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--black);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.logo span{ color: var(--blue); }
.logo-light{ color: var(--white); }
.logo-light span{ color: var(--red); }

.main-nav{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  flex: 1;
}
.nav-link{
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--black);
  cursor: pointer;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover{ color: var(--blue); }
.nav-item{ position: relative; }
.nav-item.current .nav-link,
.main-nav a.current{ color: var(--blue); }
.caret{ width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .15s ease; }
.nav-item.has-dropdown:hover .caret,
.nav-item.has-dropdown:focus-within .caret{ transform: rotate(-135deg); margin-top: 3px; }

.dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--grey-300);
  box-shadow: 0 16px 32px rgba(0,0,0,.10);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a{
  display: block;
  padding: 11px 14px;
  font-size: 0.9375rem;
  border-radius: var(--radius);
}
.dropdown a:hover{ background: var(--blue-light); color: var(--blue); }

.header-cta{ display: flex; align-items: center; }
.menu-toggle{
  display: none;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.menu-toggle span{ width: 22px; height: 2px; background: var(--black); display: block; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: #14191e;
  color: var(--white);
  overflow: hidden;
  padding: calc(var(--header-h) + 96px) 0 150px;
}
.hero-media{
  position: absolute;
  inset: 0;
  background: #14191e center/cover no-repeat;
  background-image: url('video/hero-poster.jpg?v=20260911');
  pointer-events: none;
}
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  /* Neutral shade, no colour cast: the footage keeps its natural colour and is
     dimmed just enough to hold white text. Tuned against the brightest frame of
     the loop, not the poster, since exposure shifts as the shot moves. */
  background: linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.50) 12%, rgba(0,0,0,.50) 70%, rgba(0,0,0,.40) 100%);
  pointer-events: none;
}
.hero-inner{
  /* Keeps the full .wrap width so the hero text shares its left edge with the
     header logo and every section below it. The measure is capped on the
     content instead — capping the centred container here would re-centre the
     whole block and indent it away from the page's left edge. */
  position: relative;
}
.hero-inner > *{ max-width: 640px; }
.hero h1{
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero .eyebrow{ color: rgba(255,255,255,.95); margin-bottom: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.hero .eyebrow::before{ background: rgba(255,255,255,.95); }
.hero p.lede{
  font-size: 1.1875rem;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
  margin: 22px 0 34px;
  max-width: 52ch;
}
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

/* Sub-page hero (smaller, service pages) */
.subhero{
  position: relative;
  background: var(--blue);
  color: var(--white);
  padding: calc(var(--header-h) + 64px) 0 110px;
  overflow: hidden;
}
/* Same reasoning as .hero-inner: full .wrap width keeps the sub-page hero text
   on the page's left edge, with the measure capped on the content. */
.subhero .wrap{ position: relative; }
.subhero .wrap > *{ max-width: 720px; }
.subhero .eyebrow{ color: rgba(255,255,255,.85); }
.subhero .eyebrow::before{ background: rgba(255,255,255,.85); }
.subhero h1{ font-size: clamp(2.2rem, 4.6vw, 3.4rem); color: var(--white); }
.subhero p.lede{ color: rgba(255,255,255,.8); font-size: 1.0625rem; margin-top: 16px; max-width: 55ch; }
.subhero-mode{
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  color: rgba(255,255,255,.06);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ---------- CTA cards (overlap hero) ---------- */
.cta-cards{
  position: relative;
  margin-top: -96px;
  z-index: 2;
}
.cta-cards .grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--grey-300);
  border: 1px solid var(--grey-300);
}
.cta-card{
  background: var(--white);
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cta-card.filled{ background: var(--blue); color: var(--white); }
.cta-card .tag{ font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--grey-600); }
.cta-card.filled .tag{ color: rgba(255,255,255,.85); }
.cta-card h3{ font-size: 1.7rem; }
.cta-card p{ margin: 0; color: var(--grey-600); font-size: .95rem; max-width: 42ch; }
.cta-card.filled p{ color: rgba(255,255,255,.9); }
.cta-card .btn{ align-self: flex-start; margin-top: 6px; }

/* ---------- Sections ---------- */
.section{ padding: 96px 0; }
.section-fog{ background: var(--fog); }
.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(2rem, 3.6vw, 2.75rem); margin-top: 14px; max-width: 20ch; }
.section-head .lede{ color: var(--grey-600); max-width: 40ch; font-size: 1.0625rem; }

/* ---------- Services / modes grid ---------- */
.modes-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.mode-card{
  border: 1px solid var(--grey-300);
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color .15s ease;
}
.mode-card:hover{ background: var(--fog); }
.mode-thumb{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--blue-light);
}
.mode-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mode-card:hover .mode-thumb img{ transform: scale(1.05); }
.mode-card .icon{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  padding: 12px;
  background: var(--white);
  color: var(--red);
}
.mode-body{
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.mode-card .tag{ font-size: 0.8125rem; color: var(--grey-400); font-weight: 600; }
.mode-card h3{ font-size: 1.4rem; }
.mode-card p{ margin: 0; color: var(--grey-600); font-size: 0.9375rem; flex: 1; }
.mode-card .go{ font-weight: 600; font-size: .9rem; color: var(--black); }
.mode-card:hover .go{ color: var(--blue); }
/* Inline so that if a link wraps on a narrow card, the arrow follows the last
   word instead of jumping to the far edge. */
.mode-card .go svg{ display: inline-block; width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; transition: transform .15s ease; }
.mode-card:hover .go svg{ transform: translateX(3px); }

/* ---------- Route steps with imagery (origin → gateway → door) ---------- */
.route-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: route;
}
.route-item{ counter-increment: route; }
.route-thumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blue-light);
  border-bottom: 3px solid var(--blue);
  margin-bottom: 20px;
}
.route-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.route-item h3{ font-size: 1.35rem; margin-bottom: 10px; }
.route-item h3::before{
  content: counter(route, decimal-leading-zero) " / ";
  color: var(--red);
}
.route-item p{ margin: 0; color: var(--grey-600); font-size: 0.9375rem; }

/* ---------- Media split (photo beside copy) ---------- */
.media-split{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.media-figure{ background: var(--blue-light); }
.media-figure img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.media-split h2{
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  margin: 14px 0 18px;
  max-width: 19ch;
}
.media-split > div > p{ margin: 0; color: var(--grey-600); font-size: 1.0625rem; max-width: 48ch; }
.check-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 30px;
}
.check-list li{ display: flex; align-items: flex-start; gap: 12px; font-size: 0.975rem; }
.check-list svg{ width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; margin-top: 2px; }

/* ---------- Why / values ---------- */
.values-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.value-item{ border-top: 3px solid var(--blue); padding-top: 20px; }
.value-item h3{ font-size: 1.35rem; margin-bottom: 12px; }
.value-item p{ margin: 0; color: var(--grey-600); font-size: 0.9375rem; }

/* ---------- Process steps (only used where content is a real sequence) ---------- */
.steps{
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--grey-300);
}
.step{
  counter-increment: step;
  padding: 26px 22px 0;
  border-right: 1px solid var(--grey-300);
  position: relative;
}
.step:last-child{ border-right: none; }
.step::before{
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--red);
  display: block;
  margin-bottom: 10px;
}
.step h4{ font-size: 1.0625rem; font-family: var(--font-body); font-weight: 600; margin-bottom: 8px; }
.step p{ margin: 0; color: var(--grey-600); font-size: .875rem; }

/* ---------- Included list ---------- */
.included{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}
.included li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-300);
  font-size: 0.975rem;
}
.included li svg{ width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; margin-top: 3px; }

/* ---------- Cross-sell strip ---------- */
.crosssell{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--grey-300);
  border: 1px solid var(--grey-300);
}
.crosssell a{
  background: var(--white);
  padding: 24px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
.crosssell a:hover{ background: var(--blue); color: var(--white); }
.crosssell a svg{ width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Split (two column content) ---------- */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.split p{ color: var(--grey-600); font-size: 1.0625rem; }
.split p + p{ margin-top: 16px; }

/* ---------- Panel CTA band ---------- */
.band{
  background: var(--blue);
  color: var(--white);
  padding: 72px 0;
}
.band .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.band h2{ color: var(--white); font-size: clamp(1.8rem, 3.2vw, 2.4rem); max-width: 18ch; }
.band-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Band over imagery ---------- */
.band.band-media{
  position: relative;
  overflow: hidden;
  background: var(--blue-dark);
  padding: 96px 0;
}
.band-media .band-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.band-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,42,71,.93) 0%, rgba(7,42,71,.58) 100%);
}
.band-media .wrap{ position: relative; z-index: 1; }

/* ---------- Forms ---------- */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field{ display: flex; flex-direction: column; gap: 8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: 0.875rem; font-weight: 600; }
.field input, .field select, .field textarea{
  font-family: var(--font-body);
  font-size: 0.975rem;
  padding: 13px 14px;
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--blue); }
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size: 0.8125rem; color: var(--grey-600); margin-top: 4px; }

.info-card{
  background: var(--fog);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.info-row dt{ font-size: 0.8125rem; font-weight: 600; color: var(--grey-600); margin-bottom: 4px; }
.info-row dd{ margin: 0; font-size: 1.0625rem; }

/* ---------- Track page ---------- */
.track-panel{
  background: var(--white);
  border: 1px solid var(--grey-300);
  padding: 36px;
  max-width: 560px;
}
.track-panel .field{ margin-bottom: 18px; }
.track-result{
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 3px solid var(--blue);
  background: var(--fog);
  font-size: 0.9375rem;
  display: none;
}
.track-result.show{ display: block; }

/* ---------- Form send status (quote + tracking forms) ---------- */
.form-status{
  margin-top: 18px;
  padding: 14px 18px;
  border-left: 3px solid var(--blue);
  background: var(--fog);
  font-size: 0.9375rem;
}
.form-status.is-error{ border-left-color: var(--red); }
.btn:disabled{ opacity: .65; cursor: progress; }
/* Spam trap: off-screen for people, still in the form for bots to fill. */
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.track-result strong{ display: block; margin-bottom: 6px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--blue); color: rgba(255,255,255,.72); padding: 72px 0 0; }
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-brand p{ margin: 16px 0 0; font-size: 0.9375rem; max-width: 34ch; color: rgba(255,255,255,.6); }
.footer-col h4{ font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--white); margin-bottom: 16px; letter-spacing: .02em; }
.footer-col a, .footer-col span{ display: block; font-size: 0.9375rem; padding: 6px 0; color: rgba(255,255,255,.68); }
.footer-col a:hover{ color: var(--white); }
/* The primary contact channel: full white and a step up in size, so it reads
   ahead of the muted links around it without needing a separate block. */
.footer-col .footer-phone{ color: var(--white); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.footer-bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; font-size: 0.8125rem; color: rgba(255,255,255,.5); gap: 16px; flex-wrap: wrap;
}
.footer-bottom a{ color: rgba(255,255,255,.5); }
.photo-credit{ font-size: 0.75rem; color: rgba(255,255,255,.38); }
.photo-credit a{ color: rgba(255,255,255,.38); text-decoration: underline; }
.photo-credit a:hover{ color: var(--white); }
.footer-bottom a:hover{ color: var(--white); }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 980px){
  .modes-grid{ grid-template-columns: repeat(2, 1fr); }
  .values-grid{ grid-template-columns: 1fr; gap: 32px; }
  .steps{ grid-template-columns: repeat(3, 1fr); }
  .step:nth-child(3){ border-right: none; }
  .step{ padding-top: 22px; margin-bottom: 22px; }
  .split{ grid-template-columns: 1fr; gap: 36px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .crosssell{ grid-template-columns: 1fr; }
  .route-grid{ gap: 24px; }
  .media-split{ grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 760px){
  .main-nav{
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 12px var(--gutter) 24px;
    gap: 0;
    transform: translateX(100%);
    transition: transform .2s ease;
    overflow-y: auto;
  }
  .main-nav.open{ transform: translateX(0); }
  .nav-link{ width: 100%; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--grey-300); border-radius: 0; }
  .dropdown{
    position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none;
    display: none; padding: 0 0 10px 14px;
  }
  .nav-item.has-dropdown.open .dropdown{ display: block; }
  .nav-item.has-dropdown.open .caret{ transform: rotate(-135deg); margin-top: 3px; }
  .header-cta{ display: none; }
  .menu-toggle{ display: flex; }

  .cta-cards{ margin-top: -64px; }
  .cta-cards .grid-2{ grid-template-columns: 1fr; }
  .hero{ padding: calc(var(--header-h) + 64px) 0 120px; }
  .hero-video{ display: none; }
  .subhero{ padding: calc(var(--header-h) + 48px) 0 90px; }
  .modes-grid{ grid-template-columns: 1fr; }
  .mode-thumb{ aspect-ratio: 2 / 1; }
  .route-grid{ grid-template-columns: 1fr; gap: 34px; }
  .steps{ grid-template-columns: 1fr; }
  .step{ border-right: none; border-bottom: 1px solid var(--grey-300); padding-bottom: 22px; }
  .included{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
  .band .wrap{ flex-direction: column; align-items: flex-start; }
  .section{ padding: 64px 0; }
}