*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

:root{
--gold:#C9A84C;
--gold-light:#e2c47a;
--off-white:#FAF9F7;
--warm-gray:#9E9890;
--dark:#1a1a18;
--text:#3a3830;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:var(--dark);
color:var(--off-white);
overflow-x:hidden;
}

/* NAV */

nav{
position:fixed;
top:0;
left:0;
right:0;
z-index:999;
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 60px;
background:rgba(250,249,247,.96);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(201,168,76,.2);
}

.nav-logo{
font-weight:600;
font-size:13px;
letter-spacing:.3em;
color:var(--gold);
text-transform:uppercase;
text-decoration:none;
}

.nav-links{
display:flex;
gap:40px;
list-style:none;
}

.nav-links a{
font-size:11px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--warm-gray);
text-decoration:none;
transition:.3s;
}

.nav-links a:hover{
color:var(--gold);
}

.nav-cta{
font-size:11px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--gold);
border:1px solid var(--gold);
padding:10px 24px;
text-decoration:none;
transition:.3s;
}

.nav-cta:hover{
background:var(--gold);
color:#fff;
}

/* HERO */

#hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:140px 40px 100px;
position:relative;
}

.hero-headline{
font-family:'Cormorant Garamond',serif;
font-size:clamp(60px,8vw,110px);
font-weight:300;
line-height:1.05;
color:var(--white);
margin-bottom:18px;
}

.hero-headline em{
color:var(--gold);
font-style:italic;
}

.hero-sub{
font-size:11px;
letter-spacing:.35em;
text-transform:uppercase;
color:var(--white);
margin-bottom:50px;
}

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
justify-content:center;
}

.hero-btn-primary{
font-size:11px;
letter-spacing:.3em;
text-transform:uppercase;
color:white;
background:var(--gold);
padding:16px 44px;
text-decoration:none;
transition:.3s;
}

.hero-btn-primary:hover{
background:var(--gold-light);
transform:translateY(-3px);
}

.hero-btn-secondary{
font-size:11px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--gold);
border:1px solid var(--gold);
padding:16px 44px;
text-decoration:none;
transition:.3s;
}

.hero-btn-secondary:hover{
background:var(--gold);
color:#fff;
}

/* TRUST BAR */

.trust-bar{ 
background:var(--off-white); 
padding:20px 60px; 
display:flex; 
justify-content:center; 
gap:60px; 
flex-wrap:wrap; 
}

.trust-item{
font-size:10px;
letter-spacing:.25em;
text-transform:uppercase;
color:var(--text);
display:flex;
gap:10px;
align-items:center;
}

.trust-item::before{
content:"✦";
color:var(--gold);
font-size:8px;
}

/* SERVICES */

#services{
background:var(--dark);
padding:120px 60px;
width:100%;
}

#services .section-label{
font-size:10px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--gold);
display:block;
margin-bottom:16px;
}

#services .section-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(40px,4vw,58px);
font-weight:300;
color:var(--off-white);
margin-bottom:70px;
display:block;
}

/* Services grid */

.services-grid{
display:flex;
flex-direction:row;
align-items:stretch;
flex-wrap:nowrap;
gap:24px;

max-width:1200px;
margin:0 auto;

/* slight visual shift left to center cards */
transform:translateX(-20px);
}

/* Service cards */

.service-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
padding:26px 32px;
transition:.35s;
display:flex;
flex-direction:column;
justify-content:flex-start;
min-width:260px;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 60px rgba(255,255,255,.12);
}

/* Large gold numbers */

.service-num{
font-family:'Cormorant Garamond',serif;
font-size:48px;
color:var(--gold);
margin-bottom:18px;
}

/* Service title */

.service-name{
font-size:13px;
font-weight:600;
letter-spacing:.15em;
text-transform:uppercase;
color:var(--off-white);
margin-bottom:12px;
}

/* Description */

.service-desc{
font-size:13px;
line-height:1.8;
color:rgba(250,249,247,.7);
}

/* Tablet */

@media (max-width:900px){

.services-grid{
flex-wrap:wrap;
justify-content:center;
transform:none;
}

.service-card{
flex:1 1 45%;
}

}

/* Mobile */

@media (max-width:600px){

.service-card{
flex:1 1 100%;
}

}

/* PRICING */

#pricing{
background:var(--dark);
padding:120px 60px;
}

#pricing .section-label{
font-size:10px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--gold);
display:block;
margin-bottom:16px;
}

/* Reduce side padding on small screens */
@media (max-width:700px){
#pricing{
padding:80px 24px;
}
}

#pricing .section-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(40px,4vw,58px);
font-weight:300;
color:var(--off-white);
margin-bottom:70px;
display:block;
}
}

.pricing-inner{
max-width:1200px;
margin:auto;
}

.pricing-grid{
display:flex;
justify-content:center;
gap:32px;
margin-top:60px;
align-items:stretch;
flex-wrap:wrap; /* allows wrapping */
}

.pricing-card{
flex:1 1 320px; /* flexible width */
max-width:420px;
width:100%;
min-width:0; /* prevents overflow on mobile */
padding:40px 36px;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

/* Tablet */
@media (max-width:900px){
.pricing-card{
flex:1 1 45%;
max-width:100%;
}
}

/* Mobile – single column */
@media (max-width:600px){
.pricing-grid{
flex-direction:column;
align-items:stretch;
}

.pricing-card{
flex:1 1 100%;
max-width:100%;
}
}

.pricing-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
padding:36px 32px;
display:flex;
flex-direction:column;
transition:.3s;
}

.pricing-top{
}

.pricing-card:hover{
border-color:rgba(201,168,76,.4);
transform:translateY(-6px);
}

.pricing-card.popular{
background:rgba(201,168,76,.08);
border-color:rgba(201,168,76,.35);
position:relative;
}

.pricing-card.popular::before{
content:"Most Popular";
position:absolute;
top:-14px;
left:50%;
transform:translateX(-50%);
background:var(--gold);
color:white;
font-size:10px;
letter-spacing:.25em;
text-transform:uppercase;
padding:6px 14px;
}

.pricing-name{
font-size:11px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--gold);
margin-bottom:20px;
}

.pricing-price{
font-family:'Cormorant Garamond',serif;
font-size:62px;
color:#fff;
margin-bottom:12px;
}

.pricing-price span{
font-size:30px;
color:var(--warm-gray);
}

.pricing-features {
  list-style-type: disc;      /* classic bullets */
  padding-left: 20px;         /* space from edge of card */
  margin: 10px 0 20px 0;      /* spacing above and below list */
  display: block;             /* override flex if needed */
  gap: 6px;                   /* space between items */
}

.pricing-features li {
  font-size: 13px;
  color: rgba(250,249,247,.8); /* slightly lighter than text */
  line-height: 1.6;
  margin-bottom: 4px;         /* small spacing between bullets */
}

.pricing-btn{
display:block;
text-align:center;
font-size:10px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--gold);
border:1px solid rgba(201,168,76,.4);
padding:14px;
text-decoration:none;
transition:.3s;
margin-top:auto;
}

.pricing-btn:hover{
background:var(--gold);
color:white;
}

/* GALLERY */

#work{
background:var(--dark);
padding:120px 60px;
width:100%;
}

#work .section-label{
font-size:10px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--gold);
display:block;
margin-bottom:16px;
}

#work .section-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(40px,4vw,58px);
font-weight:300;
color:var(--off-white);
margin-bottom:70px;
display:block;
}


/* Horizontal scroll container */
.gallery-grid.collage {
  display: flex;
  overflow: hidden;            /* hide overflow */
  gap: 16px;
  width: 100%;
  max-width: 960px;            /* 3 images x 300px + gaps */
  margin: 0 auto;
  position: relative;
}

.gallery-item {
  flex: 0 0 auto;
  height: 200px;               /* fixed height */
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 3px solid #000;      /* black border */
  cursor: pointer;
  transition: transform 0.4s;
  z-index: 1;
}

.gallery-item img {
  width: 250px;
  height: 190px;
  object-fit: contain;          /* changed from cover to contain */
  display: block;
  Max-width: 100%;
  transition: transform 0.4s;
  border-radius: 3px;           /* optional: keep image corners slightly rounded */
}

/* Hover pop-out: only scales on hover */
.gallery-item:hover {
  transform: scale(1.1);        /* pop-out effect */
  z-index: 5;
}

/* Overlay box at bottom-right */
.gallery-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #000;
  border: 2px solid #C9A84C;
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 6;
}

.gallery-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A84C;
}

/* BOOKING FORM */

#contact-trust .trust-bar {
  background:var(--off-white);
  padding: 20px 60px;
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

#contact-trust .notrust-bar {
  background:var(--off-white);
  padding: 5px 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Each item with bullet */
#contact-trust .trust-item {
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color:var (--dark);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Gold bullet before each item */
#contact-trust .trust-item::before {
  content: "✦";
  color: var(--gold);
  font-size: 8px;
}

/* Optional: different text styles for label, title, sub */
#contact-trust .contact-label {
  font-weight: 600;
}

#contact-trust .contact-title {
  font-weight: 700;
}

#contact-trust .contact-sub {
  font-weight: 400;
  Color:var (--dark);
}

#contact .booking-form {
  max-width: 900px;      /* optional: constrain max width */
  margin: 0 auto;         /* center the form */
  padding: 0 20px;        /* horizontal padding from edges */
  box-sizing: border-box; /* ensure padding doesn’t break layout */
}

/* Optional: add some vertical spacing */
#contact {
  padding: 60px 0;       /* space above and below the booking section */
}

.booking-form .two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal columns */
  gap: 14px 24px;                 /* row gap 14px, column gap 24px */
  margin-bottom: 20px;
}

/* Align label and input vertically */
.booking-form .two-column-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Make input, select, and textarea full width */
.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
  .booking-form .two-column-grid {
    grid-template-columns: 1fr;  /* single column on mobile */
  }
}

.form-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin-bottom:10px;
}

.form-group{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:6px;
}

.form-group label{
font-size:10px;
letter-spacing:.25em;
text-transform:uppercase;
color:var(--warm-gray);
}

.form-group input,
.form-group select,
.form-group textarea{
background:var(--off-white);
border:1px solid rgba(201,168,76,.25);
padding:12px 14px;
font-family:'Montserrat',sans-serif;
font-size:13px;
outline:none;
}

.form-submit{
width:100%;
margin-top:20px;
font-size:11px;
letter-spacing:.3em;
text-transform:uppercase;
background:var(--gold);
color:white;
border:none;
padding:16px;
cursor:pointer;
transition:.3s;
}

.form-submit:hover{
background:var(--gold-light);
transform:translateY(-2px);
}

.modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(26,26,24,0.8); /* dark overlay with transparency */
  font-family: 'Montserrat', sans-serif;
}

.modal-content {
  background-color: var(--off-white);
  margin: 15% auto;
  padding: 40px 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: fadeIn 0.4s ease-out;
  border: 1px solid rgba(201,168,76,0.3);
}

.modal h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--dark);
  margin-bottom: 15px;
}

.modal p {
  font-size: 13px;
  color: var(--warm-gray);
  line-height: 1.6;
}

.modal strong {
  color: var(--gold);
}

.close {
  position: absolute;
  top: 12px;
  right: 18px;
  color: var(--dark);
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.close:hover {
  color: var(--gold);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* FOOTER */

footer{
background:var(--dark);
padding:48px 60px;
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-logo{
font-size:13px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--gold);
}

.footer-links{
display:flex;
gap:32px;
list-style:none;
}

.footer-links a{
font-size:11px;
color:rgba(250,249,247,.3);
text-decoration:none;
}

.footer-links a:hover{
color:var(--gold);
}

.footer-copy{
font-size:11px;
color:rgba(250,249,247,.3);
}

/* MOBILE */

@media (max-width:900px){

.services-grid{
grid-template-columns:1fr 1fr;
}

.pricing-grid{
display:flex;
flex-wrap:nowrap;
justify-content:center;
gap:40px;
align-items:stretch;
}

.gallery-grid{
grid-template-columns:1fr 1fr;
}

.form-row{
grid-template-columns:1fr;
}

nav{
padding:18px 24px;
}

.nav-links{
display:none;
}

/* Success popup styling to match your booking form */
#formSuccess {
  display: none; /* hidden by default */
  background: var(--off-white)
  border: 1px solid rgba(201,168,76,.25);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
}

#formSuccess .form-success-icon {
  font-size: 40px;
  color: var(--gold);
  margin-bottom: 12px;
}

#formSuccess h3 {
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: var(--dark);
}

#formSuccess p {
  font-size: 11px;
  color: var(--warm-gray);
  line-height: 1.4;
  margin: 0;
}

/* Optional: simple fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

#formSuccess.show {
  display: block;
  animation: fadeIn 0.4s ease-out;
}

}