/* Sora and Inter, self-hosted (latin + latin-ext for Turkish). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-ext-0.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-20C4, 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-1.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+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: 500; font-display: swap; src: url("../fonts/inter-latin-ext-0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-1.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+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-0.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-20C4, 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-1.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/sora-latin-ext-2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/sora-latin-3.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/sora-latin-ext-2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/sora-latin-3.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-latin-ext-2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-latin-3.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-latin-ext-2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-latin-3.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Taynis Creative — Design System
   Palette & typography adapted from the reference layout:
   warm off-white canvas, ink black, red accent, soft white cards.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Surface — the brand's own canvas is a deep navy, not neutral black */
  --bg: #070c16;
  --bg-veil: rgba(8, 13, 24, 0.72);
  --card: #0e1626;
  --card-2: #16203a;
  --ink-surface: #f2f4f8;   /* inverted panels: light islands in a dark page */

  /* Text */
  --ink: #eef2f8;
  --muted: #a8b2c4;
  --faint: #8b95a8;
  --on-dark: #eef2f8;
  --on-dark-muted: rgba(238, 242, 248, 0.62);
  --on-light: #0a1220;
  --on-light-muted: rgba(10, 18, 32, 0.68);

  /* Brand — taken from the logo gradient (#0b65de -> #8dabff) */
  --accent-deep: #0b65de;
  --accent: #2774e5;
  --accent-2: #8dabff;
  /* Accent as TEXT on the navy canvas. The mid blue is too dark for body
     copy here, so text uses the light end of the ramp. */
  --accent-ink: #8dabff;
  /* Text sitting ON an accent fill. Only the deep end of the ramp is dark
     enough to carry white text, so solid fills use --accent-deep. */
  --accent-on: #ffffff;
  --brand-gradient: linear-gradient(100deg, #0b65de 0%, #176be1 22%, #2774e5 48%, #5b90f2 74%, #8dabff 100%);
  /* Text-safe variant: the full ramp's dark end is only 3.6:1 on the navy
     canvas, which is fine for display sizes but fails AA for body copy.
     This one starts at #3e80eb (5.0:1) so gradient text is safe at any size. */
  --brand-gradient-text: linear-gradient(100deg, #3e80eb 0%, #5b90f2 42%, #8dabff 100%);

  /* Lines */
  --line: rgba(255, 255, 255, 0.11);
  --line-soft: rgba(255, 255, 255, 0.07);
  --line-dark: rgba(255, 255, 255, 0.13);
  --line-on-light: rgba(10, 18, 32, 0.12);

  /* Radii — 8 chip / 16 bordered card / 24 panel / 40 pill / full control */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* The graphic panel slot — the reference's own 180/200/228 ladder */
  --panel-h: 180px;
  --panel-h-md: 200px;
  --panel-h-lg: 228px;

  /* Card surface on dark: the reference's entire recipe, borrowed verbatim */
  --card-face: rgba(255, 255, 255, 0.05);
  --card-edge: rgba(255, 255, 255, 0.10);

  /* Page-wide grain */
  --grain-opacity: 0.04;

  /* Elevation */
  --shadow-card:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 2px 0 rgba(0, 0, 0, 0.5),
    0 4px 12px 0 rgba(0, 0, 0, 0.35);
  --shadow-lift:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 4px 0 rgba(0, 0, 0, 0.4),
    0 16px 32px -8px rgba(0, 0, 0, 0.55),
    0 40px 72px -24px rgba(0, 0, 0, 0.7);
  --shadow-ink:
    0 1px 2px 0 rgba(0, 0, 0, 0.5),
    0 6px 14px -4px rgba(0, 0, 0, 0.55),
    0 18px 36px -12px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0 8px 28px -8px rgba(39, 116, 229, 0.55);

  /* Type — the logo is set in Inter Tight; the brand is geometric sans */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* The reference's strict four-step ladder: 64 -> 80/90 -> 120 -> 160px.
     The old ceiling was 120px, which made every desktop section a third
     shorter than the site the client is comparing us to.
     The vw coefficients are set so the ladder lands on the reference's own
     steps at real viewport widths, not only at the clamp ceiling:
     360->64  768->85  1024->113  1440->158  1456+->160. */
  --section-y: clamp(4rem, 11vw, 10rem);          /*  64 -> 160 */
  --section-y-sm: clamp(3rem, 6.2vw, 5.625rem);   /*  48 ->  90 */
  --section-y-lg: clamp(5rem, 13.6vw, 12.25rem);  /*  80 -> 196 */

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 2. Base ------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

::selection {
  background: var(--ink);
  color: var(--bg);
}

/* --- 3. Typography ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
}

/* Emphasised words carry the animated brand gradient instead of italics */
.display em {
  font-style: normal;
  background: var(--brand-gradient-text);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-drift 14s ease-in-out infinite;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .display em { color: var(--accent-ink); background: none; }
}

.t-hero {
  font-size: clamp(2.75rem, 8.2vw, 6.25rem);
  line-height: 0.98;
}

/* The workhorse. 36 -> 72px against 17-20px body is the reference's 4:1
   display-to-body ratio; the old 32 -> 56px ceiling only reached 2.8:1, and
   large type is itself a space-filling device. */
.t-h2 {
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  line-height: 1.02;
}

.t-h3 {
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  line-height: 1.1;
}

.t-h4 {
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
}

.body-muted {
  color: var(--muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(39, 116, 229, 0.28);
  flex: none;
}

.eyebrow--bare::before { display: none; }

.num {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* --- 4. Layout ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-sm); }
.section--major { padding-block: var(--section-y-lg); }

.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.section-head p.lead { margin-top: 0.25rem; }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
}

/* --- 5. Navigation ------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--on-light);
  border-radius: var(--r-sm);
  transition: top 0.2s var(--ease);
}

.skip-link:focus-visible { top: 1rem; }

.nav {
  position: sticky;
  top: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 100;
  padding-inline: var(--gutter);
}

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--bg-veil);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .nav__inner {
    background: var(--bg-veil);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}

.nav--stuck .nav__inner {
  box-shadow: var(--shadow-lift);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  white-space: nowrap;
}

.brand__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 10px rgba(39, 116, 229, 0.6);
  flex: none;
  transform: translateY(-1px);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.85rem;
  font-size: 0.9375rem;
  color: var(--muted);
  border-radius: var(--r-pill);
  transition: color 0.2s var(--ease);
}

.nav__link:hover { color: var(--ink); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--ink);
  filter: blur(3px);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.25s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { opacity: 0.55; }

.nav__link[aria-current="page"] { color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; }

.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(141, 171, 255, 0.62); /* SC 1.4.11: 3:1 boundary */
  background: var(--card);
  border-radius: var(--r-pill);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav__toggle span {
  position: relative;
  width: 15px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: background 0.2s var(--ease);
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}

.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }

.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.5rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  }

  .nav__inner { position: relative; }

  /* Explicit state selectors: both carry the same specificity, so neither can
     be lost to a later single-class rule elsewhere in the sheet. */
  .nav__links[data-open="false"] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }

  .nav__links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__link {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    border-radius: var(--r-md);
  }

  .nav__link::after { display: none; }
  .nav__link:hover { background: var(--card-2); }

  /* Scoped to .nav so it outranks the later .btn { display: inline-flex } rule. */
  .nav .nav__cta-desktop { display: none; }
}

/* --- 6. Buttons ---------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--shadow-ink);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

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

.btn__arrow {
  width: 0.85em;
  height: 0.85em;
  transition: transform 0.28s var(--ease);
}

.btn:hover .btn__arrow { transform: translate(2px, -2px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  /* SC 1.4.11: this border is the only affordance identifying the control,
     so it needs 3:1 against the canvas. var(--line) measures 1.30:1. */
  border: 1px solid rgba(141, 171, 255, 0.55);
  box-shadow: none;
}

.btn--ghost:hover { background: rgba(255, 255, 255, 0.06); }

.btn--light {
  --btn-bg: var(--bg);
  --btn-fg: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn--sm { padding: 0.65rem 1.15rem; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease), gap 0.2s var(--ease);
}

.link-arrow:hover { border-color: var(--ink); gap: 0.7em; }

/* --- 7. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: the orbs bleed past the edge but must not create a
     horizontal scrollbar, and clip does not turn this into a scroll container */
  overflow: clip;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.hero__badge-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hero__eyebrow { margin-bottom: 1.75rem; }

.hero h1 { margin-bottom: 1.75rem; }

.hero__line { display: block; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: end;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
}

.hero__aside {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 0.5rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.chip__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent);
  flex: none;
}

.copy-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.copy-mail:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }

.copy-mail__tag {
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--card-2);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- 8. Marquee ---------------------------------------------------------- */

.marquee {
  border-block: 1px solid var(--line);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: marquee 42s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}

@keyframes marquee {
  to { transform: translateX(calc(-50% - 1.25rem)); }
}

/* Second band runs the other way — the counter-motion reads as depth */

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* --- 9. Cards & grids ---------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.card--hover:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.grid {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.25rem);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Approach — three pillars */
.pillar__k {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* Services list */
.svc-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.svc {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1rem 2rem;
  align-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}

.svc:hover { background: rgba(255, 255, 255, 0.025); }

.svc__title { display: grid; gap: 0.6rem; }

.svc__desc { display: grid; gap: 1rem; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag {
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .svc {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .svc__num { order: -1; }
}

/* Flow — Strategy → ... → Performance */
.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.flow__step {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--card);
  transition: background 0.3s var(--ease);
}

.flow__step:hover { background: var(--card-2); }

.flow__k {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.flow__step h3 { font-size: 1.125rem; letter-spacing: -0.02em; }

.flow__step p { font-size: 0.9375rem; color: var(--muted); }

@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }

/* Split feature (industrial) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }

.problem {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.problem__item {
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
}

.problem__item h4 { font-size: 1rem; letter-spacing: -0.01em; }
.problem__item p { font-size: 0.9375rem; color: var(--muted); }

.checklist {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--muted);
}

.checklist li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 68% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 68% no-repeat;
}

/* Sectors */
.sector {
  display: grid;
  gap: 0.55rem;
  padding: clamp(1.35rem, 2vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.sector:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.sector--lead {
  background: var(--ink-surface);
  color: var(--on-light);
  border-color: transparent;
}

.sector__k {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.sector h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
.sector p { font-size: 0.9375rem; color: var(--muted); }

/* Process steps */
.steps {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.75rem 2rem;
  align-items: baseline;
  padding-block: clamp(1.35rem, 2.4vw, 1.9rem);
  background: var(--bg);
  transition: background 0.3s var(--ease), padding-inline 0.3s var(--ease);
}

.step:hover { background: var(--card); }

.step h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.step p { color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 780px) {
  .step { grid-template-columns: 3rem 1fr; gap: 0.5rem 1rem; }
  .step p { grid-column: 2; }
}

/* Engagement models */
.model {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
}

.model--feature {
  background: var(--ink-surface);
  color: var(--on-light);
  border-color: transparent;
  box-shadow: var(--shadow-ink);
}

.model__k {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.model h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.model p { font-size: 0.9375rem; color: var(--muted); }

/* Inverted (light) cards — declared after the base rules and with an extra
   class so a later single-class rule can never win the cascade back. */
.sector.sector--lead p,
.sector.sector--lead .sector__k { color: var(--on-light-muted); }
.sector.sector--lead h3 { color: var(--on-light); }

.model.model--feature p,
.model.model--feature .model__k { color: var(--on-light-muted); }
.model.model--feature h3 { color: var(--on-light); }
.model.model--feature .tag {
  background: rgba(11, 11, 11, 0.06);
  border-color: var(--line-on-light);
  color: var(--on-light-muted);
}

/* Principles */
.principle {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: clamp(1.35rem, 2vw, 1.75rem) 0;
  border-top: 1px solid var(--line);
}

.principle h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.principle p { font-size: 0.9375rem; color: var(--muted); }

/* --- 10. Accordion ------------------------------------------------------- */

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

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

.faq__item summary {
  display: grid;
  grid-template-columns: 2.75rem 1fr 1.5rem;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(1.15rem, 2vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color 0.2s var(--ease);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-ink); }

.faq__icon {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  justify-self: end;
  flex: none;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); opacity: 0; }

.faq__body {
  padding: 0 1.5rem clamp(1.25rem, 2vw, 1.75rem) 3.75rem;
  color: var(--muted);
  max-width: 74ch;
}

@media (max-width: 640px) {
  .faq__item summary { grid-template-columns: 2rem 1fr 1.25rem; gap: 0.75rem; }
  .faq__body { padding-left: 2.75rem; padding-right: 0; }
}

/* --- 11. CTA band -------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--ink-surface);
  color: var(--on-light);
  box-shadow: var(--shadow-ink);
}

.cta::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -60%;
  width: min(46rem, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 116, 229, 0.6), transparent 62%);
  pointer-events: none;
}

.cta > * { position: relative; z-index: 1; }

.cta .eyebrow { color: var(--on-light-muted); }
.cta .eyebrow::before { background: var(--on-light); box-shadow: none; }
.cta p { color: var(--on-light-muted); max-width: 52ch; }
.cta h2 { margin-block: 1.5rem 1.25rem; }

.cta .btn { --btn-bg: var(--on-light); --btn-fg: var(--ink); }
.cta .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-light);
  border-color: var(--line-on-light);
  box-shadow: none;
}
.cta .btn--ghost:hover { background: rgba(11, 11, 11, 0.07); }
.cta .gridlines {
  background-image:
    linear-gradient(rgba(11, 11, 11, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 11, 11, 0.07) 1px, transparent 1px);
}

/* --- 12. Forms ----------------------------------------------------------- */

/* The lead form (.lf) has no panel of its own: it sits flat on whichever light
   surface holds it (the slab on iletisim, the CTA box on index and sss). One
   option pattern everywhere: a ruled row with a real radio or checkbox mark.
   It carries its own palette because the surface tokens flip with the slab. */

.lf-shell { position: relative; scroll-margin-top: 7rem; }

.lf {
  --lf-ink: #0a1220;
  --lf-muted: #475062;
  --lf-edge: #6b7382;
  --lf-rule: rgba(10, 18, 32, 0.18);
  --lf-fill: #0b65de;
  --lf-fill-hover: #0957c2;
  --lf-err: #a81e13;
  --lf-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  position: relative;
  container: lf / inline-size;
  display: grid;
  gap: 1.75rem;
  color: var(--lf-ink);
  font-size: 1rem;
}

.lf--compact { gap: 1.25rem; }

/* JS toggles `hidden` on mode-specific parts; component display rules must
   not win over it. */
.lf [hidden], .lf-shell [hidden] { display: none !important; }

.lf p { max-width: none; margin: 0; }

.lf ::selection,
.lf-done ::selection { background: #0b65de; color: #fff; }
.lf :focus-visible,
.lf-done :focus-visible { outline: 2px solid #0b65de; outline-offset: 2px; }

/* Path choice: three ruled rows (radio + label pairs, so arrow keys move
   between them natively). */
.lf-modes { border: 0; margin: 0; padding: 0; min-width: 0; }

.lf-modes__grid { position: relative; display: grid; border-bottom: 1px solid var(--lf-rule); }

.lf-modes__input,
.lf-chips input,
.lf-seg input,
.lf-slots input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lf-mode,
.lf-chips label,
.lf-seg label,
.lf-slots label {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  user-select: none;
}

.lf-mode { padding-block: 0.9rem; border-top: 1px solid var(--lf-rule); }
.lf-mode__t { font-weight: 600; font-size: 1.0625rem; }
.lf-mode__s { grid-column: 2; font-size: 0.9375rem; color: var(--lf-muted); }

.lf-mode::before,
.lf-seg label::before,
.lf-slots label::before,
.lf-chips label::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--lf-edge);
  border-radius: 50%;
  background: #fff;
}

.lf-chips label::before { border-radius: 3px; }

.lf-mode:hover::before,
.lf-seg label:hover::before,
.lf-slots label:hover::before,
.lf-chips label:hover::before { border-color: var(--lf-ink); }

.lf-modes__input:checked + .lf-mode::before,
.lf-seg input:checked + label::before,
.lf-slots input:checked + label::before {
  border: 5px solid var(--lf-fill);
}

.lf-chips input:checked + label::before {
  border-color: var(--lf-fill);
  background: var(--lf-fill) var(--lf-check) center / 0.8rem no-repeat;
}

.lf-seg input:checked + label,
.lf-chips input:checked + label { font-weight: 600; }

.lf-modes__input:focus-visible + .lf-mode,
.lf-chips input:focus-visible + label,
.lf-seg input:focus-visible + label,
.lf-slots input:focus-visible + label { outline: 2px solid var(--lf-fill); outline-offset: 2px; }

/* Mode visibility. CSS alone handles it (so the no-JS form still reshapes);
   JS additionally sets `hidden` and disables the controls so hidden fields
   are neither validated nor submitted. */
.lf:has(#tur-proje:checked) [data-for]:not([data-for~="proje"]),
.lf:has(#tur-arama:checked) [data-for]:not([data-for~="arama"]),
.lf:has(#tur-soru:checked) [data-for]:not([data-for~="soru"]) { display: none; }

/* Groups */
.lf-group {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lf-group__legend { width: 100%; padding: 0; }

.lf-legend {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.lf-group__n { font-weight: 400; color: var(--lf-muted); font-variant-numeric: tabular-nums; }

.lf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

@container lf (max-width: 26rem) { .lf-grid { grid-template-columns: 1fr; } }

.lf-field { display: grid; gap: 0.45rem; align-content: start; min-width: 0; }

.lf-field > label,
.lf-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lf-ink);
}

.lf-opt { font-size: 0.875rem; font-weight: 400; color: var(--lf-muted); }
.lf-hint { font-size: 0.875rem; line-height: 1.45; color: var(--lf-muted); }

/* Text controls. 1rem text keeps iOS from zooming on focus. */
.lf input[type="text"],
.lf input[type="email"],
.lf input[type="tel"],
.lf textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--lf-edge);
  border-radius: 4px;
  background: #fff;
  color: var(--lf-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
}

.lf textarea { min-height: 9rem; resize: vertical; }
.lf--compact textarea { min-height: 7rem; }

.lf input:hover,
.lf textarea:hover { border-color: var(--lf-ink); }

.lf input:focus-visible,
.lf textarea:focus-visible {
  border-color: var(--lf-fill);
  outline: 1px solid var(--lf-fill);
  outline-offset: 0;
}

.lf input[aria-invalid="true"],
.lf textarea[aria-invalid="true"] { border-color: var(--lf-err) !important; }

/* Topics (multi), timeline (single), call windows (single) */
.lf-chips,
.lf-seg,
.lf-slots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

@container lf (max-width: 26rem) {
  .lf-chips, .lf-seg, .lf-slots { grid-template-columns: 1fr; }
}

.lf-slots label { grid-template-columns: 1.125rem minmax(0, 1fr); }
.lf-slots b { font-weight: 600; }
.lf-slots span { grid-column: 2; font-size: 0.875rem; color: var(--lf-muted); font-variant-numeric: tabular-nums; }
.lf-slots label { padding-block: 0.4rem; }
.lf-slots[aria-invalid="true"] label::before { border-color: var(--lf-err); }

/* Consent */
.lf-consent {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: 0.4rem 0.75rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--lf-muted);
}

.lf-consent input {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.15rem 0 0;
  border: 1.5px solid var(--lf-edge);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.lf-consent input:checked { border-color: var(--lf-fill); background: var(--lf-fill) var(--lf-check) center / 0.8rem no-repeat; }
.lf-consent label { cursor: pointer; }
.lf-consent .lf-err { grid-column: 2; }
.lf .footer__pending { color: var(--lf-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Errors and status */
.lf .lf-err { font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--lf-err); }

.lf .lf-status { color: var(--lf-ink); font-size: 0.9375rem; }
.lf .lf-status[data-state="error"] { color: var(--lf-err); font-weight: 500; }

/* Actions */
.lf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.lf-submit,
.lf-back {
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lf-submit {
  justify-self: start;
  border: 1px solid var(--lf-fill);
  background: var(--lf-fill);
  color: #fff;
}

.lf-submit:hover { border-color: var(--lf-fill-hover); background: var(--lf-fill-hover); }

.lf-back { border: 1px solid var(--lf-edge); background: transparent; color: var(--lf-ink); }
.lf-back:hover { border-color: var(--lf-ink); }

.lf-submit__busy { display: none; }
.lf.is-sending .lf-submit { cursor: progress; }
.lf-submit[aria-disabled="true"] { pointer-events: none; }
.lf.is-sending .lf-submit__label { display: none; }
.lf.is-sending .lf-submit__busy { display: inline; }

.lf .lf-note { flex-basis: 100%; font-size: 0.875rem; color: var(--lf-muted); }

/* Result states. Without JS the CMS redirects to #gonderildi or
   #gonderilemedi and :target reveals them; with JS, .is-done does. */
.lf-done,
.lf-alert { display: none; }

.lf-done {
  gap: 0.75rem;
  justify-items: start;
  color: #0a1220;
  scroll-margin-top: 7rem;
}

.lf-done:target,
.lf-shell.is-done .lf-done { display: grid; }

.lf-shell:has(> .lf-done:target) > .lf,
.lf-shell.is-done > .lf { display: none; }

.lf-done .lf-done__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #0a1220;
}

.lf-done .lf-done__body { max-width: 46ch; margin: 0; color: #475062; }

.lf-done__again {
  margin-top: 0.5rem;
  color: #0a1220;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lf-done:focus { outline: none; }

.lf-alert {
  margin-bottom: 1.5rem;
  color: #a81e13;
  font-size: 0.9375rem;
  line-height: 1.5;
  scroll-margin-top: 7rem;
}

.lf-alert a { color: inherit; text-decoration: underline; }
.lf-alert a:focus-visible { outline: 2px solid #a81e13; outline-offset: 2px; }
.lf-alert:target { display: block; }
.lf-shell.is-done > .lf-alert { display: none; }

/* The form inside the call-to-action box: copy left, form right. */
.cta--form {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  /* clip, not hidden: focus() and scrollIntoView() can scroll a hidden box and
     push the copy out of view. */
  overflow: clip;
}

.cta--form::after { display: none; }
.cta--form .cta-form__copy h2 { font-size: clamp(2.25rem, 3.7vw, 3.5rem); }
/* Tight tracking pulls the last glyph past the box that clips the gradient. */
.cta--form .type-grad { padding-right: 0.08em; }

@media (max-width: 900px) { .cta--form { grid-template-columns: 1fr; } }

.cta--form .cta-form__alt { margin-top: 1.25rem; font-size: 0.9375rem; }
.cta--form .cta-form__alt a { color: var(--on-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cta--form .cta-form__alt a:focus-visible { outline: 2px solid var(--on-light); outline-offset: 2px; }

/* The stepped flow (form[data-steps]): leadForms adds .is-stepped, so without
   JS the whole form stays on one page and still submits. The step title
   replaces the group legend on screen; screen readers keep the legend. */
.lf-flow { display: grid; gap: 0.75rem; }

.lf .lf-flow__label {
  display: grid;
  gap: 0.2rem;
  color: var(--lf-ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3cqi, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.lf-flow__label b {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--lf-muted);
  font-variant-numeric: tabular-nums;
}

.lf-flow__bar { height: 2px; background: var(--lf-rule); }
.lf-flow__bar i { display: block; height: 100%; width: var(--lf-progress, 0%); background: var(--lf-ink); }

.lf.is-stepped [data-step-off] { display: none !important; }

.lf.is-stepped .lf-group__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lf.is-stepped .lf-group:focus,
.lf.is-stepped .lf-modes:focus { outline: none; }

/* Bot trap: off-screen, out of the tab order, hidden from assistive tech. */
.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Per-service quote link (hizmetler.html) */
.svc-block__main > .link-arrow { justify-self: start; }

/* Showcase: live sites in a browser frame (index.html#calismalar) */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.work { grid-column: span 4; min-width: 0; }
.work--lg { grid-column: span 6; }

@media (max-width: 900px) {
  .work, .work--lg { grid-column: span 6; }
  .work:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .work, .work--lg { grid-column: 1 / -1; }
}

.work__link {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--card-face);
  border: 1px solid var(--card-edge);
  color: inherit;
  text-decoration: none;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.work__link:hover {
  transform: translateY(-4px);
  border-color: rgba(141, 171, 255, 0.45);
  box-shadow: var(--shadow-lift);
}

.work__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--card-edge);
}

.work__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(141, 171, 255, 0.35); }

.work__bar span {
  margin-left: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work__shot { display: block; aspect-ratio: 16 / 8.5; overflow: hidden; background: #0b1424; }

.work__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.8s var(--ease);
}

.work__link:hover .work__shot img { transform: scale(1.035); }

.work__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.1rem 1.05rem;
}

.work__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.work__meta small { display: block; font-size: 0.875rem; color: var(--muted); }
.work__meta svg { flex: none; width: 18px; height: 18px; color: var(--accent-ink); }

/* Viewer: browse the sites without leaving the page. Only shown by JS; without
   it the grid below stays the plain gallery of links. Wider than the page
   column, lit from behind by a blurred copy of the current site. */
#calismalar { overflow: clip; }

.viewer,
.work-grid.is-selector {
  --viewer-w: min(100vw - 2rem, 1200px);
  width: var(--viewer-w);
  margin-inline: calc((100% - var(--viewer-w)) / 2);
}

.viewer { position: relative; isolation: isolate; margin-bottom: 1rem; }
.viewer[hidden], .viewer [hidden] { display: none !important; }

.viewer__ambient {
  position: absolute;
  z-index: -1;
  inset: 8% 2% -4%;
  width: 96%;
  height: 96%;
  object-fit: cover;
  filter: blur(70px) saturate(1.5);
  opacity: 0.55;
  pointer-events: none;
}

.viewer__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-bottom: 1rem;
}

.viewer__count {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.viewer__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.85rem; margin: 0; max-width: none; }
.viewer__title strong { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.viewer__title span { font-size: 0.9375rem; color: var(--muted); }

.viewer__nav { display: flex; gap: 0.4rem; }

.viewer__arrow,
.viewer__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.viewer__arrow svg, .viewer__icon svg { width: 16px; height: 16px; }
.viewer__arrow:hover, .viewer__icon:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }

.viewer__stage { perspective: 1800px; }

.viewer__device {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  background: #0c1426;
  box-shadow: 0 50px 110px -40px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 100%;
}

/* The screen rises to face the visitor as it scrolls in. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .viewer__device {
      animation: viewer-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}

@keyframes viewer-rise {
  from { transform: rotateX(16deg) scale(0.93); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

.viewer__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.viewer__dots { display: flex; flex: none; gap: 0.4rem; padding-inline: 0.25rem; }
.viewer__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.viewer__dots i:first-child { background: #ff5f57; }
.viewer__dots i:nth-child(2) { background: #febc2e; }
.viewer__dots i:last-child { background: #28c840; }

.viewer__icon { flex: none; width: 2.25rem; height: 2.25rem; border-color: transparent; background: transparent; }

.viewer__address {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: none;
  min-height: 2.25rem;
  margin: 0;
  padding: 0 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.875rem;
  color: var(--ink);
}

.viewer__address svg { flex: none; width: 14px; height: 14px; color: var(--muted); }
.viewer__address span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.viewer__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.viewer__badge.is-live { color: #6ee7a0; }
.viewer__badge.is-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .viewer__badge.is-live::before { animation: viewer-pulse 1.8s ease-out infinite; }
}

@keyframes viewer-pulse {
  from { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.6); }
  to { box-shadow: 0 0 0 8px rgba(110, 231, 160, 0); }
}

.viewer__tools { display: flex; flex: none; gap: 0.4rem; }
.viewer__switch { display: flex; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-sm); }

.viewer__switch button,
.viewer__tool {
  min-height: 2.25rem;
  padding: 0 0.8rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 2.25rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.viewer__tool { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-sm); line-height: calc(2.25rem - 2px); }
.viewer__switch button:hover,
.viewer__tool:hover { background: rgba(255, 255, 255, 0.08); }
.viewer__switch button[aria-pressed="true"] { background: var(--accent-deep); color: #fff; }

/* Runs along the foot of the bar while a site is loading. */
.viewer__load {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent-2);
  opacity: 0;
}

.viewer.is-loading .viewer__load { opacity: 1; animation: viewer-load 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards; }
@keyframes viewer-load { to { transform: scaleX(0.92); } }

.viewer__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  width: 100%;
  overflow: hidden;
  background: #0b1424;
}

.viewer__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: filter 0.5s var(--ease), opacity 0.5s var(--ease);
}

/* Idle: a dimmed preview under the call to action. */
.viewer__screen:not(.is-open) .viewer__poster { filter: brightness(0.72); }
.viewer__screen:not(.is-open):hover .viewer__poster { filter: brightness(0.9); }

@media (prefers-reduced-motion: no-preference) {
  .viewer__screen:not(.is-open) .viewer__poster { animation: viewer-drift 9s ease-out both; }
}

@keyframes viewer-drift { from { scale: 1.06; } to { scale: 1; } }

.viewer__start {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1.5rem 0.6rem 0.6rem;
  border: 0;
  border-radius: var(--r-pill);
  background: #fff;
  color: #0a1220;
  font: inherit;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.75);
  transition: scale 0.25s var(--ease);
}

.viewer__start:hover { scale: 1.05; }

.viewer__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
}

.viewer__play svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .viewer__play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: viewer-ring 2.2s ease-out infinite;
  }
}

@keyframes viewer-ring {
  from { box-shadow: 0 0 0 0 rgba(11, 101, 222, 0.55); }
  to { box-shadow: 0 0 0 16px rgba(11, 101, 222, 0); }
}

.viewer__frame,
.viewer__scroll { opacity: 0; transition: opacity 0.45s var(--ease); }
.viewer__frame.is-loaded,
.viewer__scroll.is-loaded { opacity: 1; }

.viewer__frame {
  position: absolute;
  top: 0;
  border: 0;
  background: #fff;
  transform-origin: top left;
}

/* Width, offset and scale animate so switching views morphs the live page. */
.viewer__frame.is-ready {
  transition: opacity 0.45s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease), left 0.55s var(--ease), top 0.55s var(--ease), transform 0.55s var(--ease), border-radius 0.55s var(--ease), box-shadow 0.55s var(--ease);
}

.viewer__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #fff; }
.viewer__scroll:focus-visible { outline-offset: -3px; }
.viewer__scroll img { display: block; width: 100%; }

/* Phone: the page in a handset, with the site blurred behind it. */
.viewer__screen.is-open.is-phone .viewer__poster { filter: blur(22px) brightness(0.45); }

.viewer__frame.is-phone,
.viewer__scroll.is-phone {
  border-radius: 34px;
  box-shadow: 0 0 0 9px #05080f, 0 0 0 10px rgba(255, 255, 255, 0.28), 0 30px 70px rgba(0, 0, 0, 0.7);
}

.viewer__scroll.is-phone {
  inset: 1.25rem auto 1.25rem 50%;
  width: min(390px, 100% - 2.5rem);
  translate: -50% 0;
}

.viewer__note { margin: 0.75rem 0 0; max-width: none; font-size: 0.875rem; color: var(--muted); }
.viewer__note:empty { display: none; }

.viewer:fullscreen { display: flex; flex-direction: column; padding: 1rem; background: var(--bg); }
.viewer:fullscreen .viewer__stage { flex: 1; min-height: 0; }
.viewer:fullscreen .viewer__device { display: flex; flex-direction: column; height: 100%; animation: none; }
.viewer:fullscreen .viewer__screen { flex: 1; aspect-ratio: auto; max-height: none; }

@media (max-width: 900px) {
  .viewer__dots, .viewer__tool[data-v-full] { display: none; }
  .viewer__bar { flex-wrap: wrap; }
  .viewer__address { flex-basis: 100%; order: -1; }
  .viewer__tools { flex: 1; justify-content: space-between; }
}

@media (max-width: 700px) {
  .viewer__icon { display: none; }
  .viewer__screen { aspect-ratio: 3 / 4; max-height: 72vh; }
  .viewer__poster { object-position: top left; }
  .viewer__title span { display: none; }
}

.work-grid.is-selector {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}
.work-grid.is-selector::-webkit-scrollbar { display: none; }

.work-grid.is-selector .work { grid-column: auto; }
.work-grid.is-selector .work__bar,
.work-grid.is-selector .work__meta small,
.work-grid.is-selector .work__meta svg { display: none; }
.work-grid.is-selector .work__link { position: relative; grid-template-rows: auto auto; border-radius: var(--r-md); opacity: 0.62; transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease); }
.work-grid.is-selector .work__link:hover { transform: none; box-shadow: none; opacity: 1; }
.work-grid.is-selector .work__link:hover .work__shot img { transform: none; }
.work-grid.is-selector .work__meta { padding: 0.5rem 0.7rem 0.6rem; }
.work-grid.is-selector .work__meta strong { font-size: 0.875rem; letter-spacing: 0; white-space: nowrap; }
.work-grid.is-selector [aria-current="true"] { border-color: var(--accent-2); opacity: 1; }
.work-grid.is-selector [aria-current="true"] strong { color: var(--accent-2); }

/* Fills while the tour waits on this site. */
.work-grid.is-touring [aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent-2);
  transform-origin: left;
  animation: viewer-tour var(--tour-ms, 5000ms) linear both;
}

@keyframes viewer-tour { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .work__link, .work__shot img { transition: none; }
  .work__link:hover { transform: none; }
  .work__link:hover .work__shot img { transform: none; }
}

/* Contact side panel */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.contact-list dt {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.25rem;
}

.contact-list dd {
  margin: 0;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.contact-list dd a { border-bottom: 1px solid var(--line); transition: border-color 0.2s var(--ease); }
.contact-list dd a:hover { border-color: var(--ink); }

/* --- 13. Footer ---------------------------------------------------------- */

.footer {
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  border-top: 1px solid var(--line);
  margin-top: clamp(4rem, 8vw, 7rem);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 900px) {
  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; }
}

.footer__brand { display: grid; gap: 1rem; align-content: start; }
.footer__brand p { color: var(--muted); font-size: 0.9375rem; max-width: 34ch; }

.footer__tagline {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.footer h3 {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.footer li a {
  font-size: 0.9375rem;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

.footer li a:hover { color: var(--ink); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--faint);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Legal pages do not exist yet — rendered as text, not as links that go nowhere */
.footer__pending { color: var(--faint); opacity: .72; cursor: default; }
.footer__legal a:hover { color: var(--ink); }

/* --- 14. Page header (inner pages) -------------------------------------- */

.page-head {
  overflow: clip;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
}

.page-head h1 { margin-block: 1.5rem 1.5rem; }

/* Anchor sub-nav */
.subnav {
  position: sticky;
  top: 5.5rem;
  z-index: 20;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.4rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-pill);
  background: var(--bg-veil);
  border: 1px solid var(--line-soft);
  scrollbar-width: none;
}

@supports (backdrop-filter: blur(1px)) {
  .subnav { backdrop-filter: blur(14px) saturate(1.3); }
}

.subnav::-webkit-scrollbar { display: none; }

.subnav a {
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.subnav a:hover { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }

/* Service detail block */
.svc-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 9rem;
}

@media (max-width: 900px) { .svc-block { grid-template-columns: 1fr; } }

.svc-block__aside { display: grid; gap: 1rem; align-content: start; }

.svc-block__aside h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }

.svc-block__main { display: grid; gap: 1.75rem; align-content: start; }

.svc-block__note {
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ink);
}

.svc-block__note h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.svc-block__note p { font-size: 0.9375rem; color: var(--muted); }

.cols {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cols li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: baseline;
  padding-block: 0.35rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.cols li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: translateY(-2px);
}

@media (max-width: 620px) { .cols { columns: 1; } }

.deliverables {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Studio prose */
.prose-block {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) { .prose-block { grid-template-columns: 1fr; } }

.prose-block__body { display: grid; gap: 1.15rem; }
.prose-block__body p { color: var(--muted); max-width: 64ch; }

/* --- 15. Motion ----------------------------------------------------------
   The reference layout's signature transition is a defocus: elements arrive
   from blur(10px) rather than simply fading. Everything below reuses that. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(26px);
    transition:
      opacity 0.9s var(--ease),
      filter 0.9s var(--ease),
      transform 0.9s var(--ease);
  }

  .reveal.is-in {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  .reveal-group > * {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(22px);
    transition:
      opacity 0.75s var(--ease),
      filter 0.75s var(--ease),
      transform 0.75s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }

  .reveal-group.is-in > * {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  /* Per-character headline reveal */
  .char {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(0.4em) scale(1.06);
    transition:
      opacity 0.75s var(--ease),
      filter 0.75s var(--ease),
      transform 0.75s var(--ease);
    transition-delay: calc(var(--ci, 0) * 26ms);
  }

  .is-in .char {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  /* Word-level variant for sub-headlines */
  .word {
    display: inline-block;
    opacity: 0;
    filter: blur(7px);
    transform: translateY(0.5em);
    transition:
      opacity 0.7s var(--ease),
      filter 0.7s var(--ease),
      transform 0.7s var(--ease);
    transition-delay: calc(var(--ci, 0) * 45ms);
  }

  .is-in .word {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* Fallback: never hide content if JS or motion is unavailable */
.no-js .reveal,
.no-js .reveal-group > *,
.no-js .char,
.no-js .word,
.no-js .wipe,
.no-js .clip-in {
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* --- 15b. Scroll progress ------------------------------------------------ */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 200;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* --- 15c. Texture & atmosphere ------------------------------------------- */

/* Fine grain over the whole canvas. Large blue gradients on a navy ground
   band visibly on 8-bit panels; grain destroys the banding and gives the
   surface tooth. One fixed element, one paint, no animation — so there is
   nothing here for prefers-reduced-motion to switch off. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Blueprint grid — a nod to the technical work, used behind dark sections */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 78%);
}

/* --- 15d. Rotating badge ------------------------------------------------- */

.badge-spin {
  position: relative;
  width: clamp(7rem, 11vw, 9.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: none;
}

.badge-spin__ring {
  position: absolute;
  inset: 0;
  animation: spin 22s linear infinite;
}

.badge-spin__ring text {
  font-family: var(--font-sans);
  font-size: 8.4px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  fill: var(--muted);
}

.badge-spin__core {
  width: 42%;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-light);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-ink);
}

.badge-spin__core svg { width: 42%; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .badge-spin__ring { animation: none; }
}

/* --- 15e. Button label blur-swap ----------------------------------------- */

.btn__labels {
  display: grid;
  overflow: hidden;
  line-height: 1.25;
}

.btn__label {
  grid-area: 1 / 1;
  transition:
    transform 0.45s var(--ease),
    filter 0.45s var(--ease),
    opacity 0.45s var(--ease);
}

.btn__label--in {
  transform: translateY(115%);
  filter: blur(8px);
  opacity: 0;
}

.btn:hover .btn__label--out,
.link-arrow:hover .btn__label--out {
  transform: translateY(-115%);
  filter: blur(8px);
  opacity: 0;
}

.btn:hover .btn__label--in,
.link-arrow:hover .btn__label--in {
  transform: none;
  filter: blur(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn__label { transition: none; }
  .btn__label--in { display: none; }
}

/* --- 15f. Pinned card stack ----------------------------------------------
   Services stack up as you scroll: each card sticks a little lower than the
   last, and shrinks as the next one covers it. */

.pin { position: relative; }

.pin__card {
  position: sticky;
  top: calc(6.5rem + var(--n, 0) * 1.4rem);
  margin-bottom: 1.25rem;
  transform-origin: 50% 0;
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: exit)) {
    @keyframes pin-recede {
      to {
        scale: 0.94;
        filter: blur(2px) brightness(0.97);
      }
    }

    .pin__card {
      animation: pin-recede linear forwards;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
  }
}

@media (max-width: 820px) {
  .pin__card { position: static; margin-bottom: 1rem; }
}

.pin-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.25rem 2.5rem;
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

.pin-card__title { display: grid; gap: 0.6rem; }
.pin-card__desc { display: grid; gap: 1.15rem; }

@media (max-width: 820px) {
  .pin-card { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* --- 15g. Inverted section ------------------------------------------------
   On a dark page the accent move is the opposite: a light island. */

.invert {
  position: relative;
  overflow: hidden;
  background: var(--ink-surface);
  color: var(--on-light);
  border-radius: var(--r-xl);
}

.invert .eyebrow { color: var(--on-light-muted); }
.invert .eyebrow::before { background: var(--on-light); box-shadow: none; }
.invert .body-muted,
.invert .lead,
.invert p { color: var(--on-light-muted); }
.invert .checklist li { color: var(--on-light-muted); }
.invert .checklist li::before { background: var(--on-light); }
.invert .card {
  background: rgba(11, 11, 11, 0.04);
  border-color: var(--line-on-light);
  box-shadow: none;
}
.invert .problem__item {
  background: rgba(11, 11, 11, 0.04);
  border-color: var(--line-on-light);
  border-left-color: var(--on-light);
}
.invert .problem__item p { color: var(--on-light-muted); }
.invert .pillar__k { color: var(--on-light); }
.invert .gridlines {
  background-image:
    linear-gradient(rgba(11, 11, 11, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 11, 11, 0.06) 1px, transparent 1px);
}
.invert > * { position: relative; z-index: 1; }

.invert-panel { padding: clamp(2rem, 5vw, 4.5rem); }

/* Ghost numerals on the process steps */
.steps { position: relative; }
.step { position: relative; overflow: hidden; }
.step > * { position: relative; z-index: 1; }

.step::after {
  content: attr(data-ghost);
  position: absolute;
  right: clamp(0.5rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.13);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: -webkit-text-stroke-color 0.4s var(--ease), transform 0.5s var(--ease);
}

.step:hover::after {
  -webkit-text-stroke-color: rgba(141, 171, 255, 0.7);
  transform: translateY(-50%) translateX(-6px);
}

/* --- 15h. Ghost numerals ------------------------------------------------- */

.ghost-num {
  position: absolute;
  right: clamp(0.5rem, 3vw, 3rem);
  top: -0.35em;
  font-family: var(--font-display);
  font-size: clamp(7rem, 18vw, 15rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* --- 15j. Mask wipe reveal ------------------------------------------------
   The reference wipes headings in by sliding a gradient mask across them
   over ~1s. Cheap, GPU-friendly, and reads far richer than a fade. */

@media (prefers-reduced-motion: no-preference) {
  .wipe {
    -webkit-mask-image: linear-gradient(105deg, #000 33%, rgba(0, 0, 0, 0.25) 50%, transparent 66%);
    mask-image: linear-gradient(105deg, #000 33%, rgba(0, 0, 0, 0.25) 50%, transparent 66%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition:
      -webkit-mask-position 1.1s cubic-bezier(0.6, 0, 0.2, 1),
      mask-position 1.1s cubic-bezier(0.6, 0, 0.2, 1);
  }

  .wipe.is-in {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  /* Clip wipe — used on cards and media blocks */
  .clip-in {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .clip-in.is-in { clip-path: inset(0 0 0 0); }
}

/* --- 15k. Process tabs ----------------------------------------------------
   Auto-advancing tabs with a progress bar, as on the reference site. */

.proc {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 900px) { .proc { grid-template-columns: 1fr; } }

.proc__tabs {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proc__tab {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem 1.15rem;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--faint);
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}

.proc__tab:hover { color: var(--ink); background: var(--card); }

.proc__tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--card);
}

.proc__tab .num { color: inherit; opacity: 0.6; }

/* The progress bar that fills while a tab is active */
.proc__tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.proc__tab[aria-selected="true"]::after {
  animation: proc-progress var(--proc-dur, 6s) linear forwards;
}

.proc[data-paused="true"] .proc__tab::after { animation-play-state: paused; }

@keyframes proc-progress { to { transform: scaleX(1); } }

.proc__panels { position: relative; }

.proc__panel {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.proc__panel[hidden] { display: none; }

.proc__panel h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
.proc__panel p { color: var(--muted); max-width: 58ch; }

@media (prefers-reduced-motion: no-preference) {
  .proc__panel:not([hidden]) {
    animation: proc-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes proc-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .proc__tab[aria-selected="true"]::after { animation: none; transform: scaleX(1); }
}

/* --- 15l. Visual components ----------------------------------------------
   Generated schematics rather than photography: the studio sells technical
   clarity, so the artwork is diagrammatic. All self-contained SVG + CSS. */

.viz {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(39, 116, 229, 0.14), transparent 60%),
    var(--card);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.viz svg { width: 100%; height: auto; display: block; }

.viz--pad { padding: clamp(1rem, 2.2vw, 1.75rem); }

.viz__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000, transparent 80%);
  pointer-events: none;
}

/* Shared SVG primitives */
.viz .stroke { fill: none; stroke: rgba(200, 214, 240, 0.3); stroke-width: 1.5; }
.viz .stroke-2 { fill: none; stroke: rgba(200, 214, 240, 0.5); stroke-width: 1.75; }
.viz .accent-s { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; }
.viz .accent-f { fill: var(--accent); }
.viz .dim-f { fill: rgba(200, 214, 240, 0.3); }
.viz .mid-f { fill: rgba(200, 214, 240, 0.55); }
.viz .label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--faint);
}

/* --- Hero visual --- */
.hero__viz {
  margin-top: 1.5rem;
  aspect-ratio: 16 / 10;
}

/* --- Split / comparison diagram --- */
/* height comes from the SVG viewBox — a fixed ratio would letterbox it */
.viz--compare { padding: clamp(.75rem, 1.6vw, 1.25rem); }

/* --- Process panel visual --- */
.proc__panel { grid-template-columns: 1fr; }

/* --- Sector card pattern (subtle, decorative) --- */
.sector { position: relative; overflow: hidden; }

/* --- 15i. Magnetic hover ------------------------------------------------- */

.magnetic { transition: transform 0.35s var(--ease); }

@media (hover: none) {
  .magnetic { transform: none !important; }
}

/* --- 16. Utilities ------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stack { display: grid; gap: 1rem; }
.stack-lg { display: grid; gap: 1.75rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.text-accent { color: var(--accent-ink); }

@media print {
  .nav, .subnav, .cta, .marquee { display: none; }
  body { background: #fff; color: #000; }
}

/* --- 17. Brand gradient system -------------------------------------------
   The gradient is the brand's live element, not a static fill. One keyframe
   drives every use of it; each surface just picks a duration. */

@keyframes grad-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Gradient text. Guarded: without background-clip:text the text would be
   invisible, so the fallback repaints it in a solid accent that clears AA. */
.grad-text {
  background: var(--brand-gradient-text);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-drift 14s ease-in-out infinite;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text { color: var(--accent-ink); background: none; }
}

/* Gradient hairline border via a masked pseudo-element — keeps the card's
   own background intact. */
.grad-border { position: relative; isolation: isolate; }

.grad-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-gradient);
  background-size: 260% 100%;
  animation: grad-drift 16s ease-in-out infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* A moving gradient rule — used to separate sections */
.grad-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--brand-gradient);
  background-size: 260% 100%;
  animation: grad-drift 18s ease-in-out infinite;
  opacity: .55;
}

/* Solid brand fill. Only the deep end of the ramp is dark enough to carry
   white text at AA, so filled buttons never use the full gradient. */
.btn--brand {
  --btn-bg: var(--accent-deep);
  --btn-fg: var(--accent-on);
  box-shadow: var(--shadow-brand);
}

.btn--brand:hover { --btn-bg: #0a5cc9; }

/* --- Logo ---------------------------------------------------------------- */

.logo-mark {
  width: auto;
  /* Matches the two-line wordmark's box, so the lockup reads as one unit */
  height: 2.05em;
  flex: none;
}

.logo-mark path,
.logo-mark polygon { fill: url(#brandGrad); }

/* The authentic lockup ships as one SVG file, so the nav just sizes it. */
.brand { align-items: center; gap: 0.6rem; }

.logo-lock {
  display: block;
  width: auto;
  height: clamp(1.65rem, 2.4vw, 2rem);
  flex: none;
}

.brand__word {
  display: grid;
  line-height: 1.02;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 0.95rem;
}

.brand__word span:last-child { color: var(--muted); font-weight: 500; }
.brand__word span { line-height: 1.08; }

@media (prefers-reduced-motion: reduce) {
  .grad-text,
  .grad-border::before,
  .grad-rule,
  .display em { animation: none; }
  #brandGrad animate { display: none; }
}

/* --- 18. Section progression --------------------------------------------
   Each major section carries a 2px rule sampling a different position along
   the brand ramp — deep blue at the top of the page, light at the bottom.
   Over ten sections the reader feels forward movement through a system
   without a single animation running. */

.section[data-step] { position: relative; }

.section[data-step]::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--step-from) 0%, var(--step-to) 42%, transparent 92%);
  opacity: 0.85;
}

.section[data-step="1"]  { --step-from: #0b65de; --step-to: #1268e0; }
.section[data-step="2"]  { --step-from: #1268e0; --step-to: #176be1; }
.section[data-step="3"]  { --step-from: #176be1; --step-to: #2774e5; }
.section[data-step="4"]  { --step-from: #2774e5; --step-to: #3e80eb; }
.section[data-step="5"]  { --step-from: #3e80eb; --step-to: #4a87ee; }
.section[data-step="6"]  { --step-from: #4a87ee; --step-to: #5b90f2; }
.section[data-step="7"]  { --step-from: #5b90f2; --step-to: #6c99f6; }
.section[data-step="8"]  { --step-from: #6c99f6; --step-to: #7fa3fb; }
.section[data-step="9"]  { --step-from: #7fa3fb; --step-to: #8dabff; }
.section[data-step="10"] { --step-from: #8dabff; --step-to: #8dabff; }

/* ==========================================================================
   19. MOTION GRAPHICS LAYER
   Graphic-design motion rather than information diagrams: flowing gradient
   silk, morphing blobs, kinetic type, dimensional cards. Everything is built
   from the brand ramp and everything stops under prefers-reduced-motion.
   ========================================================================== */

/* --- 19a. Silk ------------------------------------------------------------
   The flowing gradient field from the brand's own hero. A gradient plate is
   pushed through a turbulence displacement map; animating the turbulence
   seed and the plate's transform gives the liquid fold. */

.silk {
  position: absolute;
  inset: -12%;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.silk svg { width: 100%; height: 100%; }

.silk__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 20%, var(--bg) 78%),
    linear-gradient(180deg, transparent 40%, var(--bg) 92%);
}

/* Sits behind content but above the page background */
.has-silk { position: relative; isolation: isolate; overflow: clip; }
.has-silk > .wrap { position: relative; z-index: 1; }

/* --- 19b. Morphing gradient blobs ---------------------------------------- */

.blobs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  filter: blur(46px) saturate(1.25);
  opacity: 0.55;
}

.blob {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  background: var(--brand-gradient);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  will-change: transform, border-radius;
}

.blob--a { top: -12%; left: -8%; }
.blob--b { bottom: -18%; right: -6%; background: linear-gradient(220deg, #8dabff, #0b65de); }
.blob--c { top: 28%; left: 44%; width: 30%; opacity: 0.75; }

@media (prefers-reduced-motion: no-preference) {
  .blob--a { animation: blob-morph 22s ease-in-out infinite; }
  .blob--b { animation: blob-morph 28s ease-in-out infinite reverse; }
  .blob--c { animation: blob-morph 34s ease-in-out infinite; }
}

@keyframes blob-morph {
  0%, 100% {
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  33% {
    border-radius: 66% 34% 38% 62% / 57% 63% 37% 43%;
    transform: translate3d(6%, -4%, 0) rotate(38deg) scale(1.12);
  }
  66% {
    border-radius: 35% 65% 55% 45% / 62% 38% 62% 38%;
    transform: translate3d(-5%, 5%, 0) rotate(-24deg) scale(0.94);
  }
}

/* --- 19c. Kinetic type ----------------------------------------------------
   A light sweeps across large headings on a long loop. Uses a masked overlay
   copy so the base text keeps its own solid, AA-passing colour underneath. */

.kinetic { position: relative; display: inline-block; }

.kinetic::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 38%, rgba(141, 171, 255, 0.95) 50%, transparent 62%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .kinetic::after { animation: kinetic-sweep 6.5s ease-in-out infinite; }
}

@keyframes kinetic-sweep {
  0%, 100% { background-position: 130% 50%; }
  55%      { background-position: -30% 50%; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .kinetic::after { display: none; }
}

/* --- 19d. Dimensional cards ---------------------------------------------- */

.tilt {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tilt:hover {
    transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-6px);
    box-shadow: var(--shadow-lift), 0 24px 60px -24px rgba(39, 116, 229, 0.5);
  }
}

/* Gradient sheen that follows the card edge */
.sheen { position: relative; overflow: hidden; }

.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 40%, rgba(141, 171, 255, 0.14) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 130% 0;
  pointer-events: none;
  transition: background-position 0.9s var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sheen:hover::after { background-position: -30% 0; }
}

/* --- 19e. Gradient display type ------------------------------------------
   Full-bleed oversized type filled with the moving ramp. Display sizes only —
   the ramp's dark end is 3.7:1, which clears AA for large text but not body. */

.type-grad {
  background: var(--brand-gradient);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .type-grad { animation: grad-drift 18s ease-in-out infinite; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .type-grad { color: var(--accent-ink); background: none; }
}

/* --- 19f. Marquee, restyled as display type ------------------------------ */

.marquee--display .marquee__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 4.5rem);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 214, 240, 0.28);
}

.marquee--display .marquee__item:nth-child(even) {
  -webkit-text-stroke: 0;
  background: var(--brand-gradient);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.marquee--display .marquee__item::after { display: none; }

/* --- 19g. Logo motion ----------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .brand:hover .logo-mark { animation: mark-pop 0.6s var(--ease); }
}

@keyframes mark-pop {
  40% { transform: translateY(0.06em) scale(1.14) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .kinetic::after, .type-grad,
  .marquee--display .marquee__item:nth-child(even) { animation: none; }
  .silk animate, .silk animateTransform { display: none; }
}

/* ==========================================================================
   20. TEXTURE & CRAFT LAYER
   Graphic-design surface work: ambient colour washes, mesh fields, gradient
   rails, drafting brackets, pointer-tracked glows, oversized ghost numerals.
   No charts, no schematics — this layer is about surface, depth and light.
   ========================================================================== */

/* --- 20a. Ambient wash --------------------------------------------------- */

.wash {
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(38% 44% at 22% 30%, rgba(39, 116, 229, 0.5), transparent 70%),
    radial-gradient(32% 40% at 78% 66%, rgba(141, 171, 255, 0.34), transparent 72%);
  filter: blur(38px);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .wash { animation: wash-drift 30s ease-in-out infinite alternate; }
  .wash--slow { animation-duration: 44s; animation-direction: alternate-reverse; }
}

@keyframes wash-drift {
  from { transform: translate3d(-3%, 2%, 0) scale(1); }
  to   { transform: translate3d(4%, -3%, 0) scale(1.14); }
}

.section { position: relative; isolation: isolate; overflow: clip; }
.section > .wrap { position: relative; z-index: 1; }

/* --- 20b. Mesh field ----------------------------------------------------- */

.mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(141, 171, 255, 0.28) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 76%);
  opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
  .mesh { animation: mesh-pan 40s linear infinite; }
}

@keyframes mesh-pan { to { background-position: 260px 130px; } }

/* --- 20c. Card craft ----------------------------------------------------- */

.card,
.model,
.sector,
.pin-card,
.proc__panel {
  position: relative;
  overflow: hidden;
}

/* Hairline along the top edge, lighting from the left on hover */
.card::before,
.model::before,
.sector::before,
.pin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent 70%);
  transform: scaleX(0.14);
  transform-origin: 0 50%;
  opacity: 0.6;
  transition: transform 0.65s var(--ease), opacity 0.4s var(--ease);
}

.card:hover::before,
.model:hover::before,
.sector:hover::before,
.pin-card:hover::before {
  transform: scaleX(1);
  opacity: 1;
}

/* Drafting bracket in the corner */
.card::after,
.sector::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 16px;
  height: 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-right-radius: 3px;
  transition: border-color 0.4s var(--ease), width 0.4s var(--ease), height 0.4s var(--ease);
  pointer-events: none;
}

.card:hover::after,
.sector:hover::after {
  border-color: var(--accent-2);
  width: 22px;
  height: 22px;
}

/* Pointer-tracked glow */
.glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
    rgba(39, 116, 229, 0.22), transparent 68%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
  z-index: 0;
}

.glow:hover::before { opacity: 1; }
.glow > * { position: relative; z-index: 1; }

/* --- 20d. Service card rail ---------------------------------------------- */

.pin-card {
  border: 0;
  border-left: 2px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(180deg, var(--accent), var(--accent-2) 55%, transparent) border-box;
}

.pin-card .svc__num {
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--accent-2);
}

/* Oversized ghost numeral */
.pin-card::after {
  content: attr(data-n);
  position: absolute;
  right: -0.1em;
  bottom: -0.32em;
  font-family: var(--font-display);
  font-size: clamp(6rem, 12vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(141, 171, 255, 0.14);
  pointer-events: none;
  z-index: 0;
  transition: -webkit-text-stroke-color 0.5s var(--ease), transform 0.6s var(--ease);
}

.pin-card:hover::after {
  -webkit-text-stroke-color: rgba(141, 171, 255, 0.3);
  transform: translate(-8px, -6px);
}

.pin-card > * { position: relative; z-index: 1; }

/* --- 20e. Flow steps ----------------------------------------------------- */

.flow { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border: 0; }

.flow__step { position: relative; }

.flow__step::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}

.flow__step:hover::after { transform: scaleX(1); }
.flow__k { color: var(--accent-2); }

/* --- 20f. Process tabs --------------------------------------------------- */

.proc__panel {
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(39, 116, 229, 0.14), transparent 62%),
    var(--card);
}

.proc__tab[aria-selected="true"] {
  background:
    linear-gradient(90deg, rgba(39, 116, 229, 0.16), transparent 70%),
    var(--card);
}

/* --- 20g. Sector cards --------------------------------------------------- */

.sector__k {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--accent-2);
}

.sector__k::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* --- 20h. Accordion ------------------------------------------------------ */

.faq__item { position: relative; transition: background 0.4s var(--ease); }

.faq__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.45s var(--ease);
}

.faq__item[open]::before,
.faq__item:hover::before { transform: scaleY(1); }

.faq__item:hover { background: rgba(255, 255, 255, 0.022); }
.faq__item summary { padding-inline: 0.85rem; }
.faq__item[open] .num { color: var(--accent-2); }

/* --- 20i. Footer --------------------------------------------------------- */

.footer { position: relative; overflow: clip; border-top: 0; }

.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--brand-gradient);
  background-size: 260% 100%;
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .footer::before { animation: grad-drift 20s ease-in-out infinite; }
}

/* --- 20j. Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wash, .mesh, .footer::before { animation: none; }
  .card::before, .model::before, .sector::before, .pin-card::before,
  .flow__step::after, .faq__item::before { transition: none; }
}

/* ==========================================================================
   21. COLOUR BLOCKING
   The site ran navy end to end through eleven sections. The reference the
   client is comparing us to runs four dark<->light transitions on its
   homepage and six on its service template; each flip re-reads as a new
   chapter and does more for perceived design quality than any texture.

   A light slab re-maps the text tokens rather than restating every rule, so
   anything already written against --ink / --muted / --line flips with it.
   The handful of places that assume "ink is light" are fixed explicitly
   below — this site has been bitten by light-on-light before.
   ========================================================================== */

/* Every light surface on the site — full slab, page head, or the inverted
   island inside a dark section — takes the same token re-map, so a component
   dropped into any of them cannot end up light-on-light. */
.section--light,
.page-head--light,
.invert {
  --ink: #0a1220;                      /* 17.02:1 on #f2f4f8 */
  --muted: rgba(10, 18, 32, 0.68);     /*  6.27:1 composited */
  --faint: rgba(10, 18, 32, 0.62);     /*  5.10:1 composited */
  --accent-ink: #0b4fae;               /*  6.95:1 */
  --accent-2: #0b4fae;
  --bg: #f2f4f8;
  --bg-veil: rgba(242, 244, 248, 0.78);
  --card: #ffffff;
  --card-2: #e6eaf2;
  --card-face: rgba(10, 18, 32, 0.035);
  --card-edge: rgba(10, 18, 32, 0.12);
  --card-edge-hot: rgba(11, 79, 174, 0.42);
  --line: rgba(10, 18, 32, 0.14);
  --line-soft: rgba(10, 18, 32, 0.10);
  --line-dark: rgba(10, 18, 32, 0.18);
  --shadow-card: 0 1px 2px rgba(10, 18, 32, 0.05), 0 8px 20px -14px rgba(10, 18, 32, 0.22);
  --shadow-lift: 0 2px 6px rgba(10, 18, 32, 0.07), 0 24px 48px -26px rgba(10, 18, 32, 0.3);
  --shadow-ink: 0 2px 6px rgba(10, 18, 32, 0.1), 0 18px 36px -20px rgba(10, 18, 32, 0.32);
}

/* The slabs themselves — full-bleed light bands cut into the navy page. */
.section--light,
.page-head--light {
  background: var(--ink-surface);
  color: var(--on-light);
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-block: 1px solid rgba(10, 18, 32, 0.08);
}

/* Quiet atmosphere for the light slabs — the blue washes built for the navy
   canvas read as haze on #f2f4f8, so they are replaced rather than reused. */
.section--light > .wash,
.section--light > .mesh,
.page-head--light > .wash,
.page-head--light > .mesh { display: none; }

.section--light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(72% 58% at 12% 0%, rgba(11, 101, 222, 0.1), transparent 62%),
    radial-gradient(56% 48% at 94% 100%, rgba(11, 101, 222, 0.08), transparent 66%);
}

/* --- 21a. The places where "ink is light" was assumed --------------------- */

.section--light .btn,
.invert .btn { --btn-bg: #0a1220; --btn-fg: #f2f4f8; }

.section--light .btn--ghost,
.invert .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #0a1220;
  border-color: var(--line-dark);
  box-shadow: none;
}

.section--light .btn--ghost:hover,
.invert .btn--ghost:hover { background: rgba(10, 18, 32, 0.06); }

.section--light .btn--brand,
.invert .btn--brand { --btn-bg: var(--accent-deep); --btn-fg: #ffffff; }

.section--light .badge-spin__core,
.invert .badge-spin__core { background: #0a1220; color: #f2f4f8; }

/* Hover tints authored as white veils are invisible on a light ground */
.section--light .svc:hover,
.section--light .faq__item:hover { background: rgba(10, 18, 32, 0.03); }

/* Text-stroke ghosts drawn in pale blue vanish on light; restate them dark */
.section--light .step::after { -webkit-text-stroke-color: rgba(10, 18, 32, 0.16); }
.section--light .ghost-num { -webkit-text-stroke-color: rgba(10, 18, 32, 0.14); }
.section--light .pin-card::after { -webkit-text-stroke-color: rgba(10, 18, 32, 0.12); }
.section--light .marquee__item {
  color: var(--on-light);
  -webkit-text-stroke-color: rgba(10, 18, 32, 0.3);
}

.section--light .gridlines {
  background-image:
    linear-gradient(rgba(10, 18, 32, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 18, 32, 0.06) 1px, transparent 1px);
}

/* Gradient text: the ramp's light end disappears on a light ground */
.section--light .display em,
.section--light .grad-text,
.section--light .type-grad,
.invert .display em,
.invert .grad-text,
.invert .type-grad {
  background: linear-gradient(100deg, #0b4fae 0%, #0b65de 55%, #2774e5 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .section--light .display em,
  .section--light .grad-text,
  .section--light .type-grad,
  .invert .display em,
  .invert .grad-text,
  .invert .type-grad { color: var(--accent-ink); background: none; }
}

.section--light .kinetic::after {
  background-image: linear-gradient(100deg,
    transparent 38%, rgba(11, 79, 174, 0.9) 50%, transparent 62%);
}

/* The section progression rule sits on top of every slab; on light ground it
   needs the deep end of the ramp, not the pale end. */
.section--light[data-step]::before {
  background: linear-gradient(90deg, #0b4fae 0%, #0b65de 42%, transparent 92%);
  opacity: 1;
}

/* ==========================================================================
   22. THE GRAPHIC PANEL
   A fixed, generous slot holding a constructed drawing, sitting inside a
   card above a mono index and a short label. This is the device the client
   actually asked for: every claim gets a purpose-built graphic, not a
   paragraph. The art is a dark plate in every context so the panels read as
   one family of objects whether the slab behind them is navy or light.
   ========================================================================== */

.gpanel {
  position: relative;
  width: 100%;
  min-height: var(--panel-h);
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 82% 0%, rgba(39, 116, 229, 0.18), transparent 64%),
    #0b1424;
  box-shadow: inset 0 0 0 1px rgba(141, 171, 255, 0.12);

  /* Inherited into the <use> shadow trees — custom properties are the only
     thing that reaches inside a <use>, since selectors do not match there. */
  --gp-stroke: rgba(141, 171, 255, 0.5);
  --gp-fill: rgba(141, 171, 255, 0.13);
  --gp-dim: rgba(141, 171, 255, 0.3);
  --gp-plate: rgba(141, 171, 255, 0.04);
  --gp-hot: #8dabff;
}

@media (min-width: 768px)  { .gpanel { min-height: var(--panel-h-md); } }
@media (min-width: 1120px) { .gpanel { min-height: var(--panel-h-lg); } }

.gpanel > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* A slow drift across the plate. transform only, and it stops on request. */
@media (prefers-reduced-motion: no-preference) {
  .gpanel > svg { animation: gp-drift 26s ease-in-out infinite alternate; }
  .gpanel--b > svg { animation-duration: 34s; animation-direction: alternate-reverse; }
  .gpanel--c > svg { animation-duration: 30s; }
}

@keyframes gp-drift {
  from { transform: scale(1.02) translate3d(-0.8%, 0.6%, 0); }
  to   { transform: scale(1.06) translate3d(1%, -0.9%, 0); }
}

/* --- 22a. The card the panel lives in ------------------------------------ */

.gcard {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: clamp(1.25rem, 2vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--card-face);
  border: 1px solid var(--card-edge);
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.gcard:hover {
  transform: translateY(-3px);
  border-color: var(--card-edge-hot, rgba(141, 171, 255, 0.34));
  box-shadow: var(--shadow-lift);
}

.gcard__k {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.gcard__k::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

.gcard h3 {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: -0.02em;
}

.gcard .gpanel { margin-block: 0.45rem 0.15rem; }
.gcard p { font-size: 0.9375rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .gcard { transition: none; }
  .gpanel > svg { animation: none; }
}

/* --- 22b. The panel inside the service rail ------------------------------ */

.pin-card .gpanel { margin-top: 0.35rem; }

/* --- 22c. The panel inside a process step -------------------------------- */

.proc__panel .gpanel { min-height: clamp(170px, 20vw, 228px); }

@media (min-width: 860px) {
  .proc__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    align-items: start;
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
  }
  .proc__panel > :not(.gpanel) { grid-column: 1; }
  .proc__panel > .gpanel {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    margin: 0;
  }
}

/* ==========================================================================
   23. SECTION-SCALE OBJECTS
   Not backdrops at five per cent — drawings in the content plane, sized so
   they occupy real area. This is what the page was missing: it had plenty of
   atmosphere and almost nothing you could point at.
   ========================================================================== */

/* The contour band. Answers "kontur gecis" literally and reads as
   engineering rather than as a generic dark template. */
.contour-band {
  position: relative;
  width: 100%;
  height: clamp(180px, 26vw, 340px);
  border-radius: var(--r-lg);
  overflow: hidden;
  --gp-stroke: rgba(11, 79, 174, 0.4);
  --gp-hot: rgba(11, 101, 222, 0.75);
}

.contour-band > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.contour-band--dark {
  --gp-stroke: rgba(141, 171, 255, 0.34);
  --gp-hot: rgba(141, 171, 255, 0.7);
  background: #0b1424;
  box-shadow: inset 0 0 0 1px rgba(141, 171, 255, 0.12);
}

/* The monogram at architectural scale, cropped by the section it sits in.
   Highest area-per-byte device available and on-brand by construction. */
.mono-bleed {
  position: absolute;
  top: 50%;
  right: -12%;
  width: 55vw;
  max-width: none;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

@media (max-width: 1023px) { .mono-bleed { display: none; } }

/* The closing wordmark. The reference ends every single one of its pages on
   its own logo at display scale; this costs one asset we already ship. */
.wordmark {
  padding: clamp(2.75rem, 6vw, 5.5rem) var(--gutter) clamp(1.25rem, 2.5vw, 2rem);
}

.wordmark__img {
  width: 100%;
  max-width: none;
  height: auto;
  opacity: 0.9;
}

/* The slow mark behind the footer grid */
.footer__mark {
  position: absolute;
  right: -8%;
  top: -22%;
  width: min(700px, 62vw);
  max-width: none;
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.footer > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .footer__mark { animation: spin 64s linear infinite; }
}

/* ==========================================================================
   24. SUPPORTING LAYOUT
   ========================================================================== */

/* The reference's 5/7 split: a rail that stays occupied for the whole scroll
   beside the column that carries the content. A page with one paragraph
   stops reading as thin when a substantial object sits next to it. */
.rail-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 900px) { .rail-grid { grid-template-columns: 1fr; } }

.rail {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

@media (min-width: 901px) {
  .rail { position: sticky; top: 7rem; }
}

.rail .gpanel { min-height: clamp(200px, 22vw, 280px); }

/* Two graphic panels replacing a wall of prose */
.panel-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.panel-note {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.panel-note h4 { font-size: 1rem; letter-spacing: -0.01em; }
.panel-note p { font-size: 0.9375rem; color: var(--muted); }
.panel-note .gpanel { min-height: clamp(160px, 18vw, 200px); }

/* A stated boundary, drawn rather than bulleted */
.limit {
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.15rem, 2vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
}

.limit h3 { font-size: clamp(1.0625rem, 1.7vw, 1.375rem); letter-spacing: -0.02em; }
.limit p { font-size: 0.9375rem; color: var(--muted); max-width: 46ch; }

.limit__k {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
}

/* The display marquee, promoted from a strip to a section-scale band */
.marquee--band {
  padding-block: clamp(1.5rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
}

.marquee--band .marquee__item {
  font-size: clamp(2.5rem, 9vw, 7rem);
}

/* The defs carrier must never take up layout space */
.gdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The sub-nav dock. Making the dock sticky rather than the nav keeps the
   sticky element a direct child of the tall scope, so it tracks the whole
   service list across both colour slabs instead of only its own wrapper. */
.svc-scope { position: relative; }

.subnav-dock {
  position: sticky;
  top: 5.5rem;
  z-index: 20;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.subnav-dock .subnav {
  position: static;
  margin-bottom: 0;
}

/* ==========================================================================
   HERO — "DESTE" (the deck)
   Append to assets/css/style.css, or drop in as its own sheet after it.

   Depends on tokens/classes that already exist in style.css:
     --bg --ink --muted --accent-2 --line --ease --font-sans --brand-gradient
     .wrap .display .display em .eyebrow .lead .btn .btn--ghost .btn-row
     @keyframes grad-drift
   Depends on the page-level <linearGradient id="brandGrad"> already inlined
   at the top of <body>. Nothing here redeclares it.

   EVERY animation lives inside @media (prefers-reduced-motion: no-preference).
   The un-animated base state is the final, fully legible state, so the hero is
   complete with JS disabled, with CSS animations unsupported, and under
   `reduce`. No JavaScript hooks are used at all.
   ========================================================================== */

/* --- 1. Section shell ---------------------------------------------------- */

.hero--deck {
  --type-w: 52rem;
  --plate-w: clamp(96px, 19vw, 210px);
  --plate-ov: 0.34;                       /* fan overlap, share of plate width */

  padding-block: clamp(2rem, 5vw, 4.25rem) clamp(3rem, 7vw, 6rem);
  min-height: clamp(520px, 78vh, 880px);
  min-height: clamp(520px, 78svh, 880px);
  display: grid;
  align-content: center;
}

.hero2__defs { position: absolute; }

/* --- 2. Background stack -------------------------------------------------- */

.hero--deck .hero2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Two soft brand blooms, deliberately placed under the DECKS and not under the
   type: the plates should read as lit objects, not as text on a wallpaper. */
.hero2__bloom {
  position: absolute;
  width: min(46rem, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.42;
  will-change: transform;
}

.hero2__bloom--l {
  left: -16rem;
  top: -12rem;
  background: radial-gradient(circle closest-side, #0b65de 0%, rgba(11, 101, 222, 0) 72%);
}

.hero2__bloom--r {
  right: -18rem;
  bottom: -14rem;
  background: radial-gradient(circle closest-side, #5b90f2 0%, rgba(91, 144, 242, 0) 70%);
}

/* Fine dot field, masked to a halo so it never sits behind the headline. */
.hero2__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(141, 171, 255, 0.17) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(112% 80% at 50% 40%, transparent 6%, #000 44%, transparent 88%);
          mask-image: radial-gradient(112% 80% at 50% 40%, transparent 6%, #000 44%, transparent 88%);
}

.hero2__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(122% 86% at 50% 32%, transparent 36%, rgba(4, 8, 16, 0.62) 100%),
    linear-gradient(180deg, rgba(7, 12, 22, 0.5) 0%, transparent 22%, transparent 70%, var(--bg) 100%);
}

/* Film grain. Rendered once from a 700x700 turbulence tile and scaled to cover
   (`xMidYMid slice`), so the filter computes ~490k pixels regardless of
   viewport size and the noise never stretches into streaks. Static — no
   animated baseFrequency. Sits above the deck and below the type. */
.hero--deck .hero2__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- 3. The deck --------------------------------------------------------- */

.hero--deck .hero2__decks {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
  pointer-events: none;
}

.hero2__deck { display: flex; }

.hero2-plate {
  width: var(--plate-w);
  flex: 0 0 auto;
  transform: rotate(var(--rot, 0deg));
}

.hero2-plate--a { --rot: -11deg; --float: 12s;   }
.hero2-plate--b { --rot:  -4deg; --float: 9.5s;  }
.hero2-plate--c { --rot:   5deg; --float: 13s;   }
.hero2-plate--d { --rot:  12deg; --float: 10.5s; }

.hero2-plate__inner {
  border-radius: 18px;
  overflow: hidden;
  background: #0a1120;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 10px rgba(0, 0, 0, 0.42),
    0 26px 50px -20px rgba(0, 0, 0, 0.8);
}

.hero2-plate__art {
  position: relative;
  aspect-ratio: 300 / 340;
}

.hero2-plate__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero2-plate__art--ramp {
  background: linear-gradient(142deg,
    #0b65de 0%, #176be1 20%, #2774e5 45%, #5b90f2 72%, #8dabff 100%);
  background-size: 240% 240%;
}

.hero2-plate__cap {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55rem 0.62rem;
  background: #0b1220;                       /* solid: guarantees label contrast */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-sans);
  font-size: clamp(0.5rem, 1.05vw + 0.28rem, 0.6875rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}

.hero2-plate__n { color: var(--accent-2); }

.hero2-ring {
  opacity: 0.42;
  transform-box: fill-box;
  transform-origin: center;
}

/* The tracer dot rides the inner ring via a motion path; browsers without
   offset-path (and reduced-motion users) simply never see it. */
.hp-tracer { display: none; }

/* Fan overlap — only while the deck is a single row above the type. */
@media (max-width: 1179px) {
  .hero2__deck--r { margin-inline-start: calc(var(--plate-w) * var(--plate-ov) * -1); }
  .hero2-plate + .hero2-plate { margin-inline-start: calc(var(--plate-w) * var(--plate-ov) * -1); }
}

/* --- 4. Type ------------------------------------------------------------- */

.hero--deck .hero2__wrap { position: relative; z-index: 3; }

.hero--deck .hero2__type {
  max-width: var(--type-w);
  margin-inline: auto;
  text-align: center;
}

.hero--deck .hero2__title {
  font-size: clamp(2.05rem, 8.2vw, 6.5rem);
  line-height: 0.98;
  margin: clamp(1rem, 2.2vw, 1.6rem) 0 clamp(1.25rem, 2.4vw, 1.85rem);
}

.hero2__w { display: inline-block; }

.hero--deck .hero2__lead {
  max-width: 58ch;
  margin-inline: auto;
}

.hero--deck .hero2__cta {
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* .btn--ghost's default rgba(255,255,255,.11) boundary is 1.30:1 on the navy,
   which fails WCAG 1.4.11. This raises it to 3.37:1. */
.hero--deck .hero2__ghost { border-color: rgba(141, 171, 255, 0.55); }

.hero--deck .hero2__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 4;
  background: var(--brand-gradient);
  background-size: 260% 100%;
  opacity: 0.55;
  pointer-events: none;
}

/* --- 5. Desktop scatter --------------------------------------------------
   The deck stops being a row and becomes two absolutely positioned bands, one
   either side of the type column. Each band is exactly the leftover space,
   so a plate can never land on a glyph. */

@media (min-width: 1180px) {
  .hero--deck {
    --type-w: clamp(680px, 60vw, 980px);
    --plate-w: clamp(160px, 15.5vw, 232px);
    min-height: clamp(620px, 84vh, 880px);
    min-height: clamp(620px, 84svh, 880px);
  }

  .hero--deck .hero2__decks {
    position: absolute;
    inset: 0;
    margin: 0;
    display: block;
  }

  .hero2__deck {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - var(--type-w)) / 2);
  }

  .hero2__deck--l { left: 0; }
  .hero2__deck--r { right: 0; }

  .hero2-plate { position: absolute; }

  /* The two outer plates bleed off the viewport on a diagonal — top-left and
     bottom-right — so the crop reads as a poster decision rather than a
     miscalculation. .hero's `overflow: clip` absorbs them without a scrollbar.
     The two inner plates stay fully on screen and never reach the glyph box. */
  /* Top values keep the upper plates clear of the sticky nav pill and the
     lower plates clear of the section's bottom edge. */
  .hero2-plate--a { left:  -4%; top:  6%; }
  .hero2-plate--b { right: -5%; top: 48%; }
  .hero2-plate--c { left:  -5%; top:  5%; }
  .hero2-plate--d { right: -4%; top: 46%; }
}

/* --- 6. Motion -----------------------------------------------------------
   Load choreography, in order:
     0.06s  eyebrow rises
     0.10s  headline words wipe in, 90ms apart
     0.55s  plates drop from above the fold, 130ms apart
     0.62s  lead rises
     0.76s  CTAs rise
     2.40s  plates begin their idle float
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

  /* 6a. Headline — per-word mask wipe. */
  .hero--deck .hero2__w {
    -webkit-mask-image: linear-gradient(90deg, #000 33.3%, transparent 66.6%);
            mask-image: linear-gradient(90deg, #000 33.3%, transparent 66.6%);
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation: hero2-wipe 0.95s cubic-bezier(0.6, 0, 0.2, 1) both;
  }

  .hero--deck .hero2__w:nth-of-type(1) { animation-delay: 0.10s; }
  .hero--deck .hero2__w:nth-of-type(2) { animation-delay: 0.19s; }
  .hero--deck .hero2__w:nth-of-type(3) { animation-delay: 0.28s; }
  .hero--deck .hero2__w:nth-of-type(4) { animation-delay: 0.37s; }
  .hero--deck .hero2__w:nth-of-type(5) { animation-delay: 0.46s; }

  /* 6b. Everything else in the type column — the project's blur-defocus. */
  .hero--deck .hero2__rise { animation: hero2-rise 0.85s var(--ease) both; }
  .hero--deck .hero2__eyebrow { animation-delay: 0.06s; }
  .hero--deck .hero2__lead    { animation-delay: 0.62s; }
  .hero--deck .hero2__cta     { animation-delay: 0.76s; }

  /* 6c. The drop. Outer element does the fall + landing angle, inner does the
         idle float, so the two transforms never fight. */
  .hero--deck .hero2-plate {
    animation: hero2-drop 1.05s cubic-bezier(0.2, 0.72, 0.24, 1) both;
  }

  .hero--deck .hero2-plate--a { animation-delay: 0.55s; }
  .hero--deck .hero2-plate--b { animation-delay: 0.68s; }
  .hero--deck .hero2-plate--c { animation-delay: 0.81s; }
  .hero--deck .hero2-plate--d { animation-delay: 0.94s; }

  .hero--deck .hero2-plate__inner {
    animation: hero2-float var(--float, 11s) ease-in-out 2.4s infinite alternate both;
    will-change: transform;
  }

  /* 6d. Living colour inside the plates. */
  .hero--deck .hero2-plate__art--ramp { animation: grad-drift 18s ease-in-out infinite; }

  .hero--deck .hero2-ring { animation: hero2-ripple 4.6s ease-in-out infinite backwards; }
  .hero--deck .hero2-ring:nth-child(1) { animation-delay: 0s;    }
  .hero--deck .hero2-ring:nth-child(2) { animation-delay: 0.26s; }
  .hero--deck .hero2-ring:nth-child(3) { animation-delay: 0.52s; }
  .hero--deck .hero2-ring:nth-child(4) { animation-delay: 0.78s; }
  .hero--deck .hero2-ring:nth-child(5) { animation-delay: 1.04s; }
  .hero--deck .hero2-ring:nth-child(6) { animation-delay: 1.30s; }

  /* 6e. Ambient. */
  .hero--deck .hero2__bloom--l { animation: hero2-bloom 30s ease-in-out infinite alternate; }
  .hero--deck .hero2__bloom--r { animation: hero2-bloom 38s ease-in-out infinite alternate-reverse; }
  .hero--deck .hero2__rule     { animation: grad-drift 20s ease-in-out infinite; }

  /* 6f. Artwork inside the plates. Everything here lives in the light DOM of
     each plate's inline SVG, so plain CSS animation reaches it. */

  /* 01 — monogram: marching dashes along the stroked echo, a breathing glow,
     and four drifting motes. */
  .hero--deck .hp-echo {
    stroke-dasharray: 16 12;
    animation: hp-dash-echo 7s linear infinite;
  }

  .hero--deck .hp-breathe {
    transform-box: fill-box;
    transform-origin: center;
    animation: hp-breathe 9s ease-in-out infinite alternate;
  }

  .hero--deck .hp-mote {
    transform-box: fill-box;
    transform-origin: center;
    animation: hp-mote var(--mote-dur, 8s) ease-in-out var(--mote-delay, 0s) infinite alternate;
  }

  .hero--deck .hp-mote--2 { --mote-dur: 10.5s; --mote-delay: -3s;   }
  .hero--deck .hp-mote--3 { --mote-dur: 9s;    --mote-delay: -5.2s; }
  .hero--deck .hp-mote--4 { --mote-dur: 11.5s; --mote-delay: -1.6s; }

  /* 02 — ramp: the two discs orbit the plate centre in opposite directions,
     the hairline ring spins its dashes, the dark wedge drifts. */
  .hero--deck .hp-orbiter {
    transform-origin: 150px 158px;
    animation: hp-spin 26s linear infinite;
  }

  .hero--deck .hp-orbiter--rev { animation: hp-spin 34s linear infinite reverse; }

  .hero--deck .hp-ring-dash {
    stroke-dasharray: 3 9;
    transform-origin: 150px 158px;
    animation: hp-spin 70s linear infinite;
  }

  .hero--deck .hp-wedge { animation: hp-wedge 12s ease-in-out infinite alternate; }

  /* 03 — rings: the corner shard shimmers; the tracer dot walks the inner
     ring. Gated on offset-path so unsupporting browsers keep a clean plate. */
  .hero--deck .hp-shard { animation: hp-shard 7s ease-in-out infinite; }

  @supports (offset-path: path("M0 0H10")) {
    .hero--deck .hp-tracer {
      display: block;
      offset-path: path("M126 126 H174 V214 H126 Z");
      offset-rotate: 0deg;
      animation: hp-trace 10s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
  }

  /* 04 — wordmark: dashes flow along the stroked TAY, NIS breathes, and a
     skewed sheen sweeps the plate. */
  .hero--deck .hp-tay {
    stroke-dasharray: 10 6;
    animation: hp-dash-tay 8s linear infinite;
  }

  .hero--deck .hp-nis { animation: hp-nis 7s ease-in-out infinite alternate; }
  .hero--deck .hp-band { animation: hp-band 11s ease-in-out infinite alternate; }
  .hero--deck .hp-sheen { animation: hp-sheen 8.5s cubic-bezier(0.55, 0, 0.45, 1) infinite; }

  /* 6g. Pointer parallax. main.js feeds --hx/--hy in [-1, 1]; the two decks
     and the blooms answer at different depths. `translate` composes with the
     transform-based drop/float animations instead of fighting them. */
  .hero--deck .hero2__deck--l,
  .hero--deck .hero2__deck--r,
  .hero--deck .hero2__bloom {
    transition: translate 0.7s var(--ease);
  }

  .hero--deck .hero2__deck--l { translate: calc(var(--hx, 0) * -14px) calc(var(--hy, 0) * -10px); }
  .hero--deck .hero2__deck--r { translate: calc(var(--hx, 0) * 14px) calc(var(--hy, 0) * 10px); }
  .hero--deck .hero2__bloom--l { translate: calc(var(--hx, 0) * 26px) calc(var(--hy, 0) * 18px); }
  .hero--deck .hero2__bloom--r { translate: calc(var(--hx, 0) * -26px) calc(var(--hy, 0) * -18px); }
}

@keyframes hero2-wipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0;    }
}

@keyframes hero2-rise {
  from { opacity: 0; filter: blur(9px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}

@keyframes hero2-drop {
  from { opacity: 0; transform: translate3d(0, -62vh, 0) rotate(0deg) scale(0.92); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scale(1); }
}

@keyframes hero2-float {
  from { transform: translate3d(0, -6px, 0) rotate(-0.7deg); }
  to   { transform: translate3d(0,  7px, 0) rotate(0.8deg);  }
}

@keyframes hero2-ripple {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  45%      { opacity: 0.62; transform: scale(1.04); }
}

@keyframes hero2-bloom {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -5%, 0) scale(1.14); }
}

/* Plate-art keyframes. Dash offsets are exact multiples of each dash period
   (echo: 16+12=28, tay: 10+6=16) so every loop wraps without a visible seam. */
@keyframes hp-dash-echo { to { stroke-dashoffset: -56; } }
@keyframes hp-dash-tay  { to { stroke-dashoffset: -48; } }

@keyframes hp-breathe {
  from { opacity: 0.72; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.06); }
}

@keyframes hp-mote {
  from { opacity: 0.25; transform: translate3d(0, 5px, 0); }
  50%  { opacity: 0.9; }
  to   { opacity: 0.3;  transform: translate3d(0, -6px, 0); }
}

@keyframes hp-spin { to { transform: rotate(360deg); } }

@keyframes hp-wedge {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 9px, 0); }
}

@keyframes hp-shard {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.55; }
}

@keyframes hp-trace {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@keyframes hp-nis {
  from { fill-opacity: 0.92; }
  to   { fill-opacity: 0.6; }
}

@keyframes hp-band {
  from { opacity: 1; }
  to   { opacity: 0.55; }
}

@keyframes hp-sheen {
  0%   { transform: translateX(0); }
  55%  { transform: translateX(560px); }
  100% { transform: translateX(560px); }
}

/* Belt and braces: nothing above should reach here, but if a future edit moves
   an animation out of the no-preference block, this still stops it without
   destroying the resting rotations. */
@media (prefers-reduced-motion: reduce) {
  .hero--deck *,
  .hero--deck *::before,
  .hero--deck *::after { animation: none !important; }

  .hero--deck .hero2-plate { opacity: 1; transform: rotate(var(--rot, 0deg)); }
  .hero--deck .hero2-plate__inner { transform: none; }

  .hero--deck .hero2__w {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .hero--deck .hero2__rise {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* ==========================================================================
   27. SECTION-OBJECT MOTION
   The drawings owned by sections (not cards): the architectural monogram in
   Sınırlar and the two contour bands. SMIL inside the symbols carries their
   internal motion; this layer adds whole-object drift.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .mono-bleed { animation: mono-drift 30s ease-in-out infinite alternate; }
}

@keyframes mono-drift {
  from { transform: translateY(-52%) rotate(-1deg); }
  to   { transform: translateY(-48%) rotate(1.2deg); }
}

/* Scroll-driven counter-drift for the contour bands. Pure enhancement: the
   band is already alive via its internal SMIL, so browsers without scroll
   timelines lose nothing. `scale`/`translate` compose with (and never touch)
   the transform property. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .contour-band > svg {
      scale: 1.18;
      animation: band-parallax linear both;
      animation-timeline: view();
    }
  }
}

@keyframes band-parallax {
  from { translate: 0 5%; }
  to   { translate: 0 -5%; }
}

/* ==========================================================================
   Presentation language (taynis Creative Sunum)
   The glowing TN cover, vertical colour stripes, notched numbered cards, the
   gradient orb and real project work, all taken from the company deck.
   ========================================================================== */

.mix { font-weight: 300; letter-spacing: -0.04em; }
.mix strong { font-weight: 700; }

/* Vertical colour columns fading out of a corner. --tab tints them per client. */
.stripes {
  --stripe: var(--tab, #1f7bff);
  --col: clamp(56px, 6.6vw, 96px);
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  transition: --stripe 0.5s var(--ease);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 2px, transparent 2px var(--col)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 var(--col), transparent var(--col) calc(var(--col) * 2)),
    linear-gradient(180deg, var(--stripe), transparent 62%);
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 92%), linear-gradient(180deg, #000 0, transparent 46%);
  mask-image: linear-gradient(90deg, transparent 34%, #000 92%), linear-gradient(180deg, #000 0, transparent 46%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0.7;
}

.stripes--dark { opacity: 0.32; }
.cta > .stripes { position: absolute; z-index: 0; border-radius: inherit; opacity: 0.45; }

/* Hero: the deck's cover. */
.hero--cover {
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
    padding-block: 8rem clamp(3rem, 7vh, 5.5rem);
  background: #01030b;
}

.cover__art {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: translateX(15%) scale(1.04);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 42%);
}

.cover__wrap { position: relative; width: 100%; }
.cover__title { max-width: 14ch; font-size: clamp(2.75rem, 6.6vw, 6.25rem); line-height: 1.02; margin-block: 1.25rem 1.5rem; }
.cover__title strong { white-space: nowrap; }
.cover__lead { max-width: 34rem; }
.cover__cta { margin-top: 2rem; }

@media (prefers-reduced-motion: no-preference) {
  .cover__art { animation: cover-in 1.6s var(--ease) both, cover-breathe 7s ease-in-out 1.6s infinite alternate; }
  @keyframes cover-in { from { opacity: 0; transform: translateX(15%) scale(1.1); } to { opacity: 1; transform: translateX(15%) scale(1.04); } }
  @keyframes cover-breathe { from { filter: brightness(1) saturate(1); } to { filter: brightness(1.28) saturate(1.2); } }
}

@media (max-width: 800px) {
  .cover__art {
    height: 58%;
    transform: none;
    object-position: 58% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
    mask-image: linear-gradient(180deg, #000 58%, transparent);
  }
  @keyframes cover-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
  .hero--cover { padding-top: 46vh; padding-top: 46svh; }
  .cover__title strong { white-space: normal; }
}

/* Inner page heads: the deck's closing blue. */
.page-head:not(.page-head--light) {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    linear-gradient(90deg, #01030b 30%, rgba(1, 3, 11, 0.55) 58%, rgba(1, 3, 11, 0) 80%),
    url("../sunum/tn-glow.webp") right -4rem center / auto 165% no-repeat,
    #01030b;
}

.page-head > .silk { display: none; }


/* Numbered service cards with the cut corner. Sized by --notch so the mask and
   the drawn diagonal stay in step. */
.pin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.4vw, 1.25rem);
}

@media (max-width: 1040px) { .pin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pin { grid-template-columns: 1fr; } }

.pin .pin__card { position: static; top: auto; margin: 0; padding: 0; height: auto; min-height: 0; transform: none; }

.pin .pin-card {
  --notch: 48px;
  --edge: linear-gradient(145deg, #0a2a8f, #0b65de 45%, #7ee8ff);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  min-height: 25rem;
  padding: 1.75rem 1.75rem 3rem;
  border: 1.5px solid transparent;
  border-radius: 22px;
  background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
  box-shadow: none;
  color: #0a1220;
  -webkit-mask-image: linear-gradient(-45deg, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
  mask-image: linear-gradient(-45deg, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.pin .pin-card::before { display: none; }

/* The diagonal edge the mask would otherwise leave open. */
.pin .pin-card::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(-45deg, transparent var(--notch), #38bdf8 var(--notch), #38bdf8 calc(var(--notch) + 1.5px), transparent calc(var(--notch) + 1.5px));
  -webkit-text-stroke: 0;
  pointer-events: none;
}

.pin .pin-card .svc__num { margin: 0; font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: inherit; }
.pin .pin-card .t-h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: inherit; }
.pin .pin-card__title { margin-top: auto; }
.pin .pin-card .gpanel { display: none; }
.pin .pin-card .body-muted { font-size: 0.9375rem; line-height: 1.5; color: inherit; opacity: 0.8; }
.pin .pin-card .tags { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; }
.pin .pin-card .tag { padding: 0; border: 0; background: none; font-size: 0.8125rem; color: inherit; opacity: 0.72; }

.pin .pin-card:hover,
.pin:not(:hover) .pin__card:first-child .pin-card {
  background: linear-gradient(180deg, #00a2ff 0%, #0a4ee0 48%, #0b0f1c 100%) padding-box, linear-gradient(180deg, #00a2ff, #0b0f1c) border-box;
  color: #fff;
}

.pin .pin-card:hover::after,
.pin:not(:hover) .pin__card:first-child .pin-card::after { opacity: 0; }

/* Gradient orb from the deck's corner arrow. */
.orb {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 15% 25%, #00a2ff, #0a4ee0 50%, #070b18 100%);
  color: #fff;
  transition: rotate 0.35s var(--ease);
}

.orb svg { width: 20px; height: 20px; rotate: -90deg; }
.orb-link { display: inline-flex; align-items: center; gap: 1rem; margin-top: 2rem; font-weight: 600; color: inherit; text-decoration: none; }
.orb-link:hover .orb { rotate: 45deg; }

/* Client tabs. Without JS every panel is simply listed. */
.tabs { display: grid; gap: 1.5rem; }

.tabs__list {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__btn {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.tabs__btn:hover { border-color: var(--ink); }
.tabs__btn[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.tabs__panel { display: grid; gap: clamp(0.6rem, 1vw, 0.85rem); min-width: 0; }
.tabs__panel:focus { outline: none; }
.tabs.is-tabbed .tabs__panel[hidden] { display: none; }
.tabs.is-tabbed .tabs__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabs__name { margin: 1rem 0 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.tabs__name span { font-size: 0.9375rem; font-weight: 400; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .tabs.is-tabbed .tabs__panel:not([hidden]) { animation: tab-in 0.5s var(--ease) both; }
  @keyframes tab-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Brand boards */
.brand__cover { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-lg); }

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 27vw, 400px);
  gap: clamp(0.6rem, 1vw, 0.85rem);
}

.bento__i { grid-column: span var(--c); margin: 0; overflow: hidden; border-radius: var(--r-md); background: #0b1424; }
.bento__i img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.7s var(--ease); }
.bento__i:hover img { scale: 1.04; }

@media (max-width: 800px) {
  .bento { grid-auto-rows: 44vw; }
  .bento__i { grid-column: span 6; }
  .bento__i:first-child { grid-column: 1 / -1; grid-row: span 1; }
  .brand__cover { aspect-ratio: 16 / 9; }
}

/* The deck's black-to-cyan rule on quoted statements. */
.problem__item { border-image: linear-gradient(180deg, #0b0f1c, #0a4ee0 55%, #19e3ff) 1; }

/* Registered so the stripes can fade from one client's colour to the next. */
@property --stripe { syntax: "<color>"; inherits: true; initial-value: #1f7bff; }

/* Abstract panels gave way to real work. */
.gpanel { display: none; }

.page-head .lead,
.page-head .body-muted { color: rgba(255, 255, 255, 0.9); }
.page-head:not(.page-head--light) .display em { background: none; color: #9fd2ff; -webkit-text-fill-color: #9fd2ff; }


.bento__i--paper { background: linear-gradient(135deg, #fff 45%, #ffc21a); }

/* The cut edge is drawn in the card's own background: the pseudo-element route
   lost to older rules on the same element. */
.pin .pin-card::after { display: none; }
.pin .pin-card:not(:hover) {
  background:
    linear-gradient(-45deg, transparent var(--notch), #38bdf8 var(--notch), #0b65de calc(var(--notch) + 1.5px), transparent calc(var(--notch) + 1.5px)) border-box,
    linear-gradient(#fff, #fff) padding-box,
    var(--edge) border-box;
}
.pin:not(:hover) .pin__card:first-child .pin-card:not(:hover) {
  background: linear-gradient(180deg, #00a2ff 0%, #0a4ee0 48%, #0b0f1c 100%) padding-box, linear-gradient(180deg, #00a2ff, #0b0f1c) border-box;
}

/* Post stage: one post faces the visitor, the rest recede in depth. Without JS
   the list is a plain scrolling row of posts with captions. */
.pstage { overflow: clip; isolation: isolate; }

.pstage__ambient {
  position: absolute;
  z-index: -2;
  inset: 15% 15% 5%;
  width: 70%;
  height: 80%;
  object-fit: cover;
  filter: blur(90px) saturate(1.5);
  opacity: 0.5;
  pointer-events: none;
}

.pstage__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.pstage__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pstage__chips[hidden] { display: none; }

.pstage__chips button {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.pstage__chips button:hover { border-color: rgba(255, 255, 255, 0.5); }
.pstage__chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #0a1220; }

.pstage__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 26vw, 380px);
  gap: 1rem;
  margin: 0;
  padding: 0 1rem 1rem;
  overflow-x: auto;
  list-style: none;
}

.pstage__i { min-width: 0; }
.pstage__i img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.pstage__i p { margin: 0.6rem 0 0; max-width: none; font-size: 0.875rem; color: var(--muted); }
.pstage__i strong { color: var(--ink); font-weight: 600; }

.pstage__list.is-live {
  --h: clamp(420px, 76vh, 780px);
  position: relative;
  display: block;
  height: var(--h);
  padding: 0;
  overflow: visible;
  perspective: 1800px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.pstage__list.is-live:focus-visible { outline: none; }
.pstage__list.is-live.is-dragging { cursor: grabbing; }

.pstage__list.is-live .pstage__i {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--h) * 0.8);
  height: var(--h);
  transition: transform 0.75s var(--ease), opacity 0.6s var(--ease), filter 0.6s var(--ease);
  will-change: transform;
}

.pstage__list.is-live .pstage__i:not(.is-current) { cursor: pointer; }
.pstage__list.is-live .pstage__i[hidden] { display: none; }
.pstage__list.is-live .pstage__i p { display: none; }
.pstage__list.is-live .pstage__i img { height: 100%; border-radius: 22px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95); -webkit-user-drag: none; }
.pstage__list.is-live .pstage__i.is-current img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 60px 120px -40px var(--tint, #000); }

.pstage__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.pstage__bar[hidden] { display: none; }
.pstage__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.85rem; margin: 0; max-width: none; }
.pstage__now b { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 400; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.pstage__now strong { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pstage__now span { font-size: 0.9375rem; color: var(--muted); }
.pstage__nav { display: flex; flex: none; gap: 0.4rem; }

@media (max-width: 700px) {
  .pstage__list.is-live { --h: min(100vw, 72vh); }
}

@media (prefers-reduced-motion: reduce) {
  .pstage__list.is-live .pstage__i { transition: none; }
}


/* Items that open with a bold lead-in read as a sentence, not two columns. */
.checklist li:has(> strong) { display: block; position: relative; padding-left: 1.6rem; }
.checklist li:has(> strong)::before { position: absolute; left: 0; top: 0.25em; }

.pin + .orb-link { margin-bottom: 0; }

/* Inner page heads: Sora runs wider than the old display face. */
.page-head .t-hero { font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1.05; }

/* Services: the deck's overview, then one chapter per service with real work
   at full size. The long detail folds away. */
.svc-intro { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.svc-intro .lead { max-width: 44rem; }
.pin--nav { margin-bottom: clamp(3rem, 7vw, 6rem); }
.pin--nav .pin__card { display: block; color: inherit; text-decoration: none; }
.pin--nav .pin-card { min-height: 17rem; }

.svc-block {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
  scroll-margin-top: 6rem;
}

#social-content .svc-block__aside,
#performance .svc-block__aside,
#production .svc-block__aside { order: 2; }

.svc-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--r-lg);
  box-shadow: 0 34px 70px -38px rgba(10, 18, 32, 0.75);
}

.svc-block__main { gap: 1.25rem; }
.svc-block__title { display: grid; gap: 0.6rem; }
.svc-block__title h2 { font-size: clamp(1.875rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; }
.svc-block__title .num { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--accent-ink); }

.svc-more { border-top: 1px solid var(--line); }
.svc-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.svc-more summary::-webkit-details-marker { display: none; }
.svc-more summary::after { content: "+"; font-size: 1.5rem; font-weight: 300; line-height: 1; }
.svc-more[open] summary::after { content: "–"; }
.svc-more__body { display: grid; gap: 1.5rem; padding-bottom: 1.25rem; }

@media (max-width: 900px) {
  .svc-block { grid-template-columns: 1fr; }
  #social-content .svc-block__aside,
  #performance .svc-block__aside,
  #production .svc-block__aside { order: 0; }
}

/* Contact: the form is the page's object, on a plain white sheet. */
.contact-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-grid > .lf-shell { order: 2; padding: clamp(1.5rem, 3.5vw, 3rem); border-radius: var(--r-lg); background: #fff; box-shadow: 0 30px 70px -44px rgba(10, 18, 32, 0.55); }
.contact-side { display: grid; gap: 1.5rem; }
.contact-side__title { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
.contact-side__sub { margin: 0.75rem 0 0; font-size: 1.0625rem; font-weight: 600; }
.contact-side .contact-list dd { font-size: 1.125rem; }

.contact-steps { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.contact-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); counter-increment: s; }
.contact-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; color: var(--accent-ink); }

@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid > .lf-shell { order: 0; }
}

/* Hero opens on the headline now that the tagline above it is gone. */
.cover__title { margin-top: 0; }

/* About: the deck's "Biz Kimiz?" slide, nothing more. */
.about { padding-block: clamp(3rem, 7vw, 6rem); }
.about__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 2rem; align-items: center; }
.about__title { margin: 0 0 1.25rem; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1.05; }
.about__lead { max-width: 40rem; color: var(--ink); }
.about__mark { display: block; width: 100%; max-width: 380px; height: auto; margin-left: auto; }

.about__note {
  position: relative;
  margin-block: clamp(2rem, 5vw, 3.5rem);
  margin-left: clamp(0rem, 14vw, 13rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) calc(clamp(1.5rem, 3vw, 2.5rem) + 12px);
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
}

.about__note::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: linear-gradient(180deg, #0b0f1c, #0a4ee0 58%, #19e3ff);
}

.about__note p { max-width: 62ch; margin: 0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.65; color: var(--ink); }
.about__note .about__point { margin-top: 1.25rem; font-size: 1rem; color: var(--muted); }

.about-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.about-work__i { display: grid; gap: 0.6rem; color: inherit; font-weight: 600; text-decoration: none; }
.about-work__i img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); transition: scale 0.5s var(--ease); }
.about-work__i:hover img { scale: 1.02; }

@media (max-width: 760px) {
  .about__head { grid-template-columns: 1fr; }
  .about__mark { order: -1; max-width: 200px; margin-left: 0; }
  .about__note { margin-left: 0; }
  .about-work { grid-template-columns: 1fr; }
}

/* The first section runs up behind the floating menu, so no page shows a strip
   of bare background above it. */
:root { --nav-pull: 59px; }
@media (max-width: 900px) { :root { --nav-pull: 60px; } }
main > section:first-child { margin-top: calc(var(--nav-pull) * -1); }
.page-head:not(.page-head--light) { padding-top: calc(var(--nav-pull) + clamp(3rem, 6vw, 5rem)); }
.about { padding-top: calc(var(--nav-pull) + clamp(3rem, 6vw, 5rem)); }

@media (max-width: 800px) {
  .page-head:not(.page-head--light) {
    background:
      linear-gradient(180deg, rgba(1, 3, 11, 0.55), rgba(1, 3, 11, 0.8)),
      url("../sunum/tn-glow.webp") 62% center / auto 125% no-repeat,
      #01030b;
  }
}

/* Fits under the floating menu with the whole browser frame in view. */
.viewer__screen { max-height: calc(100vh - 13rem); max-height: calc(100svh - 13rem); }
.viewer:fullscreen .viewer__screen { max-height: none; }
/* A live site fills the screen, so the preview must not show around it. */
.viewer__screen.is-open:not(.is-phone) .viewer__poster { visibility: hidden; }
.about-work__i img { aspect-ratio: 16 / 10; object-position: top; }

/* Short silent cuts from client films. */
.reels__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.reels__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); align-items: start; }
.reels__grid > .reel:first-child { grid-column: 1 / -1; }
.reel { position: relative; display: grid; gap: 0.7rem; margin: 0; }
.reel video { display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: #01030b; }
.reel figcaption { font-size: 0.9375rem; color: var(--muted); }
.reel figcaption strong { margin-right: 0.35rem; font-weight: 600; color: var(--ink); }
.reel__toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(1, 3, 11, 0.62);
  color: #fff;
  cursor: pointer;
}
.reel__toggle[hidden] { display: none; }
.reel__toggle svg { width: 1rem; height: 1rem; }
.reel__play { display: none; }
.reel.is-stopped .reel__play { display: block; }
.reel.is-stopped .reel__pause { display: none; }

@media (max-width: 700px) {
  .reels__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pages without a hero open straight on their content, under the floating menu. */
.page-first { padding-top: calc(var(--nav-pull) + clamp(3rem, 6vw, 5rem)); }

/* WhatsApp: fixed in the corner, in the brand's orb gradient, under the open menu. */
.wa-fab {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 15% 25%, #00a2ff, #0a4ee0 55%, #0b2a8f 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 14px 30px -8px rgba(10, 78, 224, 0.7);
  transition: scale 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wa-fab svg { width: 1.75rem; height: 1.75rem; }
.wa-fab:hover { scale: 1.07; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34), 0 18px 36px -8px rgba(10, 78, 224, 0.85); }
.wa-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } .wa-fab:hover { scale: 1; } }
@media print { .wa-fab { display: none; } }

/* Legal pages: a side list of the four documents and a readable column. */
.legal__date { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.legal { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.legal__nav { position: sticky; top: 7rem; display: grid; gap: 0.25rem; }
.legal__nav a { padding: 0.6rem 0.85rem; border-radius: var(--r-md); color: var(--muted); font-weight: 500; text-decoration: none; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.legal__nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.legal__nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: #fff; }
.legal__copy { max-width: 46rem; color: var(--ink); }
.legal__copy h2 { margin: 2.5rem 0 0.85rem; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; }
.legal__copy h2:first-child { margin-top: 0; }
.legal__copy p, .legal__copy li { font-size: 1rem; line-height: 1.75; }
.legal__copy p { margin: 0 0 1rem; }
.legal__copy ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.legal__copy a:not(.link-arrow) { text-decoration: underline; text-underline-offset: 3px; }
.legal__note { padding: 0.9rem 1.1rem; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, 0.7); border-radius: 0 var(--r-md) var(--r-md) 0; }

@media (max-width: 800px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__nav { position: static; display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .legal__nav a { padding: 0.45rem 0.8rem; border: 1px solid var(--line); }
}