/* ================================================================
   WEB ARTISANS — main.css v1.2
   ================================================================ */

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

/* ── CSS VARIABLES (overridden by PHP injected block) ────────── */
:root {
  --black:     #0a0a0a;
  --off-black: #111111;
  --charcoal:  #1a1a1a;
  --white:     #f5f0e8;
  --cream:     #e8e0d0cc;
  --acid:      #c8f020;
  --acid-dim:  #a0c010;
  --rust:      #e84020;
  --muted:     #666;
  --border:    rgba(245,240,232,0.1);
  --outline-stroke: #f5f0e8;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --nav-h:     72px;
  --demo-h:    44px;
  --shadow:    0 8px 40px rgba(0,0,0,.4);
}

/* ── LIGHT MODE — rich warm cream palette ─────────────────────── */
[data-theme="light"] {
  --black:          #faf7f1;
  --off-black:      #f2ede3;
  --charcoal:       #e9e2d5;
  --white:          #18160f;
  --cream:          #2e2a20cc;
  --muted:          #7a7060;
  --border:         rgba(24,22,15,0.1);
  --outline-stroke: #18160f;
  --shadow:         0 8px 40px rgba(0,0,0,.12);
}
[data-theme="light"] body::before          { opacity:.06; }
[data-theme="light"] .hero-bg-grid         { background-image: linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px); }
[data-theme="light"] .hero-bg-circle       { background: radial-gradient(circle,rgba(200,240,32,.2) 0%,transparent 70%); }
[data-theme="light"] h1 .outline           { -webkit-text-stroke: 2px var(--white); }
[data-theme="light"] .outline-text         { -webkit-text-stroke: 1.5px var(--white); }
[data-theme="light"] nav.scrolled          { background: rgba(250,247,241,.95); box-shadow: 0 1px 20px rgba(0,0,0,.06); }
[data-theme="light"] .mobile-menu          { background: var(--off-black); }
[data-theme="light"] .hero-card            { box-shadow: 0 8px 40px rgba(0,0,0,.1); }
[data-theme="light"] .about-img-main       { background: #ddd8cc; }
[data-theme="light"] .about-float-card     { box-shadow: 0 8px 32px rgba(0,0,0,.15); }
[data-theme="light"] .service-card         { box-shadow: 0 2px 16px rgba(0,0,0,.06); }
[data-theme="light"] .service-card:hover   { box-shadow: 0 8px 32px rgba(0,0,0,.1); }
[data-theme="light"] .testimonial-card     { box-shadow: 0 2px 16px rgba(0,0,0,.06); }
[data-theme="light"] .page-banner          { background: linear-gradient(135deg,#1c1a16 0%,#2e2a20 100%); }
[data-theme="light"] .page-banner .section-tag,
[data-theme="light"] .page-banner h1,
[data-theme="light"] .page-banner p { color:#f5f0e8 !important; -webkit-text-stroke:0 !important; }
[data-theme="light"] .page-banner .outline-text { color:transparent; -webkit-text-stroke:1px #f5f0e8 !important; }
[data-theme="light"] .marquee-wrap         { background: var(--acid); }
[data-theme="light"] #cta                  { background: linear-gradient(135deg,#1c1a16,#2a2620); color:#f5f0e8; }
[data-theme="light"] #cta h2,
[data-theme="light"] #cta p,
[data-theme="light"] #cta .section-tag     { color:#f5f0e8 !important; }
[data-theme="light"] #cta .section-tag::before { background:#f5f0e8 !important; }
[data-theme="light"] .footer-badge .badge-dot { animation: pulse 2s ease-in-out infinite; }
[data-theme="light"] .demo-banner          { background: var(--acid); color: var(--black); }
[data-theme="light"] .demo-banner-btn      { background: #18160f; color: #f5f0e8; }
[data-theme="light"] .typewriter-cursor    { color: var(--acid); }

/* ── BASE ───────────────────────────────────────────────────────  */
html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  transition: background .35s ease, color .35s ease;
}
@media (hover:none) { body { cursor:auto; } .cursor,.cursor-ring { display:none; } }

/* Noise texture */
body::before {
  content:''; position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:100; opacity:.4; transition:opacity .3s;
}

/* ── CURSOR ──────────────────────────────────────────────────── */
.cursor {
  width:12px; height:12px; background:var(--acid);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .3s, height .3s; mix-blend-mode:difference;
}
.cursor-ring {
  width:40px; height:40px; border:1px solid var(--acid);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .15s ease, width .3s, height .3s, opacity .3s; opacity:.5;
}

/* ── FREE DEMO BANNER ────────────────────────────────────────── */
.demo-banner {
  position:fixed; top:0; left:0; right:0; z-index:600;
  background:var(--acid); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  gap:16px; padding:10px 20px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.5px;
  height:var(--demo-h);
  transition:transform .4s ease;
}
.demo-banner.hidden { transform:translateY(-100%); }
.demo-banner-text   { font-weight:700; }
.demo-banner-btn {
  background:var(--black); color:var(--acid);
  padding:6px 18px; font-family:var(--font-mono);
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  text-decoration:none; border:none; cursor:pointer;
  transition:background .2s, color .2s;
  white-space:nowrap;
}
.demo-banner-btn:hover { background:var(--charcoal); }
.demo-banner-close {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:var(--black); cursor:pointer;
  font-size:16px; opacity:.6; transition:opacity .2s;
}
.demo-banner-close:hover { opacity:1; }

/* ── NAV ─────────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:20px 48px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid transparent;
  transition:background .4s, border-color .4s, padding .4s, top .4s;
}
nav.has-demo-banner { top: var(--demo-h); }
nav.scrolled {
  background:rgba(10,10,10,.95);
  border-color:var(--border); padding:14px 48px;
  backdrop-filter:blur(20px);
}
nav.scrolled.has-demo-banner { top:0; }

.nav-logo {
  font-family:var(--font-display); font-size:26px;
  letter-spacing:3px; color:var(--white); text-decoration:none;
  display:flex; align-items:center; gap:2px;
  transition:color .2s; white-space:nowrap;
}
.nav-logo span  { color:var(--acid); }
.nav-logo img   { max-height:38px; width:auto; }

.nav-links      { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a    { color:var(--white); text-decoration:none; font-size:12px; font-weight:400; letter-spacing:1.5px; text-transform:uppercase; opacity:.7; transition:opacity .2s, color .2s; }
.nav-links a:hover { opacity:1; color:var(--acid); }
.nav-cta, .nav-demo-btn {
  background:var(--acid); color:var(--black) !important;
  padding:9px 22px !important; opacity:1 !important;
  font-weight:700 !important; font-family:var(--font-mono);
  font-size:11px !important; letter-spacing:1px !important;
  transition:background .2s, transform .2s !important;
  white-space:nowrap;
}
.nav-cta:hover, .nav-demo-btn:hover { background:var(--acid-dim) !important; }

.theme-toggle {
  background:transparent; border:1px solid var(--border); color:var(--white);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; line-height:1;
  transition:border-color .2s, transform .2s, background .2s; padding:0;
}
.theme-toggle:hover { border-color:var(--acid); background:rgba(200,240,32,.08); transform:rotate(20deg); }

.nav-right-mobile { display:none; align-items:center; gap:10px; }
.theme-toggle-mobile { display:none; }
.hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:transparent; border:none; }
.hamburger span { display:block; width:26px; height:2px; background:var(--white); transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position:fixed; inset:0; background:var(--black); z-index:400;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px;
  opacity:0; pointer-events:none; transform:translateY(-20px); transition:all .4s;
}
.mobile-menu.open { opacity:1; pointer-events:all; transform:translateY(0); }
.mobile-menu a    { font-family:var(--font-display); font-size:46px; letter-spacing:4px; color:var(--white); text-decoration:none; transition:color .2s; }
.mobile-menu a:hover, .mobile-menu a.mobile-demo-btn { color:var(--acid); }
.mobile-demo-btn  { font-size:22px !important; letter-spacing:3px !important; }

/* ── PAGE BANNER (inner pages) ───────────────────────────────── */
.page-banner {
  position:relative; min-height:380px;
  display:flex; align-items:center; justify-content:flex-start;
  padding: calc(var(--nav-h) + 60px) 48px 80px;
  background: var(--off-black);
  overflow:hidden;
}
.page-banner.has-demo-banner { padding-top: calc(var(--nav-h) + var(--demo-h) + 60px); }
.page-banner--sm { min-height:280px; }
.page-banner--contact { min-height:340px; }
.page-banner-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(200,240,32,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(200,240,32,.04) 1px,transparent 1px);
  background-size:80px 80px;
}
.page-banner-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 80% 50%, rgba(200,240,32,.06),transparent);
}
.page-banner-content { position:relative; z-index:2; max-width:720px; }
.page-banner-title   { font-family:var(--font-display); font-size:clamp(48px,6vw,88px); line-height:.92; letter-spacing:-1px; margin-bottom:16px; }
.page-banner-sub     { font-size:18px; opacity:.6; max-width:520px; line-height:1.7; }

/* ── HERO ────────────────────────────────────────────────────── */
#hero {
  min-height:100vh; position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center;
  padding:0 48px;
  padding-top: calc(var(--nav-h) + 20px);
  padding-bottom:220px;
  overflow:hidden;
}
#hero.has-demo-banner { padding-top: calc(var(--nav-h) + var(--demo-h) + 20px); }

.hero-bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(200,240,32,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,240,32,.04) 1px,transparent 1px);
  background-size:80px 80px; pointer-events:none;
}
.hero-bg-circle {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,240,32,.08) 0%,transparent 70%);
  top:50%; right:-100px; transform:translateY(-50%); pointer-events:none;
}
.hero-content { position:relative; z-index:2; }
.hero-eyebrow {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:3px; text-transform:uppercase; color:var(--acid);
  margin-bottom:28px; display:flex; align-items:center; gap:12px;
}
.hero-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--acid); }

h1 {
  font-family:var(--font-display);
  font-size:clamp(60px,7.5vw,120px);
  line-height:.91; letter-spacing:-1px; margin-bottom:32px;
}
h1 .outline { -webkit-text-stroke:1px var(--outline-stroke); color:transparent; }
h1 .accent  { color:var(--acid); }

/* ── TYPEWRITER ──────────────────────────────────────────────── */
.typewriter-target {
  display:inline-block;
  border-right:none;
  min-width:10px;
}
.typewriter-cursor {
  display:inline-block;
  color:var(--acid);
  font-family:var(--font-display);
  font-size:inherit;
  line-height:1;
  animation:blink .75s step-end infinite;
  margin-left:2px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-desc { font-size:16px; line-height:1.8; opacity:.65; max-width:420px; margin-bottom:48px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }

.btn-primary {
  background:var(--acid); color:var(--black);
  padding:16px 40px; font-family:var(--font-mono);
  font-size:12px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .2s, box-shadow .2s; position:relative; overflow:hidden;
}
.btn-primary::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.1); transform:translateX(-101%); transition:transform .3s; }
.btn-primary:hover  { transform:translateY(-3px); box-shadow:0 20px 40px rgba(200,240,32,.25); }
.btn-primary:hover::after { transform:translateX(0); }

.btn-secondary {
  background:transparent; color:var(--white);
  padding:16px 40px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--border);
  display:inline-flex; align-items:center; gap:10px;
  transition:border-color .2s, color .2s, transform .2s;
}
.btn-secondary:hover { border-color:var(--acid); color:var(--acid); transform:translateY(-3px); }

/* Hero card */
.hero-visual  { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
.hero-card-stack { position:relative; width:100%; max-width:480px; margin:0 auto; }
.hero-card { background:var(--charcoal); border:1px solid var(--border); padding:28px; border-radius:4px; position:relative; transition:background .3s; }
.hero-card-back  { position:absolute; top:-16px; right:-16px; width:100%; height:100%; background:var(--off-black); border:1px solid var(--border); border-radius:4px; z-index:-1; }
.hero-card-back2 { position:absolute; top:-32px; right:-32px; width:100%; height:100%; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:4px; z-index:-2; }
.card-browser-bar { display:flex; align-items:center; gap:8px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.dot { width:10px; height:10px; border-radius:50%; }
.dot-r{background:#ff5f57}.dot-y{background:#ffbd2e}.dot-g{background:var(--acid)}
.browser-url { flex:1; background:rgba(255,255,255,.05); border-radius:20px; padding:6px 14px; font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-left:8px; }
.card-metric { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; }
.metric-label { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.metric-value { font-family:var(--font-display); font-size:48px; color:var(--acid); letter-spacing:2px; line-height:1; }
.metric-change { font-family:var(--font-mono); font-size:11px; color:#4ade80; }
.mini-chart { display:flex; align-items:flex-end; gap:4px; height:60px; margin-bottom:20px; }
.bar { flex:1; background:var(--border); border-radius:2px; animation:barPulse 2s ease-in-out infinite alternate; }
.bar:nth-child(1){height:40%;animation-delay:0s}
.bar:nth-child(2){height:65%;animation-delay:.1s}
.bar:nth-child(3){height:45%;animation-delay:.2s}
.bar:nth-child(4){height:80%;animation-delay:.3s;background:var(--acid);opacity:.6}
.bar:nth-child(5){height:55%;animation-delay:.4s}
.bar:nth-child(6){height:90%;animation-delay:.5s;background:var(--acid)}
.bar:nth-child(7){height:70%;animation-delay:.6s}
.bar:nth-child(8){height:95%;animation-delay:.7s;background:var(--acid)}
@keyframes barPulse{from{opacity:.5}to{opacity:1}}
.card-tags { display:flex; gap:8px; flex-wrap:wrap; }
.tag { background:rgba(200,240,32,.1); color:var(--acid); padding:4px 12px; border-radius:20px; font-size:10px; font-family:var(--font-mono); letter-spacing:.5px; border:1px solid rgba(200,240,32,.2); }

/* Hero stats bar */
.hero-stats {
  position:absolute; bottom:0; left:48px; right:48px;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
}
.stat-item { padding:28px 24px; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:var(--font-display); font-size:40px; letter-spacing:2px; line-height:1; margin-bottom:6px; }
.stat-num span { color:var(--acid); }
.stat-label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }

/* ── SHARED SECTION ──────────────────────────────────────────── */
section { padding:120px 48px; }
.section-tag {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:3px; text-transform:uppercase; color:var(--acid);
  margin-bottom:20px; display:flex; align-items:center; gap:12px;
}
.section-tag::before { content:''; display:block; width:24px; height:1px; background:var(--acid); }
h2 { font-family:var(--font-display); font-size:clamp(44px,5vw,80px); line-height:.95; letter-spacing:1px; margin-bottom:24px; }
.outline-text { -webkit-text-stroke:1px var(--outline-stroke); color:transparent; }

/* ── MARQUEE ─────────────────────────────────────────────────── */
.marquee-wrap { background:var(--acid); overflow:hidden; padding:18px 0; }
.marquee-track { display:flex; animation:marquee 20s linear infinite; width:max-content; }
.marquee-item { font-family:var(--font-display); font-size:22px; letter-spacing:3px; color:var(--black); padding:0 40px; display:flex; align-items:center; gap:20px; white-space:nowrap; }
.marquee-item::after { content:'✦'; font-size:12px; }
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── ABOUT (homepage) ────────────────────────────────────────── */
#about { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.about-visual { position:relative; }
.about-img-main {
  width:100%; aspect-ratio:4/5; background:var(--charcoal);
  border:1px solid var(--border); position:relative; overflow:hidden; border-radius:2px;
}
.about-img-main::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(200,240,32,.1) 0%,transparent 50%),repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(200,240,32,.03) 20px,rgba(200,240,32,.03) 21px);
}
.about-img-main .big-number {
  font-family:var(--font-display); font-size:140px; line-height:1;
  color:rgba(200,240,32,.12); letter-spacing:-4px; position:absolute; top:20px; left:20px;
}
.about-float-card {
  position:absolute; right:-32px; bottom:60px;
  background:var(--acid); padding:24px 28px; width:180px; border-radius:2px; z-index:2;
}
.float-card-num   { font-family:var(--font-display); font-size:52px; color:var(--black); line-height:1; margin-bottom:4px; }
.float-card-label { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--black); opacity:.7; }
.about-content p  { font-size:16px; line-height:1.9; opacity:.7; margin-bottom:24px; }
.about-features   { margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.about-feature    { padding:24px; border:1px solid var(--border); border-radius:2px; transition:border-color .3s, background .3s; }
.about-feature:hover { border-color:var(--acid); background:rgba(200,240,32,.03); }
.feature-icon     { font-size:24px; margin-bottom:12px; }
.about-feature h4 { font-size:13px; font-weight:500; letter-spacing:.5px; margin-bottom:6px; }
.about-feature p  { font-size:12px; opacity:.5; margin-bottom:0; line-height:1.6; }

/* ── SERVICES (homepage) ─────────────────────────────────────── */
#services { background:var(--off-black); }
.services-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:80px; flex-wrap:wrap; gap:32px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.service-card { background:var(--off-black); padding:48px 40px; position:relative; overflow:hidden; transition:background .4s; }
.service-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--acid); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.service-card:hover { background:var(--charcoal); }
.service-card:hover::before { transform:scaleX(1); }
.service-num  { font-family:var(--font-mono); font-size:11px; color:var(--acid); letter-spacing:2px; margin-bottom:32px; opacity:.7; }
.service-icon-wrap { width:56px; height:56px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:28px; font-size:24px; transition:border-color .3s, background .3s; }
.service-card:hover .service-icon-wrap { border-color:var(--acid); background:rgba(200,240,32,.08); }
.service-card h3 { font-family:var(--font-display); font-size:28px; letter-spacing:1px; margin-bottom:16px; line-height:1.1; }
.service-card p  { font-size:14px; line-height:1.7; opacity:.55; margin-bottom:28px; }
.service-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.service-list li { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; font-family:var(--font-mono); }
.service-list li::before { content:'→'; color:var(--acid); font-size:10px; }
.service-arrow { position:absolute; bottom:40px; right:40px; width:40px; height:40px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); transition:all .3s; border-radius:50%; }
.service-card:hover .service-arrow { background:var(--acid); border-color:var(--acid); color:var(--black); transform:rotate(45deg); }

/* ── CTA ─────────────────────────────────────────────────────── */
#cta { background:var(--acid); color:var(--black); padding:120px 48px; position:relative; overflow:hidden; }
#cta::before { content:'START'; position:absolute; font-family:var(--font-display); font-size:280px; color:rgba(0,0,0,.06); right:-20px; top:50%; transform:translateY(-50%); letter-spacing:-10px; pointer-events:none; line-height:1; }
.cta-inner   { max-width:800px; position:relative; z-index:2; }
#cta .section-tag { color:rgba(0,0,0,.5); }
#cta .section-tag::before { background:rgba(0,0,0,.4); }
#cta h2 { color:var(--black); }
#cta p  { font-size:18px; opacity:.65; margin-bottom:48px; line-height:1.7; max-width:560px; }
.cta-btns { display:flex; gap:16px; flex-wrap:wrap; }
.btn-dark { background:var(--black); color:var(--acid); padding:18px 48px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:transform .2s, box-shadow .2s; }
.btn-dark:hover { transform:translateY(-3px); box-shadow:0 20px 40px rgba(0,0,0,.3); }
.btn-outline-dark { background:transparent; color:var(--black); padding:18px 48px; font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:10px; border:2px solid var(--black); transition:all .2s; }
.btn-outline-dark:hover { background:var(--black); color:var(--acid); }

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.testimonials-header { margin-bottom:80px; }
.testimonials-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card { background:var(--charcoal); border:1px solid var(--border); padding:40px; border-radius:2px; transition:border-color .3s, transform .3s; }
.testimonial-card:hover { border-color:var(--acid); transform:translateY(-4px); }
.testimonial-card.featured { background:var(--off-black); border-color:var(--acid); }
.quote-mark { font-family:Georgia,serif; font-size:72px; line-height:.7; color:var(--acid); opacity:.3; margin-bottom:20px; display:block; }
.testimonial-text { font-size:15px; line-height:1.8; opacity:.75; margin-bottom:32px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:16px; padding-top:24px; border-top:1px solid var(--border); }
.author-avatar { width:48px; height:48px; border-radius:50%; background:var(--acid); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px; color:var(--black); flex-shrink:0; }
.author-name { font-size:14px; font-weight:500; margin-bottom:2px; }
.author-role { font-size:11px; color:var(--muted); font-family:var(--font-mono); letter-spacing:.5px; }
.stars { color:var(--acid); font-size:12px; margin-bottom:16px; letter-spacing:2px; }

/* ── CONTACT (homepage) ──────────────────────────────────────── */
#contact { background:var(--off-black); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start; }
.contact-info h2 { margin-bottom:24px; }
.contact-info p  { font-size:16px; line-height:1.8; opacity:.6; margin-bottom:48px; }
.contact-details { display:flex; flex-direction:column; gap:24px; margin-bottom:48px; }
.contact-item    { display:flex; gap:20px; align-items:flex-start; }
.contact-item-icon { width:44px; height:44px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.contact-item-text label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; font-family:var(--font-mono); }
.contact-item-text span  { font-size:15px; }

/* CF7 Form */
.contact-form-wrap .wpcf7 form { display:flex; flex-direction:column; gap:20px; }
.contact-form-wrap .wpcf7 p    { display:flex; flex-direction:column; gap:8px; margin:0; }
.contact-form-wrap .wpcf7 label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-family:var(--font-mono); }
.contact-form-wrap .wpcf7 input[type="text"],
.contact-form-wrap .wpcf7 input[type="email"],
.contact-form-wrap .wpcf7 input[type="tel"],
.contact-form-wrap .wpcf7 select,
.contact-form-wrap .wpcf7 textarea {
  background:var(--charcoal); border:1px solid var(--border); color:var(--white);
  padding:14px 18px; font-size:14px; font-family:var(--font-body);
  outline:none; transition:border-color .2s; border-radius:2px; width:100%; -webkit-appearance:none;
}
.contact-form-wrap .wpcf7 input:focus,
.contact-form-wrap .wpcf7 select:focus,
.contact-form-wrap .wpcf7 textarea:focus { border-color:var(--acid); }
.contact-form-wrap .wpcf7 textarea { resize:vertical; min-height:120px; }
.contact-form-wrap .wpcf7 input[type="submit"] {
  background:var(--acid); color:var(--black); border:none;
  padding:16px 40px; font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; cursor:pointer; width:auto;
  transition:background .2s, transform .2s; align-self:flex-start;
}
.contact-form-wrap .wpcf7 input[type="submit"]:hover { background:var(--acid-dim); transform:translateY(-2px); }
.wpcf7-not-valid-tip    { color:#e84020; font-size:11px; font-family:var(--font-mono); margin-top:4px; }
.wpcf7-response-output  { margin-top:16px; padding:12px 16px; font-family:var(--font-mono); font-size:12px; border-radius:2px; }
.wpcf7-mail-sent-ok     { border:1px solid #4ade80 !important; color:#4ade80 !important; background:rgba(74,222,128,.05) !important; }
.wpcf7-validation-errors{ border:1px solid #e84020 !important; color:#e84020 !important; background:rgba(232,64,32,.05) !important; }
.cf7-notice { background:var(--charcoal); border:1px solid var(--acid); padding:32px; border-radius:2px; }
.cf7-notice p { font-size:14px; line-height:1.8; }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer { background:var(--black); border-top:1px solid var(--border); padding:80px 48px 40px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; margin-bottom:80px; padding-bottom:80px; border-bottom:1px solid var(--border); }
.footer-brand p { font-size:14px; line-height:1.8; opacity:.5; margin:20px 0 32px; max-width:280px; }
.social-links { display:flex; gap:12px; }
.social-link { width:40px; height:40px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; text-decoration:none; color:var(--muted); transition:all .2s; }
.social-link:hover { border-color:var(--acid); color:var(--acid); }
.footer-col h4 { font-size:11px; letter-spacing:2px; text-transform:uppercase; margin-bottom:24px; font-family:var(--font-mono); }
.footer-links  { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-links a{ text-decoration:none; font-size:14px; color:var(--muted); transition:color .2s; }
.footer-links a:hover { color:var(--acid); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footer-bottom p { font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.footer-bottom-links { display:flex; gap:32px; }
.footer-bottom-links a { font-size:12px; color:var(--muted); text-decoration:none; font-family:var(--font-mono); transition:color .2s; }
.footer-bottom-links a:hover { color:var(--acid); }
.footer-badge { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--acid); }
.badge-dot { width:6px; height:6px; background:var(--acid); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* ── ABOUT PAGE ──────────────────────────────────────────────── */
.about-story-section { padding:100px 48px; }
.about-story-inner   { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-story-text h2 { margin-bottom:28px; }
.about-story-text p  { font-size:16px; line-height:1.9; opacity:.7; margin-bottom:20px; }
.about-mission-box   { background:var(--off-black); border:1px solid var(--border); border-left:3px solid var(--acid); padding:40px; border-radius:2px; }
.mission-label { font-family:var(--font-mono); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--acid); margin-bottom:16px; }
.mission-quote { font-family:var(--font-display); font-size:clamp(22px,3vw,32px); line-height:1.2; color:var(--white); margin-bottom:32px; }
.mission-stats { display:flex; gap:32px; flex-wrap:wrap; }
.ms-item { text-align:center; }
.ms-item span { display:block; font-family:var(--font-display); font-size:40px; color:var(--acid); line-height:1; }
.ms-item { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-family:var(--font-mono); }

.values-section { background:var(--off-black); }
.values-grid    { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:60px; }
.value-card     { background:var(--charcoal); border:1px solid var(--border); padding:36px 28px; border-radius:2px; transition:border-color .3s, transform .3s; }
.value-card:hover { border-color:var(--acid); transform:translateY(-4px); }
.value-icon     { font-size:32px; margin-bottom:20px; }
.value-card h3  { font-family:var(--font-display); font-size:24px; margin-bottom:12px; }
.value-card p   { font-size:14px; line-height:1.7; opacity:.6; }

.process-section { }
.process-intro   { font-size:16px; opacity:.6; margin-bottom:60px; max-width:500px; }
.process-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.process-card    { border:1px solid var(--border); padding:40px 32px; border-radius:2px; position:relative; transition:border-color .3s, background .3s; }
.process-card:hover { border-color:var(--acid); background:rgba(200,240,32,.02); }
.process-top     { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.process-num     { font-family:var(--font-display); font-size:52px; color:var(--acid); opacity:.3; line-height:1; }
.process-icon    { font-size:28px; }
.process-card h3 { font-family:var(--font-display); font-size:26px; margin-bottom:12px; }
.process-card p  { font-size:14px; line-height:1.7; opacity:.6; }

.team-section    { background:var(--off-black); }
.team-intro      { font-size:16px; opacity:.6; margin-bottom:60px; max-width:500px; }
.team-grid       { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.team-card       { background:var(--charcoal); border:1px solid var(--border); border-radius:2px; overflow:hidden; transition:border-color .3s, transform .3s; }
.team-card:hover { border-color:var(--acid); transform:translateY(-4px); }
.team-avatar     { aspect-ratio:1; overflow:hidden; background:var(--off-black); position:relative; }
.team-photo      { width:100%; height:100%; object-fit:cover; }
.team-initials   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:56px; color:var(--acid); }
.team-info       { padding:28px 24px; }
.team-name       { font-family:var(--font-display); font-size:22px; margin-bottom:4px; }
.team-role       { font-family:var(--font-mono); font-size:11px; color:var(--acid); letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
.team-bio        { font-size:13px; line-height:1.7; opacity:.6; margin-bottom:16px; }
.team-skills     { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.skill-tag       { background:rgba(200,240,32,.1); color:var(--acid); border:1px solid rgba(200,240,32,.2); padding:3px 10px; border-radius:20px; font-size:10px; font-family:var(--font-mono); }
.team-social     { display:flex; gap:10px; }
.team-social a   { width:32px; height:32px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--muted); font-size:12px; transition:all .2s; }
.team-social a:hover { border-color:var(--acid); color:var(--acid); }

.about-cta-section { background:var(--acid); text-align:center; padding:80px 48px; }
.about-cta-inner h2 { color:var(--black); }
.about-cta-inner p  { color:var(--black); opacity:.7; font-size:18px; margin:16px 0 36px; }

/* ── SERVICES ARCHIVE PAGE ───────────────────────────────────── */
.services-archive-section { padding:80px 48px; }
.services-archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.svc-archive-card { background:var(--charcoal); border:1px solid var(--border); padding:48px 36px; border-radius:2px; display:flex; flex-direction:column; gap:16px; transition:border-color .3s, transform .3s; position:relative; overflow:hidden; }
.svc-archive-card:hover { border-color:var(--acid); transform:translateY(-4px); }
.svc-archive-num  { font-family:var(--font-mono); font-size:11px; color:var(--acid); letter-spacing:2px; opacity:.7; }
.svc-archive-icon { font-size:36px; }
.svc-archive-title { font-family:var(--font-display); font-size:32px; line-height:1.1; }
.svc-archive-tagline { font-family:var(--font-mono); font-size:12px; color:var(--acid); letter-spacing:.5px; }
.svc-archive-excerpt { font-size:14px; line-height:1.7; opacity:.6; }
.svc-archive-feats { list-style:none; display:flex; flex-direction:column; gap:6px; flex:1; }
.svc-archive-feats li { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; font-family:var(--font-mono); }
.svc-archive-feats li::before { content:'✓'; color:var(--acid); }
.svc-archive-footer { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border); margin-top:auto; }
.svc-price  { font-family:var(--font-mono); font-size:12px; color:var(--acid); }
.svc-archive-link { font-family:var(--font-mono); font-size:12px; color:var(--white); letter-spacing:1px; text-decoration:none; transition:color .2s; }
.svc-archive-link:hover { color:var(--acid); }
.services-cta { background:var(--off-black); text-align:center; padding:80px 48px; }
.services-cta-inner h2 { margin-bottom:16px; }
.services-cta-inner p  { font-size:18px; opacity:.6; margin-bottom:36px; }

/* ── SINGLE SERVICE PAGE ─────────────────────────────────────── */
.page-banner--service .page-banner-content { text-align:center; margin:0 auto; }
.svc-single-icon  { font-size:56px; margin-bottom:24px; }
.svc-price-badge  { display:inline-block; background:rgba(200,240,32,.15); border:1px solid var(--acid); color:var(--acid); padding:8px 24px; font-family:var(--font-mono); font-size:13px; border-radius:40px; margin-top:20px; }
.svc-single-section { padding:80px 48px; }
.svc-single-grid  { display:grid; grid-template-columns:1fr 360px; gap:80px; align-items:start; }
.svc-single-img   { margin-bottom:40px; border-radius:2px; overflow:hidden; }
.svc-single-img img { width:100%; }
.svc-single-body  { font-size:16px; line-height:1.9; opacity:.8; }
.svc-single-body h2,.svc-single-body h3 { font-family:var(--font-display); margin:32px 0 16px; }
.svc-single-body p  { margin-bottom:20px; }
.svc-sidebar-card   { background:var(--charcoal); border:1px solid var(--border); padding:32px; border-radius:2px; margin-bottom:24px; }
.svc-sidebar-card h3{ font-family:var(--font-display); font-size:22px; margin-bottom:20px; }
.svc-feats-list     { list-style:none; display:flex; flex-direction:column; gap:12px; }
.svc-feats-list li  { font-size:14px; display:flex; align-items:flex-start; gap:10px; }
.svc-feats-list li::before { content:'✓'; color:var(--acid); flex-shrink:0; font-weight:700; }
.svc-sidebar-cta    { background:var(--off-black); border:1px solid var(--border); padding:32px; border-radius:2px; text-align:center; }
.svc-sidebar-price  { font-family:var(--font-mono); font-size:14px; color:var(--acid); margin-bottom:20px; }
.svc-sidebar-note   { font-size:11px; opacity:.5; margin-top:12px; font-family:var(--font-mono); }
.svc-process-section{ background:var(--off-black); padding:80px 48px; }
.svc-process-steps  { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:60px; }
.svc-process-step   { position:relative; padding-left:20px; border-left:2px solid var(--border); transition:border-color .3s; }
.svc-process-step:hover { border-color:var(--acid); }
.step-num { font-family:var(--font-display); font-size:48px; color:var(--acid); opacity:.25; line-height:1; margin-bottom:12px; }
.svc-process-step h3 { font-family:var(--font-display); font-size:22px; margin-bottom:10px; }
.svc-process-step p  { font-size:13px; opacity:.6; line-height:1.6; }
.related-services-section { padding:80px 48px; }
.related-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.related-svc-card { display:flex; flex-direction:column; gap:12px; background:var(--charcoal); border:1px solid var(--border); padding:32px 28px; border-radius:2px; text-decoration:none; color:var(--white); transition:border-color .3s, transform .3s; }
.related-svc-card:hover { border-color:var(--acid); transform:translateY(-2px); }
.related-svc-icon { font-size:28px; }
.related-svc-card h3 { font-family:var(--font-display); font-size:22px; flex:1; }
.related-svc-card span { color:var(--acid); }

/* ── CONTACT PAGE ────────────────────────────────────────────── */
.contact-page-section { padding:80px 48px; }
.contact-page-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.cp-details h2 { font-family:var(--font-display); font-size:clamp(36px,3vw,52px); margin-bottom:36px; }
.cp-info-cards { display:flex; flex-direction:column; gap:24px; margin-bottom:32px; }
.cp-info-card  { display:flex; gap:16px; align-items:flex-start; padding:20px; background:var(--charcoal); border:1px solid var(--border); border-radius:2px; transition:border-color .3s; }
.cp-info-card:hover { border-color:var(--acid); }
.cp-info-icon  { width:44px; height:44px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; border-radius:2px; }
.cp-info-card label { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; }
.cp-info-card span  { font-size:15px; }
.cp-info-card a { color:var(--white); text-decoration:none; transition:color .2s; }
.cp-info-card a:hover { color:var(--acid); }
.cp-response-badge { display:flex; align-items:center; gap:10px; font-size:13px; opacity:.7; }
.cp-form h2 { font-family:var(--font-display); font-size:clamp(36px,3vw,52px); margin-bottom:36px; }

.contact-map-section { padding:0; }
.cp-map-wrap iframe  { display:block; width:100%; height:480px; border:0; filter:var(--map-filter,none); }
[data-theme="dark"] .cp-map-wrap iframe { filter:invert(90%) hue-rotate(180deg) brightness(.9) contrast(.85); }
.cp-map-placeholder  { background:var(--off-black); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 48px; text-align:center; }
.cp-map-inner        { max-width:400px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
.map-pin             { font-size:48px; }
.cp-map-inner p      { font-size:16px; opacity:.7; }
.map-api-note        { font-size:12px; opacity:.4; font-style:italic; font-family:var(--font-mono); }

.faq-section { padding:80px 48px; background:var(--off-black); }
.faq-list    { margin-top:60px; display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:2px; overflow:hidden; }
.faq-item    { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-question { width:100%; background:transparent; border:none; color:var(--white); text-align:left; padding:28px 32px; font-size:16px; font-weight:500; font-family:var(--font-body); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; transition:background .2s; }
.faq-question:hover { background:rgba(200,240,32,.04); }
.faq-question[aria-expanded="true"] { color:var(--acid); }
.faq-icon    { font-size:24px; color:var(--acid); flex-shrink:0; transition:transform .3s; font-family:var(--font-mono); }
.faq-question[aria-expanded="true"] .faq-icon { transform:rotate(45deg); }
.faq-answer  { padding:0 32px; max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s ease; }
.faq-answer.open { padding:0 32px 28px; max-height:400px; }
.faq-answer p    { font-size:15px; line-height:1.8; opacity:.7; }

/* ── BLOG ────────────────────────────────────────────────────── */
.blog-archive-section { padding:60px 48px 80px; }
.blog-featured { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:80px; padding-bottom:80px; border-bottom:1px solid var(--border); }
.blog-featured-img { display:block; aspect-ratio:16/9; overflow:hidden; border-radius:2px; }
.blog-featured-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.blog-featured-img:hover img { transform:scale(1.03); }
.blog-meta { display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.blog-cat   { background:rgba(200,240,32,.15); color:var(--acid); border:1px solid rgba(200,240,32,.3); padding:4px 12px; border-radius:20px; font-size:11px; font-family:var(--font-mono); letter-spacing:.5px; text-transform:uppercase; text-decoration:none; }
.blog-date  { font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.blog-read  { font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.blog-featured-title { font-family:var(--font-display); font-size:clamp(32px,4vw,52px); line-height:1.1; margin-bottom:20px; }
.blog-featured-title a { color:var(--white); text-decoration:none; transition:color .2s; }
.blog-featured-title a:hover { color:var(--acid); }
.blog-featured-excerpt { font-size:16px; line-height:1.8; opacity:.65; margin-bottom:28px; }
.blog-read-more { font-family:var(--font-mono); font-size:12px; color:var(--acid); letter-spacing:1.5px; text-decoration:none; text-transform:uppercase; transition:opacity .2s; }
.blog-read-more:hover { opacity:.7; }

.blog-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.blog-card  { background:var(--charcoal); border:1px solid var(--border); border-radius:2px; overflow:hidden; transition:border-color .3s, transform .3s; }
.blog-card:hover { border-color:var(--acid); transform:translateY(-4px); }
.blog-card-img { display:block; aspect-ratio:16/9; overflow:hidden; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blog-card:hover .blog-card-img img { transform:scale(1.04); }
.blog-card-img-placeholder { aspect-ratio:16/9; background:var(--off-black); display:flex; align-items:center; justify-content:center; }
.blog-card-img-placeholder span { font-family:var(--font-display); font-size:48px; color:rgba(200,240,32,.2); }
.blog-card-body { padding:28px 24px; display:flex; flex-direction:column; gap:12px; }
.blog-card-title { font-family:var(--font-display); font-size:24px; line-height:1.2; }
.blog-card-title a { color:var(--white); text-decoration:none; transition:color .2s; }
.blog-card-title a:hover { color:var(--acid); }
.blog-card-excerpt { font-size:13px; line-height:1.7; opacity:.6; }
.blog-card-footer { display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid var(--border); margin-top:auto; }
.blog-author  { display:flex; align-items:center; gap:8px; font-size:12px; opacity:.7; }
.blog-avatar  { width:28px; height:28px; border-radius:50%; }
.blog-card-link { color:var(--acid); font-size:18px; text-decoration:none; transition:transform .2s; display:block; }
.blog-card-link:hover { transform:translateX(4px); }

/* Pagination */
.wa-pagination { margin-top:60px; display:flex; justify-content:center; gap:8px; }
.wa-pagination .page-numbers { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); color:var(--muted); text-decoration:none; font-family:var(--font-mono); font-size:13px; transition:all .2s; }
.wa-pagination .page-numbers:hover { border-color:var(--acid); color:var(--acid); }
.wa-pagination .page-numbers.current { background:var(--acid); border-color:var(--acid); color:var(--black); }
.wa-pagination .prev,.wa-pagination .next { width:auto; padding:0 20px; }

/* ── SINGLE POST ─────────────────────────────────────────────── */
.single-post-banner { position:relative; padding:calc(var(--nav-h) + 60px) 48px 80px; background:var(--off-black); overflow:hidden; }
.single-post-banner::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(200,240,32,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,240,32,.04) 1px,transparent 1px); background-size:80px 80px; }
.single-post-banner-content { position:relative; z-index:2; max-width:780px; margin:0 auto; text-align:center; }
.single-post-meta  { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.single-post-title { font-family:var(--font-display); font-size:clamp(40px,5vw,80px); line-height:.95; margin-bottom:32px; }
.single-post-author { display:flex; align-items:center; justify-content:center; gap:12px; }
.sp-avatar { width:48px; height:48px; border-radius:50%; }
.single-post-author div { text-align:left; }
.single-post-author strong { display:block; font-size:14px; }
.single-post-author span  { font-size:12px; opacity:.6; font-family:var(--font-mono); }

.single-post-hero-img { max-height:520px; overflow:hidden; }
.single-post-hero-img img { width:100%; height:100%; object-fit:cover; }

.single-post-layout { display:grid; grid-template-columns:60px 1fr; gap:40px; max-width:900px; margin:0 auto; padding:60px 48px 80px; }

.share-sticky  { position:sticky; top:calc(var(--nav-h) + 20px); display:flex; flex-direction:column; gap:10px; align-items:center; }
.share-label   { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-family:var(--font-mono); writing-mode:vertical-rl; margin-bottom:8px; }
.share-btn     { width:40px; height:40px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--muted); font-size:13px; cursor:pointer; background:transparent; transition:all .2s; }
.share-btn:hover { border-color:var(--acid); color:var(--acid); }

.single-post-content { min-width:0; }
.post-body { font-size:17px; line-height:1.85; }
.post-body h2,.post-body h3 { font-family:var(--font-display); margin:48px 0 20px; }
.post-body h2 { font-size:clamp(32px,3vw,48px); }
.post-body h3 { font-size:clamp(24px,2.5vw,36px); }
.post-body p  { margin-bottom:24px; opacity:.85; }
.post-body ul,.post-body ol { margin:20px 0 28px 28px; }
.post-body li { margin-bottom:10px; opacity:.85; }
.post-body a  { color:var(--acid); }
.post-body blockquote { border-left:3px solid var(--acid); padding:20px 32px; margin:32px 0; background:var(--charcoal); border-radius:0 2px 2px 0; font-size:18px; font-style:italic; opacity:.9; }
.post-body img { width:100%; border-radius:2px; margin:20px 0; }
.post-body pre { background:var(--charcoal); padding:24px; overflow-x:auto; border-radius:4px; margin:20px 0; border:1px solid var(--border); }
.post-body code { font-family:var(--font-mono); font-size:13px; }
.post-body :not(pre) > code { background:var(--charcoal); padding:2px 8px; border-radius:3px; font-size:13px; }

.post-tags { display:flex; gap:10px; flex-wrap:wrap; margin:40px 0; padding-top:32px; border-top:1px solid var(--border); }
.post-tag  { display:inline-block; padding:6px 16px; border:1px solid var(--border); color:var(--muted); font-size:12px; font-family:var(--font-mono); letter-spacing:.5px; text-decoration:none; transition:all .2s; }
.post-tag:hover { border-color:var(--acid); color:var(--acid); }

.post-author-card { display:flex; gap:24px; background:var(--charcoal); border:1px solid var(--border); padding:32px; border-radius:2px; margin:40px 0; }
.author-card-avatar { width:72px; height:72px; border-radius:50%; flex-shrink:0; }
.author-card-label  { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; }
.author-card-name   { display:block; font-size:18px; font-weight:500; margin-bottom:8px; }
.author-card-bio    { font-size:14px; line-height:1.7; opacity:.6; }

.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; padding-top:40px; border-top:1px solid var(--border); }
.post-nav-link { text-decoration:none; color:var(--white); padding:24px; border:1px solid var(--border); border-radius:2px; transition:border-color .3s, background .3s; }
.post-nav-link:hover { border-color:var(--acid); background:rgba(200,240,32,.03); }
.post-nav-link span  { font-family:var(--font-mono); font-size:11px; color:var(--acid); letter-spacing:1px; display:block; margin-bottom:8px; }
.post-nav-link strong { font-size:14px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-nav-next { text-align:right; }

.related-posts-section { padding:60px 48px; background:var(--off-black); }
.related-posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.related-post-card { text-decoration:none; color:var(--white); background:var(--charcoal); border:1px solid var(--border); border-radius:2px; overflow:hidden; transition:border-color .3s, transform .3s; }
.related-post-card:hover { border-color:var(--acid); transform:translateY(-2px); }
.related-post-img { aspect-ratio:16/9; overflow:hidden; }
.related-post-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.related-post-card:hover .related-post-img img { transform:scale(1.04); }
.related-post-body { padding:20px; }
.related-post-body h3 { font-family:var(--font-display); font-size:22px; line-height:1.2; margin-top:8px; }

/* COMMENTS */
.comments-section { padding:60px 48px 80px; }
.comments-wrap { max-width:780px; margin:0 auto; }
.comments-wrap h2,.comments-wrap h3 { font-family:var(--font-display); font-size:clamp(28px,3vw,44px); margin-bottom:40px; }
.comment-list { list-style:none; display:flex; flex-direction:column; gap:0; }
.comment { padding:32px 0; border-bottom:1px solid var(--border); }
.comment-meta { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.comment-author { font-weight:500; }
.comment-time   { font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.comment-content p { font-size:15px; line-height:1.8; opacity:.8; }
.comment-reply a { font-family:var(--font-mono); font-size:11px; color:var(--acid); letter-spacing:1px; text-decoration:none; text-transform:uppercase; }

/* Comment form */
#respond { margin-top:48px; padding-top:48px; border-top:1px solid var(--border); }
#respond h3 { font-family:var(--font-display); font-size:clamp(28px,3vw,40px); margin-bottom:32px; }
.comment-form { display:flex; flex-direction:column; gap:20px; }
.comment-form label  { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-family:var(--font-mono); display:block; margin-bottom:6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  background:var(--charcoal); border:1px solid var(--border); color:var(--white);
  padding:14px 18px; font-size:14px; font-family:var(--font-body);
  outline:none; transition:border-color .2s; border-radius:2px; width:100%;
}
.comment-form input:focus,.comment-form textarea:focus { border-color:var(--acid); }
.comment-form textarea { min-height:140px; resize:vertical; }
.comment-form-author,.comment-form-email,.comment-form-url { flex:1; }
.comment-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.comment-form input[type="submit"] {
  background:var(--acid); color:var(--black); border:none;
  padding:16px 40px; font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:background .2s, transform .2s; width:auto; align-self:flex-start;
}
.comment-form input[type="submit"]:hover { background:var(--acid-dim); transform:translateY(-2px); }

/* ── 404 PAGE ────────────────────────────────────────────────── */
.error-404-section { min-height:90vh; display:flex; align-items:center; justify-content:center; position:relative; padding:120px 48px; text-align:center; }
.e404-bg-text { position:absolute; font-family:var(--font-display); font-size:clamp(200px,30vw,400px); line-height:1; color:var(--charcoal); pointer-events:none; user-select:none; letter-spacing:-10px; opacity:.4; }
.e404-content { position:relative; z-index:2; max-width:560px; }
.e404-icon    { font-size:60px; margin-bottom:24px; }
.e404-title   { font-family:var(--font-display); font-size:clamp(48px,6vw,80px); margin-bottom:20px; }
.e404-desc    { font-size:16px; opacity:.65; line-height:1.8; margin-bottom:36px; }
.e404-search  { margin-bottom:28px; }
.e404-search .search-form { display:flex; gap:0; border:1px solid var(--border); }
.e404-search .search-field { background:var(--charcoal); border:none; color:var(--white); padding:14px 20px; font-family:var(--font-body); font-size:14px; outline:none; flex:1; }
.e404-search .search-submit { background:var(--acid); border:none; color:var(--black); padding:14px 28px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:1px; cursor:pointer; transition:background .2s; white-space:nowrap; }
.e404-search .search-submit:hover { background:var(--acid-dim); }
.e404-links   { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
.e404-popular-label { font-family:var(--font-mono); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.e404-popular-links { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.e404-popular-links a { font-size:14px; color:var(--muted); text-decoration:none; transition:color .2s; font-family:var(--font-mono); }
.e404-popular-links a:hover { color:var(--acid); }

/* ── SEARCH RESULTS ──────────────────────────────────────────── */
.search-results-section { padding:60px 48px 80px; }
.search-bar-wrap { margin-bottom:60px; }
.search-bar-wrap .search-form { display:flex; gap:0; border:1px solid var(--border); max-width:600px; }
.search-bar-wrap .search-field  { background:var(--charcoal); border:none; color:var(--white); padding:16px 20px; font-family:var(--font-body); font-size:15px; outline:none; flex:1; }
.search-bar-wrap .search-submit { background:var(--acid); border:none; color:var(--black); padding:16px 32px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:1px; cursor:pointer; white-space:nowrap; transition:background .2s; }
.search-bar-wrap .search-submit:hover { background:var(--acid-dim); }

.search-results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.search-result-card  { background:var(--charcoal); border:1px solid var(--border); border-radius:2px; overflow:hidden; transition:border-color .3s, transform .3s; }
.search-result-card:hover { border-color:var(--acid); transform:translateY(-3px); }
.search-result-img  { aspect-ratio:16/9; overflow:hidden; }
.search-result-img img { width:100%; height:100%; object-fit:cover; }
.search-result-body  { padding:24px 20px; }
.search-result-meta  { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.result-type { background:rgba(200,240,32,.1); color:var(--acid); border:1px solid rgba(200,240,32,.2); padding:3px 10px; border-radius:20px; font-size:10px; font-family:var(--font-mono); letter-spacing:.5px; text-transform:uppercase; }
.search-result-title a { font-family:var(--font-display); font-size:22px; color:var(--white); text-decoration:none; display:block; margin-bottom:10px; line-height:1.2; transition:color .2s; }
.search-result-title a:hover { color:var(--acid); }
.search-result-excerpt { font-size:13px; opacity:.6; line-height:1.7; margin-bottom:16px; }
.search-result-link { font-family:var(--font-mono); font-size:11px; color:var(--acid); text-decoration:none; letter-spacing:1px; }

.no-results { text-align:center; padding:80px 20px; }
.no-results-icon { font-size:64px; margin-bottom:24px; }
.no-results h2 { font-family:var(--font-display); font-size:clamp(36px,4vw,56px); margin-bottom:16px; }
.no-results p  { font-size:16px; opacity:.6; margin-bottom:36px; }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }
.reveal-delay-5 { transition-delay:.5s; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:1200px) {
  .hero-stats { grid-template-columns:repeat(4,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .svc-single-grid { grid-template-columns:1fr 300px; }
}

@media (max-width:1100px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:1fr 1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .services-archive-grid { grid-template-columns:repeat(2,1fr); }
  .about-story-inner { grid-template-columns:1fr; gap:48px; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .svc-process-steps { grid-template-columns:repeat(2,1fr); }
  .related-services-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:900px) {
  nav { padding:16px 24px; }
  nav.scrolled { padding:12px 24px; }
  .nav-links { display:none; }
  .nav-right-mobile { display:flex; }
  .theme-toggle-mobile { display:flex; }

  #hero { grid-template-columns:1fr; padding:calc(var(--nav-h) + 40px) 24px 0; min-height:auto; padding-bottom:0; }
  .hero-content { padding-bottom:40px; }
  .hero-visual  { display:none; }
  .hero-stats   { position:relative; bottom:auto; left:auto; right:auto; grid-template-columns:repeat(2,1fr); margin:0 -24px; width:calc(100% + 48px); }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item:nth-child(3) { border-top:1px solid var(--border); }
  .stat-item:nth-child(4) { border-top:1px solid var(--border); border-right:none; }

  #about { grid-template-columns:1fr; gap:60px; padding:80px 24px; }
  .about-float-card { right:0; bottom:40px; width:160px; }
  #services { padding:80px 24px; }
  .services-header { flex-direction:column; align-items:flex-start; }
  .services-grid { grid-template-columns:1fr; }
  #cta { padding:80px 24px; }
  #cta::before { font-size:140px; }
  .testimonials-grid { grid-template-columns:1fr; }
  #testimonials { padding:80px 24px; }
  #contact { padding:80px 24px; }
  .contact-grid { grid-template-columns:1fr; gap:60px; }
  footer { padding:60px 24px 32px; }
  .footer-top { grid-template-columns:1fr 1fr; margin-bottom:48px; padding-bottom:48px; }
  .footer-bottom { flex-direction:column; text-align:center; }

  .page-banner { padding-left:24px; padding-right:24px; }
  .about-story-section { padding:80px 24px; }
  .values-section { padding:80px 24px; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .process-section { padding:80px 24px; }
  .process-grid { grid-template-columns:1fr; }
  .team-section { padding:80px 24px; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .about-cta-section { padding:60px 24px; }
  .services-archive-section { padding:60px 24px; }
  .services-archive-grid { grid-template-columns:1fr; }
  .svc-single-section { padding:60px 24px; }
  .svc-single-grid { grid-template-columns:1fr; }
  .svc-process-section { padding:60px 24px; }
  .svc-process-steps { grid-template-columns:1fr 1fr; }
  .related-services-section { padding:60px 24px; }
  .related-services-grid { grid-template-columns:1fr; }
  .services-cta { padding:60px 24px; }
  .contact-page-section { padding:60px 24px; }
  .contact-page-grid { grid-template-columns:1fr; gap:48px; }
  .faq-section { padding:60px 24px; }
  .blog-archive-section { padding:48px 24px; }
  .blog-featured { grid-template-columns:1fr; gap:36px; }
  .blog-grid { grid-template-columns:1fr; }
  .single-post-banner { padding:calc(var(--nav-h)+40px) 24px 60px; }
  .single-post-layout { grid-template-columns:1fr; padding:40px 24px; }
  .share-sticky { flex-direction:row; position:static; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--border); margin-bottom:32px; }
  .share-label { writing-mode:horizontal-tb; }
  .related-posts-section { padding:48px 24px; }
  .related-posts-grid { grid-template-columns:1fr; }
  .comments-section { padding:48px 24px 60px; }
  .search-results-section { padding:48px 24px; }
  .search-results-grid { grid-template-columns:1fr; }
  .error-404-section { padding:100px 24px; }
  .e404-links { flex-direction:column; align-items:center; }
  .cp-map-placeholder { padding:60px 24px; }
}

@media (max-width:600px) {
  section { padding:72px 20px; }
  h1 { font-size:52px; }
  h2 { font-size:40px; }
  #hero { padding:calc(var(--nav-h) + 20px) 20px 0; }
  .hero-stats { margin:0 -20px; width:calc(100%+40px); }
  .stat-num { font-size:34px; }
  .about-float-card { right:12px; bottom:20px; width:140px; padding:16px; }
  .float-card-num { font-size:36px; }
  .about-features { grid-template-columns:1fr; }
  .cta-btns,.hero-btns { flex-direction:column; }
  .values-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
  .svc-process-steps { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom-links { flex-wrap:wrap; justify-content:center; gap:16px; }
  .mobile-menu a { font-size:38px; }
  .blog-featured-title { font-size:28px; }
  .post-nav { grid-template-columns:1fr; }
  .comment-form .form-row { grid-template-columns:1fr; }
  .demo-banner { flex-wrap:wrap; text-align:center; height:auto; padding:12px 40px 12px 16px; gap:8px; --demo-h:60px; }
  .e404-bg-text { font-size:160px; }
}

/* ── COMMENT EXTRAS ──────────────────────────────────────────── */
.comment-list-wrap h2.comments-title { font-family:var(--font-display); font-size:clamp(28px,3vw,44px); margin-bottom:40px; }
.comment-list { list-style:none; }
.comment-body { padding:28px 0; border-bottom:1px solid var(--border); }
.comment-meta { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.comment-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; }
.comment-author { font-size:15px; font-weight:500; display:block; }
.comment-time   { font-size:12px; color:var(--muted); font-family:var(--font-mono); display:block; }
.comment-actions { margin-left:auto; }
.comment-reply-link,.comment-edit-link { font-family:var(--font-mono); font-size:11px; color:var(--acid); text-decoration:none; letter-spacing:1px; text-transform:uppercase; margin-left:12px; }
.comment-awaiting-moderation { background:rgba(200,240,32,.1); border:1px solid rgba(200,240,32,.2); color:var(--acid); padding:10px 16px; font-size:13px; margin-bottom:12px; border-radius:2px; }
.comment-content p { font-size:15px; line-height:1.8; opacity:.8; }
.no-comments { font-size:14px; opacity:.5; font-family:var(--font-mono); margin-top:32px; }
.comment-navigation { margin-top:32px; display:flex; justify-content:space-between; }
.comment-navigation a { font-family:var(--font-mono); font-size:12px; color:var(--acid); text-decoration:none; }
.required { color:var(--acid); }