/* ==========================================================================
   USCL Homepage — Ivory Light (loaded ONLY by index.html; body.home)
   Tokens namespaced --home-*; classes namespaced .home-*.
   ========================================================================== */
:root {
  --home-ivory: #F6F3EA;
  --home-sage: #E2EEE6;
  --home-soft: #F4F1E8;
  --home-white: #FFFFFF;
  --home-ink: #0D3F2E;
  --home-green: #11583F;
  --home-body: #41604F;
  --home-muted: #5E7466;
  --home-gold: #B88A2E;
  --home-gold-deep: #8A6914;
  --home-gold-dark: #E8B466;
  --home-radius-block: 24px;
  --home-radius-card: 16px;
  --home-shadow: 0 2px 8px rgba(13, 63, 46, .06), 0 12px 32px rgba(13, 63, 46, .08);
  --home-shadow-hover: 0 6px 16px rgba(13, 63, 46, .10), 0 20px 44px rgba(13, 63, 46, .12);
}

body.home { background: var(--home-ivory); color: var(--home-body); }
.home h1, .home h2, .home h3 { color: var(--home-ink); }
.home-gold { color: var(--home-gold-deep); font-style: normal; }

/* ---------- Hero ---------- */
.home-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #F6F3EA 0%, #EEF4EE 55%, #E2EEE6 100%);
  padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 88px);
  text-align: center;
}
.home-hero .container { position: relative; z-index: 2; max-width: 880px; }
.home-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.01em;
  margin-bottom: 18px;
}
.home-hero__subhead {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  color: var(--home-green); margin-bottom: 10px;
}
.home-hero__tagline {
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  color: var(--home-muted); letter-spacing: .04em;
  margin-bottom: 34px;
}
.home-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.home-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 32px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.home-btn--solid { background: var(--home-green); color: #fff; }
.home-btn--solid:hover, .home-btn--solid:focus-visible {
  background: var(--home-ink); color: #fff;
  transform: translateY(-3px); box-shadow: var(--home-shadow-hover);
}
.home-btn--outline { background: transparent; border-color: var(--home-green); color: var(--home-green); }
.home-btn--outline:hover, .home-btn--outline:focus-visible {
  background: var(--home-green); color: #fff;
  transform: translateY(-3px); box-shadow: var(--home-shadow-hover);
}
.home-btn--gold { background: var(--home-gold-deep); color: #fff; }
.home-btn--gold:hover, .home-btn--gold:focus-visible {
  background: #6B5314; color: #fff;
  transform: translateY(-3px); box-shadow: var(--home-shadow-hover);
}
.home-btn:focus-visible { outline: 2px solid var(--home-green); outline-offset: 3px; }

/* Hero motif: concentric golden arcs rising from the bottom edge */
.home-hero__arcs {
  position: absolute; left: 50%; bottom: -8vw; z-index: 1;
  width: min(140vw, 1700px); transform: translateX(-50%);
  pointer-events: none; will-change: transform;
}
.home-hero__arcs circle { fill: none; stroke-width: 2; }

/* Heritage credential chips: free-floating glass pills nestled along the hero's
   golden arcs. They are absolutely positioned at every screen size (the
   .home-hero__chips wrapper is display:contents so it never affects layout) and
   live inside the hero's reserved bottom band, below the buttons. Per-breakpoint
   positions are set in the Responsive section (compact mobile scatter vs the
   wide desktop scatter). */
.home-hero__chips { display: contents; }
.home-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(17, 88, 63, .16);
  box-shadow: 0 4px 14px rgba(13, 63, 46, .08), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: .82rem; font-weight: 600; color: var(--home-green);
  white-space: nowrap; pointer-events: none;
  animation: home-chip-bob 4s ease-in-out infinite;
}
.home-chip svg { width: 14px; height: 14px; stroke: var(--home-gold); }
/* Anchor chips are interactive (base chips are pointer-events:none decoration) */
a.home-chip { pointer-events: auto; text-decoration: none; cursor: pointer; }
a.home-chip:hover { background: rgba(255, 255, 255, .88); border-color: rgba(17, 88, 63, .3); }
a.home-chip:focus-visible { outline: 2px solid var(--home-gold); outline-offset: 2px; }
.home-chip--1 { animation-delay: 0s; }
.home-chip--2 { animation-delay: -1.2s; }
.home-chip--3 { animation-delay: -2.1s; }
.home-chip--4 { animation-delay: -3s; }
@keyframes home-chip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Stats band ---------- */
.home-stats {
  position: relative; z-index: 3;
  margin-top: 20px;
  padding-bottom: clamp(18px, 2.4vw, 30px);
}
.home-stats__inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--home-white); border-radius: var(--home-radius-block);
  box-shadow: var(--home-shadow); padding: clamp(7px, 1vw, 12px) clamp(10px, 2vw, 22px);
}
.home-stat { text-align: center; }
.home-stat strong {
  display: block; font-family: var(--display);
  font-size: clamp(.7rem, 1.05vw, .8rem); font-weight: 700;
  color: var(--home-ink); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.home-stat span {
  display: block; margin-top: 2px;
  font-size: .42rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--home-muted);
}

/* ---------- Generic homepage sections ---------- */
.home-section { padding: clamp(22px, 3vw, 40px) 0; }
.home-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--home-gold-deep); margin-bottom: 12px;
}
.home-section h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.15; margin-bottom: 16px;
}
.home-section p { line-height: 1.65; }
.home-center { text-align: center; max-width: 720px; margin: 0 auto; }
.home-center p { margin-bottom: 24px; }

/* Rounded full-bleed soft container (tazapay-style block) */
.home-block {
  background: var(--home-soft);
  border-radius: var(--home-radius-block);
  padding: clamp(32px, 5vw, 64px);
  box-shadow: var(--home-shadow);
}
.home-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4.5vw, 56px); align-items: center; }
.home-split--reverse { grid-template-columns: .95fr 1.05fr; }
.home-split p { margin-bottom: 14px; }
.home-split .home-btn { margin-top: 10px; }

/* Glass-framed photo card */
.home-photo {
  border-radius: var(--home-radius-card); overflow: hidden;
  border: 6px solid rgba(255, 255, 255, .85);
  box-shadow: var(--home-shadow);
  transform: rotate(-1.2deg);
  transition: transform .3s ease, box-shadow .3s ease;
}
.home-photo:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--home-shadow-hover); }
.home-photo img { display: block; width: 100%; height: auto; }
.home-photo figcaption {
  background: var(--home-white); padding: 12px 16px;
  font-size: .85rem; color: var(--home-muted); line-height: 1.45;
}

/* ---------- Heritage showcase (the page's one dark band) ---------- */
.home-heritage {
  background: linear-gradient(150deg, #0D3F2E 0%, #11583F 70%, #1A6E52 100%);
  border-radius: var(--home-radius-block);
  padding: clamp(36px, 5.5vw, 72px) clamp(22px, 4vw, 56px);
  box-shadow: var(--home-shadow);
}
.home-heritage .home-eyebrow { color: var(--home-gold-dark); }
.home-heritage h2 { color: #fff; }
.home-heritage > p { color: #D9E7DF; max-width: 640px; margin-bottom: 30px; }
.home-hgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.home-hcard {
  display: block; padding: 22px 20px;
  background: rgba(13, 63, 46, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 180, 102, .25);
  border-radius: var(--home-radius-card);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-hcard h3 {
  font-family: var(--display); font-size: 1.18rem; font-weight: 700;
  color: var(--home-gold-dark); margin-bottom: 7px;
}
.home-hcard p { font-size: .88rem; color: #D9E7DF; line-height: 1.5; }
.home-hcard:hover, .home-hcard:focus-visible {
  transform: translateY(-4px);
  background: rgba(13, 63, 46, .55);
  border-color: rgba(232, 180, 102, .6);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}
.home-hcard:focus-visible { outline: 2px solid var(--home-gold-dark); outline-offset: 2px; }
.home-heritage__all {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 600; font-size: .95rem;
  border-bottom: 1.5px solid rgba(232, 180, 102, .6);
  padding-bottom: 2px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.home-heritage__all:hover, .home-heritage__all:focus-visible { color: var(--home-gold-dark); border-color: var(--home-gold-dark); }

/* ---------- Five-Point Agenda ---------- */
.home-agenda { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.home-agenda-card {
  background: var(--home-white); border-radius: var(--home-radius-card);
  padding: 24px 18px; text-align: center;
  box-shadow: var(--home-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-agenda-card:hover { transform: translateY(-5px); box-shadow: var(--home-shadow-hover); }
.home-agenda-card svg {
  width: 30px; height: 30px; stroke: var(--home-gold); margin-bottom: 12px;
}
.home-agenda-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 7px; }
.home-agenda-card p { font-size: .85rem; line-height: 1.5; color: var(--home-muted); }

/* ---------- Closing CTA band ---------- */
.home-cta {
  background: linear-gradient(120deg, #0D3F2E 0%, #11583F 55%, #6B5314 118%);
  border-radius: var(--home-radius-block);
  padding: clamp(34px, 5vw, 60px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  box-shadow: var(--home-shadow);
}
.home-cta h2 { color: #fff; margin-bottom: 8px; }
.home-cta p { color: #D9E7DF; max-width: 520px; }
.home-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-btn--glassdark {
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .45); color: #fff;
}
.home-btn--glassdark:hover, .home-btn--glassdark:focus-visible {
  background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff;
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .home-agenda { grid-template-columns: repeat(3, 1fr); }
  .home-hgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .home-split, .home-split--reverse { grid-template-columns: 1fr; }
  .home-stats__inner { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .home-agenda { grid-template-columns: repeat(2, 1fr); }
  .home-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
  .home-agenda { grid-template-columns: 1fr; }
  .home-hgrid { grid-template-columns: 1fr; }
}

/* Phones, tablets and foldables: a compact scatter sitting low in the arc band,
   two staggered rows anchored to the hero bottom with fixed offsets so the chips
   always clear the buttons regardless of hero height. The hero reserves a bottom
   band to hold them. */
@media (max-width: 1079px) {
  .home-hero { padding-bottom: 138px; }
  .home-chip { font-size: .76rem; padding: 7px 13px; }
  .home-chip--1 { left: 4%;  right: auto; bottom: 84px; }
  .home-chip--2 { right: 4%; left: auto;  bottom: 84px; }
  .home-chip--3 { left: 9%;  right: auto; bottom: 22px; }
  .home-chip--4 { right: 9%; left: auto;  bottom: 22px; }
}
/* Desktop: the original wide scatter around the arcs. */
@media (min-width: 1080px) {
  .home-hero { padding-bottom: clamp(140px, 16vw, 200px); }
  .home-stats { margin-top: clamp(-58px, -4.5vw, -34px); }
  .home-chip--1 { left: 8%;  right: auto; bottom: 26%; }
  .home-chip--2 { left: 26%; right: auto; bottom: 20%; }
  .home-chip--3 { right: 26%; left: auto; bottom: 20%; }
  .home-chip--4 { right: 8%;  left: auto; bottom: 26%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-chip { animation: none; }
  .home-hero__arcs { transform: translateX(-50%) !important; }
  .home-btn:hover, .home-btn:focus-visible,
  .home-hcard:hover, .home-agenda-card:hover, .home-photo:hover { transform: none; }
  .home-photo { transform: none; }
}