:root{
  --ink:#1A151F;
  --navy:#232935;
  --gold:#E6C068;
  --cream:#F2F1EE;
  --white:#ffffff;

  --text: var(--ink);
  --muted: rgba(26,21,31,.70);
  --muted2: rgba(26,21,31,.55);
  --line: rgba(35,41,53,.14);

  --radius: 7px;
  --radius2: 7px;
  --shadow: 0 18px 50px rgba(26,21,31,.10);
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(230,192,104,.20), transparent 62%),
    radial-gradient(900px 520px at 90% 30%, rgba(35,41,53,.08), transparent 62%),
    linear-gradient(180deg, var(--cream), var(--white));
}

@font-face{
  font-family:"Brown Sugar";
  src: url("/fonts/Brown-Sugar-Regular.woff2") format("woff2"),
       url("/fonts/Brown-Sugar-Regular.otf") format("opentype"),
       local("Brown Sugar");
  font-display: swap;
}

@font-face{
  font-family:"Brittany Signature";
  src: url("/fonts/BrittanySignature.ttf") format("truetype");
  font-display: swap;
}

a{color:inherit; text-decoration:none}
a:hover{color:var(--navy)}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
}

.skip{position:absolute; left:-999px; top:12px; background:var(--white); color:var(--text); border:1px solid var(--line); padding:10px 12px; border-radius:var(--radius)}
.skip:focus{left:12px; z-index:9999}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0}

.brand{display:flex; align-items:center; gap:12px}
.brand__logo{height: 58px; width:auto; object-fit:contain}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__name{font-family:"Cormorant Garamond", "Brown Sugar", serif; font-weight:300; letter-spacing:.5px; font-size:26px}
.brand__sub{font-size:13px; color:var(--muted2); margin-top:3px; letter-spacing:.18em; text-transform:uppercase}

.nav{display:flex; align-items:center; gap:16px}
.nav__link{font-size:14px; color:var(--muted)}

.navToggle{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.45);
  border-radius:var(--radius);
  align-items:center;
  justify-content:center;
  padding:0;
}
.navToggle{position:relative}
.navToggle__line{
  display:block;
  position:absolute;
  left:50%;
  width:20px;
  height:2px;
  background:rgba(26,21,31,.82);
  border-radius:999px;
  transform: translateX(-50%);
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.navToggle__line:nth-child(1){top: 15px}
.navToggle__line:nth-child(2){top: 21px}
.navToggle__line:nth-child(3){top: 27px}
.navToggle.is-open .navToggle__line:nth-child(1){top: 21px; transform: translateX(-50%) rotate(45deg)}
.navToggle.is-open .navToggle__line:nth-child(2){opacity:0}
.navToggle.is-open .navToggle__line:nth-child(3){top: 21px; transform: translateX(-50%) rotate(-45deg)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:var(--radius);
  font-size:14px;
  border:1px solid rgba(35,41,53,.18);
  color:var(--text);
  background: rgba(255,255,255,.55);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(35,41,53,.32)}
.btn:focus{outline:2px solid rgba(230,192,104,.65); outline-offset:3px}

.btn--gold{
  background: linear-gradient(135deg, rgba(230,192,104,.98), rgba(230,192,104,.78));
  border-color: rgba(230,192,104,.75);
}
.btn--ghost{background: rgba(255,255,255,.55)}

.hero{position:relative; height:58vh; min-height:360px; overflow:hidden}
.hero__media{position:absolute; inset:0}
.hero__img{width:100%; height:100%; object-fit:cover; object-position:center bottom}
.hero__veil{position:absolute; inset:0; background: linear-gradient(90deg, rgba(242,241,238,.92) 0%, rgba(242,241,238,.70) 55%, rgba(242,241,238,.18) 86%, rgba(242,241,238,.08) 100%)}
.hero__inner{position:relative; padding: 64px 8px 46px}
.eyebrow{color:var(--muted2); letter-spacing:.18em; text-transform:uppercase; font-size:12px}

.h1{font-family:"Cormorant Garamond", serif; font-weight:300; font-style:italic; margin:10px 0 10px; font-size: clamp(42px, 6.5vw, 64px); line-height:1.06}
.h2{font-family:"Cormorant Garamond", serif; font-weight:300; margin:0; font-size: clamp(30px, 4.5vw, 46px)}
.h3{margin:0; font-size:16px; letter-spacing:.02em; font-weight:700}

.lead{color:var(--muted); max-width: 56ch; line-height:1.75; font-size: 16px; margin: 0 0 18px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px}

.section{padding: 66px 0}
.section--alt{
  background: linear-gradient(180deg, rgba(230,192,104,.10), rgba(230,192,104,0));
  border-top: 1px solid rgba(35,41,53,.10);
  border-bottom: 1px solid rgba(35,41,53,.10);
}
.section__head{display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; margin-bottom: 22px}
.sub{color:var(--muted); margin:0; max-width: 68ch; line-height:1.75}

.cards{display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:14px}
.card{border-radius: var(--radius2); border: 1px solid rgba(35,41,53,.12); padding: 18px; background: rgba(255,255,255,.75); box-shadow: var(--shadow)}
.card p{color:var(--muted); line-height:1.7; margin: 10px 0 0}

.gallery{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:6px}
.shot{margin:0; height: 260px; border-radius: var(--radius2); border: 1px solid rgba(35,41,53,.10); overflow:hidden; background: rgba(255,255,255,.45)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}

.steps{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.step{border-radius: var(--radius2); border: 1px solid rgba(35,41,53,.12); padding: 18px; background: rgba(255,255,255,.75); box-shadow: var(--shadow)}
.step__n{display:inline-block; font-size:11px; color:rgba(35,41,53,.75); letter-spacing:.16em; text-transform:uppercase}
.step p{margin: 10px 0 0; color:var(--muted); line-height:1.7}

.contact{display:grid; grid-template-columns: .9fr 1.1fr; gap:20px; align-items:start}
.contact__cards{display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px}
.infoCard{min-width:0; flex:1 1 auto; border-radius: var(--radius); border: 1px solid rgba(35,41,53,.12); padding: 12px; background: rgba(255,255,255,.75); box-shadow: var(--shadow)}
.infoCard__k{display:block; font-size:11px; color:var(--muted2); letter-spacing:.14em; text-transform:uppercase}
.infoCard__v{display:block; margin-top:6px; color:var(--text); font-size:13px; overflow-wrap:anywhere; word-break:break-word}

.form{overflow:hidden; border-radius: var(--radius2); border: 1px solid rgba(35,41,53,.12); background: rgba(255,255,255,.75); padding: 16px; box-shadow: var(--shadow)}
.form__row{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
.field{display:block; margin-bottom: 12px}
.field__label{display:block; font-size:12px; color:var(--muted2); margin-bottom: 7px}
.field__input{width:100%; min-width:0; max-width:100%; padding: 12px; border-radius: var(--radius); border: 1px solid rgba(35,41,53,.16); background: rgba(242,241,238,.85); color: var(--text)}
.field__input:focus{outline:2px solid rgba(230,192,104,.65); outline-offset: 2px}
.field__input--area{resize: vertical}
input[type="date"].field__input,
input[type="number"].field__input{
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.form__actions{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top: 6px}

.fine{color:var(--muted2); font-size:12px; line-height:1.6}

.footer{padding: 26px 0 34px; border-top: 1px solid rgba(35,41,53,.10)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer__links{display:flex; gap:14px}

/* Mobile nav overlay (used below 820px) */
.navOverlay{
  position:fixed;
  inset:0;
  background: rgba(26,21,31,.28);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:40;
}
.navOverlay.is-open{opacity:1; pointer-events:auto}

/* Intro section */
.intro{padding:76px 0; background:var(--cream); text-align:center}
.intro__inner{display:flex; flex-direction:column; align-items:center}
.intro__eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted2); margin:0 0 20px}
.intro__script{font-family:"Brittany Signature", cursive; font-size:clamp(36px,5.5vw,64px); color:var(--ink); margin:0 0 26px; line-height:1.2}
.intro__body{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:2.2; max-width:50ch; margin:0}

/* Dark services section */
.section--dark{background:var(--navy); padding:76px 0}
.section--dark .h2{color:#fff; text-align:center; margin-bottom:52px}
.section--dark .sub{color:rgba(255,255,255,.55)}
.section--dark .section__head{align-items:center}
.section--dark .step{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12)}
.section--dark .step__n{color:rgba(255,255,255,.45)}
.section--dark .h3{color:#fff}
.section--dark .step p{color:rgba(255,255,255,.55)}
.svcGrid{display:flex; flex-wrap:wrap; justify-content:center; gap:32px 20px; text-align:center}
.svcItem{flex:0 0 160px}
.svcItem__icon{width:60px; height:60px; margin:0 auto 18px; color:rgba(255,255,255,.68)}
.svcItem__icon svg{width:100%; height:100%; display:block}
.svcItem__title{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#fff; font-weight:600; margin:0 0 10px; line-height:1.5}
.svcItem__desc{font-size:13px; color:rgba(255,255,255,.50); line-height:1.8; margin:0}

/* Admin */
.panel{border-radius: var(--radius2); border: 1px solid rgba(35,41,53,.12); padding: 16px; background: rgba(255,255,255,.78); box-shadow: var(--shadow)}
.adminTop{display:flex; align-items:center; justify-content:space-between; gap:12px}
.adminUpload{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top: 12px}
.adminGrid{display:grid; grid-template-columns: .9fr 1.1fr; gap:14px; margin-top: 14px}
.adminHero{border-radius: var(--radius2); border: 1px solid rgba(35,41,53,.12); overflow:hidden; height: 240px; background: rgba(242,241,238,.75)}
.adminHero img{width:100%; height:100%; object-fit:cover; display:block}
.adminGallery{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px}
.adminItem{position:relative; border-radius: var(--radius2); border: 1px solid rgba(35,41,53,.12); overflow:hidden; height: 130px; background: rgba(242,241,238,.75)}
.adminItem img{width:100%; height:100%; object-fit:cover; display:block}
.adminItem__actions{position:absolute; inset:auto 8px 8px 8px; display:flex; gap:8px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; justify-content:center; font-size:11px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.78); border: 1px solid rgba(35,41,53,.14)}
.badge--gold{background: rgba(230,192,104,.70); border-color: rgba(230,192,104,.78)}

@media (max-width: 980px){
  .container{
    padding-left: calc(32px + env(safe-area-inset-left));
    padding-right: calc(32px + env(safe-area-inset-right));
  }
  .hero{height:48vh; min-height:260px}
  .hero__inner{padding: 44px 10px 28px}
  .gallery{grid-template-columns: repeat(2, minmax(0, 1fr)); gap:6px}
  .shot{height: 180px}
  .steps{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
  .contact__cards{grid-template-columns: 1fr}
  .form__row{grid-template-columns: 1fr}
  .adminGrid{grid-template-columns: 1fr}
  .adminGallery{grid-template-columns: 1fr}
}

@media (max-width: 520px){
  .gallery{grid-template-columns: 1fr}
  .shot{height: 220px}
}

@media (max-width: 820px){
  .navToggle{display:inline-flex}
  .nav{
    position:fixed;
    right: 0;
    top: 0;
    height: 100vh;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding: 84px calc(20px + env(safe-area-inset-right)) 18px calc(20px + env(safe-area-inset-left));
    border-left: 1px solid rgba(35,41,53,.12);
    background: rgba(242,241,238,.98);
    width: min(360px, calc(100vw - 56px));
    box-shadow: var(--shadow);
    transform: translateX(102%);
    transition: transform .18s ease;
    z-index:45;
  }
  .nav.is-open{transform: translateX(0)}
  .nav__link{padding: 12px 12px; border-radius: var(--radius); background: rgba(255,255,255,.55)}
}