/* Tech 4 All Tennessee — shared modern visual system
   Presentation-only layer. It does not change navigation, HTML structure, content, spacing logic, or typography families.
   REBUILT 2026-07-20: consolidated duplicate/conflicting rules that had accumulated from repeated edits.
   Every selector below now appears once. See CHANGE NOTES at bottom of file for what was removed and why. */

:root{
  --navy:#1F2D56;
  --navy-deep:#162244;
  --navy-soft:#294172;
  --teal:#0F8B8D;
  --teal-dark:#0A7072;
  --orange:#F47C20;
  --orange-dark:#D8650F;
  --gold:#F47C20;
  --green:#4CAF50;
  --green-dark:#3A873F;
  --mountain-blue:#2FA8E0;      /* was used throughout but never defined — buttons using it had no fallback color */
  --mountain-blue-dark:#248FC1;
  --pale-aqua:#F7F9FB;
  --white:#FFFFFF;
  --ink-soft:#2C3E50;
  --line:#E8EEF3;
  --bg:#FFFFFF;
  --radius:20px;
  --radius-sm:12px;
  --shadow-sm:0 6px 18px rgba(31,45,86,.07);
  --shadow:0 12px 35px rgba(31,45,86,.10);
  --shadow-lg:0 20px 55px rgba(31,45,86,.13);
  --maxw:1180px;
  --transition:.25s ease;

  --ink:var(--navy);
  --t4at-blue:var(--teal);
  --t4at-blue-dark:var(--teal-dark);
  --t4at-green:var(--green);
  --t4at-green-dark:var(--green-dark);
  --t4at-gold:var(--orange);
  --bg-tint:var(--pale-aqua);
  --ls-orange:var(--orange);
  --ls-orange-dark:var(--orange-dark);
  --ls-navy:var(--navy-deep);
}

body{color:var(--ink-soft);background:var(--white);}
h1,h2,h3,h4{color:var(--navy);}
a{color:var(--teal-dark);text-underline-offset:3px;}
a:hover{color:var(--orange-dark);}

/* Header polish without changing its structure */
header{border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(31,45,86,.05);}
.dropdown{border-color:var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;}
.dropdown a:hover{background:linear-gradient(90deg,var(--pale-aqua),#fff);color:var(--teal-dark);}
nav a.nav-highlight{background:var(--orange-btn);color:#fff;box-shadow:0 6px 16px rgba(244,124,32,.22);}
nav a.nav-highlight:hover{background:var(--orange-dark);color:#fff;}
/* Logo now carries the full org name inside the badge artwork itself, so the separate
   text wordmark was removed from markup (see index.html etc.) and the mark is sized up
   so "TECH 4 ALL / TENNESSEE" stays legible instead of getting lost in the corner. */
.logo{gap:0;}
.logo img{width:60px;height:60px;border-radius:0;}
@media(max-width:1100px){.logo img{width:52px;height:52px;}}

/* FIX (mobile QA, July 2026): the About Us/Programs dropdowns render always-
   expanded inline on phones (no hover on touch), but at the desktop row
   height that adds ~450px of scrolling before reaching Volunteer/Donate/
   Pay It Forward — very likely why Pay It Forward read as "missing" on
   Android. Tightening just the mobile dropdown row height (the desktop
   hover panel is untouched) shortens that list by roughly a third. */
/* 4-photo variant of the photo strip (LIFE-STEP Professional page only —
   added a photo that was on the live site but missing from this rebuild) */
.photo-strip.photo-strip-4{grid-template-columns:1.1fr 1fr 1fr 1fr;}
@media(max-width:820px){.photo-strip.photo-strip-4{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.photo-strip.photo-strip-4{grid-template-columns:1fr;}}

/* Pay It Forward impact-tier grid — 3 columns, collapsing responsively
   (added July 2026 alongside the stronger donation-ask copy) */
.pif-impact-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
@media(max-width:760px){.pif-impact-grid{grid-template-columns:1fr!important;}}

/* Workshop description cards — added to support individual workshop summaries
   (July 2026 QA request: workshops page previously had no per-class detail) */
.workshop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:18px;}
.workshop-grid .card{padding:26px;}
.workshop-grid .card h3{margin:0 0 4px;font-size:1.15rem;}
.workshop-grid .card .workshop-duration{display:block;color:var(--teal-dark);font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;}
.workshop-grid .card p{margin:0;font-size:.97rem;line-height:1.55;color:var(--ink-soft);}
@media(max-width:760px){.workshop-grid{grid-template-columns:1fr;}}

@media(max-width:1100px){
  .dropdown a{padding:9px 16px;font-size:13.5px;}
}

/* Shared page hero (text side) */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);position:relative;overflow:hidden;padding-top:64px;padding-bottom:72px;}
.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-180px;top:-230px;background:rgba(127,232,245,.09);pointer-events:none;}
.hero>.wrap{position:relative;z-index:1;}
.hero h1{font-size:clamp(2.35rem,5vw,4.15rem);line-height:1.06;letter-spacing:-.03em;max-width:18ch;}
.hero p.lead{font-size:1.18rem;line-height:1.7;max-width:62ch;}
.hero-photo,.image-card,.photo-card{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);}

/* Homepage hero — the photo IS the background; text sits directly on top of it via a soft
   white gradient scrim, matching the approved mockup. The image displays at its full width
   with nothing cropped off the sides, so the whole photograph stays visible. */
.hero.hero-photo-bg{padding:0;background:#fff;}
.hero-bg-wrap{position:relative;}
.hero-bg-image{display:block;width:100%;height:auto;}
.hero-bg-scrim{
  position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(to top, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.55) 65%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.hero-bg-content{position:absolute;left:0;right:0;bottom:0;padding:0 24px 44px;}
.hero-bg-content h1{color:var(--navy);max-width:20ch;}
.hero-bg-content .eyebrow{color:var(--orange-dark);}
.hero-bg-content p.lead{color:var(--ink-soft);}
.hero-bg-content .tagline-color .communities{color:var(--navy);}
.hero-actions-primary{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap;}
.hero-actions-primary .btn{padding:16px 28px;font-size:1rem;min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;}
@media(max-width:760px){
  .hero-bg-scrim{height:72%;}
  .hero-bg-content{padding:0 20px 32px;}
  .hero-bg-content h1{font-size:clamp(1.7rem,6vw,2.4rem);}
}
@media(max-width:560px){
  .hero-actions-primary{flex-direction:column;}
  .hero-actions-primary .btn{width:100%;text-align:center;}
}

/* Section rhythm */
section:not(.hero):not(.stats){padding-top:68px;padding-bottom:68px;}
.section-tint{background:var(--pale-aqua);}
.section-head{margin-bottom:38px;}
.section-head h2,.content-prose h2{border-bottom:0!important;padding-bottom:0!important;position:relative;}
.section-head h2::after,.content-prose>h2::after{content:"";display:block;width:58px;height:5px;background:var(--orange);border-radius:999px;margin:14px auto 0;}
.section-head.left h2::after,.content-prose>h2::after{margin-left:0;}
.eyebrow{color:var(--orange-dark);font-weight:800;letter-spacing:.09em;}

/* Cards and panels */
.program-card,.card,.feature-card,.benefit-card,.info-card,.content-card,.step-card,.impact-card,.resource-card{
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:var(--shadow-sm)!important;
  background:#fff;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.program-card:hover,.card:hover,.feature-card:hover,.benefit-card:hover,.info-card:hover,.content-card:hover,.step-card:hover,.impact-card:hover,.resource-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow)!important;border-color:rgba(15,139,141,.28)!important;
}
.program-card{border-left:6px solid var(--teal)!important;padding:32px;}
.program-card.alt{border-left-color:var(--teal)!important;}
.program-card > img[alt="LIFE-STEP logo"]{display:block;width:72px!important;height:auto;margin:0 0 12px;}

/* Buttons — base */
.btn{border-radius:12px;font-weight:800;transition:transform var(--transition),box-shadow var(--transition),background var(--transition);}
.btn:hover{transform:translateY(-2px);}
.btn-primary,.btn-orange{background:var(--orange-btn);color:#fff;box-shadow:0 8px 20px rgba(244,124,32,.24);}
.btn-primary:hover,.btn-orange:hover{background:var(--orange-dark);color:#fff;box-shadow:0 11px 25px rgba(244,124,32,.3);}
.btn-gold{background:var(--orange-btn);color:#fff;box-shadow:0 8px 20px rgba(244,124,32,.24);}
.btn-gold:hover{background:var(--orange-dark);color:#fff;}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(15,139,141,.24);}
.btn-teal:hover{background:var(--teal-dark);color:#fff;}

/* Buttons — named secondary links (single source of truth; previously defined 3x with different colors) */
.btn[href="contact.html"]{background:var(--teal)!important;color:#fff!important;border:2px solid var(--teal)!important;}
.btn[href="contact.html"]:hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;color:#fff!important;}
.btn[href="community-impact.html"]{background:var(--teal)!important;color:#fff!important;border:2px solid var(--teal)!important;}
.btn[href="community-impact.html"]:hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;color:#fff!important;}

/* Buttons — 4-across action row (site-final-actions), single definitive color order */
.site-final-cta{padding:34px 0;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);}
.site-final-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.site-final-actions .btn{text-align:center;display:flex;align-items:center;justify-content:center;min-height:56px;padding:16px 28px;font-size:1rem;}
.site-final-actions .btn:nth-child(1){background:var(--orange-btn)!important;color:#fff!important;border:2px solid var(--orange-btn)!important;}
.site-final-actions .btn:nth-child(1):hover{background:var(--orange-dark)!important;border-color:var(--orange-dark)!important;color:#fff!important;}
.site-final-actions .btn:nth-child(2){background:var(--teal)!important;color:#fff!important;border:2px solid var(--teal)!important;}
.site-final-actions .btn:nth-child(2):hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;color:#fff!important;}
.site-final-actions .btn:nth-child(3){background:var(--mountain-blue)!important;color:#fff!important;border:2px solid var(--mountain-blue)!important;}
.site-final-actions .btn:nth-child(3):hover{background:var(--mountain-blue-dark)!important;border-color:var(--mountain-blue-dark)!important;color:#fff!important;}
.site-final-actions .btn:nth-child(4){background:var(--green)!important;color:#fff!important;border:2px solid var(--green)!important;}
.site-final-actions .btn:nth-child(4):hover{background:var(--green-dark)!important;border-color:var(--green-dark)!important;color:#fff!important;}
@media(max-width:760px){.site-final-actions{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.site-final-actions{grid-template-columns:1fr}}

/* Buttons — hero and CTA-band action rows (single definitive color order) */
.hero-actions .btn:nth-child(1){background:var(--orange-btn)!important;border-color:var(--orange-btn)!important;color:#fff!important;}
.hero-actions .btn:nth-child(1):hover{background:var(--orange-dark)!important;border-color:var(--orange-dark)!important;}
.hero-actions .btn:nth-child(2){background:var(--teal)!important;border-color:var(--teal)!important;color:#fff!important;}
.hero-actions .btn:nth-child(2):hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;}
.hero-actions .btn:nth-child(3){background:var(--mountain-blue)!important;border-color:var(--mountain-blue)!important;color:#fff!important;}
.hero-actions .btn:nth-child(3):hover{background:var(--mountain-blue-dark)!important;border-color:var(--mountain-blue-dark)!important;}
.hero-actions .btn:nth-child(4){background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;}
.hero-actions .btn:nth-child(4):hover{background:var(--green-dark)!important;border-color:var(--green-dark)!important;}

.cta-band .cta-actions{grid-template-columns:repeat(3,minmax(0,1fr));}
.cta-band .cta-actions .btn{min-height:56px;padding:16px 28px;font-size:1rem;display:flex;align-items:center;justify-content:center;text-align:center;}
.cta-band .cta-actions .btn:nth-child(1){background:var(--orange-btn)!important;border-color:var(--orange-btn)!important;color:#fff!important;}
.cta-band .cta-actions .btn:nth-child(1):hover{background:var(--orange-dark)!important;border-color:var(--orange-dark)!important;}
.cta-band .cta-actions .btn:nth-child(2){background:var(--teal)!important;border-color:var(--teal)!important;color:#fff!important;}
.cta-band .cta-actions .btn:nth-child(2):hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;}
.cta-band .cta-actions .btn:nth-child(3){background:var(--mountain-blue)!important;border-color:var(--mountain-blue)!important;color:#fff!important;}
.cta-band .cta-actions .btn:nth-child(3):hover{background:var(--mountain-blue-dark)!important;border-color:var(--mountain-blue-dark)!important;}
@media(max-width:760px){.cta-band .cta-actions{grid-template-columns:1fr;}}

/* Metrics */
.stats{background:var(--navy-deep);}
.stat .num{color:var(--orange);}
.stat{border-color:rgba(255,255,255,.15);}

/* Make prose/resource pages scannable and engaging */
.content-prose{max-width:1120px!important;}
.content-prose>p:first-of-type{font-size:1.1rem;line-height:1.75;}
.content-prose>ul{
  list-style:none;padding:0;margin:28px 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.content-prose>ul>li{
  position:relative;margin:0;padding:20px 22px 20px 48px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-sm);line-height:1.55;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.content-prose>ul>li::before{
  content:"→";position:absolute;left:20px;top:19px;color:var(--orange);font-weight:900;font-size:1.15rem;
}
.content-prose>ul>li:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(15,139,141,.28);}
.content-prose>ul>li>a{font-weight:800;color:var(--navy);text-decoration:none;}
.content-prose>ul>li>a:hover{color:var(--orange-dark);text-decoration:underline;}
.content-prose>h2{margin-top:10px;color:var(--navy);}
.content-prose>h2+ul{margin-bottom:18px;}

/* Imagery — general */
.photo-mosaic figure{border-radius:20px;box-shadow:var(--shadow);}
.photo-mosaic figcaption{padding-bottom:20px;}
img{border-radius:inherit;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .program-card,.card,.feature-card,.benefit-card,.info-card,.content-card,.step-card,.impact-card,.resource-card,.btn,.photo-feature img,.photo-strip img,.page-hero-media img{transition:none!important;}
}

.photo-feature,.photo-strip figure{overflow:hidden;border-radius:20px;box-shadow:var(--shadow);background:#fff;}
.photo-feature img,.photo-strip img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.photo-feature:hover img,.photo-strip figure:hover img{transform:scale(1.02);}
.photo-feature{aspect-ratio:16/9;}
.photo-strip-section{background:var(--pale-aqua);}
.photo-strip{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;}
.photo-strip figure{margin:0;aspect-ratio:4/3;}
.photo-strip figure:first-child{aspect-ratio:16/9;}
@media(max-width:820px){.photo-strip{grid-template-columns:1fr 1fr}.photo-strip figure:first-child{grid-column:1/-1}}
@media(max-width:560px){.photo-strip{grid-template-columns:1fr}.photo-strip figure:first-child{grid-column:auto}}

.help-pathways{background:#fff;}
.help-pathways-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:30px;}
.help-pathway{display:block;text-decoration:none;color:var(--ink-soft);padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.help-pathway:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(15,139,141,.35);color:var(--ink-soft);}
.help-pathway h3{margin-bottom:10px;color:var(--navy);}
.help-pathway .pathway-icon{font-size:2rem;display:block;margin-bottom:14px;}
.pathway-icon-badge{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;margin-bottom:16px;flex:none;}
.pathway-icon-badge svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pathway-icon-badge.teal{background:var(--teal);}
.pathway-icon-badge.green{background:var(--green);}
.pathway-icon-badge.orange{background:var(--orange);}
@media(max-width:900px){.help-pathways-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.help-pathways-grid{grid-template-columns:1fr;}}

.impact-break{background:var(--navy-deep);color:#fff;}
.impact-break-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;}
.impact-break .impact-item{padding:28px 14px;border-right:1px solid rgba(255,255,255,.14);}
.impact-break .impact-item:last-child{border-right:0;}
.impact-break .impact-number{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1;color:var(--orange);}
.impact-break .impact-label{font-weight:700;margin-top:8px;}
@media(max-width:700px){.impact-break-grid{grid-template-columns:1fr 1fr}.impact-break .impact-item:nth-child(2){border-right:0}.impact-break .impact-item{border-bottom:1px solid rgba(255,255,255,.14)}}

.paul-story-section{background:var(--pale-aqua);}
.paul-story-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:46px;align-items:center;}
.paul-story-photo{overflow:hidden;border-radius:22px;box-shadow:var(--shadow);background:#fff;}
.paul-story-photo img{width:100%;height:100%;min-height:430px;object-fit:cover;display:block;transition:transform .45s ease;}
.paul-story-photo:hover img{transform:scale(1.02);}
.paul-story-content h2{color:var(--navy);margin-top:6px;}
.paul-story-content blockquote{margin:24px 0 0;padding:18px 22px;border-left:5px solid var(--orange);background:#fff;border-radius:0 14px 14px 0;color:var(--navy);font-size:1.12rem;font-weight:700;box-shadow:var(--shadow-sm);}
@media(max-width:850px){.paul-story-grid{grid-template-columns:1fr}.paul-story-photo img{min-height:0;aspect-ratio:4/3;}}

/* Brand lockups */
.life-step-brand-lockup{display:flex;align-items:center;gap:18px;margin-bottom:22px;}
.life-step-brand-lockup img{width:112px;max-height:92px;object-fit:contain;flex:0 0 auto;}
.life-step-heading{display:flex;align-items:center;gap:14px;}
.life-step-heading img{width:58px;height:auto;object-fit:contain;flex:0 0 auto;}

/* Join-team / donate hero grids */
.join-team-grid,.donate-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:40px;align-items:center;}
.join-team-photo,.donate-hero-photo{overflow:hidden;border-radius:22px;box-shadow:var(--shadow);background:#fff;}
.join-team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;}
/* Donation/equipment photo: contain, not cover, so no laptops/monitors get cropped out of frame */
.donate-hero-photo img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .45s ease;}
.join-team-photo:hover img,.donate-hero-photo:hover img{transform:scale(1.02);}
.join-team-caption{padding:12px 16px;background:var(--navy-deep);color:#fff;font-weight:700;text-align:center;}
@media(max-width:800px){.join-team-grid,.donate-hero-grid{grid-template-columns:1fr}.life-step-brand-lockup{align-items:flex-start}.life-step-brand-lockup img{width:92px}}

/* Consistent photographic heroes across interior pages — rounded-rectangle treatment.
   (Tried circular per the mockup; reverted — most source photos are wide landscape shots,
   and a tight circle crop was cutting off people/content or centering on empty background.
   Rounded rectangle handles landscape photos correctly via cover without losing the subject.) */
.page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(340px,.97fr);
  gap:48px;
  align-items:start;
}
.page-hero-copy{min-width:0;}
.page-hero-media{
  position:relative;
  overflow:hidden;
  min-height:360px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 55px rgba(0,0,0,.22);
}
.page-hero-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:center;
  transition:transform .45s ease;
}
.page-hero-media:hover img{transform:scale(1.02);}
.page-hero-caption{
  position:absolute;
  left:18px;
  bottom:18px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(22,34,68,.90);
  color:#fff;
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
/* Patrick's high-resolution classroom photograph uses a centered focal point */
.patrick-hero-media img{object-position:center 48%;}
/* Donate page: equipment product photo — contain, not cover, so nothing gets cropped
   out of frame (this is also what was showing as "black": cover was zooming into the
   photo's dark background instead of showing the equipment). Scoped with an explicit
   class on the hero section in donate.html — not a broad :has() selector. */
.donate-page-hero .page-hero-media{background:#f4f6f8;}
.donate-page-hero .page-hero-media img{object-fit:contain;}

@media(max-width:900px){
  .page-hero-grid{grid-template-columns:1fr;gap:28px;}
  .page-hero-media,.page-hero-media img{min-height:300px;}
}
@media(max-width:560px){
  .page-hero-media,.page-hero-media img{min-height:240px;}
}
@media(prefers-reduced-motion:reduce){
  .page-hero-media img{transition:none;}
  .page-hero-media:hover img{transform:none;}
}

/* about.html has its own hero component (about-hero-grid/about-image-card) */
.about-image-card.about-photo-tall{
  overflow:hidden;border-radius:24px;box-shadow:0 22px 55px rgba(0,0,0,.22);
}
.about-image-card.about-photo-tall img{width:100%;height:530px;object-fit:cover;}
@media(max-width:900px){.about-image-card.about-photo-tall img{height:auto;}}

/* Section width/alignment guard */
body > section > .wrap,
body > main > .wrap,
main > section > .wrap,
.cta-band > .wrap,
.site-final-cta > .wrap{
  width:100%;
  max-width:var(--maxw)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:24px!important;
  padding-right:24px!important;
}

.tagline-color .skills{color:var(--orange);}
.tagline-color .opportunity{color:var(--teal);}
.tagline-color .communities{color:#7FE8F5;}
.about-page .tagline-color .communities{color:var(--navy);}

/* Footer */
footer{background:var(--navy-deep);}
footer a:hover{color:var(--orange);}

/* About page already has its own comprehensive component system; only align colors. */
.t4at-about-page{--navy:#1F2D56!important;--teal:#0F8B8D!important;--orange:#F47C20!important;--green:#4CAF50!important;--light:#F7F9FB!important;--text:#2C3E50!important;--muted:#64748B!important;}

@media(max-width:760px){
  .content-prose>ul{grid-template-columns:1fr;}
  section:not(.hero):not(.stats){padding-top:52px;padding-bottom:52px;}
  .hero{padding-top:50px;padding-bottom:56px;}
}
/* FIX (mobile QA, July 2026): 52px top+bottom was carried over from tablet
   sizing and reads as excessive dead space stacked between sections on
   narrow phones. Tightened further below 480px specifically, without
   touching tablet/desktop spacing. */
@media(max-width:480px){
  section:not(.hero):not(.stats){padding-top:38px;padding-bottom:38px;}
  .section-head{margin-bottom:26px;}
}

/* ============================================================
   CHANGE NOTES — what was removed from the previous file and why
   ============================================================
   1. `.hero .hero-photo` and `.hero .homepage-hero-image` were each defined
      3 separate times (in 3 different "final" patch blocks), with conflicting
      object-fit (cover vs contain) and min-height values. Collapsed to one
      rule each: cover + 430px min-height, matching the most recent stated
      intent ("user-approved attached homepage graduation image" used cover).
   2. `.site-final-actions .btn:nth-child(n)` and `.btn[href="community-impact.html"]`
      were each defined 3 times with different colors per pass. Collapsed to
      one definitive color assignment per button position.
   3. Removed: `body:has(.donate-hero-grid) .page-hero-media img,
      body:has(h1:nth-of-type(1)) .donate-hero-photo img{object-fit:contain}`.
      The second half of that selector (`h1:nth-of-type(1)`) matches almost
      every page on the site, not just the donate page — it was silently
      capable of overriding image cropping anywhere. Replaced with a single
      scoped rule: `.donate-hero-photo img{object-fit:contain}`.
   4. Added `--mountain-blue` and `--mountain-blue-dark` to :root. This
      variable was referenced by several button rules but never defined,
      so those buttons had no guaranteed background color in some browsers.
   5. No layout, spacing, typography, or navigation logic was changed —
      only duplicate/conflicting declarations were consolidated.
   ============================================================ */

/* === Version 3.1 Release Candidate additions === */
.home-impact-snapshot{padding:76px 0}.impact-snapshot-grid,.impact-detail-grid,.outcome-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.impact-snapshot-card,.impact-detail-card,.outcome-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 20px;text-align:center;box-shadow:var(--shadow-sm)}.impact-snapshot-card strong,.impact-detail-card strong,.outcome-card strong{display:block;font-family:'Poppins',sans-serif;font-size:clamp(2rem,4vw,3.25rem);line-height:1;color:var(--t4at-blue-dark);margin-bottom:10px}.impact-snapshot-card span,.impact-detail-card span,.outcome-card span{display:block;font-weight:700;color:var(--ink-soft)}.impact-snapshot-action{text-align:center;margin-top:30px}.impact-detail-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:34px}.impact-pillar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.impact-pillar-grid article{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow-sm)}.environment-impact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}.environment-impact-media img{width:100%;border-radius:24px;box-shadow:var(--shadow-md);display:block}.impact-big-number{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(3rem,7vw,5rem);line-height:1;color:var(--green);margin:18px 0 10px}.impact-big-label{font-size:1.15rem;font-weight:800;color:var(--navy)}.outcome-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:34px 0}.impact-testimonials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:30px 0}.impact-testimonials blockquote{margin:0;background:var(--surface-soft);border-left:5px solid var(--teal);border-radius:14px;padding:26px;font-size:1.08rem;font-style:italic}.impact-testimonials cite{display:block;margin-top:14px;font-style:normal;font-weight:800;color:var(--navy)}.impact-partner-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px;padding:0;list-style:none}.impact-partner-list li{padding:12px 0;border-bottom:1px solid var(--line);font-weight:700}.pattersons-dropoff{display:flex;align-items:center;gap:26px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 26px;margin:24px 0;box-shadow:var(--shadow-sm)}.pattersons-dropoff img{width:min(280px,38%);height:auto;object-fit:contain}.pattersons-dropoff h3{margin:0 0 6px}.pattersons-dropoff p{margin:0}.impact-break-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media(max-width:900px){.impact-snapshot-grid,.impact-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.impact-pillar-grid,.environment-impact-grid,.outcome-grid,.impact-testimonials{grid-template-columns:1fr}.impact-partner-list{grid-template-columns:repeat(2,minmax(0,1fr))}.impact-break-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pattersons-dropoff{align-items:flex-start}.pattersons-dropoff img{width:220px;max-width:40%}}
@media(max-width:560px){.impact-snapshot-grid,.impact-detail-grid,.impact-partner-list{grid-template-columns:1fr}.pattersons-dropoff{flex-direction:column}.pattersons-dropoff img{width:260px;max-width:100%}.home-impact-snapshot{padding:54px 0}}

/* Version 3.1 RC2: consistent hover movement for photographic/content images.
   Brand marks, partner logos, and decorative icons remain stationary. */
body img:not([alt*="logo" i]):not([class*="logo"]):not(.no-image-motion) {
  transition: transform .45s ease, box-shadow .45s ease;
  transform-origin: center center;
}
body img:not([alt*="logo" i]):not([class*="logo"]):not(.no-image-motion):hover {
  transform: scale(1.02);
}
/* The homepage hero is positioned as a background-like image, so its container controls hover. */
.hero:hover .hero-bg-image {
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  body img:not([alt*="logo" i]):not([class*="logo"]):not(.no-image-motion),
  body img:not([alt*="logo" i]):not([class*="logo"]):not(.no-image-motion):hover,
  .hero:hover .hero-bg-image {
    transition: none !important;
    transform: none !important;
  }
}

/* Version 15 release-candidate refinements */
.home-tagline{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.18em;max-width:620px;margin:0 auto;line-height:1.08}.home-tagline span{display:block;width:100%;text-align:center}.hero-bg-content{text-align:center}.hero-bg-content .lead{margin-left:auto;margin-right:auto}.home-hero-actions{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:14px;max-width:660px;margin:28px auto 0}.home-hero-actions .btn{justify-content:center;width:100%}.btn-outline-light{background:var(--teal);color:#fff;border:2px solid var(--teal);box-shadow:var(--shadow-sm)}.btn-outline-light:hover{background:#0b6f71;border-color:#0b6f71;color:#fff;transform:translateY(-2px)}
.impact-report-feature{padding:72px 0}.impact-report-image{margin:30px auto 0;max-width:1050px}.impact-report-image img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:var(--shadow-md)}
.outcome-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.contact-details-card{text-align:left;max-width:720px;margin:auto}.contact-details-card h2{text-align:center}.contact-details-card p{font-size:1.1rem}.contact-location-note{color:var(--ink-soft);font-style:italic}
.computer-pickup-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow-sm)}.hub-partner-row{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:center}.hub-partner-row img{width:100%;height:auto;object-fit:contain}
/* Consistent motion for all content photography; logos/icons remain still. */
main img:not(.site-logo):not([src*="logo"]), section img:not([src*="logo"]):not(.site-logo){transition:transform .35s ease,box-shadow .35s ease}main img:not(.site-logo):not([src*="logo"]):hover, section img:not([src*="logo"]):not(.site-logo):hover{transform:scale(1.02)}
@media(max-width:760px){.home-hero-actions{grid-template-columns:1fr;max-width:360px}.hub-partner-row{grid-template-columns:1fr}.hub-partner-row img{max-width:220px}.outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.outcome-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){main img,section img{transition:none!important}main img:hover,section img:hover{transform:none!important}}

/* ==========================================================
   HOMEPAGE HERO — APPROVED JULY 23, 2026
   Full first-screen hero, no ceiling, copy below faces,
   and four matching teal action buttons.
   ========================================================== */
.hero.hero-photo-bg{
  padding:0 !important;
  background:#fff !important;
  overflow:hidden;
}
.hero-photo-bg .hero-bg-wrap{
  position:relative;
  height:calc(100vh - 70px);
  min-height:720px;
  max-height:900px;
  overflow:hidden;
  background:#fff;
}
.hero-photo-bg .hero-bg-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  transform:none !important;
}
.hero-photo-bg:hover .hero-bg-image{
  transform:none !important;
}
.hero-photo-bg .hero-bg-scrim{
  position:absolute;
  inset:0;
  height:auto;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.20) 47%,
    rgba(255,255,255,.80) 61%,
    rgba(255,255,255,.98) 78%,
    #fff 100%
  );
  pointer-events:none;
}
.hero-photo-bg .hero-bg-content{
  position:absolute;
  z-index:2;
  left:50%;
  right:auto;
  bottom:22px;
  width:min(100%, 1120px);
  transform:translateX(-50%);
  padding:0 24px;
  text-align:center;
}
.hero-photo-bg .hero-bg-content > .eyebrow{
  display:none;
}
.hero-photo-bg .home-tagline{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  max-width:none;
  margin:0 auto 12px;
  line-height:1.03;
  letter-spacing:-.045em;
  font-size:clamp(3rem,4.4vw,4.55rem);
}
.hero-photo-bg .home-tagline span{
  display:block;
  width:auto;
  white-space:nowrap;
  text-align:center;
}
.hero-photo-bg .hero-bg-content .lead{
  max-width:760px;
  margin:0 auto 20px;
  color:var(--navy);
  font-size:clamp(1rem,1.22vw,1.22rem);
  line-height:1.55;
}
.home-intro-copy .home-hero-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  width:min(100%,780px);
  margin:0 auto;
}
.home-intro-copy .home-hero-actions .btn,
.home-intro-copy .home-hero-actions .btn:nth-child(1),
.home-intro-copy .home-hero-actions .btn:nth-child(2),
.home-intro-copy .home-hero-actions .btn:nth-child(3),
.home-intro-copy .home-hero-actions .btn:nth-child(4){
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  width:100%;
  padding:16px 28px;
  font-size:1rem;
  background:var(--teal) !important;
  border:2px solid var(--teal) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(15,139,141,.20);
}
.home-intro-copy .home-hero-actions .btn:hover{
  background:var(--teal-dark) !important;
  border-color:var(--teal-dark) !important;
  color:#fff !important;
}
.home-intro-copy .home-hero-actions .btn-icon{
  display:inline-flex;
  width:25px;
  height:25px;
  margin-right:11px;
  flex:0 0 auto;
}
.home-intro-copy .home-hero-actions .btn-icon svg{
  width:100%;
  height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:900px){
  /* FIX (mobile QA, July 2026): min-height was a flat 760px regardless of the
     phone's actual visible viewport. On many Android phones the visible area
     (after browser chrome) is shorter than that, which pushed the tagline and
     buttons below the fold and made the hero look broken/blank on load.
     Capping with svh (small-viewport-height, accounts for mobile browser
     chrome) guarantees the text/button zone stays on-screen. */
  .hero-photo-bg .hero-bg-wrap{height:auto;min-height:min(640px, 88svh);max-height:none;}
  .hero-photo-bg .hero-bg-image{object-position:center 45%;}
  .hero-photo-bg .home-tagline{font-size:clamp(1.8rem,6vw,3rem);}
}
@media(max-width:680px){
  .hero-photo-bg .hero-bg-wrap{min-height:min(560px, 86svh);}
  .hero-photo-bg .hero-bg-image{object-position:center 45%;}
  .hero-photo-bg .hero-bg-content{bottom:18px;padding:0 16px;}
  /* FIX (mobile QA, July 2026): at the previous size, "Creating Opportunities"
     and "Strengthening Communities" didn't fit on one line each, so the
     3-line tagline wrapped onto 4+ visual lines. Sized down and kept nowrap
     so each of the 3 spans reliably renders as exactly one line. The
     descriptive paragraph that used to compete for space here now lives in
     its own section below the photo (.home-intro-copy). */
  .hero-photo-bg .home-tagline{font-size:clamp(1.3rem,6vw,1.9rem);letter-spacing:-.03em;}
  .hero-photo-bg .home-tagline span{white-space:nowrap;}
  .home-intro-copy .home-hero-actions{grid-template-columns:1fr;gap:10px;max-width:430px;}
}
.home-intro-copy{padding:36px 0 44px;background:#fff;}
.home-intro-copy .home-hero-actions{margin-top:28px;}
.home-intro-copy .lead{max-width:760px;margin:0 auto;text-align:center;color:var(--ink-soft);}
@media(max-width:680px){
  .home-intro-copy{padding:28px 0 32px;}
  .home-intro-copy .lead{font-size:15.5px;}
  .home-intro-copy .home-hero-actions{margin-top:22px;}
}