/* ============================================
   Mi Gulf Coast — Design Tokens
   Palette grounded in the Gulf Coast itself:
   navy/light-blue from the brand mark,
   warm sand for ground, sunset gold as a
   single warm spark used sparingly.
   ============================================ */

:root {
  --navy: #415d86;
  --navy-dark: #2b3f5c;
  --navy-ink: #232f3d;
  --blue: #a2c6d5;
  --blue-soft: #d3e4ea;
  --blue-mist: #eef4f6;
  --sand: #efe6d0;
  --sand-light: #f8f3e6;
  --paper: #fbf8f1;
  --gold: #c9973f;
  --gold-soft: #e8cf9d;
  --white: #ffffff;
  --ink: #253142;
  --ink-soft: #4c5a6c;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1160px;
  --radius: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-ink);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--navy);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gold);
  display: inline-block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(65, 93, 134, 0.28);
}
.btn-primary:hover { background: var(--navy-dark); }
.btn-gold {
  background: var(--gold);
  color: var(--navy-ink);
  box-shadow: 0 6px 18px rgba(201, 151, 63, 0.32);
}
.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: var(--white);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.14); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 241, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(65,93,134,0.12);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.nav-logo img { height: 42px; width: auto; }
.site-header .container { max-width: 1320px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 21px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.91rem;
  font-weight: 500;
  color: var(--navy-ink);
  white-space: nowrap;
}
.nav-links a { padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color .15s ease; }
.nav-links a:hover, .nav-links a.active { border-color: var(--gold); }
.nav-cta { display: flex; align-items: center; gap: 12px; margin-left: 28px; flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy-ink); margin: 5px 0; }

@media (max-width: 900px) {
  .nav-links { position: fixed; top: 72px; left: 0; right: 0; background: var(--paper);
    flex-direction: column; align-items: flex-start; padding: 20px 24px; gap: 14px;
    border-bottom: 1px solid rgba(65,93,134,0.14); transform: translateY(-140%); transition: transform .25s ease; }
  .nav-links.open { transform: translateY(0); }
  .nav-toggle { display: block; }
  .nav-cta .btn-outline { display: none; }
}

/* ---------- Tideline divider (signature element) ---------- */
.tideline {
  width: 100%;
  height: 64px;
  display: block;
  margin: 0;
}
.tideline path { fill: none; stroke-width: 2; }

.band-navy { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); }
.band-navy p, .band-navy .eyebrow { color: var(--blue-soft); }
.band-navy h1, .band-navy h2, .band-navy h3 { color: var(--white); }
.band-blue { background: var(--blue-mist); }
.band-sand { background: var(--sand-light); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 60px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 400px at 85% 0%, rgba(162,198,213,0.35), transparent 60%),
    radial-gradient(ellipse 600px 400px at 10% 100%, rgba(201,151,63,0.12), transparent 60%);
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero p.lede { font-size: 1.15rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-art { position: relative; aspect-ratio: 4/3.2; border-radius: 24px; overflow: hidden; background: linear-gradient(200deg, var(--navy) 0%, var(--navy-dark) 55%, #1c2b3f 100%); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-art .photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 22px;
  background: linear-gradient(0deg, rgba(35,49,66,0.82) 0%, rgba(35,49,66,0) 100%);
  color: var(--white); font-size: 0.82rem; font-weight: 600;
}

img.person-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--white);
  box-shadow: 0 4px 14px rgba(65,93,134,0.2);
}

.spotlight-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.spotlight-media { position: relative; }
.spotlight-media .tag { position: relative; z-index: 1; }
.spotlight-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(35,49,66,0.55) 0%, rgba(35,49,66,0) 55%);
}

.photo-band {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 44px;
  aspect-ratio: 16/6;
}
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .photo-band { aspect-ratio: 4/3; } }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.photo-grid figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.photo-grid figure:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .photo-grid { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-tight { padding: 56px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Cards / Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid rgba(65,93,134,0.12);
  border-radius: var(--radius);
  padding: 30px;
}
.card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--navy);
}

/* ---------- Stats bar ---------- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 44px 40px;
  color: var(--white);
}
.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
}
.stat-label { font-size: 0.92rem; color: var(--blue-soft); margin-top: 8px; }
@media (max-width: 760px) { .stats-bar { grid-template-columns: 1fr; text-align: center; } }

/* ---------- Gears / Focus areas ---------- */
.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .focus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .focus-grid { grid-template-columns: 1fr; } }
.focus-card {
  border: 1.5px solid rgba(65,93,134,0.18);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: var(--white);
  position: relative;
}
.focus-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.focus-card h3 { margin-top: 10px; margin-bottom: 8px; font-size: 1.15rem; }
.focus-card p { font-size: 0.93rem; margin: 0; }

/* ---------- Testimonials ---------- */
.quote-card {
  background: var(--navy-dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 34px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.quote-card .mark { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.quote-card p.quote { color: var(--blue-soft); font-size: 1rem; flex-grow: 1; }
.quote-attr { font-weight: 700; color: var(--white); font-size: 0.95rem; }
.quote-role { color: var(--blue-soft); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--blue-soft);
  color: var(--navy-dark);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ---------- Giving tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 1000px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card {
  background: var(--white);
  border: 1.5px solid rgba(65,93,134,0.16);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.tier-card.featured {
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(201,151,63,0.18);
  position: relative;
}
.tier-card.featured::before {
  content: "MOST CHOSEN";
  position: absolute;
  top: -12px; left: 24px;
  background: var(--gold);
  color: var(--navy-ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
}
.tier-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--navy-ink); margin-bottom: 2px; }
.tier-price { font-family: var(--font-mono); font-size: 1.6rem; color: var(--navy); font-weight: 700; margin-bottom: 2px; }
.tier-annual { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 14px; }
.tier-line { font-style: italic; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 16px; }
.tier-for { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); font-weight: 700; margin-bottom: 6px; }
.tier-list { list-style: none; padding: 0; margin: 0 0 22px; font-size: 0.86rem; flex-grow: 1; }
.tier-list li { padding: 5px 0 5px 22px; position: relative; color: var(--ink-soft); }
.tier-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* ---------- Event list ---------- */
.event-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(65,93,134,0.14);
}
.event-date {
  background: var(--blue-mist);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 10px 6px;
}
.event-date .mon { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--navy); text-transform: uppercase; }
.event-date .day { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy-ink); font-weight: 700; }
.event-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--navy-ink); margin-bottom: 4px; }
.event-meta { font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 700px) {
  .event-row { grid-template-columns: 70px 1fr; }
  .event-row .btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
}

/* ---------- Spotlight ---------- */
.spotlight-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(65,93,134,0.14);
}
.spotlight-media {
  background: linear-gradient(160deg, var(--blue) 0%, var(--navy) 100%);
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: 26px;
}
.spotlight-body { padding: 38px; }
@media (max-width: 800px) { .spotlight-card { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--navy);
  border-radius: 24px;
  padding: 56px;
  color: var(--white);
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--blue-soft); max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-ink); color: var(--blue-soft); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 36px; }
.site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; font-size: 0.92rem; }
.site-footer a:hover { color: var(--white); }
.footer-logo {
  display: inline-block;
  background: var(--paper);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.footer-logo img { height: 40px; margin: 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(211,228,234,0.6);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding: 64px 0 46px;
  background: var(--blue-mist);
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.breadcrumb { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); margin-bottom: 14px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.person-card { display: flex; gap: 18px; align-items: flex-start; }
.person-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(160deg, var(--blue), var(--navy));
  flex-shrink: 0;
}

.divider-sm { height: 1px; background: rgba(65,93,134,0.15); margin: 40px 0; border: none; }

.mailto-box {
  border: 1.5px dashed var(--navy);
  border-radius: var(--radius);
  padding: 30px;
  background: var(--blue-mist);
}

.form-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; }

.cta-band.photo-cta {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.cta-band.photo-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(43,63,92,0.92) 0%, rgba(35,49,66,0.88) 60%, rgba(35,49,66,0.75) 100%);
  z-index: -1;
  border-radius: inherit;
}

.region-band {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21/8;
  margin: 40px 0;
}
.region-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.region-band .region-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 26px;
  background: linear-gradient(0deg, rgba(35,49,66,0.78) 0%, rgba(35,49,66,0) 100%);
  color: var(--white); font-size: 0.92rem; font-weight: 600;
}
@media (max-width: 700px) { .region-band { aspect-ratio: 4/3; } }

.blog-card {
  background: var(--white);
  border: 1px solid rgba(65,93,134,0.14);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.blog-card-media {
  aspect-ratio: 16/10;
  background: linear-gradient(160deg, var(--blue) 0%, var(--navy) 100%);
  position: relative;
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-date { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); margin-bottom: 10px; }
.blog-card-body h3 { margin-bottom: 10px; }
.blog-card-body p { font-size: 0.92rem; flex-grow: 1; }
.blog-card-body .btn { align-self: flex-start; margin-top: 12px; }

/* ---------- Forms (contact + newsletter, wired to the site API) ---------- */
.contact-form label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy-ink);
  margin-bottom: 16px;
}
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid rgba(65, 93, 134, 0.35);
  border-radius: var(--radius-sm);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}
.contact-form textarea { resize: vertical; min-height: 120px; }

.form-status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
}
.form-status.success { background: #e4efe2; color: #2c5232; }
.form-status.error { background: #f6e4e0; color: #7a2e22; }

/* Honeypot — visually gone but present in the form for bots to fill. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Footer newsletter signup ---------- */
.footer-signup {
  border-top: 1px solid rgba(211, 228, 234, 0.18);
  padding: 28px 0 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  justify-content: space-between;
}
.footer-signup .signup-copy h4 { margin-bottom: 4px; }
.footer-signup .signup-copy p {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(211, 228, 234, 0.75);
  max-width: 44ch;
}
.signup-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.signup-form input[type="email"] {
  padding: 12px 18px;
  font: inherit;
  font-size: 0.92rem;
  border-radius: 999px;
  border: 1.5px solid rgba(211, 228, 234, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  min-width: 240px;
}
.signup-form input[type="email"]::placeholder { color: rgba(211, 228, 234, 0.55); }
.signup-form input[type="email"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.signup-form .btn { padding: 12px 22px; font-size: 0.9rem; }
.signup-form .form-status { display: inline-block; margin: 0; padding: 10px 16px; }
.site-footer .form-status.success { background: rgba(232, 207, 157, 0.16); color: var(--gold-soft); }
.site-footer .form-status.error { background: rgba(246, 228, 224, 0.16); color: #f0b9ad; }
@media (max-width: 760px) {
  .signup-form input[type="email"] { min-width: 0; flex: 1 1 180px; }
}

::selection { background: var(--gold-soft); }

/* ---------- Portrait photo diptych ---------- */
/* Companion to .photo-grid for tall, vertical shots. */
.photo-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
}
.photo-duo figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 3/4; }
.photo-duo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.photo-duo figure:hover img { transform: scale(1.04); }
@media (max-width: 620px) { .photo-duo { grid-template-columns: 1fr; max-width: 420px; } }

/* ---------- Video testimonials ---------- */
/* Each clip is a full-width feature: the video on one side, that leader's
   pull quote on the other, alternating sides down the section. */
#video-testimonials { scroll-margin-top: 88px; }

.video-feature {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 48px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}
.video-feature + .video-feature {
  margin-top: 54px;
  padding-top: 54px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Mirrored row: swap the track widths and place items explicitly, so the
   video always sits in the narrow track whichever side it is on. */
.video-feature.reverse { grid-template-columns: 1fr minmax(0, 300px); }
.video-feature.reverse .video-feature-media { grid-column: 2; grid-row: 1; }
.video-feature.reverse .video-feature-body  { grid-column: 1; grid-row: 1; }

.video-frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-ink);
  box-shadow: 0 22px 48px rgba(16, 26, 40, 0.45);
  line-height: 0;
}
/* No forced aspect ratio — each clip keeps its own, so nothing letterboxes. */
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.video-feature-body { max-width: 34rem; }
.video-feature-body .mark {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.video-quote {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--white);
  margin: 0 0 20px;
}
.video-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(211, 228, 234, 0.6);
  margin: 18px 0 0;
}

/* Long, skinny quote bar closing out the section under the two video rows. */
.video-quote-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px 36px;
  max-width: 940px;
  margin: 54px auto 0;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.video-quote-bar p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--white);
  margin: 0;
}
.video-quote-bar .bar-attr { text-align: right; max-width: 200px; }
.video-quote-bar .quote-role { line-height: 1.4; }
@media (max-width: 760px) {
  .video-quote-bar { grid-template-columns: 1fr; padding: 22px 24px; }
  .video-quote-bar .bar-attr { text-align: left; max-width: none; }
}

@media (max-width: 820px) {
  .video-feature,
  .video-feature.reverse { grid-template-columns: 1fr; gap: 26px; max-width: 400px; }
  .video-feature.reverse .video-feature-media { grid-column: 1; grid-row: 1; }
  .video-feature.reverse .video-feature-body  { grid-column: 1; grid-row: 2; }
  .video-feature + .video-feature { margin-top: 42px; padding-top: 42px; }
}

/* ---------- Team card wrapping ---------- */
/* A long email can't shrink a flex item below its min-content width, which
   pushed these cards past the viewport on phones. Stacking gives the text the
   card's full width, so the address fits on one line instead of breaking. */
.person-card > div { min-width: 0; }
/* `anywhere` (not `break-word`) is required: only `anywhere` shrinks the
   element's min-content width, which is what the grid track sizes to. With the
   stacked layout below there is room for the address on one line down to about
   360px, so this only actually breaks on very narrow screens. */
.person-card a { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .person-card { flex-direction: column; gap: 14px; }
}