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

:root {
  --color-primary: #c4a676;
  --color-secondary: #d4b896;
  --color-accent: #e8d4b0;
  --color-light: #f5f3ef;
  --color-white: #fdfcfa;
  --color-text: #f5e6d3;
  --color-text-light: #c4b5a0;
  --color-brown-dark: #3d3426;
  --color-brown-medium: #4a3f2f;
  --color-brown-light: #5a4f3f;
  --color-bg-brown: #33261d;
  --color-bg-brown-dark: #241b12;
  --color-bg-cream: #352a20;
  --color-border: rgba(196, 166, 118, .3);
  --bezier: cubic-bezier(0.165, 0.84, 0.44, 1);
  --transition-smooth: all 1.2s var(--bezier);
  --transition-fast: all .6s var(--bezier);
  --transition-elegant: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  --ring: 1px solid rgba(196, 166, 118, .35);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');

/* CUSTOM FONTS */
@font-face {
  font-family: 'QueensidesMedium';
  src: url('fonts/QueensidesMedium-x30zV.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'DenhamDirect';
  src: url('fonts/Denham.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* GLOBAL RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  font-family: 'Merriweather', 'Inter', 'Georgia', serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
  color: var(--color-text);
  background: var(--color-bg-brown);
  line-height: 1.8;
  overflow-x: hidden;
  letter-spacing: 0.5px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(196, 166, 118, .03) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(212, 184, 150, .02) 0%, transparent 60%),
    linear-gradient(135deg, rgba(45, 36, 22, .5) 0%, transparent 100%);
}

/* NAVIGATION */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: 1.2rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(36, 27, 18, .9);
  backdrop-filter: blur(20px);
  transition: var(--transition-elegant);
  border-bottom: 1px solid rgba(196, 166, 118, .1);
}

.nav.scrolled {
  padding: 1.2rem 4rem;
  background: rgba(25, 18, 11, .98);
  box-shadow: 0 2px 30px rgba(0, 0, 0, .8);
  border-bottom: 1px solid rgba(196, 166, 118, .3);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.site-logo {
  display: block;
  width: 165px;
  /* Standardized width */
  height: 60px;
  background-color: #e8dec7;
  /* Default (Dark Theme) - Distinct Cream */
  -webkit-mask-image: url('assets/Pre Des log 2 f@2x.png');
  mask-image: url('assets/Pre Des log 2 f@2x.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.4s ease;
}

/* Hover effect */
.logo:hover .site-logo {
  background-color: var(--color-secondary);
}

/* Light Theme Override */
.light-theme .site-logo {
  background-color: #6e4a27;
  /* Lighter brown */
  width: 165px !important;
  /* Final width forced */
  height: 60px !important;
  /* Final height forced */
}

/* Page Hero Logo */
/* Page Hero Logo */
.hero-logo {
  display: block;
  width: 220px;
  height: 80px;
  background: linear-gradient(135deg, #8f744e 0%, var(--color-primary) 25%, var(--color-secondary) 50%, var(--color-primary) 75%, #8f744e 100%);
  -webkit-mask-image: url('assets/Pre Des log 2 f@2x.png');
  mask-image: url('assets/Pre Des log 2 f@2x.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  margin: 0 auto 1.5rem auto;
  transition: background 0.4s ease;
}

.light-theme .hero-logo {
  background: linear-gradient(135deg, #8f744e 0%, var(--color-primary) 25%, var(--color-secondary) 50%, var(--color-primary) 75%, #8f744e 100%);
}

.nav-links {
  display: flex;
  gap: 3rem;
  list-style: none;
  align-items: center
}

/* Metallic Gradient Text for Headings */
/* Metallic Gradient Text for Headings */
.philosophy-title-split {
  background: linear-gradient(135deg, #8f744e 0%, var(--color-primary) 25%, var(--color-secondary) 50%, var(--color-primary) 75%, #8f744e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  display: inline-block;
  line-height: 1.5 !important;
  padding-bottom: 0.2em !important;
  padding-top: 0.1em !important;
}

.light-theme .philosophy-title-split {
  background: linear-gradient(135deg, #8f744e 0%, var(--color-primary) 25%, var(--color-secondary) 50%, var(--color-primary) 75%, #8f744e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.nav-links a {
  color: var(--color-text);
  text-decoration: none;
  font-family: 'Olivera', cursive;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 1px;
  position: relative;
  transition: var(--transition-fast);
  text-transform: uppercase
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-secondary);
  transition: var(--transition-fast)
}

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

.nav-links a:hover::after {
  width: 100%
}

/* HERO */
.hero {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-brown-dark)
}

.hero-image-container {
  position: absolute;
  top: 85px;
  left: 0;
  width: 100%;
  height: calc(100% - 85px);
  overflow: hidden
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform-origin: top center;
  animation: cinematicZoom 25s ease-in-out infinite alternate;
  transition: opacity 2s ease-in-out;
  filter: brightness(.8) contrast(1.1);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-image.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 20, 13, .6), rgba(45, 36, 22, .4), rgba(74, 55, 40, .3));
  z-index: 1
}

.hero-content {
  text-align: center;
  z-index: 2;
  padding: 2rem;
  animation: fadeInUp 1.5s ease-out
}

.hero h1 {
  font-family: 'Luckiest Guy', cursive;
  font-size: 4rem;
  font-weight: normal;
  color: #ded5c6;
  margin-bottom: 3rem;
  letter-spacing: 6px;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 0 40px rgba(0, 0, 0, .5)
}

.hero-subtitle {
  font-size: 1.3rem;
  color: var(--color-white);
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 3.5rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, .5);
  opacity: .95
}

/* SCROLL CUE */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, .55);
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .78rem;
  background: transparent;
  transition: var(--transition-smooth);
  cursor: pointer;
  border-radius: 999px
}

.scroll-cue svg {
  width: 18px;
  height: 18px;
  transition: transform .6s var(--bezier)
}

.scroll-cue:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateY(-2px)
}

.scroll-cue:hover svg {
  transform: translateY(4px)
}

/* FLOATING SHAPES */
.hero-bg-shape {
  position: absolute;
  opacity: .03;
  animation: float 20s ease-in-out infinite
}

.shape-1 {
  top: 10%;
  left: 10%;
  width: 300px;
  height: 300px;
  background: var(--color-secondary);
  border-radius: 50%
}

.shape-2 {
  bottom: 15%;
  right: 15%;
  width: 200px;
  height: 200px;
  background: var(--color-accent);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%
}

/* SECTIONS */
.section {
  position: relative;
  background: var(--color-bg-brown);
  overflow: hidden
}

.section-pad {
  padding: 10rem 6rem
}

.section-title {
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 1rem;
  letter-spacing: 2px;
  text-align: center;
  text-transform: capitalize
}

/* Base underline styling for section titles (used for JS-driven drawing on services page) */
.section-title {
  position: relative;
}

.section-title::after {
  display: none !important;
  content: "";
}

/* Services page: move the animated line to sit just below the title, attached to the subtitle */
#services .section-title::after {
  display: none;
}

#services .section-subtitle {
  position: relative;
  margin-top: 0.4rem;
}

#services .section-subtitle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.6rem;
  width: clamp(160px, 30%, 640px);
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  transform-origin: left center;
  transform: translateX(-50%) scaleX(0);
  transition: transform 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

#services .section-subtitle.is-drawn::before {
  transform: translateX(-50%) scaleX(1);
}

.section-subtitle {
  font-size: 1.4rem;
  color: var(--color-text-light);
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
  font-weight: 300;
  letter-spacing: .5px;
  line-height: 1.8
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: .75rem;
  color: var(--color-text-light);
  margin-bottom: 1rem;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}

.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: rgba(196, 166, 118, .4);
}

/* Cinematic panel */
.cinematic-panel {
  background: linear-gradient(135deg, rgba(15, 10, 6, .95), rgba(45, 36, 22, .85));
}

.cinematic-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 4rem;
  align-items: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', sans-serif;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* improved visibility */
}

.cinematic-copy h2 {
  font-size: 2.8rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

.cinematic-copy p {
  color: var(--color-text-light);
  margin-bottom: 1.1rem;
}

.cinematic-list {
  list-style: none;
  display: grid;
  gap: .8rem;
  margin: 1.5rem 0 2.5rem;
}

.cinematic-list li {
  position: relative;
  padding-left: 1.4rem;
}

.cinematic-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-secondary);
}

.cinematic-cta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cta-note {
  font-size: .85rem;
  letter-spacing: 1px;
  color: var(--color-text-light);
}

.cinematic-metrics {
  display: grid;
  gap: 1.25rem;
}

.metric-card {
  padding: 2rem;
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 18px;
  background: rgba(15, 10, 6, .7);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .45);
  transition: var(--transition-fast);
}

.metric-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary);
}

.metric-label {
  font-size: .8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.metric-value {
  display: block;
  font-size: 2.6rem;
  color: var(--color-white);
  margin: .4rem 0 1rem;
}

/* Awards */
.awards-section {
  background: radial-gradient(circle at top right, rgba(196, 166, 118, .08), transparent 60%);
}

.awards-header {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 2rem;
  align-items: flex-start;
}

.awards-header h2 {
  color: var(--color-primary);
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.awards-badge {
  border: 1px solid rgba(196, 166, 118, .35);
  padding: 2rem;
  border-radius: 18px;
  text-align: center;
  min-width: 220px;
  background: rgba(15, 10, 6, .6);
}

.awards-badge span {
  font-size: 1rem;
  letter-spacing: 4px;
  color: var(--color-secondary);
}

.awards-badge strong {
  display: block;
  margin: .6rem 0;
  letter-spacing: 2px;
}

.awards-marquee {
  overflow: hidden;
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 999px;
  margin: 2.5rem 0;
  position: relative;
}

.awards-marquee::before,
.awards-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  pointer-events: none;
}

.awards-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-brown), transparent);
}

.awards-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-brown), transparent);
}

.marquee-track {
  display: flex;
  gap: 2rem;
  padding: 1rem 2rem;
  animation: marquee 18s linear infinite;
}

.marquee-track span {
  white-space: nowrap;
  font-size: .85rem;
  letter-spacing: 2px;
  color: var(--color-text-light);
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.award-card {
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 16px;
  padding: 2rem;
  background: rgba(15, 10, 6, .65);
  min-height: 220px;
  transition: var(--transition-fast);
}

.award-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
}

.award-card h3 {
  color: var(--color-primary);
  margin-bottom: .6rem;
}

.award-card span {
  font-size: .85rem;
  color: var(--color-text-light);
}

/* Editorial capsules */
.editorial-section {
  background: linear-gradient(180deg, rgba(15, 10, 6, .95), rgba(26, 20, 13, .92));
}

.section-heading {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 3rem;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.editorial-card {
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 20px;
  padding: 2rem;
  background: rgba(15, 10, 6, .75);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.editorial-card header span {
  font-size: .75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.text-link {
  background: none;
  border: none;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .75rem;
  cursor: pointer;
  padding: 0;
}

.text-link:hover {
  color: var(--color-white)
}

/* GATE (title box before reveal) */
.gate {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(26, 20, 13, .9), rgba(15, 10, 6, .92));
  border: var(--ring);
  margin: 6rem 6rem 0 6rem;
  padding: 3.2rem 2.8rem;
  display: grid;
  gap: 1.2rem;
  transition: var(--transition-elegant);
  box-shadow: 0 30px 120px rgba(0, 0, 0, .65);
  clip-path: inset(0 round 18px)
}

.gate:hover {
  border-color: rgba(196, 166, 118, .55)
}

.gate-title {
  font-size: 1.9rem;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase
}

.gate-desc {
  color: var(--color-text-light);
  max-width: 60ch
}

.gate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem
}

.gate-cta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: .85rem 1.2rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8rem;
  background: transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: 999px
}

.gate-cta:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateX(4px)
}

.gate-outline {
  pointer-events: none;
  position: absolute;
  inset: -12px;
  border: 1px dashed rgba(196, 166, 118, .25);
  animation: outlinePulse 3.2s var(--bezier) infinite
}

@keyframes outlinePulse {

  0%,
  100% {
    opacity: .35
  }

  50% {
    opacity: .12
  }
}

/* TITLE PANELS */
.title-panel {
  margin: 0;
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  animation: panelFade 1.2s ease;
}

.title-panel--reverse {
  flex-direction: row-reverse
}

.title-panel__media {
  flex: 0 0 50%;
  min-height: 100vh;
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  animation: mediaLinger 28s ease-in-out infinite alternate;
  transition: transform 1.6s var(--bezier), box-shadow 1.6s var(--bezier);
}

.title-panel__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 10, 6, .7), rgba(196, 166, 118, .05));
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: .95;
  transition: opacity 1s ease;
}

.title-panel__media:hover {
  transform: scale(1.02) translateY(-6px);
  box-shadow: 0 55px 150px rgba(0, 0, 0, .9);
}

.title-panel__media:hover::after {
  opacity: .7;
}

.title-card {
  flex: 0 0 50%;
  align-self: center;
  border-radius: 0;
  border: none;
  padding: 3rem 2.5rem;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: visible;
  min-height: 300px;
  margin: 0 auto;
  width: 55%;
  max-width: 500px;
  isolation: isolate;
  animation: cardFloat 18s ease-in-out infinite;
  transition: transform .9s var(--bezier);
}

/* Full rectangular bounding box that draws on scroll (via .visible class) */
.title-card::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: -1.5rem;
  right: -1.5rem;
  bottom: -1.5rem;
  border: 2px solid rgba(196, 166, 118, .5);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--bezier);
}

/* Trigger animation when section is visible via reveal.visible class */
.reveal.visible .title-card::before {
  opacity: 1;
  animation: boundingBoxDrawFull 1.8s var(--bezier) forwards;
}

@keyframes boundingBoxDrawFull {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0);
  }

  25% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 0 0);
  }

  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 0);
  }

  75% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

/* Accent line removed */
.title-card::after {
  content: '';
  display: none;
}

/* UPDATED: Left-aligned professional layout like reference */
.title-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
  text-align: left;
  max-width: 100%;
  margin: 0;
  animation: cardContentIn 1.6s var(--bezier);
}

.title-card__title {
  font-size: 3.2rem;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: none;
  color: var(--color-white);
  margin-bottom: 0.5rem;
  line-height: 1.1;
  max-width: 90%;
}

.title-card__description {
  max-width: 85%;
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  font-weight: 300;
}

.title-card__cta {
  border: none;
  color: var(--color-white);
  background: transparent;
  padding: 0;
  letter-spacing: 2px;
  font-size: .9rem;
  transition: var(--transition-fast);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.title-card__cta span {
  transition: transform .4s var(--bezier);
}

.title-card__cta:hover {
  border: none;
  background: transparent;
  color: var(--color-primary);
}

.title-card__cta:hover span {
  transform: translateX(4px);
}

.title-card:hover {
  transform: translateY(-3px);
}

@keyframes panelFade {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mediaLinger {
  0% {
    transform: scale(1) translateY(0)
  }

  30% {
    transform: scale(1.02) translateY(-8px)
  }

  60% {
    transform: scale(1.01) translateY(5px)
  }

  100% {
    transform: scale(1) translateY(0)
  }
}

@keyframes cardContentIn {
  0% {
    opacity: 0;
    transform: translateY(45px)
  }

  100% {
    opacity: 1;
    transform: none
  }
}

@keyframes cardFloat {
  0% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-6px)
  }

  100% {
    transform: translateY(0)
  }
}

@media (max-width:1024px) {
  .title-panel {
    flex-direction: column;
    padding: 0 1.25rem;
  }

  .title-card {
    width: 100%;
    min-height: auto;
  }
}

/* === IMPROVED GATE (TITLE CARD) DESIGN === */
.gate {
  margin: 8rem auto;
  max-width: 900px;
  text-align: center;
  padding: 4rem 3rem;
  border-radius: 20px;
  background: rgba(40, 35, 25, 0.6);
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transition: var(--transition-smooth);
  border: 1px solid rgba(196, 166, 118, 0.25);
  position: relative;
}

.gate:hover {
  transform: scale(1.02);
  border-color: rgba(196, 166, 118, 0.6);
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.8);
}

.gate-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.gate-title {
  font-size: 2.3rem;
  color: var(--color-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.gate-desc {
  color: var(--color-text-light);
  font-size: 1rem;
  max-width: 600px;
}

.gate-cta {
  margin-top: 1rem;
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.gate-cta:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* === SECTION EXIT & BACK BUTTONS === */
.exit-btn {
  position: absolute;
  top: 2rem;
  right: 3rem;
  background: rgba(196, 166, 118, 0.15);
  border: 1px solid rgba(196, 166, 118, 0.3);
  color: var(--color-text);
  font-size: 1.8rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-fast);
}

.exit-btn:hover {
  background: rgba(196, 166, 118, 0.35);
  transform: rotate(90deg);
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 4rem auto 0;
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition-fast);
}

.back-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateX(-3px);
}

/* BODY TRANSITION */
.section-shell {
  position: relative
}

.section-body {
  position: relative;
  z-index: 1;
  transform: translateX(105%);
  opacity: 0;
  transition: transform 1s var(--bezier), opacity 1s var(--bezier)
}

.section.open .section-body {
  transform: translateX(0);
  opacity: 1
}

.section.open .gate {
  transform: translateX(-104%);
  opacity: 0;
  pointer-events: none
}

.section.open .gate-outline {
  opacity: 0
}

/* REVEAL ON SCROLL */
.reveal {
  opacity: 0;
  transform: translateY(80px) scale(.96);
  transition: opacity 1.2s var(--bezier), transform 1.2s var(--bezier)
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1)
}

/* PORTFOLIO */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto
}

.portfolio-hero {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-end;
  margin-bottom: 3rem;
}

.portfolio-hero-card {
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 18px;
  padding: 1.5rem 2rem;
  background: rgba(15, 10, 6, .7);
  max-width: 320px;
}

.portfolio-item {
  position: relative;
  height: 450px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-brown);
  text-align: center;
  /* Limit to two lines and add ellipsis for overflow */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* limits to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(0) rotateY(0) scale(1);
  box-shadow: none;
  border-color: transparent;
  transition: transform .9s var(--bezier), box-shadow .9s var(--bezier);
}

/* Sheen removed per user request */
.portfolio-item::after {
  display: none;
}

.portfolio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth)
}

.portfolio-item:hover .portfolio-image {
  transform: scale(1.05) rotateZ(.3deg)
}

.portfolio-item:hover {
  transform: translateY(-12px) scale(1.04)
}

.portfolio-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
  color: var(--color-white);
  transform: translateY(100%);
  transition: var(--transition-smooth)
}

.portfolio-item:hover .portfolio-overlay {
  transform: translateY(0)
}

.portfolio-title {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: .5rem;
  letter-spacing: 1px
}

.portfolio-category {
  font-size: .9rem;
  color: var(--color-accent);
  letter-spacing: .5px
}

/* ABOUT */
.about-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.about-text h3 {
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  letter-spacing: 1px
}

.about-text p {
  font-size: 1.25rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  line-height: 1.8;
  text-align: justify;
}

.about-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .1)
}

/* SERVICES */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto
}

.service-hero-grid {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-end;
  margin-bottom: 3rem;
}

.service-hero-card {
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 18px;
  padding: 1.5rem 2rem;
  background: rgba(15, 10, 6, .7);
  min-width: 250px;
}

.service-card {
  position: relative;
  padding: 3rem 2rem;
  background: var(--color-bg-brown);
  text-align: center;
  border: 1px solid rgba(196, 166, 118, .2);
  border-radius: 12px;
  overflow: hidden;
  transition:
    opacity 1s var(--bezier),
    transform .9s var(--bezier),
    background-color .6s var(--bezier),
    box-shadow .7s var(--bezier),
    border-color .4s var(--bezier),
    filter .6s var(--bezier);
  will-change: transform, background-color, box-shadow, opacity;
  transform-style: preserve-3d;
}

/* Soft gradient sweep on hover, similar to value-item sheen */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -120%;
  background: linear-gradient(90deg, transparent, rgba(196, 166, 118, .12), transparent);
  opacity: .0;
  transition: left 1s var(--bezier), opacity .6s ease;
  pointer-events: none;
}

.service-card:hover::before {
  left: 120%;
  opacity: .6;
}

.service-card:hover {
  transform: translateY(-12px) scale(1.03);
  background: var(--color-bg-brown);
  filter: brightness(1.05);
  border-color: var(--color-primary);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .65);
}

/* Subtle motion on number + title when card lifts */
.service-card .service-icon,
.service-card h3 {
  transition: transform .7s var(--bezier), opacity .7s var(--bezier);
}

.service-card:hover .service-icon,
.service-card:hover h3 {
  transform: translateY(-4px);
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  color: var(--color-secondary)
}

.service-card h3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 1rem;
  letter-spacing: 1px
}

.service-card p {
  color: var(--color-text-light);
  line-height: 1.8;
  font-size: 1.12rem;
  text-align: justify;
}

.service-pipelines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin: 5rem 0;
}

.pipeline-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.pipeline-steps li {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 16px;
  background: rgba(15, 10, 6, .7);
}

.pipeline-steps span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(196, 166, 118, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: var(--color-primary);
  letter-spacing: 1px;
}

.layer-card {
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 16px;
  padding: 1.8rem;
  background: rgba(15, 10, 6, .7);
  margin-top: 1.5rem;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .4);
}

.service-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.showcase-card {
  border: 1px solid rgba(196, 166, 118, .25);
  border-radius: 20px;
  padding: 2rem;
  background: rgba(15, 10, 6, .75);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.showcase-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 1px;
  font-size: .9rem;
}

.showcase-card ul {
  list-style: none;
  display: grid;
  gap: .7rem;
}

.showcase-card li {
  position: relative;
  padding-left: 1.3rem;
}

.showcase-card li::before {
  content: 'â–¸';
  position: absolute;
  left: 0;
  color: var(--color-secondary);
}

.portfolio-info-panel {
  max-width: 640px;
  margin: 4rem auto 0;
  border: 1px solid rgba(196, 166, 118, .25);
  padding: 2.5rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15, 10, 6, .98), rgba(26, 20, 13, .98));
  text-align: center;
  transition: var(--transition-fast);
}

/* Smooth color/background transitions for theme switching */
html,
body,
.nav,
.section,
.footer,
.gate,
.title-panel,
.title-card,
.gallery-modal {
  transition: background-color .6s var(--bezier), color .6s var(--bezier), border-color .6s var(--bezier), box-shadow .6s var(--bezier);
}

/* Theme toggle button */
.nav-actions {
  display: flex;
  align-items: center;
  margin-right: 1.2rem
}

.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--color-text);
  padding: .45rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all .25s var(--bezier)
}

.theme-toggle:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25)
}

/* Place toggle inside nav links as a final list item */
.nav-links .nav-theme {
  display: flex;
  align-items: center
}

.nav-links .nav-theme .theme-toggle {
  border-color: rgba(255, 255, 255, .06);
  padding: .45rem .6rem
}

/* Light theme overrides */
.light-theme {
  --color-bg-brown: #fbf7ef;
  /* overall background cream */
  --color-bg-cream: #fffaf5;
  --color-text: #2b1f14;
  /* dark brown text */
  --color-text-light: #5a4635;
  --color-white: #fff;
  --color-brown-dark: #2d2416;
  --color-brown-medium: #473923;
  --color-brown-light: #6b5546;
  --color-primary: #8b5e32;
  /* slightly deeper accent that reads on cream */
  --color-secondary: #a67f52;
  --color-accent: #c9a67a;
  --color-border: rgba(139, 94, 50, .16);
}

/* Removed aggressive overrides to restore specific brown shades */

/* Headings specifically use a stronger brown for visual hierarchy */
.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme h5,
.light-theme h6,
.light-theme .section-title,
.light-theme .value-title-reveal,
.light-theme .title-card__title {
  color: var(--color-brown-dark) !important;
}


/* Ensure default text and headings use warm brown tones in light theme */
.light-theme {
  color: var(--color-text);
}

.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme h5,
.light-theme h6,
.light-theme .section-title,
.light-theme .value-title-reveal {
  color: var(--color-brown-dark) !important;
}


/* Some components use explicit rgba backgrounds; adjust common components for light theme */
.light-theme .nav {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 30px rgba(30, 25, 20, .06);
  border-bottom: 1px solid rgba(139, 94, 50, .07)
}

.light-theme .nav-links a {
  /* Navbar links: rich brown to match logo tone in light theme */
  color: var(--color-brown-dark);
}

.light-theme .nav-links a:hover,
.light-theme .nav-links a.active {
  /* Slightly warmer accent on hover/active to echo logo accent */
  color: var(--color-primary);
}

/* .light-theme .logo color handled by .site-logo */

.light-theme .hero {
  background: var(--color-bg-brown)
}

/* Removed aggressive wildcard override */

/* Ensure svg strokes/fills inherit the brown tone in light theme */
.light-theme svg,
.light-theme svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Keep links as accent unless explicitly overridden */
.light-theme a {
  color: var(--color-primary) !important;
}

.light-theme .hero-overlay {
  background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .25));
  mix-blend-mode: none
}

.light-theme .hero h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* In light theme, keep all hero typography white so it reads clearly on the image */
.light-theme .hero-subtitle,
.light-theme .hero-subtitle *,
.light-theme .hero .scroll-cue,
.light-theme .hero .scroll-cue span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.light-theme .gate,
.light-theme .title-card,
.light-theme .portfolio-overlay,
.light-theme .value-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 245, 238, .96));
  border: 1px solid rgba(139, 94, 50, .06);
  box-shadow: 0 10px 40px rgba(30, 25, 20, .06)
}

.light-theme .footer {
  background: var(--color-primary);
  color: var(--color-white)
}

.light-theme .contact-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(250, 245, 238, .98));
  color: var(--color-brown-dark)
}

.light-theme .contact-trigger {
  background: var(--color-primary);
  box-shadow: 0 8px 30px rgba(139, 94, 50, .12)
}

/* Ensure portfolio items and overlays switch cleanly */
.light-theme .portfolio-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 245, 238, .98));
  border: 1px solid rgba(139, 94, 50, .06);
  box-shadow: 0 20px 60px rgba(30, 25, 20, .06)
}

.light-theme .portfolio-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
  color: var(--color-white)
}

.light-theme .portfolio-image {
  filter: none
}



.light-theme .portfolio-overlay {
  border: none;
  box-shadow: none;
}

.light-theme .title-card__title {
  /* Title card heading: deep brown similar to logo mark */
  color: var(--color-brown-dark);
}

/* Title card body + CTA text in light theme: softer complementary browns */
.light-theme .title-card__description {
  color: var(--color-brown-medium);
}

.light-theme .title-card__cta {
  color: var(--color-brown-dark);
}

.light-theme .title-card__cta:hover {
  color: var(--color-primary);
}

/* Services / cards */
.light-theme .service-card,
.light-theme .svc-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 245, 238, .96));
  border: 1px solid rgba(139, 94, 50, .06);
  color: var(--color-brown-dark)
}

.light-theme .service-card h3,
.light-theme .svc-card h4 {
  color: var(--color-brown-dark)
}

/* Testimonials */
.light-theme .testi-slide {
  background: transparent;
  color: var(--color-brown-dark)
}

.light-theme .testi-controls button {
  border-color: rgba(139, 94, 50, .08);
  color: var(--color-brown-dark)
}

/* Gallery modal -> light panel */
.light-theme .gallery-modal {
  background: rgba(255, 255, 255, 0.98)
}

.light-theme .gallery-container {
  color: var(--color-brown-dark)
}

.light-theme .gallery-details {
  background: linear-gradient(135deg, rgba(250, 245, 238, .99), rgba(245, 240, 235, .99));
  color: var(--color-brown-dark);
  border: 1px solid rgba(139, 94, 50, .15)
}

/* Title panels media overlays (ensure image presentation) */
.light-theme .title-panel__media {
  filter: contrast(.95) saturate(.9) brightness(.98)
}

/* Hero shapes subtle color shift */
.light-theme .hero-bg-shape {
  opacity: .06
}

/* Remove grayscale and muted treatments in light theme and push warm brown tones */
.light-theme .approach-image {
  filter: none;
  box-shadow: 0 18px 50px rgba(30, 25, 20, .06)
}

.light-theme .about-image {
  box-shadow: 0 18px 50px rgba(30, 25, 20, .06)
}

/* Quote panel: convert to warm cream card with brown text */
.light-theme .philosophy-quote {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 245, 238, 0.96));
  border: 1px solid rgba(139, 94, 50, .06);
  box-shadow: 0 12px 40px rgba(30, 25, 20, .06);
  color: var(--color-brown-dark);
}

.light-theme .quote-text {
  color: var(--color-brown-dark)
}

.light-theme .quote-author {
  color: var(--color-brown-medium)
}

.light-theme .philosophy-quote-mark {
  color: var(--color-accent);
  opacity: .14
}

.light-theme .quote-bg-pattern {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 94, 50, 0.02) 10px, rgba(139, 94, 50, 0.02) 20px)
}

/* Title panel media overlay lightening so images read warmer on cream */
.light-theme .title-panel__media::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(196, 166, 118, 0.03));
  mix-blend-mode: normal;
  opacity: .9;
}

/* Gallery controls & close button visible on light background */
.light-theme .gallery-close {
  color: var(--color-brown-dark);
  background: rgba(45, 36, 22, 0.06);
  border: 1px solid rgba(139, 94, 50, 0.06);
}

.light-theme .gallery-close:hover {
  background: rgba(45, 36, 22, 0.10)
}

.light-theme .gallery-nav {
  color: var(--color-brown-dark);
  background: rgba(45, 36, 22, 0.06);
  border: 1px solid rgba(139, 94, 50, 0.06)
}

.light-theme .gallery-nav:hover {
  background: rgba(45, 36, 22, 0.10)
}

.light-theme .gallery-counter {
  color: var(--color-brown-dark)
}

/* Gallery slides shadows reduced for light background */
.light-theme .gallery-slide img {
  box-shadow: 0 18px 60px rgba(30, 25, 20, .06)
}

/* Ensure title-card borders and overlays are warm */
.light-theme .title-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 245, 238, .98));
  border: 1px solid rgba(139, 94, 50, .06);
  box-shadow: 0 18px 60px rgba(30, 25, 20, .06)
}

/* Remove aggressive dark filters on panels */
.light-theme .cinematic-panel,
.light-theme .editorial-section,
.light-theme .award-card,
.light-theme .portfolio-hero-card,
.light-theme .showcase-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 245, 238, .96));
  border: 1px solid rgba(139, 94, 50, .06);
  box-shadow: 0 12px 40px rgba(30, 25, 20, .06)
}

/* Make icon accents brown rather than muted gray */
.light-theme .value-icon,
.light-theme .metric-value,
.light-theme .quote-mark-left,
.light-theme .quote-mark-right {
  color: var(--color-primary)
}




/* Load high-quality fonts: Montserrat for headings (Gotham fallback), Lora for body (refined serif) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Lora:wght@400;500;600;700&display=swap');

/* Headings & Titles: prefer Gotham (commercial). Use Montserrat as a close, free fallback.
   Queenside and Futura are considered but Montserrat gives a modern, geometric tone similar to Gotham.
*/
h1,
h2,
h3,
h4,
h5,
.section-title,
.gate-title,
.title-card__title,
.portfolio-title,
.value-item h4,
.approach-heading-reveal,
.title-card__description,
.quote-author,
.logo {
  font-family: 'Gotham', 'Montserrat', 'Futura', 'Queenside', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 1.2px;
}

/* Logo tweak to feel more modern */
.logo {
  font-weight: 600;
  letter-spacing: 4px
}

/* Hero heading should use the chosen display font for impact */
.hero h1 {
  font-family: 'Gotham', 'Montserrat', sans-serif
}

.portfolio-info-panel h3 {
  color: var(--color-primary);
  margin-bottom: .3rem;
}

.portfolio-info-panel h4 {
  color: var(--color-text-light);
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.portfolio-info-panel.in-view {
  border-color: var(--color-primary);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

/* CONTACT */
.contact-trigger {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  width: 70px;
  height: 70px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  transition: var(--transition-fast);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  border: 2px solid rgba(232, 212, 176, .3)
}

.contact-trigger:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 15px 50px rgba(196, 166, 118, .5)
}

.contact-trigger-icon {
  font-size: 2rem;
  color: var(--color-brown-dark)
}

.contact-section {
  position: fixed;
  top: 0;
  right: -100%;
  width: 500px;
  height: 100vh;
  background: linear-gradient(135deg, rgba(15, 10, 6, .98), rgba(26, 20, 13, .98));
  backdrop-filter: blur(30px);
  padding: 4rem 3rem;
  z-index: 1001;
  transition: right 1.2s var(--bezier);
  box-shadow: -20px 0 80px rgba(0, 0, 0, .9);
  border-left: 1px solid rgba(196, 166, 118, .3);
  overflow: auto
}

.contact-section.active {
  right: 0
}

.contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease
}

.contact-overlay.active {
  opacity: 1;
  pointer-events: auto
}

.contact-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 2rem;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-fast);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(196, 166, 118, .1)
}

.contact-close:hover {
  transform: rotate(90deg);
  background: rgba(196, 166, 118, .2)
}

.contact-content {
  max-width: 600px;
  margin: 0 auto
}

.contact-content {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 6.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center
}

.contact-info {
  text-align: center;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1
}

.contact-info h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: .4rem;
  letter-spacing: .6px
}

.contact-info p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: .25rem 0
}

.contact-info a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--transition-fast)
}

.contact-info a:hover {
  color: var(--color-primary)
}

/* Business hours / CTA block centered and neat */
/* Business hours block: simple, centered, no background patch */
.contact-details-remaining {
  max-width: 520px;
  margin: 1rem auto;
  padding: 0.5rem 0;
  text-align: center;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1
}

.contact-details-remaining h4 {
  margin: 0 0 .4rem;
  font-weight: 600;
  color: var(--color-primary)
}

.contact-details-remaining p {
  margin: 0 0 1rem 0;
  color: var(--color-text-light);
  line-height: 1.6
}

/* Ensure paragraph text inside contact drawer uses Merriweather for consistency */
.contact-section p,
.contact-section .contact-info p,
.contact-section .contact-details-remaining p {
  font-family: 'Merriweather', serif;
}

/* Contact social buttons (WhatsApp / Instagram / Mail) - footer placement */
.contact-footer {
  position: absolute;
  left: 3rem;
  right: 3rem;
  bottom: 2.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin: 0
}

.contact-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .28s var(--bezier), box-shadow .28s var(--bezier);
  text-decoration: none
}

/* icon sizing: WhatsApp image larger to match Instagram SVG visual weight */
.contact-social__btn svg {
  width: 24px;
  height: 24px
}

.contact-social__btn .social-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block
}

/* WhatsApp logo needs to be bigger to match Instagram visually */
.contact-social__btn.whatsapp .social-icon {
  width: 28px;
  height: 28px
}

.contact-social__btn.instagram svg {
  width: 24px;
  height: 24px
}

/* keep button surface transparent; use subtle colored borders to hint brand */
.contact-social__btn.whatsapp {
  background: transparent;
  border-color: rgba(196, 166, 118, .18)
}

.contact-social__btn.instagram {
  background: transparent;
  border-color: rgba(255, 255, 255, .12)
}

.contact-social__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12)
}

/* Light theme overrides to keep icons visible */
.light-theme .contact-social__btn {
  border-color: rgba(139, 94, 50, .08);
  background: transparent
}

/* mail button: use accent color for visibility and keep image transparent */
.contact-social__btn.mail {
  color: var(--color-primary);
  border-color: rgba(196, 166, 118, .12);
  background: transparent;
  border: none;
  padding: 6px;
}

.contact-social__btn.mail svg {
  width: 20px;
  height: 20px
}

.contact-social__btn.mail .social-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  background: transparent
}

/* ensure footer buttons are visible in light theme */
.light-theme .contact-footer .contact-social__btn {
  border-color: rgba(139, 94, 50, .12)
}

.contact-form {
  display: grid;
  gap: 1.25rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  width: 100%
}

.form-group {
  display: flex;
  flex-direction: column
}

.form-group input,
.form-group textarea,
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 1.25rem 1.2rem;
  border: 1px solid rgba(196, 166, 118, .08);
  background: rgba(45, 36, 22, .06);
  font-size: 1rem;
  font-family: inherit;
  transition: var(--transition-fast);
  color: var(--color-text);
  border-radius: 8px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-text-light);
  opacity: .6;
  letter-spacing: .5px
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(61, 52, 38, .2);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(196, 166, 118, .08)
}

.contact-form textarea {
  resize: vertical;
  min-height: 5rem;
  max-height: 40rem
}

.submit-btn {
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: .9rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 1rem;
  font-weight: 300
}

.submit-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2)
}

.contact-section p,
.contact-section a,
.contact-section li {
  font-family: 'QueensidesMedium', serif !important;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  color: var(--color-text);
  text-decoration: none;
}

/* FOOTER */
.footer {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 4rem;
  text-align: center
}

.footer p {
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
  letter-spacing: .5px
}

/* LOADER */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--color-bg-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .5s ease-out
}

.page-loader.hidden {
  opacity: 0;
  pointer-events: none
}

.loader-text {
  font-size: 1.5rem;
  color: var(--color-primary);
  letter-spacing: 3px;
  animation: pulse 1.5s ease-in-out infinite
}

/* ANIMATIONS */
@keyframes pulse {

  0%,
  100% {
    opacity: .4
  }

  50% {
    opacity: 1
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

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

@keyframes cinematicZoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1.1);
  }
}



@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) rotate(0)
  }

  33% {
    transform: translate(30px, -30px) rotate(120deg)
  }

  66% {
    transform: translate(-20px, 20px) rotate(240deg)
  }
}

/* RESPONSIVE */
@media (max-width:1024px) {
  .gate {
    margin: 4rem 2rem
  }

  .title-panel {
    min-height: auto
  }

  .title-panel__media {
    min-height: 360px
  }
}

@media (max-width:768px) {
  .nav {
    padding: 0.75rem 1.25rem;
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  .logo {
    font-size: 1.1rem;
    letter-spacing: 2px
  }

  .nav-links {
    width: 100%;
    justify-content: flex-end;
    gap: 1.2rem;
  }

  .nav-links a {
    font-size: .8rem
  }

  .hero h1 {
    font-size: 2.4rem
  }

  .hero-subtitle {
    font-size: .95rem
  }

  .hero-image-container {
    top: 0;
    height: 100%;
  }

  .section-pad {
    padding: 3.5rem 1.5rem
  }

  .section-title {
    font-size: 2rem
  }

  .portfolio-grid {
    grid-template-columns: 1fr
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem
  }

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

  .section-body {
    transform: none;
    opacity: 1
  }

  .gate {
    display: none
  }

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

  .service-hero-grid,
  .portfolio-hero {
    flex-direction: column
  }

  .awards-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-pipelines {
    grid-template-columns: 1fr
  }

  .gallery-layout {
    flex-direction: column
  }

  .gallery-visual,
  .gallery-details {
    flex: unset;
    width: 100%;
  }

  .gallery-container {
    padding: 2.5rem 1.2rem
  }

  .contact-section {
    width: 100%;
    left: auto;
    border-radius: 0;
    padding: 3rem 1.75rem;
  }

  .contact-content {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .contact-info,
  .contact-social,
  .contact-form {
    width: 100%
  }
}

@media (max-width:480px) {
  .contact-footer {
    position: static;
    display: flex;
    justify-content: center;
    margin-top: 1rem
  }
}

@media (max-width:480px) {
  .nav {
    padding: 0.6rem 1rem
  }

  .nav-links {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: .35rem;
  }

  .hero-content {
    padding: 1.5rem
  }

  .hero h1 {
    font-size: 2rem;
    letter-spacing: 4px
  }

  .hero-subtitle {
    font-size: .9rem;
    margin-bottom: 2.5rem
  }

  .hero-bg-shape {
    display: none
  }

  .section-pad {
    padding: 3rem 1.25rem
  }

  .section-title {
    font-size: 1.7rem
  }

  .section-subtitle {
    font-size: .95rem;
    margin-bottom: 3rem
  }

  .footer {
    padding: 2.5rem 1.5rem
  }
}

/* ===== GALLERY MODAL ===== */
.gallery-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-modal.active {
  display: flex;
  opacity: 1;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 5rem;
}

.gallery-layout {
  display: flex;
  gap: 3rem;
  width: 100%;
  height: 100%;
}

.gallery-visual {
  position: relative;
  flex: 0 0 60%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-details {
  flex: 0 0 40%;
  border: 1px solid rgba(196, 166, 118, .4);
  border-radius: 22px;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(15, 10, 6, .98), rgba(26, 20, 13, .98));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transition: transform .9s var(--bezier), box-shadow .9s var(--bezier);
  backdrop-filter: blur(10px);
}

.gallery-details:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .75);
}

.gallery-details h3 {
  font-size: 1.8rem;
  color: var(--color-primary);
  font-family: 'DenhamDirect', sans-serif;
}

.gallery-details p {
  color: var(--color-text-light);
  font-family: 'QueensidesMedium', serif;
  font-size: 1.1rem;
}

.gallery-facts {
  list-style: none;
  display: grid;
  gap: .6rem;
}

.gallery-facts li {
  position: relative;
  padding-left: 1.2rem;
  font-family: 'QueensidesMedium', serif;
  font-size: 1.05rem;
}

.gallery-facts li::before {
  content: '- ';
  position: absolute;
  left: 0;
  color: var(--color-secondary);
}

.gallery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.gallery-tags span {
  border: 1px solid rgba(196, 166, 118, .3);
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-family: 'Olivera', sans-serif;
}

.gallery-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  transition: all 0.4s ease;
  background: rgba(255, 255, 255, 0.1);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gallery-close:hover {
  transform: rotate(90deg);
  background: rgba(255, 255, 255, 0.2);
}

.gallery-counter {
  position: absolute;
  top: 2rem;
  left: 2rem;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 1px;
}

.gallery-slides {
  position: relative;
  width: 100%;
  height: 80%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
}

.gallery-slide {
  position: absolute;
  height: 100%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  transform-style: preserve-3d;
}

.gallery-slide img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.gallery-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1) translateZ(0);
  z-index: 3;
  pointer-events: auto;
}

.gallery-slide.prev-slide {
  opacity: 0.4;
  transform: translateX(-65%) scale(0.75) translateZ(-200px);
  z-index: 2;
  filter: blur(3px);
}

.gallery-slide.next-slide {
  opacity: 0.4;
  transform: translateX(65%) scale(0.75) translateZ(-200px);
  z-index: 2;
  filter: blur(3px);
}

.gallery-slide.hidden-left {
  opacity: 0;
  transform: translateX(-100%) scale(0.5);
  z-index: 1;
}

.gallery-slide.hidden-right {
  opacity: 0;
  transform: translateX(100%) scale(0.5);
  z-index: 1;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10001;
  background: rgba(255, 255, 255, 0.1);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gallery-nav:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.gallery-prev {
  left: 2rem;
}

.gallery-next {
  right: 2rem;
}

/* ===== PHILOSOPHY PAGE - SMOOTH TRANSITIONS ===== */
.philosophy-hero {
  text-align: center;
  margin-bottom: 5rem;
}

/* Smooth Fade In - Fast and Immediate */
.philosophy-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide In Animation */
.philosophy-slide-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-slide-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Text Reveal - Sequential but Fast */
.philosophy-text-reveal {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.045, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-text-reveal.visible {
  opacity: 1;
  transform: translateX(0);
}

.philosophy-text-reveal.visible:nth-child(2) {
  transition-delay: 0.1s;
}

.philosophy-text-reveal.visible:nth-child(3) {
  transition-delay: 0.2s;
}

/* Image Reveal - Smooth Scale and Slide */
.philosophy-image-reveal {
  opacity: 0;
  transform: translateX(40px) scale(0.96);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-image-reveal.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Image Container Enhancements */
.about-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.about-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-image-container:hover .about-image {
  transform: scale(1.05);
}

.image-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196, 166, 118, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.about-image-container:hover .image-gradient-overlay {
  opacity: 1;
}

/* Quote Section - Elegant Fade */
.philosophy-quote {
  max-width: 900px;
  margin: 6rem auto 5rem;
  padding: 4rem 3rem;
  text-align: center;
  position: relative;
  background: linear-gradient(135deg, rgba(40, 35, 25, 0.5), rgba(26, 20, 13, 0.7));
  border: 1px solid rgba(196, 166, 118, 0.25);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
}

.philosophy-quote:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9);
  border-color: rgba(196, 166, 118, 0.35);
}

.philosophy-quote-fade {
  opacity: 0;
  transform: translateY(25px) scale(0.98);
  transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-quote-fade.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.quote-decoration {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 60px;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.5;
}

.quote-text {
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--color-text);
  font-style: italic;
  margin: 1.5rem 0;
  position: relative;
  z-index: 1;
}

.quote-author {
  font-size: 0.95rem;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

/* Values Grid - Smooth Stagger */
.philosophy-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 5rem auto;
}

.value-item {
  padding: 3rem 2.5rem;
  background: linear-gradient(135deg, rgba(45, 36, 22, 0.6), rgba(26, 20, 13, 0.8));
  border: 1px solid rgba(196, 166, 118, 0.2);
  border-radius: 12px;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.value-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(196, 166, 118, 0.1), transparent);
  transition: left 0.8s ease;
}

.value-item:hover::before {
  left: 100%;
}

.value-item:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.philosophy-value-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-value-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

.philosophy-value-fade[data-index="0"].visible {
  transition-delay: 0s;
}

.philosophy-value-fade[data-index="1"].visible {
  transition-delay: 0.1s;
}

.philosophy-value-fade[data-index="2"].visible {
  transition-delay: 0.2s;
}

.value-icon {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--color-primary);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 0;
  transition: all 0.5s ease;
  font-family: 'DenhamDirect', sans-serif;
}

.value-item:hover .value-icon {
  opacity: 0.7;
  transform: scale(1.05);
}

.value-item h4 {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.value-item p {
  font-size: 1.12rem;
  color: var(--color-text-light);
  line-height: 1.8;
  text-align: justify;
}

/* Approach Section */
.philosophy-approach {
  max-width: 1200px;
  margin: 6rem auto 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.approach-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.approach-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: grayscale(15%);
}

.approach-image-wrapper:hover .approach-image {
  transform: scale(1.08);
  filter: grayscale(0%);
}

.philosophy-approach-img {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-approach-img.visible {
  opacity: 1;
  transform: translateX(0);
}

.approach-text {
  padding: 2rem 0;
}

.philosophy-approach-txt {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-approach-txt.visible {
  opacity: 1;
  transform: translateX(0);
}

.approach-text h3 {
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-primary);
  margin-bottom: 2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.approach-text p {
  font-size: 1.1rem;
  color: var(--color-text-light);
  line-height: 1.9;
  margin-bottom: 1.5rem;
}

/* Back Button */
.philosophy-back-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 4rem auto 0;
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  transform: translateY(20px);
}

.philosophy-back-btn.visible {
  opacity: 1;
  transform: translateY(0);
}

.philosophy-back-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateX(-5px);
}

/* Responsive */
@media (max-width: 1024px) {
  .philosophy-approach {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .philosophy-values {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .philosophy-quote {
    padding: 3rem 2rem;
    margin: 4rem auto;
  }

  .quote-text {
    font-size: 1.2rem;
  }

  .value-item {
    padding: 2rem 1.5rem;
  }
}

/* ===== ADDITIONAL SMOOTH TRANSITIONS ===== /
  / Hero Section Enhancements */
.hero-underline {
  width: 0;
  height: 2px;
  background: var(--color-primary);
  margin: 0 auto 2rem;
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-underline-reveal.visible .hero-underline {
  width: 120px;
}

.hero-divider {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  margin: 2rem auto 0;
  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-divider-reveal.visible .hero-divider {
  width: 300px;
}

/* Text Accent Line */
.text-accent-line {
  position: absolute;
  left: -2rem;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--color-primary);
  transition: height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-accent-reveal.visible .text-accent-line {
  height: 100px;
}

.about-text {
  position: relative;
}

.philosophy-heading-underline {
  position: relative;
  display: inline-block;
}

.philosophy-heading-underline::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-heading-underline.visible::after {
  width: 100%;
}

.about-text .philosophy-paragraph-line {
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--color-text-light);
  margin-bottom: 2rem;
  max-width: 600px;
  position: relative;
  padding-left: 1.5rem;
  transition: var(--transition-smooth);
  text-align: justify;
}

.philosophy-paragraph-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0;
  height: 1px;
  background: rgba(196, 166, 118, 0.3);
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-paragraph-line.visible::before {
  width: 1rem;
}

.text-decoration-circle {
  position: absolute;
  right: -3rem;
  bottom: -2rem;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(196, 166, 118, 0.2);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-circle-reveal.visible .text-decoration-circle {
  opacity: 1;
  transform: scale(1);
}

/* Image Frame and Corner Accent */
.image-frame {
  position: absolute;
  inset: -15px;
  border: 1px solid rgba(196, 166, 118, 0.3);
  border-radius: 4px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.philosophy-frame-reveal.visible .image-frame {
  opacity: 1;
  transform: scale(1);
}

.image-corner-accent {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  opacity: 0;
  transform: translate(10px, -10px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-corner-reveal.visible .image-corner-accent {
  opacity: 0.6;
  transform: translate(0, 0);
}

/* Quote Section Enhancements */
.quote-mark-left,
.quote-mark-right {
  position: absolute;
  font-size: 6rem;
  color: var(--color-primary);
  opacity: 0;
  font-family: 'Times New Roman', serif;
  line-height: 1;
}

.quote-mark-left {
  top: 1rem;
  left: 2rem;
  transform: translateX(-30px) rotate(-15deg);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quote-mark-right {
  bottom: 1rem;
  right: 2rem;
  transform: translateX(30px) rotate(15deg);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-quote-mark.visible {
  opacity: 0.2;
  transform: translateX(0) rotate(0deg);
}

.philosophy-quote-text-reveal {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-quote-text-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.philosophy-quote-author-reveal {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-quote-author-reveal.visible {
  opacity: 1;
  transform: translateX(0);
}

.quote-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(196, 166, 118, 0.02) 10px, rgba(196, 166, 118, 0.02) 20px);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  border-radius: 16px;
}

.philosophy-pattern-reveal.visible .quote-bg-pattern {
  opacity: 1;
}

.quote-decoration {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-quote-line.visible .quote-decoration {
  width: 60px;
}

/* Values Section Enhancements */
.values-title-wrapper {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 3rem;
}

.values-section-title {
  font-size: 2rem;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-values-title-reveal.visible .values-section-title {
  opacity: 1;
  transform: translateY(0);
}

.values-underline {
  width: 0;
  height: 2px;
  background: var(--color-primary);
  margin: 0 auto;
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-values-title-reveal.visible .values-underline {
  width: 150px;
}

.value-icon-wrapper {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
}

.value-icon-bg {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(196, 166, 118, 0.4);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.value-item:hover .value-icon-bg,
.service-card:hover .value-icon-bg {
  opacity: 1;
  transform: scale(1.1);
}

.value-title-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.value-title-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.value-line {
  width: 0;
  height: 1px;
  background: var(--color-primary);
  margin: 1rem 0;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.value-item.visible .value-line {
  width: 50px;
}

.service-card .value-line {
  width: 50px;
  margin: 1rem auto 1.25rem;
}

.value-text-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.value-text-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.value-hover-effect {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(196, 166, 118, 0.1), transparent);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  border-radius: 12px;
}

.value-item:hover .value-hover-effect {
  opacity: 1;
  transform: scale(1);
}

/* Approach Section Enhancements */
.approach-section-label {
  position: absolute;
  top: -2rem;
  left: 0;
  font-size: 0.85rem;
  color: var(--color-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-approach-label-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.approach-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196, 166, 118, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  border-radius: 8px;
}

.philosophy-approach-overlay-reveal.visible .approach-image-overlay {
  opacity: 1;
}

.approach-image-wrapper:hover .approach-image-overlay {
  opacity: 0.3;
}

.approach-image-border {
  position: absolute;
  inset: -20px;
  border: 1px solid rgba(196, 166, 118, 0.2);
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.philosophy-approach-border-reveal.visible .approach-image-border {
  opacity: 1;
  transform: scale(1);
}

.approach-number {
  position: absolute;
  top: -1rem;
  right: 0;
  font-size: 8rem;
  font-weight: 300;
  color: var(--color-primary);
  opacity: 0.1;
  line-height: 1;
  font-family: 'Lora', serif;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-approach-number-reveal.visible {
  opacity: 0.15;
  transform: translateX(0);
}

.approach-heading-reveal {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.approach-heading-reveal.visible {
  opacity: 1;
  transform: translateX(0);
}

.approach-text-line {
  width: 0;
  height: 2px;
  background: var(--color-primary);
  margin: 1.5rem 0 2rem;
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.approach-text.visible .approach-text-line {
  width: 80px;
}

.approach-paragraph-reveal {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.approach-paragraph-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.approach-paragraph-reveal.visible:nth-of-type(2) {
  transition-delay: 0.15s;
}

/* Smooth Parallax Effect */
.philosophy-approach {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .philosophy-approach-img {
    transition: transform 0.1s ease-out;
  }
}

/* Accent line under logo /
  .logo-accent {
  display: block;
  height: 4px;
  width: 34px;
  margin: 5px auto 0 auto;
  background: linear-gradient(90deg, #c4a676 0%, #d4b896 100%);
  border-radius: 8px;
  }
  .nav-animated {
  box-shadow: 0 2px 24px rgba(44, 30, 27, 0.10);
  transition: box-shadow 0.6s cubic-bezier(.23,1,.32,1);
  }
  .footer.reveal {
  background: #2d2416;
  color: #f5e6d3;
  box-shadow: 0 0 16px rgba(44,30,27,.08);
  }
  / Ensure fadeInUp and reveal work everywhere */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.23, 1, .32, 1),
    transform 0.8s cubic-bezier(.23, 1, .32, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.fadeInUp {
  animation: fadeInUp 1.2s var(--bezier);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.service-card {
  transition: transform 0.7s var(--bezier), box-shadow 0.7s var(--bezier);
  box-shadow: 0 2px 18px rgba(196, 166, 118, .09);
}

.service-card:hover {
  transform: scale(1.06) rotateX(2deg);
  box-shadow: 0 12px 48px rgba(196, 166, 118, .17);
}

.section-title.reveal {
  border-bottom: 2.5px solid #d4b896;
  padding-bottom: 5px;
  margin-bottom: 24px;
}

/* Services section: no full-width border under the title, only JS-drawn short line */
#services .section-title.reveal {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

/* =========================================
   PORTFOLIO POLISH & ANIMATIONS
   ========================================= */

/* 1. Fix Thumbnail Box Sizing */
.portfolio-item {
  height: auto !important;
  /* Hug content */
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  /* Remove card padding if any */
  border: none !important;
  /* Clean look */
  background: transparent !important;
  box-shadow: none !important;
  /* Shadow on image instead */
  overflow: visible !important;
  /* Allow hover zoom */
  opacity: 0;
  /* Prepare for fade-in */
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.portfolio-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Image Wrapper & Hover Effect */
.portfolio-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.4s ease;
  width: 100%;
}

.portfolio-img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  /* Remove inline gap */
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-item:hover .portfolio-img-wrapper {
  box-shadow: 0 20px 60px rgba(139, 94, 50, 0.15);
}

.portfolio-item:hover .portfolio-img-wrapper img {
  transform: scale(1.06);
  /* Cinematic Zoom */
}

/* 3. Text Overlay Refinement (Desktop: Hover Slide-Up | Mobile: Static) */
/* Container needs relative positioning */
.portfolio-item {
  position: relative !important;
  overflow: hidden !important;
}

.portfolio-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 2rem 1.5rem 1.5rem !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent) !important;
  z-index: 10 !important;
  margin-top: 0 !important;
  /* Reset */

  /* Desktop Default: Hidden/Slid Down */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Desktop Hover: Slide Up */
.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-title {
  font-size: 1.3rem;
  letter-spacing: 1px;
  margin-bottom: 0.3rem;
  color: #fff !important;
  /* Ensure white text on dark overlay */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: translateY(10px);
  transition: transform 0.4s ease 0.1s;
}

.portfolio-item:hover .portfolio-title {
  transform: translateY(0);
}

.portfolio-category {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8) !important;
  letter-spacing: 0.5px;
}

/* 4. Modal Professional Entry */
.gallery-modal {
  backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* Ensure Observer treats contents as non-intersecting */
  transition: opacity 0.5s ease, backdrop-filter 0.5s ease, visibility 0.5s ease;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.8);
  /* Fallback */
}

.gallery-modal.active {
  backdrop-filter: blur(12px);
  /* Glass effect */
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.gallery-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 2000;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-primary);
  cursor: pointer;
  transition: transform 0.4s ease, color 0.3s ease;
}

.gallery-close:hover {
  color: var(--color-white);
  transform: rotate(90deg);
}

/* ===== SMOOTH SCROLL ANIMATIONS (About Page Style) ===== */
.philosophy-fade-in,
.philosophy-value-fade,
.philosophy-slide-in,
.philosophy-title-split,
.philosophy-subtitle-words {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.philosophy-fade-in.visible,
.philosophy-value-fade.visible,
.philosophy-slide-in.visible,
.philosophy-title-split.visible,
.philosophy-subtitle-words.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay for grid items if needed, though JS handles some staggering */
.portfolio-item.visible {
  opacity: 1 !important;
  /* Ensure override */
  transform: translateY(0) !important;
}


/* 4. Modal Professional Entry */
.gallery-visual,
.gallery-details {
  opacity: 0;
  transform: translateY(20px);
  /* Smooth slide up, removed bounce scale */
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gallery-modal.active .gallery-visual {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.gallery-modal.active .gallery-details {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* Staggered Internal Details */
.gallery-modal .gallery-details>* {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.gallery-modal.active .gallery-details>* {
  opacity: 1;
  transform: translateY(0);
}

.gallery-modal.active .gallery-details .eyebrow {
  transition-delay: 0.3s;
}

.gallery-modal.active .gallery-details h3 {
  transition-delay: 0.35s;
}

.gallery-modal.active .gallery-details #galleryCategory {
  transition-delay: 0.4s;
}

/* Description container (Container Scroll) moved to .gallery-details */

.gallery-modal.active .gallery-details #galleryDescription {
  transition-delay: 0.45s;
}


/* Unified Scroll for Description Tab */
.gallery-details {
  max-height: 80vh;
  /* Default desktop height limit */
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

.gallery-details::-webkit-scrollbar {
  width: 4px;
}

.gallery-details::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-details::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 4px;
}

.gallery-modal.active .gallery-details .gallery-facts {
  transition-delay: 0.5s;
}

.gallery-modal.active .gallery-details .gallery-tags {
  transition-delay: 0.55s;
}

/* =========================================
   MOBILE OPTIMIZATION (Max-Width: 768px)
   ========================================= */
/* =========================================
   MOBILE OPTIMIZATION (Max-Width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {

  /* --- MOBILE ANIMATIONS: Fade In / Move In --- */
  @keyframes fadeMoveUp {
    0% {
      opacity: 0;
      transform: translateY(40px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Apply to Portfolio Items on Mobile */


  /* PORTFOLIO GRID */
  /* PORTFOLIO GRID */
  .portfolio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 0;
  }
}

/* DESKTOP (Default / Large Screens) */
@media (min-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* TABLET */
@media (min-width: 769px) and (max-width: 1023px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Light Theme Loader Override */
.light-theme .page-loader {
  background: #f9f5f0;
  /* Cream/Off-white background */
}

/* RESUME MOBILE STYLES */
@media screen and (max-width: 768px) {

  .portfolio-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin-bottom: 2rem;
    /* Add spacing between items */
  }

  /* Portrait Ratio Wrapper */
  .portfolio-img-wrapper {
    width: 100%;
    aspect-ratio: auto;
    /* Natural / Landscape */
    overflow: hidden;
  }

  .portfolio-image {
    width: 100%;
    height: auto;
    /* Allow natural height */
    object-fit: cover;
    transition: transform 0.8s var(--bezier);
  }

  /* Static Layout for Mobile (Text below Image) */
  .portfolio-overlay {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    padding: 1rem 0.5rem 0 !important;
    pointer-events: none;
    /* Let click pass to item */
  }

  .portfolio-title {
    transform: none !important;
    color: var(--color-primary) !important;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    text-shadow: none !important;
  }

  .portfolio-category {
    color: var(--color-text-light) !important;
    font-size: 0.95rem;
  }

  /* Gallery Modal Mobile Entry - Staggered */
  .gallery-modal.active .gallery-visual {
    /* Use global transition instead of keyframes */
    /* animation: fadeMoveUp 0.7s ease-out forwards;  <-- REMOVED */
    opacity: 1;
    transform: translateY(0);
  }

  /* Reset parent animation to allow children to stagger independently if needed, 
     but here let's animate the container + children for a rich effect or just children.
     User asked for "like about page" which implies staggering children. */
  .gallery-modal.active .gallery-details {
    opacity: 1;
    /* Container visible, children animate */
    transform: none;
    transition-delay: 0.2s;
    /* Ensure delay matches desktop/global */
  }

  /* Remove conflicting keyframes on details children so global transition works */
  /* Removed conflicting override to allow animations */


  /* Stagger Delays */
  .gallery-modal.active .gallery-details .eyebrow {
    animation-delay: 0.1s;
  }

  .gallery-modal.active .gallery-details h3 {
    animation-delay: 0.2s;
  }

  .gallery-modal.active .gallery-details #galleryCategory {
    animation-delay: 0.3s;
  }

  .gallery-modal.active .gallery-details #galleryDescription {
    animation-delay: 0.4s;
  }

  .gallery-modal.active .gallery-details .gallery-facts {
    animation-delay: 0.5s;
  }

  .gallery-modal.active .gallery-details .gallery-tags {
    animation-delay: 0.6s;
  }

  /* Hide floating contact trigger on mobile */
  .contact-trigger {
    display: none !important;
  }

  /* --- GLOBAL ADJUSTMENTS --- */
  html,
  body {
    overflow-x: hidden;
    /* Prevent horizontal scroll */
  }

  .section-pad {
    padding: 6rem 1.5rem;
    /* Reduced padding */
  }

  h1 {
    font-size: 1.7rem !important;
  }

  h2 {
    font-size: 2rem !important;
  }

  .section-title {
    font-size: 2rem;
  }

  /* --- NAVBAR --- */
  .nav {
    padding: 1rem 1.5rem;
    /* Compact nav */
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    /* Context for dropdown */
  }

  .logo {
    font-size: 1.1rem;
    position: relative;
    z-index: 1001;
    /* Above dropdown */
  }

  /* Hamburger Menu Button */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 2000;
    /* High z-index */
    position: absolute;
    /* Force placement */
    top: 1.5rem;
    right: 1.5rem;
  }

  .hamburger-menu span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* Animate Hamburger to X */
  .hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger-menu.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }

  /* Mobile Nav Links (Dropdown/Overlay) */
  .nav-links {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(15, 10, 6, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 1000;
    padding-bottom: 5px;
    margin-top: 0;
  }

  .nav-links.active {
    display: flex !important;
    animation: fadeIn 0.3s ease-out;
  }

  .nav-links a {
    font-size: 1.2rem;
    /* Larger for touch */
    letter-spacing: 2px;
    color: var(--color-text);
  }

  /* Light Theme Mobile Menu Override */
  .light-theme .nav-links {
    background: #f9f5f0;
    /* Cream Background */
  }

  .light-theme .nav-links a {
    color: var(--color-brown-dark) !important;
    /* Brown Text */
  }

  /* HIDE LOGIN BUTTON ON MOBILE */
  .nav-links .cta-button {
    display: none !important;
  }

  /* SHOW CONTACT LINK ON MOBILE */
  .mobile-only-contact {
    display: block !important;
    color: var(--color-primary);
    font-weight: 600;
  }

  /* --- HERO SECTION --- */
  .hero-content {
    padding: 1rem;
    width: 100%;
  }

  .hero h1 {
    font-size: 2.8rem;
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  /* --- INDEX PAGE: SPLIT VIEW --- */
  .split-section {
    flex-direction: column;
    /* Stack vertically */
    height: auto;
    min-height: auto;
  }

  .split-top,
  .split-bottom {
    width: 100%;
    height: 50vh;
    /* Split screen equally */
    position: relative;
    transform: none !important;
    /* Reset transforms if any */
  }

  .split-bottom {
    padding: 2rem;
    height: auto;
    /* Let text grow */
    min-height: 50vh;
  }

  .content-slider-wrapper {
    position: relative;
    opacity: 1;
    /* Ensure visibility */
  }

  /* --- PORTFOLIO --- */
  .portfolio-grid {
    grid-template-columns: 1fr;
    /* Single Column */
    gap: 2rem;
    padding: 0 1rem;
  }

  /* --- VERTICAL SCROLL GALLERY (Mobile) --- */
  /* Target the gallery when open on mobile */
  .gallery-modal.active {
    overflow-y: auto !important;
    /* Enable scrolling on modal */
    display: block !important;
    background: var(--color-bg-brown) !important;
    /* Stack blocking flex center alignment */
  }

  .gallery-container {
    padding: 3rem 1.5rem !important;
    height: auto !important;
    display: block !important;
  }

  .gallery-layout {
    flex-direction: column !important;
    gap: 2rem !important;
    height: auto !important;
  }

  /* Images Container */
  .gallery-visual {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    /* Reset flex */
  }

  .gallery-slides {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    perspective: none !important;
  }

  /* Individual Slide */
  .gallery-slide {
    position: relative !important;
    /* Opacity handled by animation class */
    display: block !important;
    height: auto !important;
    width: 100% !important;
    pointer-events: auto !important;
    /* transform handled by animation class */
    /* Reset 3D transform */
    z-index: 1 !important;
    filter: none !important;
    margin-bottom: 0 !important;
  }

  .gallery-slide.active,
  .gallery-slide.prev-slide,
  .gallery-slide.next-slide,
  .gallery-slide.hidden-left,
  .gallery-slide.hidden-right {
    display: block !important;
    /* Opacity managed via scroll */
  }

  /* --- PORTFOLIO MODAL MOBILE LAYOUT --- */
  .gallery-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .gallery-visual,
  .gallery-slides {
    display: contents !important;
  }

  .gallery-slide {
    width: 100% !important;
    height: auto !important;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    display: block !important;
    position: relative !important;
    margin-bottom: 2rem !important;
    order: 3 !important;
  }

  .gallery-slide.visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .gallery-slide img {
    height: auto !important;
    width: 100% !important;
    max-height: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  }

  .gallery-slide:first-child {
    order: 1 !important;
    margin-bottom: 1.5rem !important;
  }

  /* Gallery Info / Description */
  .gallery-details {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    order: 2 !important;
  }

  .gallery-details h3 {
    font-size: 1.8rem;
  }

  /* Hide Controls */
  .gallery-nav,
  .gallery-counter {
    display: none !important;
  }

  /* Fixed Close Button for Mobile */
  .gallery-close {
    position: fixed !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 10001 !important;
    width: 40px !important;
    height: 40px !important;
  }


  /* --- CONTACT DRAWER --- */
  .contact-section {
    width: 100%;
    /* Full width on mobile */
    padding: 3rem 1.5rem;
  }

  .contact-close {
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2.5rem;
    z-index: 2000;
    /* Ensure clickable */
    background: rgba(0, 0, 0, 0.5);
    /* Background for visibility */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Disable hover effects that might stick on mobile */
  .metric-card:hover,
  .service-card:hover,
  .award-card:hover {
    transform: none;
  }

  /* --- MOBILE FONT SIZE REVERT --- */
  .section-subtitle {
    font-size: 1.1rem !important;
  }

  .about-text p {
    font-size: 1.1rem !important;
    text-align: justify !important;
  }

  .about-text .philosophy-paragraph-line {
    font-size: 1.1rem !important;
    text-align: justify !important;
  }

  .value-item p,
  .service-card p {
    font-size: 1rem !important;
    text-align: justify !important;
  }

  /* Prevent Name Wrapping */
  .team-name {
    font-size: 1.3rem !important;
  }

  .team-desc {
    font-size: 1.1rem !important;
  }

  .team-role {
    font-size: 0.8rem !important;
  }
}

/* Default: Hide Hamburger & Mobile Links on Desktop (Min-Width 769px) */
@media screen and (min-width: 769px) {

  .hamburger-menu,
  .mobile-only-contact {
    display: none !important;
  }
}

/* DIY Accent for missing font glyph */
.custom-accent {
  position: relative;
  display: inline-block;
}

.custom-accent::after {
  content: '´';
  position: absolute;
  top: -5px;
  left: 55%;
  transform: translateX(-50%);
  font-family: 'Olivera', sans-serif;
  font-size: 1rem;
  color: var(--color-primary);
  font-weight: normal;
}

/* Loader Text -> Logo */
.loader-logo {
  width: 140px;
  /* Reduced from 180px */
  height: auto;
  object-fit: contain;
  animation: logoPulse 2.5s ease-in-out infinite;
  /* Gentle pulse */
}

/* Light Theme: Turn White Logo to Dark Brown (#3d3426) */
.light-theme .loader-logo {
  filter: brightness(0) saturate(100%) invert(19%) sepia(15%) saturate(1131%) hue-rotate(347deg) brightness(150%) contrast(90%);
}

@keyframes logoPulse {
  0% {
    opacity: 0.6;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0.6;
    transform: scale(0.98);
  }
}

/* TEAM SECTION - STRICT SPLIT LAYOUT -> REFACTORED TO SINGLE COLUMN LIST + IMAGES */
.team-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10rem;
  margin-bottom: 8rem;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.team-section .values-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4rem;
}


.team-split-container {
  display: flex;
  flex-direction: row;
  /* Back to Row for Columns */
  align-items: center;
  /* Center images vertically */
  justify-content: space-between;
  /* Columns share space */
  width: 100%;
  max-width: 1400px;
  margin: 2rem auto 0;
  position: relative;
  gap: 3rem;
  padding: 0 4rem;
}

/* LEFT COLUMN: LIST */
.team-list {
  width: 48%;
  /* Left Side */
  display: flex;
  flex-direction: column;
}

/* RIGHT COLUMN: IMAGES */
/* RIGHT COLUMN: IMAGES */
.team-images {
  width: 45%;
  /* Right Side */
  display: flex;
  flex-direction: column;
  gap: 6rem;
  /* Spacing between images */
  /* align-self: center; <-- Implied by container align-items: center */
  transform: translateY(-20px);
  /* Fine-tuned alignment as requested */
}

/* Individual Item in List */
.team-item {
  width: 100%;
  position: relative;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  margin-bottom: 2rem;
  /* Spacing between names */
  transform: translateY(20px);
}

.team-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure images fit well */
.team-visual-img {
  height: 600px !important;
  aspect-ratio: auto;
  object-fit: cover !important;
  width: 100% !important;
}

/* Responsive: Stack on Mobile */
@media (max-width: 900px) {
  .team-split-container {
    flex-direction: column;
    padding: 0 0.5rem;
  }

  .team-list {
    width: 100%;
  }

  .team-images {
    display: none;
    /* Hide images on mobile as requested */
  }
}

/* Typography */
.team-name {
  font-family: 'QueensidesMedium', serif;
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: none;
}

.team-role {
  display: block;
  font-family: 'QueensidesMedium', serif;
  font-size: 0.9rem;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.team-desc {
  font-family: 'Olivera', serif;
  font-size: 1.25rem;
  color: var(--color-text-light);
  line-height: 1.6;
  opacity: 0.8;
  max-width: 100%;
}

/* Hover Effect */
.team-item:hover .team-name {
  text-shadow: 0 0 20px rgba(196, 166, 118, 0.3);
}

.team-item:hover .team-role {
  color: var(--color-white);
}

/* Responsive */
@media (max-width: 900px) {
  .team-split-container {
    gap: 4rem;
  }

  .team-row {
    flex-direction: column;
    gap: 4rem;
    padding: 0;
    align-items: center;
  }

  .team-item {
    width: 100%;
    padding: 0 2rem;
    align-items: center !important;
    text-align: center !important;
    max-width: 500px;
  }

  .team-item.left,
  .team-item.right {
    padding: 0 2rem;
    margin: 0 auto;
    text-align: center;
  }

  .team-divider {
    display: none;
  }

  .team-item.left,
  .team-item.right {
    transform: translateY(20px);
  }

  .team-item.visible {
    transform: translateY(0);
  }
}

/* Light Theme Overrides */
.light-theme .team-divider {
  background: rgba(139, 94, 50, .3);
}

.light-theme .team-name {
  color: #805b3b;
  /* Lighter shade of Rich Brown */
}

.light-theme .team-role {
  color: var(--color-primary);
}

.light-theme .team-desc {
  color: var(--color-text-light);
}

.light-theme .team-item:hover .team-name {
  text-shadow: none;
  color: #ac7e59;
  /* Lighter hover shade */
}

.light-theme .team-item:hover .team-role {
  color: #654321;
  /* Darker hover color */
}

.light-theme .nav-links a,
.light-theme .logo {
  color: #654321 !important;
  /* Force brown color in light theme */
}

.light-theme .nav-links a:hover,
.light-theme .logo:hover {
  color: #ac7e59 !important;
  /* Lighter hover shade */
}

.light-theme .service-card h3,
.light-theme .service-card p,
.light-theme .service-card .service-icon {
  color: #805b3b !important;
  /* Matches Team Name - Lighter than Rich Brown, Darker than Gold */
}

/* Section Header Logo */
.section-header-logo {
  display: block;
  width: 120px;
  height: 44px;
  margin: 0 auto 1.5rem auto;
  background-color: #e8dec7;
  /* Dark theme color */
  -webkit-mask-image: url('assets/Pre Des log 2 f@2x.png');
  mask-image: url('assets/Pre Des log 2 f@2x.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.light-theme .section-header-logo {
  background-color: #6e4a27;
  /* Light theme color */
}


/* FOOTER */
/* FOOTER */
.footer {
  padding: 4rem 1.5rem;
  margin-top: 4rem;
  text-align: center;
}

.footer p {
  font-family: 'QueensidesMedium', serif !important;
  text-align: center;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.back-btn {
  font-family: 'Olivera', cursive !important;
}

/* Mobile Heading Resizing */
/* Mobile Heading Resizing & Clipping Fix */
@media (max-width: 768px) {

  /* Fix: Half-cut headings (Line height + Padding) */
  h1,
  h2,
  h3,
  .section-title,
  .split-title,
  .philosophy-title-split {
    line-height: 1.6 !important;
    /* Increased from 1.5 */
    padding-bottom: 0.6rem !important;
    padding-top: 0.8rem !important;
    /* Increased from 0.5 */
    display: block;
    overflow: visible !important;
    /* Ensure no clipping */
  }

  /* Specific fix for Title Cards (FEATURED PROJECTS) */
  .split-title {
    font-size: 1.3rem !important;
    /* Slightly increased from 1.2 */
    margin-top: 1.2rem !important;
    padding-top: 1rem !important;
    letter-spacing: 0.5px !important;
  }

  /* "OUR EXPERTISE" and other section titles */
  .section-title,
  .philosophy-title-split {
    font-size: 1.55rem !important;
    /* Slightly increased from 1.5 */
    margin-top: 2rem !important;
    /* Ensure spacing from top */
  }

  .values-section-title {
    font-size: 1.4rem !important;
  }

  h3.philosophy-text-reveal {
    font-size: 1.4rem !important;
  }

  .service-card h3 {
    font-size: 1.2rem !important;
  }

  /* FULLY Reduce global body text size for mobile - REMOVED per request to restore original size */
  /* p, li, span, div, a { font-size: 0.9rem !important; } */

  /* RESTORE MOBILE MENU FONT SIZE */
  .nav-links a {
    font-size: 1.3rem !important;
    /* Restore to original size for menu */
  }

  /* Fix for clipped number icons (01, 02 etc) in Approaches/Services */
  /* Fix for clipped number icons (01, 02 etc) in Approaches/Services */
  .value-icon {
    line-height: normal !important;
    padding-top: 1.5rem !important;
    padding-bottom: 0.5rem !important;
    overflow: visible !important;
    display: block !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  /* Ensure wrapper doesn't clip */
  .value-icon-wrapper {
    height: auto !important;
    min-height: 80px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: flex-start !important;
    /* Ensure it starts from top */
  }

  /* Specific fix for Services page alignment (Center horizontally) */
  #services .value-icon-wrapper {
    justify-content: center !important;
    margin: 0 auto 1.5rem auto !important;
    /* Center the wrapper box itself */
  }

  #services .value-icon {
    text-align: center !important;
    width: 100% !important;
  }

  .footer p {
    font-size: 0.75rem !important;
  }

  /* Contact info font size reduction for mobile */
  .contact-info p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* NUCLEAR OPTION FOR MOBILE SERVICES HOVER */
  #services .service-card:hover,
  #services .service-card:active,
  #services .service-card:focus,
  .service-card:hover,
  .value-item:hover {
    transform: none !important;
    background: var(--color-bg-brown) !important;
    box-shadow: none !important;
    border-color: rgba(196, 166, 118, .2) !important;
    filter: none !important;
    cursor: default !important;
    transition: none !important;
  }

  /* Kill all children animations/transforms on hover */
  #services .service-card:hover *,
  #services .service-card:active *,
  #services .service-card:focus *,
  .service-card:hover *,
  .value-item:hover * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  /* Hide all potential effect layers */
  #services .service-card:hover::before,
  #services .service-card:hover::after,
  #services .service-card .service-icon-wrapper::before,
  #services .service-card .service-icon-wrapper::after,
  #services .service-card .value-icon-bg,
  #services .service-card:hover .value-icon-bg,
  .service-card:hover::before,
  .value-item:hover .value-hover-effect,
  .value-item:hover .value-icon-bg,
  .service-card:hover .value-icon-bg {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
    background: none !important;
  }
}


.contact-favicon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: var(--color-text);
  -webkit-mask-image: url('assets/Pre Des log SVG.png');
  mask-image: url('assets/Pre Des log SVG.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
}

/* --- GALLERY ANIMATIONS --- */

/* MOBILE: Scroll-triggered Reveal */
@media (max-width: 768px) {
  .gallery-reveal-anim {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
    will-change: opacity, transform;
  }

  .gallery-reveal-anim.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* DESKTOP: Entrance Fade + Slide on Container (Avoids Slide Transform Conflict) */
@media (min-width: 769px) {
  .gallery-modal.active .gallery-slides {
    animation: desktopGalleryEntry 0.6s ease-out forwards;
  }

  @keyframes desktopGalleryEntry {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.96);
    }

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

/* Fix for font causing commas to look like dots - keep size subtle and consistent */
.fix-comma {
  font-family: 'Times New Roman', serif !important;
  font-size: 0.9em;
  font-weight: normal;
  line-height: 1;
  vertical-align: -0.15em;
  display: inline-block;
  margin-right: 2px;
}

/* =========================================
   LIGHT THEME - CENTRALIZED OVERRIDES
   ========================================= */

body.light-theme {
  /* Re-map Variables for Light Theme using User Palette */
  /* Palette: Burnt Umber #6E260E, Camel #C19A6B, Chestnut #954535, Chocolate #7B3F00 */

  --color-text: #6E260E;
  /* Burnt Umber (Body Text - Rich Dark) */
  --color-primary: #7B3F00;
  /* Chocolate (Headings - Rich Golden Brown) */
  --color-secondary: #C19A6B;
  /* Camel (Highlights/Accents) */
  --color-accent: #954535;
  /* Chestnut (Deep Reddish Brown for variety) */

  --color-text-light: #6E260E;
  /* Match body text */
  --color-white: #6E260E;
  /* Invert white to Burnt Umber */

  /* Backgrounds */
  --color-bg-brown: #f9f5f0;
  /* Cream Background */
  --color-bg-brown-dark: #f9f5f0;
  --color-bg-cream: #ffffff;

  /* Applying Backgrounds */
  background: var(--color-bg-brown) !important;
  color: var(--color-text) !important;
}

/* Ensure Sections & Containers are Transparent to show Body BG */
.light-theme .section,
.light-theme .hero,
.light-theme .cinematic-panel,
.light-theme .contact-section,
.light-theme .contact-overlay,
.light-theme .section-shell,
.light-theme .main-container,
.light-theme .split-bottom,
.light-theme .split-top {
  background: transparent !important;
  box-shadow: none !important;
}

/* --- TYPOGRAPHY COLOR ENFORCEMENT --- */

/* --- TYPOGRAPHY GRADIENTS & COLORS --- */

/* Define the Rich Brown Gradient (Burnt Umber & Camel) */
.light-theme {
  --gradient-rich-brown: linear-gradient(135deg, #6E260E 0%, #C19A6B 50%, #6E260E 100%);
  /* Burnt Umber -> Camel -> Burnt Umber */
}

/* Main Headings with Gradient Effect (Specific Classes Only) */
.light-theme .section-title,
.light-theme .split-title,
.light-theme .hero h1 {
  background: var(--gradient-rich-brown) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* Sub-headings (Solid Chocolate) */
.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme h5,
.light-theme h6,
.light-theme .gate-title,
.light-theme .value-title-reveal {
  color: #7B3F00 !important;
  /* Chocolate */
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

/* Service/Value Icons (Camel) */
.light-theme .value-icon,
.light-theme .service-icon {
  color: #C19A6B !important;
  /* Camel */
}

/* Service/Value Lines (Solid Chocolate) */
.light-theme .value-line {
  background-color: #7B3F00 !important;
  /* Chocolate */
}


/* Logo with Gradient Effect */
.light-theme .hero-logo {
  background: var(--gradient-rich-brown) !important;
}

/* Navbar Logo (Solid Chocolate) */
.light-theme .site-logo {
  background: #7B3F00 !important;
  /* Chocolate */
}

/* Body Text */
.light-theme p,
.light-theme li,
.light-theme span,
.light-theme div,
.light-theme label,
.light-theme input,
.light-theme .split-desc,
.light-theme .hero-subtitle {
  color: var(--color-text) !important;
}

/* Links */
.light-theme a,
.light-theme .nav-links a {
  color: var(--color-primary) !important;
}

.light-theme a:hover,
.light-theme .nav-links a:hover {
  color: var(--color-secondary) !important;
}

/* --- COMPONENT SPECIFIC FIXES --- */

/* Index Title Cards (Inherit Gradient) */
.light-theme .split-title {
  /* Gradient handled by global heading rule above */
  opacity: 1 !important;
  filter: none !important;
}

/* Index Title Card Button */
.light-theme .split-link {
  color: #5d4037 !important;
  /* Match gradient dark tone */
  border-color: rgba(93, 64, 55, 0.4) !important;
}

.light-theme .split-link:hover {
  background: rgba(93, 64, 55, 0.05) !important;
  color: #5d4037 !important;
  border-color: #5d4037 !important;
}

/* Navbar */
.light-theme .nav {
  background: rgba(249, 245, 240, 0.95);
  border-bottom: 1px solid rgba(61, 52, 38, 0.1);
}

/* Icons */
.light-theme svg,
.light-theme svg * {
  fill: var(--color-primary) !important;
  stroke: var(--color-primary) !important;
}

/* Footer */
.light-theme .footer {
  padding: 4rem 1.5rem !important;
  margin-top: 4rem !important;
  background: var(--color-secondary) !important;
  /* Gold/Brown Match */
}

.light-theme .footer p {
  color: #f5e6d3 !important;
  /* Light text on dark footer */
  margin-bottom: 0 !important;
}

/* Close & Nav Buttons */
.light-theme .contact-close,
.light-theme .gallery-close,
.light-theme .gallery-nav {
  color: var(--color-primary) !important;
  background: rgba(61, 52, 38, 0.1) !important;
}

/* --- FORCE SERVICES PAGE STYLING (High Specificity) --- */
body.light-theme #services .value-icon,
body.light-theme #services .service-icon {
  color: #C19A6B !important;
  /* Camel */
  -webkit-text-fill-color: #C19A6B !important;
  background: none !important;
}

body.light-theme #services .value-line {
  background-color: #7B3F00 !important;
  /* Chocolate */
}

body.light-theme #services .value-title-reveal,
body.light-theme #services .service-title {
  color: #7B3F00 !important;
  /* Chocolate */
  -webkit-text-fill-color: #7B3F00 !important;
  background: none !important;
  text-shadow: none !important;
}

/* Hover Effect: Darken Icon on Hover */
body.light-theme #services .service-card:hover .value-icon,
body.light-theme #services .service-card:hover .service-icon {
  color: #7B3F00 !important;
  /* Camel -> Chocolate */
  -webkit-text-fill-color: #7B3F00 !important;
  transition: color 0.3s ease;
}

/* Contact Trigger Button (Coffee) */
.light-theme .contact-trigger {
  background-color: #6F4E37 !important;
  /* Coffee */
  box-shadow: 0 4px 12px rgba(111, 78, 55, 0.3) !important;
}

.light-theme .contact-trigger .contact-trigger-icon {
  color: #ffffff !important;
  /* White Icon */
}

/* Footer Background to Match Contact Icon (Coffee) */
.light-theme .footer {
  background-color: #6F4E37 !important;
  /* Coffee */
  color: #f5e6d3 !important;
  /* Light text for contrast */
  border-top: none !important;
}

/* Hero Title White in Light Theme */
.light-theme .hero h1 {
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Contact Drawer Opaque in Light Theme (Off-White) */
.light-theme #contact,
.light-theme .contact-panel {
  background-color: #f9f5f0 !important;
  /* Off-White */
  color: #6E260E !important;
  /* Burnt Umber text */
  backdrop-filter: none !important;
  opacity: 1 !important;
}

.light-theme #contact h1,
.light-theme #contact h2,
.light-theme #contact h3,
.light-theme #contact p,
.light-theme #contact a {
  color: #6E260E !important;
  /* Burnt Umber text */
}

/* Fix for Instagram Icon Gradient in Light Theme */
.light-theme .instagram svg rect,
.light-theme .instagram svg circle {
  fill: none !important;
  stroke: url(#instaGrad) !important;
}

.light-theme .instagram svg circle:last-child {
  fill: url(#instaGrad) !important;
  stroke: none !important;
}

/* Mobile Project Viewer Title Size Adjustment */
@media screen and (max-width: 768px) {
  #galleryTitle {
    font-size: 1.65rem !important;
    /* Adjusted size (1.65rem) */
    line-height: 1.2;
  }
}

/* Portfolio Hover Text White in Light Theme */
.light-theme .portfolio-title,
.light-theme .portfolio-category {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  /* Ensure readability */
}

/* Project Viewer Arrows White in Light Theme */
.light-theme .gallery-nav,
.light-theme .gallery-prev,
.light-theme .gallery-next {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.light-theme .gallery-nav:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}