/* ── PLAYFAIR for section sub-headlines ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&display=swap');


/*
Theme Name: CraftDigital Luxury
Description: CraftDigital city-at-night one-page theme
Version: 1.0
*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;}

:root{
  --black:  #080808;
  --white:  #f4f2ee;
  --acid:   #c8ff00;
  --dim:    #1a1a1a;
  --grey:   #888;
  --mid:    #2a2a2a;
  --pad:    1.6rem;
}

body{
  font-family:'Instrument Sans',sans-serif;
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
}

/* ── WORDPRESS CONFLICT RESETS ── */
#page, #content, #primary, #main, .site, .site-content,
.entry-content, .wp-site-blocks, .is-layout-flow {
  all: unset;
  display: block;
}
.scene rect, .scene circle, .scene ellipse, .scene path,
.scene line, .scene g, .scene text {
  opacity: revert;
}
section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 3rem;
  border-bottom:1px solid transparent;
  transition:border-color .4s, background .4s;
}
nav.scrolled{background:rgba(8,8,8,.92);border-color:rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.4rem;letter-spacing:.14em;color:var(--white);
}
.logo span{color:var(--acid);}
.nav-links{list-style:none;display:flex;gap:2.4rem;}
.nav-links a{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);opacity:.45;text-decoration:none;
  transition:opacity .2s,color .2s;
}
.nav-links a:hover{opacity:1;color:var(--acid);}

/* ── HAMBURGER BUTTON ── */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:24px;height:18px;
  background:none;border:none;
  padding:0;cursor:pointer;z-index:600;
}
.hamburger span{
  display:block;width:100%;height:2px;
  background:var(--white);
  transition:transform .3s,opacity .3s;
  transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ── MOBILE MENU OVERLAY ── */
.mobile-menu{
  display:none;
  position:fixed;inset:0;
  background:rgba(8,8,8,.97);
  z-index:400;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.mobile-menu.open{display:flex;}
.mobile-menu ul{list-style:none;text-align:center;padding:0;}
.mobile-menu ul li{margin-bottom:2.4rem;}
.mobile-menu ul li a{
  font-family:'Bebas Neue',sans-serif;
  font-size:3rem;letter-spacing:.08em;
  color:var(--white);text-decoration:none;
  transition:color .2s;
}
.mobile-menu ul li a:hover{color:var(--acid);}

/* ── SECTIONS ── */
section{
  position:relative;width:100%;height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:clip;
  scroll-margin-top:80px;
}

/* ── SVG CANVAS ── */
.scene{position:absolute;inset:0;width:100%;height:100%;}

/* ── TEXT LAYER ── */
.copy{position:relative;z-index:20;max-width:700px;padding:2rem;}
.tag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acid);margin-bottom:1.4rem;
}
.tag::before{content:'';display:block;width:24px;height:1px;background:var(--acid);}
h1,h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3.6rem,8vw,7rem);
  line-height:.96;letter-spacing:.02em;
  margin-bottom:1.4rem;
  text-transform:uppercase;
}
h1 .alt,h2 .alt{-webkit-text-stroke:1px var(--white);color:transparent;}
h1 .hi,h2 .hi{color:var(--acid);}
.sub{
  font-size:.88rem;line-height:1.75;
  color:rgba(244,242,238,.6);
  max-width:440px;margin-bottom:2rem;
  font-weight:400;
}
.btn{
  display:inline-block;
  padding:.75rem 2.2rem;
  background:var(--acid);color:var(--black);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;text-decoration:none;
  transition:background .25s,transform .2s;
}
.btn:hover{background:var(--white);transform:translateY(-2px);}

#hero-copy{
  background:rgba(5,5,5,0.55);
  padding:2.4rem 2.8rem;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
#hero-copy h1{
  font-family:'Bebas Neue',sans-serif !important;
  font-size:clamp(3.6rem,8vw,7rem) !important;
  line-height:.96 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
}

/* ── STAT ROW ── */
.stats{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:1rem;}
.st-num{font-family:'Bebas Neue',sans-serif;font-size:3.2rem;line-height:1;color:var(--acid);}
.st-lbl{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.45;margin-top:.3rem;}

/* ── SERVICE CARDS ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:2rem;background:var(--mid);}
.card{background:var(--black);padding:2rem 1.6rem;transition:background .25s;}
.card:hover{background:#111;}
.c-num{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--mid);line-height:1;margin-bottom:1rem;}
.card h3{font-size:1rem;font-weight:600;margin-bottom:.6rem;letter-spacing:.04em;}
.card p{font-size:.78rem;opacity:.5;line-height:1.7;}
.card:hover .c-num{color:var(--acid);}

/* ── PROCESS ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:2rem;}
.step{padding:1.8rem 1.4rem;border-left:1px solid var(--mid);transition:border-color .25s;}
.step:first-child{border-left:none;}
.step:hover{border-color:var(--acid);}
.s-num{font-family:'Bebas Neue',sans-serif;font-size:4rem;color:rgba(200,255,0,.12);line-height:1;margin-bottom:.8rem;}
.step h3{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem;}
.step p{font-size:.76rem;opacity:.45;line-height:1.65;}

/* ── CONTACT FORM ── */
.form{width:100%;max-width:460px;}
.form input,.form textarea{
  width:100%;background:transparent;
  border:none;border-bottom:1px solid rgba(255,255,255,.25);
  color:var(--white);font-family:'Instrument Sans',sans-serif;
  font-size:.85rem;line-height:3;padding:0;margin-bottom:1.4rem;
  outline:none;transition:border-color .3s;
  display:block;
}
.form input:focus,.form textarea:focus{border-color:var(--acid);}
.form textarea{background:transparent;resize:none;height:100px;}
.form ::placeholder{color:rgba(244,242,238,.22);opacity:1;}
.form .btn{width:100%;text-align:center;border:none;font-family:'Instrument Sans',sans-serif;}

/* ── CONTACT FORM BOX ── */
#contact .form{
  border:1px solid rgba(255,255,255,.1);
  padding:2rem 2rem 4.5rem;
  background:rgba(0,0,0,.35);
  max-width:100%;
}

/* ── SECTION LABEL ── */
.s-label{
  position:absolute;bottom:2.4rem;right:3rem;z-index:20;
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:.2;writing-mode:vertical-rl;
}

/* ── SCROLL HINT ── */
.scroll-hint{
  position:absolute;bottom:2rem;left:3rem;z-index:20;
  display:flex;align-items:center;gap:.8rem;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;opacity:.3;
}
.hint-line{width:40px;height:1px;background:var(--white);}

/* ── HIDDEN ON DESKTOP ── */
.mobile-scene{display:none;}
.neon-mobile-accent{display:none;}
#mobile-city-strip{display:none;}
.hero-mobile{display:none;}

/* ── MOBILE: show mobile hero SVG, hide desktop ── */
@media (max-width: 768px) {
  .hero-desktop{display:none !important;}
  #rain-canvas{display:none !important;}
  #hero-mobile-city{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:0 !important;
  }
  #hero .copy{position:relative;z-index:20;}
}

/* ── CART — text on right half desktop ── */
#cart-copy{margin-left:52%;}

/* ── NEON — text on left, signs in SVG right half ── */
#neon{justify-content:flex-start;align-items:center;overflow:hidden;}
#neon .copy{position:relative;z-index:20;width:44%;max-width:560px;margin-left:4rem;padding:2rem;}

/* Hide neon signs below 900px */
@media (max-width: 900px) {
  #neon-signs{display:none;}
  #neon-awning{display:none;}
}

/* ── CONTACT — centered on desktop ── */
#contact{
  height:auto !important;
  min-height:100vh !important;
  justify-content:center !important;
  align-items:center !important;
  padding-top:6rem !important;
  padding-bottom:6rem !important;
  overflow:visible !important;
}
#contact .copy{
  position:relative;z-index:20;
  width:560px;max-width:90vw;
  padding:0;margin:0 auto !important;
  text-align:left;
}
#contact .copy h2{
  font-size:clamp(2.8rem,5.5vw,5rem);
  margin-bottom:1rem;
}

/* ── FOOTER ── */
#site-footer{background:#050505;border-top:4px solid var(--acid);padding:3rem;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;}
.footer-logo{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.14em;color:var(--white);}
.footer-logo span{color:var(--acid);}
.footer-links{display:flex;gap:2rem;flex-wrap:wrap;}
.footer-links a{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);opacity:.35;text-decoration:none;transition:opacity .2s,color .2s;}
.footer-links a:hover{opacity:1;color:var(--acid);}
.footer-copy{font-size:.65rem;letter-spacing:.1em;opacity:.25;text-transform:uppercase;}

/* ── SECTION BACKGROUNDS ── */
#hero    {background:#050505;}
#rooftop {background:#070809;}
#cart    {background:#080706;}
#neon    {background:#060608;}
#contact {background:#0d0d0d;}

/* ── TICKER ── */
.ticker-mobile{display:none;}
.ticker{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--acid);color:var(--black);
  font-family:'Bebas Neue',sans-serif;
  font-size:.85rem;letter-spacing:.12em;
  padding:.4rem 0;overflow:hidden;white-space:nowrap;
  z-index:30;
}
.ticker-inner{display:inline-block;animation:tick 22s linear infinite;}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── RAIN CANVAS ── */
#rain-canvas{position:absolute;inset:0;opacity:.35;pointer-events:none;z-index:1;}

/* ── NEON FLICKER ── */
@keyframes flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;}
  20%,24%,55%{opacity:.3;}
}
.neon-flicker{animation:flicker 4s infinite;}

/* ── SERIF HEADLINES ── */
.serif-headline{
  font-family:'Playfair Display',serif !important;
  font-size:clamp(2.4rem,5vw,4.2rem) !important;
  font-weight:400 !important;
  line-height:1.15 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  margin-bottom:1.6rem !important;
}
.serif-headline em{font-style:italic;color:var(--acid);}
.serif-headline .hi{color:var(--acid);}
.serif-headline .alt{-webkit-text-stroke:1px var(--white);color:transparent;}

/* ── ABOUT SECTION ── */
#about{height:auto !important;min-height:100vh !important;padding:6rem 0 !important;background:#080808;}
.about-grid{
  position:relative;z-index:20;
  display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;
  width:100%;max-width:1200px;padding:0 4rem;
}
.laptop-svg{width:100%;max-width:460px;display:block;}
.about-copy .sub{max-width:100%;}
.about-stats{
  display:flex;gap:2.4rem;margin:1.6rem 0 2rem;
  border-top:1px solid var(--mid);padding-top:1.6rem;
}
.about-stat-num{display:block;font-family:'Bebas Neue',sans-serif;font-size:2.4rem;line-height:1;color:var(--acid);}
.about-stat-lbl{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.4;margin-top:.3rem;}

/* ══════════════════════════════════
   MOBILE — ≤768px
══════════════════════════════════ */
@media (max-width: 768px) {

  /* Nav */
  nav{padding:.9rem 1.2rem;}
  .nav-links{display:none !important;}
  .hamburger{display:flex;}

  /* Sections */
  section{
    height:auto !important;
    min-height:100vh;
    padding-top:4.5rem !important;
    padding-bottom:2.5rem !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }

  /* Hero */
  #hero{
    height:100vh !important;
    min-height:100vh !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  #hero .copy{padding-top:5rem !important;padding-bottom:2rem !important;}

  /* Ticker — static on mobile */
.ticker-desktop{display:none;}
.ticker-mobile{
  display:block;
  text-align:center;
  width:100%;
  padding:0;
}

  /* Contact */
  #contact{
    height:auto !important;
    min-height:100vh !important;
    justify-content:center !important;
    align-items:center !important;
    padding-top:6rem !important;
    padding-bottom:6rem !important;
    overflow:visible !important;
  }
  #contact .copy{margin:0 !important;max-width:100% !important;padding:0 var(--pad) 2rem !important;}
  .form{max-width:100%;}
  .form input,.form textarea{border-bottom-color:rgba(255,255,255,.3);}
  .form ::placeholder{color:rgba(244,242,238,.45);opacity:1;}

  /* SVG */
  .scene{position:absolute;inset:0;width:100%;height:100%;}

  /* Copy */
  .copy{
    position:relative;z-index:20;
    width:100% !important;max-width:100% !important;
    margin-left:0 !important;margin-right:0 !important;
    padding:0 var(--pad) 1.6rem !important;
  }
  #cart-copy{margin-left:0 !important;}
  #cart{min-height:100vh;}
  #cart .copy{background:rgba(8,7,6,0.6);padding:1.6rem !important;}

  /* Mobile scenes */
  .mobile-scene{
    display:block;
    width:calc(100% + (var(--pad) * 2));
    margin-left:calc(var(--pad) * -1);
    margin-bottom:1.4rem;
    overflow:hidden;
  }
  .mobile-scene svg{display:block;width:100%;height:auto;}

  /* Neon */
  .neon-mobile-accent{display:flex;justify-content:center;width:100%;margin:.6rem 0 1.4rem;}
  .neon-mobile-accent svg{margin:0 auto;display:block;}
  #neon{justify-content:flex-start !important;align-items:flex-start !important;}
  #neon .copy{width:100% !important;max-width:100% !important;margin-left:0 !important;padding:0 var(--pad) 1.6rem !important;}

  /* Typography */
  h1,h2{font-size:clamp(2.6rem,11vw,4rem);}

  /* Stats */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem;margin-top:1rem;justify-items:center;text-align:center;}
  .st-num{font-size:2.2rem;}

  /* Cards */
  .cards{grid-template-columns:1fr;}

  /* Steps — 2x2 grid with consistent borders */
  .steps{
    grid-template-columns:1fr 1fr;
    border:1px solid var(--mid);
  }
  .step{
    padding:1.2rem 1rem;
    border-left:none;
    border-top:none;
    border-right:1px solid var(--mid);
    border-bottom:1px solid var(--mid);
    transition:border-color .25s;
  }
  .step:nth-child(2){border-right:none;}
  .step:nth-child(3){
    border-right:1px solid var(--mid);
    border-bottom:none;
  }
  .step:nth-child(4){
    border-right:none;
    border-bottom:none;
  }
  .step:hover{border-color:var(--acid);}
  .s-num{font-size:2.6rem;}

  /* Decorative */
  .s-label{display:none;}
  .scroll-hint{display:none;}

  /* About */
  #about{padding:4.5rem 0 2.5rem !important;}
  .about-grid{grid-template-columns:1fr;gap:2rem;padding:0 var(--pad);}
  .laptop-svg{max-width:100%;}
  .about-stats{gap:1.4rem;}

  /* Footer */
  #site-footer{padding:2.4rem var(--pad);}
  .footer-inner{flex-direction:column;align-items:center;text-align:center;gap:1.2rem;}
  .footer-links{justify-content:center;gap:1.2rem;flex-wrap:wrap;}
  .footer-copy{margin-top:.2rem;}

  /* Ticker */
  .ticker{font-size:.66rem;}
}


/* ── Tablet 769–1024px ── */


/* Steps */
.steps{grid-template-columns:1fr 1fr;}
.step{
  padding:1.2rem 1rem;
  border:none;
  border-left:1px solid var(--mid);
}
.step:nth-child(1){border-left:1px solid var(--mid);}
.step:nth-child(2){border-left:1px solid var(--mid);}
.step:nth-child(3){border-left:1px solid var(--mid);}
.step:nth-child(4){border-left:1px solid var(--mid);}
.step:hover{border-left-color:var(--acid);}
.step:nth-child(3){border-right:none;}
.s-num{font-size:2.6rem;}