/* ─── Fonts ─────────────────────────────────────────────── */

@font-face {
  font-family: 'CormorantGaramond';
  src: url('fonts/CormorantGaramond-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SweetSansPro';
  src: url('fonts/SweetSansPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ─── Variables ─────────────────────────────────────────── */

:root {
  --color-banner-bg:   #e3dcd3;   /* Header/nav — warm linen */
  --color-body-bg:     #FFF8F0;   /* Page body — warm off-white */
  --color-footer-bg:   #c5bbb0;   /* Footer — deeper linen */
  --color-text-light:  #FFFFFF;
  --color-text-dark:   #1A1A1A;
  --color-accent:      #8C5A3C;   /* Cognac — buttons, focus states */
  --color-overlay:     rgba(0, 0, 0, 0.45);
  --color-overlay-nav: rgba(0, 0, 0, 0.92);

  --font-display: 'CormorantGaramond', Georgia, serif;
  --font-body:    'SweetSansPro', Helvetica, Arial, sans-serif;

  --nav-height: 72px;
  --gap: 20px;
}

/* ─── Reset ─────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-body-bg);
  color: var(--color-text-dark);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

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

ul {
  list-style: none;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* ─── Navigation ────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  background: var(--color-banner-bg);
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

/* Venetian plaster: faint tonal depth variation */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 120% at 15% 50%, rgba(255, 252, 248, 0.22) 0%, transparent 100%),
    radial-gradient(ellipse 60% 80% at 85% 30%, rgba(185, 168, 152, 0.16) 0%, transparent 100%);
}

/* Venetian plaster: fine surface grain */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: multiply;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: var(--nav-height);
  padding: 0 48px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.nav-logo img {
  height: 44px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 48px;
  align-items: center;
}

.nav-links .nav-link {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--color-text-dark);
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.nav-links .nav-link:hover,
.nav-links .nav-link.active {
  border-bottom-color: var(--color-text-dark);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-text-dark);
}

/* ─── Mobile Nav Overlay ────────────────────────────────── */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--color-overlay-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.nav-overlay__close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 1.5rem;
  color: var(--color-text-light);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-overlay__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.nav-overlay__links .nav-link {
  font-family: var(--font-display);
  font-size: 2.6rem;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  text-transform: uppercase;
}

/* ─── Footer ────────────────────────────────────────────── */

.footer {
  background: var(--color-footer-bg);
  border-top: 1px solid rgba(26, 26, 26, 0.12);
  padding: 40px 24px;
  text-align: center;
}

.footer-copy {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  opacity: 0.75;
  margin-bottom: 16px;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-social a {
  color: var(--color-text-dark);
  opacity: 0.75;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.footer-social a:hover {
  opacity: 1;
}

/* ─── Carousel ──────────────────────────────────────────── */

.carousel {
  position: relative;
  width: 100%;
  height: calc(80vh + 50px);
  overflow: hidden;
  background: #1a1a1a;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 248, 240, 0.35);
  transition: background 0.3s;
  pointer-events: none;
  flex-shrink: 0;
}

.carousel-dot.active {
  background: rgba(255, 248, 240, 0.9);
}

/* ─── Carousel top scrim — improves logo legibility ─────── */

.carousel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 260px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.52) 0%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}

/* ─── Carousel Logo Overlay ─────────────────────────────── */

.carousel-logo {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 700px;
  max-width: 88%;
  pointer-events: none;
}

.carousel-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: invert(1) drop-shadow(0 2px 20px rgba(0, 0, 0, 0.5));
}

/* ─── Portfolio Grid ────────────────────────────────────── */

.portfolio-section {
  padding: 72px var(--gap) 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.portfolio-section__heading {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-text-dark);
  text-align: center;
  padding: 52px 0 40px;
  text-transform: uppercase;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.portfolio-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 10px);
  justify-self: center;
  width: 100%;
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 4 / 3;
  background: #1a1a1a;
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.portfolio-card:hover img {
  transform: scale(1.03);
}

.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-card:hover .portfolio-card__overlay {
  opacity: 1;
}

.portfolio-card__title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--color-text-light);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0 16px;
  text-transform: uppercase;
}

/* Scroll-triggered fade-up (home page only) */
.portfolio-card.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.portfolio-card.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Social Section ────────────────────────────────────── */

.social-section {
  padding: 60px 24px 20px;
  text-align: center;
}

.social-section__heading {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-text-dark);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.instagram-feed {
  max-width: 900px;
  margin: 0 auto;
}

.instagram-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-text-dark);
  opacity: 0.8;
  margin-bottom: 20px;
  transition: opacity 0.2s;
}

.instagram-handle:hover {
  opacity: 1;
}

/* ─── Gallery Page ──────────────────────────────────────── */

.gallery-page {
  padding-bottom: 80px;
}

.gallery-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-text-dark);
  text-align: center;
  text-transform: uppercase;
  padding: 52px 24px 40px;
}

.gallery-container {
  columns: 2;
  column-gap: 16px;
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-container img {
  width: 100%;
  break-inside: avoid;
  margin-bottom: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
  display: block;
}

.gallery-container img:hover {
  opacity: 0.88;
}

/* ─── Lightbox ──────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 10, 10, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__img-wrap {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 1.6rem;
  color: var(--color-text-light);
  opacity: 0.65;
  transition: opacity 0.2s;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close:hover { opacity: 1; }

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.8rem;
  color: var(--color-text-light);
  opacity: 0.5;
  transition: opacity 0.2s;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
}

.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }

.lightbox__prev:hover,
.lightbox__next:hover { opacity: 1; }

/* ─── About Page ────────────────────────────────────────── */

.about-page {
  padding-bottom: 80px;
}

.about-bio {
  display: flex;
  gap: 52px;
  align-items: flex-start;
  padding: 60px 64px 52px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-bio__img {
  flex: 0 0 38%;
  max-width: 400px;
}

.about-bio__img img {
  width: 100%;
  height: auto;
}

.about-bio__text p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--color-text-dark);
  margin-bottom: 1.4em;
}

/* ─── Services Section ──────────────────────────────────── */

.services {
  padding: 52px 64px 60px;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(26, 26, 26, 0.15);
}

.services__heading {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--color-text-dark);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 44px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 48px;
}

.services__col ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.services__col li {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--color-text-dark);
  line-height: 1.5;
  opacity: 0.85;
}

/* Featured 3-item services layout */

.services__grid--featured {
  gap: 16px;
}

.services__item {
  position: relative;
  overflow: hidden;
  padding: 40px 28px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background-size: cover;
  background-position: center;
}

.services__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

.services__item-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.5);
}

/* ─── Form Success Modal ─────────────────────────────────── */

.form-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.form-success-overlay.open {
  opacity: 1;
}

.form-success-modal {
  position: relative;
  background: var(--color-body-bg);
  padding: 64px 52px 52px;
  max-width: 480px;
  width: 90%;
  text-align: center;
}

.form-success-modal p {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  color: var(--color-text-dark);
  line-height: 1.4;
}

.form-success-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.3rem;
  color: var(--color-text-dark);
  opacity: 0.4;
  transition: opacity 0.2s;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-success-modal__close:hover {
  opacity: 1;
}

/* ─── Inquire Page ──────────────────────────────────────── */

.inquire-page {
  padding-bottom: 80px;
}

.inquire-heading {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-text-dark);
  text-align: center;
  text-transform: uppercase;
  padding: 52px 24px 12px;
}

.inquire-sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--color-text-dark);
  opacity: 0.65;
  text-align: center;
  margin-bottom: 44px;
  font-style: italic;
  padding: 0 24px;
}

.inquire-form-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
}

.form-field {
  margin-bottom: 28px;
}

.form-field label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  opacity: 0.75;
  margin-bottom: 8px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26, 26, 26, 0.25);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text-dark);
  outline: none;
  transition: border-color 0.2s;
  letter-spacing: 0.04em;
}

.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--color-accent);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(26, 26, 26, 0.3);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-submit {
  display: block;
  width: 100%;
  padding: 14px 24px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-light);
  background: var(--color-accent);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.form-submit:hover { opacity: 0.85; }
.form-submit:disabled { opacity: 0.5; cursor: default; }

.form-message {
  text-align: center;
  padding: 40px 0;
}

.form-message p {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  color: var(--color-text-dark);
  margin-bottom: 24px;
  line-height: 1.4;
}

.form-message__dismiss {
  font-size: 1.3rem;
  color: var(--color-text-dark);
  opacity: 0.45;
  transition: opacity 0.2s;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-message__dismiss:hover { opacity: 1; }

.form-error {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: #a33;
  text-align: center;
  margin-top: 16px;
}

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 1024px) {
  .nav-inner { padding: 0 32px; }

  .portfolio-card__overlay {
    opacity: 1;
  }

  .about-bio {
    padding: 52px 40px;
    gap: 36px;
  }

  .services {
    padding: 40px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 40px;
  }

  .services__col:last-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

  .services__col:last-child ul {
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  :root { --nav-height: 64px; }

  .nav-inner { padding: 0 20px; }

  .nav-links { display: none; }

  .nav-hamburger { display: flex; }

  .carousel {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .carousel-logo {
    width: 75%;
    top: 24px;
  }

  .portfolio-section {
    padding: 72px 12px 48px;
  }

  .portfolio-section__heading {
    font-size: 1.8rem;
    padding: 36px 0 28px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .portfolio-card:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: 100%;
    justify-self: auto;
  }

  .gallery-title {
    font-size: 2rem;
    padding: 36px 16px 28px;
  }

  .gallery-container {
    columns: 1;
    padding: 0 12px;
  }

  .about-bio {
    flex-direction: column;
    padding: 36px 20px;
    gap: 28px;
  }

  .about-bio__img {
    flex: none;
    max-width: 100%;
  }

  .services {
    padding: 40px 20px;
  }

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

  .services__col:last-child {
    grid-column: auto;
    display: block;
  }

  .services__col:last-child ul {
    max-width: 100%;
  }

  .social-section {
    padding: 44px 16px 16px;
  }

  .social-section__heading { font-size: 1.8rem; }

  .inquire-heading {
    font-size: 2rem;
    padding: 36px 16px 12px;
  }

  .inquire-form-wrap { padding: 0 16px; }
}