:root {
  --orange: #e94f25;
  --ink: #1a1a1a;
  --gray-bg: #f4f4f4;
  --footer-bg: #1a1a1a;
  --footer-text: #cfcfcf;
  --font: "Century Gothic", CenturyGothic, AppleGothic, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #fff; color: var(--orange); padding: 0.75em 1.25em;
}
.skip-link:focus { left: 0.5em; top: 0.5em; }

/* ---------------- Header ---------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: transparent;
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1em 1.5em;
}
.site-logo img { height: 44px; width: auto; }
.nav-hamburger {
  background: none; border: none; cursor: pointer; padding: 0.5em;
  display: flex; flex-direction: column; gap: 5px; z-index: 501;
}
.nav-hamburger span { width: 28px; height: 2px; background: #fff; display: block; }

/* ---------------- Full-screen overlay menu ----------------
   Confirmed live (2026-09-21): the overlay panel slides in from the right
   (transform:translateX(100%) -> 0, ~600ms cubic-bezier) rather than a hard
   show/hide, the hamburger fades/slides out of view while scrolling down and
   returns on scroll-up (matches the header's own "Scroll Back" style), and
   the logo in the fixed header fades out while the menu is open. See
   site.js's IIFE below for the matching behavior. */
.main-menu {
  position: fixed; inset: 0; z-index: 900; background: #fff; overflow-y: auto;
  transform: translateX(100%);
  transition: transform 600ms cubic-bezier(.76,0,.18,1), visibility 0s linear 600ms;
  visibility: hidden;
}
.main-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 600ms cubic-bezier(.76,0,.18,1), visibility 0s;
}
/* [hidden] keeps its native display:none while fully closed; site.js clears the
   attribute right before adding .is-open so the slide-in transition can run, and
   restores it ~600ms after removing .is-open (matches live's own timing). */
@media (prefers-reduced-motion: reduce) {
  .main-menu { transition: none !important; }
}
body.menu-locked { overflow: hidden; }
/* the fixed-header logo fades out while the overlay menu is open, matching live */
.site-logo { transition: opacity 340ms ease; }
body.menu-locked .site-header .site-logo { opacity: 0; }
.nav-hamburger {
  transition: transform 340ms cubic-bezier(.4,0,.2,1), opacity 300ms ease;
}
/* hides on scroll-down, returns on scroll-up -- matches live's custom hamburger */
.nav-hamburger.hb-hide { transform: translateY(-140%); opacity: 0; pointer-events: none; }
body.menu-locked .nav-hamburger { opacity: 0; pointer-events: none; }
.main-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1em 1.5em; background: var(--orange);
  position: relative; overflow: hidden;
}
.main-menu-header::after {
  content: ""; position: absolute; top: -40%; right: -10%; width: 40%; height: 220%;
  background: rgba(255,255,255,0.12); transform: rotate(20deg);
}
.main-menu-header .site-logo img { height: 40px; }
.main-menu-close { background: none; border: none; color: #fff; cursor: pointer; padding: 0.5em; position: relative; z-index: 1; }
.main-menu-body { display: block; }
.main-menu-nav { padding: 1em 1.5em 0; max-width: 640px; margin: 0 auto; }
.main-menu-nav > ul { list-style: none; margin: 0; padding: 0; }
/* Desktop-only "featured portfolio" hero slider in the menu's right column.
   Confirmed live (2026-09-21): live's .dse-featured is display:none below 1024px,
   display:flex at/above it (own #dse-menu grid, not ours) -- matched here with the
   same 1024px cutoff on our own simpler flex layout. See MENU_FEATURED_SLIDES /
   _menu_featured_html() in this file for the content/config source. */
.main-menu-featured { display: none; }
@media (min-width: 1024px) {
  .main-menu-body { display: flex; align-items: flex-start; gap: 3em; max-width: 1180px; margin: 0 auto; padding: 0 1.5em; }
  .main-menu-nav { flex: 0 0 360px; padding-top: 2em; margin: 0; }
  .main-menu-featured { display: block; flex: 1 1 auto; padding-top: 2em; min-width: 0; }
}
.menu-hero {
  position: relative; width: 100%; height: 420px; background: #000; overflow: hidden;
  border-radius: 2px;
}
@media (min-width: 1280px) { .menu-hero { height: 480px; } }
.menu-hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity .8s ease-in-out; display: flex;
  align-items: center; justify-content: flex-start; z-index: 1;
}
.menu-hero-slide.is-active { opacity: 1; z-index: 2; }
.menu-hero-slide::before {
  content: ""; position: absolute; inset: 0; background: #000; opacity: .6; z-index: 1;
}
.menu-hero-content { position: relative; z-index: 2; max-width: 420px; padding: 0 40px; }
.menu-hero-title {
  color: #fff; font-family: var(--font); font-size: 24px; line-height: 1.2;
  margin: 0 0 16px; font-weight: 700; text-transform: capitalize;
}
@media (min-width: 1280px) { .menu-hero-title { font-size: 28px; } }
.menu-hero-btn {
  display: inline-block; padding: 12px 26px; background: var(--orange); color: #fff;
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 13px;
  border-radius: 2px; transition: background .2s;
}
.menu-hero-btn:hover { background: rgba(233,79,37,.85); }
.menu-hero-arrows { position: absolute; z-index: 5; display: flex; gap: 8px; bottom: 25px; right: 20px; }
.menu-hero-arrow {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #fff; border: none; border-radius: 0; cursor: pointer;
  font-size: 20px; line-height: 1; transition: background .2s;
}
.menu-hero-arrow:hover { background: rgba(0,0,0,.6); }
.menu-hero-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: hsla(0,0%,100%,.15); z-index: 5; overflow: hidden; }
.menu-hero-progress-bar { height: 100%; width: 0; background: var(--orange); transition: width .4s ease; }
.menu-hero-dots { position: absolute; z-index: 5; left: 40px; bottom: 45px; display: flex; gap: 10px; }
.menu-hero-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0;
  background: hsla(0,0%,100%,.4); cursor: pointer; transition: background .2s;
}
.menu-hero-dot.is-active { background: var(--orange); }
.menu-item > a, .menu-folder-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; border-bottom: 1px solid #e6e6e6;
  cursor: pointer; font-family: var(--font); font-size: 1.3rem; color: var(--ink);
  text-align: left; padding: 0.85em 0; text-decoration: none;
}
.menu-item > a:hover, .menu-folder-toggle:hover { color: var(--orange); }
.menu-plus { position: relative; width: 14px; height: 14px; flex: none; }
.menu-plus::before, .menu-plus::after {
  content: ""; position: absolute; background: var(--ink); transition: transform 0.15s ease;
}
.menu-plus::before { top: 6px; left: 0; width: 14px; height: 2px; }
.menu-plus::after { top: 0; left: 6px; width: 2px; height: 14px; }
.menu-folder-toggle[aria-expanded="true"] .menu-plus::after { transform: scaleY(0); }
.menu-panel { list-style: none; margin: 0; padding: 0 0 0.75em 1em; }
.menu-panel[hidden] { display: none; }
.menu-panel li a {
  display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0;
  font-size: 1rem; color: #444;
}
.menu-panel li a:hover { color: var(--orange); }
.menu-panel-icon { width: 28px; height: 28px; object-fit: contain; }
.menu-panel--contact { padding-left: 0; }
.menu-contact-row { display: flex; gap: 0.4em; padding: 0.4em 0; font-size: 0.95rem; color: #444; }
.menu-contact-row a { color: var(--orange); }
.menu-contact-full a { display: inline-block; padding: 0.6em 0; font-weight: 700; color: var(--orange); }
.main-menu-footer { max-width: 640px; margin: 1em auto 0; padding: 1.5em; background: var(--orange); }
.main-menu-social { display: flex; gap: 0.6em; justify-content: center; }
.main-menu-legal { display: flex; gap: 0.6em; justify-content: center; margin-top: 1em; }
.main-menu-legal a { color: #fff; font-size: 0.9rem; }
.social-icon {
  width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}

/* ---------------- Footer ---------------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); position: relative; overflow: hidden; }
.site-footer-newsletter { background: #262626; padding: 2.5em 1.5em; text-align: center; }
.site-footer-newsletter h2 { color: #fff; margin: 0 0 0.3em; font-size: 1.4rem; }
.site-footer-newsletter p { margin: 0 0 1em; }
.newsletter-form { display: flex; gap: 0.5em; max-width: 420px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.newsletter-form input { flex: 1 1 220px; padding: 0.7em 1em; border: 1px solid #555; background: #1a1a1a; color: #fff; }
.newsletter-form button { padding: 0.7em 1.4em; background: var(--orange); color: #fff; border: none; cursor: pointer; font-family: var(--font); }
.site-footer-watermark { position: absolute; right: -5%; bottom: -10%; width: 40%; opacity: 0.06; pointer-events: none; }
.site-footer-inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto; padding: 3.5em 1.5em 2em;
  display: grid; grid-template-columns: 1fr; gap: 2.5em; text-align: center;
}
@media (min-width: 800px) {
  .site-footer-inner { grid-template-columns: 1fr 1.3fr 1.3fr 1fr; align-items: start; text-align: left; }
}
.footer-logo img { height: 60px; margin: 0 auto; filter: brightness(0) invert(1); }
@media (min-width: 800px) { .footer-logo img { margin: 0; } }
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 0.6em; }
.footer-nav a { color: #fff; font-weight: 400; }
.footer-nav a:hover { color: var(--orange); }
.footer-nav-heading { color: var(--orange); font-weight: 700; margin-top: 0.8em; }
.footer-contact h2 { color: var(--orange); font-size: 1.1rem; margin: 0 0 0.6em; }
.footer-contact ul { list-style: none; margin: 0; padding: 0; }
.footer-contact li { margin-bottom: 0.5em; font-size: 0.95rem; }
.footer-contact-city { color: #fff; }
.footer-contact a { color: var(--footer-text); }
.footer-contact a:hover { color: var(--orange); }
.footer-legal-line { margin: 0 0 0.8em; font-size: 0.9rem; }
.footer-legal-line a { text-decoration: underline; }
.footer-social-icons { display: flex; gap: 0.6em; justify-content: center; }
@media (min-width: 800px) { .footer-social-icons { justify-content: flex-start; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------- Shared page-content patterns (used across build_*.py) ---------------- */
main { overflow-x: hidden; }
.page-title {
  margin: 0; padding: 5.5em 1.5em 1.2em; max-width: 1100px; margin: 0 auto;
  color: var(--orange); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 400;
}
.section { padding: 3.5em 1.5em; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-inner--split { display: grid; gap: 2em; align-items: center; }
@media (min-width: 800px) { .section-inner--split { grid-template-columns: 1fr 1fr; } }
.section h2 { color: var(--orange); font-size: 1.9rem; margin: 0 0 0.6em; letter-spacing: 0.02em; }
.section p { max-width: 70ch; }
.section--proof, .section--esop { text-align: center; }
.section--proof .section-inner, .section--esop .section-inner { max-width: 720px; margin: 0 auto; }
.btn {
  display: inline-block; padding: 0.7em 1.4em; font-family: var(--font); font-weight: 400;
  text-decoration: none; margin-top: 0.75em;
}
.btn--orange { background: var(--orange); color: #fff; }
.btn--orange:hover { background: #c9401d; }

.hero { position: relative; min-height: 100vh; color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; background: #111; }
.hero-media iframe {
  position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw;
  min-height: 100%; min-width: 100%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center;
  padding: 6em 1.5em 2em;
}
.hero-content h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 400; max-width: 14ch; margin: 0; }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2em; text-align: center; }
@media (min-width: 800px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat img { height: 56px; margin: 0 auto 0.75em; }
.stat strong { display: block; color: var(--orange); font-size: 2.4rem; font-weight: 400; }
.stat-label { display: block; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; }
/* stat-number/-prefix/-suffix are inline spans inside <strong> and inherit its
   orange/size styling -- they only exist as separate nodes so the count-up JS
   (site.js) can target/animate just the numeric part, matching live's own
   <span data-wm-plugin="countup"> + static prefix/suffix span pattern. */

.dna-map { width: 100%; }
.section--dna em { font-style: normal; color: var(--orange); }

.portfolio-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em; }
@media (min-width: 800px) { .portfolio-tiles { grid-template-columns: repeat(4, 1fr); } }
.portfolio-tile { text-align: center; color: var(--ink); }
.portfolio-tile img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 0.75em; }
.portfolio-tile h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.portfolio-tile:hover h3 { color: var(--orange); }

/* Confirmed live (2026-09-21): this row is a Squarespace "Carousel List" section
   enhanced with the squarerefresh.xyz image-scroll plugin (Flickity under the
   hood) -- a horizontally drag/swipe-scrollable strip, not a static wrapping
   flex row. Recreated here with native CSS scroll-snap (drag-to-scroll via
   cursor/pointer handling in site.js) rather than pulling in Flickity, since a
   native-scroll strip gives the same user-facing behavior (drag/swipe, momentum,
   snap) without an extra ~40KB dependency. */
.member-logos {
  list-style: none; display: flex; gap: 1.5em; margin: 0; padding: 0.5em 0.25em;
  overflow-x: auto; scroll-snap-type: x proximity; cursor: grab;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.member-logos.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.member-logos li { flex: 0 0 auto; scroll-snap-align: start; }
.member-logos img { height: 60px; width: auto; }
@media (min-width: 900px) {
  .member-logos { flex-wrap: wrap; overflow-x: visible; justify-content: center; cursor: auto; }
}

/* Generic prose/list patterns for interior pages */
.prose { max-width: 780px; }
.prose p { margin: 0 0 1.2em; }
.two-col-list { display: grid; gap: 2em; }
@media (min-width: 700px) { .two-col-list { grid-template-columns: 1fr 1fr; } }
.two-col-list h3 { color: var(--orange); margin-bottom: 0.5em; }
.two-col-list ul { margin: 0; padding-left: 1.2em; }
.two-col-list li { margin-bottom: 0.4em; }
.values-grid { display: grid; gap: 1.5em; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .values-grid { grid-template-columns: repeat(5, 1fr); } }
.values-grid h3 { color: var(--orange); margin: 0 0 0.4em; }
.approach-steps { display: grid; gap: 1.5em; }
@media (min-width: 800px) { .approach-steps { grid-template-columns: repeat(2, 1fr); } }
.approach-step h3 { color: var(--orange); margin: 0 0 0.4em; }
.testimonial { max-width: 780px; margin: 0 auto 2em; text-align: center; }
.testimonial p { font-style: italic; }
.testimonial cite { display: block; margin-top: 0.75em; font-style: normal; font-weight: 700; }
.people-grid { display: grid; gap: 2em; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.people-grid h3 { margin: 0 0 0.2em; }
.people-grid span { color: var(--orange); font-size: 0.9rem; }
.project-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; }
.project-list a { display: block; padding: 0.6em 0; border-bottom: 1px solid #eee; }
.project-list a:hover { color: var(--orange); }
.pull-quote { border-left: 4px solid var(--orange); padding-left: 1.2em; font-size: 1.2rem; font-style: italic; margin: 2em 0; }
.pull-quote cite { display: block; margin-top: 0.5em; font-style: normal; font-weight: 700; font-size: 0.9rem; }
.office-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5em; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.office-list h3 { color: var(--orange); margin: 0 0 0.4em; }
.office-list address { font-style: normal; margin: 0 0 0.4em; }
.value-tiles { display: grid; gap: 1.5em; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.value-tiles h3 { color: var(--orange); }
form.static-form { display: grid; gap: 1em; max-width: 640px; }
form.static-form label { font-weight: 700; display: block; margin-bottom: 0.3em; }
form.static-form input, form.static-form textarea, form.static-form select {
  width: 100%; padding: 0.6em; border: 1px solid #ccc; font-family: var(--font);
}
form.static-form fieldset { border: 1px solid #ddd; padding: 1em; }
form.static-form .checkbox-row { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.4em; }
form.static-form button[type="submit"] { justify-self: start; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2em; }
.news-list li { border-bottom: 1px solid #eee; padding-bottom: 1.2em; }
.news-list time { display: block; color: var(--orange); font-size: 0.85rem; margin-bottom: 0.3em; }
.news-list a.news-title { font-size: 1.1rem; font-weight: 700; }
.news-list a.news-title:hover { color: var(--orange); }

/* Portfolio case-study detail pages (build_portfolio_cases.py) */
.case-meta { color: var(--orange); font-weight: 700; font-size: 1.05rem; margin: 0 0 1em; }
.case-pdf-link { display: inline-block; margin-top: 0.5em; }
/* Confirmed live (2026-09-21) at 375/768/1440px: the case-study project gallery is a
   FIXED 2-column grid at every breakpoint (not 2/3/4 responsive columns) with large
   ~16:9 tiles (e.g. 658.8x371.6px measured at 1440px wide) -- corrected from an
   earlier, unverified 2/3/4-column assumption. */
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8em; grid-template-columns: repeat(2, 1fr); }
.gallery-grid li { margin: 0; }
.gallery-grid a { display: block; cursor: zoom-in; }
.gallery-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* ---- Case-study gallery lightbox ----
   Confirmed live (2026-09-21): clicking a case-study gallery photo opens Squarespace's
   own native full-screen lightbox in-page (URL gains ?itemId=..., prev/next arrows,
   close button) -- NOT a new-tab image link. Recreated natively here (site.js) since
   the live behavior is Squarespace's own compiled site-bundle.js, not a discrete
   loadable third-party script. */
.dse-lightbox {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.97);
  opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.dse-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 260ms ease, visibility 0s; }
body.lightbox-locked { overflow: hidden; }
.dse-lightbox-figure { max-width: 92vw; max-height: 86vh; margin: 0; display: flex; }
.dse-lightbox-figure img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; display: block; margin: auto; }
.dse-lightbox-close, .dse-lightbox-prev, .dse-lightbox-next {
  position: fixed; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 0.5em;
}
.dse-lightbox-close:hover, .dse-lightbox-prev:hover, .dse-lightbox-next:hover { color: var(--orange); }
.dse-lightbox-close { top: 1.2em; right: 1.2em; }
.dse-lightbox-prev { left: 0.6em; top: 50%; transform: translateY(-50%); }
.dse-lightbox-next { right: 0.6em; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .dse-lightbox-prev, .dse-lightbox-next { display: none; } }

.case-pagination { display: flex; justify-content: space-between; gap: 1em; max-width: 1100px; margin: 0 auto; padding: 0 1.5em; flex-wrap: wrap; }
.case-pagination a { text-decoration: none; }
.case-pagination a:hover { color: var(--orange); }
.case-pagination .pag-label { display: block; font-size: 0.75rem; text-transform: uppercase; color: #888; }

/* Portfolio category pages' own project gallery (build_portfolio.py) --
   real live layout is a Squarespace image-only gallery grid (square images,
   visible caption under each), not a text link list. */
.portfolio-gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .portfolio-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .portfolio-gallery-grid--cols-6 { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1000px) { .portfolio-gallery-grid:not(.portfolio-gallery-grid--cols-6) { grid-template-columns: repeat(5, 1fr); } }
.portfolio-gallery-grid li { margin: 0; }
.portfolio-gallery-grid a { display: block; }
.portfolio-gallery-grid .portfolio-gallery-image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.portfolio-gallery-caption { padding: 15px 0 0; text-align: left; font-size: 1em; }

/* Careers page "A Day in the Life" employee-story carousel (build_careers.py).
   Confirmed live (2026-09-21): a real willmyerscode/sectionSlider (Swiper-based)
   widget, 3 slides (video left / testimonial right), pagination dots + prev/next
   arrows, NO autoplay (live's own data-autoplay-timer="false") -- was previously
   rendered here as 3 stacked static text blocks with no video. Recreated natively
   (no Swiper dependency, same hand-rolled-chrome convention as the other widgets
   on this page). */
.dse-stories { background: rgb(117, 119, 122); padding: 3.5em 1.5em; }
.dse-stories h2, .dse-stories > .section-inner > p { color: #fff; }
.dse-stories-track { position: relative; margin-top: 1.5em; }
.dse-story-slide { display: none; }
.dse-story-slide.is-active { display: grid; gap: 1.5em; align-items: center; }
@media (min-width: 800px) { .dse-story-slide.is-active { grid-template-columns: 1fr 1fr; gap: 2.5em; } }
.dse-story-video { position: relative; padding-bottom: 56.25%; height: 0; background: #000; }
.dse-story-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dse-story-text h3 { color: #fff; font-size: 1.8rem; font-weight: 400; margin: 0 0 0.5em; }
.dse-story-text p { color: #fff; font-style: italic; }
.dse-story-text cite { display: block; margin-top: 0.6em; color: #fff; font-weight: 700; font-style: normal; }
.dse-stories-arrow {
  position: absolute; top: 30%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(233,79,37,.55); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.dse-stories-arrow:hover { background: rgba(233,79,37,.85); }
.dse-stories-arrow--prev { left: -6px; }
.dse-stories-arrow--next { right: -6px; }
@media (min-width: 800px) {
  .dse-stories-arrow { top: 50%; }
  .dse-stories-arrow--prev { left: -22px; }
  .dse-stories-arrow--next { right: -22px; }
}
.dse-stories-dots { display: flex; justify-content: center; gap: 10px; margin-top: 1.5em; }
.dse-stories-dot { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; background: hsla(0,0%,100%,.4); cursor: pointer; transition: background .2s; }
.dse-stories-dot.is-active { background: #fff; }

/* News article detail pages (build_news_articles.py) */
.article-meta { max-width: 780px; margin: 0 auto 1.5em; color: #888; font-size: 0.9rem; }
.article-meta .article-category { color: var(--orange); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; margin-right: 0.75em; }
.article-body :is(h2, h3, h4) { color: var(--orange); margin: 1.4em 0 0.5em; }
.article-body img { max-width: 100%; height: auto; display: block; margin: 1.2em 0; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 1.5em; max-width: 780px; }
.article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }