:root{
  --bg:#2a323d;             /* darker grey-blue */
  --bg-alt:#232a34;         /* slightly deeper for alternating sections */
  --ink:#f5f2ec;            /* warm cream text on dark */
  --ink-soft:#c8ccd3;
  --mute:#8a929c;
  --line:#3d4552;
  --line-soft:#353c47;
  --accent:#f5f2ec;
  --card:#323b48;
  --gold:#c9a253;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max: 1360px;
  --pad: clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---------- Typography ---------- */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0;
}
h1{font-size:clamp(2.5rem, 6vw, 5.25rem)}
h2{font-size:clamp(1.9rem, 4vw, 3.25rem)}
h3{font-size:1.35rem;letter-spacing:-0.01em;line-height:1.2}

.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
  color:var(--mute);
  margin:0 0 1rem;
  font-weight:500;
}
.lede{
  font-size:clamp(1rem, 1.4vw, 1.15rem);
  color:var(--ink-soft);
  max-width:52ch;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding: 20px var(--pad);
  background:rgba(42,50,61,0.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
}
.brand{
  font-family:var(--serif);
  font-size:1.15rem;
  letter-spacing:0.14em;
  font-weight:500;
}
.brand-dot{color:var(--mute)}
.nav nav{display:flex;gap:22px;align-items:center}
.nav nav a{
  font-size:0.82rem;
  color:var(--ink-soft);
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:color .2s;
}
.menu-btn{display:none;flex-direction:column;gap:5px;padding:8px;z-index:50}
.menu-btn span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s, opacity .3s}
.menu-btn:hover span{background:var(--gold)}
.menu-btn.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn.is-open span:nth-child(2){opacity:0}
.menu-btn.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width: 720px){
  .nav{padding:14px 20px}
  .brand{font-size:0.95rem;letter-spacing:0.12em;position:relative;z-index:55}
  .menu-btn{display:flex;position:relative;z-index:55}
  .nav nav{
    position:fixed;top:0;left:0;
    width:100vw;height:100vh;height:100dvh;
    background:var(--bg);
    display:flex !important;
    flex-direction:column;
    justify-content:center;align-items:center;
    gap:22px;
    padding:80px 24px 40px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease, visibility .3s;
    z-index:50;
    overflow-y:auto;
  }
  .nav nav.is-open{opacity:1;visibility:visible;pointer-events:auto}
  .nav nav a{
    font-family:var(--serif);
    font-size:1.6rem;
    letter-spacing:-0.01em;
    text-transform:none;
    color:var(--ink);
    padding:6px 0;
  }
  .nav .nav-cta{
    padding:14px 36px;margin-top:12px;
    font-family:var(--sans);font-size:0.85rem;
    text-transform:uppercase;letter-spacing:0.14em;
    background:var(--ink);color:var(--bg);
  }
}
.nav nav a:hover{color:var(--ink)}
.nav .nav-cta{
  padding:8px 16px;
  border:1px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
}
.nav .nav-cta:hover{background:var(--ink);color:var(--bg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  font-size:0.85rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  transition:all .2s;
  border:1px solid var(--ink);
  font-weight:500;
}
.btn-dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-dark:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}

/* ---------- Hero ---------- */
.hero{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(40px, 6vw, 96px) var(--pad) clamp(60px, 8vw, 120px);
  align-items:center;
  max-width:var(--max);
  margin:0 auto;
}
.hero-media{
  aspect-ratio: 4/5;
  overflow:hidden;
  background:var(--card);
}
.hero-media img{object-position: center 30%}
.hero-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform 6s ease;
}
.hero-media:hover img{transform:scale(1.08)}
.hero-copy h1{margin-bottom:1.25rem}
.hero-copy .lede{margin-bottom:2rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width: 800px){
  .hero{grid-template-columns:1fr; gap:32px; padding-top:32px; padding-bottom:60px}
  .hero-media{aspect-ratio: 4/5; order:-1; max-height:60vh}
  .hero-media img{object-position: center 25%}
}

/* ---------- Section head ---------- */
.section-head{
  padding: 0 var(--pad);
  max-width:var(--max);
  margin: 0 auto clamp(30px, 4vw, 56px);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.section-head h2{max-width:22ch}

/* ---------- Work grid ---------- */
.work{padding: clamp(48px, 6vw, 88px) 0}
.filters{
  display:flex;gap:6px;margin-top:8px;
}
.filter{
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);
  font-size:0.78rem;letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:all .2s;
  background:transparent;
}
.filter:hover{border-color:var(--ink);color:var(--ink)}
.filter.is-active{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap: 16px;
  padding: 0 var(--pad);
  max-width:var(--max);
  margin: 0 auto;
}
.card{
  position:relative;
  overflow:hidden;
  background:var(--card);
  cursor:pointer;
  transition:opacity .3s;
  border-radius:2px;
}
.card.hidden{display:none}
.card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease, filter .4s;
}
.card:hover img{transform:scale(1.04);filter:brightness(0.9)}
.card .meta{
  position:absolute;left:16px;bottom:16px;right:16px;
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s, transform .3s;
  display:flex;justify-content:space-between;align-items:end;gap:12px;
  text-shadow:0 2px 12px rgba(0,0,0,0.6);
}
.card:hover .meta{opacity:1;transform:translateY(0)}
.card .meta .title{
  font-family:var(--serif);font-size:1.15rem;line-height:1.15;
}
.card .meta .year{
  font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;opacity:.85;
}
.card .tag{
  position:absolute;top:14px;left:14px;
  background:rgba(42,50,61,0.9);
  padding:4px 10px;border-radius:999px;
  font-size:0.62rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink);
  backdrop-filter:blur(6px);
}
/* Uniform 4:3 gallery grid — clean, magazine-editorial spacing */
.card{grid-column: span 4; aspect-ratio: 4/3}
@media (max-width: 900px){
  .card{grid-column: span 6}
}
@media (max-width: 560px){
  .card{grid-column: span 12}
}

/* ---------- Services ---------- */
.services{padding: clamp(48px, 6vw, 88px) 0;background:var(--bg-alt)}
.service-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap: 32px;
  padding: 0 var(--pad);
  max-width:var(--max);margin:0 auto;
}
.service{padding-top:24px;border-top:1px solid var(--line)}
.service-num{
  font-family:var(--serif);font-size:.9rem;color:var(--mute);margin-bottom:32px;
}
.service h3{margin-bottom:12px}
.service p{color:var(--ink-soft);font-size:0.95rem}
@media (max-width: 900px){.service-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.service-grid{grid-template-columns:1fr}}

/* ---------- Clients ---------- */
.clients{padding: clamp(48px, 6vw, 80px) 0}
.client-list{
  list-style:none;padding: 0 var(--pad);margin:0;
  max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:12px 24px;
}
.client-list li{
  font-family:var(--serif);
  font-size:clamp(1.3rem, 2.4vw, 2rem);
  color:var(--ink-soft);
  padding-right:24px;
  border-right:1px solid var(--line);
  line-height:1.1;
  transition:color .2s;
}
.client-list li:last-child{border-right:0}
.client-list li:hover{color:var(--gold)}

/* ---------- About ---------- */
.about{padding: clamp(48px, 6vw, 88px) var(--pad); background:var(--bg-alt)}
.about-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns: 1fr 1fr;gap: clamp(24px, 6vw, 80px);
  align-items:center;
}
.about-copy h2{margin-bottom:20px}
.about-copy p{color:var(--ink-soft);margin:0 0 16px}
.about-copy .btn{margin-top:16px}
.about-media{aspect-ratio: 4/5;overflow:hidden}
.about-media img{width:100%;height:100%;object-fit:cover}
@media (max-width: 800px){.about-inner{grid-template-columns:1fr}.about-media{aspect-ratio: 4/3;order:-1}}

/* ---------- Contact ---------- */
.contact{padding: clamp(56px, 7vw, 100px) var(--pad); background:#1c222a; color:var(--ink)}
.contact .eyebrow{color:var(--mute)}
.contact .lede{color:var(--ink-soft)}
.contact-inner{max-width: 720px; margin: 0 auto; text-align:center}
.contact h2{margin-bottom:16px}
.contact-form{
  margin-top: 40px;
  display:flex;flex-direction:column;gap:18px;text-align:left;
}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.contact-form .row{grid-template-columns:1fr}}
.contact-form label{display:flex;flex-direction:column;gap:8px}
.contact-form span{
  font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:#8a8a8a;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);padding:12px 0;font:inherit;font-size:1rem;
}
.contact-form select option{background:var(--bg)}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{outline:none;border-bottom-color:var(--gold)}
.contact-form textarea{resize:vertical}
.contact-form .btn{align-self:flex-start;background:var(--ink);color:var(--bg);border-color:var(--ink)}
.contact-form .btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.contact-alt{margin-top:40px;color:var(--mute);font-size:0.9rem}
.contact-alt a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .2s}
.contact-alt a:hover{border-bottom-color:var(--gold)}
.contact-alt .sep{margin:0 12px;color:var(--line)}
.contact-alt .pricing-note{margin-top:20px;font-size:0.82rem;color:var(--mute);font-style:italic;max-width:44ch;margin-left:auto;margin-right:auto}

/* ---------- Footer ---------- */
.footer{
  padding: 40px var(--pad);
  text-align:center;
  color:var(--mute);
  font-size:0.82rem;
  letter-spacing:0.06em;
}
.footer p{margin:4px 0}
.footer-sub{opacity:0.7}
.footer-sub a{border-bottom:1px solid var(--line);transition:border-color .2s}
.footer-sub a:hover{border-bottom-color:var(--ink)}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(10,10,10,0.96);
  z-index:100;display:none;align-items:center;justify-content:center;
  padding:40px;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:min(1400px, 92vw);max-height:82vh;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;color:#fff;font-size:2.5rem;
  background:rgba(255,255,255,0.06);border-radius:999px;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,0.16)}
.lightbox-close{top:24px;right:24px}
.lightbox-prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:24px;top:50%;transform:translateY(-50%)}
.lightbox-caption{
  position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;
  font-family:var(--serif);font-size:1rem;letter-spacing:0.02em;
}
.lightbox-caption .year{opacity:.6;margin-left:12px;letter-spacing:0.2em;font-size:0.72rem;text-transform:uppercase}
@media (max-width:600px){
  .lightbox-close{top:12px;right:12px}
  .lightbox-prev{left:12px}
  .lightbox-next{right:12px}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Hero trust bar ---------- */
.hero-trust{
  margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:0.85rem;color:var(--ink-soft);letter-spacing:0.03em;
  padding-top:20px;border-top:1px solid var(--line);
}
.hero-trust span:first-child{color:var(--gold);letter-spacing:0.15em;font-size:0.95rem}
@media (max-width:560px){.hero-trust{font-size:0.78rem;gap:10px}}

/* ---------- Pricing ---------- */
.pricing{padding: clamp(56px, 7vw, 96px) 0;background:var(--bg)}
.pricing-sub{color:var(--ink-soft);margin-top:8px}
.pricing-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
  padding: 0 var(--pad);max-width:var(--max);margin: 0 auto;
}
.tier{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  padding:32px 28px;
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.tier:hover{transform:translateY(-4px);box-shadow:0 20px 60px -20px rgba(0,0,0,.15);border-color:#c9a253}
.tier-featured{
  background:var(--ink);color:var(--bg);
  border-color:var(--ink);
  transform:scale(1.02);
}
.tier-featured:hover{transform:scale(1.02) translateY(-4px)}
.tier-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:#c9a253;color:var(--ink);
  padding:6px 16px;border-radius:999px;
  font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;
}
.tier-name{
  font-family:var(--sans);font-size:0.78rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--mute);margin:0 0 14px;font-weight:500;
}
.tier-featured .tier-name{color:#a8a29b}
.tier-price{margin:0 0 24px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tier-price .from{font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute)}
.tier-featured .tier-price .from{color:#a8a29b}
.tier-price .amount{
  font-family:var(--serif);font-size:2.4rem;font-weight:400;letter-spacing:-0.02em;
  color:var(--ink);
}
.tier-featured .tier-price .amount{color:var(--bg)}
.tier-list{
  list-style:none;padding:0;margin:0 0 20px;
  display:flex;flex-direction:column;gap:10px;
}
.tier-list li{
  padding-left:22px;position:relative;
  font-size:0.92rem;color:var(--ink-soft);line-height:1.45;
}
.tier-featured .tier-list li{color:#c0bdb7}
.tier-list li::before{
  content:'';position:absolute;left:0;top:9px;
  width:10px;height:1.5px;background:var(--ink);
}
.tier-featured .tier-list li::before{background:var(--bg)}
.tier-note{
  font-size:0.78rem;color:var(--mute);
  margin:0 0 24px;font-style:italic;
}
.tier-featured .tier-note{color:#8a8580}
.tier .btn{align-self:flex-start;margin-top:auto}
.tier-featured .btn.btn-dark{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.tier-featured .btn.btn-dark:hover{background:transparent;color:var(--bg);border-color:var(--bg)}
.btn-small{padding:10px 20px;font-size:0.78rem}
.pricing-footer{
  text-align:center;padding:32px var(--pad) 0;color:var(--ink-soft);
  font-size:0.92rem;
}
.pricing-footer a{border-bottom:1px solid var(--ink);transition:opacity .2s}
.pricing-footer a:hover{opacity:.7}
@media (max-width: 900px){
  .pricing-grid{grid-template-columns:1fr;max-width:520px}
  .tier-featured{transform:none}
  .tier-featured:hover{transform:translateY(-4px)}
}

/* ---------- Testimonials ---------- */
.testimonials{padding: clamp(56px, 7vw, 96px) 0;background:#efeae3}
.testimonial-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
  padding: 0 var(--pad);max-width:var(--max);margin:0 auto;
}
.testimonial{
  background:var(--bg);
  padding:32px 28px;
  border-left:3px solid var(--ink);
  margin:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  transition:transform .25s ease;
}
.testimonial:hover{transform:translateY(-4px)}
.quote{
  font-family:var(--serif);
  font-size:1.15rem;line-height:1.5;
  color:var(--ink);margin:0;
  letter-spacing:-0.005em;
}
.testimonial footer{display:flex;flex-direction:column;gap:2px}
.attrib-name{font-weight:500;font-size:0.92rem;color:var(--ink)}
.attrib-role{font-size:0.78rem;color:var(--mute);letter-spacing:0.05em}
.testimonial-cta{
  text-align:center;padding:32px var(--pad) 0;color:var(--ink-soft);font-size:0.92rem;
}
.testimonial-cta a{border-bottom:1px solid var(--ink)}
@media (max-width: 900px){.testimonial-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

/* ---------- Contact CTA row ---------- */
.contact-cta-row{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:28px 0 16px;
}
.btn-invert{background:transparent;color:var(--bg);border-color:var(--bg)}
.btn-invert:hover{background:var(--bg);color:var(--ink)}
.btn-invert-dark{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.btn-invert-dark:hover{background:transparent;color:var(--bg)}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-fab{
  position:fixed;bottom:24px;right:24px;
  background:#25D366;color:#fff;
  border-radius:999px;
  padding:14px 20px 14px 16px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 10px 30px -10px rgba(37,211,102,0.6), 0 2px 8px rgba(0,0,0,0.15);
  z-index:60;
  transition:transform .25s ease, box-shadow .25s ease;
  font-family:var(--sans);font-size:0.9rem;font-weight:500;
  text-decoration:none;
}
.whatsapp-fab:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 40px -10px rgba(37,211,102,0.7), 0 4px 12px rgba(0,0,0,0.2)}
.whatsapp-fab svg{flex-shrink:0}
.whatsapp-label{white-space:nowrap}
@media (max-width:560px){
  .whatsapp-fab{bottom:16px;right:16px;padding:12px}
  .whatsapp-label{display:none}
}

/* ---------- Booking modal ---------- */
.booking-modal{
  position:fixed;inset:0;background:rgba(15,20,26,0.82);
  z-index:110;display:none;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(8px);
}
.booking-modal.is-open{display:flex;animation:fadeIn .25s ease}
.whatsapp-fab{transition:transform .25s ease, box-shadow .25s ease, opacity .2s}
body.modal-open .whatsapp-fab{opacity:0;pointer-events:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.booking-inner{
  background:var(--bg-alt);
  max-width:560px;width:100%;
  padding:40px 36px 32px;
  position:relative;
  border-radius:2px;
  max-height:90vh;overflow-y:auto;
  animation:slideUp .35s ease;
  border:1px solid var(--line);
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.booking-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;font-size:1.8rem;color:var(--mute);
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;transition:background .2s, color .2s;
}
.booking-close:hover{background:rgba(255,255,255,0.06);color:var(--ink)}
.booking-header{text-align:center;margin-bottom:24px}
.booking-header h3{margin:6px 0 10px;font-size:1.8rem}
.booking-sub{color:var(--ink-soft);font-size:0.95rem;margin:0}
.booking-options{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;
}
.book-opt{
  background:var(--card);
  border:1px solid var(--line);
  padding:18px 16px;
  display:flex;flex-direction:column;gap:4px;
  text-decoration:none;color:var(--ink);
  transition:border-color .2s, transform .2s, background .2s;
}
.book-opt:hover{border-color:var(--gold);transform:translateY(-2px)}
.book-opt-wa{background:#243d31;border-color:#3a6b52}
.book-opt-wa:hover{border-color:#25D366;background:#28503f}
.book-opt-icon{font-size:1.4rem}
.book-opt-title{font-family:var(--serif);font-size:1.1rem;letter-spacing:-0.01em}
.book-opt-sub{font-size:0.78rem;color:var(--mute);letter-spacing:0.02em}
.booking-note{
  text-align:center;color:var(--mute);font-size:0.85rem;
  margin:0;padding-top:16px;border-top:1px solid var(--line);
}
.link-under{border-bottom:1px solid var(--gold);color:var(--ink-soft)}
.link-under:hover{color:var(--ink)}
@media (max-width:560px){.booking-options{grid-template-columns:1fr}.booking-inner{padding:32px 24px 24px}}