/* ============================================================
   SENTUH STUDIO — Premium Website
   style.css — Interactive, animated, editorial
   ============================================================ */

/* === VARIABLES === */
:root {
  --black:     #000000;
  --surface:   #0a0a0a;
  --surface-2: #111111;
  --bronze:    #806959;
  --cream:     #E3DAC9;
  --cream-80:  rgba(227,218,201,.80);
  --cream-60:  rgba(227,218,201,.60);
  --cream-30:  rgba(227,218,201,.30);
  --cream-10:  rgba(227,218,201,.10);
  --cream-06:  rgba(227,218,201,.06);
  --cream-04:  rgba(227,218,201,.04);
  --bronze-40: rgba(128,105,89,.40);
  --bronze-20: rgba(128,105,89,.20);
  --bronze-10: rgba(128,105,89,.10);
  --font:      "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  --nav-h:     72px;
  --max-w:     100%;
  --px:        clamp(1.5rem,3vw,3rem);
  --py:        clamp(6rem,12vw,10rem);
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* === RESET === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body  { font-family:var(--font); background:var(--black); color:var(--cream); font-size:16px; line-height:1.7; overflow-x:hidden; cursor:auto; }
img,canvas { display:block; max-width:100%; }
a     { color:inherit; text-decoration:none; cursor:auto; }
ul    { list-style:none; }
button { border:none; background:none; cursor:auto; font:inherit; }
input,select,textarea { font:inherit; cursor:auto; }

/* === GRAIN OVERLAY === */
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10000;
  opacity:.035;
  mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* === CUSTOM CURSOR — small dot === */
.cursor {
  display: none !important;
}
@media (hover:none),(pointer:coarse) {
  body { cursor:auto; }
  a,button { cursor:auto; }
  .cursor { display:none !important; }
}

/* === SCROLL PROGRESS === */
.scroll-progress {
  position:fixed;
  top:0; left:0; right:0;
  height:2px;
  background:var(--bronze);
  transform-origin:left;
  transform:scaleX(0);
  z-index:10003;
  will-change:transform;
}

/* === PRELOADER — stays until scroll === */
.preloader {
  position:fixed;
  inset:0;
  z-index:99999;
  background:var(--black);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  transition:opacity .7s var(--ease-out), visibility .7s;
}
.preloader.done {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.preloader__sphere-wrap {
  position:relative;
  opacity:0;
  animation:sphereAppear 1s var(--ease-out) .15s both;
}
.preloader__brand {
  height:3rem;
  width:auto;
  opacity:0;
  animation:preloaderTextIn .7s var(--ease) .7s both;
}
.preloader__hint {
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--cream-30);
  opacity:0;
  animation:preloaderTextIn .5s var(--ease) 1.6s both, scrollHintPulse 2.5s ease-in-out 2.5s infinite;
  margin-top:-.5rem;
}
@keyframes sphereAppear {
  from { opacity:0; transform:scale(.5); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes preloaderTextIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
@keyframes scrollHintPulse {
  0%,100% { opacity:.35; }
  50%     { opacity:.7; }
}

/* === LAYOUT === */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--px); }
.section   { padding:var(--py) 0; }

/* === TYPOGRAPHY UTILITIES === */
.eyebrow {
  display:block;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--bronze);
}

/* === BUTTONS === */
.btn {
  display:inline-flex;
  align-items:center;
  gap:.625rem;
  padding:.95rem 2.25rem;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  transition:color .3s var(--ease), border-color .3s;
}
.btn--primary {
  background:var(--cream);
  color:var(--black);
  position:relative;
  overflow:hidden;
}
.btn--primary::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--bronze);
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
}
.btn--primary:hover { color:var(--cream); }
.btn--primary:hover::before { transform:scaleX(1); }
.btn--primary:active { transform:scale(.97); }
.btn:focus-visible { outline:2px solid var(--bronze); outline-offset:3px; }

.btn--outline {
  border:1px solid var(--cream-30);
  color:var(--cream);
  transition:background .3s, border-color .3s, color .3s;
}
.btn--outline:hover { border-color:var(--cream); background:var(--cream-06); }

.link-arrow {
  display:inline-flex;
  align-items:center;
  gap:.625rem;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream-60);
  transition:color .25s, gap .35s var(--ease);
}
.link-arrow::after { content:'→'; transition:transform .35s var(--ease); }
.link-arrow:hover { color:var(--cream); }
.link-arrow:hover::after { transform:translateX(4px); }

/* === NAVIGATION === */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--nav-h);
  transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-color:var(--cream-10);
}
.nav__container {
  height:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.nav__brand {
  display:flex;
  align-items:center;
  gap:.875rem;
  flex-shrink:0;
}
.nav__brand-wrap {
  position:relative;
  height:8rem;
  display:flex;
  align-items:center;
}
.nav__brand-img {
  height:8rem;
  width:auto;
  object-fit:contain;
  object-position:left center;
  transition:opacity .4s;
}
.nav__brand-img--black {
  position:absolute;
  top:0; left:0;
  opacity:1;
}
.nav__brand-img--white {
  opacity:0;
  visibility:hidden;
}
/* Scrolled: black bar showing — swap to white wordmark */
.nav.scrolled .nav__brand-img--white { opacity:1; visibility:visible; }
.nav.scrolled .nav__brand-img--black { opacity:0; }
.nav__brand-text {
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream);
  line-height:1;
}
.nav__links {
  display:flex;
  align-items:center;
  gap:2.5rem;
}
.nav__links a {
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream-60);
  transition:color .25s;
  position:relative;
}
.nav__links a::after {
  content:'';
  position:absolute;
  bottom:-4px; left:0;
  width:100%; height:1px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover,
.nav__links a.active { color:var(--cream); }
.nav__links a:hover::after,
.nav__links a.active::after { transform:scaleX(1); transform-origin:left; }

.nav__cta {
  display:inline-flex;
  align-items:center;
  padding:.5rem 1.25rem;
  border:1px solid var(--cream-30);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream);
  transition:background .25s, border-color .25s;
}
.nav__cta:hover { background:var(--cream-10); border-color:var(--cream-60); }

.nav__toggle {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:32px; height:32px;
}
.nav__toggle span {
  display:block;
  width:22px; height:1px;
  background:var(--cream);
  transition:transform .35s var(--ease), opacity .2s;
}
.nav__toggle.open span:first-child { transform:translateY(7px) rotate(45deg); }
.nav__toggle.open span:last-child  { transform:translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display:none;
  position:fixed;
  top:var(--nav-h); left:0; right:0; bottom:0;
  background:rgba(0,0,0,.97);
  backdrop-filter:blur(24px);
  padding:3rem var(--px);
  z-index:99;
  flex-direction:column;
  gap:2rem;
  opacity:0;
  transition:opacity .35s var(--ease);
}
.nav__mobile.open { display:flex; opacity:1; }
.nav__mobile a {
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--cream-60);
  transition:color .2s, transform .3s var(--ease);
}
.nav__mobile a:hover { color:var(--cream); transform:translateX(8px); }
.nav__mobile a.active { color:var(--cream); }

/* === HERO IMAGE — Full-screen with text overlay === */
.hero-image {
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:var(--black);
}
.hero-image__img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.hero-image__overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:30vh;
  background:rgba(0,0,0,.18);
}
.hero-image .hero__content {
  text-align:center;
  padding-top:0;
}
.hero-image .hero__eyebrow {
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream-60);
  margin-bottom:1.5rem;
}
.hero-image .hero__title {
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.6;
  color:var(--cream);
  margin-bottom:1.5rem;
  max-width:none;
  text-align:center;
}
.hero-image .hero__sub {
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream-60);
  max-width:none;
  line-height:1.6;
  margin-bottom:2.5rem;
}
.hero-image .hero__actions {
  justify-content:center;
}

/* === HERO === */
.hero {
  position:relative;
  width:100%;
  height:100dvh;
  min-height:640px;
  background:var(--black);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero__canvas {
  position:absolute;
  top:50%; right:-5%;
  transform:translateY(-50%);
  opacity:.5;
  pointer-events:none;
  will-change:translate;
  transition:opacity .3s;
}
.hero__content {
  position:relative;
  position:relative;
  z-index:2;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--px);
  width:100%;
  will-change:transform,opacity;
}
.hero__eyebrow {
  margin-bottom:2.75rem;
  opacity:0;
  transform:translateY(16px);
}
.hero__eyebrow.anim { animation:heroFadeUp .8s var(--ease-out) both; }

.hero__title {
  font-size:clamp(3rem,7.5vw,6.25rem);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.03em;
  max-width:780px;
  margin-bottom:2.25rem;
}
.hero__title .word {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.08em;
}
.hero__title .word-inner {
  display:inline-block;
  transform:translateY(110%);
  transition:transform .9s var(--ease-out);
}
.hero__title.animated .word-inner { transform:translateY(0); }

.hero__sub {
  font-size:clamp(1rem,1.4vw,1.125rem);
  color:var(--cream-60);
  max-width:440px;
  line-height:1.8;
  margin-bottom:3.5rem;
  opacity:0; transform:translateY(16px);
}
.hero__sub.anim { animation:heroFadeUp .8s var(--ease-out) .6s both; }

.hero__actions {
  display:flex;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
  opacity:0; transform:translateY(16px);
}
.hero__actions.anim { animation:heroFadeUp .8s var(--ease-out) .75s both; }

.hero__scroll {
  position:absolute;
  bottom:3rem; left:var(--px);
  font-size:.5625rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-30);
  writing-mode:vertical-rl;
  opacity:0;
  z-index:3;
}
.hero__scroll.anim { animation:heroFadeUp .6s var(--ease-out) 1s both, scrollFloat 3s ease-in-out 2s infinite; }
.hero__scroll::after {
  content:'';
  display:block;
  width:1px; height:32px;
  background:var(--cream-10);
  margin-top:.75rem;
  margin-left:auto; margin-right:auto;
}

@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}
@keyframes scrollFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(8px); }
}

/* Inner hero for sub-pages */
.hero--inner { height:52dvh; min-height:380px; }
.hero--inner .hero__canvas { opacity:.22; }
.hero--inner .hero__title {
  font-size:clamp(2.5rem,5.5vw,4.5rem);
  letter-spacing:-.025em;
}

/* === MATERIAL STRIP === */
.material-strip {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.75rem 0;
  border-top:1px solid var(--cream-10);
  border-bottom:1px solid var(--cream-10);
  padding:1.1rem var(--px);
  background:var(--black);
}
.material-strip__item {
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--cream-30);
  padding:0 1.5rem;
}
.material-strip__sep {
  color:var(--bronze-40);
  font-size:.5rem;
}

/* === SECTION HEADER === */
.section-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:4.5rem;
}
.section-header h2 {
  font-size:clamp(2rem,4vw,2.75rem);
  font-weight:700;
  margin-top:1rem;
  line-height:1.08;
  letter-spacing:-.02em;
}

/* === HOME: INTRO === */
.intro__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7rem;
  align-items:start;
}
.intro__heading {
  font-size:clamp(2rem,3.5vw,2.75rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:1.75rem;
}
.intro__body {
  font-size:1.0625rem;
  color:var(--cream-60);
  line-height:1.85;
  margin-bottom:2.75rem;
}
.intro__stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.75rem;
  padding-top:3.5rem;
  border-top:1px solid var(--cream-10);
}
.stat__num {
  display:block;
  font-size:2.75rem;
  font-weight:700;
  color:var(--bronze);
  letter-spacing:-.02em;
  line-height:1;
}
.stat__label {
  display:block;
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream-30);
  margin-top:.625rem;
}
.intro__visual {
  position:relative;
  aspect-ratio:4/5;
  background:linear-gradient(160deg, var(--cream-04) 0%, var(--surface) 50%, var(--cream-04) 100%);
  border:1px solid var(--cream-10);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Material swatch panel — replaces sphere in intro + about */
.intro__swatches {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  width:100%; height:100%;
  transition:transform .6s var(--ease);
}
.intro__visual:hover .intro__swatches,
.about__visual:hover .intro__swatches { transform:scale(1.02); }
.intro__swatch {
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:.875rem 1rem;
}
.intro__swatch span {
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.5;
  position:relative;
  z-index:1;
}
.intro__swatch--walnut    { background:linear-gradient(145deg,#2e1f14,#4a2e1e); color:var(--cream); }
.intro__swatch--travertine{ background:linear-gradient(145deg,#c4ae8f,#d9c9af); color:#3a2a1a; }
.intro__swatch--brass     { background:linear-gradient(145deg,#5a3f30,#806959); color:var(--cream); }
.intro__swatch--cement    { background:linear-gradient(145deg,#1e1c1a,#2e2a26); color:var(--cream); }
.intro__tag {
  position:absolute;
  bottom:1.5rem; left:1.5rem;
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream-30);
}

/* === HOME: SERVICES LIST === */
.services-overview { border-top:1px solid var(--cream-10); }
.service-row {
  display:grid;
  grid-template-columns:3.5rem 1fr 1.2fr auto;
  gap:2.5rem;
  align-items:center;
  padding:2.5rem 0;
  border-bottom:1px solid var(--cream-10);
  position:relative;
  text-decoration:none;
}
.service-row::before {
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:0; height:1px;
  background:var(--bronze);
  transition:width .6s var(--ease);
}
.service-row:hover::before { width:100%; }
.service-row:hover { background:var(--cream-04); margin:0 calc(-1 * var(--px)); padding-left:var(--px); padding-right:var(--px); }
.service-row__num   { font-size:.625rem; font-weight:700; letter-spacing:.15em; color:var(--bronze); transition:transform .4s var(--ease); }
.service-row:hover .service-row__num { transform:scale(1.15); }
.service-row__title { font-size:1.125rem; font-weight:700; transition:color .25s; }
.service-row:hover .service-row__title { color:var(--cream); }
.service-row__desc  { font-size:.9375rem; color:var(--cream-60); line-height:1.65; }
.service-row__arrow { font-size:1rem; color:var(--cream-30); transition:color .25s, transform .4s var(--ease); }
.service-row:hover .service-row__arrow { color:var(--bronze); transform:translateX(10px); }

/* === HOME: FEATURED WORKS — Horizontal Carousel === */
.works__controls {
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.works__arrows {
  display:flex;
  align-items:center;
  gap:.75rem;
}
.works__arrow {
  width:44px;
  height:44px;
  border:1px solid var(--cream-30);
  background:transparent;
  color:var(--cream);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:border-color .25s, background .25s, opacity .25s;
}
.works__arrow:hover { border-color:var(--cream-60); background:var(--cream-06); }
.works__arrow:disabled { opacity:.25; cursor:default; pointer-events:none; }
.works__counter {
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream-60);
  min-width:5rem;
  text-align:center;
}
.works__carousel {
  overflow:hidden;
  padding:0 var(--px);
  margin-top:3.5rem;
}
.works__track {
  display:flex;
  gap:2rem;
  transition:transform .75s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
/* 3 cards visible on desktop */
.work-item {
  flex:0 0 calc((100vw - 2 * var(--px) - 5rem) / 3);
  min-width:0;
  display:block;
  text-decoration:none;
}
.work-item__img {
  width:100%;
  aspect-ratio:5/4;
  overflow:hidden;
  background:var(--surface-2);
  position:relative;
}
.work-item__img img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform 1s ease;
}
.work-item:hover .work-item__img img { transform:scale(1.03); }
.work-item__info { padding:1.5rem 0 0; }
.work-item__title {
  font-size:clamp(1.25rem,2vw,1.5rem);
  font-weight:200;
  color:var(--cream);
  margin-bottom:.5rem;
  letter-spacing:0;
  line-height:1.3;
  transition:color .25s;
}
.work-item:hover .work-item__title { color:var(--bronze); }
.work-item__meta {
  font-size:.875rem;
  font-weight:300;
  letter-spacing:0;
  color:var(--cream-60);
}

/* === HOME: WHY === */
.why__header { max-width:580px; margin-bottom:4.5rem; }
.why__header h2 { font-size:clamp(2rem,4vw,2.75rem); font-weight:700; margin-top:1rem; letter-spacing:-.02em; line-height:1.08; }
.why__grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--cream-10);
}
.why-item {
  padding:4rem 3.5rem 4rem 1.5rem;
  border-right:1px solid var(--cream-10);
  transition:background .35s;
}
.why-item:last-child  { border-right:none; padding-right:0; }
.why-item:first-child { padding-left:1.5rem; }
.why-item:hover { background:var(--cream-04); }
.why-item__num   { font-size:.625rem; font-weight:700; letter-spacing:.22em; color:var(--bronze); margin-bottom:2rem; }
.why-item__title { font-size:1.0625rem; font-weight:700; margin-bottom:1rem; }
.why-item__desc  { font-size:.9375rem; color:var(--cream-60); line-height:1.75; }

/* === HOME: PROCESS === */
.process__steps {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid var(--cream-10);
  margin-top:4rem;
  counter-reset:process;
}
.process-step {
  padding:4rem 3.5rem 4rem 1.5rem;
  border-right:1px solid var(--cream-10);
  position:relative;
}
.process-step:last-child  { border-right:none; padding-right:0; }
.process-step:first-child { padding-left:1.5rem; }
.process-step__num {
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:2rem;
}
.process-step__title {
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:1rem;
}
.process-step__desc {
  font-size:.9375rem;
  color:var(--cream-60);
  line-height:1.75;
}
/* Connecting line on hover */
.process-step::after {
  content:'';
  position:absolute;
  top:3rem; right:-1px;
  width:1px; height:0;
  background:var(--bronze);
  transition:height .5s var(--ease);
}
.process-step:hover::after { height:24px; }

/* === HOME: TESTIMONIALS === */
.testimonials__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.testimonial-card {
  padding:3rem;
  background:var(--cream-04);
  border:1px solid var(--cream-10);
  position:relative;
  transition:background .35s, border-color .35s;
}
.testimonial-card:hover { background:var(--cream-06); border-color:var(--cream-30); }
.testimonial-card::before {
  content:'\201C';
  position:absolute;
  top:1.5rem; left:2rem;
  font-size:4rem;
  line-height:1;
  color:var(--bronze-20);
  font-family:Georgia,serif;
}
.testimonial-card__quote {
  font-size:1rem;
  line-height:1.8;
  color:var(--cream-80);
  margin-bottom:2.25rem;
  font-style:italic;
  padding-top:1.5rem;
}
.testimonial-card__author { font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.testimonial-card__role   { font-size:.75rem; color:var(--cream-30); margin-top:.3rem; }

/* === HOME: CTA BANNER === */
.cta-banner {
  padding:var(--py) 0;
  background:linear-gradient(180deg, var(--cream-06) 0%, var(--black) 100%);
  border-top:1px solid var(--cream-10);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before {
  content:'';
  position:absolute;
  top:-100px; left:50%;
  transform:translateX(-50%);
  width:600px; height:600px;
  background:radial-gradient(circle,var(--bronze-10) 0%,transparent 70%);
  pointer-events:none;
}
.cta-banner h2 {
  font-size:clamp(2.25rem,5vw,3.5rem);
  font-weight:700;
  max-width:620px;
  margin:1.5rem auto 1.75rem;
  line-height:1.05;
  letter-spacing:-.02em;
}
.cta-banner p { color:var(--cream-60); max-width:440px; margin:0 auto 3.5rem; line-height:1.8; }
.cta-banner .cta-actions { display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; }

/* === ABOUT PAGE === */
.about__lead {
  font-size:clamp(1.25rem,2.2vw,1.625rem);
  line-height:1.7;
  color:var(--cream-80);
  max-width:820px;
  margin-bottom:5.5rem;
}
.about__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7rem;
  margin-bottom:6.5rem;
}
.about__copy p {
  font-size:1.0625rem;
  color:var(--cream-60);
  line-height:1.85;
  margin-bottom:1.75rem;
}
.about__visual {
  position:relative;
  aspect-ratio:3/4;
  background:linear-gradient(160deg, var(--cream-04) 0%, var(--surface) 50%, var(--cream-04) 100%);
  border:1px solid var(--cream-10);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about__visual-label {
  position:absolute;
  bottom:1.5rem; left:1.5rem;
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream-30);
}

/* Values */
.values__header { max-width:480px; margin-bottom:4rem; }
.values__header h2 { font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; margin-top:1rem; }
.values__grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5rem;
  border-top:1px solid var(--cream-10);
  padding-top:3.5rem;
}
.value-item {
  padding-top:2rem;
  border-top:2px solid var(--bronze);
  transition:transform .4s var(--ease);
}
.value-item:hover { transform:translateY(-4px); }
.value-item__name { font-size:1.0625rem; font-weight:700; margin-bottom:1rem; }
.value-item__desc { font-size:.9rem; color:var(--cream-60); line-height:1.75; }

/* === SERVICES PAGE === */
.services-intro__grid {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:6rem;
  margin-bottom:5.5rem;
}
.services-intro__body { font-size:1.0625rem; color:var(--cream-60); line-height:1.85; }

.service-detail {
  padding:4.5rem 0;
  border-top:1px solid var(--cream-10);
}
.service-detail:last-child { border-bottom:1px solid var(--cream-10); }
.service-detail__grid {
  display:grid;
  grid-template-columns:14rem 1fr;
  gap:5rem;
  align-items:start;
}
.service-detail__badge {
  display:inline-block;
  padding:.4rem .95rem;
  border:1px solid var(--bronze-40);
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:1.25rem;
}
.service-detail__num {
  font-size:4.5rem;
  font-weight:700;
  color:var(--cream-10);
  letter-spacing:-.03em;
  line-height:1;
  transition:color .4s;
}
.service-detail:hover .service-detail__num { color:var(--bronze-20); }
.service-detail__title { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; margin-bottom:1.5rem; letter-spacing:-.01em; }
.service-detail__desc  { font-size:1.0625rem; color:var(--cream-60); line-height:1.85; margin-bottom:2rem; }
.service-detail__list  { display:grid; grid-template-columns:1fr 1fr; gap:.875rem; }
.service-detail__list li {
  display:flex; align-items:center; gap:.875rem;
  font-size:.9rem; color:var(--cream-60);
  transition:color .25s;
}
.service-detail__list li:hover { color:var(--cream); }
.service-detail__list li::before {
  content:'';
  display:block; width:5px; height:5px;
  background:var(--bronze); border-radius:50%; flex-shrink:0;
  transition:transform .3s var(--ease);
}
.service-detail__list li:hover::before { transform:scale(1.4); }

/* === FEATURED PROJECT GALLERY === */
.featured-project {
  margin-bottom:5rem;
  padding-bottom:5rem;
  border-bottom:1px solid var(--cream-10);
}
.featured-project__header { margin-bottom:2rem; }
.featured-project__title {
  font-size:clamp(1.375rem,2.5vw,1.875rem);
  font-weight:700;
  line-height:1.1;
  margin-bottom:.35rem;
  margin-top:.625rem;
}
.featured-project__loc { font-size:.8125rem; color:var(--cream-30); }
.featured-project__summary {
  font-size:.9375rem;
  color:var(--cream-60);
  line-height:1.75;
  margin-top:1rem;
  max-width:60ch;
}
.featured-project__gallery {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
}
.featured-project__gallery img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  transition:opacity .4s var(--ease);
}
.featured-project__gallery img:hover { opacity:.75; }
.featured-project__gallery img:first-child {
  grid-column:1 / -1;
  aspect-ratio:21/9;
}
@media (max-width:768px) {
  .featured-project__gallery { grid-template-columns:repeat(2,1fr); }
  .featured-project__gallery img:first-child { aspect-ratio:16/9; }
}

/* === PROJECTS PAGE === */
.projects__filter {
  display:flex; gap:.5rem; margin-bottom:4.5rem; flex-wrap:wrap;
}
.filter-btn {
  padding:.6rem 1.4rem;
  font-size:.625rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-60);
  border:1px solid var(--cream-10);
  transition:color .25s, border-color .25s, background .25s;
}
.filter-btn:hover { color:var(--cream); border-color:var(--cream-30); }
.filter-btn.active {
  color:var(--cream);
  border-color:var(--bronze);
  background:var(--bronze-10);
}

.projects__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.proj-card {
  position:relative; overflow:hidden; display:block; background:var(--surface-2);
  transition:transform .5s var(--ease);
}
.proj-card:hover { transform:translateY(-4px); }
.proj-card__img {
  aspect-ratio:5/4;
  background:linear-gradient(145deg,#100d0b 0%,#1a1512 50%,#0c0a08 100%);
  position:relative; overflow:hidden;
}
.proj-card__img::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 50%);
  opacity:0;
  transition:opacity .4s;
}
.proj-card:hover .proj-card__img::after { opacity:1; }
.proj-card__placeholder {
  position:absolute; inset:0;
  background:linear-gradient(160deg,var(--surface-2) 0%,#1a1612 50%,var(--surface) 100%);
  transition:transform .8s var(--ease);
}
.proj-card:hover .proj-card__placeholder { transform:scale(1.05); }
.proj-card__photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .8s var(--ease);
}
.proj-card:hover .proj-card__photo { transform:scale(1.05); }
.proj-card__info {
  padding:1.75rem;
  background:var(--black);
  border-top:1px solid var(--cream-10);
}
.proj-card__meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:.625rem; }
.proj-card__cat  { font-size:.5625rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--bronze); }
.proj-card__year { font-size:.75rem; color:var(--cream-30); }
.proj-card__title { font-size:1.0625rem; font-weight:700; margin-bottom:.3rem; transition:color .25s; }
.proj-card:hover .proj-card__title { color:var(--bronze); }
.proj-card__loc   { font-size:.8125rem; color:var(--cream-30); margin-bottom:1rem; }
.proj-card__summary { font-size:.875rem; color:var(--cream-60); line-height:1.7; }
.proj-card__link { display:block; color:inherit; text-decoration:none; }
.proj-card__img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  transition:transform .8s var(--ease);
}
.proj-card:hover .proj-card__img img { transform:scale(1.05); }

/* === CONTACT PAGE === */
.contact__grid {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:8rem;
  align-items:start;
}
.contact__info-heading {
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin-bottom:1.75rem;
}
.contact__intro { font-size:1.0625rem; color:var(--cream-60); line-height:1.85; margin-bottom:4rem; }
.contact__details { display:flex; flex-direction:column; gap:2.25rem; }
.contact-item__label { font-size:.5625rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--bronze); margin-bottom:.5rem; }
.contact-item__value { font-size:.9375rem; color:var(--cream-60); line-height:1.7; }
.contact-item__value a { color:var(--cream-60); transition:color .25s; position:relative; }
.contact-item__value a::after {
  content:'';
  position:absolute;
  bottom:-1px; left:0;
  width:0; height:1px;
  background:var(--bronze);
  transition:width .35s var(--ease);
}
.contact-item__value a:hover { color:var(--cream); }
.contact-item__value a:hover::after { width:100%; }

/* Form */
.contact__form { display:flex; flex-direction:column; gap:1.75rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; }
.form-group { display:flex; flex-direction:column; gap:.6rem; position:relative; }
.form-group label {
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--cream-30);
  transition:color .25s;
}
.form-group:focus-within label { color:var(--bronze); }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%;
  background:var(--cream-04);
  border:1px solid var(--cream-10);
  color:var(--cream);
  font-size:.9375rem;
  padding:1.1rem 1.25rem;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--bronze);
  background:var(--cream-06);
  box-shadow:0 0 0 3px var(--bronze-10);
}
.form-group textarea { resize:vertical; min-height:150px; line-height:1.7; }
.form-group select option { background:#0d0d0d; }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--cream-30); }

.form-submit {
  position:relative;
  overflow:hidden;
}
.form-submit::after {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  background:rgba(255,255,255,.15);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .5s, height .5s;
}
.form-submit:active::after { width:300px; height:300px; }

/* === FOOTER === */
.footer { padding:6rem 0 3.5rem; border-top:1px solid var(--cream-10); }
.footer__top {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:4rem;
  padding-bottom:4.5rem;
  margin-bottom:3rem;
  border-bottom:1px solid var(--cream-10);
}
.footer__brand { display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; }
.footer__brand-img {
  height:1.25rem;
  width:auto;
  object-fit:contain;
  object-position:left center;
}
.footer__brand-name { font-size:.75rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; line-height:1.3; }
.footer__brand-sub  { font-size:.625rem; font-weight:700; letter-spacing:.35em; text-transform:uppercase; color:var(--cream-30); }
.footer__tagline    { font-size:.9375rem; color:var(--cream-60); font-style:italic; line-height:1.65; margin-bottom:.625rem; }
.footer__location   { font-size:.75rem; color:var(--cream-30); letter-spacing:.08em; }
.footer__col-title  { font-size:.5625rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--cream-30); margin-bottom:1.75rem; }
.footer__col-links  { display:flex; flex-direction:column; gap:1rem; }
.footer__col-links a {
  font-size:.875rem;
  color:var(--cream-60);
  transition:color .25s, transform .3s var(--ease);
  display:inline-block;
}
.footer__col-links a:hover { color:var(--cream); transform:translateX(4px); }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.footer__copy   { font-size:.75rem; color:var(--cream-30); }
.footer__legal  { font-size:.75rem; color:var(--cream-30); }
.footer__social {
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin-top:1.75rem;
}
.footer__social-link {
  color:var(--cream-30);
  transition:color .25s, transform .3s var(--ease);
  display:flex;
  align-items:center;
}
.footer__social-link:hover { color:var(--bronze); transform:translateY(-2px); }

/* === FLOATING WHATSAPP BUTTON === */
.wa-float {
  position:fixed;
  bottom:2rem;
  left:2rem;
  z-index:900;
  width:3.25rem;
  height:3.25rem;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.35), 0 2px 8px rgba(0,0,0,.25);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float:hover {
  transform:scale(1.08) translateY(-2px);
  box-shadow:0 8px 28px rgba(37,211,102,.45), 0 4px 12px rgba(0,0,0,.3);
}

/* === PAGE TRANSITION === */
.page-fade { animation:pageFade .7s var(--ease) both; }
@keyframes pageFade { from { opacity:0; } to { opacity:1; } }

/* === ANIMATIONS & REVEALS === */
.reveal {
  opacity:0;
  transform:translateY(32px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.visible { opacity:1; transform:none; }

.reveal--left {
  opacity:0;
  transform:translateX(-40px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal--left.visible { opacity:1; transform:none; }

.reveal--right {
  opacity:0;
  transform:translateX(40px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal--right.visible { opacity:1; transform:none; }

.reveal--scale {
  opacity:0;
  transform:scale(.92);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal--scale.visible { opacity:1; transform:none; }

.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }
.reveal-d4 { transition-delay:.4s; }
.reveal-d5 { transition-delay:.5s; }

/* === RESPONSIVE === */
@media (max-width:1024px) {
  .work-item           { flex:0 0 calc((100vw - 2 * var(--px) - 2rem) / 2); } /* 2 visible on tablet */
  .why__grid           { grid-template-columns:repeat(2,1fr); }
  .process__steps      { grid-template-columns:repeat(3,1fr); }
  .intro__grid         { grid-template-columns:1fr; gap:3.5rem; }
  .intro__visual       { display:none; }
  .about__grid         { grid-template-columns:1fr; gap:3.5rem; }
  .values__grid        { grid-template-columns:repeat(2,1fr); }
  .services-intro__grid { grid-template-columns:1fr; gap:2.5rem; }
  .service-detail__grid { grid-template-columns:10rem 1fr; gap:3rem; }
  .footer__top         { grid-template-columns:1fr 1fr 1fr; }
  .footer__top > div:first-child { grid-column:1 / -1; }
}

@media (max-width:768px) {
  :root { --px:1.25rem; --py:4.5rem; --nav-h:60px; }
  .nav__links,.nav__cta { display:none; }
  .nav__toggle { display:flex; }
  .work-item   { flex:0 0 calc((100vw - 2 * var(--px) - 2rem) / 2); } /* 2 visible on mobile landscape */
  .why__grid   { grid-template-columns:1fr 1fr; gap:2rem; }
  .why-item    { border-right:none; padding-right:0; padding-bottom:2.5rem; border-bottom:1px solid var(--cream-10); }
  .process__steps { grid-template-columns:1fr 1fr; }
  .process-step   { border-right:none; padding-right:0; }
  .process-step::after { display:none; }
  .testimonials__grid { grid-template-columns:1fr; }
  .projects__grid { grid-template-columns:1fr 1fr; }
  .contact__grid  { grid-template-columns:1fr; gap:3.5rem; }
  .form-row { grid-template-columns:1fr; }
  .service-detail__grid { grid-template-columns:1fr; gap:1.5rem; }
  .service-detail__num  { display:none; }
  .footer__top    { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .footer__bottom { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .section-header { flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .service-row { grid-template-columns:3rem 1fr auto; gap:1.5rem; }
  .service-row__desc { display:none; }
  .service-row:hover { margin:0; padding:2.5rem 0; background:transparent; }
  .hero__title { letter-spacing:-.02em; }
  .hero__scroll { display:none; }
}

@media (max-width:480px) {
  .why__grid      { grid-template-columns:1fr; }
  .process__steps { grid-template-columns:1fr; }
  .projects__grid { grid-template-columns:1fr; }
  .work-item      { flex:0 0 calc(100vw - 2 * var(--px)); } /* 1 visible on small mobile */
  .intro__stats   { grid-template-columns:1fr 1fr; }
  .values__grid   { grid-template-columns:1fr; }
  .footer__top    { grid-template-columns:1fr; }
  .hero__title    { letter-spacing:-.015em; }
  .cta-banner h2  { letter-spacing:-.015em; }
}

/* ============================================================
   GALLERY LIGHTBOX / CAROUSEL
   ============================================================ */

.featured-project__gallery img { cursor:zoom-in; }

/* Overlay backdrop */
.lightbox {
  position:fixed;
  inset:0;
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease), background .4s var(--ease);
}
.lightbox.open {
  opacity:1;
  pointer-events:all;
  background:rgba(0,0,0,.93);
}

/* Main image container */
.lightbox__stage {
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Each slide */
.lightbox__slide {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5rem 7rem;
  pointer-events:none;
  opacity:0;
  transform:translateX(60px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  will-change:opacity,transform;
}
.lightbox__slide.active {
  opacity:1;
  transform:translateX(0);
  pointer-events:all;
}
.lightbox__slide.exit-left {
  opacity:0;
  transform:translateX(-60px);
}
.lightbox__slide.exit-right {
  opacity:0;
  transform:translateX(60px);
}
.lightbox__slide.enter-left {
  opacity:0;
  transform:translateX(-60px);
  pointer-events:none;
}
.lightbox__slide.enter-right {
  opacity:0;
  transform:translateX(60px);
  pointer-events:none;
}
.lightbox__slide img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* Navigation arrows */
.lightbox__arrow {
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:9010;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--cream-30);
  color:var(--cream);
  background:rgba(0,0,0,.4);
  cursor:pointer;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lightbox__arrow:hover {
  border-color:var(--cream-80);
  background:rgba(128,105,89,.25);
  transform:translateY(-50%) scale(1.08);
}
.lightbox__arrow--prev { left:2rem; }
.lightbox__arrow--next { right:2rem; }
.lightbox__arrow svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.5; fill:none; }

/* Close button */
.lightbox__close {
  position:fixed;
  top:1.5rem;
  right:1.75rem;
  z-index:9010;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--cream-30);
  color:var(--cream);
  background:rgba(0,0,0,.4);
  cursor:pointer;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lightbox__close:hover {
  border-color:var(--cream-80);
  background:rgba(128,105,89,.25);
  transform:rotate(90deg);
}
.lightbox__close svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.5; fill:none; }

/* Counter */
.lightbox__counter {
  position:fixed;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:9010;
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--cream-60);
  pointer-events:none;
}

/* Dot indicators */
.lightbox__dots {
  position:fixed;
  bottom:3.5rem;
  left:50%;
  transform:translateX(-50%);
  z-index:9010;
  display:flex;
  gap:.5rem;
  pointer-events:none;
}
.lightbox__dot {
  width:4px;
  height:4px;
  background:var(--cream-30);
  transition:background .3s, transform .3s var(--ease);
}
.lightbox__dot.active {
  background:var(--cream);
  transform:scale(1.4);
}

@media (max-width:768px) {
  .lightbox__slide { padding:4.5rem 1rem; }
  .lightbox__arrow { width:40px; height:40px; }
  .lightbox__arrow--prev { left:.75rem; }
  .lightbox__arrow--next { right:.75rem; }
}