/*
  NYT Distribution screenshot-inspired responsive section
  All selectors are scoped under .distribution-page to minimize interference
  when added to an existing website.
*/
.distribution-page {
  --dist-red: #fa1028;
  --dist-dark: #090b0f;
  --dist-body: #111318;
  --dist-muted: #5b616a;
  color: var(--dist-body);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  overflow: clip;
}
*, *::before, *::after {box-sizing: border-box;}
body {margin: 0;}
.distribution-page h1,.distribution-page h2,.distribution-page h3,.distribution-page p {margin: 0;}
.distribution-page a {text-decoration: none;}
.distribution-page .container {width: min(88.5%, 1370px); margin-inline: auto;}
.distribution-page .svg-defs {position:absolute;width:0;height:0;overflow:hidden;}
.svg-defs {position:absolute;width:0;height:0;overflow:hidden;}
.distribution-page .row {display: grid;}
.distribution-page .eyebrow {font-size: 11px;font-weight: 800;letter-spacing: .165em;text-transform:uppercase;display:flex;align-items:center;gap:13px;}
.distribution-page .eyebrow--light {color:#f3f5f8;}
.distribution-page .accent-line {display:inline-block;width:34px;height:2px;background:var(--dist-red);flex:none;vertical-align:middle;}

/* Hero */
.distribution-page .dist-hero {background:#090c12;position:relative;min-height:clamp(335px,27vw,475px);color:#fff;overflow:hidden;display:flex;align-items:center;}
.distribution-page .dist-hero__photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: 77%;
    background: url('../hero-city.jpg') center center / cover no-repeat;
    transform-origin: center;
    animation: distPhotoDrift 16s ease-in-out infinite alternate;
}
.distribution-page .dist-hero__shade {position:absolute;inset:0;background:linear-gradient(90deg,#090a0e 0%,rgba(9,10,14,.99) 23%,rgba(9,10,14,.94) 33%,rgba(9,10,14,.69) 46%,rgba(9,10,14,.12) 70%,rgba(9,10,14,.04) 100%),linear-gradient(0deg,rgba(4,5,8,.38),transparent 32%);}
.distribution-page .dist-hero__container {position:relative;z-index:1;padding-block:48px 55px;}
.distribution-page .hero-copy {max-width:790px;}
.distribution-page .hero-copy h1 {margin-top:14px;font-size:clamp(36px,4.05vw,66px);line-height:1.01;letter-spacing:-.048em;font-weight:820;max-width:790px;}
.distribution-page .hero-copy h1 span {color:#fc4b58;white-space:nowrap;}
.distribution-page .hero-description {margin-top:15px;max-width:595px;font-size:clamp(13px,1.13vw,17px);line-height:1.48;color:#e6e8ea;}
.distribution-page .hero-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.distribution-page .dist-btn {display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:46px;padding:12px 24px;border:1px solid transparent;font-size:13px;font-weight:700;transition:background-color .25s,transform .25s,border-color .25s,box-shadow .25s;color:#fff;}
.distribution-page .dist-btn svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s;}
.distribution-page .dist-btn:hover {transform:translateY(-2px);}
.distribution-page .dist-btn:hover svg {transform:translateX(4px);}
.distribution-page .dist-btn:focus-visible,.distribution-page a:focus-visible,.distribution-page button:focus-visible {outline:3px solid #ffb6be;outline-offset:4px;}
.distribution-page .dist-btn--red {background:var(--dist-red);box-shadow:0 7px 20px rgba(255,0,35,.16);}
.distribution-page .dist-btn--red:hover {background:#dc001c;box-shadow:0 10px 26px rgba(255,0,35,.24);}
.distribution-page .dist-btn--outline {border-color:rgba(255,255,255,.6);background:rgba(9,9,12,.34);}
.distribution-page .dist-btn--outline:hover {border-color:#fff;background:rgba(255,255,255,.11);}

/* Four benefits */
.distribution-page .features {background:#fff;box-shadow:0 7px 21px rgba(0,0,0,.035);position:relative;z-index:2;}
.distribution-page .feature-grid {grid-template-columns:repeat(4,minmax(0,1fr));padding-block:24px;}
.distribution-page .feature-item {display:grid;grid-template-columns:62px minmax(0,1fr);gap:17px;align-items:center;padding:7px 24px;min-height:77px;border-right:1px solid #e7e9ed;}
.distribution-page .feature-item:first-child {padding-left:0;}
.distribution-page .feature-item:last-child {padding-right:0;border-right:0;}
.distribution-page .feature-icon {width:58px;height:58px;display:grid;place-items:center;transition:transform .3s;}
.distribution-page .feature-icon svg {display:block;width:48px;height:48px;fill:none;stroke:var(--dist-red);stroke-linejoin:round;stroke-linecap:round;stroke-width:2.05;}
.distribution-page .feature-item:hover .feature-icon {transform:translateY(-4px) rotate(-4deg);}
.distribution-page .feature-item h2 {font-size:14.5px;line-height:1.16;font-weight:800;letter-spacing:-.015em;}
.distribution-page .feature-item p {color:#52565b;font-size:12.5px;line-height:1.45;margin-top:6px;}

/* Process */
.distribution-page .process-section {padding:24px 0 28px;background:linear-gradient(180deg,#f4f5f7 0%,#fafbfc 72%,#f6f6f8 100%);}
.distribution-page .process-heading {display:flex;align-items:center;gap:5vw;margin-bottom:16px;}
.distribution-page .process-heading h2 {font-size:clamp(20px,1.72vw,28px);font-weight:800;letter-spacing:-.035em;white-space:nowrap;display:flex;align-items:center;gap:22px;}
.distribution-page .process-heading p {color:#3c4148;font-size:12.5px;line-height:1.42;}
.distribution-page .process-grid {grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px;row-gap:18px;}
.distribution-page .step {position:relative;background:#fff;min-height:145px;box-shadow:0 5px 23px rgba(36,44,55,.025);transition:transform .28s,box-shadow .28s;border-radius:2px;}
.distribution-page .step:hover {transform:translateY(-5px);box-shadow:0 14px 32px rgba(26,30,39,.09);z-index:2;}
.distribution-page .step-content {height:100%;padding:17px 16px 16px 66px;position:relative;}
.distribution-page .step-number {position:absolute;top:16px;left:15px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#ffe8ea;color:#ec1727;font-weight:800;font-size:13px;}
.distribution-page .step-icon {height:31px;width:31px;fill:none;stroke:var(--dist-red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.distribution-page .step h3 {font-size:14px;font-weight:800;letter-spacing:-.02em;margin-top:7px;line-height:1.23;}
.distribution-page .step p {font-size:12px;line-height:1.4;color:#5d6166;margin-top:6px;max-width:215px;}
/* The connecting arrow lives ENTIRELY in the grid gap; next card cannot cover it. */
.distribution-page .step-arrow {width:34px;height:34px;position:absolute;right:-37px;top:50%;transform:translateY(-50%);z-index:4;background:#fff;border:1px solid #ffd5dd;border-radius:50%;box-shadow:0 4px 14px rgba(213,19,48,.12);display:grid;place-items:center;pointer-events:none;transition:border-color .25s,box-shadow .25s;}
.distribution-page .step-arrow svg {width:20px;height:20px;stroke:var(--dist-red);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s;}
.distribution-page .step:hover .step-arrow {border-color:#fb8f9d;box-shadow:0 5px 17px rgba(213,19,48,.21);}
.distribution-page .step:hover .step-arrow svg {transform:translateX(2px);}

/* Lower network: editorial text + animated world map + vertical services + city photograph */
.distribution-page .network-section {position:relative;min-height:260px;background:#090c10;color:#fff;overflow:hidden;}
.distribution-page .network-photo {position:absolute;inset:0 0 0 auto;width:40%;background:url('../logostics-warehouse.jpg') center/cover no-repeat;}
.distribution-page .network-shade {position:absolute;inset:0;background:linear-gradient(90deg,#090b0e 0%,#090b0e 44%,rgba(9,11,14,.94) 57%,rgba(9,11,14,.65) 74%,rgba(9,11,14,.04) 100%);}
.distribution-page .network-layout {position:relative;z-index:1;display:grid;grid-template-columns:29% 28% 25% 18%;gap:0;align-items:center;min-height:260px;padding-block:23px 26px;}
.distribution-page .network-intro {align-self:center;padding-right:15px;}
.distribution-page .network-intro .eyebrow {font-size:10px;letter-spacing:.15em;}
.distribution-page .network-intro .accent-line {width:34px;}
.distribution-page .network-intro h2 {font-size:clamp(24px,2.16vw,36px);font-weight:800;line-height:1.07;letter-spacing:-.035em;margin-top:15px;}
.distribution-page .network-intro>p:last-child {font-size:12.3px;line-height:1.47;color:#e0e4e9;margin-top:14px;max-width:380px;}
.distribution-page .network-map {position:relative;align-self:center;width:113%;margin-left:-9%;aspect-ratio:2.4/1;}
.distribution-page .network-map img,.distribution-page .network-map svg {position:absolute;inset:0;width:100%;height:100%;}
.distribution-page .network-map img {object-fit:contain;opacity:.98;}
.distribution-page .network-map svg {overflow:visible;}
/* The dotted arcs scroll softly; glowing shipping markers actually travel along the SVG curves. */
.distribution-page .routes path {fill:none;stroke:#ff3444;stroke-width:2.8;stroke-linecap:round;stroke-dasharray:6 11;opacity:.76;animation:distRouteMove 10s linear infinite;}
.distribution-page .routes path:nth-child(2n) {animation-duration:14s;opacity:.62;}
.distribution-page .routes path:nth-child(3n) {animation-duration:12s;}
.distribution-page .network-map:not(.is-playing) .routes path {animation-play-state:paused;}
.distribution-page .route-nodes circle {fill:#ff253e;animation:distNodePulse 3.1s ease-in-out infinite;}
.distribution-page .route-nodes circle:nth-child(3n) {animation-delay:1s;}
.distribution-page .route-nodes circle:nth-child(2n) {animation-delay:1.7s;}
/* Glowing leading dot, translucent aura, concentric ring, and graduated light trail. */
.distribution-page .route-packet {pointer-events:none;filter:url(#route-glow);}
.distribution-page .route-packet-aura {fill:#ff3048;opacity:.24;}
.distribution-page .route-packet-ring {fill:none;stroke:#ffb2b9;stroke-width:1.3;opacity:.92;}
.distribution-page .route-packet-core {fill:#fff2f3;stroke:#ff3048;stroke-width:2.6;}
.distribution-page .route-packet-tail {fill:#ff3048;}
.distribution-page .route-arrival-wave {fill:none;stroke:#ff5264;stroke-width:3;opacity:.85;pointer-events:none;animation:distArrivalWave 1.15s cubic-bezier(.1,.55,.4,1) forwards;transform-box:fill-box;transform-origin:center;}
.distribution-page .route-arrival-flare {fill:#ff3b50;pointer-events:none;animation:distArrivalFlare .7s ease-out forwards;}
@keyframes distArrivalWave {0%{opacity:.95;stroke-width:4;r:9}100%{opacity:0;stroke-width:.4;r:38}}
@keyframes distArrivalFlare {0%{opacity:1}100%{opacity:0}}

.distribution-page .network-services {border-left:1px solid rgba(255,255,255,.24);padding-left:24px;padding-right:6px;}
.distribution-page .network-service {display:grid;grid-template-columns:35px minmax(0,1fr);gap:12px;align-items:start;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.11);}
.distribution-page .network-service:first-child {padding-top:0;}
.distribution-page .network-service:last-child {padding-bottom:0;border-bottom:0;}
.distribution-page .network-service>svg {width:32px;height:32px;fill:none;stroke:var(--dist-red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s;}
.distribution-page .network-service:hover>svg {transform:scale(1.13);}
.distribution-page .network-service h3 {font-size:12.4px;line-height:1.15;font-weight:800;}
.distribution-page .network-service p {font-size:11.5px;line-height:1.29;color:#e2e4e8;margin-top:3px;}

/* Buttons in demo remain functional without claiming to submit a real order. */
.distribution-page .link-dialog {padding:0;border:1px solid #ddd;border-radius:12px;max-width:min(450px,calc(100vw - 32px));box-shadow:0 20px 65px #0006;font-family:inherit;}
.distribution-page .link-dialog::backdrop {background:#000b;}
.distribution-page .dialog-card {padding:27px;position:relative;}
.distribution-page .dialog-card h2 {font-size:21px;font-weight:800;padding-right:20px;}
.distribution-page .dialog-card p {line-height:1.55;margin-top:12px;font-size:14px;color:#424752;}
.distribution-page .dialog-card code {background:#f2f3f5;padding:2px 5px;border-radius:3px;}
.distribution-page .dialog-close {position:absolute;right:15px;top:13px;background:none;border:0;color:#444;font-size:30px;cursor:pointer;}
.distribution-page .dialog-ok {margin-top:20px;border:0;background:var(--dist-red);color:#fff;font-size:13px;font-weight:700;padding:11px 20px;border-radius:3px;cursor:pointer;}

/* reveal animation only when JS is active, so no-JS users never see invisible copy */
@media (prefers-reduced-motion:no-preference) {
  .js-animated .distribution-page .reveal {opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay, 0s);}
  .js-animated .distribution-page .reveal.is-visible {opacity:1;transform:translateY(0);}
}
@keyframes distPhotoDrift {from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes distRouteMove {to{stroke-dashoffset:-120}}
@keyframes distNodePulse {0%,100%{opacity:.7;r:8}50%{opacity:1;r:11}}

@media (min-width: 1400px) {
 .distribution-page .feature-grid {padding-block:30px;}
 .distribution-page .process-section {padding-block:30px 36px;}
 .distribution-page .step {min-height:161px;}
 .distribution-page .network-layout {min-height:320px;padding-block:33px;}
}
@media (max-width: 1100px) {
 .distribution-page .feature-item {grid-template-columns:52px minmax(0,1fr);gap:10px;padding-inline:14px;}
 .distribution-page .feature-icon {width:48px;height:48px;}
 .distribution-page .feature-icon svg {width:43px;height:43px;}
 .distribution-page .feature-item h2 {font-size:13.1px;}
 .distribution-page .feature-item p {font-size:11.3px;}
 .distribution-page .process-heading {gap:35px;}
 .distribution-page .step-content {padding-left:53px;padding-right:10px;}
 .distribution-page .step-number {left:10px;}
 .distribution-page .process-grid {column-gap:32px;}
 .distribution-page .step-arrow {width:28px;height:28px;right:-30px;}
 .distribution-page .step-arrow svg {width:17px;height:17px;}
 .distribution-page .network-layout {grid-template-columns:29% 30% 28% 13%;}
 .distribution-page .network-map {width:108%;margin-left:-6%;}
 .distribution-page .network-services {padding-left:15px;}
 .distribution-page .network-service {grid-template-columns:29px minmax(0,1fr);gap:8px;}
 .distribution-page .network-service>svg {width:26px;height:26px;}
 .distribution-page .network-service p {font-size:10px;}
}
@media (max-width: 850px) {
 .distribution-page .dist-hero {min-height:430px;}
 .distribution-page .dist-hero__photo {width:100%;background-position:center;}
 .distribution-page .dist-hero__shade {background:linear-gradient(90deg,#090b0f 0%,rgba(9,11,15,.96) 39%,rgba(9,11,15,.5) 100%),linear-gradient(0deg,#090b0f,transparent 60%);}
 .distribution-page .hero-copy h1 {font-size:clamp(39px,5.9vw,53px);}
 .distribution-page .hero-description {max-width:530px;font-size:14px;}
 .distribution-page .feature-grid {grid-template-columns:repeat(2,minmax(0,1fr));padding-block:14px;row-gap:6px;}
 .distribution-page .feature-item {padding:13px 15px;}
 .distribution-page .feature-item:nth-child(2) {border-right:0;}
 .distribution-page .feature-item:nth-child(1),.distribution-page .feature-item:nth-child(2) {border-bottom:1px solid #e7e9ed;}
 .distribution-page .process-grid {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:20px;}
 .distribution-page .step {min-height:145px;}
 /* In a two-column layout, only arrows connecting cards in the SAME row appear. */
 .distribution-page .step:nth-child(2) .step-arrow {display:none;}
 .distribution-page .process-heading {align-items:flex-start;justify-content:space-between;gap:20px;}
 .distribution-page .process-heading h2 {white-space:normal;}
 .distribution-page .network-layout {grid-template-columns:1fr 1fr;gap:25px 15px;padding-block:40px;}
 .distribution-page .network-intro {max-width:410px;}
 .distribution-page .network-map {width:100%;margin:0;aspect-ratio:2.4 / 1;}
 .distribution-page .network-services {grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:0 25px;border:0;border-top:1px solid #ffffff25;padding:16px 0 0;max-width:760px;}
 .distribution-page .network-service:nth-child(3) {border-bottom:0;}
 .distribution-page .network-image-space {display:none;}
 .distribution-page .network-photo {width:66%;}
 .distribution-page .network-shade {background:linear-gradient(90deg,#090b0e 0%,rgba(9,11,14,.96) 35%,rgba(9,11,14,.8) 75%,rgba(9,11,14,.65) 100%);}
}
@media (max-width: 580px) {
 .distribution-page .container {width:min(90%, 490px);}
 .distribution-page .dist-hero {min-height:500px;align-items:flex-end;}
 .distribution-page .dist-hero__photo {inset:0;width:100%;height:70%;background-position:64% 0%;}
 .distribution-page .dist-hero__shade {background:linear-gradient(0deg,#090b0e 0%,#090b0ef5 37%,#090b0ecf 69%,#090b0e6b 100%);}
 .distribution-page .dist-hero__container {padding-block:80px 35px;}
 .distribution-page .hero-copy h1 {font-size:clamp(35px,9vw,48px);line-height:1.065;margin-top:15px;}
 .distribution-page .hero-copy h1 span {white-space:normal;}
 .distribution-page .hero-description {font-size:13px;line-height:1.55;margin-top:18px;}
 .distribution-page .hero-actions {gap:10px;margin-top:22px;}
 .distribution-page .dist-btn {padding:12px 15px;min-height:43px;gap:10px;font-size:11.5px;}
 .distribution-page .feature-grid {grid-template-columns:1fr;padding-block:9px;gap:0;}
 .distribution-page .feature-item,.distribution-page .feature-item:nth-child(2) {border-right:0;border-bottom:1px solid #edf0f2;padding:15px 0;grid-template-columns:58px 1fr;gap:17px;min-height:80px;}
 .distribution-page .feature-item:last-child {border-bottom:0;}
 .distribution-page .feature-item h2 {font-size:14.4px;}
 .distribution-page .feature-item p {font-size:12.5px;margin-top:4px;}
 .distribution-page .process-section {padding:34px 0 36px;}
 .distribution-page .process-heading {display:block;margin-bottom:20px;}
 .distribution-page .process-heading h2 {font-size:23px;gap:12px;}
 .distribution-page .process-heading .accent-line {width:26px;}
 .distribution-page .process-heading p {margin-top:9px;font-size:12px;}
 .distribution-page .desktop-break {display:none;}
 .distribution-page .process-grid {grid-template-columns:1fr;gap:30px;}
 /* Mobile reading order: one centered, downward connector between each pair. */
 .distribution-page .step-arrow {display:grid;width:30px;height:30px;right:auto;left:50%;top:auto;bottom:-30px;transform:translateX(-50%) rotate(90deg);}
 .distribution-page .step:nth-child(2) .step-arrow {display:grid;}
 .distribution-page .step:hover .step-arrow svg {transform:none;}
 .distribution-page .step {min-height:119px;}
 .distribution-page .step-content {padding:13px 16px 14px 66px;}
 .distribution-page .step-number {top:14px;left:15px;}
 .distribution-page .step-icon {height:27px;width:27px;}
 .distribution-page .step h3 {font-size:14px;margin-top:5px;}
 .distribution-page .step p {font-size:12px;max-width:340px;margin-top:4px;}
 .distribution-page .network-layout {grid-template-columns:1fr;gap:19px;padding-block:43px 45px;}
 .distribution-page .network-intro h2 {font-size:29px;}
 .distribution-page .network-intro>p:last-child {font-size:12.5px;}
 .distribution-page .network-map {width:100%;max-width:500px;aspect-ratio:2.4/1;}
 .distribution-page .network-services {grid-column:auto;grid-template-columns:1fr;gap:0;padding-top:15px;}
 .distribution-page .network-service {grid-template-columns:37px 1fr;gap:13px;padding:13px 0;}
 .distribution-page .network-service:nth-child(3) {border-bottom:1px solid #ffffff25;}
 .distribution-page .network-service>svg {width:31px;height:31px;}
 .distribution-page .network-service h3 {font-size:13px;}
 .distribution-page .network-service p {font-size:11.5px;}
 .distribution-page .network-photo {width:100%;height:36%;opacity:.53;}
 .distribution-page .network-shade {background:linear-gradient(180deg,rgba(9,11,14,.91) 0%,#090b0e 45%,rgba(9,11,14,.90) 100%);}
}
@media (prefers-reduced-motion: reduce) {
 .distribution-page *, .distribution-page *::before,.distribution-page *::after {animation:none !important;transition:none !important;scroll-behavior:auto !important;}
 .distribution-page .reveal {opacity:1 !important;transform:none !important;}
 .distribution-page .route-travellers,.distribution-page .route-arrivals {display:none !important;}
}