/* Greenwich Mercantile · homepage data flow.

   "The right data reaches the border before your goods do." A navy band straight after the platform
   stack, with an illustration laid on it like a drawing on a desk: a cream plate holding a small
   isometric world in the same paper-model style as the stack above it. The systems a
   customer already runs (01) send their documents into the Greenwich platform (02), a licensed
   customs broker stamps the entry pack (03) and it reaches the U.S. border (04) before the
   container truck does. data-flow.js draws and animates it; this file frames and colours it.

   Layout: wide above 1100px; mid from 700px to 1100px (the same drawing with icon-only tiles);
   tall on phones, a portrait drawing on an edge-to-edge plate. data-flow.js reads --gm-flow-mode,
   so the breakpoints live here only. Without script, a poster of the same drawing covers the scene.

   Colour: canonical Greenwich tokens only (navy, midnight, cream, paper, slate). Shading is navy
   mixed into paper, and black into navy, never a new hue. The one exception is the warning tone
   from the shared base.css, used only for the flagged document. The site-wide readability pass
   in config.js forces .eyebrow and .arrow-link to slate with !important, which is near-invisible
   on navy, so this section restates both with !important at a higher specificity. */

.gm-flow {
    position: relative;
    overflow: hidden;
    --gm-flow-warn: #92600A;
}
/* A faint drafting grid on the band, fading out towards the edges. */
.gm-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(250, 250, 248, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 250, 248, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 62%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 62%, #000 30%, transparent 100%);
}
.gm-flow .section-inner { position: relative; }

/* ---- Head -------------------------------------------------------------------------------- */
.gm-flow__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2rem;
    margin-bottom: 3.25rem;
}
.gm-flow__head h2 { max-width: 760px; color: var(--gm-cream); }
.gm-flow .eyebrow { color: rgba(250, 250, 248, 0.72) !important; }
.gm-flow .eyebrow::before { background: rgba(250, 250, 248, 0.34); }
.gm-flow .arrow-link { color: var(--gm-cream) !important; }
.gm-flow__lede {
    max-width: 700px;
    margin: 1.25rem 0 0;
    color: rgba(250, 250, 248, 0.78);
    line-height: 1.7;
    font-size: 1rem;
}

/* ---- The plate --------------------------------------------------------------------------- */
.gm-flow__plate {
    position: relative;
    margin: 0;
    background: var(--gm-cream);
    box-shadow: 0 1px 0 rgba(250, 250, 248, 0.08), 0 48px 96px -52px rgba(0, 0, 0, 0.75);
}
.gm-flow__scene {
    --gm-flow-mode: wide;
    position: relative;
    width: 100%;
    aspect-ratio: 2.6 / 1;
}
/* Without script, the poster (the same drawing at one moment) covers the empty scene. */
.gm-flow__poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gm-scene {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    font-feature-settings: "lnum" 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
/* The drawing is scaled into the plate by one transform; its lines keep their weight. */
.gm-scene__root * { vector-effect: non-scaling-stroke; }
/* Type on the models is set small and scaled up with the drawing: without this, font hinting at
   the small size breaks the letter spacing. */
.gm-scene text { text-rendering: geometricPrecision; }

/* ---- Materials --------------------------------------------------------------------------- */
.gm-scene .gs polygon {
    stroke-width: 1;
    stroke-linejoin: round;
}
.gm-scene .t-paper polygon { stroke: var(--gm-navy); }
.gm-scene .t-paper .f-top { fill: var(--gm-paper); }
.gm-scene .t-paper .f-front {
    fill: #FBFBFA;
    fill: color-mix(in srgb, var(--gm-navy) 1.4%, var(--gm-paper));
}
.gm-scene .t-paper .f-side {
    fill: #E3E6E9;
    fill: color-mix(in srgb, var(--gm-navy) 11%, var(--gm-paper));
}
.gm-scene .t-navy polygon { stroke: rgba(250, 250, 248, 0.2); }
.gm-scene .t-navy .f-top { fill: var(--gm-midnight); }
.gm-scene .t-navy .f-front { fill: var(--gm-navy); }
.gm-scene .t-navy .f-side {
    fill: #070F1C;
    fill: color-mix(in srgb, #000000 30%, var(--gm-navy));
}

.gs-shadow {
    fill: var(--gm-navy);
    fill-opacity: 0.075;
    stroke: none;
}

/* ground */
.gs-grid line {
    stroke: var(--gm-navy);
    stroke-opacity: 0.055;
    stroke-width: 1;
}
.gs-water {
    fill: #E8EAED;
    fill: color-mix(in srgb, var(--gm-navy) 8%, var(--gm-cream));
}
.gs-ripples line {
    stroke: var(--gm-navy);
    stroke-opacity: 0.2;
    stroke-width: 1;
    stroke-linecap: round;
}
.gs-quay {
    fill: #D3D7DC;
    fill: color-mix(in srgb, var(--gm-navy) 17%, var(--gm-cream));
}
.gs-edge {
    stroke: var(--gm-navy);
    stroke-opacity: 0.5;
    stroke-width: 1;
}
.gs-road {
    fill: #EBEDEF;
    fill: color-mix(in srgb, var(--gm-navy) 6.5%, var(--gm-cream));
}
.gs-road-edge {
    stroke: var(--gm-navy);
    stroke-opacity: 0.18;
    stroke-width: 1;
}
.gs-road-dash {
    stroke: var(--gm-paper);
    stroke-width: 2;
    stroke-linecap: round;
}
.gs-stop {
    stroke: var(--gm-navy);
    stroke-opacity: 0.35;
    stroke-width: 2;
}

/* the platform and the record */
.gs-pgrid line {
    stroke: var(--gm-navy);
    stroke-opacity: 0.08;
    stroke-width: 1;
}
.gs-scan {
    fill: var(--gm-navy);
    fill-opacity: 0.13;
    stroke: none;
}
.gs-scan-line {
    stroke: var(--gm-navy);
    stroke-width: 2;
    stroke-linecap: round;
}

/* type on the models */
.gs-face-serif {
    font-family: var(--gm-font-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    fill: var(--gm-navy);
}
.gs-face-sans {
    font-family: var(--gm-font-sans);
    font-weight: 600;
    letter-spacing: 0.2em;
    fill: var(--gm-navy);
}
.gs-face-num {
    font-family: var(--gm-font-sans);
    font-weight: 600;
    letter-spacing: 0.08em;
    fill: var(--gm-navy);
    fill-opacity: 0.5;
}
.gs-on-navy { fill: var(--gm-cream); }
.gs-face-num.gs-on-navy { fill-opacity: 0.55; }
.gs-tile-name {
    font-family: var(--gm-font-sans);
    font-weight: 500;
    letter-spacing: 0.01em;
    fill: var(--gm-navy);
}
.gs-logo { color: var(--gm-navy); }

/* the ship */
.gs-deck {
    fill: var(--gm-midnight);
    stroke: rgba(250, 250, 248, 0.2);
    stroke-width: 1;
}
.gs-hold { fill: #02060D; stroke: none; }
.gs-waterline {
    stroke: var(--gm-cream);
    stroke-opacity: 0.38;
    stroke-width: 1;
}
.gs-window { fill: var(--gm-navy); }
.gs-ribs line {
    stroke: var(--gm-navy);
    stroke-opacity: 0.2;
    stroke-width: 1;
}
.t-navy .gs-ribs line,
.gs-container .t-navy + .gs-ribs line {
    stroke: var(--gm-cream);
    stroke-opacity: 0.16;
}

/* the crane and the trucks */
.gs-cable {
    stroke: var(--gm-navy);
    stroke-width: 1;
}
.gs-cab-glass {
    fill: #C9CED6;
    fill: color-mix(in srgb, var(--gm-navy) 22%, var(--gm-paper));
}
.gs-wheel { fill: #050B14; }
.gs-hub { fill: var(--gm-cream); fill-opacity: 0.7; }

/* the border */
.gs-glass {
    fill: #D0D5DC;
    fill: color-mix(in srgb, var(--gm-navy) 20%, var(--gm-paper));
    stroke: var(--gm-navy);
    stroke-width: 1;
}
.gs-fascia { fill: var(--gm-navy); }
.gs-pole {
    stroke: var(--gm-navy);
    stroke-width: 1.6;
    stroke-linecap: round;
}
.gs-flag-dark { fill: var(--gm-navy); }
.gs-flag-light { fill: var(--gm-paper); }
.gs-arm-base {
    stroke: var(--gm-navy);
    stroke-width: 5;
    stroke-linecap: round;
}
.gs-arm-light {
    stroke: var(--gm-paper);
    stroke-width: 3;
}
.gs-arm-dark {
    stroke: var(--gm-navy);
    stroke-width: 3;
}
.gs-signal-box {
    fill: var(--gm-navy);
    stroke: var(--gm-navy);
    stroke-width: 1;
}
.gs-signal-tick {
    fill: none;
    stroke: var(--gm-navy);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    visibility: hidden;
}
.gs-signal.is-on .gs-signal-box { fill: var(--gm-paper); }
.gs-signal.is-on .gs-signal-tick { visibility: visible; }

/* documents, packs and routes */
.gs-route circle {
    fill: var(--gm-navy);
    fill-opacity: 0.36;
}
.gs-trail circle { fill: var(--gm-navy); }
.gs-doc-sheet {
    fill: var(--gm-paper);
    stroke: var(--gm-navy);
    stroke-width: 1;
    stroke-linejoin: round;
}
.gs-doc-lines {
    fill: none;
    stroke: var(--gm-navy);
    stroke-opacity: 0.45;
    stroke-width: 1;
    stroke-linecap: round;
}
.gs-doc.is-flagged .gs-doc-sheet { stroke: var(--gm-flow-warn); }
.gs-doc-flag circle { fill: var(--gm-flow-warn); }
.gs-doc-flag path {
    fill: none;
    stroke: var(--gm-paper);
    stroke-width: 1.6;
    stroke-linecap: round;
}
.gs-ready-disc {
    fill: var(--gm-navy);
    stroke: var(--gm-paper);
    stroke-width: 1.5;
}
.gs-ready-tick {
    fill: none;
    stroke: var(--gm-cream);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gs-ready-stem {
    stroke: var(--gm-navy);
    stroke-opacity: 0.35;
    stroke-width: 1;
    stroke-dasharray: 2 2;
}
.gs-seal circle {
    fill: none;
    stroke: var(--gm-navy);
    stroke-width: 1.2;
}

/* the broker's office windows */
.gs-bwin {
    fill: rgba(250, 250, 248, 0.1);
    stroke: rgba(250, 250, 248, 0.24);
    stroke-width: 1;
}
.gs-bmull {
    stroke: rgba(250, 250, 248, 0.24);
    stroke-width: 1;
}

/* ---- Legend and note --------------------------------------------------------------------- */
.gm-flow__legend {
    list-style: none;
    margin: 2.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}
.gm-flow__legend li {
    margin: 0;
    max-width: 34ch;
    color: rgba(250, 250, 248, 0.7);
    font-size: 0.86rem;
    line-height: 1.65;
}
.gm-flow__legend-k {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.55rem;
    font-family: var(--gm-font-sans);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 250, 248, 0.56);
    line-height: 1.5;
}
.gm-flow__legend-k span {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--gm-cream);
    font-weight: 600;
}
.gm-flow__note {
    margin: 3rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(250, 250, 248, 0.14);
    color: rgba(250, 250, 248, 0.5);
    font-size: 0.72rem;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .gm-flow__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
    .gm-flow__scene { --gm-flow-mode: mid; }
}

@media (max-width: 699.98px) {
    .gm-flow__head { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.25rem; }
    /* The plate runs edge to edge on phones. The homepage clips every .section-inner on small
       screens to stop sideways scrolling; here the section itself clips at the screen edge, so the
       inner wrapper may let the plate out to it. */
    .gm-flow .section-inner { overflow: visible; }
    .gm-flow__plate {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
    }
    .gm-flow__scene {
        --gm-flow-mode: tall;
        aspect-ratio: 0.9 / 1;
    }
    .gm-flow__legend { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.25rem; }
}

/* Reduced motion: data-flow.js draws one still moment; nothing here animates. */
@media (prefers-reduced-motion: reduce) {
    .gm-flow *,
    .gm-flow *::before,
    .gm-flow *::after {
        animation: none;
        transition: none;
    }
}