/* Core styles */
:root{
  --brand:#0e1a15;
  --brand-dark:#0e1a15;
  --ink:#1b1b1b;
  --muted:#666;
  --bg:#f8e0b0;
  --card:#ffffff;
  --ring: rgba(14,26,21,.25);
  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

.container{ width:min(1100px, 92vw); margin-inline:auto; }



.nav{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; padding:4px 0; }
.brand{ display:flex; gap:.6rem; align-items:center; justify-content:center; text-decoration:none; }







nav a{ margin:0 .5rem; text-decoration:none; color:var(--ink); }
nav a:hover{ color:var(--brand-dark); }
nav .btn{ margin-left:.5rem }

.hero{
  background: radial-gradient(1200px 400px at 70% -10%, rgba(18,33,28,.06), transparent 60%), var(--bg);
  padding: 56px 0 32px;
  border-bottom:1px solid #eee;
}
.hero-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: 28px; }
.hero-text h1{font-size: clamp(1.8rem, 2.6vw + .8rem, 3rem); line-height:1.1; margin:0 0 12px}
.hero-text p{margin:0 0 16px; color:var(--muted)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 8px}
.badges{display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:10px 0 0;list-style:none;color:#333}
.badges li{display:flex;align-items:center;gap:8px}
.badges li::before{content:'✓';color:var(--brand);font-weight:700}

.hero-card{ background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow); padding:20px;border:1px solid #eee;align-self:start; animation:fadeUp .5s ease-out both; }
.checklist h3{margin:0 0 8px}
.checklist ul{margin:0;padding-left:18px}

.section{padding:48px 0}
.section.alt{background:var(--bg);border-block:1px solid #eee}

h2{margin:0 0 18px;font-size:1.6rem;color:var(--brand-dark)}
h3{margin:0 0 10px}
h4{margin:0 0 8px}

.grid{display:grid;gap:18px}
.cards{grid-template-columns: repeat(auto-fit, minmax(220px,1fr))}
.card{ background:var(--card);border-radius:var(--radius); padding:18px;border:1px solid #eee;box-shadow:var(--shadow); }

.pillrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.pill{background:#fff;border:1px solid #eee;border-radius:999px;padding:8px 12px}

.gallery{grid-template-columns: repeat(auto-fit, minmax(220px,1fr))}
.gallery figure{margin:0;background:var(--card);border:1px solid #eee;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.gallery img{width:100%;height:180px;object-fit:cover;display:block}
.gallery figcaption{padding:10px 12px;color:var(--muted);font-size:.95rem}
.muted{color:var(--muted)}

.contact{grid-template-columns: 1.1fr .9fr}
.contact-form{display:grid;gap:12px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form label{display:grid;gap:6px}
.contact-form input, .contact-form textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid #ddd;background:#fff;
  outline:none;transition: border .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.hint{color:var(--muted);margin:0}

.btn, .btn-outline{
  display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:700;
  border:1px solid var(--brand); transition: background .2s, color .2s, border .2s;
  animation:fadeUp .5s ease-out both;
}
.btn{ background:var(--brand); color:#fff; }
.btn:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-outline{ color:var(--brand); background:transparent; }
.btn-outline:hover{ background:#fff4ec; }

.footer{padding:24px 0;background:#111;color:#eaeaea;margin-top:24px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-brand{display:flex;gap:10px;align-items:center}
.foot-brand img{width:28px;height:28px}
.foot p{margin:0;color:#cfcfcf}

/* Responsive */
@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  






}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}

/* visibility/layout fixes */

.hero{ padding-top: 32px; }
.nav{ padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 480px){
  




  .hero{ padding-top: 20px; }
}

/* reviews */
.stars{font-size:1.1rem; line-height:1; color: var(--brand); margin: 0 0 6px;}
.review-card{background:var(--card); border:1px solid #e5e5e5; border-radius: var(--radius); padding:14px; box-shadow: var(--shadow);}
.testimonials{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px}

/* stars theme */
.stars{ color:#f5d25c !important; text-shadow: 0 0 4px rgba(245,210,92,.45); }



/* sticky header + fade-away logo */

.topbar .brand{ display:flex; justify-content:center; align-items:center; overflow:hidden; }



/* desktop: much larger logo + slide-out past top edge on scroll */
@media (min-width: 1024px){
  
  .topbar .brand{ display:flex; justify-content:center; align-items:center; overflow:hidden; }
  .topbar 
  /* slide upward beyond the top boundary and fade */
  
}
/* mobile/tablet: keep sane size */
@media (max-width: 1023.98px){
  .topbar 
  
}

/* New logo sizing + scroll-away behavior */
@media (min-width: 1024px){
  .topbar .brand img{
    width: clamp(900px, 55vw, 1600px); /* noticeably bigger on web */
    height: auto;
    margin: 6px auto 0;
    transition: transform .45s ease, opacity .45s ease;
  }
  .topbar.scrolled .brand img{
    transform: translateY(-75%);
    opacity: 0;
  }
}
@media (max-width: 1023.98px){
  .topbar .brand img{
    width: clamp(240px, 40vw, 560px);
    height: auto;
    transition: transform .35s ease, opacity .35s ease;
  }
  .topbar.scrolled .brand img{
    transform: translateY(-45%);
    opacity: 0;
  }
}

/* v3 cache-busting: safe logo sizing */

.nav{ padding:4px 0; }
.topbar .brand{ display:flex; justify-content:center; align-items:center; overflow:hidden; }
.topbar .brand img{
  max-height: 22vh; max-width: 70vw; width:auto; height:auto; margin:6px auto; 
  transition: transform .35s ease, opacity .35s ease, max-height .35s ease, margin .35s ease;
}
@media (min-width:640px){ .topbar .brand img{ max-height:24vh; max-width:64vw; } }
@media (min-width:1024px){ .topbar .brand img{ max-height:26vh; max-width:58vw; } }
.topbar.scrolled .brand{ height:0; margin:0; padding:0; }
.topbar.scrolled .brand img{ opacity:0; transform: translateY(-24px); max-height:0; margin:0 auto; }
.hero{ padding-top:12px; }

/* v4 restored + requests: bigger hero logo, higher white contrast, no section transitions */
:root{ --bg:#f8e0b0; }
body{ background: var(--bg); }

.hero, .section, .section.alt{ background:#ffffff; border:0; }
.section{ margin:0; padding:48px 0; }
.section.alt{ margin:0; padding:48px 0; }

/* Stronger contrast: headings & buttons keep brand color */
h2{ color: var(--brand-dark); }
.btn{ background: var(--brand); color:#fff; }
.btn:hover{ background: var(--brand-dark); }

/* Much bigger hero logo but bounded to viewport so content is visible */
.topbar .brand{ display:flex; justify-content:center; align-items:center; overflow:hidden; }
.topbar .brand img{
  max-height: 55vh;   /* ~3x vs previous 18–22vh */
  max-width: 85vw;
  width:auto; height:auto;
  margin:10px auto 12px;
  transition: transform .45s ease, opacity .45s ease, max-height .45s ease, margin .45s ease;
}
@media (min-width: 640px){
  .topbar .brand img{ max-height: 60vh; max-width: 80vw; }
}
@media (min-width: 1024px){
  .topbar .brand img{ max-height: 62vh; max-width: 72vw; }
}

/* Keep hide-on-scroll behavior */
.topbar.scrolled .brand{ height:0; margin:0; padding:0; }
.topbar.scrolled .brand img{ opacity:0; transform: translateY(-32px); max-height:0; margin:0 auto; }

/* Reduce extra gaps so content appears quickly below */
.nav{ padding:6px 0; }
.hero{ padding-top:12px; }


/* Soft backdrop behind the big logo */
.topbar .brand{ position: relative; }

.topbar .brand img{ position: relative; z-index: 1; }



/* Oval retro background behind logo */

.topbar .brand {
  position: relative;
  padding: 40px 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topbar .brand img {
  position: relative;
  z-index: 1;
  max-height: 55vh;
  max-width: 85vw;
}



/* v4-paper applied: solid warm beige header (no oval) + subtle crumpled paper texture */
.topbar{
  position: sticky; top:0; z-index:1000;
  background: #f3d9a1;
}
.topbar::after{
  content:""; position:absolute; inset:0;
  background-image: url('assets/paper_texture.png');
  background-size: 600px 600px; background-repeat: repeat;
  opacity:.18; mix-blend-mode: multiply; pointer-events:none;
}
.topbar .brand{ position:relative; z-index:1; padding: 36px 0 16px; }