/* Packaging and logistics: two editorial stages, followed by one shared route. */
.logistics-section {
    background:#202625;
    color:#f4f5f2;
    overflow-wrap:break-word;
}
.logistics-header {
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
    align-items:end;
    gap:60px;
    margin-bottom:38px;
}
.logistics-header .eyebrow { padding-left:0; background:transparent; color:#bbc5be; }
.logistics-header h2 { max-width:820px; }
.logistics-header-copy { max-width:380px; justify-self:end; padding-bottom:3px; }
.logistics-header-copy>p { color:#bbc5be; font-size:15px; line-height:1.65; }
.logistics-header-copy .text-link { margin-top:20px; }
.logistics-stages {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}
.logistics-stage { min-width:0; display:flex; flex-direction:column; }
.logistics-stage-photo { position:relative; aspect-ratio:2.15; overflow:hidden; background:#d8dcd5; }
.logistics-stage-photo img { width:100%; height:100%; object-fit:cover; }
.logistics-stage-number {
    position:absolute;
    inset:0 auto auto 0;
    display:block;
    background:var(--yellow);
    color:#fff;
    padding:12px 17px;
    font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.05em;
}
.logistics-stage-copy {
    flex:1;
    display:flex;
    flex-direction:column;
    padding:29px 32px 30px;
    background:var(--paper);
    color:var(--ink);
}
.logistics-stage-kicker {
    color:#626961;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
    line-height:1.5;
    margin-bottom:13px;
}
.logistics-stage h3 { font-size:clamp(25px,2.5vw,36px); line-height:1.1; max-width:570px; }
.logistics-stage-description { max-width:540px; margin:15px 0 25px; color:#626961; font-size:14px; line-height:1.65; }
.logistics-pack-options {
    list-style:none;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin: auto 0 0;
    padding:23px 0 0;
    border-top:1px solid #cfd2cd;
}
.logistics-pack-options li { min-width:0; display:flex; align-items:center; gap:12px; }
.logistics-pack-options svg { flex-shrink:0; width:32px; height:38px; color:var(--ink); }
.logistics-pack-options strong { display:block; font-size:19px; font-weight:600; line-height:1.2; letter-spacing:-.03em; }
.logistics-pack-options small { display:block; margin-top:4px; color:#626961; font-size:11px; line-height:1.35; }
.logistics-shipping .logistics-stage-copy { background:#2b3330; color:#fff; }
.logistics-shipping .logistics-stage-kicker { color:#f27d76; }
.logistics-shipping .logistics-stage-description { color:#c7cbc6; }
.logistics-terms {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin:auto 0 0;
    padding-top:23px;
    border-top:1px solid #ffffff35;
}
.logistics-terms>div { min-width:0; }
.logistics-terms dt { font-size:22px; font-weight:500; line-height:1.2; letter-spacing:.01em; }
.logistics-terms dd { margin:5px 0 0; color:#c7cbc6; font-size:11px; line-height:1.35; }
.logistics-route {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);
    align-items:center;
    gap:40px;
    padding:28px 0;
    margin-top:32px;
    border-top:1px solid #ffffff26;
    border-bottom:1px solid #ffffff26;
}
.logistics-route-intro>span { display:block; color:#bbc5be; font-size:10px; line-height:1.4; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.logistics-route-intro>strong { display:block; margin-top:8px; font-size:21px; line-height:1.25; font-weight:500; letter-spacing:-.025em; }
.logistics-route ol {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    list-style:none;
    gap:22px;
    margin:0;
    padding:0;
}
.logistics-route li { position:relative; min-width:0; }
.logistics-route li>span:first-child {
    display:flex;
    align-items:center;
    gap:12px;
    color:#f27d76;
    font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.logistics-route li>span:first-child::after { content:''; flex:1; height:1px; background:#ffffff30; }
.logistics-route li>span:last-child { display:block; margin-top:10px; font-size:12px; line-height:1.35; font-weight:500; }
.logistics-bottom { display:flex; align-items:flex-start; justify-content:space-between; gap:40px; margin-top:22px; }
.logistics-section .logistics-note { max-width:760px; margin:0; padding:0; border:0; color:#bbc5be; font-size:11px; line-height:1.7; }
.logistics-bottom .text-link { flex-shrink:0; margin-top:0; line-height:1.7; }

@media(min-width:1600px) {
    .logistics-header { gap:90px; }
    .logistics-stage-copy { padding:32px 36px; }
}
@media(max-width:1100px) {
    .logistics-header { gap:35px; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
    .logistics-header-copy>p { font-size:14px; }
    .logistics-stage-copy { padding:26px 24px; }
    .logistics-stage h3 { font-size:29px; }
    .logistics-stage-description { font-size:13px; }
    .logistics-pack-options { gap:10px; }
    .logistics-pack-options li { gap:8px; }
    .logistics-pack-options svg { width:27px; height:32px; }
    .logistics-pack-options strong { font-size:17px; }
    .logistics-pack-options small,.logistics-terms dd { font-size:10px; }
    .logistics-route { grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr); gap:28px; }
    .logistics-route-intro>strong { font-size:19px; }
    .logistics-route ol { gap:16px; }
}
@media(max-width:850px) {
    .logistics-header { grid-template-columns:minmax(0,1fr); gap:23px; margin-bottom:30px; }
    .logistics-header h2 { max-width:700px; }
    .logistics-header-copy { max-width:580px; justify-self:start; }
    .logistics-header-copy .text-link { margin-top:15px; }
    .logistics-stages { gap:18px; }
    .logistics-stage-photo { aspect-ratio:1.7; }
    .logistics-stage-copy { padding:24px 21px; }
    .logistics-stage h3 { font-size:26px; }
    .logistics-stage-description { margin-bottom:22px; }
    .logistics-pack-options { gap:12px; }
    .logistics-pack-options li { display:block; }
    .logistics-pack-options svg { width:27px; height:31px; margin-bottom:12px; }
    .logistics-terms { gap:10px; padding-bottom:2px; }
    .logistics-route { grid-template-columns:minmax(0,1fr); gap:24px; padding:25px 0; }
    .logistics-route-intro { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 24px; }
    .logistics-route-intro>strong { margin:0; }
    .logistics-route ol { gap:24px; }
}
@media(max-width:760px) {
    .logistics-stages { grid-template-columns:minmax(0,1fr); gap:25px; }
    .logistics-stage-photo { aspect-ratio:2.1; }
    .logistics-stage-copy { padding:27px 26px; }
    .logistics-stage h3 { font-size:30px; }
    .logistics-stage-description { max-width:540px; font-size:14px; }
    .logistics-pack-options { gap:16px; }
    .logistics-pack-options li { display:flex; gap:12px; }
    .logistics-pack-options svg { width:31px; height:36px; margin:0; }
    .logistics-pack-options strong { font-size:20px; }
    .logistics-pack-options small,.logistics-terms dd { font-size:11px; }
    .logistics-terms dt { font-size:24px; }
    .logistics-bottom { flex-direction:column; gap:15px; }
}
@media(max-width:480px) {
    .logistics-header h2 { font-size:36px; }
    .logistics-stage-photo { aspect-ratio:1.65; }
    .logistics-stage-number { padding:10px 13px; font-size:10px; }
    .logistics-stage-copy { padding:25px 21px; }
    .logistics-stage-kicker { font-size:9px; margin-bottom:12px; }
    .logistics-stage h3 { font-size:28px; }
    .logistics-stage-description { font-size:13px; margin:14px 0 24px; }
    .logistics-pack-options { gap:10px; padding-top:21px; }
    .logistics-pack-options li { display:block; }
    .logistics-pack-options svg { width:27px; height:32px; margin-bottom:12px; }
    .logistics-pack-options strong { font-size:19px; }
    .logistics-pack-options small,.logistics-terms dd { font-size:10px; }
    .logistics-terms { gap:10px; padding-top:21px; }
    .logistics-terms dt { font-size:22px; }
    .logistics-route { margin-top:26px; gap:24px; }
    .logistics-route-intro { display:block; }
    .logistics-route-intro>strong { margin-top:8px; font-size:21px; }
    .logistics-route ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px; }
    .logistics-route li>span:last-child { font-size:12px; }
    .logistics-bottom { margin-top:20px; }
}
