:root{
}:root{
  --ink:#111;          /* main text */
  --muted:#f2f9f2;        /* muted text */
  --brand:#d60000;     /* bold red accent */
  --alt:#fafafa;       /* soft light background */
  --card:#fff;         /* card/section backgrounds */
}

*{box-sizing:border-box} img{max-width:100%; display:block}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink)}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Nav */
.nav{position:sticky; top:0; background:#fff; border-bottom:1px solid #e9edf3; z-index:10}
.nav .container{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{font-weight:800; letter-spacing:.3px}
.nav a{margin-left:16px; text-decoration:none; color:var(--ink)}
.nav a.btn{padding:8px 12px; border:1px solid #e2e8f0; border-radius:8px}
.nav a.btn:hover{background:#eef4fb}

/* Hero */
.hero{background:linear-gradient(135deg,#eaf6ff,#fff); padding:70px 0}
.hero-inner{display:grid; gap:26px; grid-template-columns:1.2fr .8fr; align-items:center}
.hero h1{font-size:40px; line-height:1.15; margin:0 0 8pxcolor:#d60000;
 }
.hero p{color:var(--muted); margin:0 0 18px}
.hero-art{height:260px; border-radius:16px; background:
  radial-gradient(120px 80px at 25% 30%, #c7e6ff, transparent 70%),
  radial-gradient(120px 80px at 70% 70%, #f4f2f1, transparent 70%),
  radial-gradient(180px 140px at 80% 25%, #e0ffd6, transparent 65%),
  #fff; border:1px solid #e7edf4}

/* Buttons */
.btn{display:inline-block; text-decoration:none; cursor:pointer}
.btn-primary{background:var(--brand); color:#fff; padding:12px 18px; border-radius:10px}
.btn-primary:hover{filter:brightness(.96)}

/* Sections */
.section{padding:60px 0}
.section.alt{background:var(--alt)}
h2{margin:0 0 14px; font-size:28px}

/* Cards & Grids */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card); border:1px solid #e9edf3; border-radius:12px; padding:18px}

/* Text helpers */
.note{color:var(--muted); font-size:14px; margin-top:12px}

/* Gallery */
.gallery figure{margin:0; border:1px solid #e9edf3; border-radius:10px; overflow:hidden; background:#fff}
.gallery figcaption{padding:10px 12px; font-size:14px; color:#48556d}

/* About layout */
.about{display:grid; gap:20px; grid-template-columns:1.2fr .8fr}
.bio ul{margin:10px 0 0 18px}

/* Contact form */
.contact{display:grid; gap:10px; max-width:620px; margin-top:12px}
.contact input,.contact textarea{width:100%; padding:12px 14px; border:1px solid #dbe3ee; border-radius:10px}
.contact button{border:0}

/* Footer */
.footer{border-top:1px solid #e9edf3; padding:26px 0; background:#fff; text-align:center}
.tiny{color:#667; font-size:13px}

/* Responsive */
@media (max-width:860px){
  .hero-inner,.about{grid-template-columns:1fr}
}
body{
  background:#0f0f0f;
  color:#fff;
}
.nav, .footer{
  background:#0f0f0f;
  border-color:#1f1f1f;
}
.section.alt{
  background:#1a1a1a;
}
.card{
  background:#111;
  border-color:#222;
}
a, .nav a{
  color:#fff;
}
.logo{
  color:#d60000;
}
.btn.btn-primary{
  background:#d60000;
  border-color:#b40000;
}
.hero{
  background:#0f0f0f;      /* dark hero */
}
.hero h1{
  color:#ffffff;           /* white title */
}
.hero p{
  color:#cccccc;           /* softer subtitle */
}
.btn.btn-primary{
  background:#d60000;      /* red button */
  border:0;
}
.btn.btn-primary:hover{
  filter:brightness(.95);
}
/* ===== Mobile polish ===== */
@media (max-width: 860px){
  .section{ padding:48px 0; }
  .hero{ padding:56px 0; }
  .hero h1{ font-size:32px; line-height:1.15; }
  .hero p{ font-size:15px; }

  .container{ padding:0 16px; }
  .grid{ gap:14px; }
  .about{ grid-template-columns:1fr; }

  /* Gallery thumbnails: shorter on phones */
  .gallery img{ height:200px; object-fit:cover; }
}

@media (max-width: 480px){
  .section{ padding:42px 0; }
  .hero{ padding:48px 0; }
  .hero h1{ font-size:28px; }
  .hero p{ font-size:14px; }

  /* Tighten spacing further on very small screens */
  .grid{ gap:12px; }
  .gallery img{ height:160px; }

  /* Bigger tap targets */
  .btn{ padding:12px 16px; }
  .contact input, .contact textarea{
    padding:14px 16px;
    font-size:16px; /* avoids iOS zoom */
  }

  /* Keep cards readable on dark theme */
  .card{ border-color: rgba(255,255,255,.08); }
}/* ===== TOP NAME HEADER ===== */
.site-header {
  text-align: center;
  padding: 45px 0 15px;
}

.site-header h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--accent); /* Same red as buttons */
  letter-spacing: 1px;
}

.site-header p {
  font-size: 18px;
  opacity: 0.9;
  color: var(--light);
}

/* -------------------------
   MOBILE RESPONSIVE FIXES
--------------------------*/
@media (max-width: 1024px) {
  .container {
    width: 90%;
  }

  .grid.two {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .grid.gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  header.site-header h1 {
    font-size: 2rem;
  }

  .hero-text h1 {
    font-size: 1.9rem;
  }

  .hero-inner {
    padding: 2rem 0;
  }
}

@media (max-width: 700px) {
  .grid.gallery {
    grid-template-columns: 1fr;
  }

  .btn,
  .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    margin: 1rem 0;
  }

  .contact input,
  .contact textarea {
    width: 100%;
  }

  .card {
    padding: 1.5rem;
  }

  .rates li {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  header.site-header h1 {
     font-size: 1.6rem;
  }

  .hero-text h1 {
     font-size: 1.5rem;
  }

  body {
    font-size: 0.95rem;
  }
}