/* ══════════════════════════════════════════
   VCA — Layout
   Page skeleton: nav, hero, sections, grids, footer, responsive.
══════════════════════════════════════════ */

/* ── Reset / base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ── Watermark wrapper ── */
.wm-wrap { position:relative; overflow:hidden; }
.wm {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:clamp(180px,22vw,320px);
  font-weight:200; letter-spacing:0.1em;
  white-space:nowrap; pointer-events:none; user-select:none;
  line-height:1; z-index:0;
}
.w-v { color: rgba(13, 24, 41, 0.025); }
.w-c { color: rgba(21, 96, 196, 0.055); }
.w-a { color: rgba(13, 24, 41, 0.025); }
.wm-wrap > *:not(.wm) { position:relative; z-index:1; }

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:20px 60px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid transparent;
  transition:background .4s, border-color .4s, padding .3s;
}
nav.lit {
  background: rgba(13, 24, 41, 0.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(91, 159, 232, 0.15);
  padding: 14px 60px;
}
.nav-logo { display:flex; align-items:center; text-decoration:none; transition:opacity .2s; }
.nav-logo:hover { opacity:.85; }
.logo-dark  { display:block; }
.logo-light { display:none; }

.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a {
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-dark-m);
  text-decoration:none; transition:color .2s;
}
nav.lit .nav-links a { color: rgba(255, 255, 255, 0.45); }
.nav-links a:hover { color: var(--on-dark); }
nav.lit .nav-links a:hover { color: rgba(255, 255, 255, 0.9); }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden; background: var(--ink);
}
.slides { position:absolute; inset:0; z-index:0; }
.slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; }
.slide.on { opacity:1; }
.s1 { background-image:url('https://images.unsplash.com/photo-1466611653911-95081537e5b7?w=1920&q=80'); }
.s2 { background-image:url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1920&q=80'); }
.s3 { background-image:url('https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?w=1920&q=80'); }
.s4 { background-image:url('https://images.unsplash.com/photo-1548337138-e87d889cc369?w=1920&q=80'); }

.hero-overlay { position:absolute; inset:0; z-index:1; background: rgba(5, 9, 18, 0.35); }
.hero-scrim {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to right,
    rgba(5, 9, 18, 0.88) 0%,
    rgba(5, 9, 18, 0.88) 30%,
    rgba(5, 9, 18, 0.52) 52%,
    rgba(5, 9, 18, 0.00) 72%);
  pointer-events:none;
}
.hero-bottom-fade {
  position:absolute; bottom:0; left:0; right:0; z-index:2; height:160px;
  background:linear-gradient(to top, rgba(5, 9, 18, 0.60) 0%, transparent 100%);
  pointer-events:none;
}
.hero-grid {
  position:absolute; inset:0; z-index:3;
  background-image:
    linear-gradient(rgba(21, 96, 196, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 96, 196, 0.055) 1px, transparent 1px);
  background-size:48px 48px; pointer-events:none;
}
.hero-glow {
  position:absolute; top:-140px; left:-80px; z-index:3;
  width:600px; height:500px;
  background: radial-gradient(ellipse, rgba(21, 96, 196, 0.2) 0%, transparent 62%);
  pointer-events:none;
}
.hero-spark {
  position:absolute; bottom:-100px; right:-80px; z-index:3;
  width:440px; height:440px;
  background: radial-gradient(ellipse, rgba(21, 96, 196, 0.1) 0%, transparent 60%);
  pointer-events:none;
}

.hero-inner {
  position:relative; z-index:5;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  max-width:1200px; margin:0 auto; padding:130px 60px 90px; width:100%;
}
.hero-h1 {
  position:relative;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(50px, 5.5vw, 80px); line-height:1.06;
  color: var(--on-dark); letter-spacing:-.01em; margin-bottom:22px;
}
.hero-h1 em { font-style:italic; color: var(--blue-lt); }
.hero-sub {
  font-size:15px; color: var(--on-dark-d);
  line-height:1.75; max-width:440px; margin-bottom:36px;
}
.hero-btns {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-bottom:50px;
  max-width: 420px;       /* matches .hero-sub paragraph width */
}
/* Equal-width hero buttons, shared across the 440px row */
.hero-btns > .btn-primary,
.hero-btns > .btn-ghost {
  flex: 1 1 0;
  min-width: 140px;       /* tight floor; below this the row wraps */
  padding: 11px 18px;
  font-size: .82rem;
  text-align: center;
}

.hero-stats {
  display:flex; gap:44px;
  padding-top:30px; border-top: 1px solid var(--line-dark);
}

.hero-cards { display:flex; flex-direction:column; align-items:center; gap:0; }
.pcard-outer { display:flex; align-items:center; gap:16px; width:100%; }

/* ══════════════════════════════════════════
   MANIFESTO (dark section structure)
══════════════════════════════════════════ */
.manifesto { background: var(--ink); padding:100px 60px; position:relative; overflow:hidden; }
.manifesto::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(21, 96, 196, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 96, 196, .055) 1px, transparent 1px);
  background-size:48px 48px; pointer-events:none;
}
.manifesto::after {
  content:''; position:absolute; top:-120px; right:-80px;
  width:500px; height:400px;
  background: radial-gradient(ellipse, rgba(21, 96, 196, .18) 0%, transparent 62%);
  pointer-events:none;
}
.manifesto-inner { position:relative; z-index:1; max-width:780px; margin:0 auto; text-align:center; }
.manifesto-body {
  font-family:var(--serif); font-size:clamp(17px, 2vw, 21px);
  font-weight:300; line-height:1.82;
  color: rgba(255, 255, 255, .82); margin-bottom:40px;
}
.manifesto-quote {
  font-family:var(--serif); font-size:clamp(20px, 2.5vw, 28px);
  font-style:italic; font-weight:300;
  color: var(--blue-lt); line-height:1.4; margin-bottom:52px;
}

/* ── Trust bar ── */
.trust {
  background:#10161f;
  border-bottom: 1px solid rgba(21, 96, 196, 0.14);
  padding:16px 60px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
}
.ti {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color: rgba(255, 255, 255, 0.3);
  padding:5px 26px; border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.ti:last-child { border-right:none; }
.ti strong { color: rgba(255, 255, 255, 0.7); font-weight:500; }

/* ══════════════════════════════════════════
   SHARED LIGHT SECTIONS
══════════════════════════════════════════ */
.sec       { padding:100px 60px; }
.sec-max   { max-width:1200px; margin:0 auto; }
.sec-white { background: var(--white); }
.sec-tint  { background: var(--bg); }

.sec-hdr  { text-align:center; margin-bottom:64px; }
.sec-h2 {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(34px, 4vw, 52px); line-height:1.1;
  color: var(--ink-body); margin-bottom:14px;
}
.sec-h2 em { font-style:italic; color: var(--blue); }
.sec-desc {
  font-size:14px; color: var(--ink-soft);
  max-width:480px; margin:0 auto; line-height:1.75;
}

.divider {
  height:1px;
  background: linear-gradient(to right, transparent, var(--blue-line) 15%, var(--blue-line) 85%, transparent);
  position:relative;
}
.divider::after {
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:5px; height:5px; background: var(--blue); border-radius:50%;
}

/* ══════════════════════════════════════════
   PROCESS / PRACTICE / ABOUT — grid skeletons
══════════════════════════════════════════ */
.process-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  border: 1px solid var(--blue-line); border-radius:4px; overflow:hidden;
}

.practice-layout {
  display:grid; grid-template-columns:240px 1fr; gap:72px; align-items:start;
}
.practice-sticky { position:sticky; top:90px; }
.practice-sticky h2 {
  font-family:var(--serif); font-size:clamp(30px, 3.2vw, 44px);
  font-weight:300; line-height:1.1;
  color: var(--ink-body); margin-bottom:18px;
}
.practice-sticky h2 em { font-style:italic; color: var(--blue); }
.practice-sticky p { font-size:13.5px; color: var(--ink-soft); line-height:1.72; }
.svc-cards { display:flex; flex-direction:column; gap:12px; }

.about-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}

/* ══════════════════════════════════════════
   CONTACT + FOOTER
══════════════════════════════════════════ */
.contact-h2 {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(38px, 5vw, 64px); line-height:1.08;
  color: var(--ink-body); margin-bottom:20px;
}
.contact-h2 em { font-style:italic; color: var(--blue); }
.contact-sub {
  font-size:14px; color: var(--ink-soft);
  max-width:440px; margin:0 auto 44px; line-height:1.75;
}
.contact-links { display:flex; align-items:center; justify-content:center; gap:44px; }
.contact-link {
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--blue);
  text-decoration:underline; text-underline-offset:5px;
}

footer {
  background: var(--ink-body);
  border-top: 1px solid rgba(21, 96, 196, 0.12);
  padding:28px 60px;
  display:flex; align-items:center; justify-content:space-between;
}
.ft-l { font-family:var(--mono); font-size:9px; letter-spacing:.16em; color: rgba(255, 255, 255, 0.28); }
.ft-r { font-family:var(--mono); font-size:9px; letter-spacing:.16em; color: rgba(255, 255, 255, 0.16); }
.ft-access {
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255, 255, 255, 0.45); text-decoration:none;
  transition: color .2s;
}
.ft-access:hover { color: rgba(255, 255, 255, 0.85); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav, nav.lit, .trust, .sec { padding-left:32px; padding-right:32px; }
  .hero-inner { padding-left:32px; padding-right:32px; grid-template-columns:1fr; }
  .hero-cards { max-width:560px; width:100%; margin:0 auto; }
  .practice-layout { grid-template-columns:1fr; gap:36px; }
  .practice-sticky { position:static; }
  /* About layout stays side-by-side at tablet widths (just tighter gap) */
  .about-layout { gap:48px; }
  .process-grid { grid-template-columns:1fr; }
  .pstep { border-right:none; border-bottom: 1px solid var(--blue-line); }
  .pstep:last-child { border-bottom:none; }
  .about-stats { grid-template-columns:1fr 1fr; }
  .astat:nth-child(2) { border-right:none; }
  footer { flex-direction:column; gap:10px; padding:22px 32px; }
}
@media (max-width: 600px) {
  nav, nav.lit { padding:14px 20px; }
  /* (Nav links → burger toggle now handled in components.css @ 768px) */
  /* Shrink the logo on phones so the nav stays compact */
  .logo-dark { height: 56px !important; }
  nav.lit .logo-dark { height: 48px !important; }

  .hero-inner { padding-left:20px; padding-right:20px; }
  .trust { padding-left:20px; padding-right:20px; }
  .contact-links { flex-direction:column; gap:20px; }
  footer { padding:20px; }
  .scard-top { grid-template-columns:1fr; }
  .scard-img { display:none; }
  /* Tight phones: drop side arrows so the card has room; nav dots remain */
  .pcard-arrow { display:none; }
  /* Hero stats wrap instead of crushing onto one line */
  .hero-stats { gap: 22px; flex-wrap: wrap; }
  /* Manifesto pillars stack on phones; 3 cols at ~110px each is too cramped */
  .manifesto-pillars { grid-template-columns: 1fr; }
  .manifesto-pillar { border-right:none; border-bottom: 1px solid rgba(21, 96, 196, .15); }
  .manifesto-pillar:last-child { border-bottom: none; }
  .manifesto { padding: 70px 24px; }
}

/* About section: stacks at "half-laptop" widths and below (≈ 768px is the
   conventional iPad-portrait / split-screen breakpoint, roughly half a 1440-1512px MacBook). */
@media (max-width: 768px) {
  .about-layout { grid-template-columns:1fr; gap:32px; }
  .portrait-stage { max-width:340px; margin:0 auto; width:100%; }
}