/* ── SKIP TO CONTENT (accessibility) ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--em);
  color: #fff;
  padding: .75rem 1.5rem;
  font-family: var(--ff-b);
  font-size: .88rem;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  z-index: 9999;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* =========================================================
   TARA CHAND — The Grid Dispatch
   White · Emerald · Amber gold · Nunito Sans + Libre Baskerville
   Floating pill nav · Page-number headers · Card grid layout
   7 separate HTML files · WCAG AA+ throughout
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,300;1,6..12,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  --em:      #064E3B;
  --em2:     #065F46;
  --em3:     #047857;
  --em-l:    #D1FAE5;
  --em-ll:   #ECFDF5;
  --em-mid:  #6EE7B7;
  --amber:   #D97706;
  --amber-d: #B45309;
  --amber-l: #FFFBEB;
  --white:   #FFFFFF;
  --page:    #F8FAFB;
  --ink:     #111827;
  --ink2:    #374151;
  --ink3:    #6B7280;
  --ink4:    #9CA3AF;
  --border:  #E5E7EB;
  --border2: #D1FAE5;

  --ff-d:  'Libre Baskerville', Georgia, serif;
  --ff-b:  'Nunito Sans', system-ui, sans-serif;
  --ff-m:  'Space Mono', monospace;
  --ease:  cubic-bezier(.25,.46,.45,.94);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--ff-b);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; }

/* =========================================================
   TOP ACCENT BAR
   ========================================================= */
.accent-bar {
  height: 4px;
  background: linear-gradient(to right, var(--em) 0%, var(--em-mid) 60%, var(--amber) 100%);
}

/* =========================================================
   FLOATING PILL NAV
   ========================================================= */
.pill-nav {
  position: sticky;
  top: 8px;
  z-index: 500;
  display: flex;
  justify-content: center;
  padding: 0 1.5rem;
  margin-bottom: 0;
}
.pill-nav-inner {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 40px;
  padding: 5px 6px;
  gap: 2px;
  box-shadow: 0 4px 24px rgba(6,78,59,.12), 0 1px 4px rgba(0,0,0,.06);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.pill-nav-inner::-webkit-scrollbar { display: none; }
.pn-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem 1.1rem;
  border-radius: 28px;
  font-family: var(--ff-b);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink3);
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, color .18s;
  flex-shrink: 0;
}
.pn-item:hover { background: var(--em-ll); color: var(--em); }
.pn-item.active {
  background: var(--em);
  color: #fff;
}
.pn-num {
  font-family: var(--ff-m);
  font-size: .6rem;
  opacity: .55;
  transition: opacity .18s;
}
.pn-item.active .pn-num { opacity: 1; color: var(--em-mid); }

/* Mobile hamburger for pill nav overflow */
.mob-nav-btn {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 600;
  width: 52px;
  height: 52px;
  background: var(--em);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(6,78,59,.35);
  font-family: var(--ff-m);
  font-size: .65rem;
  color: #fff;
  flex-direction: column;
  gap: 4px;
}
.mob-nav-btn span { display: block; width: 18px; height: 1.5px; background: #fff; border-radius: 2px; }
.mob-drawer {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1.5px solid var(--border);
  border-radius: 20px 20px 0 0;
  z-index: 590;
  padding: 1.5rem 0 2rem;
  box-shadow: 0 -8px 32px rgba(0,0,0,.12);
}
.mob-drawer.show { display: block; }
.mob-overlay-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:580; }
.mob-overlay-bg.show { display:block; }



.mob-drawer a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 2rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink2);
  border-bottom: 1px solid var(--border);
  transition: background .15s, color .15s;
}
.mob-drawer a:hover, .mob-drawer a.active { background: var(--em-ll); color: var(--em); }
.mob-drawer a.active { border-left: 3px solid var(--amber); }
.mob-drawer-num { font-family: var(--ff-m); font-size: .7rem; color: var(--ink4); }

/* =========================================================
   PAGE NUMBER HEADERS (signature element)
   ========================================================= */
.page-header {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
  overflow: hidden;
  min-height: 180px;
}
.ph-num-col {
  background: var(--em-ll);
  border-right: 1.5px solid var(--border2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.ph-num-col::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(110,231,183,.2);
  pointer-events: none;
}
.ph-big-num {
  font-family: var(--ff-d);
  font-size: 6rem;
  font-weight: 700;
  color: var(--em);
  line-height: 1;
  opacity: .18;
  position: absolute;
  bottom: -.2em;
  left: .1em;
  pointer-events: none;
}
.ph-label {
  font-family: var(--ff-m);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--em3);
  position: relative;
  z-index: 1;
  text-align: center;
}
.ph-text-col {
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ph-kicker {
  font-family: var(--ff-m);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.ph-kicker::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
}
.ph-title {
  font-family: var(--ff-d);
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--em);
  line-height: 1.07;
  letter-spacing: -.015em;
  margin-bottom: .7rem;
}
.ph-title em { font-style: italic; color: var(--amber); font-weight: 400; }
.ph-subtitle {
  font-size: .98rem;
  color: var(--ink2);
  line-height: 1.75;
  font-weight: 300;
  max-width: 560px;
}

/* =========================================================
   HOME PAGE — Philosophy Hero
   ========================================================= */
.home-hero {
  background: var(--em);
  display: grid;
  grid-template-columns: 1fr 400px;
  min-height: calc(100vh - 60px);
}
.hh-left {
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.hh-hindi {
  font-family: var(--ff-d);
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 700;
  color: rgba(255,255,255,.06);
  line-height: .85;
  letter-spacing: -.04em;
  position: absolute;
  top: 2rem; left: 2rem;
  pointer-events: none;
  user-select: none;
}
.hh-tag {
  font-family: var(--ff-m);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--em-mid);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.hh-tag::before { content: ''; width: 32px; height: 2px; background: var(--amber); border-radius: 2px; }
.hh-h1 {
  font-family: var(--ff-d);
  font-size: clamp(2.6rem, 5vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  line-height: .97;
  letter-spacing: -.025em;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.hh-h1 .gold { color: var(--amber); }
.hh-h1 .italic { font-style: italic; font-weight: 400; }
.hh-body {
  font-size: 1.05rem;
  color: rgba(255,255,255,.72);
  max-width: 500px;
  line-height: 1.82;
  font-weight: 300;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
.hh-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.btn-amber {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--amber);
  color: #fff;
  padding: .9rem 2.2rem;
  font-size: .88rem;
  font-weight: 700;
  border-radius: 8px;
  font-family: var(--ff-b);
  transition: background .15s, transform .15s;
}
.btn-amber:hover { background: var(--amber-d); transform: translateY(-2px); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: transparent;
  color: rgba(255,255,255,.82);
  padding: .9rem 2.2rem;
  font-size: .88rem;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 8px;
  font-family: var(--ff-b);
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--em);
  color: #fff;
  padding: .85rem 2rem;
  font-size: .88rem;
  font-weight: 700;
  border-radius: 8px;
  font-family: var(--ff-b);
  transition: background .15s, transform .15s;
}
.btn-solid:hover { background: var(--em2); transform: translateY(-2px); }
.btn-outline-em {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: transparent;
  color: var(--em);
  padding: .85rem 2rem;
  font-size: .88rem;
  font-weight: 700;
  border: 2px solid var(--em);
  border-radius: 8px;
  font-family: var(--ff-b);
  transition: background .15s, color .15s;
}
.btn-outline-em:hover { background: var(--em); color: #fff; }
.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; }

.hh-right {
  position: relative;
  overflow: hidden;
  background: var(--em2);
}
.hh-right img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(.8) contrast(1.08) brightness(.75);
  mix-blend-mode: luminosity;
  opacity: .55;
}
.hh-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--em) 0%, transparent 50%);
}
.hh-philosophy-card {
  position: absolute;
  bottom: 2.5rem;
  right: 2rem;
  left: 2rem;
  z-index: 2;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 1.5rem;
}
.hpc-title {
  font-family: var(--ff-m);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--em-mid);
  margin-bottom: .6rem;
}
.hpc-text {
  font-family: var(--ff-d);
  font-style: italic;
  font-size: 1.1rem;
  color: #fff;
  line-height: 1.55;
}

/* Impact strip */
.impact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
}
.is-cell {
  padding: 2rem 1.8rem;
  text-align: center;
  border-right: 1.5px solid var(--border);
  position: relative;
}
.is-cell:last-child { border-right: none; }
.is-cell::after {
  content: '';
  position: absolute;
  top: 0; left: 1.8rem; right: 1.8rem;
  height: 3px;
  background: var(--em);
  border-radius: 0 0 3px 3px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--ease);
}
.is-cell:hover::after { transform: scaleX(1); }
.is-num {
  font-family: var(--ff-d);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--em);
  display: block;
  line-height: 1;
  margin-bottom: .3rem;
}
.is-num.amber { color: var(--amber); }
.is-label {
  font-family: var(--ff-m);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* =========================================================
   CARD SYSTEM
   ========================================================= */
/* Containers */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }

/* Section heading style */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.sec-title {
  font-family: var(--ff-d);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 700;
  color: var(--em);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.sec-title em { font-style: italic; font-weight: 400; color: var(--amber); }
.sec-kicker {
  font-family: var(--ff-m);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .55rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.sec-kicker::before { content: ''; width: 20px; height: 2px; background: var(--amber); border-radius: 2px; }
.sec-rule { width: 48px; height: 3px; background: var(--em); border-radius: 3px; margin-top: 1rem; }

/* Bands */
.band { padding: 5rem 0; }
.band-sm { padding: 3.5rem 0; }
.bg-white { background: var(--white); }
.bg-mint { background: var(--em-ll); }
.bg-em { background: var(--em); }

/* Pull quote */
.pull-quote {
  background: var(--em);
  padding: 4.5rem 3rem;
  position: relative;
  overflow: hidden;
}
.pull-quote::before {
  content: '"';
  position: absolute;
  right: 1rem; top: -2rem;
  font-family: var(--ff-d);
  font-size: 18rem;
  color: rgba(255,255,255,.04);
  line-height: 1;
}
.pq-text {
  font-family: var(--ff-d);
  font-size: clamp(1.35rem, 2.8vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  color: #fff;
  line-height: 1.45;
  max-width: 800px;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
}
.pq-attr {
  font-family: var(--ff-m);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--em-mid);
  display: flex;
  align-items: center;
  gap: .7rem;
  position: relative;
  z-index: 1;
}
.pq-attr::before { content: ''; width: 28px; height: 1.5px; background: var(--amber); border-radius: 2px; }

/* Focus area cards */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.focus-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.focus-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--em), var(--em-mid));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
  border-radius: 0 0 12px 12px;
}
.focus-card:hover { border-color: var(--em-l); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(6,78,59,.1); }
.focus-card:hover::after { transform: scaleX(1); }
.fc-num {
  font-family: var(--ff-m);
  font-size: .65rem;
  color: var(--em-mid);
  letter-spacing: .12em;
  margin-bottom: .8rem;
  display: block;
}
.fc-title {
  font-family: var(--ff-d);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--em);
  margin-bottom: .65rem;
}
.fc-body { font-size: .92rem; color: var(--ink2); line-height: 1.8; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-2col {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  align-items: start;
}
.about-stick {
  position: sticky;
  top: 80px;
  padding: 2.5rem 2.5rem 2.5rem 0;
  border-right: 1.5px solid var(--border);
}
.about-portrait {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 10px;
  filter: saturate(.9) contrast(1.04);
  margin-bottom: 1.4rem;
}
.tag-pill {
  display: inline-block;
  font-family: var(--ff-m);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 20px;
  margin-bottom: .45rem;
}
.tp-green { background: var(--em-l); color: var(--em); }
.tp-amber { background: var(--amber-l); color: var(--amber-d); }
.about-body {
  padding: 2.5rem 0 2.5rem 3rem;
}
.exp-list { border-top: 1.5px solid var(--border); margin-top: 1.2rem; }
.exp-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--em-l);
  font-size: .93rem;
  color: var(--ink);
  transition: background .15s, padding-left .18s;
}
.exp-item:hover { background: var(--em-ll); padding-left: .5rem; border-radius: 4px; }
.exp-bullet {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--em-mid);
  margin-top: .55rem;
  flex-shrink: 0;
}
.cred-cards { display: flex; flex-direction: column; gap: .85rem; margin-top: 1rem; }
.cred-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  transition: border-color .2s, background .2s;
}
.cred-card:hover { border-color: var(--em3); background: var(--em-ll); }
.cred-year { font-family: var(--ff-m); font-size: .62rem; color: var(--amber); letter-spacing: .1em; margin-bottom: .25rem; }
.cred-name { font-size: .93rem; color: var(--em); font-weight: 700; }
.cred-inst { font-size: .8rem; color: var(--ink3); margin-top: .18rem; }
.mem-item2 {
  display: flex;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--em-l);
  font-size: .9rem;
  color: var(--ink2);
  transition: color .15s, padding-left .15s;
}
.mem-item2:hover { color: var(--em); padding-left: .4rem; }
.mem-item2::before { content: '→'; color: var(--amber); flex-shrink: 0; font-weight: 700; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 2rem 0;
}
.sr-cell {
  padding: 1.3rem 1rem;
  background: var(--white);
  text-align: center;
}
.sr-num {
  font-family: var(--ff-d);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--em);
  display: block;
  line-height: 1;
  margin-bottom: .2rem;
}
.sr-num.amber { color: var(--amber); }
.sr-lbl { font-family: var(--ff-m); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }

/* =========================================================
   JOURNEY — TIMELINE
   ========================================================= */
.journey-wrap {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 4rem;
  align-items: start;
}
.tl-new { position: relative; padding-left: 2.5rem; }
.tl-new::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--em) 0%, var(--border) 100%);
}
.tl-entry {
  position: relative;
  padding-bottom: 3rem;
  padding-left: 2rem;
}
.tl-entry:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: -2.5rem;
  top: .3rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2.5px solid var(--em3);
  transition: background .2s, border-color .2s;
}
.tl-dot.now { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 5px rgba(217,119,6,.15); }
.tl-entry:hover .tl-dot { background: var(--em); border-color: var(--em); }
.tl-period { font-family: var(--ff-m); font-size: .62rem; letter-spacing: .1em; color: var(--em3); margin-bottom: .4rem; }
.tl-badge2 {
  display: inline-block;
  font-family: var(--ff-m);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid var(--border);
  color: var(--ink3);
  padding: .2rem .7rem;
  border-radius: 20px;
  margin-bottom: .6rem;
  background: var(--white);
}
.tl-badge2.current { border-color: var(--amber); color: var(--amber-d); background: var(--amber-l); }
.tl-title2 {
  font-family: var(--ff-d);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--em);
  margin-bottom: .45rem;
  line-height: 1.25;
}
.tl-desc { font-size: .9rem; color: var(--ink2); line-height: 1.82; }
.j-side { position: sticky; top: 80px; }
.j-photo-stack { position: relative; margin-bottom: 1.5rem; }
.j-main-photo {
  width: 100%;
  display: block;
  border-radius: 10px;
  filter: saturate(.85) contrast(1.05);
}
.j-over-photo {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 55%;
  border: 3px solid var(--page);
  border-radius: 8px;
  display: block;
  filter: saturate(.85) contrast(1.05);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.j-caption { font-family: var(--ff-m); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-top: 2rem; padding-top: .8rem; border-top: 1.5px solid var(--border); }
.snapshot-box {
  background: var(--em-ll);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  padding: 1.4rem;
  margin-top: 1.8rem;
}
.snap-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .52rem 0;
  border-bottom: 1px solid var(--em-l);
  font-size: .88rem;
  color: var(--ink2);
}
.snap-row:last-child { border-bottom: none; }
.snap-row::before { content: '✓'; color: var(--em3); font-weight: 700; font-size: .85rem; flex-shrink: 0; }

/* =========================================================
   IMPACT PAGE
   ========================================================= */
.impact-bar-new {
  background: var(--em);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 4px solid var(--amber);
}
.ibn-cell {
  padding: 2.4rem 2rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.1);
}
.ibn-cell:last-child { border-right: none; }
.ibn-num {
  display: block;
  font-family: var(--ff-d);
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: .35rem;
}
.ibn-num.amber { color: var(--amber); }
.ibn-lbl { font-family: var(--ff-m); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* Impact programme grid */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.prog-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.prog-card:hover { border-color: var(--em3); box-shadow: 0 8px 32px rgba(6,78,59,.1); }
.prog-num {
  position: absolute;
  right: 1rem;
  bottom: -1rem;
  font-family: var(--ff-d);
  font-size: 6rem;
  font-style: italic;
  font-weight: 700;
  color: rgba(6,78,59,.05);
  line-height: 1;
  pointer-events: none;
}
.prog-tag { font-family: var(--ff-m); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin-bottom: .55rem; }
.prog-title { font-family: var(--ff-d); font-size: 1.3rem; font-weight: 700; color: var(--em); margin-bottom: .65rem; line-height: 1.2; }
.prog-body { font-size: .9rem; color: var(--ink2); line-height: 1.85; }

.photo-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4px;
  height: 340px;
}
.photo-2col img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(.85) contrast(1.05) brightness(.95);
  transition: filter .4s;
}
.photo-2col img:hover { filter: saturate(.95) contrast(1.06) brightness(1.0); }

.sdg-pills { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.sdg-p {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: .35rem 1rem;
  font-family: var(--ff-m);
  font-size: .65rem;
  color: var(--ink2);
  background: var(--white);
  transition: border-color .18s, background .18s;
}
.sdg-p:hover { border-color: var(--em); background: var(--em-ll); }
.sdg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* =========================================================
   RECOGNITION PAGE
   ========================================================= */
.award-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border);
}
.award-card-new {
  background: var(--white);
  display: grid;
  grid-template-columns: 320px 1fr;
  transition: background .2s;
}
.award-card-new:hover { background: var(--em-ll); }
.award-card-new.flip { grid-template-columns: 1fr 320px; }
.award-card-new.flip .ac-img { order: 2; }
.award-card-new.flip .ac-body { order: 1; border-right: 1.5px solid var(--border); border-left: none; }
/* Force 2col → 1col for recognition cards on normal page (not grid) */
.award-full { grid-template-columns: 340px 1fr; }
.ac-img { overflow: hidden; }
.ac-img img {
  width: 100%; height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: top;
  display: block;
  filter: saturate(.82) contrast(1.06) brightness(.95);
  transition: transform .5s var(--ease), filter .4s;
}
.award-card-new:hover .ac-img img { transform: scale(1.04); filter: saturate(.92) brightness(1.0); }
.ac-body {
  padding: 2.5rem;
  border-left: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ac-cat { font-family: var(--ff-m); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: .4rem; }
.ac-yr { font-family: var(--ff-m); font-size: .65rem; color: var(--ink3); margin-bottom: .75rem; }
.ac-title { font-family: var(--ff-d); font-size: 1.65rem; font-weight: 700; color: var(--em); line-height: 1.1; margin-bottom: .4rem; }
.ac-title em { font-style: italic; font-weight: 400; }
.ac-org { font-size: .88rem; color: var(--em3); font-weight: 700; margin-bottom: 1rem; }
.ac-desc { font-size: .9rem; color: var(--ink2); line-height: 1.85; }

.mini-awards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
}
.mini-award-card {
  background: var(--white);
  padding: 2rem;
  border-top: 4px solid transparent;
  transition: background .2s, border-top-color .2s;
}
.mini-award-card:hover { background: var(--em-ll); border-top-color: var(--amber); }
.mac-icon { font-size: 1.6rem; margin-bottom: .85rem; display: block; }
.mac-cat { font-family: var(--ff-m); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); margin-bottom: .3rem; }
.mac-title { font-family: var(--ff-d); font-size: 1.05rem; font-weight: 700; color: var(--em); margin-bottom: .3rem; }
.mac-org { font-size: .85rem; color: var(--ink2); line-height: 1.65; }

.speaks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.speak-card2 {
  background: var(--em-ll);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  transition: border-color .18s, background .18s, transform .18s;
}
.speak-card2:hover { border-color: var(--em); background: var(--white); transform: translateY(-2px); }
.sc2-type { font-family: var(--ff-m); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: .3rem; }
.sc2-name { font-size: .92rem; color: var(--em); font-weight: 700; }

/* =========================================================
   MEDIA PAGE
   ========================================================= */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.vid-card2 {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.vid-card2:hover { box-shadow: 0 12px 40px rgba(6,78,59,.14); transform: translateY(-4px); }
.vc2-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--em-ll);
}
.vc2-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.8) brightness(.9);
  transition: transform .45s var(--ease), filter .35s;
}
.vid-card2:hover .vc2-thumb img { transform: scale(1.06); filter: saturate(.95) brightness(1.0); }
.vc2-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,78,59,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.vid-card2:hover .vc2-overlay { opacity: 1; }
.vc2-play {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(217,119,6,.45);
  transition: transform .2s;
}
.vid-card2:hover .vc2-play { transform: scale(1.1); }
.vc2-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: var(--em);
  color: #fff;
  font-family: var(--ff-m);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem .75rem;
  border-radius: 20px;
}
.vc2-body { padding: 1.5rem 1.8rem 2rem; }
.vc2-meta { font-family: var(--ff-m); font-size: .62rem; color: var(--amber); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.vc2-title { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 700; color: var(--em); margin-bottom: .5rem; line-height: 1.3; }
.vc2-desc { font-size: .9rem; color: var(--ink2); line-height: 1.8; margin-bottom: 1.2rem; }
.vc2-link {
  font-family: var(--ff-m);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--em);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-bottom: 2px solid var(--border2);
  padding-bottom: .2rem;
  transition: gap .18s, border-color .18s;
}
.vc2-link::after { content: '→'; transition: transform .18s; }
.vc2-link:hover { gap: .7rem; border-color: var(--em); }
.vc2-link:hover::after { transform: translateX(3px); }

.press-feature2 {
  display: grid;
  grid-template-columns: 360px 1fr;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.press-feature2:hover { box-shadow: 0 12px 40px rgba(6,78,59,.14); }
.pf2-img { overflow: hidden; }
.pf2-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.85) brightness(.95);
  transition: transform .45s, filter .35s;
}
.press-feature2:hover .pf2-img img { transform: scale(1.04); filter: saturate(.95) brightness(1.0); }
.pf2-body {
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
}
.pf2-pub { font-family: var(--ff-m); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: .7rem; }
.pf2-title { font-family: var(--ff-d); font-size: 1.45rem; font-weight: 700; color: var(--em); line-height: 1.3; margin-bottom: .8rem; }
.pf2-desc { font-size: .95rem; color: var(--ink2); line-height: 1.85; margin-bottom: 1.5rem; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 500px;
}
.contact-l {
  padding: 4rem 4rem 4rem 0;
  border-right: 1.5px solid var(--border);
}
.contact-r {
  padding: 4rem 0 4rem 4rem;
}
.cd-row {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--em-l);
}
.cd-key { font-family: var(--ff-m); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); min-width: 72px; flex-shrink: 0; }
.cd-val { font-size: .95rem; color: var(--ink); transition: color .15s; }
a.cd-val:hover { color: var(--em); }
.reach-row {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--em-l);
  font-size: .93rem;
  color: var(--ink2);
  transition: color .15s, padding-left .15s;
}
.reach-row:hover { color: var(--em); padding-left: .4rem; }
.reach-row::before { content: '→'; color: var(--amber); font-weight: 700; flex-shrink: 0; }

/* Form */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.f-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.3rem; }
.f-field label { font-family: var(--ff-m); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--em); font-weight: 700; }
.f-field input, .f-field textarea, .f-field select {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: .85rem 1rem;
  font-family: var(--ff-b);
  font-size: .95rem;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  transition: border-color .18s, box-shadow .18s;
}
.f-field input:focus, .f-field textarea:focus, .f-field select:focus {
  border-color: var(--em);
  box-shadow: 0 0 0 3px rgba(6,78,59,.1);
}
.f-field .f-err { font-size: .72rem; color: #DC2626; min-height: .9rem; }
.f-field textarea { resize: vertical; min-height: 130px; }
.hp-trap { position: absolute; left: -9999px; opacity: 0; height: 1px; width: 1px; }
.btn-submit3 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  background: var(--em);
  color: #fff;
  border-radius: 8px;
  padding: 1.05rem;
  font-family: var(--ff-b);
  font-size: .95rem;
  font-weight: 700;
  transition: background .18s, transform .15s;
  margin-top: .5rem;
}
.btn-submit3:hover { background: var(--em2); transform: translateY(-1px); }
.spin3 { display: none; width: 15px; height: 15px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin3 .8s linear infinite; }
.btn-submit3.loading .spin3 { display: block; }
@keyframes spin3 { to { transform: rotate(360deg); } }
.msg-ok3 { margin-top: 1rem; padding: 1rem 1.2rem; background: #F0FDF4; border: 2px solid #A7F3D0; border-radius: 8px; color: #065F46; font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start; }
.msg-err3 { margin-top: 1rem; padding: 1rem 1.2rem; background: #FEF2F2; border: 2px solid #FECACA; border-radius: 8px; color: #DC2626; font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer2 {
  background: var(--em);
  border-top: 4px solid var(--amber);
  padding: 2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.sf2-brand { font-family: var(--ff-d); font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.sf2-copy { font-family: var(--ff-m); font-size: .58rem; letter-spacing: .1em; color: rgba(255,255,255,.4); }
.sf2-disc { font-family: var(--ff-m); font-size: .53rem; color: rgba(255,255,255,.27); max-width: 500px; text-align: right; line-height: 1.55; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-l { opacity: 0; transform: translateX(-20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv-l.in { opacity: 1; transform: none; }
.rv-r { opacity: 0; transform: translateX(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv-r.in { opacity: 1; transform: none; }
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.4s}[data-d="6"]{transition-delay:.48s}


/* ── FORM ERROR STATES ── */
.f-field input.err,
.f-field textarea.err,
.f-field select.err {
  border-color: #DC2626;
  background: #FFF5F5;
  box-shadow: 0 0 0 2px rgba(220,38,38,.12);
}
.f-err {
  display: block;
  font-family: var(--ff-m);
  font-size: .62rem;
  color: #DC2626;
  letter-spacing: .04em;
  margin-top: .35rem;
  min-height: 1rem;
}

/* =========================================================
   RESPONSIVE — 4 breakpoints
   xl: >1100  lg: ≤1100  md: ≤900  sm: ≤600  xs: ≤400
   ========================================================= */

/* ── LARGE (≤1100px) — tablet landscape / small laptop ── */

/* ── RESPONSIVE UTILITY CLASSES ── */
.grid-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-r3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-r4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.grid-r2-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-r3-sm { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }

@media(max-width:1100px){
  .home-hero{grid-template-columns:1fr 300px}
  .award-card-new{grid-template-columns:260px 1fr}
  .award-card-new.flip{grid-template-columns:1fr 260px}
  .press-feature2{grid-template-columns:260px 1fr}
  .about-2col{grid-template-columns:220px 1fr}
  .journey-wrap{gap:2.5rem}
}

/* ── MEDIUM (≤900px) — tablet portrait / large phone ── */
@media(max-width:900px){
  /* NAV */
  .pill-nav{top:6px;padding:0 1rem}
  .pill-nav-inner{padding:3px;gap:1px}
  .pn-item{padding:.38rem .7rem;font-size:.7rem}
  .mob-nav-btn{display:flex}

  /* HOME HERO */
  .home-hero{grid-template-columns:1fr;min-height:auto}
  .hh-right{height:60vw;max-height:420px}
  .hh-left{padding:3rem 1.5rem 2.5rem}
  .hh-h1{font-size:clamp(2.2rem,8vw,4rem)}
  .hh-philosophy-card{display:none}

  /* IMPACT STRIP */
  .impact-strip{grid-template-columns:repeat(2,1fr)}
  .is-num{font-size:2rem}

  /* PAGE HEADERS */
  .page-header{grid-template-columns:100px 1fr;min-height:160px}
  .ph-big-num{font-size:3.5rem}
  .ph-text-col{padding:1.6rem 1.8rem}
  .ph-title{font-size:clamp(1.4rem,4vw,2.4rem)}

  /* ABOUT */
  .about-2col{grid-template-columns:1fr}
  .about-stick{position:relative;top:auto;padding-right:0;border-right:none;border-bottom:1.5px solid var(--border);padding-bottom:2rem;margin-bottom:0}
  .about-portrait{height:55vw;max-height:360px;aspect-ratio:auto;width:100%}
  .about-body{padding:2rem 0 0}

  /* JOURNEY */
  .journey-wrap{grid-template-columns:1fr;gap:0}
  .j-side{position:relative;top:auto;padding-top:2.5rem;border-top:1.5px solid var(--border)}
  .j-over-photo{display:none}
  .j-photo-stack{margin-bottom:0}
  .j-main-photo{max-height:320px;object-fit:cover}

  /* IMPACT */
  .impact-bar-new{grid-template-columns:repeat(2,1fr)}
  .ibn-num{font-size:2.2rem}
  .photo-2col{grid-template-columns:1fr;height:auto}
  .photo-2col img{height:260px}

  /* RECOGNITION */
  .award-card-new,.award-card-new.flip{grid-template-columns:1fr}
  .award-card-new.flip .ac-img{order:0}
  .award-card-new.flip .ac-body{order:0;border-right:none;border-left:1.5px solid var(--border)}
  .ac-img{height:220px}
  .mini-awards{grid-template-columns:repeat(2,1fr)}
  .speaks-grid{grid-template-columns:repeat(2,1fr)}

  /* MEDIA */
  .vid-grid{grid-template-columns:1fr}
  .press-feature2{grid-template-columns:1fr}
  .pf2-img{height:220px}

  /* CONTACT */
  .contact-layout{grid-template-columns:1fr}
  .contact-l{padding:2.5rem 0 2rem;border-right:none;border-bottom:1.5px solid var(--border)}
  .contact-r{padding:2rem 0 0}

  /* ABOUT 2-col sections */
  .focus-grid{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}

  /* UTILITIES */
  .wrap{padding:0 1.25rem}
  .band{padding:3rem 0}
  .band-sm{padding:2rem 0}

  /* FOOTER */
  .site-footer2{padding:1.5rem;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
  .sf2-disc{text-align:center;max-width:100%}
}

/* ── SMALL (≤600px) — phones ── */
@media(max-width:600px){
  /* NAV */
  .pn-item{padding:.34rem .55rem;font-size:.65rem}
  .pn-num{display:none}

  /* PAGE HEADER */
  .page-header{grid-template-columns:80px 1fr;min-height:130px}
  .ph-big-num{font-size:2.8rem}
  .ph-text-col{padding:1.2rem 1.1rem}
  .ph-title{font-size:clamp(1.2rem,5.5vw,2rem)}
  .ph-subtitle{font-size:.82rem}

  /* HOME */
  .hh-h1{font-size:clamp(2rem,9vw,3.2rem);margin-bottom:1.4rem}
  .hh-body{font-size:.95rem}
  .hh-right{height:72vw}
  .impact-strip{grid-template-columns:repeat(2,1fr)}
  .is-num{font-size:1.7rem}
  .is-label{font-size:.52rem;letter-spacing:.12em}

  /* GRIDS — all single column */
  .focus-grid{grid-template-columns:1fr}
  .speaks-grid{grid-template-columns:1fr}
  .mini-awards{grid-template-columns:1fr}
  .form-2col{grid-template-columns:1fr}

  /* IMPACT BAR */
  .impact-bar-new{grid-template-columns:repeat(2,1fr)}
  .ibn-num{font-size:1.8rem}
  .ibn-lbl{font-size:.5rem;letter-spacing:.12em}

  /* ABOUT */
  .about-portrait{height:70vw}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .sr-num{font-size:1.5rem}

  /* RECOGNITION — award cards photo height */
  .ac-img{height:180px}

  /* MEDIA — press/photo grids */
  .vid-grid{grid-template-columns:1fr}

  /* UTILITIES */
  .wrap{padding:0 1rem}
  .band{padding:2.5rem 0}
  .pull-quote{padding:3rem 1.5rem}
  .pq-text{font-size:clamp(1.1rem,5vw,1.8rem)}
  .sec-title{font-size:clamp(1.3rem,5.5vw,2rem)}
  .h2{font-size:clamp(1.3rem,5.5vw,2rem)}
  .mh-h1{font-size:clamp(1.4rem,6vw,2.5rem)}

  /* CONTACT */
  .cd-key{min-width:60px;font-size:.58rem}
  .cd-val{font-size:.88rem}

  /* FOOTER */
  .site-footer2{padding:1.2rem}
  .sf2-brand{font-size:1rem}
}

/* ── EXTRA SMALL (≤400px) — small phones ── */
@media(max-width:400px){
  .pill-nav-inner{gap:0}
  .pn-item{padding:.3rem .45rem;font-size:.6rem}
  .hh-h1{font-size:clamp(1.8rem,10vw,2.6rem)}
  .hh-right{height:80vw}
  .impact-strip{grid-template-columns:repeat(2,1fr)}
  .is-num{font-size:1.5rem}
  .page-header{grid-template-columns:70px 1fr;min-height:120px}
  .ph-big-num{font-size:2.2rem}
  .ph-title{font-size:clamp(1.1rem,6vw,1.8rem)}
  .ph-subtitle{display:none}
  .ibn-num{font-size:1.6rem}
  .wrap{padding:0 .85rem}
  .band{padding:2rem 0}
  .pull-quote{padding:2.2rem 1rem}
  .ac-img{height:160px}
}

/* ── INLINE GRID OVERRIDES (styles applied directly in HTML) ── */

/* 2-col grids in HTML → 1-col on mobile */
@media(max-width:900px){
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important}
  /* 3-col grids → 2-col on tablet */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  /* Recognition award rows */
  [style*="grid-template-columns:380px 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 380px"]{grid-template-columns:1fr !important}
}
@media(max-width:600px){
  /* All multi-col grids → 1-col on phones */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  /* Photo grids */
  [style*="grid-template-columns:1fr 1fr;gap:1rem"]{grid-template-columns:1fr !important}
}

/* ── TABLET SPECIFIC (641px–900px) ── */
@media(min-width:601px) and (max-width:900px){
  .focus-grid{grid-template-columns:repeat(2,1fr)}
  .vid-grid{grid-template-columns:repeat(2,1fr)}
}


@media(max-width:900px){
  .grid-r2,.grid-r3,.grid-r4{grid-template-columns:1fr !important}
  .grid-r2-sm,.grid-r3-sm{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:600px){
  .grid-r2,.grid-r3,.grid-r4,.grid-r2-sm,.grid-r3-sm{grid-template-columns:1fr !important}
}


/* ── MOBILE UX IMPROVEMENTS ── */

/* Smooth horizontal scroll for pill nav on mobile */
.pill-nav-inner {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.pn-item { scroll-snap-align: start; }

/* Touch-friendly tap targets */
@media(max-width:600px){
  .pn-item { min-height: 40px; display:flex; align-items:center; }
  .nav-link { min-height: 44px; display:flex; align-items:center; }
  .mob-drawer a { min-height: 48px; display:flex; align-items:center; }
  .btn-amber, .btn-ghost, .btn-solid, .btn-outline-em { min-height: 48px; }
  .btn-submit3 { min-height: 52px; font-size:1rem; }
  
  /* Full-width buttons on phone */
  .hh-btns { flex-direction: column; }
  .hh-btns .btn-amber, .hh-btns .btn-ghost { width: 100%; justify-content: center; }
  .btn-group { flex-direction: column; }
  .btn-group .btn-solid, .btn-group .btn-outline-em { width: 100%; justify-content: center; }

  /* Better video thumbnail on phone */
  .vc2-thumb { aspect-ratio: 16/9; }
  
  /* Readable body text on phone */
  body { font-size: 15px; }
  .s-lead, .body-lg, .body-md { font-size: .97rem; }

  /* KPI bar - force 2x2 on phone */
  .impact-strip { grid-template-columns: repeat(2,1fr) !important; }
  .impact-bar-new { grid-template-columns: repeat(2,1fr) !important; }

  /* Pull quote padding */
  .pull-quote { padding: 2.5rem 1.2rem; }
  .pq-text { font-size: clamp(1.05rem, 5vw, 1.6rem); }

  /* Page header tighter on phone */
  .ph-kicker { font-size: .58rem; margin-bottom: .5rem; }
  .ph-label { font-size: .52rem; }
  
  /* Timeline on phone */
  .tl-new { padding-left: 2rem; }
  .tl-new::before { left: 6px; }
  .tl-dot { left: -2rem; }
  .tl-entry { padding-left: 1.5rem; padding-bottom: 2rem; }
  .tl-title2 { font-size: 1rem; }
  .tl-desc { font-size: .88rem; }

  /* Journey photo on phone - full width */
  .j-main-photo { max-height: 260px; }

  /* Contact form on phone */
  .f-field input, .f-field textarea, .f-field select { font-size: 16px; } /* prevent iOS zoom */

  /* Prevent overflow from large images */
  .about-portrait { max-height: 340px; }
  .hh-right { max-height: 320px; }
}

/* ── TABLET (601–900px) ── */
@media(min-width:601px) and (max-width:900px){
  .hh-left { padding: 3.5rem 2rem; }
  .hh-h1 { font-size: clamp(2.2rem,6vw,3.8rem); }
  .impact-strip { grid-template-columns: repeat(4,1fr); }
  .impact-bar-new { grid-template-columns: repeat(4,1fr); }
  .about-portrait { max-height: 50vw; }
  .vid-grid { grid-template-columns: repeat(2,1fr); }
  .focus-grid { grid-template-columns: repeat(2,1fr); }
  .speaks-grid { grid-template-columns: repeat(2,1fr); }
  .mini-awards { grid-template-columns: repeat(2,1fr); }
  .form-2col { grid-template-columns: 1fr 1fr; }
}

/* ── OVERFLOW PROTECTION (all sizes) ── */
html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }
.wrap { box-sizing: border-box; }
table { table-layout: fixed; word-break: break-word; }


:focus-visible{outline:2.5px solid var(--em);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rv,.rv-l,.rv-r{opacity:1;transform:none}
}

/* ── PHOTO STRIP IN GRID (journey page) ── */
.grid-r2.photo-strip > div { height: 100%; }
.grid-r2.photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media(max-width:600px) {
  .grid-r2.photo-strip { height: auto !important; min-height: 0 !important; }
  .grid-r2.photo-strip > div { height: 200px; }
}