/* Moved out of ./articles/container-turnaround.html so the CSP can drop style-src 'unsafe-inline'. */
    /* Blocks unique to this page. Type ramp, container rail, section padding,
       buttons, header and footer all come from style.css.

       Vocabulary held closed, taken from style.css rather than invented:
         spacing  8 / 10 / 16 / 20 / 24 / 30 / 40 / 50
         radius   var(--radius) 12px on cards, var(--radius-lg) 20px on the
                  framed diagrams, 4px on the cells inside them
         type     40 / 24 / 20 / 18 / 16 / 14 (12 only inside the dense
                  product diagrams, where a 14px label will not fit)
         accent   var(--orange) on light, var(--orange-alt) on dark

       Every class is ct- prefixed: .hero, .head, .product, .visual, .final and
       .cta all exist in style.css already, and an unprefixed page class would
       inherit their rules. */

    /* Seven sections, so the page breathes one step wider than the 50px
       default, matching the berth-allocation page. */
    .page-shell .section { --section-pt: clamp(56px, 5.5vw, 88px); --section-pb: clamp(56px, 5.5vw, 88px); }

    .ct-kicker {
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--orange-text);
    }

    /* ---------- shared section head ---------- */
    .ct-head { max-width: 820px; margin-bottom: 40px; }
    .ct-head h2 { text-wrap: balance; }
    .ct-head .text-lead { margin-top: 16px; }

    /* ---------- hero ---------- */
    /* The photo is a real <img> rather than a background, so it loads on its
       own and can be sized with object-fit. The scrim is heaviest on the left,
       where the copy and the journey rail sit. */
    .ct-hero { position: relative; background: var(--ink-2); color: #fff; overflow: hidden; }
    .ct-hero__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 45%;
    }
    .ct-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(26,26,26,.96) 0%, rgba(26,26,26,.90) 48%, rgba(26,26,26,.60) 100%);
    }
    .ct-hero > .container { position: relative; z-index: 1; }
    .ct-hero .ct-kicker { color: var(--orange-alt); }
    /* 40px, the step .p-hero__title and .page-hero__title stand on. */
    .ct-hero__title {
      margin: 0;
      max-width: 900px;
      font-size: 40px;
      line-height: 1.15;
      font-weight: 700;
      color: #fff;
      text-wrap: balance;
    }
    .ct-hero__rule { display: block; width: 120px; height: 3px; margin: 20px 0; background: var(--orange); }
    .ct-hero__p { max-width: 740px; margin: 0 0 40px; font-size: 18px; line-height: 1.55; color: #e8e8e8; }

    /* Seven stops on one rail — the container journey the page then works
       through stage by stage. */
    .ct-journey {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius-lg);
      padding: 30px 24px 24px;
    }
    .ct-journey__label {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #cfcfcf;
      margin-bottom: 30px;
    }
    .ct-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; }
    .ct-stop { position: relative; text-align: center; }
    .ct-stop:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 19px;
      left: 65%;
      right: -35%;
      height: 1px;
      background: rgba(255, 255, 255, .28);
    }
    .ct-stop__dot {
      position: relative;
      z-index: 2;
      width: 38px;
      height: 38px;
      margin: auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--ink-2);
      border: 1px solid rgba(255, 255, 255, .4);
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    /* The vessel is where the journey lands, so it is the one filled stop. */
    .ct-stop:last-child .ct-stop__dot { background: var(--orange-deep); border-color: var(--orange-deep); }
    .ct-stop b { display: block; margin-top: 10px; font-size: 16px; font-weight: 600; color: #fff; }
    .ct-stop span { display: block; margin-top: 4px; font-size: 14px; color: #cfcfcf; }

    /* ---------- 01 · the problem ---------- */
    .ct-list { border-top: 1px solid var(--line); }
    .ct-row {
      display: grid;
      grid-template-columns: 50px 1fr 200px;
      gap: 30px;
      padding: 30px 0;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }
    .ct-row__n { font-size: 14px; font-weight: 700; color: var(--orange-text); font-variant-numeric: tabular-nums; }
    .ct-row__main { max-width: 690px; }
    .ct-stage {
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--slate);
    }
    .ct-row__main h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--heading); }
    .ct-row__main p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--gray-600); }
    .ct-row__main p:last-child { margin-bottom: 0; }
    .ct-row__main strong { color: var(--heading); font-weight: 600; }
    .ct-impact { border-left: 1px solid var(--line); padding-left: 20px; }
    .ct-impact span {
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--slate);
    }
    .ct-impact b { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--gray-600); }

    /* The step chain inside a row, and the cascade band, are the same object at
       two scales, so they are drawn the same way: chip, orange rung, chip. */
    .ct-flow,
    .ct-cascade { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .ct-flow { margin: 16px 0; }
    .ct-flow span,
    .ct-cascade .ct-cstep {
      background: #f9f9f9;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      font-weight: 600;
      color: var(--heading);
    }
    .ct-flow span { padding: 8px 14px; font-size: 14px; white-space: nowrap; }
    .ct-flow i,
    .ct-cascade i { flex: none; width: 20px; height: 1px; background: var(--orange); }

    /* ---------- the chain reaction ---------- */
    .ct-box {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: #fff;
      padding: 30px;
    }
    /* stretch, not center: one step wraps to a third line and the centred row
       left the other four floating at different heights. */
    .ct-cascade { align-items: stretch; overflow-x: auto; }
    .ct-cascade i { align-self: center; }
    .ct-cascade .ct-cstep { flex: 1 0 160px; padding: 16px; }
    .ct-cstep b { display: block; margin-bottom: 8px; font-size: 16px; }
    .ct-cstep span { font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--gray-600); }

    /* ---------- dark bands ---------- */
    .ct-dark { background: var(--ink-2); color: #fff; }
    .ct-dark .h-section--left { color: #fff; }
    .ct-dark .text-lead { color: #cfcfcf; }
    /* style.css scopes the heading rule as
       body[data-page="product"] section.section .h-section--left::after — (0,3,3).
       A plain .ct-dark descendant selector loses to it, so match that shape. */
    body[data-page="product"] section.ct-dark .h-section--left::after { background: var(--orange-alt); }

    /* The one statement the page turns on, set over the terminal it describes.
       The scrim stays heavy — the type is centred across the full rail. */
    .ct-challenge {
      position: relative;
      text-align: center;
      overflow: hidden;
      background: var(--ink-2) var(--ct-band-img) center 40% / cover no-repeat;
    }
    .ct-challenge::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(26,26,26,.94) 0%, rgba(26,26,26,.86) 50%, rgba(26,26,26,.94) 100%);
    }
    .ct-challenge > .container { position: relative; z-index: 1; }
    .ct-challenge h2 {
      max-width: 820px;
      margin: 0 auto 16px;
      font-size: 24px;
      line-height: 1.4;
      font-weight: 600;
      color: #fff;
      text-wrap: balance;
    }
    .ct-challenge p { max-width: 700px; margin: 0 auto; font-size: 16px; line-height: 28px; color: #cfcfcf; }

    /* ---------- 02 · the solution landscape ---------- */
    .ct-eco {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: #fff;
      padding: 40px 30px 30px;
    }
    .ct-eco__title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--slate);
    }
    .ct-eco__root {
      width: 260px;
      margin: auto;
      background: var(--ink-2);
      color: #fff;
      border-radius: var(--radius);
      text-align: center;
      padding: 20px;
    }
    .ct-eco__root b { display: block; font-size: 18px; font-weight: 700; letter-spacing: .06em; }
    .ct-eco__root span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: #cfcfcf; }
    .ct-eco__stem { width: 1px; height: 30px; margin: auto; background: var(--gray-300); }
    .ct-eco__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .ct-eco__row::before {
      content: "";
      position: absolute;
      top: 0;
      left: 12%;
      right: 12%;
      height: 1px;
      background: var(--gray-300);
    }
    .ct-eco__card {
      position: relative;
      background: #f9f9f9;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px 16px;
      text-align: center;
    }
    .ct-eco__card::before {
      content: "";
      position: absolute;
      top: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--gray-300);
    }
    .ct-eco__card b { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--heading); }
    .ct-eco__card span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--gray-600); }

    /* ---------- the four solutions ---------- */
    /* Photo, then copy: the operation the product works in, and what it does. */
    .ct-product {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 40px;
      align-items: stretch;
      margin-bottom: 20px;
      padding: 30px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
    }
    .ct-product__art {
      width: 100%;
      height: 100%;
      min-height: 220px;
      display: block;
      object-fit: cover;
      border-radius: var(--radius);
    }
    .ct-product__copy { align-self: center; }
    .ct-product:nth-child(even) { background: #f9f9f9; }
    .ct-product__n {
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--orange-text);
    }
    .ct-product h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--heading); }
    .ct-product p { margin: 0; max-width: 600px; font-size: 14px; line-height: 1.6; color: var(--gray-600); }

    /* ---------- the outcome ---------- */
    .ct-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .ct-outcome {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px 30px 30px;
    }
    .ct-outcome b {
      display: block;
      margin-bottom: 16px;
      font-size: 24px;
      font-weight: 700;
      color: var(--orange-text);
      font-variant-numeric: tabular-nums;
    }
    .ct-outcome h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--heading); }
    .ct-outcome p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gray-600); }

    /* What each of the three is for, in one word. Same columns and same gap as
       the row above, so each verb sits under the outcome it belongs to. */
    .ct-verbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
    .ct-verb {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px 30px 20px;
    }
    .ct-verb strong {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--heading);
    }
    .ct-verb span { font-size: 14px; line-height: 1.5; color: var(--gray-600); }

    /* ---------- closing ---------- */
    .ct-cta { text-align: center; }
    .ct-cta h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.4; font-weight: 600; color: var(--heading); }
    .ct-cta p { max-width: 600px; margin: 0 auto 24px; font-size: 16px; line-height: 28px; color: var(--gray-600); }

    @media (max-width: 1199px) {
      .ct-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; }
      .ct-stop::after { display: none; }
      .ct-product { grid-template-columns: 260px 1fr; gap: 30px; }
    }

    @media (max-width: 949px) {
      .page-shell .section { --section-pt: 50px; --section-pb: 50px; }
      .ct-hero__title { font-size: 30px; }
      .ct-row { grid-template-columns: 40px 1fr; gap: 20px; }
      .ct-impact { grid-column: 2; border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--line); }
      .ct-eco__row { grid-template-columns: 1fr 1fr; }
      .ct-eco__row::before { display: none; }
    }

    @media (max-width: 809px) {
      .ct-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ct-eco__row { grid-template-columns: 1fr; }
      .ct-product { grid-template-columns: 1fr; padding: 24px; }
      .ct-product__art { min-height: 0; aspect-ratio: 16 / 9; }
      .ct-outcomes, .ct-verbs { grid-template-columns: 1fr; }
    }