/* =========================================================
   ARQUBIQ — style.css

   Layout rules:
   · Every chapter is one viewport (100svh), scroll stays normal.
   · RTL is a first-class layout, not a flipped LTR page.
     Only logical properties are used below — no left/right.
   · CSS owns layout, colour and hover. All entrance
     choreography lives in js/motion.js.
   ========================================================= */

/* ---------- 01 Tokens ---------- */
:root {
  /* Colour and type tokens live in css/tokens.css, which every
     page loads before this file. */

  /* primary */

  /* accents — rare */

  /* type — per language, switched on [dir] below */

  /* grid tokens (--cols, --margin, --gutter, --grid-max, --grid-edge)
     are defined in css/grid.css, which every page loads first. */

  /* chapter rhythm */
  --chapter-pad: clamp(72px, 9vh, 132px);

  /* motion — mirrors js/motion.js */
  --d-fast: 250ms;
  --d-normal: 500ms;
  --d-slow: 800ms;
  --e-out: cubic-bezier(.165, .84, .44, 1);   /* easeOutQuart */
  --e-in-out: cubic-bezier(.77, 0, .175, 1);  /* easeInOutQuart */
  --e-big: cubic-bezier(.645, .045, .355, 1); /* easeInOutCubic */
  --e-brand: cubic-bezier(.16, 1, .3, 1);     /* the ARQUBIQ curve */
}

/* Arabic is not the same type system at a different size —
   different family, different optical scale, looser leading. */
html[dir="rtl"] {
  --font-display: "Alexandria", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-num: "Alexandria", system-ui, sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[dir="rtl"] :is(h1,h2,h3,.hero__title,.section__title,.intro__mark,.adv__title,.step__title,.footer__tag) {
  font-family: "Alexandria", system-ui, sans-serif;
}

/* ---------- 02 Reset ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--red);
  scroll-behavior: smooth;
  scroll-padding-block-start: 88px;   /* clears the fixed header on anchor jumps */
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  overflow-x: hidden;
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[dir="rtl"] body { line-height: 1.7; }

body.is-loading, body.nav-open { overflow: hidden; }

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Latin runs and figures inside Arabic keep their own direction. */
.num, [dir="ltr"] { unicode-bidi: isolate; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.hero :focus-visible,
.faster :focus-visible,
.start :focus-visible,
.contact :focus-visible,
.footer :focus-visible { outline-color: var(--lime); }

/* ---------- 03 Grid + chapters ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
  width: min(100%, var(--grid-max));
  margin-inline: auto;
}

/* One chapter = one viewport. min-height, never fixed height:
   content reflows inside the chapter, it never gets crushed. */
.section, .chapter, .hero {
  height: 100svh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--chapter-pad);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: clip;
}
.section > .grid, .hero > .hero__inner { width: 100%; }

/* Form and footer are one closing slide. Dense viewports scroll inside
   this single snap chapter rather than turning its bands into slides. */
.chapter--end {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* The slack belongs above the form, not under the footer. */
  justify-content: flex-end;
  /* Height follows the content. A fixed 100svh with overflow-y:auto turned
     this chapter into its own scroll container, so the page kept scrolling
     after the footer had already ended. min-height still fills short
     viewports; overflow stays visible so there is only ever one scroller. */
  height: auto;
  min-height: 100svh;
  padding-block: 0;
  background: var(--green);
  overflow: visible;
  scroll-snap-align: end;
  scroll-snap-stop: always;
}
.chapter--end .start,
.chapter--end .footer {
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  scroll-snap-align: none;
  /* `clip`, not `hidden` and not `visible`.
     `hidden` is what originally turned this chapter into its own scroll
     container, so the page kept scrolling past the footer. `visible` fixed
     that but removed .start's containment of its decorative skewed squares,
     which sit 20vw past its inline end and 24vw/38vw past its block edges:
     that leaked 371px of horizontal overflow at 1440 and 118px of phantom
     vertical scroll. `clip` contains them without creating a scroller. */
  overflow: clip;
}
/* Form and footer read as one closing block: no gap, no divider. */
.chapter--end .start { padding-block: clamp(28px, 4vh, 44px) clamp(20px, 3vh, 32px); }
.chapter--end .footer { padding-block: clamp(24px, 3.5vh, 40px) 16px; border-block-start: 0; }
.chapter--end .footer .grid { row-gap: clamp(24px, 2.6vw, 40px); }
.chapter--end .footer { display: flex; align-items: center; }

/* =========================================================
   04 MOTION PRIMITIVES — rest + start states
   ========================================================= */

/* 01 reveal */
.js [data-reveal],
.js [data-foot],
.js .adv__card,
.js .step__num,
.js .step__title,
.js .step__copy { opacity: 1; }
.js .nav__item { opacity: 0; }

/* Resting state after the reveal has run. Without this the primitive
   animates an element in, clears its inline opacity, and the rule
   above pulls it straight back to invisible. Opacity only — transform
   is left to CSS so hover states keep working. */
.js .is-in { opacity: 1; }

/* 02 clip reveal.
   Arabic glyphs carry diacritics and deep descenders, so the mask
   is padded and clipped — never a bare overflow:hidden on a
   line-height:1 heading, which shears the letters. */
.reveal-mask {
  display: block;
  overflow: clip;
  padding-block: .12em;
  margin-block: -.12em;
}
.reveal-text { display: block; will-change: transform; }
.js [data-clip] .reveal-text { transform: none; opacity: 1; }

/* 03 line build */
.rule {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  opacity: .18;
  transform-origin: left center;
}
html[dir="rtl"] .rule { transform-origin: right center; }
.js .rule { transform: scaleX(0); }

/* 04 image shift + the sheet that carries it */
.sheet { display: block; overflow: hidden; position: relative; }
.js .sheet { clip-path: inset(0 100% 0 0); }
html[dir="rtl"] .js .sheet { clip-path: inset(0 0 0 100%); }

/* ---------- 05 Type ---------- */
.section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.6vw, 6rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}
/* Alexandria runs larger on the body and has no small-caps feel —
   step the scale down and open the leading. */
html[dir="rtl"] .section__title {
  font-size: clamp(2rem, 5.6vw, 5rem);
  line-height: 1.14;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.section__title--invert { color: var(--off-white); }

/* =========================================================
   00 — LOADING / CONTAINER BUILD
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background: var(--red);
}
.preloader__pattern { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.preloader__pattern-piece {
  position:absolute;
  width:44vw;
  aspect-ratio:1;
  border:1px solid rgba(246,246,246,.28);
  opacity:.72;
  will-change:transform,opacity;
  transition:transform 1.15s var(--e-brand),opacity .4s var(--e-out);
}
.preloader__pattern-piece--end {
  inset-inline-end:-8vw;
  inset-block-end:-8vw;
  transform:translate(-30vw,-24vh) scale(.58) skewX(-13deg);
}
.preloader__pattern-piece--start {
  inset-inline-start:-8vw;
  inset-block-start:-8vw;
  transform:translate(30vw,24vh) scale(.58) skewX(13deg);
}
.preloader__pattern.is-settled .preloader__pattern-piece--end { transform:skewX(-13deg);opacity:1; }
.preloader__pattern.is-settled .preloader__pattern-piece--start { transform:skewX(13deg);opacity:1; }
.preloader__field {
  position: absolute;
  inset: 0;
  background: var(--red);
  will-change: transform;
  z-index: -2;
}
.preloader__teaser{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding-inline:var(--margin);text-align:center;pointer-events:none}.preloader__teaser-line{grid-area:1/1;margin:0;color:var(--off-white);font:800 clamp(1.15rem,4.4vw,4.6rem)/1 var(--font-display);letter-spacing:-.035em;white-space:nowrap;opacity:0;transform:translateY(28px)}html[dir="rtl"] .preloader__teaser-line{line-height:1.25;letter-spacing:0}
.preloader__count {
  position: absolute;
  inset-block-end: clamp(20px, 4vh, 40px);
  inset-inline-start: var(--margin);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.preloader__count .num { color: var(--off-white); font-weight: 600; }

/* =========================================================
   PERSISTENT BRAND LOGO
   Fixed, transform-driven. Same element from load → header.
   ========================================================= */
.brand {
  position: fixed;
  inset-block-start: 0;
  /* Physical `left`, deliberately — not a logical property. This element
     is positioned by JS from getBoundingClientRect(), which reports
     physical viewport coordinates in every direction. Anchoring it to
     the inline-start edge would flip the origin under RTL while the
     maths stayed physical, and push the logo off the right of screen. */
  left: 0;
  z-index: 95;
  width: 200px;                 /* transform base — never changes */
  transform-origin: top left;
  will-change: transform;
  color: var(--off-white);
  opacity: 0;
}
.brand.is-building,.brand.is-landed{opacity:1}
.brand__svg { width: 100%; height: auto; overflow: visible; }
.brand__compact-mark { display: none; }

/* Three layers, three jobs:
   frame  — the container, always there
   fill   — full at the end of loading, drained by scroll
   faces  — absent in the hero, built by scroll
   JS drives geometry only; colour is a single class flip. */
.brand__frame { color: rgba(246, 246, 246, .9); }
.brand__outline{fill:none;stroke:var(--off-white);stroke-width:.13;stroke-linejoin:round;opacity:0;vector-effect:non-scaling-stroke}
.brand.is-hero-outline .brand__outline{opacity:1}.brand.is-hero-outline :is(.brand__frame,.brand__word,.brand__fill,.brand__knockout,.brand__faces){opacity:0!important}
.brand__word  { color: var(--off-white); }
.brand__fill  { fill: var(--off-white); }
.brand__knockout { color: var(--red); }

.brand__frame, .brand__word, .brand__faces,
.brand__fill, .brand__knockout {
  transition: color var(--d-normal) var(--e-brand), fill var(--d-normal) var(--e-brand);
}

.brand__faces {
  fill: currentColor;
  color: var(--off-white);
  fill-opacity: 0;
}
.brand__landed-mark { color: var(--red); opacity: 0; }
.brand.is-landed .brand__landed-mark { opacity: 1; }
.brand.is-landed .brand__outline{opacity:0}
.brand.is-landed :is(.brand__frame, .brand__word, .brand__fill, .brand__knockout, .brand__faces) { opacity: 0 !important; }
.js .brand__faces { opacity: 0; }

/* once it lands on the light header the mark reads in ARQUBIQ red —
   never black: the header logo is a brand signature, not UI chrome */
.brand.is-landed .brand__frame,
.brand.is-landed .brand__word,
.brand.is-landed .brand__faces { color: var(--red); }
.brand.is-landed .brand__fill { fill: var(--red); }
.brand.is-landed .brand__knockout { color: var(--off-white); }

/* =========================================================
   HEADER — never slides. Background, colour and nav are driven
   by the same scroll progress that carries the logo.
   ========================================================= */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--gutter);
  padding-block: 14px;
  padding-inline: var(--grid-edge);
  background: transparent;
  border-block-end: 1px solid transparent;
  color: var(--off-white);
  transition:
    background var(--d-normal) var(--e-brand),
    color var(--d-normal) var(--e-brand),
    border-color var(--d-normal) var(--e-brand);
}
.site-header.nav-open { z-index: 100; }   /* lift the overlay above the fixed logo */

/* The closing chapter already carries the brand, the navigation and the
   CTA. A floating header on top of it is redundant chrome, so both the
   bar and the persistent logo retire once the ending is on screen. */
.site-header.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}
.brand.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-normal) var(--e-brand);
}
.brand { transition: opacity var(--d-normal) var(--e-brand); }
.site-header.is-solid {
  background: transparent;
  backdrop-filter: none;
  border-block-end-color: transparent;
  color: var(--ink);
}
.site-header.is-solid.on-dark{color:var(--off-white)}.brand.is-landed.on-dark .brand__landed-mark{color:var(--off-white)}

/* Hero stays free of navigation chrome. Hidden controls also leave the
   pointer flow; JS removes them from the keyboard flow until docking. */
.site-header:not(.is-solid):not(.nav-open) .lang-toggle,
.site-header:not(.is-solid):not(.nav-open) .header-project,
.site-header:not(.is-solid):not(.nav-open) .sm__toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* slots reserve geometry only — the logo itself is position:fixed */
.logo-slot { display: block; visibility: hidden; }
.logo-slot--header {
  grid-column: 2;
  grid-row: 1;
  width: clamp(112px, 11vw, 148px);
  aspect-ratio: 44.43 / 13.21;
}

/* Hero logo: restrained so the headline remains the focal point. */
.logo-slot--hero {
  grid-column: 1 / -1;
  aspect-ratio: 44.43 / 13.21;
  /* Full content width, but never so tall that the headline below it
     falls off the fold. 3.363 is the logo's own width/height ratio, so
     capping by viewport height caps the width that produces it.
     (width:auto is wrong here — the slot is an empty span and would
     collapse to zero, taking the logo with it.) */
  width: clamp(92px, 20vw, 300px);
  justify-self: center;
}

.nav { grid-column: 3; grid-row: 1; justify-self: end; }
.header-actions {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}
.header-actions > :is(.lang-toggle, .header-project) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.header-project {
  background: var(--red);
  color: var(--off-white);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background var(--d-fast) var(--e-out);
}
.header-project:hover { background: var(--green); }
html[dir="rtl"] .header-project {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.nav__item--mobile-cta { display: none; }

@media (min-width: 1025px) {
  .site-header { direction: ltr; }
  .nav { grid-column: 1; justify-self: start; direction: ltr; }
  .header-actions { grid-column: 3; justify-self: end; direction: ltr; }
  html[dir="rtl"] .nav { grid-column: 3; justify-self: end; direction: rtl; }
  html[dir="rtl"] .header-actions { grid-column: 1; justify-self: start; direction: rtl; }
}
.nav__list { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }

.nav__link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-block: 6px;
  position: relative;
}
html[dir="rtl"] .nav__link {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-size: .95rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-fast) var(--e-out);
}
html[dir="rtl"] .nav__link::after { transform-origin: right center; }
.nav__link:hover::after { transform: scaleX(1); }

.nav__cta {
  background: var(--red);
  color: var(--off-white);
  padding: 12px 20px;
  transition: background var(--d-fast) var(--e-out);
}
.nav__cta::after { content: none; }
.nav__cta:hover { background: var(--green); }

/* Directional glyph: → in LTR, ← in RTL. */
.arrow { display: inline-block; transition: transform var(--d-fast) var(--e-out); }
html[dir="rtl"] .arrow { transform: scaleX(-1); }
.nav__cta:hover .arrow { transform: translateX(8px); }
html[dir="rtl"] .nav__cta:hover .arrow { transform: scaleX(-1) translateX(8px); }

.lang-toggle {
  background: none;
  border: 1px solid currentColor;
  padding: 9px 14px;
  font-size: .78rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.lang-toggle:hover { background: currentColor; }
.lang-toggle:hover { color: var(--red); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid currentColor;
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 6px;
  flex-direction: column;
}
.nav-toggle__bar { width: 18px; height: 1.5px; background: currentColor; transition: transform var(--d-fast) var(--e-out); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* =========================================================
   01 — HERO
   ========================================================= */
.hero {
  /* tighter gutter so the logo clears 90% of the viewport while the
     headline stays on the exact same start edge */
  --margin: 4.5vw;
  /* the hero carries an oversized logo AND a two-line headline, so it
     runs a tighter vertical rhythm than the reading chapters — without
     this the second line is pushed below the fold */
  --chapter-pad: clamp(44px, 5.5vh, 84px);
  position: relative;
  background: var(--red);
  color: var(--off-white);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset-inline-end: -8vw;
  inset-block-end: -8vw;
  width: 44vw;
  aspect-ratio: 1;
  border: 1px solid rgba(246, 246, 246, .28);
  transform: skewX(-13deg);
  pointer-events: none;
  z-index: -1;
}

.hero::after {
  content: "";
  position: absolute;
  inset-inline-start: -8vw;
  inset-block-start: -8vw;
  width: 44vw;
  aspect-ratio: 1;
  border: 1px solid rgba(246, 246, 246, .28);
  transform: skewX(13deg);
  pointer-events: none;
  z-index: -1;
}

.hero__shift {
  position: absolute;
  inset: -12%;
  z-index: -2;
  background: radial-gradient(60% 55% at 30% 25%, #A61717 0%, transparent 62%);
  opacity: .55;
  animation: hero-shift 26s var(--e-in-out) infinite alternate;
}
@keyframes hero-shift {
  from { transform: translate3d(-14px, -10px, 0); }
  to   { transform: translate3d(16px, 12px, 0); }
}

.hero__grain {
  position: absolute;
  inset: -60px;
  z-index: -1;
  pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-6px, 4px, 0); }
  40%  { transform: translate3d(5px, -6px, 0); }
  60%  { transform: translate3d(-4px, -3px, 0); }
  80%  { transform: translate3d(6px, 5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
  width: min(100%, var(--grid-max));
  margin-inline: auto;
  align-content: center;
  row-gap: clamp(18px, 3vw, 44px);
}

.hero__title {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.2vw, 7rem);
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--off-white);
}
.js .hero__title { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .preloader__teaser { display: none; }
  .js .hero__title { opacity: 1; }
}
html[dir="rtl"] .hero__title {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: clamp(2.2rem, 6.2vw, 6rem);
  line-height: 1.18;
  letter-spacing: 0;
}

/* ---------- Figures / image slots ---------- */
/* Empty image slots read as a flat material block — a deliberate
   tonal panel, never a hatched or pixelated dev placeholder. */
.figure__media,
.cat__media {
  position: relative;
  background: var(--green);
  overflow: hidden;
  will-change: transform;
}
.figure__media > img,
.cat__media > img { width: 100%; height: 100%; object-fit: cover; }

.figure__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(246, 246, 246, .3);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
}
.figure__slot { font-size: 0; }
.figure__slot::before { content: "ARQUBIQ"; font-size: .62rem; }
.figure__media:has(img) .figure__placeholder,
.cat__media:has(img) .figure__placeholder { display: none; }

.figure__cap {
  margin-block-start: 10px;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
}
html[dir="rtl"] .figure__cap { letter-spacing: 0; text-transform: none; }

/* =========================================================
   02 — INTRODUCTION
   ========================================================= */
.intro__left { grid-column: 1 / span 5; align-self: center; }
.intro .figure__media { aspect-ratio: 16 / 9; }
.intro .figure { margin: 0; }
.intro__right { grid-column: 7 / span 6; align-self: center; }

.intro__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-block-end: clamp(20px, 2.4vw, 34px);
}
html[dir="rtl"] .intro__mark { font-weight: 700; line-height: 1.35; letter-spacing: 0; }


.intro__lead {
  margin-block-start: clamp(18px, 2.2vw, 30px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.3vw, 2rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
html[dir="rtl"] .intro__lead {
  font-family: var(--font-ar-body);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
}

.intro { position: relative; overflow: hidden; isolation: isolate; }
.intro::after {
  content: "";
  position: absolute;
  inset-inline-end: -8vw;
  inset-block-end: -22vw;
  width: 44vw;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
  transform: skewX(-13deg);
  pointer-events: none;
  z-index: -1;
}

.visual-carousel,.visual-break{position:relative;height:100svh;min-height:100svh;overflow:hidden;scroll-snap-align:start;background:var(--ink);color:var(--off-white)}.visual-carousel__track,.visual-carousel__slide,.visual-break img{position:absolute;inset:0;width:100%;height:100%}.visual-carousel__slide{margin:0;opacity:0;visibility:hidden;transition:opacity 900ms var(--e-brand),visibility 900ms}.visual-carousel__slide.is-active{opacity:1;visibility:visible}.visual-carousel img,.visual-break img{width:100%;height:100%;object-fit:cover}.visual-carousel__slide::after,.visual-break::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72))}.visual-carousel figcaption,.visual-break figcaption{position:absolute;z-index:2;inset-inline-start:var(--grid-edge);inset-block-end:clamp(24px,5vh,56px);font:600 13px/1.4 var(--font-display);letter-spacing:.12em;text-transform:uppercase}.visual-carousel__toggle{position:absolute;z-index:3;inset-inline-end:var(--grid-edge);inset-block-end:clamp(20px,4vh,48px);min-width:72px;min-height:44px;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.28);color:#fff;cursor:pointer}.visual-break{height:100svh;min-height:100svh}

.campaign-reel::before,.campaign-reel::after{content:"";display:block;position:absolute;z-index:4;inset-inline:0;height:clamp(18px,4.5vh,54px);background:var(--ink);pointer-events:none}
.campaign-reel::before{inset-block-start:0}.campaign-reel::after{inset-block:auto 0 0}
.campaign-reel__frames,.campaign-reel__frame,.campaign-reel__frame img{position:absolute;inset:0;width:100%;height:100%}
.campaign-reel__frame{margin:0;opacity:0;clip-path:inset(0 0 0 6%);transform:scale(1.08) translate3d(1.5%,0,0);transition:opacity 180ms linear,clip-path 520ms var(--e-brand),transform 1.4s var(--e-out)}
.campaign-reel__frame:nth-child(even){transform:scale(1.08) translate3d(-1.5%,0,0)}
.campaign-reel__frame.is-active{opacity:1;clip-path:inset(0);transform:scale(1.015) translate3d(0,0,0)}
.campaign-reel__frame img{object-fit:cover}
.campaign-reel__flash{position:absolute;z-index:3;inset:0;background:var(--red);mix-blend-mode:multiply;opacity:0;pointer-events:none}
.campaign-reel__flash.is-active{animation:campaign-flash 260ms var(--e-out)}
@keyframes campaign-flash{0%{opacity:0}28%{opacity:.34}100%{opacity:0}}
.campaign-reel::before,.campaign-reel::after{display:none}
.campaign-reel__frame,.campaign-reel__frame:nth-child(even){opacity:1;visibility:visible;clip-path:none;transform:translate3d(100%,0,0);transition:transform 900ms var(--e-brand)}
.campaign-reel__frame.is-active{transform:translate3d(0,0,0)}
.campaign-reel__frame.is-before{transform:translate3d(-100%,0,0)}
.campaign-reel__frame img{transform:scale(1.01) translate3d(0,0,0);transition:transform 3.2s linear}
.campaign-reel__frame.is-active img{transform:scale(1.07) translate3d(-1%,0,0)}

/* =========================================================
   03 — BUILT FOR BUSINESS
   ========================================================= */
.business { position: relative; overflow: hidden; isolation: isolate; }
.business::before {
  content: "";
  position: absolute;
  inset-inline-end: -8vw;
  inset-block-start: -22vw;
  width: 44vw;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
  transform: skewX(-13deg);
  pointer-events: none;
  z-index: -1;
}
.business .section__title { grid-column: 1 / -1; margin-block-end: clamp(28px, 4vw, 56px); }

.business__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.cat { grid-column: 1 / span 6; }
.cat__panel { grid-column: 7 / span 6; align-self: center; }

.cat__btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  background: none;
  border: none;
  padding: clamp(14px, 2vw, 26px) 0;
  text-align: start;
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out);
}

.cat__num {
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--grey-mid);
  flex: 0 0 auto;
  order: 2;
  margin-inline-start: auto;
  transition: color var(--d-fast) var(--e-out);
}
.cat__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transition: transform var(--d-fast) var(--e-out);
}
html[dir="rtl"] .cat__label { text-transform: none; letter-spacing: 0; line-height: 1.4; }

.cat__arrow {
  order: 3;
  opacity: 0;
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
html[dir="rtl"] .cat__arrow { transform: scaleX(-1); }

.cat__item.is-active .cat__btn { color: var(--red); }
.cat__item.is-active .cat__num { color: var(--red); }
.cat__item.is-active .cat__label { transform: translateX(8px); }
html[dir="rtl"] .cat__item.is-active .cat__label { transform: translateX(-8px); }
.cat__item.is-active .cat__arrow { opacity: 1; transform: translateX(8px); }
html[dir="rtl"] .cat__item.is-active .cat__arrow { transform: scaleX(-1) translateX(8px); }

.cat__panel .sheet { aspect-ratio: 16 / 9; max-height: 52svh; position: relative; }
.cat__panel .cat__media { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.cat__panel .cat__media[data-active] { opacity: 1; visibility: visible; }
.cat__mobile { display: none; }
.cat__learn {
  display: none;
  margin: -8px 0 18px 48px;
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-underline-offset: 4px;
}
.cat__item.is-active .cat__learn { display: inline-block; }
html[dir="rtl"] .cat__learn { margin-inline-start: 48px; margin-inline-end: 0; }

/* =========================================================
   04 — BUILT FASTER
   ========================================================= */
.faster {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--red);
  color: var(--off-white);
}
.faster::before {
  content: "";
  position: absolute;
  inset-inline-end: -8vw;
  inset-block-start: -8vw;
  width: 44vw;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--lime) 58%, transparent);
  transform: skewX(-13deg);
  pointer-events: none;
  z-index: -1;
}
.faster::after {
  content: "";
  position: absolute;
  inset-inline-start: -18vw;
  inset-block-end: -30vw;
  width: 52vw;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--lime) 34%, transparent);
  transform: skewX(13deg);
  pointer-events: none;
  z-index: -1;
}
.faster .section__title { grid-column: 1 / -1; }

.faster__metric {
  grid-column: 1 / -1;
  margin-block-start: clamp(20px, 3vw, 44px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 13vw, 11rem);
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
  transform-origin: left center;
}
html[dir="rtl"] .faster__metric {
  transform-origin: right center;
  font-weight: 700;
  font-size: clamp(2.6rem, 10vw, 8.5rem);
  line-height: 1.16;
  letter-spacing: 0;
  text-transform: none;
}

.faster__sub {
  grid-column: 1 / -1;
  margin-block-start: 14px;
  font-size: clamp(.78rem, 1.1vw, .95rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--off-white);
}
html[dir="rtl"] .faster__sub { letter-spacing: 0; text-transform: none; font-size: .95rem; }

.adv {
  grid-column: 1 / -1;
  margin-block-start: clamp(32px, 5vw, 76px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.adv__card {
  border: 1px solid rgba(246, 246, 246, .42);
  padding: clamp(18px, 2.2vw, 32px);
  min-height: clamp(140px, 16vw, 220px);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    background var(--d-fast) var(--e-out);
}
.adv__card:hover,
.adv__card:focus-visible,
.adv__card.is-tapped {
  transform: translateY(-6px);
  background: var(--off-white);
  border-color: var(--off-white);
  color: var(--red);
}
.adv__num { font-size: .76rem; letter-spacing: .14em; }
.adv__title {
  margin-block-start: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
html[dir="rtl"] .adv__title { font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.adv__copy { margin-block-start: 10px; font-size: .92rem; }

/* =========================================================
   05 — PROCESS
   ========================================================= */
.process { position: relative; overflow: hidden; isolation: isolate; }
.process::before {
  content: "";
  position: absolute;
  inset-inline-start: -16vw;
  inset-block-end: -24vw;
  width: 48vw;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  transform: skewX(13deg);
  pointer-events: none;
  z-index: -1;
}
.process__left { grid-column: 1 / span 6; align-self: center; min-width: 0; }
.process__right { grid-column: 7 / span 6; min-width: 0; }
.process .section__title {
  max-width: none;
  font-size: clamp(2.5rem, 5.1vw, 4.8rem);
  text-wrap: nowrap;
}
.process .section__title .reveal-mask { overflow: visible; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2vw, 34px);
  padding-block: clamp(12px, 1.8vw, 24px);
}
.step .rule { position: absolute; inset-block-start: 0; inset-inline: 0; }
.step .rule--last { inset-block-start: auto; inset-block-end: 0; }

.step__num {
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--red);
  padding-block-start: .45em;
}
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.6rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
html[dir="rtl"] .step__title { text-transform: none; letter-spacing: 0; line-height: 1.4; }
.step__copy { margin-block-start: 4px; color: var(--grey); max-width: 46ch; font-size: .94rem; text-wrap: pretty; }

/* =========================================================
   06 — START + CONTACT + FOOTER
   ========================================================= */
.sales-slide{position:relative;overflow:hidden}.sales-slide>.grid{width:100%;row-gap:clamp(22px,4vh,48px)}.sales-slide--paper{background:var(--off-white);color:var(--ink)}.sales-slide--ink{background:var(--ink);color:var(--off-white)}.sales-slide--red{background:var(--red);color:var(--off-white)}.sales-slide--red::before{content:"";position:absolute;inset-inline-end:-10vw;inset-block-end:-18vw;width:52vw;aspect-ratio:1;border:1px solid rgba(242,209,61,.52);transform:skewX(-13deg)}.sales-slide__lead{grid-column:1/span 12;display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);align-items:end}.sales-slide__lead .section__title{max-width:11ch}.sales-slide__lead>p{max-width:42ch;font-size:clamp(17px,1.6vw,24px);line-height:1.5}.sales-grid{grid-column:1/span 12;display:grid;grid-template-columns:repeat(3,1fr);border-block-start:1px solid currentColor}.sales-grid article{padding:clamp(20px,3vw,42px) clamp(16px,2vw,30px) 0 0;border-inline-end:1px solid color-mix(in srgb,currentColor 24%,transparent)}.sales-grid article:last-child{border:0}.sales-grid .num{color:var(--red)}.sales-grid h3{margin:clamp(32px,5vh,64px) 0 10px;font:700 clamp(22px,2.2vw,34px)/1.05 var(--font-display)}.sales-grid p{max-width:34ch;color:var(--grey);font-size:16px;line-height:1.6}.scope-list{grid-column:1/span 12;border-block-start:1px solid rgba(246,246,246,.28)}.scope-list li{display:grid;grid-template-columns:72px 1fr;align-items:center;padding:clamp(13px,2vh,22px) 0;border-block-end:1px solid rgba(246,246,246,.2);font:600 clamp(18px,2vw,28px)/1.2 var(--font-display)}.scope-list b{color:var(--red);font:500 13px var(--font-num)}.proof-strip{grid-column:1/span 12;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(246,246,246,.38)}.proof-strip article{min-height:190px;padding:clamp(22px,3vw,42px);display:flex;flex-direction:column;justify-content:space-between;border-inline-end:1px solid rgba(246,246,246,.38)}.proof-strip article:last-child{border:0}.proof-strip strong{font:700 clamp(24px,3vw,44px)/1 var(--font-display)}.proof-strip span{max-width:30ch;line-height:1.55}.answer-grid{grid-column:1/span 12;display:grid;grid-template-columns:repeat(2,1fr);border-block-start:1px solid var(--line)}.answer-grid article{padding:clamp(18px,2.5vw,34px) clamp(18px,3vw,44px) clamp(18px,2.5vw,34px) 0;border-block-end:1px solid var(--line)}.answer-grid article:nth-child(odd){border-inline-end:1px solid var(--line)}.answer-grid article:nth-child(even){padding-inline-start:clamp(18px,3vw,44px)}.answer-grid h3{margin:0 0 10px;font:700 clamp(20px,2vw,30px)/1.1 var(--font-display)}.answer-grid p{max-width:52ch;color:var(--grey);line-height:1.6}.sales-slide__link{grid-column:9/span 4;justify-self:end;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.sales-slide{overflow-x:hidden;overflow-y:auto}.sales-slide--red::before{inset-block-start:24%;inset-block-end:auto}

.start {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--green);
  color: var(--off-white);
  display: flex;
  align-items: center;
}
.start::before {
  content: "";
  position: absolute;
  inset-inline-end: -20vw;
  inset-block-start: -24vw;
  width: 50vw;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--lime) 48%, transparent);
  transform: skewX(-13deg);
  pointer-events: none;
  z-index: -1;
}
.start::after {
  content: "";
  position: absolute;
  inset-inline-start: 8vw;
  inset-block-end: -38vw;
  width: 46vw;
  aspect-ratio: 1;
  border: 1px solid rgba(246, 246, 246, .14);
  transform: skewX(13deg);
  pointer-events: none;
  z-index: -1;
}
.start > .grid { width: 100%; }
.start__left { grid-column: 1 / span 6; }
.start__right { grid-column: 7 / span 6; }

.start__sub {
  margin-block-start: clamp(14px, 2vw, 26px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.55;
  word-break: normal;
  color: rgba(246, 246, 246, .82);
}
html[dir="rtl"] .start__sub { font-weight: 400; }

.form__wrap { position: relative; overflow: hidden; }
.form { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  opacity: 0;
  pointer-events: none;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field { display: grid; gap: 6px; }
.field--split { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.field__sub { display: grid; gap: 6px; }
.field[hidden] { display: none; }

.field__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(.88rem, 1vw, 1rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246, 246, 246, .74);
  transition: transform var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
html[dir="rtl"] .field__label { letter-spacing: 0; text-transform: none; font-size: clamp(.95rem, 1.05vw, 1.08rem); }

.field__label.is-focus { color: var(--off-white); transform: translateX(5px); }
html[dir="rtl"] .field__label.is-focus { transform: translateX(-5px); }

.field__num { color: var(--lime); }
.field__opt { text-transform: lowercase; letter-spacing: .04em; opacity: .55; }

.field__control { position: relative; }
.field__control .rule {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  opacity: .38;
  transition: background var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out);
}
.field__control.is-focus .rule { background: var(--red); opacity: 1; }
.field__control.is-error .rule { background: #FFB4A8; opacity: 1; }

.field__input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 0;
  color: var(--off-white);
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.55;
}
.field__input:focus { outline: none; }
textarea.field__input { resize: vertical; min-height: 2.6em; }

select.field__input { appearance: none; cursor: pointer; padding-inline-end: 32px; }
select.field__input option { background: var(--green); color: var(--off-white); }

.field__arrow {
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 8px;
  pointer-events: none;
  opacity: .6;
  transition: transform var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out);
}
.field__control.is-focus .field__arrow { transform: rotate(90deg); opacity: 1; }
html[dir="rtl"] .field__arrow { transform: scaleX(-1); }
html[dir="rtl"] .field__control.is-focus .field__arrow { transform: scaleX(-1) rotate(90deg); }

.field__error { font-size: .92rem; line-height: 1.5; color: #FFB4A8; }
.field__hint { margin-block-start: -6px; font-size: .92rem; line-height: 1.5; color: rgba(246, 246, 246, .82); }
.field__error--contact { margin-block-start: -6px; }
.field__error--server { max-width: 52ch; }
.btn[disabled] { cursor: wait; opacity: .65; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[dir="rtl"] .btn { letter-spacing: 0; text-transform: none; }

.btn--cta {
  justify-self: start;
  background: var(--red);
  color: var(--off-white);
  padding: clamp(13px, 1.5vw, 18px) clamp(22px, 2.6vw, 34px);
  font-size: clamp(.84rem, 1.1vw, 1rem);
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.btn--cta:hover { background: var(--off-white); color: var(--red); }
.btn--cta:hover .arrow { transform: translateX(10px); }
html[dir="rtl"] .btn--cta:hover .arrow { transform: scaleX(-1) translateX(10px); }

.form__success-rule {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform-origin: left center;
  margin-block-end: 20px;
}
html[dir="rtl"] .form__success-rule { transform-origin: right center; }
.js .form__success-rule { transform: scaleX(0); }

.form__success-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-block-end: 10px;
}
html[dir="rtl"] .form__success-title { font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.form__success p { color: rgba(246, 246, 246, .8); }

/* CONTACT band */
.contact {
  background: var(--green);
  color: var(--off-white);
  border-block-start: 1px solid rgba(246, 246, 246, .18);
  padding-block: clamp(18px, 2.4vw, 30px);
}
.contact__list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 48px);
  font-size: .86rem;
  letter-spacing: .06em;
}
.contact__list a { position: relative; display: inline-block; }
.contact__list address { max-width: 44ch; font-style: normal; line-height: 1.45; }
.contact__list a::after {
  content: "";
  position: absolute;
  inset-block-end: -3px;
  inset-inline: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-fast) var(--e-out);
}
html[dir="rtl"] .contact__list a::after { transform-origin: right center; }
.contact__list a:hover::after { transform: scaleX(1); }

/* FOOTER */
/* The footer component now lives in css/footer.css (shared with subpages).
   Only landing-specific footer overrides remain in this file. */

/* Landing only: js/motion.js reveals the mark, so it starts hidden. */
.js .footer__logo-link { opacity: 0; }
.footer__logo-outline { fill: currentColor; stroke: none; }

.footer__audience{grid-column:1/-1;padding-block:24px;border-block:1px solid rgba(246,246,246,.22)}.footer__audience h2{margin:0 0 18px;color:var(--yellow);font:600 13px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase}.footer__audience>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.footer__audience a{min-height:52px;display:flex;align-items:center;padding:10px 18px 10px 0;border-bottom:1px solid rgba(246,246,246,.13);font-size:16px;text-decoration:none;transition:color var(--d-fast) var(--e-out)}.footer__audience a:hover{color:var(--red)}html[dir="rtl"] .footer__audience h2{letter-spacing:0;text-transform:none}html[dir="rtl"] .footer__audience a{padding-inline:0 18px}
@media(max-width:1024px){.footer__audience>div{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.footer__audience>div{grid-template-columns:1fr}.footer__audience a{min-height:48px;padding-inline:0}.footer__audience h2{font-size:14px}}

.footer__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  padding-block-start: 14px;
  border-block-start: 1px solid rgba(246, 246, 246, .22);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-light);
}
html[dir="rtl"] .footer__meta { letter-spacing: 0; text-transform: none; }
.footer__meta>p{margin:0;white-space:nowrap}.footer__legal-links{display:flex;gap:8px;flex-wrap:nowrap}.footer__legal-links button{padding:0;border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;text-transform:inherit;letter-spacing:inherit}.footer__meta a,.footer__credit a{text-decoration:underline;text-underline-offset:4px}.footer__credit{color:var(--yellow)}

/* =========================================================
   Tablet — 8 columns
   ========================================================= */
@media (max-width: 1024px) {

  .logo-slot--hero { grid-column: 1 / -1; }
  .hero__title, html[dir="rtl"] .hero__title { grid-column: 1 / span 8; }

  .intro__left { grid-column: 1 / span 4; }
  .intro__right { grid-column: 5 / span 4; }

  .business__body { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cat { grid-column: 1 / span 4; }
  .cat__panel { grid-column: 5 / span 4; }

  .process__left { grid-column: 1 / span 8; margin-block-end: clamp(20px, 3vw, 40px); }
  .process__right { grid-column: 1 / span 8; }

  .start__left { grid-column: 1 / span 8; margin-block-end: clamp(24px, 3vw, 40px); }
  .start__right { grid-column: 1 / span 8; }
  .sales-slide__lead{grid-template-columns:1fr}.sales-slide__lead,.sales-grid,.scope-list,.proof-strip,.answer-grid{grid-column:1/span 8}.sales-slide__link{grid-column:5/span 4}

  .footer__brand { grid-column: 1 / span 8; }
  .footer__nav--services{grid-column:1/span 4}.footer__nav--services ul{grid-template-columns:1fr}.footer__nav--resources{grid-column:5/span 4}.footer__contact{grid-column:1/span 8}
}

/* =========================================================
   Mobile — 4 columns. Not a shrunk desktop.
   ========================================================= */
@media (max-width: 720px) {
  :root { --chapter-pad: clamp(56px, 8vh, 88px); }

  html { scroll-snap-type: y proximity; }

  /* no idle field motion on mobile */
  .hero__shift, .hero__grain { animation: none; }
  .hero__grain { opacity: .1; }

  /* Every chapter remains one screen. Dense content scrolls inside its
     own chapter instead of changing the slide rhythm. */
  .section, .hero { height: 100svh; min-height: 100svh; overflow-y: auto; scrollbar-width: thin; }

  /* The whole ending remains one screen and one scroll-snap item. */
  .chapter--end { height:auto;min-height:100svh;overflow:visible;justify-content:flex-end }
  .chapter--end .start,.chapter--end .footer{height:auto;min-height:0;flex:0 0 auto;overflow:visible}
  .chapter--end .start { padding-block: 88px 48px; }
  .sales-slide>.grid{align-content:center}.sales-slide__lead,.sales-grid,.scope-list,.proof-strip,.answer-grid{grid-column:1/-1}.sales-slide__lead .section__title{font-size:clamp(2rem,10vw,2.7rem)}.sales-slide__lead>p{font-size:16px}.sales-grid,.proof-strip{grid-template-columns:1fr}.sales-grid article,.proof-strip article{min-height:0;padding:14px 0;border-inline-end:0;border-block-end:1px solid color-mix(in srgb,currentColor 24%,transparent)}.sales-grid h3{margin:10px 0 5px;font-size:20px}.sales-grid p{font-size:15px}.proof-strip article{gap:10px}.proof-strip strong{font-size:24px}.scope-list li{grid-template-columns:42px 1fr;font-size:17px;padding:12px 0}.answer-grid{grid-template-columns:1fr}.answer-grid article,.answer-grid article:nth-child(even){padding:13px 0;border-inline-end:0}.answer-grid h3{font-size:19px}.answer-grid p{font-size:14px;line-height:1.5}.sales-slide__link{grid-column:1/-1;justify-self:start}

  .hero { --margin: 6vw; }
  .hero::before {
    inset-inline-end: -34vw;
    inset-block-start: auto;
    inset-block-end: 8vh;
    width: 92vw;
  }
  .hero::after {
    inset-inline-start: -34vw;
    inset-block-start: 8vh;
    width: 92vw;
  }
  .preloader__pattern-piece{width:92vw}
  .preloader__pattern-piece--end{inset-inline-end:-34vw;inset-block-end:8vh;transform:translate(-20vw,-18vh) scale(.62) skewX(-13deg)}
  .preloader__pattern-piece--start{inset-inline-start:-34vw;inset-block-start:8vh;transform:translate(20vw,18vh) scale(.62) skewX(13deg)}
  .preloader__pattern.is-settled .preloader__pattern-piece--end{transform:skewX(-13deg)}
  .preloader__pattern.is-settled .preloader__pattern-piece--start{transform:skewX(13deg)}
  .logo-slot--hero, .hero__title, html[dir="rtl"] .hero__title { grid-column: 1 / -1; }

  .intro__left, .intro__right { grid-column: 1 / -1; }
  .intro__right { margin-block-start: clamp(24px, 6vw, 40px); }
  .visual-carousel,.visual-break{height:100svh;min-height:100svh}.visual-carousel figcaption,.visual-break figcaption{inset-inline-start:var(--margin);max-width:55vw}.visual-carousel__toggle{inset-inline-end:var(--margin)}
  .intro::after {
    inset-inline-end: -34vw;
    inset-block-end: -46vw;
    width: 92vw;
  }

  .business__body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .business::before {
    inset-inline-end: -34vw;
    inset-block-start: -46vw;
    width: 92vw;
  }
  .faster::before {
    inset-inline-end: -34vw;
    inset-block-start: 8vh;
    width: 92vw;
  }
  .faster::after {
    inset-inline-start: -52vw;
    inset-block-end: -58vw;
    width: 108vw;
  }
  .cat { grid-column: 1 / -1; }
  .cat__panel { display: none; }

  .cat__mobile { display: block; overflow: hidden; height: 0; }
  .cat__learn { margin-inline-start: 0; min-height: 44px; align-items: center; }
  .cat__item.is-active .cat__learn { display: inline-flex; }
  .cat__mobile .cat__media { aspect-ratio: 16 / 9; margin-block-end: 18px; }
  .cat__item.is-active .cat__label { transform: none; }
  .cat__item.is-active .cat__arrow { transform: none; }
  html[dir="rtl"] .cat__item.is-active .cat__arrow { transform: scaleX(-1); }

  .adv { grid-template-columns: 1fr; }
  .adv__card { min-height: 0; }
  .adv__card:hover { transform: none; }

  .process__left, .process__right,
  .start__left, .start__right,
  .footer__brand, .footer__contact { grid-column: 1 / -1; }
  /* Two link columns on phones — one column turned the footer into a scroll. */
  .footer__nav--services { grid-column: 1 / span 2; }
  .footer__nav--resources { grid-column: 3 / span 2; }
  .footer__nav--services ul { grid-template-columns: 1fr; }

  .process::before {
    inset-inline-start: -48vw;
    inset-block-end: -50vw;
    width: 104vw;
  }
  .start::before {
    inset-inline-end: -52vw;
    inset-block-start: -48vw;
    width: 108vw;
  }
  .start::after {
    inset-inline-start: -58vw;
    inset-block-end: -68vw;
    width: 112vw;
  }

  .field--split { grid-template-columns: 1fr; }
  .form { gap: 20px; }
  .field__input { min-height: 44px; font-size: 16px; }
  textarea.field__input { min-height: 76px; }
  .field__control .rule { opacity: .58; }
  .btn--cta { justify-self: stretch; justify-content: center; }

  .contact__list { display: grid; gap: 4px; font-size: .82rem; }
  .contact__list address { margin-block: 8px; }
  .footer { padding-block-start: 34px; }
  .footer__logo { width: min(132px, 42vw); }
  .footer__nav ul { gap: 4px 18px; }
  .footer__meta { flex-direction: column; }.footer__meta>p{white-space:normal}.footer__legal-links{flex-wrap:wrap}.footer__credit{text-align:start}
}

@media (max-width: 380px) {
  .site-header { padding-inline: 20px; gap: 12px; }
  .logo-slot--header { width: 108px; }
  .lang-toggle { padding-inline: 10px; }
  .sm__toggle { gap: 8px; }
  .hero__title { font-size: clamp(2.45rem, 13vw, 3.2rem); }
  .section__title { font-size: clamp(2rem, 10vw, 2.7rem); }
  .process .section__title { font-size: clamp(1.95rem, 9.4vw, 2.45rem); }
  .adv__card { padding: 18px; }
}

/* =========================================================
   Reduced motion — everything rests immediately.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal],
  .js [data-foot],
  .js .adv__card,
  .js .step__num,
  .js .step__title,
  .js .step__copy,
  .js .nav__item,
  .js .footer__logo-link { opacity: 1 !important; }
  .js [data-clip] .reveal-text { transform: none !important; opacity: 1 !important; }
  .js .rule,
  .js .form__success-rule { transform: scaleX(1) !important; }
  .js .sheet { clip-path: none !important; }
  .preloader { display: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .preloader, .site-header, .brand, .nav-toggle, .lang-toggle { display: none !important; }
  .section, .chapter, .hero { min-height: 0; }
  body { background: #fff; color: #000; }
}

/* =========================================================
   CHAPTER MARKERS
   A small index label above each heading, sitting on the same
   grid column as the heading. Gives the page an editorial
   spine and tells you where you are without a nav highlight.
   ========================================================= */
.mark {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin-block-end: clamp(14px, 1.8vw, 26px);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--grey-mid);
}
html[dir="rtl"] .mark { letter-spacing: .06em; text-transform: none; font-size: .76rem; }

.mark--wide { grid-column: 1 / -1; }
.mark__i { color: var(--red); flex: 0 0 auto; }
.mark__r {
  flex: 1 1 auto;
  max-width: clamp(28px, 5vw, 76px);
  height: 1px;
  background: currentColor;
  opacity: .35;
  transform-origin: left center;
}
html[dir="rtl"] .mark__r { transform-origin: right center; }
.js .mark__r { transform: scaleX(0); }

.mark--invert { color: var(--off-white); }
.faster .mark--invert { color: var(--off-white); }
.mark--invert .mark__i { color: var(--off-white); }
.faster .mark--invert .mark__i { color: var(--lime) !important; }
.fast-word{display:inline-block;white-space:nowrap;word-break:keep-all;color:var(--yellow);transform-origin:center}

/* =========================================================
   DETAIL LAYER
   The things that separate a build from a finished object.
   ========================================================= */

/* brand-consistent selection, never the browser default blue */
::selection { background: var(--red); color: var(--off-white); }
.faster ::selection { background: var(--off-white); color: var(--red); }

/* optical sizing + real kerning on display type */
.section__title, .hero__title, .faster__metric,
.cat__label, .adv__title, .form__success-title {
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* no grey flash on tap, no text selection on controls */
a, button, select, .cat__btn, .adv__card {
  -webkit-tap-highlight-color: transparent;
}
.cat__btn, .adv__card, .nav__link, .btn { user-select: none; }

/* scrollbar picks up the brand instead of the OS default */
html { scrollbar-color: var(--grey-mid) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--grey-light); }
::-webkit-scrollbar-thumb:hover { background: var(--grey-mid); }

/* hairlines stay 1 device pixel on retina */
@media (min-resolution: 2dppx) {
  .rule, .mark__r { height: .5px; }
}

/* the empty image slot is a material panel, with a hairline frame
   that reads as drawing rather than as a missing asset */
/* hairline frame only shows on a slot that has no image yet */
.cat__media:not(:has(img))::after {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.4vw, 20px);
  border: 1px solid rgba(246, 246, 246, .16);
  pointer-events: none;
}

/* category rows: the whole row responds, not just the label */
.cat__item { position: relative; }
.cat__item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--gutter) * -.5);
  background: currentColor;
  opacity: 0;
  transform: scaleY(.4);
  transform-origin: center;
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
  pointer-events: none;
}
.cat__item.is-active::before { opacity: .035; transform: scaleY(1); }

/* the active category number steps up in weight */
.cat__num { transition: color var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out); opacity: .7; }
.cat__item.is-active .cat__num { opacity: 1; }

/* form fields read as filled once they hold a value */
.field__input:not(:placeholder-shown),
.field__input:valid { color: var(--off-white); }

/* keyboard focus is always visible, and always on-brand */
.nav__link:focus-visible,
.contact__list a:focus-visible,
.footer__nav a:focus-visible { outline-offset: 5px; }

/* =========================================================
   ARABIC TYPOGRAPHY GUARD

   Arabic is a joined script. Positive letter-spacing pulls the
   glyphs apart and breaks the connections, and text-transform
   does nothing but cost a repaint. Both are cleared globally
   for RTL; the `.num` class opts Latin figures back in, since
   those are still set in the Latin display face.
   ========================================================= */
html[dir="rtl"] :where(
  h1, h2, h3, p, a, span, li, label, button, select, input, textarea,
  .mark, .nav__link, .cat__label, .adv__title, .adv__copy, .step__title,
  .step__copy, .field__label, .field__opt, .btn, .contact__list,
  .footer__nav, .footer__tag, .footer__meta, .figure__cap,
  .faster__sub, .faster__metric, .start__sub, .intro__lead,
  .form__success-title, .preloader__count, .section__title, .hero__title
) {
  letter-spacing: 0;
  text-transform: none;
}

/* Latin figures keep their tracking — they are still Montserrat-shaped
   numerals sitting inside Arabic copy. */
html[dir="rtl"] .num { letter-spacing: .08em; }
html[dir="rtl"] .preloader__count .num { letter-spacing: .22em; }

/* Arabic needs more room between the label and its rule, and a touch
   more leading everywhere text wraps. */
html[dir="rtl"] .mark { gap: clamp(12px, 1.4vw, 20px); }
html[dir="rtl"] .step__copy,
html[dir="rtl"] .adv__copy,
html[dir="rtl"] .form__success p { line-height: 1.75; }

/* Alexandria sits high in its em box — the clip mask needs more
   headroom in Arabic or descenders get shaved. */
html[dir="rtl"] .reveal-mask { padding-block: .18em; margin-block: -.18em; }

/* the select caret and the CTA arrow both point with the language */
html[dir="rtl"] select.field__input { padding-inline-end: 0; padding-inline-start: 32px; }

/* =========================================================
   INTERFACE DETAILS
   Small things that compound. Every value below is drawn from
   the tokens already defined at the top of this file — no new
   palette, no second styling system.
   ========================================================= */

/* ---- Skip link: first tab stop, invisible until focused ---- */
.skip-link {
  position: fixed;
  inset-block-start: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--off-white);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus-visible { transform: none; outline-offset: 2px; }

/* ---- Text wrapping: balance headings, pretty for prose ---- */
.section__title,
.hero__title,
.intro__mark,
.faster__metric,
.cat__label,
.adv__title,
.step__title,
.form__success-title { text-wrap: balance; }

.intro__lead,
.start__sub,
.adv__copy,
.step__copy,
.faster__sub,
.figure__cap,
.field__error,
.form__success p { text-wrap: pretty; }

/* Editorial wrapping: headings keep intentional phrases together while
   reading copy avoids isolated final words across both languages. */
:where(.hero__title,.section__title,.intro__mark,.adv__title,.step__title,
  .form__success-title,.footer__tag){text-wrap:balance;overflow-wrap:normal;word-break:normal}
:where(.intro__lead,.faster__sub,.adv__copy,.step__copy,.start__sub,
  .footer__about,.footer__contact,.contact__list,.form__success p){text-wrap:pretty;overflow-wrap:anywhere}
.reveal-mask{inline-size:100%}

/* Cap the measure so the lead never runs past a comfortable line. */
.intro__lead { max-width: 24ch; }

/* ---- Images: a hairline outline gives depth on any background ---- */
.figure__media img,
.cat__media img {
  outline: 1px solid rgba(0, 0, 0, .1);
  outline-offset: -1px;
}

/* ---- Optical alignment: the arrow needs less room than the text ---- */
.btn--cta { padding-inline-end: clamp(18px, 2.2vw, 28px); }
.nav__cta { padding-inline-end: 16px; }

/* ---- Hit areas: 44px minimum wherever a finger is involved ---- */
@media (pointer: coarse) {
  .nav__link,
  .lang-toggle,
  .contact__list a,
  .footer__nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .cat__btn { min-height: 56px; }
}

/* ---- Retired chrome leaves the tab order, not just the screen ---- */
.site-header.is-hidden,
.brand.is-hidden { visibility: hidden; }

/* ---- Form focus: the rule colour alone is not an indicator ---- */
.field__control:focus-within {
  outline: 2px solid var(--lime);
  outline-offset: 6px;
}

/* =========================================================
   TEXT EFFECTS
   Support styles for js/text-effects.js. Colours come from the
   tokens above; nothing here introduces a new palette.
   ========================================================= */
.fx-part { display: inline-block; will-change: auto; }
.fx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ShinyText: the sweep. Paused for reduced motion by the JS. */
.fx-shiny { display: inline-block; }
@keyframes fx-shine {
  from { background-position: 150% center; }
  to   { background-position: -50% center; }
}

/* TextPressure: glyphs must be free to change width without reflowing
   the line, and the variable axis needs an explicit starting weight. */
.fx-pressure .fx-part {
  font-variation-settings: 'wght' 700;
  transition: none;
}

/* RotatingText: a fixed-height slot so the line never jumps as words
   of different lengths cycle through it. */
.fx-slot {
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: max-content;
  min-inline-size: max-content;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--lime);
}
.fx-rotate { display: inline-flex; inline-size: max-content; white-space: nowrap; }
.fx-part--joined { display: inline-block; inline-size: max-content; white-space: nowrap; word-break: keep-all; letter-spacing: 0; }
html[dir="rtl"] .start__sub { direction: rtl; }

@media (prefers-reduced-motion: reduce) {
  .fx-shiny { animation: none !important; background-position: 100% center !important; }
  .fx-part { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* =========================================================
   STAGGERED MENU — phone and tablet (≤1024px)

   Vanilla port of the React Bits StaggeredMenu. Two brand sheets
   slide in ahead of the panel, then the items rise into place.
   The desktop navigation above is untouched; this takes over
   only where the inline bar stops fitting.
   ========================================================= */
.sm__prelayers,
.sm__socials { display: none; }

.sm__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 10px 0;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[dir="rtl"] .sm__toggle { letter-spacing: 0; text-transform: none; font-family: var(--font-body); }

.sm__toggle-text { display: block; height: 1em; overflow: hidden; }
.sm__toggle-reel { display: flex; flex-direction: column; }
.sm__toggle-line { display: block; height: 1em; line-height: 1; white-space: nowrap; }

.sm__icon { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.sm__icon-line {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.sm__icon-line--v { transform: rotate(90deg); }

@media (max-width: 1024px) {
  .sm__toggle { display: inline-flex; }
  .header-actions { display: contents; }
  .header-project { display: none; }
  .nav__item--mobile-cta { display: block; }
  .lang-toggle { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
  .sm__toggle { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav { margin-inline-start: 0; }

  /* The panel itself */
  .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(100%, 460px);
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    align-self: stretch;
    justify-self: stretch;
    background: var(--off-white);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 5vh, 48px);
    padding: clamp(88px, 12vh, 132px) var(--margin) clamp(32px, 5vh, 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 10;
    transform: translateX(100%);
  }
  html[dir="rtl"] .nav { transform: translateX(-100%); }

  .sm__prelayers {
    display: block;
    position: fixed;
    inset-block-start: 0;
    inset-block-end: auto;
    inset-inline-end: 0;
    width: min(100%, 460px);
    height: 100dvh;
    min-height: 100svh;
    pointer-events: none;
    z-index: 9;
  }
  .sm__prelayer {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
  }
  html[dir="rtl"] .sm__prelayer { transform: translateX(-100%); }
  .sm__prelayer--1 { background: var(--green); }
  .sm__prelayer--2 { background: var(--red); }

  /* Items */
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(4px, 1.4vh, 12px);
    counter-reset: smItem;
  }
  .nav__item { overflow: hidden; }

  .nav__link {
    position: relative;
    display: block;
    padding-block: clamp(6px, 1.2vh, 12px);
    padding-inline-end: 2.2em;
    font-size: clamp(2rem, 7vw, 3rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.03em;
    text-transform: uppercase;
  }
  html[dir="rtl"] .nav__link {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
  }
  .nav__link::after { content: none; }
  .nav__link:hover { color: var(--red); }

  /* Numbering, revealed with the items */
  .nav__list[data-numbering] .nav__link::before {
    counter-increment: smItem;
    content: counter(smItem, decimal-leading-zero);
    position: absolute;
    inset-block-start: .55em;
    inset-inline-end: 0;
    font-family: var(--font-num);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--red);
    opacity: var(--sm-num-opacity, 0);
  }

  /* The CTA keeps its block treatment, sized for the panel */
  .nav__cta {
    margin-block-start: clamp(10px, 2vh, 20px);
    padding: 16px 20px;
    font-size: clamp(.9rem, 3.4vw, 1.05rem);
    text-align: start;
  }
  .nav__cta::before { content: none !important; }

  /* Socials */
  .sm__socials { display: block; margin-block-start: auto; }
  .sm__socials-title {
    margin-block-end: 12px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red);
  }
  html[dir="rtl"] .sm__socials-title { letter-spacing: 0; text-transform: none; font-size: .8rem; }
  .sm__socials-list { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .sm__social {
    font-size: .9rem;
    letter-spacing: .04em;
    border-block-end: 1px solid transparent;
    transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
  }
  .sm__social:hover { color: var(--red); border-block-end-color: currentColor; }

  /* While the panel is open the header must sit above the fixed logo */
  .site-header.nav-open { z-index: 120; }
  .site-header.nav-open .sm__toggle { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .sm__prelayer { transition: none !important; }
  .nav__list[data-numbering] .nav__link::before { opacity: 1 !important; }
}

/* Legibility floor: display type stays bold; functional text stays readable. */
.mark,.mark__i,.figure__cap,.cat__num,.adv__num,.step__num,
.field__opt,.faster__sub {
  font-size: max(13px, .8rem);
}
.mark,.mark__i{font-size:clamp(22px,1.8vw,29px);font-weight:600;line-height:1.35}
html[dir="rtl"] .mark{font-size:clamp(23px,1.9vw,30px);font-weight:600;letter-spacing:0}
.sales-slide__lead .section__title{font-size:clamp(2.25rem,4.5vw,4.25rem);line-height:1.02}
html[dir="rtl"] .sales-slide__lead .section__title{font-size:clamp(2.15rem,4vw,3.8rem);line-height:1.22}
html[dir="rtl"] .process .section__title{font-size:clamp(1.85rem,3.5vw,3.25rem);line-height:1.25}
.sales-grid .num{display:block;color:var(--red);font-size:clamp(30px,3.2vw,52px);font-weight:600;line-height:1;letter-spacing:-.04em}
.nav__link,.cat__learn,.contact__list,.footer__tag,.footer__nav a,
.footer__meta,.sm__social,.sm__socials-title { font-size: max(14px, .875rem); }
.adv__copy,.step__copy,.form__success p { font-size: max(16px, 1rem); line-height: 1.6; }
.field__input { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.55; }
.btn--cta { font-size: max(15px, .94rem); min-height: 48px; }

/* North Coast summer pitch: one viewport, image and copy on the 12-column rhythm. */
.hero__statement{grid-column:3/span 8;grid-row:3;justify-self:center;max-width:64ch;margin:0;text-align:center;color:rgba(246,246,246,.8);font-size:clamp(16px,1.3vw,21px);line-height:1.55}
html[dir="rtl"] .hero__statement{font-family:var(--font-ar-body);font-size:clamp(17px,1.35vw,22px);line-height:1.75}
.hero__cta{white-space:nowrap}
.hero__cta{grid-column:5/span 4;grid-row:4;justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:13px 22px;background:transparent;border:1.5px solid var(--yellow);color:var(--yellow);font-weight:700;text-align:center;transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out)}.hero__cta:hover{background:var(--yellow);color:var(--ink);transform:translateY(3px)}.hero__cta .arrow{transform:rotate(90deg)}
.coast-slide{min-height:100svh;display:grid;grid-template-columns:7fr 5fr;background:var(--red);color:var(--off-white);overflow:hidden}
.coast-slide__media{margin:0;min-height:100svh;overflow:hidden}
.coast-slide__media img{width:100%;height:100%;object-fit:cover}
.coast-slide__copy{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(40px,6vw,96px) clamp(24px,5vw,80px);overflow:hidden}
.coast-slide__copy::before{content:"";position:absolute;inset-inline-end:-18vw;inset-block-start:-18vw;width:52vw;aspect-ratio:1;border:1px solid rgba(242,209,61,.7);transform:skewX(-13deg);pointer-events:none}
.coast-slide__eyebrow{position:relative;margin:0 0 auto;font:600 12px/1 var(--font-num);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.coast-slide__copy h2{position:relative;max-width:9ch;margin:0 0 24px;font:800 clamp(42px,5vw,78px)/.94 var(--font-display);letter-spacing:-.035em}
.coast-slide__copy>p:not(.coast-slide__eyebrow){position:relative;max-width:37ch;margin:0 0 28px;font-size:clamp(16px,1.35vw,21px);line-height:1.55}
.coast-slide__copy>a{position:relative;align-self:flex-start;padding-block:8px;border-block-end:1px solid currentColor;font-weight:700}
.coast-slide__copy>a:hover{color:var(--yellow)}
html[dir="rtl"] .coast-slide__copy h2{font-family:var(--font-ar-display);line-height:1.18;letter-spacing:0}
html[dir="rtl"] .coast-slide__copy>p{font-family:var(--font-ar-body);line-height:1.75}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .mark,.mark__i,.figure__cap,.cat__num,.adv__num,.step__num,
  .field__opt,.faster__sub {
    font-size: 13px;
    letter-spacing: .1em;
  }
  .mark,.mark__i,html[dir="rtl"] .mark{font-size:22px;line-height:1.35}
  .sales-slide__lead .section__title,html[dir="rtl"] .sales-slide__lead .section__title{font-size:clamp(2rem,9vw,2.4rem);line-height:1.2}
  html[dir="rtl"] .process .section__title{font-size:clamp(1.7rem,7.8vw,2.05rem);line-height:1.3}
  .sales-grid .num{font-size:30px}
  .field__label,html[dir="rtl"] .field__label{font-size:17px;line-height:1.5}
  .field__hint,.field__error{font-size:15px;line-height:1.5}
  .field__input{font-size:18px}
  .contact__list,.footer__meta { font-size: 14px; line-height: 1.6; }
  .hero__statement{grid-column:1/-1;font-size:16px;line-height:1.55}
  .hero__cta{grid-column:1/-1;min-height:48px;padding:11px 20px}
  .coast-slide{grid-template-columns:1fr;grid-template-rows:55svh 45svh}
  .coast-slide__media{min-height:0}
  .coast-slide__copy{padding:18px var(--margin)}
  .coast-slide__copy h2{max-width:none;margin-block-end:8px;font-size:clamp(29px,8.5vw,38px)}
  .coast-slide__copy>p:not(.coast-slide__eyebrow){margin-block-end:8px;font-size:14px;line-height:1.45}
  .coast-slide__copy>a{font-size:14px;padding-block:5px}
  .coast-slide__eyebrow{margin-block-end:auto}
}

/* 14px Major Third type system, rounded to the 2px grid. */

body{font-size:var(--type-body);line-height:1.5;letter-spacing:0}
html[dir="rtl"] body{line-height:1.5}
.hero__title{font-size:var(--type-h1)!important;line-height:1.2!important;letter-spacing:-.02em!important}
.section__title,.intro__mark{font-size:var(--type-h2)!important;line-height:1.2!important;letter-spacing:-.02em!important}
.adv__title,.step__title,.sales-grid h3,.answer-grid h3,.form__success-title{font-size:var(--type-h3)!important;line-height:1.2!important;letter-spacing:-.02em!important}
h4{font-size:var(--type-h4);line-height:1.2;letter-spacing:-.02em}h5{font-size:var(--type-h5);line-height:1.2;letter-spacing:-.02em}h6{font-size:var(--type-h6);line-height:1.2;letter-spacing:-.02em}
.mark,.mark__i{font-size:var(--type-h6)!important;line-height:1.2!important}.figure__cap,.field__opt{font-size:var(--type-small)!important}.intro__lead,.hero__statement,.sales-slide__lead>p,.sales-grid p,.answer-grid p,.adv__copy,.step__copy,.faster__sub,.start__sub,.footer__about{line-height:1.5;letter-spacing:0}
html[dir="rtl"] :is(.hero__title,.section__title,.intro__mark,.adv__title,.step__title,.sales-grid h3,.answer-grid h3,h4,h5,h6){letter-spacing:0!important}
@media(max-width:720px){.field__input{font-size:16px!important}}

/* Responsive rebuild: 8-column tablet / 4-column phone. */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .site-header { padding-inline: var(--margin); min-height: 72px; }
  .logo-slot--header { width: clamp(150px, 25vw, 220px); }
  .hero__statement { grid-column: 2 / span 6; }
  .lang-toggle, .sm__toggle { min-width: 44px; min-height: 44px; }
  .nav, .sm__prelayers { width: min(100%, 520px); }
}

@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: clip; }
  html { scroll-snap-type: y proximity; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: var(--margin); }

  /* Text-heavy chapters grow naturally. Visual beats remain full-screen. */
  .section, .chapter { height: auto; min-height: 100svh; overflow: visible; }
  .hero, .visual-carousel, .visual-break, .coast-slide { height: 100svh; min-height: 100svh; overflow: hidden; }
  .chapter--end { height: auto; min-height: 100svh; overflow: visible; }
  .chapter--end .start, .chapter--end .footer { height: auto; min-height: 0; overflow: visible; }

  .site-header { min-height: 68px; padding-block: 10px; padding-inline: var(--margin); gap: 8px; }
  .logo-slot--header { width: clamp(48px, 15vw, 64px); aspect-ratio: 20.56 / 13.22; }
  .brand.is-landed .brand__svg { display: none; }
  .brand.is-landed .brand__compact-mark {
    display: block;
    width: 100%;
    aspect-ratio: 20.56 / 13.22;
    background: var(--red);
    -webkit-mask: url("../assets/icons/favicon.svg") center / contain no-repeat;
    mask: url("../assets/icons/favicon.svg") center / contain no-repeat;
  }
  .brand.is-landed.on-dark .brand__compact-mark { background: var(--off-white); }
  .lang-toggle { padding-inline: 9px; font-size: 12px; }
  .sm__toggle { padding: 0; }
  .sm__toggle-text { display: none; }
  .sm__icon { width: 22px; height: 22px; flex-basis: 22px; }

  .nav, .sm__prelayers { width: 100%; }
  .nav { justify-content: flex-start; gap: 20px; padding: max(88px, 12svh) var(--margin) max(24px, env(safe-area-inset-bottom)); }
  .nav__list { gap: 2px; }
  .site-header.nav-open .nav__item { opacity: 1; }
  .nav__link { min-height: 44px; display: flex; align-items: center; padding-block: 6px; font-size: clamp(1.65rem, 8vw, 2.35rem); line-height: 1.08; }
  html[dir="rtl"] .nav__link { font-family: var(--font-ar-display); line-height: 1.28; }
  .nav__cta { background: var(--yellow); color: var(--ink); padding: 13px 16px; }

  /* Desktop teasers stay on one line; phone teasers form a balanced pair. */
  .preloader__teaser { display: grid; padding-inline: var(--margin); }
  .preloader__teaser-line {
    display: block;
    width: min(88vw, 19ch);
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(1.45rem, 7vw, 2.35rem);
    line-height: 1.12;
  }
  html[dir="rtl"] .preloader__teaser-line { width: min(88vw, 16ch); line-height: 1.38; }

  .hero__cta {
    width: 100%;
    min-height: 52px;
    padding: 13px 18px;
    background: transparent;
    color: var(--yellow);
    border: 1.5px solid var(--yellow);
  }
  .hero__cta:hover { background: var(--yellow); color: var(--ink); }

  :where(h1,h2,h3,h4,h5,h6,p,a,button,label,li,address) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .footer { padding-block: 48px max(24px, env(safe-area-inset-bottom)); }
  .footer__logo { width: 52px; }
  .footer .grid { row-gap: 34px; }
  .footer__socials { gap: 10px; }
  .footer__social { width: 44px; height: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .footer__social span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .footer__social svg { width: 23px; height: 23px; }
  .footer__audience > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__audience a { min-height: 52px; padding-inline-end: 12px; font-size: 15px; }
  .footer__meta { gap: 14px; }
  :where(.btn,.cat__btn,.cat__learn,.footer__project,.field__input) { min-height: 48px; }
}

@media (max-width: 380px) {
  .logo-slot--header { width: 48px; }
  .footer__audience > div { grid-template-columns: 1fr; }
}