/* =================================================================
   ADAMS UNISEX SALON — Premium CSS
   Ultra-luxury cinematic single-page website
   ================================================================= */

/* ─── CSS VARIABLES ──────────────────────────────────────────────── */
:root {
  --black:       #070707;
  --dark:        #0d0d0d;
  --charcoal:    #131313;
  --grey-deep:   #1a1a1a;
  --grey:        #272727;
  --grey-mid:    #333;
  --grey-light:  #444;
  --white:       #f4f2ee;
  --white-80:    rgba(244,242,238,.8);
  --white-50:    rgba(244,242,238,.5);
  --white-20:    rgba(244,242,238,.2);
  --white-08:    rgba(244,242,238,.08);
  --white-04:    rgba(244,242,238,.04);

  --green:       #1B4D20;
  --green-mid:   #75B935;
  --green-bright:#DCE32D;
  --green-glow:  rgba(117,185,53,.15);
  --green-faint: rgba(27,77,32,.25);

  --font-d:  'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Barlow Condensed', sans-serif;
  --font-b:  'Syne', sans-serif;

  --ease:  cubic-bezier(0.16,1,0.3,1);
  --easeP: cubic-bezier(0.77,0,0.175,1);

  --sp:  clamp(80px,10vw,130px);
  --cw:  min(1400px, 92vw);
}

/* ─── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:auto; scroll-padding-top: 90px; } 

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-b);
  overflow-x: hidden;
  cursor: none; /* Custom cursor fallback */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display:block; max-width:100%; object-fit:cover; }
a  { color:inherit; text-decoration:none; }
button { background:none; border:none; cursor:none; }

/* ─── LOADER ─────────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.loader-logo {
  font-family: var(--font-ui);
  font-size: clamp(44px,8vw,88px);
  font-weight: 200;
  letter-spacing: .4em;
  color: var(--white);
  opacity: 0; transform: translateY(20px);
  animation: ldReveal .8s var(--ease) .2s forwards;
}
.loader-sub {
  font-family: var(--font-ui);
  font-size: clamp(11px,1.2vw,13px);
  font-weight: 300;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--white-50);
  opacity: 0;
  animation: ldReveal .8s var(--ease) .5s forwards;
}
.loader-bar-wrap {
  width: min(280px,55vw);
  height: 1px;
  background: var(--grey);
  overflow: hidden;
  opacity: 0;
  animation: ldReveal .5s ease .7s forwards;
}
.loader-bar  { width:100%; height:100%; position:relative; }
.loader-fill {
  position:absolute; inset:0; left:0;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  width: 0;
  animation: ldBar 2s var(--ease) .9s forwards;
}
.loader-tagline {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing:.25em; text-transform:uppercase;
  color: var(--white-50);
  opacity:0;
  animation: ldReveal .8s var(--ease) 1.2s forwards;
}
@keyframes ldReveal { to { opacity:1; transform:translateY(0); } }
@keyframes ldBar    { to { width:100%; } }

/* ─── CUSTOM CURSOR ──────────────────────────────────────────────── */
.cursor-outer, .cursor-inner {
  position: fixed; border-radius:50%;
  pointer-events: none; z-index: 9998;
  mix-blend-mode: difference;
}
.cursor-outer {
  width:40px; height:40px;
  border: 1px solid rgba(255,255,255,.65);
  transform: translate(-50%,-50%);
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s;
  will-change: left,top, width, height;
}
.cursor-inner {
  width:5px; height:5px;
  background: var(--white);
  transform: translate(-50%,-50%);
}
.cursor-outer.hover { width:66px; height:66px; border-color:rgba(117,185,53,.8); }

/* Hide custom cursor on touch devices to fix mobile taps */
@media (hover: none) and (pointer: coarse) {
  .cursor-outer, .cursor-inner { display: none !important; }
  body, a, button, .svc-card { cursor: auto !important; }
}

/* ─── NAVIGATION ─────────────────────────────────────────────────── */
#navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  padding: 26px clamp(20px,5vw,60px);
  display: flex; align-items:center; justify-content:space-between;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  padding: 16px clamp(20px,5vw,60px);
  background: rgba(7, 7, 7, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--white-08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.nav-logo {
  font-family: var(--font-ui); font-size:20px;
  font-weight:300; letter-spacing:.4em; color:var(--white);
  transition: color .3s;
}
.nav-logo:hover { color: var(--green-mid); }
.nav-links {
  display: flex; gap:40px; align-items:center;
}
.nav-links a {
  font-family: var(--font-ui); font-size:12px;
  font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color: var(--white-50);
  position: relative;
  transition: color .3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--green-mid);
  transition: width .35s var(--ease);
}
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  font-family: var(--font-ui); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  padding: 12px 26px;
  border: 1px solid var(--green-mid);
  color: var(--green-mid);
  position:relative; overflow:hidden;
  transition: color .35s;
}
.nav-cta::before {
  content:''; position:absolute; inset:0;
  background:var(--green-mid);
  transform:scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease); z-index:0;
}
.nav-cta:hover { color:var(--black); }
.nav-cta:hover::before { transform:scaleX(1); }
.nav-cta span { position:relative; z-index:1; }

.hamburger {
  display:none; flex-direction:column; gap:7px; padding:4px;
  z-index: 1001;
}
.hamburger span {
  display:block; width:26px; height:1px; background:var(--white);
  transition: transform .35s var(--ease), opacity .3s;
  transform-origin: center;
}
.hamburger.open span:first-child { transform: translateY(4px) rotate(45deg); }
.hamburger.open span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ─── MOBILE MENU ────────────────────────────────────────────────── */
.mobile-menu {
  position:fixed; inset:0; z-index:990;
  background:var(--black);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
  transform:translateX(100%);
  transition:transform .65s var(--ease);
}
.mobile-menu.open { transform:translateX(0); }
.mm-inner {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:100%;
}
.mm-link {
  font-family: var(--font-d);
  font-size: clamp(36px,8vw,60px);
  font-weight: 300;
  color: var(--white-50);
  padding: 12px 0;
  transition: color .3s;
  letter-spacing:-.01em;
}
.mm-link:hover { color:var(--white); }
.mm-cta {
  margin-top:32px;
  font-family:var(--font-ui); font-size:13px;
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  padding:16px 36px; border:1px solid var(--green);
  color:var(--green-mid);
  transition: background .3s, color .3s;
}
.mm-cta:hover { background:var(--green); color:var(--white); }
.mm-footer {
  position:absolute; bottom:32px;
  font-family:var(--font-ui); font-size:11px;
  letter-spacing:.25em; text-transform:uppercase; color:var(--grey-light);
}

/* ─── BUTTONS ────────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:14px; justify-content: center;
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding: 17px 36px;
  background: var(--green);
  color:var(--white);
  border: 1px solid var(--green);
  position:relative; overflow:hidden;
  transition: color .4s, border-color .4s;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background: var(--green-mid);
  transform:scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease); z-index:0;
}
.btn-primary:hover { color:var(--black); border-color:var(--green-mid); }
.btn-primary:hover::before { transform:scaleX(1); }
.btn-primary span, .btn-primary svg { position:relative; z-index:1; }
.btn-primary svg {
  stroke:currentColor; fill:none; flex-shrink:0;
  transition:transform .3s var(--ease);
}
.btn-primary:hover svg { transform:translateX(5px); }
.btn-primary.large {
  font-size:15px; padding:20px 48px; gap:18px;
}
.btn-ghost {
  display:inline-flex; align-items:center;
  font-family:var(--font-ui); font-size:13px;
  font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white-50); padding:17px 0;
  border-bottom:1px solid var(--grey-mid);
  position:relative; transition:color .3s;
}
.btn-ghost::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:0; height:1px; background:var(--green-mid);
  transition:width .4s var(--ease);
}
.btn-ghost:hover { color:var(--white); }
.btn-ghost:hover::after { width:100%; }

/* ─── SECTION SHARED ─────────────────────────────────────────────── */
.section-container {
  max-width:var(--cw); margin:0 auto;
  padding: 0 clamp(20px,5vw,60px);
}
.stag {
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-ui); font-size:11px; font-weight:400;
  letter-spacing:.38em; text-transform:uppercase; color:var(--green-mid);
  margin-bottom:22px;
}
.stag::before {
  content:''; display:block; width:24px; height:1px; background:var(--green-mid);
}
.stitle {
  font-family: var(--font-d);
  font-size: clamp(44px,6.5vw,88px);
  font-weight: 300; line-height:.98;
  letter-spacing:-.025em;
}
.stitle em { font-style:italic; color:var(--white-50); }

/* ─── HERO ───────────────────────────────────────────────────────── */
#hero {
  position:relative; height:100svh; min-height:640px;
  display:flex; align-items:center; overflow:hidden;
}
#heroCanvas {
  position:absolute; inset:0; z-index:2;
  pointer-events:none; width: 100%; height: 100%;
}
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg-img {
  width:100%; height:100%;
  background: url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=1920&q=80') center/cover no-repeat;
  transform:scale(1.08);
  will-change:transform;
}
.hero-vignette {
  position:absolute; inset:0;
  background: linear-gradient(
    135deg,
    rgba(7,7,7,.93) 0%,
    rgba(7,7,7,.72) 45%,
    rgba(27,77,32,.22) 100%
  );
}
.hero-content {
  position:relative; z-index:3;
  padding: 0 clamp(20px,8vw,120px);
  max-width:1000px; width: 100%;
}
.hero-eyebrow {
  display:flex; align-items:center; gap:16px;
  margin-bottom:28px;
  opacity:0; transform:translateY(16px);
  animation: fadeUp 1s var(--ease) 2.6s forwards;
}
.hero-eyebrow span {
  font-family:var(--font-ui); font-size:11px; font-weight:300;
  letter-spacing:.35em; text-transform:uppercase; color:var(--white-50);
}
.eyebrow-line { flex-shrink:0; width:32px; height:1px; background:var(--green-mid); }
.hero-title {
  font-family:var(--font-d);
  font-size: clamp(56px,10vw,140px);
  font-weight:300; line-height:.93;
  letter-spacing:-.035em;
  display:flex; flex-direction:column;
  margin-bottom:28px;
}
.hero-word { display:block; overflow:hidden; }
.hw { 
  display:block; transform:translateY(110%); 
  animation: revealUp 1.2s var(--ease) 2.8s forwards;
}
.hero-word:nth-child(2) .hw { animation-delay: 2.9s; }
.hero-word:nth-child(3) .hw { animation-delay: 3.0s; }

.hero-word.italic { font-style:italic; color:var(--green-mid); padding-left:clamp(20px,5vw,80px); }
.hero-sub {
  font-family:var(--font-ui); font-size:clamp(13px,1.4vw,16px);
  font-weight:300; letter-spacing:.1em; color:var(--white-50);
  max-width:400px; margin-bottom:44px;
  opacity:0; transform:translateY(16px);
  animation: fadeUp 1s var(--ease) 3.2s forwards;
}
.hero-ctas {
  display:flex; gap:24px; align-items:center; flex-wrap:wrap;
  opacity:0; transform:translateY(16px);
  animation: fadeUp 1s var(--ease) 3.4s forwards;
}

@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes revealUp { to { transform:translateY(0); } }

.hero-scroll {
  position:absolute; bottom:38px; left:50%;
  transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:fadeUp .8s var(--ease) 3.8s forwards;
}
.scroll-track {
  width:1px; height:52px; background:var(--grey-mid);
  position:relative; overflow:hidden;
}
.scroll-dot {
  width:1px; height:20px;
  background: var(--green-mid);
  position:absolute; top:-20px;
  animation:scrollDot 2s ease-in-out infinite 3.8s;
}
@keyframes scrollDot {
  0%   { top:-20px; }
  50%  { top:52px; opacity:1; }
  100% { top:52px; opacity:0; }
}
.hero-scroll span {
  font-family:var(--font-ui); font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--white-50);
}

.hero-stats {
  position:absolute; bottom:44px; right:clamp(20px,8vw,120px);
  z-index:3; display:flex; align-items:center; gap:28px;
  opacity:0; transform:translateY(16px);
  animation: fadeUp 1s var(--ease) 3.6s forwards;
}
.hs-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.hs-num {
  font-family:var(--font-ui); font-size:clamp(22px,2.5vw,32px);
  font-weight:200; color:var(--white); line-height:1;
}
.hs-lbl {
  font-family:var(--font-ui); font-size:10px;
  font-weight:300; letter-spacing:.22em;
  text-transform:uppercase; color:var(--white-50);
}
.hs-div { width:1px; height:32px; background:var(--grey-mid); }

/* ─── MARQUEE ────────────────────────────────────────────────────── */
.marquee-strip {
  background: var(--green); padding:13px 0;
  overflow:hidden;
  border-top: 1px solid rgba(117,185,53,.18);
  border-bottom: 1px solid rgba(117,185,53,.18);
}
.marquee-track {
  display:flex; align-items:center; gap:36px;
  width:max-content;
  animation:marqScroll 28s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family:var(--font-ui); font-size:11px;
  font-weight:300; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(244,242,238,.8); white-space:nowrap;
}
.marquee-track .mdot { color:var(--green-bright); font-size:7px; letter-spacing:0; }
@keyframes marqScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ─── ABOUT ──────────────────────────────────────────────────────── */
#about {
  padding: var(--sp) 0;
  background: var(--black);
}
.about-header {
  margin-bottom: 80px;
  display:flex; flex-direction:column;
  max-width:600px;
}
.timeline {
  position:relative; display:flex; flex-direction:column; gap:0;
}
.tl-line {
  position:absolute; left:clamp(100px,10vw,140px);
  top:0; bottom:0; width:1px;
  background: linear-gradient(to bottom, transparent 0%, var(--grey-mid) 20%, var(--grey-mid) 80%, transparent 100%);
}
.tl-item {
  display:grid;
  grid-template-columns: clamp(80px,9vw,130px) 1fr;
  gap:0 clamp(30px,4vw,60px);
  padding: 56px 0;
  position:relative;
  opacity:0; transform:translateY(36px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.tl-item.is-inview, .tl-item.vis { opacity:1; transform:translateY(0); }

.tl-dot {
  position:absolute;
  left:calc(clamp(100px,10vw,140px) - 5px);
  top:62px;
  width:11px; height:11px; border-radius:50%;
  background:var(--charcoal); border:2px solid var(--grey-mid);
  transition: background .4s, border-color .4s, box-shadow .4s;
  z-index: 2;
}
.tl-dot.active, .tl-item:hover .tl-dot {
  background:var(--green-mid); border-color:var(--green-mid);
  box-shadow:0 0 0 4px rgba(117,185,53,.15);
}
.tl-year {
  font-family:var(--font-d); font-size:clamp(26px,3vw,38px);
  font-weight:300; color:var(--white-50); line-height:1.1;
  text-align:right; padding-top:3px;
  transition:color .3s;
}
.tl-year.accent, .tl-item:hover .tl-year { color:var(--green-mid); }
.tl-body {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,48px); align-items:start;
}
.tl-body.reverse { direction:rtl; }
.tl-body.reverse > * { direction:ltr; }
.tl-text h3 {
  font-family:var(--font-d); font-size:clamp(20px,2.2vw,28px);
  font-weight:400; color:var(--white); margin-bottom:14px;
}
.tl-text p {
  font-family:var(--font-b); font-size:clamp(13px,1.1vw,14.5px);
  font-weight:400; line-height:1.85; color:var(--white-50);
  max-width:380px;
}
.tl-img-wrap {
  position:relative; height:200px; overflow:hidden;
}
.tl-img-wrap img {
  width:100%; height:100%;
  filter:grayscale(40%) contrast(1.05);
  transition:transform .6s var(--ease), filter .5s;
}
.tl-item:hover .tl-img-wrap img {
  transform:scale(1.05); filter:grayscale(0%) contrast(1.05);
}
.tl-img-border {
  position:absolute; inset:0;
  border:1px solid var(--white-08); pointer-events:none;
}

/* ─── SERVICES ───────────────────────────────────────────────────── */
#services {
  padding: var(--sp) 0;
  background: var(--charcoal);
}
.services-header {
  margin-bottom:60px; display:flex; flex-direction:column;
}
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.svc-card {
  position:relative; overflow:hidden;
  aspect-ratio:3/4;
  cursor:none;
  transform-style:preserve-3d; perspective:800px;
}
.svc-inner {
  position:relative; width:100%; height:100%;
  transition:transform .06s;
}
.svc-img {
  position:absolute; inset:0; overflow:hidden;
}
.svc-img img {
  width:100%; height:100%;
  filter:grayscale(35%) contrast(1.08);
  transition:transform .7s var(--ease), filter .5s;
}
.svc-card:hover .svc-img img { transform:scale(1.09); filter:grayscale(0%); }
.svc-overlay {
  position:absolute; inset:0;
  background: linear-gradient(
    to top,
    rgba(7,7,7,.95) 0%,
    rgba(7,7,7,.55) 40%,
    rgba(7,7,7,.08) 100%
  );
  transition:opacity .4s, background .4s;
}
.svc-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:28px 26px; z-index:2;
  transform:translateY(16px);
  transition:transform .5s var(--ease);
}
.svc-card:hover .svc-info { transform:translateY(0); }
.svc-num {
  display:block; font-family:var(--font-ui); font-size:11px;
  font-weight:300; letter-spacing:.3em; color:var(--green-mid);
  margin-bottom:8px;
}
.svc-info h3 {
  font-family:var(--font-d); font-size:clamp(18px,1.7vw,24px);
  font-weight:400; color:var(--white); line-height:1.2; margin-bottom:8px;
}
.svc-info p {
  font-size:13px; color:var(--white-50); line-height:1.6;
  margin-bottom:12px;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s .08s, transform .35s .08s;
}
.svc-card:hover .svc-info p { opacity:1; transform:translateY(0); }
.svc-badge {
  display:inline-block; font-family:var(--font-ui); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase;
  padding:5px 12px; border:1px solid var(--green);
  color:var(--green-mid); background:rgba(27,77,32,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.svc-line {
  position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--green-mid);
  transition:width .55s var(--ease); z-index:3;
}
.svc-card:hover .svc-line { width:100%; }

@media (hover: none) {
  .svc-img img { filter:grayscale(10%); }
  .svc-overlay { background: linear-gradient(to top, rgba(7,7,7,.98) 0%, rgba(7,7,7,.65) 50%, rgba(7,7,7,.1) 100%); }
  .svc-info { transform:translateY(0); }
  .svc-info p { opacity:1; transform:translateY(0); }
  .svc-line { width:100%; opacity: 0.3; }
}

.svc-more { margin-top:52px; display:flex; justify-content:flex-end; }
.explore-link {
  display:inline-flex; align-items:center; gap:20px;
  font-family:var(--font-ui); font-size:13px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--white-50); transition:color .3s;
}
.el-arrow { transition:transform .35s var(--ease); }
.el-arrow svg { display:block; }
.explore-link:hover { color:var(--green-mid); }
.explore-link:hover .el-arrow { transform:translateX(10px); }

/* ─── EXPERIENCE ─────────────────────────────────────────────────── */
#experience {
  padding: var(--sp) 0;
  background: var(--black);
  position:relative; overflow:hidden;
}
.exp-ghost-text {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-ui); font-size:clamp(120px,22vw,300px);
  font-weight:800; letter-spacing:.18em;
  color:rgba(255,255,255,.018); pointer-events:none;
  white-space:nowrap; user-select:none;
}
.exp-header { margin-bottom:72px; display:flex; flex-direction:column; position: relative; z-index: 2; }
.metrics-grid {
  position: relative; z-index: 2;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--grey);
  border:1px solid var(--grey);
  margin-bottom:72px;
}
.metric-card {
  background:var(--black); padding:clamp(28px,4vw,56px) clamp(20px,3vw,36px);
  text-align:center; position:relative; overflow:hidden;
  transition:background .4s;
}
.metric-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--green-faint), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.metric-card:hover { background:var(--charcoal); }
.metric-card:hover::before { opacity:1; }
.metric-num {
  font-family:var(--font-d);
  font-size:clamp(52px,5.5vw,80px);
  font-weight:300; color:var(--green-bright);
  line-height:1; margin-bottom:12px;
  position:relative;
}
.metric-num::after {
  content: attr(data-suffix); font-size: 0.5em; vertical-align: super; font-weight: 300;
}
.metric-lbl {
  font-family:var(--font-ui); font-size:clamp(12px,1.1vw,14px);
  font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); margin-bottom:6px; position:relative;
}
.metric-sub {
  font-family:var(--font-ui); font-size:12px; font-weight:300;
  color:var(--white-50); position:relative;
}
.pillars-row {
  position: relative; z-index: 2;
  display:grid; grid-template-columns:repeat(4,1fr); gap:36px;
}
.pillar-card { display:flex; flex-direction:column; gap:14px; }
.pc-icon { width:46px; height:46px; }
.pc-icon svg { width:100%; height:100%; }
.pillar-card h4 {
  font-family:var(--font-d); font-size:clamp(16px,1.5vw,20px);
  font-weight:400; color:var(--white);
}
.pillar-card p {
  font-family:var(--font-ui); font-size:13px; font-weight:300;
  color:var(--white-50); line-height:1.7;
}

/* ─── GALLERY ────────────────────────────────────────────────────── */
#gallery {
  padding-top:var(--sp);
  background:var(--charcoal);
  overflow:hidden;
}
.gallery-head {
  margin-bottom:52px;
  display:flex; flex-direction:column;
}
.gallery-scroll-wrap {
  overflow-x:auto; overflow-y:visible;
  cursor:grab; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:0 clamp(20px,5vw,60px) 52px;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.gallery-scroll-wrap:active { cursor:grabbing; }
.gallery-scroll-wrap::-webkit-scrollbar { display:none; }
.gallery-track {
  display:flex; gap:14px; align-items:flex-end;
  width:max-content;
}
.gi {
  position:relative; width:260px; height:360px;
  overflow:hidden; flex-shrink:0;
  scroll-snap-align: center;
}
.gi.tall { height:460px; }
.gi img {
  width:100%; height:100%;
  filter:grayscale(25%) contrast(1.06);
  transition:transform .6s var(--ease), filter .45s;
}
.gi:hover img { transform:scale(1.07); filter:grayscale(0%); }
.gi-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:14px 16px;
  background:linear-gradient(to top, rgba(7,7,7,.82) 0%, transparent 100%);
  font-family:var(--font-ui); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--green-mid);
  opacity:0; transform:translateY(4px);
  transition:opacity .35s, transform .35s;
}
.gi:hover .gi-label { opacity:1; transform:translateY(0); }
@media (hover: none) {
  .gi img { filter: grayscale(0%); }
  .gi-label { opacity: 1; transform: translateY(0); }
}
.gallery-hint {
  text-align:center; padding:14px 0 36px;
  font-family:var(--font-ui); font-size:10px;
  letter-spacing:.25em; text-transform:uppercase; color:var(--grey-light);
}

/* ─── TESTIMONIALS ───────────────────────────────────────────────── */
#testimonials {
  padding:var(--sp) 0;
  background:var(--black);
}
#testimonials .section-container { display:flex; flex-direction:column; }
#testimonials .stag,
#testimonials .stitle { margin-bottom:16px; }
#testimonials .stitle { margin-bottom:60px; }
.testi-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; align-items:start;
}
.tcard {
  position:relative; overflow:hidden;
  background:var(--charcoal); border:1px solid var(--grey);
  padding:36px 32px; cursor:default;
  transition:transform .4s var(--ease), border-color .4s;
}
.tc-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--green-faint), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.tcard:hover { transform:translateY(-10px); border-color:var(--green); }
.tcard:hover .tc-bg { opacity:1; }
.tcard.featured {
  background:var(--grey-deep); border-color:var(--green);
  transform:translateY(-18px);
}
.tcard.featured .tc-bg { opacity:.5; }
.tc-body { position:relative; z-index:1; }
.tc-quote {
  font-family:var(--font-d); font-size:88px; line-height:.52;
  color:var(--green); margin-bottom:20px;
}
.tc-body p {
  font-family:var(--font-b); font-size:clamp(13px,1.1vw,14.5px);
  line-height:1.82; color:var(--white-50);
}
.tc-author {
  display:flex; align-items:center; gap:14px; margin-top:28px;
  position:relative; z-index:1;
}
.tc-av {
  width:42px; height:42px; border-radius:50%;
  background:var(--green); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-ui); font-size:13px;
  font-weight:600; color:var(--green-bright); flex-shrink:0;
}
.tc-info { flex:1; }
.tc-name {
  display:block; font-family:var(--font-ui); font-size:15px;
  font-weight:500; color:var(--white); letter-spacing:.04em;
}
.tc-role {
  display:block; font-family:var(--font-ui); font-size:11px;
  color:var(--white-50); margin-top:3px; letter-spacing:.04em;
}
.tc-stars { font-size:13px; color:var(--green-bright); letter-spacing:2px; }

/* ─── CONTACT ────────────────────────────────────────────────────── */
#contact {
  padding:var(--sp) 0;
  background:var(--charcoal);
}
.contact-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,100px); align-items:center;
}
.contact-left { display:flex; flex-direction:column; }
.contact-left .stag  { margin-bottom:18px; }
.contact-left .stitle { margin-bottom:44px; }
.contact-items {
  display:flex; flex-direction:column; gap:32px; margin-bottom:44px;
}
.ci { border-left:2px solid var(--green); padding-left:20px; }
.ci-label {
  display:block; font-family:var(--font-ui); font-size:10px;
  font-weight:400; letter-spacing:.32em; text-transform:uppercase;
  color:var(--green-mid); margin-bottom:8px;
}
.ci p {
  font-family:var(--font-ui); font-size:clamp(13px,1.1vw,15px);
  font-weight:300; color:var(--white-50); line-height:1.75;
}
.ci a {
  font-family:var(--font-ui); font-size:clamp(13px,1.1vw,15px);
  font-weight:300; color:var(--white-50); display:block;
  transition:color .3s;
}
.ci a:hover { color:var(--green-mid); }
.map-glass {
  position:relative; height:480px; overflow:hidden;
  background:rgba(255,255,255,.02);
  border:1px solid var(--white-08);
  box-shadow:0 0 80px rgba(27,77,32,.18);
  border-radius: 4px; 
}
.map-border {
  position:absolute; inset:0; z-index:2;
  border:1px solid rgba(117,185,53,.18); pointer-events:none;
}
.map-glass iframe {
  width:100%; height:100%; border:0;
  filter:invert(92%) hue-rotate(175deg) saturate(.7);
  opacity:.85;
}

/* ─── FINAL CTA ──────────────────────────────────────────────────── */
#final-cta {
  position:relative; overflow:hidden;
  background:var(--black);
  display:flex; flex-direction:column;
}
#ctaCanvas {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width: 100%; height: 100%;
}
.cta-glow {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:60vw; height:60vw;
  background:radial-gradient(ellipse at center, rgba(27,77,32,.22) 0%, transparent 70%);
  z-index:0; pointer-events:none;
  animation:ctaGlow 6s ease-in-out infinite alternate;
}
@keyframes ctaGlow {
  from { transform:translate(-50%,-50%) scale(1); opacity:.7; }
  to   { transform:translate(-50%,-50%) scale(1.15); opacity:1; }
}
.cta-body {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:28px;
  padding:clamp(80px,12vw,160px) clamp(20px,8vw,120px);
  flex:1;
}
.cta-headline {
  font-family:var(--font-d);
  font-size:clamp(60px,12vw,160px);
  font-weight:300; line-height:.9;
  letter-spacing:-.04em;
  display:flex; flex-direction:column;
}
.ch-line { display:block; overflow:hidden; }
.ch-inner { display:block; }
.ch-line.italic { font-style:italic; color:var(--green-mid); }
.cta-sub {
  font-family:var(--font-ui); font-size:clamp(13px,1.4vw,16px);
  font-weight:300; letter-spacing:.1em; color:var(--white-50);
}

/* ─── FOOTER ─────────────────────────────────────────────────────── */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--grey);
  padding: 36px clamp(20px,5vw,60px);
}
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
}
.footer-logo {
  font-family:var(--font-ui); font-size:17px;
  font-weight:300; letter-spacing:.4em; color:var(--white);
}
.footer-tag {
  font-family:var(--font-ui); font-size:12px;
  letter-spacing:.14em; color:var(--white-50);
}
.footer-bottom-text {
  display: flex; align-items: center; gap: 8px;
}
.footer-copy {
  font-family:var(--font-ui); font-size:11px; color:var(--grey-light);
}
.footer-divider {
  color: var(--grey-light); opacity: 0.5; font-size: 10px;
}
.dev-link {
  color: var(--white-50);
  transition: color 0.3s ease;
  font-weight: 500;
}
.dev-link:hover {
  color: var(--green-mid);
}

/* ─── MAGNETIC (CSS Fallback) ────────────────────────────────────── */
.magnetic { 
  will-change: transform;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ─── RESPONSIVE MEDIA QUERIES ───────────────────────────────────── */

/* SMALL LAPTOP / TABLET LANDSCAPE (1025px - 1366px) */
@media (max-width: 1366px) {
  .services-grid { gap: 1px; }
  .contact-grid { gap: 60px; }
}

/* TABLET (768px - 1024px) */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars-row { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .tl-body { grid-template-columns: 1fr; gap: 24px; }
  .tl-body.reverse { direction: ltr; }
  .tl-img-wrap { height: 240px; }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .map-glass { height: 380px; }
}

/* MOBILE PHONES (320px - 767px) */
@media (max-width: 767px) {
  /* Enforce core content focus on mobile */
  .top-header,
  .filter-bar,
  .column-left {
    display: none !important;
  }

  /* Typography limits to prevent horizontal scroll */
  .stitle { font-size: clamp(32px, 8vw, 44px); margin-bottom: 24px; }
  .hero-title { font-size: clamp(40px, 10vw, 56px); margin-bottom: 16px; }
  .cta-headline { font-size: clamp(40px, 10vw, 60px); }

  /* Navigation adjustments */
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  #navbar { padding: 16px 20px; }
  #navbar.scrolled { padding: 12px 20px; }
  .nav-logo { font-size: 16px; }

  /* Hero Section scaling */
  .hero-content { padding: 0 20px; }
  .hero-stats { display: none; }
  .hero-word.italic { padding-left: 16px; }
  
  /* Buttons stretch on mobile to prevent squishing */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-ctas a { width: 100%; text-align: center; justify-content: center; }

  /* About / Timeline - stack properly */
  .about-header { margin-bottom: 40px; }
  .tl-item {
    grid-template-columns: 1fr;
    padding: 24px 0 24px 36px;
    gap: 16px;
  }
  .tl-line { left: 10px; }
  .tl-dot { left: 5px; top: 32px; width: 10px; height: 10px; }
  .tl-year { text-align: left; font-size: 24px; padding-top: 0; margin-bottom: 4px; }
  .tl-img-wrap { height: 200px; }

  /* Services Grid */
  .services-grid { grid-template-columns: 1fr; }
  .svc-card { aspect-ratio: auto; height: 340px; }
  .services-header { margin-bottom: 40px; }

  /* Experience / Metrics */
  .metrics-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 40px; }
  .metric-card { padding: 24px 16px; }
  .metric-num { font-size: 40px; }
  .pillars-row { grid-template-columns: 1fr; gap: 24px; }
  
  /* Confines massive background text to viewport */
  .exp-ghost-text { font-size: clamp(60px, 15vw, 100px); }

  /* Testimonials Grid */
  .testi-grid { grid-template-columns: 1fr; }
  .tcard { padding: 28px 24px; }
  .tcard.featured { transform: none; }
  .tcard:hover { transform: translateY(-5px); }
  .tc-quote { font-size: 60px; margin-bottom: 12px; }

  /* Contact Adjustments */
  .contact-grid { gap: 40px; }
  .map-glass { height: 320px; }

  /* Final CTA button scale */
  .cta-body { padding: 80px 20px; }
  .btn-primary.large { padding: 16px 24px; font-size: 13px; width: 100%; display: flex; justify-content: center; }

  /* Footer Stack */
  .footer-inner { flex-direction: column; text-align: center; justify-content: center; gap: 12px; }
  .footer-bottom-text { flex-direction: column; gap: 4px; }
  .footer-divider { display: none; }
}

/* EXTRA SMALL MOBILE (320px - 440px) */
@media (max-width: 440px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .gi { width: 220px; height: 300px; }
  .gi.tall { height: 380px; }
  .hero-title { font-size: 38px; }
  .stitle { font-size: 32px; }
  .cta-headline { font-size: 38px; }
  .svc-card { height: 300px; }
}