
/* Mobile-only homepage layout. Desktop homepage remains unchanged. */
.mobile-homepage{display:none}

@media (max-width: 760px){
  html,body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
    background:#f9ebe8;
  }

  body.home-page{
    display:block;
    background:
      linear-gradient(rgba(255,248,246,.10),rgba(255,248,246,.10)),
      url("assets/petite-petal-background-balanced-blue-tall-softflower.png") center top / cover no-repeat;
    color:#352725;
  }

  body.home-page .site{display:none}

  body.home-page nav.site-nav{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:clamp(8px,3vw,15px) !important;
    padding:13px 10px 11px !important;
    margin:0 !important;
    background:rgba(255,249,247,.50) !important;
    border-bottom:1px solid rgba(218,143,155,.24) !important;
    font-size:clamp(10px,2.8vw,12px) !important;
    z-index:20 !important;
    box-sizing:border-box !important;
  }

  body.home-page nav.site-nav > a{
    padding:10px 0 !important;
    min-width:0 !important;
    flex:0 1 auto !important;
    white-space:nowrap !important;
  }

  .mobile-homepage{
    display:block;
    width:100%;
    max-width:560px;
    margin:0 auto;
    padding:0 18px 42px;
    font-family:"Poiret One","Arial Narrow",Arial,sans-serif;
  }

  .mobile-hero{
    text-align:center;
    padding:34px 2px 34px;
  }

  .mobile-wordmark{
    display:block;
    width:min(88%,410px);
    height:auto;
    margin:0 auto;
  }

  .mobile-title-rule{
    width:58%;
    max-width:270px;
    height:1.5px;
    background:#df8f9e;
    margin:6px auto 13px;
  }

  .mobile-tagline{
    margin:0;
    font-weight:400;
    font-size:clamp(19px,5.6vw,25px);
    line-height:1.22;
    color:#4b3a37;
  }

  .mobile-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:min(100%,390px);
    margin:22px auto 0;
  }

  .mobile-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 10px;
    background:#edaeb8;
    border:1px solid rgba(214,127,142,.58);
    border-radius:6px;
    color:#352725;
    text-decoration:none;
    font:700 12px/1.15 Arial,Helvetica,sans-serif;
    letter-spacing:.12em;
  }

  .mobile-services{
    display:grid;
    gap:18px;
    padding-top:8px;
  }

  .mobile-section-title{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:12px;
    margin:0 auto 3px;
    width:100%;
  }

  .mobile-section-title span{
    height:1.5px;
    background:#da8f9b;
  }

  .mobile-section-title h2{
    margin:0;
    font-size:clamp(28px,8vw,38px);
    font-weight:400;
    letter-spacing:.05em;
    white-space:nowrap;
  }

  .mobile-service-card{
    width:100%;
    padding:24px 22px 25px;
    text-align:center;
    background:rgba(255,250,248,.78);
    border:0;
    border-radius:24px;
    box-shadow:0 5px 18px rgba(129,81,92,.045);
  }

  .mobile-service-icon{
    width:72px;
    height:72px;
    margin:0 auto 8px;
  }

  .mobile-service-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:#352725;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mobile-service-icon circle{
    fill:rgba(242,185,195,.48);
    stroke:none;
  }

  .mobile-service-card h3{
    margin:2px 0 8px;
    font-size:clamp(28px,7.5vw,36px);
    font-weight:400;
    line-height:1.04;
  }

  .mobile-card-rule{
    width:58%;
    max-width:190px;
    height:2px;
    margin:0 auto 14px;
    background:#df8f9e;
  }

  .mobile-service-card p{
    max-width:340px;
    margin:0 auto;
    font-size:clamp(20px,5.6vw,25px);
    line-height:1.38;
    color:#4a3936;
  }

  .mobile-divider{
    width:100%;
    height:1.5px;
    margin:32px 0 30px;
    background:rgba(218,143,155,.62);
  }

  .mobile-divider.soft{
    margin:30px 0 26px;
    opacity:.55;
  }

  .mobile-about,
  .mobile-connect{
    text-align:center;
  }

  .mobile-about h2,
  .mobile-connect h2{
    margin:0;
    font-size:clamp(27px,7.6vw,36px);
    font-weight:400;
    line-height:1.1;
  }

  .mobile-info-rule{
    width:58%;
    max-width:210px;
    height:2px;
    background:#df8f9e;
    margin:10px auto 17px;
  }

  .mobile-about p{
    max-width:450px;
    margin:0 auto 17px;
    font-size:clamp(19px,5.2vw,23px);
    line-height:1.5;
    color:#4a3936;
  }

  .mobile-signature{
    margin-top:4px;
    font-size:clamp(32px,9vw,44px);
  }

  .mobile-connect{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .mobile-connect a{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:center;
    gap:14px;
    width:min(100%,430px);
    margin:7px 0;
    padding:2px 4px;
    text-decoration:none;
    color:#352725;
    text-align:left;
    font-size:clamp(18px,4.8vw,22px);
    overflow-wrap:anywhere;
  }

  .mobile-badge{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(239,173,184,.62);
    font-family:Arial,Helvetica,sans-serif;
    font-size:21px;
  }

  .mobile-footer{
    width:min(78%,330px);
    margin:38px auto 0;
    padding-top:11px;
    border-top:1.5px solid #df8f9e;
    text-align:center;
    font-size:11px;
    letter-spacing:.1em;
  }
}

@media (max-width: 360px){
  body.home-page nav.site-nav{
    flex-wrap:wrap !important;
    gap:4px 13px !important;
    padding:9px 8px !important;
  }
  body.home-page nav.site-nav > a{
    font-size:11px !important;
    padding:5px 0 !important;
  }
  .mobile-actions{grid-template-columns:1fr}
}
