/* ==========================================================================
   workfrombandung landing page
   A scroll-driven 3D ribbon (scene.js) floats behind the page. Every block of
   text sits on a frosted "sheet", so the ribbon can move freely without ever
   sitting directly under words. The hero and the About interlude are the open
   stretches where the ribbon shows in full.
   Colours and type stay on the launch brief: Ink, Paper, Blue, Mist, Inter.
   ========================================================================== */

:root {
  --ink: #202926;
  --ink-soft: #4b5651;
  --paper: #f6f7f2;
  --blue: #2344c8;
  --blue-deep: #1b37a6;
  --blue-pale: #aebdf5;
  --mist: #e5edf2;

  --line: rgba(32, 41, 38, 0.1);
  --line-strong: rgba(32, 41, 38, 0.24);
  --blue-line: rgba(35, 68, 200, 0.22);

  /* Frosted sheet: light enough to feel like glass, dense enough to keep text readable */
  --sheet-bg: rgba(250, 251, 247, 0.76);
  --sheet-border: rgba(255, 255, 255, 0.92);
  --sheet-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(32, 41, 38, 0.04),
    0 48px 96px -56px rgba(24, 40, 110, 0.42);
  --sheet-blur: blur(28px) saturate(1.25);

  /* Tiles sit on a sheet, so they are whiter rather than more transparent */
  --tile-bg: rgba(255, 255, 255, 0.78);
  --tile-border: rgba(32, 41, 38, 0.08);
  --tile-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 18px 36px -28px rgba(32, 41, 38, 0.28);

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-hero: clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem); /* 44px to 88px */
  --fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); /* 32px to 52px */

  --gutter: 12px;
  --container: 1240px;
  --sheet-pad: 24px;
  --radius-xl: 28px;
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
}

@media (min-width: 720px) {
  :root {
    --gutter: 24px;
    --sheet-pad: clamp(36px, 5vw, 72px);
    --radius-xl: 36px;
    --radius: 24px;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft blue and mist light, fixed behind the page and the 3D canvas */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 88% 0%, rgba(35, 68, 200, 0.12), transparent 70%),
    radial-gradient(55% 40% at 0% 45%, rgba(229, 237, 242, 0.95), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(35, 68, 200, 0.08), transparent 70%);
}

/* Full-screen 3D ribbon, fixed behind the content (see scene.js) */
#scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--fs-h2);
  text-wrap: balance;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue-deep);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

[id] {
  scroll-margin-top: 104px;
}

.container {
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* Tech accent: a monospace pill with a code-comment marker */
.kicker {
  display: flex;
  width: fit-content;
  margin-bottom: 20px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--blue);
}

.kicker::before {
  content: "//\00a0";
  color: var(--ink-soft);
}

/* Long kickers wrap on phones: let the text run under the marker */
@media (max-width: 539px) {
  .kicker {
    display: block;
    max-width: 100%;
    border-radius: 14px;
  }
}

.microcopy {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(35, 68, 200, 0.8);
}

.btn-primary:hover {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: 0 18px 30px -14px rgba(35, 68, 200, 0.9);
}

/* Frosted ghost button, matching the glass panels */
.btn-secondary {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--line);
  box-shadow: var(--tile-shadow);
  color: var(--ink);
}

.btn-secondary:hover {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink);
}

/* For the dark and blue sheets */
.btn-light {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.5);
}

.btn-light:hover {
  background: #eef2ff;
  color: var(--blue-deep);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.btn-outline-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.btn-large {
  min-height: 58px;
  padding: 0 28px;
  font-size: 17px;
}

.btn-compact {
  min-height: 42px;
  padding: 0 16px;
  font-size: 15px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

@media (max-width: 539px) {
  .cta-row .btn {
    flex: 1 1 100%;
  }
}

/* ---------- Header: floating glass bar ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 0;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 0 10px 0 18px;
  border: 1px solid var(--sheet-border);
  border-radius: 20px;
  background: rgba(250, 251, 247, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 24px 48px -32px rgba(24, 40, 110, 0.35);
}

.brand {
  display: inline-flex;
  flex: none;
  margin-right: auto;
}

.brand img {
  width: 150px;
}

.header-cta {
  flex: none;
  white-space: nowrap;
}

/* Very narrow phones: smaller wordmark so the button and menu keep their shape */
@media (max-width: 379px) {
  .brand img {
    width: 118px;
  }

  .header-inner {
    padding-left: 14px;
  }

  .header-cta {
    padding: 0 12px;
  }
}

@media (min-width: 720px) {
  .brand img {
    width: 208px;
  }
}

.site-nav {
  display: none;
  gap: 4px;
}

.site-nav a {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  background: rgba(35, 68, 200, 0.08);
  color: var(--blue);
}

/* Menu button: only shown on small screens, and only when script.js can run it */
.menu-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  cursor: pointer;
  flex: none;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), background-color 0.2s ease;
}

.menu-icon {
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-icon::before {
  transform: translateY(-6px);
}

.menu-icon::after {
  transform: translateY(6px);
}

.menu-toggle[aria-expanded="true"] .menu-icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
  transform: rotate(-45deg);
}

@media (max-width: 899px) {
  .js .menu-toggle {
    display: grid;
  }

  /* Dropdown glass panel under the bar */
  .site-header.is-open .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    padding: 8px;
    border: 1px solid var(--sheet-border);
    border-radius: 20px;
    background: rgba(250, 251, 247, 0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 32px 64px -32px rgba(24, 40, 110, 0.45);
  }

  .site-header.is-open .site-nav a {
    padding: 14px 16px;
    font-size: 17px;
    color: var(--ink);
  }
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
    margin-right: 12px;
  }
}

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

.hero {
  position: relative;
  isolation: isolate;
  padding: 40px 0 72px;
  /* The paper wash behind the headline reaches past the screen edge on phones.
     Clip sideways only; browsers without clip fall back to hiding both ways,
     since hiding one axis alone would turn the hero into a scroll box. */
  overflow: hidden;
  overflow: clip visible;
}

@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(calc(100svh - 88px), 860px);
    padding: 48px 0 96px;
  }
}

/* Tall screens: leave an open band above the headline where the ribbon arcs
   across (see layoutFor in scene.js). Only when the scene is actually running. */
@media (max-aspect-ratio: 9/10) {
  .has-scene .hero {
    padding-top: clamp(150px, 30vh, 260px);
  }
}

.hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 64px;
  }
}

.hero-copy {
  position: relative;
}

/* A soft wash of paper behind the headline, so the ribbon dissolves under the words
   instead of cutting through them */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -18% -14% -34% -26%;
  z-index: -1;
  pointer-events: none;
  /* Reaches well past the bottom-left corner, where the small print sits and
     where the ribbon runs off the screen */
  background: radial-gradient(
    closest-side,
    rgba(246, 247, 242, 0.94) 0%,
    rgba(246, 247, 242, 0.88) 62%,
    rgba(246, 247, 242, 0) 100%
  );
}

.hero h1 {
  max-width: 13ch;
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.accent {
  color: var(--blue);
}

.lede {
  max-width: 32em;
  margin-top: 28px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (min-width: 720px) {
  .lede {
    font-size: 22px;
  }
}

/* Learn -> Set up -> Use, drawn as a floating glass panel */
.pipeline {
  position: relative;
  padding: 28px;
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-xl);
  background: var(--sheet-bg);
  -webkit-backdrop-filter: var(--sheet-blur);
  backdrop-filter: var(--sheet-blur);
  box-shadow: var(--sheet-shadow);
}

@media (min-width: 720px) {
  .pipeline {
    padding: 36px;
  }
}

.pipeline-steps {
  position: relative;
  display: grid;
  gap: 28px;
  list-style: none;
}

/* Dashed line that appears to flow between the nodes */
.pipeline-steps::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 25px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--blue) 0 6px, transparent 6px 12px);
  animation: pipeline-flow 1.4s linear infinite;
}

@keyframes pipeline-flow {
  to {
    background-position: 0 12px;
  }
}

.pipeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pipeline-node,
.process-no {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--blue-line);
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  transition:
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    color 0.5s var(--ease);
}

.pipeline-step.is-current .pipeline-node {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(35, 68, 200, 0.14);
}

.pipeline-name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.pipeline-text {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.pipeline-caption {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- Sheets: the frosted panels that hold each section ---------- */

main {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 48px);
  padding-bottom: clamp(20px, 4vw, 48px);
}

.sheet {
  padding: var(--sheet-pad);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-xl);
  background: var(--sheet-bg);
  -webkit-backdrop-filter: var(--sheet-blur);
  backdrop-filter: var(--sheet-blur);
  box-shadow: var(--sheet-shadow);
}

/* Without backdrop blur the ribbon would show crisp through the glass, so close it up */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet,
  .pipeline,
  .interlude-card {
    background: rgba(250, 251, 247, 0.97);
  }

  .sheet-ink {
    background: #1d2523;
  }

  .sheet-blue {
    background: var(--blue);
  }
}

/* Heading block: title on the left, intro on the right on wide screens */
.section-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head .kicker {
  margin-bottom: 4px;
}

.section-intro {
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: 56px;
    align-items: end;
  }

  .section-head .kicker {
    grid-column: 1 / -1;
  }

  .section-intro {
    font-size: 19px;
  }
}

/* Shared tile used for cards inside a sheet */
.situation,
.card {
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  background: var(--tile-bg);
  box-shadow: var(--tile-shadow);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.5s var(--ease);
}

@media (hover: hover) {
  .situation:hover,
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--blue-line);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 30px 60px -32px rgba(35, 68, 200, 0.4);
  }
}

/* ---------- Situations ---------- */

.situations {
  display: grid;
  gap: 16px;
  list-style: none;
}

@media (min-width: 680px) {
  .situations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .situations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.situation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

@media (min-width: 720px) {
  .situation {
    padding: 30px;
  }
}

.situation h3 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.situation p {
  font-size: 16px;
  color: var(--ink-soft);
}

.situation a {
  display: inline-flex;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(35, 68, 200, 0.07);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}

.situation a:hover {
  background: rgba(35, 68, 200, 0.14);
}

/* ---------- Services ---------- */

.service-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 820px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

.card {
  display: flex;
  flex-direction: column;
  padding: 26px;
}

@media (min-width: 720px) {
  .card {
    padding: 36px;
  }
}

/* Blue-tinted tile with the service number */
.card-index {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #dce5fb 0%, #f1f5fe 60%, #dfe7fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px -14px rgba(35, 68, 200, 0.5);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}

.card h3 {
  margin-top: 28px;
  font-size: clamp(26px, 2.4vw, 30px);
}

.card-sub {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.card-text {
  margin-top: 12px;
  font-size: 17px;
  color: var(--ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  list-style: none;
}

.chips li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(246, 247, 242, 0.9);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
}

.card-note {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  font-size: 15px;
  color: var(--ink-soft);
}

.card-note a {
  font-weight: 600;
}

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 40px;
  text-align: center;
}

.inline-cta p {
  color: var(--ink-soft);
}

/* ---------- Examples ---------- */

.examples {
  list-style: none;
  border-top: 1px solid var(--line);
}

.example {
  display: grid;
  gap: 8px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 820px) {
  .example {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
    padding: 32px 0;
  }
}

.example-tag {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--blue);
}

.example h3 {
  margin-top: 6px;
  font-size: clamp(21px, 2vw, 24px);
}

.example > p {
  font-size: 17px;
  color: var(--ink-soft);
}

/* ---------- How we work ---------- */

.process {
  position: relative;
  display: grid;
  gap: 32px;
  list-style: none;
}

/* Dashed rail behind the step numbers: vertical on phones, horizontal on wide screens */
.process::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 25px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--blue-line) 0 6px, transparent 6px 12px);
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 18px;
}

.process-no {
  grid-row: span 2;
}

.process-step h3 {
  padding-top: 10px;
  font-size: 24px;
}

.process-step > p:last-child {
  margin-top: 10px;
  font-size: 17px;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }

  .process::before {
    top: 25px;
    bottom: auto;
    left: 26px;
    right: 26px;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--blue-line) 0 6px, transparent 6px 12px);
  }

  .process-step {
    display: block;
  }

  .process-step h3 {
    margin-top: 24px;
    padding-top: 0;
    font-size: 26px;
  }
}

.process-step:hover .process-no {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(35, 68, 200, 0.14);
}

.note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-top: 48px;
  padding: 16px 20px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-sm);
  background: rgba(35, 68, 200, 0.06);
  font-weight: 500;
}

.note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(35, 68, 200, 0.16);
}

/* ---------- Kontrakku (dark glass sheet) ---------- */

.sheet-ink {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(29, 37, 35, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 48px 96px -48px rgba(10, 16, 40, 0.6);
  color: #fff;
}

.sheet-ink .kicker,
.sheet-blue .kicker {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sheet-ink .kicker::before,
.sheet-blue .kicker::before {
  color: rgba(255, 255, 255, 0.7);
}

.sheet-ink a:not(.btn) {
  color: var(--blue-pale);
}

.sheet-ink a:not(.btn):hover {
  color: #fff;
}

.sheet-ink :focus-visible,
.sheet-blue :focus-visible {
  outline-color: #fff;
}

.kontrakku-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 960px) {
  .kontrakku-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 72px;
    align-items: center;
  }
}

.project-lead {
  max-width: 28em;
  margin-top: 20px;
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.body-text {
  max-width: 62ch;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.fineprint {
  max-width: 62ch;
  margin-top: 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}

.spec {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.spec > div {
  display: grid;
  grid-template-columns: minmax(84px, 120px) minmax(0, 1fr);
  gap: 16px;
  padding: 20px 24px;
}

.spec > div + div {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.spec dt {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--blue-pale);
}

.spec dd {
  font-size: 17px;
  font-weight: 500;
}

/* ---------- About: open interlude over the ribbon ---------- */

.interlude {
  display: flex;
  align-items: center;
  min-height: clamp(520px, 92vh, 860px);
  padding: 48px 0;
}

.interlude-card {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--sheet-pad);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-xl);
  background: var(--sheet-bg);
  -webkit-backdrop-filter: var(--sheet-blur);
  backdrop-filter: var(--sheet-blur);
  box-shadow: var(--sheet-shadow);
  text-align: center;
}

.interlude-card .kicker {
  margin-inline: auto;
}

.body-lead {
  margin-top: 22px;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  gap: 8px;
}

@media (min-width: 960px) {
  .faq-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
    align-items: start;
  }

  .faq-grid .section-head {
    display: block;
    position: sticky;
    top: 120px;
    margin-bottom: 0;
  }

  .faq-grid .section-head .kicker {
    margin-bottom: 20px;
  }
}

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq summary:hover {
  color: var(--blue);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Plus sign drawn in CSS inside a small circle; turns into a cross when open */
.faq summary::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--blue-line);
  border-radius: 50%;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 12px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 12px no-repeat,
    #fff;
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  padding: 0 58px 24px 0;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ---------- Contact (brand blue sheet) ---------- */

.sheet-blue {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(120, 150, 255, 0.35), transparent 60%),
    linear-gradient(140deg, rgba(35, 68, 200, 0.95), rgba(27, 55, 166, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 48px 96px -48px rgba(27, 55, 166, 0.7);
  color: #fff;
}

.contact {
  text-align: center;
}

.contact .section-head {
  display: block;
  max-width: 46rem;
  margin: 0 auto;
}

.contact .kicker {
  margin-inline: auto;
}

.contact .section-intro {
  max-width: 58ch;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.86);
}

.contact .cta-row {
  justify-content: center;
}

.contact-email {
  margin-top: 32px;
  font-size: 18px;
}

.contact-email a {
  color: #fff;
  font-weight: 600;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.contact-email a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.contact .microcopy {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 56px 0 64px;
  background: var(--ink);
  color: #fff;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-mark {
  width: 44px;
  height: 44px;
}

.footer-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-nav a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
}

.footer-nav a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.8);
}

.copyright {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Scroll reveal ----------
   Only active once script.js has added .reveal to <html>, so content stays
   visible without JS. Transitions run off the main thread once started. */

.reveal [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease) var(--d, 0s),
    transform 0.8s var(--ease) var(--d, 0s);
}

.reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .situation:hover,
  .card:hover {
    transform: none;
  }
}