/* ==========================================================================
   Second Shift · home
   ========================================================================== */

/* ---------- Hero: a machine's second chapter --------------------------- */
.hero { padding-top: clamp(1.5rem, 3vw, 3rem); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.hero-copy { grid-column: 1 / span 6; padding-block: 2rem 2.5rem; padding-inline-end: clamp(1rem, 3vw, 3rem); }
.hero-title { font-size: clamp(3.2rem, 5.5vw, 5.25rem); font-stretch: 103%; line-height: 1.02; letter-spacing: -0.04em; }
.hero-title .line { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-title .line > span { display: inline-block; }
.hero-before { font-size: .67em; font-weight: 430; color: var(--muted); line-height: 1.08; }
.hero-before + .hero-after { margin-top: .38em; }
.hero-after { font-weight: 580; }
.cycle { display: inline-grid; overflow: clip; color: var(--green-600); vertical-align: bottom; }
.cycle-word { grid-area: 1 / 1; translate: 0 108%; transition: translate 900ms var(--ease-expo); }
.cycle-word.is-active { translate: 0 0; }
.cycle-word.is-leaving { translate: 0 -108%; }
.hero-lead { margin-top: 1.8rem; max-width: 47ch; font-size: 1rem; line-height: 1.7; color: var(--muted); }
.hero-search {
  display: flex; align-items: center; gap: .7rem;
  margin-top: 2rem; padding: .375rem .375rem .375rem 1rem;
  border: 1px solid var(--field); border-radius: var(--r-1); background: var(--white);
  transition: border-color var(--d-hover), box-shadow var(--d-hover);
}
.hero-search:focus-within { border-color: var(--ink); box-shadow: 0 3px 12px -5px #183b3040; }
.hero-search > .i { color: var(--muted); }
.hero-search input { flex: 1; min-width: 0; min-height: 2.75rem; border: 0; outline: 0; background: transparent; font-size: .9375rem; }
.hero-search input::placeholder { color: var(--muted); opacity: 1; }
.hero-search input::-webkit-search-cancel-button { display: none; }
.hero-search .btn { padding-inline: 1rem; font-size: .875rem; }
.hero-quick { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; font-size: .75rem; }
.hero-quick a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .3em; transition: color var(--d-hover), text-decoration-color var(--d-hover); }
.hero-quick a:hover { color: var(--ink); text-decoration-color: currentColor; }
.hero-standard { display: inline-flex; gap: .6rem; align-items: center; margin-top: 2.1rem; font-size: .8125rem; color: var(--muted); }
.hero-media { grid-column: 7 / -1; align-self: stretch; position: relative; display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.hero-photo { position: relative; min-height: clamp(32rem, 46vw, 41rem); overflow: hidden; background: var(--mist); border-radius: 3px 3px 0 0; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-tag { --tag-rot: -7deg; --hole-x: 19px; --hole-r: 6px; position: absolute; top: 2.5rem; inset-inline-start: -1.2rem; z-index: 3; }
.hero-tag .tag { padding: .8rem 1rem .8rem 2.6rem; gap: .85rem; -webkit-mask: radial-gradient(circle at 19px 50%, transparent 6px, #000 6.5px); mask: radial-gradient(circle at 19px 50%, transparent 6px, #000 6.5px); }
.hero-tag .tag-grade { font-size: 2.4rem; }
.hero-tag .tag-id { font-size: 1rem; }
.hero-tag .tag-meta { font-size: .75rem; }
.hero-tag::after { height: 3.25rem; rotate: 22deg; }
.hero-cap { position: relative; display: grid; gap: .25rem; padding: 1.2rem 4.5rem 1.2rem 1.5rem; background: var(--ink); color: var(--on-dark); font-size: .9375rem; }
.hero-cap .plate { color: var(--on-dark-muted); font-size: .75rem; }
.hero-unit-link { position: absolute; inset-inline-end: 1.2rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--rule-dark); border-radius: 50%; transition: background-color var(--d-hover), color var(--d-hover); }
.hero-unit-link .i { rotate: -45deg; transition: rotate var(--d-state) var(--ease-expo); }
.hero-unit-link:hover { background: var(--on-dark); color: var(--ink); }
.hero-unit-link:hover .i { rotate: 0deg; }
.hero-unit-link:focus-visible { outline-color: var(--on-dark); }
.departure { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; margin-top: 2.5rem; padding-block: 1.4rem; border-block: 1px solid var(--rule); font-size: .8125rem; }
.departure strong { font-weight: 650; margin-inline-end: .7rem; }
.departure a { margin-inline-start: auto; font-weight: 600; text-decoration: none; }
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-title { font-size: 5.4vw; }
  .hero-copy { padding-inline-end: .6rem; }
  .hero-tag { inset-inline-start: .5rem; }
}
@media (max-width: 899px) {
  .hero-grid { row-gap: 2rem; }
  .hero-copy, .hero-media { grid-column: 1 / -1; }
  .hero-copy { padding: .5rem 0 0; }
  .hero-title { font-size: clamp(3.25rem, 8.5vw, 5.25rem); }
  .hero-lead { max-width: 55ch; }
  .hero-search { max-width: 38rem; }
  .hero-standard { margin-top: 1.5rem; }
  .hero-photo { min-height: 0; aspect-ratio: 5 / 4; }
  .hero-tag { inset-inline-start: .8rem; top: 2.25rem; }
  .hero-media { margin-inline: 0; }
  .departure { margin-top: 1.75rem; gap: .6rem 1rem; }
  .departure a { margin-inline-start: 0; }
}
@media (max-width: 599px) {
  .hero-title { font-size: clamp(2.7rem, 9.7vw, 3.6rem); }
  .hero-before { font-size: .74em; }
  .hero-lead { font-size: .9375rem; margin-top: 1.5rem; }
  .hero-search { margin-top: 1.5rem; gap: .45rem; padding-inline-start: .7rem; }
  .hero-search .btn { padding-inline: .8rem; }
  .hero-search input { font-size: .875rem; }
  .hero-quick { column-gap: .8rem; }
  .hero-standard { font-size: .75rem; }
  .hero-photo { aspect-ratio: 1; }
  .hero-tag .tag { padding: .65rem .8rem .65rem 2.4rem; }
  .hero-tag .tag-grade { font-size: 2rem; }
  .hero-cap { padding-inline-start: 1rem; font-size: .875rem; }
  .departure > .led { display: none; }
  .departure p:first-of-type { flex-basis: 100%; }
  .departure p:nth-of-type(3) { margin-inline-start: auto; }
  .departure a { flex-basis: 100%; margin-top: .25rem; }
}

/* ---------- Life bar: first shift / second shift ---------------------- */
.life-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-6) var(--gutter);
}
.life-title { grid-column: 1 / span 7; }
.life-text { grid-column: 9 / -1; align-self: end; }
.lifebar { grid-column: 1 / -1; margin-top: var(--s-8); }
@media (max-width: 899px) {
  .life-title, .life-text { grid-column: 1 / -1; }
  .lifebar { margin-top: var(--s-6); }
}

/* ---------- Departments index ----------------------------------------- */
.dept-list { border-top: 1px solid var(--ink); }
.dept {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 7.5rem 9.5rem 1.5rem;
  align-items: center;
  gap: var(--gutter);
  padding-block: clamp(1rem, 0.6rem + 1.1vw, 1.6rem);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  isolation: isolate;
}
.dept::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--s-4));
  z-index: -1;
  background: var(--ghost);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-state) var(--ease-out);
}
.dept-name {
  font-size: clamp(1.75rem, 0.9rem + 2.7vw, 3.25rem);
  font-stretch: 112%;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: translate var(--d-state) var(--ease-out), color var(--d-hover);
}
.dept-eg { color: var(--muted); }
.dept-count, .dept-from { text-align: end; font-size: var(--fs-16); }
.dept-count .num { font-weight: 700; }
.dept-from { color: var(--muted); }
.dept-thumb { display: none; }
.dept-arrow { justify-self: end; transition: translate var(--d-state) var(--ease-out); }

@media (hover: hover) {
  .dept:hover::before, .dept:focus-visible::before { clip-path: inset(0 0 0 0); }
  .dept:hover .dept-name { translate: 0.5rem 0; }
  .dept:hover .dept-arrow { translate: 0.35rem 0; }
  .dept-list:has(.dept:hover) .dept:not(:hover) .dept-name { color: var(--muted); }
}

.dept-follow {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-sticky);
  width: clamp(13rem, 17vw, 19rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  background: var(--mist);
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  transition: opacity 260ms var(--ease-out), clip-path 620ms var(--ease-expo);
  will-change: transform;
}
.dept-follow.is-on { opacity: 1; clip-path: inset(0 0 0 0); }
.dept-follow img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .dept-follow { display: none; } }
@media (prefers-reduced-motion: reduce) { .dept-follow { clip-path: none; transition: opacity 200ms; } }

@media (min-width: 900px) and (max-width: 1199px) {
  .dept { grid-template-columns: minmax(0, 1fr) 7rem 9rem 1.5rem; }
  .dept-eg { display: none; }
}
@media (max-width: 899px) {
  .dept {
    grid-template-columns: minmax(0, 1fr) 4.5rem;
    grid-template-areas:
      "name  thumb"
      "eg    thumb"
      "meta  thumb";
    column-gap: var(--s-4);
    row-gap: 0.3rem;
  }
  .dept-name { grid-area: name; }
  .dept-eg { grid-area: eg; font-size: var(--fs-14); }
  .dept-count, .dept-from { grid-area: meta; text-align: start; font-size: var(--fs-14); }
  .dept-from { justify-self: end; }
  .dept-count { justify-self: start; }
  .dept-thumb { display: block; grid-area: thumb; width: 4.5rem; height: 4.5rem; object-fit: cover; align-self: center; }
  .dept-arrow { display: none; }
}
/* ---------- Process (sticky visual + steps) --------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.process-visual { grid-column: 1 / span 6; }
.process-frame {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  height: min(calc(100svh - var(--header-h) - 3rem), 44rem);
  overflow: hidden;
  background: var(--mist);
}
.process-frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  clip-path: inset(100% 0 0 0);
  scale: 1.08;
  /* the outgoing image snaps away only after the incoming one has covered it */
  transition: clip-path 0s linear 950ms, scale 0s linear 950ms;
}
.process-frame img.is-active {
  z-index: 1;
  clip-path: inset(0 0 0 0);
  scale: 1;
  transition: clip-path 950ms var(--ease-expo), scale 1600ms var(--ease-expo);
}
.process-counter {
  position: absolute;
  inset-inline-start: 0; bottom: 0;
  z-index: 2;
  padding: 0.55rem 0.9rem;
  background: var(--white);
  font-size: var(--fs-14);
}
.process-counter span { font-weight: 750; }

.process-steps {
  grid-column: 8 / -1;
  position: relative;
  padding: 0;
  list-style: none;
}
.process-steps::before,
.process-steps::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 1.05rem;
  width: 1px;
  background: var(--rule);
}
.process-steps::after {
  background: var(--ink);
  transform-origin: 50% 0;
  scale: 1 var(--progress, 0);
  transition: scale 300ms linear;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: clamp(2.5rem, 12svh, 7.5rem);
}
.step:first-child { padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step-no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--white);
  font-size: var(--fs-12);
  font-weight: 700;
  transition: background-color var(--d-state), color var(--d-state), border-color var(--d-state);
}
.step.is-active .step-no { background: var(--ink); border-color: var(--ink); color: var(--white); }
.step-body { display: grid; gap: var(--s-3); max-width: 34rem; }
.step-body p { transition: color var(--d-state); }
.js .step:not(.is-active) .step-body > p { color: var(--muted); }
.step-proof {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s-2);
  font-size: var(--fs-14);
  font-weight: 600;
}
.step-proof .i { color: var(--green-600); }
.step-img { display: none; }

@media (max-width: 899px) {
  .process-visual { display: none; }
  .process-steps { grid-column: 1 / -1; }
  .step { padding-block: var(--s-6); }
  .step-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: var(--s-3); }
  .js .step:not(.is-active) .step-body > p { color: var(--ink); }
}

/* ---------- Grading standard ------------------------------------------ */
.table-scroll { overflow-x: auto; margin-inline: calc(-1 * var(--s-2)); padding-inline: var(--s-2); }
.grades { width: 100%; min-width: 54rem; text-align: start; }
.grades th, .grades td {
  padding: 1.35rem 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  text-align: start;
}
.grades th:first-child, .grades td:first-child { padding-inline-start: 0; }
.grades thead th {
  padding-top: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--muted);
  border-bottom-color: var(--ink);
}
.grades tbody th { font-weight: 400; white-space: nowrap; }
.grades tbody tr { transition: background-color var(--d-hover); }
.grades tbody tr:hover { background: var(--white); }
.grade-chip {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 2.9rem; height: 2.9rem;
  margin-inline-end: 0.9rem;
  border-radius: var(--r-2);
  background: var(--tag);
  font-size: 1.6rem;
  font-stretch: 118%;
  font-weight: 820;
  letter-spacing: -0.04em;
}
.grade-name { display: inline-grid; vertical-align: middle; font-weight: 680; line-height: 1.3; }
.grade-name .muted { font-weight: 400; font-size: var(--fs-14); }

/* Small screens: each grade becomes a labelled block instead of a wide table */
@media (max-width: 699px) {
  .table-scroll { overflow: visible; margin: 0; padding: 0; }
  .grades, .grades tbody, .grades tr, .grades th, .grades td { display: block; }
  .grades { min-width: 0; }
  .grades thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .grades tbody { border-top: 1px solid var(--ink); }
  .grades tr { padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
  .grades th, .grades td { padding: 0; border: 0; }
  .grades tbody th { margin-bottom: 0.9rem; }
  .grades td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--s-3);
    padding-block: 0.3rem;
    font-size: var(--fs-14);
  }
  .grades td::before { content: attr(data-label); color: var(--muted); }
  .grades tbody tr:hover { background: none; }
}

.includes {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: var(--s-4) var(--gutter);
  align-items: baseline;
  margin-top: var(--s-7);
}
.includes ul { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; }
.includes li { display: flex; align-items: center; gap: 0.5rem; }
.includes .i { color: var(--green-600); }
@media (max-width: 899px) { .includes { grid-template-columns: 1fr; } }
/* ---------- Shipping routes (drenched) -------------------------------- */
.ship-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5) var(--gutter);
  margin-bottom: var(--s-8);
}
.ship-head h2 { grid-column: 1 / span 7; }
.ship-head .prose { grid-column: 9 / -1; align-self: end; }
@media (max-width: 899px) { .ship-head h2, .ship-head .prose { grid-column: 1 / -1; } }

.routes { --cols: 6.5rem minmax(0, 1fr) minmax(11rem, 15rem) 6rem; }
.routes-axis, .route {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gutter);
  align-items: center;
}
.routes-axis { height: 1.75rem; margin-bottom: 0.25rem; font-size: var(--fs-12); color: var(--on-dark-muted); }
.axis-days { text-align: end; }
.axis-track { position: relative; height: 100%; }
.axis-track > span {
  position: absolute;
  top: 50%;
  left: calc(var(--d) * 2.5%);
  translate: -50% -50%;
  white-space: nowrap;
}
.axis-track > span:first-child { translate: 0 -50%; }
.route-list { padding: 0; list-style: none; border-top: 1px solid var(--rule-dark); }
.route {
  position: relative;
  min-height: 3.25rem;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--rule-dark);
  transition: background-color var(--d-hover);
}
.route::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--s-3));
  z-index: -1;
}
.route-origin { font-size: var(--fs-14); color: var(--on-dark-muted); }
.route-line { position: relative; height: 1.25rem; }
.route-line::before {                     /* the 40-day track */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--rule-dark);
}
.route-bar {
  position: absolute;
  left: 0; top: 50%;
  width: calc(var(--max) * 2.5%);
  height: 2px;
  translate: 0 -50%;
  transform-origin: 0 50%;
  background:
    linear-gradient(var(--green-300), var(--green-300)) 0 0 / calc(var(--min) / var(--max) * 100%) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--green-300) 0 4px, transparent 4px 8px);
}
.route-bar::before, .route-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  translate: -50% -50%;
}
.route-bar::before { left: 0; background: var(--green-900); box-shadow: inset 0 0 0 2px var(--green-300); }
.route-bar::after  { left: 100%; background: var(--green-300); }
.route-dest { font-size: var(--fs-16); color: var(--on-dark-muted); }
.route-dest strong { color: var(--on-dark); font-weight: 650; margin-inline-end: 0.3rem; }
.route-days { text-align: end; font-size: var(--fs-16); font-weight: 650; }
@media (hover: hover) {
  .route:hover { background: var(--green-800); }
  .route:hover .route-bar { height: 3px; }
}
.routes-note { margin-top: var(--s-4); font-size: var(--fs-14); max-width: 70ch; }

@media (max-width: 699px) {
  .routes { --cols: minmax(0, 1fr) auto; }
  .route {
    grid-template-areas: "dest days" "line line" "origin origin";
    row-gap: 0.15rem;
    padding-block: 0.8rem;
  }
  .route-dest { grid-area: dest; }
  .route-days { grid-area: days; }
  .route-line { grid-area: line; }
  .route-origin { grid-area: origin; font-size: var(--fs-12); }
  .route-origin::before { content: "from "; }
  .routes-axis { display: none; }
}

.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-6) var(--gutter);
  margin-top: var(--s-9);
}
.terms div { border-top: 1px solid var(--on-dark-muted); padding-top: var(--s-4); }
.terms dt {
  font-size: var(--fs-40);
  font-stretch: 116%;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--green-300);
}
.terms dd { margin-top: var(--s-3); color: var(--on-dark-muted); max-width: 30ch; }

/* ---------- Voice ------------------------------------------------------ */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-7) var(--gutter);
  align-items: end;
}
.voice-fig { grid-column: 1 / span 7; }
.voice-media { grid-column: 9 / -1; }
.voice-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.voice-quote p {
  font-size: clamp(1.75rem, 0.95rem + 2.9vw, 3.25rem);
  font-stretch: 104%;
  font-weight: 470;
  letter-spacing: -0.025em;
  line-height: 1.14;
  text-indent: -0.42em;
  text-wrap: pretty;
}
.voice-quote p::before { content: "\201C"; }
.voice-quote p::after { content: "\201D"; }
.voice-quote .w { transition: color 500ms var(--ease-out); }
.voice-quote.is-split .w:not(.is-lit) { color: var(--muted); }
.voice-cap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  align-items: center;
  margin-top: var(--s-6);
}
.voice-cap > :last-child { grid-column: 2; font-size: var(--fs-14); }
@media (max-width: 899px) {
  .voice-fig, .voice-media { grid-column: 1 / -1; }
  .voice-media { order: -1; max-width: 22rem; }
}
/* ---------- Protection + FAQ ----------------------------------------- */
.protect-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-8) var(--gutter);
}
.protect-intro { grid-column: 1 / span 5; }
.faq { grid-column: 7 / -1; }
.promises { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.promises li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--s-4); }
.promises .i { width: 1.6rem; height: 1.6rem; color: var(--green-600); margin-top: 0.1rem; }
.promises p { margin-top: 0.3rem; max-width: 40ch; }
.faq-title { margin-bottom: var(--s-5); }
@media (max-width: 899px) { .protect-intro, .faq { grid-column: 1 / -1; } }

/* ---------- Quote form -------------------------------------------------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-7) var(--gutter);
}
.quote-intro { grid-column: 1 / span 5; }
.quote-intro .lead { margin-top: var(--s-5); }
.quote-form { grid-column: 7 / -1; }
.contact-alt { display: grid; gap: 0; margin-top: var(--s-7); }
.contact-alt div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: 0.85rem;
  border-top: 1px solid var(--rule);
}
.contact-alt dt { font-size: var(--fs-14); }
.contact-alt dd { overflow-wrap: anywhere; }

.quote-form {
  display: grid;
  gap: 1.35rem;
  align-content: start;
  padding: clamp(1.25rem, 0.6rem + 2.4vw, 2.75rem);
  background: var(--ghost);
}
.quote-form fieldset { border: 0; padding: 0; min-width: 0; }
.quote-form .legend { margin-bottom: 0.5rem; padding: 0; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.35rem var(--gutter); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-2); }
.form-done {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--green-600);
}
.form-done .led { margin-top: 0.55rem; }
.form-done:focus { outline: none; }
.quote-form.is-done > :not(.form-done) { display: none; }
@media (max-width: 899px) { .quote-intro, .quote-form { grid-column: 1 / -1; } }

/* ---------- First load -------------------------------------------------
   Pure CSS so the hero never depends on a script to become visible.
   Order: shutter opens on the photo → headline rises line by line → tag drops
   onto its string → supporting copy settles → departure strip. */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: shutter 1300ms var(--ease-expo) 60ms both; }
  .hero-photo img { animation: settle 2200ms var(--ease-expo) 60ms both; }
  .hero-title .line > span { animation: line-up var(--d-hero) var(--ease-expo) both; }
  .hero-title .line:nth-child(2) > span { animation-delay: 160ms; }
  .hero-title .line:nth-child(3) > span { animation-delay: 240ms; }
  .hero-title .line:nth-child(4) > span { animation-delay: 320ms; }
  .hero-title .line:nth-child(5) > span { animation-delay: 400ms; }
  .hero-tag { animation: tag-drop 1300ms var(--ease-expo) 820ms backwards; }
  .hero-lead   { animation: rise-soft 900ms var(--ease-expo) 560ms both; }
  .hero-search { animation: rise-soft 900ms var(--ease-expo) 640ms both; }
  .hero-quick  { animation: rise-soft 900ms var(--ease-expo) 700ms both; }
  .hero-cap    { animation: fade 600ms var(--ease-out) 1100ms both; }
  .departure   { animation: fade 800ms var(--ease-out) 1000ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-media { animation: fade 240ms var(--ease-out) both; }
}
@keyframes shutter   { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle    { from { scale: 1.14; } to { scale: 1; } }
@keyframes line-up   { from { translate: 0 108%; } to { translate: 0 0; } }
@keyframes rise-soft { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes tag-drop  { from { opacity: 0; rotate: -28deg; translate: 0 -2rem; } to { opacity: 1; rotate: var(--tag-rot); translate: 0 0; } }

/* ---------- Reduced motion -------------------------------------------- */
.floor { padding-top: clamp(3.5rem, 6vw, 6rem); }
.life-grid .h2 { max-width: 18ch; }
.depts .section-head { max-width: 54rem; }
.process-counter { padding: 1rem 1.25rem; background: var(--ink); color: var(--on-dark); min-width: 6rem; }
.process-counter span { color: var(--green-300); }
.step.is-active .step-no { background: var(--tag); border-color: var(--tag); color: var(--ink); }
.step-body .h3 { max-width: 22ch; }
.grades th, .grades td { padding-block: 1.65rem; }
.grade-chip { border-radius: 50%; }
.shipping-photo { position: relative; margin-bottom: 3.5rem; overflow: hidden; }
.shipping-photo img { width: 100%; height: clamp(12rem, 23vw, 21rem); object-fit: cover; object-position: 50% 48%; }
.shipping-photo figcaption { position: absolute; inset: auto 0 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; color: var(--on-dark); background: var(--green-900); font-size: 1rem; }
.shipping-photo .plate { font-size: .6875rem; letter-spacing: .06em; color: var(--on-dark-muted); }
.route { min-height: 3.7rem; }
.voice { background: var(--ghost); }
.voice-media img { aspect-ratio: 1; }
.voice-cap { font-size: .875rem; }
.quote-form { border-top: 2px solid var(--ink); }
.quote-intro .h2 { max-width: 14ch; }
@media (max-width: 899px) {
  .voice-media { width: 100%; max-width: none; }
  .voice-media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 599px) {
  .dept-name { font-size: clamp(1.5rem, 5.8vw, 2rem); line-height: 1.15; }
  .dept-from { justify-self: start; grid-area: auto; margin-top: .2rem; }
  .dept { grid-template-areas: "name thumb" "eg thumb" "meta thumb"; }
  .grades th, .grades td { padding-block: .35rem; }
  .shipping-photo { margin-bottom: 2rem; }
  .shipping-photo figcaption { position: static; padding: 1rem 0 0; font-size: .9375rem; }
  .shipping-photo .plate { font-size: .75rem; }
  .includes ul { gap: 1rem; font-size: .875rem; }
  .quote-form { padding: 1.25rem; }
  .quote-form .form-row { grid-template-columns: minmax(0, 1fr); }
  .hero-photo, .hero-photo img, .hero-title .line > span, .hero-tag, .hero-lead, .hero-search, .hero-quick, .hero-cap, .departure { animation-duration: 700ms; }
}
@media (prefers-reduced-motion: reduce) {
  .dept-follow { display: none; }
  .cycle-word { translate: none; opacity: 0; transition: opacity 240ms; }
  .cycle-word.is-active { opacity: 1; }
  .cycle-word.is-leaving { translate: none; }
  .process-frame img { clip-path: none; scale: 1; opacity: 0; transition: opacity 240ms; }
  .process-frame img.is-active { opacity: 1; transition: opacity 240ms; }
  .dept-name, .dept-arrow { transition: color var(--d-hover); }
  .dept:hover .dept-name, .dept:hover .dept-arrow { translate: none; }
}