/* Shared by: quality, container, lithium export, spare parts, about. Page-only rules live in each page's own file. */

/* rhythm: bands and section padding */
.c2-dark{background:var(--asphalt);color:var(--white)}
.c2-mist{background:var(--haze-3)}
.c2-sec{padding-block:clamp(64px,8vw,112px)}
.c2-dark+.c2-dark{border-top:1px solid var(--asphalt-2)}
.c2-sec[id]{scroll-margin-top:64px}
.c2-h{font:600 clamp(2.2rem,3.6vw,3.4rem)/1 var(--d);text-transform:uppercase;max-width:18ch;text-wrap:balance}
.c2-lede{margin-top:18px;font-size:1.15rem;line-height:1.55;max-width:58ch}
.c2-dark .c2-lede{color:var(--haze-2)}
.c2-p{margin-top:14px;max-width:64ch;color:var(--ink-2)}
.c2-dark .c2-p{color:var(--haze)}
.c2-dark .note-line{border-top-color:var(--asphalt-3);color:var(--haze)}
.c2-dark .note-line .link,.c2-dark .link{color:var(--white)}
.c2-dark .mini-h{color:var(--white)}
.c2-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.c2-head .c2-lede{margin-top:0}

/* stepnav without numbers: labels only */
.stepnav.c2-nav a{padding-inline:12px}

/* two columns, media and copy */
.c2-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4vw,72px);align-items:center}
.c2-split.wide-media{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.c2-split.wide-copy{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.c2-split.top{align-items:start}
.c2-fig{margin:0}
.c2-fig img,.c2-fig video{width:100%;height:auto}
.c2-fig.cover img{aspect-ratio:4/3;object-fit:cover}
.c2-fig.tall img{aspect-ratio:4/5;object-fit:cover}
.c2-fig.plate{background:#fff;padding:clamp(12px,2vw,24px)}
.c2-fig.plate img{object-fit:contain}
.c2-fig figcaption{font-size:.82rem;color:var(--ink-2);padding-top:10px;max-width:70ch}
.c2-dark .c2-fig figcaption{color:var(--haze)}
.c2-sticky{position:sticky;top:72px}

/* vertical frame for portrait supplier clips (plain frame, no device mockup) */
.c2-phone{margin:0;justify-self:center;width:min(100%,340px)}
.c2-phone .bezel{position:relative;aspect-ratio:9/16;border-radius:2px;padding:0;background:var(--asphalt);overflow:hidden}
.c2-phone video,.c2-phone img{width:100%;height:100%;object-fit:cover;border-radius:0;background:var(--asphalt-2)}
.c2-phone figcaption{font-size:.82rem;color:var(--haze);padding-top:14px;text-align:center}

/* numbered vertical path (light or dark) */
.c2-path{list-style:none;padding:0;counter-reset:c2p}
.c2-path>li{position:relative;padding:0 0 30px 64px;counter-increment:c2p}
.c2-path>li::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:3px;background:var(--rule)}
.c2-dark .c2-path>li::before{background:var(--asphalt-3)}
.c2-path>li:last-child{padding-bottom:0}
.c2-path>li:last-child::before{height:22px}
.c2-path>li::after{content:counter(c2p);position:absolute;left:0;top:-4px;width:41px;height:41px;border-radius:50%;display:grid;place-items:center;font:600 1.05rem/1 var(--d);background:var(--haze-2);border:3px solid var(--amber);color:var(--ink)}
.c2-dark .c2-path>li::after{background:var(--asphalt);color:var(--white)}
.c2-path h3{font:600 clamp(1.35rem,1.9vw,1.65rem)/1.05 var(--d);text-transform:uppercase}
.c2-path p{margin-top:6px;color:var(--ink-2);max-width:56ch}
.c2-dark .c2-path p{color:var(--haze)}

/* ledger on dark */
.c2-dark .ledger{border-top-color:var(--white)}
.c2-dark .ledger div{border-bottom-color:var(--asphalt-3)}
.c2-dark .ledger dd{color:var(--haze)}
.c2-dark .ledger dd .link{color:var(--white)}

/* gallery: one large, the rest small */
.c2-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,14vw,220px);gap:10px}
.c2-gallery figure{margin:0;position:relative;overflow:hidden;background:#fff}
.c2-gallery figure.big{grid-column:span 2;grid-row:span 2}
.c2-gallery figure.wide{grid-column:span 2}
.c2-gallery img{width:100%;height:100%;object-fit:cover}
.c2-gallery .contain img{object-fit:contain;padding:10px}
.c2-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;font-size:.78rem;color:var(--white);background:linear-gradient(180deg,rgba(31,36,39,0),rgba(31,36,39,.78))}
.c2-gallery .contain figcaption{background:none;color:var(--ink-2)}

/* photo cards, three across */
.c2-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.c2-cards li{display:flex;flex-direction:column;background:var(--asphalt-2)}
.c2-cards.light li{background:#fff}
.c2-cards figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#fff}
.c2-cards figure img{width:100%;height:100%;object-fit:cover}
.c2-cards figure.contain img{object-fit:contain;padding:12px}
.c2-cards .body{padding:20px 22px 24px}
.c2-cards h3{font:600 1.55rem/1.02 var(--d);text-transform:uppercase}
.c2-cards p{margin-top:10px;color:var(--haze);font-size:.95rem}
.c2-cards.light p{color:var(--ink-2)}
.c2-cards .fig-n{display:block;margin-top:14px;font:600 2.2rem/1 var(--d);color:var(--amber);font-variant-numeric:tabular-nums}
.c2-cards .fig-n small{font:500 .82rem/1.3 var(--f);color:var(--haze);display:block;margin-top:4px}
.c2-cards.light .fig-n small{color:var(--ink-2)}

/* can / cannot pair */
.c2-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.c2-pair h3{font:600 1.35rem/1.05 var(--d);text-transform:uppercase;margin-bottom:10px}
.c2-dark .ticks{border-top-color:var(--white)}
.c2-dark .ticks li{border-bottom-color:var(--asphalt-3);color:var(--haze-2)}

/* matrix table (documents, roles) */
.c2-scroll{overflow-x:auto}
.c2-matrix{width:100%;min-width:760px;border-collapse:collapse;font-variant-numeric:tabular-nums;background:#fff}
.c2-matrix th,.c2-matrix td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--haze-2);font-size:.93rem}
.c2-matrix thead th{font:600 1.1rem/1.05 var(--d);text-transform:uppercase;border-bottom:2px solid var(--ink);vertical-align:bottom}
.c2-matrix tbody th{font-weight:600}
.c2-matrix tbody th a{font:600 1.25rem/1.05 var(--d);text-transform:uppercase;text-decoration:none}
.c2-matrix tbody th a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px}
.c2-matrix tbody th small{display:block;font-size:.8rem;font-weight:500;color:var(--ink-2);margin-top:3px}
.c2-matrix .ns{color:var(--ink-2);font-size:.86rem;outline:1px dashed var(--asphalt-3);outline-offset:-7px}
.c2-matrix .has{font-weight:600}
.c2-matrix .has::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--amber);border-radius:1px;vertical-align:1px}
.c2-matrix img{width:84px;height:56px;object-fit:contain;display:inline-block;vertical-align:middle;margin-right:12px}

/* lanes: two side-by-side routes, light version of .lane */
.c2-lanes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.c2-lane{display:flex;flex-direction:column;background:#fff}
.c2-dark .c2-lane{background:var(--asphalt-2)}
.c2-lane figure{margin:0;aspect-ratio:16/9;overflow:hidden}
.c2-lane figure img{width:100%;height:100%;object-fit:cover}
.c2-lane .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.c2-lane h3{font:600 1.75rem/1 var(--d);text-transform:uppercase}
.c2-lane ul,.c2-lane ol{margin-top:12px;padding-left:1.2em;color:var(--ink-2)}
.c2-dark .c2-lane ul,.c2-dark .c2-lane ol{color:var(--haze-2)}
.c2-lane li{padding:4px 0}
.c2-lane li::marker{color:var(--amber);font-weight:600}
.c2-lane .foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-2)}
.c2-lane ul+.foot,.c2-lane ol+.foot{margin-top:18px}
.c2-dark .c2-lane .foot{border-top-color:var(--asphalt-3);color:var(--haze)}

/* related tiles, FAQ in the closing light band */
.c2-close .faq-group{max-width:820px}

@media (max-width:1000px){
  .c2-split,.c2-split.wide-media,.c2-split.wide-copy,.c2-head,.c2-lanes{grid-template-columns:1fr}
  .c2-sticky{position:relative;top:auto}
  .c2-cards{grid-template-columns:1fr 1fr}
  .c2-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .c2-cards,.c2-pair{grid-template-columns:1fr}
  .c2-gallery{grid-auto-rows:150px}
  .c2-gallery figure.big{grid-column:span 2;grid-row:span 1}
  .c2-phone{width:min(100%,280px)}
  .c2-path>li{padding-left:56px}
}
.c2-sec:not(.c2-dark) .c2-phone figcaption{color:var(--ink-2)}