:root{
  --champagne:#EFE3CF;
  --stone:#6E6357;
  --burgundy:#5A2A33;
  --ivory:#FAF5EE;
  --ink:#3A322B;
  --line:rgba(110,99,87,.18);
  --shadow:0 24px 60px -28px rgba(90,42,51,.28);
  --serif:"Marcellus",Georgia,"Times New Roman",serif;
  --sans:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body,:where(.host){background:var(--ivory)}

main,header,footer{
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;color:var(--burgundy)}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:1.1rem;
  font-weight:600;
}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,5vw,4rem);
  background:rgba(250,245,238,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-mark{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--burgundy);color:var(--champagne);
  font-family:var(--serif);font-size:1rem;letter-spacing:.04em;
}
.brand-name{font-family:var(--serif);font-size:1.18rem;color:var(--burgundy);letter-spacing:.02em}
.brand-name em{font-style:italic;color:var(--stone)}

nav{display:flex;align-items:center}
.nav-links{list-style:none;display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.92rem;letter-spacing:.02em;color:var(--ink);transition:color .25s}
.nav-links a:hover{color:var(--burgundy)}
.nav-cta{
  padding:.55rem 1.25rem;border-radius:999px;
  background:var(--burgundy);color:var(--champagne)!important;
  font-size:.85rem;letter-spacing:.04em;
}
.nav-cta:hover{background:#46202a}

.menu-toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:0;cursor:pointer;padding:.4rem;
}
.menu-toggle span{width:24px;height:2px;background:var(--burgundy);transition:.3s}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;border-radius:999px;
  padding:.85rem 1.8rem;font-size:.92rem;letter-spacing:.03em;
  transition:transform .25s,background .25s,color .25s,border-color .25s;
  cursor:pointer;
}
.btn-primary{background:var(--burgundy);color:var(--champagne)}
.btn-primary:hover{background:#46202a;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--stone);color:var(--stone)}
.btn-ghost:hover{background:var(--stone);color:var(--ivory)}

/* ---------- Hero ---------- */
.hero{padding:clamp(3rem,8vw,6.5rem) clamp(1.2rem,5vw,4rem) clamp(3rem,7vw,5rem)}
.hero-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero-copy{max-width:34rem}
.hero h1{
  font-size:clamp(2.5rem,5.6vw,4.1rem);
  margin:.4rem 0 1.4rem;
}
.lead{font-size:1.08rem;color:var(--stone);margin-bottom:2rem;max-width:30rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}

.hero-frame{
  position:relative;
  background:var(--champagne);
  padding:14px;border-radius:4px;
  box-shadow:var(--shadow);
}
.hero-frame::after{
  content:"";position:absolute;inset:6px;border:1px solid rgba(90,42,51,.25);border-radius:2px;pointer-events:none;
}
.hero-frame img{
  width:100%;height:clamp(380px,52vw,560px);object-fit:cover;border-radius:2px;
}
.hero-frame figcaption{
  font-family:var(--serif);font-style:italic;color:var(--stone);
  text-align:center;padding-top:.8rem;font-size:.95rem;letter-spacing:.04em;
}

/* ---------- About ---------- */
.about{background:var(--champagne);padding:clamp(3.5rem,8vw,6rem) clamp(1.2rem,5vw,4rem)}
.about-inner{max-width:820px;margin:0 auto;text-align:center}
.about h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:1.6rem}
.about-text p{color:var(--ink);font-size:1.05rem;margin-bottom:1.2rem}
.about-text p:nth-of-type(2){color:#564c43}
.about-points{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;margin-top:2.6rem;text-align:center;
}
.about-points li{
  padding:1.4rem .8rem;border-top:2px solid var(--burgundy);
  display:flex;flex-direction:column;gap:.4rem;
}
.about-points strong{font-family:var(--serif);font-size:1.35rem;color:var(--burgundy);font-weight:400}
.about-points span{font-size:.88rem;color:var(--stone)}
.about-points em{font-style:italic}

/* ---------- Section head ---------- */
.section-head{text-align:center;max-width:680px;margin:0 auto clamp(2.2rem,5vw,3.4rem)}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem)}

/* ---------- Services ---------- */
.services{padding:clamp(3.5rem,8vw,6rem) clamp(1.2rem,5vw,4rem)}
.service-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;
}
.service-card{
  background:var(--ivory);border:1px solid var(--line);border-radius:4px;
  padding:2.2rem 1.8rem;position:relative;
  transition:transform .3s,box-shadow .3s;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-num{
  font-family:var(--serif);font-size:.9rem;color:var(--stone);
  letter-spacing:.1em;display:block;margin-bottom:1rem;opacity:.7;
}
.service-card h3{font-size:1.45rem;margin-bottom:.8rem}
.service-card p{font-size:.97rem;color:var(--stone);margin-bottom:1.4rem}
.service-price{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--burgundy);border-top:1px solid var(--line);padding-top:1rem;display:block;
}
.services-note{
  text-align:center;color:var(--stone);font-style:italic;
  margin-top:2.6rem;font-family:var(--serif);font-size:1.1rem;
}

/* ---------- Gallery ---------- */
.gallery{background:var(--champagne);padding:clamp(3.5rem,8vw,6rem) clamp(1.2rem,5vw,4rem)}
.gallery-grid{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem;
}
.gallery-item{
  border:0;padding:8px;cursor:pointer;background:var(--ivory);
  border-radius:3px;box-shadow:0 10px 30px -20px rgba(90,42,51,.4);
  overflow:hidden;transition:transform .3s;
}
.gallery-item:hover{transform:translateY(-3px)}
.gallery-item img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;
  transition:transform .5s ease;
}
.gallery-item:hover img{transform:scale(1.04)}

/* ---------- Contact ---------- */
.contact{padding:clamp(3.5rem,8vw,6rem) clamp(1.2rem,5vw,4rem)}
.contact-inner{max-width:680px;margin:0 auto;text-align:center}
.contact h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:1.2rem}
.contact-lead{color:var(--stone);font-size:1.05rem;margin-bottom:2.4rem}
.contact-rows{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:4px;overflow:hidden;margin-bottom:2.4rem;text-align:left;
}
.contact-row{
  background:var(--ivory);padding:1.2rem 1.5rem;
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:baseline;
}
.contact-label{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);
  flex:0 0 auto;
}
.contact-value{text-align:right;flex:1;color:var(--ink)}
.contact-value a{color:var(--burgundy);border-bottom:1px solid rgba(90,42,51,.3)}
.contact-value em{font-style:italic;color:var(--stone);font-size:.92rem}

/* ---------- Footer ---------- */
footer{background:var(--burgundy);color:var(--champagne);padding:3rem clamp(1.2rem,5vw,4rem)}
.footer-inner{max-width:1100px;margin:0 auto;text-align:center;display:grid;gap:.6rem}
.footer-brand{color:var(--champagne);font-size:1.4rem}
.footer-brand em{color:#d8b8c0}
footer p{font-size:.92rem;color:rgba(239,227,207,.78)}
.footer-meta{font-size:.82rem;letter-spacing:.04em}
.footer-meta a{border-bottom:1px solid rgba(239,227,207,.4)}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:90;
  background:rgba(58,50,43,.92);
  display:flex;align-items:center;justify-content:center;padding:5vw;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox-close{
  position:absolute;top:1.4rem;right:1.8rem;
  background:none;border:0;color:var(--champagne);font-size:2.6rem;line-height:1;
  cursor:pointer;font-family:var(--serif);
}

/* ---------- Mobile CTA ---------- */
.mobile-cta{
  display:none;position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:50;
  text-align:center;padding:.95rem;border-radius:999px;
  background:var(--burgundy);color:var(--champagne);
  font-size:.95rem;letter-spacing:.03em;
  box-shadow:0 14px 34px -10px rgba(90,42,51,.6);
}

/* ---------- Reveal ----------
   Content is visible by default. Only when motion is allowed AND JS has
   armed the reveal (html.js-reveal) do we hide un-revealed elements, then
   fade them in via .is-visible. If JS is off or reduced motion is set,
   everything stays fully visible. */
@media (prefers-reduced-motion:no-preference){
  html.js-reveal .reveal{
    opacity:0;transform:translateY(22px);
    transition:opacity .8s ease,transform .8s ease;
  }
  html.js-reveal .reveal.is-visible{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{margin:0 auto}
  .hero-cta{justify-content:center}
  .lead{margin-left:auto;margin-right:auto}
  .hero-frame{max-width:420px;margin:0 auto;order:-1}
  .about-points{grid-template-columns:1fr;gap:0}
  .about-points li{border-top:1px solid var(--line)}
  .about-points li:first-child{border-top:2px solid var(--burgundy)}
}

@media (max-width:680px){
  .menu-toggle{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ivory);border-bottom:1px solid var(--line);
    padding:.5rem 1.2rem 1.2rem;
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .nav-links.open{max-height:420px}
  .nav-links li{border-top:1px solid var(--line)}
  .nav-links a{display:block;padding:.95rem .2rem}
  .nav-cta{text-align:center;margin-top:.8rem;border-radius:999px}
  .nav-links li:first-child{border-top:0}
  .mobile-cta{display:block}
  body{padding-bottom:4.5rem}
  .contact-row{flex-direction:column;gap:.3rem}
  .contact-value{text-align:left}
}