/* Responsive refinements */
@media (max-width:1100px){.strip-grid,.card-grid.four{grid-template-columns:repeat(2,1fr)}.area-grid{grid-template-columns:repeat(4,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.main-nav{gap:18px}.pricing-grid{gap:18px}}
@media (max-width:860px){:root{--header:78px}.nav-toggle{display:flex}.main-nav{position:fixed;top:var(--header);right:20px;left:20px;display:grid;gap:0;background:rgba(109,31,42,.98);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.25s}.main-nav.open{opacity:1;visibility:visible;transform:none}.main-nav a{padding:13px 14px;border-radius:14px}.main-nav a:hover{background:rgba(255,255,255,.08)}.nav-cta{text-align:center;margin-top:6px}.hero{text-align:left;place-items:end center;padding-bottom:82px}.hero-content{max-width:none}.hero-logo{margin-left:0;width:155px}.hero h1 br{display:none}.hero-meta,.hero-actions{justify-content:flex-start}.scroll-hint{display:none}.two-col,.two-col.reverse{grid-template-columns:1fr;gap:34px}.pricing-grid,.steps{grid-template-columns:1fr}.price-card.featured{transform:none}.area-grid{grid-template-columns:repeat(2,1fr)}.section{padding:74px 0}.advantages-strip{margin-top:0;padding:30px 0;background:#fff}.media-card{aspect-ratio:16/12}}
@media (max-width:600px){.container,.narrow{width:min(100% - 28px,var(--container))}.brand img{height:58px}.hero{min-height:92vh}.hero h1{font-size:2.45rem}.hero-lead{font-size:1rem}.hero-meta span{width:100%;justify-content:center}.hero-actions .btn{width:100%}.strip-grid,.card-grid.four,.area-grid,.footer-grid{grid-template-columns:1fr}.mini-card,.feature-card,.price-card{padding:24px}.price-card{min-height:auto}.cta-box{padding:46px 20px;border-radius:26px}.footer-grid{gap:30px}.floating-wa{right:16px;bottom:16px;width:56px;height:56px}.back-to-top{left:16px;bottom:16px}.section-head h2,.section-copy h2{font-size:2.15rem}.footer-bottom{font-size:.85rem}}


/* Hawari Homecare V2.1 responsive polish */
@media (max-width:860px){
  .hero{
    text-align:center;
    place-items:center;
    padding:calc(var(--header) + 18px) 0 68px;
    min-height:94svh;
  }
  .hero-content{padding-top:0;}
  .hero-logo{margin-left:auto;margin-right:auto;width:min(140px,42vw);}
  .hero h1{font-size:clamp(2.35rem,9.4vw,3.35rem);line-height:1.02;}
  .hero h1 span{display:block;}
  .hero-meta,.hero-actions{justify-content:center;}
  .advantages-strip{margin-top:0;}
  .booking.bg-maroon .step h3{color:#fff;}
}
@media (max-width:600px){
  .hero{min-height:92svh;padding-bottom:56px;}
  .hero h1{font-size:2.35rem;}
  .hero-logo{width:118px;}
  .hero-lead{font-size:.98rem;}
}


/* v2.4 - Mobile polish */
@media (max-width: 600px){
  .site-header{
    background: rgba(109, 31, 42, .96);
    backdrop-filter: blur(16px);
  }

  .brand-title{font-size:1.05rem;}
  .brand-subtitle{font-size:.52rem;letter-spacing:.18em;}

  .hero.hero-static{
    min-height: auto;
    padding: calc(var(--header) + 42px) 0 82px;
  }

  .hero.hero-static .eyebrow{
    font-size:.68rem;
    letter-spacing:.2em;
    margin-bottom:18px;
  }

  .hero.hero-static h1{
    font-size: clamp(2.05rem, 10.2vw, 2.9rem);
    line-height: 1.03;
    max-width: 340px;
  }

  .hero-lead{max-width: 330px;margin-inline:auto;}

  .hero-meta span{
    width: 100%;
    max-width: 340px;
    margin-inline:auto;
  }

  .hero-actions{
    width: 100%;
    max-width: 340px;
    margin-inline:auto;
  }

  .hero-actions .btn{width:100%;}
  .advantages-strip{padding-top: 0;}

  .price-card{
    padding: 26px 22px;
    border-radius: 24px;
  }

  .pricing-grid{gap: 18px;}

  .booking.bg-maroon{
    padding-bottom: 96px;
  }

  .step{padding: 22px 18px;}

  .site-footer{
    padding-bottom: 96px;
  }

  .footer-wordmark{
    display:inline-flex;
    flex-direction:column;
    line-height:1;
    color:var(--gold-2);
    margin-bottom:18px;
  }

  .footer-wordmark span{
    font-family:var(--font-head);
    font-weight:600;
    font-size:1.55rem;
    letter-spacing:-.01em;
  }

  .footer-wordmark small{
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.24em;
    font-size:.58rem;
    font-weight:600;
    margin-top:5px;
  }

  .floating-wa{
    width:54px;
    height:54px;
    right:14px;
    bottom:18px;
    font-size:1.65rem;
  }

  .back-to-top{
    width:42px;
    height:42px;
    left:14px;
    bottom:18px;
  }
}


/* =====================================================
   v2.7 — Mobile final polish
   Notes:
   - membuat layout mobile lebih lega
   - mencegah tombol floating menutup kartu paket/footer
   - membuat hero mobile lebih seimbang
   - memperhalus wordmark agar terasa lebih elegan
   ===================================================== */

.brand-title,
.footer-wordmark span {
  text-rendering: geometricPrecision;
}

@media (min-width: 861px) {
  .brand-title {
    font-size: 1.48rem;
  }
}

@media (max-width: 600px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .site-header {
    border-radius: 10px 10px 0 0;
  }

  .nav-wrap {
    padding-inline: 2px;
  }

  .brand-wordmark {
    max-width: 190px;
  }

  .brand-title {
    font-size: 1.08rem;
    line-height: .95;
  }

  .brand-subtitle {
    margin-top: 4px;
    font-size: .54rem;
    letter-spacing: .22em;
  }

  .hero.hero-static {
    padding-top: calc(var(--header) + 38px);
    padding-bottom: 88px;
  }

  .hero.hero-static h1 {
    max-width: 332px;
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.02;
  }

  .hero-lead {
    max-width: 332px;
    font-size: .96rem;
    line-height: 1.68;
  }

  .hero-meta,
  .hero-actions {
    max-width: 330px;
  }

  .advantages-strip {
    padding-bottom: 32px;
  }

  .packages {
    padding-bottom: 112px;
  }

  .price-card {
    padding-bottom: 30px;
  }

  .price-card:last-child {
    margin-bottom: 42px;
  }

  .price-card .btn {
    min-height: 50px;
  }

  .section.about {
    padding-bottom: 96px;
  }

  .final-cta {
    padding-bottom: 108px;
  }

  .site-footer {
    padding-bottom: 124px;
  }

  .floating-wa {
    right: 18px;
    bottom: calc(22px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    font-size: 1.55rem;
    box-shadow: 0 14px 32px rgba(37,211,102,.34), 0 0 0 8px rgba(37,211,102,.08);
  }

  .back-to-top {
    left: 18px;
    bottom: calc(26px + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
  }

  .footer-bottom {
    padding-inline: 18px;
    line-height: 1.6;
  }
}

@media (max-width: 390px) {
  .hero.hero-static h1 {
    font-size: clamp(1.92rem, 9.8vw, 2.55rem);
  }

  .hero-lead {
    font-size: .94rem;
  }

  .brand-title {
    font-size: 1rem;
  }

  .brand-subtitle {
    font-size: .5rem;
  }
}


/* =====================================================
   v2.8 — Mobile symmetry fix + comfy bullet update
   ===================================================== */
@media (max-width: 600px) {
  .hero.hero-static {
    min-height: auto;
    display: block;
    padding-top: calc(var(--header) + 78px);
    padding-bottom: 74px;
  }

  .hero.hero-static .hero-content {
    max-width: 100%;
    transform: none;
  }

  .hero.hero-static .eyebrow {
    margin-bottom: 18px;
  }

  .hero.hero-static h1 {
    max-width: 320px;
    margin-inline: auto;
    margin-bottom: 18px;
    font-size: clamp(1.92rem, 9.3vw, 2.6rem);
    line-height: 1.06;
  }

  .hero-lead {
    max-width: 320px;
    margin-inline: auto;
    margin-bottom: 20px;
    font-size: .95rem;
    line-height: 1.62;
  }

  .hero-meta,
  .hero-actions {
    max-width: 320px;
    margin-inline: auto;
  }

  .hero-meta span,
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .scroll-hint {
    display: none;
  }
}

@media (max-width: 390px) {
  .hero.hero-static {
    padding-top: calc(var(--header) + 82px);
    padding-bottom: 68px;
  }

  .hero.hero-static h1 {
    max-width: 300px;
    font-size: clamp(1.82rem, 9vw, 2.38rem);
    line-height: 1.07;
  }

  .hero-lead,
  .hero-meta,
  .hero-actions {
    max-width: 300px;
  }
}