/* ==========================================================================
   Etnika Group - page-scoped styles for the secondary pages.
   Loaded AFTER styles.css, and only on group / what-we-do / platform /
   leadership / ambition / contact / privacy / legal.

   Everything here is prefixed .bp- and exists only because styles.css has no
   equivalent. Where it does, these pages use the shared class instead:

     .kicker .display .section--dark .grid-figures .figure .figure__value
     .figure__unit .figure__label .rule-list .formats .format__media
     .format__name .format__size .format__note .team-grid .team-card
     .team-card__photo .team-card__name .team-card__role .partners
     .lead .lead__bio .format .btn .btn--ghost .duo .duo__text .duo__media
     .duo__fit .display--wide
     .nav .foot .shell .section .row .row__body .prose .lede .entity
     .registry .form .field .onward

   Three homepage devices are deliberately NOT reused. .hub-card, .flow and
   .phase all start at opacity 0.32 and are lifted to 1 by scroll state that
   assets/site.js only wires up on index.html, so on these pages they would
   render permanently faded. The static equivalents below (.bp-arm, .bp-chain,
   .bp-steps) carry the same content without the scroll dependency.

   Nothing here styles the nav or the footer. styles.css owns both, the markup
   is pinned, and site.js binds the disclosure button to #nav-menu.
   ========================================================================== */

/* styles.css resets <ul>. These carry their own numerals or their own
   separators, so the markers and padding go. */
.bp-chain,
.bp-steps,
.bp-origins {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Page openings

   The secondary pages open on a kicker, a statement and a lede rather than on
   a full-bleed image: the homepage does the arriving, these pages answer a
   question the visitor already has.
   -------------------------------------------------------------------------- */

.bp-open { padding-block: var(--band-lg) var(--band); }

.bp-open .lede { margin-top: clamp(1.25rem, 2.6vw, 1.75rem); }

.bp-open .lede + .lede { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   The Group structure: three columns, not an org chart

   A static counterpart to the homepage hub cards. The homepage animates them
   one at a time against a world map; here all three are present at once,
   because the question this page answers is "what are the three parts".
   -------------------------------------------------------------------------- */

.bp-structure {
  display: grid;
  gap: var(--s-7);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 46em) {
  .bp-structure {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
}

.bp-arm { position: relative; padding-top: var(--s-5); }

/* The hairline across the top of each column, with a short tick dropping from
   its left edge: a structure read without a single box being drawn. */
.bp-arm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--rule-strong);
}

.bp-arm::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--s-4);
  background: var(--accent);
}

.bp-arm__city {
  font-family: var(--sans);
  font-size: var(--t-fine);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.bp-arm__entity {
  margin-top: var(--s-2);
  font-family: var(--serif);
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.006em;
}

/* Reserved for two lines: "GLOBAL SOURCING PLATFORM" wraps where the other two
   roles do not, and without this the three function lists start at different
   heights and the diagram stops reading as one row. */
.bp-arm__role {
  margin-top: var(--s-2);
  min-height: 2.9em;
  color: var(--ink-3);
  font-size: var(--t-fine);
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 45.99em) {
  .bp-arm__role { min-height: 0; }
}

.bp-arm__list {
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: var(--t-small);
}

.bp-arm__list li + li {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
}

/* The one-line reading of the diagram above it. */
.bp-plainly {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: var(--t-h2);
  line-height: 1.35;
  letter-spacing: -0.008em;
}

/* --------------------------------------------------------------------------
   The operating chain: six stations, the last returning to the first

   The homepage draws a line through these with script. Here they are a plain
   register at full shell width, which is all six stations need to be read.
   -------------------------------------------------------------------------- */

.bp-chain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 34em) {
  .bp-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 56.25em) {
  .bp-chain { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-4); }
}

.bp-stop { padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); }

.bp-stop__no {
  display: block;
  color: var(--accent-deep);
  font-family: var(--sans);
  font-size: var(--t-fine);
  font-variant-numeric: lining-nums;
  letter-spacing: 0.1em;
}

.bp-stop__name {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bp-stop__what {
  display: block;
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: var(--t-fine);
  line-height: 1.5;
}

.bp-return {
  margin-top: var(--s-5);
  color: var(--ink-2);
  font-size: var(--t-small);
}

.bp-return b { font-weight: 500; color: var(--ink); }

/* The figure register and the chain are the two blocks that take the whole
   shell rather than the body column of a .row, so their headings need the air
   a margin heading would otherwise have given them. */
.section > h2 + .grid-figures,
.section > h2 + .bp-chain { margin-top: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   Capability and pillar headings
   -------------------------------------------------------------------------- */

.bp-cap__no {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: var(--t-fine);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The numbered label and its heading travel together, whether they sit in the
   margin column of a .row or at the head of a .duo column. */
@media (min-width: 56.25em) {
  .row > .bp-cap__head { margin-top: -0.3em; }
}

/* --------------------------------------------------------------------------
   Sourcing origins

   A flex list, so a separator never starts a line and the run cannot push
   past a narrow viewport.
   -------------------------------------------------------------------------- */

.bp-origins {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  margin-top: var(--s-5);
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.7;
}

.bp-origins li {
  display: flex;
  align-items: baseline;
  column-gap: var(--s-3);
}

.bp-origins li:not(:last-child)::after {
  content: "·";
  color: var(--rule-strong);
  letter-spacing: 0;
}

.bp-origins__note {
  margin-top: var(--s-2);
  max-width: var(--measure);
  color: var(--ink-3);
  font-size: var(--t-fine);
}

/* --------------------------------------------------------------------------
   Media columns and the sourcing globe
   -------------------------------------------------------------------------- */

/* .duo__media carries the shape; this only guarantees the <figure> loses the
   UA's 40px side margins on every browser. */
.bp-media {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* For a 3:2 source beside a short text column: the shared 14rem floor showed
   it as a 2:1 crop at desktop, losing a quarter of the frame. */
.bp-fit--tall { min-height: 18.7rem; }

/* The canvas is drawn by the script at the foot of what-we-do.html: an
   orthographic earth, slowly turning, with the group's sea routes traced from
   the origin ports to Gdansk and on to Warsaw. */
.bp-globe { margin: 0; align-self: center; }

.bp-globe canvas {
  display: block;
  width: 100%;
  height: auto;
}

.bp-globe figcaption {
  margin-top: var(--s-3);
  color: var(--ink-3);
  font-size: var(--t-fine);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   The operating loop
   -------------------------------------------------------------------------- */

.bp-loop {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Two-up before four-up: inside a .row body the four tracks measured 120px
   each at 900px, wrapping the descriptions to 20-character ribbons. */
@media (min-width: 52em) {
  .bp-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
}

@media (min-width: 62em) {
  .bp-loop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bp-node { padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); }

.bp-node__name {
  font-family: var(--sans);
  font-size: var(--t-fine);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The sequence must survive greyscale and a vertical stack, so each station
   carries its ordinal, in the same numeral convention as the chain. */
.bp-node__name::before {
  content: attr(data-step) " \00B7 ";
  color: var(--accent-deep);
  letter-spacing: 0.1em;
}

.bp-node__what { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--t-fine); line-height: 1.55; }

/* The return leg: an accent rule genuinely running back under the whole row,
   with only the sentence held to the measure. */
.bp-loop__back {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--accent);
  color: var(--ink-2);
  font-size: var(--t-small);
}

.bp-loop__back-text { display: block; max-width: var(--measure); }

.bp-loop__back b { font-weight: 500; color: var(--ink); }

.bp-loop__back b::before { content: "\21A9 "; }

/* --------------------------------------------------------------------------
   Ambition: three numbered steps

   Inside .section--dark, which reassigns --ink / --rule / --accent locally,
   so these rules invert with the band without naming a single dark colour.
   -------------------------------------------------------------------------- */

.bp-steps {
  display: grid;
  gap: var(--s-7);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 46em) {
  .bp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); }
}

/* The hairline IS the component boundary here, so it takes the structural
   token every sibling register uses; the quiet one measured 1.36:1 on the
   dark band. */
.bp-step { padding-top: var(--s-5); border-top: 1px solid var(--rule-strong); }

.bp-step__no {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  color: var(--accent);
}

.bp-step__place {
  margin-top: var(--s-4);
  font-family: var(--sans);
  font-size: var(--t-fine);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.bp-step__what { margin-top: var(--s-2); color: var(--ink-2); }

.bp-steps__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* The path headline is a three-beat list; 16ch broke it inside beat two.
   20ch lets each line end on a beat. */
#path.display { max-width: 20ch; }

/* --------------------------------------------------------------------------
   Retail formats without imagery

   On the homepage and what-we-do each format is anchored by a photograph.
   Where the sizes stand alone, a hairline does that job instead.
   -------------------------------------------------------------------------- */

.bp-formats--bare .format {
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-strong);
}

.bp-formats--bare .format__name { margin-top: 0; }

/* --------------------------------------------------------------------------
   Contact: the enquiry routes
   -------------------------------------------------------------------------- */

.bp-routes {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(2rem, 4vw, 3rem);
  /* Held near the text column: at full shell the two tracks sat 2x wider
     than the form they introduce, leaving half the viewport empty. */
  max-width: 44rem;
}

@media (min-width: 46em) {
  .bp-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
}

.bp-route { padding-top: var(--s-3); border-top: 1px solid var(--rule); }

.bp-route__name { font-size: var(--t-body); }

.bp-route__what { margin-top: var(--s-1); color: var(--ink-3); font-size: var(--t-small); }

/* The two routes that act (a real address) against the four that describe. */
.bp-route--action { border-top-color: var(--rule-strong); }

.bp-route--action .bp-route__name { color: var(--accent-deep); }

/* The address is the control: give it a thumb-height box on narrow screens. */
@media (max-width: 62.5em) {
  .bp-route__what .link { display: inline-block; padding-block: 0.85rem; }
}

/* --------------------------------------------------------------------------
   Privacy and legal: one screen, plain

   Section headings are set as quiet labels rather than headlines. These pages
   are meant to be read once and believed, not designed.
   -------------------------------------------------------------------------- */

/* Held to the lede's own 32rem so the page keeps one right edge. */
.bp-plain { max-width: 32rem; }

/* Quiet, but never quieter than the text it heads: a label one step up from
   fine, in full ink, still reads as a label rather than a headline. */
.bp-plain h2 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  scroll-margin-top: var(--s-6);
}

.bp-plain p { color: var(--ink-2); }

.bp-plain p + p { margin-top: var(--s-4); }

.bp-stamp {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
}