/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --black: #000;
  --ink: #f2f2f2;
  --white: #fff;
  --muted: #c5c4c4;
  --line: #eaeaea;

  --red: #650707;      /* panels, hero */
  --red-deep: #730404; /* accent */
  --red-btn: #710101;  /* header CTA */
  --red-burger: #950f0f;
  --red-bright: #e04242;
  --coal: #101010;
  --coal-2: #181818;
  --field: #242424;

  --font-body: "Prompt", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-serif: "Alegreya", Georgia, "Times New Roman", serif;

  --container: 1140px;
  --gutter: 20px;
  --header-h: 140px;
  --header-h-tight: 84px;
  --header-shadow: 0 43px 100px 59px rgba(0, 0, 0, 0.72);

  /* 4px base. Named for the job, not the number. */
  --gap-hair: 4px;
  --gap-tight: 12px;
  --gap-item: 20px;
  --gap-block: 34px;
  --gap-group: 56px;
  --gap-section: 100px;
  --gap-chapter: 180px;
  /* Multiplies the homepage's WordPress section spacing (home.mjs); smaller on phones. */
  --pad-scale: 1;

  /* Reading measures. Serif carries a longer line than sans. */
  --measure-serif: 68ch;
  --measure-sans: 62ch;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* No rubber band up or down: pulling past either end showed whatever sits
   outside the page. Only the y axis — horizontal overscroll stays on, so a
   two-finger swipe still goes back and forward. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior-y: none; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font: 400 16px/1.9 var(--font-body);
  overflow-x: hidden;
}

/* Text can't be selected and images can't be dragged or long-pressed out
   (right-click is off in site.js) — the client's call. Form fields stay
   selectable, or nobody could correct what they typed. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, video { -webkit-user-drag: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red-bright); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
}
h1 { font-size: clamp(25px, 3.4vw, 35px); line-height: 1.05; font-weight: 600; letter-spacing: -0.062em; }
h2 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.1; font-weight: 600; }
h3 { font-size: 1.6rem; line-height: 1.5; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
sub, sup { font-size: 0.7em; }

:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }

/* Clipped to nothing until it has focus. Not parked off-screen: -9999px to the
   left made the Arabic pages 10,000px wide, and parked just above the page it
   showed as a white bar whenever the page was pulled down. */
.skip-link {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 10000;
  background: var(--white); color: var(--red); padding: 12px 20px;
}
.skip-link:not(:focus) {
  width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

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

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1400px; }

/* ==========================================================================
   Icons
   ========================================================================== */
.icon {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.125em;
  fill: currentColor; flex: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; line-height: 1;
  border: 0; cursor: pointer; text-align: center;
  transition: background-color 0.2s, color 0.2s;
}
.btn--pill {
  background: var(--white); color: var(--red-deep);
  border-radius: 100px; padding: 23px 50px;
}
.btn--pill:hover { background: var(--red-deep); color: var(--white); }

.btn--header {
  background: var(--red-btn); color: var(--white);
  border-radius: 20px; padding: 10px 20px; font-size: 1.1rem;
}
.btn--header:hover { background: var(--red-bright); color: var(--white); }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  position: relative; z-index: 999;
  box-shadow: var(--header-shadow);
  background: var(--black);
}
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: var(--header-h);
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}
/* min-width: 0 lets the logo give way: on a phone the logo, languages, contact
   button and menu toggle came to 394px on a 390px screen. */
.site-header__logo { margin-right: auto; min-width: 0; }
.site-header__logo img { width: 276px; height: auto; }

.nav-toggle {
  width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-burger); color: var(--white);
  border: 0; border-radius: 50%; cursor: pointer; font-size: 24px;
}
.nav-toggle:hover { background: var(--red-bright); }

/* Transparent variant used by the homepage hero */
.site-header--overlay {
  position: absolute; inset: 0 0 auto; background: transparent; box-shadow: none;
}

/* ==========================================================================
   Off-canvas navigation
   ========================================================================== */
.offcanvas {
  position: fixed; inset: 0; z-index: 9999;
  visibility: hidden; pointer-events: none;
}
.offcanvas[data-open="true"] { visibility: visible; pointer-events: auto; }

.offcanvas__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6); opacity: 0;
  transition: opacity 0.3s;
}
.offcanvas[data-open="true"] .offcanvas__backdrop { opacity: 1; }

.offcanvas__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(420px, 100%);
  background: var(--black);
  padding: 28px 32px 60px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.offcanvas[data-open="true"] .offcanvas__panel { transform: none; }

.offcanvas__close {
  width: 33px; height: 33px; margin-left: auto; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: #750707; color: var(--white);
  border: 0; border-radius: 50%; cursor: pointer; font-size: 18px;
}

.menu { list-style: none; margin: 0; padding: 0; }
.menu a,
.menu > li > button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 0; color: var(--white);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.menu a:hover,
.menu > li > button:hover { color: var(--red-bright); }
.menu__caret { margin-left: auto; transition: transform 0.2s; font-size: 0.75em; }
.menu li[data-open="true"] > button .menu__caret { transform: rotate(90deg); }
.menu__sub { list-style: none; margin: 0 0 8px; padding: 0 0 0 16px; display: none; }
.menu li[data-open="true"] > .menu__sub { display: block; }
.menu__sub a { padding: 8px 0; font-weight: 400; color: var(--muted); }

/* ==========================================================================
   Page hero
   ========================================================================== */
.page-hero {
  background: var(--red);
  padding: 7% 0 5%;
  text-align: center;
}
.page-hero__title { max-width: 972px; margin: 0 auto; }
.page-hero__crumbs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 40px; margin: 20px 0 0; padding: 0; list-style: none;
  font-family: var(--font-body); font-size: 16px; line-height: 30.4px;
  color: var(--white);
}
.page-hero__crumbs li { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   Product page
   ========================================================================== */
.product-body { padding: 100px 0; }
.product-grid {
  display: grid;
  grid-template-columns: 346px minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}
/* The sidebar comes after .prose in the markup — boilerplate should not sit
   above the actual product copy in the source. Visually it stays on the left. */
.product-grid > .product-sidebar { order: -1; }

.panel {
  background: var(--red);
  padding: 45px 35px;
  margin-bottom: 30px;
}
.panel:last-child { margin-bottom: 0; }
.panel__title { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--white); }
.panel--photo {
  position: relative; isolation: isolate;
  background: var(--red) center / cover no-repeat;
}
.panel--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--red); opacity: 0.85;
}

.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.spec-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font-size: 16px; line-height: 30.4px; }
.spec-list dt, .spec-list .spec-list__k { color: var(--white); }

.contact-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: center; gap: 14px; }
.contact-list .icon { font-size: 14px; }

.panel-menu { list-style: none; margin: 0; padding: 0; }
.panel-menu a { display: block; padding: 10px 0 10px 18px; color: var(--white); font-weight: 600; }
.panel-menu a:hover { color: var(--red-bright); }
.panel-menu__sub { list-style: none; margin: 0; padding: 0 0 0 16px; }
.panel-menu__sub a { font-weight: 400; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }

.prose { color: var(--white); font-family: var(--font-body); }
.prose h2 { margin-top: 0; }

.capability-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 20px;
  border: 1px dashed var(--white); border-radius: 10px;
  padding: 20px; margin: 30px 0;
}
.capability-card__media { display: flex; justify-content: center; }
.capability-card__media img { border-radius: 20px; }
.capability-list { display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; }
.capability {
  display: grid; justify-items: center; gap: 14px;
  text-align: center; color: var(--white);
}
.capability__icon {
  width: 102px; height: 102px; display: grid; place-items: center;
  padding: 25px; border: 2px dashed var(--white); border-radius: 60px;
  font-size: 50px;
}
.capability__title { font-family: var(--font-body); font-size: 23px; line-height: 30.4px; font-weight: 400; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }

.why {
  display: grid; grid-template-columns: minmax(0, 434px) minmax(0, 1fr);
  align-items: center; gap: 0; margin-bottom: 40px;
}
.why__body { padding-left: 40px; }
.why__title { font-family: var(--font-head); }
.feature-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.feature-list li { display: flex; align-items: center; gap: 14px; padding-bottom: 4.5px; color: var(--white); }
.feature-list .icon { font-size: 14px; }

/* ==========================================================================
   Site footer
   ========================================================================== */
/* The falling casings loop behind the footer, blurred in the file and only
   lightly darkened here: enough for the links and contact buttons to read. */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--coal);
  padding: 100px 0 48px;
}
.site-footer__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-footer__bg video { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.9; }
.site-footer__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0.72) 0%, rgba(16, 16, 16, 0.42) 50%, rgba(16, 16, 16, 0.22) 100%);
}
.site-footer__inner {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 40px; align-items: center;
}
.site-footer__mark img { width: 120px; }
.site-footer__social { display: flex; gap: 22px; margin-top: 24px; font-size: 20px; }
.site-footer__social a { color: var(--white); }
.site-footer__social a:hover { color: var(--red-bright); }

.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 18px; margin: 0; padding: 0; list-style: none;
  font-family: var(--font-serif); font-size: 19.2px; line-height: 30.4px; font-weight: 600;
  color: var(--white);
}
.footer-nav li { display: flex; align-items: center; gap: 18px; }
.footer-nav li + li::before {
  content: ""; width: 2px; height: 15px; background: currentColor; opacity: 0.55;
}
.footer-nav .is-plain { color: var(--muted); font-weight: 500; }

.site-footer__legal {
  margin: 22px auto 0; padding-top: 20px; max-width: 640px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-serif); font-size: 1rem; text-align: center; color: var(--white);
}
.site-footer__legal a { color: var(--white); text-decoration: underline; }

.footer-contact { display: grid; gap: 14px; justify-items: stretch; }
.footer-contact a {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--field); color: var(--white);
  border-radius: 100px; padding: 16px 24px;
  font-weight: 600;
}
.footer-contact a:hover { background: var(--red-deep); color: var(--white); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --header-h: 110px; }
  .product-body { padding: 80px 0; }
  .product-grid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .why__body { padding-left: 0; }
  .site-header__logo img { width: 220px; }
}

@media (max-width: 900px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the four sidebar panels ran 1083px tall and pushed the actual
     product copy to 1552px — two screens down, on a mobile-first index.
     Source order already puts the copy first, so the override just clears. */
  .product-grid > .product-sidebar { order: 0; }
  .capability-card { grid-template-columns: minmax(0, 1fr); }
  .capability-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .footer-contact { width: min(320px, 100%); }
}

@media (max-width: 767px) {
  .page-hero { padding: 14% 0 12%; }
  .site-header__logo img { width: 180px; }
  .panel { padding: 32px 24px; }
  .capability-card { padding: 28px 20px; }
  .capability-list { grid-template-columns: minmax(0, 1fr); }
  .btn--pill { padding: 18px 34px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark line-art artwork ships on a transparent background; give it a plate. */
.capability-card__media--plate img {
  background: var(--white);
  border-radius: 20px;
}

.panel-menu.menu > li > button {
  padding: 10px 0 10px 18px; color: var(--white);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
}
.panel-menu.menu > li > a { padding: 10px 0 10px 18px; }
.panel-menu.menu .panel-menu__sub { display: none; }
.panel-menu.menu li[data-open="true"] > .panel-menu__sub { display: block; }

/* ==========================================================================
   Editorial pages (about / contact / legal)
   ========================================================================== */
.display {
  font-family: "Raleway", var(--font-head), sans-serif;
  font-size: 49.6px; line-height: 56.5px; font-weight: 800; letter-spacing: 9.2px;
  color: var(--white); margin: 0;
}

.serif-heading {
  font-family: var(--font-serif); font-size: 35px; line-height: 52.5px;
  font-weight: 600; color: var(--white); margin: 0 0 12px;
}
.serif-copy {
  font-family: var(--font-serif); font-size: 22px; line-height: 30.4px;
  color: var(--ink);
}
.serif-copy p { margin: 0 0 18px; }

.eyebrow { display: flex; align-items: center; gap: 30px; }
.eyebrow--right { justify-content: flex-end; }
.eyebrow__rule { width: 330px; max-width: 40vw; height: 1px; background: var(--ink); opacity: 0.75; }
.eyebrow__text {
  font-family: var(--font-serif); font-size: 13.6px; font-weight: 600;
  letter-spacing: 0.2px; text-transform: uppercase; color: var(--ink);
}
.eyebrow--right .eyebrow__rule { order: -1; }

.about__eyebrow { padding-top: 150px; }
.about__eyebrow--top { padding-top: 60px; }
.about__title { padding-top: 90px; }

.about__intro-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 60px; align-items: center;
}

.about__mark img { width: 341px; margin-inline: auto; }
.about__copy { position: relative; }
.about__intro { padding: 40px 0; overflow: hidden; }

.about__story { padding: 100px 0; }
/* The founding year fills the left of the story: drawn in outline, then lit
   from the bottom up as the section arrives, the torch of the copy beside it.
   site.js arms it; without JS or with reduced motion it is simply lit. */
.about__story-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 727px);
  gap: 60px; align-items: center;
}
/* Sized to its own column (cqi), not the window: set by the viewport, the
   last digit ran into the copy beside it. Four condensed digits are about
   1.9em wide, so 48cqi just fills the column. */
.about__year { display: grid; justify-items: start; gap: 14px; container-type: inline-size; }
.about__year-num {
  position: relative; font: 700 min(48cqi, 210px)/0.9 var(--font-head);
  letter-spacing: -0.02em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(224, 66, 66, 0.85);
}
.about__year-num::after {
  content: attr(data-year); position: absolute; inset: 0;
  -webkit-text-stroke: 0;
  background: linear-gradient(to top, #650707 0%, #b01818 45%, #e04242 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about__year.is-armed .about__year-num::after {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.about__year.is-armed.is-in .about__year-num::after { clip-path: inset(0); }
.about__year-rule { width: 96px; height: 2px; background: #e04242; }
.about__year-label {
  font: 600 14px/1 var(--font-head); letter-spacing: 0.32em; color: var(--white); opacity: 0.6;
}
.about__year-era {
  font: 700 26px/1.1 var(--font-head); letter-spacing: 0.08em; color: var(--white);
}
.about__close { padding: 100px 0; }
.about__close-grid {
  display: grid; grid-template-columns: minmax(0, 535px) minmax(0, 1fr);
  gap: 60px; align-items: center;
}
.about__seal { display: block; width: 460px; max-width: 100%; margin-inline: auto; }
.about__seal-motto { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.04em; }
.about__seal-rim text { font-family: var(--font-head); font-weight: 600; }
/* The rim turns slowly, once every two minutes: alive, never busy. */
.about__seal-rim { transform-origin: 300px 300px; animation: seal-turn 120s linear infinite; }
@keyframes seal-turn { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .about__seal-rim { animation: none; } }

/* Contact */
.contact__head { padding: 90px 0 0; }
.contact__body { padding: 60px 0 100px; }
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 60px; align-items: center;
}
.contact__lead { margin-bottom: 40px; }
.contact-cards { display: grid; gap: 34px; }
.contact-card__label {
  font-family: var(--font-head); font-size: 20px; line-height: 1.4;
  letter-spacing: 0.5px; color: var(--white); margin: 0 0 4px;
}
.contact-card__value { font-family: var(--font-body); font-size: 18px; color: var(--ink); }
.contact-card__value a { color: var(--ink); }
.contact-card__value a:hover { color: var(--red-bright); }
.contact__mark img { width: 100%; max-width: 420px; margin-inline: auto; }

/* Legal / long-form text */
.textpage__body { padding: 80px 0 100px; }
.textpage__body .serif-copy { font-size: 19px; line-height: 1.8; }

@media (max-width: 900px) {
  .display { font-size: 34px; line-height: 40px; letter-spacing: 5px; }
  .serif-heading { font-size: 27px; line-height: 38px; }
  .serif-copy { font-size: 19px; line-height: 28px; }
  .about__intro-grid, .about__close-grid, .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about__story-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .about__year-num { font-size: min(48cqi, 120px); }
  .about__eyebrow { padding-top: 90px; }
  .about__story { padding: 100px 0 60px; }
  .about__mark img, .about__seal { width: min(340px, 86%); }
}

/* ==========================================================================
   Home
   ========================================================================== */
.is-home { background: var(--black); }

.stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 1px;
}
.stage__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.stage__bg video {
  width: 100%; object-fit: cover;
  background: var(--black) center / cover no-repeat;
  /* Drifts against the scroll (--par, set in site.js) so the section arrives
     rather than simply being there.
     The headroom the drift needs comes from the element being laid out taller
     than its box, NOT from a scale() in the transform. A pure translate is a
     compositor move and costs nothing; adding a scale makes the browser resample
     the video texture on every single frame, and on the two clips that both
     play continuously and carry this transform — the earth and the horses —
     that was enough to freeze them. */
  position: absolute; left: 0; top: -6%; height: 112%;
  transform: translate3d(0, calc(var(--par, 0) * 1%), 0);
}
.stage__bg--soft video { opacity: 0.55; }
/* Shown whole instead of cropped to fill: the section is taller than a 16:9
   frame is at full width, so cover blew the Türkiye map up to 2531px and cut
   off both ends of the country. The clip fades to black at top and bottom. */
.stage--contain {
  /* The section is as tall as the picture (up to one screen), so copy centred
     in it sits in the middle of the map or the herd rather than above it. */
  display: grid; place-items: center;
  min-height: min(56.25vw, 100svh);
  padding-block: var(--gap-section);
}
.stage--contain .stage__bg video { object-fit: contain; top: 0; height: 100%; }
/* The herd always runs full width: capped at one screen, a window shorter than
   16:9 left black bars down both sides. The box is exactly 16:9 instead, so
   contain fills it edge to edge and the baked top/bottom fades stay whole. */
.stage--horse.stage--contain { min-height: 56.25vw; }
.stage--contain .container { display: flex; justify-content: center; }
.stage--contain .stage__copy {
  max-width: 100%;
  text-align: center;
  text-shadow: none;
}
/* The blur follows the words (site.js sizes one strip per typed line), so
   nothing without text behind it is ever blurred. Each strip fades out on every
   side and overlaps its neighbours, so the lines read as one soft band with no
   edge. Kept faint: on fine detail like grass a stronger blur reads as a smudge. */
.stage--contain .frost { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stage--contain .frost > span {
  position: absolute;
  background: rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 1.4em, #000 calc(100% - 1.4em), transparent),
    linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 1.4em, #000 calc(100% - 1.4em), transparent),
    linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  mask-composite: intersect;
}
.stage--contain .stage__copy .typing {
  line-height: 1.75;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* The herd runs over bright grass: the copy needs a real shadow to stand off
   it. Two short layers only — the seven-layer, 68px halo is what froze the page. */
.stage--horse.stage--contain .stage__copy .typing {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7);
}
.stage--hero { min-height: 100svh; display: grid; place-items: center; }

.stage__copy { max-width: 720px; position: relative; }
/* Video üstündeki metnin okunabilirliği harfin kendisinde çözülüyor.
   Önce her metin bloğunun arkasına radyal bir karartma konmuştu; elips
   videonun üstünde görünüyordu. Sonra klip markanın kırmızısına
   boyanmıştı; bu da görüntüyü öldürüyordu. Kalan yol: görüntüye hiç
   dokunmamak ve kırmızıyı sadece harflerin arkasına, glifin biçimini
   izleyen bir hâle olarak koymak. Kutu yok, kenar yok, video kendi
   renginde kalıyor. */
.stage__copy,
.stage__copy .typing,
.hawk__copy,
.wall__copy h2 {
  /* Two layers, tight dark then red. This was seven, blurred out to 68px, and
     measured in a real Chrome window it froze the page for 58–109ms every time
     a block of it scrolled into view: a blurred text-shadow is rasterised per
     glyph, and these blocks run to 300 characters over playing video. With the
     two layers below the same scroll ran without a single dropped frame. */
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(101, 7, 7, 0.9);
}

.hawk__copy,
.wall__copy,
.stage__copy > *,
.hawk__copy > *,
.wall__copy > * { position: relative; }

/* Chapter markers */
.chapter-band { position: relative; }
.chapter { display: flex; align-items: center; justify-content: flex-end; gap: 44px; }
.chapter__rule { width: 230px; max-width: 30vw; height: 1px; background: var(--ink); }
.chapter__num {
  font-family: var(--font-body); font-size: 33.6px; line-height: 1; font-weight: 700;
  color: var(--ink);
}

/* Long copy over video. site.js arms it (.is-armed) and marks it .is-in in view:
   a soft band sweeps down the block, so the lines come up one after another
   while the whole block lifts a few pixels. The mask exists only during the
   animation; left on, it would clip the glow round the letters. */
.is-armed[data-reveal] { opacity: 0; }
.is-armed[data-reveal].is-in {
  opacity: 1;
  animation: copy-reveal 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes copy-reveal {
  from {
    opacity: 1; translate: 0 14px;
    -webkit-mask-image: linear-gradient(#000 40%, transparent 60%);
    mask-image: linear-gradient(#000 40%, transparent 60%);
    -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
  }
  to {
    opacity: 1; translate: 0 0;
    -webkit-mask-image: linear-gradient(#000 40%, transparent 60%);
    mask-image: linear-gradient(#000 40%, transparent 60%);
    -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
}
.stage--contain .frost > span { opacity: 0; transition: opacity 1.2s ease-out; }
.stage--contain .frost.is-in > span { opacity: 1; }

.typing {
  font-family: var(--font-serif); font-size: 24px; line-height: 53px; font-weight: 500;
  color: var(--white); margin: 0;
  /* Sits directly on video. The bright frames (light beams, sparks) drop the
     effective contrast below AA with no shadow at all. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 2px 14px rgba(0, 0, 0, 0.65);
}

/* Decorative orbs */

/* Intro */
.intro { position: relative; }
.intro__kicker {
  font-family: "Poppins", var(--font-head), sans-serif;
  font-size: clamp(44px, 6vw, 86.4px); line-height: 1.1; font-weight: 900;
  color: var(--ink); margin: 0 0 var(--gap-block);
}

/* Counter */
.counter-band {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; place-items: center; padding: 0;
}
/* Footage is texture here, not subject; the number has to stay readable. */
.counter-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 50%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.85));
}
.counter-band__inner { display: grid; justify-items: center; gap: var(--gap-item); }
.counter {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(56px, 13vw, 210px); line-height: 0.9;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--white);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
/* The same rule the chapter markers draw, opening as the number lands. */
.counter__rule {
  width: min(260px, 46vw); height: 1px; background: var(--red-bright);
  transform: scaleX(0); transform-origin: center;
  transition: transform 1.6s var(--ease-out);
}
.counter-band.is-in .counter__rule { transform: scaleX(1); }
.counter__label {
  font-family: var(--font-serif); font-size: clamp(19px, 1.6vw, 24px);
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Great-wall split */
.wall__grid,
.hawk__grid {
  display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 60px; align-items: center;
}
.hawk__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); }
.wall__copy h2,
.manifesto__text,
.closing__copy p {
  font-family: var(--font-serif); font-size: 24px; line-height: 31.2px; font-weight: 500;
  color: var(--white); margin: 0;
}
.wall__video, .hawk__video { width: 100%; border-radius: 8px; }

/* The original set this at 642px; that also keeps it near a 60-character
   line, which 1140px would not. */
.manifesto__text { text-align: right; max-width: 642px; margin-left: auto; }

/* Activity areas */
.activity__grid {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 60px; align-items: center;
}
.activity__figure { margin: 0; }
/* A photograph on a black page: melt its edges into the page instead of
   showing the frame (the floor reflection runs right off the bottom). */
.activity__figure img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 82%, transparent);
  mask-composite: intersect;
}
/* Beside the text the column is only 480px; let the photo run to the page edge
   (inline-end, so Arabic bleeds left). body clips the overflow. */
@media (min-width: 1181px) {
  .activity__figure { margin-inline-end: calc((var(--container) - 100vw) / 2 - var(--gutter)); }
}
.home-list {
  list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px;
  font-family: var(--font-serif); font-size: 22.4px; line-height: 30.4px; font-weight: 500;
  color: var(--white);
}
.home-list li { display: flex; gap: 18px; align-items: flex-start; }
.home-list li > a { display: flex; align-items: flex-start; gap: 18px; color: inherit; }
.home-list a:hover { color: var(--red-bright); }
.home-list .icon { font-size: 18px; margin-top: 6px; color: var(--red-bright); }

/* Component breakdowns */
.components__title {
  font-family: var(--font-serif); font-size: 39px; line-height: 55px; font-weight: 700;
  text-align: center; color: var(--white); margin: 0 0 50px;
}
.components__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 60px; align-items: center;
}





/* Sectioned round with scroll-revealed callouts. Scroll progress lands on --p
   (0 nothing drawn, 1 all four arrows and labels out). Arrow geometry lives in
   the photograph's own pixel grid so an anchor cannot drift off its part; the
   words are HTML on top, so they hold a readable size on a phone instead of
   shrinking with the picture. --p defaults to 1 so a reader with no JS gets
   every label showing, which is the state worth failing into. */
.cx {
  --p: 1;
  position: relative; max-width: 760px; margin-inline: auto;
}
.cx__photo { display: block; width: 100%; height: auto; }
.cx__arrows {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.cx__trace, .cx__label {
  /* each callout waits its turn, then draws over the next fifth of the scroll */
  --r: clamp(0, calc((var(--p) - var(--i) * 0.15) * 5), 1);
}
.cx__wire {
  fill: none; stroke: var(--red-bright); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--r)));
}
.cx__tap { fill: var(--red-bright); opacity: var(--r); }
/* The via lands once its trace has run the whole way in. */
.cx__viaRing, .cx__viaHole { opacity: clamp(0, calc((var(--r) - 0.8) * 5), 1); }
.cx__viaRing { fill: var(--red-bright); }
.cx__viaHole { fill: var(--black); }
.cx__label {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(var(--shift), -50%);
  opacity: var(--r); white-space: nowrap;
  font-family: var(--font-head); font-size: 19px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--white);
  text-shadow: 0 2px 14px #000, 0 0 4px #000;
}

@media (max-width: 900px) {
  .cx__label { font-size: 13px; letter-spacing: 0.03em; }
}

@media (prefers-reduced-motion: reduce) {
  .cx { --p: 1; }
}


/* Drawn structural formulas. Colour comes from the page rather than from the
   file, so one SVG works anywhere and the white plate the scans needed is gone.
   --p (scroll progress) flies the pieces in from outside; --i is the piece's
   distance rank, so the skeleton lands before the outer atoms do. --p defaults
   to 1 so a reader with no JS gets the assembled molecule. */
.mol { --p: 1; color: var(--white); width: 100%; max-width: 300px; }
.mol svg { display: block; width: 100%; height: auto; overflow: visible; }
.mol .b {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.mol .a {
  /* The drawings place each label by its left edge, so no text-anchor here:
     middle would slide every one of them half a word off its atom. */
  fill: currentColor; stroke: none;
  font-family: var(--font-head); font-size: 15px;
}
.mol .sup, .mol .sub { font-size: 10px; }
.mol .a, .mol .b {
  --r: clamp(0, calc((var(--p) - var(--i) * 0.35) * 2.4), 1);
  transform: translate(calc(var(--dx) * (1 - var(--r)) * 1px),
                       calc(var(--dy) * (1 - var(--r)) * 1px));
  opacity: var(--r);
}
.capability-card__media--mol { align-items: center; }

@media (prefers-reduced-motion: reduce) { .mol { --p: 1; } }

/* Closing */
.closing__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 60px; align-items: center;
}
.closing__mark img { width: 100%; max-width: 380px; margin-inline: auto; }
.closing__claim {
  font-family: var(--font-serif); font-size: 24px; line-height: 1.4; font-weight: 600;
  text-align: center; color: var(--white); margin: 24px 0 0;
}

/* Content is present from the start; only the chapter openers are staged. */
.reveal { opacity: 1; }

@media (max-width: 900px) {
  .wall__grid, .hawk__grid, .activity__grid,
  .components__grid, .closing__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hawk__grid > :first-child { order: 2; }
  .typing { font-size: 20px; line-height: 36px; }
  .intro__kicker { font-size: 40px; }
  .components__title { font-size: 27px; line-height: 38px; }
  .manifesto__text { text-align: left; max-width: none; }
  .chapter__num { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  
}

/* Decorative artwork placed against the 1140px container's left edge. */
.chapter-band, .wall, .hawk, .activity, .manifesto, .closing { position: relative; }
.decor { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.decor__item {
  position: absolute;
  left: calc(50% - (var(--container) / 2) + var(--x));
  top: var(--y);
  width: var(--w);
  z-index: var(--z, 1);
  max-width: none;
}

@media (max-width: 1180px) {
  .decor { display: none; }
}

@media (max-width: 560px) {
  .site-header__inner { gap: 12px; padding-inline: 16px; }
  .site-header__logo img { width: 150px; }
  .btn--header { padding: 10px 14px; font-size: 0; gap: 0; }
  .btn--header .icon { font-size: 18px; }
  .nav-toggle { width: 38px; height: 38px; font-size: 20px; position: relative; }
  .nav-toggle::after { content: ""; position: absolute; inset: -3px; }
  .container { padding-inline: 16px; }
  .page-hero__crumbs { gap: 0 20px; }
}

.activity .serif-copy { font-size: 24px; line-height: 31.2px; color: var(--white); }

/* ==========================================================================
   Refinement layer
   The design language is fixed. What changes here is craft: rhythm, measure,
   one motion device instead of many, and states that respond to a person.
   ========================================================================== */

/* --- Chapter spine ------------------------------------------------------
   The homepage is a five-part story, so the numbering is real structure.
   The rule draws outward from the number as each chapter arrives, and a
   fixed marker on the right edge says which chapter you are in. */
.chapter { gap: 44px; }
.chapter__rule {
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 1s var(--ease-out);
}
.chapter-band.is-in .chapter__rule { transform: scaleX(1); }
.chapter__num {
  font-variant-numeric: tabular-nums;
  transition: color 0.6s ease;
}

.spine {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: none; gap: 14px;
  flex-direction: column; align-items: flex-end;
  padding: 16px 14px 16px 26px;
  transition: opacity 0.4s ease;
}
.is-home .spine { display: flex; }
.spine__step {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  transition: color 0.3s ease;
}
.spine__step::after {
  content: ""; width: 14px; height: 2px; background: currentColor;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  transition: width 0.4s var(--ease-out);
}
.spine__step[aria-current="true"] { color: var(--white); }
.spine__step[aria-current="true"]::after { width: 34px; }
.spine__step:hover { color: var(--white); }

/* --- Chapter openers: the one staged reveal on the page ------------------ */

/* --- Parallax on the cosmic decoration ---------------------------------- */
.decor__item { transform: translate3d(0, var(--drift, 0px), 0); }

/* --- Header condenses so it stays reachable on a very long page ---------- */
.site-header {
  position: sticky; top: 0;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.site-header__inner { transition: min-height 0.4s var(--ease-out); }
.site-header__logo img { transition: width 0.4s var(--ease-out); }
/* No backdrop-filter: at 96% black the blur could not be seen, but the header
   sits over full-screen video, and a backdrop blur is recomputed on every frame
   of whatever plays beneath it — that is where the background clips hitched. */
.site-header.is-tight {
  background: rgba(0, 0, 0, 0.96);
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header.is-tight .site-header__inner { min-height: var(--header-h-tight); }
.site-header.is-tight .site-header__logo img { width: 190px; }
.site-header--overlay { position: fixed; }
.site-header--overlay.is-tight { position: fixed; }

/* --- Reading measure ----------------------------------------------------- */
.serif-copy > p,
.prose > p,
.prose > ul,
.textpage__body .serif-copy { max-width: var(--measure-serif); }
.prose > p { max-width: var(--measure-sans); }
.typing { max-width: 34ch; }
.stage__copy .typing { max-width: 42ch; }

/* --- Legal text: give the clauses real structure ------------------------- */
.textpage__body .serif-copy {
  margin-inline: auto; font-size: 19px; line-height: 1.75; color: var(--ink);
}
.textpage__body .serif-copy p { margin-bottom: 1.15em; }
.textpage__body .serif-copy strong { color: var(--white); }

/* --- Product page: rhythm and roles -------------------------------------- */

/* The four panels do different jobs, so they should not look identical. */
.panel { border-radius: 2px; }
.panel--data { background: var(--red); }
.panel--nav { background: rgba(101, 7, 7, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); }
.panel--nav .panel-menu a { color: var(--ink); }
.panel--nav .panel-menu a:hover,
.panel--nav .panel-menu a[aria-current="page"] { color: var(--white); }
.panel--cta { background: var(--white); color: var(--red); }
.panel--cta .panel__title,
.panel--cta a { color: var(--red); }
.panel--cta a:hover { color: var(--red-bright); }
.panel--cta .icon { color: var(--red-deep); }

.panel__title {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--gap-item);
}
.panel--cta .panel__title { color: rgba(101, 7, 7, 0.75); }
.spec-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-bottom: 10px; }
.spec-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list__k { color: rgba(255, 255, 255, 0.68); }

.prose > h2 { margin-top: var(--gap-group); }
.prose > h2:first-child { margin-top: 0; }
.prose > h2 + p { margin-top: 0; }
.rule { margin: var(--gap-group) 0; border-top-color: rgba(234, 234, 234, 0.35); }

/* --- The dashed ring is this site's icon signature ----------------------- */
.capability__icon {
  position: relative;
  border-color: rgba(255, 255, 255, 0.55);
  transition: border-color 0.4s ease;
}
.capability__icon::before {
  content: ""; position: absolute; inset: -7px;
  border: 1px dashed rgba(224, 66, 66, 0.55); border-radius: 50%;
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.8s var(--ease-out);
}
.capability-card.is-in .capability__icon::before { opacity: 1; transform: scale(1); }
.capability-list li:nth-child(2) .capability__icon::before { transition-delay: 0.12s; }
.capability-list li:nth-child(3) .capability__icon::before { transition-delay: 0.24s; }
.capability-card.is-in .capability__icon { border-color: var(--white); }
.capability-card { transition: border-color 0.5s ease; }

/* --- Component diagrams: the legend and the diagram are one thing -------- */
.components__grid { align-items: center; gap: var(--gap-group); }
.components__legend .home-list { margin-top: 0; gap: 10px; }
.components__legend .home-list li { padding-left: 18px; position: relative; }
.components__legend .home-list li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 8px; height: 1px; background: var(--red-bright);
}
.components__legend .home-list .icon { display: none; }






/* --- Buttons and links respond, quietly --------------------------------- */
.btn--header { transition: background-color 0.25s ease; }
.footer-contact a { transition: background-color 0.25s ease, color 0.25s ease; }
.menu a, .panel-menu a { transition: color 0.2s ease, padding-left 0.2s ease; }
.menu a:hover { padding-left: 6px; }

/* --- Video posters fade to frame instead of snapping --------------------- */
.stage__bg video, .wall__video, .hawk__video { transition: opacity 0.6s ease; }

@media (max-width: 1280px) { .spine { display: none !important; } }
@media (max-width: 900px) {
  :root { --gap-chapter: 100px; --gap-section: 64px; --gap-group: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter__rule { transform: none; }
    .decor__item { transform: none; }
}

/* Legal clauses: sections read as sections, lettered items hang. */
.textpage__body .clause {
  font-family: var(--font-head); font-size: 22px; line-height: 1.3; font-weight: 700;
  color: var(--white); margin: var(--gap-block) 0 var(--gap-tight);
}
.textpage__body .clause:first-child { margin-top: 0; }
.textpage__body .clause-item {
  padding-left: 26px; text-indent: -26px; margin-bottom: 0.5em;
  color: rgba(242, 242, 242, 0.88);
}

/* ==========================================================================
   Arabic and right-to-left
   Cairo carries the interface voice (Prompt / Roboto Condensed's counterpart),
   Amiri the editorial one (Alegreya's counterpart). The layout mirrors through
   logical properties rather than a separate stylesheet.
   ========================================================================== */
[lang="ar"] {
  --font-body: "Cairo", "Noto Sans Arabic", system-ui, sans-serif;
  --font-head: "Cairo", "Noto Sans Arabic", system-ui, sans-serif;
  --font-serif: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --measure-serif: 60ch;
  --measure-sans: 56ch;
}
[lang="ar"] h1 { letter-spacing: 0; }
/* Tracking pulls Arabic letters apart and breaks their joins. */
[lang="ar"] .about__year-label, [lang="ar"] .about__year-era { letter-spacing: 0; }
[lang="ar"] .display { letter-spacing: 0; font-family: var(--font-head); }
[lang="ar"] .intro__kicker { font-family: var(--font-head); letter-spacing: 0; }
[lang="ar"] .chapter__num,
[lang="ar"] .spine__step,
[lang="ar"] .counter { font-variant-numeric: normal; }

[dir="rtl"] .site-header__logo { margin-right: 0; margin-left: auto; }
[dir="rtl"] .offcanvas__panel { inset: 0 auto 0 0; transform: translateX(-100%); }
[dir="rtl"] .offcanvas[data-open="true"] .offcanvas__panel { transform: none; }
[dir="rtl"] .offcanvas__close { margin-left: 0; margin-right: auto; }
[dir="rtl"] .menu__caret { margin-left: 0; margin-right: auto; }
[dir="rtl"] .menu li[data-open="true"] > button .menu__caret { transform: rotate(-90deg); }
/* Arrows point the way the text reads; icon() marks the directional ones. */
[dir="rtl"] [data-flip] { transform: scaleX(-1); }
/* Formulas and diagrams are drawn left to right in every language. SVG <text>
   inherits the page direction, which drew "Pb2+" as "+Pb2". */
[dir="rtl"] svg { direction: ltr; }
[dir="rtl"] .menu a:hover { padding-left: 0; padding-right: 6px; }
[dir="rtl"] .menu__sub,
[dir="rtl"] .panel-menu__sub { padding: 0 16px 0 0; }
[dir="rtl"] .panel-menu.menu > li > a,
[dir="rtl"] .panel-menu.menu > li > button { padding: 10px 18px 10px 0; }
[dir="rtl"] .chapter { justify-content: flex-start; }
[dir="rtl"] .chapter__rule { transform-origin: left center; }
[dir="rtl"] .spine { right: auto; left: 28px; align-items: flex-start;
  padding: 16px 26px 16px 14px;
  background: linear-gradient(270deg, transparent, rgba(0, 0, 0, 0.7) 45%); }
[dir="rtl"] .spine__step { flex-direction: row-reverse; }
[dir="rtl"] .eyebrow--right { justify-content: flex-start; }
[dir="rtl"] .eyebrow--right .eyebrow__rule { order: 0; }
[dir="rtl"] .manifesto__text { text-align: left; margin-left: 0; margin-right: auto; }
[dir="rtl"] .why__body { padding-left: 0; padding-right: 40px; }
[dir="rtl"] .textpage__body .clause-item { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .components__legend .home-list li { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .components__legend .home-list li::before { left: auto; right: 0; }
[dir="rtl"] .decor__item { left: auto; right: calc(50% - (var(--container) / 2) + var(--x)); }





/* ==========================================================================
   Language switcher
   ========================================================================== */
.langs { margin-inline-start: auto; }
.langs ul {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
}
.langs a {
  display: block; padding: 7px 11px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.82);
  /* These sit straight on the hero video: at 0.55 the inactive languages read
     as disabled and vanish over a bright frame. Lift them and add the same
     shadow the chapter markers use. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  border-radius: 2px; transition: color 0.2s ease, background-color 0.2s ease;
}
.langs a:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.langs a[aria-current="true"] { color: var(--white); background: var(--red-btn); }

.site-header__inner > .langs { margin-inline-end: 4px; }

/* ==========================================================================
   Language gate (the root document, shown only without JS or GeoIP)
   ========================================================================== */
.lang-gate { display: grid; place-items: center; min-height: 100svh; }
.lang-gate__inner { display: grid; justify-items: center; gap: 40px; padding: 24px; }
.lang-gate__inner img { width: 320px; max-width: 70vw; }
.lang-gate__list {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.lang-gate__list a {
  display: block; padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 2px;
  font-family: var(--font-body); font-weight: 600; color: var(--white);
}
.lang-gate__list a:hover { background: var(--red-btn); border-color: var(--red-btn); color: var(--white); }

@media (max-width: 560px) {
  .langs a { padding: 6px 7px; font-size: 12px; }
  /* The pills stay small; the tap target does not: ~44px, invisibly. */
  .langs a { position: relative; }
  .langs a::after { content: ""; position: absolute; inset: -10px -2px; }
}

/* --- Product page: supplier lede, spec table, review date ---------------- */
.prose > .lede {
  font-size: 1.0625rem; line-height: 1.65; color: var(--ink);
  border-inline-start: 2px solid var(--red-bright); padding-inline-start: 16px;
  margin-bottom: var(--gap-block);
}
.table-wrap { overflow-x: auto; margin: 0 0 var(--gap-block); }
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 15px; }
.spec-table th, .spec-table td { padding: 10px 14px; text-align: start; vertical-align: top; }
.spec-table thead th {
  font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--red-deep);
}
.spec-table tbody th { font-weight: 600; color: var(--ink); width: 38%; }
.spec-table tbody td { color: var(--white); }
.spec-table tbody tr + tr th, .spec-table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.page-date { font-size: 13px; color: var(--muted); margin-top: var(--gap-block); }

/* ------------------------------------------------------- components index */
.component-grid {
  list-style: none; margin: var(--gap-block) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px;
}
.component-card__link { display: block; color: inherit; text-decoration: none; }
/* The product images come in three different aspect ratios; a fixed box keeps
   the card titles on one baseline across a row. `contain` because several of
   them are structural formulae that must not be cropped. */
.component-card__link img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: contain; background: #fff;
}
/* Drawn formulas sit in the same fixed box the rasters used, so titles stay on
   one baseline across a row — but without the white plate `object-fit` needed. */
.component-card__mol {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  padding: 12px; background: var(--coal-2);
}
.component-card__mol .mol { max-width: 190px; }

.component-card__title {
  font-family: var(--font-head), sans-serif; font-size: 21px; line-height: 1.25;
  margin: 16px 0 0; text-transform: uppercase; letter-spacing: 0.02em;
}
.component-card__link:hover .component-card__title,
.component-card__link:focus-visible .component-card__title { color: var(--red); }
.component-card__desc { margin: 10px 0 0; font-size: 15px; line-height: 1.6; opacity: 0.78; }

/* Breadcrumbs are links now, not decoration. */
.page-hero__crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.page-hero__crumbs a:hover, .page-hero__crumbs a:focus-visible { color: var(--red); }

/* Quote CTA at the end of a product page — the only conversion point there was
   a bare phone number in the sidebar. */
.product-cta { margin: var(--gap-block) 0 0; }
.btn--quote { display: inline-flex; }

/* The h1 names the business under the slogan. */
.intro__tagline {
  display: block; margin-top: 18px;
  font-family: var(--font-head), sans-serif; font-weight: 600;
  font-size: clamp(15px, 1.5vw, 21px); line-height: 1.35;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72;
}

@media (max-width: 900px) {
  .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 560px) {
  .component-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   First-visit intro (homepage, once a day; gate in build.mjs, timeline in
   site.js). Named .splash: .intro is the homepage's first
   section. Halves meet at .55s, the wordmark lands at .78s, out at 2.3s.
   ========================================================================== */
html.has-splash { overflow: hidden; }
.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--black); cursor: pointer;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.splash.is-out { opacity: 0; visibility: hidden; }
.splash__sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.splash__stage { position: relative; display: grid; justify-items: center; gap: clamp(14px, 3vmin, 28px); }

.splash__logo { position: relative; width: min(42vmin, 320px); aspect-ratio: 3368 / 2960; }
.splash__half { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.splash__half--l { clip-path: inset(0 50% 0 0); transform: translateX(-70vw); }
.splash__half--r { clip-path: inset(0 0 0 50%); transform: translateX(70vw); }
.splash.is-go .splash__half { animation: splash-meet .55s cubic-bezier(.6, 0, .9, .5) forwards; }
.splash.is-go .splash__logo { animation: splash-hit .3s .55s ease-out; }
@keyframes splash-meet { 0% { opacity: 1; } to { opacity: 1; transform: translateX(0); } }
@keyframes splash-hit {
  0% { transform: scale(1.07); } 30% { transform: translate(-3px, 2px) scale(1.03); }
  60% { transform: translate(2px, -1px); } to { transform: none; }
}

.splash__flash {
  position: absolute; left: 50%; top: 45%; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(#fff 0, #ffc46b 35%, rgba(224, 66, 66, .5) 55%, rgba(224, 66, 66, 0) 70%);
  transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none;
}
.splash.is-go .splash__flash { animation: splash-flash .55s .53s ease-out forwards; }
@keyframes splash-flash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(26); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(40); }
}

/* The logo's own lettering, cut from the header logo at its native 310px: the
   two parts share one width, so they stack exactly as they do in the logo. */
.splash__word { display: grid; width: min(310px, 72vw); }
.splash__boru { width: 100%; height: auto; clip-path: inset(0 100% 0 0); transform: translateX(-6%); }
.splash.is-go .splash__boru { animation: splash-wipe .32s .78s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes splash-wipe { to { clip-path: inset(0 0 0 0); transform: none; } }

/* 15px under the letters in the logo, as a share of the 310px width. */
.splash__tag { width: 100%; height: auto; margin-top: 4.84%; opacity: 0; transform: scaleX(1.25); }
.splash.is-go .splash__tag { animation: splash-spread .42s .95s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes splash-spread { to { opacity: 1; transform: none; } }





/* ==========================================================================
   Phones and touch
   ========================================================================== */
@media (max-width: 767px) {
  :root { --pad-scale: 0.35; }

  /* Every background clip is shown whole, in a full-width 16:9 box. Cropped to
     fill a tall box the hero kept 23% of its frame and the closing wordmark
     read "ÖR". No parallax here: its overscan would crop the frame again. */
  .stage, .counter-band { --pad-scale: 0; min-height: 0; aspect-ratio: 16 / 9; padding-block: 0; }
  .stage__bg video { top: 0; height: 100%; transform: none; object-fit: contain; }
  /* The hero starts under the header and fills the rest of the screen. Its
     phone cut is the middle of the frame (tools/encode-mobile.sh), wide enough
     for the closing line, which then spans the screen; the wolf below waits
     for the first scroll. */
  .stage--hero { margin-top: var(--header-h); aspect-ratio: auto; height: calc(100svh - var(--header-h)); }

  /* The map and the herd: the clip on top, the copy under it rather than over
     it, where it covered the whole of Türkiye. Nothing to blur behind it now. */
  .stage--contain, .stage--horse.stage--contain {
    display: block; aspect-ratio: auto; min-height: 0;
    padding-block: 0 calc(var(--gap-section) * 0.35);
  }
  /* width: 100% because the section keeps place-items: center from its desktop
     grid, and Chrome centres a block child in a block container too: shrunk to
     its content, which is only the absolutely placed clip, the box was 0px. */
  .stage--contain .stage__bg { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; }
  .stage--contain .stage__copy { margin-top: var(--gap-item); }
  .stage--contain .frost { display: none; }
  /* The map's copy sits above the clip, in the same section, clear of Türkiye. */
  .stage--contain:not(.stage--horse) {
    display: flex; flex-direction: column;
    padding-block: calc(var(--gap-section) * 0.35) 0;
  }
  .stage--contain:not(.stage--horse) > .container { order: -1; }
  .stage--contain:not(.stage--horse) .stage__copy { margin: 0 0 var(--gap-item); }
}

@media (max-width: 900px) {
  /* Stacked, the copyright line goes to the very bottom, under the contact
     buttons: the middle column's two parts become rows of the footer grid. */
  .site-footer__links { display: contents; }
  .site-footer__legal { order: 1; }
  /* and no tall empty band under it */
  .site-footer { padding: 72px 0 24px; }
}

/* Every control gets at least a 44px hit area on a touch screen, added
   invisibly around it so nothing on screen moves. */
@media (pointer: coarse) {
  .btn--header { position: relative; }
  .btn--header::after { content: ""; position: absolute; inset: -3px 0; }
  
  .site-footer__social { gap: 0; }
  .site-footer__social a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  /* Text links: an inline box is only as tall as its text, so the pad is wider
     than the 7px the line box alone would suggest. */
  .footer-nav a, .page-hero__crumbs a, .contact-list a, .home-list a { position: relative; }
  .footer-nav a::after, .page-hero__crumbs a::after, .contact-list a::after, .home-list a::after {
    content: ""; position: absolute; inset: -11px -4px;
  }
}

/* ==========================================================================
   Entrances
   ========================================================================== */
/* Headings rise in word by word; the homepage kicker's tagline follows the last
   word. site.js wraps the words (.w) and marks the heading .is-split, so
   without JS, or with reduced motion, a heading is simply there. */
.stage-in .w {
  display: inline-block; opacity: 0; translate: 0 0.45em;
  transition: opacity 0.6s ease, translate 0.8s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 80ms);
}
.stage-in.is-in .w { opacity: 1; translate: 0 0; }
.stage-in.is-split .intro__tagline {
  opacity: 0; translate: 0 10px;
  transition: opacity 0.8s ease, translate 0.8s var(--ease-out);
  transition-delay: calc(var(--words, 1) * 80ms + 250ms);
}
.stage-in.is-split.is-in .intro__tagline { opacity: 0.72; translate: 0 0; }

/* Component breakdowns: the figure settles in, the ingredient list follows,
   then the figure keeps a slow drift while its traces draw with the scroll.
   Individual translate/scale properties, so none of it fights a transform.
   site.js arms a section only when motion is allowed. */

.components.is-armed .cx {
  opacity: 0; translate: 0 28px; scale: 0.97;
  transition: opacity 0.8s ease, translate 1s var(--ease-out), scale 1s var(--ease-out);
}

.components.is-armed.is-in .cx { opacity: 1; translate: 0 0; scale: 1; }
.components.is-armed.is-in .cx { animation: components-drift 8s ease-in-out 1.4s infinite; }

@keyframes components-drift { 50% { translate: 0 -8px; } }




.components.is-armed .home-list li {
  opacity: 0; translate: -18px 0;
  transition: opacity 0.5s ease, translate 0.6s var(--ease-out);
  transition-delay: calc(0.35s + var(--i, 0) * 70ms);
}
[dir="rtl"] .components.is-armed .home-list li { translate: 18px 0; }
.components.is-armed.is-in .home-list li { opacity: 1; translate: 0 0; }