/* ============================================================
   Robyn — component styles (greyscale · Montserrat)
   Redesign 1/5. Class names preserved for robyn.js hooks.
   Palette: --bg #FFF · --surface #F7F7F6 · --beige #EDE8E1
            --grey-100 #E5E5E3 · --grey-400 #9B9B97
            --grey-700 #4A4A48 · --text #2B2B2A
   ============================================================ */

/* ---------- Inquiry modal ---------- */
.mdback{position:fixed;inset:0;background:rgba(43,43,42,.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:600;padding:24px}
.mdback.on{display:flex}
.modal{background:#fff;max-width:480px;width:100%;border-radius:2px;padding:44px 40px;position:relative;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(43,43,42,.28)}
.mdx{position:absolute;top:14px;right:18px;background:none;border:none;font-size:28px;color:var(--grey-400);cursor:pointer;line-height:1}
.mdx:hover{color:var(--text)}
.modal h3{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:300;letter-spacing:.05em;margin-bottom:6px;color:var(--text)}
.mds{color:var(--grey-400);font-size:13px;margin-bottom:26px;font-weight:400}
.modal input,.modal select,.modal textarea{width:100%;padding:13px 14px;margin-bottom:12px;background:var(--surface);border:1px solid var(--grey-100);border-radius:2px;font:14px 'Montserrat',sans-serif;font-weight:300;color:var(--text)}
.modal input:focus,.modal select:focus,.modal textarea:focus{outline:none;border-color:var(--grey-400);background:#fff}
.modal textarea{min-height:90px;resize:vertical;line-height:1.6}
.msub{background:var(--grey-700);color:#fff;border:none;padding:15px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;width:100%;margin-top:6px;border-radius:2px;transition:background .25s}
.msub:hover{background:var(--text)}
.msub:disabled{opacity:.5}
#iSt{margin-top:14px;font-size:13px;text-align:center;min-height:18px}
#iSt.ok{color:var(--grey-700)}
#iSt.err{color:#8a8a86}

/* ---------- Offerings / service cards ---------- */
.stitle{font-family:'Montserrat',sans-serif;font-size:clamp(28px,4vw,40px);text-align:center;color:var(--text);margin-bottom:44px;font-weight:300;letter-spacing:.06em}
.svc-cat{margin-bottom:52px}
.svc-catlabel{font-family:'Montserrat',sans-serif;font-size:20px;color:var(--grey-700);margin-bottom:24px;letter-spacing:.08em;text-align:center;font-weight:300;text-transform:uppercase}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--grey-100);padding:48px 32px;text-align:center;border-radius:2px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(43,43,42,.07)}
.card h3{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:300;letter-spacing:.04em;margin-bottom:16px;color:var(--text)}
.card p{font-size:14px;color:var(--grey-700);margin-bottom:20px;line-height:1.7;font-weight:300}
.svc-meta{font-size:11px;color:var(--grey-400);letter-spacing:.14em;text-transform:uppercase;margin:12px 0 18px}
.svc-loading{text-align:center;color:var(--grey-400);font-style:normal;padding:40px;font-weight:300}

/* card CTAs */
.bk-btn{display:inline-block;padding:13px 26px;background:var(--grey-700);color:#fff;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:2px;margin-right:8px;transition:background .25s}
.bk-btn:hover{background:var(--text)}
.card a.cta{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-700);border-bottom:1px solid var(--grey-400);padding-bottom:5px;transition:color .2s,border-color .2s}
.card a.cta:hover{color:var(--text);border-color:var(--text)}

/* ---------- Booking modal ---------- */
.bk-mask{display:none;position:fixed;inset:0;background:rgba(43,43,42,.7);z-index:700;align-items:center;justify-content:center;padding:20px}
.bk-card{background:#fff;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;padding:40px 32px;position:relative;border-radius:2px;box-shadow:0 24px 80px rgba(43,43,42,.3)}
.bk-card h3{font-family:'Montserrat',sans-serif;font-size:26px;color:var(--text);margin:0 0 6px;font-weight:300;letter-spacing:.05em}
.bk-sub{font-size:11px;color:var(--grey-400);letter-spacing:.14em;text-transform:uppercase;margin:0 0 24px}
.bk-x{position:absolute;top:14px;right:18px;color:var(--grey-400);font-size:26px;text-decoration:none;line-height:1}
.bk-x:hover{color:var(--text)}
.bk-row{margin-bottom:20px}
.bk-row label{display:block;font-size:11px;color:var(--grey-400);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.bk-card input{width:100%;padding:13px;border:1px solid var(--grey-100);background:var(--surface);color:var(--text);font-family:'Montserrat',sans-serif;font-weight:300;font-size:15px;border-radius:2px;box-sizing:border-box}
.bk-card input:focus{outline:none;border-color:var(--grey-400);background:#fff}
.bk-slots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;min-height:44px}
.bk-pill{padding:10px 14px;background:#fff;border:1px solid var(--grey-100);color:var(--text);font-family:'Montserrat',sans-serif;font-size:13px;text-decoration:none;border-radius:2px;transition:background .2s,border-color .2s}
.bk-pill:hover{background:var(--surface)}
.bk-pill.on{background:var(--grey-700);color:#fff;border-color:var(--grey-700)}
.bk-loading{display:block;width:100%;text-align:center;color:var(--grey-400);font-style:normal;padding:16px}
.bk-form input{margin-bottom:10px}
#bkGo{display:block;width:100%;padding:15px;background:var(--grey-700);color:#fff;border:none;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:2px;margin-top:8px;transition:background .25s}
#bkGo:hover{background:var(--text)}
.bk-msg{margin-top:14px;font-size:13px;color:var(--text);text-align:center;min-height:18px}

/* ---------- Showcase image grid ---------- */
.showcase{padding:var(--pad-section) 0}
.imgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.imgcard{display:block;text-decoration:none;color:var(--text)}
.imgcard img{width:100%;height:280px;object-fit:cover;border-radius:2px;display:block;filter:grayscale(1) contrast(.96);transition:filter .4s var(--ease)}
.imgcard:hover img{filter:grayscale(.7) contrast(1)}
.imgcard h4{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:300;letter-spacing:.05em;margin:16px 0 0;text-align:center}

@media(max-width:768px){
  .cards,.imgrid{grid-template-columns:1fr;gap:18px}
  .card{padding:36px 26px}
  .showcase{padding:var(--pad-section-mob) 0}
}

/* ===== Work With Me: card 4 inline enquire form ===== */
.wwm-form{margin-top:22px;text-align:left;display:grid;gap:12px}
.wwm-form input,.wwm-form textarea{width:100%;padding:12px 14px;border:1px solid var(--grey-100);border-radius:2px;background:var(--surface);font-family:'Montserrat',sans-serif;font-size:14px;color:var(--text);font-weight:300;transition:border-color .2s,background .2s}
.wwm-form input:focus,.wwm-form textarea:focus{outline:none;border-color:var(--grey-400);background:#fff}
.wwm-form textarea{resize:vertical}
.wwm-form .bk-btn{margin-top:4px;border:none;cursor:pointer}
.wwm-status{font-size:12px;color:var(--grey-700);letter-spacing:.04em;margin:2px 0 0;min-height:14px}
.wwm-card{text-align:center}

/* ===== Bottom tagline band (moved from hero — Robyn edits) ===== */
.tagline-s{background:var(--surface);padding:clamp(56px,8vw,96px) 32px;text-align:center}
.tagline-copy{font-family:'Montserrat',sans-serif;font-weight:300;font-size:clamp(22px,3.4vw,34px);letter-spacing:.05em;color:var(--text);margin:0;max-width:24ch;margin-left:auto;margin-right:auto;line-height:1.4}
.tagline-copy b{font-weight:500;letter-spacing:.08em}