/* ---------- Design tokens ---------- */
:root{
  --bg: #000000;
  --bg-2: #ffffff;

  --surface: rgba(17, 24, 20, .62);
  --surface-2: rgba(17, 24, 20, .82);

  --text: #fff;
  --muted: rgba(255,255,255,.5);
  --muted-2: rgba(255,255,255,.5);

  --brand: #b58b4a;      /* warm bronze */
  --brand-2: #ffffff;    /* sage */
  --danger: #ff8b8b;

  --border: rgba(238,242,238,.14);
  --border-2: rgba(238,242,238,.22);

  --shadow: 0 0.875rem 2.125rem rgba(0,0,0,.28);

  --radius: 1rem;
  --radius-sm: 0.75rem;

  --max: 80rem;
  --pad: 1.5rem;

  --focus: 0 0 0 0.25rem rgba(0,0,0,.025);
}

/* ---------- Base / Reset ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; min-width: 320px; }

/* Smooth scrolling for in-page navigation */
html{ scroll-behavior: smooth; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  font-size: 1.25rem;
  font-weight: 200;
  font-family: "Lexend", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: rgba(255,255,255, 0.75);
  background: #000;
  line-height: 2;
}

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

p{ margin: 0 0 3rem; }

h1, h2, h3{ 
  font-weight: 300;
  text-transform: uppercase;
  margin: 0 0 3rem 0; 
  line-height: 1.15; 
  letter-spacing: -0.0.1875rem; 
  color: #fff;
}

h1, h2, h3{

}


h2{ font-size: clamp(2rem, 2vw, 2rem); color: var(--brand);}

h3{ font-size: 1.125rem; letter-spacing: -0.0.125rem; color: var(--brand);}

.logo-big {
  margin: 0 auto;
  width: 20rem;
  height: auto;
}

.container{
  width: min(var(--max), 100% - (var(--pad) * 2));
  margin-inline: auto;
}

.container--full{
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--pad);
  box-sizing: border-box;
}

.sr-only{
  position: absolute !important;
  width: 0.0625rem; height: 0.0625rem;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Accessibility */
.skip-link{
  position: fixed;
  left: -999px;
  top: 0;
  padding: 0.625rem 0.875rem;
  background: rgba(17,24,20,.96);
  border: 0.0625rem solid var(--border);
  border-radius: 0.625rem;
  z-index: 9999;
}
.skip-link:focus{ left: 0.75rem; top: 0.75rem; }
:focus-visible{ outline: none; box-shadow: var(--focus); border-radius: 0.625rem; }

/* ---------- Buttons / links ---------- */
.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 2rem;
 border: 1px solid rgba(255,255,255,0.25);
  color: #fff; 
  border-radius: .75rem;
  background: #000;
  box-shadow: none;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .0.125rem;
  text-transform: uppercase;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
  white-space: nowrap;
}
.button:hover{ background: rgba(255,255,255,.1); text-decoration: none; }
.button:active{ transform: translateY(0.0625rem); }

.button--primary{
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
}
.button--primary:hover{ opacity: .98; }

.button--ghost{
  background: transparent;
}

.text-link{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand-2);
 
}
.text-link:hover{ text-decoration: none; opacity: .5; }

/* ---------- Top bar ---------- */
.topbar{
  border-bottom: 0.0625rem solid var(--border);
  background: #000;
  backdrop-filter: blur(0.5rem);
}
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  gap: 0.875rem;
  font-size: 0.875rem;
  color: #fff;
}
.rating{
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.625rem;
  border-radius: 62.4375rem;
  border: 0.0625rem solid var(--border);
  background: rgba(255,255,255,.04);
}
.rating__stars{
  display: inline-flex;
  gap: 0.125rem;
  color: var(--brand);
  font-weight: 900;
}
.topbar__phone a{
  text-decoration: none;
}
.topbar__phone a:hover{ }

/* ---------- Header / Nav ---------- */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,13,11,.56);
  backdrop-filter: blur(0.625rem);
  border-bottom: 0.0625rem solid var(--border);
}

/* Offset anchor scrolling so sticky nav doesn't cover section headings */
section[id]{
  scroll-margin-top: 6rem;
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  gap: 0.875rem;
  position: relative;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 860;
  letter-spacing: .0.125rem;
}
.brand__mark{
  width: 2.75rem; height: auto;
  flex: 0 0 auto;
}
.brand__stack{
  display: grid;
  line-height: 1.05;
}
.brand__name{ font-size: 0.9375rem; }
.brand__tag{ font-size: 0.7812rem; color: var(--muted-2); font-weight: 720; letter-spacing: .0.125rem; }

.nav__toggle{
  display: none;
  background: none;
  padding: 0.625rem 0.75rem;
  border: none;
  color: var(--text);
  font-weight: 760;
  align-items: center;
  gap: 0.5rem;
}

.nav__toggle:hover{

  color: var(--muted);

}

.nav__toggle-icon{
  width: 1.25rem;
  height: 1.25rem;
  display: none;
}

.nav__toggle-text{
  display: inline;
}

.nav__menu{
  display: flex;
  align-items: center;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu a{
  color: var(--muted);
  padding: 0.625rem 0.625rem;
  border-radius: 0.625rem;
}
.nav__menu a:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration: none;
}

/* Services dropdown using <details> */
details.dropdown{ position: relative; }
details.dropdown > summary{
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.625rem 0.625rem;
  border-radius: 0.625rem;
  user-select: none;
}
details.dropdown > summary:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
details.dropdown > summary::-webkit-details-marker{ display: none; }

.dropdown__panel{
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 0;
  min-width: 18.75rem;
  padding: 0.625rem;
  border-radius: 0.875rem;
  background: rgba(17,24,20,.96);
  border: 0.0625rem solid var(--border);
  box-shadow: var(--shadow);
}
.dropdown__panel a{
  display: block;
  padding: 0.625rem 0.625rem;
  border-radius: 0.625rem;
  color: var(--muted);
}
.dropdown__panel a:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration: none;
}

/* ---------- Hero ---------- */
.hero{

  position: relative;
  overflow: clip;
  min-height: 75vh;
  align-items: center;
  color: #000;
  background-image: url("../img/hero-main.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align:center;
  padding: 15rem 0;
}

.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255,255,255,.68);
}



.hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}


.logo-big { margin-bottom: 3rem; }


.hero__content{
  position: relative;
  z-index: 2;

}
.hero h1{
 
  font-size: clamp(2.125rem, 4vw, 2.5rem);
  color: #000;
}
.hero p{
  margin-bottom: 3.5rem;
  font-size: 1.25rem;
}
.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  justify-content: center;
}
.hero__micro{
  margin: 0 0 1.125rem;
 
  font-size: 0.8438rem;
}
.hero__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat{
  padding: 0.875rem;
  border-radius: var(--radius-sm);
  border: 0.0625rem solid var(--border);
  background: rgba(0,0,0,.18);
}
.stat strong{
  display: block;
  font-size: 1rem;
  letter-spacing: .0.125rem;
}
.stat span{
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
}
.hero__side{
  border-radius: var(--radius);
  border: 0.0625rem solid var(--border);
  background: rgba(17,24,20,.74);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero__side img{ height: 13.75rem; width: 100%; object-fit: cover; }
.hero__side .pad{ padding: 1rem; }
.kicker{ color: var(--muted-2); font-size: 0.8125rem; letter-spacing: .0.125rem; font-weight: 740; }
.hero__side h2{ margin: 0.5rem 0 0.5rem; font-size: 1.125rem; }
.hero__side p{ margin: 0; color: var(--muted); font-size: 0.875rem; }
.quote{
  margin-top: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.875rem;
  border: 0.0625rem solid rgba(181,139,74,.26);
  background: rgba(181,139,74,.10);
  color: rgba(238,242,238,.90);
  font-weight: 650;
}

.grid{ display: grid; gap: 3rem; }
.grid--2{ grid-template-columns: 1fr 1fr; align-items: center; }

.grid--2 .checklist{
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: grid;
  gap: 0.625rem;
  color: var(--muted);
}

.grid--2 .checklist li{
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}

.grid--2 .checklist li::before{
  content: "✓";
  color: var(--brand);
  font-weight: 900;
  line-height: 1.1;
  margin-top: 0.65rem;
}

/* ---------- Cards ---------- */
.cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.card{
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card__icon{
  width: 6rem; height: 6rem;
  margin: 0 auto;
  margin-bottom: 1rem;

}
.card__icon img{ width: 6rem; height: 6rem; object-fit: cover; }
.card h3{ margin: 0 0 2rem; font-size: 1rem;   text-align: center; color: var(--brand);}
.card p{ margin: 0; color: var(--muted); font-size: 1rem; }

.callout{
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.16);
  padding: 3rem;
}
.callout strong{ color: var(--brand); }
.callout p{ color: var(--muted); margin: 0.625rem 0 0; font-size: 1rem;}

/* ---------- Tabs (Services) ---------- */
.tabs{
  overflow: hidden;
}

#about strong { color:var(--brand); }

.tabs__list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}

[role="tab"]{
  appearance: none;
  border: 0.0625rem solid rgba(0,0,0,.25);
  font-weight: 300;
  font-size: .75rem;
  padding: 1rem 2rem;
  border-radius: .5rem;
  cursor: pointer;
  background: #fff;
  color: #000;
}

[role="tab"][aria-selected="true"]{
  background: #000;
  border-color: rgba(0,0,0,.25);
  color: #fff;
}

.tabs__panels{ 
  padding: 0; 
  margin-top: 4rem;
}

[role="tabpanel"][hidden]{ display: none; }
[role="tabpanel"][hidden]{ display: none; }

.service{
  display: grid;
  grid-template-columns: .75fr 1fr;
  gap: 4rem;
  align-items: center;
  color: #000;
}

.service__body h3 {
    color: #000;
}

.service__body p,
.service__body li {
    color: #000;
}

.service__media{

}
.service__media > img{
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0.875rem;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.25);
  padding: 2rem;

}

.service__media--float{
  /* Secondary image: keep it in-flow so it can't cover the main image */
  position: static;
  width: 100%;
  overflow: hidden;
}

@media (min-width: 56rem){
  .service__media{
    grid-template-columns: 1.25fr 0.75fr;
    align-items: stretch;
  }
  .service__media--float{
    align-self: end;
  }
}
.service__body p{ margin: 0 0 3rem; }

.checklist{
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: grid;
  gap: 0.625rem;
  color: var(--muted);
}
.checklist li{
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.checklist li::before{
  content: "✓";
  color: #000;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 0.65rem;
}

/* ---------- Reviews ---------- */
.reviews-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 1.125rem;
  flex-wrap: wrap;
}
.stars{
  display: inline-flex;
  gap: 0.125rem;
  color: var(--brand);
  font-weight: 900;
}

/* ---------- Reviews slider ---------- */
.testimonial-slider{
  position: relative;
  margin-top: 3rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
}
.slider__viewport{
  overflow: hidden;
}
.slider__track{
  display: flex;
  transition: transform 280ms ease;
  will-change: transform;
}
.slider__slide{
  flex: 0 0 100%;
}
.slider__btn{
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999rem;
  border: 0.0625rem solid rgba(255,255,255,0.25);
  background: none;
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
}
.slider__btn:hover{
  background: rgba(255,255,255,.15);
}
.slider__btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
.slider__dots{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.slider__dot{
  width: 1rem;
  height: 1rem;
  border-radius: 999rem;
  border: 0.0625rem solid var(--border);
  background: transparent;
  padding: 0;
}
.slider__dot[aria-selected="true"]{
  background: var(--brand);
  border-color: var(--brand);
}

/* Keep testimonials looking good inside slider */
.testimonial{
  height: 100%;
}

.testimonial{
  margin: 0;
  padding: 3rem;
  border-radius: var(--radius);
  border: 0.0625rem solid var(--border);
  background: none;
}
.testimonial blockquote{
  margin: 0 0 0.625rem;
  color: var(--text);
  
}
.testimonial figcaption{
  color: var(--brand);
  font-size: 0.8125rem;
}

@media (min-width: 48rem){
  .testimonial-slider{
    gap: 1rem;
  }
  .slider__btn{
    width: 3rem;
    height: 3rem;
  }
}



/* ---------- Gallery preview grid ---------- */
.section__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
  flex-wrap: wrap;
}

.masonry{
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3rem;
}

.tile{
  border-radius: var(--radius);
  overflow: hidden;
  border: 0.0625rem solid rgba(0,0,0,.25);
  box-shadow: none;
  background: rgba(255,255,255,.02);
  min-height: 11.25rem;
  position: relative;
  padding: 2rem;
}
.tile img{ 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}
.span-6{ grid-column: span 6; }
.span-4{ grid-column: span 4; }
.span-8{ grid-column: span 8; }
.tile__overlay{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 0.875rem;
  background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.70));
  opacity: 0;
  transition: opacity .14s ease;
}
.tile:hover .tile__overlay{ opacity: 1; }
.tile__overlay span{ color: rgba(238,242,238,.92); font-weight: 760; }
.tile__overlay small{ color: rgba(238,242,238,.70); }

/* ---------- Gallery page ---------- */
.page-hero{
  padding: 3.375rem 0 1.375rem;
  border-bottom: 0.0625rem solid var(--border);
}
.page-hero h1{ font-size: clamp(1.875rem, 3vw, 2.875rem); margin-bottom: 0.625rem; }
.page-hero p{ color: var(--muted); max-width: 78ch; margin: 0; }

.filter-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 3rem;
  
}

.filter-tabs .button{
  appearance: none;
  color: var(--muted);
  cursor: pointer;
  border: 0.0625rem solid rgba(0,0,0,.25);
  font-weight: 300;
  font-size: .75rem !important;
  padding: 1rem 2rem;
  border-radius: .5rem;
  cursor: pointer;
  background: #fff;
  color: #000;
}

.filter-tabs .button[aria-pressed="true"]{
  background: #000;
  border-color: rgba(0,0,0,.25);
  color: #fff;
}

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  
  box-sizing: border-box;
  padding-inline: var(--pad);
grid-auto-rows: 8px;
}

.gallery-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 3rem;
}

/* Prevent horizontal scroll from full-bleed gallery */
#gallery{ overflow-x: clip; }


.gallery-fullbleed .gallery-grid{
  width: 100%;
  padding-inline: 0;
}

.gallery-item{
  display: block;
  width: 100%;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 0.0625rem solid rgba(0,0,0,0.25);
  background: none;
  padding: 1rem !important;
  position: relative;
  cursor: pointer;
}
.gallery-item img{
  width: 100%;
  height: auto;

  display: block;
}
.gallery-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 0.25rem;
  padding: 0.875rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.75));
  opacity: 0;
  transition: opacity .14s ease;
}
.gallery-item:hover .gallery-overlay{ opacity: 1; }
.gallery-overlay strong{ font-size: 0.9375rem; letter-spacing: -0.0.125rem; color: var(--brand); }
.gallery-overlay small{ color: #fff; }

.gallery-item[hidden]{ display: none; }

/* Lightbox (dialog) */
.lightbox{
  width: 90vw;
  border: 0.0625rem solid var(--border);
  border-radius: 1.125rem;
  padding: 0;
  background: rgba(10,13,11,.96);
  color: var(--text);
  box-shadow: var(--shadow);
}
.lightbox::backdrop{ background: rgba(0,0,0,.66); }
.lightbox__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.75rem 0.75rem 0.625rem;
  border-bottom: 0.0625rem solid var(--border);
}
.lightbox__title{
  font-weight: 820;
  color: rgba(238,242,238,.90);
  padding-left: 0.375rem;
}
.lightbox__close{
  border: 0.0625rem solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
  font-weight: 760;
  cursor: pointer;
}
.lightbox__media{
  padding: 0.75rem;
}
.lightbox__media img{
  width: 100%;
  height: auto;
  border-radius: 0.875rem;
  border: 0.0625rem solid var(--border);
  background: rgba(255,255,255,.03);
}
.lightbox__caption{
  padding: 0 1rem 0.875rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---------- Form ---------- */
.form .button{
margin-top: 1rem;

}

.form label{
  display: grid;
  gap: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}
.form input, .form select, .form textarea{
  width: 100%;
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid rgba(0,0,0,.18);
  
  color: #000;
  outline: none;
}
.form input:focus, .form select:focus, .form textarea:focus{
  border-color: rgba(0,0,0,.5);

}
.form__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
fieldset{

}
legend{

}
.radio{
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0.5rem 0;
  color: var(--muted);
  font-weight: 650;
}
.radio input{ margin-top: 0.125rem; width: 1.125rem; height: 1.125rem; }


/* ---------- Footer ---------- */
.footer{
  
  background: rgba(0,0,0,.22);
  padding: 15rem 0 ;
}

.footer__grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 1.125rem;
  align-items: start;
}

.footer h3{
  margin: 0 0 3rem;
  font-size: 1.25rem;
  letter-spacing: .0.125rem;
  text-transform: uppercase;
  color: var(--brand);
}

.footer .logo.small {
  width: 8rem;
  height: auto;
  margin-bottom: 3rem;
}

.footer a{
  display: block;
  padding: 0.375rem 0;
  color: var(--muted);
}
.footer a:hover{ color: rgba(255,255,255, 0.25); text-decoration: none; }
.footer__brand strong{ font-size: 1rem; }
.footer__brand p{ margin: 1rem 0 0; color: rgba(255,255,255, 0.5); max-width: 45ch; }

.footer__bottom{
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 0.0625rem solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted-2);
  font-size: 0.8125rem;
  flex-wrap: wrap;
}


/* ---------- Icons ---------- */
.icon{
  width: 1.75rem;
  height: 1.75rem;
  display: inline-block;
  flex: 0 0 auto;
}
.phone-link{
  display:flex;
  gap: .75rem;
}

.phone-link .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .65rem;
}

.social{
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
}
.social__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;


}
.social__link:hover{

  text-decoration: none;
}


/* ---------- Sections ---------- */
.section{
  --section-bg: transparent;
  position: relative;
  padding: 15rem 0;
  background: var(--section-bg);
}

/* Muted (light) sections */
.section--muted{
  background: #fff;
  color: #000;
  padding-top: 20rem;
}

.section--muted .button{
  background: #fff;
  color: #000;
  border: 1px solid rgba(0,0,0,0.25);
}

.section--muted .button:hover{
  background: #000;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.25);
}

.section.full .container {
  
}

.section--muted h1,
.section--muted h2,
.section--muted h3 {
  color: #000;

}


.section.section--muted::after{ border: none; }


/* Arrow divider */
.section::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5rem;
  width:0;
  height:0;
  margin:0 auto;
  border-left:50vw solid transparent;
  border-right:50vw solid transparent;
  border-top:5rem solid #000;
  pointer-events:none;
  z-index: 999;
}

/* Extra breathing room so arrows don't overlap content */
.section + .section{
  
}

/* Disable arrow on final main section (before footer) */
main .section:last-of-type::after{
  display:none;
}


/* ---------- Modal (Gallery) ---------- */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1200;
  padding: 2rem;
}
.modal[aria-hidden="false"]{
  display: grid;
  place-items: center;
}
.modal::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(0.25rem);
}
.modal__dialog{
  position: relative;
  width: min(75%, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  background: rgba(17,24,20,.92);
  border: 0.0625rem solid var(--border);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
}
.modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 0.0625rem solid rgba(255,255,255,.08);
}
.modal__header h2{
  margin: 0;
  font-size: 1.25rem;
}
.modal__close{
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999rem;
  border: 0.0625rem solid var(--border);
  background: rgba(17,24,20,.55);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
}
.modal__close:hover{ background: rgba(17,24,20,.75); }

.modal__content{
  padding: 1.25rem;
  overflow: auto;
}





/* ---------- Responsive ---------- */
@media (max-width: 61.25rem){
  .hero__content{ grid-template-columns: 1fr; padding: 3.5rem 0 2.75rem; }
  .grid--2{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .service{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .form__row{ grid-template-columns: 1fr; }
  .masonry{ grid-template-columns: repeat(6, 1fr); }
  .span-8, .span-6, .span-4{ grid-column: span 6; }

  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  
}

@media (max-width: 51.25rem){

  .button { width: 100%; }

  .slider__dot{
    width: 1rem !important;
    height: 1rem;
  }

.rating{
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.625rem;
  border-radius: 62.4375rem;
  border: none;
  background: none;
  font-size: .75rem;
}
.rating__stars{
  display: inline-flex;
  gap: 0.125rem;
  color: var(--brand);
  font-weight: 900;
}

.topbar__phone a{
  text-decoration: none;
  border-bottom: none;
  font-size: .75rem;
}


.topbar__phone a .icon {
  width: 1rem;
  height: 1rem;
  margin-top: .25rem;
}

  .nav__toggle{ display: inline-flex; }
  .nav__toggle-icon{ display: inline-block; }
  .nav__toggle-text{ display: none; }
  .nav__menu{
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: rgba(10,13,11,.96);
    border-bottom: 0.0625rem solid var(--border);
    padding: 0.75rem var(--pad);
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .nav__menu--open{ display: flex; }
  details.dropdown{ width: 100%; }
  .dropdown__panel{
    position: static;
    min-width: auto;
    margin-top: 0.5rem;
  }
  .hero__stats{ grid-template-columns: 1fr; }


  .section{
    padding: 2rem;
  }

  /* Muted (light) sections */
  .section--muted{
    padding-top: 8rem;
  }

  .hero{
    min-height: 75vh;
    padding: 3rem 1rem;
  }

  .logo-big {
    width: 10rem;
  }

  .hero h1 { font-size: 1.75rem; }

  .testimonial { padding: 1.5rem; font-size: .75rem;}

  .testimonial-slider{

    gap: 1rem;
  }

  .masonry{
    gap: 1rem;
  }

  .slider__btn {display: none;}

  .testimonial-slider { gap: 0; }

  .filter-tabs .button{
    width: 100%;
  }

  .tabs__list{
    gap: 1rem;
  }

  [role="tab"]{
    width: 100%;
  }

  #gallery .container--full {
    padding: 0;
  }

  .footer { padding: 3rem; }

  .footer__grid{
    display: block;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.125rem;
    align-items: start;
  }

  .footer p, .footer nav{ margin-bottom: 3rem; }

}

@media (hover: none) and (pointer: coarse) {
  .hero{
    background-attachment: scroll;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; }
}


@media (max-width: 64rem){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem){
  .gallery-grid{ grid-template-columns: 1fr; }
}


/* Gallery lightbox */
.gallery-lightbox{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
}
.gallery-lightbox[aria-hidden="true"]{ display: none; }

.gallery-lightbox__inner{
  position: relative;
  width: min(76rem, 100%);
  max-height: calc(100vh - (var(--pad) * 2));
  border-radius: 1.5rem;
  background: radial-gradient(1200px 600px at 50% 0%, rgba(181,139,74,.10), rgba(0,0,0,0) 55%), rgba(8,8,8,.98);
  border: 0.0625rem solid rgba(255,255,255,.10);
  box-shadow: 0 1.5rem 4.5rem rgba(0,0,0,.65);
  overflow: hidden;
  padding: 2rem;
}

.gallery-lightbox__img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  background: rgba(0,0,0,.40);
}

/* Meta overlay on the image */
.gallery-lightbox__meta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 2rem 1.75rem;
  color: #fff;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.65) 45%,
    rgba(0,0,0,0) 100%
  );
}

.gallery-lightbox__title{
  margin: 0 0 .5rem;
  color: var(--brand);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.gallery-lightbox__caption{
  margin: 0;
  max-width: 62ch;
  color: rgba(255,255,255,.90);
  font-size: 1.05rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Controls — glassy, understated */
.gallery-lightbox__close,
.gallery-lightbox__nav{
  border: 0.0625rem solid rgba(255,255,255,.14);
  background: rgba(10,10,10,.35);
  color: #fff;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.35);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.gallery-lightbox__close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.gallery-lightbox__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  font-size: 1.85rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.gallery-lightbox__nav--prev{ left: 1rem; }
.gallery-lightbox__nav--next{ right: 1rem; }
.gallery-lightbox__nav:disabled{ opacity: .35; cursor: not-allowed; }

@media (hover: hover){
  .gallery-lightbox__close:hover,
  .gallery-lightbox__nav:hover{
    background: rgba(16,16,16,.55);
    border-color: rgba(181,139,74,.35);
    transform: translateY(-50%) scale(1.03);
  }
  .gallery-lightbox__close:hover{
    transform: scale(1.03);
  }
}

@media (max-width: 40rem){
  .gallery-lightbox__meta{ padding: 1.5rem 1.25rem 1.25rem; }
  .gallery-lightbox__nav{ width: 2.6rem; height: 2.6rem; }
  .gallery-lightbox__img{ max-height: 70vh; }
}

/* ---------------------------
   Contact form: luxury thank you + fade
--------------------------- */

/* Hide honeypot but keep it in the DOM for bots */
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-response{ margin-top: 1rem; }
.form-response .error{ color: #c73a3a; }
.form-response .ok{ color: rgba(255,255,255,.85); }

@keyframes fadeOutLux{
  from{ opacity: 1; transform: translateY(0); }
  to{ opacity: 0; transform: translateY(6px); }
}

@keyframes fadeInLux{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.is-fading-out{ animation: fadeOutLux .32s ease forwards; }
.is-fading-in{ animation: fadeInLux .48s cubic-bezier(.2,.8,.2,1) both; }

.thank-you{
  padding: 2.75rem 2.25rem;
  border-radius: 1.25rem;
  border: 0.0625rem solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(181,139,74,.14), rgba(0,0,0,0) 60%),
    rgba(10,10,10,.92);
  box-shadow: 0 1.5rem 4.5rem rgba(0,0,0,.55);
  text-align: center;
}

.thank-you__kicker{
  font-size: .75rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.thank-you__title{
  margin: .65rem 0 .75rem;
  font-size: 1.8rem;
  letter-spacing: .02em;
}

.thank-you__text{
  margin: 0 auto;
  max-width: 52ch;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
}