/* Saaj Creations — shared visual refinement layer */
:root {
  --charcoal: #26332e;
  --charcoal-2: #19241f;
  --white: #fffefa;
  --light: #f7f5ef;
  --gold: #b78a4a;
  --gold-light: #f5e7cd;
  --emerald: #195b4b;
  --teal: #3d8874;
  --text: #33423c;
  --muted: #69766f;
  --border: rgba(32, 70, 57, .13);
  --shadow: 0 18px 50px rgba(26, 61, 49, .10);
  --shadow-dark: 0 20px 55px rgba(12, 34, 27, .25);
  --radius: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

body {
  background: var(--white);
  color: var(--text);
  letter-spacing: .002em;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 90% 0%, rgba(234, 212, 176, .20), transparent 26%), radial-gradient(circle at 0% 30%, rgba(186, 217, 203, .13), transparent 23%);
}

.site-header {
  background: rgba(255, 254, 250, .88) !important;
  border-bottom-color: rgba(25, 91, 75, .09) !important;
  box-shadow: 0 6px 25px rgba(22, 51, 41, .035);
}
.site-header.scrolled { box-shadow: 0 10px 30px rgba(22, 51, 41, .09); }
.nav-links a { color: #43534c !important; }
.nav-links a:not(.nav-cta):after { background: var(--gold) !important; }
.nav-cta, .btn-dark { background: #b78a4a !important; color: #fff !important; border-radius: 7px; box-shadow: 0 8px 18px rgba(25, 91, 75, .15); }
.nav-cta:hover, .btn-dark:hover { background: #0f4739 !important; transform: translateY(-2px); color: #fff !important ; }

.section { padding-block: clamp(74px, 9vw, 120px); }
.section-title, h1, h2, h3 { text-wrap: balance; }
.section-title { color: var(--charcoal); }
.section-intro { color: var(--muted); max-width: 65ch; }
.eyebrow { color: var(--gold); }

.hero, .about-hero, .services-hero, .contact-hero, .service-hero, .gallery-hero {
  min-height: clamp(410px, 62vh, 650px) !important;
  background-color: #dfe9e2 !important;
}
.hero::after, .about-hero:after {
  background: linear-gradient(90deg, rgb(15 48 39 / 0%), rgba(18, 68, 55, .28) 58%, rgba(255, 248, 232, .06)) !important;
}
.services-hero-overlay, .contact-hero-overlay, .service-hero-overlay, .gallery-hero-overlay {
  background: linear-gradient(90deg, rgba(15, 48, 39, .70), rgba(20, 82, 65, .28) 60%, rgba(255, 248, 232, .04)) !important;
}
.hero::before, .about-hero:before, .services-hero-bg, .contact-hero-bg, .service-hero-bg, .gallery-hero-bg {
  filter: saturate(1.08) brightness(1.10);
}
.hero h1, .about-hero h1, .services-hero-content h1, .contact-hero-content h1, .service-hero-content h1, .gallery-hero-content h1 {
  text-shadow: 0 4px 24px rgba(10, 38, 29, .16);
}
.hero h1 span, .about-hero h1 span, .services-hero-content h1 em, .contact-hero-content h1 em, .service-hero-content h1 em, .gallery-hero-content h1 em { color: #f7e7ca !important; }
.hero-sub, .hero-sub p, .services-hero-content p, .contact-hero-content p, .service-hero-content p, .gallery-hero-content p { max-width: 43ch; line-height: 1.6 !important; }
.experience-badge { background: rgba(255, 254, 250, .90) !important; color: var(--emerald) !important; box-shadow: 0 15px 38px rgba(9, 36, 27, .20); }

/* A calm sense of movement makes the photography feel less static. */
.hero-inner, .services-hero-content, .contact-hero-content, .service-hero-content, .gallery-hero-content {
  animation: heroContentIn .9s .12s both var(--ease);
}
.hero-kicker, .hero-inner > .hero-kicker, .services-hero-content > span, .contact-hero-content > span, .service-hero-content .breadcrumb, .gallery-hero-content > span {
  animation: labelIn .75s .28s both var(--ease);
}
.services-hero-bg, .contact-hero-bg, .service-hero-bg, .gallery-hero-bg {
  animation: ambientZoom 14s both var(--ease);
}
.experience-badge { animation: badgeDrift 5s ease-in-out infinite; }
.hero-scroll span { animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes heroContentIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes labelIn { from { opacity: 0; letter-spacing: .05em; } to { opacity: 1; } }
@keyframes ambientZoom { from { transform: scale(1.02); } to { transform: scale(1.09); } }
@keyframes badgeDrift { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes scrollDot { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(7px); opacity: 1; } }

.btn, button[type="submit"] {
  border-radius: 7px !important;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease) !important;
}
.btn:hover, button[type="submit"]:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(25, 91, 75, .18); }
.btn-gold { background: var(--gold) !important; }
.btn-gold:hover { background: #966a32 !important; }
.btn-outline { border-color: rgba(255,255,255,.72) !important; }
.btn-gold, .nav-cta { position: relative; overflow: hidden; }
.btn-gold:before, .nav-cta:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -120%;
  width: 65%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
}
.btn-gold:hover:before, .nav-cta:hover:before { left: 150%; }

.service-card, .process-card, .value-card, .contact-card, .philosophy-card, .faq-item, .founder-note, .gallery-signature-box {
  border-radius: var(--radius);
  border-color: var(--border) !important;
}
.service-card, .process-card, .value-card, .contact-card, .faq-item { box-shadow: 0 5px 18px rgba(25, 91, 75, .035); }
.service-card, .process-card, .value-card, .contact-card { position: relative; overflow: hidden; }
.process-card:before, .value-card:before, .contact-card:before {
  content: "";
  position: absolute;
  width: 110px;
  height: 3px;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, var(--gold), #e8c889);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.service-card:hover, .process-card:hover, .value-card:hover, .contact-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 20px 42px rgba(25, 91, 75, .13) !important;
  border-color: rgba(183, 138, 74, .48) !important;
}
.process-card:hover:before, .value-card:hover:before, .contact-card:hover:before { transform: scaleX(1); }
.service-image, .portfolio-image, .gallery-item, .story-image { border-radius: var(--radius); overflow: hidden; }
.service-image img, .portfolio-image img, .story-image img { transition: transform .7s var(--ease), filter .5s var(--ease); }
.service-card:hover .service-image img, .portfolio-card:hover .portfolio-image img, .story-image:hover img { transform: scale(1.045); filter: saturate(1.07); }

.philosophy, .cta, .services-cta, .contact-cta { background-color: var(--emerald) !important; }
.philosophy { background-image: radial-gradient(circle at 12% 20%, rgba(245, 231, 205, .23), transparent 28%), radial-gradient(circle at 90% 80%, rgba(120, 194, 164, .27), transparent 34%) !important; }
.cta, .services-cta, .contact-cta { background-image: radial-gradient(circle at 80% 15%, rgba(245, 231, 205, .14), transparent 26%) !important; }
.footer { background: #193b31 !important; }

.gallery-section, .founder, .process, .contact-form-wrap { background: #f8f6f0 !important; }
.gallery-filter { border-radius: 999px; }
.gallery-filter:hover, .gallery-filter.active { background: var(--emerald) !important; border-color: var(--emerald) !important; }
.gallery-item { box-shadow: 0 8px 25px rgba(25, 91, 75, .09); }
.gallery-overlay { background: linear-gradient(180deg, transparent 35%, rgba(9, 43, 33, .76)) !important; }

/* Homepage project collection — an editorial, image-first showcase. */
#projects {
  overflow: hidden;
  background: linear-gradient(135deg, #fcfbf7 0%, #f3f6f1 58%, #f9f3e8 100%);
}
#projects:before {
  content: "SELECTED";
  position: absolute;
  right: -1.2rem;
  top: 3rem;
  color: rgba(25, 91, 75, .035);
  font: 800 clamp(5rem, 15vw, 14rem)/.8 "League Spartan", sans-serif;
  letter-spacing: -.08em;
  pointer-events: none;
}
#projects .container { position: relative; z-index: 1; }
#projects .section-head { margin-bottom: 34px; }
#projects .portfolio-filters {
  gap: 8px;
  padding: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 28px;
  border: 1px solid rgba(25, 91, 75, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 10px 30px rgba(25, 91, 75, .06);
}
#projects .filter-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 11px 17px;
}
#projects .filter-btn.active, #projects .filter-btn:hover {
  background: var(--emerald);
  box-shadow: 0 7px 15px rgba(25, 91, 75, .20);
}
#projects .portfolio-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 145px;
  gap: 16px;
}
#projects .portfolio-item {
  min-height: 0;
  grid-column: span 3;
  grid-row: span 2;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 14px 30px rgba(20, 63, 49, .12);
  isolation: isolate;
  background-size: 100% auto;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-size .7s var(--ease);
}
#projects .portfolio-item:first-child { grid-column: span 6; grid-row: span 4; }
#projects .portfolio-item:nth-child(2) { grid-column: span 6; grid-row: span 2; }
#projects .portfolio-item:first-child { background-image: url("images/service-interior-design.png") !important; background-position: center; }
#projects .portfolio-item:nth-child(2) { background-image: url("images/service-consultancy.png") !important; background-position: center; }
#projects .portfolio-item:nth-child(3) { background-image: url("images/flex-interior.png") !important; background-position: center; }
#projects .portfolio-item:nth-child(4) { background-image: url("images/gallery.png") !important; background-position: center; }
#projects .portfolio-item:before {
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 46, 35, .02) 15%, rgba(8, 46, 35, .84) 100%);
}
#projects .portfolio-item:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 249, 234, .24) 50%, transparent 70%);
  transform: translateX(-115%);
  transition: transform .75s var(--ease), opacity .35s;
}
#projects .portfolio-item:hover, #projects .portfolio-item:focus-visible {
  transform: translateY(-6px);
  background-size: 108% auto;
  box-shadow: 0 24px 45px rgba(20, 63, 49, .22);
  outline: none;
}
#projects .portfolio-item:hover:after, #projects .portfolio-item:focus-visible:after { opacity: 1; transform: translateX(115%); }
#projects .portfolio-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 8px 18px rgba(5, 35, 26, .14);
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
#projects .portfolio-item:hover .portfolio-icon { transform: rotate(-10deg) scale(1.08); background: #f7e7ca; color: var(--emerald); }
#projects .portfolio-content {
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 15px 16px 14px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 10px;
  background: rgba(10, 48, 37, .25);
  backdrop-filter: blur(8px);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
#projects .portfolio-item:hover .portfolio-content { transform: translateY(-4px); background: rgba(10, 48, 37, .45); }
#projects .portfolio-content h3 { font-size: clamp(1.15rem, 2vw, 1.6rem); }
#projects .portfolio-item:first-child .portfolio-content h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
#projects .project-tags { margin-top: 22px; gap: 8px; }
#projects .project-tag { border-radius: 999px; background: rgba(255, 255, 255, .68); transition: transform .25s var(--ease), color .25s, border-color .25s; }
#projects .project-tag:hover { color: var(--emerald); border-color: var(--gold); transform: translateY(-2px); }

/* Service-card image hover: preserve the image while prioritising copy contrast. */
#services .service-card:hover::before {
  opacity: 1 !important;
  background: linear-gradient(145deg, rgba(8, 38, 30, .96), rgba(12, 73, 57, .90)) !important;
}
#services .service-card:hover::after { opacity: .32 !important; }
#services .service-card:hover h3 { color: #fff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
#services .service-card:hover li { color: rgba(255, 255, 255, .94) !important; }

.whatsapp { box-shadow: 0 12px 26px rgba(20, 130, 78, .30); }
.whatsapp:hover { transform: translateY(-4px) scale(1.03); }

body.motion-ready .ui-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
body.motion-ready .ui-reveal.ui-visible { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .section { padding-block: 68px; }
  .hero, .about-hero, .services-hero, .contact-hero, .service-hero, .gallery-hero { min-height: 420px !important; }
  .hero::after, .about-hero:after, .services-hero-overlay, .contact-hero-overlay, .service-hero-overlay, .gallery-hero-overlay { background: linear-gradient(90deg, rgba(15, 48, 39, .74), rgba(20, 82, 65, .32)) !important; }
  .nav-cta { box-shadow: none; }
  .experience-badge { animation: none; }
  #projects .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  #projects .portfolio-item, #projects .portfolio-item:first-child, #projects .portfolio-item:nth-child(2) { grid-column: span 1; grid-row: span 1; }
  #projects .portfolio-filters { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}