/* ============================================================
   REDIAL BPO — ICMI "Best Contact Center Culture" Microsite
   Design tokens from the official 2026 Redial Color Palette
   ============================================================ */

:root {
  /* —— Brand core —— */
  --teal:      #007377;   /* Dark Teal — primary */
  --lime:      #a7e163;   /* Lime Green — primary accent */
  --gold:      #fed141;   /* Golden Sunshine */
  --fuchsia:   #e31c79;   /* Peacock Fuchsia */
  --sapphire:  #0057B8;   /* Deep Sapphire Sky */

  /* —— Teal scale —— */
  --teal-50:#EBF5F2; --teal-100:#D1EDE7; --teal-200:#A2D9CC; --teal-300:#7BBCAC;
  --teal-600:#1E5A4A; --teal-700:#1A4D3F; --teal-800:#103530; --teal-900:#0C2922;
  /* —— Lime scale —— */
  --lime-100:#E6FAD0; --lime-600:#84C43D; --lime-700:#649F1F; --lime-800:#4A7B16;
  /* —— Gold scale —— */
  --gold-100:#FFF5C2; --gold-600:#D4A800; --gold-700:#A07F00;
  /* —— Fuchsia scale —— */
  --fuchsia-100:#F9C2DF; --fuchsia-600:#B81460; --fuchsia-700:#8C0E49; --fuchsia-900:#34031B;
  /* —— Sapphire scale —— */
  --sapphire-100:#CCDBF5; --sapphire-600:#004696; --sapphire-700:#003474; --sapphire-900:#001130;

  /* —— Neutrals —— */
  --off-white:#FAFAF9; --warm-50:#F5F4F0; --warm-100:#E5E4DF;
  --mid-gray:#BDBCB6; --body-gray:#888780; --dark-gray:#555450;
  --near-black:#2E2D2A; --ink:#1A1A1A;

  /* —— Signature gradients —— */
  --grad-hero:     linear-gradient(135deg, #007377, #a7e163);
  --grad-nav:      linear-gradient(135deg, #0057B8, #007377);
  --grad-cta:      linear-gradient(135deg, #e31c79, #fed141);
  --grad-spectrum: linear-gradient(135deg, #007377 0%, #0057B8 45%, #e31c79 100%);

  /* —— Type —— */
  --font-head: 'Poppins', system-ui, sans-serif;   /* overridden by Tweaks */
  --font-body: 'Lato', system-ui, sans-serif;

  /* —— Accent (theming hook for Tweaks) —— */
  --accent: var(--teal);
  --accent-deep: var(--teal-700);

  /* —— Layout —— */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 72px);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 2px 8px rgba(26,26,26,.06), 0 1px 2px rgba(26,26,26,.05);
  --shadow-md: 0 14px 40px rgba(26,26,26,.10), 0 3px 10px rgba(26,26,26,.06);
  --shadow-lg: 0 30px 80px rgba(12,41,34,.20);

  /* motion duration — set to 0 when motion is off */
  --reveal-dur: .8s;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--near-black);
  background: var(--off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; margin: 0; color: var(--teal); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ============================================================
   WORDPRESS / HOST-THEME HARDENING
   WP's wpautop injects empty <p></p> and stray <br> into pasted
   markup, and the Enfold theme applies its own heading colors /
   fonts / link styles via #main (id) selectors that beat our
   classes. These rules neutralise all of that. Safe to keep even
   outside WordPress.
   ============================================================ */
.hero p:empty, section p:empty, header p:empty, footer p:empty, nav p:empty,
.shell > p:empty { display: none !important; }
.nav-links br, .hero-cta br, .social-tabs br, .social-grid br, .gallery-grid br,
.footer-social br, .footer-links br, .carousel-nav br, .values-grid br,
.vm-grid br, .stat-mosaic br, .timeline br, .social-panel-head br { display: none !important; }

/* keep our type system + colors over the theme */
body, .section-lead, p { font-family: var(--font-body); }
h1, h2, h3, h4, .hero h1, .section-title, .winning, .nav-logo { font-family: var(--font-head) !important; }
.hero h1, .hero .sub, .hero .support { color: #fff !important; }
.section-title { color: var(--teal) !important; }
.stories .section-title, .stories .section-lead, .who .section-title, .who h3,
.who .vm-card h3, .story-meta h3, .footer h2, .footer h3 { color: #fff !important; }
.st-copy h3 { color: inherit !important; }
.st-q4 .st-copy h3 { color: var(--teal-900) !important; }
.val-card h3 { color: var(--teal) !important; }
.tl-text h3, .social-panel-head .meta h3 { color: var(--near-black) !important; }
.nav a, .btn, .footer a, .footer-links a, .nav-links a, .social-tab,
.st-q5 .more summary { text-decoration: none !important; }
/* the theme may add bullets/indents to our lists — we use none */
.hero, header.hero { margin-top: 0 !important; }

/* shared section rhythm */
section { position: relative; }
.band { padding-block: clamp(72px, 9vw, 140px); }
.eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1.1rem;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: currentColor; display:inline-block; }
.section-title { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.section-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--dark-gray); max-width: 60ch; margin-top: 1.1rem; line-height: 1.65; }

/* ============================================================
   BUTTONS / PILLS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  padding: .9em 1.6em; border-radius: 999px; border: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
}
.btn-grad { background: var(--grad-hero); color:#fff; box-shadow: 0 10px 26px rgba(0,115,119,.34); }
.btn-grad:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,115,119,.42); }
.btn-cta { background: var(--grad-cta); color:#fff; box-shadow: 0 10px 26px rgba(227,28,121,.34); }
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(227,28,121,.42); }
.btn-ghost { background: transparent; color:#fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color:#fff; transform: translateY(-2px); }
.btn-solid { background: var(--accent); color:#fff; }
.btn-solid:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px var(--gut);
  background: rgba(250,249,247,.92);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(26,26,26,.06), 0 6px 24px rgba(26,26,26,.07);
  transition: box-shadow .35s;
}
.nav.scrolled { box-shadow: 0 1px 0 rgba(26,26,26,.08), 0 12px 34px rgba(26,26,26,.10); }
.nav-logo { display:flex; align-items:center; gap:11px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; color: var(--teal); }
.logo-o {
  width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(from 140deg, var(--teal), var(--sapphire), var(--fuchsia), var(--gold), var(--lime), var(--teal));
  position: relative; flex: none;
}
.logo-o::after { content:""; position:absolute; inset: 8px; border-radius:50%; background: var(--off-white); }
.nav-links { display:flex; align-items:center; gap: 4px; }
.nav-links a {
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--dark-gray);
  padding: 9px 14px; border-radius: 999px; transition: background .2s, color .2s;
}
.nav-links a:hover { background: var(--teal-50); color: var(--teal); }
.nav-badge {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing:.04em;
  padding: 8px 14px; border-radius: 999px; line-height: 1.15; text-align:center;
  white-space: nowrap;
  background: var(--grad-cta); color:#fff; border: 0;
}
.nav-burger { display:none; background:transparent; border:0; width:42px; height:42px; border-radius:10px; }
.nav-burger span { display:block; width:22px; height:2px; margin:4px auto; background: var(--teal); }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: 100svh; position: relative; display: flex; flex-direction: column; justify-content: center; color:#fff; overflow:hidden; background: var(--grad-spectrum); }
.hero::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.18), transparent 50%); z-index:1; }

.hero-inner { position: relative; z-index: 3; width: 100%; }
.hero h1 { color:#fff !important; font-size: clamp(2.8rem, 7.2vw, 6.6rem); font-weight: 800; letter-spacing: -.03em; }
.hero .sub { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.05rem, 1.9vw, 1.5rem); margin-top: 1.3rem; max-width: 30ch; color: rgba(255,255,255,.95) !important; }
.hero .support { font-size: clamp(.98rem, 1.4vw, 1.18rem); margin-top: 1.5rem; max-width: 52ch; color: rgba(255,255,255,.82) !important; line-height: 1.6; }
.hero-cta { display:flex; gap: 14px; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-tag { display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-head); font-weight:700; letter-spacing:.04em; font-size:.82rem; text-transform:uppercase; padding:8px 16px; border-radius:999px; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); margin-bottom: 1.6rem; }
.hero-tag .dot { width:8px;height:8px;border-radius:50%; background: var(--lime); box-shadow:0 0 0 4px rgba(167,225,99,.3); }

/* scroll cue */
.scroll-cue { position:absolute; left:50%; bottom: 30px; transform: translateX(-50%); z-index:4; color:rgba(255,255,255,.85); display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-head); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.scroll-cue .chev { width:26px;height:26px;border-right:2px solid;border-bottom:2px solid; transform: rotate(45deg); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: rotate(45deg) translate(0,0);} 50%{ transform: rotate(45deg) translate(5px,5px);} }

/* —— Hero orbs —— */
.hero-orbs span { position:absolute; border-radius:50%; filter: blur(8px); opacity:.5; z-index:1; }
.hero-orbs .o1 { width:340px;height:340px; background: var(--gold); top:-90px; right:8%; opacity:.32; }
.hero-orbs .o2 { width:260px;height:260px; background: var(--lime); bottom:-60px; left:6%; opacity:.3; }
.hero-orbs .o3 { width:200px;height:200px; background: var(--fuchsia); top:30%; right:32%; opacity:.25; }

/* ============================================================
   SECTION 2 — FIVE VISUAL STATEMENT CARDS
   ============================================================ */
.statements { background: var(--off-white); padding-block: clamp(60px,7vw,110px); }
.statements-head { text-align:center; margin-bottom: clamp(40px,5vw,72px); }
.statement {
  position: relative; border-radius: var(--radius); overflow: hidden; color:#fff;
  display:grid; grid-template-columns: 1fr 1.15fr; align-items:center; gap: clamp(24px,4vw,60px);
  padding: clamp(36px,5vw,72px); margin-bottom: 22px; box-shadow: var(--shadow-md);
  isolation:isolate;
}
.statement:nth-child(even) { grid-template-columns: 1.15fr 1fr; }
.statement:nth-child(even) .st-num { order: 2; }
.statement::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background: radial-gradient(90% 120% at 85% 0%, rgba(255,255,255,.22), transparent 55%); }
.st-q1 { background: linear-gradient(130deg, var(--teal-800), var(--teal)); }
.st-q2 { background: linear-gradient(130deg, var(--lime-800), var(--lime-600)); }
.st-q3 { background: linear-gradient(130deg, var(--sapphire-700), var(--sapphire)); }
.st-q4 { background: linear-gradient(130deg, var(--gold-700), var(--gold-600)); color: var(--teal-900); }
.st-q5 { background: linear-gradient(130deg, var(--fuchsia-700), var(--fuchsia)); }

.st-num { display:flex; flex-direction:column; gap: 6px; }
.st-tag { font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; opacity:.78; }
.st-stat { font-family:var(--font-head); font-weight:800; font-size: clamp(3.2rem, 8vw, 6.2rem); line-height:.95; letter-spacing:-.03em; }
.st-stat .unit { font-size: .45em; vertical-align: super; margin-left:.05em; }
.st-substat { font-family:var(--font-head); font-weight:600; font-size:1.02rem; opacity:.92; }
.st-copy h3 { color: inherit; font-size: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: .7rem; }
.st-q4 .st-copy h3 { color: var(--teal-900); }
.st-copy p { font-size: clamp(1rem, 1.4vw, 1.18rem); line-height:1.6; opacity:.92; }

/* Q5 quote card spans full width, centered */
.st-q5 { grid-template-columns: 1fr !important; text-align:center; padding-block: clamp(48px,6vw,88px); }
.st-q5 .st-num { display:none; }
.st-quote { max-width: 52ch; margin-inline:auto; }
.st-quote .mark { font-family:var(--font-head); font-size: 5rem; line-height:.5; opacity:.4; display:block; margin-bottom:.2em; }
.st-quote blockquote { font-family:var(--font-head); font-weight:600; font-size: clamp(1.3rem,2.6vw,2rem); line-height:1.4; letter-spacing:-.01em; margin:0; }
.st-quote .cite { margin-top: 1.6rem; font-size: .95rem; opacity:.86; }
.st-quote .cite b { font-weight:700; }
.st-quote .more { margin-top: 1.4rem; }

/* ============================================================
   SECTION 3 — PEOPLE / SITE GALLERY
   ============================================================ */
.gallery-grid { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 16px; margin-top: clamp(36px,4vw,56px); }
.g-card { position:relative; border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow-sm); }
.g-card image-slot { width:100%; height:100%; }
.g-card .g-label { position:absolute; left:0; right:0; bottom:0; z-index:3; padding: 30px 18px 16px; color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.05rem; background: linear-gradient(transparent, rgba(12,41,34,.82)); pointer-events:none; display:flex; align-items:center; gap:8px; }
.g-card .g-label .pin { width:7px;height:7px;border-radius:50%; background: var(--lime); }
.g-card.span2 { grid-column: span 2; }
.g-card.row2 { grid-row: span 2; }

/* ============================================================
   SECTION 4 — SOCIAL FEEDS
   ============================================================ */
.social { background: var(--warm-50); }
.social-tabs { display:flex; gap:10px; flex-wrap:wrap; margin: clamp(28px,3vw,42px) 0 clamp(28px,3vw,40px); }
.social-tab { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600; font-size:.95rem; padding:11px 18px; border-radius:999px; border:1.5px solid var(--warm-100); background:#fff; color:var(--dark-gray); transition: all .22s; }
.social-tab .ic { width:20px;height:20px; flex:none; }
.social-tab:hover { border-color: var(--mid-gray); transform: translateY(-2px); }
.social-tab.active { color:#fff; border-color: transparent; }
.social-tab.active.t-yt { background:#FF0000; }
.social-tab.active.t-ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-tab.active.t-tt { background:#010101; }
.social-tab.active.t-fb { background:#1877F2; }

.social-panel { display:none; }
.social-panel.active { display:block; animation: fadeUp .5s ease both; }
.social-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom: 22px; }
.social-panel-head .meta h3 { font-size: 1.5rem; color: var(--near-black); }
.social-panel-head .meta p { color: var(--body-gray); margin-top:4px; }
.social-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.social-grid.yt { grid-template-columns: repeat(3,1fr); }
.s-post { position:relative; border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow-sm); aspect-ratio: 1/1; background:#000; }
.social-grid.yt .s-post { aspect-ratio: 16/9; }
.s-post image-slot { width:100%; height:100%; }
.s-post .badge { position:absolute; top:10px; left:10px; z-index:4; width:30px;height:30px;border-radius:8px; display:grid;place-items:center; backdrop-filter: blur(6px); }
.s-post .play { position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none; }
.s-post .play span { width:52px;height:52px;border-radius:50%; background: rgba(255,255,255,.92); display:grid;place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.3); transition: transform .25s; }
.s-post .play span::after { content:""; border-left: 15px solid var(--teal); border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.s-post:hover .play span { transform: scale(1.12); }

/* ============================================================
   SECTION 5 — STORY SPOTLIGHTS CAROUSEL
   ============================================================ */
.stories { background: var(--teal-900); color:#fff; overflow:hidden; }
.stories .section-title { color:#fff; }
.stories .section-lead { color: rgba(255,255,255,.78); }
.stories-head { display:flex; align-items:flex-end; justify-content:space-between; gap: 24px; flex-wrap:wrap; }
.carousel-nav { display:flex; gap:10px; }
.carousel-nav button { width:50px;height:50px;border-radius:50%; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:#fff; display:grid;place-items:center; transition: all .22s; }
.carousel-nav button:hover { background:#fff; color: var(--teal); border-color:#fff; }
.carousel-nav button:disabled { opacity:.3; cursor:not-allowed; }
.carousel-track { display:flex; gap: 22px; overflow-x:auto; scroll-snap-type:x mandatory; padding: 36px 0 10px; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.story-slide { flex: 0 0 min(560px, 84vw); scroll-snap-align:start; }
.story-thumb { position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio:16/9; box-shadow: var(--shadow-lg); cursor:pointer; }
.story-thumb image-slot { width:100%; height:100%; }
.story-thumb .play { position:absolute; inset:0; z-index:4; display:grid;place-items:center; background: linear-gradient(transparent 40%, rgba(12,41,34,.5)); transition: background .3s; }
.story-thumb:hover .play { background: linear-gradient(rgba(0,115,119,.25), rgba(12,41,34,.55)); }
.story-thumb .play .pbtn { width:72px;height:72px;border-radius:50%; background: var(--grad-cta); display:grid;place-items:center; box-shadow:0 10px 30px rgba(227,28,121,.5); transition: transform .25s; }
.story-thumb:hover .play .pbtn { transform: scale(1.1); }
.story-thumb .play .pbtn::after { content:""; border-left: 20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; }
.story-meta { margin-top: 18px; }
.story-meta .st-kicker { font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color: var(--lime); }
.story-meta h3 { color:#fff; font-size: 1.5rem; margin: 6px 0; }
.story-meta p { color: rgba(255,255,255,.72); font-size: .98rem; }
.carousel-dots { display:flex; gap:8px; justify-content:center; margin-top: 24px; }
.carousel-dots b { width:8px;height:8px;border-radius:50%; background: rgba(255,255,255,.3); transition: all .25s; cursor:pointer; }
.carousel-dots b.on { background: var(--lime); width:26px; border-radius:999px; }

/* lightbox */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(12,41,34,.92); backdrop-filter:blur(8px); display:none; place-items:center; padding: 24px; }
.lightbox.open { display:grid; animation: fadeUp .3s ease both; }
.lightbox .lb-frame { width: min(1000px, 92vw); aspect-ratio:16/9; border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-lg); background:#000; }
.lightbox iframe { width:100%; height:100%; border:0; }
.lightbox .lb-close { position:absolute; top:24px; right:28px; width:46px;height:46px;border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.4rem; }
.lightbox .lb-close:hover { background:#fff; color: var(--teal); }
.lightbox .lb-empty { color:#fff; text-align:center; font-family:var(--font-head); }
.lightbox .lb-empty p { color: rgba(255,255,255,.7); margin-top:10px; font-family: var(--font-body); }

/* ============================================================
   SECTION 6 — COMMUNITY IMPACT TIMELINE
   ============================================================ */
.community .section-lead { font-style: normal; }
.impact-tieline { margin-top: 20px; font-family:var(--font-head); font-weight:600; color: var(--accent); font-size: 1.05rem; }
.timeline { margin-top: clamp(44px,5vw,64px); position:relative; }
.timeline::before { content:""; position:absolute; left: 140px; top: 8px; bottom: 8px; width:2px; background: linear-gradient(var(--teal), var(--lime), var(--fuchsia)); }
.tl-item { display:grid; grid-template-columns: 124px 36px 1fr; gap: 0 24px; align-items:start; margin-bottom: 30px; }
.tl-date { text-align:right; font-family:var(--font-head); font-weight:700; color: var(--teal); padding-top: 14px; }
.tl-date span { display:block; font-weight:600; font-size:.8rem; color: var(--body-gray); }
.tl-node { position:relative; display:grid; place-items:center; padding-top: 18px; }
.tl-node b { width:16px;height:16px;border-radius:50%; background:#fff; border:3px solid var(--accent); box-shadow:0 0 0 5px var(--off-white); z-index:2; }
.tl-card { background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow:hidden; display:grid; grid-template-columns: 200px 1fr; transition: transform .25s, box-shadow .25s; }
.tl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tl-card image-slot { width:200px; height:100%; min-height:128px; }
.tl-text { padding: 20px 24px; }
.tl-text h3 { font-size: 1.22rem; color: var(--near-black); }
.tl-text .loc { font-family:var(--font-head); font-weight:600; font-size:.82rem; color: var(--accent); margin: 4px 0 8px; display:inline-flex; align-items:center; gap:6px; }
.tl-text p { color: var(--dark-gray); font-size:.96rem; }

/* ============================================================
   SECTION 7 — WHO WE ARE (Vision/Mission/Values)
   ============================================================ */
.who { background: var(--grad-spectrum); color:#fff; }
.who .section-title, .who h3 { color:#fff; }
.vm-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: clamp(36px,4vw,52px); }
.vm-card { background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius: var(--radius); padding: clamp(28px,3vw,40px); backdrop-filter: blur(8px); }
.vm-card .vm-tag { font-family:var(--font-head); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; color: var(--lime); }
.vm-card h3 { font-size: clamp(1.4rem,2.4vw,1.95rem); margin: 12px 0 0; line-height:1.2; }
.values-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.val-card { background:#fff; border-radius: var(--radius-sm); padding: 30px 28px; color: var(--near-black); box-shadow: var(--shadow-md); transition: transform .25s; }
.val-card:hover { transform: translateY(-5px); }
.val-ic { width:52px;height:52px;border-radius:14px; display:grid;place-items:center; margin-bottom:18px; }
.val-ic svg { width:26px;height:26px; stroke:#fff; stroke-width:2; fill:none; }
.val-card:nth-child(1) .val-ic { background: var(--grad-hero); }
.val-card:nth-child(2) .val-ic { background: linear-gradient(135deg,var(--sapphire),var(--teal)); }
.val-card:nth-child(3) .val-ic { background: var(--grad-cta); }
.val-card:nth-child(4) .val-ic { background: linear-gradient(135deg,var(--gold-600),var(--gold)); }
.val-card:nth-child(5) .val-ic { background: linear-gradient(135deg,var(--fuchsia),var(--sapphire)); }
.val-card:nth-child(6) .val-ic { background: linear-gradient(135deg,var(--lime-600),var(--teal)); }
.val-card h3 { color: var(--teal); font-size: 1.25rem; }
.val-card p { color: var(--dark-gray); font-size:.96rem; margin-top:8px; }

/* ============================================================
   SECTION 8 — FOOTER
   ============================================================ */
.footer { background: var(--teal-900); color:#fff; padding-block: clamp(64px,8vw,110px) 40px; text-align:center; overflow:hidden; position:relative; }
.footer .winning { font-family:var(--font-head); font-weight:800; font-size: clamp(2.6rem,9vw,7rem); line-height:.9; letter-spacing:-.03em; background: var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer .winning .hash { color: var(--lime); -webkit-text-fill-color: var(--lime); }
.footer .ach { font-family:var(--font-head); font-weight:600; font-size: clamp(1.1rem,2vw,1.5rem); color: rgba(255,255,255,.85); margin-top: 1rem; }
.footer-locs { margin-top: 2.4rem; color: rgba(255,255,255,.6); font-size:.98rem; }
.footer-social { display:flex; gap:14px; justify-content:center; margin-top: 2rem; }
.footer-social a { width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid;place-items:center; transition: all .22s; }
.footer-social a:hover { background:#fff; transform: translateY(-3px); }
.footer-social a:hover svg { fill: var(--teal); }
.footer-social svg { width:20px;height:20px; fill: rgba(255,255,255,.85); }
.footer-links { margin-top: 2rem; display:flex; gap:8px 22px; justify-content:center; flex-wrap:wrap; font-family:var(--font-head); font-weight:600; font-size:.92rem; }
.footer-links a { color: rgba(255,255,255,.7); }
.footer-links a:hover { color: var(--lime); }
.footer-badge { margin-top: 2.6rem; display:inline-flex; align-items:center; gap:12px; padding: 12px 22px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); font-family:var(--font-head); font-size:.82rem; color: rgba(255,255,255,.8); }
.footer-badge .seal { width:34px;height:34px;border-radius:50%; background: var(--grad-cta); display:grid;place-items:center; font-weight:800; font-size:.7rem; color:#fff; }
.footer-fine { margin-top: 2.4rem; color: rgba(255,255,255,.4); font-size:.8rem; }

/* ============================================================
   HERO SWITCHER (removed)
   ============================================================ */

/* expandable full quote */
.st-q5 .more { margin-top: 1.6rem; }
.st-q5 .more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45);
  color: #fff; transition: all .2s; user-select: none;
}
.st-q5 .more summary::-webkit-details-marker { display: none; }
.st-q5 .more summary::after { content: "↓"; transition: transform .25s; }
.st-q5 .more[open] summary::after { transform: rotate(180deg); }
.st-q5 .more summary:hover { background: rgba(255,255,255,.14); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Reveal is progressive enhancement: content is visible by default and
   ONLY hidden once app.js confirms it can run (adds body.reveal-on).
   If the script is stripped/blocked (e.g. by a CMS), nothing disappears. */
body.reveal-on [data-reveal] { opacity:0; transform: translateY(28px); transition: opacity var(--reveal-dur) cubic-bezier(.2,.7,.2,1), transform var(--reveal-dur) cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0s); }
body.reveal-on [data-reveal].in { opacity:1; transform: none; }
body[data-motion="off"] [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
body[data-motion="off"] .scroll-cue .chev { animation: none; }
@keyframes fadeUp { from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce) { html{ scroll-behavior:auto; } [data-reveal]{ opacity:1; transform:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .social-grid { grid-template-columns: repeat(2,1fr); }
  .social-grid.yt { grid-template-columns: repeat(2,1fr); }
  .values-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .nav-links, .nav-badge { display:none; }
  .nav-burger { display:block; }
  .nav.mobile-open .nav-links { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; padding: 12px var(--gut) 20px; background: rgba(250,249,247,.97); backdrop-filter: blur(18px); box-shadow: var(--shadow-md); }
  .nav.mobile-open .nav-links a { color: var(--dark-gray); padding: 12px 14px; }
  .statement, .statement:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
  .statement:nth-child(even) .st-num { order: 0; }
  #hero-c .hero-split { grid-template-columns: 1fr; }
  .stat-mosaic { margin-top: 8px; }
  .vm-grid { grid-template-columns: 1fr; }
  .tl-card { grid-template-columns: 1fr; }
  .tl-card image-slot { width:100%; height:160px; }
  .timeline::before { left: 140px; }
}
@media (max-width: 620px) {
  .gallery-grid, .social-grid, .social-grid.yt, .values-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-auto-rows: 200px; }
  .g-card.span2 { grid-column: span 1; }
  .stat-mosaic { grid-template-columns: 1fr 1fr; }
  .timeline::before { display:none; }
  .tl-item { grid-template-columns: 1fr; gap: 8px; }
  .tl-date { text-align:left; }
  .tl-node { display:none; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
}