/* =========================================================================
   IAVI — Theme System
   Instituto de Apoio à Vida Inclusiva
   Hand-built design system: editorial type, warm forest/gold palette,
   scroll-driven motion. No framework dependency.
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root{
  --ink: #0D2F3D;
  --forest: #1A6B7A;
  --forest-deep: #0D4557;
  --forest-light: #2A8BA3;
  --cream: #F8F3E7;
  --paper: #FFFFFF;
  --gold: #FFC107;
  --gold-deep: #E2A400;
  --gold-pale: #FFE9A8;
  --muted: #5E7180;
  --muted-on-dark: #B2C5CE;
  --line: rgba(13,69,87,.13);
  --line-on-dark: rgba(248,243,231,.16);

  --font-display: 'Fredoka', 'Poppins', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 22px;
  --ease: cubic-bezier(.16,.84,.24,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --header-h: 104px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
html.has-smooth-scroll{ scroll-behavior: auto; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6,p{ margin: 0; }
em{ font-style: normal; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select{ font: inherit; color: inherit; }
svg{ display: block; }
::selection{ background: var(--gold); color: var(--ink); }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-fluid{ padding: 0 var(--gutter); }

section{ position: relative; }
.section-pad{ padding: clamp(70px, 10vw, 150px) 0; }
.section-pad-sm{ padding: clamp(50px, 7vw, 100px) 0; }

/* ---------- Typography ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest);
}
.eyebrow::before{
  content: '';
  width: 26px; height: 2px;
  background: var(--gold);
  display: inline-block;
}
.dark .eyebrow, .on-dark .eyebrow, .eyebrow.dark, .eyebrow.on-dark{ color: var(--gold); }

.h-display{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.01em;
  color: var(--ink);
}
.h-xl{ font-size: clamp(48px, 7.2vw, 108px); }
.h-lg{ font-size: clamp(38px, 5.2vw, 72px); }
.h-md{ font-size: clamp(30px, 3.6vw, 48px); }
.h-sm{ font-size: clamp(22px, 2.2vw, 30px); }
.h-display em{ font-style: normal; font-weight: 600; color: var(--forest); }
.on-dark .h-display, .dark .h-display, .h-display.on-dark, .h-display.dark{ color: var(--cream); }
.on-dark .h-display em, .dark .h-display em, .h-display.on-dark em, .h-display.dark em{ color: var(--gold); }

.lede{
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.5;
  color: var(--forest);
}
.body-text{ color: var(--muted); font-size: 17px; line-height: 1.75; }
.on-dark .body-text, .dark .body-text, .body-text.on-dark, .body-text.dark{ color: var(--muted-on-dark); }
@media (max-width: 480px){
  .h-lg{ font-size: clamp(28px, 8vw, 34px); }
  .body-text{ font-size: 15px; line-height: 1.65; }
}

.num-label{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gold-deep);
}

/* ---------- Buttons ---------- */
.btn{
  --btn-fg: var(--cream);
  --btn-bg: var(--forest);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
}
.btn::before{
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: translateY(102%);
  transition: transform .5s var(--ease);
  z-index: -1;
  border-radius: inherit;
}
.btn:hover::before{ transform: translateY(0); }
.btn:hover{ color: var(--ink); }
.btn i, .btn .fa, .btn svg{ transition: transform .4s var(--ease); }
.btn:hover i, .btn:hover svg{ transform: translateX(4px); }

.btn-gold{ --btn-fg: var(--ink); --btn-bg: var(--gold); }
.btn-gold::before{ background: var(--forest); }
.btn-gold:hover{ color: var(--cream); }

.btn-outline{
  --btn-fg: var(--ink); --btn-bg: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn-outline::before{ background: var(--ink); }
.btn-outline:hover{ color: var(--cream); }
.on-dark .btn-outline, .dark .btn-outline, .btn-outline.on-dark, .btn-outline.dark{
  --btn-fg: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--line-on-dark);
}
.on-dark .btn-outline::before, .dark .btn-outline::before, .btn-outline.on-dark::before, .btn-outline.dark::before{ background: var(--gold); }
.on-dark .btn-outline:hover, .dark .btn-outline:hover, .btn-outline.on-dark:hover, .btn-outline.dark:hover{ color: var(--ink); }

.btn-sm{ padding: 13px 22px; font-size: 13px; }

.text-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--forest);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 2px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease);
}
.text-link:hover{ background-size: 100% 2px; }
.text-link i{ transition: transform .35s var(--ease); }
.text-link:hover i{ transform: translateX(5px); }
.on-dark .text-link, .dark .text-link, .text-link.on-dark, .text-link.dark{ color: var(--cream); }

/* ---------- Cursor ---------- */
.cursor-dot, .cursor-ring{
  /* Desativado temporariamente (ver theme.js: chamada de initCursor()
     comentada) para testar o site com o cursor nativo puro.
     !important porque a regra .cursor-ring abaixo define display:flex
     (necessário pra centralizar o texto "Ver" quando o cursor estava
     ativo) com a mesma especificidade e, por vir depois no arquivo,
     vencia esse display:none — sobrando só a borda do círculo visível
     no canto (0,0), o "risco preto" reportado. */
  display: none !important;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none !important;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: normal;
}
.cursor-dot{
  width: 8px; height: 8px;
  background: var(--gold);
  /* Sem transition no transform: a posição precisa acompanhar o mouse
     instantaneamente, senão o ponto fica sempre atrasado em relação
     ao cursor real. */
  transition: opacity .2s ease;
}
.cursor-ring{
  width: 40px; height: 40px;
  border: 1.5px solid rgba(14,33,28,.5);
  transition: width .35s var(--ease), height .35s var(--ease), border-color .35s ease, background-color .35s ease, opacity .2s ease;
  display: flex; align-items: center; justify-content: center;
}
.cursor-ring span{
  opacity: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--cream);
  transition: opacity .25s ease;
  white-space: nowrap;
}
.cursor-ring.is-hover{ width: 70px; height: 70px; background: var(--gold); border-color: var(--gold); }
.cursor-ring.is-hover span{ opacity: 1; color: var(--ink); }
.cursor-ring.is-view{ width: 92px; height: 92px; background: var(--gold); border-color: var(--gold); }
.cursor-ring.is-view span{ opacity: 1; color: var(--ink); }
body.no-cursor-hide, body.no-cursor-hide *{ cursor: auto !important; }
@media (hover: hover) and (pointer: fine){
  body.has-custom-cursor, body.has-custom-cursor *{ cursor: none !important; }
}
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display: none; }
}

/* ---------- Preloader ---------- */
#preloader{
  position: fixed; inset: 0;
  z-index: 10000;
  background: var(--forest-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#preloader .pre-wordmark{
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 60px);
  color: var(--cream);
  display: flex;
  overflow: hidden;
}
#preloader .pre-wordmark span{
  display: inline-block;
  transform: translateY(110%);
  animation: preIn .7s var(--ease) forwards;
}
@keyframes preIn{ to{ transform: translateY(0); } }
#preloader .pre-count{
  margin-top: 22px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--gold);
}
#preloader .pre-bar{
  margin-top: 18px;
  width: 220px; max-width: 60vw;
  height: 2px;
  background: rgba(248,243,231,.18);
  overflow: hidden;
}
#preloader .pre-bar i{
  display: block; height: 100%; width: 0%;
  background: var(--gold);
}
.pre-panel{
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--forest);
  transform: scaleY(0);
  transform-origin: bottom;
}
body.is-loaded #preloader{
  transition: opacity .6s var(--ease), visibility .6s;
  opacity: 0;
  visibility: hidden;
}
body:not(.is-loaded){ overflow: hidden; height: 100vh; }

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gold);
  z-index: 9998;
  transition: width .08s linear;
}

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .45s ease, box-shadow .45s ease, transform .5s var(--ease);
}
.site-header.is-solid{
  /* --forest-deep: same rich, dark teal as the full-screen nav overlay,
     so the header matches it instead of clashing with a brighter tone. */
  background: rgba(13,69,87,.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-on-dark);
}
.site-header.is-hidden{ transform: translateY(-100%); }
.header-row{
  /* .site-header is a flex container, so without an explicit width this
     grid shrinks to fit its own content (flex-basis: auto) instead of
     stretching across the header — leaving logo/nav/burger bunched on
     the left with dead space on the right. */
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 56px;
}
/* Pin brand/actions to their columns explicitly: .main-nav is display:none
   on mobile, which drops it out of the grid entirely, and auto-placement
   would otherwise slide .header-actions into the middle (1fr) column
   instead of the right-hand one, stranding the burger near the center. */
.header-row > .brand{ grid-column: 1; }
.header-row > .header-actions{ grid-column: 3; }
@media (max-width: 600px){
  /* .container's shared --gutter is still ~20px+ here, which read as
     "not in the corner." Give the header its own, tighter inset on
     phones so the logo/burger actually sit at the edges. */
  .header-row{ padding-left: 14px; padding-right: 14px; }
}
.brand{ display: flex; align-items: center; gap: 12px; }
.brand img{ height: 64px; width: auto; }
@media (min-width: 901px){
  .brand img{ height: 72px; }
}
.brand-word{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--cream);
  transition: color .4s ease;
}

.main-nav{ display: flex; align-items: center; justify-content: center; gap: 40px; }
.main-nav ul{ display: flex; align-items: center; gap: 40px; }
.main-nav a{
  position: relative;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--cream);
  transition: color .4s ease;
  padding: 6px 0;
}
.main-nav a::after{
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0%; height: 2px;
  background: var(--gold);
  transition: width .4s var(--ease);
}
.main-nav a:hover::after, .main-nav li.active a::after{ width: 100%; }
.main-nav li.active a{ color: var(--gold) !important; }

.header-actions{ display: flex; align-items: center; gap: 18px; }
.menu-toggle{
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Width includes horizontal padding, so this leaves room for the bars. */
  width: 56px;
  min-width: 56px;
  z-index: 901;
  padding: 12px 16px;
  margin: -12px -16px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.menu-toggle span{
  height: 2px; width: 100%;
  background: var(--cream);
  transition: background-color .4s ease, transform .4s var(--ease), opacity .3s ease;
}
body.menu-open .menu-toggle span{ background: var(--cream); }
body.menu-open .menu-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2){ opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* full-screen nav overlay */
.nav-overlay{
  position: fixed; inset: 0;
  z-index: 850;
  background: var(--forest-deep);
  display: flex;
  align-items: center;
  /* On phones the 5 nav links + contact block are taller than the
     viewport, so centering with no room for the fixed header pushes
     the first link up underneath it. Reserve that space and let the
     overlay scroll instead of overlapping/clipping. */
  padding: calc(var(--header-h) + 24px) 0 24px;
  overflow-y: auto;
  clip-path: circle(0px at calc(100% - 46px) 46px);
  transition: clip-path .8s var(--ease);
  pointer-events: none;
}
body.menu-open .nav-overlay{
  clip-path: circle(150% at calc(100% - 46px) 46px);
  pointer-events: auto;
}
.nav-overlay .container{ width: 100%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.nav-overlay-links{ display: flex; flex-direction: column; gap: 6px; }
.nav-overlay-links a{
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 78px);
  color: var(--cream);
  font-weight: 500;
  line-height: 1.18;
  opacity: .5;
  transition: opacity .4s ease, color .4s ease, transform .4s var(--ease);
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  transform: translateX(0);
}
.nav-overlay-links a small{ font-family: var(--font-body); font-size: 14px; color: var(--gold); opacity: .8; font-weight: 700; }
.nav-overlay-links a:hover{ opacity: 1; color: var(--gold); transform: translateX(14px); }
.nav-overlay-links li.active a{ opacity: 1; color: var(--gold); }
.nav-overlay-side{ border-left: 1px solid var(--line-on-dark); padding-left: 40px; display: flex; flex-direction: column; gap: 26px; }
.nav-overlay-side h6{ color: var(--gold); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.nav-overlay-side p, .nav-overlay-side a{ color: var(--muted-on-dark); font-size: 15px; line-height: 1.7; }
.nav-overlay-side a{ display: block; margin-top: 4px; }
.nav-overlay-social{ display: flex; gap: 12px; margin-top: 6px; }
.nav-overlay-social a{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-on-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.nav-overlay-social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-3px); }
@media (max-width: 900px){
  .nav-overlay .container{ grid-template-columns: 1fr; }
  .nav-overlay-side{ border-left: none; border-top: 1px solid var(--line-on-dark); padding-left: 0; padding-top: 26px; }
}

/* ---------- Marquee ---------- */
.marquee{
  overflow: hidden;
  white-space: nowrap;
  background: var(--gold);
  transform: rotate(-1.4deg) scale(1.02);
  position: relative;
  z-index: 5;
}
.marquee-inner{
  display: inline-flex;
  animation: marqueeMove 26s linear infinite;
}
.marquee.marquee-fast .marquee-inner{ animation-duration: 16s; }
.marquee.marquee-reverse .marquee-inner{ animation-direction: reverse; }
.marquee-track{ display: inline-flex; align-items: center; padding: 16px 0; }
.marquee-track span{
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 32px);
  color: var(--ink);
  padding: 0 28px;
  white-space: nowrap;
}
.marquee-track span i{ font-style: normal; margin: 0 24px; font-size: 14px; vertical-align: middle; }
@keyframes marqueeMove{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee-dark{ background: var(--forest-deep); }
.marquee-dark .marquee-track span{ color: var(--cream); }
.marquee-dark .marquee-track span i{ color: var(--gold); }

/* ---------- Reveal utilities ---------- */
.rv{ opacity: 0; }
.rv-up{ transform: translateY(46px); }
.rv-up.in-view{ animation: rvUp 1s var(--ease) forwards; }
@keyframes rvUp{ to{ opacity: 1; transform: translateY(0); } }

.rv-fade.in-view{ animation: rvFade 1.1s var(--ease) forwards; }
@keyframes rvFade{ to{ opacity: 1; } }

.rv-scale{ transform: scale(1.12); }
.rv-scale.in-view{ animation: rvScale 1.3s var(--ease) forwards; }
@keyframes rvScale{ to{ opacity: 1; transform: scale(1); } }

/* clip-path on the observed element itself would zero out its intersection
   area and IntersectionObserver would never fire — animate the inner img instead */
.rv-clip{ opacity: 1; }
.rv-clip img{ clip-path: inset(0 0 100% 0); }
.rv-clip.in-view img{ animation: rvClip 1.1s var(--ease) forwards; }
@keyframes rvClip{ to{ clip-path: inset(0 0 0% 0); } }

.rv-line{ overflow: hidden; display: block; }
.rv-line > span{ display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); }
.rv-line.in-view > span{ transform: translateY(0); }

[data-rv-delay="1"]{ animation-delay: .1s !important; }
[data-rv-delay="2"]{ animation-delay: .22s !important; }
[data-rv-delay="3"]{ animation-delay: .34s !important; }
[data-rv-delay="4"]{ animation-delay: .46s !important; }
[data-rv-delay="5"]{ animation-delay: .58s !important; }
[data-rv-delay="6"]{ animation-delay: .7s !important; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  /* The hero also occupies the former indicators area, keeping its image as
     the visual background instead of leaving a separate statistics band. */
  min-height: calc(100vh + 168px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--forest-deep);
}
.hero-bg{
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Mesh-gradient wash instead of a flat two-stop diagonal — several soft
   colored pools over the base forest tone, so it reads as designed
   rather than just "a gradient". */
.hero-bg::before{
  content: '';
  position: absolute; inset: -10%;
  background:
    radial-gradient(720px 620px at 12% 10%, rgba(255,193,7,.2), transparent 62%),
    radial-gradient(760px 700px at 92% 2%, rgba(42,139,163,.45), transparent 60%),
    radial-gradient(900px 720px at 46% 108%, rgba(13,69,87,.95), transparent 58%),
    linear-gradient(155deg, var(--forest-deep) 0%, var(--forest) 58%, var(--forest-deep) 100%);
}
/* Faint brand-mark watermark, bleeding off the right edge. */
.hero-mark{
  position: absolute;
  top: 2%;
  right: -8%;
  width: min(60vh, 820px);
  opacity: .07;
  filter: grayscale(1) brightness(4);
  user-select: none;
}
.hero-bg .glow{ position: absolute; border-radius: 50%; animation: heroDrift 20s ease-in-out infinite alternate; }
.hero-bg .glow.g1{ width: 620px; height: 620px; top: -220px; right: -120px; background: radial-gradient(circle, rgba(255,193,7,.22), transparent 70%); }
.hero-bg .glow.g2{ width: 520px; height: 520px; bottom: -200px; left: -140px; background: radial-gradient(circle, rgba(248,243,231,.12), transparent 70%); animation-delay: -10s; }
@keyframes heroDrift{ from{ transform: translate3d(0,0,0) scale(1); } to{ transform: translate3d(-26px,26px,0) scale(1.08); } }
/* Neutral bottom vignette so the title/paragraph stay readable over
   whatever's under them, on top of everything else in .hero-bg. */
.hero-bg::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 45%, rgba(0,0,0,.6) 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(90px, 12vw, 150px);
  padding-top: calc(var(--header-h) + 40px);
}
.hero-eyebrow{
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.hero-eyebrow::before{ content: ''; width: 34px; height: 2px; background: var(--gold); }
.hero-title{
  font-family: var(--font-display);
  color: var(--cream);
  font-weight: 600;
  font-size: clamp(46px, 8.6vw, 128px);
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.hero-title em{ font-style: normal; font-weight: 600; color: var(--gold); }
.hero-tags{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-tags span{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: rgba(248,243,231,.07);
  border: 1px solid rgba(248,243,231,.16);
  backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 600;
}
.hero-tags .ico{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,193,7,.16);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-tags .ico img{ width: 13px; height: 13px; filter: brightness(0) invert(1); }
.hero-foot{
  margin-top: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-sub{ max-width: 420px; color: var(--muted-on-dark); font-size: 17px; line-height: 1.7; }
.hero-actions{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.scroll-cue{
  position: absolute;
  right: var(--gutter);
  bottom: 28px;
  z-index: 3;
  display: flex; align-items: center; gap: 12px;
  color: var(--muted-on-dark);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  writing-mode: vertical-rl;
}
.scroll-cue .line{
  width: 1px; height: 60px;
  background: var(--line-on-dark);
  position: relative;
  overflow: hidden;
}
.scroll-cue .line::after{
  content: ''; position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%; background: var(--gold);
  animation: cueMove 2.2s ease-in-out infinite;
}
@keyframes cueMove{ 0%{ top: -100%; } 50%{ top: 0%; } 100%{ top: 100%; } }
@media (max-width: 700px){ .scroll-cue{ display: none; } }

/* ---------- Stat / impact band ---------- */
.stat-band{
  background: var(--forest-deep);
  color: var(--cream);
  position: relative;
}
.stat-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-cell{
  padding: 44px 26px;
  border-left: 1px solid var(--line-on-dark);
  text-align: left;
}
.stat-cell:first-child{ border-left: none; }
.stat-num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 56px);
  color: var(--gold);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.stat-label{ margin-top: 8px; font-size: 13.5px; color: var(--muted-on-dark); font-weight: 600; letter-spacing: .01em; }
@media (max-width: 900px){
  .stat-grid{ grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(3){ border-left: none; }
}
@media (max-width: 520px){
  .stat-grid{ grid-template-columns: 1fr; }
  .stat-cell{ border-left: none !important; border-top: 1px solid var(--line-on-dark); }
  .stat-cell:first-child{ border-top: none; }
}

/* ---------- Section heads ---------- */
.section-head{ max-width: 780px; margin-bottom: 56px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow{ margin-bottom: 18px; }
.section-head p{ margin-top: 20px; }
.section-head-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

/* ---------- About / split editorial ---------- */
.split{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
}
.split.reverse{ grid-template-columns: 1.05fr .95fr; }
.split.reverse .split-media{ order: 2; }
@media (max-width: 900px){
  .split, .split.reverse{ grid-template-columns: 1fr; }
  .split.reverse .split-media{ order: 0; }
  /* .media-tag hangs off the image's bottom-left corner by design, but
     once .split stacks to a single column that overhang has nothing
     below it to clear — it lands right on top of the eyebrow/heading
     that follows, instead of the two-column layout where it just
     floats over empty page background. */
  .split-media{ margin-bottom: 60px; }
}
.split-media{ position: relative; }
.media-frame{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/4.6;
}
.media-frame img{ width: 100%; height: 100%; object-fit: cover; }
.media-frame-wide{ aspect-ratio: 870/390; }
.media-tag{
  position: absolute;
  bottom: -26px; left: -26px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 20px 50px rgba(13,69,87,.25);
  max-width: 220px;
}
.media-tag .num{ font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; }
.media-tag .cap{ font-size: 12.5px; font-weight: 700; margin-top: 6px; letter-spacing: .01em; }
@media (max-width: 560px){
  .media-tag{ left: 12px; bottom: -18px; padding: 12px 14px; max-width: 150px; border-radius: 14px; }
  .media-tag .num{ font-size: 22px; }
  .media-tag .cap{ font-size: 10.5px; margin-top: 3px; }
}

/* ---------- About grid: text + two images + icons, staggered ---------- */
.about-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-areas:
    "text  imgb"
    "imga  icons";
  gap: clamp(24px, 4vw, 40px) clamp(30px, 5vw, 60px);
  align-items: start;
}
.about-g-text{ grid-area: text; align-self: center; }
.about-g-imgb{ grid-area: imgb; position: relative; }
.about-g-imga{ grid-area: imga; position: relative; }
.about-g-icons{ grid-area: icons; align-self: center; }
.about-g-icons .pillars{ margin-top: 0; }
.media-frame-b{ aspect-ratio: 450/394; }
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; grid-template-areas: "text" "imgb" "imga" "icons"; }
  .about-g-imga{ margin-top: 26px; margin-bottom: 60px; }
}

.pillars{
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 30px;
}
.pillar{ display: flex; gap: 16px; align-items: flex-start; }
.pillar .ico{
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--forest);
  display: flex; align-items: center; justify-content: center;
}
.pillar .ico img{ width: 22px; height: 22px; filter: brightness(0) invert(1); }
.pillar h5{ font-family: var(--font-display); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.pillar p{ color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ---------- Causes horizontal gallery ---------- */
.hz-section{ background: var(--forest-deep); color: var(--cream); overflow: hidden; }
.hz-head{
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 44px; gap: 24px; flex-wrap: wrap;
}
.hz-controls{ display: none; }
.hz-btn{
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-on-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  transition: background .3s ease, border-color .3s ease, transform .25s ease;
}
.hz-btn:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hz-btn:active{ transform: scale(.92); }
.hz-track-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  /* Avoid snapping, which would make continuous motion jump between cards. */
  scroll-snap-type: none;
  scrollbar-width: none;
  cursor: grab;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}
.hz-track-wrap.is-grabbing{ cursor: grabbing; }
.hz-track-wrap::-webkit-scrollbar{ display: none; }
.hz-track{ display: flex; gap: 28px; padding-bottom: 6px; }
.hz-track.is-looping{
  will-change: transform;
  animation: hzTrackLoop var(--loop-duration, 55s) linear infinite;
}
@keyframes hzTrackLoop{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(var(--loop-translate), 0, 0); }
}
.hz-card{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(270px, 30vw, 380px);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(248,243,231,.04);
  border: 1px solid var(--line-on-dark);
}
@media (max-width: 640px){ .hz-card{ width: 80vw; } }
.hz-card-img{ position: relative; aspect-ratio: 4/3.4; overflow: hidden; }
.hz-card-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.hz-card:hover .hz-card-img img{ transform: scale(1.08); }
/* Icon-based alternative to a photo, same footprint as .hz-card-img. */
.hz-card-icon{
  position: relative;
  aspect-ratio: 4/3.4;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
}
.hz-card-icon::after{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 28% 22%, rgba(255,193,7,.22), transparent 60%);
}
.hz-card-icon i{
  position: relative;
  font-size: clamp(46px, 6vw, 68px);
  color: var(--gold);
  transition: transform .5s var(--ease);
}
.hz-card:hover .hz-card-icon i{ transform: scale(1.1) rotate(-4deg); }
.hz-card-idx{
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  background: var(--gold); color: var(--ink);
  padding: 6px 12px; border-radius: 999px;
}
.hz-card-body{ padding: 26px; }
.hz-card-body h4{ font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.hz-card-body p{ color: var(--muted-on-dark); font-size: 14.5px; line-height: 1.65; margin-bottom: 18px; }
.hz-progress{ height: 3px; background: var(--line-on-dark); border-radius: 3px; overflow: hidden; margin-bottom: 20px; }
.hz-progress i{ display: block; height: 100%; background: var(--gold); width: 0%; transition: width 1.4s var(--ease); }
.hz-scrollbar{ display: none; }
.hz-scrollbar i{ position: absolute; top: -3px; height: 8px; width: 120px; background: var(--gold); border-radius: 8px; transition: transform .1s linear; }

/* ---------- Impact list (causes page) ---------- */
.impact-rows{ display: flex; flex-direction: column; }
.impact-row{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
  padding: clamp(40px, 6vw, 76px) 0;
  border-top: 1px solid var(--line);
}
.impact-rows .impact-row:last-child{ border-bottom: 1px solid var(--line); }
.impact-row.reverse{ grid-template-columns: 1.1fr .9fr; }
.impact-row.reverse .impact-media{ order: 2; }
@media (max-width: 860px){
  .impact-row, .impact-row.reverse{ grid-template-columns: 1fr; }
  .impact-row.reverse .impact-media{ order: 0; }
}
.impact-media{ position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5/3.6; }
.impact-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.impact-row:hover .impact-media img{ transform: scale(1.06); }
/* Icon-based alternative to a photo, same footprint as .impact-media. */
.impact-icon{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 5/3.6;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
}
.impact-icon::after{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 28% 22%, rgba(255,193,7,.22), transparent 60%);
}
.impact-icon i{
  position: relative;
  font-size: clamp(56px, 7vw, 84px);
  color: var(--gold);
  transition: transform .5s var(--ease);
}
.impact-row:hover .impact-icon i{ transform: scale(1.1) rotate(-4deg); }
.impact-index{ font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--gold-deep); margin-bottom: 14px; display: block; }
.impact-body h3{ font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 600; margin-bottom: 16px; }
.impact-body p{ color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 26px; }
.impact-meter{ display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.impact-meter .bar{ flex: 1; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.impact-meter .bar i{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--forest), var(--gold)); border-radius: 6px; transition: width 1.6s var(--ease); }
.impact-meter .pct{ font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--forest); min-width: 3.2ch; }

/* ---------- Credit simulator ---------- */
.credit-wrap{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 940px){ .credit-wrap{ grid-template-columns: 1fr; } }
.card-panel{
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 30px 70px rgba(13,69,87,.08);
  border: 1px solid var(--line);
}
.card-panel h3{ font-family: var(--font-display); font-weight: 600; font-size: 26px; margin-bottom: 26px; }
.field{ margin-bottom: 20px; }
.field label{ display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.field input, .field select, .field textarea{
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  padding: 10px 2px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .3s ease;
}
.field textarea{ min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--forest); }
.field select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235E7180' d='M4 6l4 4 4-4' stroke='%235E7180' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 14px;
  cursor: pointer;
}
.field small{ display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
/* Validation state: a field gets .has-error (via JS) when it fails a
   check on blur/submit; .field-error carries the specific message. */
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: #E5484D; }
.field-error{ display: none; margin-top: 6px; color: #E5484D; font-size: 12.5px; }
.field.has-error .field-error{ display: block; }
.radio-row{ display: flex; gap: 26px; flex-wrap: wrap; }
.radio-opt{ display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.radio-opt input{ width: auto; accent-color: var(--forest); }

.sim-unavailable{ text-align: center; padding: 12px 0 4px; }
.sim-unavailable-icon{
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--gold-pale);
  color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.sim-unavailable p{ color: var(--muted); font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
.sim-unavailable .btn{ margin-top: 6px; }

.advantages-panel{ background: var(--forest); color: var(--cream); border: none; }
.advantages-panel h3{ color: var(--cream); }
.adv-list{ display: flex; flex-direction: column; gap: 16px; }
.adv-list li{ display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: var(--muted-on-dark); line-height: 1.55; }
.adv-list li i{ color: var(--gold); margin-top: 3px; }
.adv-list.on-light li{ color: var(--muted); }
.adv-list.on-light li i{ color: var(--forest); }
.info-panel{ margin-top: 24px; }
.info-panel h4{ font-family: var(--font-display); font-weight: 600; font-size: 18px; margin-bottom: 16px; color: var(--cream); }

/* ---------- CTA circular badge section ---------- */
.cta-band{
  background: var(--forest);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 48px);
}
.cta-blob{ position: absolute; opacity: .5; filter: blur(0px); }
.cta-inner{
  position: relative;
  z-index: 2;
  padding: clamp(56px, 8vw, 110px) clamp(24px, 6vw, 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}
.spin-badge{
  position: relative;
  width: 128px; height: 128px;
}
.spin-badge svg{ animation: spinSlow 16s linear infinite; }
@keyframes spinSlow{ to{ transform: rotate(360deg); } }
.spin-badge .play{
  position: absolute; inset: 0;
  margin: auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: transform .3s var(--ease);
}
.spin-badge:hover .play{ transform: scale(1.12); }
.cta-inner h2{ max-width: 16ch; }
.cta-actions{ display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ---------- Events ---------- */
.event-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 980px){ .event-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .event-grid{ grid-template-columns: 1fr; } }
.event-card{ border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.event-card:hover{ transform: translateY(-8px); box-shadow: 0 30px 60px rgba(13,69,87,.12); }
.event-card-img{ position: relative; aspect-ratio: 4/3; overflow: hidden; }
.event-card-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.event-card:hover .event-card-img img{ transform: scale(1.09); }
.event-date-badge{
  position: absolute; top: 16px; left: 16px;
  background: var(--cream); color: var(--ink);
  border-radius: 12px; padding: 8px 13px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.event-card-body{ padding: 26px; }
.event-meta{ display: flex; gap: 16px; margin-bottom: 12px; }
.event-meta li{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.event-meta li i{ color: var(--gold-deep); }
.event-card-body h4{ font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 10px; line-height: 1.3; }
.event-card-body p{ color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; }

/* upcoming list (home) */
.upcoming-list{ display: flex; flex-direction: column; }
.upcoming-item{
  display: flex; align-items: center; gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-on-dark);
  transition: padding-left .35s var(--ease);
}
.upcoming-item:hover{ padding-left: 10px; }
.upcoming-date{ text-align: center; min-width: 62px; }
.upcoming-date span{ display: block; font-size: 11px; letter-spacing: .1em; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.upcoming-date strong{ font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--cream); }
.upcoming-info h5{ font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--cream); margin-bottom: 6px; }
.upcoming-meta{ display: flex; gap: 16px; }
.upcoming-meta li{ font-size: 13px; color: var(--muted-on-dark); display: flex; align-items: center; gap: 6px; }
.upcoming-meta li i{ color: var(--gold); }

/* ---------- Testimonials ---------- */
.testi-wrap{ display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.testi-wrap > *{ min-width: 0; }
.testi-swiper{ max-width: 100%; }
@media (max-width: 900px){ .testi-wrap{ grid-template-columns: 1fr; } }
.testi-media{ position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1.1; }
.testi-media img{ width: 100%; height: 100%; object-fit: cover; }
.testi-quote-mark{ font-family: var(--font-display); font-size: 90px; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.testi-stars{ color: var(--gold-deep); margin-bottom: 18px; letter-spacing: 3px; }
.testi-text{ font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 28px); font-weight: 500; font-style: normal; line-height: 1.5; color: var(--ink); margin-bottom: 26px; }
.testi-person strong{ font-family: var(--font-body); font-weight: 700; font-size: 15px; display: block; }
.testi-person span{ color: var(--muted); font-size: 13px; }
.testi-nav{ display: flex; gap: 10px; margin-top: 34px; }

/* ---------- Team ---------- */
.team-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 900px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }
.team-card{ text-align: left; }
.team-photo{ position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/3.6; margin-bottom: 18px; }
.team-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.team-card:hover .team-photo img{ transform: scale(1.06); }
.team-photo::after{
  content: ''; position: absolute; inset: auto 0 0 0; height: 4px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.team-card:hover .team-photo::after{ transform: scaleX(1); }
.team-card h5{ font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.team-card p{ color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* ---------- FAQ / accordion ---------- */
.accordion-list{ display: flex; flex-direction: column; }
.acc-item{ border-bottom: 1px solid var(--line); }
.acc-item:first-child{ border-top: 1px solid var(--line); }
.acc-head{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.acc-head .plus{
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.acc-head .plus::before, .acc-head .plus::after{
  content: ''; position: absolute; background: var(--forest);
}
.acc-head .plus::before{ width: 11px; height: 1.5px; }
.acc-head .plus::after{ width: 1.5px; height: 11px; transition: transform .35s var(--ease); }
.acc-item.is-open .acc-head .plus::after{ transform: rotate(90deg) scale(0); }
.acc-item.is-open .acc-head .plus{ background: var(--gold); border-color: var(--gold); }
.acc-item.is-open .acc-head .plus::before, .acc-item.is-open .acc-head .plus::after{ background: var(--ink); }
.acc-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease);
}
.acc-body-in{ padding: 0 4px 24px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.acc-body-in p + p{ margin-top: 10px; }

/* ---------- Timeline (our story) ---------- */
.timeline{ position: relative; padding-left: 46px; }
.timeline::before{
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px;
  background: var(--line);
}
.timeline .fill{
  position: absolute; left: 8px; top: 6px; width: 2px; height: 0%;
  background: var(--gold); transition: height .2s linear;
}
.tl-item{ position: relative; padding-bottom: 56px; }
.tl-item:last-child{ padding-bottom: 0; }
.tl-dot{
  position: absolute; left: -46px; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--line);
  transition: background .4s ease, border-color .4s ease, transform .4s var(--ease);
}
.tl-item.in-view .tl-dot{ background: var(--gold); border-color: var(--gold); transform: scale(1.15); }
.tl-year{ font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold-deep); margin-bottom: 8px; display: block; }
.tl-item h4{ font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.tl-item p{ color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 60ch; }

/* ---------- Locations ---------- */
.loc-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 760px){ .loc-grid{ grid-template-columns: 1fr; } }
.loc-card{ border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: 0 24px 60px rgba(13,69,87,.08); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.loc-card:hover{ transform: translateY(-8px); box-shadow: 0 34px 80px rgba(13,69,87,.16); }
.loc-img{ position: relative; height: 230px; overflow: hidden; }
.loc-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.loc-card:hover .loc-img img{ transform: scale(1.08); }
.loc-tag{ position: absolute; top: 18px; left: 18px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 12.5px; padding: 7px 15px; border-radius: 999px; }
.loc-body{ padding: 28px; }
.loc-body h3{ font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.loc-body .state{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.loc-body p{ margin-top: 16px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }

.hq-card{ border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: 0 30px 70px rgba(13,69,87,.1); display: grid; grid-template-columns: .9fr 1.1fr; }
@media (max-width: 860px){ .hq-card{ grid-template-columns: 1fr; } }
.hq-media{ position: relative; min-height: 340px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.hq-media::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(26,107,122,.88), rgba(13,69,87,.94)); }
.hq-media-in{ position: relative; z-index: 1; text-align: center; color: var(--cream); padding: 30px; }
.hq-media-in .ic{ width: 96px; height: 96px; border-radius: 50%; background: rgba(248,243,231,.14); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; font-size: 40px; color: var(--gold); }
.hq-body{ padding: clamp(30px, 4vw, 54px); }
.hq-list{ display: grid; gap: 20px; margin-top: 26px; }
.hq-list li{ display: flex; gap: 16px; align-items: flex-start; }
.hq-list .ic2{ width: 42px; height: 42px; border-radius: 12px; background: var(--gold-pale); color: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hq-list strong{ display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.hq-list span, .hq-list p{ color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------- Contact ---------- */
.contact-wrap{ display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 70px); }
@media (max-width: 900px){ .contact-wrap{ grid-template-columns: 1fr; } }
.contact-info-list{ display: flex; flex-direction: column; gap: 22px; }
.ci-item{ display: flex; gap: 18px; align-items: flex-start; }
.ci-item .ic{ width: 52px; height: 52px; border-radius: 16px; background: var(--forest); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.ci-item span{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.ci-item h5{ font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
.form-note{ margin-top: 16px; font-size: 13px; color: var(--muted); }
.form-success{
  display: none;
  align-items: center; gap: 12px;
  background: var(--forest); color: var(--cream);
  padding: 16px 20px; border-radius: 14px; margin-top: 18px;
  font-size: 14px; font-weight: 600;
}
.form-success.show{ display: flex; animation: rvFade .5s ease forwards; }
.form-success i{ color: var(--gold); }

/* ---------- Legal / prose pages ---------- */
.prose{ max-width: 780px; margin: 0 auto; }
.prose h2{ font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; margin-bottom: 8px; }
.prose .updated{ color: var(--muted); font-size: 14px; margin-bottom: 50px; }
.prose-block{ padding: 30px 0; border-top: 1px solid var(--line); }
.prose-block:first-of-type{ border-top: none; padding-top: 0; }
.prose-block h4{ font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--forest); }
.prose-block p{ color: var(--muted); font-size: 15.5px; line-height: 1.8; }
.prose-block ul{ margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.prose-block ul li{ padding-left: 22px; position: relative; color: var(--muted); font-size: 15px; line-height: 1.7; }
.prose-block ul li::before{ content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.prose-block ul li strong{ color: var(--ink); }
.prose-contact{ display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.prose-contact li{ display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 15px; }
.prose-contact li i{ color: var(--forest); width: 18px; }
.prose-foot{ text-align: center; margin-top: 60px; }

/* page hero (breadcrumb-style) */
.page-hero{
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--forest-deep);
}
.page-hero img, .page-hero video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.page-hero::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,69,87,.5) 0%, rgba(13,69,87,.9) 100%);
  z-index: 1;
}
/* Taller variant, scoped to this one page only — do not change
   .page-hero itself, it's shared by every other inner page. */
.page-hero-lg{ min-height: 82vh; }
.page-hero-in{
  position: relative;
  z-index: 2;
  width: 100%;
  /* Longhand on purpose: a "padding: X 0 Y" shorthand here would zero out
     the left/right padding inherited from .container's gutter, so below
     the container's 1280px cap (i.e. every width except ultra-wide,
     where the centered container itself sits well clear of the screen
     edge) the title rendered flush against the real viewport edge. */
  padding-top: calc(var(--header-h) + 60px);
  padding-bottom: 60px;
}
.page-hero-in h1{ font-family: var(--font-display); color: var(--cream); font-size: clamp(38px, 5.5vw, 68px); font-weight: 600; letter-spacing: -.01em; }
.crumb{ display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--muted-on-dark); font-size: 13.5px; font-weight: 600; }
.crumb a{ color: var(--gold); }
.crumb i{ font-size: 10px; }
.page-hero-sm{ min-height: 44vh; }

/* ---------- CTA teaser / newsletter mid-page ---------- */
.split-cta{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(34px, 5vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  text-align: left;
}
.split-cta .ic-wrap{ width: 84px; height: 84px; border-radius: 50%; background: var(--gold-pale); display: flex; align-items: center; justify-content: center; color: var(--forest); font-size: 32px; flex-shrink: 0; }
.split-cta-text{ flex: 1; min-width: 240px; }
.split-cta h3{ font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; margin-bottom: 10px; }
.split-cta p{ color: var(--muted); font-size: 15px; max-width: 46ch; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--forest-deep); color: var(--cream); position: relative; overflow: hidden; }
.footer-cta{
  padding: clamp(70px, 10vw, 130px) 0 clamp(50px, 7vw, 90px);
  text-align: center;
  border-bottom: 1px solid var(--line-on-dark);
}
.footer-cta .eyebrow{ display: flex; justify-content: center; color: var(--gold); }
.footer-cta-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 92px);
  font-weight: 500;
  color: var(--cream);
  margin-top: clamp(28px, 4vw, 46px);
  transition: gap .4s var(--ease), color .4s ease;
  /* Flex items default to min-width:auto, i.e. their unwrapped text
     width — without this the email just overflows past the screen
     edge on mobile instead of shrinking/wrapping to fit. */
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}
.footer-cta-link .circle-arrow{
  width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px);
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(20px, 2.2vw, 28px);
  transition: transform .5s var(--ease);
  flex-shrink: 0;
}
.footer-cta-link:hover{ color: var(--gold); gap: 34px; }
.footer-cta-link:hover .circle-arrow{ transform: rotate(45deg) scale(1.06); }
@media (max-width: 480px){
  .footer-cta-link{ font-size: clamp(20px, 6.5vw, 30px); gap: 14px; }
  .footer-cta-link .circle-arrow{ width: clamp(34px, 10vw, 48px); height: clamp(34px, 10vw, 48px); font-size: 16px; }
  /* At this size the email+arrow already barely fit on one line, so the
     hover state growing the gap to 34px was enough to push the arrow
     past the edge and wrap onto its own line below the text. */
  .footer-cta-link:hover{ gap: 14px; }
}

.footer-grid{
  padding: clamp(56px, 7vw, 90px) 0;
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr 1fr;
  gap: 40px;
  border-bottom: 1px solid var(--line-on-dark);
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand img{ height: 60px; margin-bottom: 22px; filter: brightness(0) invert(1); }
.footer-brand p{ color: var(--muted-on-dark); font-size: 14.5px; line-height: 1.75; max-width: 320px; margin-bottom: 24px; }
.footer-social{ display: flex; gap: 10px; }
.footer-social a{
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-on-dark);
  display: flex; align-items: center; justify-content: center; color: var(--cream);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.footer-social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-3px); }
.footer-col h6{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 20px; }
.footer-col ul{ display: flex; flex-direction: column; gap: 13px; }
.footer-col a{ color: var(--muted-on-dark); font-size: 14.5px; transition: color .3s ease, padding-left .3s ease; display: inline-block; }
.footer-col a:hover{ color: var(--gold); padding-left: 4px; }
.footer-col address{ font-style: normal; color: var(--muted-on-dark); font-size: 14.5px; line-height: 1.7; }

.footer-strip{ overflow: hidden; }
.footer-strip .marquee{ transform: none; }

.insta-section{ padding: 54px 0 38px; background: transparent; }
.insta-section .hz-head{ margin-bottom: 30px; }
.insta-card{
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 340px);
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}
.insta-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.insta-card:hover img{ transform: scale(1.07); }
.insta-card .insta-ico{
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(13,69,87,.55);
  backdrop-filter: blur(4px);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease, background .3s ease, color .3s ease;
}
.insta-card:hover .insta-ico{ opacity: 1; transform: translateY(0); background: var(--gold); color: var(--ink); }
.footer-bottom{ padding: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-bottom p{ color: var(--muted-on-dark); font-size: 13.5px; }
.footer-bottom p span{ color: var(--gold); }
.footer-bottom-list{ display: flex; gap: 44px; }
.footer-bottom-list a{ color: var(--muted-on-dark); font-size: 13.5px; }
.footer-bottom-list a:hover{ color: var(--gold); }

.footer-glow{ position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,193,7,.14), transparent 70%); border-radius: 50%; pointer-events: none; }
.footer-glow.g1{ top: -200px; left: -150px; }
.footer-glow.g2{ bottom: -220px; right: -160px; }

/* ---------- Credit simulator result ---------- */
.sim-result{
  display: none;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.sim-result.show{ display: block; }
.sim-result-head h3{ font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.sim-result-head p{ color: var(--muted); font-size: 14.5px; }
.sim-result-table-wrap{
  margin-top: 24px;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.sim-result table{ width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
.sim-result thead th{
  background: var(--forest-deep);
  color: var(--cream);
  text-align: left;
  padding: 13px 16px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sim-result tbody td{ padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.sim-result tbody tr:last-child td{ border-bottom: none; }
.sim-result tbody tr:nth-child(even){ background: rgba(26,107,122,.045); }
.sim-result-cta{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- Back to top ---------- */
.to-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 400;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--forest); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(13,69,87,.25);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s, background .3s ease;
}
.to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover{ background: var(--gold); color: var(--ink); }
@media (max-width: 640px){
  .to-top{ width: 42px; height: 42px; right: 14px; bottom: 14px; font-size: 13px; }
}

/* ---------- Misc utilities ---------- */
.bg-cream{ background: var(--cream); }
.bg-paper{ background: var(--paper); }
.bg-forest{ background: var(--forest); color: var(--cream); }
.bg-forest-deep{ background: var(--forest-deep); color: var(--cream); }
.mt-0{ margin-top: 0 !important; }
.center-text{ text-align: center; }
.flex-center{ display: flex; align-items: center; justify-content: center; }
.hidden-mobile{ }
@media (max-width: 900px){ .hidden-mobile{ display: none !important; } }
.hidden-desktop{ display: none !important; }
@media (max-width: 900px){ .hidden-desktop{ display: block !important; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .marquee-inner{ animation: none; }
  .hz-track.is-looping{ animation: none; }
  .rv-up, .rv-fade, .rv-scale, .rv-clip{ opacity: 1; transform: none; clip-path: none; }
  .rv-line > span{ transform: none; }
}
.reduced-motion .cursor-dot, .reduced-motion .cursor-ring{ display: none; }