/* Moved out of ./articles/berth-allocation.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. The selection-factor
       grid uses the system's own .p-caps / .p-cap outright.

       Vocabulary held closed, taken from style.css and from the sibling
       container-turnaround page rather than invented:
         spacing  8 / 10 / 16 / 20 / 24 / 30 / 40 / 50
         radius   var(--radius) — 12px, as .cs__feature-card and .p-cap__art
         type     40 / 24 / 20 / 18 / 16 / 15 / 14
         accent   var(--orange) / var(--orange-alt); separation is a hairline,
                  never a shadow. Sequence is always a dot or a rule, never a box. */

    /* The page runs long — seven sections — so it breathes one step wider than
       the 50px default the shorter pages stand on. */
    .page-shell .section { --section-pt: clamp(56px, 5.5vw, 88px); --section-pb: clamp(56px, 5.5vw, 88px); }

    /* ---------- section head ---------- */
    /* Heading left, lead right: the two-column head container-turnaround already
       uses, so the two long-form pages read as one family. */
    .ba-head {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 50px;
      align-items: start;
      margin-bottom: 34px;
    }
    .ba-head h2 { margin: 0; text-wrap: balance; }
    .ba-head .text-lead { max-width: 660px; margin: 0; }
    .section-head .text-lead { max-width: 820px; }

    /* ---------- hero ---------- */
    /* The photo is a real <img> rather than .p-hero's --p-hero-img background,
       so it loads on its own and can be sized with object-fit. */
    .ba-hero {
      position: relative;
      min-height: clamp(380px, 38vw, 500px);
      padding: 0;
      background: var(--ink-2);
      overflow: hidden;
    }
    .ba-hero__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
    }
    /* The vessel and tugs sit on the left of the photo, so the scrim — and the
       copy over it — go on the right, the way the product hero does. The block
       itself stays left-aligned; only its position moves. */
    .ba-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(270deg, rgba(16,16,16,.92) 0%, rgba(16,16,16,.70) 46%, rgba(16,16,16,.10) 100%);
    }
    .ba-hero__inner {
      position: relative;
      z-index: 1;
      min-height: clamp(380px, 38vw, 500px);
      display: flex;
      flex-direction: column;
    }
    .ba-hero__main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-top: 50px;
      padding-bottom: 40px;
    }
    .ba-hero__copy { width: 100%; max-width: 560px; }
    .ba-hero__eyebrow {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--orange-alt);
    }
    /* 40px, the same step .p-hero__title and .page-hero__title stand on. */
    .ba-hero__title {
      margin: 10px 0 0;
      font-size: 40px;
      line-height: 1.2;
      font-weight: 700;
      color: #fff;
      text-wrap: balance;
    }
    .ba-hero__rule { display: block; width: 120px; height: 3px; margin: 20px 0; background: var(--orange); }
    .ba-hero__sub {
      margin: 0;
      font-size: 18px;
      line-height: 1.55;
      color: #e8e8e8;
    }
    .ba-hero__sub strong { color: #fff; font-weight: 600; }


    /* ---------- staged-process statement ---------- */
    /* It introduces the five-step strip, so it sits a clear step below the
       section heading and close to the cards — the section has one heading and
       one orange rule, not two of each. The 20px space below binds it to the
       row; the head's own 34px above separates it from the heading. */
    .ba-pull {
      max-width: 760px;
      margin: 0 0 20px;
      font-size: 17px;
      line-height: 1.5;
      font-weight: 600;
      color: var(--heading);
    }

    /* ---------- numbered step strips ---------- */
    .ba-steps {
      margin-top: 0;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 20px;
    }
    .ba-step {
      position: relative;
      background: #fff;
      border: 1px solid var(--line);
      border-top: 3px solid var(--orange);
      border-radius: var(--radius);
      padding: 22px 20px 24px;
    }
    /* The five orange top edges are one line interrupted by the gaps; the
       connector closes them so the row reads as a sequence, not five cards. */
    .ba-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: -3px;
      right: -20px;
      width: 20px;
      height: 3px;
      background: var(--orange);
      opacity: .35;
    }
    .ba-step__num {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--orange-text);
    }
    .ba-step strong {
      display: block;
      margin-top: 10px;
      font-size: 16px;
      line-height: 1.35;
      font-weight: 600;
      color: var(--heading);
    }
    /* 15px: the cards are 200px wide on the 1200 rail, and 16px body left the
       descriptions running four and five lines. */
    .ba-step p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--gray-600); }

    /* ---------- selection factors ---------- */
    /* .p-caps and .p-cap come from style.css; the arts only need a common crop
       so six photos of different native aspects sit on one baseline. */
    .p-caps { gap: 46px 40px; }
    /* style.css frames .p-cap as a card for the illustrated capability grids on
       the product pages. These six are photographs with a ruled label under
       them, so they stay frameless and keep their own 3:2 crop. */
    .p-cap { background: none; border: 0; padding: 0; }
    .p-cap:hover { box-shadow: none; }
    .p-cap__art { height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: none; border-radius: var(--radius); margin-bottom: 20px; }
    .ba-cap__label {
      display: block;
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--orange-text);
    }
    .p-cap .h-card { margin: 0 0 8px; }
    .p-cap p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gray-600); }

    /* ---------- stakeholders ---------- */
    .ba-stake { margin-top: 20px; border-top: 1px solid var(--line); }
    .ba-stake__line {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 30px;
      padding: 22px 16px 22px 20px;
      border-bottom: 1px solid var(--line);
      transition: background-color .25s ease;
    }
    .ba-stake__line:hover { background: #fcfcfc; }
    /* The planner is the role the section is about; the dot says so without a
       second heading. */
    .ba-stake__role {
      position: relative;
      padding-left: 20px;
      font-size: 16px;
      font-weight: 600;
      color: var(--heading);
    }
    .ba-stake__role::before {
      content: "";
      position: absolute;
      left: 0;
      top: .5em;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gray-300);
    }
    .ba-stake__line:first-child .ba-stake__role::before { background: var(--orange); }
    .ba-stake__desc { margin: 0; color: var(--gray-600); }

    /* ---------- two-column split ---------- */
    /* A rule, not a box: the lists are already dense, so the lighter rung does
       the separating. */
    .ba-split {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 50px;
      margin-top: 20px;
    }
    .ba-split__col { border-top: 3px solid var(--orange); padding-top: 20px; }
    .ba-split__col h3 { margin: 0 0 10px; }
    .ba-split__col p { margin: 0; color: var(--gray-600); }
    .ba-split__col ul { margin: 20px 0 0; display: grid; gap: 10px; }
    .ba-split__col li {
      position: relative;
      padding-left: 20px;
      color: var(--gray-600);
      line-height: 1.5;
    }
    .ba-split__col li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .55em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
    }

    /* ---------- dark bands ---------- */
    .ba-dark { position: relative; background: var(--ink-2); color: #fff; overflow: hidden; }
    .ba-dark > .container { position: relative; z-index: 2; }
    .ba-dark .h-section--left,
    .ba-dark h3 { color: #fff; }
    .ba-dark .text-lead { color: #cfcfcf; }

    /* Photo-backed variant: the image sits behind a heavy scrim so the type
       keeps its contrast at every viewport width. */
    .ba-dark--photo { background: var(--ink-2) var(--ba-band-img) center 35% / cover no-repeat; }
    /* Lighter through the middle than at the edges: the band kept its contrast
       where the type sits and let the terminal show through where it does not. */
    .ba-dark--photo::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(16,16,16,.94) 0%, rgba(16,16,16,.84) 50%, rgba(16,16,16,.93) 100%);
    }

    /* Five handoffs, each naming what moves and the system it moves through.
       Flex rather than grid so the arrows sit between the cells as real
       elements and the row can wrap as a unit. */
    .ba-flow {
      margin-top: 40px;
      display: flex;
      align-items: stretch;
      gap: 10px;
    }
    .ba-flow__cell {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius);
      padding: 20px;
      transition: border-color .25s ease, transform .25s ease;
    }
    .ba-flow__cell:hover { border-color: rgba(241, 103, 36, .7); transform: translateY(-3px); }
    /* The terminal system is where the allocation becomes an instruction, so
       that step is the one carrying the accent. */
    .ba-flow__cell.is-active { border-color: rgba(241, 103, 36, .55); background: rgba(241, 103, 36, .10); }
    .ba-flow__arrow {
      flex: none;
      align-self: center;
      width: 20px;
      font-style: normal;
      font-size: 18px;
      line-height: 1;
      text-align: center;
      color: var(--orange-alt);
    }
    .ba-flow__step {
      display: block;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--orange-alt);
      margin: 0;
    }
    .ba-flow__cell strong { font-size: 16px; font-weight: 600; line-height: 1.4; color: #fff; }
    .ba-flow__sys { font-size: 14px; line-height: 1.45; color: #cfcfcf; }

    /* ---------- where Portall fits ---------- */
    /* Three layers of the same journey: number, product, and what that product
       supports. The rows share one rail so they read as one sequence rather
       than three cards. */
    .ba-layers { margin-top: 20px; }
    .ba-layer {
      position: relative;
      display: grid;
      grid-template-columns: 60px 290px 1fr;
      gap: 40px;
      padding: 40px 0;
      border-top: 1px solid var(--line);
      align-items: start;
    }
    .ba-layer:last-child { border-bottom: 1px solid var(--line); }
    /* One spine down the three rows: allocation, coordination and execution are
       stages of a single journey, not three separate offers. Each row draws its
       own segment, so adjacent rows join into a continuous line and the segment
       always sits above the lifted background of the core row. */
    .ba-layer::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--line);
    }
    /* The core row is inset 20px, so its segment starts 20px further in to stay
       on the same line as the others. */
    .ba-layer--core::after { left: 25px; }
    .ba-layer__n {
      position: relative;
      padding-left: 24px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--orange-text);
      font-variant-numeric: tabular-nums;
    }
    .ba-layer__n::before {
      content: "";
      position: absolute;
      left: 0;
      top: .4em;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--orange);
    }
    .ba-layer__tag {
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--orange-text);
    }
    .ba-layer__product h3 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--heading); }
    .ba-layer__intro { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--gray-600); }
    /* The photo closes the left column, which otherwise ended well short of the
       detail grid beside it. */
    .ba-layer__art {
      display: block;
      width: 100%;
      margin-top: 20px;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      border-radius: var(--radius);
    }
    .ba-layer__detail { padding-left: 30px; border-left: 1px solid var(--line); }
    .ba-layer__heading { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--heading); }
    .ba-layer__detail > p { margin: 0; max-width: 650px; font-size: 16px; line-height: 1.65; color: var(--gray-600); }
    /* Hairline gaps rather than filled cards — the same wiring-diagram grid the
       container-turnaround page uses for its network. */
    .ba-layer__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      margin-top: 30px;
      background: var(--line);
      border: 1px solid var(--line);
    }
    .ba-layer__grid > div { background: #fff; padding: 24px; }
    .ba-layer__grid strong { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--heading); }
    .ba-layer__grid span { display: block; font-size: 14px; line-height: 1.55; color: var(--gray-600); }

    /* PMIS carries the allocation decision itself, so its row is lifted off the
       band and flagged rather than left to read as one of three equals. */
    .ba-layer--core {
      position: relative;
      background: var(--orange-tint);
      border-top-color: var(--orange-text);
      margin: 0 -20px;
      padding: 40px 20px;
    }
    .ba-layer--core::before {
      content: "Core berth allocation";
      position: absolute;
      top: 0;
      right: 20px;
      transform: translateY(-50%);
      background: var(--orange);
      color: #fff;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .06em;
    }

    /* The approach in one line, on the accent itself. The spine runs on into it
       in orange, so the summary reads as where the three layers arrive. */
    .ba-approach { position: relative; margin-top: 50px; padding: 40px; background: var(--orange); color: var(--ink); }
    .ba-approach::before {
      content: "";
      position: absolute;
      left: 5px;
      top: -50px;
      width: 1px;
      height: 50px;
      background: var(--orange);
    }
    .ba-approach h3 { margin: 0; font-size: 24px; line-height: 1.4; font-weight: 700; color: var(--ink); }
    .ba-approach__flow {
      display: grid;
      grid-template-columns: 1fr 40px 1fr 40px 1fr;
      align-items: start;
      margin-top: 30px;
    }
    .ba-approach__n { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
    .ba-approach__item strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
    .ba-approach__item p { margin: 8px 0 0; max-width: 240px; font-size: 14px; line-height: 1.55; }
    .ba-approach__flow i { align-self: center; justify-self: center; width: 20px; height: 1px; background: var(--ink); }

    /* ---------- closing summary strip ---------- */
    /* Eight stages across. The band scrolls inside its own box on narrow
       screens rather than letting the page scroll sideways. */
    /* Eight stages across. It was a header row over a body row — a table, which
       is what a reader compares values in, not what they follow a cycle along.
       The rail carries the stages instead: dot, stage, and the thing that stage
       hands to the next one. It still scrolls inside its own box on narrow
       screens rather than letting the page scroll sideways. */
    .ba-summary {
      margin-top: 40px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 34px 30px 30px;
    }
    .ba-summary__scroll { overflow-x: auto; }
    .ba-journey {
      position: relative;
      display: grid;
      grid-template-columns: repeat(8, minmax(122px, 1fr));
      gap: 20px;
      min-width: 1040px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .ba-journey::before {
      content: "";
      position: absolute;
      left: 5px;
      right: 5px;
      top: 5px;
      height: 1px;
      background: var(--line);
    }
    .ba-journey li { position: relative; padding-top: 26px; }
    .ba-journey li::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--orange);
    }
    .ba-journey b {
      display: block;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--heading);
    }
    .ba-journey span {
      display: block;
      margin-top: 6px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--gray-600);
    }
    /* Analyse feeds Receive: the cycle closes rather than stopping. */
    .ba-journey__loop {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
      font-size: 14px;
      color: var(--gray-600);
    }
    .ba-journey__loop i { width: 30px; height: 1px; background: var(--orange); }

    @media (max-width: 1199px) {
      .ba-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      /* Connectors join cells that are side by side; once the rows wrap, the
         line would run off the end of a row into nothing. */
      .ba-step::after { display: none; }
      .ba-flow { flex-wrap: wrap; }
      .ba-flow__cell { flex: 1 0 calc(33.333% - 14px); }
      .ba-flow__arrow { display: none; }
      .ba-layer { grid-template-columns: 60px 1fr; gap: 24px 30px; }
      .ba-layer__detail { grid-column: 2; padding-left: 0; border-left: 0; padding-top: 10px; }
    }

    @media (max-width: 949px) {
      .page-shell .section { --section-pt: 50px; --section-pb: 50px; }
      /* The min-height is set above; let the copy set it instead once the lines
         start wrapping. */
      .ba-hero { min-height: 0; }
      .ba-hero__inner { min-height: 0; }
      .ba-hero__main { padding-top: 50px; padding-bottom: 40px; }
      .ba-hero::after { background: rgba(16, 16, 16, .78); }
      .ba-hero__title { font-size: 30px; }
      .ba-head,
      .ba-split { grid-template-columns: 1fr; gap: 30px; }
      .ba-head { gap: 16px; }
      .ba-head .text-lead { max-width: none; }
      .ba-stake__line { grid-template-columns: 1fr; gap: 10px; padding-left: 0; }
      .ba-summary { padding: 30px 20px 26px; }
    }

    @media (max-width: 809px) {
      .ba-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ba-flow__cell { flex: 1 0 calc(50% - 5px); }
      .ba-layer { grid-template-columns: 52px 1fr; gap: 20px; }
      .ba-layer__grid { grid-template-columns: 1fr; }
      .ba-layer--core { margin: 0; padding: 40px 0; }
      /* The inset is gone at this width, so the segment returns to the rail. */
      .ba-layer--core::after { left: 5px; }
      .ba-layer--core::before { right: 0; }
      .ba-approach { padding: 30px; }
      .ba-approach__flow { grid-template-columns: 1fr; gap: 24px; }
      .ba-approach__flow i { display: none; }
      .ba-approach__item p { max-width: none; }
    }