/* =========================================================
   PLATINUM DEVELOPERS GLOBAL — STYLESHEET (DARK LUXURY)
   ========================================================= */

/* ---------- 1. VARIABLES ---------- */
:root{
  /* deep dark tones */
  --ink:#0a0908;
  --ink-soft:#14110e;
  --ink-mid:#1c1815;
  --ink-elev:#241f1a;
  --ink-hover:#2c2620;

  /* warm light tones */
  --cream:#efe9dd;
  --cream-2:#d8d0c2;
  --muted:#9a9086;
  --muted-dim:#6b635a;

  /* gold */
  --gold:#c9a961;
  --gold-light:#e0c286;
  --gold-deep:#a48a4a;

  /* lines */
  --line:rgba(201,169,97,.16);
  --line-soft:rgba(239,233,221,.08);
  --line-strong:rgba(201,169,97,.32);

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --container:1240px;
  --header-h:88px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-slow:cubic-bezier(.16,.84,.44,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  color:var(--cream);
  background-color:var(--ink);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201,169,97,.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201,169,97,.04), transparent 60%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* subtle grain texture overlay */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.66 0 0 0 0 0.38 0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;
}

img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;font-size:inherit;}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--cream);
}

h1{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:300;}
h2{font-size:clamp(2rem,4vw,3.2rem);}
h3{font-size:1.4rem;line-height:1.3;}

p{margin-bottom:1.1em;}
p:last-child{margin-bottom:0;}
em{font-style:italic;color:var(--gold-light);}

::selection{background:var(--gold);color:var(--ink);}

/* ---------- 4. LAYOUT ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
  position:relative;
  z-index:2;
}

.section{
  padding:clamp(72px,10vw,140px) 0;
  position:relative;
}

/* section dividers - thin gold hairline */
.section + .section{position:relative;}

/* section backgrounds — different dark tones for depth */
.bg-cream{
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 12%, var(--ink-soft) 88%, var(--ink) 100%);
  position:relative;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}

.bg-ink{
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(201,169,97,.06), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, #0d0c0a 100%);
  color:var(--cream);
}

.bg-ink .section-title{color:var(--cream);}

.grid{display:grid;gap:28px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.center-cta{text-align:center;margin-top:64px;}

/* ---------- 5. SMALL ELEMENTS ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
}
.eyebrow::before{
  content:'';
  width:26px;height:1px;
  background:var(--gold);
  display:block;
}

.section-title{
  margin-bottom:24px;
  max-width:18ch;
  color:var(--cream);
}

.section-head{
  margin-bottom:64px;
  max-width:640px;
}

.section-lead{
  color:var(--muted);
  font-size:1.05rem;
  max-width:56ch;
}

.on-dark .section-lead,
.bg-ink .section-lead{color:var(--muted);}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid var(--gold);
  padding-bottom:5px;
  transition:.3s var(--ease);
}
.link-arrow span{transition:transform .3s var(--ease);}
.link-arrow:hover{color:var(--gold-light);border-color:var(--gold-light);}
.link-arrow:hover span{transform:translateX(6px);}

/* ---------- 6. BUTTONS ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 34px;
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:.4s var(--ease);
  white-space:nowrap;
  overflow:hidden;
  z-index:1;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gold-light);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
  z-index:-1;
}
.btn:hover::before{transform:translateY(0);}

.btn-gold{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.btn-gold:hover{color:var(--ink);border-color:var(--gold-light);}

.btn-outline{
  background:transparent;
  color:var(--cream);
  border-color:rgba(239,233,221,.35);
}
.btn-outline::before{background:var(--cream);}
.btn-outline:hover{color:var(--ink);border-color:var(--cream);}

.btn-dark{
  background:transparent;
  color:var(--gold);
  border-color:var(--gold);
}
.btn-dark::before{background:var(--gold);}
.btn-dark:hover{color:var(--ink);}

/* ---------- 7. HEADER ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  transition:.4s var(--ease);
  border-bottom:1px solid transparent;
  background:linear-gradient(180deg, rgba(10,9,8,.6), transparent);
}

.site-header.scrolled{
  height:74px;
  background:rgba(10,9,8,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

/* --- brand --- */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:var(--serif);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.06em;
  transition:.4s var(--ease);
  position:relative;
}
.brand-mark::after{
  content:'';
  position:absolute;
  inset:3px;
  border:1px solid rgba(201,169,97,.3);
  transition:.4s var(--ease);
}
.brand:hover .brand-mark{background:rgba(201,169,97,.1);}
.brand:hover .brand-mark::after{inset:5px;}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.brand-text strong{
  font-family:var(--serif);
  font-size:1.02rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--cream);
  transition:color .4s var(--ease);
}
.brand-text em{
  font-style:normal;
  font-size:.6rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  transition:color .4s var(--ease);
}

/* --- nav --- */
.nav{
  display:flex;
  align-items:center;
  gap:38px;
}

.nav-link{
  position:relative;
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.82;
  transition:.35s var(--ease);
  padding:6px 0;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-link:hover::after,
.nav-link.active::after{width:100%;}
.nav-link:hover,
.nav-link.active{color:var(--gold);opacity:1;}

.nav-cta{padding:12px 24px;font-size:.7rem;}

/* --- mobile toggle --- */
.nav-toggle{
  display:none;
  width:40px;height:40px;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  z-index:1100;
}
.nav-toggle span{
  display:block;
  width:26px;height:1.5px;
  background:var(--cream);
  transition:.35s var(--ease);
  transform-origin:center;
}

.nav-toggle.open span{background:var(--gold);}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink);
}

.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.08);
  animation:heroZoom 16s var(--ease-slow) forwards;
  filter:saturate(.85) contrast(1.05);
}
@keyframes heroZoom{to{transform:scale(1);}}

.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 90% 80% at 20% 40%, rgba(10,9,8,.4), transparent 65%),
    linear-gradient(105deg,
      rgba(10,9,8,.94) 0%,
      rgba(10,9,8,.78) 40%,
      rgba(10,9,8,.42) 70%,
      rgba(10,9,8,.72) 100%);
}

/* gold hairline under hero content */
.hero-content{
  position:relative;
  z-index:2;
  padding-top:var(--header-h);
  max-width:920px;
}

.hero-title{
  color:var(--cream);
  font-weight:300;
  margin-bottom:28px;
  position:relative;
}
.hero-title::after{
  content:'';
  display:block;
  width:70px;height:1px;
  background:var(--gold);
  margin-top:34px;
}

.hero-lead{
  color:var(--cream-2);
  opacity:.85;
  font-size:1.12rem;
  max-width:52ch;
  margin-bottom:44px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.scroll-cue{
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:24px;height:44px;
  border:1px solid rgba(201,169,97,.4);
  border-radius:14px;
  display:grid;
  place-items:start center;
  padding-top:9px;
}
.scroll-cue span{
  display:block;
  width:3px;height:8px;
  border-radius:2px;
  background:var(--gold);
  animation:cue 1.9s infinite;
}
@keyframes cue{
  0%{transform:translateY(0);opacity:1;}
  70%{transform:translateY(15px);opacity:0;}
  100%{transform:translateY(0);opacity:0;}
}

/* ---------- 9. PAGE HERO ---------- */
.page-hero{
  position:relative;
  min-height:58vh;
  display:flex;
  align-items:flex-end;
  padding-bottom:80px;
  padding-top:calc(var(--header-h) + 60px);
  background:var(--ink);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.35;
  filter:saturate(.7) contrast(1.05);
}
.page-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 100% at 30% 100%, rgba(10,9,8,.4), transparent 70%),
    linear-gradient(to top, rgba(10,9,8,.98) 0%, rgba(10,9,8,.72) 50%, rgba(10,9,8,.55) 100%);
}
.page-hero .container{position:relative;z-index:2;}
.page-hero h1{color:var(--cream);margin-bottom:18px;max-width:20ch;}
.page-hero p{color:var(--cream-2);opacity:.75;max-width:56ch;}

/* ---------- 10. INTRO ---------- */
.intro-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(40px,7vw,96px);
  align-items:center;
}

.intro-media{
  position:relative;
  padding:20px;
}
.intro-media::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:60%;height:60%;
  border-top:1px solid var(--gold);
  border-left:1px solid var(--gold);
}
.intro-media::after{
  content:'';
  position:absolute;
  bottom:0;right:0;
  width:60%;height:60%;
  border-bottom:1px solid var(--gold);
  border-right:1px solid var(--gold);
}
.intro-media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:saturate(.9) contrast(1.02);
}

.intro-badge{
  position:absolute;
  bottom:24px;
  right:24px;
  background:var(--gold);
  color:var(--ink);
  padding:18px 26px;
  display:flex;
  flex-direction:column;
  line-height:1.2;
  z-index:2;
}
.badge-num{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.02em;
}
.badge-txt{
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:.85;
}

.intro-text p{color:var(--muted);}
.intro-text .section-title{max-width:16ch;}

/* ---------- 11. CARDS ---------- */
.card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(28,24,21,.6), rgba(20,17,14,.6));
  padding:44px 34px;
  border:1px solid var(--line-soft);
  transition:.5s var(--ease);
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transition:width .6s var(--ease);
}
.card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(201,169,97,.08), transparent 60%);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.card:hover::before{width:100%;}
.card:hover::after{opacity:1;}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--line);
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.8),
    0 0 0 1px rgba(201,169,97,.08);
}

.card-num{
  display:block;
  font-family:var(--serif);
  font-size:1.8rem;
  color:var(--gold);
  margin-bottom:22px;
  font-style:italic;
}

.card h3{margin-bottom:14px;color:var(--cream);}
.card p{color:var(--muted);font-size:.95rem;}

/* ---------- 12. PROCESS ---------- */
.process-step{
  padding-top:32px;
  border-top:1px solid var(--line);
  position:relative;
  transition:.4s var(--ease);
}
.process-step::before{
  content:'';
  position:absolute;
  top:-1px;left:0;
  width:0;height:1px;
  background:var(--gold);
  transition:width .5s var(--ease);
}
.process-step:hover::before{width:100%;}

.step-num{
  display:block;
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.22em;
  color:var(--gold);
  margin-bottom:20px;
  font-style:italic;
}
.process-step h3{color:var(--cream);margin-bottom:14px;}
.process-step p{color:var(--muted);font-size:.95rem;}

/* ---------- 13. STATS ---------- */
.stats{
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(201,169,97,.05), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, #0d0c0a 50%, var(--ink) 100%);
  padding:clamp(60px,8vw,100px) 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.stats::before,
.stats::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:60px;height:1px;
  background:var(--gold);
  opacity:.5;
}
.stats::before{top:0;}
.stats::after{bottom:0;}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  text-align:center;
  position:relative;
  z-index:2;
}
.stat{
  position:relative;
  padding:0 12px;
}
.stat + .stat::before{
  content:'';
  position:absolute;
  left:-16px;top:20%;
  height:60%;width:1px;
  background:var(--line);
}

.stat strong{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  font-weight:500;
  color:var(--gold);
  margin-bottom:10px;
  font-style:italic;
  letter-spacing:.01em;
}
.stat span{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 14. GALLERY STRIP (home) ---------- */
.gallery-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.strip-item{
  position:relative;
  overflow:hidden;
  display:block;
}
.strip-item img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .9s var(--ease);
  filter:saturate(.85);
}
.strip-item::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to top, rgba(10,9,8,.92), rgba(10,9,8,.15) 55%, transparent);
  opacity:.9;
  transition:.5s var(--ease);
}
.strip-item::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(circle at 50% 60%, rgba(201,169,97,.18), transparent 70%);
  opacity:0;
  transition:opacity .55s var(--ease);
  mix-blend-mode:overlay;
}
.strip-item:hover img{transform:scale(1.08);filter:saturate(1);}
.strip-item:hover::after{opacity:1;}

.strip-cap{
  position:absolute;
  left:22px;bottom:22px;
  z-index:3;
  color:var(--cream);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding-left:18px;
}
.strip-cap::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  width:12px;height:1px;
  background:var(--gold);
  transform:translateY(-50%);
}

/* ---------- 15. CTA BAND ---------- */
.cta-band{
  background:
    radial-gradient(ellipse 60% 100% at 80% 50%, rgba(201,169,97,.1), transparent 60%),
    linear-gradient(135deg, var(--ink-mid) 0%, var(--ink-soft) 100%);
  color:var(--cream);
  padding:clamp(70px,9vw,120px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute;
  top:-2px;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  flex-wrap:wrap;
}
.cta-band h2{color:var(--cream);margin-bottom:12px;}
.cta-band p{color:var(--muted);}
.cta-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- 16. FOOTER ---------- */
.site-footer{
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(201,169,97,.05), transparent 60%),
    #070605;
  color:var(--muted);
  padding:88px 0 32px;
  font-size:.9rem;
  position:relative;
  border-top:1px solid var(--line-soft);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:48px;
  padding-bottom:60px;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  z-index:2;
}
.footer-brand .brand-mark{margin-bottom:22px;}
.footer-brand h3{
  color:var(--cream);
  font-size:1.25rem;
  margin-bottom:16px;
}
.footer-brand p{font-size:.88rem;line-height:1.85;color:var(--muted);}

.footer-col h4{
  color:var(--gold);
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  margin-bottom:26px;
}
.footer-col ul li{margin-bottom:12px;line-height:1.6;color:var(--cream-2);opacity:.85;}
.footer-col ul a{transition:color .3s var(--ease),opacity .3s var(--ease);}
.footer-col ul a:hover{color:var(--gold);opacity:1;}
.footer-contact span{color:var(--cream);}

.footer-bottom{
  padding-top:28px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-size:.76rem;
  letter-spacing:.08em;
  color:var(--muted-dim);
  position:relative;
  z-index:2;
}

/* ---------- 17. GALLERY PAGE ---------- */
.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:56px;
}
.filter-btn{
  padding:11px 24px;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid var(--line);
  color:var(--muted);
  background:transparent;
  transition:.35s var(--ease);
}
.filter-btn:hover{border-color:var(--gold);color:var(--gold);}
.filter-btn.active{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:var(--ink-mid);
  border:1px solid var(--line-soft);
  transition:.5s var(--ease);
}
.gallery-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform .9s var(--ease), filter .5s var(--ease);
  filter:saturate(.85);
}
.gallery-item:hover{
  border-color:var(--line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.gallery-item:hover img{transform:scale(1.08);filter:saturate(1);}
.gallery-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(10,9,8,.92), rgba(10,9,8,.2) 60%, transparent),
    radial-gradient(circle at 50% 80%, rgba(201,169,97,.2), transparent 70%);
  opacity:0;
  transition:.5s var(--ease);
}
.gallery-item:hover::after{opacity:1;}

.gallery-item .gi-cap{
  position:absolute;
  inset:auto 24px 24px 24px;
  z-index:2;
  color:var(--cream);
  opacity:0;
  transform:translateY(14px);
  transition:.5s var(--ease);
  padding-left:16px;
}
.gallery-item .gi-cap::before{
  content:'';
  position:absolute;
  left:0;top:8px;
  width:8px;height:1px;
  background:var(--gold);
}
.gallery-item:hover .gi-cap{opacity:1;transform:translateY(0);}
.gi-cap strong{
  display:block;
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:500;
  color:var(--cream);
}
.gi-cap span{
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}

/* ---------- 18. LIGHTBOX ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  background:rgba(5,4,3,.97);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
}
.lightbox.open{display:flex;}
.lightbox img{
  max-width:min(1100px,90vw);
  max-height:82vh;
  object-fit:contain;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  border:1px solid var(--line);
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  color:var(--cream);
  font-size:1.6rem;
  line-height:1;
  padding:14px;
  transition:.3s var(--ease);
  background:rgba(10,9,8,.5);
  width:48px;height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-soft);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{
  color:var(--gold);
  border-color:var(--gold);
}
.lb-close{top:24px;right:24px;font-size:1.5rem;}
.lb-prev{left:24px;top:50%;transform:translateY(-50%);}
.lb-next{right:24px;top:50%;transform:translateY(-50%);}
.lb-caption{
  position:absolute;
  bottom:28px;left:0;right:0;
  text-align:center;
  color:var(--gold);
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
}

/* ---------- 19. CONTACT ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(40px,6vw,80px);
  align-items:start;
}

.contact-info-card{
  background:
    linear-gradient(180deg, rgba(28,24,21,.5), rgba(20,17,14,.5));
  padding:36px 32px;
  margin-bottom:18px;
  border:1px solid var(--line-soft);
  border-left:2px solid var(--gold);
  transition:.4s var(--ease);
}
.contact-info-card:hover{
  border-color:var(--line);
  border-left-color:var(--gold-light);
  transform:translateX(4px);
}
.contact-info-card h3{
  font-size:1rem;
  margin-bottom:18px;
  color:var(--gold);
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.contact-info-card p,
.contact-info-card a{
  display:block;
  font-size:.95rem;
  color:var(--cream-2);
  margin-bottom:8px;
  transition:color .3s var(--ease);
  word-break:break-word;
  opacity:.88;
}
.contact-info-card a:hover{color:var(--gold);opacity:1;}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
.form-field{display:flex;flex-direction:column;}
.form-field label{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.form-field input,
.form-field textarea,
.form-field select{
  padding:15px 18px;
  border:1px solid var(--line);
  background:rgba(28,24,21,.5);
  color:var(--cream);
  font-weight:300;
  transition:.3s var(--ease);
  border-radius:0;
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--muted-dim);}
.form-field textarea{resize:vertical;min-height:160px;}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(28,24,21,.8);
  box-shadow:0 0 0 3px rgba(201,169,97,.1);
}

.form-note{
  font-size:.82rem;
  color:var(--muted);
  margin-top:20px;
  line-height:1.7;
}

/* ---------- 20. REVEAL ---------- */
.js-ready .reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 1s var(--ease-slow), transform 1s var(--ease-slow);
}
.js-ready .reveal.visible{
  opacity:1;
  transform:none;
}

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px;}
  .gallery-strip{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .stat + .stat::before{display:none;}
}

@media (max-width:900px){
  :root{--header-h:76px;}

  .nav-toggle{display:flex;}

  .nav{
    position:fixed;
    inset:0;
    background:rgba(7,6,5,.98);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    flex-direction:column;
    justify-content:center;
    gap:26px;
    opacity:0;
    visibility:hidden;
    transition:.4s var(--ease);
    z-index:1050;
  }
  .nav.open{opacity:1;visibility:visible;}

  .nav-link{
    font-size:1.5rem;
    font-family:var(--serif);
    letter-spacing:.04em;
    text-transform:none;
    color:var(--cream);
    opacity:.9;
  }

  .nav-cta{margin-top:16px;font-size:.78rem;}

  .intro-grid{grid-template-columns:1fr;gap:56px;}
  .intro-badge{right:24px;}
  .contact-grid{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
}

@media (max-width:640px){
  body{font-size:16px;}
  body::before{opacity:.35;}

  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .gallery-strip{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;gap:40px;}
  .footer-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .hero-actions .btn{width:100%;}
  .cta-actions{width:100%;}
  .cta-actions .btn{width:100%;}
  .footer-bottom{flex-direction:column;}
}
/* =========================================================
   CONTACT FORM — AJAX STATES
   ========================================================= */

/* honeypot field — invisible to humans */
.hp-field{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;height:1px;
  overflow:hidden;
  opacity:0;
}

/* submit button loading state */
#submitBtn{
  position:relative;
  min-width:200px;
  transition:.4s var(--ease);
}
#submitBtn.loading{
  pointer-events:none;
  color:transparent;
}
#submitBtn.loading::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:18px;height:18px;
  margin:-9px 0 0 -9px;
  border:1.5px solid rgba(10,9,8,.3);
  border-top-color:var(--ink);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* status messages */
.form-status{
  margin-top:20px;
  padding:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:.45s var(--ease);
  font-size:.92rem;
  line-height:1.6;
  border-radius:0;
}
.form-status.show{
  max-height:300px;
  opacity:1;
  padding:18px 22px;
}

/* success */
.form-status.success{
  background:linear-gradient(135deg,
    rgba(201,169,97,.14) 0%,
    rgba(201,169,97,.06) 100%);
  border:1px solid var(--gold);
  border-left:3px solid var(--gold);
  color:var(--cream);
}
.form-status.success::before{
  content:'✓  ';
  color:var(--gold);
  font-weight:500;
  letter-spacing:.05em;
}

/* error */
.form-status.error{
  background:linear-gradient(135deg,
    rgba(184,90,90,.12) 0%,
    rgba(184,90,90,.05) 100%);
  border:1px solid rgba(184,90,90,.4);
  border-left:3px solid #b85a5a;
  color:#e6c9c9;
}
.form-status.error::before{
  content:'!  ';
  color:#d67a7a;
  font-weight:600;
  letter-spacing:.05em;
}

/* invalid field highlight */
.form-field input.invalid,
.form-field textarea.invalid{
  border-color:#b85a5a;
  background:rgba(184,90,90,.06);
}