/* =========================================================
   Stowe Holdings: landing-page theme, applied site-wide (all pages)
   Carries the homepage hero's look (landing.css) onto every other section:
   liquid-glass cards, pill buttons, mono eyebrows and gold-to-teal accent words.
   Section backgrounds are left as they are: light sections get frosted white
   glass, dark sections keep their navy glass.
   Load LAST, after the page's own stylesheet, nav.css and landing.css.
   ========================================================= */
:root {
  --lg-radius: 24px;
  --lg-mono: "JetBrains Mono", ui-monospace, monospace;
  /* Frosted white glass for light sections */
  --lg-fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(120% 80% at 50% 120%, rgba(117, 185, 176, 0.12), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.72) 100%);
  --lg-edge: rgba(255, 255, 255, 0.9);
  --lg-shadow:
    0 0 0 1px rgba(16, 41, 54, 0.07),
    inset 0 1px 0 #fff,
    inset 0 -16px 26px -22px rgba(117, 185, 176, 0.55),
    0 18px 40px -28px rgba(16, 41, 54, 0.38);
  --lg-shadow-hover:
    0 0 0 1px rgba(216, 185, 121, 0.6),
    inset 0 1px 0 #fff,
    inset 0 -18px 28px -22px rgba(216, 185, 121, 0.55),
    0 28px 50px -26px rgba(16, 41, 54, 0.45);
  /* Gold-to-teal accent words: deep tones on light sections keep AA contrast */
  --lg-grad: linear-gradient(90deg, #d8b979, #75b9b0);
  --lg-grad-deep: linear-gradient(90deg, #8a6d2f, #2f6d63);
}

/* ---------- Liquid-glass bubbles (light sections) ---------- */
.serve-card,
.pillar,
.compliance-card,
.contact-form,
.holding-card,
.legal,
.hero-card,
.ccard,
.mod:not(.mod-locked),
.level-panel,
.academy-stats,
.track-strip {
  border-radius: var(--lg-radius);
  background: var(--lg-fill);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}
.serve-card:hover,
.pillar:hover,
.compliance-card:hover,
.ccard:hover,
.mod:not(.mod-locked):hover,
.track-strip:hover {
  border-color: var(--lg-edge);
  background: var(--lg-fill);
  box-shadow: var(--lg-shadow-hover);
  transform: translateY(-4px) scale(1.01);
}
.serve-card,
.pillar,
.compliance-card,
.ccard,
.mod,
.track-strip {
  transition: box-shadow 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mod-locked { border-radius: var(--lg-radius); }
.legal { border-radius: 28px; }
.academy-stats { border-radius: 100px; padding: 0 8px; }
.track-strip { border-radius: 100px; }

/* Level stops keep their done / current / locked states; only the shape and rim change */
.stop { border-radius: var(--lg-radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.stop[aria-selected="true"] { box-shadow: inset 0 1px 0 #fff, inset 0 -14px 24px -20px rgba(117, 185, 176, 0.55), 0 18px 36px -26px rgba(16, 41, 54, 0.5); }

/* Photos on light and dark sections match the bubble radius */
.who-we-are-photo,
.contact-photo,
.leadership-photo-media {
  border-radius: var(--lg-radius);
}

/* ---------- Round, glossy icon tiles (like the hero cards) ---------- */
.pillar .pi {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2d5468, #102936 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 16px -10px rgba(16, 41, 54, 0.6);
}
.pillar:hover .pi { background: radial-gradient(circle at 35% 30%, #f0dcae, #d8b979 70%); }
.compliance-card .ci,
.holding-icon {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(117, 185, 176, 0.18) 70%);
  border: 1px solid rgba(47, 109, 99, 0.22);
  box-shadow: inset 0 1px 0 #fff;
}
.holding-icon {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(216, 185, 121, 0.22) 70%);
  border-color: rgba(216, 185, 121, 0.5);
}

/* ---------- Pill buttons ---------- */
.btn,
.btn-gold,
.btn-line,
.btn-ghost,
.btn-dark,
.btn-gold.big,
.btn-line.big {
  border-radius: 100px;
  justify-content: center;
}
.btn {
  min-height: 46px;
  padding: 0 22px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary,
.btn-gold { font-weight: 700; }
/* Outline buttons on light sections: frosted, teal-edged, like the hero's line button */
.btn-ghost-dark,
.holding-card .btn-outline,
.legal .btn-outline,
.btn-line,
.btn-ghost {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(47, 109, 99, 0.4);
  color: var(--stowe-navy, #102936);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-ghost-dark:hover,
.holding-card .btn-outline:hover,
.legal .btn-outline:hover,
.btn-line:hover,
.btn-ghost:hover {
  border-color: #2f6d63;
  background: rgba(117, 185, 176, 0.12);
}

/* ---------- Mono eyebrows ---------- */
.section-eyebrow,
.holding-eyebrow,
.footprint-eyebrow,
.eyebrow.tealtext,
.eyebrow.goldtext,
.track-cta,
.stop-text small {
  font-family: var(--lg-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.section-eyebrow,
.holding-eyebrow { font-size: 11px; }
/* The portal's plain eyebrow (no colour modifier) */
.band .eyebrow:not(.tealtext):not(.goldtext),
.hero-card .eyebrow {
  font-family: var(--lg-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* ---------- Gold-to-teal accent words ---------- */
.text-grad,
.fixit h2 .text-grad {
  background: var(--lg-grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2f6d63;
}
/* Dark sections use the bright hero gradient */
.band .text-grad,
.footprint .text-grad,
.who-we-are .text-grad,
.leadership-photo .text-grad {
  background: var(--lg-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
/* The videos page's .band is a light section; keep it on the deep gradient */
.band-cream .text-grad,
.band-academy .text-grad,
.band-white .text-grad {
  background: var(--lg-grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- Form fields inside the glass ---------- */
.contact-form input,
.contact-form select,
.contact-form textarea {
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.75);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  background-color: #fff;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .serve-card, .pillar, .compliance-card, .ccard, .mod, .track-strip, .btn { transition: none; }
  .serve-card:hover, .pillar:hover, .compliance-card:hover, .ccard:hover, .mod:hover, .track-strip:hover { transform: none; }
}

/* 1.4.2: headings never leave one word on its own line; paragraphs avoid a lone last word */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }