:root {
  --black: #050505;
  --charcoal: #111113;
  --charcoal-soft: #1a1a1d;
  --gold: #c8a96a;
  --champagne: #ead9b7;
  --cream: #f5efe3;
  --muted: #b7ad9c;
  --line: rgba(200, 169, 106, 0.34);
  --glass: rgba(10, 10, 10, 0.72);
  --hero-top-space: 96px;
  --max-width: 1180px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at top left, rgba(200, 169, 106, 0.12), transparent 28rem),
    linear-gradient(135deg, var(--black), var(--charcoal) 48%, #070707);
  font-family: var(--sans);
  line-height: 1.65;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a,
button {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 54px);
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.42));
  border-bottom: 1px solid rgba(200, 169, 106, 0.16);
  backdrop-filter: blur(18px);
}

.brand {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.08em;
  color: var(--champagne);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
}

.site-nav a {
  position: relative;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 450ms ease;
}

.site-nav a::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 550ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--champagne);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-toggle {
  display: none;
  color: var(--champagne);
  background: transparent;
  border: 1px solid var(--line);
  padding: 9px 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--hero-top-space) + 60px) 22px 80px;
  text-align: center;
  background:
    linear-gradient(rgba(5, 5, 5, 0.62), rgba(5, 5, 5, 0.78)),
    url("images/image_13.jpg") center / cover no-repeat;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 36px;
  border: 1px solid rgba(234, 217, 183, 0.18);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 0%, rgba(5, 5, 5, 0.58) 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(900px, 100%);
  animation: slowFade 1200ms ease both;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  color: var(--cream);
  line-height: 1;
}

h1 {
  max-width: 880px;
  margin: 0 auto 28px;
  font-size: clamp(3.9rem, 9vw, 8.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

h2 {
  margin: 0 0 24px;
  font-size: clamp(2.7rem, 6vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

h3 {
  margin: 12px 0 14px;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.hero p:not(.eyebrow),
.section-intro p:not(.eyebrow) {
  max-width: 780px;
  margin: 0 auto 18px;
  color: rgba(245, 239, 227, 0.82);
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
}

.lux-link,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  transition: transform 450ms ease, border-color 450ms ease, color 450ms ease, background 450ms ease;
}

.lux-link {
  padding: 13px 26px;
  color: #0b0b0b;
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  border: 1px solid var(--gold);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.text-link {
  color: var(--champagne);
  border-bottom: 1px solid var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.lux-link:hover,
.lux-link:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  transform: translateY(-3px);
}

.section {
  padding: clamp(84px, 11vw, 150px) clamp(20px, 4vw, 56px);
}

.section-intro {
  width: min(var(--max-width), 100%);
  margin: 0 auto 56px;
  text-align: center;
}

.story-section,
.team-section,
.location-section {
  background: linear-gradient(180deg, rgba(17, 17, 19, 0.72), rgba(5, 5, 5, 0.94));
}

.timeline {
  width: min(940px, 100%);
  margin: 0 auto;
  position: relative;
  display: grid;
  gap: 28px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  background: linear-gradient(var(--gold), rgba(200, 169, 106, 0.1));
}

.timeline-item {
  position: relative;
  width: calc(50% - 38px);
  padding: 28px;
  background: rgba(17, 17, 19, 0.78);
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.timeline-item:nth-child(odd) {
  justify-self: start;
  text-align: right;
}

.timeline-item:nth-child(even) {
  justify-self: end;
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: 32px;
  width: 12px;
  height: 12px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(200, 169, 106, 0.12);
}

.timeline-item:nth-child(odd)::after {
  right: -44px;
}

.timeline-item:nth-child(even)::after {
  left: -44px;
}

.timeline-year,
.step-label {
  display: block;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.timeline-item p,
.process-card p,
.feature-card p,
.portfolio-card p,
.team-card p,
.review-slide p,
.faq-answer p,
.map-overlay p,
.site-footer p,
.benefit-panel p {
  color: rgba(245, 239, 227, 0.78);
}

.stat-row,
.process-grid,
.featured-grid,
.filterable-gallery {
  width: min(var(--max-width), 100%);
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.stat-row p,
.process-card,
.feature-card,
.portfolio-card,
.team-card,
.review-slide,
.faq-item,
.benefit-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(26, 26, 29, 0.88), rgba(8, 8, 8, 0.9));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.stat-row p {
  margin: 0;
  padding: 28px;
  text-align: center;
}

.stat-row strong {
  display: block;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.1;
}

.stat-row span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}

.process-grid {
  counter-reset: steps;
}

.process-card {
  padding: 34px;
  min-height: 310px;
  position: relative;
  overflow: hidden;
}

.process-card::before {
  counter-increment: steps;
  content: "0" counter(steps);
  position: absolute;
  right: 22px;
  top: 10px;
  color: rgba(200, 169, 106, 0.1);
  font-family: var(--serif);
  font-size: 6rem;
  line-height: 1;
}

.benefit-panel {
  width: min(860px, 100%);
  margin: 34px auto 0;
  padding: 28px 34px;
  text-align: center;
}

.feature-card,
.portfolio-card {
  overflow: hidden;
}

.feature-card img,
.portfolio-card img,
.masonry-gallery img,
.team-card img {
  transition: transform 1200ms ease, filter 1200ms ease;
  filter: saturate(0.82) contrast(1.06);
}

.feature-card:hover img,
.portfolio-card:hover img,
.masonry-gallery figure:hover img,
.team-card:hover img {
  transform: scale(1.045);
  filter: saturate(1) contrast(1.1);
}

.feature-card p,
.portfolio-card p {
  margin: 0;
  padding: 24px;
}

.feature-card strong {
  display: block;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.portfolio-area {
  width: min(var(--max-width), 100%);
  margin: 62px auto 0;
}

.tab-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.tab-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 11px 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 450ms ease, color 450ms ease, border-color 450ms ease;
}

.tab-button.active,
.tab-button:hover,
.tab-button:focus-visible {
  color: #080808;
  background: var(--gold);
  border-color: var(--gold);
}

.portfolio-card {
  transition: opacity 450ms ease, transform 450ms ease;
}

.portfolio-card.is-hidden {
  display: none;
}

.masonry-gallery {
  width: min(var(--max-width), 100%);
  margin: 64px auto 0;
  columns: 3 300px;
  column-gap: 22px;
}

.masonry-gallery figure {
  margin: 0 0 22px;
  break-inside: avoid;
  background: rgba(17, 17, 19, 0.88);
  border: 1px solid var(--line);
  overflow: hidden;
}

.masonry-gallery figcaption {
  padding: 16px 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

.team-slider,
.reviews-carousel {
  width: min(980px, 100%);
  margin: 0 auto;
  position: relative;
}

.team-track {
  min-height: 620px;
  position: relative;
  overflow: hidden;
}

.team-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  align-items: center;
  gap: 34px;
  padding: 34px;
  opacity: 1;
  transform: translateX(34px);
  pointer-events: none;
  transition: opacity 700ms ease, transform 700ms ease;
}

.team-card.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.team-card img {
  height: 520px;
  object-fit: cover;
}

.team-card p {
  max-width: 430px;
}

.slider-control {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  background: rgba(5, 5, 5, 0.82);
  color: var(--champagne);
  padding: 12px 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.slider-control.prev {
  left: 0;
}

.slider-control.next {
  right: 0;
}

.team-dots,
.review-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.dot,
.review-dot {
  width: 34px;
  height: 5px;
  padding: 0;
  border: 0;
  background: rgba(234, 217, 183, 0.24);
  transition: background 350ms ease, width 350ms ease;
}

.dot.active,
.review-dot.active {
  width: 54px;
  background: var(--gold);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.reviews-carousel {
  min-height: 270px;
  padding: 0 0 36px;
}

.review-slide {
  display: none;
  padding: clamp(32px, 5vw, 58px);
  text-align: center;
}

.review-slide.active {
  display: block;
  animation: slowFade 900ms ease both;
}

.review-slide p {
  margin: 0 auto 22px;
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.18;
  color: var(--cream);
}

.review-slide span {
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.faq-list {
  width: min(900px, 100%);
  margin: 46px auto 0;
  display: grid;
  gap: 14px;
}

.faq-item {
  overflow: hidden;
}

.faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--champagne);
  text-align: left;
  padding: 22px 24px;
  font-family: var(--serif);
  font-size: 1.45rem;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 550ms ease, opacity 550ms ease;
  opacity: 1;
}

.faq-answer p {
  margin: 0;
  padding: 0 24px 24px;
}

.faq-item.open .faq-answer {
  max-height: 220px;
  opacity: 1;
}

.map-panel {
  width: min(var(--max-width), 100%);
  min-height: 560px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(22px, 5vw, 54px);
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.2), rgba(5, 5, 5, 0.74)),
    url("images/image_14.jpg") center / cover no-repeat;
  border: 1px solid var(--line);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
}

.map-panel::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(234, 217, 183, 0.16);
}

.map-overlay {
  position: relative;
  z-index: 2;
  width: min(430px, 100%);
  padding: 34px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.map-overlay strong {
  color: var(--champagne);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 34px clamp(20px, 4vw, 56px);
  background: #030303;
  border-top: 1px solid rgba(200, 169, 106, 0.2);
}

.site-footer p {
  margin: 0;
  max-width: 680px;
}

@keyframes slowFade {
  from {
    opacity: 1;
    transform: translateY(18px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 920px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    background: rgba(5, 5, 5, 0.96);
    border: 1px solid var(--line);
  }

  .site-nav.open {
    display: flex;
  }

  .stat-row,
  .process-grid,
  .featured-grid,
  .filterable-gallery {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    left: 12px;
  }

  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    width: calc(100% - 38px);
    justify-self: end;
    text-align: left;
  }

  .timeline-item:nth-child(odd)::after,
  .timeline-item:nth-child(even)::after {
    left: -32px;
    right: auto;
  }

  .team-track {
    min-height: 760px;
  }

  .team-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .team-card img {
    height: 420px;
  }

  .team-card p {
    margin-left: auto;
    margin-right: auto;
  }

  .slider-control {
    top: auto;
    bottom: 62px;
  }

  .map-panel {
    justify-content: center;
  }

  .site-footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 620px) {
  :root {
    --hero-top-space: 78px;
  }

  .site-header {
    padding: 16px 18px;
  }

  .hero {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero::before {
    inset: 18px;
  }

  h1 {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  h2 {
    font-size: clamp(2.4rem, 12vw, 3.4rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .lux-link,
  .text-link {
    width: min(100%, 310px);
  }

  .section {
    padding: 76px 18px;
  }

  .process-card,
  .benefit-panel,
  .map-overlay {
    padding: 24px;
  }

  .team-track {
    min-height: 720px;
  }

  .team-card {
    padding: 24px;
  }

  .team-card img {
    height: 340px;
  }

  .slider-control {
    padding: 10px 12px;
    font-size: 0.78rem;
  }

  .review-slide p {
    font-size: 1.55rem;
  }

  .masonry-gallery {
    columns: 1;
  }

  .map-panel {
    min-height: 640px;
    padding: 18px;
  }
}

/* Visible state helpers */
+ .animate-fade-in-up.visible,
+ .animate-fade-in-left.visible,
+ .animate-fade-in-right.visible,
+ .animate-bounce-y.visible,
+ .section-scroll-animate.visible,
+ .text-animate-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Universal Icon Fixes for Buttons */
button svg, .carousel-next svg, .carousel-prev svg, .slider-next svg, .slider-prev svg,
.next svg, .prev svg, .tab-button svg, .tab-btn svg {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

button i, .carousel-next i, .carousel-prev i, .slider-next i, .slider-prev i,
.next i, .prev i, .tab-button i, .tab-btn i {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    font-style: normal;
}

button .icon, .carousel-next .icon, .carousel-prev .icon,
.slider-next .icon, .slider-prev .icon, .tab-button .icon {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
}

/* Ensure carousel buttons are clickable even with icons */
.carousel-next, .carousel-prev, .slider-next, .slider-prev,
.next, .prev, .next-btn, .prev-btn {
    cursor: pointer;
    position: relative;
}

.carousel-next *, .carousel-prev *, .slider-next *, .slider-prev *,
.next *, .prev *, .next-btn *, .prev-btn * {
    pointer-events: none;
}

/* Tab button icon fixes */
.tab-button, .tab-btn, .tab {
    cursor: pointer;
    position: relative;
}

.tab-button *, .tab-btn *, .tab * {
    pointer-events: none;
}

/* Ensure icons don't block clicks */
button > svg, button > i, button > .icon,
.carousel-next > svg, .carousel-prev > svg,
.tab-button > svg, .tab-button > i {
    pointer-events: none !important;
}

/* Safe visibility overrides (auto-added) */
:root, html, body, main, header, footer, section, .container, .content {
  opacity: 1 !important;
  visibility: visible !important;
}