:root{--bg:#FCF7F1;--card:#fff;--ink:#2A2928;--accent:#2F6E6D;--accent2:#225453;--muted:#6F6B68}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;margin:0 0 .5rem}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}

.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
border-bottom:1px solid #eee;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem}
.brand .logo{height:60px;width:auto}
.nav{margin-left:auto;display:none;gap:1rem;align-items:center}
.nav a{padding:.5rem .75rem;border-radius:.6rem}
.nav .btn-primary{color:#fff}.nav-toggle{margin-left:auto;border:0;background:transparent;font-size:1.3rem;display:block}
@media(min-width:920px){.nav{display:flex}.nav-toggle{display:none}}

.btn{display:inline-block;padding:.9rem 1.15rem;border-radius:.9rem;font-weight:700;border:1px solid var(--accent2);
box-shadow:0 6px 18px rgba(0,0,0,.06);transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.10)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.btn-outline{background:#fff;color:var(--accent2);border-color:var(--accent2)}.btn-xl{padding:1rem 1.3rem;font-size:1.05rem}

.hero-bg{height:40vh;min-height:40vh;background:var(--hero) center top/contain no-repeat;position:relative}
.hero-bg:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.1))}
.hero-inner{position:relative;max-width:1100px;margin:0 auto;padding:5rem 1rem;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.3);text-align:center}
.hero-logo{width:min(70vw,480px);filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));margin:0 auto 1.2rem}
.hero .muted{color:#eee}

.page{max-width:1100px;margin:0 auto;padding:2rem 1rem 3rem}.page-hero.center{text-align:center}.page-cta{margin:1rem 0}

.gallery{max-width:1100px;margin:-2rem auto 1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;padding:0 1rem}
.gallery img{border-radius:.8rem;box-shadow:0 8px 22px rgba(0,0,0,.06);object-fit:cover;height:100%}
@media(max-width:920px){.gallery{grid-template-columns:1fr}}

.map{max-width:1100px;margin:0 auto;padding:2rem 1rem}
#map{height:420px;border-radius:12px;overflow:hidden;border:1px solid #eee;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.muted{color:var(--muted)} .small{font-size:.9rem}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.svc-card{background:var(--card);border:1px solid #eee;border-radius:1rem;padding:1.25rem}
.price-list{margin:.5rem 0 0;padding-left:1.25rem}.tip{font-size:.9rem;color:var(--muted)}
.policies-box{background:#fff;border:1px solid #eee;border-radius:1rem;padding:1rem;margin:2rem 0}

.scheduler{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
.policies{background:var(--card);border:1px solid #eee;border-radius:1rem;padding:1rem;height:fit-content}
.deposit-banner{background:#fff3cd;border:1px solid #ffe08a;border-radius:.8rem;padding:1rem;margin:1rem auto;max-width:900px}

.site-footer{background:#fff;border-top:1px solid #eee}
.footer-flex{max-width:1100px;margin:0 auto;padding:2rem 1rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.list-plain{list-style:none;padding:0;margin:0}.muted{color:var(--muted)} .small{font-size:.9rem}
@media(max-width:920px){.svc-grid{grid-template-columns:1fr}.scheduler{grid-template-columns:1fr}.footer-flex{grid-template-columns:1fr}}

.static-map{display:block;width:100%;height:auto;border-radius:.8rem;box-shadow:0 8px 22px rgba(0,0,0,.06);border:1px solid #eee}

.hero-inner a.btn.btn-primary.btn-xl {
    margin-top: 0.5rem !important;
}
.hero-inner p.muted.small {
    margin-top: 0.25rem !important;
}

.hero-inner { padding-top: 1rem !important; }

.hero-inner p.muted.small {
    margin-top: -0.5rem !important;
}

.hero-inner p.muted.small {
    margin-top: -1rem !important;
}

.hero-inner p.muted.small {
    color: var(--accent2) !important;
}

.hero-inner p.muted.small {
    color: #58dcff !important;
}


/* Force desktop layout on all screen sizes */
.nav{display:flex !important;}
.gallery{grid-template-columns:repeat(3,1fr) !important;}
.svc-grid{grid-template-columns:repeat(3,1fr) !important;}
.footer-flex{grid-template-columns:2fr 1fr 1fr !important;}
.page{max-width:1100px !important; margin:0 auto !important; padding:2rem 1rem 3rem !important;}
#map{height:420px !important;}


/* Scale down elements on small screens while keeping desktop layout */
@media(max-width:480px){
    html{font-size:90%;}
    .hero-bg{height:30vh;min-height:30vh;}
    .hero-logo{width:min(60vw,400px);}
    .gallery img, .svc-grid img, .map img, #map{max-width:100%; height:auto;}
    .btn{padding:0.7rem 1rem; font-size:0.9rem;}
    .footer-flex{gap:0.5rem;}
}


/* --- Mobile scaling to preserve desktop format/ratios --- */
@media (max-width: 480px){
  html{ font-size:14px; }                 /* slight global scale down */
  .page{ padding:1rem 0.5rem 2rem; }      /* tighter padding on small screens */

  /* Keep hero image full but smaller to fit */
  .hero-bg{ height:32vh; min-height:32vh; }
  .hero-logo{ width:min(60vw, 408px); }   /* ~15% smaller than desktop cap */

  /* Ensure all images keep aspect ratio and scale down */
  img{ max-width:100%; height:auto; }

  /* Buttons & text sizing tweaks */
  .btn.btn-xl{ padding:0.9rem 1.4rem; font-size:1rem; }
  .muted.small{ font-size:0.9rem; }
}


@media (max-width: 480px){
  /* Further reduce hero logo size */
  .hero-logo{ width:min(50vw, 340px); }

  /* Scale down tagline text if present */
  .hero-inner .tagline{ font-size:1rem; }

  /* Scale down locations text */
  .hero-inner p.muted.small{ font-size:0.8rem; }
}


@media (max-width: 480px){
  /* Further reduction for closer desktop ratio match */
  .hero-logo{ width:min(40vw, 280px); }

  .hero-inner .tagline{ font-size:0.9rem; }
  .hero-inner p.muted.small{ font-size:0.7rem; }
}


/* Black outline for hero text */
.hero-inner .tagline,
.hero-inner p.muted.small,
.hero-inner h1,
.hero-inner h2,
.hero-inner h3 {
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}


/* Black outline for logo image */
.hero-logo {
    filter: drop-shadow(-1px -1px 0 #000)
            drop-shadow(1px -1px 0 #000)
            drop-shadow(-1px 1px 0 #000)
            drop-shadow(1px 1px 0 #000);
}

/* Black outline for any logo text */
.brand, .brand * {
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000 !important;
}