.ship-process-note {
  max-width: 700px;
  margin: 0 auto clamp(48px, 6vw, 64px);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.ship-process-list {
  list-style: none;
  /* No inner max-width here on purpose: the surrounding .section already
     caps out at var(--max-width) with the site's standard 24px gutter, so
     letting this fill that space is what lets the photo column (on large
     screens) sit close to the true edge of the viewport instead of
     floating in extra unused whitespace. */
  margin: 0 auto;
}

.ship-process-stage {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px clamp(20px, 4vw, 32px);
  padding: clamp(30px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--border-soft);
}

.ship-process-stage:first-child {
  padding-top: 0;
}

.ship-process-stage:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ship-process-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--lavender-deep);
}

.ship-process-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.ship-process-body > p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.ship-process-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
}

.ship-process-checklist li {
  position: relative;
  padding-left: 16px;
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.ship-process-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lavender-mid);
}

/* Text on the left, photo on the right, photo stretched to match the full
   height of the number + title + paragraph + checklist stack. The body is
   flattened with `display: contents` so h3 / media / p / ul can each be
   placed independently: title, paragraph and checklist share the middle
   column (stacking in their own rows), while the photo occupies its own
   column spanning all three rows. */
.ship-process-stage--photo {
  grid-template-columns: 60px 1fr minmax(340px, 440px);
  grid-template-areas:
    "num title media"
    "num para  media"
    "num list  media";
  align-items: stretch;
}

.ship-process-stage--photo .ship-process-body {
  display: contents;
}

.ship-process-stage--photo .ship-process-num {
  grid-area: num;
  align-self: start;
}

.ship-process-stage--photo .ship-process-body h3 {
  grid-area: title;
}

.ship-process-stage--photo .ship-process-body > p {
  grid-area: para;
  max-width: 640px;
}

.ship-process-stage--photo .ship-process-checklist {
  grid-area: list;
}

.ship-process-media {
  grid-area: media;
  width: 100%;
  /* No aspect-ratio here on purpose: with align-items: stretch above, the grid
     row height is set by the tallest column (the text/checklist stack), and
     this column simply fills that height — so the photo always matches the
     text, no matter how long the checklist runs. max-height keeps that from
     going too far on very wide screens, where the text column is short and
     the checklist wraps into few, wide rows. */
  max-height: 560px;
  border-radius: 0; /* sharp edges, no rounding */
  overflow: hidden;
}

.ship-process-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Laptops and up: the section itself has more room to breathe, so let the
   photo column grow with it — since .ship-process-list no longer caps out
   below the section's own width, this naturally pulls the photo closer to
   the real edge of the viewport rather than just growing the paragraph.
   Fixed pixel caps here (not vw) on purpose: the section itself is capped
   at var(--max-width), but a vw-based column keeps scaling with the raw
   browser viewport past that point, so on an ultra-wide monitor it can
   claim far more of the (capped) container than intended and crush the
   paragraph beside it down to an unreadable width. */
@media (min-width: 1080px) {
  .ship-process-stage--photo {
    grid-template-columns: 60px 1fr minmax(380px, 460px);
  }
}

/* Large monitors: scale the photo up one more step, still capped in px */
@media (min-width: 1440px) {
  .ship-process-stage--photo {
    grid-template-columns: 60px 1fr minmax(440px, 500px);
  }
}

/* Stage 03 sub-points: five short checks stacked with hairline dividers,
   no cards. Two of them (first and last) carry a photo using the same
   stretched-to-text-height, sharp-edged treatment as Stage 01's image —
   just scoped to that single point's paragraph rather than the whole
   stage. */
.ship-qc-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 24px);
  margin-top: clamp(18px, 2.6vw, 24px);
}

.ship-qc-point {
  padding-top: clamp(16px, 2.4vw, 22px);
  border-top: 1px solid var(--border-soft);
}

.ship-qc-point:first-child {
  padding-top: 0;
  border-top: none;
}

.ship-qc-point p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}

.ship-qc-point strong {
  color: var(--text);
}

.ship-qc-point--photo {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px);
  gap: clamp(20px, 4vw, 36px);
  /* Center rather than top-align: the photo and the paragraph rarely match
     in height exactly, and centering splits the leftover space evenly
     above and below instead of dumping it all beneath a short paragraph. */
  align-items: center;
}

.ship-qc-point--photo p {
  order: 1;
  max-width: clamp(240px, 32vw, 360px);
}

.ship-qc-point-media {
  order: 2;
  width: 100%;
  /* A shorter, more compact ratio than Stage 01's photo — this one sits
     beside a handful of sentences, not a title + long paragraph, so a
     smaller frame keeps it in proportion with the text and cuts down the
     empty space a taller photo would leave around it. */
  aspect-ratio: 3 / 2;
  border-radius: 0; /* sharp edges, no rounding — same as Stage 01 */
  overflow: hidden;
}

.ship-qc-point-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The shared .notice component (common.css) ships with space below it but
   none above — fine when it sits at the top of its own section (as on the
   homepage), but here it follows a full paragraph and a bullet list, so it
   needs its own breathing room above. Scoped to .ship-process-body so this
   doesn't change how .notice looks anywhere else on the site. */
.ship-process-body .notice {
  margin-top: clamp(28px, 4vw, 40px);
}

@media (max-width: 480px) {
  .ship-process-body .notice {
    padding: 14px 16px;
  }

  .ship-process-body .notice-cta {
    gap: 14px;
  }

  .ship-process-body .notice-cta p {
    font-size: 0.88rem;
  }
}

/* Small muted caption that can follow the Incoterms notice CTA when a
   caveat is needed (e.g. "this isn't the full list") — reusable wherever
   a stage links out but the destination only covers part of the topic. */
.ship-process-cert-note {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────
   03. INCOTERMS — DETAILED TERM LIST
   Simple editorial rows separated by hairlines; no card boxes, shadows,
   or rounded panels — just clear typography and generous whitespace.
   ──────────────────────────────────────────────────────────────────────── */

.ship-terms-intro {
  max-width: 680px;
  margin: 0 auto clamp(36px, 5vw, 48px);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.ship-terms-list {
  max-width: 1120px;
  margin: 0 auto;
}

.ship-term {
  padding: clamp(32px, 4vw, 46px) 0;
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

.ship-term:first-child {
  padding-top: 0;
}

.ship-term:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ship-term-main {
  min-width: 0;
}

.ship-term-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.ship-term-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--lavender-deep);
  letter-spacing: -0.01em;
}

.ship-term-name {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.ship-term-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.ship-term-note {
  font-size: 0.78rem;
  color: var(--text-faint);
  font-style: italic;
  margin-top: 10px;
}

.ship-term-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  min-width: 0;
  margin-top: clamp(30px, 4vw, 42px);
}

.ship-term-col-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.ship-term-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ship-term-col li {
  position: relative;
  padding-left: 15px;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.ship-term-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lavender-mid);
}


/* ────────────────────────────────────────────────────────────────────────
   04. INCOTERMS — RECOMMENDATION TABLE
   ──────────────────────────────────────────────────────────────────────── */

.ship-terms-table-wrap {
  max-width: 680px;
  margin: clamp(48px, 6vw, 64px) auto 0;
}

.ship-terms-table-wrap h3 {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}

.ship-terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.ship-terms-table th,
.ship-terms-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.ship-terms-table th {
  color: var(--text-faint);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ship-terms-table td {
  color: var(--text-muted);
}

.ship-terms-table td:last-child {
  color: var(--lavender-deep);
  font-weight: 700;
}

.ship-terms-recommendation {
  max-width: 680px;
  margin: clamp(28px, 4vw, 36px) auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.ship-terms-recommendation strong {
  color: var(--text);
}


/* ────────────────────────────────────────────────────────────────────────
   10. CLOSING CTA
   Same gradient-banner recipe as .cta-banner on the homepage.
   ──────────────────────────────────────────────────────────────────────── */

.ship-cta {
  background: linear-gradient(135deg, var(--lavender-pale), var(--lavender));
  border-radius: var(--radius);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 32px;
  text-align: center;
}

.ship-cta h2 {
  color: var(--primary-dark);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.ship-cta p {
  color: var(--primary-dark);
  opacity: 0.8;
  margin-bottom: 26px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.ship-cta-contact {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(53, 94, 59, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  font-size: 0.86rem;
  color: var(--primary-dark);
}

.ship-cta-contact strong {
  display: block;
  margin-bottom: 2px;
  opacity: 0.7;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ship-cta-contact a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.ship-cta-contact a:hover {
  text-decoration: underline;
}


/* ────────────────────────────────────────────────────────────────────────
   11. RESPONSIVE OVERRIDES
   ──────────────────────────────────────────────────────────────────────── */

/* Stage 03 sub-point photos: only drop to the floated-image, magazine-
   column treatment below 560px — true phone widths. Above this (including
   631px-ish "large" phones/small tablets, portrait iPads, and up), the
   desktop text-left / image-right grid (see .ship-qc-point--photo,
   non-mobile rule above) stays intact, matching the same layout used on
   full tablets and desktop. */
@media (max-width: 560px) {
  .ship-qc-point--photo {
    display: block;
  }

  .ship-qc-point-media {
    float: right;
    width: 42vw;
    max-width: 195px;
    aspect-ratio: 4 / 5;
    margin: 0 0 12px 18px;
  }

  .ship-qc-point--photo p {
    max-width: none;
    margin-top: 0;
  }
}

/* Process stage photo, small screens: drop the grid entirely and let the
   photo become a true floated element, the way an image floats inside a
   magazine column. The title sits above (untouched, full width), the photo
   floats to the right of the paragraph so the paragraph's lines wrap around
   it, and once the text passes the photo's bottom edge it naturally
   continues edge-to-edge again. The checklist clears the float so it always
   starts fresh, full width, below the photo. */
@media (max-width: 860px) {
  .ship-process-stage {
    display: block;
  }

  .ship-process-num {
    margin-bottom: 4px;
  }

  .ship-process-body h3 {
    margin-bottom: 14px;
  }

  .ship-process-body > p {
    margin-bottom: 20px;
    max-width: none;
  }

  .ship-process-media {
    float: right;
    width: 46vw;
    max-width: 240px;
    aspect-ratio: 4 / 5;
    margin: 0 0 16px 20px;
  }

  .ship-process-checklist {
    clear: both;
  }
}

/* In the 701–860px band the paragraph is short enough, relative to the
   floated photo, that clearing the float (above) leaves a large empty gap
   under the paragraph before the checklist starts. There's still room
   beside the bottom of the photo, so let the checklist flow back up into
   that space instead of clearing it — its two columns narrow to fit
   whatever width remains next to the photo, then return to full width once
   they pass its bottom edge. The photo itself is untouched. */
@media (min-width: 700px) and (max-width: 860px) {
  .ship-process-stage--photo .ship-process-checklist {
    clear: none;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 640px) {
  .ship-term {
    padding: 22px 0;
  }

  .ship-cta {
    padding: 40px 24px;
  }

  .ship-process-stage {
    padding: 22px 0;
  }

  .ship-process-num {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .ship-process-checklist {
    grid-template-columns: 1fr;
  }
}

/* Below ~600px Stage 01's floated photo starts eating too much of the
   already-narrow text column, squeezing the description into just a
   couple of characters per line. Shrink it in two more steps as the
   viewport narrows — same right-side float, same aspect ratio, just
   proportionally smaller — so the paragraph keeps enough width to read
   comfortably. (Stage 03's sub-point photos aren't floated until 560px,
   so they don't need this intermediate step — see the 560px and 420px
   rules for their sizing.) */
@media (max-width: 600px) {
  .ship-process-media {
    width: 38vw;
    max-width: 190px;
    margin: 0 0 14px 16px;
  }
}

@media (max-width: 420px) {
  .ship-process-media {
    width: 34vw;
    max-width: 150px;
    margin: 0 0 12px 14px;
  }

  .ship-qc-point-media {
    width: 34vw;
    max-width: 135px;
    margin: 0 0 8px 14px;
  }
}

/* Incoterms: keep the left label / right detail split on tablets, stack on phones */
@media (max-width: 680px) {
  .ship-term {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ship-term-cols {
    margin-top: 4px;
  }
}

/* Incoterms: let We provide / You manage stack on the smallest phones */
@media (max-width: 420px) {
  .ship-term-cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}