@import url('./colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg-1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); }

/* ---------- utility bar ---------- */
.utility-bar { background: var(--hardi-navy-700); color: var(--fg-on-dark-2); font-size: var(--fs-13); border-bottom: 1px solid rgba(255,255,255,0.06); }
.utility-bar .inner { max-width: var(--container-max); margin: 0 auto; padding: 8px var(--container-pad); display: flex; gap: 22px; align-items: center; white-space: nowrap; }
.utility-bar a { color: var(--fg-on-dark-2); }
.utility-bar a:hover { color: #fff; }
.utility-bar .spacer { margin-left: auto; }
.utility-bar .pill { background: var(--hardi-accent); color: #fff; padding: 3px 10px; border-radius: var(--r-pill); font-weight: var(--w-semi); font-size: 12px; letter-spacing: 0.02em; flex-shrink: 0; }
@media (max-width: 720px) {
  .utility-bar { font-size: 12px; }
  .utility-bar .inner { gap: 14px; padding: 7px var(--container-pad); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .utility-bar .inner::-webkit-scrollbar { display: none; }
  .utility-bar .util-secondary { display: none; }
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--hairline); }
.site-header .inner { max-width: var(--container-max); margin: 0 auto; padding: 14px var(--container-pad); display: flex; align-items: center; gap: 32px; }
.site-header .logo img { height: 32px; }
.site-header nav { display: flex; gap: 24px; align-items: center; }
.site-header nav a { color: var(--fg-1); font-weight: var(--w-semi); font-size: var(--fs-15); padding: 6px 0; border-bottom: 2px solid transparent; transition: all 200ms; cursor: pointer; }
.site-header nav a:hover, .site-header nav a.active { color: var(--hardi-accent); border-bottom-color: var(--hardi-accent); }
.site-header .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.site-header .icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--fg-1); }
.site-header .icon-btn:hover { background: var(--hardi-navy-50); color: var(--hardi-accent); }

/* mobile nav */
.menu-toggle { display: none; }
@media (max-width: 920px) {
  .site-header .inner { padding: 12px var(--container-pad); gap: 12px; }
  .site-header .logo img { height: 26px; }
  .site-header nav { display: none; }
  .site-header nav.open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 16px var(--container-pad); gap: 16px; }
  .menu-toggle { display: inline-flex; }
  .site-header .actions .btn:not(.btn-accent):not(.menu-toggle) { display: none; }
  .site-header .actions .btn-accent { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 480px) {
  .site-header .actions .btn-accent { display: none; }
}

/* ---------- buttons ---------- */
.btn { font-family: var(--font-body); font-weight: var(--w-semi); font-size: var(--fs-14); letter-spacing: 0.02em; padding: 10px 18px; border-radius: var(--r-md); border: 1px solid transparent; transition: all 200ms cubic-bezier(0.2,0,0,1); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--hardi-navy); color: #fff; }
.btn-primary:hover { background: var(--hardi-navy-500); color: #fff; }
.btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: #fff; }
.btn-accent { background: var(--hardi-accent); color: #fff; }
.btn-accent:hover { background: var(--hardi-accent-700); color: #fff; }
.btn-ghost { background: transparent; color: var(--hardi-navy); }
.btn-ghost:hover { color: var(--hardi-accent); }
.btn-outline-navy { background: #fff; color: var(--hardi-navy); border-color: var(--hardi-navy); }
.btn-outline-navy:hover { background: var(--hardi-navy-50); color: var(--hardi-navy); }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; min-height: 620px; display: flex; align-items: center; background: var(--hardi-navy); }
.hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.hero .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 700ms var(--ease-standard); }
.hero .bg-video.is-ready { opacity: 1; }
.hero .overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(22,48,57,0.92) 0%, rgba(29,60,71,0.78) 50%, rgba(29,60,71,0.55) 100%); z-index: 2; }
.hero .inner { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .hero .bg-video { display: none; }
}
.hero .inner { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 100px var(--container-pad) 80px; width: 100%; }
@media (max-width: 720px) {
  .hero { min-height: 540px; }
  .hero .inner { padding: 60px var(--container-pad) 56px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero p.lead { font-size: var(--fs-16); margin: 18px 0 24px; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { justify-content: center; }
  .hero .eyebrow-tag { font-size: 11px; padding: 5px 12px; }
}
.hero .eyebrow-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(196,106,58,0.15); color: var(--hardi-accent-100); border: 1px solid rgba(196,106,58,0.4); padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: var(--w-semi); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 24px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0; max-width: 18ch; }
.hero h1 em { font-style: italic; color: var(--hardi-accent-500); }
.hero p.lead { color: var(--fg-on-dark-2); max-width: 60ch; font-size: var(--fs-20); line-height: 1.55; margin: 28px 0 36px; font-weight: var(--w-light); }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .award { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; gap: 16px; max-width: 540px; }
.hero .award .icon { width: 44px; height: 44px; flex-shrink: 0; background: rgba(196,106,58,0.2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--hardi-accent-500); }
.hero .award .text { font-size: var(--fs-14); color: var(--fg-on-dark-2); line-height: 1.5; }
.hero .award strong { color: #fff; font-weight: var(--w-semi); }

/* ---------- section ---------- */
.section { max-width: var(--container-max); margin: 0 auto; padding: 96px var(--container-pad); }
.section.tight { padding: 64px var(--container-pad); }
.section-head { margin-bottom: 48px; max-width: 720px; }
.section-head .eyebrow { margin-bottom: 12px; display: inline-block; }
.section-head h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; margin: 0 0 16px; color: var(--fg-1); line-height: 1.15; letter-spacing: -0.01em; }
.section-head p { font-size: var(--fs-18); color: var(--fg-2); line-height: 1.55; margin: 0; }

/* ---------- mission band ---------- */
.mission-band { background: var(--bg); border-bottom: 1px solid var(--hairline); }
.mission-band .inner { max-width: 980px; margin: 0 auto; padding: 96px var(--container-pad); }
.mission-band .eyebrow { display: inline-block; margin-bottom: 18px; }
.mission-band h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); font-weight: 600; margin: 0 0 24px; color: var(--fg-1); line-height: 1.18; letter-spacing: -0.01em; max-width: 22ch; }
.mission-band h2 em { font-style: italic; color: var(--hardi-accent); font-weight: 600; }
.mission-band p { font-size: var(--fs-20); line-height: 1.6; color: var(--fg-2); max-width: 60ch; margin: 0 0 28px; }
.mission-band .learn-more { display: inline-flex; align-items: center; gap: 8px; color: var(--hardi-accent); font-weight: var(--w-semi); font-size: var(--fs-15); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid var(--hardi-accent); }
.mission-band .learn-more:hover { color: var(--hardi-accent-700); border-color: var(--hardi-accent-700); }

/* ---------- countries strip ---------- */
.countries-strip { background: var(--hardi-navy); color: var(--fg-on-dark-2); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.countries-strip .inner { max-width: var(--container-max); margin: 0 auto; padding: 40px var(--container-pad); display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.countries-strip .label { font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.18em; color: var(--hardi-accent-500); flex-shrink: 0; }
.countries-strip .list { display: flex; flex-wrap: wrap; gap: 8px 18px; flex-grow: 1; }
.countries-strip .country { font-family: var(--font-body); font-size: var(--fs-14); color: var(--fg-on-dark-2); position: relative; padding: 4px 0; font-weight: var(--w-med); }
.countries-strip .country:not(:last-child)::after { content: '·'; margin-left: 18px; color: var(--hardi-navy-300); }

/* ---------- filter chips ---------- */
.filter-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-chips .chip { font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--w-semi); padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: #fff; color: var(--fg-2); cursor: pointer; transition: all 200ms; }
.filter-chips .chip:hover { border-color: var(--hardi-navy); color: var(--hardi-navy); }
.filter-chips .chip.active { background: var(--hardi-navy); border-color: var(--hardi-navy); color: #fff; }

/* ---------- press band ---------- */
.press-band { background: #fff; border-top: 1px solid var(--hairline); }
.press-band .inner { max-width: var(--container-max); margin: 0 auto; padding: 64px var(--container-pad); display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 920px) { .press-band .inner { grid-template-columns: 1fr; } }
.press-band .eyebrow { display: inline-block; margin-bottom: 12px; }
.press-band h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; margin: 0 0 16px; color: var(--fg-1); line-height: 1.25; max-width: 28ch; }
.press-band p { font-size: var(--fs-16); color: var(--fg-2); line-height: 1.6; margin: 0; max-width: 56ch; }
.press-band .action { display: flex; justify-content: flex-end; }
@media (max-width: 920px) { .press-band .action { justify-content: flex-start; } }

/* ---------- pillars ---------- */
.pillars-section { background: var(--bg); }
.pillars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 720px) { .pillars-grid { grid-template-columns: 1fr; } }
.pillar { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; transition: box-shadow 200ms, transform 200ms; display: flex; flex-direction: column; cursor: pointer; }
.pillar:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.pillar .pillar-img { position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; }
.pillar .pillar-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,60,71,0.15) 0%, rgba(29,60,71,0.55) 100%); }
.pillar .num-overlay { position: absolute; bottom: 14px; right: 18px; font-family: var(--font-display); font-size: 56px; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1; letter-spacing: -0.02em; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.pillar .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--hardi-navy-50); color: var(--hardi-navy); border-radius: var(--r-md); margin-bottom: 16px; }
.pillar .icon svg { width: 22px; height: 22px; }
.pillar .body { padding: 24px 28px 28px; }
.pillar h3 { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 600; margin: 0 0 12px; color: var(--fg-1); }
.pillar p { font-size: var(--fs-15); color: var(--fg-2); line-height: 1.6; margin: 0; }
.pillar .more { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; color: var(--hardi-accent); font-weight: var(--w-semi); font-size: var(--fs-14); }

/* ---------- stats ---------- */
.stats-band { background: var(--hardi-navy); color: #fff; }
.stats-band .inner { max-width: var(--container-max); margin: 0 auto; padding: 80px var(--container-pad); }
.stats-band .label { font-family: var(--font-body); color: var(--hardi-accent-500); text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--fs-13); font-weight: 600; }
.stats-band h2 { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 600; margin: 8px 0 40px; color: #fff; max-width: 28ch; line-height: 1.2; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 920px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat .num { font-family: var(--font-display); font-size: 60px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.stat .num em { font-style: normal; color: var(--hardi-accent-500); }
.stat .desc { color: var(--fg-on-dark-2); font-size: var(--fs-14); margin-top: 12px; line-height: 1.5; }

/* ---------- insights ---------- */
.insights-section { background: var(--bg-alt); }
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 920px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .insights-grid { grid-template-columns: 1fr; } }
.insight { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; transition: box-shadow 200ms, transform 200ms; cursor: pointer; display: flex; flex-direction: column; }
.insight:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.insight .img { aspect-ratio: 16/9; background: var(--hardi-navy-100); position: relative; overflow: hidden; }
.insight .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(29,60,71,0.5)); }
.insight .img.g0 { background: linear-gradient(135deg, #2A5563, #1D3C47); }
.insight .img.g1 { background: linear-gradient(135deg, #44474C, #1D3C47); }
.insight .img.g2 { background: linear-gradient(135deg, #6E8C97, #2A5563); }
.insight .img.g3 { background: linear-gradient(135deg, #C46A3A, #44474C); }
.insight .img.g4 { background: linear-gradient(135deg, #1D3C47, #163039); }
.insight .img.g5 { background: linear-gradient(135deg, #B6B9BC, #60656B); }
.insight .img .play { position: absolute; bottom: 14px; right: 14px; width: 44px; height: 44px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; z-index: 1; }
.insight .body { padding: 18px 22px 24px; flex-grow: 1; display: flex; flex-direction: column; }
.insight .body .eyebrow { font-size: var(--fs-12); margin-bottom: 10px; }
.insight .body h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-18); line-height: 1.3; color: var(--fg-1); margin: 0 0 14px; }
.insight .body .meta { font-size: var(--fs-13); color: var(--fg-3); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline); }

/* ---------- quote callout ---------- */
.quote-band { background: var(--bg-alt); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.quote-band .inner { max-width: 980px; margin: 0 auto; padding: 80px var(--container-pad); text-align: center; }
.quote-band .eyebrow { color: var(--hardi-accent); margin-bottom: 24px; display: inline-block; }
.quote-band blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 3vw, 36px); font-weight: 500; line-height: 1.3; color: var(--fg-1); margin: 0 0 28px; max-width: 22ch; margin-left: auto; margin-right: auto; }
.quote-band blockquote::before, .quote-band blockquote::after { content: '"'; color: var(--hardi-accent); font-style: normal; }
.quote-band cite { font-style: normal; font-size: var(--fs-14); color: var(--fg-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--w-semi); }

/* ---------- contact CTA ---------- */
.contact-cta { background: var(--hardi-navy); color: #fff; position: relative; overflow: hidden; }
.contact-cta::before { content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(196,106,58,0.18) 0%, transparent 60%); }
.contact-cta .inner { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 80px var(--container-pad); display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 920px) { .contact-cta .inner { grid-template-columns: 1fr; gap: 32px; } }
.contact-cta h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 42px); font-weight: 600; margin: 0 0 16px; color: #fff; line-height: 1.15; }
.contact-cta p { color: var(--fg-on-dark-2); font-size: var(--fs-18); line-height: 1.55; margin: 0 0 28px; }
.contact-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-md); padding: 32px; }
.contact-card .contact-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.contact-card .avatar { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(196,106,58,0.5); object-fit: cover; }
.contact-card .name { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 600; color: #fff; margin: 0 0 4px; }
.contact-card .role { color: var(--hardi-accent-500); font-size: var(--fs-13); text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--w-semi); margin: 0; }
.contact-card .bio { color: var(--fg-on-dark-2); font-size: var(--fs-14); line-height: 1.55; margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.contact-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-card ul li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-15); color: #fff; }
.contact-card ul li svg { color: var(--hardi-accent-500); flex-shrink: 0; }
.contact-card ul li a { color: #fff; }
.contact-card ul li a:hover { color: var(--hardi-accent-500); }

/* ---------- footer ---------- */
.site-footer { background: var(--hardi-navy-700); color: var(--fg-on-dark-2); padding: 72px 0 32px; }
.site-footer .inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 920px) { .site-footer .inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer .inner { grid-template-columns: 1fr; } }
.site-footer .brand img { height: 32px; margin-bottom: 18px; }
.site-footer .brand p { font-size: var(--fs-14); line-height: 1.6; max-width: 38ch; color: var(--fg-on-dark-3); margin: 0; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: var(--fs-13); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--fg-on-dark-2); font-size: var(--fs-14); }
.site-footer a:hover { color: #fff; }
.site-footer .legal { max-width: var(--container-max); margin: 48px auto 0; padding: 22px var(--container-pad) 0; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: var(--fs-13); color: var(--fg-on-dark-3); }
.site-footer .social { display: flex; gap: 12px; }
.site-footer .social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-on-dark-2); }
.site-footer .social a:hover { background: var(--hardi-accent); color: #fff; }

/* ---------- post detail ---------- */
.post-detail { max-width: 760px; margin: 0 auto; padding: 64px var(--container-pad); }
.post-detail .back { display: inline-flex; align-items: center; gap: 6px; color: var(--hardi-accent); font-weight: 600; font-size: var(--fs-14); margin-bottom: 28px; cursor: pointer; }
.post-detail .eyebrow { display: inline-block; margin-bottom: 14px; }
.post-detail h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.12; margin: 0 0 18px; color: var(--fg-1); }
.post-detail .meta-line { color: var(--fg-3); font-size: var(--fs-14); border-bottom: 1px solid var(--hairline); padding-bottom: 22px; margin-bottom: 32px; }
.post-detail p { color: var(--fg-1); font-size: var(--fs-18); line-height: 1.7; margin: 0 0 22px; }
.post-detail .lead { font-size: var(--fs-20); color: var(--fg-2); }
.post-detail h2 { font-family: var(--font-display); font-size: var(--fs-28); margin: 36px 0 16px; }
.post-detail blockquote { border-left: 3px solid var(--hardi-accent); margin: 28px 0; padding: 4px 0 4px 24px; font-family: var(--font-display); font-style: italic; font-size: var(--fs-24); color: var(--fg-1); }

/* ---------- icon ---------- */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon svg { stroke-width: 1.75; }

/* ============================================================
   ANIMATIONS — restrained, brand-appropriate
   Only opacity + translate, 120-320ms, gentle ease.
   Disabled entirely under prefers-reduced-motion.
   ============================================================ */

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hero stagger on load */
.hero-stagger { opacity: 0; transform: translateY(12px); transition: opacity 480ms var(--ease-standard), transform 480ms var(--ease-standard); }
.hero-stagger.is-in { opacity: 1; transform: translateY(0); }

/* Reduced motion — kill it all */
.reduce-motion .reveal,
.reduce-motion .hero-stagger { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}