/* ============================================================
   Personal Engineering Practice — Landing
   Palette: deep navy + warm gold
   ============================================================ */

/* Self-hosted fonts (Latin subset). GDPR: avoids Google Fonts CDN entirely. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-normal.woff2') format('woff2');
}

:root {
  --bg-0: #07090f;
  --bg-1: #0a0e1a;
  --bg-2: #0d1120;
  --bg-card: #11152480;
  --bg-card-solid: #0f1322;
  --hairline: rgba(201, 169, 97, 0.14);
  --hairline-strong: rgba(201, 169, 97, 0.32);
  --rule: rgba(255, 255, 255, 0.06);

  --gold-1: #c9a961;
  --gold-2: #e6c478;
  --gold-3: #a8884a;
  --gold-soft: rgba(201, 169, 97, 0.5);

  /* Cool accent — used ONLY for "live signal" cues: pulse dots, status
     markers, success state. Never for headlines, links, or CTAs (those stay
     gold). Complementary to gold on the colour wheel; gives the eye discrete
     focal points without competing for brand identity. */
  --accent-cool: #5eb3a8;
  --accent-cool-soft: rgba(94, 179, 168, 0.18);

  --ink: #ecedf2;
  --ink-2: #c5c8d4;
  --mute: #8b8fa3;
  --mute-2: #5e6478;
  --whisper: #3f4356;

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(201, 169, 97, 0.06), transparent 60%),
    radial-gradient(900px 700px at -10% 40%, rgba(201, 169, 97, 0.04), transparent 65%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle film grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ============================================================
   Layout primitives
   ============================================================ */

.shell { position: relative; z-index: 2; }

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) var(--pad);
  position: relative;
  z-index: 0;
}

.section--tight { padding-block: clamp(60px, 10vh, 110px); }

/* Per-section tonal atmosphere — a full-bleed pseudo-element layered behind
   each section, tinted slightly differently to give the page chromatic
   rhythm as you scroll. Overlays the body's gold-radial atmosphere; doesn't
   replace it, so the warmth still bleeds through. Subtle by design. */
.section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
}
.section.hero::before {
  background: linear-gradient(180deg, rgba(40, 60, 110, 0.16) 0%, transparent 100%);
}
#process::before {
  background: linear-gradient(180deg, transparent 0%, rgba(30, 50, 90, 0.14) 100%);
}
#capabilities::before {
  background: linear-gradient(180deg, rgba(30, 50, 90, 0.12) 0%, rgba(70, 40, 70, 0.08) 100%);
}
#about::before {
  background: linear-gradient(180deg, rgba(70, 40, 70, 0.10) 0%, rgba(35, 30, 70, 0.10) 100%);
}
#testimonials::before {
  background: linear-gradient(180deg, rgba(35, 30, 70, 0.10) 0%, rgba(25, 40, 60, 0.10) 100%);
}
#contact::before {
  background: linear-gradient(180deg, rgba(25, 40, 60, 0.10) 0%, transparent 100%);
}

/* Decorative corner bracket (top-right of sections) */
.corner-bracket {
  position: absolute;
  width: 240px;
  height: 150px;
  border-top: 1px solid var(--hairline-strong);
  border-right: 1px solid var(--hairline-strong);
  opacity: 0;
  pointer-events: none;
}
.corner-bracket--tr { top: clamp(60px, 10vh, 110px); right: var(--pad); }

/* ============================================================
   Section eyebrow + heading
   ============================================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 28px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-1);
}

.h-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 8.5vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--ink);
  margin: 0;
}
.h-display .gold {
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-1) 60%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

.h-section {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
  margin: 0;
}
.h-section .gold {
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-1) 60%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

.lede {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
  max-width: 38ch;
}

/* ============================================================
   Top nav
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(7,9,15,0.78), rgba(7,9,15,0.4));
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-mark {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  border-radius: 6px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: color 200ms ease;
}
.nav-links a:hover { color: var(--gold-1); }
.nav-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  transition: all 220ms ease;
}
.nav-cta:hover {
  background: rgba(201,169,97,0.08);
  border-color: var(--gold-1);
}
.nav-cta .arrow { transition: transform 220ms ease; }
.nav-cta:hover .arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-height: calc(100vh - 80px);
  padding-block: clamp(60px, 8vh, 100px);
}
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
}

.hero-copy { position: relative; }

.hero-title {
  margin: 0 0 28px;
  padding-right: 0.3em;
}

.hero-lede {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
  max-width: 40ch;
  margin: 0 0 36px;
}

/* Social icon row, sits between the headline and lede */
.hero-socials {
  display: flex;
  gap: 12px;
  margin: 4px 0 30px;
}
.hero-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  color: var(--gold-1);
  background: rgba(201, 169, 97, 0.04);
  text-decoration: none;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease;
}
.hero-social:hover,
.hero-social:focus-visible {
  color: var(--gold-2);
  border-color: rgba(201, 169, 97, 0.55);
  background: rgba(201, 169, 97, 0.09);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.18),
    0 8px 24px -8px rgba(201, 169, 97, 0.45),
    0 0 32px -8px rgba(201, 169, 97, 0.35);
  outline: none;
}
.hero-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.tag {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255,255,255,0.015);
  transition: all 240ms ease;
  cursor: default;
}
.tag:hover {
  border-color: var(--hairline-strong);
  color: var(--gold-2);
  background: rgba(201,169,97,0.05);
  transform: translateY(-1px);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-1));
  color: #1a1408;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--gold-2);
  box-shadow: 0 8px 24px rgba(201,169,97,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 240ms ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(201,169,97,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary .arrow { transition: transform 240ms ease; }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 200ms ease;
}
.btn-ghost:hover { color: var(--gold-1); }
.btn-ghost .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-cool);
  box-shadow: 0 0 0 4px var(--accent-cool-soft);
}

/* Hero visual collage */
.hero-visual {
  position: relative;
  height: 560px;
  overflow: visible;
  /* Perspective for the 3D unfold of the detail panel */
  perspective: 1200px;
  perspective-origin: 50% 0%;
  /* Grows when a card is promoted so the active card keeps its full height
     (no shrink) and the panel still has room to unfold below. */
  transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-visual.has-detail {
  height: 620px;
}
@media (max-width: 880px) {
  .hero-visual { height: 420px; margin-top: 20px; }
}

.collage-card {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card-solid);
  border: 1px solid var(--hairline);
  /* Make it a real button without button chrome */
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    top 600ms cubic-bezier(0.22, 1, 0.36, 1),
    left 600ms cubic-bezier(0.22, 1, 0.36, 1),
    right 600ms cubic-bezier(0.22, 1, 0.36, 1),
    bottom 600ms cubic-bezier(0.22, 1, 0.36, 1),
    width 600ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms ease,
    box-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keyboard focus ring — gold, matches brand. Only shows on keyboard nav,
   not on mouse click, thanks to :focus-visible. */
.collage-card:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 4px;
  border-radius: 14px;
}

/* Hover: lift, scale slightly, glow */
.collage-card.is-in:hover {
  border-color: rgba(201, 169, 97, 0.35);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.18),
    0 24px 50px -16px rgba(0, 0, 0, 0.55),
    0 0 60px -8px rgba(201, 169, 97, 0.22);
  z-index: 10;
}
.collage-card--main.is-in:hover { transform: translate(20%, -8px) rotate(-1.5deg) scale(1.04) !important; }
.collage-card--side.is-in:hover { transform: translate(36%, calc(213px - 8px)) rotate(0deg) scale(1.06) !important; }
.collage-card--bottom.is-in:hover { transform: translate(-3%, calc(364px - 8px)) rotate(0.5deg) scale(1.06) !important; }

/* When ANY card is in detail view, suppress hover effects on other cards */
.hero-visual.has-detail .collage-card:not(.is-active):hover {
  transform: none !important;
  box-shadow: none;
}

/* Promoted (clicked) card — flies to top of visual, straightened, full-width linear */
.hero-visual.has-detail .collage-card.is-active {
  width: 90% !important;
  /* Keep the resting 16/10 aspect so the card never shrinks vertically when
     promoted — at 90% width it actually grows in both dimensions. */
  /* Card resting anchor is top:0 left:0; centre 90%-wide card with 5% gutter each side.
     5% of container = 5%/90% = 5.555% of card's own width. */
  transform: translate(5.555%, 0) rotate(0deg) scale(1) !important;
  border-color: var(--gold-1);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.4),
    0 30px 60px -16px rgba(0, 0, 0, 0.6),
    0 0 80px -8px rgba(201, 169, 97, 0.28);
  z-index: 20;
}

/* Other cards fade out and drift down */
.hero-visual.has-detail .collage-card:not(.is-active) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px) scale(0.92) !important;
}

/* Flicker on click */
@keyframes cardFlicker {
  0%   { box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.4),  0 0 80px -8px rgba(201, 169, 97, 0.28); }
  20%  { box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.75), 0 0 130px -4px rgba(201, 169, 97, 0.55); }
  35%  { box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.2),  0 0 40px -10px rgba(201, 169, 97, 0.15); }
  55%  { box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.85), 0 0 140px -2px rgba(201, 169, 97, 0.7); }
  75%  { box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.3),  0 0 60px -8px rgba(201, 169, 97, 0.2); }
  100% { box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.4),  0 0 80px -8px rgba(201, 169, 97, 0.28); }
}
.collage-card.is-flicker { animation: cardFlicker 700ms ease-out 1; }

.collage-card--main {
  /* AI Document Intelligence — top-right */
  top: 0; left: 0;
  width: 82%;
  aspect-ratio: 16 / 10;
  /* Resting position via transform: push to right, slight rotation */
  transform: translateX(calc(100% / 0.82 * 0.18 + 100%)) rotate(-3deg);
  transform: translate(20%, 0) rotate(-3deg);
  z-index: 4;
}
.collage-card--side {
  /* Operations Dashboard — middle */
  top: 0; left: 0;
  width: 70%;
  aspect-ratio: 16 / 10;
  transform: translate(36%, 213px) rotate(-1.5deg);
  z-index: 3;
}
.collage-card--bottom {
  /* Customer Portals & CRM — bottom-left */
  top: 0; left: 0;
  width: 64%;
  aspect-ratio: 16 / 10;
  transform: translate(-3%, 364px) rotate(2deg);
  z-index: 2;
}

/* ----- Floating detail panel ----- */
.card-detail {
  position: absolute;
  /* Sits BELOW the promoted card, matching its 90% width for a unified column */
  left: 50%;
  bottom: 0;
  width: 90%;
  /* Active card at width 90% with 16:10 aspect occupies ~48% of container height
     (in the expanded 620px state). Panel takes the remaining space below —
     generous enough to fit content without internal scrolling. */
  max-height: 47%;
  /* Closed: folded up flush with card's bottom edge (rotated -90 around top edge).
     Open: laid flat to reveal contents. */
  transform: translateX(-50%) rotateX(-90deg);
  transform-origin: top center;
  padding: 22px 28px 24px;
  background: rgba(13, 17, 32, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 12px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 80px -10px rgba(201, 169, 97, 0.14);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  /* Fast close: no delay, snappy fold-up so the card can slide back without lag. */
  transition:
    opacity 220ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 15;
  overflow: hidden;
}
.card-detail.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) rotateX(0deg);
  /* Open: delayed start so the card finishes its slide first, then unfolds. */
  transition:
    opacity 320ms ease 280ms,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}

/* Connector line + arrow pointing UP back to the promoted card */
.card-detail::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, var(--gold-1), transparent);
  transform: translateX(-0.5px);
  opacity: 0;
  transition: opacity 320ms ease 460ms;
}
.card-detail::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--gold-1);
  border-left: 1px solid var(--gold-1);
  transform: translate(-50%, 3px) rotate(45deg);
  opacity: 0;
  transition: opacity 320ms ease 460ms;
}
.card-detail.is-open::before,
.card-detail.is-open::after { opacity: 0.9; }

.card-detail-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--mute);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: color 200ms ease, background 200ms ease;
}
.card-detail-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.card-detail-close:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}

.card-detail-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 10px;
}
.card-detail-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  padding-right: 36px;
}
.card-detail-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 64ch;
}
.card-detail-list {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.card-detail-list li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}
.card-detail-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--gold-1);
}

@media (max-width: 880px) {
  /* Mobile: keep stacked layout */
  .card-detail {
    width: 100%;
    max-height: none;
  }
  .hero-visual.has-detail .collage-card.is-active { width: 100% !important; }
  .card-detail-list { grid-template-columns: 1fr; }
}

/* All tags at bottom-left of their card */
.collage-card--main .mock-tag,
.collage-card--side .mock-tag,
.collage-card--bottom .mock-tag {
  top: auto; right: auto;
  bottom: 10px; left: 10px;
}

.mock-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.mock-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(7, 9, 15, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
}
.mock-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-cool);
  box-shadow: 0 0 0 3px var(--accent-cool-soft);
}

/* Mock browser/app frame */
.mock-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #14182a, #0d1120);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
}
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.mock-dot:nth-child(1) { background: rgba(255,90,90,0.5); }
.mock-dot:nth-child(2) { background: rgba(255,180,80,0.5); }
.mock-dot:nth-child(3) { background: rgba(80,200,120,0.5); }
.mock-bar .mock-url {
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute-2);
  letter-spacing: 0.04em;
}
.mock-body {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.mock-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 22px);
  color: var(--ink);
  text-align: center;
  margin-bottom: 6px;
}
.mock-sub {
  font-size: 9px;
  color: var(--mute);
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.mock-cta-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.mock-cta {
  font-size: 9px;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.mock-cta--gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold-1));
  color: #1a1408;
  font-weight: 600;
}
.mock-cta--ghost {
  border: 1px solid var(--hairline-strong);
  color: var(--ink-2);
}

.mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px;
  height: 100%;
}
.mock-stat {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 9px;
  color: var(--mute);
}
.mock-stat-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.mock-stat-head .label { color: var(--ink-2); }
.mock-stat-head .pill { color: var(--gold-2); }
.mock-stat-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.mock-stat-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2));
}

.mock-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
}
.mock-form-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--mute);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mock-input {
  width: 70%;
  height: 22px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.mock-submit {
  width: 70%;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, #4a7dff, #5b8cff);
}

/* ============================================================
   Process — From Idea to Production
   ============================================================ */

.process-head {
  display: block;
  position: relative;
  padding-right: clamp(160px, 18vw, 260px);
  align-items: end;
  gap: 24px;
  margin-bottom: 56px;
  min-height: 150px;
}
@media (max-width: 720px) {
  .process-head { padding-right: 0; min-height: 0; }
}

.process-meta {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(150px, 16vw, 220px);
  padding: 18px 22px 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  z-index: 2;
}
@media (max-width: 720px) {
  .process-meta { position: static; width: auto; padding: 16px 0 0; text-align: left; }
}
.process-meta .big {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 52px;
  line-height: 1;
  color: var(--gold-2);
  letter-spacing: -0.01em;
  margin-top: 10px;
}
.process-meta .big small {
  font-family: var(--mono);
  font-style: normal;
  font-size: 13px;
  color: var(--mute);
  margin-left: 6px;
  letter-spacing: 0.2em;
}

.timeline {
  position: relative;
  margin-bottom: 36px;
  height: 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: center;
}
.timeline-seg {
  position: relative;
  height: 1px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.timeline-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
}
.timeline-seg.is-on::after { transform: scaleX(1); }

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } .timeline { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: 24px 22px 26px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.005));
  transition: all 280ms ease;
}
.step:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(201,169,97,0.04), rgba(255,255,255,0.005));
}
.step-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute);
  margin-bottom: 22px;
}
.step-head .num { color: var(--ink-2); }
.step-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(201,169,97,0.1), rgba(201,169,97,0.02));
  border: 1px solid var(--hairline-strong);
  color: var(--gold-2);
  margin-bottom: 18px;
}
.step-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
.step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
}

.process-foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.process-foot .note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mute);
}

/* ============================================================
   Capabilities grid
   ============================================================ */

.cap-head {
  display: block;
  position: relative;
  padding-right: clamp(180px, 22vw, 320px);
  align-items: end;
  gap: 24px;
  margin-bottom: 56px;
  min-height: 150px;
}
@media (max-width: 720px) { .cap-head { padding-right: 0; min-height: 0; } }

.cap-aside {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(200px, 22vw, 300px);
  padding: 18px 22px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
  text-align: right;
  z-index: 2;
}
@media (max-width: 720px) { .cap-aside { position: static; width: auto; padding: 16px 0 0; text-align: left; } }

.cap-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
@media (max-width: 980px) { .cap-grid { grid-template-columns: 1fr 1fr; } .cap-tall { grid-row: auto; } }
@media (max-width: 600px) { .cap-grid { grid-template-columns: 1fr; } }

.cap-card {
  position: relative;
  padding: 28px 28px 24px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 220px;
  transition: all 320ms ease;
  overflow: hidden;
}
.cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 0% 0%, rgba(201,169,97,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.cap-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
.cap-card:hover::before { opacity: 1; }

.cap-tall { grid-row: span 2; min-height: 460px; }

.cap-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(201,169,97,0.1), rgba(201,169,97,0.02));
  border: 1px solid var(--hairline-strong);
  color: var(--gold-2);
}
.cap-icon svg { width: 18px; height: 18px; stroke-width: 1.5; }

.cap-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.cap-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

.cap-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.cap-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cap-list li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-1);
  flex-shrink: 0;
}

.cap-models {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cap-model {
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  transition: all 240ms ease;
}
.cap-model:hover {
  border-color: var(--hairline-strong);
  background: rgba(201,169,97,0.04);
}
.cap-model .name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.cap-model .src {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.cap-model--gold .name {
  background: linear-gradient(180deg, var(--gold-2), var(--gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   About
   ============================================================ */

.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }

.about-portrait {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
@media (max-width: 880px) { .about-portrait { position: static; } }

.portrait-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201, 169, 97, 0.18), transparent 60%),
    linear-gradient(180deg, #1a1f35, #0d1120);
  border: 2px solid var(--gold-1);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.18),
    0 0 0 8px rgba(201, 169, 97, 0.06),
    0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  filter: contrast(1.02) brightness(0.98);
}

.portrait-meta { width: 100%; max-width: 320px; }
.portrait-bases {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.portrait-bases .base {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.base-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-cool);
  box-shadow: 0 0 0 3px var(--accent-cool-soft);
}
.base-dot--alt {
  background: var(--accent-cool);
  box-shadow: 0 0 0 3px var(--accent-cool-soft);
}
.base-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 36px;
}

.about-copy { display: flex; flex-direction: column; }

.about-body {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 56ch;
}
.about-body p { margin: 0; }
.about-link {
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
  transition: border-color 200ms ease;
}
.about-link:hover { border-color: var(--gold-1); }

.about-facts {
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 720px) { .about-facts { grid-template-columns: 1fr; gap: 16px; } }
.about-facts > div { display: flex; flex-direction: column; gap: 6px; }
.about-facts dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.about-facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ============================================================
   Testimonials
   ============================================================ */

.testi-head {
  display: block;
  position: relative;
  padding-right: clamp(180px, 22vw, 320px);
  margin-bottom: 64px;
  min-height: 150px;
}
@media (max-width: 720px) { .testi-head { padding-right: 0; min-height: 0; } }

.testi-aside {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(200px, 22vw, 300px);
  padding: 18px 22px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
  text-align: right;
  margin: 0;
  z-index: 2;
}
@media (max-width: 720px) {
  .testi-aside { position: static; width: auto; padding: 16px 0 0; text-align: left; }
}

.testi-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.testi-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  padding: 44px 56px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.004));
  align-items: center;
  transition: border-color 320ms ease, transform 320ms ease;
  overflow: hidden;
}
.testi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 280px at 0% 0%, rgba(201, 169, 97, 0.05), transparent 65%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.testi-card:hover { border-color: var(--hairline-strong); }
.testi-card:hover::before { opacity: 1; }

.testi-card--reverse { grid-template-columns: 280px 1fr; }
.testi-card--reverse .testi-quote { order: 2; }
.testi-card--reverse .testi-by {
  order: 1;
  border-left: none;
  border-right: 1px solid var(--rule);
  padding-left: 0;
  padding-right: 40px;
  text-align: right;
  align-items: flex-end;
}
.testi-card--reverse::before {
  background: radial-gradient(600px 280px at 100% 0%, rgba(201, 169, 97, 0.05), transparent 65%);
}

@media (max-width: 880px) {
  .testi-card,
  .testi-card--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 28px;
  }
  .testi-card--reverse .testi-quote { order: 1; }
  .testi-card--reverse .testi-by {
    order: 2;
    border-right: none;
    border-top: 1px solid var(--rule);
    padding-right: 0;
    padding-top: 24px;
    text-align: left;
    align-items: flex-start;
  }
}

.testi-quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.quote-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 0.5;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-1) 60%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: -10px;
}

.testi-card blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 64ch;
  text-wrap: pretty;
}

.testi-by {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 40px;
  border-left: 1px solid var(--rule);
  align-self: stretch;
  justify-content: center;
}
.testi-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.testi-role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-top: 4px;
}
.testi-org {
  font-size: 13px;
  color: var(--mute);
  margin-top: 6px;
  line-height: 1.4;
}

/* ============================================================
   Contact section
   ============================================================ */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }

.contact-meta { display: flex; flex-direction: column; gap: 28px; }

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255,255,255,0.015);
  text-decoration: none;
  color: var(--ink);
  transition: all 260ms ease;
}
.channel:hover {
  border-color: var(--hairline-strong);
  background: rgba(201,169,97,0.04);
  transform: translateX(4px);
}
.channel-l {
  display: flex; align-items: center; gap: 16px;
}
.channel-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(201,169,97,0.06);
  border: 1px solid var(--hairline);
  color: var(--gold-2);
}
.channel-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
.channel-info {
  display: flex; flex-direction: column;
}
.channel-info .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.channel-info .value {
  font-size: 14px;
  color: var(--ink);
  margin-top: 2px;
}
.channel-arrow {
  color: var(--gold-1);
  transition: transform 240ms ease;
}
.channel:hover .channel-arrow { transform: translate(3px, -3px); }

.availability {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(255,255,255,0.015);
}
.availability .pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-cool);
  box-shadow: 0 0 0 4px var(--accent-cool-soft);
}
.availability .pulse::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(94, 179, 168, 0.5);
  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(0.8); opacity: 0.9; }
  80%, 100% { transform: scale(2); opacity: 0; }
}

/* Form */
.form-card {
  padding: 36px 34px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  position: relative;
}
.form-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 40px; height: 40px;
  border-top: 1px solid var(--gold-1);
  border-left: 1px solid var(--gold-1);
  border-radius: 14px 0 0 0;
  opacity: 0.6;
}
.form-card::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 40px; height: 40px;
  border-bottom: 1px solid var(--gold-1);
  border-right: 1px solid var(--gold-1);
  border-radius: 0 0 14px 0;
  opacity: 0.6;
}
.form-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.form-sub {
  font-size: 13px;
  color: var(--mute);
  margin: 0 0 26px;
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.field input, .field textarea, .field select {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: all 200ms ease;
  resize: none;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold-1);
  background: rgba(201,169,97,0.04);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.08);
}
.field textarea { min-height: 110px; }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-group input { display: none; }
.chip-group label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: all 220ms ease;
  background: transparent;
}
.chip-group label:hover { border-color: var(--hairline-strong); color: var(--gold-2); }
.chip-group input:checked + label {
  background: rgba(201,169,97,0.1);
  border-color: var(--gold-1);
  color: var(--gold-2);
}

.form-submit {
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--gold-2);
  background: linear-gradient(180deg, var(--gold-2), var(--gold-1));
  color: #1a1408;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(201,169,97,0.18), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 240ms ease;
}
.form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(201,169,97,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
}
.form-submit .arrow { transition: transform 240ms ease; }
.form-submit:hover .arrow { transform: translateX(4px); }
.form-submit:disabled {
  cursor: progress;
  opacity: 0.85;
  transform: none;
  box-shadow: none;
}
.form-submit.is-sent {
  background: linear-gradient(180deg, #b4dca0 0%, #82b86c 100%);
  color: #0e1a08;
}

/* Honeypot — hidden from sighted/keyboard users, present in DOM for bots. */
.field-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Cloudflare Turnstile sits in this slot. The widget itself styles its
   internal frame (we set data-theme="dark"); we just space it. */
.field-turnstile {
  margin: 4px 0 18px;
  min-height: 65px;
}

/* Per-field validation error */
.field.is-invalid input,
.field.is-invalid textarea {
  border-color: rgba(217, 107, 107, 0.65);
  box-shadow: 0 0 0 3px rgba(217, 107, 107, 0.12);
}
.field-error {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e88a8a;
  margin-top: 2px;
}

/* Form-level error (network / captcha / server) */
.form-error,
.form-success {
  padding: 12px 14px;
  margin: 4px 0 18px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid;
}
.form-error {
  color: #f0a8a8;
  background: rgba(217, 107, 107, 0.08);
  border-color: rgba(217, 107, 107, 0.32);
}
.form-success {
  color: #aedfd5;
  background: rgba(94, 179, 168, 0.08);
  border-color: rgba(94, 179, 168, 0.32);
}

.form-foot {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================
   Legal pages (Privacy, Imprint)
   ============================================================ */

.section.legal {
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: clamp(60px, 8vh, 100px);
  padding-bottom: clamp(40px, 6vh, 80px);
}
.legal-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 8px 0 36px;
}
.legal-body {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
}
.legal-body p { margin: 0 0 16px; }
.legal-body h2 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 36px 0 12px;
}
.legal-body h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  margin: 24px 0 8px;
}
.legal-body ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
.legal-body ul li { margin-bottom: 8px; }
.legal-body strong { color: var(--ink); font-weight: 500; }
.legal-body a {
  color: var(--gold-2);
  text-decoration: underline;
  text-decoration-color: rgba(230, 196, 120, 0.4);
  text-underline-offset: 3px;
}
.legal-body a:hover { text-decoration-color: var(--gold-2); }
.legal-list {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px 24px;
  margin: 0 0 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.legal-list dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  align-self: start;
  padding-top: 2px;
}
.legal-list dd {
  margin: 0;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .legal-list {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .legal-list dt { padding-top: 8px; }
  .legal-list dd { margin-bottom: 8px; }
}
.legal-back {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-back a {
  color: var(--gold-1);
  text-decoration: none;
}
.legal-back a:hover { color: var(--gold-2); }

/* ============================================================
   Footer
   ============================================================ */

.foot {
  padding: 50px var(--pad) 30px;
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.foot a { color: var(--ink-2); text-decoration: none; transition: color 200ms ease; }
.foot a:hover { color: var(--gold-1); }
.foot-marks { display: flex; gap: 22px; }

/* ============================================================
   Staged intro animations
   ============================================================ */

.stage {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.stage.is-in { opacity: 1; transform: translateY(0); }

.stage-fade { transform: none; }

/* word-stagger for serif headlines */
.word-stage .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  overflow: visible;
  padding-right: 0.05em;
}
.word-stage .word-space {
  display: inline-block;
  width: 0.28em;
  white-space: normal;
}
.word-stage.is-in .word { opacity: 1; transform: translateY(0); }

/* corner bracket fade */
.corner-bracket.is-in { animation: bracketFade 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes bracketFade { from { opacity: 0; } to { opacity: 1; } }

/* collage staggered entry — fade only; cards keep their CSS resting transform */
.collage-card { opacity: 0; transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1), top 900ms cubic-bezier(0.22, 1, 0.36, 1), left 900ms cubic-bezier(0.22, 1, 0.36, 1), width 900ms cubic-bezier(0.22, 1, 0.36, 1), border-color 600ms ease, box-shadow 600ms ease; }
.collage-card.is-in { opacity: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stage, .word-stage .word, .collage-card { opacity: 1 !important; transform: none !important; }
  .timeline-seg::after { transform: scaleX(1) !important; transition: none !important; }
}

/* utility */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 500ms; }
.delay-6 { transition-delay: 600ms; }
.delay-7 { transition-delay: 700ms; }

/* ============================================================
   Responsive refinements
   Final pass tuning the page for narrower viewports + touch.
   Existing breakpoints (520, 600, 720, 880, 980) handle the major
   layout shifts; these rules fix overflow, undersized tap targets,
   and a few small-screen typographic awkwardnesses surfaced by
   testing at 320 / 375 / 414 / 768 px.
   ============================================================ */

/* (`overflow-x: hidden` on body is set in the base body rule above —
   no extra safety net here, because `overflow-x: clip` plus
   `background-attachment: fixed` on body breaks Chromium's painting
   of the body gradient past the first viewport, turning the whole
   page below the hero white on mobile.) */

/* ---------- Nav ---------- */

/* Tighten nav on narrow viewports so brand + CTA fit without overflow */
@media (max-width: 720px) {
  .nav-inner { gap: 12px; padding: 12px var(--pad); }
  .brand { font-size: 18px; gap: 10px; }
  .brand-mark { width: 28px; height: 28px; }
  .nav-cta {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 0.16em;
    gap: 6px;
  }
}

/* The combined width of brand + 5 nav-links + nav-cta exceeds 768 px once
   you account for gaps. Drop the nav-cta below 880 px — the hero's
   prominent "Start a project" button covers the same intent. */
@media (max-width: 880px) {
  .nav-cta { display: none; }
}

/* ---------- Mobile hamburger button + overlay menu ---------- */

.nav-toggle {
  display: none;  /* shown only at <= 720 (where nav-links also vanish) */
  width: 44px;
  height: 44px;
  background: rgba(201, 169, 97, 0.04);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(201, 169, 97, 0.10);
  border-color: rgba(201, 169, 97, 0.55);
  outline: none;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--gold-1);
  border-radius: 1px;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease;
  transform-origin: center;
}
/* Hamburger -> X animation when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
}

/* The full-screen overlay drops down from below the nav. Initially
   hidden via display:none + opacity:0; .is-open + display:flex turns
   it into a centred column of large tappable links + CTA. */
.mobile-menu {
  position: fixed;
  top: 64px;  /* sits below the nav bar — actual height is 18px padding + ~28px content */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 9, 15, 0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  z-index: 40;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 32px 24px 48px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 280ms ease;
}
.mobile-menu.is-open {
  display: flex;
  opacity: 1;
}
@media (max-width: 720px) {
  .mobile-menu { top: 56px; }  /* tighter nav at <= 720 px */
}

.mobile-menu-links {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu-links a {
  display: block;
  padding: 18px 16px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 200ms ease, padding 200ms ease;
}
.mobile-menu-links a:hover,
.mobile-menu-links a:focus-visible {
  color: var(--gold-2);
  padding-left: 22px;
  outline: none;
}

.mobile-menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 28px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-1));
  color: var(--bg-0);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  margin-top: auto;
  align-self: stretch;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.mobile-menu-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(201, 169, 97, 0.28);
}
.mobile-menu-cta .arrow { transition: transform 240ms ease; }
.mobile-menu-cta:hover .arrow { transform: translateX(4px); }

/* When menu is open, lock the body so the page behind doesn't scroll. */
body.menu-open { overflow: hidden; }

/* Bump nav-link tap area on touch-likely viewports. Negative margin keeps
   the visible text where it was so the nav doesn't get visibly fatter. */
@media (max-width: 1024px) {
  .nav-links a {
    padding: 14px 6px;
    margin: -14px 0;
  }
  .nav-links { gap: 16px; }
}

/* ---------- Tap targets (WCAG 2.5.5 — 44x44 minimum on touch) ---------- */

/* Card-detail close button — was 28x28 with tiny tap area; bump to 44 */
.card-detail-close {
  width: 44px;
  height: 44px;
  font-size: 26px;
  top: 6px;
  right: 8px;
  display: grid;
  place-items: center;
}

/* btn-ghost inline anchor — was effectively 18 px tall. Pad for touch on
   any viewport an iPad / phone / touch laptop is likely to use. */
@media (max-width: 1024px) {
  .btn-ghost {
    min-height: 44px;
    padding: 10px 0;
    align-items: center;
  }
}
@media (max-width: 720px) {
  .btn-primary { min-height: 48px; }
  .hero-actions { gap: 16px; }
}

/* Footer marks — give padding so the hit area is tappable */
.foot-marks a {
  padding: 6px 4px;
  display: inline-block;
}
@media (max-width: 720px) {
  .foot-marks a { padding: 10px 6px; }
}

/* The Mundus link in About body — give a tiny vertical padding so the
   hit area is at least ~32 px on phones. Inline-block keeps it inline. */
.about-link {
  display: inline-block;
  padding: 2px 0;
}

/* ---------- Hero ---------- */

@media (max-width: 480px) {
  .hero-title { padding-right: 0; }
  .hero { padding-block: clamp(40px, 6vh, 80px); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { justify-content: center; }
  .tag-row { gap: 8px; }
  .tag { font-size: 11px; padding: 6px 10px; }
}

/* Hero collage at narrow widths — the desktop layout uses absolute
   positioning with hard-coded translate(y) offsets (213 px / 364 px) that
   exceed the hero-visual container at < 600 px and bleed into the next
   section. Switch to vertical flex stacking but PRESERVE each card's
   signature width and rotation so the design language stays intact —
   only drop the Y offsets that force the desktop collage. */
@media (max-width: 600px) {
  .hero-visual {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    perspective: none;  /* drop the desktop perspective — irrelevant in flex flow */
  }
  .collage-card {
    position: relative;
    top: auto;
    left: auto;
  }
  /* Each card keeps its desktop width % and tilt — just no translation. */
  .collage-card--main   { width: 82%; transform: rotate(-3deg)   !important; }
  .collage-card--side   { width: 70%; transform: rotate(-1.5deg) !important; }
  .collage-card--bottom { width: 64%; transform: rotate(2deg)    !important; }
  /* Active state: lay flat, full-width, no tilt (overrides the rotations
     above when a card is promoted via dialog click). */
  .hero-visual.has-detail .collage-card.is-active {
    transform: none !important;
    width: 100% !important;
  }
  /* Hide non-active cards entirely (not just opacity-0) so they don't
     occupy flex-flow space — without this, the panel would render at the
     bottom of the visual area with a huge dark gap above it. */
  .hero-visual.has-detail .collage-card:not(.is-active) {
    display: none !important;
  }
  /* Re-position the card-detail panel as a relative-flow flex child so it
     appears directly under the active card. On mobile we drop the desktop
     3D rotateX unfold (which conflicts with flex-flow because the rotated
     box still occupies its full vertical space when "folded") and use a
     simple max-height + opacity collapse instead. Visually different from
     desktop but clean and predictable. */
  #card-detail {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transform: none;
    opacity: 0;
    transition:
      max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 360ms cubic-bezier(0.22, 1, 0.36, 1),
      margin 360ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 240ms ease;
  }
  #card-detail.is-open {
    max-height: 800px;
    padding-top: 22px;
    padding-bottom: 24px;
    margin-top: 6px;
    opacity: 1;
    transform: none;
    transition:
      max-height 480ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
      padding 480ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
      margin 480ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
      opacity 280ms ease 200ms;
  }
  /* The decorative connector line above the panel doesn't make sense
     when the panel is in flex flow rather than floating below the card. */
  #card-detail::before,
  #card-detail::after {
    display: none;
  }
}

/* ---------- Hide decorative chrome that collides with content on phones --- */

/* Corner brackets sit at the top-right of each section. On narrow viewports
   they overlap content that's now full-width (the eyebrow text in hero,
   the round headshot in about), as flagged by the user. */
@media (max-width: 880px) {
  .corner-bracket { display: none; }
}

/* Hero tag-row crowds the layout on phones; the value props are already in
   the headline and lede. Drop them below 480 px. */
@media (max-width: 480px) {
  .tag-row { display: none; }
}

/* ---------- Sections + spacing ---------- */

@media (max-width: 480px) {
  /* Tighten outer section padding so content isn't squeezed to a strip */
  :root { --pad: 16px; }

  /* Section vertical padding compresses */
  .section { padding-block: clamp(48px, 8vh, 90px); }
}

/* ---------- Contact form ---------- */

@media (max-width: 480px) {
  .form-card { padding: 24px 20px; }
  .field input,
  .field textarea { font-size: 16px; } /* 16+ prevents iOS Safari zoom-on-focus */
  .form-foot { font-size: 9px; }
}

/* ---------- About ---------- */

@media (max-width: 480px) {
  .portrait-frame { width: clamp(180px, 60vw, 240px); }
}

/* ---------- Hero socials ---------- */

@media (max-width: 480px) {
  .hero-social { width: 48px; height: 48px; }
  .hero-social svg { width: 22px; height: 22px; }
}

/* ---------- Testimonials ---------- */

/* The desktop card has 32 px / 28 px padding which leaves only ~210 px of
   text width on a 320 px phone — words break aggressively. Pull padding in
   on phone so the body text has more room to breathe. */
@media (max-width: 480px) {
  .testi-card,
  .testi-card--reverse {
    padding: 24px 18px;
  }
  .testi-quote { gap: 14px; }
  .testi-quote blockquote { font-size: 15px; line-height: 1.55; }
}

/* ---------- Legal pages ---------- */

@media (max-width: 480px) {
  .section.legal { padding-inline: 16px; }
  .legal-body h2 { font-size: 20px; }
  .legal-body { font-size: 14px; }
}
.delay-8 { transition-delay: 800ms; }