:root {
  --primary: #0f766e;
  --secondary: #2563eb;
  --accent: #f59e0b;
  --background: #f8fafc;
  --text: #0f172a;
  --button-radius: 999px;
  --card-radius: 24px;
  --section-padding-top: 72px;
  --section-padding-bottom: 72px;
}
body { background: var(--background); color: var(--text); }
.section { padding-top: var(--section-padding-top); padding-bottom: var(--section-padding-bottom); }
.btn, button.btn { border-radius: var(--button-radius); }
.card, .admin-section-card, .entity-card, .cms-setting-card, .content-block-card { border-radius: var(--card-radius); }
.btn-primary, .btn.primary, button.primary { background: var(--primary); border-color: var(--primary); }
.eyebrow, .pill, .badge { color: var(--primary); }

:root {
  --bg: #09111f;
  --surface-2: #f7f9fc;
  --text: #0e172a;
  --muted: #61708a;
  --brand: #6d5efc;
  --brand-2: #23c5ff;
  --accent: #0fba81;
  --shadow: 0 20px 60px rgba(15, 23, 42, 0.16);
  --radius-xl: 28px;
  --container: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: #f7f9fc; }
a { color: inherit; text-decoration: none; }
.hidden { display:none !important; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: rgba(7, 12, 22, 0.58); border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 14px; color: #fff; }
.brand-badge { width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; box-shadow: 0 12px 30px rgba(109,94,252,0.35); }
.brand-logo { width: 46px; height: 46px; border-radius: 16px; object-fit: cover; box-shadow: 0 12px 30px rgba(15,23,42,0.18); }
.brand small { display:block; color: rgba(255,255,255,0.7); margin-top: 2px; }
nav { display:flex; gap: 22px; align-items:center; }
nav a { color: rgba(255,255,255,0.84); font-size: 0.95rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:none; border-radius: 999px; font-weight:700; cursor:pointer; transition: 0.22s ease; padding: 14px 22px; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; box-shadow: 0 14px 34px rgba(76, 81, 255, 0.28); }
.btn-secondary { background: rgba(255,255,255,0.08); color:#fff; border: 1px solid rgba(255,255,255,0.12); }
.btn-dark { background: #101827; color:#fff; }
.btn-light { background: #fff; color:#101827; border: 1px solid #d7dfec; }
.small-btn { padding:8px 12px; border-radius:12px; font-size:0.85rem; }
.hero { padding: 42px 0 72px; color:#fff; position: relative; overflow: hidden; background:
  radial-gradient(circle at top left, rgba(109,94,252,0.28), transparent 30%),
  radial-gradient(circle at top right, rgba(35,197,255,0.18), transparent 26%),
  linear-gradient(180deg, #08101e 0%, #0e1930 100%);
}
.hero-grid { display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: stretch; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.88); font-size: 0.88rem; font-weight: 600; }
h1 { font-size: clamp(2.7rem, 5vw, 4.5rem); line-height: 1.04; margin: 20px 0 18px; letter-spacing: -0.04em; }
.lead { font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 62ch; }
.hero-actions { display:flex; gap:14px; flex-wrap: wrap; margin-top: 28px; }
.hero-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.stat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: 18px; }
.stat strong { display:block; font-size: 1.5rem; margin-bottom: 6px; }
.glass { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(18px); }
.hero-panel { padding: 26px; border-radius: var(--radius-xl); display:flex; flex-direction:column; justify-content:space-between; }
.hero-image { width: 100%; max-height: 180px; object-fit: cover; border-radius: 20px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.12); }
.panel-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.badge { display:inline-flex; padding: 8px 12px; border-radius:999px; font-size: 0.8rem; background: rgba(255,255,255,0.1); }
.price-chip { background: rgba(15,186,129,0.14); color: #d3ffee; border: 1px solid rgba(15,186,129,0.22); }
.service-stack { display:grid; gap:12px; margin-top: 22px; }
.service-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-radius: 18px; background: rgba(255,255,255,0.06); }
.service-row span:last-child { color: rgba(255,255,255,0.7); font-weight:600; }
.section { padding: 80px 0; position: relative; z-index: 1; }
.first-section { background: #f7f9fc; }
.section-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.section-head.left { margin-left: 0; text-align:left; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); line-height:1.08; margin: 12px 0 14px; letter-spacing: -0.035em; }
.section-head p { color: var(--muted); line-height: 1.72; }
.pill { display:inline-flex; padding:8px 12px; border-radius:999px; background: rgba(109,94,252,0.08); color: #4e46e5; font-weight:700; font-size: 0.82rem; }
.cards { display:grid; gap: 18px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card { background: rgba(255,255,255,0.84); border: 1px solid rgba(148,163,184,0.18); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.card h3 { margin: 14px 0 10px; font-size: 1.2rem; }
.card p { color: var(--muted); line-height: 1.72; margin: 0; }
.icon-wrap { width: 54px; height:54px; border-radius: 18px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(109,94,252,0.12), rgba(35,197,255,0.12)); color:#3d36c7; }
.icon-wrap svg { width: 28px; height:28px; }
.banner { margin-top: 22px; background: linear-gradient(135deg, #fff, #eef5ff); border-radius: 28px; border:1px solid rgba(148,163,184,0.16); box-shadow: var(--shadow); padding: 28px; display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items:center; }
.banner ul { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.8; }
.grid-two { display:grid; grid-template-columns: 1.08fr 0.92fr; gap: 28px; align-items:start; }
.form-shell { background: #fff; border-radius: 30px; padding: 28px; box-shadow: 0 24px 60px rgba(14,23,42,0.12); border:1px solid rgba(148,163,184,0.16); }
.form-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom: 18px; }
.tiny { font-size: 0.86rem; color: var(--muted); }
.grid-form { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: 1 / -1; }
label { display:block; font-size: 0.93rem; font-weight:600; color:#22304c; }
input, select, textarea { width:100%; margin-top:8px; border:1px solid #d7dfec; background:#f9fbff; border-radius:16px; padding: 14px 15px; font: inherit; color:#101827; outline:none; transition: 0.2s ease; }
input:focus, select:focus, textarea:focus { border-color: rgba(109,94,252,0.52); box-shadow: 0 0 0 4px rgba(109,94,252,0.12); background:#fff; }
textarea { resize: vertical; }
.price-box { display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 18px 20px; background: linear-gradient(135deg, #101827, #1f2f50); color:#fff; border-radius: 22px; margin: 20px 0; }
.price-box strong { font-size: 1.8rem; }
.full { width:100%; }
.alert { margin: 0 0 16px; border-radius: 18px; padding: 16px 18px; font-weight: 600; }
.success { background: rgba(15,186,129,0.12); color:#0d7b57; border:1px solid rgba(15,186,129,0.18); }
.error { background: rgba(239,68,68,0.1); color:#b91c1c; border:1px solid rgba(239,68,68,0.18); }
.payment-area,.note-box,.upload-card { margin-top: 16px; padding: 18px; border-radius: 18px; background: #f2f7ff; border:1px dashed #c7d8ff; }
.rebook-banner { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(109,94,252,0.08), rgba(35,197,255,0.08)); border: 1px solid rgba(109,94,252,0.14); }
.side-panel { background: linear-gradient(180deg, #fff, #f7fbff); border:1px solid rgba(148,163,184,0.16); border-radius: 30px; box-shadow: var(--shadow); padding: 28px; position: sticky; top: 96px; }
.side-panel h3 { margin-top: 0; font-size: 1.2rem; }
.side-panel ol, .side-panel ul { color: var(--muted); line-height: 1.8; padding-left: 20px; }
.mini-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.mini-card { padding: 16px; border-radius: 18px; background: #f8fbff; border:1px solid rgba(148,163,184,0.16); }
.feature-strip { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.feature-strip .mini-card strong { display:block; margin-bottom: 6px; }
.provider-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.choice-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.choice { position: relative; border: 1px solid #dde5f2; border-radius: 18px; padding: 14px 14px 14px 44px; background: #fbfcff; transition: 0.2s ease; cursor: pointer; min-height: 90px; }
.choice:hover { border-color: rgba(109,94,252,0.38); box-shadow: 0 8px 24px rgba(109,94,252,0.08); }
.choice input { position:absolute; left: 14px; top: 16px; width: 18px; height:18px; margin:0; accent-color: var(--brand); }
.choice strong { display:block; margin-bottom: 6px; }
.choice span { color: var(--muted); font-size: 0.9rem; line-height:1.5; }
.provider-highlights { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.provider-highlights .mini-card { background: linear-gradient(180deg, #fff, #f6f9ff); }
.faq-list { display:grid; gap:14px; }
.faq-item { background: rgba(255,255,255,0.84); border: 1px solid rgba(148,163,184,0.18); border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow); }
.faq-item strong { display:block; margin-bottom:8px; font-size:1.05rem; }
.quote-mark { font-size: 2rem; line-height: 1; color: #6d5efc; opacity: 0.35; margin-bottom: 10px; }

/* Admin */
.admin-shell { min-height: 100vh; background: #f7f9fc; }
.admin-top { background: linear-gradient(180deg, #08101e 0%, #0e1930 100%); color: #fff; padding: 36px 0 120px; }
.admin-wrap { margin-top: -86px; }
.admin-grid { display:grid; grid-template-columns: 280px 1fr; gap: 22px; align-items:start; }
.admin-sidebar, .admin-panel { background:#fff; border:1px solid rgba(148,163,184,0.16); border-radius: 26px; box-shadow: var(--shadow); }
.admin-sidebar { padding: 20px; position: sticky; top: 98px; }
.admin-menu { display:grid; gap: 10px; margin-top: 18px; }
.admin-menu button { width:100%; text-align:left; border:none; padding: 14px 16px; border-radius: 16px; background:#f7f9fc; font: inherit; font-weight:700; cursor:pointer; }
.admin-menu button.active { background: linear-gradient(135deg, rgba(109,94,252,0.12), rgba(35,197,255,0.12)); color:#3028bd; }
.admin-panel { padding: 22px; }
.admin-card-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.metric-card { background:#f8fbff; border:1px solid rgba(148,163,184,0.16); border-radius: 20px; padding: 16px; }
.metric-card strong { display:block; font-size: 1.6rem; margin-top: 8px; }
.admin-toolbar,.service-actions-row,.export-actions { display:flex; justify-content:space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.admin-toolbar input, .admin-toolbar select { width:auto; min-width: 180px; margin-top:0; }
.table-wrap { overflow:auto; border:1px solid rgba(148,163,184,0.16); border-radius: 20px; }
table { width:100%; border-collapse: collapse; min-width: 980px; }
th, td { padding: 14px 12px; border-bottom:1px solid rgba(148,163,184,0.16); text-align:left; vertical-align: top; font-size: 0.94rem; }
th { background:#f8fbff; color:#384860; position: sticky; top:0; }
.status-chip,.payout-chip { display:inline-flex; padding: 6px 10px; border-radius:999px; font-size: 0.8rem; font-weight:700; background:#eef2ff; color:#4338ca; }
.payout-chip { background: rgba(15,186,129,0.12); color: #0d7b57; }
.login-card { max-width: 430px; margin: 0 auto; background:#fff; border:1px solid rgba(148,163,184,0.16); border-radius: 26px; box-shadow: var(--shadow); padding: 28px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-userbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding:14px 16px; background:#f8fbff; border:1px solid rgba(148,163,184,0.16); border-radius:18px; }
.content-value-textarea,.service-lines-textarea,.service-json-textarea { min-width: 320px; min-height: 100px; }
.order-input { width: 90px !important; }
.toggle-row { display:flex; align-items:center; gap:10px; }
.toggle-row input { margin-top:0; width:auto; }
.helper-text,.cta-link-preview { display:block; margin-top:8px; color:#61708a; font-size:0.82rem; line-height:1.5; }
.subservice-chip { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(148,163,184,0.16); border-radius:12px; background:#f8fbff; margin-bottom:8px; }
.subservice-chip input { margin-top:0; }
.footer { padding: 30px 0 48px; color: #60708a; }

@media (max-width: 1100px) {
  .hero-grid, .grid-two, .banner, .admin-grid { grid-template-columns: 1fr; }
  .cards.four { grid-template-columns: repeat(2, 1fr); }
  .cards.three, .feature-strip, .provider-highlights, .admin-card-grid { grid-template-columns: 1fr; }
  .side-panel, .admin-sidebar { position: static; }
}
@media (max-width: 720px) {
  nav { display:none; }
  .hero-stats, .grid-form, .cards.four, .cards.three, .choice-grid, .mini-grid, .provider-grid, .auth-row { grid-template-columns: 1fr; }
  .hero { padding-top: 22px; }
  .form-shell, .side-panel, .banner, .card, .admin-sidebar, .admin-panel, .login-card { border-radius: 24px; }
  .container { padding: 0 16px; }
  h1 { font-size: 2.5rem; }
  .brand small { display:none; }
}


/* v21.1 additions */
.auth-strip,.account-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.auth-pill{padding:10px 14px;border-radius:999px;background:#eef5ff;border:1px solid #d6e4ff;color:#24406a;font-weight:600}
.modal{position:fixed;inset:0;background:rgba(9,17,31,.6);display:grid;place-items:center;padding:24px;z-index:60}
.modal-card{width:min(520px,100%);background:#fff;border-radius:28px;padding:24px;box-shadow:0 30px 80px rgba(14,23,42,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.icon-btn{width:40px;height:40px;border:none;border-radius:14px;background:#eff4fb;font-size:1.4rem;cursor:pointer}
.compact-tabs,.admin-menu{display:flex;gap:10px;flex-wrap:wrap}
.compact-tabs .tab,.admin-menu button{border:none;background:#eef3fb;padding:12px 14px;border-radius:14px;font-weight:700;cursor:pointer}
.compact-tabs .tab.active,.admin-menu button.active{background:#101827;color:#fff}
.auth-form{display:grid;gap:14px}
.account-grid{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}
.account-sidebar,.account-main-card{background:#fff;border:1px solid rgba(148,163,184,0.16);border-radius:28px;box-shadow:var(--shadow);padding:24px}
.account-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.summary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.summary-item{background:#f8fbff;border:1px solid #dde7f5;border-radius:20px;padding:18px}
.right-text{text-align:right}
.account-list,.subscription-list,.history-list{display:grid;gap:14px}
.booking-card,.subscription-card{background:#f9fbff;border:1px solid #dbe6f5;border-radius:22px;padding:18px}
.admin-layout-v21{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
.admin-sidebar{background:#101827;color:#fff;border-radius:28px;padding:24px;position:sticky;top:92px}
.admin-sidebar .btn{margin-top:16px}
.admin-panel{display:grid;gap:18px}
.admin-section-card{background:#fff;border:1px solid rgba(148,163,184,0.16);border-radius:28px;box-shadow:var(--shadow);padding:22px}
.admin-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.metric-card{background:#fff;border:1px solid rgba(148,163,184,0.16);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.metric-card strong{font-size:2rem;display:block;margin-top:8px}
.table-wrap{overflow:auto;background:#fff;border-radius:22px;border:1px solid #dde7f5}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:14px;border-bottom:1px solid #edf2f9;vertical-align:top;text-align:left}
.note-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap}
.secondary-nav{display:flex;gap:12px;flex-wrap:wrap}
.secondary-nav a{padding:10px 14px;border-radius:999px;background:#eef3fb;font-weight:700}
.theme-preview{padding:18px;border-radius:20px;color:#fff}
.hidden-mobile{display:block}
@media (max-width: 980px){.hero-grid,.grid-two,.banner,.account-grid,.admin-layout-v21,.booking-layout{grid-template-columns:1fr}.cards.four,.cards.three,.feature-strip,.hero-stats,.summary-strip,.provider-highlights,.account-stat-grid,.kpi-grid{grid-template-columns:1fr}.nav,.desktop-nav{flex-wrap:wrap}.desktop-nav{display:none}.side-panel,.admin-sidebar{position:static}}


/* v21.2 additions */
.payment-method-meta{margin-top:12px;padding:14px 16px;border-radius:18px;background:#f8fbff;border:1px solid #d8e4f6}
.payment-method-meta strong{display:block;margin-bottom:6px}
.booking-card .inline-actions,.subscription-card .inline-actions{margin-top:12px}
.plan-features{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
.subtle-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef3fb;border-radius:10px;padding:2px 8px}


/* v21.5 polish */
.wide-admin-table{overflow-x:auto}
.wide-admin-table table{min-width:1320px}
.wide-admin-table input[type="text"],.wide-admin-table input[type="number"],.wide-admin-table input[type="url"],.wide-admin-table select,.wide-admin-table textarea{width:100%;min-width:0;box-sizing:border-box}
.wide-admin-table textarea{min-height:110px;resize:vertical}
.wide-admin-table td{min-width:170px}
.wide-admin-table td:nth-child(5){min-width:280px}
.subservices-wrap{display:grid;gap:12px;min-width:260px}
.subservice-chip{display:grid;grid-template-columns:minmax(0,1.5fr) 110px auto;gap:10px;align-items:start;padding:12px;border:1px solid #dbe6f5;border-radius:18px;background:#f8fbff}
.subservice-chip input{min-width:0}
.helper-text{display:block;margin-top:8px;color:var(--muted);font-size:.86rem;line-height:1.45}
.toggle-row{display:flex;align-items:center;gap:10px;font-size:.94rem}
.order-stack{display:grid;gap:10px}
.admin-card-list{display:grid;gap:16px}
.content-block-card{background:#fff;border:1px solid #dde7f5;border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.content-block-grid{display:grid;gap:18px}
.content-block{display:grid;grid-template-columns:1.2fr minmax(260px,.8fr);gap:20px;align-items:center;background:#fff;border:1px solid rgba(148,163,184,.16);border-radius:28px;padding:24px;box-shadow:var(--shadow)}
.content-block.no-image{grid-template-columns:1fr}
.content-block-media img{width:100%;height:100%;max-height:320px;object-fit:cover;border-radius:22px;border:1px solid #dde7f5}
.content-block .content-html h2,.content-block .content-html h3,.content-block .content-html h4{margin:0 0 10px}
.content-block .content-html p{margin:0 0 12px;color:var(--muted);line-height:1.7}
.content-block .content-html ul{margin:0 0 10px 18px;color:var(--muted);line-height:1.7}
.format-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.format-toolbar button{padding:8px 10px;border:1px solid #dbe6f5;background:#fff;border-radius:12px;font-weight:700;cursor:pointer}
.html-preview{margin-top:10px;padding:12px;border:1px dashed #cbd8ea;border-radius:14px;background:#fbfdff}
.hidden{display:none!important}
@media (max-width:980px){.content-block{grid-template-columns:1fr}.subservice-chip{grid-template-columns:1fr}.wide-admin-table table{min-width:1080px}}


/* final v22 admin/entity polish */
.entity-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.entity-card{background:#fbfdff;border:1px solid #dde7f5;border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.entity-card h4{margin:0 0 6px}
.entity-card textarea{min-height:110px;resize:vertical}
.entity-card .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.entity-card .field-grid.single{grid-template-columns:1fr}
.entity-card .field-grid label,.entity-card > label{display:grid;gap:6px;font-weight:600}
.entity-card .meta-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.entity-card .chip-row{display:flex;gap:8px;flex-wrap:wrap}
.entity-card .save-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width:980px){.entity-card .field-grid{grid-template-columns:1fr}}


.nav-auth{margin-right:12px;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}.topbar .nav{align-items:center}


/* v32 supabase-driven header and typography */
:root{
  --font-family: Inter, system-ui, sans-serif;
  --header-nav-gap: 24px;
  --header-height: 84px;
  --header-badge-size: 52px;
  --header-logo-size: 52px;
  --header-auth-max-width: 220px;
  --brand-max-width: 340px;
  --header-subtitle-max-width: 230px;
  --header-font-size: 16px;
}
body{font-family:var(--font-family);}
.topbar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(30,41,59,.92));backdrop-filter:blur(14px);border-bottom:1px solid rgba(148,163,184,.18)}
.topbar .nav{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:14px;min-width:0;max-width:var(--brand-max-width);flex:0 1 var(--brand-max-width)}
.brand > div:last-child{min-width:0}
.brand strong{display:block;font-size:1rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f8fafc}
.brand small{display:block;max-width:var(--header-subtitle-max-width);line-height:1.2;color:rgba(226,232,240,.9)}
.brand-badge{width:var(--header-badge-size);height:var(--header-badge-size);border-radius:18px;display:grid;place-items:center;font-weight:800;font-size:1.15rem;flex:0 0 var(--header-badge-size)}
.brand-logo{width:var(--header-logo-size);height:var(--header-logo-size);object-fit:cover;border-radius:18px;border:1px solid rgba(148,163,184,.2);background:#fff;flex:0 0 var(--header-logo-size)}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:var(--header-nav-gap);flex:1 1 auto;min-width:0;white-space:nowrap}
.desktop-nav a{font-size:var(--header-font-size);font-weight:600;color:#e2e8f0}
.inline-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 1 auto;min-width:0;flex-wrap:nowrap}
.auth-pill.nav-auth{margin-right:0;max-width:var(--header-auth-max-width);padding:8px 14px;font-size:.95rem;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-compact .btn{padding:11px 16px;border-radius:16px}
.header-compact .btn-primary,.header-compact .btn-secondary{box-shadow:none}
@media (max-width: 1260px){
  .topbar .nav{gap:12px}
  .desktop-nav{gap:18px}
  .brand{max-width:300px}
  .auth-pill.nav-auth{max-width:180px}
}
@media (max-width: 1100px){
  .brand small{display:none}
  .desktop-nav{gap:14px}
}


.brand img.brand-logo.hidden + .brand-badge{display:grid}.brand img.brand-logo:not(.hidden) + .brand-badge{display:none}

.topbar .btn-light{color:#e2e8f0;border-color:rgba(226,232,240,.2);background:rgba(255,255,255,.06)}
.topbar .auth-pill{background:rgba(255,255,255,.92);color:#1e3a5f}
@media (max-width: 980px){.topbar .nav{flex-wrap:wrap;align-items:flex-start}.desktop-nav{order:3;width:100%;justify-content:flex-start;overflow:auto;padding-bottom:6px}.inline-actions{width:100%;justify-content:space-between}.brand{max-width:none;flex:1 1 100%}.hero-grid,.booking-layout,.grid-two{grid-template-columns:1fr}.cards.three,.cards.four,.hero-stats{grid-template-columns:1fr}.service-row{font-size:.95rem}}

/* service catalog editor cleanup */
.subservice-chip{grid-template-columns:minmax(220px,2fr) 140px auto auto !important;}
.subservice-chip input[type="text"]{min-width:220px;}
.site-header,.header-shell,header{background:linear-gradient(180deg,#1f2940,#20293f) !important;}
.brand,.brand *{color:#f8fbff !important;}


.phone-field{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}.phone-field select,.phone-field input{width:100%}


/* clean rebuild overrides */
.container{max-width:1320px;}
.hero-grid{grid-template-columns:1.15fr .85fr;}
.admin-wrap{max-width:1600px;margin:0 auto;padding:0 24px;}
.admin-layout-v21{grid-template-columns:260px 1fr;gap:24px;}
.admin-panel{display:grid;gap:20px;}
.admin-section-card{padding:20px 24px;}
.admin-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.table-wrap{overflow-x:auto;}
.table-wrap table{min-width:1000px;}
@media (max-width:980px){.admin-wrap{padding:0 16px;}.admin-layout-v21,.hero-grid{grid-template-columns:1fr;}}

.phone-field{display:grid;grid-template-columns:120px 1fr;gap:10px}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.choice-pill{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #d7dfec;border-radius:16px;background:#fff}
.partner-form .partner-section{background:#fff;border:1px solid #d7dfec;border-radius:22px;padding:22px;margin-bottom:18px}
.partner-section-head{margin-bottom:16px}
.partner-section-head h3{margin:0 0 6px}
.partner-section-head p{margin:0;color:var(--muted)}
.offering-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr .8fr auto;gap:10px;align-items:center}
.offering-grid-head{font-size:.86rem;font-weight:700;color:var(--muted);padding:0 4px 10px}
.partner-matrix{margin-top:12px;border:1px solid #d7dfec;border-radius:18px;padding:16px;background:#fbfcfe}
.partner-matrix-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.footer-col strong{display:block;margin-bottom:8px}
.footer-link-list{display:grid;gap:8px}
.footer-link-list a,.footer-link-list span{color:var(--muted)}
.alert.error,.alert.success{padding:14px 16px;border-radius:14px}
.alert.error{background:#fff1f2;color:#991b1b;border:1px solid #fecdd3}
.alert.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
@media (max-width: 900px){
  .offering-grid{grid-template-columns:1fr}
  .partner-form .field-grid.two,.partner-form .field-grid.three{grid-template-columns:1fr}
}

/* Dynamic homepage sections managed from Supabase/Admin */
.dynamic-homepage-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.homepage-dynamic-section {
  padding: var(--homepage-section-padding-y, 56px) 24px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.homepage-section-inner {
  max-width: var(--homepage-section-max-width, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.homepage-layout-split .homepage-section-inner,
.homepage-layout-image-left .homepage-section-inner,
.homepage-layout-video-left .homepage-section-inner,
.homepage-layout-image-right .homepage-section-inner,
.homepage-layout-video-right .homepage-section-inner {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
}
.homepage-layout-image-left .homepage-section-copy,
.homepage-layout-video-left .homepage-section-copy {
  order: 2;
}
.homepage-layout-image-left .homepage-media,
.homepage-layout-video-left .homepage-media {
  order: 1;
}
.homepage-section-copy h2 {
  margin: 10px 0 12px;
  font-size: clamp(1.9rem, 3vw, 3rem);
}
.small-lead {
  font-size: 1.02rem;
  max-width: 720px;
}
.homepage-media {
  display: grid;
  gap: 12px;
}
.homepage-media-slider {
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.homepage-media-item {
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  scroll-snap-align: start;
}
.homepage-media-item img,
.homepage-media-item video,
.homepage-media-item iframe {
  display: block;
  width: 100%;
  min-height: 240px;
  border: 0;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
@media (max-width: 860px) {
  .homepage-layout-split .homepage-section-inner,
  .homepage-layout-image-left .homepage-section-inner,
  .homepage-layout-video-left .homepage-section-inner,
  .homepage-layout-image-right .homepage-section-inner,
  .homepage-layout-video-right .homepage-section-inner {
    grid-template-columns: 1fr;
  }
  .homepage-layout-image-left .homepage-section-copy,
  .homepage-layout-video-left .homepage-section-copy,
  .homepage-layout-image-left .homepage-media,
  .homepage-layout-video-left .homepage-media {
    order: initial;
  }
}

/* Theme designer build */
:root{
  --surface: #ffffff;
  --font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container-width: 1180px;
  --container: var(--container-width);
  --radius-xl: var(--card-radius);
}
body{font-family:var(--font-family);background:var(--background);color:var(--text)}
.container{max-width:var(--container-width)}
.admin-section-card,.metric-card,.account-sidebar,.account-main-card,.booking-card,.subscription-card,.cms-setting-card,.content-block-card{background:var(--surface);border-radius:var(--card-radius);box-shadow:var(--shadow)}
.theme-designer-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:22px;align-items:start}
.theme-editor-list{display:grid;gap:14px}
.theme-editor-group{border:1px solid #dbe6f5;border-radius:22px;background:#fff;padding:14px}
.theme-editor-group summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.theme-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.theme-field{display:grid;gap:7px;font-weight:700}
.theme-field input{width:100%;min-height:42px}
.theme-field small{font-weight:500;color:var(--muted)}
.theme-live-preview{position:sticky;top:96px;padding:24px;border-radius:var(--preview-card-radius,28px);background:linear-gradient(135deg,var(--preview-primary,#0f766e),var(--preview-secondary,#2563eb));color:#fff;box-shadow:var(--shadow)}
.theme-live-preview h3{font-size:1.9rem;margin:14px 0 8px;color:#fff}
.theme-live-preview p{color:rgba(255,255,255,.82);line-height:1.6}
.theme-live-preview .btn{background:var(--preview-accent,#f59e0b);border-color:var(--preview-accent,#f59e0b);border-radius:var(--preview-button-radius,999px);color:#111827}
.preview-pill{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:800}
.preview-card{margin-top:18px;padding:16px 18px;border-radius:calc(var(--preview-card-radius,28px) * .75);background:rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:16px}
@media (max-width: 980px){.theme-designer-grid,.theme-editor-grid{grid-template-columns:1fr}.theme-live-preview{position:static}}


/* Final stabilization: restore full width layouts and consistent legal pages */
:root {
  --container-width: 1320px;
  --container: 1320px;
}
.container {
  max-width: min(var(--container-width, 1320px), calc(100vw - 48px));
  width: 100%;
}
.admin-wrap {
  max-width: min(1680px, calc(100vw - 48px));
  width: 100%;
}
.legal-section { padding-top: 72px; padding-bottom: 72px; }
.legal-container { max-width: min(1180px, calc(100vw - 48px)); }
.legal-head { margin-bottom: 22px; }
.legal-head h1 { color: var(--text); margin-top: 12px; }
.legal-content {
  width: 100%;
  max-width: none;
  padding: 34px;
  line-height: 1.82;
  font-size: 1.06rem;
  overflow-wrap: anywhere;
}
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4 { line-height: 1.2; margin: 1.5em 0 .55em; color: var(--text); }
.legal-content h1:first-child,
.legal-content h2:first-child,
.legal-content h3:first-child { margin-top: 0; }
.legal-content p { margin: 0 0 1em; color: var(--text); }
.legal-content ul,
.legal-content ol { margin: .6em 0 1.1em 1.4em; padding-left: 1.2em; }
.legal-content li { margin: .35em 0; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.legal-content th,
.legal-content td { border: 1px solid #dbe6f5; padding: 10px 12px; text-align: left; }
.footer { padding: 34px 0 46px; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1.4fr .9fr; gap: 28px; align-items: start; }
.footer-col p { margin: 8px 0 14px; color: var(--muted); line-height: 1.65; }
.footer-contact { font-size: 1rem; line-height: 1.8; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 28px; }
.footer-links a,
.footer-socials a { color: var(--muted); font-weight: 600; }
.footer-social-wrap { justify-self: end; text-align: right; }
.footer-socials { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
@media (max-width: 900px) {
  .container, .admin-wrap, .legal-container { max-width: calc(100vw - 32px); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-social-wrap { justify-self: start; text-align: left; }
  .footer-socials { justify-content: flex-start; }
  .legal-content { padding: 24px; }
}


/* === 20260616 global width + admin media builder usability fixes === */
:root {
  --container-width: 1480px;
  --container: 1480px;
  --page-gutter: 32px;
}
.container {
  max-width: min(var(--container-width, 1480px), calc(100vw - (var(--page-gutter, 32px) * 2))) !important;
  width: 100%;
}
.admin-wrap {
  max-width: min(1760px, calc(100vw - 48px)) !important;
  width: 100%;
}
.legal-container {
  max-width: min(1320px, calc(100vw - 64px)) !important;
  width: 100%;
}
.hero-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, .8fr);
  gap: clamp(32px, 5vw, 72px);
}
@media (min-width: 1500px) {
  .hero h1 { font-size: clamp(54px, 5vw, 92px); }
  .hero-card { max-width: 610px; margin-left: auto; }
}
@media (max-width: 980px) {
  :root { --page-gutter: 16px; }
  .container, .admin-wrap, .legal-container { max-width: calc(100vw - 32px) !important; }
  .hero-grid { grid-template-columns: 1fr; }
}
.homepage-builder-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:start; }
.homepage-section-editor, .media-manager-card { background:#fff; border:1px solid #dbe6f5; border-radius:24px; padding:18px; box-shadow:0 18px 55px rgba(15,23,42,.06); }
.homepage-section-row { border:1px solid #dbe6f5; border-radius:20px; padding:16px; margin-bottom:14px; background:#fbfdff; }
.homepage-section-row .row-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.homepage-builder-grid label { display:grid; gap:6px; font-weight:700; color:#0b1b3a; }
.homepage-builder-grid input, .homepage-builder-grid textarea, .homepage-builder-grid select { width:100%; }
.homepage-form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.homepage-form-grid .span-2 { grid-column:1 / -1; }
.media-asset-list { display:grid; gap:10px; margin-top:14px; }
.media-asset-row { display:grid; grid-template-columns: 76px 1fr auto; gap:12px; align-items:center; padding:10px; border:1px solid #dbe6f5; border-radius:16px; background:#fff; }
.media-thumb { width:76px; height:54px; border-radius:12px; object-fit:cover; background:#eef2f7; display:block; }
.media-thumb-placeholder { width:76px; height:54px; border-radius:12px; background:#eef2f7; display:grid; place-items:center; font-size:12px; color:#64748b; }
@media (max-width: 1100px) { .homepage-builder-grid, .homepage-form-grid { grid-template-columns:1fr; } .homepage-form-grid .span-2 { grid-column:auto; } }


/* v33 database-driven layout, spacing, width and typography overrides */
:root{
  --container-width: var(--container, 1440px);
  --admin-container-width: 1600px;
  --account-container-width: 1440px;
  --legal-container-width: 1180px;
  --content-max-width: 1440px;
  --page-gutter: 48px;
  --grid-gap: 32px;
  --hero-gap: 56px;
  --page-top-padding: 72px;
  --page-bottom-padding: 72px;
  --base-font-size: 16px;
  --heading-scale: 1;
  --line-height: 1.65;
}
html{font-size:var(--base-font-size);}
body{line-height:var(--line-height);}
.container,
.section-inner,
.page-shell,
.cms-shell,
.main-shell,
.content-shell{
  width:min(calc(100% - var(--page-gutter)), var(--container-width));
  max-width:var(--container-width);
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}
section,.section,.page-section{
  padding-top:var(--section-padding-top);
  padding-bottom:var(--section-padding-bottom);
}
main,.main-content{
  padding-top:var(--page-top-padding);
  padding-bottom:var(--page-bottom-padding);
}
.topbar .container,.topbar .nav{
  width:min(calc(100% - var(--page-gutter)), var(--container-width));
  max-width:var(--container-width);
  margin-left:auto;
  margin-right:auto;
}
.hero-grid{gap:var(--hero-gap);}
.grid-two,.cards,.hero-stats,.feature-strip,.provider-highlights,.account-stat-grid,.kpi-grid,.admin-panel{gap:var(--grid-gap);}
.admin-wrap,.admin-shell,.admin-main,.admin-container{
  width:min(calc(100% - var(--page-gutter)), var(--admin-container-width));
  max-width:var(--admin-container-width);
  margin-left:auto;
  margin-right:auto;
}
.account-shell,.account-container,.account-page .container{
  width:min(calc(100% - var(--page-gutter)), var(--account-container-width));
  max-width:var(--account-container-width);
  margin-left:auto;
  margin-right:auto;
}
.legal-shell,.legal-page-shell,.legal-content,.legal-page .container{
  width:min(calc(100% - var(--page-gutter)), var(--legal-container-width));
  max-width:var(--legal-container-width);
  margin-left:auto;
  margin-right:auto;
}
h1,.hero h1{font-size:calc(var(--heading-scale) * clamp(3rem, 7vw, 5.5rem));}
h2{font-size:calc(var(--heading-scale) * clamp(2rem, 4vw, 3.2rem));}
.content-html,.legal-body,.legal-rich-content{max-width:var(--content-max-width);}
@media (max-width: 980px){
  :root{--page-gutter:24px;}
  .container,.section-inner,.page-shell,.admin-wrap,.account-shell,.legal-shell{width:min(calc(100% - var(--page-gutter)), var(--container-width));}
}


/* 20260618 database-driven final admin/theme/layout additions */
:root {
  --home-header-gap: 0px;
  --hero-padding-top: var(--section-padding-top, 72px);
  --hero-padding-bottom: var(--section-padding-bottom, 72px);
  --service-card-width: 300px;
  --service-card-min-height: 260px;
  --service-grid-columns: 4;
  --consultation-width: 760px;
  --form-gap: 18px;
  --heading-font-family: var(--font-family, Inter, system-ui, sans-serif);
  --nav-font-size: 16px;
  --button-font-size: 16px;
  --input-radius: var(--button-radius, 18px);
  --section-radius: 32px;
  --border-color: #d7dfec;
}
body { font-family: var(--font-family, Inter, system-ui, sans-serif); font-size: var(--base-font-size, 16px); line-height: var(--line-height, 1.65); color: var(--text, #0f172a); background: var(--background, #f8fafc); }
h1,h2,h3,h4,.display-title { font-family: var(--heading-font-family, var(--font-family, Inter, system-ui, sans-serif)); }
.container { width: min(calc(100% - (var(--page-gutter, 48px) * 2)), var(--container-width, 1440px)); max-width: var(--container-width, 1440px); }
.admin-wrap,.admin-panel { max-width: var(--admin-container-width, 1600px); }
.admin-section-card,.entity-card,.metric-card,.cms-page-group,.theme-editor-group,.homepage-section-row,.media-manager-card { border-color: var(--border-color); border-radius: var(--section-radius, 32px); }
input,select,textarea { border-radius: var(--input-radius, 18px); }
.btn { border-radius: var(--button-radius, 999px); font-size: var(--button-font-size, 16px); }
nav, .nav, .admin-menu button { font-size: var(--nav-font-size, 16px); }
.hero, .hero-section { margin-top: var(--home-header-gap, 0px); padding-top: var(--hero-padding-top, 72px); padding-bottom: var(--hero-padding-bottom, 72px); }
.services-grid,.category-grid,.service-cards,.category-cards { gap: var(--grid-gap, 24px); grid-template-columns: repeat(var(--service-grid-columns, 4), minmax(min(var(--service-card-width, 300px), 100%), 1fr)); }
.service-card,.category-card,.service-tile,.category-tile { min-height: var(--service-card-min-height, 260px); }
.consultation-card,.consultation-form-card { max-width: var(--consultation-width, 760px); }
.form-grid,.booking-grid,.homepage-form-grid,.field-grid { gap: var(--form-gap, 18px); }
.metric-xl { font-size: 2rem; font-weight: 900; margin: 8px 0 2px; }
.compact-admin-list { display: grid; gap: 12px; }
.customer-table-card { overflow:auto; border:1px solid var(--border-color); border-radius:24px; background:#fff; }
.customer-table-card table { width:100%; border-collapse: collapse; min-width: 1100px; }
.customer-table-card th,.customer-table-card td { padding:12px; border-bottom:1px solid #e5eaf2; vertical-align: top; text-align:left; }
.customer-table-card input,.customer-table-card select { min-width: 130px; }
.theme-field select { width:100%; }
.theme-live-preview { background: linear-gradient(135deg, var(--preview-primary, #0f766e), var(--preview-secondary, #2563eb)); color:#fff; }
.theme-live-preview .btn-primary { background: var(--preview-accent, #f59e0b); color:#0f172a; border-radius: var(--preview-button-radius, 999px); }
.theme-live-preview .preview-card { border-radius: var(--preview-card-radius, 28px); }

/* Database-driven About page: all content/media comes from Supabase. These rules use theme CSS variables. */
.about-page-shell { background: var(--background, #f8fafc); color: var(--text, #0f172a); }
.about-hero-section { padding-top: var(--about-hero-padding-top, var(--section-padding-top, 72px)); padding-bottom: var(--about-hero-padding-bottom, var(--section-padding-bottom, 72px)); }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, var(--about-hero-copy-width, 1fr)) minmax(280px, var(--about-hero-media-width, 520px)); gap: var(--about-hero-gap, var(--hero-gap, 48px)); align-items: center; }
.about-hero-grid h1 { font-family: var(--heading-font-family, var(--font-family, Inter, sans-serif)); font-size: clamp(2.8rem, 7vw, var(--about-hero-title-size, 5.6rem)); line-height: .95; margin: 18px 0; }
.about-media-card { border-radius: var(--about-media-radius, var(--card-radius, 28px)); background: var(--surface, #fff); min-height: var(--about-hero-media-min-height, 360px); overflow: hidden; box-shadow: var(--shadow, 0 20px 60px rgba(15,23,42,.12)); display: grid; place-items: center; }
.about-hero-media, .about-section-img, .about-media { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.about-sections-stack { display: grid; gap: var(--about-section-gap, var(--grid-gap, 28px)); }
.about-section-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, var(--about-section-media-width, 440px)); gap: var(--about-section-inner-gap, var(--grid-gap, 28px)); align-items: center; padding: var(--about-section-padding, 32px); background: var(--surface, #fff); border: 1px solid var(--border-color, #d7dfec); border-radius: var(--section-radius, var(--card-radius, 28px)); box-shadow: var(--shadow, 0 20px 60px rgba(15,23,42,.08)); text-align: var(--section-align, left); }
.about-section-card h2 { font-size: clamp(2rem, 4vw, var(--about-section-title-size, 3.4rem)); line-height: 1.05; margin: 14px 0; }
.about-section-card .rich-content { color: var(--muted, #52637f); line-height: var(--line-height, 1.7); font-size: var(--about-body-size, 1.05rem); }
.about-section-media { display: grid; gap: var(--about-media-gap, 14px); }
.team-media-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.about-section-img { aspect-ratio: var(--about-media-aspect-ratio, 4 / 3); border-radius: var(--about-media-radius, var(--card-radius, 24px)); background: var(--background, #f8fafc); }
.about-section-team .about-section-media { grid-template-columns: repeat(auto-fit, minmax(var(--team-card-width, 180px), 1fr)); }
.small-lead { font-size: 1.1rem; }
.empty-state { padding: 28px; border: 1px dashed var(--border-color, #d7dfec); border-radius: var(--card-radius, 24px); background: var(--surface, #fff); color: var(--muted, #52637f); }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 22px; align-items: start; padding: 40px 0; color: var(--muted, #52637f); }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) { .about-hero-grid, .about-section-card { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } }

/* v71.7 database-driven visual controls */
:root {
  --header-background-color: #ffffff;
  --header-text-color: #122033;
  --header-link-color: #1E3045;
  --header-link-hover-color: #2F6F6B;
  --header-border-color: rgba(18,32,51,0.10);
  --hero-background: linear-gradient(135deg, #F8FAF8 0%, #EEF5F2 52%, #EEF4F8 100%);
  --hero-text-color: #26384D;
  --hero-title-color: #122033;
  --hero-lead-color: #52657A;
  --hero-badge-background: #E7F1EF;
  --hero-badge-text-color: #275D59;
  --hero-panel-background: #ffffff;
  --hero-panel-text-color: #122033;
  --card-background-color: var(--surface, #ffffff);
  --card-title-color: var(--text, #0f172a);
  --card-text-color: var(--muted, #64748b);
  --card-border-color: rgba(148,163,184,0.18);
  --section-background-color: var(--background, #f8fafc);
  --section-title-color: var(--text, #0f172a);
  --section-text-color: var(--muted, #64748b);
  --section-pill-background: rgba(109,94,252,0.08);
  --section-pill-text-color: #4e46e5;
  --footer-background-color: var(--background, #f8fafc);
  --footer-text-color: var(--muted, #64748b);
  --footer-link-color: var(--text, #0f172a);
  --footer-social-color: var(--primary, #0f766e);
  --footer-border-color: #e5eaf2;
  --button-primary-background: linear-gradient(135deg, var(--primary), var(--secondary));
  --button-primary-text-color: #ffffff;
  --button-secondary-background: #ffffff;
  --button-secondary-text-color: #122033;
  --button-secondary-border-color: #D8E0DE;
  --form-background-color: #ffffff;
  --form-text-color: #101827;
  --form-label-color: #22304c;
  --form-input-background: #f9fbff;
  --form-input-text-color: #101827;
  --body-font-weight: var(--typography-body-font-weight, 400);
  --heading-font-weight: var(--typography-heading-font-weight, 800);
  --heading-letter-spacing: var(--typography-heading-letter-spacing, -0.035em);
  --nav-font-weight: var(--typography-nav-font-weight, 600);
  --button-font-weight: var(--typography-button-font-weight, 700);
}

body[data-page="public"] > main {
  display: flex;
  flex-direction: column;
}

.topbar {
  background: var(--header-background-color) !important;
  border-bottom-color: var(--header-border-color) !important;
}
.topbar .brand,
.topbar .brand strong,
.topbar .brand small {
  color: var(--header-text-color) !important;
}
.desktop-nav a,
.topbar nav a {
  color: var(--header-link-color) !important;
  font-weight: var(--nav-font-weight);
}
.desktop-nav a:hover,
.topbar nav a:hover {
  color: var(--header-link-hover-color) !important;
}

.hero {
  background: var(--hero-background) !important;
  color: var(--hero-text-color) !important;
}
.hero h1,
.hero .display-title {
  color: var(--hero-title-color) !important;
}
.hero .lead,
.hero p {
  color: var(--hero-lead-color) !important;
}
.hero .eyebrow,
.hero .badge {
  background: var(--hero-badge-background) !important;
  color: var(--hero-badge-text-color) !important;
}
.hero-panel,
.hero .glass {
  background: var(--hero-panel-background) !important;
  color: var(--hero-panel-text-color) !important;
}
.hero-panel h3,
.hero-panel strong,
.hero-panel span {
  color: var(--hero-panel-text-color);
}

.section,
.first-section {
  background-color: var(--section-background-color);
}
.section-head h1,
.section-head h2,
.section h2,
.section h3 {
  color: var(--section-title-color);
}
.section-head p,
.section p,
.section .tiny {
  color: var(--section-text-color);
}
.pill,
.eyebrow:not(.hero .eyebrow) {
  background: var(--section-pill-background) !important;
  color: var(--section-pill-text-color) !important;
}

.card,
.entity-card,
.cms-setting-card,
.content-block-card,
.metric-card,
.admin-section-card,
.form-shell,
.side-panel,
.banner,
.mini-card,
.booking-card,
.subscription-card,
.homepage-section-row,
.media-manager-card,
.homepage-dynamic-section .homepage-section-inner {
  background: var(--card-background-color) !important;
  border-color: var(--card-border-color) !important;
  box-shadow: var(--shadow);
}
.card h1,.card h2,.card h3,.card h4,
.entity-card h1,.entity-card h2,.entity-card h3,.entity-card h4,
.form-shell strong,
.side-panel h3 {
  color: var(--card-title-color) !important;
}
.card p,.card .tiny,
.entity-card p,.entity-card .tiny,
.form-shell .tiny,
.side-panel p,.side-panel li {
  color: var(--card-text-color) !important;
}

.form-shell,
.consultation-card,
.account-main-card,
.login-card {
  background: var(--form-background-color) !important;
  color: var(--form-text-color) !important;
}
label,
.form-shell label,
.consultation-card label {
  color: var(--form-label-color) !important;
}
input,
select,
textarea {
  background: var(--form-input-background) !important;
  color: var(--form-input-text-color) !important;
}

.btn-primary,
button.btn-primary,
.btn.primary,
button.primary {
  background: var(--button-primary-background) !important;
  border-color: transparent !important;
  color: var(--button-primary-text-color) !important;
  font-weight: var(--button-font-weight);
}
.btn-secondary {
  background: var(--button-secondary-background) !important;
  color: var(--button-secondary-text-color) !important;
  font-weight: var(--button-font-weight);
}

h1,h2,h3,h4,.display-title {
  font-weight: var(--heading-font-weight);
  letter-spacing: var(--heading-letter-spacing);
}
body {
  font-weight: var(--body-font-weight);
}

#siteFooter,
.footer {
  background: var(--footer-background-color) !important;
  color: var(--footer-text-color) !important;
  border-top: 1px solid var(--footer-border-color);
}
#siteFooter .tiny,
#siteFooter p,
#siteFooter div {
  color: var(--footer-text-color);
}
#siteFooter a,
.footer-link-list a,
.footer-links a {
  color: var(--footer-link-color) !important;
}
#footerSocials a,
.footer-socials a {
  color: var(--footer-social-color) !important;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 7px 11px;
  font-weight: 700;
}

.theme-editor-group summary {
  align-items: center;
}
.theme-editor-group summary .tiny {
  margin-left: auto;
  max-width: 520px;
  text-align: right;
}


/* v71.9 full database-driven theme/layout builder */
:root {
  --link-color: var(--primary, #2563eb);
  --link-hover-color: var(--secondary, #1d4ed8);
  --focus-color: #38bdf8;
  --body-background-image: none;
  --body-background-size: cover;
  --body-background-position: center;
  --header-logo-width: 58px;
  --header-logo-height: 58px;
  --header-padding-y: 12px;
  --header-padding-x: 0px;
  --header-position: sticky;
  --header-z-index: 40;
  --hero-min-height: auto;
  --hero-content-width: minmax(0, 1fr);
  --hero-panel-width: 560px;
  --hero-panel-radius: var(--card-radius, 32px);
  --hero-panel-padding: 32px;
  --hero-price-row-background: rgba(255,255,255,0.08);
  --hero-price-row-text-color: var(--hero-panel-text-color, #ffffff);
  --hero-background-image: none;
  --hero-background-size: cover;
  --hero-background-position: center;
  --hero-overlay-color: rgba(0,0,0,0);
  --hero-overlay-opacity: 0;
  --section-width: 100%;
  --section-max-width: var(--container-width, 1480px);
  --section-margin-top: 0px;
  --section-margin-bottom: 0px;
  --section-inner-gap: var(--grid-gap, 28px);
  --section-text-align: left;
  --section-background-image: none;
  --section-background-size: cover;
  --section-background-position: center;
  --section-overlay-color: rgba(0,0,0,0);
  --section-overlay-opacity: 0;
  --card-padding: 28px;
  --card-gap: 16px;
  --card-width: auto;
  --card-min-height: 220px;
  --card-max-width: 100%;
  --card-icon-background: #eef2ff;
  --card-icon-color: #4f46e5;
  --card-hover-transform: translateY(-2px);
  --service-cards-per-row-desktop: var(--service-grid-columns, 4);
  --service-cards-per-row-tablet: 2;
  --service-cards-per-row-mobile: 1;
  --service-cards-max-visible: 999;
  --services-consultation-columns: 1fr 1fr;
  --services-consultation-gap: var(--grid-gap, 28px);
  --form-width: 100%;
  --form-max-width: 100%;
  --form-columns-desktop: 2;
  --form-columns-tablet: 2;
  --form-columns-mobile: 1;
  --form-row-gap: var(--form-gap, 14px);
  --form-column-gap: 12px;
  --form-padding: 28px;
  --form-input-height: 56px;
  --form-input-border-color: var(--border-color, #d7dfec);
  --form-input-focus-border-color: var(--focus-color, #38bdf8);
  --form-success-background: #ecfdf5;
  --form-success-text-color: #065f46;
  --booking-form-width: 100%;
  --booking-form-columns-desktop: var(--form-columns-desktop, 2);
  --consultation-form-width: var(--consultation-width, 780px);
  --consultation-form-columns-desktop: var(--form-columns-desktop, 2);
  --footer-padding-top: 32px;
  --footer-padding-bottom: 32px;
  --footer-columns: 1.1fr 1.4fr .9fr;
  --footer-gap: 28px;
  --footer-social-background: transparent;
  --footer-social-border-color: currentColor;
}

html, body { background-image: var(--body-background-image); background-size: var(--body-background-size); background-position: var(--body-background-position); }
a { color: var(--link-color); }
a:hover { color: var(--link-hover-color); }
:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }
.topbar { min-height: var(--header-height); padding-block: var(--header-padding-y); padding-inline: var(--header-padding-x); position: var(--header-position); z-index: var(--header-z-index); }
.brand-logo, .brand-badge { width: var(--header-logo-width) !important; height: var(--header-logo-height) !important; }
.nav { gap: var(--header-nav-gap); }
.hero { min-height: var(--hero-min-height); background-image: var(--hero-background-image), var(--hero-background) !important; background-size: var(--hero-background-size); background-position: var(--hero-background-position); position: relative; isolation: isolate; }
.hero::before { content:""; position:absolute; inset:0; background: var(--hero-overlay-color); opacity: var(--hero-overlay-opacity); pointer-events:none; z-index:-1; }
.hero-grid { grid-template-columns: minmax(0, var(--hero-content-width)) minmax(280px, var(--hero-panel-width)); gap: var(--hero-gap); }
.hero-panel { border-radius: var(--hero-panel-radius) !important; padding: var(--hero-panel-padding) !important; }
.service-stack .service-row { background: var(--hero-price-row-background) !important; color: var(--hero-price-row-text-color) !important; }
.section { width: var(--section-width); margin-top: var(--section-margin-top); margin-bottom: var(--section-margin-bottom); background-image: var(--section-background-image); background-size: var(--section-background-size); background-position: var(--section-background-position); position: relative; isolation: isolate; }
.section::before { content:""; position:absolute; inset:0; background: var(--section-overlay-color); opacity: var(--section-overlay-opacity); pointer-events:none; z-index:-1; }
.section > .container { max-width: var(--section-local-max-width, var(--section-max-width)); }
.homepage-section-inner { max-width: var(--section-local-max-width, var(--section-max-width)); text-align: var(--section-text-align); }
.cards, .service-cards, .category-cards, .compact-service-cards { gap: var(--section-local-gap, var(--grid-gap)); }
.cards.three, .compact-service-cards, #serviceCards { grid-template-columns: repeat(var(--section-local-card-columns, var(--service-cards-per-row-desktop)), minmax(min(var(--section-local-card-width, var(--service-card-width, var(--card-width))), 1fr)); }
#serviceCards > :nth-child(n + calc(var(--service-cards-max-visible) + 1)) { display: none; }
.card, .service-card, .category-card, .mini-card, .booking-card, .testimonial-card, .content-block, .cms-setting-card, .entity-card { padding: var(--card-padding); gap: var(--card-gap); width: var(--card-width); min-height: var(--card-min-height); max-width: var(--card-max-width); }
.card:hover, .service-card:hover, .category-card:hover, .mini-card:hover { transform: var(--card-hover-transform); }
.card svg, .service-card svg, .category-card svg, .card-icon { color: var(--card-icon-color); background: var(--card-icon-background); }
.services-consultation-grid { grid-template-columns: var(--services-consultation-columns) !important; gap: var(--services-consultation-gap) !important; }
.services-consultation-card { padding: var(--form-padding) !important; }
.consultation-card, .consultation-form-card { max-width: var(--consultation-form-width) !important; width: var(--form-width); }
.booking-form, #bookingForm, .consultation-form { gap: var(--form-row-gap) var(--form-column-gap) !important; }
.booking-form .form-grid, #bookingForm .form-grid { grid-template-columns: repeat(var(--booking-form-columns-desktop), minmax(0, 1fr)) !important; max-width: var(--booking-form-width); }
.consultation-form .field-grid { grid-template-columns: repeat(var(--consultation-form-columns-desktop), minmax(0, 1fr)) !important; }
input, select, textarea { min-height: var(--form-input-height); border-color: var(--form-input-border-color) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--form-input-focus-border-color) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-input-focus-border-color), transparent 78%); }
.alert.success, .alert:not(.error) { background: var(--form-success-background); color: var(--form-success-text-color); }
#siteFooter { padding-top: var(--footer-padding-top) !important; padding-bottom: var(--footer-padding-bottom) !important; }
#siteFooter > .container { grid-template-columns: var(--footer-columns) !important; gap: var(--footer-gap) !important; }
#footerSocials a { background: var(--footer-social-background); border-color: var(--footer-social-border-color) !important; }
#homepageDynamicSections { display: contents; }
.homepage-dynamic-section { background-size: var(--section-background-size); background-position: var(--section-background-position); overflow: hidden; }
.homepage-dynamic-section::before { content:""; position:absolute; inset:0; background: var(--section-local-overlay-color, transparent); opacity: var(--section-local-overlay-opacity, 0); pointer-events:none; }
.homepage-section-inner { display:grid; grid-template-columns: minmax(0, var(--section-local-content-width, 1fr)) minmax(220px, var(--section-local-media-width, 420px)); gap: var(--section-local-gap, var(--section-inner-gap)); position:relative; z-index:1; }
.homepage-layout-text .homepage-section-inner, .homepage-layout-full-width .homepage-section-inner, .homepage-layout-cards .homepage-section-inner { grid-template-columns: 1fr; }
.homepage-media img, .homepage-media video, .homepage-media iframe { width:100%; border-radius: var(--card-radius); }
.section-background-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
@media (max-width: 900px) {
  .hero-grid, .services-consultation-grid, .homepage-section-inner { grid-template-columns: 1fr !important; }
  .cards.three, .compact-service-cards, #serviceCards { grid-template-columns: repeat(var(--service-cards-per-row-tablet), minmax(0, 1fr)) !important; }
  .booking-form .form-grid, #bookingForm .form-grid, .consultation-form .field-grid { grid-template-columns: repeat(var(--form-columns-tablet), minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .cards.three, .compact-service-cards, #serviceCards { grid-template-columns: repeat(var(--service-cards-per-row-mobile), minmax(0, 1fr)) !important; }
  .booking-form .form-grid, #bookingForm .form-grid, .consultation-form .field-grid { grid-template-columns: repeat(var(--form-columns-mobile), minmax(0,1fr)) !important; }
  #siteFooter > .container { grid-template-columns: 1fr !important; }
}


/* v71.10 flexible layout builder fixes: restore split hero by default and make built-in sections orderable */
:root {
  --hero-grid-template: minmax(0, 1fr) minmax(420px, 560px);
  --button-padding-y: 14px;
  --button-padding-x: 22px;
  --button-min-height: 48px;
  --faq-gap: 14px;
  --faq-item-padding: 20px 22px;
  --faq-question-font-size: 1.05rem;
  --service-card-width: 300px;
  --service-card-min-height: 260px;
}
body[data-seo-page="home"] main {
  display: flex;
  flex-direction: column;
}
body[data-seo-page="home"] main > section {
  order: 100;
}
#home { order: var(--section-order-home, 10); }
#why-us { order: var(--section-order-why-us, 20); }
#services { order: var(--section-order-services, 30); }
#homepageDynamicSections { order: var(--section-order-dynamic, 35); }
#plans { order: var(--section-order-plans, 40); }
#book { order: var(--section-order-book, 50); }
#providers { order: var(--section-order-providers, 60); }
#history { order: var(--section-order-history, 70); }
#testimonials { order: var(--section-order-testimonials, 80); }
#faq { order: var(--section-order-faq, 90); }
.hero-grid {
  display: grid !important;
  grid-template-columns: var(--hero-grid-template, minmax(0, 1fr) minmax(420px, 560px)) !important;
  align-items: center;
}
.hero-panel {
  width: 100%;
  max-width: var(--hero-panel-width, 560px);
  justify-self: end;
  min-width: 0;
}
.hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.btn,
button.btn {
  padding: var(--button-padding-y, 14px) var(--button-padding-x, 22px) !important;
  min-height: var(--button-min-height, 48px);
}
.faq-list { gap: var(--faq-gap, 14px) !important; }
.faq-item { padding: var(--faq-item-padding, 20px 22px) !important; }
.faq-item strong { font-size: var(--faq-question-font-size, 1.05rem) !important; }
.services-consultation-grid {
  display: grid;
  grid-template-columns: var(--services-consultation-columns, minmax(0, 1fr) minmax(420px, 0.9fr)) !important;
  gap: var(--services-consultation-gap, var(--grid-gap, 28px)) !important;
  align-items: stretch;
  margin-top: var(--services-consultation-margin-top, 28px);
}
.compact-service-cards,
#serviceCards {
  display: grid;
  grid-template-columns: repeat(var(--service-cards-per-row-desktop, 2), minmax(min(var(--service-card-width, 300px), 100%), 1fr)) !important;
  gap: var(--grid-gap, 24px);
}
.service-card,
.category-card,
.service-tile,
.category-tile {
  min-height: var(--service-card-min-height, 260px) !important;
}
.services-consultation-card {
  border: 1px solid var(--form-input-border-color, #d7dfec);
  border-radius: var(--card-radius, 28px);
  background: var(--form-background-color, rgba(255,255,255,.88));
  padding: var(--form-padding, 24px);
  box-shadow: var(--theme-shadow, var(--shadow));
  display: grid;
  gap: var(--form-row-gap, 16px);
  align-content: start;
}
.consultation-form { display: grid; gap: var(--form-row-gap, 14px); }
.consultation-form .field-grid {
  display: grid;
  grid-template-columns: repeat(var(--consultation-form-columns-desktop, 2), minmax(0, 1fr));
  gap: var(--form-column-gap, 12px);
}
.consultation-phone-field { grid-column: 1 / -1; }
.consultation-form label span { display:block; font-weight: 800; margin-bottom: 6px; }
.consultation-form .phone-field {
  display: grid;
  grid-template-columns: var(--phone-field-code-width, 130px) minmax(0,1fr);
  gap: var(--form-column-gap, 10px);
}
.homepage-dynamic-section {
  position: relative;
  isolation: isolate;
  border-radius: var(--section-local-radius, 0);
}
.homepage-section-inner {
  max-width: var(--homepage-section-max-width, var(--section-local-max-width, var(--section-max-width, 1480px)));
  margin-left: auto;
  margin-right: auto;
}
.homepage-layout-split .homepage-section-inner,
.homepage-layout-media-left .homepage-section-inner,
.homepage-layout-media-right .homepage-section-inner {
  grid-template-columns: minmax(0, var(--section-local-content-width, 1fr)) minmax(220px, var(--section-local-media-width, 420px));
}
.homepage-layout-media-left .homepage-media { order: -1; }
.homepage-section-items {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--section-local-card-columns, 3), minmax(min(var(--section-local-card-width, 280px), 100%), 1fr));
  gap: var(--section-local-gap, var(--grid-gap, 24px));
  margin-top: 18px;
  text-align: left;
}
.homepage-section-item-card {
  background: var(--card-background-color, #fff);
  color: var(--card-text-color, #64748b);
  border: 1px solid var(--card-border-color, rgba(148,163,184,.18));
  border-radius: var(--card-radius, 24px);
  padding: var(--card-padding, 24px);
  min-height: var(--section-local-card-min-height, var(--card-min-height, 220px));
  box-shadow: var(--theme-shadow, var(--shadow));
}
.homepage-section-item-card h3 { color: var(--card-title-color, #0f172a); margin: 0 0 10px; }
.homepage-section-item-card img,
.homepage-section-item-card video,
.homepage-section-item-card iframe { width: 100%; border-radius: calc(var(--card-radius, 24px) - 8px); margin-bottom: 12px; }
@media (max-width: 1050px) {
  .hero-grid,
  .services-consultation-grid,
  .homepage-layout-split .homepage-section-inner,
  .homepage-layout-media-left .homepage-section-inner,
  .homepage-layout-media-right .homepage-section-inner {
    grid-template-columns: 1fr !important;
  }
  .compact-service-cards,
  #serviceCards,
  .homepage-section-items { grid-template-columns: repeat(var(--service-cards-per-row-tablet, 2), minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .compact-service-cards,
  #serviceCards,
  .homepage-section-items,
  .consultation-form .field-grid { grid-template-columns: 1fr !important; }
  .consultation-form .phone-field { grid-template-columns: 1fr; }
}


/* v71.11 readability/layout stabilization - database variables still control the values */
:root {
  --service-card-title-font-size: 1.25rem;
  --service-card-text-font-size: 1rem;
  --section-head-text-align: center;
  --section-card-text-align: left;
}
.section-head { text-align: var(--section-head-text-align, center); }
.section-head.left { text-align: left; }
.services-side,
.service-card,
.category-card,
.service-tile,
.category-tile,
.consultation-card,
.form-shell,
.side-panel,
.booking-card,
.faq-item,
.testimonial-card { text-align: var(--section-card-text-align, left); }
.service-card h3,
.category-card h3,
.service-tile h3,
.category-tile h3,
#serviceCards .card h3 {
  font-size: var(--service-card-title-font-size, 1.25rem) !important;
  line-height: 1.25 !important;
  margin: 14px 0 10px !important;
}
.service-card p,
.category-card p,
.service-tile p,
.category-tile p,
#serviceCards .card p,
#serviceCards .card .tiny {
  font-size: var(--service-card-text-font-size, 1rem) !important;
  line-height: 1.65 !important;
}
.services-consultation-grid {
  grid-template-columns: var(--services-consultation-columns, minmax(0, 0.92fr) minmax(460px, 1fr)) !important;
  align-items: start !important;
}
.compact-service-cards,
#serviceCards {
  grid-template-columns: repeat(var(--service-cards-per-row-desktop, 3), minmax(min(var(--service-card-width, 190px), 100%), 1fr)) !important;
  align-items: stretch;
}
.consultation-card,
.consultation-form-card {
  width: 100% !important;
  max-width: var(--consultation-form-width, 760px) !important;
  justify-self: stretch;
}
.consultation-form label,
#bookingForm label { text-align: left; }
.pill:empty,
.eyebrow:empty,
.badge:empty,
button.btn:empty,
a.btn:empty,
li:has(a[href=""]),
li:has(a:not([href])) { display: none !important; }
.side-panel ul:empty { display:none; }
@media (max-width: 1150px) {
  .services-consultation-grid { grid-template-columns: 1fr !important; }
  .consultation-card, .consultation-form-card { max-width: 100% !important; }
}
@media (max-width: 900px) {
  .compact-service-cards,
  #serviceCards { grid-template-columns: repeat(var(--service-cards-per-row-tablet, 2), minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .compact-service-cards,
  #serviceCards { grid-template-columns: repeat(var(--service-cards-per-row-mobile, 1), minmax(0,1fr)) !important; }
}

/* v71.12 services + consultation section hard stabilization
   Still database-driven: the variables below can be changed from theme_settings.
   This final block overrides older breakpoint rules that stacked the section too early. */
:root {
  --services-consultation-columns: minmax(0, 0.92fr) minmax(420px, 1fr);
  --services-consultation-gap: 48px;
  --service-card-min-width: 190px;
  --service-card-width: 190px;
  --service-card-min-height: 260px;
  --service-card-padding: 30px;
  --service-cards-per-row-desktop: 3;
  --consultation-form-width: 100%;
  --consultation-form-columns-desktop: 2;
}
#services .container {
  max-width: var(--services-section-max-width, var(--container-width, 1480px)) !important;
  width: min(calc(100% - (var(--page-gutter, 40px) * 2)), var(--services-section-max-width, var(--container-width, 1480px))) !important;
}
#services .services-consultation-grid {
  display: grid !important;
  grid-template-columns: var(--services-consultation-columns, minmax(0, 0.92fr) minmax(420px, 1fr)) !important;
  gap: var(--services-consultation-gap, 48px) !important;
  align-items: start !important;
  width: 100% !important;
}
#services .services-side {
  min-width: 0 !important;
  width: 100% !important;
}
#services #serviceCards,
#services .compact-service-cards {
  display: grid !important;
  grid-template-columns: repeat(var(--service-cards-per-row-desktop, 3), minmax(var(--service-card-min-width, 190px), 1fr)) !important;
  gap: var(--service-cards-gap, var(--grid-gap, 28px)) !important;
  align-items: stretch !important;
}
#services #serviceCards > .card {
  width: 100% !important;
  min-height: var(--service-card-min-height, 260px) !important;
  padding: var(--service-card-padding, 30px) !important;
  display: grid !important;
  align-content: start !important;
  text-align: var(--section-card-text-align, left) !important;
}
#services #serviceCards > .card h3 {
  font-size: var(--service-card-title-font-size, 1.2rem) !important;
}
#services #serviceCards > .card p,
#services #serviceCards > .card .tiny {
  font-size: var(--service-card-text-font-size, 1rem) !important;
  line-height: 1.6 !important;
}
#services #consultationCard {
  width: 100% !important;
  max-width: var(--consultation-form-width, 100%) !important;
  justify-self: stretch !important;
  align-self: start !important;
}
#services #consultationForm .field-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--consultation-form-columns-desktop, 2), minmax(0, 1fr)) !important;
}
@media (max-width: 1240px) and (min-width: 861px) {
  #services #serviceCards,
  #services .compact-service-cards {
    grid-template-columns: repeat(var(--service-cards-per-row-tablet, 2), minmax(var(--service-card-min-width, 190px), 1fr)) !important;
  }
}
@media (max-width: 860px) {
  #services .services-consultation-grid { grid-template-columns: 1fr !important; }
  #services #serviceCards,
  #services .compact-service-cards { grid-template-columns: repeat(var(--service-cards-per-row-mobile, 1), minmax(0, 1fr)) !important; }
  #services #consultationForm .field-grid { grid-template-columns: 1fr !important; }
}


/* v71.13 theme guardrails and services/consultation final stabilization
   These rules keep the layout flexible while preventing unsafe global settings from breaking it. */
:root {
  --safe-container-width: max(var(--container-width, 1480px), 1400px);
  --safe-base-font-size: max(var(--base-font-size, 16px), 15px);
  --safe-heading-scale: max(var(--heading-scale, 1), 0.95);
}
html { font-size: var(--safe-base-font-size) !important; }
#services.section {
  padding-top: max(var(--section-padding-top, 72px), 56px) !important;
  padding-bottom: max(var(--section-padding-bottom, 72px), 56px) !important;
}
#services .container {
  max-width: var(--services-section-max-width, var(--safe-container-width, 1480px)) !important;
  width: min(calc(100% - (var(--page-gutter, 40px) * 2)), var(--services-section-max-width, var(--safe-container-width, 1480px))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#services .section-head {
  text-align: center !important;
  margin-bottom: 34px !important;
}
#services .section-head h2 {
  font-size: clamp(2.35rem, calc(4vw * var(--safe-heading-scale, 1)), 4rem) !important;
  line-height: 1.05 !important;
}
#services .services-consultation-grid {
  display: grid !important;
  grid-template-columns: var(--services-consultation-columns, minmax(0, 0.92fr) minmax(420px, 1fr)) !important;
  gap: var(--services-consultation-gap, 48px) !important;
  align-items: start !important;
  width: 100% !important;
}
#services .services-side { min-width: 0 !important; width: 100% !important; }
#services #serviceCards,
#services .compact-service-cards {
  display: grid !important;
  grid-template-columns: repeat(var(--service-cards-per-row-desktop, 3), minmax(max(var(--service-card-min-width, 190px), 180px), 1fr)) !important;
  gap: var(--service-cards-gap, var(--grid-gap, 28px)) !important;
  align-items: stretch !important;
  justify-content: start !important;
}
#services #serviceCards > .card,
#services .compact-service-cards > .card {
  min-height: max(var(--service-card-min-height, 260px), 240px) !important;
  padding: max(var(--service-card-padding, 30px), 26px) !important;
  width: 100% !important;
  text-align: left !important;
  align-items: flex-start !important;
}
#services #serviceCards > .card h3,
#services .compact-service-cards > .card h3 {
  font-size: max(var(--service-card-title-font-size, 1.25rem), 1.15rem) !important;
  line-height: 1.3 !important;
}
#services #serviceCards > .card p,
#services #serviceCards > .card .tiny,
#services .compact-service-cards > .card p,
#services .compact-service-cards > .card .tiny {
  font-size: max(var(--service-card-text-font-size, 1rem), 0.95rem) !important;
  line-height: 1.65 !important;
}
#services #consultationCard {
  width: 100% !important;
  max-width: var(--consultation-form-width, 100%) !important;
  justify-self: stretch !important;
  padding: max(var(--form-padding, 36px), 30px) !important;
}
#services #consultationForm .field-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--consultation-form-columns-desktop, 2), minmax(0, 1fr)) !important;
  gap: var(--form-row-gap, 20px) var(--form-column-gap, 24px) !important;
}
#services #consultationForm label span,
#services #consultationForm label { font-size: max(var(--form-label-font-size, 1rem), 0.95rem) !important; }
#services #consultationForm input,
#services #consultationForm select,
#services #consultationForm textarea {
  min-height: max(var(--form-input-height, 56px), 52px) !important;
  font-size: max(var(--form-text-font-size, 1rem), 0.95rem) !important;
}
@media (max-width: 980px) and (min-width: 761px) {
  #services .services-consultation-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr) !important;
  }
  #services #serviceCards,
  #services .compact-service-cards {
    grid-template-columns: repeat(var(--service-cards-per-row-tablet, 2), minmax(170px, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  #services .services-consultation-grid { grid-template-columns: 1fr !important; }
  #services #serviceCards,
  #services .compact-service-cards { grid-template-columns: repeat(var(--service-cards-per-row-mobile, 1), minmax(0, 1fr)) !important; }
  #services #consultationForm .field-grid { grid-template-columns: 1fr !important; }
}


/* v71.14: flexible admin values + stable services/auth/booking estimate bridge
   Values remain database-driven; this block only connects variables to selectors. */
:root {
  --booking-estimate-background: #EEF5F2;
  --booking-estimate-text-color: #122033;
  --booking-estimate-muted-color: #52657A;
  --booking-estimate-border-color: #C9DAD6;
  --auth-modal-background: #ffffff;
  --auth-modal-text-color: var(--text-color, #0f172a);
  --auth-modal-width: 650px;
  --auth-modal-padding: 32px;
}
html { font-size: var(--base-font-size, 16px) !important; }
/* Remove previous guardrail variables from forcing global values. */
:root {
  --safe-container-width: var(--container-width, 1480px);
  --safe-base-font-size: var(--base-font-size, 16px);
  --safe-heading-scale: var(--heading-scale, 1);
}

/* Services + consultation final layout: keep desktop/tablet split independent of global font scaling. */
#services.section {
  padding-top: var(--section-padding-top, 72px) !important;
  padding-bottom: var(--section-padding-bottom, 72px) !important;
}
#services > .container {
  width: min(calc(100% - (var(--page-gutter, 40px) * 2)), var(--services-section-max-width, var(--container-width, 1480px))) !important;
  max-width: var(--services-section-max-width, var(--container-width, 1480px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#services .services-consultation-grid {
  display: grid !important;
  grid-template-columns: var(--services-consultation-columns, minmax(0, 0.92fr) minmax(420px, 1fr)) !important;
  gap: var(--services-consultation-gap, 48px) !important;
  align-items: start !important;
  width: 100% !important;
}
#services .services-side { min-width: 0 !important; width: 100% !important; }
#services #serviceCards,
#services .compact-service-cards {
  display: grid !important;
  grid-template-columns: repeat(var(--service-cards-per-row-desktop, 3), minmax(var(--service-card-min-width, 190px), 1fr)) !important;
  gap: var(--service-cards-gap, var(--grid-gap, 28px)) !important;
  align-items: stretch !important;
}
#services #serviceCards > .card,
#services .compact-service-cards > .card {
  width: 100% !important;
  min-height: var(--service-card-min-height, 260px) !important;
  padding: var(--service-card-padding, 30px) !important;
  text-align: var(--section-card-text-align, left) !important;
  align-items: flex-start !important;
}
#services #serviceCards > .card h3,
#services .compact-service-cards > .card h3 {
  font-size: var(--service-card-title-font-size, 1.25rem) !important;
  line-height: 1.3 !important;
}
#services #serviceCards > .card p,
#services #serviceCards > .card .tiny,
#services .compact-service-cards > .card p,
#services .compact-service-cards > .card .tiny {
  font-size: var(--service-card-text-font-size, 1rem) !important;
  line-height: 1.65 !important;
}
#services #consultationCard {
  width: 100% !important;
  max-width: var(--consultation-form-width, 100%) !important;
  justify-self: stretch !important;
  align-self: start !important;
  padding: var(--form-padding, 36px) !important;
}
#services #consultationForm .field-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--consultation-form-columns-desktop, 2), minmax(0, 1fr)) !important;
  gap: var(--form-row-gap, 20px) var(--form-column-gap, 24px) !important;
}
@media (max-width: 980px) and (min-width: 761px) {
  #services .services-consultation-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr) !important; }
  #services #serviceCards,
  #services .compact-service-cards { grid-template-columns: repeat(var(--service-cards-per-row-tablet, 2), minmax(var(--service-card-min-width, 170px), 1fr)) !important; }
}
@media (max-width: 760px) {
  #services .services-consultation-grid { grid-template-columns: 1fr !important; }
  #services #serviceCards,
  #services .compact-service-cards,
  #services #consultationForm .field-grid { grid-template-columns: 1fr !important; }
}

/* Booking estimate colors */
.price-box {
  background: var(--booking-estimate-background) !important;
  color: var(--booking-estimate-text-color) !important;
  border: 1px solid var(--booking-estimate-border-color) !important;
}
.price-box .tiny,
.price-box #estimatedMeta { color: var(--booking-estimate-muted-color) !important; }

/* Auth modal readability */
.modal-card {
  width: min(var(--auth-modal-width, 650px), calc(100vw - 32px)) !important;
  background: var(--auth-modal-background, #ffffff) !important;
  color: var(--auth-modal-text-color, #0f172a) !important;
  padding: var(--auth-modal-padding, 32px) !important;
}
.modal-card .compact-tabs { display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 16px; }
.modal-card .tab { min-height:44px; padding:10px 18px; }
.modal-card .btn.full { min-height: var(--button-min-height, 52px); }
.modal-card .btn.full:empty { display:none; }

/* v71.15 final database-connected stabilizer.
   This block contains only selector bridges; editable values are CSS variables populated from theme_settings. */
:root {
  --theme-readable-text: var(--text, #102033);
  --theme-readable-muted: var(--muted, #536579);
  --theme-readable-surface: var(--surface, #ffffff);
  --badge-background: #E7F1EF;
  --badge-text-color: #275D59;
  --booking-estimate-background: #EEF5F2;
  --booking-estimate-text-color: #122033;
  --booking-estimate-muted-color: #52657A;
  --booking-estimate-border-color: #C9DAD6;
}
.price-box, .booking-estimate, .estimate-box, #bookingEstimate, #bookingSummary, .estimated-total {
  background: var(--booking-estimate-background) !important;
  color: var(--booking-estimate-text-color) !important;
  border: 1px solid var(--booking-estimate-border-color) !important;
}
.price-box *, .booking-estimate *, .estimate-box *, #bookingEstimate *, #bookingSummary *, .estimated-total * { color: var(--booking-estimate-text-color) !important; }
.price-box .tiny, .price-box #estimatedMeta { color: var(--booking-estimate-muted-color) !important; }
.modal-card .btn-primary.full, .modal-card button.btn-primary.full { color: var(--button-primary-text-color, #ffffff) !important; background: var(--button-primary-background, linear-gradient(135deg, var(--primary), var(--secondary))) !important; }
.modal-card .btn-primary.full:empty { min-height: var(--button-min-height, 52px); display: block; }
.pill, .badge, .eyebrow, .section-eyebrow { background: var(--badge-background) !important; color: var(--badge-text-color) !important; }
#services > .container { width: min(calc(100% - (var(--page-gutter, 40px) * 2)), var(--services-section-max-width, var(--container-width, 1480px))) !important; max-width: var(--services-section-max-width, var(--container-width, 1480px)) !important; margin-inline: auto !important; }
#services .services-consultation-grid { display: grid !important; grid-template-columns: var(--services-consultation-columns, minmax(0, 0.92fr) minmax(420px, 1fr)) !important; gap: var(--services-consultation-gap, 48px) !important; align-items: start !important; width: 100% !important; }
#services #serviceCards { display: grid !important; grid-template-columns: repeat(var(--service-cards-per-row-desktop, 3), minmax(var(--service-card-min-width, 190px), 1fr)) !important; gap: var(--service-cards-gap, var(--grid-gap, 28px)) !important; }
#services #consultationForm .field-grid { display: grid !important; grid-template-columns: repeat(var(--consultation-form-columns-desktop, 2), minmax(0, 1fr)) !important; gap: var(--form-row-gap, 20px) var(--form-column-gap, 24px) !important; }
@media (max-width: 760px) { #services .services-consultation-grid, #services #consultationForm .field-grid { grid-template-columns: 1fr !important; } #services #serviceCards { grid-template-columns: repeat(var(--service-cards-per-row-mobile, 1), minmax(0, 1fr)) !important; } }

/* v71.16 database-readable UI bridge: loaded at end of stylesheet, values come from theme_settings variables */
:root {
  --ui-text: var(--theme-text-color, var(--text, #122033));
  --ui-muted: var(--theme-muted-text-color, var(--muted, #52657A));
  --ui-surface: var(--theme-surface-color, var(--surface, #FFFFFF));
  --ui-soft: var(--booking-estimate-background, #EEF5F2);
  --ui-border: var(--theme-border-color, var(--border-color, #D8E0DE));
}
.price-box,
.booking-estimate,
.estimate-box,
#bookingEstimate,
#bookingSummary,
.estimated-total,
.estimate-total {
  background: var(--booking-estimate-background, var(--ui-soft)) !important;
  color: var(--booking-estimate-text-color, var(--ui-text)) !important;
  border: 1px solid var(--booking-estimate-border-color, var(--ui-border)) !important;
}
.price-box *,
.booking-estimate *,
.estimate-box *,
#bookingEstimate *,
#bookingSummary *,
.estimated-total *,
.estimate-total * {
  color: var(--booking-estimate-text-color, var(--ui-text)) !important;
}
.price-box .tiny,
.price-box #estimatedMeta,
.booking-estimate .tiny,
.estimate-box .tiny,
.estimated-total .tiny {
  color: var(--booking-estimate-muted-color, var(--ui-muted)) !important;
}
.account-sidebar,
.account-main-card,
.account-card,
.account-panel,
.summary-item,
.subscription-card,
.booking-card,
.history-card,
.profile-card,
.note-box,
.auth-modal,
.auth-card,
.modal-card,
.form-card,
#bookingCard,
#consultationCard {
  background: var(--card-background-color, var(--form-background-color, var(--ui-surface))) !important;
  color: var(--card-title-color, var(--form-text-color, var(--ui-text))) !important;
  border-color: var(--card-border-color, var(--ui-border)) !important;
}
.account-sidebar *,
.account-main-card *,
.account-card *,
.account-panel *,
.summary-item *,
.subscription-card *,
.booking-card *,
.history-card *,
.profile-card *,
.note-box *,
.auth-modal *,
.auth-card *,
.modal-card *,
.form-card *,
#bookingCard *,
#consultationCard * {
  color: var(--card-title-color, var(--form-text-color, var(--ui-text))) !important;
}
.account-sidebar p,
.account-main-card p,
.account-card p,
.account-panel p,
.subscription-card p,
.booking-card p,
.history-card p,
.profile-card p,
.note-box p,
.account-sidebar .tiny,
.account-main-card .tiny,
.account-card .tiny,
.account-panel .tiny,
.subscription-card .tiny,
.booking-card .tiny,
.history-card .tiny,
.profile-card .tiny,
.note-box .tiny,
.account-sidebar .muted,
.account-main-card .muted,
.account-card .muted,
.account-panel .muted,
.subscription-card .muted,
.booking-card .muted,
.history-card .muted,
.profile-card .muted,
.note-box .muted,
.auth-modal .muted,
.auth-card .muted,
.modal-card .muted,
.form-card .muted {
  color: var(--card-text-color, var(--form-label-color, var(--ui-muted))) !important;
}
.btn.btn-light,
a.btn.btn-light,
button.btn-light,
.btn-secondary,
.btn.secondary,
.secondary-btn,
button.secondary,
a.secondary,
.outline-btn,
.ghost-btn,
.account-sidebar .btn,
.account-main-card .btn,
.account-card .btn,
.account-panel .btn,
.history-card .btn,
.booking-card .btn,
.profile-card .btn,
.auth-modal .btn:not(.btn-primary):not(.primary),
.auth-card .btn:not(.btn-primary):not(.primary) {
  background: var(--button-secondary-background, var(--ui-surface)) !important;
  color: var(--button-secondary-text-color, var(--ui-text)) !important;
  border: 1px solid var(--button-secondary-border-color, var(--ui-border)) !important;
  text-shadow: none !important;
}
.btn.btn-light *,
a.btn.btn-light *,
button.btn-light *,
.btn-secondary *,
.btn.secondary *,
.secondary-btn *,
button.secondary *,
a.secondary *,
.outline-btn *,
.ghost-btn *,
.account-sidebar .btn *,
.account-main-card .btn *,
.account-card .btn *,
.account-panel .btn *,
.history-card .btn *,
.booking-card .btn *,
.profile-card .btn *,
.auth-modal .btn:not(.btn-primary):not(.primary) *,
.auth-card .btn:not(.btn-primary):not(.primary) * {
  color: var(--button-secondary-text-color, var(--ui-text)) !important;
  text-shadow: none !important;
}
.btn-primary,
.btn.primary,
button.primary,
button.btn-primary,
.primary-btn,
button[type="submit"],
#bookingSubmitLabel,
#consultationSubmitLabel,
#profileSaveBtn:not(:disabled) {
  background: var(--button-primary-background, linear-gradient(135deg, var(--primary, #2F6F6B), var(--secondary, #3F6688))) !important;
  color: var(--button-primary-text-color, #FFFFFF) !important;
  border-color: transparent !important;
}
.btn-primary *,
.btn.primary *,
button.primary *,
button.btn-primary *,
.primary-btn *,
button[type="submit"] *,
#bookingSubmitLabel *,
#consultationSubmitLabel *,
#profileSaveBtn:not(:disabled) * {
  color: var(--button-primary-text-color, #FFFFFF) !important;
}
button:disabled,
.btn:disabled,
.disabled,
[disabled] {
  background: var(--disabled-button-background, #F4F7F6) !important;
  color: var(--disabled-button-text-color, var(--ui-text)) !important;
  border-color: var(--ui-border) !important;
  opacity: 0.75 !important;
}
button:disabled *,
.btn:disabled *,
.disabled *,
[disabled] * {
  color: var(--disabled-button-text-color, var(--ui-text)) !important;
}
input,
select,
textarea {
  background: var(--form-input-background, #FFFFFF) !important;
  color: var(--form-input-text-color, var(--ui-text)) !important;
  border-color: var(--form-input-border-color, var(--ui-border)) !important;
}
label,
.form-label {
  color: var(--form-label-color, var(--ui-text)) !important;
}