/*
Theme Name: Mason Business
Description: Tema bisnis LPG Mason Naraji untuk pengujian staging.
Version: 1.0.3
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: mason-business
*/
:root {
  color-scheme:only light;
  --navy:#101831;
  --ink:#18213b;
  --muted:#4f586e;
  --magenta:#b20c69;
  --pink:#f592c9;
  --line:#e1dfe9;
  --paper:#f7f5fa;
}
* { box-sizing:border-box }
body { margin:0; background:white; color:var(--ink); font: 1rem/1.65 system-ui, "Segoe UI", sans-serif }
a { color:var(--magenta); text-underline-offset:.2em }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid #1676b0; outline-offset:4px }
img { max-width:100%; height:auto }
h1,h2,h3,p { margin:0 0 .8em }
h1,h2,h3 { line-height:1.08; letter-spacing:-.035em }
h1 { font-size:clamp(2.45rem,5.4vw,4.9rem) }
h2 { font-size:clamp(1.85rem,3.6vw,3.05rem) }
h3 { font-size:clamp(1.35rem,2.35vw,2rem) }
p { color:var(--muted) }
.mnb-wrap { width:min(1180px,calc(100% - 3rem)); margin-inline:auto }
.mnb-header { background:white; border-bottom:1px solid var(--line) }
.mnb-bar,.mnb-brand,.mnb-nav,.mnb-actions,.mnb-household { display:flex; align-items:center }
.mnb-bar { gap:clamp(.8rem,3vw,2.2rem); min-height:80px; justify-content:space-between; padding-block:.65rem }
.mnb-brand { gap:.7rem; font-size:1.1rem; font-weight:800; line-height:1.15; text-decoration:none; color:var(--ink) }
.mnb-brand small { display:block; margin-top:.25rem; color:var(--muted); font-size:.63rem; letter-spacing:.12em }
.mnb-logo { display:block; width:auto; height:auto; max-width:clamp(58px,10vw,120px); max-height:52px; object-fit:contain; flex-shrink:0 }
@media (max-width:420px) { .mnb-brand:has(.mnb-logo) { flex-basis:100% } }
.mnb-nav { flex-wrap:wrap; gap:.55rem 1.55rem; list-style:none; margin:0; padding:0 }
.mnb-nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-size:.91rem; font-weight:650; text-decoration:none }
.mnb-nav a:hover,.mnb-nav a[aria-current] { color:var(--magenta); text-decoration:underline }
.mnb-button { display:inline-flex; align-items:center; justify-content:space-between; gap:.7rem; min-height:46px; padding:.68rem 1rem; border:1px solid transparent; border-radius:.65rem; font-weight:750; line-height:1.35; text-decoration:none; font-size:.92rem }
.mnb-button:hover { text-decoration:underline }
.mnb-primary { color:white; background:var(--magenta) }
.mnb-nav-order { color:white; background:var(--navy) }
.mnb-outline { color:white; border-color:#9695ae }
.mnb-quiet { color:var(--ink); border-color:#c9cddd; background:#fff }
.mnb-quiet:hover { background:#f4f4fa }
.mnb-service-actions .mnb-quiet { color:#075a3b; background:#f1fbf5; border-color:#a4d1b8 }
.mnb-service-actions .mnb-quiet:hover { background:#e2f7ea }
.mnb-hero { position:relative; isolation:isolate; background:linear-gradient(118deg,#101831 28%,#221a3c 100%); color:white; padding-block:clamp(3rem,7vw,6rem) }
.mnb-wallpaper-layer,.mnb-wallpaper-layer::after,.mnb-wallpaper { position:absolute; inset:0; width:100%; height:100% }
.mnb-wallpaper-layer { z-index:-1; pointer-events:none }
.mnb-wallpaper { object-fit:cover }
.mnb-wallpaper-layer::after { content:""; background:rgba(16,24,49,.79) }
.mnb-hero-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(1rem,4vw,3rem); align-items:center }
.mnb-hero h1 { margin-bottom:.32em }
.mnb-kicker { font-size:.73rem; font-weight:800; letter-spacing:.16em; color:var(--magenta); margin-bottom:1.15rem }
.mnb-hero .mnb-kicker,.mnb-feature .mnb-kicker { color:var(--pink) }
.mnb-lead { color:#d8d9e9; font-size:clamp(1rem,1.65vw,1.19rem); max-width:48ch }
.mnb-actions { flex-wrap:wrap; gap:.65rem; margin-top:1.45rem }
.mnb-visual { position:relative; overflow:hidden; border:1px solid #b591bf55; border-radius:1.3rem; background:linear-gradient(155deg,#38305280,#12172d) }
.mnb-visual img { display:block; width:100% }
.mnb-visual-caption { position:absolute; bottom:5%; left:5%; padding:.55rem .8rem; background:#11182f; border:1px solid #a687b766; border-radius:.55rem; line-height:1.3 }
.mnb-visual-caption span { display:block; color:var(--pink); font-size:.64rem; letter-spacing:.13em; margin-bottom:.18rem }
.mnb-quick { background:#f9edf5; border-bottom:1px solid #efd6e6 }
.mnb-quick-grid { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.65rem; padding-block:1rem }
.mnb-section { padding-block:clamp(2.7rem,6vw,5rem) }
.mnb-section h2 { max-width:24ch }
.mnb-cards,.mnb-programs,.mnb-steps { display:grid; gap:1rem; margin-top:1.7rem }
.mnb-cards,.mnb-steps { grid-template-columns:repeat(3,minmax(0,1fr)) }
.mnb-programs { grid-template-columns:1.2fr 1fr }
.mnb-card,.mnb-steps li { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(1.15rem,3vw,2rem); border:1px solid var(--line); border-radius:1rem; background:white }
.mnb-card p:not(.mnb-kicker) { margin-bottom:1.2rem }
.mnb-card a { margin-top:auto; font-weight:700 }
.mnb-number { display:grid; place-items:center; min-width:2.65rem; height:2.65rem; border-radius:.65rem; margin-bottom:1.25rem; color:var(--magenta); font-weight:800; background:#f9edf5 }
.mnb-band { background:var(--paper); border-block:1px solid var(--line) }
.mnb-feature { background:linear-gradient(115deg,#101831,#302144); color:white; border-color:transparent }
.mnb-feature p:not(.mnb-kicker) { color:#e2dfeb }
.mnb-steps { list-style:none; padding:0; counter-reset:steps }
.mnb-steps li { counter-increment:steps }
.mnb-steps li::before { content:"0" counter(steps); color:var(--magenta); font-weight:800; margin-bottom:.5rem }
.mnb-service { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1.4rem }
.mnb-service p:not(.mnb-kicker) { max-width:62ch }
.mnb-service-actions { display:grid; gap:.65rem }
.mnb-household { justify-content:space-between; gap:1rem; padding-block:1.5rem }
.mnb-household h2 { font-size:1.45rem; margin-bottom:.3rem }
.mnb-household p,.mnb-footer p { margin:0 }
.mnb-footer { padding-block:2rem; background:var(--navy); color:white }
.mnb-footer a,.mnb-footer p { color:#e2dfeb }
.mnb-footer .mnb-whatsapp { color:#092d1d; background:#25d366; border-color:#25d366 }
.mnb-footer .mnb-whatsapp:hover { background:#52e48a }
.mnb-footer .mnb-whatsapp:focus-visible { outline-color:#fff }
.mnb-footer-grid { display:flex; flex-wrap:wrap; gap:.9rem 2rem; justify-content:space-between; align-items:center }
.mnb-page-content { overflow-wrap:anywhere }
.mnb-page-content figure { max-width:100%; margin-inline:0 }
.mnb-page-content .wp-block-table { overflow-x:auto }
.mnb-page-content > article + article { margin-top:2rem }
.mnb-skip,.screen-reader-text { position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap }
.mnb-skip:focus,.screen-reader-text:focus { z-index:100000; top:1rem; left:1rem; clip-path:none; width:auto; height:auto; padding:.7rem; background:white; color:var(--ink) }
@media (max-width:850px) {
  .mnb-bar { flex-wrap:wrap }
  .mnb-bar nav { order:3; flex-basis:100% }
  .mnb-hero-grid { grid-template-columns:1fr  .85fr }
  .mnb-service { grid-template-columns:1fr }
  .mnb-service-actions { display:flex; flex-wrap:wrap }
}
@media (max-width:650px) {
  .mnb-wrap { width:calc(100% - 2rem) }
  .mnb-hero-grid,.mnb-cards,.mnb-programs,.mnb-steps { grid-template-columns:1fr }
  .mnb-visual { width:min(100%,435px) }
  .mnb-quick-grid { grid-template-columns:1fr 1fr }
  .mnb-quick-grid > span { grid-column:1/-1 }
  .mnb-household { align-items:flex-start; flex-direction:column }
}