/* =============================================================
   RED PAGODA — Where Vision Meets Transformation
   Luxury interior design house · Kathmandu, Nepal
   Design system · handcrafted, dependency-free
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@300;400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --red:        #8f1618;
  --red-deep:   #6d1012;
  --red-bright: #b21f22;
  --gold:       #c6a15b;
  --gold-light: #e4c989;
  --gold-soft:  #d8bd86;
  --black:      #0b0b0d;
  --charcoal:   #131317;
  --charcoal-2: #1b1b21;
  --ink:        #202024;
  --ivory:      #f6f1e7;
  --ivory-2:    #efe8da;
  --grey:       #9a978f;
  --grey-dim:   #6f6d68;
  --blue:       #12233f;

  --paper: var(--ivory);
  --text-on-dark: #ece7dc;
  --text-on-dark-dim: #a7a29a;

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --serif-alt: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(22px, 5vw, 80px);
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shadow: 0 30px 60px -25px rgba(0,0,0,.55);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--ink);
  line-height:1.65;
  font-weight:400;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--gold);color:var(--black)}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.01em}
.display{
  font-size:clamp(2.9rem,7.5vw,7rem);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.02em;
}
h2.section-title{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.04}
h3{font-size:clamp(1.4rem,2.4vw,2rem)}
.serif-italic{font-family:var(--serif-alt);font-style:italic;font-weight:400}
/* Hairline stroke in the text's own colour gently fattens Bodoni's thin
   strokes so titles stay readable — especially over imagery — without
   changing the typeface, weight, or character. */
h1,h2,h3,h4,.display,.display em,.serif-italic,.quote q,.intro__word,
.brand__name,.drawer a,.hero__meta strong,.stat .n,.step .stn,.badge-float strong,
.value .num,.srv-row .snum,.marquee span,.marquee span b,.clients .cl,
.fact .v,.cinfo .row .v,.footer__tag{
  -webkit-text-stroke:.4px currentColor;
  paint-order:stroke fill;
}
/* header wordmark sits over hero imagery — keep both the serif name and the
   sans "Design & Build" line legible with a subtle shadow */
.brand__name,.brand__sub{text-shadow:0 1px 8px rgba(0,0,0,.5)}

p{max-width:64ch}
.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.72;color:var(--grey-dim)}
strong{font-weight:600}

/* eyebrow / kicker */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);
  font-size:.72rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.7}
.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--gold);opacity:.7}
.eyebrow.no-rule::before{display:none}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:1560px}
section{position:relative}
.pad{padding-block:clamp(80px,11vw,170px)}
.pad-sm{padding-block:clamp(56px,7vw,100px)}
.dark{background:var(--black);color:var(--text-on-dark)}
.charcoal{background:var(--charcoal);color:var(--text-on-dark)}
.paper{background:var(--paper);color:var(--ink)}
.paper .lead{color:#57544d}
.dark .lead,.charcoal .lead{color:var(--text-on-dark-dim)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.mw-head{max-width:760px}
.mw-head.center{margin-inline:auto}
.divider-gold{width:64px;height:1px;background:var(--gold);opacity:.6;margin:26px 0}
.center .divider-gold{margin-inline:auto}

/* thin top hairline used between dark sections */
.hairline-top{border-top:1px solid rgba(198,161,91,.16)}

/* ---------- Buttons ---------- */
.btn{
  --bh:#fff;
  display:inline-flex;align-items:center;gap:.85em;
  font-family:var(--sans);font-weight:600;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  padding:1.05em 2em;
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
  border-radius:var(--radius);
  position:relative;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease);
  cursor:pointer;
}
.btn .arrow{transition:transform .5s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-0;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn > *{position:relative;z-index:1}
.btn:hover{color:var(--black)}
.btn:hover::before{transform:translateY(0)}
.btn:hover .arrow{transform:translateX(5px)}
.btn.solid{background:var(--gold);color:var(--black);border-color:var(--gold)}
.btn.solid::before{background:var(--black)}
.btn.solid:hover{color:var(--gold)}
.btn.ghost-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn.ghost-light::before{background:#fff}
.btn.ghost-light:hover{color:var(--black)}

/* text link with underline sweep */
.link-arrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding-bottom:4px;position:relative;
}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.link-arrow:hover::after{transform:scaleX(1)}
.link-arrow .arrow{transition:transform .4s var(--ease)}
.link-arrow:hover .arrow{transform:translateX(5px)}

/* =============================================================
   INTRO — the Magician reveal
   Dark → light reveals architecture → logo → tagline
   ============================================================= */
.intro{
  position:fixed;inset:0;z-index:2000;
  background:var(--black);
  display:grid;place-items:center;
  overflow:hidden;
}
.intro__img{
  position:absolute;inset:0;
  background:center/cover no-repeat;
  opacity:0;transform:scale(1.12);
  filter:brightness(.4) saturate(.8);
  animation:introReveal 3.6s var(--ease-out) forwards;
}
.intro__scrim{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 40%,transparent 30%,rgba(11,11,13,.7) 100%),linear-gradient(to top,rgba(11,11,13,.85),rgba(11,11,13,.2))}
.intro__inner{position:relative;text-align:center;color:var(--ivory);z-index:2;padding:20px}
.intro__mark{width:104px;margin:0 auto 30px;opacity:0;transform:translateY(14px);animation:introUp .9s var(--ease-out) 1.5s forwards}
.intro__word{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2rem,6vw,4.2rem);letter-spacing:.02em;
  line-height:1;
}
.intro__word span{display:inline-block;opacity:0;transform:translateY(26px);animation:introUp 1s var(--ease-out) forwards}
.intro__tag{
  margin-top:22px;font-family:var(--sans);
  font-size:.74rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);opacity:0;animation:introFade 1.1s ease 2.7s forwards
}
.intro__line{width:0;height:1px;background:var(--gold);margin:20px auto 0;animation:introLine 1.2s var(--ease-out) 2.5s forwards}
@keyframes introReveal{0%{opacity:0;transform:scale(1.12);filter:brightness(.15) saturate(.6)}55%{opacity:1}100%{opacity:1;transform:scale(1);filter:brightness(.5) saturate(.85)}}
@keyframes introUp{to{opacity:1;transform:none}}
@keyframes introFade{to{opacity:1}}
@keyframes introLine{to{width:180px}}
.intro.done{animation:introOut 1s var(--ease) forwards}
@keyframes introOut{to{opacity:0;visibility:hidden;transform:scale(1.04)}}
body.intro-active{overflow:hidden;height:100vh}

/* =============================================================
   HEADER / NAV
   ============================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:22px 0;
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(11,11,13,.86);
  backdrop-filter:blur(14px);
  padding:14px 0;
  border-bottom-color:rgba(198,161,91,.18);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px;color:var(--ivory)}
.brand__mark{width:46px;height:auto;flex:none}
.footer__brand .brand__mark{width:52px}
.brand__type{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--serif);font-weight:600;font-size:1.12rem;letter-spacing:.14em;color:var(--ivory)}
.brand__sub{font-family:var(--sans);font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-top:5px;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a{
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-on-dark);position:relative;padding:6px 0;transition:color .4s var(--ease)
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav__links a:hover,.nav__links a.active{color:var(--gold)}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)}
.nav__cta{display:inline-flex}
.nav__cta .btn{padding:.85em 1.5em}
.burger{display:none;flex-direction:column;gap:6px;width:34px;height:34px;justify-content:center;align-items:center}
.burger span{width:26px;height:1.5px;background:var(--ivory);transition:.4s var(--ease)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:1500;
  background:var(--black);
  display:flex;flex-direction:column;justify-content:center;
  padding:40px var(--gutter);
  transform:translateX(100%);transition:transform .6s var(--ease);
}
.drawer.open{transform:none}
.drawer a{
  font-family:var(--serif);font-size:2rem;color:var(--ivory);
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;
}
.drawer a .idx{font-family:var(--sans);font-size:.7rem;color:var(--gold);letter-spacing:.2em}
.drawer__close{position:absolute;top:26px;right:var(--gutter);font-size:2rem;color:var(--gold)}
.drawer__foot{margin-top:34px;color:var(--grey);font-size:.85rem;letter-spacing:.05em}

/* =============================================================
   HERO
   ============================================================= */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--black)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,rgba(9,9,11,.8) 0%,rgba(9,9,11,.34) 42%,rgba(9,9,11,.12) 66%,rgba(9,9,11,.42) 100%),
  linear-gradient(to right,rgba(9,9,11,.46) 0%,rgba(9,9,11,.1) 46%,rgba(9,9,11,0) 84%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(60px,9vh,120px);color:var(--ivory);text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hero__eyebrow{margin-bottom:26px;color:var(--gold-light)}
.hero__eyebrow::before{background:var(--gold-light);opacity:.85}
.hero .display{max-width:15ch}
.hero .display em{font-family:var(--serif-alt);font-style:italic;font-weight:400;color:var(--gold-light)}
.hero__sub{margin-top:30px;max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--text-on-dark-dim);line-height:1.7}
.hero__actions{margin-top:44px;display:flex;gap:18px;flex-wrap:wrap}
.hero__scroll{
  position:absolute;left:var(--gutter);bottom:34px;z-index:2;
  display:flex;align-items:center;gap:12px;color:var(--text-on-dark-dim);
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
}
.hero__scroll .dot{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:scrollPulse 2.2s ease infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
.hero__meta{
  position:absolute;right:var(--gutter);bottom:40px;z-index:2;text-align:right;
  color:var(--text-on-dark-dim);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}
.hero__meta strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--ivory);letter-spacing:0;text-transform:none;font-weight:500}

/* page hero (inner pages) */
.phero{position:relative;min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--charcoal);padding-top:120px}
.phero__media{position:absolute;inset:0;z-index:0}
.phero__media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.phero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,13,.95),rgba(11,11,13,.35))}
.phero__inner{position:relative;z-index:2;color:var(--ivory);padding-bottom:clamp(46px,7vh,90px);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.phero h1{font-size:clamp(2.6rem,6vw,5.2rem);max-width:16ch}
.phero__sub{margin-top:20px;max-width:56ch;color:var(--text-on-dark-dim);font-size:1.1rem}
.crumb{display:flex;gap:10px;align-items:center;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.crumb span{color:var(--grey)}

/* =============================================================
   COMPONENTS
   ============================================================= */

/* section header block */
.section-head{margin-bottom:clamp(44px,6vw,80px)}
.section-head .eyebrow{margin-bottom:22px}
.section-head p.lead{margin-top:22px}

/* two-col split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,100px);align-items:center}
.split.reverse .split__media{order:2}
.split__media{position:relative;overflow:hidden;border-radius:var(--radius)}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease)}
.split:hover .split__media img{transform:scale(1.05)}
.split__media.tall img{aspect-ratio:3/4}
.badge-float{
  position:absolute;left:24px;bottom:24px;
  background:rgba(11,11,13,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(198,161,91,.3);
  padding:14px 20px;color:var(--ivory);
}
.badge-float strong{font-family:var(--serif);font-size:1.6rem;display:block;color:var(--gold-light)}
.badge-float span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}

/* value / feature grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,44px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,34px)}
.value{padding:38px 30px;border:1px solid rgba(198,161,91,.16);border-radius:var(--radius);transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease)}
.dark .value,.charcoal .value{background:rgba(255,255,255,.015)}
.value:hover{border-color:rgba(198,161,91,.5);transform:translateY(-6px)}
.value .num{font-family:var(--serif);font-size:1.1rem;color:var(--gold);opacity:.7;letter-spacing:.1em}
.value h3{margin:16px 0 12px;color:inherit}
.value p{font-size:.98rem;color:var(--text-on-dark-dim);max-width:none}
.paper .value p{color:#5c584f}
.paper .value{background:#fff}

/* service list rows */
.srv-row{
  display:grid;grid-template-columns:80px 1fr auto;gap:30px;align-items:center;
  padding:38px 0;border-top:1px solid rgba(198,161,91,.16);
  transition:padding-left .5s var(--ease);
}
.srv-row:last-child{border-bottom:1px solid rgba(198,161,91,.16)}
.srv-row:hover{padding-left:16px}
.srv-row .snum{font-family:var(--serif);color:var(--gold);font-size:1.1rem}
.srv-row h3{font-size:clamp(1.5rem,3vw,2.4rem);transition:color .4s var(--ease)}
.srv-row:hover h3{color:var(--gold)}
.srv-row .sdesc{color:var(--grey);max-width:52ch;margin-top:8px;font-size:.98rem}
.srv-row .arrow-c{width:46px;height:46px;border:1px solid rgba(198,161,91,.4);border-radius:50%;display:grid;place-items:center;color:var(--gold);transition:.5s var(--ease)}
.srv-row:hover .arrow-c{background:var(--gold);color:var(--black)}

/* project tiles */
.proj-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px)}
.proj{
  position:relative;overflow:hidden;border-radius:var(--radius);
  display:block;background:var(--charcoal);min-height:340px;
}
.proj.span-7{grid-column:span 7}
.proj.span-5{grid-column:span 5}
.proj.span-6{grid-column:span 6}
.proj.span-12{grid-column:span 12}
.proj.tall{min-height:560px}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter 1.2s var(--ease);filter:brightness(.82)}
.proj:hover img{transform:scale(1.06);filter:brightness(.6)}
.proj__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,9,11,.95) 0%,rgba(9,9,11,.72) 32%,rgba(9,9,11,.34) 58%,transparent 88%)}
.proj__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3vw,42px);color:var(--ivory);z-index:2;transform:translateY(10px);transition:transform .6s var(--ease);text-shadow:0 1px 16px rgba(0,0,0,.6)}
.proj:hover .proj__body{transform:translateY(0)}
.proj__cat{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px;display:inline-block;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.proj h3{font-size:clamp(1.5rem,2.6vw,2.4rem)}
.proj__meta{margin-top:8px;color:#cbc7be;font-size:.85rem;letter-spacing:.08em;display:flex;gap:16px;flex-wrap:wrap}
.proj__go{margin-top:18px;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.proj:hover .proj__go{opacity:1;transform:none}

/* filter bar */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.filters button{
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.75em 1.4em;border:1px solid rgba(198,161,91,.3);border-radius:40px;color:var(--grey);
  transition:.4s var(--ease)
}
.filters button:hover{color:var(--gold-light);border-color:var(--gold)}
.filters button.active{background:var(--gold);color:var(--black);border-color:var(--gold)}
.proj.hide{display:none}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{text-align:center;padding:20px}
.stat .n{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.4rem);color:var(--gold-light);line-height:1;font-weight:500}
.stat .l{margin-top:14px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}

/* quote */
.quote{max-width:1000px;margin-inline:auto;text-align:center}
.quote q{font-family:var(--serif);font-style:normal;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.28;quotes:none}
.quote q::before{content:"“";color:var(--gold);margin-right:.05em}
.quote q::after{content:"”";color:var(--gold)}
.quote .who{margin-top:34px;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.quote .who span{display:block;color:var(--grey);margin-top:8px;letter-spacing:.14em}

/* marquee of words we own */
.marquee{overflow:hidden;border-block:1px solid rgba(198,161,91,.16);padding:26px 0;--sp:40s}
.marquee__track{display:flex;gap:60px;white-space:nowrap;width:max-content;animation:marq var(--sp) linear infinite}
.marquee span{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.4rem);color:var(--grey-dim)}
.marquee span b{color:var(--gold);font-style:normal;font-weight:500;font-family:var(--serif)}
.marquee .dot{color:var(--gold);align-self:center}
@keyframes marq{to{transform:translateX(-50%)}}

/* logos / clients strip */
.clients{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(30px,5vw,70px);align-items:center}
.clients .cl{font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--grey);letter-spacing:.06em;opacity:.65;transition:.4s var(--ease)}
.clients .cl:hover{opacity:1;color:var(--gold-light)}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);counter-reset:st}
.step{position:relative}
.step .stn{font-family:var(--serif);font-size:2.6rem;color:var(--gold);opacity:.35;line-height:1}
.step h3{margin:14px 0 12px;font-size:1.3rem}
.step p{font-size:.95rem;color:var(--text-on-dark-dim);max-width:none}
.paper .step p{color:#5c584f}

/* gallery */
.gallery{columns:3;column-gap:clamp(14px,1.6vw,22px)}
.gallery figure{break-inside:avoid;margin-bottom:clamp(14px,1.6vw,22px);overflow:hidden;border-radius:var(--radius);cursor:zoom-in;position:relative}
.gallery img{width:100%;transition:transform 1s var(--ease),filter .6s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figure::after{content:"⤢";position:absolute;top:14px;right:16px;color:#fff;opacity:0;transition:.4s;font-size:1.1rem;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.gallery figure:hover::after{opacity:.9}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:2200;background:rgba(6,6,8,.96);display:none;place-items:center;padding:5vw}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw;max-height:88vh;box-shadow:0 40px 90px rgba(0,0,0,.6);border-radius:var(--radius)}
.lightbox__close{position:absolute;top:28px;right:34px;color:var(--gold);font-size:2.2rem}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.4rem;padding:20px;opacity:.7;transition:.3s}
.lightbox__nav:hover{opacity:1;color:var(--gold)}
.lightbox__nav.prev{left:14px}
.lightbox__nav.next{right:14px}

/* before / after slider */
.ba{position:relative;overflow:hidden;border-radius:var(--radius);user-select:none;aspect-ratio:16/10;background:#000}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);z-index:3;transform:translateX(-1px)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--black);display:grid;place-items:center;font-size:1rem;box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:ew-resize}
.ba__tag{position:absolute;top:16px;z-index:4;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:rgba(11,11,13,.7);padding:6px 12px;border:1px solid rgba(255,255,255,.2)}
.ba__tag.l{left:16px}
.ba__tag.r{right:16px}

/* project fact sheet */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid rgba(198,161,91,.18)}
.fact{padding:26px 28px;border-bottom:1px solid rgba(198,161,91,.14)}
.fact:nth-child(odd){border-right:1px solid rgba(198,161,91,.14)}
.fact .k{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.fact .v{font-family:var(--serif);font-size:1.25rem;margin-top:8px;color:inherit}

/* pull image full-bleed */
.bleed{position:relative;height:clamp(320px,60vh,640px);overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed__quote{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--gutter);color:var(--ivory);text-shadow:0 2px 22px rgba(0,0,0,.6);background:radial-gradient(120% 120% at 50% 50%,rgba(11,11,13,.5) 0%,rgba(11,11,13,.82) 100%)}
.bleed__quote .quote q{color:var(--ivory)}
.bleed__quote .quote .who span{color:var(--text-on-dark-dim)}

/* CTA band */
.cta-band{position:relative;overflow:hidden;text-align:center}
.cta-band__bg{position:absolute;inset:0;z-index:0}
.cta-band__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.32) saturate(.9)}
.cta-band__inner{position:relative;z-index:2;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.cta-band h2{color:var(--ivory);margin-bottom:18px}

/* forms */
.form{display:grid;gap:26px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{position:relative}
.field label{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(198,161,91,.35);
  color:var(--ivory);font-family:var(--sans);font-size:1.05rem;padding:12px 0;transition:border-color .4s
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field select{color:var(--grey);cursor:pointer}
.field select option{background:var(--charcoal);color:var(--ivory)}
.field ::placeholder{color:var(--grey-dim)}
.form__note{font-size:.85rem;color:var(--grey)}
.form-ok{display:none;padding:18px 22px;border:1px solid var(--gold);color:var(--gold-light);background:rgba(198,161,91,.06);border-radius:var(--radius)}
.form-ok.show{display:block}
/* honeypot — visually removed but still present for bots */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
/* anti-spam widget + error */
.cf-turnstile{min-height:65px}
.form-err{display:none;color:#e6a6a6;font-size:.9rem;letter-spacing:.02em}
.form-err.show{display:block}

/* contact info list */
.cinfo{display:grid;gap:34px}
.cinfo .row .k{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.cinfo .row .v{font-family:var(--serif);font-size:1.3rem;color:var(--ivory)}
.cinfo .row .v a:hover{color:var(--gold-light)}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{background:#08080a;color:var(--text-on-dark-dim);padding-top:clamp(70px,9vw,120px)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:64px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer__brand .brand__name{font-size:1.4rem}
.footer__tag{font-family:var(--serif-alt);font-style:italic;font-size:1.35rem;color:var(--gold-light);margin:22px 0 16px;max-width:24ch}
.footer__brand p{font-size:.92rem;max-width:34ch}
.footer h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.footer li{margin-bottom:13px}
.footer li a{font-size:.95rem;transition:color .35s}
.footer li a:hover{color:var(--gold-light)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:30px 0 44px;font-size:.8rem;letter-spacing:.06em}
.footer__social{display:flex;gap:22px}
.footer__social a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;transition:color .35s}
.footer__social a:hover{color:var(--gold-light)}
.replay-intro{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:.45em;transition:color .35s}
.replay-intro:hover{color:var(--gold-light)}

/* =============================================================
   REVEAL ANIMATIONS
   ============================================================= */
/* Hidden starting states apply ONLY when JS is active (.js on <html>),
   so content is always visible if the script fails to run. */
.js .reveal{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s}
.js .reveal.d4{transition-delay:.4s}.js .reveal.d5{transition-delay:.5s}
.js .reveal-img{opacity:0;transform:scale(1.04);transition:opacity 1.1s var(--ease-out),transform 1.5s var(--ease-out)}
.js .reveal-img.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal,.reveal-img{opacity:1!important;transform:none!important;clip-path:none!important}
  .intro{display:none!important}
  html{scroll-behavior:auto}
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1100px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:flex}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  body{font-size:16px}
  .split{grid-template-columns:1fr}
  .split.reverse .split__media{order:0}
  .split__media img{aspect-ratio:16/11}
  .grid-3,.grid-4,.stats,.steps{grid-template-columns:1fr 1fr}
  .proj-grid .proj{grid-column:span 12!important;min-height:300px}
  .proj.tall{min-height:420px}
  .gallery{columns:2}
  .facts{grid-template-columns:1fr}
  .fact:nth-child(odd){border-right:none}
  .f-row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .srv-row{grid-template-columns:1fr;gap:8px}
  .srv-row .arrow-c{display:none}
  .hero__meta{display:none}
}
@media (max-width:520px){
  .grid-3,.grid-4,.stats,.steps{grid-template-columns:1fr}
  .gallery{columns:1}
  .clients{gap:26px}
}
/* ---- Short / landscape screens: the full-screen menu can be taller than the
        viewport, so let it scroll from the top (instead of centring, which hid
        the first item behind the address bar) and tighten the items a little ---- */
@media (max-height:560px){
  .drawer{
    justify-content:flex-start;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-top:max(72px,calc(env(safe-area-inset-top) + 60px));
    padding-bottom:max(28px,env(safe-area-inset-bottom));
  }
  .drawer a{font-size:1.5rem;padding:11px 0}
  .drawer__foot{margin-top:22px}
}
/* ---- Mobile only (≤1100px): make the hero sub-text legible over bright
        imagery — desktop is unchanged ---- */
@media (max-width:1100px){
  .hero__sub{color:var(--ivory);text-shadow:0 1px 16px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.6)}
}
/* ---- Mobile landscape only (short viewport): the 100vh hero was taller than
        the screen, so its text overflowed up onto the logo. Size the hero to its
        content, clear the header, and trim the type so nothing overlaps ---- */
@media (max-width:1100px) and (max-height:560px){
  .hero{min-height:auto;align-items:stretch}
  .hero__inner{padding-top:100px;padding-bottom:34px}
  .hero .display{font-size:clamp(1.9rem,6vw,2.8rem)}
  .hero__eyebrow{margin-bottom:16px}
  .hero__sub{margin-top:14px;font-size:.98rem}
  .hero__actions{margin-top:22px}
  .hero__scroll,.hero__meta{display:none}
}