* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#080709; --card:#1f1d27; --card2:#2a2832; --text:#f4f1f6;
  --muted:#79778a; --accent:#d4af37; --on-acc:#141414; --border:rgba(244,241,246,0.12);
  --soft:rgba(244,241,246,0.06); --accsoft:rgba(212,175,55,0.16); --accsoft2:rgba(212,175,55,0.30);
  --glare:rgba(255,255,255,0.35); --shadow:rgba(0,0,0,0.22); --shadow2:rgba(212,175,55,0.28); --rad:12px;
}
html { scroll-behavior:smooth; }
body { margin:0; background:
    radial-gradient(120% 90% at 50% -10%, var(--accsoft), transparent 55%),
    var(--bg);
  color:var(--text); font-family:Optima, Candara, 'Segoe UI', sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3 { font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif; line-height:1.08; letter-spacing:-.02em; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.tilt-page { max-width:1200px; margin:0 auto; padding:0 22px 60px; }

/* ---------------- nav ---------------- */
.nav { position:sticky; top:0; z-index:40; display:flex; align-items:center;
  gap:22px; padding:16px 4px; margin-bottom:8px;
  backdrop-filter:blur(10px); }
.brand { font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif; font-weight:800; font-size:21px; display:flex;
  align-items:center; gap:10px; }
.brand-dot { width:13px; height:13px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--accsoft); }
.links { display:flex; gap:4px; margin-left:auto; }
.links a { padding:9px 15px; border-radius:999px; font-size:15px; color:var(--muted);
  transition:background .15s, color .15s; }
.links a:hover { background:var(--soft); color:var(--text); }
.nav-cta { margin-left:6px; }
.burger { display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  flex-direction:column; gap:5px; padding:8px; }
.burger span { width:24px; height:2px; background:var(--text); display:block; border-radius:2px;
  transition:transform .2s; }
.mobile { display:none; flex-direction:column; gap:4px; padding:6px 4px 14px; }
.mobile.open { display:flex; }
.mobile a { padding:13px 15px; border-radius:14px; color:var(--muted); background:var(--card); }
.mobile a:hover { background:var(--soft); color:var(--text); }

/* ---------------- buttons ---------------- */
.btn { display:inline-block; border-radius:999px; padding:13px 26px; font-weight:600;
  font-size:15px; cursor:pointer; border:1px solid transparent;
  transition:transform .14s ease, box-shadow .2s, filter .14s; }
.primary { background:var(--accent); color:var(--on-acc);
  box-shadow:0 10px 24px var(--shadow2); }
.primary:hover { transform:translateY(-3px); filter:brightness(1.05);
  box-shadow:0 16px 34px var(--shadow2); }
.ghost { background:transparent; color:var(--text); border-color:var(--border); }
.ghost:hover { background:var(--soft); transform:translateY(-3px); }

/* ---------------- shared tilt chrome ---------------- */
[data-tilt] { perspective:900px; }
.hero-card, .about-card, .svc, .tile, .testi-card, .contact-inner {
  position:relative; transform-style:preserve-3d; will-change:transform;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease, box-shadow .25s; }
.layer { transform:translateZ(calc(var(--depth,0) * 1px)); }
.glare { position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:6; opacity:var(--go,0); transition:opacity .25s;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,0%),
    var(--glare), transparent 60%); mix-blend-mode:screen; }

/* ---------------- hero ---------------- */
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center;
  padding:40px 0 70px; }
.kicker { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); background:var(--accsoft);
  padding:7px 14px; border-radius:999px; margin-bottom:20px; }
.hero-copy h1 { font-size:clamp(38px,5.4vw,64px); margin-bottom:20px; }
.hero-copy p { font-size:19px; color:var(--muted); max-width:44ch; margin-bottom:30px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-stage { perspective:1000px; }
.hero-card { border-radius:calc(var(--rad) + 6px); background:var(--card2);
  border:1px solid var(--border); padding:16px; aspect-ratio:5/4;
  box-shadow:0 30px 70px var(--shadow); overflow:hidden; }
.layer-bg { position:absolute; inset:16px; border-radius:var(--rad); overflow:hidden; }
.layer-bg img { width:100%; height:100%; object-fit:cover; }
.badge { position:absolute; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:12px 16px; box-shadow:0 18px 40px var(--shadow);
  display:flex; flex-direction:column; }
.badge b { font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif; font-size:24px; color:var(--accent); line-height:1; }
.badge span { font-size:12px; color:var(--muted); margin-top:3px; letter-spacing:.03em; }
.badge-a { left:26px; bottom:34px; }
.badge-b { right:26px; top:34px; }
.badge-b b { font-size:15px; letter-spacing:2px; }
.chip { position:absolute; left:50%; top:26px; transform:translateX(-50%) translateZ(40px);
  background:var(--accent); color:var(--on-acc); font-weight:700; font-size:13px;
  letter-spacing:.05em; padding:8px 16px; border-radius:999px;
  box-shadow:0 12px 26px var(--shadow2); }

/* ---------------- about ---------------- */
.about { display:grid; grid-template-columns:.85fr 1.1fr; gap:48px; align-items:center;
  padding:56px 0; }
.about-media { perspective:1000px; }
.about-card { border-radius:calc(var(--rad) + 4px); overflow:hidden;
  border:1px solid var(--border); box-shadow:0 26px 60px var(--shadow); }
.about-card img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.about-text h2 { font-size:clamp(28px,3.6vw,42px); margin-bottom:16px; }
.about-text p { color:var(--muted); font-size:17px; margin-bottom:28px; }
.mini-stats { display:flex; gap:30px; flex-wrap:wrap; }
.mini-stats b { display:block; font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif; font-size:32px; color:var(--accent);
  line-height:1; }
.mini-stats span { font-size:14px; color:var(--muted); }

/* ---------------- services ---------------- */
.sec-head { text-align:center; margin-bottom:38px; }
.sec-head h2 { font-size:clamp(28px,3.6vw,44px); margin-top:8px; }
.services, .gallery { padding:48px 0; }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc { background:var(--card); border:1px solid var(--border); border-radius:var(--rad);
  padding:30px 26px; box-shadow:0 12px 30px var(--shadow); overflow:hidden; }
.svc-ico { display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px; background:var(--accsoft);
  color:var(--accent); font-size:24px; margin-bottom:18px; }
.svc h3 { font-size:20px; margin-bottom:10px; }
.svc p { color:var(--muted); font-size:15px; }

/* ---------------- gallery ---------------- */
.tile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tile { position:relative; border-radius:var(--rad); overflow:hidden;
  border:1px solid var(--border); box-shadow:0 14px 34px var(--shadow);
  aspect-ratio:1/1; }
.tile img { width:100%; height:100%; object-fit:cover; }
.tile figcaption { position:absolute; left:16px; bottom:16px; z-index:5;
  background:var(--accent); color:var(--on-acc); font-weight:700; font-size:13px;
  padding:7px 14px; border-radius:999px; box-shadow:0 10px 24px var(--shadow2); }

/* ---------------- testimonial ---------------- */
.testi { padding:56px 0; display:flex; justify-content:center; perspective:1000px; }
.testi-card { max-width:760px; width:100%; background:var(--card2);
  border:1px solid var(--border); border-radius:calc(var(--rad) + 6px);
  padding:52px 48px; text-align:center; box-shadow:0 30px 70px var(--shadow);
  overflow:hidden; }
.testi .quote { font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif; display:block; font-size:70px; line-height:.3;
  color:var(--accent); height:34px; }
.testi blockquote { font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif; font-size:clamp(22px,3vw,32px);
  line-height:1.28; margin:24px 0 26px; }
.testi-by { display:inline-flex; align-items:center; gap:12px; }
.testi-by img { width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:2px solid var(--accent); }
.testi-by cite { font-style:normal; font-weight:700; }

/* ---------------- contact ---------------- */
.contact { padding:40px 0 20px; perspective:1200px; }
.contact-inner { position:relative; background:var(--card); border:1px solid var(--border);
  border-radius:calc(var(--rad) + 8px); padding:46px; overflow:hidden;
  box-shadow:0 26px 64px var(--shadow); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact-copy h2 { font-size:clamp(24px,3vw,34px); margin-bottom:20px; }
.ci { list-style:none; }
.ci li { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--border);
  font-size:15px; }
.ci li span { color:var(--muted); width:58px; flex:0 0 auto; }
.cf { display:flex; flex-direction:column; gap:12px; }
.cf input, .cf textarea { background:var(--bg); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px; font:inherit; color:var(--text); resize:vertical; }
.cf input:focus, .cf textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accsoft); }
.cf button { align-self:flex-start; margin-top:4px; }

/* ---------------- footer ---------------- */
.foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:12px; padding:34px 4px 0; margin-top:30px; border-top:1px solid var(--border);
  font-size:14px; }
.foot-muted { color:var(--muted); }

/* ---------------- scroll reveal (3D entrance) ---------------- */
.reveal { opacity:0; transform:translateY(46px) rotateX(12deg) scale(.97);
  transform-origin:50% 100%; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 80ms); }
.reveal.in { opacity:1; transform:none; }

/* ---------------- responsive ---------------- */
@media (max-width:960px) {
  .hero { grid-template-columns:1fr; gap:34px; }
  .about { grid-template-columns:1fr; gap:34px; }
  .about-media { max-width:420px; }
  .svc-grid, .tile-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .links, .nav-cta { display:none; }
  .burger { display:flex; }
  .svc-grid, .tile-grid { grid-template-columns:1fr; }
  .mini-stats { gap:20px; }
  .foot { flex-direction:column; text-align:center; }
  .contact-inner { padding:30px 22px; }
}

/* ---------------- calm motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero-card, .about-card, .svc, .tile, .testi-card, .contact-inner {
    transform:none !important; transition:none; }
  .layer { transform:none !important; }
  .glare { display:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  .btn:hover { transform:none; }
}


.xq{box-sizing:border-box;font-family:Optima, Candara, 'Segoe UI', sans-serif;color:#f4f1f6;padding:56px 24px;width:100%}
.xq *{box-sizing:border-box;margin:0}
.xq .xq-wrap{max-width:1060px;margin:0 auto}
.xq h2{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:1.7rem;line-height:1.2;margin-bottom:8px}
.xq .xq-kick{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#d4af37;margin-bottom:10px;font-weight:700}

.xq-checklist{list-style:none;padding:0;margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 26px}
.xq-checklist li{position:relative;padding:10px 0 10px 32px;border-bottom:1px dashed rgba(244,241,246,0.14)}
.xq-checklist li::before{content:"\2713";position:absolute;left:0;top:8px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:#d4af37;color:#141414;font-size:.75rem;font-weight:800}


.xq-quoterail{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.xq-quote{border:1px solid rgba(244,241,246,0.14);border-radius:8px;padding:22px;background:#181620;position:relative}
.xq-quote::before{content:"\201C";position:absolute;top:-4px;left:14px;font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:3rem;color:#d4af37;opacity:.5}
.xq-quote p{font-style:italic;margin:10px 0 12px;line-height:1.55}
.xq-quote cite{font-style:normal;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#79778a}


.xq-steplist{counter-reset:xqs;list-style:none;padding:0;margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.xq-step{counter-increment:xqs;position:relative;padding:18px 18px 18px 20px;border-left:3px solid #d4af37;background:rgba(244,241,246,0.05);border-radius:0 8px 8px 0}
.xq-step::before{content:"0" counter(xqs);display:block;font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:.8rem;letter-spacing:.1em;color:#d4af37;font-weight:800;margin-bottom:8px}
.xq-step h3{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:1.02rem;margin-bottom:6px}
.xq-step p{font-size:.9rem;color:#79778a}


/* =====================================================
   DESIGN DNA: blueprint-draft
   Whole-page visual system applied over the layout
   archetype. Appended last so it wins the cascade.
   ===================================================== */
html::before{content:'';position:fixed;inset:0;z-index:99980;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 .5H80M.5 0V80' stroke='%23d4af37' stroke-width='1'/%3E%3Cpath d='M0 20.5H80M0 40.5H80M0 60.5H80M20.5 0V80M40.5 0V80M60.5 0V80' stroke='%23d4af37' stroke-width='.4'/%3E%3C/svg%3E");opacity:.10;}
h1,h2,h3{font-family:'Courier New', Courier, monospace !important;text-transform:uppercase !important;letter-spacing:.1em !important;font-weight:700 !important}
img{filter:grayscale(.3) contrast(1.06);border-radius:0 !important;outline:1.5px dashed rgba(212,175,55,.8);outline-offset:7px;margin:7px}
a[class*="btn"],button,span[class*="btn"]{border-radius:0 !important;border:1.5px dashed #d4af37 !important;font-family:'Courier New', Courier, monospace !important;text-transform:uppercase;box-shadow:none !important}
div[class*="card"]:not([class*="cards"]),article[class*="card"],a[class*="card"],figure[class*="card"],li[class*="card"]{border-radius:0 !important;border:1px solid rgba(212,175,55,.6) !important;box-shadow:none !important}