/* Money Mango Marketing — mm-connect v1
   Booking calendar, call and text buttons, and the menu call row.
   New filename on purpose: /assets/* is cached immutable for a year, so the older
   stylesheets stay byte-identical and every browser picks this one up fresh.
   Every class is prefixed mm- so nothing collides. */

/* ---------- landing spot for every "Book a call" button ---------- */
#book{scroll-margin-top:84px}
.mm-quick{margin-top:28px}
.mm-quick .btn{text-align:center}

/* ---------- the calendar card ---------- */
.mm-book{padding-top:0}
.mm-cal-card{max-width:880px; margin:0; overflow:hidden}
.mm-cal-card:hover{transform:none}
.mm-cal-card h2{font-size:clamp(28px,4.2vw,42px); margin:0}
.mm-cal-lede{margin-top:12px; max-width:60ch; font-size:clamp(16px,1.6vw,18px)}
.mm-cal{margin:26px -28px -28px; border-top:var(--bw) solid var(--ink); background:#fff;
  border-radius:0 0 calc(var(--r) + 1.5px) calc(var(--r) + 1.5px); overflow:hidden}
.mm-cal iframe{display:block; width:100%; height:640px; border:0; background:#fff;
  transition:height .25s ease}
.mm-cal-note{max-width:880px; margin:16px 0 0; font-size:14px; color:rgba(23,19,12,.72)}
.mm-cal-note a{text-decoration:underline; text-underline-offset:2px}
.mm-booked{display:none; margin-top:16px; padding:12px 16px; border:var(--bw) solid var(--ink);
  border-radius:var(--r); background:var(--sun); font-weight:700}
.mm-booked.on{display:block}

/* ---------- "Rather write?" heading over the form ---------- */
.mm-write-h{font-size:clamp(26px,3.4vw,36px); margin:0}
.mm-write-sub{margin:10px 0 22px; color:rgba(23,19,12,.8)}

/* ---------- founders, call or text ---------- */
.mm-people{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:16px}
.mm-people li{border-top:1.5px solid rgba(23,19,12,.22); padding-top:16px}
.mm-people li:first-child{border-top:0; padding-top:0}
.mm-people b{display:block; font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:-.01em; line-height:1.2}
.mm-people small{display:block; font-size:14px; font-weight:600; margin-top:2px; color:rgba(23,19,12,.78)}
.mm-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.mm-act{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--card); color:var(--ink);
  font-family:var(--ui); font-weight:650; font-size:14.5px; letter-spacing:.01em; white-space:nowrap;
  transition:background .18s ease, color .18s ease}
.mm-act:hover{background:var(--ink); color:var(--card)}
.mm-act:focus-visible{outline:2.5px solid var(--leaf); outline-offset:3px}
.mm-founders-card .go{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

/* ---------- call row at the bottom of the phone menu ---------- */
.mm-menu-call{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:16px; letter-spacing:0}
.mm-menu-call a{display:inline-flex; align-items:center; min-height:44px; padding:10px 18px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--card); color:var(--ink)}

/* ---------- small screens: give Calendly the 320px it needs ---------- */
@media (max-width:560px){
  .mm-cal-card{padding:22px}
  .mm-cal{margin:22px -22px -22px}
  .mm-quick .btn{flex:1 1 auto}
}
@media (max-width:380px){
  .mm-book .wrap{padding:0 12px}
  .mm-cal-card{padding:18px}
  .mm-cal{margin:20px -18px -18px}
}
@media (prefers-reduced-motion:reduce){ .mm-cal iframe{transition:none} }

/* ---------- team cards: Instagram and LinkedIn side by side ---------- */
.mm-social{display:flex; flex-wrap:wrap; gap:10px}

/* ---------- client wall on the Work page ---------- */
.mm-clients-sec{padding-top:0}
.mm-clients-h{font-size:clamp(24px,3vw,32px); margin:0 0 18px}
.mm-clients{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.mm-clients li{display:flex}
.mm-clients a{display:flex; flex:1; flex-direction:column; justify-content:center; min-height:84px; padding:16px 18px;
  background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease}
.mm-clients a:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink)}
.mm-clients a:focus-visible{outline:2.5px solid var(--leaf); outline-offset:3px}
.mm-clients b{font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:-.01em; line-height:1.15}
.mm-clients small{margin-top:4px; font-size:13.5px; font-weight:600; color:rgba(23,19,12,.72)}
.mm-clients-note{margin-top:14px; font-size:14px; color:rgba(23,19,12,.72)}
@media (max-width:820px){ .mm-clients{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:360px){ .mm-clients{grid-template-columns:1fr} }

/* ---------- English Bay Bakery feature ---------- */
.mm-kicker{font-weight:700; font-size:14.5px; letter-spacing:.01em; color:var(--leaf); margin:0 0 6px}
.mm-ebb h3{font-size:clamp(24px,3vw,34px)}
.mm-ebb > p:not(.mm-kicker){max-width:68ch}
.mm-dlv{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.mm-dlv li{border:1.5px solid rgba(23,19,12,.3); border-radius:999px; padding:6px 12px; font-size:13.5px; font-weight:600; background:var(--paper)}

/* ---------- homepage: who we've worked with, a compact credits line ---------- */
.mm-home-clients{display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0 0 30px; font-size:15px; line-height:1.4}
.mm-home-clients span{font-weight:700; color:var(--leaf); margin-right:12px}
.mm-home-clients a{display:inline-flex; align-items:center; min-height:36px; font-weight:650; color:var(--ink);
  text-decoration:underline; text-decoration-color:rgba(23,19,12,.28); text-underline-offset:4px; transition:text-decoration-color .18s ease}
.mm-home-clients a + a::before{content:"\2605"; display:inline-block; color:var(--mango); margin:0 10px; font-size:12px}
.mm-home-clients a:hover{text-decoration-color:var(--ink)}
.mm-home-clients a:focus-visible{outline:2.5px solid var(--leaf); outline-offset:3px; border-radius:4px}
@media (max-width:560px){
  .mm-home-clients{display:grid; grid-template-columns:1fr 1fr; column-gap:16px}
  .mm-home-clients span{grid-column:1 / -1; margin:0 0 2px}
  .mm-home-clients a + a::before{content:none}
}

/* ---------- phone action bar (mm-bar.js) ---------- */
.mm-bar{display:none}
@media (max-width:760px){
  .mm-bar{display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(242,230,208,.97);
    border-top:var(--bw) solid var(--ink); transform:translateY(110%); visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s}
  .mm-bar.on{transform:none; visibility:visible; transition:transform .25s ease}
  .mm-bar a{display:inline-flex; align-items:center; justify-content:center; min-height:46px; border:var(--bw) solid var(--ink);
    border-radius:var(--r); font-family:var(--body); font-weight:700; font-size:15.5px}
  .mm-bar-book{flex:1; background:var(--leaf); color:#fff}
  .mm-bar-call{padding:0 20px; background:var(--card); color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .mm-clients a,.mm-home-clients a,.mm-bar,.mm-bar.on{transition:none}
  .mm-clients a:hover{transform:none}
}

/* ---------- v3: client wall with a call to action tile, 4 across on wide screens ---------- */
@media (min-width:1024px){ .mm-clients{grid-template-columns:repeat(4,minmax(0,1fr))} }
.mm-clients a.mm-clients-cta{background:var(--mango)}
.mm-clients a.mm-clients-cta small{color:var(--ink)}

/* ---------- v3: ad grids on industry pages ---------- */
.mm-adgrid .frame{aspect-ratio:4/5; overflow:hidden; border-radius:18px; border:var(--bw) solid var(--ink)}
.mm-adgrid .frame img,.mmp-stage .frame img{width:100%; height:100%; object-fit:cover}
.mmp-stage .frame{border-radius:18px; border:var(--bw) solid var(--ink); overflow:hidden; width:100%}
.mm-adnote{margin-top:14px; font-size:14px; color:rgba(23,19,12,.72)}
.mm-quick + .mm-quick{display:none}

/* ---------- v3: footer gets a fourth column, two by two on tablets ---------- */
@media (min-width:1024px){ .footin{grid-template-columns:1.3fr 1fr 1fr 1fr} footer > .foot{grid-template-columns:1.4fr 1fr 1fr 1fr} }
@media (min-width:821px) and (max-width:1023px){ .footin{grid-template-columns:1fr 1fr} }
@media (min-width:761px) and (max-width:1023px){ footer > .foot{grid-template-columns:1fr 1fr} }

/* ---------- v4: readability pass, WCAG AA text contrast. Brand colours stay; only small text gets the deeper shade ---------- */
html:root{--mango-text:#A34A00; --mmp-mtext:#A34A00; --mmp-muted:rgba(23,19,12,.72); --mm-leaf-text:#0E5636}
html body .eyebrow, html body .mmp-k, html body .mm-founders, html body .mm-kicker, html body .mm-home-clients span{color:var(--mm-leaf-text)}
html body .mmp-info p, html body .mmx-step p{color:rgba(23,19,12,.8)}
html body .mmx-n{color:var(--mango-text)}
html body .case.mango .go, html body .demobar a{color:var(--ink)}
html body .foot a{color:rgba(242,230,208,.95)}
html body .foot h4{color:#FFD580}
html body .legal, html body .legal a{color:rgba(242,230,208,.92)}
html body .srow span:first-child{color:rgba(23,19,12,.75)}
html body .stotal > span{color:rgba(23,19,12,.75) !important}
html body .btn-solid{background:#146B45; border-color:#146B45}

/* ---------- v4: screen reader helpers ---------- */
.mm-sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.mm-skip{position:absolute; left:-9999px; top:10px; z-index:300; background:var(--ink); color:var(--card); padding:12px 18px; border-radius:10px; font-weight:700}
.mm-skip:focus{left:12px}
/* v4 follow-ups: older rules with stronger selectors */
html body .mmp-link, html body .mmx-link, html body .mmp-note a, html body .mmp-tabnote a{color:#8F4100}
html body .mmp-info .mmp-k, html body .band .mmp-k, html body .mmx-price .eyebrow, html body section .eyebrow{color:var(--mm-leaf-text)}
html body .contact-inner .btn-solid, html body .btn-row .btn-solid{background:#146B45 !important; border-color:#146B45 !important; color:#FFFDF7 !important}
html body .foot p, html body .footin p{color:rgba(242,230,208,.95)}
html body figcaption span, html body .mmp-quote figcaption span{color:rgba(23,19,12,.75)}