:root {
  --ground:      #F8F7F2;
  --surface-2:   #F0EEE4;
  --line:        #DEDBCC;
  --line-soft:   #EBE9DE;
}

.director { padding-block: clamp(3.5rem,8vw,6rem); }
.director::before { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,12,17,.88) 0%, rgba(10,12,17,.78) 100%); }
.director-backdrop { filter: saturate(1.05); }
.director-in { color:#fff; }
.director-portrait img { border-radius: 2px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }

.director .eyebrow { color: var(--green-bright); opacity: 1; }
.director-headline q { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem,4.2vw,2.9rem); line-height:1.08; letter-spacing:-.035em; display:block; }
.director-message p, .director-closing { color: rgba(255,255,255,.86); }
.director-attrib b, .director-attrib span { color:#fff; }
.director-cta { margin-top: 1.4rem; display: flex; flex-direction: column;
  align-items: flex-start; gap: .8rem; }
.director-signoff { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: -.015em; color: #fff; }

.pillars { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem,1fr)); margin-top: 2rem; }
.pillars article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pillars img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.pillars .in { padding: 1.05rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.pillars h3 { font-size: 1.1rem; line-height: 1.25; }
.pillars p { font-size: .93rem; color: var(--ink-soft); line-height: 1.5; }

.hero {
  position: relative; min-height: min(92svh, 54rem);
  display: grid; align-items: end;

  background: #0A0C11; overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .82;
}

.hero-stack { position: absolute; inset: 0; }
.hero-slide {
  opacity: 0; animation-name: heroFade; animation-duration: var(--hero-cycle, 30s);
  animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}
@keyframes heroFade {
  0%   { opacity: 0 }
  3%   { opacity: .82 }
  17%  { opacity: .82 }
  20%  { opacity: 0 }
  100% { opacity: 0 }
}

@media (prefers-reduced-motion: reduce) { .hero-slide { animation: none; opacity: 0; } }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,17,.62) 0%, rgba(10,12,17,.12) 32%, rgba(10,12,17,.88) 100%);
}
.hero-in { position: relative; padding-block: 3rem 3.4rem; color: #fff; }
.hero h1 {
  font-size: clamp(2.6rem, 8.5vw, 6rem); font-weight: 800;
  letter-spacing: -.045em; max-width: 16ch; color: #fff;
}
.hero .kicker {

  color: #FCCD38; opacity: 1; font-family: var(--font-ui); font-size: .72rem;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem;
  animation: kickerGlow 16s ease-in-out infinite;
}
@keyframes kickerGlow {
   0%  { color:#F16925; text-shadow: 0 0 18px rgba(241,105,37,.55); }
  25%  { color:#CACB2F; text-shadow: 0 0 18px rgba(202,203,47,.55); }
  50%  { color:#7A68AE; text-shadow: 0 0 22px rgba(122,104,174,.75); }
  75%  { color:#FCCD38; text-shadow: 0 0 18px rgba(252,205,56,.55); }
 100%  { color:#F16925; text-shadow: 0 0 18px rgba(241,105,37,.55); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .kicker { animation: none; color: #FCCD38; text-shadow: none; }
}
.hero .sub {
  margin-top: 1.1rem; font-size: clamp(1.05rem, 2.3vw, 1.3rem);
  color: #fff; opacity: .93; max-width: 34rem; line-height: 1.45;
}
.hero-cta { margin-top: 1.9rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.hero-cta .btn-ghost { color: var(--accent-light); border-color: var(--accent-light); }
.hero-cta .btn-ghost:hover { color: #fff; border-color: #fff; }

.masthead {

  position: sticky; top: 0; z-index: 40; background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem var(--pad); gap: 1rem;
}
.masthead .mark { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; }
.masthead nav { display: none; gap: 1.4rem; }
.masthead nav a { text-decoration: none; color: var(--ink-soft); }
.masthead nav a:hover { color: var(--ink); }
@media (min-width: 54rem) { .masthead nav { display: flex; } }

.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
.band h2 { font-size: clamp(1.8rem, 4.5vw, 2.9rem); }
.band .lede { font-size: 1.18rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.5; }

.mosaic picture { display: block; width: 100%; height: 100%; }
.pillars picture { display: block; width: 100%; }

.hero picture { display: block; position: absolute; inset: 0; }

.mosaic { display: grid; gap: .5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.2rem; }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s ease; }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic figure:nth-child(1) img { aspect-ratio: 1; }
.mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem;
  background: linear-gradient(transparent, rgba(10,12,17,.85));
  color: #fff; font-family: var(--font-ui); font-size: .76rem; font-weight: 600; line-height: 1.3;
}
@media (max-width: 44rem) { .mosaic { grid-template-columns: repeat(2, 1fr); } }

.give-band { background: var(--surface-2); }
.give-band .inner { display: grid; gap: 2.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .give-band .inner { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }

.voices-band { background: var(--ink); color: var(--ground); }
.voices-band .voice q { color: var(--ground); }
.voices-band cite { color: var(--on-ink-faint); }
.voices-band .eyebrow.on-ink { color: var(--green-bright); }
.voices-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2rem; }
.voices-band h2 { color: var(--ground); }

.aud { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; }
.aud a {
  text-decoration: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.15rem 1.2rem 1.25rem;
  display: flex; flex-direction: column; gap: .35rem; transition: border-color .12s ease;
}
.aud a:hover { border-color: var(--accent); }
.aud .k { font-family: var(--font-ui); font-size: .67rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); }
.aud .l { font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem; }
.aud .b { font-size: .92rem; color: var(--ink-soft); line-height: 1.42; }
.aud .c { font-family: var(--font-ui); font-size: .82rem; font-weight: 700; color: var(--accent); margin-top: .3rem; }