@import url("../design-system/styles.css");

html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 30; }
.skip-link:focus { top: var(--space-4); }

.site-nav { position: fixed; inset: 0 0 auto 0; }
.site-nav .ds-nav__links a.lang { font-family: var(--font-mono); }

/* Hero */
.hero { position: relative; min-height: 100vh; display: grid; align-items: center; padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-24); background: var(--surface-deep); overflow: hidden; }
.hero__glow { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% -10%, rgba(53,89,120,.55) 0%, rgba(53,89,120,0) 60%); }
.hero__streak { position: absolute; left: -6%; top: -20%; width: 520px; height: 900px; transform: rotate(18deg); filter: blur(28px); background: linear-gradient(180deg, rgba(154,219,230,0) 0%, rgba(154,219,230,.28) 45%, rgba(154,219,230,0) 100%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-16); align-items: center; }
.hero__title { margin: var(--space-5) 0 var(--space-5); font-size: clamp(var(--text-3xl), 5.6vw, var(--text-5xl)); }
.hero__title em { font-style: normal; color: var(--tone-signal); }
.hero__figure { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.hero__mark { --size: min(400px, 60vw); clip-path: inset(100% 0 0 0); animation: grow 1.8s var(--ease-out) .3s forwards, settle 1.6s var(--ease-in-out) 2.1s forwards; }
.hero__ring { position: absolute; inset: 6%; border-radius: var(--radius-circle); border: 1px solid var(--glass-border); opacity: 0; animation: fade 1.2s var(--ease-standard) 1.7s forwards; }
.hero__ring::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--aurora); opacity: .8; }
@keyframes grow { to { clip-path: inset(0 0 0 0); } }
@keyframes settle { to { filter: drop-shadow(0 0 22px rgba(154,219,230,.38)); } }
@keyframes fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__mark { clip-path: none; animation: none; filter: drop-shadow(0 0 22px rgba(154,219,230,.38)); }
  .hero__ring { opacity: 1; animation: none; }
}
@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__figure { display: none; }
  .stats { gap: var(--space-8); margin-top: var(--space-12); }
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* Stats: value, label (the item's own text), note */
.stats { display: flex; flex-wrap: wrap; gap: var(--space-10); margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.stats .ds-stat { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-primary); }
.stats .ds-stat__note { font-weight: var(--weight-regular); letter-spacing: normal; text-transform: none; }
.stats .ds-stat:nth-child(3n+2) .ds-stat__value { color: var(--tone-verdant); }
.stats .ds-stat:nth-child(3n+3) .ds-stat__value { color: var(--tone-brass); }

/* Cards sit on the section ground so background veins never show through them */
.ds-section { --section-ground: var(--surface-page); }
.ds-section--black { --section-ground: var(--surface-alt); }
.ds-section--deep { --section-ground: var(--surface-deep); }
.ds-service, .case { background: linear-gradient(var(--surface-card), var(--surface-card)) var(--section-ground); }

.ds-section--center { text-align: center; }
.ds-section--center .ds-lead, .ds-section--center p { margin-inline: auto; }
.ds-section--center .actions { justify-content: center; }
.ds-section--center .actions + p { margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--text-sm); }
.ds-section--center .actions + p a { color: var(--tone-signal); }

/* Services */
.service-list { margin-top: auto; }
.ds-tags { margin: 0; }
.ds-service .ds-checklist { font-size: var(--role-small-size); text-align: left; }

/* Principles */
.principle { display: flex; flex-direction: column; gap: var(--space-3); }
.principle h3 { margin: 0; font-size: var(--text-lg); }
.principle p { margin: 0; font-size: var(--role-small-size); }

/* Case studies */
.case { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.case h3 { margin: 0; font-size: var(--text-lg); }
.case p { margin: 0; font-size: var(--role-small-size); }
.case .ds-tags { margin-top: auto; padding-top: var(--space-2); }

/* Process */
.process li { padding-right: var(--space-6); font-size: var(--role-small-size); color: var(--text-secondary); }
.process li::before { background: linear-gradient(90deg, var(--signal-400), var(--border-subtle)); }
.process li::after { background: var(--signal-400); box-shadow: 0 0 0 4px rgba(99,194,212,.18); }
.process { counter-reset: step; }
.process li { counter-increment: step; }
.process li b { font-size: var(--text-base); margin-bottom: var(--space-1); color: var(--text-primary); }
.process li b::before { content: counter(step) " · "; }
@media (max-width: 900px) {
  .process { flex-direction: column; gap: var(--space-8); }
}

/* Founder */
.founder { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.founder h2 { margin-bottom: var(--space-2); }
.founder h2 + p { margin-bottom: var(--space-6); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 700px) { .founder { grid-template-columns: 1fr; gap: var(--space-6); } }

/* FAQ */
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Legal pages */
.legal { padding: calc(var(--header-height) + var(--space-16)) 0 var(--section-y); }
.legal h1 { margin-bottom: var(--space-10); }
.legal h2 { margin-top: var(--space-10); font-size: var(--text-xl); }
.legal h3 { margin-top: var(--space-6); font-size: var(--text-base); }
.legal .effective { color: var(--text-muted); font-size: var(--role-small-size); }
.legal a:not(.ds-btn) { color: var(--tone-signal); }
.legal img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg, 12px); }
.legal p:has(> a.ds-btn) { margin: var(--space-6) 0 var(--space-8); text-align: center; }
.legal p:has(> img) { margin: 0 0 var(--space-8); }
.legal p:has(> a.zoom) { display: flex; gap: var(--space-4); }
.legal a.zoom { flex: 1 1 0; min-width: 0; cursor: zoom-in; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; }
.lightbox::backdrop { background: rgb(0 0 0 / 0.88); }
.lightbox img { display: block; margin: auto; max-width: 100%; max-height: 100dvh; width: auto; height: auto; object-fit: contain; cursor: zoom-out; }
.facts { display: grid; gap: var(--space-3); margin: 0 0 var(--space-8); }
.facts > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-4); }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; color: var(--text-primary); }
@media (max-width: 600px) { .facts > div { grid-template-columns: 1fr; gap: 0; } }
.ds-footer__legal { flex-wrap: wrap; gap: var(--space-6) var(--space-10); }