/*
Theme Name: FORMA - Architecture & Design Studio HTML Template
Description: Premium Architecture, Interior Design & Urban Planning HTML Template
Author: K29 Solutions / FORMA - Architecture
Version: 1.0.0

/*------------------------------------------------------------------
[Table of contents]

1. Global Styles & Variables
2. Typography & Base
3. Cursor & Preloader
4. Navigation & Header
5. Hero Section
6. General Sections (About, Services, Process)
7. Portfolio & Grid
8. Testimonials & Swiper
9. Stats
10. Contact & Forms
11. Footer
12. Lightbox & Overlays
13. Responsive / Media Queries
-------------------------------------------------------------------*/
/* =========================================
   ROOT & RESET
========================================= */
:root {
  --gold:       #c9a96e;
  --gold-light: #e8d5b0;
  --gold-dim:   rgba(201,169,110,0.12);
  --gold-mid:   rgba(201,169,110,0.35);
  --dark:       #0a0a0a;
  --dark2:      #111111;
  --dark3:      #181818;
  --charcoal:   #222222;
  --gray:       #888888;
  --lgray:      #cccccc;
  --off-white:  #f5f3ef;
  --white:      #ffffff;
  --border:     rgba(201,169,110,0.18);
  --border2:    rgba(255,255,255,0.07);
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif:   'Libre Baskerville', serif;
  --font-body:    'Barlow', sans-serif;
  --ease:       cubic-bezier(0.25,0.46,0.45,0.94);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--lgray);
  overflow-x: hidden;
  cursor: none;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* =========================================
   CUSTOM CURSOR
========================================= */
#cDot {
  position:fixed; width:7px; height:7px;
  background:var(--gold); border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .15s, height .15s, background .3s;
}
#cRing {
  position:fixed; width:34px; height:34px;
  border:1px solid var(--gold); border-radius:50%;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .35s, height .35s, opacity .3s;
}
body.c-hover #cDot  { width:11px; height:11px; background:var(--gold-light); }
body.c-hover #cRing { width:54px; height:54px; opacity:.45; }

/* =========================================
   PRELOADER
========================================= */
#preloader {
  position:fixed; inset:0; z-index:99997;
  background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  transition:opacity 1s ease, visibility 1s ease;
}
#preloader.out { opacity:0; visibility:hidden; }
.pl-logo {
  font-family:var(--font-display);
  font-size:clamp(4rem,10vw,9rem);
  color:var(--white); letter-spacing:.1em;
  opacity:0; transform:scaleX(1.2);
  animation:plScale .9s .3s forwards;
}
.pl-rule {
  width:0; height:1px; background:var(--gold); margin-top:1.2rem;
  animation:plRule 1.6s .5s forwards;
}
.pl-tag {
  font-size:.58rem; letter-spacing:.55em; text-transform:uppercase;
  color:var(--gold); margin-top:.9rem;
  opacity:0; animation:plFade .7s 1.2s forwards;
}
@keyframes plScale { to { opacity:1; transform:scaleX(1); } }
@keyframes plRule  { to { width:220px; } }
@keyframes plFade  { to { opacity:1; } }

/* =========================================
   SOCIAL SIDEBAR
========================================= */
.soc-bar {
  position:fixed; right:1.8rem; top:50%;
  transform:translateY(-50%); z-index:900;
  display:flex; flex-direction:column; gap:.9rem;
}
.soc-bar a {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border2); color:var(--gray);
  font-size:.8rem; transition:all .3s var(--ease);
}
.soc-bar a:hover { border-color:var(--gold); color:var(--gold); }

/* =========================================
   NAVBAR
========================================= */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.8rem 4rem;
  border-bottom:1px solid transparent;
  transition:background .5s, padding .4s, border-color .5s;
}
#nav.scrolled {
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(14px);
  padding:1rem 4rem;
  border-color:var(--border2);
}
.nav-logo {
  font-family:var(--font-display);
  font-size:1.9rem; letter-spacing:.15em;
  color:var(--white); transition:color .3s;
  line-height:1;
}
#nav.scrolled .nav-logo { color:var(--gold-light); }
.nav-menu { display:flex; align-items:center; gap:2.8rem; }
.nav-menu a {
  font-size:.62rem; font-weight:500; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  position:relative; padding-bottom:4px;
  transition:color .3s;
}
.nav-menu a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-menu a:hover,
.nav-menu a.active { color:var(--gold); }
.nav-menu a:hover::after,
.nav-menu a.active::after { width:100%; }
.nav-btn {
  font-family:var(--font-display); font-size:1rem; letter-spacing:.15em;
  padding:.55rem 1.8rem; border:1px solid var(--gold);
  color:var(--gold); background:transparent;
  transition:all .35s var(--ease);
}
.nav-btn:hover { background:var(--gold); color:var(--dark); }
.ham-btn {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:none; padding:4px;
}
.ham-btn span {
  display:block; width:26px; height:1.5px;
  background:var(--white); transition:all .35s;
}
.ham-btn.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.ham-btn.open span:nth-child(2) { opacity:0; }
.ham-btn.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.mob-menu {
  display:none; position:fixed; inset:0; z-index:9998;
  background:var(--dark); flex-direction:column;
  align-items:center; justify-content:center; gap:2.2rem;
}
.mob-menu.open { display:flex; }
.mob-menu a {
  font-family:var(--font-display); font-size:3.5rem;
  letter-spacing:.1em; color:rgba(255,255,255,.8);
  transition:color .3s;
}
.mob-menu a:hover { color:var(--gold); }

/* =========================================
   SECTION LABELS (vertical rotated)
========================================= */
.sec-label {
  position:absolute; left:-3.5rem; top:50%;
  transform:translateY(-50%) rotate(-90deg);
  font-size:.52rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--border); white-space:nowrap;
  pointer-events:none;
}

/* =========================================
   HERO — FULL DARK, GIANT TYPE
========================================= */
#hero {
  min-height:100vh;
  background:var(--dark);
  display:flex; align-items:flex-end;
  position:relative; overflow:hidden;
  padding:0 4rem 6rem;
}
/* Blueprint grid lines background */
#hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,169,110,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.04) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
}
/* Radial glow */
#hero::after {
  content:'';
  position:absolute; top:-20%; right:-10%;
  width:70vw; height:70vw; border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,110,.06) 0%, transparent 65%);
  pointer-events:none;
}
.hero-bg-img {
  position:absolute; inset:0;
  background:url('../images/unsplash_css_1487958449943-2429e8be8625_10c6c0.jpg') center/cover no-repeat;
  opacity:.1; mix-blend-mode:luminosity;
}
.hero-content {
  position:relative; z-index:2;
  max-width:1300px; width:100%; margin:0 auto;
}
.hero-line-top {
  display:flex; align-items:center; gap:1.5rem;
  margin-bottom:2rem;
  opacity:0; animation:hFadeUp .7s .4s forwards;
}
.hero-line-top span {
  font-size:.58rem; letter-spacing:.55em; text-transform:uppercase; color:var(--gold);
}
.hero-line-top::before,
.hero-line-top::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.hero-line-top::after { max-width:60px; flex:none; }
.hero-big-title {
  font-family:var(--font-display);
  font-size:clamp(5rem,15vw,6rem);
  color:var(--white); line-height:.88;
  letter-spacing:-.01em;
  opacity:0; animation:hFadeUp .9s .6s forwards;
}
.hero-big-title .gold-word { color:var(--gold); }
.hero-big-title .outline-word {
  -webkit-text-stroke:1px rgba(255,255,255,.25);
  color:transparent;
}
.hero-bottom {
  display:flex; align-items:flex-end;
  justify-content:space-between; margin-top:3rem;
  opacity:0; animation:hFadeUp .8s .9s forwards;
}
.hero-sub-text {
  font-family:var(--font-serif); font-style:italic;
  font-size:1rem; color:rgba(255,255,255,.45);
  max-width:340px; line-height:1.8;
}
.hero-cta-group { display:flex; align-items:center; gap:2.5rem; }
.btn-v3-gold {
  font-family:var(--font-display); font-size:1.1rem;
  letter-spacing:.15em; padding:.7rem 2.5rem;
  background:var(--gold); color:var(--dark);
  border:2px solid var(--gold);
  display:inline-flex; align-items:center; gap:.8rem;
  position:relative; overflow:hidden;
  transition:color .35s var(--ease);
}
.btn-v3-gold::before {
  content:''; position:absolute; inset:0;
  background:var(--dark); transform:translateY(101%);
  transition:transform .4s var(--ease);
}
.btn-v3-gold:hover { color:var(--gold); }
.btn-v3-gold:hover::before { transform:translateY(0); }
.btn-v3-gold span,.btn-v3-gold i { position:relative; z-index:1; }
.btn-v3-ghost {
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.4); display:flex; align-items:center; gap:.8rem;
  transition:color .3s;
}
.btn-v3-ghost .arr { width:40px; height:1px; background:currentColor; transition:width .4s; }
.btn-v3-ghost:hover { color:var(--gold); }
.btn-v3-ghost:hover .arr { width:64px; }
.hero-scroll {
  position:absolute; bottom:3rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  z-index:3;
  opacity:0; animation:hFadeUp .7s 1.2s forwards;
}
.hero-scroll span { font-size:.52rem; letter-spacing:.45em; text-transform:uppercase; color:rgba(255,255,255,.3); }
.scroll-line { width:1px; height:55px; background:linear-gradient(to bottom, var(--gold), transparent); animation:scrollAnim 2s ease-in-out infinite; }
@keyframes scrollAnim { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes hFadeUp {
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

/* =========================================
   MARQUEE
========================================= */
.marquee-wrap {
  background:var(--dark3); border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  padding:.7rem 0; overflow:hidden;
}
.marquee-inner {
  display:flex; white-space:nowrap;
  animation:marqueeRun 28s linear infinite;
}
.m-item {
  display:inline-flex; align-items:center; gap:2rem;
  padding:0 2rem; font-family:var(--font-display);
  font-size:1.1rem; letter-spacing:.1em;
  color:rgba(255,255,255,.5);
}
.m-item .dot { width:4px; height:4px; background:var(--gold); border-radius:50%; }
@keyframes marqueeRun { to { transform:translateX(-50%); } }

/* =========================================
   ABOUT
========================================= */
#about {
  background:var(--dark2);
  padding:10rem 4rem;
  position:relative;
  border-top:1px solid var(--border2);
}
.about-inner {
  max-width:1300px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:8rem; align-items:center;
}
.about-left { position:relative; }
.about-main-img {
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(30%) contrast(1.1);
  border:1px solid var(--border2);
  transition:filter .6s;
}
.about-main-img:hover { filter:grayscale(0%); }
.about-count-badge {
  position:absolute; bottom:-2rem; right:-2rem;
  background:var(--gold); color:var(--dark);
  padding:2rem 2.5rem; text-align:center; z-index:2;
}
.about-count-badge .n {
  font-family:var(--font-display); font-size:3.5rem;
  line-height:1; letter-spacing:.05em;
}
.about-count-badge .l {
  font-size:.55rem; letter-spacing:.35em; text-transform:uppercase;
  margin-top:.4rem; opacity:.7;
}
.about-right { padding-left:2rem; }
.sec-eyebrow {
  font-size:.58rem; letter-spacing:.55em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem;
}
.sec-eyebrow::before { content:''; width:28px; height:1px; background:var(--gold); }
.sec-title {
  font-family:var(--font-display);
  font-size:clamp(2.8rem,5vw,6rem);
  color:var(--white); line-height:.95;
  letter-spacing:.02em; margin-bottom:2rem;
}
.sec-title .em { color:var(--gold); }
.sec-rule { width:48px; height:2px; background:var(--gold); margin-bottom:2.5rem; }
.sec-body {
  font-family:var(--font-serif); font-size:.92rem;
  color:rgba(255,255,255,.5); line-height:2;
  margin-bottom:1.2rem;
}
.about-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin-top:3.5rem;
  border-top:1px solid var(--border2);
  padding-top:2.5rem;
}
.a-stat { border-right:1px solid var(--border2); padding-right:1.5rem; margin-right:1.5rem; }
.a-stat:last-child { border-right:none; }
.a-stat-n {
  font-family:var(--font-display); font-size:3rem;
  color:var(--white); line-height:1;
}
.a-stat-n .suf { color:var(--gold); font-size:.6em; }
.a-stat-l {
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gray); margin-top:.5rem;
}

/* =========================================
   SERVICES
========================================= */
#services {
  background:var(--dark); padding:10rem 4rem;
  position:relative;
  border-top:1px solid var(--border2);
}
.svc-inner { max-width:1300px; margin:0 auto; }
.svc-head {
  display:flex; align-items:flex-end;
  justify-content:space-between; margin-bottom:5rem;
}
.svc-head-right {
  font-family:var(--font-serif); font-style:italic;
  font-size:.9rem; color:var(--gray); max-width:280px;
  line-height:1.8; text-align:right;
}
.svc-list { display:flex; flex-direction:column; }
.svc-row {
  display:grid; grid-template-columns:80px 1fr 1fr 120px;
  align-items:center; gap:3rem;
  padding:2.5rem 0;
  border-top:1px solid var(--border2);
  position:relative; overflow:hidden;
  transition:background .4s;
  cursor:none;
}
.svc-row:last-child { border-bottom:1px solid var(--border2); }
.svc-row::before {
  content:''; position:absolute; inset:0;
  background:var(--gold-dim); transform:scaleX(0);
  transform-origin:left; transition:transform .5s var(--ease);
}
.svc-row:hover::before { transform:scaleX(1); }
.svc-row > * { position:relative; z-index:1; }
.svc-row-num {
  font-family:var(--font-display); font-size:1.8rem;
  color:var(--border); letter-spacing:.05em;
  transition:color .4s;
}
.svc-row:hover .svc-row-num { color:var(--gold); }
.svc-row-name {
  font-family:var(--font-display); font-size:2rem;
  color:var(--white); letter-spacing:.04em;
  transition:color .4s;
}
.svc-row:hover .svc-row-name { color:var(--gold-light); }
.svc-row-desc {
  font-size:.82rem; color:rgba(255,255,255,.45);
  line-height:1.7; font-weight:300;
}
.svc-row-link {
  display:flex; align-items:center; justify-content:flex-end; gap:.6rem;
  font-size:.6rem; letter-spacing:.25em; text-transform:uppercase;
  color:transparent; transition:color .4s;
}
.svc-row:hover .svc-row-link { color:var(--gold); }
.svc-row-link i { transition:transform .3s; }
.svc-row:hover .svc-row-link i { transform:translateX(4px); }

/* =========================================
   PORTFOLIO
========================================= */
#portfolio {
  background:var(--dark2); padding:10rem 0;
  border-top:1px solid var(--border2);
}
.port-inner { max-width:1300px; margin:0 auto; padding:0 4rem; }
.port-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3.5rem; }
.filter-bar { display:flex; gap:0; flex-wrap:wrap; }
.fb {
  font-size:.58rem; letter-spacing:.28em; text-transform:uppercase;
  padding:.55rem 1.4rem; border:1px solid var(--border2);
  background:none; color:var(--gray);
  transition:all .3s; cursor:none;
  font-family:var(--font-body); margin-right:-1px;
}
.fb:hover,.fb.active { background:var(--gold); border-color:var(--gold); color:var(--dark); z-index:1; }

/* Portfolio: explicit 12-col grid */
.port-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:340px 340px;
  gap:4px;
}
.pi { position:relative; overflow:hidden; cursor:none; }
.pi:nth-child(1) { grid-column:1/6;  grid-row:1/3; }
.pi:nth-child(2) { grid-column:6/10; grid-row:1/2; }
.pi:nth-child(3) { grid-column:10/13;grid-row:1/2; }
.pi:nth-child(4) { grid-column:6/10; grid-row:2/3; }
.pi:nth-child(5) { grid-column:10/13;grid-row:2/3; }
.pi img {
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(40%) brightness(.85);
  transition:transform .8s var(--ease), filter .5s;
}
.pi:hover img { transform:scale(1.07); filter:grayscale(0%) brightness(1); }
.pi-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.92) 0%, transparent 55%);
  opacity:0; transition:opacity .4s;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:2rem;
}
.pi:hover .pi-overlay { opacity:1; }
.pi-cat {
  font-size:.52rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.4rem;
}
.pi-name {
  font-family:var(--font-display); font-size:1.9rem;
  color:var(--white); letter-spacing:.06em; line-height:1;
}
.pi-zoom {
  position:absolute; top:1rem; right:1rem;
  width:40px; height:40px; background:var(--gold);
  border:none; color:var(--dark); font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-6px);
  transition:opacity .3s, transform .3s; cursor:none;
}
.pi:hover .pi-zoom { opacity:1; transform:translateY(0); }
.pi.hidden { display:none; }

/* =========================================
   PROCESS
========================================= */
#process {
  background:var(--dark); padding:10rem 4rem;
  border-top:1px solid var(--border2);
}
.proc-inner { max-width:1300px; margin:0 auto; }
.proc-head { text-align:center; margin-bottom:6rem; }
.proc-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
}
.proc-col {
  padding:3rem 2.5rem;
  border-left:1px solid var(--border2);
  position:relative;
  transition:background .4s;
}
.proc-col:last-child { border-right:1px solid var(--border2); }
.proc-col:hover { background:var(--dark3); }
.proc-col-num {
  font-family:var(--font-display);
  font-size:5rem; color:var(--border);
  line-height:1; margin-bottom:2rem;
  transition:color .4s;
}
.proc-col:hover .proc-col-num { color:var(--gold); }
.proc-col-title {
  font-family:var(--font-display); font-size:1.6rem;
  color:var(--white); letter-spacing:.05em;
  margin-bottom:1.2rem; line-height:1.1;
}
.proc-col-text {
  font-size:.82rem; color:rgba(255,255,255,.48);
  line-height:1.85; font-weight:300;
}
.proc-col-icon {
  position:absolute; top:2rem; right:2rem;
  width:36px; height:36px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:.85rem;
  opacity:0; transition:opacity .4s;
}
.proc-col:hover .proc-col-icon { opacity:1; }

/* =========================================
   STATS BAND
========================================= */
#stats {
  background:var(--gold); padding:4rem;
}
.stats-inner {
  max-width:1300px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
}
.stat-v3 {
  text-align:center; padding:1rem 2rem;
  border-right:1px solid rgba(10,10,10,.15);
}
.stat-v3:last-child { border-right:none; }
.stat-v3-n {
  font-family:var(--font-display);
  font-size:clamp(3rem,6vw,6rem);
  color:var(--dark); line-height:1;
  display:flex; align-items:baseline; justify-content:center; gap:.1rem;
}
.stat-v3-n .suf { font-size:.55em; color:rgba(10,10,10,.5); }
.stat-v3-l {
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(10,10,10,.55); margin-top:.6rem;
}

/* =========================================
   TESTIMONIALS
========================================= */
#testimonials {
  background:var(--dark2); padding:10rem 4rem;
  border-top:1px solid var(--border2);
  position:relative;
}
.testi-inner { max-width:1300px; margin:0 auto; }
.testi-grid {
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:7rem; align-items:center;
}
.testi-left-head { margin-bottom:4rem; }
.big-quote {
  font-family:var(--font-display); font-size:10rem;
  color:var(--gold); opacity:.15; line-height:.6;
  margin-bottom:1.5rem;
}
#t-text {
  font-family:var(--font-serif); font-style:italic;
  font-size:1.25rem; color:rgba(255,255,255,.7);
  line-height:1.8; margin-bottom:2rem;
  transition:opacity .4s;
}
.t-author { display:flex; align-items:center; gap:1.2rem; }
.t-avatar {
  width:52px; height:52px; border-radius:50%;
  object-fit:cover; border:1px solid var(--gold);
}
.t-name { font-family:var(--font-display); font-size:1.2rem; color:var(--white); letter-spacing:.06em; }
.t-role { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-top:.3rem; }
.testi-cards { display:flex; flex-direction:column; gap:1px; background:var(--border2); }
.t-card {
  background:var(--dark); padding:2rem 2.5rem;
  display:grid; grid-template-columns:auto 1fr;
  gap:1.5rem; align-items:start; cursor:none;
  border-left:2px solid transparent;
  transition:all .35s;
}
.t-card:hover, .t-card.active { background:var(--dark3); border-left-color:var(--gold); }
.t-card-num {
  font-family:var(--font-display); font-size:1.8rem;
  color:var(--border); transition:color .3s;
}
.t-card:hover .t-card-num, .t-card.active .t-card-num { color:var(--gold); }
.t-card-quote {
  font-family:var(--font-serif); font-style:italic;
  font-size:.85rem; color:rgba(255,255,255,.4);
  line-height:1.7; margin-bottom:1rem;
}
.t-card-meta { display:flex; align-items:center; gap:.8rem; }
.t-card-img {
  width:30px; height:30px; border-radius:50%;
  object-fit:cover; border:1px solid var(--gold);
}
.t-card-who { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }

/* =========================================
   CONTACT
========================================= */
#contact {
  background:var(--dark); padding:10rem 4rem;
  border-top:1px solid var(--border2);
  position:relative;
}
#contact::before {
  content:'CONTACT';
  position:absolute; right:-2rem; top:50%;
  transform:translateY(-50%) rotate(90deg);
  font-family:var(--font-display);
  font-size:18rem; color:rgba(201,169,110,.025);
  letter-spacing:.05em; pointer-events:none; line-height:1;
}
.con-inner { max-width:1300px; margin:0 auto; }
.con-grid {
  display:grid; grid-template-columns:1fr 1.5fr;
  gap:8rem;
}
.con-left {}
.con-big {
  font-family:var(--font-display);
  font-size:clamp(3rem,6vw,7.5rem);
  color:var(--white); line-height:.92;
  letter-spacing:.02em; margin-bottom:2.5rem;
}
.con-big .gw { color:var(--gold); }
.con-desc {
  font-family:var(--font-serif); font-style:italic;
  font-size:.92rem; color:rgba(255,255,255,.4);
  line-height:1.9; margin-bottom:3.5rem;
}
.con-detail {
  display:flex; align-items:flex-start; gap:1.2rem; margin-bottom:1.8rem;
}
.con-ic {
  width:38px; height:38px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:.85rem; flex-shrink:0;
}
.con-lbl {
  font-size:.52rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gray); margin-bottom:.3rem;
}
.con-val { font-size:.88rem; color:rgba(255,255,255,.65); font-weight:300; }
.con-form {}
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:0; }
.cf-field { margin-bottom:2rem; position:relative; }
.cf-label {
  display:block; font-size:.52rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--gray); margin-bottom:.8rem;
}
.cf-input {
  width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--border2); color:var(--white);
  font-family:var(--font-body); font-size:.9rem; font-weight:300;
  padding:.8rem 0; outline:none; transition:border-color .3s;
}
.cf-input:focus { border-color:var(--gold); }
.cf-input::placeholder { color:rgba(255,255,255,.42); }
.cf-input option { background:var(--dark); }
textarea.cf-input { resize:none; height:110px; }
.cf-submit {
  font-family:var(--font-display); font-size:1.2rem;
  letter-spacing:.15em; padding:.8rem 3rem;
  background:transparent; border:1px solid var(--gold);
  color:var(--gold); display:inline-flex; align-items:center; gap:1rem;
  position:relative; overflow:hidden;
  transition:color .4s var(--ease); cursor:none;
  margin-top:.5rem;
}
.cf-submit::before {
  content:''; position:absolute; inset:0;
  background:var(--gold); transform:translateX(-101%);
  transition:transform .45s var(--ease);
}
.cf-submit:hover { color:var(--dark); }
.cf-submit:hover::before { transform:translateX(0); }
.cf-submit span,.cf-submit i { position:relative; z-index:1; }
#cf-success {
  display:none; margin-top:1.2rem;
  font-size:.72rem; letter-spacing:.18em; color:var(--gold);
}

/* =========================================
   FOOTER
========================================= */
footer {
  background:#060606;
  border-top:1px solid var(--border2);
  padding:5rem 4rem 2.5rem;
}
.ft-inner { max-width:1300px; margin:0 auto; }
.ft-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:5rem; padding-bottom:4rem;
  border-bottom:1px solid var(--border2);
}
.ft-brand {
  font-family:var(--font-display); font-size:3rem;
  letter-spacing:.15em; color:var(--white); line-height:1;
}
.ft-tagline {
  font-size:.55rem; letter-spacing:.45em; text-transform:uppercase;
  color:var(--gold); margin-top:.5rem; margin-bottom:1.2rem;
}
.ft-desc { font-size:.8rem; color:rgba(255,255,255,.42); line-height:1.9; font-weight:300; }
.ft-h {
  font-family:var(--font-display); font-size:.95rem;
  letter-spacing:.15em; color:rgba(255,255,255,.5);
  margin-bottom:1.5rem;
}
.ft-links li { margin-bottom:.8rem; }
.ft-links a {
  font-size:.78rem; color:rgba(255,255,255,.42);
  transition:color .3s; font-weight:300;
  display:flex; align-items:center; gap:.5rem;
}
.ft-links a::before { content:'—'; font-size:.6rem; color:var(--border); }
.ft-links a:hover { color:var(--gold); }
.ft-nl-wrap { display:flex; border-bottom:1px solid var(--border2); }
.ft-nl-input {
  flex:1; background:none; border:none; color:var(--white);
  font-family:var(--font-body); font-size:.82rem; padding:.8rem 0;
  outline:none; font-weight:300;
}
.ft-nl-input::placeholder { color:rgba(255,255,255,.42); }
.ft-nl-btn {
  background:none; border:none; color:var(--gold);
  font-size:1rem; cursor:pointer; transition:color .3s;
}
.ft-nl-btn:hover { color:var(--white); }
.ft-bottom {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.5rem; padding-top:2.5rem;
}
.ft-copy { font-size:.65rem; letter-spacing:.1em; color:rgba(255,255,255,.4); }
.ft-legal { display:flex; gap:2rem; }
.ft-legal a { font-size:.62rem; letter-spacing:.1em; color:rgba(255,255,255,.42) !important; transition:color .3s; }
.ft-legal a:hover { color:var(--gold); }
.ft-soc { display:flex; gap:.6rem; }
.ft-soc a {
  width:30px; height:30px; border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.25); font-size:.75rem; transition:all .3s;
}
.ft-soc a:hover { border-color:var(--gold); color:var(--gold); }

/* =========================================
   LIGHTBOX
========================================= */
#lightbox {
  position:fixed; inset:0; z-index:99990;
  background:rgba(0,0,0,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all .4s;
}
#lightbox.on { opacity:1; visibility:visible; }
#lb-img { max-width:88vw; max-height:84vh; object-fit:contain; border:1px solid var(--border2); }
#lb-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:1px solid rgba(255,255,255,.15);
  color:var(--white); width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:none; transition:all .3s;
}
#lb-close:hover { border-color:var(--gold); color:var(--gold); }

/* =========================================
   SCROLL TOP
========================================= */
#scrollTop {
  position:fixed; bottom:2rem; right:2rem; z-index:9000;
  width:42px; height:42px; background:var(--dark3);
  border:1px solid var(--border); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:none;
  opacity:0; visibility:hidden; transition:all .4s;
}
#scrollTop.on { opacity:1; visibility:visible; }
#scrollTop:hover { background:var(--gold); color:var(--dark); border-color:var(--gold); }

/* =========================================
   SCROLL REVEAL
========================================= */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.show { opacity:1; transform:none; }
.reveal[data-d="1"] { transition-delay:.1s; }
.reveal[data-d="2"] { transition-delay:.2s; }
.reveal[data-d="3"] { transition-delay:.3s; }
.reveal[data-d="4"] { transition-delay:.4s; }

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width:1100px) {
  #nav { padding:1.4rem 2rem; }
  #nav.scrolled { padding:.9rem 2rem; }
  .nav-menu { display:none; }
  .nav-btn { display:none; }
  .ham-btn { display:flex; }
  #hero { padding:0 2rem 5rem; }
  .hero-big-title { font-size:clamp(4rem,18vw,10rem); }
  .hero-bottom { flex-direction:column; align-items:flex-start; gap:2rem; }
  .about-inner { grid-template-columns:1fr; gap:4rem; }
  .about-count-badge { bottom:-1rem; right:0; }
  .svc-row { grid-template-columns:60px 1fr; gap:1.5rem; }
  .svc-row-desc { display:none; }
  .svc-row-link { display:none; }
  .port-grid { grid-template-columns:1fr 1fr; grid-template-rows:260px 260px 260px; }
  .pi:nth-child(1) { grid-column:1/2; grid-row:1/3; }
  .pi:nth-child(2) { grid-column:2/3; grid-row:1/2; }
  .pi:nth-child(3) { grid-column:2/3; grid-row:2/3; }
  .pi:nth-child(4) { grid-column:1/2; grid-row:3/4; }
  .pi:nth-child(5) { grid-column:2/3; grid-row:3/4; }
  .proc-grid { grid-template-columns:repeat(2,1fr); gap:0; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .stat-v3:nth-child(2) { border-right:none; }
  .testi-grid { grid-template-columns:1fr; gap:4rem; }
  .con-grid { grid-template-columns:1fr; gap:4rem; }
  .ft-top { grid-template-columns:repeat(2,1fr); gap:3rem; }
  #about, #services, #portfolio, #process, #testimonials, #contact { padding-left:2rem; padding-right:2rem; }
  #stats { padding:3rem 2rem; }
  footer { padding:4rem 2rem 2rem; }
  .soc-bar { display:none; }
  #contact::before { display:none; }
  .sec-label { display:none; }
  .con-inner, .port-inner, .svc-inner, .proc-inner, .testi-inner, .about-inner, .stats-inner, .ft-inner { padding:0; }
}
@media (max-width:640px) {
  .hero-big-title { font-size:clamp(3.5rem,22vw,8rem); }
  .hero-bottom { gap:1.5rem; }
  .svc-row { grid-template-columns:50px 1fr; gap:1rem; }
  .port-grid { grid-template-columns:1fr; grid-template-rows:repeat(5,220px); }
  .pi:nth-child(1),.pi:nth-child(2),.pi:nth-child(3),
  .pi:nth-child(4),.pi:nth-child(5) { grid-column:1/2; grid-row:auto; }
  .proc-grid { grid-template-columns:1fr; }
  .proc-col:last-child { border-right:none; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .ft-top { grid-template-columns:1fr; gap:2.5rem; }
  .ft-bottom { flex-direction:column; text-align:center; }
  .cf-row { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:repeat(3,1fr); }
}