/* ---------- about facts (nested inside .commitment-col; see below) ---------- */
/* background is the section's own --background (not --surface) so this card
   still reads as a distinct card against the gray .commitment section it
   now lives in, instead of blending into an identical gray. */
.about-facts{ border-radius:var(--radius-card); background:var(--background); padding:1.5rem; display:flex; flex-direction:column; gap:1.25rem; margin-top:1.75rem; }
.about-fact{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-top:1px solid var(--hairline); padding-top:1.25rem; }
.about-fact:first-child{ border-top:none; padding-top:0; }
.about-fact strong{ font-size:1.25rem; font-weight:500; white-space:nowrap; }
.about-fact span{ font-size:0.8rem; color:var(--ink-soft); text-align:right; }

/* ---------- capabilities ---------- */
.capabilities{ background:var(--background); padding:5rem 0 5rem 1.5rem; overflow:hidden; }
@media (min-width:640px){ .capabilities{ padding:6rem 0 6rem 2.5rem; } }

.cap-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; padding-right:1.5rem; }
@media (min-width:640px){ .cap-head{ padding-right:2.5rem; } }
.cap-nav{ display:flex; align-items:center; gap:0.25rem; flex:none; }
.cap-nav-btn{
  width:2.25rem; height:2.25rem; border-radius:50%; display:grid; place-items:center; color:var(--ink-soft);
  transition:background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.cap-nav-btn:hover{ background:var(--surface); color:var(--ink); }
.cap-nav-btn:active{ transform:scale(0.9); }
.cap-nav-btn svg{ width:1.15rem; height:1.15rem; }

.cap-row{
  margin-top:3rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 2.5rem, #000 100%);
  mask-image:linear-gradient(90deg, transparent, #000 2.5rem, #000 100%);
}
.cap-track{
  display:flex; gap:1.25rem; padding-bottom:0.5rem; cursor:grab; user-select:none; touch-action:pan-y;
  will-change:transform;
  animation:cap-loop var(--cap-duration, 40s) linear infinite;
}
.cap-row:hover .cap-track{ animation-play-state:paused; }
.cap-track.is-dragging{ cursor:grabbing; }
@keyframes cap-loop{ from{ transform:translateX(0); } to{ transform:translateX(calc(-1 * var(--cap-loop-w, 1800px))); } }
@media (prefers-reduced-motion: reduce){ .cap-track{ animation:none; } }

.cap-card{
  position:relative; flex:none; width:17rem; aspect-ratio:3/4; border-radius:var(--radius-card); overflow:hidden;
  background:var(--surface); opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
@media (min-width:640px){ .cap-card{ width:19rem; } }
.cap-card.is-visible{ opacity:1; transform:translateY(0); }
.cap-card-art{ position:absolute; inset:0; pointer-events:none; }
.cap-card-art svg{ width:100%; height:100%; display:block; }
.cap-card-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.05) 45%, rgba(0,0,0,0) 65%);
}
.cap-card-body{ position:absolute; top:0; left:0; right:0; padding:1.5rem; color:#fff; }
.cap-card-eyebrow{ font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.75); }
.cap-card-body h3{ font-size:1.375rem; font-weight:500; margin-top:0.5rem; line-height:1.2; letter-spacing:-0.01em; }

/* ---------- our work ---------- */
.work{ background:var(--surface); padding:6rem 1.5rem; }
@media (min-width:640px){ .work{ padding-left:2.5rem; padding-right:2.5rem; } }
.section-head h2{ font-size:3rem; font-weight:500; line-height:0.95; letter-spacing:-0.01em; margin-top:1rem; }

.work-grid{ display:grid; grid-template-columns:1fr; gap:2rem; margin-top:3.5rem; }
@media (min-width:768px){ .work-grid{ grid-template-columns:1fr 1.2fr; gap:3rem; align-items:center; } }

.work-list{ display:flex; flex-direction:column; }
.work-item{
  display:flex; align-items:baseline; gap:1rem; width:100%; text-align:left;
  padding:1.1rem 0; border-top:1px solid var(--hairline); color:var(--ink-soft);
  transition:color 200ms ease;
}
.work-list li:last-child .work-item{ border-bottom:1px solid var(--hairline); }
.work-item-index{ font-size:0.8125rem; font-weight:500; flex:none; opacity:0.6; }
.work-item-title{ display:inline-flex; font-size:1.5rem; font-weight:500; letter-spacing:-0.01em; transition:transform 300ms var(--ease-out); }
@media (min-width:640px){ .work-item-title{ font-size:1.875rem; } }
.work-item:hover, .work-item:focus-visible{ color:var(--ink); }
.work-item.is-active{ color:var(--ink); }
.work-item.is-active .work-item-title{ transform:translateX(0.5rem); }
.work-item.is-active .work-item-index{ opacity:1; color:var(--brand); }

/* rolling character hover text: two stacked copies of each glyph, the dim
   one rolling up and out while the solid one rolls up into view */
.roll-char{ position:relative; display:inline-block; overflow:hidden; height:1.2em; line-height:1.2em; white-space:pre; }
.roll-char-ghost, .roll-char-active{ display:block; transition:transform 420ms cubic-bezier(0.16,1,0.3,1); }
.roll-char-ghost{ opacity:0.35; }
.roll-char-active{ position:absolute; left:0; top:0; transform:translateY(105%); }
.work-item.is-active .roll-char-ghost{ transform:translateY(-105%); }
.work-item.is-active .roll-char-active{ transform:translateY(0%); }

.work-visual{ position:relative; aspect-ratio:4/3; cursor:pointer; }
.work-slide{ position:absolute; inset:0; }
.work-photo{ border-radius:var(--radius-card-lg); overflow:hidden; background:var(--brand-deep); }
.work-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.work-photo-main{
  position:absolute; inset:0;
  clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  transition:clip-path 750ms cubic-bezier(0.33,1,0.68,1);
}
.work-slide.is-active .work-photo-main{ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }

.work-photo-sub{
  position:absolute; width:34%; aspect-ratio:1/1; border:3px solid var(--surface);
  box-shadow:0 1rem 2rem rgba(0,0,0,0.3);
  opacity:0; transform:translateY(14px) scale(0.9);
  transition:opacity 450ms ease, transform 450ms var(--ease-out);
}
.work-slide.is-active .work-photo-sub{ opacity:1; transform:translateY(0) scale(1); }
.work-photo-sub-a{ right:-0.75rem; bottom:3rem; transition-delay:140ms; }
.work-photo-sub-b{ right:2.75rem; bottom:-0.75rem; transition-delay:260ms; }

/* ---------- partners marquee ---------- */
.partners{ background:var(--brand-deep); color:#fff; padding:4.5rem 0; border-radius:var(--radius-card-lg); margin-top:0.75rem; overflow:hidden; }
.partners-head{ padding:0 1.5rem; }
@media (min-width:640px){ .partners-head{ padding:0 2.5rem; } }
.partners-head h2{ font-size:2.5rem; font-weight:500; line-height:1; letter-spacing:-0.01em; }
@media (min-width:640px){ .partners-head h2{ font-size:3rem; } }
.partners-head p{ font-size:0.9375rem; color:rgba(255,255,255,0.6); margin-top:0.75rem; max-width:28rem; }
.marquee{ margin-top:2.75rem; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track{ display:flex; gap:0.75rem; width:max-content; animation:marquee 36s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.partner-chip{
  flex:none; display:inline-flex; align-items:center; gap:0.6rem; padding:0.75rem 1.5rem; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05);
  font-size:0.9375rem; font-weight:500; letter-spacing:0.01em; color:rgba(255,255,255,0.85); white-space:nowrap;
  transition:background-color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .partner-chip:hover{
    background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3);
    transform:translateY(-3px); color:#fff;
  }
}
.partner-logo-box{ display:flex; align-items:center; justify-content:center; width:2.75rem; height:1.25rem; flex:none; }
.partner-logo-box img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.partner-logo-box img.partner-logo-invert{ filter:brightness(0) invert(1); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; flex-wrap:wrap; width:100%; }
}

/* ---------- why us ---------- */
.infra{ background:var(--background); border-radius:var(--radius-card-lg); margin-top:-2.5rem; padding:4rem 1.5rem 5rem; position:relative; z-index:2; }
@media (min-width:640px){ .infra{ padding-left:2.5rem; padding-right:2.5rem; } }
.infra-head{ display:flex; align-items:center; gap:1.25rem; max-width:40rem; }
.infra-icon{
  width:4rem; height:4rem; flex:none; border-radius:var(--radius-card); background:var(--brand-deep); color:#fff;
  display:grid; place-items:center;
}
.infra-icon svg{ width:1.75rem; height:1.75rem; }
.infra-head h2{ font-size:2.25rem; font-weight:500; line-height:1; letter-spacing:-0.01em; }
@media (min-width:640px){ .infra-head h2{ font-size:3rem; } }
.reasons-grid{ display:grid; grid-template-columns:1fr; gap:2rem; margin-top:3.5rem; }
@media (min-width:640px){ .reasons-grid{ grid-template-columns:1fr 1fr; gap:2.5rem; } }
@media (min-width:1024px){ .reasons-grid{ grid-template-columns:repeat(3,1fr); } }
.reason-card{ border-top:1px solid var(--hairline); padding-top:1.25rem; }
.reason-card svg{ width:1.75rem; height:1.75rem; color:var(--brand); }
.reason-card h3{ font-size:1.125rem; font-weight:500; margin-top:1rem; }
.reason-card p{ font-size:0.875rem; color:var(--ink-soft); margin-top:0.4rem; line-height:1.5; }

/* ---------- stats ---------- */
.stats{ background:var(--brand-deep); color:#fff; border-radius:var(--radius-card-lg); margin-top:0.75rem; padding:5rem 1.5rem; }
@media (min-width:640px){ .stats{ padding-left:2.5rem; padding-right:2.5rem; } }
.stats h2{ font-size:3rem; font-weight:500; line-height:0.95; margin-top:1rem; }
.stats-grid{
  display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; row-gap:3rem; margin-top:4rem;
}
@media (min-width:1024px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-cell{ border-top:1px solid rgba(255,255,255,0.2); padding-top:1.25rem; }
.stat-cell strong{ display:block; font-size:3.75rem; font-weight:500; letter-spacing:-0.01em; }
@media (min-width:640px){ .stat-cell strong{ font-size:4.5rem; } }
.stat-cell p{ font-size:0.875rem; color:rgba(255,255,255,0.65); margin-top:0.75rem; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- location / map ---------- */
.location{ padding:5rem 1.5rem; text-align:center; }
@media (min-width:640px){ .location{ padding:6rem 2.5rem; } }
.location h2{ font-size:1.75rem; font-weight:600; letter-spacing:-0.01em; color:var(--ink); margin-bottom:2rem; }
.location-card{
  position:relative; max-width:64rem; height:26rem; margin:0 auto;
  border-radius:var(--radius-card-lg); overflow:hidden; box-shadow:0 1.5rem 3rem rgba(0,0,0,0.12);
  background:var(--surface);
}
.location-map-mount{ width:100%; height:100%; }
.location-map-mount iframe{ width:100%; height:100%; border:0; display:block; }
.location-map-mount.location-fallback{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem;
  height:100%; color:var(--ink-soft);
  background:linear-gradient(135deg, var(--surface), #ececeb);
}
.location-map-mount.location-fallback svg{ width:2.5rem; height:2.5rem; color:var(--brand); }
.location-map-mount.location-fallback p{ font-size:0.875rem; max-width:20rem; text-align:center; }
.location-open-btn{
  position:absolute; top:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:0.4rem;
  background:#ffffff; color:var(--ink); padding:0.6rem 1rem; border-radius:var(--radius-pill);
  font-size:0.8rem; font-weight:500; box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.18);
  transition:transform 160ms var(--ease-out);
}
.location-open-btn:hover{ color:var(--brand); }
.location-open-btn:active{ transform:scale(0.96); }
.location-open-btn svg{ width:0.9rem; height:0.9rem; }

/* ---------- mission / commitment (mission sits right after the hero, a
   real black-to-white break, so normal section padding reads fine here —
   unlike when it was sandwiched between two white sections) ---------- */
.mission{ background:var(--background); padding:5rem 1.5rem; }
@media (min-width:640px){ .mission{ padding:6rem 2.5rem; } }
.section-head p{ font-size:0.9375rem; color:var(--ink-soft); line-height:1.7; margin-top:1.25rem; max-width:38rem; }

.commitment{ background:var(--surface); padding:5rem 1.5rem; }
@media (min-width:640px){ .commitment{ padding:6rem 2.5rem; } }
.commitment > .section-head{ margin-bottom:3.5rem; }
.commitment-grid{ display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:900px){ .commitment-grid{ grid-template-columns:1fr 1fr; gap:4rem; } }
.commitment-col h3{ font-size:1.75rem; font-weight:600; letter-spacing:-0.01em; color:var(--ink); margin-bottom:1.25rem; }
.commitment-col > p{ font-size:0.9375rem; color:var(--ink-soft); line-height:1.7; margin-bottom:1.25rem; }
.commitment-intro{ margin-bottom:1.5rem; }

.commitment-quote{
  margin-top:1.5rem; border-radius:var(--radius-card); background:var(--brand-deep); color:#fff;
  padding:1.75rem;
}
.commitment-quote .t-quote-mark{ display:block; font-size:2.5rem; color:var(--brand-light); line-height:1; font-family:Georgia,serif; }
.commitment-quote-eyebrow{
  display:block; font-size:0.8125rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--brand-light); margin-top:0.75rem;
}
.commitment-quote p{ font-size:0.9375rem; color:rgba(255,255,255,0.85); line-height:1.7; margin-top:0.75rem; }

.commitment-list{ display:flex; flex-direction:column; gap:1.1rem; }
.commitment-list li{ display:flex; align-items:flex-start; gap:0.9rem; }
.commitment-list svg{
  flex:none; width:1.5rem; height:1.5rem; padding:0.3rem; box-sizing:border-box; border-radius:var(--radius-pill);
  background:rgba(200,32,44,0.12); color:var(--brand); margin-top:0.1rem;
}
.commitment-list span{ font-size:0.9375rem; color:var(--ink); line-height:1.6; }