/* ═══════════════════════════════════════════════════════════════════
   About Us page styles — editorial layout matching the homepage palette
   (navy section eyebrows, gold pillar numbers, dusty rose primary,
   sky-blue accent, cream cards).

   All rules scoped to .about-preview so they don't leak.
   ═══════════════════════════════════════════════════════════════════ */

/* Wider content envelope on About to give the editorial sections room.
   Default <main> has max-width:1180px + horizontal padding — we strip
   both so the about-preview sections can be true full-bleed and the
   ambient blob gradients don't clip into visible vertical edges. */
main:has(.about-preview){
  background:var(--bg);
  max-width:none;
  padding:0;
  width:100%;
}
.about-preview{
  --about-max: 1400px;
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.6;
  /* Clip any residual horizontal overflow from blob gradients etc. */
  overflow-x:clip;
}
/* Default: full-bleed wrapper, inner content centred at --about-max.
   This avoids visible "section edges" on the page (where a contained
   section's bg or gradient clips against the page bg and creates a
   vertical seam). Sections that need a different bg (numbers band,
   CTA) override this with their own full-bleed treatment. */
.about-preview > section{
  padding:5rem max(2rem, calc((100vw - var(--about-max)) / 2));
  position:relative;
  /* Override the base `main section { margin-top: 2.25rem }` rule
     so the first section sits flush with the header (no white gap). */
  margin:0;
}
@media (max-width:720px){
  .about-preview > section{padding:3rem 1rem}
}

/* Section heads (eyebrow + h2) — mirror homepage scaling */
.about-preview .bmb-section-head{
  text-align:center;
  margin-bottom:3rem;
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}
.about-preview .bmb-section-head .bmb-eyebrow{
  display:flex;
  justify-content:center;
  width:fit-content;
  margin:0 auto 1.25rem;
  font-family:var(--sans);
  font-size:clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight:700;
  letter-spacing:.22em;
  color:var(--navy);
  text-transform:uppercase;
}
.about-preview .bmb-section-head h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0;
}
.about-preview .bmb-section-head h2 em{
  font-style:italic;
  color:var(--brand);
  font-weight:500;
}

/* ═══ HERO ═══════════════════════════════════════════════════════ */
.about-preview .about-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:center;
  padding-top:6rem;
  padding-bottom:5rem;
  position:relative;
  overflow:hidden;
}
.about-preview .about-hero::before{
  /* Soft gold ambient blob, top-left */
  content:"";
  position:absolute;
  top:-30%;
  left:-15%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(179, 149, 85, 0.32) 0%, rgba(179, 149, 85, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:aboutAmbientA 24s ease-in-out infinite;
}
.about-preview .about-hero::after{
  /* Soft rose ambient blob, bottom-right */
  content:"";
  position:absolute;
  bottom:-30%;
  right:-15%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(170, 127, 134, 0.30) 0%, rgba(91, 194, 231, 0.12) 50%, rgba(170, 127, 134, 0) 70%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:aboutAmbientB 28s ease-in-out infinite;
}
@keyframes aboutAmbientA{
  0%, 100% {transform:translate(0,0) scale(1)}
  50%      {transform:translate(40px,30px) scale(1.05)}
}
@keyframes aboutAmbientB{
  0%, 100% {transform:translate(0,0) scale(1)}
  50%      {transform:translate(-50px,-20px) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .about-preview .about-hero::before,
  .about-preview .about-hero::after{animation:none}
}
.about-preview .about-hero-inner{
  position:relative;
  z-index:1;
}
.about-preview .about-hero-eyebrow{
  display:inline-flex;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  gap:14px;
  align-items:center;
  margin-bottom:1.25rem;
}
.about-preview .about-hero-eyebrow::before{
  content:"";
  width:42px;
  height:1px;
  background:var(--gold);
}
/* H1 is locked text-wise but visually quiet — small caps subtitle */
.about-preview .about-hero-h1{
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.3em;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 1rem;
}
.about-preview .about-hero-display{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 1.5rem;
  max-width:18ch;
}
.about-preview .about-hero-display em{
  font-style:italic;
  color:var(--brand);
  font-weight:500;
}
.about-preview .about-hero-lead{
  font-size:1.08rem;
  line-height:1.65;
  color:var(--ink-2);
  max-width:48ch;
  margin:0;
}
.about-preview .about-hero-visual{
  position:relative;
  z-index:1;
  aspect-ratio:4/5;
  border-radius:24px;
  /* Original WP About Us hero photo — kept for continuity with the
     prior site. */
  background:url("/wp-content/uploads/2024/05/about-us-2.webp") center/cover no-repeat;
  box-shadow:0 24px 60px -20px rgba(50, 30, 25, 0.22);
}
@media (max-width:900px){
  .about-preview .about-hero{
    grid-template-columns:1fr;
    gap:2rem;
    text-align:left;
  }
  .about-preview .about-hero-visual{aspect-ratio:5/4;order:-1}
  .about-preview .about-hero-display{max-width:none}
}

/* ═══ FOUNDER ════════════════════════════════════════════════════ */
.about-preview .about-founder-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:3rem;
  align-items:start;
}
.about-preview .about-founder-text p{
  font-size:1.02rem;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 1.2rem;
}
.about-preview .about-founder-text p:last-child{margin-bottom:0}
.about-preview .about-founder-text strong{
  color:var(--ink);
  font-weight:600;
}
.about-preview .about-founder-quote{
  margin:0;
  padding:2rem 2rem 1.6rem;
  background:linear-gradient(180deg, rgba(255, 250, 248, 0.85), rgba(244, 232, 218, 0.55));
  border:1px solid rgba(179, 149, 85, 0.20);
  border-radius:20px;
  position:relative;
}
.about-preview .about-founder-quote::before{
  content:"\201C";
  position:absolute;
  top:.2rem;
  left:1rem;
  font-family:var(--serif);
  font-size:5rem;
  line-height:1;
  color:var(--gold);
  opacity:.55;
}
.about-preview .about-founder-quote blockquote{
  font-family:var(--serif);
  font-size:1.3rem;
  font-style:italic;
  line-height:1.4;
  color:var(--ink);
  margin:1.5rem 0 1rem;
  position:relative;
  z-index:1;
}
.about-preview .about-founder-quote blockquote em{
  color:var(--brand-dk);
  font-style:italic;
}
.about-preview .about-founder-quote figcaption{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--navy);
}
@media (max-width:900px){
  .about-preview .about-founder-grid{grid-template-columns:1fr;gap:2rem}
}

/* ═══ RECOGNITION / AWARDS ═══════════════════════════════════════ */
.about-preview .about-recognition .bmb-section-head{
  margin-bottom:2.5rem;
}
.about-preview .about-recognition-lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--muted);
  margin:.8rem auto 0;
  max-width:56ch;
}
.about-preview .about-awards{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--about-max);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.5rem;
  align-items:end;
  justify-items:center;
}
.about-preview .about-award{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding:1.5rem 1rem;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  /* Subtle gold inner glow on hover so the awards feel like trophies */
}
.about-preview .about-award:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 8px 24px rgba(179, 149, 85, 0.35));
}
.about-preview .about-award img{
  max-width:280px;
  width:100%;
  height:auto;
  object-fit:contain;
}
.about-preview .about-award-caption{
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ink);
  line-height:1.45;
  margin:0;
  max-width:24ch;
}
.about-preview .about-award-caption span{
  display:block;
  font-weight:400;
  font-style:italic;
  font-family:var(--serif);
  font-size:.92rem;
  color:var(--muted);
  margin-top:.35rem;
  letter-spacing:0;
}
@media (max-width:900px){
  .about-preview .about-awards{grid-template-columns:1fr;gap:2rem}
  .about-preview .about-award img{max-width:240px}
}

/* ═══ NUMBERS / TRUST BAND (about-flavored) ══════════════════════ */
.about-preview .about-numbers{
  background:linear-gradient(180deg, rgba(13, 44, 84, 0.97), rgba(13, 44, 84, 0.93));
  /* Section is already full-bleed because main no longer caps width
     and our base .about-preview > section rule uses padding-x instead
     of margin. The old 100vw trick caused a small off-by-scrollbar
     horizontal overflow. */
  position:relative;
  overflow:hidden;
}
.about-preview .about-numbers .bmb-section-head .bmb-eyebrow{
  color:var(--gold);
}
.about-preview .about-numbers .bmb-section-head h2{
  color:#fdfaf8;
}
.about-preview .about-numbers .bmb-section-head h2 em{
  color:#f4e5b8;
}
.about-preview .about-numbers-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--about-max);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  position:relative;
  z-index:1;
}
.about-preview .about-stat{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  padding:1.6rem 1rem;
  position:relative;
}
.about-preview .about-stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:25%;
  right:-1rem;
  width:1px;
  height:50%;
  background:linear-gradient(180deg, transparent, rgba(179,149,85,0.35), transparent);
}
.about-preview .about-stat-num{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 5vw, 3.6rem);
  font-weight:500;
  line-height:1;
  /* Animated champagne-gold gradient text — matches homepage trust band */
  background:linear-gradient(115deg, #b39555 0%, #f4e5b8 28%, #ffffff 42%, #f4e5b8 55%, #b39555 88%);
  background-size:220% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  letter-spacing:-.01em;
  position:relative;
}
.about-preview .about-stat-plus,
.about-preview .about-stat-star{
  font-size:.65em;
  margin-left:.15em;
  vertical-align:.15em;
  color:#f4e5b8;
  -webkit-text-fill-color:#f4e5b8;
}
.about-preview .about-stat-label{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(244, 229, 184, 0.85);
  margin-top:.4rem;
}
.about-preview .about-stat-detail{
  font-family:var(--serif);
  font-style:italic;
  font-size:.92rem;
  color:rgba(255, 250, 248, 0.72);
  line-height:1.45;
  margin-top:.55rem;
  max-width:18ch;
}
@media (max-width:900px){
  .about-preview .about-numbers-grid{grid-template-columns:repeat(2, 1fr);gap:1.4rem}
  .about-preview .about-stat:not(:last-child)::after{display:none}
}
@media (max-width:560px){
  .about-preview .about-numbers-grid{grid-template-columns:1fr}
}

/* ═══ MISSION ════════════════════════════════════════════════════ */
.about-preview .about-mission-body{
  max-width:60ch;
  margin:0 auto;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.2rem, 2vw, 1.55rem);
  font-style:italic;
  line-height:1.55;
  color:var(--ink);
  padding:0 1rem;
}
.about-preview .about-mission-body::before,
.about-preview .about-mission-body::after{
  content:"";
  display:block;
  width:38px;
  height:1px;
  background:var(--gold);
  margin:1.4rem auto;
}

/* ═══ PILLARS (zigzag, hover-pop) ════════════════════════════════ */
.about-preview .about-pillars{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:2rem;
  row-gap:1.25rem;
  max-width:var(--about-max);
}
.about-preview .about-pillars li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.1rem;
  align-items:flex-start;
  padding:1.8rem;
  background:rgba(255, 250, 248, 0.45);
  border:1px solid rgba(179, 149, 85, 0.12);
  border-radius:20px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease,
             background .35s ease,
             border-color .35s ease;
}
.about-preview .about-pillars li:nth-child(odd){
  margin-right:1rem;
}
.about-preview .about-pillars li:nth-child(even){
  margin-left:1rem;
  margin-top:3rem;
}
.about-preview .about-pillars li:hover{
  transform:translateY(-4px) scale(1.02);
  background:rgba(255, 252, 250, 0.95);
  border-color:rgba(179, 149, 85, 0.40);
  box-shadow:0 16px 42px -14px rgba(179, 149, 85, 0.28),
             0 4px 14px -6px rgba(170, 127, 134, 0.18);
}
.about-preview .about-pillar-num{
  font-family:var(--serif);
  font-size:1.4rem;
  color:var(--gold);
  font-weight:600;
  line-height:1.15;
  min-width:1.8rem;
  margin-top:.45rem;
  transition:color .35s ease;
}
.about-preview .about-pillars h3{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight:500;
  color:var(--ink);
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0 0 .8rem;
  transition:color .35s ease;
}
.about-preview .about-pillars p{
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--ink-2);
  line-height:1.55;
  margin:0;
  max-width:42ch;
  transition:color .35s ease;
}
.about-preview .about-pillars p strong{
  color:var(--navy);
  font-weight:600;
}
.about-preview .about-pillars li:hover h3{color:var(--brand-dk)}
.about-preview .about-pillars li:hover p{color:var(--ink)}
@media (max-width:720px){
  .about-preview .about-pillars{grid-template-columns:1fr;column-gap:0}
  .about-preview .about-pillars li:nth-child(odd),
  .about-preview .about-pillars li:nth-child(even){margin:0}
}

/* ═══ PHILOSOPHY (centered editorial copy) ═══════════════════════ */
.about-preview .about-philosophy-body{
  max-width:68ch;
  margin:0 auto;
  text-align:left;
}
.about-preview .about-philosophy-body p{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 1.4rem;
}
.about-preview .about-philosophy-body p:last-child{margin-bottom:0}
.about-preview .about-philosophy-body p::first-letter{
  font-family:var(--serif);
  font-size:3.4em;
  font-weight:500;
  line-height:.95;
  float:left;
  padding:.05em .12em 0 0;
  color:var(--navy);
}
.about-preview .about-philosophy-body p:not(:first-of-type)::first-letter{
  font-size:inherit;
  float:none;
  padding:0;
  color:inherit;
  font-weight:inherit;
}

/* ═══ TRIMESTER JOURNEY (4 cards) ════════════════════════════════ */
.about-preview .about-journey-lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.5;
  color:var(--muted);
  margin:.8rem auto 0;
  max-width:50ch;
}
.about-preview .about-journey-grid{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:journey;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem;
  max-width:var(--about-max);
}
.about-preview .about-journey-grid li{
  counter-increment:journey;
  padding:2rem 1.8rem;
  background:rgba(255, 250, 248, 0.7);
  border:1px solid rgba(170, 127, 134, 0.14);
  border-radius:22px;
  position:relative;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.about-preview .about-journey-grid li::before{
  content:"0" counter(journey);
  position:absolute;
  top:1.2rem;
  right:1.4rem;
  font-family:var(--serif);
  font-size:2.4rem;
  font-weight:500;
  color:var(--gold);
  line-height:1;
  opacity:.4;
}
.about-preview .about-journey-grid li:hover{
  transform:translateY(-3px);
  border-color:rgba(91, 194, 231, 0.45);
  box-shadow:0 14px 36px -14px rgba(13, 44, 84, 0.18);
}
.about-preview .about-journey-when{
  display:inline-block;
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.6rem;
}
.about-preview .about-journey-grid h3{
  font-family:var(--font-display, var(--serif));
  font-size:1.5rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
  margin:0 0 .8rem;
}
.about-preview .about-journey-grid p{
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-2);
  margin:0;
}
@media (max-width:720px){
  .about-preview .about-journey-grid{grid-template-columns:1fr;gap:1rem}
}

/* ═══ FINAL CTA ══════════════════════════════════════════════════ */
.about-preview .about-cta{
  text-align:center;
  /* Padding overrides base padding-y but base padding-x stays */
  padding-top:6rem;
  padding-bottom:6rem;
  background:linear-gradient(180deg, rgba(244, 232, 218, 0.45), rgba(247, 240, 240, 0.85));
  position:relative;
  overflow:hidden;
}
.about-preview .about-cta::before{
  /* Soft gold blob centered */
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:65vw;
  height:65vw;
  max-width:900px;
  max-height:900px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(179, 149, 85, 0.20) 0%, rgba(179, 149, 85, 0) 60%);
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}
.about-preview .about-cta-inner{
  position:relative;
  z-index:1;
  max-width:60ch;
  margin:0 auto;
}
.about-preview .about-cta .bmb-eyebrow{
  display:inline-flex;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  gap:14px;
  align-items:center;
  margin:0 auto 1.5rem;
  justify-content:center;
}
.about-preview .about-cta .bmb-eyebrow::before,
.about-preview .about-cta .bmb-eyebrow::after{
  content:"";
  width:36px;
  height:1px;
  background:var(--gold);
}
.about-preview .about-cta h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(2rem, 3.6vw, 3rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.1;
  margin:0 0 1.2rem;
}
.about-preview .about-cta p{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 2rem;
}
.about-preview .about-cta-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.about-preview .about-cta .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 2.2rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.about-preview .about-cta .bmb-cta--primary{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dk) 100%);
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(170, 127, 134, 0.55),
             0 16px 44px -10px rgba(143, 110, 105, 0.35);
}
.about-preview .about-cta .bmb-cta--primary:hover{
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 12px 32px -6px rgba(170, 127, 134, 0.75),
             0 20px 52px -10px rgba(143, 110, 105, 0.45);
}
.about-preview .about-cta .bmb-cta--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-rose, rgba(170, 127, 134, 0.4));
}
.about-preview .about-cta .bmb-cta--ghost:hover{
  background:rgba(170, 127, 134, 0.08);
  color:var(--brand-dk);
  border-color:var(--brand);
}