
:root{
  --bg:#0f0909;
  --bg2:#1a0f12;
  --blush:#f4d8d3;
  --rose:#dba19a;
  --rose-deep:#c9827b;
  --line:#e7b6ad;
  --text:#fff1ec;
  --muted:#f0d8d2;
  --card:#120d0d;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(219,161,154,.16), transparent 28%),
    radial-gradient(circle at left 30%, rgba(219,161,154,.14), transparent 22%),
    linear-gradient(180deg,#090607 0%, #12090a 40%, #0d0708 100%);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:0 auto;position:relative;z-index:2}

.glitter{
  position:fixed; inset:auto;
  width:220px; height:220px; z-index:1; pointer-events:none; opacity:.65;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,230,225,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 72%, rgba(232,177,166,.9) 0 1.4px, transparent 3px),
    radial-gradient(circle at 75% 35%, rgba(255,230,225,.95) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 70% 82%, rgba(214,144,134,.95) 0 1.4px, transparent 3px),
    radial-gradient(circle at 48% 45%, rgba(255,246,241,.98) 0 1.1px, transparent 2.2px);
  filter:drop-shadow(0 0 12px rgba(240,196,187,.35));
}
.glitter-1{top:80px; right:3%}
.glitter-2{top:560px; left:3%}
.glitter-3{top:1050px; right:8%}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(6,4,5,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px 0;
}
.brand-logo{
  width:150px;
  object-fit:contain;
}
nav{
  display:flex; align-items:center; gap:30px; flex-wrap:wrap;
  font-size:1.05rem;
}
nav a{
  color:#f2ddd7;
  position:relative;
}
nav a:hover::after,
nav a:first-child::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:2px; background:var(--rose);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; transition:.2s ease; font-weight:700;
}
.btn:hover{transform:translateY(-1px)}
.btn-top,.btn-main{
  background:linear-gradient(180deg, #f5cfc8, #cf8f87);
  color:#1f1112;
  box-shadow:0 8px 18px rgba(207,143,135,.3), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-top{padding:14px 24px}
.btn-main{padding:18px 28px}

.hero{
  position:relative;
  padding:42px 0 0;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:center;
}
.hero-copy{
  padding:30px 0 40px;
}
.script{
  font-family:'Great Vibes',cursive;
  color:var(--rose);
  line-height:1;
}
.small-script{font-size:4rem; margin:0 0 8px}
.big-script{font-size:4.6rem; margin:16px 0 0}
.section-script{font-size:3.5rem; margin:0 0 10px}
h1,h2,h3{
  font-family:'Cormorant Garamond',serif;
  margin:0;
  line-height:.95;
  letter-spacing:.02em;
}
h1{font-size:clamp(4rem,8vw,6.7rem); color:var(--blush)}
h2{font-size:clamp(2.7rem,5vw,4.2rem); color:var(--blush)}
.hero-text{
  color:var(--muted);
  font-size:1.35rem;
  margin:24px 0 0;
  max-width:560px;
}
.line-glow{
  width:180px; height:2px; margin-top:18px;
  background:linear-gradient(90deg, var(--rose), transparent);
  box-shadow:0 0 18px rgba(219,161,154,.5);
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:16px; margin:28px 0 28px;
}
.meta-item{
  display:flex; align-items:center; gap:10px;
  color:#f2ddd7; font-size:1.05rem;
}
.meta-icon{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line);
  color:var(--rose);
}
.hero-collage{
  display:grid;
  grid-template-columns:1fr .55fr;
  grid-template-rows:1fr 1fr auto;
  gap:18px;
  align-items:start;
}
.frame{
  border:2px solid rgba(231,182,173,.7);
  box-shadow:0 16px 36px rgba(0,0,0,.28), 0 0 18px rgba(219,161,154,.12);
  border-radius:18px;
  overflow:hidden;
}
.frame img{
  width:100%; height:100%; object-fit:cover;
}
.hero-main-photo{
  grid-row:1 / span 2;
  min-height:620px;
}
.hero-side-photo{
  min-height:295px;
  transform:rotate(1deg);
}
.hero-side-photo.bottom{transform:rotate(-2deg)}
.paint-tag{
  grid-column:1 / -1;
  justify-self:end;
  margin-right:22px;
  margin-top:-6px;
  padding:14px 24px;
  background:linear-gradient(90deg, rgba(244,216,211,.95), rgba(214,157,148,.92));
  color:#2b1718;
  font-family:'Great Vibes',cursive;
  font-size:2.1rem;
  border-radius:8px 30px 8px 30px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.hero-wave{
  height:92px;
  margin-top:22px;
  background:
    linear-gradient(180deg, transparent 0%, transparent 20%, #f5e7e1 21%, #f5e7e1 100%);
  clip-path:polygon(0 58%, 8% 68%, 18% 60%, 31% 72%, 43% 58%, 56% 72%, 68% 56%, 80% 70%, 91% 58%, 100% 70%, 100% 100%, 0 100%);
}

.section{
  position:relative;
  padding:40px 0 56px;
}
.services-section{
  background:#f5e7e1;
  color:#1a0f10;
}
.center{text-align:center}
.section-title{
  margin-bottom:28px;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.service-card{
  background:#111;
  color:var(--text);
  border:2px solid rgba(223,171,161,.85);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 14px 30px rgba(0,0,0,.14);
}
.service-image{height:240px}
.service-image img{width:100%; height:100%; object-fit:cover}
.service-content{
  padding:18px 18px 0;
  text-align:center;
}
.service-content h3{
  font-size:2rem;
  color:#f3ded8;
  margin-bottom:10px;
}
.service-content p{
  color:#f0d8d2;
  min-height:88px;
  margin:0 0 18px;
}
.price{
  margin-top:auto;
  text-align:center;
  padding:16px;
  border-top:2px solid rgba(223,171,161,.45);
  background:linear-gradient(180deg, #e5b2a7, #d5968d);
  color:#120b0b;
  font-weight:800;
  font-size:2rem;
  font-family:'Cormorant Garamond',serif;
}

.about-luxury{
  background:linear-gradient(180deg,#0d0708 0%, #12090a 100%);
}
.about-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:24px;
  align-items:center;
}
.about-copy h2{
  margin-bottom:18px;
}
.about-copy p{
  color:var(--muted);
  font-size:1.14rem;
  max-width:520px;
}
.about-icons{
  display:flex;
  gap:18px;
  margin-top:28px;
  flex-wrap:wrap;
}
.icon-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:#f1ddd7;
  text-align:center;
  min-width:110px;
}
.icon-circle{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line);
  color:var(--rose);
  font-size:1.4rem;
}
.about-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#000;
}
.about-image{
  min-height:340px;
}
.about-image img{
  width:100%; height:100%; object-fit:cover;
}
.info-panel{
  background:rgba(15,9,9,.82);
  padding:28px;
  color:var(--text);
}
.info-panel h3{
  font-size:2.3rem;
  margin-bottom:16px;
}
.info-panel ol{
  padding-left:22px;
  color:var(--muted);
  font-size:1.05rem;
}
.full-width{width:100%}
.request-box{max-width:760px; margin:0 auto}
.request-box p{font-size:1.08rem}

.footer-bar{
  background:#0b0607;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-bar-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  padding:18px 0;
  color:#f0d8d2;
}
.footer-bar-grid > :last-child{text-align:right}
.footer-script{
  font-size:2.8rem;
}

@media (max-width: 1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 900px){
  .nav{flex-wrap:wrap; justify-content:center}
  .btn-top{width:100%}
  .hero-grid,.about-grid{grid-template-columns:1fr}
  .hero-main-photo{min-height:420px}
  .hero-collage{grid-template-columns:1fr 1fr}
  .paint-tag{grid-column:1/-1; justify-self:center; margin-right:0}
  .about-gallery{grid-template-columns:1fr}
  .about-image{min-height:280px}
}
@media (max-width: 700px){
  nav{justify-content:center; gap:18px}
  .brand-logo{width:130px}
  .small-script{font-size:3.1rem}
  .big-script{font-size:3.5rem}
  .section-script{font-size:2.8rem}
  h1{font-size:3.5rem}
  h2{font-size:2.6rem}
  .hero-text{font-size:1.1rem}
  .hero-meta{flex-direction:column; align-items:flex-start}
  .hero-collage{grid-template-columns:1fr}
  .hero-side-photo{min-height:240px}
  .hero-main-photo{grid-row:auto}
  .services-grid{grid-template-columns:1fr}
  .service-image{height:220px}
  .footer-bar-grid{grid-template-columns:1fr; text-align:center}
  .footer-bar-grid > :last-child{text-align:center}
  .glitter{display:none}
}
