/* Layout: near-black page, one light sans, hairlines only. Text left, one photo right, generous empty space. No accent colour. */
:root {
  --bg: #0a0a0b;
  --bg-2: #101012;
  --fg: #ecebe8;
  --mute: #86868c;
  --line: rgba(236, 235, 232, 0.14);
  --brass: #ecebe8;
  --ink: #0a0a0b;
  --display: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

.wrap {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: max(20px, env(safe-area-inset-left, 0px));
}

/* header */
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 28px; }
.brand { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; }
.nav a { text-decoration: none; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.nav a:hover { color: var(--fg); }
.nav .lang { color: var(--fg); border: 0; padding: 0; border-bottom: 1px solid var(--line); }

/* hero */
.hero { position: relative; padding-block: 190px 120px; }
.arc { display: none; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: end; gap: 56px 80px; }
.hero-copy { min-width: 0; }
.eyebrow { margin: 0 0 28px; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); }
h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.rule { width: 40px; height: 1px; margin: 40px 0 28px; background: var(--fg); border: 0; }
.lead { max-width: 30rem; margin: 0; color: #c9c8c4; }
.cta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.btn { display: inline-block; padding: 0 0 6px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--fg); }
.btn:hover { color: var(--mute); border-color: var(--mute); }
.btn.solid { background: none; color: var(--fg); }

.hero-photo { margin: 0; min-width: 0; width: 100%; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; }

/* sections */
section { padding-block: 110px; border-top: 1px solid var(--line); }
section.alt { background: none; }
h2 { margin: 0 0 18px; font-weight: 300; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.sub { margin: 0 0 48px; max-width: 36rem; color: var(--mute); }

/* videos */
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 32px; }
.videos figure { margin: 0; min-width: 0; }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: var(--bg-2) center / cover no-repeat; border: none; }
.video button { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; background: linear-gradient(rgba(10,10,11,0.28), rgba(10,10,11,0.6)); border: 0; color: var(--fg); font: inherit; cursor: pointer; }
.video button:hover { background: linear-gradient(rgba(10,10,11,0.12), rgba(10,10,11,0.45)); }
.video .play { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--fg); display: grid; place-items: center; }
.video .play::before { content: ""; margin-left: 4px; border-left: 14px solid var(--fg); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.video button:hover .play { background: rgba(236,235,232,0.1); }
.video .hint { font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none !importante; }
figcaption { margin-top: 14px; font-size: 0.95rem; }
figcaption small { display: block; color: var(--mute); font-size: 0.82rem; margin-top: 2px; }
figcaption a { color: var(--fg); text-decoration-color: var(--line); text-underline-offset: 3px; }

/* about */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 56px; }
.cols > * { min-width: 0; }
.cols p { margin: 0 0 1.1em; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts li:first-child { border-top: 1px solid var(--line); }
.facts b { flex: 0 0 8.5rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.7rem; color: var(--mute); padding-top: 5px; }
.facts span { flex: 1 1 12rem; min-width: 0; }

/* contact */
.contact a.mail { display: inline-block; font-weight: 300; font-size: clamp(1.5rem, 5.4vw, 2.6rem); letter-spacing: -0.01em; text-decoration: none; border-bottom: 1px solid var(--fg); overflow-wrap: anywhere; }
.contact .links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 40px; }

footer { padding-block: 36px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--mute); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
footer a { color: var(--mute); }

@media (max-width: 820px) {
  .hero { padding-block: 150px 80px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-photo { max-width: 320px; }
  section { padding-block: 80px; }
}