/* Design-system pieces the theme had no equivalent for, used by the R&D Center,
   Sustainability and Become a Supplier templates. Everything else in those pages maps
   to existing classes:
     DS MediaCard      -> .card1.alt
     DS SquareHeading  -> .highlight1
     DS Section rules  -> .border-top1 (lavender) / .border-top2 (amber)
     DS Carousel       -> .slick-wrapper1 + .slider2 (main.js binds the arrows)
   Tokens come from ds-tokens.css. RTL overrides live at the bottom of this file. */

/* --- DS SectionHeading: 160x3 accent rule under a section title --- */
.ds-rule { position: relative; padding-bottom: 36px; margin-bottom: 31px; }
.ds-rule::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--rule-heading-w); max-width: 100%; height: var(--border-w-rule); background-color: var(--rule-accent); }

/* --- Section title: one line, semibold, square marker above left. The theme's
   h1-h6 rule carries `font-weight: 600 !important`, so weight needs the same. --- */
.ds-heading { font-size: var(--fs-heading-1); font-weight: var(--fw-semibold) !important; line-height: var(--lh-tight); color: var(--text-body); }
.ds-heading.color1 { color: var(--text-accent); }

/* --- Page headline: light copy at section-title size, emphasis carried inline by
   <strong> or by a second line in <span>. `.alt` is the near-black page opener. --- */
.ds-headline { font-size: var(--fs-heading-1); font-weight: var(--fw-light) !important; line-height: var(--lh-tight); color: var(--text-body); }
.ds-headline > span { display: block; }
.ds-headline strong { font-weight: var(--fw-semibold); }
.ds-headline > span.color1 { color: var(--text-accent); font-weight: var(--fw-semibold); }
.ds-headline.alt { color: var(--text-heading); }

/* --- DS FeatureTile: the same box as `.list1 li`, but free of that list's flex
   track so it can sit in a grid column or a slider slide and keep its 1/n width.
   The media slot floats in the tile's free space; photography instead closes the
   tile's foot, flush with the border. --- */
.ds-page .ds-tile { position: relative; height: 100%; display: flex; flex-direction: column; padding: 41px 39px 30px; border: var(--border-w-hairline) solid var(--border-card); }
.ds-page .ds-tile::before { content: ""; position: absolute; left: 19px; top: 19px; width: var(--marker-sm); height: var(--marker-sm); background-color: var(--marker-square); }
/* No marker: Our Capabilities reads as a plain icon tile. */
.ds-page .ds-tile.alt { padding-top: 30px; }
.ds-page .ds-tile.alt::before { content: none; }
.ds-page .ds-tile.alt .icon { margin-top: 0; margin-bottom: 0; }
.ds-page .ds-tile.alt .h5 { margin-bottom: auto; }
.ds-page .ds-tile .h5 { color: var(--text-strong); margin-bottom: 11px; }
.ds-page .ds-tile p:last-of-type { margin-bottom: 0; }
.ds-page .ds-tile .icon { display: block; margin: auto; padding: var(--space-6) 0; width: 200px; max-width: 100%; }
.ds-page .ds-tile .icon img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ds-page .ds-tile > .figure1 { width: auto; margin: auto -39px -30px; height: 280px; }
@media (max-width: 767px) {
  .ds-page .ds-tile { padding: 34px 23px 23px; }
  .ds-page .ds-tile > .figure1 { margin: auto -23px -23px; height: 220px; }
}

/* --- Once the arrows wrap below the heading, main.css's -17px baseline nudge is
   pulling them into it. Only meaningful while they sit beside the heading. --- */
@media (max-width: 991px) {
  .ds-page .slick-wrapper1 .slick-arrows-wrapper { top: 0; }
}

/* --- Slick floats its slides, so a tile track has ragged heights. Stretch the
   track and let each slide size from the row. --- */
.ds-page .slider2 .slick-track { display: flex; }
.ds-page .slider2 .slick-slide { height: auto; }
.ds-page .slider2 .slide { height: 100%; }

/* --- Aug 2 review, page 1: the amber square pinned to a card's bottom-right is
   decoration, not a headline marker. It belongs above the card title, the way the
   feature tile carries it. --- */
.ds-page .card1.alt .content::before,
.ds-page .card1.alt:not(:has(figure)) .content::after { right: auto; bottom: auto; left: 27px; top: 20px; }
@media (max-width: 991px) {
  .ds-page .card1.alt .content::before,
  .ds-page .card1.alt:not(:has(figure)) .content::after { left: 12px; top: 12px; }
}

/* --- Photography beside body copy carries a 10px accent edge --- */
.ds-figure-accent { border-left: var(--border-w-callout) solid var(--rule-accent); }
.ds-figure-accent.alt { border-left-color: var(--rule-secondary); }

/* --- Full-width photo callout (From Laboratory to Landmark Projects) carries the
   same 10px accent edge as the inline photography. --- */
.ds-page .box1.alt:has(.bg-image) { border-left: var(--border-w-callout) solid var(--rule-accent); }
.ds-page .box1.alt:has(.bg-image) .text1,
.ds-page .box1.alt:has(.bg-image) .text1 * { color: var(--text-on-dark) !important; }

/* --- Become a Supplier: square marker set inline with the section title --- */
.ds-page .ds-heading-mark { position: relative; padding-left: 25px; }
.ds-page .ds-heading-mark::before { content: ""; position: absolute; left: 0; top: 0.34em; width: var(--marker-sm); height: var(--marker-sm); background-color: var(--marker-square); }

/* --- Commitment values: marker + title at the top, star centred in the free space --- */
.ds-page .ds-value { min-height: 221px; padding: 40px 23px 20px; }
.ds-page .ds-value .h5 { margin-bottom: 0; }
.ds-page .ds-value .ds-star { display: block; width: 78px; height: 78px; margin: auto; flex: none; }
.ds-page .ds-value .ds-star circle { stroke: var(--border-card); }
.ds-page .ds-value .ds-star path { fill: var(--primary); }

/* --- Intro CTA: filled brand button under the copy --- */
.ds-page .ds-intro .ds-headline { font-weight: var(--fw-semibold) !important; }
.ds-page .ds-intro .col-lg-8 > p { text-wrap: balance; }
.ds-page .ds-intro-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 255px; min-height: 62px; margin-top: 28px; font-size: 20px; font-weight: var(--fw-light); }

/* --- Final supply chain CTA --- */
.ds-final .h3 { color: var(--text-body); }
.ds-final-copy { max-width: 800px; }
.ds-final-copy p { font-size: var(--fs-card-body); line-height: 1.6; margin-bottom: 22px; }
.ds-final-copy p:last-child { margin-bottom: 0; }
.ds-final .btn { margin-top: 26px; }
.ds-final-inquiries { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 40px; padding-left: 30px; font-size: 18px; color: var(--gray1); }
.ds-final-inquiries__label { font-size: 20px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.ds-final-inquiries__divider { width: 1px; height: 26px; background-color: var(--primary); }
.ds-final-inquiries a { display: inline-flex; align-items: center; gap: 9px; color: var(--text-link); text-decoration: none; }
.ds-final-inquiries__email { text-decoration: underline; }
.ds-final-inquiries a i { color: var(--gray1); font-size: 18px; }
.ds-final-media { display: block; height: 100%; min-height: 320px; margin: 0; border-left: var(--border-w-callout) solid var(--rule-secondary); }
.ds-final-media img { width: 100%; height: 100%; object-fit: cover; }
.ds-final-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 320px; background-color: var(--gray4); border: 1px dashed var(--border-card); color: var(--text-muted); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; }
.ds-final-media.ds-final-placeholder { border-left: var(--border-w-callout) solid var(--rule-secondary); }

/* --- Supply chain overview copy + highlight cards --- */
.ds-chain-copy { max-width: 100%; }
.ds-chain-copy p { font-size: var(--fs-card-body); line-height: 1.6; margin-bottom: 22px; }
.ds-chain-copy p:last-child { margin-bottom: 0; }
.ds-chain-cards { margin-top: 34px; }
.ds-chain-card { position: relative; height: 100%; min-height: 443px; padding: 40px; background-color: var(--primary-dark); color: var(--white); overflow: hidden; }
.ds-chain-card__icon { display: flex; width: 56px; height: 56px; align-items: center; justify-content: center; background-color: var(--primary); color: var(--white); font-size: 24px; }
.ds-chain-card__rule { display: block; width: 60px; height: 3px; margin-top: 69px; background-color: var(--warning-dark); }
.ds-chain-card h3 { color: var(--white); font-size: 24px; margin: 91px 0 24px; }
.ds-chain-card p { color: var(--white); font-size: 16px; line-height: 1.5; margin: 0; }
.ds-chain-card::after { content: ""; position: absolute; top: 34px; right: 34px; width: 64px; height: 190px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 1.25px, transparent 1.4px); background-size: 14px 15px; pointer-events: none; }

/* --- Where We Source: card3 has no fixed media height, the carousel needs one --- */
.ds-sources .slider2 .card3 { height: 100%; margin-bottom: 0; display: flex; flex-direction: column; }
.ds-sources .card3 .figure1 { height: 340px; margin-bottom: 0; }
.ds-sources .card3 .figure1 img { height: 100%; object-fit: cover; }
.ds-sources .card3 .description { padding: 25px 0 0; }

/* --- How It Works: one rule behind the step numbers, ring on each step --- */
.ds-process { position: relative; }
.ds-process::before { content: ""; position: absolute; left: 9px; right: 0; top: 127px; height: 4px; background: linear-gradient(90deg, var(--primary) 0%, var(--white) 100%); }
.ds-step { position: relative; padding-top: 161px; }
.ds-step-num { position: absolute; left: 0; top: 0; font-size: 96px; font-weight: var(--fw-light); line-height: 1; color: var(--primary); }
.ds-step-dot { position: absolute; left: 0; top: 129px; width: 18px; height: 18px; border: 2px solid var(--primary); border-radius: 50%; background-color: var(--surface-card); transform: translateY(-50%); }
.ds-step h4 { font-size: 18px; font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: 7px; }
.ds-step p { font-size: var(--fs-card-body); margin-bottom: 0; }

/* --- CTA tiles: outline buttons, 306x77 on desktop --- */
.ds-page .ds-cta { height: 100%; }
.ds-page .ds-cta .h5 { margin-bottom: 13px; }
.ds-page .ds-cta p:last-of-type { margin-bottom: 0; }
.ds-page .ds-cta .btn { align-self: flex-start; margin-top: 28px; min-width: 306px; min-height: 77px; font-size: 22px; font-weight: var(--fw-light); display: inline-flex; align-items: center; justify-content: center; }
.btn.btn-purple-outline { background-color: transparent; color: var(--purple-light); border: 1px solid var(--purple-light); }
.btn.btn-purple-outline:hover { background-color: var(--purple-light); color: var(--white); }
.btn.btn-green-outline { background-color: transparent; color: var(--primary-dark); border: 1px solid var(--primary-dark); }
.btn.btn-green-outline:hover { background-color: var(--primary-dark); color: var(--white); }

@media (max-width: 991px) {
  .ds-process::before,
  .ds-step-dot { display: none; }
  .ds-step { padding-top: 0; }
  .ds-step-num { position: static; display: block; margin-bottom: 12px; font-size: 72px; }
  .ds-final-media, .ds-final-placeholder { min-height: 260px; }
}
@media (max-width: 767px) {
  .ds-page .ds-value { min-height: 190px; }
  .ds-page .ds-intro-btn { width: 100%; min-width: 0; }
  .ds-sources .card3 .figure1 { height: 240px; }
  .ds-page .ds-cta .btn { min-width: 0; width: 100%; min-height: 64px; font-size: 18px; }
  .ds-chain-card { min-height: 0; padding: 30px; }
  .ds-chain-card__rule { margin-top: 40px; }
  .ds-chain-card h3 { margin-top: 40px; }
  .ds-final-inquiries { padding-left: 0; gap: 16px; font-size: 16px; }
  .ds-final-inquiries__divider { display: none; }
}

/* --- RTL mirror --- */
.rtl .ds-page .ds-heading-mark { padding-left: 0; padding-right: 25px; }
.rtl .ds-page .ds-heading-mark::before { left: auto; right: 0; }
.rtl .ds-page .ds-step-num,
.rtl .ds-page .ds-step-dot { left: auto; right: 0; }
.rtl .ds-process::before { left: 0; right: 9px; background: linear-gradient(270deg, var(--primary) 0%, var(--white) 100%); }
.rtl .ds-chain-card__icon,
.rtl .ds-chain-card__rule { margin-left: auto; }
.rtl .ds-chain-card::after { right: auto; left: 30px; }
.rtl .ds-final-media { border-left: none; border-right: var(--border-w-callout) solid var(--rule-secondary); }
.rtl .ds-final-media.ds-final-placeholder { border-left: 1px dashed var(--border-card); border-right: var(--border-w-callout) solid var(--rule-secondary); }
.rtl .ds-final-inquiries { padding-left: 0; padding-right: 30px; }
.rtl .ds-rule::after { left: auto; right: 0; }
.rtl .ds-figure-accent { border-left: none; border-right: var(--border-w-callout) solid var(--rule-accent); }
.rtl .ds-figure-accent.alt { border-right-color: var(--rule-secondary); }
.rtl .ds-page .box1.alt:has(.bg-image) { border-left: none; border-right: var(--border-w-callout) solid var(--rule-accent); }
.rtl .ds-page .ds-tile::before { left: auto; right: 19px; }
.rtl .ds-page .card1.alt .content::before,
.rtl .ds-page .card1.alt:not(:has(figure)) .content::after { left: auto; right: 27px; }
@media (max-width: 991px) {
  .rtl .ds-page .card1.alt .content::before,
  .rtl .ds-page .card1.alt:not(:has(figure)) .content::after { right: 12px; }
}