/* ==========================================================================
   TAP — Shared styles for interior pages (What We Do, Our Story, About TAP,
   Team). Builds on the design tokens / components already defined in
   assets/css/style.css (colors, fonts, buttons, header, footer).
   ========================================================================== */

/* ---------- Dark solid button (used on light sections, e.g. About TAP "Explore the Vision") ---------- */
.btn-tap-dark{
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--tap-ink);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  padding: .85rem 1.7rem;
  border-radius: 4px;
  border: 2px solid var(--tap-ink);
  transition: background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.btn-tap-dark:hover{ background: transparent; color: var(--tap-ink); transform: translateY(-2px); }

/* ---------- Nav: current-page state ---------- */
.nav-links a.is-active{ color: var(--tap-orange); }
.nav-links a.is-active::after{ width: 100%; }
.nav-dropdown.is-current > .nav-dropdown-toggle{ color: var(--tap-orange); }
.nav-dropdown-menu a.is-active{ color: var(--tap-orange); font-weight: 700; }

/* ---------- Nav: white text on interior pages ----------
   These 4 pages open on a dark full-bleed hero photo, so the nav needs to
   read in white until the header picks up its solid/blurred background on
   scroll (assets/js/main.js toggles .is-scrolled on #siteHeader). The
   homepage keeps its own default (untouched) header markup/behavior. */
.site-header--on-dark .nav-links a,
.site-header--on-dark .nav-dropdown-toggle,
.site-header--on-dark .icon-btn{ color: #fff; }
.site-header--on-dark .icon-btn{ border-color: rgba(255,255,255,.35); }
.site-header--on-dark .nav-links a:hover,
.site-header--on-dark .nav-dropdown.is-current > .nav-dropdown-toggle{ color: var(--tap-orange); }
.site-header--on-dark.is-scrolled .nav-links a,
.site-header--on-dark.is-scrolled .nav-dropdown-toggle,
.site-header--on-dark.is-scrolled .icon-btn{ color: var(--tap-ink); }
.site-header--on-dark.is-scrolled .icon-btn{ border-color: var(--tap-border); }
.site-header--on-dark.is-scrolled .nav-links a:hover{ color: var(--tap-orange); }

/* ==========================================================================
   PAGE HERO — full-bleed banner photo with text overlaid on top, per the
   PSDs. One image spans the entire section width; a left-to-right dark
   gradient keeps the headline legible while the photo stays visible on the
   right. Each page sets its own photo via an inline
   style="background-image:url(...)" on .page-hero.
   ========================================================================== */
.page-hero{
  position: relative;
  background-color: var(--tap-ink);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 150px 0 56px;
  overflow: hidden;
}
.page-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10,10,10,.92) 0%,
    rgba(10,10,10,.86) 32%,
    rgba(10,10,10,.5) 58%,
    rgba(10,10,10,.15) 82%,
    rgba(10,10,10,.05) 100%);
}
.page-hero .container{ position: relative; z-index: 1; }
.page-hero .eyebrow{ color: var(--tap-orange); }
.page-hero-title{
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.page-hero-title .accent{ color: var(--tap-orange); }
.page-hero-copy{
  color: #e6e6e6;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 44ch;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.page-hero-script{
  position: absolute;
   right: 5%;
  z-index: 1;
  font-family: var(--font-script);
  color: #fff;
  font-size: 2rem;
  line-height: 1.35;
  text-align: right;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.page-hero-script .underline{
  display: block;
  width: 92px;
  height: 3px;
  background: var(--tap-orange);
  margin: 6px 0 0 auto;
  border-radius: 2px;
}
@media (max-width: 991.98px){
  .page-hero{ min-height: 460px; padding-top: 128px; background-position: 68% center; }
  .page-hero::before{ background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.9) 55%, rgba(10,10,10,.96) 100%); }
  .page-hero-script{ display: none; }
}
@media (max-width: 575.98px){
  .page-hero{ min-height: 420px; }
}

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */
.tap-section{ padding: 84px 0; }
.tap-section.bg-cream{ background: var(--tap-cream); }
.tap-section.bg-white{ background: #fff; }
.tap-section + .tap-section{ border-top: 1px solid var(--tap-border); }
@media (max-width: 767.98px){
  .tap-section{ padding: 56px 0; }
}

.split-media{ position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 44px -22px rgba(18,18,18,.3); }
.split-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.split-tag{
  position: absolute; left: 18px; bottom: 18px;
  background: rgba(15,15,15,.72);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.35;
  padding: 14px 18px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  max-width: 66%;
}
.split-copy{ display: flex; flex-direction: column; justify-content: center; height: 100%; }
.split-copy .section-title{ margin-bottom: .8rem; }
.split-copy .body-copy{ max-width: 52ch; margin-bottom: 1.6rem; }

/* ==========================================================================
   STAT STRIP (About TAP — "Real People. Real Change.")
   ========================================================================== */
.stat-strip{
  background: var(--tap-ink);
  padding: 46px 0;
}
.stat-strip-row{ display: flex; flex-wrap: wrap; align-items: center; }
.stat-strip-item{
  display: flex; align-items: center; gap: 14px;
  padding: 10px 28px;
  border-right: 1px solid rgba(255,255,255,.14);
  flex: 1 1 0;
  min-width: 210px;
}
.stat-strip-row > .stat-strip-item:last-child{ border-right: none; }
.stat-strip-icon{ width: 34px; height: 34px; color: var(--tap-orange); flex-shrink: 0; }
.stat-strip-icon svg{ width: 100%; height: 100%; }
.stat-strip-num{ color: var(--tap-orange); font-weight: 800; font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 3px; }
.stat-strip-label{ color: #d8d8d8; font-size: .84rem; line-height: 1.35; }
.stat-strip-note{ color: #d8d8d8; font-size: .92rem; line-height: 1.6; padding-left: 28px; border-left: 2px solid rgba(255,255,255,.3); max-width: 40ch; }
@media (max-width: 991.98px){
  .stat-strip-item{ border-right: none; border-bottom: 1px solid rgba(255,255,255,.14); padding: 16px 0; }
  .stat-strip-note{ border-left: none; padding-left: 0; margin-top: 18px; }
}

/* ==========================================================================
   SKYLINE CTA BANNER (About / Our Story / Team / What We Do)
   ========================================================================== */
.skyline-cta{
  position: relative;
    background: #1A1200 url(../../images/chicago-panoramic.png) center 62% / cover no-repeat;
    padding: 110px 0;
}
.skyline-cta::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,3,2,.88) 0%, rgba(5,3,2,.55) 45%, rgba(5,3,2,.15) 80%);
}
.skyline-cta .container{ position: relative; z-index: 1; }
.skyline-cta-title{
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.18;
  margin: 0;
}
.skyline-cta-title .accent{ color: var(--tap-orange); }
@media (max-width: 767.98px){
  .skyline-cta .row{ text-align: center; }
  .skyline-cta .text-lg-end{ text-align: center !important; margin-top: 1.25rem; }
}

/* ==========================================================================
   OUR STORY — timeline grid
   ========================================================================== */
.story-lede{ max-width: 46ch; }
.story-lede .body-copy{ margin-bottom: 1.1rem; }
.story-script{
  font-family: var(--font-script);
  color: var(--tap-ink);
  font-size: 1.5rem;
  line-height: 1.35;
  margin-top: 1.5rem;
}
.story-script .underline{ display: block; width: 130px; height: 3px; background: var(--tap-orange); margin-top: 6px; border-radius: 2px; }

.story-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.story-card{
  background: var(--tap-ink);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.story-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px -16px rgba(18,18,18,.4); }
.story-card-img{ height: 130px; overflow: hidden; }
.story-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.story-card:hover .story-card-img img{ transform: scale(1.08); }
.story-card-body{ padding: 16px 18px 20px; }
.story-card-year{ color: var(--tap-orange); font-weight: 800; font-size: 1.5rem; line-height: 1; margin-bottom: 6px; }
.story-card-title{ color: #fff; font-weight: 700; font-size: .92rem; letter-spacing: .01em; text-transform: uppercase; margin-bottom: 6px; }
.story-card-desc{ color: #b9b9b9; font-size: .84rem; line-height: 1.55; margin: 0; }
@media (max-width: 767.98px){
  .story-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .story-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   TEAM PAGE
   ========================================================================== */
.team-lead-row{ padding: 56px 0; }
.team-lead-row + .team-lead-row{ border-top: 1px solid var(--tap-border); }
.team-kicker{
  display: flex; align-items: center; gap: 12px;
  color: var(--tap-ink);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.team-kicker::before{ content:""; width: 30px; height: 3px; background: var(--tap-orange); border-radius: 2px; flex-shrink: 0; }
.team-lead-photo{ border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(18,18,18,.35); }
.team-lead-photo img{ width: 100%; display: block; object-fit: cover; }
.team-lead-name{ font-weight: 800; font-size: 1.4rem; margin-bottom: .2rem; }
.team-lead-title{ color: var(--tap-orange); font-weight: 700; font-size: .92rem; margin-bottom: 1rem; }
.team-lead-bio p{ color: var(--tap-ink-soft); font-size: .94rem; line-height: 1.7; margin-bottom: .9rem; }
.team-quote{
  background: var(--tap-cream);
  border-radius: 10px;
  padding: 26px 24px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.team-quote-mark{ color: var(--tap-border); font-size: 2.4rem; line-height: 1; font-weight: 800; margin-bottom: .3rem; }
.team-quote p{ color: var(--tap-ink); font-size: 1rem; line-height: 1.6; font-style: italic; margin-bottom: .9rem; }
.team-quote-attr{ color: var(--tap-orange); font-weight: 700; font-size: .88rem; font-style: italic; }

.team-sub-heading{
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 2rem;
}
.team-sub-heading::before{ content:""; width: 30px; height: 3px; background: var(--tap-orange); border-radius: 2px; flex-shrink: 0; }

.team-card{ display: flex; gap: 18px; margin-bottom: 2.4rem; }
.team-card-photo{ width: 150px; border-radius: 10px; overflow: hidden; flex-shrink: 0; box-shadow: 0 10px 24px -12px rgba(18,18,18,.3); height: 200px; }
.team-card-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card-name{ font-weight: 800; font-size: 1.05rem; margin-bottom: .15rem; }
.team-card-title{ color: var(--tap-orange); font-weight: 700; font-size: .82rem; margin-bottom: .55rem; }
.team-card-desc{ color: var(--tap-ink-soft); font-size: .88rem; line-height: 1.65; margin: 0; }
@media (max-width: 575.98px){
  .team-card{ flex-direction: column; }
  .team-card-photo{ width: 100%; height: 190px; }
}

/* ==========================================================================
   WHAT WE DO — numbered feature rows
   ========================================================================== */
.wwd-features{ background: var(--tap-ink); padding: 0; }
.wwd-row{
  display: grid;
  grid-template-columns: 1fr 1.15fr auto;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.wwd-row:last-child{ border-bottom: none; }
.wwd-row.reverse{ grid-template-columns: 1.15fr 1fr auto; }
.wwd-row.reverse .wwd-media{ order: 2; }
.wwd-row.reverse .wwd-copy{ order: 1; }
.wwd-row.reverse .wwd-aside{ order: 3; }
.wwd-media{ border-radius: 10px; overflow: hidden; height: 210px; }
.wwd-media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.wwd-row:hover .wwd-media img{ transform: scale(1.06); }
.wwd-num{ color: var(--tap-orange); font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; margin-bottom: .7rem; }
.wwd-num::after{ content:""; height: 2px; width: 34px; background: var(--tap-orange); opacity: .55; }
.wwd-copy h3{ color: #fff; font-weight: 800; font-size: 1.35rem; margin-bottom: .6rem; letter-spacing: -.005em; }
.wwd-copy p{ color: #c9c9c9; font-size: .94rem; line-height: 1.65; max-width: 42ch; margin-bottom: .9rem; }
.wwd-learn{ color: var(--tap-orange); font-weight: 700; font-size: .84rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; }
.wwd-learn svg{ transition: transform .25s var(--ease); }
.wwd-row:hover .wwd-learn svg{ transform: translateX(4px); }
.wwd-aside{ display: flex; align-items: center; gap: 22px; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.14); }
.wwd-icon{ width: 46px; height: 46px; color: var(--tap-orange); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wwd-icon svg{ width: 100%; height: 100%; }
.wwd-tags{ list-style: none; margin: 0; padding: 0; }
.wwd-tags li{ color: #c9c9c9; font-size: .82rem; line-height: 1.85; white-space: nowrap; }

@media (max-width: 991.98px){
  .wwd-row, .wwd-row.reverse{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 34px 0;
  }
  .wwd-row.reverse .wwd-media,
  .wwd-row.reverse .wwd-copy,
  .wwd-row.reverse .wwd-aside{ order: initial; }
  .wwd-aside{ border-left: none; border-top: 1px solid rgba(255,255,255,.14); padding-left: 0; padding-top: 18px; }
  .wwd-tags li{ white-space: normal; }
}

.wwd-bottom-strip{ background: var(--tap-ink); border-top: 1px solid rgba(255,255,255,.1); padding: 28px 0; }
.wwd-bottom-strip-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; }
.wwd-bottom-strip-item{ display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; }
.wwd-bottom-strip-item svg{ width: 20px; height: 20px; color: var(--tap-orange); flex-shrink: 0; }
.w-300{
  width: 300px;
}