@charset "UTF-8";
/* ==========================================================================
   Brand.co — Hedef Bazlı Çözümler
   Single stylesheet. Order: fonts → tokens → reset → stage → layout →
   components → responsive → motion preferences.

   DESIGN NOTE — the key light.
   The films are all lit by a single volumetric key light from the upper-left.
   The interface obeys the same light: every rule, border and hover state is
   brightest toward the upper-left and falls off to the right, so the UI reads
   as sitting inside the same 3D space as the footage behind it. That angle is
   --light-angle and it is used consistently; do not flip it per component.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────
   Self-hosted. unicode-range values match Google's own subsetting.
   Turkish needs BOTH files: ı ç ö ü live in `latin`, while İ ğ ş live in
   `latin-ext`. Dropping either one silently breaks Turkish text.          */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Palette — pinned by the film grade. */
  --void:    #05070E;
  --ink:     #0A0F1C;
  --chrome:  #C8D4E6;
  --beam:    #7DD3FC;
  --violet:  #8B7CF6;
  --white:   #F2F7FF;
  --dim:     #6F7F99;

  /* The key light. One angle, used everywhere. */
  --light-angle: 100deg;
  --rule: linear-gradient(var(--light-angle),
            rgba(125, 211, 252, .55) 0%,
            rgba(200, 212, 230, .20) 38%,
            rgba(200, 212, 230, .05) 70%,
            transparent 100%);

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(.78rem, .74rem + .18vw, .875rem);
  --step-0:  clamp(.95rem, .9rem + .25vw, 1.0625rem);
  --step-1:  clamp(1.05rem, .97rem + .4vw, 1.25rem);
  --step-2:  clamp(1.35rem, 1.15rem + .95vw, 2rem);
  --step-3:  clamp(2rem, 1.4rem + 2.9vw, 4.25rem);
  --step-4:  clamp(2.6rem, 1.5rem + 5.2vw, 6.5rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 5.5rem);
  --stack:  clamp(1rem, 2vw, 1.75rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── Reset ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--chrome);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--beam); color: var(--void);
  font-weight: 600;
  transform: translateY(-110%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ── Stage: fixed film layers ─────────────────────────────────────────── */

.stage { position: fixed; inset: 0; z-index: 0; background: var(--void); }

.layer {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.layer[data-layer="1"] { opacity: 1; }

.layer__video,
.layer {
  background-size: cover;
  background-position: center;
}
.layer__video {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Scrim: holds text contrast over bright footage without flattening the image.
   Weighted to the left, where the copy sits and where the key light lands. */
.stage__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 14, .92) 0%, rgba(5, 7, 14, .72) 38%,
                            rgba(5, 7, 14, .30) 68%, rgba(5, 7, 14, .55) 100%),
    linear-gradient(180deg, rgba(5, 7, 14, .70) 0%, transparent 22%,
                            transparent 74%, rgba(5, 7, 14, .85) 100%);
}

#three-canvas {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.75rem) var(--gutter);
  padding-top: max(clamp(1rem, 2.2vw, 1.75rem), env(safe-area-inset-top));
}

.wordmark {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 700, 'wdth' 108;
  font-size: var(--step-1);
  letter-spacing: -.02em;
  color: var(--white);
  line-height: 1;
}
.wordmark__dot { color: var(--beam); }
.wordmark__co { color: var(--chrome); }

.masthead__nav { display: flex; align-items: center; gap: .5rem; }
.lang {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  padding: .4rem .2rem;
  transition: color .25s var(--ease);
}
.lang[aria-current] { color: var(--white); }
a.lang:hover { color: var(--beam); }
.lang__sep { color: var(--dim); opacity: .5; }

/* ── Spine: the descent is a fixed sequence, so it is numbered ─────────── */

.spine {
  position: fixed; z-index: 20;
  left: var(--gutter);
  top: 50%; transform: translateY(-50%);
  display: none;
}
.spine__list { display: grid; gap: 1.05rem; }
.spine a {
  display: flex; align-items: center; gap: .7rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .3s var(--ease);
}
.spine i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  position: relative;
  padding-left: 1.6rem;
}
/* The marker is lit from the left, like everything else. */
.spine i::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1.05rem; height: 1px; transform: translateY(-50%);
  background: currentColor; opacity: .45;
  transition: width .35s var(--ease), opacity .35s var(--ease);
}
.spine span {
  opacity: 0; transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.spine a:hover,
.spine a.is-active { color: var(--white); }
.spine a.is-active i::before {
  width: 2.1rem; opacity: 1;
  background: var(--beam);
  box-shadow: 0 0 12px rgba(125, 211, 252, .9);
}
.spine a:hover span,
.spine a.is-active span { opacity: 1; transform: translateX(0); }

/* ── Scenes ───────────────────────────────────────────────────────────── */

main { position: relative; z-index: 2; }

.scene { position: relative; }

/* Desktop: each scene owns a tall scroll range; its copy sticks for the
   duration. `position: sticky` rather than a GSAP pin — six stacked pins
   fight each other during crossfade and are unreliable on iOS Safari. */
.scene__inner {
  position: sticky; top: 0;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}

.scene__content {
  width: 100%;
  max-width: 46rem;
  display: grid;
  gap: var(--stack);
}

/* ── Type ─────────────────────────────────────────────────────────────── */

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--beam);
  display: flex; align-items: center; gap: .85rem;
}
.eyebrow::after {
  content: ''; flex: 1; height: 1px;
  max-width: 7rem;
  background: var(--rule);
}

/* Expanded grotesque, set like a film title. Sentence case on purpose:
   CSS uppercasing of Turkish (i→İ, ı→I) is lang-dependent and not worth
   betting the headline on. */
.display {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 620, 'wdth' 116;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--white);
  text-wrap: balance;
  /* Cast away from the key light. */
  text-shadow: 0 2px 26px rgba(5, 7, 14, .75), 1px 1px 0 rgba(5, 7, 14, .35);
}
.display--hero {
  font-size: var(--step-4);
  font-variation-settings: 'wght' 680, 'wdth' 122;
  letter-spacing: -.035em;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--chrome);
  max-width: 34rem;
}

/* ── Rows: services as lit editorial rows, not cards ───────────────────── */

.rows { display: grid; margin-top: clamp(.5rem, 1.5vw, 1.25rem); }

.row {
  position: relative;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  display: grid; gap: .3rem;
}
/* The rule *is* the light. */
.row::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--rule);
}
/* Specular sweep on reveal — the gleam travelling along polished chrome. */
.row::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 34%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--beam), transparent);
  opacity: 0;
  transform: translateX(-40%);
}
.row.is-in::after {
  animation: sweep 1.15s var(--ease) forwards;
}
@keyframes sweep {
  0%   { opacity: 0;   transform: translateX(-40%); }
  22%  { opacity: .95; }
  100% { opacity: 0;   transform: translateX(260%); }
}

.row__title {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 600, 'wdth' 106;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--white);
}
.row__body { color: var(--chrome); opacity: .82; max-width: 38rem; }

/* Only the AI scene is a real sequence, so only it carries step numbers. */
.rows--steps { counter-reset: step; }
.rows--steps .row { counter-increment: step; padding-left: 3rem; }
.rows--steps .row__title::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: clamp(1rem, 2vw, 1.4rem);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--beam);
  opacity: .8;
}

/* ── Traits ───────────────────────────────────────────────────────────── */

.traits {
  display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(.5rem, 1.5vw, 1rem);
}
.trait { position: relative; padding-top: 1.1rem; }
.trait::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--rule);
}
.trait__title {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 600, 'wdth' 104;
  font-size: var(--step-1);
  color: var(--white);
  margin-bottom: .25rem;
}
.trait__body { font-size: var(--step-0); color: var(--chrome); opacity: .78; }

/* ── Contact ──────────────────────────────────────────────────────────── */

.contact { display: grid; margin-top: clamp(.5rem, 1.5vw, 1rem); }
.contact__link {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.25rem;
  padding: clamp(.95rem, 2vw, 1.3rem) 0;
  min-height: 44px;
  transition: padding-left .3s var(--ease), color .3s var(--ease);
}
.contact__link::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--rule);
}
.contact li:last-child .contact__link::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--rule);
}
.contact__label {
  flex: 0 0 7rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.contact__value {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 550, 'wdth' 104;
  font-size: var(--step-1);
  color: var(--white);
}
.contact__link:hover { padding-left: .7rem; }
.contact__link:hover .contact__value { color: var(--beam); }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: .8rem 1.6rem;
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--white);
  /* Border lit from the upper-left, same as every other rule. */
  border: 1px solid rgba(200, 212, 230, .28);
  background: linear-gradient(var(--light-angle),
              rgba(200, 212, 230, .12), rgba(200, 212, 230, .02));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover {
  border-color: rgba(125, 211, 252, .65);
  transform: translateY(-2px);
  box-shadow: -6px -6px 32px rgba(125, 211, 252, .16);
}
.btn--primary {
  color: var(--void);
  border-color: transparent;
  background: linear-gradient(var(--light-angle), var(--beam), #A5B8FF 60%, var(--violet));
}
.btn--primary:hover {
  box-shadow: -6px -6px 38px rgba(125, 211, 252, .38);
  border-color: transparent;
}
.btn--small { min-height: 40px; padding: .5rem 1.1rem; font-size: var(--step--1); }

/* ── Scroll cue ───────────────────────────────────────────────────────── */

.scroll-cue {
  position: absolute;
  left: var(--gutter); bottom: clamp(1.5rem, 5vh, 3rem);
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex; align-items: center; gap: .8rem;
}
.scroll-cue::after {
  content: ''; width: 3.5rem; height: 1px;
  background: var(--rule);
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: left center;
}
@keyframes cue {
  0%, 100% { transform: scaleX(.4); opacity: .5; }
  50%      { transform: scaleX(1);  opacity: 1; }
}

/* ── Document pages (privacy / KVKK) ──────────────────────────────────── */

.masthead--doc {
  position: static;
  border-bottom: 1px solid rgba(200, 212, 230, .12);
}

.doc {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(3rem, 8vw, 5rem);
  display: grid;
  gap: 1rem;
}
.doc .display { font-size: var(--step-3); margin-bottom: .5rem; }
.doc h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 600, 'wdth' 104;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--white);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  position: relative;
}
.doc h2::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--rule);
}
.doc p { color: var(--chrome); opacity: .85; }
.doc a { color: var(--beam); text-decoration: underline; text-underline-offset: 3px; }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  padding: .12em .4em;
  background: rgba(200, 212, 230, .1);
  border-radius: 3px;
}
.doc strong { color: var(--white); }
.doc__back { margin-top: clamp(2rem, 5vw, 3rem); }
.doc__back a { text-decoration: none; font-weight: 600; }

/* Buttons inside a document page: .doc a would otherwise underline them and
   repaint them beam-blue. */
.doc .btn { color: var(--white); text-decoration: none; }
.doc .btn--primary { color: var(--void); }

/* ── References page ──────────────────────────────────────────────────── */

/* The partner grid needs more room than a column of prose. */
.doc--wide { max-width: 62rem; }

.partners {
  display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1rem, 3vw, 2rem);
}
/* Same lit rule as .trait — partners are read as a set, not as cards. */
.partner { position: relative; padding-top: 1.15rem; }
.partner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--rule);
}

/* Fixed-height slot, so seven logos of seven different proportions still line
   up on one optical baseline. */
.partner__logo {
  height: 2.6rem;
  display: flex; align-items: center;
  margin-bottom: .9rem;
}
/* .doc p dims prose to .85; the logo carries its own opacity below and must
   not have the two multiplied together. */
.doc .partner__logo { opacity: 1; }
.partner__logo img {
  max-height: 100%;
  max-width: 11.5rem;
  width: auto;
  /* The logos arrive in seven unrelated palettes, several of them dark ink
     meant for white paper. One monochrome treatment keeps every one of them
     legible against the void and stops the row from turning into confetti. */
  filter: brightness(0) invert(1);
  opacity: .8;
  transition: opacity .3s var(--ease);
}
.partner:hover .partner__logo img { opacity: 1; }
/* The logo is the link to the partner's own site. It stays inside the fixed
   slot so the hit area matches the mark, not the empty space beside it. */
.partner__link {
  display: inline-flex; align-items: center;
  height: 100%; max-width: 100%;
}
.doc .partner__link { text-decoration: none; }
.partner__link:hover img,
.partner__link:focus-visible img { opacity: 1; }
.partner__link:focus-visible {
  outline: 1px solid var(--beam);
  outline-offset: 6px;
}
.partner__name {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 600, 'wdth' 106;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--white);
  margin-bottom: .3rem;
}
.partner__kind {
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
/* Opacity is inherited from .doc p; partners are labels, not prose. */
.doc .partner__kind { opacity: 1; }

@media (max-width: 767px) {
  .partners { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ── Colophon ─────────────────────────────────────────────────────────── */

.colophon {
  position: relative; z-index: 2;
  background: var(--void);
  border-top: 1px solid rgba(200, 212, 230, .12);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter)
           max(clamp(2rem, 5vw, 3rem), env(safe-area-inset-bottom));
  /* One line on desktop: mark · meta · links. Wraps to a stack on narrow screens. */
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .7rem clamp(1.5rem, 4vw, 3rem);
}
.colophon__mark {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-variation-settings: 'wght' 700, 'wdth' 110;
  font-size: var(--step-2);
  color: var(--white);
}
.colophon__mark span { color: var(--beam); }
.colophon__meta {
  flex: 1 1 18rem;
  font-size: var(--step--1);
  color: var(--dim);
}
.colophon__nav { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.colophon__nav a {
  font-size: var(--step--1); color: var(--chrome);
  padding: .35rem 0; min-height: 44px; display: inline-flex; align-items: center;
  transition: color .25s var(--ease);
}
.colophon__nav a:hover { color: var(--beam); }

/* ── Cookie notice ────────────────────────────────────────────────────── */

.cookie {
  position: fixed; z-index: 60;
  left: var(--gutter); right: var(--gutter);
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: 34rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(10, 15, 28, .92);
  border: 1px solid rgba(200, 212, 230, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(calc(100% + 2rem));
  transition: transform .5s var(--ease);
}
.cookie.is-shown { transform: translateY(0); }
.cookie[hidden] { display: none; }
.cookie__text { flex: 1 1 16rem; font-size: var(--step--1); line-height: 1.5; color: var(--chrome); }
.cookie__text a { color: var(--beam); text-decoration: underline; text-underline-offset: 3px; }

/* ── Reveal states ─────────────────────────────────────────────────────
   .reveal is added by JS at runtime, so there is no flash of hidden content
   for no-JS or mobile visitors — the class simply never appears for them. */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

/* ══════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .spine { display: block; }
  .scene__inner { padding-left: calc(var(--gutter) + 9.5rem); }
  .masthead { padding-inline: var(--gutter); }
}

@media (min-width: 1440px) {
  .scene__content { max-width: 52rem; }
}

/* Phones and small tablets.

   Phones run the same scrubbed film as the desktop; js/main.js puts
   `is-cinematic` on <html> once the engine is actually up. Everything below is
   therefore in two halves: the flat poster page for when it is not (no JS, no
   GSAP, reduced motion), and the adjustments the film needs on a narrow
   screen. Nothing here may assume one or the other. */
@media (max-width: 767px) {
  /* ---- still scenes ------------------------------------------------------

     Two situations produce the same flat scene, so they share these rules:

       html:not(.is-cinematic)  the engine never came up (no JS, no GSAP, or
                                reduced motion) — every scene goes flat.
       .scene--still            the engine is running but this scene is past
                                the phone's filmed count (js/main.js —
                                Capability.animatedScenes). Only scenes 3-6.

     The background here is opaque, which is what makes a still scene actually
     still: it covers the fixed stage and the particle canvas behind it. */
  html:not(.is-cinematic) .stage,
  html:not(.is-cinematic) #three-canvas { display: none; }
  html:not(.is-cinematic) .scroll-cue { display: none; }

  html:not(.is-cinematic) .scene,
  .scene--still {
    background-color: var(--void);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  html:not(.is-cinematic) .scene::before,
  .scene--still::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5, 7, 14, .86) 0%, rgba(5, 7, 14, .74) 45%,
                                        rgba(5, 7, 14, .93) 100%);
  }
  /* 960px variants, not the 1920px desktop posters. Six full-size posters
     would be 316 KB; these are 204 KB. */
  html:not(.is-cinematic) .scene[data-scene="1"],
  .scene--still[data-scene="1"] { background-image: url('../images/scene1-hero-mobile.jpg'); }
  html:not(.is-cinematic) .scene[data-scene="2"],
  .scene--still[data-scene="2"] { background-image: url('../images/scene2-cooperation-mobile.jpg'); }
  html:not(.is-cinematic) .scene[data-scene="3"],
  .scene--still[data-scene="3"] { background-image: url('../images/scene3-creative-mobile.jpg'); }
  html:not(.is-cinematic) .scene[data-scene="4"],
  .scene--still[data-scene="4"] { background-image: url('../images/scene4-ai-mobile.jpg'); }
  html:not(.is-cinematic) .scene[data-scene="5"],
  .scene--still[data-scene="5"] { background-image: url('../images/scene5-showcase-mobile.jpg'); }
  html:not(.is-cinematic) .scene[data-scene="6"],
  .scene--still[data-scene="6"] { background-image: url('../images/scene6-cta-mobile.jpg'); }

  /* The .is-cinematic half is written out in full on purpose: it has to
     outrank the safe-area padding set for filmed scenes further down. */
  html:not(.is-cinematic) .scene__inner,
  html.is-cinematic .scene--still .scene__inner {
    position: static;
    min-height: auto;
    padding-block: clamp(4.5rem, 16vw, 7rem);
  }
  html:not(.is-cinematic) .scene--hero .scene__inner { padding-top: clamp(7rem, 26vw, 10rem); }

  .scene__content { position: relative; z-index: 1; }

  /* ---- the film, on a narrow screen -------------------------------------- */
  /* The desktop scrim is weighted to the left, where the copy sits beside the
     image. On a phone the copy sits *over* it full-width, so the gradient has
     to run top-to-bottom instead or the last lines fall on bare footage. */
  html.is-cinematic .stage__scrim {
    background:
      linear-gradient(180deg, rgba(5, 7, 14, .88) 0%, rgba(5, 7, 14, .55) 38%,
                              rgba(5, 7, 14, .60) 62%, rgba(5, 7, 14, .92) 100%);
  }
  /* Sticky copy needs the safe area accounted for; the desktop padding assumes
     a window, not a notch and a home indicator. */
  html.is-cinematic .scene__inner {
    padding: max(clamp(5.5rem, 20vw, 8rem), calc(env(safe-area-inset-top) + 5rem))
             var(--gutter)
             max(clamp(3.5rem, 12vw, 5rem), calc(env(safe-area-inset-bottom) + 2.5rem));
  }

  /* Short screens: js/main.js measured that the copy is taller than the
     viewport, so sticky would hold its last lines out of reach. The film keeps
     running; the copy scrolls over it instead of being pinned to it. */
  html.is-cinematic.is-flowing .scene__inner {
    position: static;
    min-height: auto;
    padding-block: clamp(4.5rem, 16vw, 7rem);
  }
  html.is-cinematic.is-flowing .scene--hero .scene__inner {
    padding-top: clamp(7rem, 26vw, 10rem);
  }

  .traits { grid-template-columns: 1fr; gap: 1.1rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }

  .contact__label { flex: 1 0 100%; }
  .contact__link:hover { padding-left: 0; }

  .display { font-variation-settings: 'wght' 640, 'wdth' 104; }
  .display--hero { font-variation-settings: 'wght' 700, 'wdth' 108; }

  .cookie { left: .75rem; right: .75rem; }
}

/* Phones in landscape: viewport height is scarce, so drop the vertical
   padding rather than letting copy get clipped. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  html:not(.is-cinematic) .scene__inner { min-height: auto; padding-block: 4.5rem; }
  /* With the film running the copy is sticky, so it cannot grow the page —
     tighten the padding but keep the section a full viewport tall. */
  html.is-cinematic .scene__inner { padding-block: 3.5rem; }
  .display--hero { font-size: var(--step-3); }
}

/* ── Motion preferences ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal.is-in { opacity: 1; transform: none; }
  .scroll-cue { display: none; }
}