.site-header {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
  padding: 0.5rem 0.6rem 0.5rem 0.75rem;
  border: 1px solid var(--line);
  background: rgba(12, 12, 14, 0.86);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; }
.brand img { width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.07em; text-transform: uppercase; }
.brand-copy small { color: var(--muted); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-toggle { display: grid; flex: 0 0 3rem; width: 3rem; height: 3rem; place-items: center; border: 1px solid var(--line); background: transparent; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { width: 1.25rem; height: 1px; background: var(--ink); content: ""; transition: transform 240ms var(--ease), opacity 180ms ease; }
.nav-toggle { gap: 0.3rem; }
.menu-open .nav-toggle span { opacity: 0; }
.menu-open .nav-toggle::before { transform: translateY(0.38rem) rotate(45deg); }
.menu-open .nav-toggle::after { transform: translateY(-0.38rem) rotate(-45deg); }
.site-nav { position: fixed; inset: 5.75rem 0.75rem auto; z-index: 29; visibility: hidden; padding: 1rem; border: 1px solid var(--line); background: #0c0c0ef7; opacity: 0; transform: translateY(-1rem); transition: opacity 200ms ease, transform 240ms var(--ease), visibility 0s linear 240ms; }
.menu-open .site-nav { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 240ms var(--ease), visibility 0s; }
.site-nav ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: flex; align-items: center; min-height: 3.25rem; padding-inline: 0.5rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--blue-bright); }
.site-header .header-cta { display: none; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-width: 12rem; min-height: 3.5rem; padding: 0.8rem 1.25rem; overflow: hidden; border: 1px solid var(--line); background: transparent; font-family: var(--font-body); font-size: 0.9rem; font-weight: 800; line-height: 1.2; text-align: center; transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 200ms var(--ease); }
.btn::before { position: absolute; inset: 0; background: var(--blue); content: ""; transform: translateX(-102%); transition: transform 320ms var(--ease); }
.btn span, .btn svg { position: relative; z-index: 1; }
.btn:hover::before { transform: translateX(0); }
.btn-primary { color: #04121b; border-color: var(--blue); background: var(--blue); }
.btn-primary::before { background: var(--blue-bright); }
.btn-ghost:hover { border-color: var(--blue); }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.service-split { display: grid; border: 1px solid var(--line); }
.service-panel { --mx: 50%; --my: 50%; position: relative; min-height: 31rem; padding: clamp(1.5rem, 4vw, 4rem); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.service-panel:last-child { border-bottom: 0; }
.service-panel::before { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, #0f1419, #111); content: ""; }
.service-panel::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.28), transparent 26%), linear-gradient(115deg, transparent 30%, rgba(21,159,232,.24) 50%, transparent 70%); mix-blend-mode: overlay; content: ""; opacity: 0; transition: opacity 220ms ease; }
.service-panel:hover::after { opacity: 1; }
.service-panel.signing::before { background: linear-gradient(145deg, #111, #111c25); }
.service-panel h3 { margin-top: 8rem; font-size: var(--step-5); }
.service-panel ul { display: grid; gap: 0.5rem; margin: 1.5rem 0 2rem; padding: 0; color: #d7dde3; list-style: none; }
.service-panel li { padding-block: 0.55rem; border-top: 1px solid var(--line); }

.before-after { --pos: 50%; position: relative; min-height: 22rem; overflow: hidden; border: 1px solid var(--line); background: #08090a; touch-action: pan-y; }
.before-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.before-after img.after { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3rem; min-width: 44px; border: 0; background: linear-gradient(90deg, transparent calc(50% - 1px), var(--blue-bright) calc(50% - 1px), var(--blue-bright) calc(50% + 1px), transparent calc(50% + 1px)); transform: translateX(-50%); }
.ba-handle::before { position: absolute; top: 50%; left: 50%; display: grid; width: 3rem; height: 3rem; color: #061018; border: 1px solid #fff; background: var(--blue-bright); content: "↔"; font-size: 1.25rem; font-weight: 800; place-items: center; transform: translate(-50%, -50%); }
.ba-label { position: absolute; top: 1rem; z-index: 2; padding: 0.35rem 0.55rem; background: #0c0c0ed9; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ba-label.before { left: 1rem; }
.ba-label.after { right: 1rem; }

.portfolio-grid { display: grid; gap: 1rem; }
.portfolio-card { transition: opacity 220ms ease; }
.portfolio-card .before-after { transition: transform 450ms var(--ease); }
.portfolio-grid:hover .portfolio-card { opacity: 0.52; }
.portfolio-grid .portfolio-card:hover { opacity: 1; }
.portfolio-card:hover .before-after { transform: scale(1.015); }
.portfolio-meta { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.portfolio-meta h3 { margin: 0; font-size: var(--step-2); }
.portfolio-meta span { color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; }

.floating-cta { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: var(--z-floating); display: grid; width: 3.65rem; min-width: 3.65rem; height: 3.65rem; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.55); background: #fff; opacity: 0; pointer-events: none; transform: translateY(1rem); transition: opacity 220ms ease, transform 240ms var(--ease), box-shadow 200ms ease; }
.floating-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.floating-cta:hover { box-shadow: 0 0 0 1px rgba(37,211,102,.35), 0 0 2rem rgba(37,211,102,.22); }
.floating-cta img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.76); }

.site-footer { position: relative; padding: 5rem 0 max(2rem, env(safe-area-inset-bottom)); overflow: hidden; border-top: 1px solid var(--line); }
.footer-word { margin: 3rem 0 2rem; color: transparent; font-family: var(--font-display); font-size: clamp(5rem, 17vw, 15rem); font-weight: 800; line-height: 0.68; letter-spacing: -0.06em; white-space: nowrap; -webkit-text-stroke: 1px rgba(255,255,255,.18); }
.footer-grid { display: grid; gap: 2rem; }
.footer-links { display: grid; gap: 0.4rem; }
.footer-links a { min-height: 2.75rem; border-bottom: 1px solid var(--line); }
.legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; color: var(--muted); border-top: 1px solid var(--line); font-size: var(--step--1); }
.legal a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

@media (min-width: 64rem) {
  .site-header { right: 1.5rem; left: 1.5rem; padding-inline: 1rem; }
  .nav-toggle { display: none; }
  .site-nav { position: static; visibility: visible; padding: 0; border: 0; background: transparent; opacity: 1; transform: none; }
  .site-nav ul { display: flex; gap: 1.5rem; }
  .site-nav a { min-height: 2.75rem; padding: 0; border: 0; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.06em; }
  .site-header .header-cta { display: inline-flex; min-width: auto; min-height: 3rem; }
  .service-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-panel { border-right: 1px solid var(--line); border-bottom: 0; }
  .service-panel:last-child { border-right: 0; }
  .portfolio-grid { grid-template-columns: 1.15fr 0.85fr; }
  .portfolio-card:first-child { grid-row: span 2; }
  .portfolio-card:first-child .before-after { min-height: 46rem; }
  .footer-grid { grid-template-columns: 1.3fr 0.7fr 0.7fr; }
}