/* Mind Above Matter — PHP Burleson landing page (v2)
   Styled to match the canonical website UI kit (ui_kits/website). */
@import url('../../colors_and_type.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

:root { --accent: var(--coral); --accent-strong: var(--coral-600); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 32px; }

/* ---- Headlines (kit vocabulary): short statements ending in a period ---- */
.h-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px var(--font-body); color: var(--accent);
  text-transform: lowercase; letter-spacing: .02em; margin: 0 0 14px;
}
.h-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.h-eyebrow.on-dark { color: var(--chartreuse); }
.h-display { font: 600 clamp(40px,5.2vw,68px)/1.07 var(--font-display); color: var(--forest); letter-spacing: -.018em; margin: 0; }
.h-2 { font: 600 clamp(30px,3.4vw,46px)/1.05 var(--font-display); color: var(--forest); letter-spacing: -.012em; margin: 0; }
.h-3 { font: 600 21px var(--font-display); color: var(--forest); margin: 0; }
.faded { color: var(--forest-300); }           /* two-tone headline trailing phrase */
.lead { font: 400 clamp(17px,1.4vw,20px)/1.55 var(--font-body); color: var(--fg2); }

/* ---- Buttons (small, uppercase caps — kit style) ---- */
.btn { display: inline-flex; align-items: center; gap: 9px; font: 600 14px var(--font-body); border: none; border-radius: var(--r-pill); padding: 14px 26px; transition: all var(--dur) var(--ease); white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-caps { text-transform: uppercase; letter-spacing: .07em; font-size: 12px; }
.btn-primary { background: var(--forest); color: var(--cream); }
.btn-primary:hover { background: var(--forest-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--accent); color: var(--cream); }
.btn-accent:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--forest); border: 1.5px solid var(--forest); }
.btn-ghost:hover { background: var(--forest); color: var(--cream); }
.btn-ghost.on-dark { color: var(--cream); border-color: rgba(255,255,255,.4); }
.btn-ghost.on-dark:hover { background: var(--cream); color: var(--forest); border-color: var(--cream); }
.btn-block { width: 100%; justify-content: center; }
.icon { width: 18px; height: 18px; stroke-width: 2; }

/* ---- Sections ---- */
section { position: relative; }
.sec { padding: 72px 0; }
.sec-tight { padding: 56px 0; }

/* ---- Trust pills (light, airy) ---- */
.trust-row { display: flex; flex-wrap: wrap; gap: 22px 30px; align-items: center; }
.trust-item { display: inline-flex; align-items: center; gap: 9px; font: 500 14px var(--font-body); color: var(--forest-300); }
.trust-item i { width: 17px; height: 17px; color: var(--accent); }

/* ---- responsive grids ---- */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.value-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.location-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: stretch; }

/* ---- prominent stats grid ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,2.4vw,36px); }

/* ---- testimonials masonry (multi-up) ---- */
.tcols { column-count: 3; column-gap: 18px; }
.tcard { display: inline-block; width: 100%; break-inside: avoid; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 24px 22px; margin: 0 0 18px; box-shadow: var(--shadow-sm); }
.tcard-cta { background: var(--mint); border-color: transparent; display: flex; flex-direction: column; align-items: flex-start; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tcard-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ---- pastel illustration tile (kit Programs vocabulary) ---- */
.illo-tile { border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.tint-mint  { background: var(--mint); }
.tint-lilac { background: var(--lilac); }
.tint-peach { background: var(--peach); }
.tint-sky   { background: var(--sky); }

/* ---- step-inside gallery (square-cornered, soft radius like kit photos) ---- */
.gallery { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 16px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery .g-tall { grid-row: span 2; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px; font: 600 13.5px var(--font-body); color: var(--cream); background: linear-gradient(to top, rgba(18,48,42,.78), rgba(18,48,42,0)); }

/* ---- cards (lighter than before) ---- */
.card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px 24px 26px; }
.card-md { box-shadow: var(--shadow-md); }

/* ---- forest inset band (the ONE dark moment, like kit Stats) ---- */
.forest-band { background: var(--forest); border-radius: var(--r-xl); color: var(--cream); }

/* ---- sticky mobile call bar ---- */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--white); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(26,64,53,.12); }
  .callbar .btn { padding: 14px 10px; }
  body { padding-bottom: 78px; }
}

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .hero-grid, .value-grid, .location-grid { grid-template-columns: 1fr; gap: 38px; }
  .value-grid .value-head { position: static !important; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 210px 210px; }
  .gallery .g-tall { grid-row: span 1; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 30px 28px; }
  .tcols { column-count: 2; }
  .step-rail { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .split2 { grid-template-columns: 1fr; gap: 28px; }
  .split2 .order-img { order: -1; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 210px; }
  .sec { padding: 52px 0; }
  .form-2col { grid-template-columns: 1fr !important; }
  .hero-photo-strip { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .tcols { column-count: 1; }
  .step-rail { grid-template-columns: 1fr !important; }
  .step-detail { grid-template-columns: 1fr !important; }
  .step-detail .illo-tile { min-height: 150px !important; }
}