/* Custom styles supplementing Tailwind CDN */
:root { --zinc-950: #09090b; }

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

body {
  background: #110f10;
  color: #fff;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
}

#nav-toggle {
  z-index: 90;
}

/* Prevent media and SVG elements from forcing horizontal scroll */
img, picture, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure sections use box-sizing to avoid overflow from padding */
section { box-sizing: border-box; }

/* Small-screen hero adjustments */
@media (max-width: 640px) {
  /* make sure hero gallery and cards scale nicely */
  #hero-gallery { padding: 0 0.5rem !important; }
  #carousel-container > div { width: 120px !important; height: 120px !important; }
}

/* Hero top and middle mobile tweaks */
@media (max-width: 640px) {
  .hero-top {
    padding: 3.25rem 1rem 0.6rem !important;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  .hero-top > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-middle { padding: 0 0.75rem !important; align-items: center; text-align: center; }
  /* ensure gallery container centers absolutely positioned cards */
  #hero-gallery { display:flex; justify-content:center; align-items:center; }
  #carousel-container { display:block; position:relative; margin:0 auto; }
  /* reduce transform radius in mobile so center appears correct */
  #carousel-container > div { left: 50% !important; top: 50% !important; }
  /* center CTA and heading explicitly */
  #enter-store-btn { margin: 0 auto; }
}

/* Mobile: hide scroll indicator and center bottom tagline */
@media (max-width: 640px) {
  .hero-bottom { left: 1rem !important; right: 1rem !important; bottom: 1.75rem !important; justify-content: center !important; }
  .bottom-scroll { display: none !important; }
  .bottom-tagline { text-align: center !important; max-width: 100% !important; }
}

/* Top label styling (left / right) */
.hero-label-left, .hero-label-right {
  font-size: .6rem;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  white-space: nowrap;
}
.hero-label-left { letter-spacing: .35em; }
.hero-label-right { letter-spacing: .25em; }

/* Reduce letter-spacing on small screens to avoid wrapping */
@media (max-width: 640px) {
  .hero-label-left { letter-spacing: .12em; }
  .hero-label-right { letter-spacing: .08em; }
  .hero-top { justify-content: space-between; }
}


/* ---- NAV OVERLAY ---- */
#nav-overlay {
  position: fixed;
  top: 3.5rem;
  right: 1.25rem;
  z-index: 60;
  background: rgba(17,15,16,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem;
  width: 280px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
#nav-overlay.nav-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* ---- GRADIENT TEXT ---- */
.grad-text {
  background: linear-gradient(to right, #fff, #a1a1aa, #52525b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- CARD HOVER BORDER ---- */
.card {
  transition: background 0.4s, border-color 0.4s;
}
.card:hover { background: rgba(39,39,42,.5) !important; border-color: rgba(255,255,255,.2) !important; }

/* ---- VIDEO / IMG cover ---- */
.media-cover { width:100%; height:100%; object-fit:cover; }

/* ---- FILTER PILLS ---- */
.pill { cursor: pointer; user-select: none; transition: all .2s; }
.pill.active { background:#18181b; border-color:rgba(255,255,255,.2); color:#fff; }

/* ---- HERO VIDEO SECTION ---- */
.hero-wrapper { position: relative; height: 300vh; background: #000; }
.hero-sticky { position: sticky; top:0; height: 100vh; display:flex; flex-direction:column; overflow:hidden; }

/* ---- FADE IN ON SCROLL ---- */
.fade-in { opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade-in.visible { opacity:1; transform: none; }

/* ---- BACK BTN ---- */
.back-btn { display:inline-flex; align-items:center; gap:.5rem; color:#d9d9d9; font-size:.875rem; text-decoration:none; transition: color .2s; }
.back-btn:hover { color:#fff; }

/* ---- FORM INPUT ---- */
.form-input {
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.15);
  color:#fff; padding:.75rem .25rem; font-size:1rem; outline:none; transition: border-color .2s;
}
.form-input::placeholder { color:#52525b; }
.form-input:focus { border-bottom-color: #fff; }

/* ---- BOTTOM BAR ---- */
.bottom-bar {
  position:fixed; bottom:0; left:0; width:100%;
  background: rgba(0,0,0,.85); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.1);
  padding:1rem 1.5rem;
  z-index:40;
  display:flex; justify-content:center; gap:1rem;
}

/* ---- PORTFOLIO STAGGER ---- */
@media (min-width: 768px) {
  .portfolio-offset { margin-top: 8rem; }
}

/* ---- SCROLL REVEAL ---- */
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
.anim { animation: fadeUp .7s ease forwards; }

/* ---- TECH PILL ---- */
.tech-pill {
  font-size:.6rem; text-transform:uppercase; letter-spacing:.05em;
  background: #18181b; border:1px solid rgba(255,255,255,.1);
  padding:.35rem .75rem; border-radius:9999px;
  background: linear-gradient(to right, #e4e4e7, #a1a1aa, #d9d9d9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  border-color: rgba(255,255,255,.1);
}

/* ---- STEP CARD ---- */
.step-card { transition: background .4s, border-color .4s; }
.step-card:hover { background: rgba(39,39,42,.45) !important; border-color: rgba(255,255,255,.1) !important; }
.step-card:hover .step-arrow { opacity:1; }
.step-arrow { opacity:0; transition: opacity .3s; }

/* ---- INDUSTRIES ---- */
.industry-tab { cursor:pointer; transition: color .2s; }
.industry-tab.active { color:#fff; }

/* ---- QUOTE TABLE ---- */
.qty-btn { padding:.25rem; border-radius:.25rem; color:#d9d9d9; transition: background .2s, color .2s; }
.qty-btn:hover { background: rgba(255,255,255,.1); color:#fff; }

/* ---- NAV RESPONSIVE ---- */
/* Desktop: show links, hide toggle */
@media (min-width: 1024px) { #nav-toggle { display:none !important; } }
/* Tablet / Mobile: hide links, show toggle */
@media (max-width: 1023px) { #header-links { display:none !important; } }

/* ---- EDITORIAL SCROLL REVEALS ---- */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.35s; }
.reveal-delay-4 { transition-delay:.5s; }
.reveal-line { width:0; transition:width 1.1s cubic-bezier(.16,1,.3,1); background:rgba(255,255,255,.12); height:1px; }
.reveal-line.in { width:100%; }
.scroll-line { display:inline-block; width:3rem; height:1px; background:rgba(255,255,255,.2); position:relative; overflow:hidden; vertical-align:middle; }
.scroll-line::after { content:''; position:absolute; inset:0; background:#fff; transform:translateX(-100%); animation:scanline 2s ease infinite; }
@keyframes scanline { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }
/* Work card hover */
.work-card { position:relative; overflow:hidden; cursor:pointer; }
.work-card-label { position:absolute; bottom:0; left:0; right:0; padding:1.5rem; transform:translateY(100%); transition:transform .4s cubic-bezier(.16,1,.3,1); background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 100%); }
.work-card:hover .work-card-label { transform:none; }
.work-card-overlay { position:absolute; inset:0; background:rgba(255,255,255,.04); opacity:0; transition:opacity .3s; }
.work-card:hover .work-card-overlay { opacity:1; }
/* Service row hover */
.svc-row { border-top:1px solid rgba(255,255,255,.08); transition:border-color .3s; }
.svc-row:hover { border-color:rgba(255,255,255,.25); }
.svc-arrow { opacity:0; transform:translateX(-8px); transition:opacity .3s, transform .3s; }
.svc-row:hover .svc-arrow { opacity:1; transform:none; }
.svc-num { transition:color .3s; }
.svc-row:hover .svc-num { color:#fff; }
/* editorial cursor line blink */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
/* Mobile: footer-grid & reveals */
@media(max-width:640px){ .footer-grid{grid-template-columns:1fr!important;} }

/* ---- WEB DESIGN PAGE GRIDS ---- */
.wd-whatwedo-outer { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.wd-whatwedo-inner { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.wd-process-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0; }
@media (max-width:900px) {
  .wd-whatwedo-outer { grid-template-columns:1fr; gap:3rem; }
  .wd-whatwedo-inner { grid-template-columns:1fr 1fr; }
  .wd-process-grid { grid-template-columns:1fr 1fr; }
  .wd-process-grid > div { border-left:none !important; border-right:none !important; border-top:1px solid rgba(255,255,255,.08) !important; }
}
@media (max-width:540px) {
  .wd-whatwedo-inner { grid-template-columns:1fr; gap:1.25rem; }
  .wd-process-grid { grid-template-columns:1fr; }
}

/* ---- SITE FOOTER ---- */
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; }
@media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:540px) { .footer-grid { grid-template-columns:1fr; } }

/* ---- SUCCESS ANIM ---- */
@keyframes scaleIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.scale-in { animation: scaleIn .4s ease forwards; }