/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Palette: Gray/Black/White + soft beige accent */
:root{
  --bg:#0f0f10;
  --bg-2:#151516;
  --text:#e8e8e8;
  --muted:#bdbdbd;
  --line:#2a2a2c;
  --beige:#d8d3c4;
  --card:#17181a;
  --shadow:rgba(0,0,0,.25);
}

html{scroll-behavior:smooth}
body{
  font-family:'Syne', Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(to bottom,#0e0e10,#111113 40%,#121214);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}

/* Scroll progress bar */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--beige),#ffffff);z-index:1200;box-shadow:0 0 6px rgba(216,211,196,.6);transition:width .15s linear}

/* Sticky Nav */
.site-nav{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,48px);
  background:transparent;
  backdrop-filter:blur(0px);
  
  transition:background .2s ease, padding .2s ease;
}
.site-nav.scrolled{background:transparent}
.brand .brand-link { font-family: 'Clash Grotesk', sans-serif; font-weight: 600; font-size: 2rem; letter-spacing: .18rem; text-decoration: none; color: var(--text); text-transform: uppercase; }
.brand .brand-link { font-family:'Syne',sans-serif;font-weight:700;font-size:2.2rem;letter-spacing:.08rem;text-transform:uppercase;text-decoration:none;color:#f5f5f5;transition:color .3s ease,transform .3s ease; } .brand .brand-link:hover { color:#00aaff;transform:scale(1.05); } .brand .brand-m { font-weight:inherit;color:inherit; }
.brand .brand-link .brand-m { font-weight: 900; font-size: 2.4rem; letter-spacing: .3rem; color: var(--text); }
.nav-links{list-style:none; display:flex; gap:24px}
.site-nav .nav-links a{opacity:.88}
.site-nav .nav-links a:hover{opacity:1}
.nav-links a{color:var(--text); text-decoration:none; font-weight:600; font-size:1rem; padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .15s ease, opacity .15s ease}
.nav-links a.active{color:var(--beige); border-bottom-color:var(--beige); opacity:1}

/* Hero */
header.hero{
  min-height:84vh; position:relative; display:grid; place-items:center; text-align:center;
  background:url('bg.jpg') center/cover no-repeat;
}
header.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.75))}
.hero-inner{position:relative; z-index:1; padding:0 20px; max-width:960px}
.hero-title{font-size:clamp(2rem,5vw,3.4rem); font-weight:800; letter-spacing:.02em}
.hero-tag {
  position: relative;
  top: 280px;             /* keeps it pushed down */
  white-space: nowrap;     /* prevent wrapping */
  overflow: hidden;        /* hide overflow */

  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
}
.cta-btn{display:inline-block; margin-top:24px; padding:12px 20px; border-radius:10px; background:var(--beige); color:#111; font-weight:800; text-decoration:none; box-shadow:0 10px 20px rgba(216,211,196,.18); transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease}
.cta-btn:hover{transform:translateY(-1px); box-shadow:0 12px 24px rgba(216,211,196,.24); opacity:.96}

/* Sections (reveal) */
section{padding:80px 20px; max-width:1200px; margin:auto; opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; will-change:opacity,transform}
section.visible{opacity:1; transform:translateY(0)}
h2{text-align:center; margin-bottom:32px; font-size:clamp(1.6rem,3.4vw,2.1rem); font-weight:800}

/* About container + particles canvas */
#about{position:relative; overflow:hidden}
#aboutParticles{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; /* behind content */
  opacity:.25; /* subtle */
}
.about-clean{position:relative; z-index:1}

.section-content{background:var(--card); padding:36px; border-radius:14px; border:1px solid var(--line); box-shadow:0 8px 20px var(--shadow)}
.about-clean .about-lead{color:var(--muted); font-size:1.08rem; margin-bottom:18px}
.how-we-work{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.how-we-work .item{border:1px solid var(--line); border-radius:12px; padding:16px; background:#141516; transition:transform .12s ease, border-color .12s ease}
.how-we-work .item:hover{transform:translateY(-2px); border-color:#2d2e31}
.how-we-work h3{font-size:1rem; margin-bottom:6px; color:var(--text)}
.how-we-work p{font-size:.98rem; color:var(--muted)}

/* Services grid with flip-cards */
.services{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; perspective:1000px}
.flip{
  position:relative; height:250px; border-radius:12px; outline:none; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.flip:focus-visible{box-shadow:0 0 0 3px rgba(216,211,196,.18)}
.card-inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.6,.2,1);
  border:1px solid var(--line); border-radius:12px; background:#141516; box-shadow:0 8px 18px var(--shadow);
}
.flip:hover .card-inner{transform:rotateY(180deg)}
.flip.flipped .card-inner{transform:rotateY(180deg)}
.card-face{
  position:absolute; inset:0; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px; text-align:center; border-radius:12px;
}
.card-face.front h3{color:var(--beige); margin-bottom:8px; font-size:1.08rem; font-weight:800}
.card-face.front p{color:var(--muted); font-size:.98rem}
.card-face.back{transform:rotateY(180deg)}
.card-face.back h4{color:var(--beige); margin-bottom:8px}
.card-face.back ul{list-style:disc; padding-left:18px; text-align:left; color:var(--muted)}
.hint{position:absolute; bottom:10px; right:12px; font-size:.75rem; color:#9a9a9a}

/* Contact */
form.contact-form{max-width:740px; margin:0 auto 10px; display:flex; flex-direction:column; gap:16px}
input, textarea{padding:14px; border-radius:10px; border:1px solid var(--line); background:#121315; color:var(--text); font-size:1rem; transition:border-color .12s ease, box-shadow .12s ease}
input:focus, textarea:focus{outline:none; border-color:var(--beige); box-shadow:0 0 0 3px rgba(216,211,196,.1)}
button{padding:14px; border:none; border-radius:10px; cursor:pointer; font-weight:800; font-size:1.02rem; background:var(--beige); color:#111; box-shadow:0 10px 20px rgba(216,211,196,.18); transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease}
button:hover{transform:translateY(-1px); box-shadow:0 12px 24px rgba(216,211,196,.25); opacity:.96}
.contact-info{margin-top:14px; text-align:center; color:var(--muted); font-size:.98rem}
.contact-info a{color:var(--beige); text-decoration:none}
.contact-info a:hover{opacity:.9}

/* Footer */
footer{background:#0e0f11; padding:48px 20px 18px; border-top:1px solid var(--line)}
.footer-content{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; padding-bottom:24px}
.footer-section h3{color:var(--beige); font-size:1.04rem; margin-bottom:10px; font-weight:800}
.footer-section p{color:var(--muted)}
.footer-section ul{list-style:none}
.footer-section li{margin:8px 0}
.footer-section a{color:var(--text); text-decoration:none}
.footer-section a:hover{color:var(--beige)}
.newsletter-form{display:flex; gap:8px}
.newsletter-form input{flex:1}
.social-links{display:flex; gap:10px; margin-top:6px}
.social-icon{font-size:1.2rem; text-decoration:none; color:var(--text)}
.social-icon:hover{opacity:.9}
.footer-bottom{border-top:1px solid var(--line); text-align:center; padding-top:12px}
.footer-bottom p{color:var(--muted); font-size:.92rem}

/* Contact strip */
#contactStrip{
  position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:900;
  display:flex; gap:10px; background:#131416; border:1px solid var(--line);
  padding:8px 10px; border-radius:999px; box-shadow:0 10px 20px var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
#contactStrip a{color:#111; text-decoration:none; font-weight:800; font-size:.95rem; padding:8px 14px; border-radius:999px; background:var(--beige)}
#contactStrip.show{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Remove on-card hint labels */
.hint { display: none !important; }

/* Lower the hero "Explore Services" button */
.hero .cta-btn {
  margin-top: 300px !important;
}