/* ==========================================================================
   OM SHIV LOGISTICS — brand stylesheet (deferred half)
   The header, hero and first-paint rules are inlined in index.html; this file
   carries everything below the fold. It is loaded with media="print" +
   onload, so it never blocks the first paint.

   Palette: midnight navy · brand crimson · warm gold
   Typeface: Sora (display) + Inter (body), self-hosted
   No third-party CSS: every icon is an inline SVG in index.html.
   ========================================================================== */

/* --------------------------------------------------------------- icons --- */
/* Every icon is <i class="icon"><svg><use href="#i-…"></use></svg></i>.
   Sizing is inherited from the surrounding font-size. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
i.icon { display: inline-flex; align-items: center; justify-content: center; font-style: normal; line-height: 0; flex: 0 0 auto; }
i.icon > svg { width: 1em; height: 1em; display: block; }

/* ------------------------------------------------------------ services --- */
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
}
.service-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #d3dbe8; }
.service-card:hover::after { transform: scaleX(1); }

.service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(140deg, var(--ink-700), var(--ink-500));
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(15, 33, 56, 0.18);
}
.service-card:nth-child(even) .service-card__icon {
  background: linear-gradient(140deg, var(--brand), var(--brand-600));
  box-shadow: 0 8px 20px rgba(228, 0, 43, 0.22);
}
.service-card h3 { margin-bottom: 8px; font-size: 1.02rem; }
.service-card > p { color: var(--slate); font-size: 0.9rem; margin-bottom: 16px; line-height: 1.6; }
.service-card ul { margin-top: auto; display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.service-card li {
  position: relative;
  padding-left: 22px;
  font-size: 0.84rem;
  color: #3b4a5e;
  font-weight: 500;
  line-height: 1.5;
}
/* CSS-drawn tick — replaces the icon-font glyph that used to be here. */
.service-card li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.42em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* --------------------------------------------------------------- fleet --- */
/* This block used to sit inside a dark band, so the cards were tinted glass
   (rgba white fill, #a9b8cc body copy, --gold-soft chips) and leaned on the
   dark backdrop for all of their definition. The section is now light, where
   that arrangement collapsed: the translucent fill disappeared into the white,
   the body copy measured roughly 2:1 against it, and the pale gold chips were
   barely visible on their own pale tint. The cards are now solid white with a
   real border and shadow, and every text colour is chosen for a light
   background so contrast holds without the dark backdrop. */
.fleet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.fleet-card {
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: var(--radius);
  padding: var(--card-pad) 22px;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.fleet-card:hover { border-color: #c3cfe0; box-shadow: var(--shadow); transform: translateY(-4px); }
.fleet-card > i { font-size: 1.5rem; color: var(--brand); }
.fleet-card h3 { margin: 12px 0 7px; font-size: 0.98rem; }
.fleet-card p { font-size: 0.86rem; color: var(--slate); margin: 0 0 16px; line-height: 1.6; }
/* Ownership label: "Owned Fleet" vs "Available Through Our Network". Sits at the
   top of the card and must be readable at a glance, so the text is dark slate on
   a light chip rather than the previous pale-on-pale pairing. */
.fleet-card__tag {
  align-self: flex-start;
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #33445c;
  background: var(--mist);
  border: 1px solid #d5dde9;
}
.fleet-card__tag--owned { color: #8a1414; background: var(--brand-tint); border-color: rgba(228, 0, 43, 0.28); }
/* Owned cards carry the brand edge, so the distinction survives even in
   greyscale or for a colour-blind reader. */
.fleet-card--owned { border-top: 3px solid var(--brand); }
.fleet-card .cap {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a5a0e;
  background: #fdf3dc;
  border: 1px solid #e6cd90;
  padding: 6px 12px;
  border-radius: 999px;
}

/* ------------------------------------------------------------ segments --- */
.segment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.segment-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 22px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  box-shadow: var(--shadow-xs);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.segment-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.segment-card__icon {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--mist);
  color: var(--ink-700);
  font-size: 1.05rem;
}
.segment-card h3 { font-size: 0.94rem; margin-bottom: 5px; }
.segment-card p { font-size: 0.84rem; color: var(--slate); margin: 0; line-height: 1.55; }

/* --------------------------------------------------------------- steps --- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 24px; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(228, 0, 43, 0.42);
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}
.step h3 { font-size: 0.98rem; margin-bottom: 6px; }
.step p { font-size: 0.86rem; color: var(--slate); margin: 0; line-height: 1.6; }
.step::after {
  content: "";
  position: absolute;
  top: 38px;
  right: -14px;
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.step:last-child::after { display: none; }

/* ----------------------------------------------------------- two column -- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
/* The two paired columns only ever held a heading plus a list of short points,
   so they must not be forced side by side once each would be narrower than a
   comfortable measure. Stacking here is what stops the cramped "squeezed into
   one phone screen" layout. */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: 34px; }
}
.tick-list { display: grid; gap: 14px; }
.tick-list li { position: relative; padding-left: 30px; font-size: 0.92rem; color: #33445c; line-height: 1.6; }
/* CSS-drawn tick — replaces the icon-font glyph that used to be here. */
.tick-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* ----------------------------------------------------------- dark panel -- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.panel--dark {
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(228, 0, 43, 0.2), transparent 60%),
    linear-gradient(150deg, var(--ink-900), var(--ink-700));
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: var(--shadow);
}
.board-list { display: grid; gap: 12px; margin-top: 16px; }
/* minmax(0, 1fr) and a wrapping middle cell keep a long route name (e.g.
   "Gandhidham → Ahmedabad") from forcing the row wider than its column, which
   previously pushed the whole document past the viewport on a phone. */
.board-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  animation: fadeUp 0.42s ease;
}
.board-row > i { color: var(--brand-400); }
.board-row > span { min-width: 0; }
.board-row strong { display: block; font-size: 0.85rem; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.board-row small { color: #a9b8cc; font-size: 0.74rem; overflow-wrap: anywhere; }
.board-row .time { color: #a9b8cc; font-size: 0.72rem; white-space: nowrap; }

/* --------------------------------------------------------------- pills --- */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink-700);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
}
.pill i { color: var(--brand); }

/* ---------------------------------------------------------------- why ---- */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.why-card {
  display: flex;
  gap: 16px;
  padding: 24px 22px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
  box-shadow: var(--shadow-xs);
}
.why-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); border-color: #d3dbe8; }
.why-card__icon {
  flex: 0 0 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--mist);
  color: var(--ink-700);
  font-size: 1.02rem;
}
.why-card h3 { font-size: 0.94rem; margin-bottom: 4px; }
.why-card p { font-size: 0.85rem; color: var(--slate); margin: 0; line-height: 1.55; }

/* ---------------------------------------------------------------- faq ----- */
.faq { max-width: 840px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq__item[data-open="true"] { border-color: rgba(228, 0, 43, 0.4); box-shadow: var(--shadow-sm); }
.faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 21px 24px;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-900);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 44px;
}
.faq__q i { color: var(--brand); transition: transform 0.24s ease; flex: 0 0 auto; }
.faq__item[data-open="true"] .faq__q i { transform: rotate(45deg); }
.faq__a { padding: 0 24px 22px; color: var(--slate); font-size: 0.9rem; line-height: 1.7; }

/* ------------------------------------------------------------- contact ---- */
.contact-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }

.contact-group {
  --accent: var(--brand);
  --accent-soft: rgba(228, 0, 43, 0.14);
  position: relative;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 24px 20px;
  overflow: hidden;
  transition: background 0.24s ease, border-color 0.24s ease;
  display: flex;
  flex-direction: column;
}
.contact-group::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.contact-group:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); }

.contact-group[data-accent="navy"] { --accent: #4d7fb0; --accent-soft: rgba(77, 127, 176, 0.16); }
.contact-group[data-accent="gold"] { --accent: var(--gold); --accent-soft: rgba(233, 185, 73, 0.15); }
.contact-group[data-accent="slate"] { --accent: #8697ac; --accent-soft: rgba(134, 151, 172, 0.15); }

.contact-group__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.contact-group__icon {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1rem;
  border: 1px solid var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.contact-group__head h3 { font-size: 0.98rem; margin: 0 0 4px; color: #fff; letter-spacing: -0.01em; }
/* Reserve two lines so every header block is the same height, keeping the item
   dividers of the two cards in a row on the same horizontal rhythm. */
.contact-group__note { color: #b3c1d4; font-size: 0.8rem; margin: 0; line-height: 1.5; min-height: 3em; }

.contact-items { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 0; }
.contact-item {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}
.contact-item:first-child { border-top: 0; padding-top: 4px; }

.contact-item__label {
  font-family: var(--font-display);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a9b8cc;
}
.contact-item__value {
  font-size: 0.96rem;
  font-weight: 500;
  color: #fff;
  word-break: break-word;
  line-height: 1.45;
}
a.contact-item__value { transition: color 0.16s ease; width: fit-content; min-height: 24px; }
a.contact-item__value:hover { color: var(--gold-soft); }
.contact-item__value--plain { cursor: default; }
.contact-item__extra { display: block; color: #cfdae8; font-size: 0.88rem; margin-top: 2px; }
.contact-item__note { font-size: 0.75rem; color: #a9b8cc; line-height: 1.45; }

/* Prominent, obviously tappable Google Maps route for the office card. */
.contact-item__maps {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 14px;
  min-height: 44px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-soft);
  background: rgba(233, 185, 73, 0.12);
  border: 1px solid rgba(233, 185, 73, 0.4);
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
  width: fit-content;
}
.contact-item__maps:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-950); }
.contact-item__maps i.icon:first-of-type { font-size: 0.95rem; }
.contact-item__maps i.icon:last-of-type { font-size: 0.68rem; opacity: 0.8; }

.contact-cta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(228, 0, 43, 0.16), rgba(233, 185, 73, 0.08));
  border: 1px solid rgba(228, 0, 43, 0.3);
}
.contact-cta h3 { margin: 0 0 4px; font-size: 1.05rem; }
.contact-cta p { margin: 0; color: #cbd6e5; font-size: 0.88rem; }
.contact-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------ map embed --- */
.map-embed { margin-top: 30px; }
.map-embed__title { font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; color: #cbd6e5; margin-bottom: 14px; }
.map-embed__frame {
  display: block;
  width: 100%;
  height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: var(--ink-850);
  filter: grayscale(0.2) contrast(1.05);
}
.map-embed__plus { margin: 12px 0 0; font-size: 0.82rem; color: #cfdae8; letter-spacing: 0.02em; }
.map-embed__plus strong { color: var(--gold-soft); font-weight: 700; letter-spacing: 0.06em; }
.map-embed__fallback { margin: 6px 0 0; font-size: 0.8rem; color: #b3c1d4; }
.map-embed__fallback a { color: var(--gold-soft); font-weight: 600; text-decoration: underline; }
.map-embed__fallback a:hover { color: #fff; }

/* --------------------------------------------------------------- footer -- */
.footer-brand p { margin: 16px 0 0; max-width: 34ch; line-height: 1.65; }
.footer-tagline {
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin-top: 14px;
}
.footer-contact address { font-style: normal; }
.footer-nap { font-style: normal; color: var(--slate-light); line-height: 1.6; }
.footer-maps { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-soft); font-weight: 600; min-height: 32px; }
.footer-maps:hover { color: #fff; }
.footer-bottom .footer-motto { color: #c3d0e0; font-weight: 600; letter-spacing: 0.06em; }
.footer-bottom a { color: var(--gold-soft); text-decoration: underline; }

/* -------------------------------------------------------------- privacy -- */
.privacy {
  margin-top: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  padding: 4px 20px;
}
.privacy summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gold-soft);
  border-bottom: 2px solid var(--gold-soft);
  transform: rotate(45deg);
  transition: transform 0.24s ease;
  flex: 0 0 auto;
}
.privacy[open] summary::after { transform: rotate(-135deg); }
.privacy__body { padding: 4px 0 18px; max-width: 78ch; }
.privacy__body h4 { color: #fff; font-size: 0.8rem; letter-spacing: 0.06em; margin: 18px 0 6px; text-transform: uppercase; }
.privacy__body p { color: #b3c1d4; font-size: 0.84rem; line-height: 1.7; margin: 0 0 10px; }
.privacy__body a { color: var(--gold-soft); text-decoration: underline; }
.privacy__body a:hover { color: #fff; }

/* -------------------------------------------------------------- founder -- */
.founder {
  background:
    radial-gradient(820px 380px at 8% 0%, rgba(233, 185, 73, 0.1), transparent 62%),
    radial-gradient(760px 420px at 96% 100%, rgba(228, 0, 43, 0.08), transparent 64%),
    var(--paper);
}
.founder__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 52px; align-items: center; }
.founder__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 4;
  background: var(--ink-900);
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* Gold hairline frame, offset — reads as premium without shouting. */
.founder__frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(233, 185, 73, 0.55);
  border-radius: var(--radius-lg);
  margin: 14px;
  z-index: 2;
  pointer-events: none;
}
.founder__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 44px 22px 18px;
  background: linear-gradient(0deg, rgba(5, 13, 24, 0.94) 12%, rgba(5, 13, 24, 0.72) 55%, rgba(5, 13, 24, 0));
  color: #fff;
}
.founder__badge strong { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
.founder__badge span { display: block; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); margin-top: 3px; }

.founder__copy h2 { margin-bottom: 6px; }
.founder__role {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}
.founder__points { display: grid; gap: 12px; margin: 24px 0 28px; }
.founder__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; color: #334155; }
.founder__points i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 0.85rem;
}
.founder__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------ stat band -- */
.stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; text-align: center; }
.stat-band strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-band span { font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; color: #a9b8cc; font-weight: 500; }

/* ------------------------------------------------------------ a11y bits -- */
/* Comfortable touch targets on the desktop nav and every icon-only control. */
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.header-call { min-height: 44px; }
.fab, .nav-toggle { min-width: 44px; min-height: 44px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer li > a { display: inline-flex; align-items: center; min-height: 34px; }
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   REPOSITIONING COMPONENTS (2026-10-11)
   The markup added for the "Integrated Hybrid Logistics Solutions Provider"
   positioning. Built on the shared --space-* / --card-* tokens so the new
   sections keep the same rhythm as the rest of the page. Scoped selectors,
   no !important.
   ========================================================================== */

/* A deep link lands clear of the sticky header instead of underneath it. */
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ------------------------------------------------------------ hero tweak -- */
/* Sits directly above the headline, so it reads as a label rather than a rival. */
.hero__eyebrow { margin-bottom: 18px; }
/* The second headline line is markedly longer than the first; trimming it a
   little keeps both lines inside the column instead of wrapping mid-phrase. */
.hero h1 .accent { font-size: 0.82em; }

/* Seven fleet cards: auto-fit avoids the orphan cell a 4-column track leaves,
   while the 230px floor keeps each card wide enough for its label. Doubled up
   in the selector so it outranks the shared .fleet-grid media queries below,
   which would otherwise force this grid back to a rigid 2 columns at 1080px. */
.fleet-grid.fleet-grid--two { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 560px) { .fleet-grid.fleet-grid--two { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- hybrid model pillars */.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--card-gap); }
.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 30px var(--card-pad) 26px;
  transition: background 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}
.pillar-card:hover { background: rgba(255, 255, 255, 0.085); border-color: rgba(233, 185, 73, 0.4); transform: translateY(-4px); }
/* Solid tint rather than -webkit-text-stroke: a transparent fill would vanish
   entirely in any engine that ignores the stroke property. */
.pillar-card__step {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(233, 185, 73, 0.7);
}
.pillar-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(228, 0, 43, 0.16);
  color: var(--brand-400);
  font-size: 1.1rem;
  margin: 16px 0;
}
.pillar-card h3 { color: #fff; font-size: 1.02rem; margin-bottom: 8px; }
.pillar-card p { color: #b9c6d8; font-size: 0.88rem; margin: 0; line-height: 1.65; }

/* Disclosure strips. The hybrid note sits on the dark model section and the
   fleet note on the light fleet section, so each is coloured for its own
   backdrop — the pale-on-pale pairing that made the fleet cards unreadable is
   exactly what this avoids. */
.hybrid-note, .fleet-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 32px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
}
.hybrid-note i, .fleet-note i { flex: 0 0 auto; margin-top: 2px; font-size: 1.05rem; }
.hybrid-note { color: #f2e4c6; background: rgba(233, 185, 73, 0.1); border: 1px solid rgba(233, 185, 73, 0.3); }
.hybrid-note i { color: var(--gold-soft); }
.fleet-note { color: #33445c; background: var(--mist); border: 1px solid var(--line); }
.fleet-note i { color: var(--brand); }

/* ------------------------------------------------------------- about OSL -- */
.two-col--about { align-items: start; gap: 48px; }
.about__aim {
  border-left: 3px solid var(--brand);
  padding-left: 16px;
  margin: 22px 0 26px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-800);
}
.about-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.about-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.about-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: #d3dbe8; }
.about-card > i {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--mist);
  color: var(--brand);
  font-size: 1rem;
}
.about-card h3 { font-size: 0.92rem; margin-bottom: 4px; }
.about-card p { font-size: 0.83rem; color: var(--slate); margin: 0; line-height: 1.55; }

/* Responsive layers for the new components only, so the breakpoints above stay
   exactly as they were. */
@media (max-width: 900px) {
  .two-col--about { gap: 34px; }
}
@media (max-width: 560px) {
  .about-cards { grid-template-columns: 1fr; }
  .hybrid-note, .fleet-note { padding: 16px 18px; }
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 960px) {
  /* Stack the classified contact grid only once a pair would get cramped. */
  .contact-groups { grid-template-columns: 1fr; }
}

/* On the narrowest phones the route clock is the first thing that can go: the
   lane name and load detail carry the meaning, and dropping it keeps every row
   inside the panel without shrinking the type. */
@media (max-width: 480px) {
  .board-row { grid-template-columns: auto minmax(0, 1fr); }
  .board-row .time { display: none; }
}

@media (max-width: 1080px) {
  .service-grid, .fleet-grid, .steps, .why-grid, .segment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::after { display: none; }
  .founder__grid { grid-template-columns: 1fr; gap: 34px; }
  .founder__photo { max-width: 420px; margin: 0 auto; width: 100%; }
}

@media (max-width: 680px) {
  .panel { padding: 24px 20px; }
  .service-card { padding: 24px 20px; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cta { padding: 22px; }
  .founder__points li { font-size: 0.88rem; }
  .founder__actions .btn { width: 100%; justify-content: center; }
  .map-embed__frame { height: 240px; }
  .privacy { padding: 4px 16px; }
}

@media (max-width: 520px) {
  .service-grid, .fleet-grid, .steps, .why-grid, .segment-grid { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .float-actions, .mobile-bar, .marquee, .map-embed { display: none; }
  .privacy { border-color: #ccc; }
}