/* ============================================================================
   HMH Logistics: the shared site theme
   ----------------------------------------------------------------------------
   Every page on this site used to carry its own copy of this file inline, and
   35 rules were byte-identical across all six. This is that shared layer, in
   one place. Page-specific rules stay in the page's own <style> block.

   This file is the brand source of truth: colours, type and the logo motif.
   Read it before inventing either. (HMH Marketing CLAUDE.md §4.)

   Not loaded by the generated newsletter issue pages under /newsletter/, which
   carry their own stylesheet from the newsletter project's template. If a token
   changes here it has to change there too.
   ========================================================================== */

:root {
  --navy: #003DA5;
  --navy-dim: #002D7A;
  --navy-deep: #001B4D;
  --navy-lift: #7FB0FF;          /* legible navy on a dark ground */
  --charcoal: #1E2024;
  --white: #FFFFFF;
  --offwhite: #F4F6F9;
  --steel: #6B7280;
  --steel-deep: #45494F;
  --line: rgba(30,32,36,0.12);
  --line-strong: rgba(30,32,36,0.22);

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --header-h: 146px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 28px; }

/* ---------------------------------------------------------------- type --- */
h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 16px; height: 2px;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.eyebrow-light { color: rgba(255,255,255,0.82); }

.lede { font-size: 18px; line-height: 1.62; color: var(--steel-deep); }

/* the short rule that heads a card, from the logo's speed lines */
.dash { display: block; width: 26px; height: 3px; background: var(--navy); }

/* ------------------------------------------------------------- buttons --- */
.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.18s ease;
  cursor: pointer;
  background: none;
}
.btn .arw { transition: transform 0.22s var(--ease); display: inline-block; }
.btn:hover .arw { transform: translateX(5px); }

.btn-solid { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn-solid:hover { background: var(--navy-dim); border-color: var(--navy-dim); }
.header-cta .btn-solid { border-radius: 8px; }
.btn-outline-dark { color: var(--charcoal); border-color: var(--line-strong); }
.btn-outline-dark:hover { border-color: var(--charcoal); background: rgba(30,32,36,0.04); }
.btn-outline-onnavy { color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-outline-onnavy:hover { border-color: var(--white); background: rgba(255,255,255,0.10); }
.btn-white { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--offwhite); border-color: var(--offwhite); }

/* --------------------------------------------------------- speed lines --- */
.speed-lines { display: flex; flex-direction: column; gap: 4px; width: 46px; }
.speed-lines span { display: block; height: 3px; background: var(--navy); transform-origin: left center; }
.speed-lines span:nth-child(1) { width: 100%; }
.speed-lines span:nth-child(2) { width: 72%; }
.speed-lines span:nth-child(3) { width: 44%; }
.speed-lines-light span { background: rgba(255,255,255,0.9); }

/* -------------------------------------------------------------- header --- */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo-link img { height: 108px; width: auto; }
.header-cta { display: flex; align-items: center; gap: 22px; }

nav.main-nav { display: flex; gap: 30px; }
nav.main-nav a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}
nav.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: currentColor;
  transition: width 0.24s var(--ease);
}
nav.main-nav a:hover::after, nav.main-nav a.active::after { width: 100%; }

.nav-toggle {
  display: none;
  background: none; border: none;
  font-size: 22px; cursor: pointer;
  color: inherit; line-height: 1;
}

/* Over a dark hero, before scroll: a soft white fade rather than a hard bar.
   The logo keeps its own colours and its own size at every scroll position.
   Recolouring it to white was tried and looked cheap, and shrinking it on
   scroll made the header feel unsettled. The fade carries the contrast now,
   so nothing has to be done to the mark itself. */
header.at-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% + 78px);
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.92) 46%,
    rgba(255,255,255,0.62) 76%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: -1;
}
.header-inner { position: relative; z-index: 1; }

header.stuck {
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}

/* ----------------------------------------------------------- page hero --- */
/* Every inner page opens on one of these: the home hero's quieter sibling.
   The photo sits behind a heavy scrim on purpose. It is texture, not a
   showpiece, and at that opacity nothing legible survives in it. */
.page-hero {
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
}
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.38;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(0,27,77,0.94) 0%, rgba(0,27,77,0.80) 52%, rgba(0,27,77,0.58) 100%),
    linear-gradient(to top, rgba(0,27,77,0.70) 0%, rgba(0,27,77,0) 60%);
}
.page-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-top: calc(var(--header-h) + 54px);
  padding-bottom: 58px;
  color: var(--white);
}
.page-hero h1 {
  font-size: clamp(34px, 5vw, 66px);
  color: var(--white);
  margin: 18px 0 0;
  max-width: 900px;
}
.page-hero p {
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.62;
  color: rgba(255,255,255,0.84);
  max-width: 660px;
}

/* ------------------------------------------------------------ sections --- */
section { position: relative; }
.pad { padding: 104px 0; }
.pad-sm { padding: 76px 0; }
.tint { background: var(--offwhite); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 640px; }
.section-head h2 { font-size: clamp(30px, 4vw, 52px); margin: 16px 0 18px; }
.section-head p { font-size: 17px; line-height: 1.66; color: var(--steel-deep); }

/* ------------------------------------------------------ scroll reveals --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* staged entrance, for content that is already on screen at load */
.rise { opacity: 0; transform: translateY(26px); animation: rise 0.85s var(--ease) forwards; }
.rise-1 { animation-delay: 0.10s; }
.rise-2 { animation-delay: 0.22s; }
.rise-3 { animation-delay: 0.34s; }
.rise-4 { animation-delay: 0.46s; }
.rise-5 { animation-delay: 0.58s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ------------------------------------------------------------- marquee --- */
.marquee-band {
  background: var(--charcoal);
  color: var(--white);
  padding: 26px 0;
  overflow: hidden;
  border-bottom: 3px solid var(--navy);
}
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee-row { display: flex; flex-shrink: 0; min-width: 100%; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee-item {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 36px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 26px;
  white-space: nowrap;
  display: flex; align-items: center; gap: 26px;
  color: rgba(255,255,255,0.93);
}
.marquee-item::after {
  content: '';
  width: 9px; height: 9px;
  background: var(--navy);
  transform: rotate(45deg);
  display: inline-block;
  flex-shrink: 0;
}

/* --------------------------------------------------------------- forms --- */
.form-row { margin-bottom: 18px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 8px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--line-strong);
  padding: 13px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0,61,165,0.12);
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-status { font-size: 14.5px; margin-top: 14px; min-height: 22px; }

/* ---------------------------------------------------- newsletter cards --- */
/* Markup inside the ISSUES markers in news.html is generated by
   publish-to-site.mjs over in the newsletter project. Style it, do not
   restructure it: the script rewrites that block on every publish. */
.issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.issue-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 28px 34px;
  transition: background 0.28s ease;
}
.issue-card:hover { background: var(--offwhite); }
.issue-card .dash { margin-bottom: 16px; transition: width 0.3s var(--ease); }
.issue-card:hover .dash { width: 46px; }
.issue-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); margin-bottom: 10px; }
.issue-card h3 { font-size: 22px; margin-bottom: 10px; }
.issue-card h3 a { transition: color 0.2s ease; }
.issue-card:hover h3 a { color: var(--navy); }
.issue-card p { font-size: 14.5px; line-height: 1.6; color: var(--steel-deep); }

/* ----------------------------------------------------------------- cta --- */
.cta-banner { background: var(--navy); color: var(--white); overflow: hidden; position: relative; }
.cta-banner .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 30px;
  padding: 76px 28px;
  position: relative; z-index: 2;
}
.cta-banner h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,0.82); font-size: 16.5px; max-width: 460px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.cta-streaks { position: absolute; inset: 0; z-index: 1; overflow: hidden; opacity: 0.16; }
.cta-streaks i {
  position: absolute;
  height: 2px; width: 34%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 55%, rgba(255,255,255,0) 100%);
  animation: streak 5.5s linear infinite;
}
.cta-streaks i:nth-child(1) { top: 24%; animation-delay: 0s; }
.cta-streaks i:nth-child(2) { top: 48%; animation-delay: 1.5s; width: 26%; }
.cta-streaks i:nth-child(3) { top: 71%; animation-delay: 3s; width: 40%; }
@keyframes streak { from { transform: translateX(-120%); } to { transform: translateX(340%); } }

/* -------------------------------------------------------------- footer --- */
footer { background: var(--charcoal); color: #D1D5DB; padding: 64px 0 30px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 44px; padding-bottom: 38px; }
.footer-brand { max-width: 380px; }
.logo-chip { background: var(--white); padding: 12px 16px; display: inline-block; margin-bottom: 18px; }
.logo-chip img { height: 38px; width: auto; }
.footer-brand p { font-size: 14.5px; line-height: 1.66; color: #9CA3AF; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
.footer-col a, .footer-col p { display: block; font-size: 14px; margin-bottom: 9px; color: #9CA3AF; transition: color 0.2s ease; }
.footer-col a:hover { color: #6FA0E8; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-family: var(--font-mono); font-size: 12px; color: #6B7280;
}

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 859px) {
  nav.main-nav { display: none; }
  .nav-toggle { display: block; }
  header.nav-open nav.main-nav {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; left: 0; right: 0;
    background: var(--white);
    border-bottom: 2px solid var(--navy);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 8px 0;
    z-index: 9999;
  }
  header.nav-open nav.main-nav a {
    padding: 16px 28px;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
    color: var(--charcoal);
  }
  :root { --header-h: 108px; }
  .logo-link img { height: 74px; }
  /* a bigger mark leaves less room, so the quote button tightens up rather
     than the CTA group wrapping under itself */
  .header-cta { gap: 12px; }
  .header-cta .btn { padding: 12px 16px; font-size: 12px; }
  .pad { padding: 72px 0; }
  .pad-sm { padding: 56px 0; }
  .page-hero { min-height: 320px; }
  .page-hero-inner { padding-top: calc(var(--header-h) + 34px); padding-bottom: 42px; }
  .cta-banner .wrap { padding: 56px 28px; }
  .form-row.two { grid-template-columns: 1fr; gap: 0; }
  .form-row.two .form-row { margin-bottom: 18px; }
}

/* ------------------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .rise { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- focus --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}