/* ─────────────────────────────────────────
   ProMates — Digital Marketing Agency
   Styles
───────────────────────────────────────── */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:'Cormorant Garamond',serif;}

/* ── Utility ── */
.hidden{display:none !important;}

/* ── Design Tokens ── */
:root{
  --cream:#F4EFE6;
  --cream-2:#EBE5D8;
  --cream-3:#E2DBCC;
  --teal:#4E9E96;
  --teal-dark:#3A8880;
  --teal-pale:#D4E8E5;
  --ink:#1C1916;
  --ink-2:#5A5850;
  --ink-3:#9A9890;
  --max-w:1320px;
  --px:clamp(20px,5vw,80px);
  --ease:cubic-bezier(0.16,1,0.3,1);
}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Cormorant Garamond',serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-weight:400;
  line-height:1.5;
}

/* ── Scroll progress ── */
#scroll-progress{
  position:fixed;top:0;left:0;
  height:2px;width:0;
  background:var(--teal);
  z-index:999;
  will-change:width;
  pointer-events:none;
  transition:width 0.08s linear;
}

/* ── Left ribbon ── */
.ribbon{
  position:fixed;left:0;top:72px;
  width:40px;height:52px;
  background:var(--teal);z-index:98;
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);
}
.ribbon svg{color:#fff;width:17px;height:17px;}

/* ── Nav — Contra Labs style ── */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#main-nav.nav-scrolled {
  background: rgba(244,239,230,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(28,25,22,0.10);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 48px;
}
/* push hamburger to far right on mobile */
.hamburger { margin-left: auto; }

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-bookmark {
  position: relative;
  width: 32px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}
.logo-bookmark > svg:first-child {
  width: 32px;
  height: 40px;
}
.logo-star {
  position: absolute;
  width: 12px;
  height: 12px;
}
.logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.logo-text strong {
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--ink);
}

/* Hamburger (mobile only) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s, width 0.3s;
  transform-origin: center;
}
.hamburger span:nth-child(1) { width: 24px; }
.hamburger span:nth-child(2) { width: 18px; }
.hamburger span:nth-child(3) { width: 24px; }
.hamburger.is-open span:nth-child(1) { width: 22px; transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.is-open span:nth-child(3) { width: 22px; transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: #111;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.mobile-link {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 9vw, 52px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-link:hover { color: var(--teal); }
.mobile-menu-close {
  position: absolute;
  top: 16px; right: 20px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}
.mobile-menu-close:hover { background: rgba(255,255,255,0.1); }

/* ── Hero — Contra Labs style (painting bleeds from top-right behind fixed nav) ── */
.hero{
  height:100vh;
  min-height:600px;
  position:relative;
  background:var(--cream);
  overflow:hidden;
  display:block;
}
.hero-left{
  display:flex;flex-direction:column;justify-content:center;
  /* 64px nav + breathing room */
  padding:140px 60px 80px clamp(32px,6vw,88px);
  position:relative;z-index:2;
  width:48%;
  height:100%;
}
.hero-eyebrow{
  font-size:13px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);margin-bottom:32px;
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(16px);
  animation:fade-up 0.8s var(--ease) 0.1s forwards;
}
.hero-eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--teal);flex-shrink:0;}

/* Line-by-line headline reveal */
.hero-headline{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(44px,5vw,78px);
  font-weight:400;line-height:1.12;letter-spacing:-0.01em;
  color:var(--ink);margin-bottom:32px;
}
.hero-headline em{font-style:italic;color:var(--teal);}
.line-wrap{overflow:hidden;display:block;}
.line{
  display:block;
  transform:translateY(108%);
  transition:transform 0.9s var(--ease);
}
.hero-headline.lines-visible .line{transform:translateY(0);}
.line-d1{transition-delay:0.08s;}
.line-d2{transition-delay:0.17s;}
.line-d3{transition-delay:0.26s;}

.hero-sub{
  font-size:19px;line-height:1.72;color:var(--ink-2);
  max-width:480px;margin-bottom:48px;font-weight:300;
  opacity:0;transform:translateY(16px);
  animation:fade-up 0.8s var(--ease) 0.65s forwards;
}
.hero-actions{
  display:flex;gap:12px;flex-wrap:wrap;
  opacity:0;transform:translateY(16px);
  animation:fade-up 0.8s var(--ease) 0.8s forwards;
}
@keyframes fade-up{to{opacity:1;transform:translateY(0);}}

.btn-primary{
  font-size:15px;font-weight:400;padding:14px 32px;
  background:var(--ink);color:var(--cream);
  border:none;border-radius:100px;
  transition:background .3s,transform .5s var(--ease);
  will-change:transform;
}
.btn-primary:hover{background:var(--teal);}
.btn-ghost{
  font-size:15px;font-weight:500;padding:14px 32px;
  background:transparent;color:var(--ink);
  border:1.5px solid rgba(28,25,22,0.2);border-radius:100px;
  transition:border-color .25s,color .25s;
}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}

/* Hero right — 65% wide, bleeds from top-right corner of viewport */
.hero-right{
  position:absolute;
  top:0;right:0;
  width:65%;
  height:100%;
  overflow:hidden;
  z-index:1;
}
.hero-right img.hero-painting{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  will-change:transform;
}
/* tight left-edge fade — painting visible almost immediately */
.hero-right::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(
    to right,
    var(--cream) 0%,
    rgba(244,239,230,0.72) 5%,
    rgba(244,239,230,0.28) 14%,
    rgba(244,239,230,0.04) 26%,
    rgba(244,239,230,0) 38%
  );
  z-index:2;pointer-events:none;
}
/* halftone dot overlay matching Contra Labs */
.hero-right::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(28,25,22,.05) 1.5px,transparent 1.5px);
  background-size:18px 18px;
  z-index:3;pointer-events:none;
  opacity:0.55;
}
.hero-painting-placeholder{
  position:absolute;inset:0;background:var(--teal);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;
}
.hero-painting-placeholder p{font-size:13px;color:rgba(255,255,255,.6);font-weight:500;letter-spacing:.06em;text-align:center;padding:0 20px;}

/* ── Panoramic strip ── */
.panoramic-strip{
  width:100%;height:clamp(240px,30vw,440px);
  position:relative;overflow:hidden;background:var(--cream-2);
}
.panoramic-strip img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;}
.panoramic-strip::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(244,239,230,0.55) 100%);
  pointer-events:none;
}
.panoramic-placeholder{position:absolute;inset:0;background:var(--cream-2);display:flex;align-items:center;justify-content:center;}
.panoramic-placeholder p{font-size:13px;color:var(--ink-3);font-weight:500;letter-spacing:.06em;}

/* ── Marquee ── */
.marquee-wrap{
  background:var(--cream-2);
  border-top:1px solid rgba(28,25,22,.07);
  border-bottom:1px solid rgba(28,25,22,.07);
  padding:15px 0;overflow:hidden;white-space:nowrap;
}
.marquee-track{display:inline-flex;animation:marquee 42s linear infinite;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0 28px;}
.marquee-track .sep{color:var(--teal);font-size:13px;padding:0;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── Stats ── */
.stats-bar{border-bottom:1px solid rgba(28,25,22,.08);}
.stats-inner{
  max-width:var(--max-w);margin:0 auto;
  padding:0 var(--px);display:grid;grid-template-columns:repeat(4,1fr);
}
.stat-item{padding:52px 44px;border-right:1px solid rgba(28,25,22,.08);transition:background .3s;}
.stat-item:last-child{border-right:none;}
.stat-item:hover{background:rgba(78,158,150,.06);}
.stat-num{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(40px,4.5vw,68px);
  font-weight:400;letter-spacing:-.035em;
  color:var(--ink);line-height:1;display:block;margin-bottom:10px;
}
.stat-num.teal{color:var(--teal);}
.stat-lbl{font-size:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);line-height:1.5;}

/* ── Section base ── */
.section{padding:clamp(80px,11vw,140px) var(--px);}
.section-inner{max-width:var(--max-w);margin:0 auto;}
.alt-bg{background:var(--cream-2);}
.section-eyebrow{
  display:inline-block;font-size:13px;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);margin-bottom:20px;
}
.section-heading{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(40px,4.6vw,70px);
  font-weight:400;line-height:1.08;letter-spacing:-.025em;
  color:var(--ink);margin-bottom:20px;
}
.section-heading em{font-style:italic;color:var(--teal);}
.section-sub{font-size:18px;line-height:1.72;color:var(--ink-2);max-width:560px;font-weight:300;}

/* ── Services grid ── */
.services-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:60px;}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;
}

/* ── Service image cards (Contra Labs style) ── */
.service-card-img{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;cursor:pointer;
  border-radius:4px;
}
.sci-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  transition:transform .75s var(--ease);
}
.service-card-img:hover .sci-bg{transform:scale(1.07);}
/* dark gradient overlay */
.service-card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.08) 0%,rgba(0,0,0,.62) 100%);
  transition:background .4s;
  z-index:1;
}
.service-card-img:hover::after{
  background:linear-gradient(to bottom,rgba(0,0,0,.18) 0%,rgba(0,0,0,.78) 100%);
}
/* teal line sweeps from bottom */
.sci-teal-line{
  position:absolute;bottom:0;left:0;
  width:0;height:3px;background:var(--teal);
  transition:width .55s var(--ease);
  z-index:3;
}
.service-card-img:hover .sci-teal-line{width:100%;}
.sci-label{
  position:absolute;top:22px;left:22px;
  font-size:13px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.65);z-index:2;
}
.sci-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 22px 28px;z-index:2;
}
.sci-title{
  font-family:'Cormorant Garamond',serif;
  font-size:26px;font-weight:400;line-height:1.2;
  color:#fff;margin-bottom:8px;
}
.sci-tag{
  font-size:15px;color:rgba(255,255,255,.72);
  font-style:italic;line-height:1.4;
  transform:translateY(6px);opacity:0;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.service-card-img:hover .sci-tag{opacity:1;transform:translateY(0);}

/* ── Work section ── */
.work-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
.work-image{position:relative;overflow:hidden;}
.work-image img{
  width:100%;height:540px;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.work-image:hover img{transform:scale(1.03);}
.work-image::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(78,158,150,.1) 0%,transparent 55%);
  pointer-events:none;
}
.work-list{display:flex;flex-direction:column;gap:0;margin-top:36px;}
.work-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 0;border-bottom:1px solid rgba(28,25,22,.07);
  transition:padding-left .25s;
}
.work-item:first-child{border-top:1px solid rgba(28,25,22,.07);}
.work-item:hover{padding-left:6px;}
.work-item-dot{
  width:22px;height:22px;flex-shrink:0;
  border:1.5px solid var(--teal);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;transition:background .3s;
}
.work-item:hover .work-item-dot{background:var(--teal);}
.work-item:hover .work-item-dot svg{color:#fff;}
.work-item-dot svg{color:var(--teal);width:10px;height:10px;transition:color .3s;}
.work-item-text{font-size:17px;line-height:1.65;color:var(--ink-2);font-weight:300;}
.work-item-text strong{color:var(--ink);font-weight:500;}

/* ── About section ── */
.about-grid{
  display:grid;grid-template-columns:1.15fr 0.85fr;
  gap:80px;align-items:start;margin-top:60px;
}
.about-text p{
  font-size:18px;line-height:1.85;color:var(--ink-2);
  font-weight:300;margin-bottom:24px;
}
.about-text p strong{color:var(--ink);font-weight:500;}
.about-text p:last-child{margin-bottom:0;}
.about-quote{
  margin-top:36px;padding:28px 32px;
  border-left:2px solid var(--teal);
  background:rgba(78,158,150,.05);
}
.about-quote p{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;font-style:italic;color:var(--ink);
  line-height:1.62;margin:0;
}
.about-images{position:relative;height:520px;}
.about-img-main{
  position:absolute;top:0;right:0;
  width:82%;height:360px;overflow:hidden;
  background:var(--cream-3);
}
.about-img-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.about-img-main:hover img{transform:scale(1.04);}
.about-img-accent{
  position:absolute;bottom:0;left:0;
  width:56%;height:210px;overflow:hidden;
  border:5px solid var(--cream);
  box-shadow:0 8px 32px rgba(28,25,22,.1);
  background:var(--cream-3);
}
.about-img-accent img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── Floating art ── */
.floating-art{
  position:relative;min-height:580px;
  background:var(--cream);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.floating-art-inner{
  position:relative;width:100%;max-width:var(--max-w);
  height:580px;margin:0 auto;
}
.floating-art-label{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-55%);
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(26px,3vw,50px);
  font-weight:500;font-style:italic;
  color:var(--ink);text-align:center;
  white-space:nowrap;z-index:5;
  letter-spacing:-.02em;line-height:1.25;
  background:var(--cream);padding:20px 40px;
}
.paint-float{
  position:absolute;overflow:hidden;background:var(--teal-pale);
}
.paint-float img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.paint-float:hover img{transform:scale(1.06);}
.paint-float-ph{
  position:absolute;inset:0;background:var(--cream-2);
  border:1px dashed rgba(28,25,22,.15);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
}
.paint-float-ph span{font-size:11px;color:var(--ink-3);letter-spacing:.08em;text-align:center;padding:0 8px;}
.pf-1{width:190px;height:250px;top:10%;left:3%;}
.pf-2{width:210px;height:215px;bottom:6%;left:18%;}
.pf-3{width:260px;height:290px;top:8%;right:3%;}

/* ── Process ── */
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(28,25,22,.08);
  border:1px solid rgba(28,25,22,.08);margin-top:64px;
}
.process-step{background:var(--cream-2);padding:48px 36px;transition:background .35s;}
.process-step:hover{background:var(--teal-pale);}
.step-num{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(28,25,22,.14);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:400;color:var(--ink-2);
  margin-bottom:28px;
  transition:background .35s,border-color .35s,color .35s;
}
.process-step:hover .step-num{background:var(--teal);border-color:var(--teal);color:#fff;}
.step-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em;}
.step-desc{font-size:17px;line-height:1.72;color:var(--ink-2);font-weight:300;}

/* ── CTA ── */
.cta-section{
  padding:clamp(100px,14vw,160px) var(--px);
  background:var(--cream-2);position:relative;overflow:hidden;
  border-top:1px solid rgba(28,25,22,.08);
}
.cta-blob{display:none;}
.cta-blob-2{display:none;}
.cta-inner{max-width:var(--max-w);margin:0 auto;text-align:center;position:relative;z-index:1;}
.cta-eyebrow{font-size:13px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:28px;display:block;}
.cta-heading{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(38px,5.5vw,80px);
  font-weight:400;letter-spacing:-.03em;line-height:1.08;
  color:var(--ink);margin-bottom:28px;
}
.cta-heading em{font-style:italic;color:var(--teal);}
.cta-sub{font-size:19px;line-height:1.72;color:var(--ink-2);max-width:500px;margin:0 auto 52px;font-weight:300;}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn-cta{
  font-size:16px;font-weight:400;padding:16px 40px;border-radius:100px;
  background:var(--teal);color:#fff;border:none;
  transition:background .3s,transform .5s var(--ease);
  will-change:transform;
}
.btn-cta:hover{background:var(--teal-dark);}
.btn-cta-ghost{
  font-size:16px;font-weight:500;padding:16px 36px;
  background:transparent;color:var(--ink-2);
  border:1.5px solid rgba(28,25,22,.22);border-radius:100px;
  transition:border-color .2s,color .2s;
}
.btn-cta-ghost:hover{border-color:var(--teal);color:var(--teal);}
.cta-foot{margin-top:36px;font-size:15px;color:var(--ink-3);letter-spacing:.04em;}

/* ── Photo Gallery (horizontal scroll strip) ── */
.photo-gallery{
  width:100%;
  background:var(--cream);
  padding:80px 0 0;
  overflow:hidden;
}
.gallery-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.gallery-scroll::-webkit-scrollbar{display:none;}
.gallery-scroll.is-dragging{cursor:grabbing;}
.gallery-track{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:0 var(--px) 0;
  width:max-content;
}
.gallery-item{
  flex-shrink:0;
  width:280px;
  height:340px;
  overflow:hidden;
  border-radius:4px;
  background:var(--cream-2);
}
.gallery-item.gi-tall{ height:420px; width:260px; }
.gallery-item.gi-wide{ width:380px; height:300px; }
.gallery-item img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform 0.7s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.04); }

/* ── Bottom panoramic — lives inside footer, bleeds from the bottom up ── */
.bottom-panoramic{
  width:100%;
  overflow:hidden;
  height:clamp(240px,32vw,420px);
  position:relative;
  margin-top:0;
}
.bottom-panoramic img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
}
/* cream fades into the painting from the top — seamless with footer background */
.bottom-panoramic::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    var(--cream) 0%,
    rgba(244,239,230,0.7) 12%,
    rgba(244,239,230,0) 32%
  );
  z-index:1;pointer-events:none;
}

/* ── Footer — cream theme, Contra Labs style ── */
footer{
  background:var(--cream);
  border-top:1px solid rgba(28,25,22,0.08);
  padding:80px var(--px) 0;
  overflow:hidden;
}
.footer-inner{max-width:var(--max-w);margin:0 auto;}
.footer-grid{
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:60px;padding-bottom:56px;
  border-bottom:1px solid rgba(28,25,22,0.08);margin-bottom:36px;
}
.footer-logo{ margin-bottom:16px; }
.footer-tagline{font-size:16px;line-height:1.72;color:var(--ink-2);max-width:260px;margin-top:12px;font-weight:300;}
.footer-market{font-size:14px;color:var(--ink-3);margin-top:16px;font-weight:300;}
.footer-col-title{font-size:13px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:18px;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:11px;}
.footer-links a{font-size:16px;color:var(--ink-2);transition:color .2s;font-weight:300;}
.footer-links a:hover{color:var(--ink);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:40px;}
.footer-copy{font-size:15px;color:var(--ink-3);}
.footer-badge{font-size:13px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;}

/* ── Reveal animation ── */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.1s;}
.reveal-d2{transition-delay:.2s;}
.reveal-d3{transition-delay:.3s;}
.reveal-d4{transition-delay:.15s;}
.reveal-d5{transition-delay:.25s;}

/* ─────────────────────
   Responsive
───────────────────── */

@media(max-width:1100px){
  .hero-left{padding:120px 40px 80px var(--px);width:50%;}
  .hero-right{width:62%;}
  .hero-headline{font-size:clamp(36px,4.4vw,62px);}
  .hero-sub{font-size:15px;}

  .stats-inner{grid-template-columns:repeat(2,1fr);}
  .stat-item:nth-child(2){border-right:none;}
  .stat-item{border-bottom:1px solid rgba(28,25,22,.08);}
  .stat-item:nth-child(3),.stat-item:nth-child(4){border-bottom:none;}

  .services-grid{grid-template-columns:repeat(2,1fr);}
  .service-card-img{aspect-ratio:1/1;}

  .work-grid{grid-template-columns:1fr;gap:48px;}
  .work-image img{height:420px;}

  .about-grid{grid-template-columns:1fr;gap:48px;}
  .about-images{height:380px;}
  .about-img-main{width:78%;height:280px;}
  .about-img-accent{width:52%;height:170px;}

  .floating-art{min-height:480px;}
  .floating-art-inner{height:480px;}
  .pf-1{width:140px;height:185px;top:8%;left:2%;}
  .pf-2{width:155px;height:155px;bottom:8%;left:15%;}
  .pf-3{width:175px;height:200px;top:8%;right:2%;}

  .process-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px;}
}

@media(max-width:768px){
  .ribbon{display:none;}
  .nav-links{display:none;}
  .hamburger{display:flex;}

  /* ── Hero: stacked column on mobile ── */
  .hero{
    display:block;
    height:auto;
    min-height:auto;
  }
  .hero-left{
    width:100%;
    max-width:100%;
    height:auto;
    min-height:auto;
    padding:100px var(--px) 44px;
  }
  .hero-right{
    display:block !important;
    position:relative !important;
    top:auto !important;right:auto !important;
    width:100%;
    height:72vw;
    min-height:260px;
    max-height:440px;
    overflow:hidden;
  }
  .hero-right::before{
    background:linear-gradient(to bottom,var(--cream) 0%,rgba(244,239,230,0) 18%);
  }
  .hero-headline{font-size:clamp(38px,9.5vw,58px);}
  .hero-sub{font-size:15px;margin-bottom:36px;}
  .hero-actions{gap:10px;}

  .stat-item{padding:36px 28px;}

  .services-grid{grid-template-columns:1fr;}
  .service-card-img{aspect-ratio:4/3;}

  .work-image img{height:320px;}

  .about-images{height:300px;}
  .about-img-main{width:76%;height:220px;}
  .about-img-accent{width:50%;height:140px;}

  .floating-art{min-height:360px;}
  .floating-art-inner{height:360px;}
  .pf-1{display:none;}
  .pf-3{display:none;}
  .pf-2{left:50%;top:50%;transform:translate(-50%,-50%);}

  .panoramic-strip{height:200px;}

  .footer-grid{grid-template-columns:1fr;}
  .footer-grid>div:not(:first-child){margin-top:0;}
}

@media(max-width:480px){
  .stats-inner{grid-template-columns:1fr 1fr;}
  .stat-item:nth-child(2){border-right:none;}
  .stat-item:nth-child(3){border-right:none;}
  .stat-item:nth-child(4){border-bottom:none;}
  .stat-item:nth-child(3){border-bottom:1px solid rgba(28,25,22,.08);}

  .process-grid{grid-template-columns:1fr;}

  .cta-actions{flex-direction:column;align-items:center;}
  .btn-cta,.btn-cta-ghost{width:100%;max-width:320px;text-align:center;}

  .hero-actions{flex-direction:column;}
  .btn-primary,.btn-ghost{width:100%;text-align:center;padding:16px 24px;}
}