/* Fixes from the UX audit (P1 and P2). Loaded last. */

/* P1.1 Nav: a solid dark pill, legible over cream and aurora alike. */
.topnav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 22px; border-radius: 999px; width: max-content; max-width: calc(100% - 32px); background: rgba(8, 20, 13, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); color: var(--text); }
.topnav .logo { font: 400 26px "Bricolage Grotesque"; }
.topnav .links { display: flex; gap: 22px; font-size: 14px; color: #c9d6cc; }
.topnav .links a:hover { color: #fff; }
.topnav a:focus-visible, .menu-btn:focus-visible, .motion-toggle:focus-visible, .media-toggle:focus-visible, .skip-anim:focus-visible, .link-quiet:focus-visible, summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform 0.25s ease; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* P1.2 Phones: a menu button that opens the section links. */
@media (max-width: 960px) {
  .topnav { gap: 10px; padding-left: 18px; }
  .topnav .links { display: none; }
  .menu-btn { display: inline-flex; }
  .topnav.open { border-radius: 26px; flex-wrap: wrap; }
  .topnav.open .links { display: flex; flex-direction: column; order: 9; width: 100%; gap: 0; padding: 8px 4px 6px; font-size: 18px; }
  .topnav.open .links a { padding: 12px 6px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .nav-cta { padding: 10px 16px; font-size: 14px; }
}

/* P1.3 Pause controls: each clip, and motion across the page. */
.media-box { position: relative; }
.media-toggle { position: absolute; right: 22px; top: 22px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(6, 17, 11, 0.75); color: #fff; cursor: pointer; display: grid; place-items: center; font: 600 12px Inter; }
.device .media-toggle { right: 26px; top: 30px; }
.media-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.motion-toggle { font: 500 13px Inter; color: var(--muted); background: transparent; border: 1px solid var(--edge); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.motion-toggle:hover { color: var(--text); }
.still .sky i, .still .marquee div, .still .flow, .still .dots i, .still .caret::after { animation-play-state: paused !important; }

/* P1.4 Small labels on cream: a darker terracotta that passes AA (about 5.4:1). */
.paper .kicker, .paper .sec-head .mono { color: #9a4a28; }

/* P2 Buttons: one primary, the other quiet. */
.link-quiet { display: inline-flex; align-items: center; padding: 13px 6px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(166, 184, 171, 0.5); }
.link-quiet:hover { color: var(--text); }
.paper .link-quiet { color: var(--soft); }
.btn-ink { background: var(--ink); color: var(--paper); }
.mid-cta { margin-top: 26px; }
.center-row { justify-content: center; margin-top: 40px; }

/* P2 Hero: the window starts zoomed on the canvas and pulls back to the whole editor. */
.window .viewport { overflow: hidden; }
.window .viewport img { transform: scale(var(--zoom, 1)); transform-origin: 62% 62%; transition: transform 0.1s linear; }
.hero .providers { border: 0; padding: 40px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.hero .providers ul { display: flex; gap: 40px; list-style: none; flex-wrap: wrap; font: 400 32px/1 "Bricolage Grotesque"; }
.hero .providers small { font: 500 13px Inter; color: var(--muted); margin-left: 6px; }

/* P2 Interview: skip, the result and the journey. */
.skip-row { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.skip-anim { font: 500 14px Inter; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.skip-anim:hover { background: var(--ink); color: var(--paper); }
.result { margin-top: 110px; }
.result .spread { margin-top: 64px; }
.result .spread-head { text-align: center; max-width: 760px; margin: 0 auto; }
.result .spread-head h2 { font-size: clamp(42px, 5.6vw, 84px); margin: 18px 0 20px; }
.result .spread-head p { font: 400 clamp(19px, 2vw, 23px)/1.45 "Bricolage Grotesque"; max-width: 44ch; margin: 0 auto; }
.journey { margin-top: 110px; }
.inline-shot { margin: 4px 0 6px; border-radius: 16px; overflow: hidden; border: 1px solid #22302a; background: #161616; }
.inline-shot img { width: 100%; display: block; }
.inline-shot figcaption { font: 500 12px "JetBrains Mono", monospace; color: #a6b8ab; padding: 8px 12px; background: #111613; }

.own-wrap { margin-top: 110px; }

/* Footer. */
footer .wrap { align-items: center; }

@media (max-width: 960px) {
  .inline-shots .mirror { display: none; }
  .talk-grid { display: block; }
  .hero .providers ul { font-size: 26px; gap: 22px; }
}
@media (max-width: 560px) {
  .journey .mid-cta .btn { width: 100%; justify-content: center; }
  .center-row { flex-direction: column; align-items: stretch; text-align: center; }
  .center-row .btn { justify-content: center; }
}

/* P2 Length: tighter rhythm and media sized to the job. */
section { padding: 100px 0; }
.result { margin-top: 80px; }
.result .spread { width: min(860px, 100%); margin: 48px auto 0; gap: 22px; }
.journey { margin-top: 80px; }
.pipeline li { padding: 20px 0; }
.pipeline h3 { font-size: clamp(34px, 3.6vw, 52px); }
.pipeline .thumb img { aspect-ratio: 16 / 8; }
.head-gap { margin-bottom: 44px; }
.k-layers, .k-fx { height: 500px; }
.k-vars { height: 320px; }
.k-auto, .k-pick { height: 164px; }
.mats { width: min(1000px, 100%); margin-inline: auto; }
.materials .split { margin-bottom: 40px; }
.device { width: 280px; }
.own-wrap { margin-top: 80px; }
.final { padding: 130px 0 140px; }
.stage { margin-top: 44px; }
@media (max-width: 960px) {
  .k-layers, .k-fx, .k-auto, .k-pick { height: 300px; }
}