:root{
  --container-width:1200px;
}

.container{max-width:var(--container-width);margin:0 auto;padding:0 2rem}
.container-narrow{max-width:900px;margin:0 auto;padding:0 2rem}
.container-wide{max-width:1400px;margin:0 auto;padding:0 1.5rem}

.article-intro,
.article-section,
.data-band {
  --color-green: #008350;
}

.supporting-video-label {
  --color-green: #00AD68;
}

.article-hero{position:relative;height:580px;overflow:hidden;background-color:var(--color-navy)}
.hero-image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}
.hero-image-wrapper img{width:100%;height:100%;object-fit:cover;object-position:35% center;animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1.0)}}
.hero-overlay{
  position:absolute;bottom:0;left:0;width:100%;
  background:linear-gradient(to top,rgba(4,24,51,0.97) 0%,rgba(4,24,51,0.7) 45%,rgba(4,24,51,0.15) 100%);
  z-index:1;padding:var(--spacing-xl) 0 var(--spacing-lg) 0;
}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:1rem;opacity:0;animation:fadeUp 0.6s 0.2s ease forwards}
.hero-kicker-dot{width:8px;height:8px;border-radius:50%;background:var(--color-green);animation:pulse 2.5s 1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,173,104,0.5)}60%{box-shadow:0 0 0 8px rgba(0,173,104,0)}}
.hero-kicker span{font-family:var(--font-body);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-green);font-weight:600}
.hero-text{max-width:700px}
.article-hero-title{font-family:var(--font-body);font-size:clamp(3rem,7vw,5.5rem);font-weight:700;color:white;margin-bottom:var(--spacing-sm);line-height:1.0;letter-spacing:-0.02em;opacity:0;animation:fadeUp 0.8s 0.35s ease forwards}
.article-hero-title em{font-style:normal;color:var(--color-green)}
.article-hero-subtitle{font-family:var(--font-body);font-size:1.1rem;font-weight:400;color:rgba(255,255,255,0.65);line-height:1.55;max-width:520px;opacity:0;animation:fadeUp 0.8s 0.55s ease forwards;margin-bottom:var(--spacing-md)}
.hero-scroll{position:absolute;bottom:2rem;right:3rem;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp 0.8s 1s ease forwards}
.hero-scroll span{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.25);writing-mode:vertical-rl;font-family:var(--font-body)}
.scroll-line{width:1px;height:52px;background:linear-gradient(to bottom,var(--color-green),transparent);animation:scrollAnim 2.2s ease-in-out infinite}
@keyframes scrollAnim{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.article-intro{padding:var(--spacing-xl) 0 var(--spacing-lg);background:white;border-bottom:3px solid var(--color-green)}
.intro-text{font-family:var(--font-body);font-size:1.25rem;color:var(--color-text);line-height:1.8;font-style:italic;font-weight:300}
.intro-text strong{font-weight:600;color:var(--color-green);font-style:normal}

.article-section{padding:var(--spacing-xl) 0;background:white}
.article-section.alt{background:var(--color-bg-alt)}
.article-section--flush-top{padding-top:0;padding-bottom:var(--spacing-xl)}
.article-section--no-pad{padding:0}
.section-label{display:flex;align-items:center;gap:12px;margin-bottom:var(--spacing-md)}
.section-label span{font-family:var(--font-body);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--color-green);font-weight:600;white-space:nowrap}
.section-label-line{flex:1;height:1px;background:var(--color-green-tint)}
.section-heading{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;line-height:1.15;letter-spacing:-0.01em;margin-bottom:var(--spacing-md);color:var(--color-primary)}
.section-heading--on-dark{color:white;font-family:var(--font-serif);font-size:1.9rem}
.section-heading--serif-sm{font-family:var(--font-serif);font-size:1.8rem}
.body-text p{font-family:var(--font-body);font-size:1rem;line-height:1.85;color:var(--color-text);margin-bottom:var(--spacing-md);font-weight:400}
.body-text p:last-child{margin-bottom:0}

.pull-quote-wrap{display:grid;grid-template-columns:0.8fr 1.2fr;gap:var(--spacing-xl);align-items:start;padding:var(--spacing-xl) 0;background:var(--color-bg-alt)}
.pull-quote{background:var(--color-bg-alt);padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) 0;position:relative}
.pull-quote-wrap--white{background:var(--color-bg)}
.pull-quote-wrap--white .pull-quote{background:var(--color-bg)}
.pull-quote::before{content:'\201C';font-family:Georgia,serif;font-size:6rem;font-weight:bold;color:#bbb;position:absolute;top:8px;left:0;line-height:1}
.pull-quote p{font-family:var(--font-serif);font-size:1.5rem;font-weight:600;font-style:italic;color:var(--color-primary);line-height:1.55;margin-bottom:var(--spacing-sm)}
.pull-quote p:last-child{margin-bottom:0}
.pull-quote-text p{font-family:var(--font-body);font-size:1rem;color:var(--color-text);line-height:1.8;margin-bottom:var(--spacing-md)}
.pull-quote-text p:last-child{margin-bottom:0}

.inline-quote{border-left:3px solid var(--color-green);padding:0.75rem 1.5rem;margin:var(--spacing-lg) 0;background:#f0fdf8}
.inline-quote p{font-family:var(--font-serif);font-size:1.35rem;font-weight:600;color:var(--color-primary);line-height:1.6;margin:0;font-style:italic}

.main-video-wrapper{margin-bottom:var(--spacing-xl)}
.main-video{aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;position:relative;cursor:pointer;margin-bottom:var(--spacing-sm)}
.main-video img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;opacity:0.8;transition:opacity 0.3s}
.main-video:hover img{opacity:0.6}

.main-video::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:80px;height:80px;
  border-radius:50%;
  background:rgba(255,255,255,0.88);
  box-shadow:0 2px 14px rgba(0,0,0,0.35);
  z-index:1;
  transition:transform 0.2s ease, background 0.2s ease;
}

.main-video::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-40%,-50%);
  width:0;height:0;
  border-style:solid;
  border-width:16px 0 16px 28px;
  border-color:transparent transparent transparent rgba(0,0,0,0.75);
  z-index:2;
  transition:transform 0.2s ease;
}

.main-video:hover::before{
  transform:translate(-50%,-50%) scale(1.12);
  background:rgba(255,255,255,1);
}

.main-video:hover::after{
  transform:translate(-40%,-50%) scale(1.15);
}

.play-icon{font-size:4rem;color:white;opacity:0.9;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;text-shadow:0 2px 8px rgba(0,0,0,0.5);pointer-events:none;transition:transform 0.25s}
.main-video:hover .play-icon{transform:translate(-50%,-50%) scale(1.1)}
.video-caption{font-family:var(--font-body);font-size:0.9rem;color:var(--color-text-light);font-style:italic;line-height:1.6}
.video-caption a:hover{color:#00AD68}
.video-trigger{position:relative;cursor:pointer}
.video-trigger img{width:100%;display:block}
.video-section-tight{padding-top:0;padding-bottom:1rem}
.video-wrapper-tight{margin-bottom:1rem}

.video-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);justify-content:center;align-items:center;z-index:9999}
.video-modal.open{display:flex}
.video-modal-content{width:min(1100px,92vw);max-height:82vh;aspect-ratio:16/9;position:relative}
.video-modal-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:none;border-radius:999px;background:rgba(0,0,0,0.72);backdrop-filter:blur(4px);color:white;font-size:1.8rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10001}

@media(max-width:1100px){
  .video-modal-content{width:94vw;max-height:78vh}
  .video-modal-close{top:10px;right:10px;width:40px;height:40px;font-size:1.5rem}
}

.supporting-video-wrap{border:1px solid var(--color-border);border-radius:4px;overflow:hidden;display:grid;grid-template-columns:1fr 2fr;margin-top:var(--spacing-xl)}
.supporting-video-label{background:var(--color-navy);padding:1.5rem;display:flex;flex-direction:column;justify-content:center;gap:0.5rem}
.supporting-tag{font-family:var(--font-body);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-green);font-weight:600}
.supporting-title{font-family:var(--font-body);font-size:0.95rem;font-weight:500;color:white;line-height:1.4}
.supporting-video{position:relative;cursor:pointer;overflow:hidden;aspect-ratio:16/9;background:#000}
.supporting-video img{width:100%;height:100%;object-fit:cover;opacity:0.8;transition:opacity 0.3s;display:block}
.supporting-video:hover img{opacity:0.6}
.supporting-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.95);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 24px rgba(0,0,0,0.3);transition:transform 0.2s}
.supporting-video:hover .supporting-play{transform:translate(-50%,-50%) scale(1.08)}
.supporting-play svg{margin-left:3px}
.supporting-video-source{position:absolute;bottom:0.6rem;right:0.75rem;font-family:var(--font-body);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.5);font-weight:500}

.two-column-content{display:grid;grid-template-columns:1.2fr 0.8fr;gap:var(--spacing-xl);align-items:start}
.text-column p{font-family:var(--font-body);font-size:1rem;color:var(--color-text);line-height:1.8;margin-bottom:var(--spacing-md)}
.text-column p:last-child{margin-bottom:0}
.image-column img{width:100%;border-radius:4px;margin-bottom:var(--spacing-sm)}
.image-caption{font-family:var(--font-body);font-size:0.9rem;color:var(--color-text-light);font-style:italic;text-align:center}

.blue-box-section{padding:var(--spacing-xl) 0;background:var(--color-navy)}
.blue-box-content{display:grid;grid-template-columns:1.2fr 0.8fr;gap:var(--spacing-xl);align-items:center}
.blue-text-column p{font-family:var(--font-body);font-size:1rem;color:white;line-height:1.8;margin-bottom:var(--spacing-md)}
.blue-text-column p:last-child{margin-bottom:0}
.blue-image-column img{width:100%;border-radius:4px}
.blue-box-title{font-family:var(--font-serif);font-size:2.5rem;font-weight:700;color:white;margin-bottom:var(--spacing-lg);max-width:900px;margin-left:auto;margin-right:auto}

.data-band{background:var(--color-bg-alt);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--container-width);margin:0 auto}
.data-item{padding:var(--spacing-xl) var(--spacing-lg);border-right:1px solid var(--color-border);text-align:center}
.data-item:last-child{border-right:none}
.data-num{font-family:var(--font-display);font-size:2.6rem;font-weight:700;color:var(--color-green);line-height:1;margin-bottom:0.5rem}
.data-label{font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-text-light);font-weight:500;line-height:1.5}

.full-img-wrap{position:relative;overflow:hidden}
.full-img-wrap img{width:100%;display:block;object-fit:cover;max-height:540px}
.img-caption{font-family:var(--font-body);font-size:0.85rem;color:var(--color-text-light);font-style:italic;padding:0.6rem 2rem;background:white;border-bottom:1px solid var(--color-border)}

.accent-quote-band{background:var(--color-navy);padding:var(--spacing-xl) 0}
.accent-quote-band blockquote{font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:700;font-style:italic;color:rgba(255,255,255,0.92);line-height:1.55;max-width:720px;margin:0 auto;text-align:center;position:relative;padding:0 2rem}
.accent-quote-band blockquote::before{content:'\201C';font-family:var(--font-serif);font-size:7rem;line-height:0;vertical-align:-2.5rem;color:rgba(0,173,104,0.25);margin-right:0.1rem}
.accent-quote-band cite{display:block;margin-top:var(--spacing-md);text-align:center;font-family:var(--font-body);font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:#77848D;font-style:normal}

.related-articles-section{padding:var(--spacing-xl) 0;background:#484848;--color-green:#00D17D}
.related-articles-section .section-heading{font-family:var(--font-display);font-size:2rem;font-weight:500;color:var(--color-green);margin-bottom:var(--spacing-lg);text-align:left}
.related-articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}
.related-article-card{background:transparent;overflow:hidden;cursor:pointer;transition:transform var(--transition-base)}
.related-article-card:hover{transform:none}
.related-card-image{aspect-ratio:16/9;overflow:hidden;margin-bottom:var(--spacing-sm);background:linear-gradient(145deg,var(--color-navy) 0%,#0a3560 100%);display:flex;align-items:center;justify-content:center;position:relative}
.related-card-image::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);z-index:1}
.related-card-image::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--color-green)}
.card-placeholder{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:rgba(255,255,255,0.1)}
.card-play-triangle{position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);width:0;height:0;border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent rgba(255,255,255,0.85);z-index:2}
.related-card-topic{font-family:var(--font-body);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-green);font-weight:600;margin-bottom:0.35rem}
.related-card-title{font-family:var(--font-serif);font-size:1rem;font-weight:600;color:white;margin-bottom:var(--spacing-xs);line-height:1.3}
.related-card-description{font-family:var(--font-body);font-size:0.88rem;color:rgba(255,255,255,0.75);line-height:1.6}
.related-cta{text-align:center;margin-top:var(--spacing-lg)}

.carousel-arrow{display:none}
.more-button{font-family:var(--font-body);font-size:1rem;font-weight:600;padding:1rem 2.5rem;background:#008350;color:white;border-radius:4px;transition:background var(--transition-base);text-transform:uppercase;letter-spacing:1px;cursor:pointer;display:inline-block;border:none}
.more-button:hover{background:#006840}
.related-card-image {
  cursor: pointer;
}
.related-card-image::before {
  transition: transform 0.2s ease, background 0.2s ease;
}
.related-card-image:hover::before {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(255,255,255,0.25);
}
.related-card-image img {
  width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;
  transition: filter 0.2s ease;
}
.related-card-image:hover img {
  filter: brightness(0.75);
}
.card-play-triangle {
  transition: transform 0.2s ease;
}
.related-card-image:hover .card-play-triangle {
  transform: translate(-40%, -50%) scale(1.15);
}
a.related-card-content {
  display: block;
  text-decoration: none;
  padding-top: 0.35rem;
}
.related-card-title {
  transition: color 0.2s ease;
}
a.related-card-content:hover .related-card-title {
  color: var(--color-green);
}
.card-arrow {
  margin-left: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-green);
  opacity: 0;
  transition: opacity 0.2s ease;
}
a.related-card-content:hover .card-arrow {
  opacity: 1;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

.reveal{opacity:0;transform:translateY(16px);transition:opacity 0.4s ease-out,transform 0.4s ease-out;will-change:opacity,transform}
.reveal.in{opacity:1;transform:translateY(0)}

.article-section.alt.tight {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.two-column-content.single-column,
.blue-box-content.single-column {
  grid-template-columns: 1fr;
}

.related-articles-grid .related-article-card:nth-child(n+5) {
  display: none;
}

.related-articles-grid.expanded .related-article-card {
  display: block;
}

.pull-quote-text .section-heading{
  font-family:var(--font-serif);
  font-size:2rem;
  font-weight:600;
  color:var(--color-primary);
  margin-bottom:var(--spacing-md);
  line-height:1.3;
}

.pull-quote-wrap--reversed{
  grid-template-columns:1.2fr 0.8fr;
}

.two-column-content--reversed{
  grid-template-columns:0.8fr 1.2fr;
}

.portrait-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--spacing-md);
  margin-bottom:var(--spacing-lg);
}
.portrait-item{
  text-align:center;
}
.portrait-item img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center top;
  border-radius:4px;
  filter:grayscale(100%);
  opacity:0.85;
  transition:opacity 0.3s ease;
  margin-bottom:0.5rem;
}
.portrait-item:hover img{
  opacity:1;
}
.portrait-name{
  font-family:var(--font-body);
  font-size:0.8rem;
  font-weight:600;
  color:white;
  margin-bottom:0.15rem;
}
.portrait-role{
  font-family:var(--font-body);
  font-size:0.72rem;
  font-weight:400;
  color:rgba(0,210,160,0.75);
  letter-spacing:0.04em;
  margin-bottom:0.2rem;
}
.portrait-date{
  font-family:var(--font-body);
  font-size:0.75rem;
  color:rgba(255,255,255,0.4);
  letter-spacing:0.05em;
}

.alerts-section{
  background:var(--color-navy);
  padding:var(--spacing-xl) 0;
}
.alerts-section .section-label span{
  color:var(--color-green-light);
}
.alerts-section .section-label-line{
  background:var(--color-green-tint);
}
.alerts-intro{
  font-family:var(--font-body);
  font-size:0.95rem;
  color:rgba(255,255,255,0.45);
  line-height:1.7;
  max-width:640px;
  margin-bottom:var(--spacing-lg);
}

.principles-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--spacing-lg);
  margin-top:var(--spacing-lg);
}
.principle-item{
  border-top:2px solid rgba(0,173,104,0.3);
  padding-top:var(--spacing-md);
}
.principle-number{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:700;
  color:rgba(0,173,104,0.4);
  line-height:1;
  margin-bottom:0.5rem;
}
.principle-title{
  font-family:var(--font-body);
  font-size:0.9rem;
  font-weight:600;
  color:white;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:var(--spacing-sm);
}
.principle-item p{
  font-family:var(--font-body);
  font-size:0.9rem;
  color:rgba(255,255,255,0.65);
  line-height:1.75;
}

cite.image-credit {
  font-family: var(--font-sans, 'Raleway', sans-serif);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.timeline-section{
  background:var(--color-navy);
  padding:var(--spacing-xl) 0;
}
.timeline-section .section-label span{
  color:var(--color-green-light);
}
.timeline-section .section-label-line{
  background:var(--color-green-tint);
}
.timeline-intro{
  font-family:var(--font-body);
  font-size:0.95rem;
  color:rgba(255,255,255,0.45);
  line-height:1.7;
  max-width:640px;
  margin-bottom:var(--spacing-lg);
}

.pull-quote-centred{
  text-align:center;
  padding:var(--spacing-md) 0;
  max-width:680px;
  margin:0 auto;
}
.pull-quote-centred p:first-child{
  font-family:var(--font-serif);
  font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:600;
  font-style:italic;
  color:var(--color-primary);
  line-height:1.55;
  margin-bottom:var(--spacing-lg);
}
.pull-quote-centred p:not(:first-child){
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--color-text);
  line-height:1.8;
  margin-bottom:var(--spacing-md);
  text-align:left;
}
.pull-quote-centred p:last-child{
  margin-bottom:0;
}
.pull-quote-centred-rule{
  width:48px;
  height:2px;
  background:var(--color-green);
  margin:0 auto var(--spacing-lg);
}

.qubit-diagram{
  width:100%;
  display:block;
  border-radius:4px;
  aspect-ratio:450/685;
  object-fit:contain;
  object-position:center top;
}

.mobile-static-visual,.mobile-static-caption{display:none}

@media(max-width:640px){

  #timeline-canvas,#alerts-canvas{
    display:none!important;
  }
  .mobile-static-visual{
    display:block;
    width:100%;
    border-radius:4px;
  }
  .mobile-static-caption{
    display:block;
    font-family:var(--font-body);
    font-size:0.85rem;
    color:var(--color-text-light);
    margin-top:0.75rem;
    line-height:1.5;
  }

  .article-hero{
    height:420px;
  }
  .hero-image-wrapper img{
    object-position:center top;
  }
  .hero-scroll{
    display:none;
  }


  .pull-quote-wrap{
    grid-template-columns:1fr;
    gap:var(--spacing-md);
    padding:var(--spacing-lg) 0;
  }
  .pull-quote{
    order:2;
    padding:2.75rem var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
  }
  .pull-quote::before{
    font-size:4rem;
    top:-0.25rem;
    left:var(--spacing-sm);
  }
  .pull-quote p{
    font-size:1.25rem;
  }
  .pull-quote-text{
    order:1;
    padding:0 var(--spacing-sm);
  }


  .two-column-content,
  .two-column-content--reversed,
  .blue-box-content{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
  }
  .blue-box-title{
    font-size:1.9rem;
  }


  .supporting-video-wrap{
    grid-template-columns:1fr;
  }
  .supporting-video-label{
    padding:1rem 1.25rem;
  }


  .data-band{
    grid-template-columns:1fr;
  }
  .data-item{
    border-right:none;
    border-bottom:1px solid var(--color-border);
    padding:var(--spacing-md) var(--spacing-md);
  }
  .data-item:last-child{
    border-bottom:none;
  }


  .portrait-strip{
    grid-template-columns:repeat(2,1fr);
    gap:var(--spacing-sm);
  }


  .related-articles-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:var(--spacing-sm);
    padding:0 var(--carousel-edge, 64px) var(--spacing-xs);

    scroll-padding-left:var(--carousel-edge, 64px);
    scroll-padding-right:var(--carousel-edge, 64px);
    scrollbar-width:none;
  }
  .related-articles-grid::-webkit-scrollbar{
    display:none;
  }
  .related-articles-grid .related-article-card{
    flex:0 0 78%;
    max-width:300px;
    scroll-snap-align:start;
  }

  .related-articles-grid .related-article-card:nth-child(n+5){
    display:block;
  }

  .related-cta{
    display:none;
  }


  .carousel-wrap{
    --carousel-edge: 64px;
    position:relative;
    margin:0 calc(var(--spacing-md) * -1);
  }

  .carousel-wrap::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:var(--carousel-edge);
    background:linear-gradient(to left, rgba(72,72,72,0), rgba(72,72,72,0.95));
    pointer-events:none;
    z-index:1;
    transition:opacity 0.2s ease;
  }

  .carousel-wrap::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:var(--carousel-edge);
    background:linear-gradient(to right, rgba(72,72,72,0), rgba(72,72,72,0.95));
    pointer-events:none;
    z-index:1;
    transition:opacity 0.2s ease;
  }
  .carousel-wrap:has(.carousel-arrow--prev:disabled)::before{
    opacity:0;
  }
  .carousel-wrap:has(.carousel-arrow--next:disabled)::after{
    opacity:0;
  }


  .carousel-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:0;
    bottom:0;
    width:var(--carousel-edge, 64px);
    border:none;
    background:none;
    color:white;
    font-size:1.3rem;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    z-index:2;
    transition:opacity 0.2s ease;
  }
  .carousel-arrow::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:38px;
    height:38px;
    border-radius:6px;
    background:rgba(4,24,51,0.85);
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
    z-index:-1;
  }
  .carousel-arrow--prev{ left:0; }
  .carousel-arrow--next{ right:0; }
  .carousel-arrow:disabled{
    opacity:0;
    cursor:default;
    pointer-events:none;
  }


  .related-articles-grid .related-card-image::before,
  .related-articles-grid .card-play-triangle{
    display:none;
  }


  .principles-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-md);
  }
}