/* =========================================================================
   page-business.css — layout additions specific to templates/template-business.php
   Ported from project/Faucet Business.dc.html. Reuses theme.css utilities
   (.ms-section, .ms-eyebrow, .ms-h2, .ms-lead, .ms-callout, .ms-numlist,
   .ms-band, .ms-process-grid, .ms-btn, .ms-link, .ms-price, .ms-crumbs …)
   wherever they already cover a pattern; only new layout shapes live here.
   ========================================================================= */

/* ---- Hero: boxed portrait image + price card + tag pills (not full-bleed,
   so the header is NOT set to dark mode for this page) --------------------- */
.ms-biz-hero__inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: flex-end; }
.ms-biz-hero__copy { flex: 1 1 min(100%, 540px); }
.ms-biz-hero__copy .ms-h2 { margin-top: clamp(16px, 2.2vw, 26px); }
.ms-biz-hero__img { flex: 1 1 min(100%, 300px); max-width: 400px; aspect-ratio: 3/4; overflow: hidden; background: var(--ms-placeholder-bg); border-radius: var(--ms-radius); }
.ms-biz-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.ms-biz-hero__foot {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: flex-end;
  margin-top: clamp(30px, 4vw, 52px); padding-top: clamp(26px, 3.2vw, 40px);
  border-top: 1px solid var(--ms-hairline-light);
}
.ms-biz-hero__foot-right { flex: 1 1 min(100%, 300px); }
.ms-biz-hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2.4vw, 28px); margin-top: clamp(20px, 2.4vw, 30px); }

/* Dark price card used in the hero (page background is light, so the price
   block needs its own dark surface for contrast — reuses .ms-price rows). */
.ms-price-card { display: inline-flex; flex: 0 1 auto; background: var(--ms-dark); color: #F5F4F0; padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.8vw, 36px); border-radius: var(--ms-radius); }
.ms-price-card .ms-price__row { border-bottom-color: rgba(245, 244, 240, .24); }
.ms-price-card .ms-price__label { color: rgba(245, 244, 240, .6); }

/* ---- Pill list (rounded-corner-free bordered tag row) -------------------- */
.ms-pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-pill-list li { padding: 8px 14px; border: 1px solid rgba(17, 17, 17, .22); font-size: 12px; font-weight: 600; color: var(--ms-text); }
.ms-pill-list--light li { border-color: rgba(245, 244, 240, .28); color: #F5F4F0; }

/* ---- Tile grid: hairline-divided grid of short plain-text cells --------- */
.ms-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 1px; background: var(--ms-hairline-light); border: 1px solid var(--ms-hairline-light); }
.ms-tile-grid__cell { background: var(--ms-bg); padding: 14px 16px; font-size: 13px; font-weight: 500; color: var(--ms-text); }
.ms-tile-grid--alt .ms-tile-grid__cell { background: var(--ms-alt-bg); }
.ms-tile-grid--dark { background: rgba(245, 244, 240, .18); border-color: rgba(245, 244, 240, .18); }
.ms-tile-grid--dark .ms-tile-grid__cell { background: var(--ms-dark); color: #F5F4F0; }

/* ---- Numbered tile grid (e.g. "14 basic services") ----------------------- */
.ms-numbered-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: var(--ms-hairline-light); border: 1px solid var(--ms-hairline-light); }
.ms-numbered-grid__cell { background: var(--ms-alt-bg); padding: clamp(18px, 2vw, 26px); }
.ms-numbered-grid__num { display: block; font-family: var(--ms-font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--ms-accent); margin-bottom: 10px; }
.ms-numbered-grid__label { font-family: var(--ms-font-head); font-size: 14.5px; font-weight: 700; line-height: 1.6; color: var(--ms-text); }

/* ---- Card grid: cell with a heading + short sub-list --------------------- */
.ms-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: var(--ms-hairline-light); border: 1px solid var(--ms-hairline-light); }
.ms-card-grid__cell { background: var(--ms-alt-bg); padding: clamp(20px, 2.2vw, 28px); }
.ms-card-grid__cell ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ms-lead); }

/* ---- Compare grid: 2-up card (SNS vs. website) --------------------------- */
.ms-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--ms-hairline-light); border: 1px solid var(--ms-hairline-light); }
.ms-compare-grid__cell { background: var(--ms-bg); padding: clamp(20px, 2.4vw, 30px); }
.ms-compare-grid__label { display: block; font-family: var(--ms-font-display); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ms-note); margin-bottom: 16px; }
.ms-compare-grid__label--accent { color: var(--ms-accent); }
.ms-compare-grid__cell ul { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--ms-lead); }

/* ---- Stat grid: 3 cards with a big number + short label ------------------ */
.ms-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(30px, 3.8vw, 50px); }
.ms-stat-grid__cell { background: rgba(245, 244, 240, .06); border: 1px solid rgba(245, 244, 240, .16); padding: clamp(22px, 2.6vw, 34px); border-radius: var(--ms-radius); }
.ms-stat-grid__num { font-family: var(--ms-font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(26px, 4vw, 54px); color: var(--ms-accent); }
.ms-stat-grid__num small { font-size: .42em; margin-left: .14em; font-weight: 600; }
.ms-stat-grid__label { margin-top: 14px; font-family: var(--ms-font-head); font-size: 14px; font-weight: 700; color: #F5F4F0; }
.ms-stat-note { margin-top: clamp(26px, 3.2vw, 42px); max-width: 52em; padding: clamp(18px, 2.2vw, 26px); background: rgba(245, 244, 240, .08); border: 1px solid rgba(245, 244, 240, .18); border-radius: var(--ms-radius); font-size: 13.5px; line-height: 2.05; color: rgba(245, 244, 240, .85); }
.ms-stat-note strong { color: var(--ms-accent); }

/* ---- Big display number (e.g. "300+ WEBSITES") --------------------------- */
.ms-bignum { font-family: var(--ms-font-display); font-weight: 800; line-height: .86; letter-spacing: -.045em; }

/* ---- Split two-column heads used repeatedly for "topic A / topic B" ------ */
.ms-split-2 { display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 96px); }
.ms-split-2 > * { flex: 1 1 min(100%, 380px); }

/* ---- Design section: image + 2 text columns ------------------------------ */
.ms-design-grid { display: flex; flex-wrap: wrap-reverse; gap: clamp(36px, 6vw, 96px); align-items: center; }
.ms-design-grid__img { flex: 1 1 min(100%, 280px); max-width: 440px; aspect-ratio: 3/4; overflow: hidden; background: var(--ms-placeholder-bg); border-radius: var(--ms-radius); }
.ms-design-grid__img img { width: 100%; height: 100%; object-fit: cover; }
.ms-design-grid__copy { flex: 1 1 min(100%, 400px); }
.ms-design-grid__copy .ms-h2 { margin-top: clamp(24px, 3vw, 36px); }
.ms-design-grid__copy2 { flex: 1 1 min(100%, 320px); max-width: 500px; }

/* ---- FAQ accordion -------------------------------------------------------- */
.ms-faq { border-top: 1px solid var(--ms-hairline-light); }
.ms-faq details { border-bottom: 1px solid var(--ms-hairline-light); }
.ms-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; font-family: var(--ms-font-head); font-size: 15.5px; font-weight: 700; cursor: pointer; list-style: none; }
.ms-faq summary::-webkit-details-marker { display: none; }
.ms-faq summary::after { content: "+"; font-family: var(--ms-font-display); font-size: 17px; flex: 0 0 auto; opacity: .55; }
.ms-faq details[open] summary::after { content: "\2212"; opacity: 1; color: var(--ms-accent); }
.ms-faq summary:hover { color: var(--ms-accent); }
.ms-faq p { padding-bottom: 22px; max-width: 44em; font-size: 13.5px; line-height: 2.05; color: var(--ms-lead); }
.ms-faq-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3.4vw, 44px); }

/* ---- Message section: text + image --------------------------------------- */
.ms-message-grid { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); margin-top: clamp(28px, 3.6vw, 48px); }
.ms-message-grid__copy { flex: 1 1 min(100%, 320px); max-width: 520px; }
.ms-message-grid__img { flex: 1 1 min(100%, 300px); max-width: 460px; align-self: center; aspect-ratio: 4/3; overflow: hidden; background: var(--ms-placeholder-bg); border-radius: var(--ms-radius); }
.ms-message-grid__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Info box (used in the trust/local-business section) ---------------- */
.ms-info-box { margin-top: clamp(22px, 2.6vw, 32px); padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--ms-hairline-light); font-size: 13.5px; line-height: 2.05; color: var(--ms-lead); }
.ms-info-box strong { display: block; font-family: var(--ms-font-head); font-size: 15px; color: var(--ms-text); margin-bottom: 10px; }