/* ============================================================
   PASSION — "...and maybe you" page  (/about)
   Warm, honest, trust-building. Two founders, plain speech,
   FAQ accordion with FAQPage schema.
   Own structure; leans on styles.css for tokens, nav, buttons,
   blobs, reveal, golden-circle motif, dividers, footer.
   ============================================================ */

/* ---------- shared helpers ---------- */
.slate{background:var(--slate);color:#fff;position:relative;overflow:hidden;}
.gc-white circle{stroke:#fff;opacity:.16;}
.txtlink-light{
  display:inline-flex;align-items:center;gap:.5em;font-weight:600;
  color:#fff;position:relative;font-size:1.05rem;
}
.txtlink-light svg{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.txtlink-light::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.txtlink-light:hover::after{transform:scaleX(1);}
.txtlink-light:hover svg{transform:translateX(5px);}

/* ============================================================
   HERO (ivory) — two portrait pair + heading
   ============================================================ */
.mb-hero{padding:196px 0 116px;position:relative;overflow:hidden;}
.mb-hero .hero-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.04fr .96fr;gap:60px;align-items:center;
}
.mb-hero h1{font-size:clamp(2.9rem,5.7vw,4.9rem);font-weight:520;line-height:1.1;color:var(--ink);}
.mb-hero h1 .pink{color:var(--pink);display:inline-block;position:relative;}
.mb-hero .hero-sub{font-size:1.24rem;color:var(--ink-soft);margin:34px 0 42px;max-width:31em;line-height:1.64;}
.mb-hero .hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
/* paired portraits in hero media */
.mb-duo{position:relative;display:flex;gap:20px;justify-content:center;align-items:flex-start;}
.mb-duo .gc-hero{top:-10%;right:-18%;width:120%;z-index:0;}
.mb-duo .blob-hero{
  width:74%;aspect-ratio:1;left:-14%;bottom:-14%;
  border-radius:46% 54% 62% 38% / 52% 44% 56% 48%;z-index:0;
}
.mb-port{
  position:relative;z-index:2;width:48%;
  border-radius:calc(40px * var(--r-unit)) calc(40px * var(--r-unit)) calc(28px * var(--r-unit)) calc(28px * var(--r-unit));
  overflow:hidden;aspect-ratio:3/3.7;background:var(--stone);
  box-shadow:var(--shadow-soft);flex:none;
}
.mb-port:nth-child(3){margin-top:52px;}
.mb-port img{width:100%;height:100%;object-fit:cover;display:block;}
.mb-port-name{
  position:absolute;left:0;right:0;bottom:0;padding:36px 16px 14px;
  text-align:center;color:#fff;
  background:linear-gradient(transparent,rgba(31,22,32,.72));
  font-weight:600;font-size:.98rem;
}
.mb-port-name small{display:block;font-weight:500;opacity:.85;font-size:.82rem;}

/* ============================================================
   WHO WE ARE (slate, two-column portrait pair)
   ============================================================ */
.mb-who{padding:132px 0;}
.mb-who .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1100px;}
.mb-who-copy h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;color:#fff;}
.mb-who-lede{font-size:1.18rem;color:rgba(255,255,255,.82);margin:22px 0 28px;line-height:1.64;max-width:28em;}
.mb-who-lede strong{color:#fff;font-weight:600;}
.mb-who-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.mb-who-col{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);border-radius:var(--r-md);padding:22px 20px;}
.mb-who-col h3{font-size:1.05rem;font-weight:600;color:#fff;margin-bottom:6px;}
.mb-who-col p{color:rgba(255,255,255,.75);font-size:.98rem;line-height:1.5;}
.mb-who-col .bio-note{font-style:italic;color:rgba(255,255,255,.45);font-size:.88rem;margin-top:8px;}

/* ============================================================
   WHAT WE ARE QUALIFIED TO SAY (ivory)
   ============================================================ */
.mb-qual{padding:132px 0;}
.mb-qual .sec-head{max-width:720px;margin:0 auto;text-align:center;}
.mb-qual .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;}
.mb-qual .sec-head p{color:var(--ink-soft);font-size:1.18rem;margin-top:18px;line-height:1.64;}
.mb-method{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:60px;}
.mb-mstep{
  background:#fff;border-radius:var(--r-md);padding:30px 26px 32px;
  box-shadow:var(--shadow-soft);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
}
.mb-mstep:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
.mb-mnum{
  font-family:var(--font-head);font-size:2.2rem;color:var(--pink);
  line-height:1;font-weight:560;margin-bottom:12px;
}
.mb-mstep h3{font-size:1.12rem;font-weight:580;color:var(--ink);margin-bottom:8px;}
.mb-mstep p{color:var(--ink-soft);font-size:.98rem;line-height:1.55;}
.mb-cred{
  max-width:760px;margin:52px auto 0;text-align:center;
  background:#fff;border-radius:var(--r-md);padding:36px 40px;box-shadow:var(--shadow-soft);
}
.mb-cred p{font-size:1.12rem;color:var(--ink-soft);line-height:1.64;}
.mb-cred p strong{color:var(--ink);font-weight:600;}
.mb-cred .cred-note{font-size:.88rem;color:var(--ink-soft);opacity:.6;font-style:italic;margin-top:10px;}
@media(max-width:840px){.mb-method{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.mb-method{grid-template-columns:1fr;}}

/* ============================================================
   EASY TO DEAL WITH (slate)
   ============================================================ */
.mb-easy{padding:120px 0;text-align:center;}
.mb-easy .sec-head{max-width:680px;margin:0 auto;position:relative;z-index:2;}
.mb-easy .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;color:#fff;}
.mb-easy-pts{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:52px;position:relative;z-index:2;}
.mb-ept{
  background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.22);
  border-radius:999px;padding:.88em 1.8em;color:#fff;
  font-size:1.12rem;font-weight:500;
  transition:background .35s,transform .4s cubic-bezier(.2,.7,.2,1);
}
.mb-ept:hover{background:rgba(255,255,255,.16);transform:translateY(-3px);}
.mb-easy-foot{max-width:560px;margin:42px auto 0;position:relative;z-index:2;color:rgba(255,255,255,.76);font-size:1.12rem;line-height:1.66;}
.mb-easy-foot strong{color:#fff;font-weight:600;}

/* ============================================================
   STILL NOT SURE (ivory, large warm statement)
   ============================================================ */
.mb-still{padding:130px 0;text-align:center;}
.mb-still .wrap{max-width:820px;}
.mb-still-text{
  font-family:var(--font-head);font-weight:480;
  font-size:clamp(1.85rem,3.5vw,2.9rem);line-height:1.28;
  letter-spacing:-.012em;color:var(--ink);text-wrap:balance;
}
.mb-still-text span{color:var(--pink);}
.mb-still-sub{font-size:1.18rem;color:var(--ink-soft);margin:28px auto 0;max-width:32em;line-height:1.64;}

/* ============================================================
   FAQ (slate, accordion)
   ============================================================ */
.mb-faq{padding:132px 0;}
.mb-faq .sec-head{text-align:center;max-width:680px;margin:0 auto;position:relative;z-index:2;}
.mb-faq .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;color:#fff;}
.mb-faq-list{max-width:860px;margin:52px auto 0;display:flex;flex-direction:column;gap:12px;position:relative;z-index:2;}
.mb-faq-item{background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft);}
.mb-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 28px;border:none;background:none;cursor:pointer;text-align:left;
  font-family:var(--font-body);font-size:1.12rem;font-weight:600;color:var(--ink);
  transition:background .25s;
}
.mb-faq-q:hover{background:var(--pink-soft);}
.mb-faq-icon{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--pink-soft);
  display:grid;place-items:center;transition:background .3s,transform .4s cubic-bezier(.2,.7,.2,1);
}
.mb-faq-icon svg{width:14px;height:14px;stroke:var(--pink);stroke-width:2.5;fill:none;stroke-linecap:round;}
.mb-faq-item.open .mb-faq-icon{background:var(--pink);transform:rotate(45deg);}
.mb-faq-item.open .mb-faq-icon svg{stroke:#fff;}
.mb-faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1);}
.mb-faq-a-inner{padding:0 28px 24px;color:var(--ink-soft);font-size:1.06rem;line-height:1.65;}
.mb-faq-item.open .mb-faq-q{background:var(--pink-soft);}

/* ============================================================
   CTA (plum, rings)
   ============================================================ */
.mb-cta{padding:150px 0;background:var(--ink);text-align:center;overflow:hidden;position:relative;}
.mb-cta .gc-cta{top:50%;left:50%;transform:translate(-50%,-50%);width:min(820px,96vw);z-index:0;}
.mb-cta .gc-cta circle{stroke:var(--pink);opacity:.18;}
.mb-cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;}
.mb-cta h2{color:#fff;font-size:clamp(2.4rem,5vw,4rem);font-weight:500;}
.mb-cta .mb-cta-btn{margin:38px 0 22px;}
.mb-cta-note{color:rgba(246,238,242,.74);font-size:1.12rem;}

/* ============================================================
   ALL AUDIENCES (ivory, before footer)
   ============================================================ */
.mb-all-aud{padding:88px 0 114px;background:var(--canvas);}
.mb-all-aud-head{
  text-align:center;font-family:var(--font-head);font-weight:480;
  font-size:1.7rem;color:var(--ink-soft);margin:0 0 44px;letter-spacing:-.01em;
}
.mb-aud-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  max-width:1100px;margin:0 auto;
}
.mb-aud-tile{
  position:relative;background:#fff;border-radius:var(--r-md);
  padding:26px 24px 28px;box-shadow:var(--shadow-soft);overflow:hidden;
  display:flex;flex-direction:column;gap:6px;text-decoration:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
}
.mb-aud-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);}
.mb-aud-tile .corner{
  position:absolute;top:-24px;right:-24px;width:68px;height:68px;
  border-radius:50%;background:var(--pink-soft);opacity:.6;transition:transform .45s;
}
.mb-aud-tile:hover .corner{transform:scale(1.5);}
.mb-aud-tile small{color:var(--ink-soft);font-size:.88rem;font-weight:500;position:relative;z-index:2;}
.mb-aud-tile h3{font-size:1.1rem;font-weight:580;color:var(--ink);line-height:1.2;position:relative;z-index:2;}
.mb-aud-tile .tile-go{
  margin-top:8px;display:inline-flex;align-items:center;
  color:var(--pink);position:relative;z-index:2;
}
.mb-aud-tile .tile-go svg{width:16px;height:16px;stroke:var(--pink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.mb-aud-tile-cta{background:var(--pink);}
.mb-aud-tile-cta h3{color:#fff;}
.mb-aud-tile-cta small{color:rgba(255,255,255,.75);}
.mb-aud-tile-cta .corner{background:rgba(255,255,255,.18);opacity:1;}
.mb-aud-tile-cta .tile-go{color:#fff;}
.mb-aud-tile-cta .tile-go svg{stroke:#fff;}
.mb-aud-tile-cta:hover{background:var(--pink-deep);}
@media(max-width:960px){.mb-aud-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:660px){.mb-aud-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:420px){.mb-aud-grid{grid-template-columns:1fr;}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .mb-hero{padding:150px 0 70px;}
  .mb-hero .hero-grid{grid-template-columns:1fr;gap:50px;}
  .mb-duo{max-width:440px;margin:0 auto;}
  .mb-who .wrap{grid-template-columns:1fr;gap:44px;}
  .mb-who-cols{grid-template-columns:1fr;}
}