/* Design-system pieces the theme had no equivalent for, used by the R&D Center and
   Sustainability 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; }

/* --- RTL mirror --- */
.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; }
}