/* ==========================================================================
   أثر — Athr
   Homepage. Arabic, RTL.
   ========================================================================== */

/* --- Font: Elgharib Hayyakum Allah Taweel ---------------------------------
   The source TTFs carry a broken internal family name (family "Elgharib-",
   style "Hayyakum Allah-Taweel Bold"), so we declare our own family here.
   The face covers only 267 codepoints: `·` (U+00B7) and `→` (U+2192) are
   MISSING — use `•` and inline SVG for arrows.
   TODO before launch: subset to Arabic + Latin and convert to WOFF2.
   -------------------------------------------------------------------------- */
@font-face { font-family:"Athr"; src:url("../fonts/athr-light.woff2?v=64a1e449e9") format("woff2"), url("../fonts/athr-light.ttf?v=89eba2895e") format("truetype"); font-weight:300; font-display:swap; font-feature-settings:"liga" 0,"dlig" 0; }
@font-face { font-family:"Athr"; src:url("../fonts/athr-regular.woff2?v=2be8923081") format("woff2"), url("../fonts/athr-regular.ttf?v=8e4dd81661") format("truetype"); font-weight:400; font-display:swap; font-feature-settings:"liga" 0,"dlig" 0; }
@font-face { font-family:"Athr"; src:url("../fonts/athr-medium.woff2?v=8b8bcbcc2b") format("woff2"), url("../fonts/athr-medium.ttf?v=bd75b20e17") format("truetype"); font-weight:500; font-display:swap; font-feature-settings:"liga" 0,"dlig" 0; }
@font-face { font-family:"Athr"; src:url("../fonts/athr-bold.woff2?v=131a9e47ff") format("woff2"), url("../fonts/athr-bold.ttf?v=046c5f5bda") format("truetype"); font-weight:700; font-display:swap; font-feature-settings:"liga" 0,"dlig" 0; }

:root {
  /* Palette — direction A, locked 2026-09-25 */
  --ink:        #042d2f;  /* primary background */
  --ink-art:    #012e2f;  /* the leaf artwork's flat field — hero bg matches it exactly */
  --ink-deep:   #02191b;  /* deeper wells */
  --ink-soft:   #0a4144;  /* raised cards on dark */
  --turquoise:  #29c7b8;  /* accent + buttons. NEVER white text on this: 2.1:1 */
  --white:      #ffffff;
  --muted:      #c5dcd9;  /* body text on dark */
  --paper:      #f4faf9;  /* light sections */
  --paper-line: #d7e8e5;
  --ink-on-paper: #0d3b3c; /* body text on light */

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 11vw, 9rem);
  --radius: 14px;
  --heading-leading: 1.55;

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
html.scroll-scene-locked { overflow: hidden; scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--muted);
  font-family: "Athr", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.85;
  /* Arabic joins stay intact; add breathing room only between words. */
  word-spacing: 0.08em;
  letter-spacing: normal;
  /* Optional swash ligatures collide with adjacent Arabic words.
     Required joining and mark positioning remain enabled. */
  font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 700; line-height: var(--heading-leading); margin: 0; color: var(--white); }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Latin/numerals inside Arabic text must stay LTR. */
.ltr { direction: ltr; unicode-bidi: isolate; }

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

/* ==========================================================================
   Section shells
   ========================================================================== */

.section {
  --pool-x: 18%;
  --pool-y: 35%;
  --pool-strength: 0.11;
  padding-block: var(--section-y);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.section--paper { background: var(--ink); color: var(--muted); }
.section--paper h2, .section--paper h3, .section--paper h4 { color: var(--white); }
.section--ink { background: var(--ink); }
.section--deep { background: var(--ink); }

/* Soft light pools: no transformed surfaces or clipped ellipse edges.
   The vertical mask brings every pool back to the page color at section seams. */
.section:not(#value)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 58% 54% at var(--pool-x) var(--pool-y),
      rgb(41 199 184 / var(--pool-strength)) 0%,
      rgb(41 199 184 / 0.065) 24%,
      rgb(41 199 184 / 0.025) 48%,
      rgb(41 199 184 / 0.006) 70%,
      rgb(41 199 184 / 0) 100%),
    radial-gradient(ellipse 46% 44% at calc(100% - var(--pool-x)) calc(100% - var(--pool-y)),
      rgb(24 139 134 / 0.045) 0%,
      rgb(24 139 134 / 0.018) 40%,
      rgb(24 139 134 / 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}
/* Subpixel color variation breaks up 8-bit gradient bands on dark screens.
   Kept beneath the content; no animated grain or text texture. */
.section:not(#value)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/gradient-dither.png?v=1e88715b39") repeat;
  background-size: 128px 128px;
  mix-blend-mode: soft-light;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}
.section > .wrap { position: relative; z-index: 1; }

#services { --pool-x: 78%; --pool-y: 25%; --pool-strength: 0.13; }
#why     { --pool-x: 14%; --pool-y: 48%; --pool-strength: 0.095; }
#process { --pool-x: 84%; --pool-y: 58%; --pool-strength: 0.12; }
#work    { --pool-x: 24%; --pool-y: 42%; --pool-strength: 0.09; }
#own     { --pool-x: 76%; --pool-y: 40%; --pool-strength: 0.11; }
#contact { --pool-x: 50%; --pool-y: 54%; --pool-strength: 0.16; }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--turquoise);
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: 0.55rem;
}
/* The trace: a turquoise rule that draws itself from the RIGHT (RTL). */
.eyebrow::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: 2px;
  background: var(--turquoise);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.9s var(--ease) 0.15s;
}
.is-visible .eyebrow::after, .eyebrow.is-visible::after { transform: scaleX(1); }

.section__title { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem); max-width: 22ch; }
.section__lede  { margin-top: 1.1rem; max-width: 62ch; font-weight: 500; font-size: 1.075em; }
.section--paper .section__lede { color: var(--muted); }

/* ==========================================================================
   Header
   ========================================================================== */

.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 2px; z-index: 100;
  background: var(--turquoise);
  transform: scaleX(0);
  transform-origin: right; /* RTL: the trace grows from the right */
  will-change: transform;
}

.header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 90;
  padding-block: 1.1rem;
  transition: padding 0.3s var(--ease);
}
.header__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 1rem;
}
.header__logo { grid-column: 1; grid-row: 1; justify-self: start; }
.header__nav, .header__toggle { grid-column: 2; grid-row: 1; }
.header__actions { grid-column: 3; grid-row: 1; justify-self: end; }
@media (min-width: 961px) {
  .header:not(.is-stuck) .header__nav {
    grid-column: 2 / 4;
    justify-self: end;
  }
}
.header__logo, .header__nav {
  border: 1px solid transparent; border-radius: 12px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header__logo { flex-shrink: 0; font-size: 1.5rem; font-weight: 700; color: var(--white); text-decoration: none; letter-spacing: 0.02em; }
.header__logo img { display: block; width: auto; height: 2.3rem; }
.header__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }
.header__nav a {
  text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--muted);
  position: relative; padding-block: 0.3rem; transition: color 0.25s var(--ease);
}
.header__nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1.5px;
  background: var(--turquoise); transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.header__nav a:hover { color: var(--white); }
.header__nav a:hover::after { transform: scaleX(1); }

/* Header 8-inspired split floating navigation, revealed after scrolling. */
.header.is-stuck { padding-block: .75rem; }
.header.is-stuck .header__logo,
.header.is-stuck .header__nav,
.header.is-stuck .header__toggle,
.header.is-stuck .header__actions {
  background: rgb(5 43 45 / .94);
  border-color: rgb(197 220 217 / .2);
  box-shadow: 0 8px 24px rgb(0 15 16 / .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header.is-stuck .header__logo { padding: .3rem 1rem; }
.header.is-stuck .header__nav { padding: .6rem 1rem; }
.header.is-stuck .header__nav { gap: clamp(.8rem, 1.8vw, 1.5rem); }
.header__actions { display: none; border: 1px solid transparent; border-radius: 12px; padding: .35rem; flex-shrink: 0; }
.header.is-stuck .header__actions { display: flex; }
.header__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 40px; padding: .35rem .9rem; border-radius: 8px;
  background: var(--turquoise); color: var(--ink); text-decoration: none;
  font-size: .9rem; font-weight: 700; white-space: nowrap;
  transition: background-color .2s ease;
}
.header__cta:hover { background: #3ad9c9; }
.header__cta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; }
.header a:focus-visible, .header__toggle:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; }


/* --- Mobile menu --------------------------------------------------------- */

.header__toggle {
  display: none;
  width: 44px; height: 44px; /* 44px: minimum comfortable touch target */
  padding: 0; border: 0; background: none; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
}
.header__toggle span {
  display: block; height: 2px; width: 22px; margin-inline-start: auto;
  background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), background 0.3s var(--ease);
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(-45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(45deg); }
/* While the sheet is open the header always sits on ink, so keep bars light. */
.header.is-open .header__toggle span { background: var(--white); }

@media (max-width: 960px) {
  .header__toggle { display: flex; flex-shrink: 0; }
  .header__inner { grid-template-columns: 1fr 44px auto; gap: .5rem; }
  .header.is-stuck .header__logo { padding: .2rem .85rem; }
  .header__toggle { border: 1px solid transparent; border-radius: 12px; align-items: center; }
  .header__toggle span { margin-inline: 0; }
  .header__cta { font-size: .8rem; padding-inline: .6rem; gap: .3rem; }
  .header.is-open .header__actions { position: relative; }


  .header__nav {
    position: fixed;
    inset-block-start: 0; inset-inline: 0;
    min-height: 100svh;
    flex-direction: column; justify-content: center;
    gap: 0.4rem;
    padding: 5rem var(--gutter) 3rem;
    background: var(--ink);
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease), visibility 0.45s;
    visibility: hidden;
    z-index: -1;
  }
  .header.is-stuck .header__nav {
    padding: 5rem var(--gutter) 3rem; gap: .4rem;
    background: var(--ink); border: 0; border-radius: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .header__nav a {
    font-size: 1.5rem; font-weight: 700; color: var(--white);
    padding-block: 0.75rem;
  }
  .header__nav a::after { display: none; }

  .header.is-open .header__nav { transform: translateY(0); visibility: visible; }
  /* The sheet covers the page, so the header keeps its dark ink over it. */
  .header.is-open { background: transparent; }
  .header.is-open .header__logo { color: var(--white); }

  body.is-locked { overflow: hidden; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.9rem; border-radius: 10px;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn svg { flex: none; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(-4px); } /* RTL: forward is leftward */

/* Turquoise always carries DARK text — white on turquoise is only 2.1:1. */
.btn--primary { background: var(--turquoise); color: var(--ink); }
.btn--primary:hover { background: #3ad9c9; transform: translateY(-2px); }

.btn--ghost { border-color: rgb(159 196 194 / 0.45); color: var(--white); }
.btn--ghost:hover { border-color: var(--turquoise); color: var(--turquoise); transform: translateY(-2px); }

.section--paper .btn--ghost { border-color: rgb(159 196 194 / 0.45); color: var(--white); }
.section--paper .btn--ghost:hover { border-color: var(--turquoise); color: var(--turquoise); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }

/* ==========================================================================
   01 — Hero
   ========================================================================== */

.hero {
  --hero-display-size: clamp(2.1rem, 1.1rem + 4.6vw, 4rem);
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  background: var(--ink);
  overflow: hidden; isolation: isolate; text-align: center;
}
/* The artwork has a real alpha channel, so it composites onto --ink with no
   seam and needs no blend mode or mask. It is decorative: alt="" + aria-hidden.

   Centred by the hero's own grid rather than absolute + translate(-50%): under
   `dir="rtl"`, `inset-inline-start` resolves to `right`, so the usual centring
   trick throws the element a full width off-screen. Stacking both children in
   cell 1/1 is direction-agnostic and needs no transform. */
.hero > * { grid-area: 1 / 1; }

/* React Bits LightRays sits behind the dithered leaf. */
/* Absolute, not grid items: the scripts size each canvas's bitmap from the
   hero's height, and an in-flow canvas feeds that height back into the grid
   row, so the hero grows on every resize. */
.hero__light-rays, .hero__canvas, .hero__leaf-3d {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  touch-action: pan-y;
}
.hero__light-rays {
  z-index: 2; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.hero__light-rays.is-live { opacity: 1; }
.hero__canvas {
  opacity: 0;
  transition: opacity 0.1s ease-out;
}
.hero__canvas.is-live { opacity: 1; }
.hero__leaf-3d {
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.1s ease-out;
}
.hero.is-leaf-3d .hero__leaf-3d { opacity: 1; transition: none; }
.hero.is-leaf-3d .hero__canvas { opacity: 0; transition: none; }
.hero__leaf-grab {
  position: absolute; z-index: 3; display: block;
  padding: 0; border: 0; background: transparent;
  cursor: grab; touch-action: none;
}
.hero__leaf-grab[hidden] { display: none; }
.hero__leaf-grab:active { cursor: grabbing; }
.hero__leaf-grab:focus-visible {
  background: rgb(41 199 184 / 0.12);
  outline: 2px solid var(--turquoise); outline-offset: 4px;
}

.hero__art {
  position: absolute; z-index: 0;
  width: min(34vw, 60vh); height: auto;
  left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  top: 50%; transform: translateY(-50%);
  opacity: 0.58;
}
html.will-assemble .hero__art:not(.is-shown) { opacity: 0; }
@media (max-aspect-ratio: 115 / 100) {
  .hero__art {
    width: min(65vw, 32vh);
    left: 50%; top: auto; bottom: 5rem;
    transform: translateX(-50%);
  }
}
/* Keep the photo as a fallback while the canvas loads. */
.hero__art.is-replaced { opacity: 0; transition: opacity 0.25s var(--ease); }
.hero__art.is-shown { opacity: 0.58; transition: opacity 0.6s var(--ease); }
.hero.is-leaf-3d .hero__art { opacity: 0; }
/* Vignette keeps the hero copy legible over the photograph. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Header scrim. */
    linear-gradient(to bottom, rgb(4 45 47 / 0.82) 0%, rgb(4 45 47 / 0.45) 8%, transparent 17%),
    radial-gradient(44% 30% at 50% 44%, rgb(4 45 47 / 0.62) 0%, rgb(4 45 47 / 0.22) 62%, transparent 100%),
    linear-gradient(to bottom, transparent 55%, rgb(4 45 47 / 0.16) 82%, var(--ink) 100%);
}
/* Let pointer movement reach the hero while keeping links clickable. */
.hero__content { position: relative; z-index: 2; pointer-events: none; }
.hero__content a, .hero__content button { pointer-events: auto; }
.hero__title {
  font-size: var(--hero-display-size);
  line-height: var(--heading-leading); color: var(--white); max-width: 16ch; margin-inline: auto;
  /* Without this the headline breaks as "نبني حضورًا يُترك / أثره", orphaning
     the last word. Balancing splits it evenly instead. */
  text-wrap: balance;
}

.hero__lede {
  margin-top: 1.6rem; margin-inline: auto; max-width: 58ch;
  font-weight: 500; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); color: var(--muted);
}
.hero__tag {
  margin-top: 2rem; font-size: 0.95rem; font-weight: 500; color: var(--turquoise);
  letter-spacing: normal;
}
.hero .btn-row { justify-content: center; }

/* On a wide hero the copy takes the right-hand column and the leaf slides left
   (see sceneShift() in hero.js), so the two stop fighting. Scrimming the leaf
   hard enough to read text through it was the alternative, and it costs the
   leaf everything that makes it worth having.
   This block must come after every other .hero rule — placed earlier it lost
   the btn-row alignment to `.hero .btn-row { justify-content: center }`. */
@media (min-width: 900px) {
  .hero { text-align: start; }

  /* Stays inside .wrap — same max-width and gutter as the header, so the copy
     lines up with the logo on the right and the nav on the left. An earlier
     version escaped the wrapper with its own padding and the text ran to the
     viewport edge. Column 1 is the right-hand one under dir="rtl"; the 1fr on
     the left is the leaf's, and hero.js measures it rather than assuming it. */
  .hero__content {
    display: grid;
    grid-template-columns: minmax(0, 30rem) 1fr;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  .hero__content > * { grid-column: 1; }

  /* `ch` is unusable here: 14ch measures 585px in this face, so these caps
     never bound anything. The grid column does the constraining now. */
  .hero__title { max-width: none; margin-inline: 0; }
  .hero__lede  { max-width: none; margin-inline: 0; }
  .hero__tag   { margin-inline: 0; }
  .hero .btn-row { justify-content: flex-start; flex-wrap: nowrap; }
}



/* ==========================================================================
   02 — Value intro
   ========================================================================== */

.value__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .value__grid { grid-template-columns: 1.05fr 1fr; align-items: start; } }
.value__body p + p { margin-top: 1.2rem; }
.value__pull {
  border-inline-start: 2px solid var(--turquoise);
  padding-inline-start: 1.6rem;
  font-size: 1.2em; font-weight: 500; color: var(--white);
}

/* ==========================================================================
   03 — Services
   ========================================================================== */

.pricing__intro { max-width: 57ch; margin-inline: auto; text-align: center; }
.pricing__intro .section__title { max-width: none; }
.pricing__intro .section__lede { margin-inline: auto; }
.pricing__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem; margin: 3.6rem auto 0; grid-auto-rows: 1fr;
}
.service-plan { min-width: 0; display: flex; flex-direction: column; }
.service-plan__summary {
  padding: 1.2rem; border-radius: 14px;
  background: #104043;
  display: flex; flex-direction: column; min-height: 328px;
  transition: background-color .25s ease, translate .25s var(--ease);
}
.service-plan__icon { width: 24px; height: 24px; margin-bottom: .9rem; stroke: var(--turquoise); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-plan__summary h3 { font-size: 1.24rem; line-height: var(--heading-leading); }
.service-plan__price { margin-top: auto; padding-top: 2rem; padding-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.service-plan__price span { font-size: .9rem; color: var(--muted); }
.service-plan__price strong { font-size: 1.65rem; color: var(--white); line-height: 1.2; }
.service-plan__action {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 60px; padding: .6rem .65rem; border-radius: 999px;
  background: #d3efea; color: var(--ink-deep); text-decoration: none;
  font-size: .9rem; line-height: 1.5; font-weight: 700;
  transition: background-color .2s ease;
}
.service-plan__action svg { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-plan__action:hover { background: var(--turquoise); }
.service-plan__summary:has(.service-plan__premium-title) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #062b2e;
  box-shadow: inset 0 0 0 1px rgb(118 237 221 / .32);
}
.service-plan__summary:has(.service-plan__premium-title)::before,
.border-glow-surface::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 22% 65% at 73% 37%, rgb(179 255 233 / .42), transparent 75%),
    radial-gradient(ellipse 26% 70% at 42% 67%, rgb(41 199 184 / .3), transparent 75%);
  filter: blur(18px);
  transform: rotate(-25deg);
}
.service-plan__summary:has(.service-plan__premium-title) .service-plan__action {
  background: var(--turquoise);
}
.service-plan__summary:has(.service-plan__premium-title) .service-plan__action:hover {
  background: #80eadb;
}
.service-plan__action:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 5px; }
.service-plan__details { padding: .45rem .4rem 0; }
.service-plan__details p { padding-block: 1.05rem; font-size: .95rem; line-height: 1.9; }
@media (hover: hover) {
  .service-plan:hover .service-plan__summary { background: #174c4e; translate: 0 -3px; }
}
@media (max-width: 1099px) {
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
}
@media (max-width: 650px) {
  .pricing__grid { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
  .service-plan__summary { padding: 1.5rem; }
  .service-plan__summary h3 { font-size: 1.5rem; }
  .service-plan__icon { width: 26px; height: 26px; margin-bottom: .7rem; }
  .service-plan__price { padding-top: 1.5rem; }
  .service-plan__price strong { font-size: 2rem; }
  .service-plan__action { font-size: 1rem; min-height: 48px; }
  .service-plan__details { padding-inline: .75rem; }
  .service-plan__details p { font-size: 1.05rem; padding-block: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .service-plan:hover .service-plan__summary { translate: none; }
}

/* ==========================================================================
   04 — Why Athar
   ========================================================================== */

#why .section__title { margin-inline: auto; text-align: center; }
.why__intro { max-width: 60ch; margin-inline: auto; text-align: center; }
.why__intro p + p { margin-top: 1.1rem; }
.why__list { margin-top: 3.4rem; display: grid; gap: 0; }
.why__item {
  display: grid; gap: 0.5rem 2.5rem; padding-block: 2rem;
  border-top: 1px solid rgb(159 196 194 / 0.16);
  grid-template-columns: 1fr;
}
.why__item:last-child { border-bottom: 1px solid rgb(159 196 194 / 0.16); }
@media (min-width: 860px) { .why__item { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: start; } }
.why__head { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
.why__text { font-weight: 500; }

/* ==========================================================================
   05 — Process
   ========================================================================== */

.process {
  min-height: 100svh;
  padding-block: clamp(5.25rem, 8vh, 7rem) clamp(2.5rem, 5vh, 4rem);
  display: grid;
  align-items: center;
}
.process__pin { max-width: 1040px; }
.process__intro { text-align: center; }
.process__intro .section__title {
  max-width: 19ch;
  margin-inline: auto;
  font-size: clamp(2rem, 1.25rem + 3vw, 3.55rem);
  text-wrap: balance;
}
.process-stepper { margin-top: clamp(1.5rem, 4vh, 2.8rem); }
.process__rail-wrap {
  position: relative;
  width: min(76%, 670px);
  margin-inline: auto;
}
.process__rail {
  position: absolute;
  inset-inline: 18px;
  top: 17px;
  height: 2px;
  background: rgb(197 220 217 / 0.2);
  overflow: hidden;
}
.process__rail-fill {
  display: block;
  width: 0;
  height: 100%;
  margin-inline-end: auto;
  background: var(--turquoise);
  box-shadow: 0 0 18px rgb(41 199 184 / 0.55);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.process__tabs { position: relative; display: flex; justify-content: space-between; }
.process__tab {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: var(--ink);
  cursor: pointer;
}
.process__tab span {
  width: 12px;
  height: 12px;
  border: 2px solid rgb(197 220 217 / 0.45);
  border-radius: 50%;
  background: var(--ink);
  transition: width 0.28s var(--ease), height 0.28s var(--ease),
    border-color 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease;
}
.process__tab.is-complete span {
  border-color: var(--turquoise);
  background: rgb(41 199 184 / 0.45);
}
.process__tab.is-active span {
  width: 19px;
  height: 19px;
  border: 5px solid var(--turquoise);
  background: var(--ink);
  box-shadow: 0 0 0 5px rgb(41 199 184 / 0.13), 0 0 24px rgb(41 199 184 / 0.42);
}
.process__tab:focus-visible,
.process__control:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; }
.process__stage {
  position: relative;
  min-height: clamp(330px, 43vh, 430px);
  margin-top: clamp(1.15rem, 2.5vh, 1.8rem);
  padding: clamp(1.6rem, 4vw, 3rem);
  display: grid;
  grid-template-rows: minmax(145px, 1fr) auto;
  align-items: center;
  border: 1px solid rgb(159 196 194 / 0.2);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 29%, rgb(41 199 184 / 0.11), transparent 35%),
    linear-gradient(145deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.018));
  overflow: hidden;
}
.process__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 25%, rgb(255 255 255 / 0.035) 48%, transparent 68%);
  transform: translateX(35%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-stepper[data-direction="next"] .process__stage::before { transform: translateX(-35%); }
.process__visual {
  position: relative;
  width: min(240px, 52vw);
  height: 180px;
  margin-inline: auto;
}
.process__icon {
  position: absolute; width: 86px; height: 86px; left: 50%; top: 50%;
  color: var(--turquoise); opacity: 0;
  transform: translate(-50%, -40%) scale(.9);
  transition: opacity .25s ease, transform .4s var(--ease);
}
.process__icon.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.process__visual, .process__panels { translate: 0 -18px; }
.process__panels { display: grid; position: relative; z-index: 1; text-align: center; }
.process__panel {
  grid-area: 1 / 1;
  max-width: 64ch;
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 16px, 0) scale(0.985);
  transition: opacity 0.2s ease, visibility 0s linear 0.35s,
    transform 0.2s ease;
}
.process__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 0.38s ease 0.04s, visibility 0s linear,
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.04s;
}
.process-stepper[data-direction="prev"] .process__panel { transform: translate3d(0, -16px, 0) scale(0.985); }
.process-stepper[data-direction="prev"] .process__panel.is-active { transform: translate3d(0, 0, 0) scale(1); }
.process__title { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); }
.process__text { margin-top: 0.65rem; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.85; }
.process__controls {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  direction: ltr;
}
.process__control {
  min-width: 112px;
  min-height: 44px;
  padding: 0.65rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid rgb(159 196 194 / 0.28);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.035);
  color: var(--white);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  direction: rtl;
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.process__control:hover { border-color: var(--turquoise); background: rgb(41 199 184 / 0.09); }
.process__control:disabled { opacity: 0.34; cursor: default; }
.process__control:disabled:hover { border-color: rgb(159 196 194 / 0.28); background: rgb(255 255 255 / 0.035); }
.process__hint { margin-top: 0.55rem; text-align: center; color: rgb(197 220 217 / 0.72); font-size: 0.78rem; }

@media (max-width: 720px) {
  .process { padding-block: 5.2rem 2rem; }
  .process__intro .section__title { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .process__rail-wrap { width: 100%; }
  .process__stage {
    min-height: 350px;
    padding: 1.25rem 1rem 1.4rem;
    grid-template-rows: 175px auto;
  }
  .process__visual { width: 210px; height: 158px; }
  .process__text { max-width: 34ch; margin-inline: auto; }
  .process__control { min-width: 104px; }
}

@media (max-height: 720px) and (min-width: 721px) {
  .process { padding-block: 4.8rem 1.5rem; }
  .process-stepper { margin-top: 1rem; }
  .process__stage { min-height: 310px; grid-template-rows: 145px auto; padding-block: 1rem; }
  .process__visual { width: 195px; height: 146px; }
  .process__controls { margin-top: 0.65rem; }
  .process__hint { display: none; }
}

/* ==========================================================================
   06 — Work
   ========================================================================== */

.work__criteria {
  max-width: 65ch; margin-top: 1.8rem;
  font-size: 0.95rem; color: var(--muted); line-height: 2;
}
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.work__project { min-width: 0; }
.work__link { display: block; text-decoration: none; border-radius: 12px; }
.work__preview { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 2; background: var(--ink-soft); }
.work__preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .55s var(--ease); }
.work__visit { position: absolute; bottom: 12px; inset-inline-end: 12px; display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: 999px; background: rgb(2 25 27 / .92); color: white; font-size: .85rem; }
.work__link svg { width: 20px; height: 20px; flex: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.work__caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; border-bottom: 1px solid rgb(197 220 217 / .18); }
.work__caption h3 { font-family: system-ui, sans-serif; font-size: 1.18rem; text-align: right; font-weight: 600; }
.work__caption p { margin-top: .35rem; font-size: .98rem; }
.work__caption > svg { color: var(--turquoise); }
.work__link:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 6px; }
.work__link:hover .work__preview img, .work__link:focus-visible .work__preview img { transform: scale(1.035); }
@media (max-width: 760px) {
  .work__grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .work__link:hover .work__preview img, .work__link:focus-visible .work__preview img { transform: none; }
}

/* ==========================================================================
   07 — Before the close
   ========================================================================== */

.close__inner { max-width: 900px; text-align: center; }
.close__inner .section__title { margin-inline: auto; max-width: 20ch; font-size: clamp(2.35rem, 1.4rem + 3.5vw, 4.2rem); text-wrap: balance; }
.close__inner p { position: relative; font-size: clamp(1.2rem, 1.05rem + .65vw, 1.55rem); line-height: 1.9; }
.close__inner .close__punch { font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.2rem); line-height: 1.55; }
.close__copy { display: block; }
.close__inner.is-typing .close__copy { opacity: 0; }
.close__typed { position: absolute; inset: 0; display: block; pointer-events: none; }
.close__inner p + p { margin-top: 1.2rem; }
.close__punch {
  margin-top: 2rem; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
  font-weight: 700; color: var(--white); line-height: var(--heading-leading);
}
.close__punch em { font-style: normal; color: var(--turquoise); }

/* ==========================================================================
   08 — Final CTA
   ========================================================================== */

.final { text-align: center; }
.final__headline { position: relative; width: min(100%, 720px); margin-inline: auto; padding: 1.4rem 1.6rem; }
.final__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px dashed rgb(197 220 217 / .55); pointer-events: none; opacity: 0; }
.final__frame i { position: absolute; width: 9px; height: 9px; border: 1px solid var(--turquoise); background: var(--ink); opacity: 0; }
.final__frame i:nth-child(1) { left: -5px; top: -5px; }
.final__frame i:nth-child(2) { right: -5px; top: -5px; }
.final__frame i:nth-child(3) { right: -5px; bottom: -5px; }
.final__frame i:nth-child(4) { left: -5px; bottom: -5px; }
.final__cursor { position: absolute; z-index: 3; width: 27px; height: 33px; left: 0; top: 0; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .3)); transform-origin: 2px 2px; }
.final__headline.is-selecting .final__frame { animation: cta-selection-box 2.8s linear both; }
.final__headline.is-selecting .final__cursor { animation: cta-selection-cursor 2.8s linear both; }
.final__headline.is-selecting .final__frame i { animation: cta-selection-handles 2.8s linear both; }
.final__headline.is-selected .final__frame, .final__headline.is-selected .final__frame i { opacity: 1; }
@keyframes cta-selection-box {
  0%, 29% { width: 0; height: 0; opacity: 0; }
  30% { width: 0; height: 0; opacity: 1; }
  78%, 100% { width: 100%; height: 100%; opacity: 1; }
}
@keyframes cta-selection-cursor {
  0%, 8% { left: 8%; top: -30px; opacity: 0; }
  18% { opacity: 1; }
  26% { left: 0; top: 0; transform: scale(1); }
  30% { left: 0; top: 0; transform: scale(.85); opacity: 1; }
  78% { left: 100%; top: 100%; transform: scale(.85); opacity: 1; }
  83%, 90% { left: 100%; top: 100%; transform: scale(1); opacity: 1; }
  100% { left: 102%; top: 110%; transform: scale(1); opacity: 0; }
}
@keyframes cta-selection-handles {
  0%, 78% { opacity: 0; }
  83%, 100% { opacity: 1; }
}
.final__title { font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.1rem); max-width: 20ch; margin-inline: auto; }
.final__lede { margin: 1.8rem auto 0; max-width: 56ch; font-weight: 500; }
.final .btn-row { justify-content: center; }
.final .btn { border-radius: 999px; }
@media (max-width: 600px) {
  .final__headline { padding: 1.3rem 1rem; }
  .final__title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  .final__lede { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
  .final__frame, .final__frame i { opacity: 1; animation: none !important; }
  .final__cursor { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Open brand-and-directory footer, shared by every page. */
.footer {
  position: relative;
  width: 100%;
  margin-inline: auto;
  background: var(--ink);
}
.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter)));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(197 220 217 / .12) 25%, rgb(197 220 217 / .12) 75%, transparent);
  pointer-events: none;
}
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 140px;
  background: radial-gradient(ellipse 40% 120px at 50% 0%, rgb(197 220 217 / .045), transparent);
  pointer-events: none;
}
.footer__top {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(3rem, 6vw, 5rem); width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 3rem var(--gutter) 2.75rem; align-items: start;
}
.footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.footer__logo { display: inline-block; color: var(--white); font-size: 2rem; font-weight: 700; line-height: 1.55; text-decoration: none; }
.footer__logo img { display: block; width: auto; height: 3.6rem; }
.footer__text { margin-top: .75rem; max-width: 32ch; font-size: 1rem; line-height: 1.85; }
.footer__tag { margin-top: 1.4rem; color: var(--muted); font-size: 1rem; }
.footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding-top: .35rem; }
.footer__nav h3 { font-size: 1rem; margin-bottom: .65rem; }
.footer__nav a { font-size: .95rem; line-height: 1.85; text-decoration: none; transition: color .2s ease; }
.footer__nav a[dir="ltr"] { font-family: system-ui, sans-serif; font-size: .85rem; line-height: 2; }
.footer a:hover { color: var(--turquoise); }
.footer a:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; border-radius: 2px; }
.footer__base { max-width: var(--wrap); margin-inline: auto; padding: 1.15rem var(--gutter) 1.5rem; text-align: center; font-size: .85rem; }
@media (max-width: 1000px) {
  .footer__top { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer__text { max-width: 48ch; }
}
@media (max-width: 600px) {
  .footer__top { padding-block: 2.5rem 2rem; }
  .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer__nav:last-child { grid-column: 1 / -1; }
  .footer__nav { gap: .35rem; }
  .footer__nav a { display:flex; align-items:center; min-height:44px; padding-block:.25rem; }
}

/* ==========================================================================
   Scroll reveal — RTL: content enters from the RIGHT, never the left.
   ========================================================================== */

.reveal { opacity: 0; transform: translate3d(28px, 0, 0); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.reveal--up { transform: translate3d(0, 26px, 0); }
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

@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;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__art { animation: none; }
}

/* Scroll-scrubbed question and particle assembly. Static copy is the fallback. */
.value--scrub { padding: 0; height: 100svh; overflow: visible; }
.value__stage { position: relative; }
.value--scrub .value__stage {
  position: sticky; top: 0; height: 100svh; min-height: 540px;
  display: flex; align-items: center; overflow: hidden; background: var(--ink);
}
.value--scrub .reveal { transform: none; transition: none; }
.value__typing {
  position: absolute; direction: rtl; text-align: right;
  font-weight: 700; color: var(--white); pointer-events: none;
}
.value__typing > div { white-space: pre; }
.value__nodes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 899px) {
  .value--scrub .value__stage { min-height: 540px; }
  .value--scrub .value__grid { gap: 1.5rem; }
  .value--scrub .section__title { max-width: none; }
  .value--scrub .value__body { font-size: .92rem; line-height: 1.8; }
  .value--scrub .value__pull { font-size: 1.08em; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .value--scrub .value__stage { padding-top: 40px; }
}
@media (max-width: 360px) and (max-height: 620px),
       (min-width: 361px) and (max-width: 430px) and (max-height: 580px) {
  .value--scrub .value__stage { padding-top: 64px; }
  .value--scrub .value__grid { gap: .75rem; }
  .value--scrub .value__body { line-height: 1.65; }
  .value--scrub .value__body p + p { margin-top: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .value--scrub { height: auto; padding-block: var(--section-y); }
  .value--scrub .value__stage { position: relative; height: auto; min-height: 0; }
  .value__typing, .value__nodes { display: none; }
  .value--scrub h2, .value--scrub .value__body { opacity: 1 !important; }
}

/* Shared service-card and value-row feedback. */
.pricing__card, .pricing__extra, .why__item {
  transition: opacity .85s var(--ease), transform .85s var(--ease),
    translate .24s var(--ease), background-color .24s ease, border-color .24s ease;
}
.pricing__card-head, .pricing__plan h3, .pricing__extra h3, .why__head,
.pricing__action svg, .pricing__extra a svg {
  transition: color .24s ease, border-color .24s ease, translate .24s var(--ease);
}
.pricing__card:focus-within, .pricing__extra:focus-within {
  border-color: var(--turquoise); background-color: rgb(41 199 184 / .08);
}
.pricing__card:focus-within .pricing__card-head { border-color: rgb(41 199 184 / .45); }
.pricing__card:focus-within h3, .pricing__extra:focus-within h3 { color: var(--turquoise); }
@media (hover: hover) and (pointer: fine) {
  .pricing__card:hover, .pricing__extra:hover {
    translate: 0 -5px;
    border-color: var(--turquoise); background-color: rgb(41 199 184 / .08);
  }
  .pricing__card:hover .pricing__card-head { border-color: rgb(41 199 184 / .45); }
  .pricing__card:hover h3, .pricing__extra:hover h3, .why__item:hover .why__head { color: var(--turquoise); }
  .pricing__card:hover .pricing__action svg, .pricing__extra:hover a svg { translate: -3px 0; }
  .why__item:hover { border-color: rgb(41 199 184 / .65); background-color: rgb(41 199 184 / .055); }
  .why__item:hover .why__head { translate: -4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing__card:hover, .pricing__extra:hover, .why__item:hover .why__head,
  .pricing__card:hover .pricing__action svg, .pricing__extra:hover a svg { translate: none; }
}

/* Gesture stories occupy one screen, with no unused scroll runway. */
.process.process--scroll {
  display: block;
  height: 100svh;
  padding: 0;
  overflow: visible;
}
.process--scroll > .process__pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  padding-block: clamp(5.25rem, 8vh, 7rem) 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 721px) and (max-height: 950px) {
  .process--scroll > .process__pin { padding-block: 80px 16px; }
  .process--scroll .process__intro .section__title { max-width:none; font-size:clamp(2rem,3.5vw,3rem); }
  .process--scroll .process-stepper { margin-top:16px; }
  .process--scroll .process__stage { min-height:260px; margin-top:16px; padding:20px; grid-template-rows:80px auto; gap:12px; }
  .process--scroll .process__visual { height:80px; }
  .process--scroll .process__visual,.process--scroll .process__panels { translate:none; }
  .process--scroll .process__title { font-size:clamp(1.6rem,2.5vw,2rem); }
  .process--scroll .process__text { font-size:1.15rem; }
  .process--scroll .process__controls { margin-top:12px; }
  .process--scroll .process__hint { margin-top:6px; }
}
@media (prefers-reduced-motion: reduce) {
  .process.process--scroll { height: auto; }
  .process--scroll > .process__pin { position: relative; min-height: 0; }
}

/* Mobile hero: a generous artwork area first, followed by the copy. */
@media (max-width: 899px) {
  .hero {
    --mobile-leaf-top: 72px;
    --mobile-leaf-height: clamp(125px, 40vw, 220px);
    display: block;
  }
  .hero__content {
    padding-top: calc(var(--mobile-leaf-top) + var(--mobile-leaf-height) + 24px);
    padding-bottom: 64px;
  }
  .hero__art {
    width: 52%;
    max-width: 270px;
    height: var(--mobile-leaf-height);
    object-fit: contain;
    left: 50%; top: var(--mobile-leaf-top); bottom: auto;
    transform: translateX(-50%);
  }
}

/* Keep all six stages inside a phone viewport so native sticky scrolling works. */
@media (max-width: 720px) {
  .process--scroll > .process__pin { padding-block: 76px 16px; }
  .process--scroll .process__intro .section__title { font-size: 1.75rem; }
  .process--scroll .process-stepper { margin-top: 16px; }
  .process--scroll .process__stage {
    min-height: 0;
    margin-top: 12px;
    padding: 16px;
    grid-template-rows: 64px auto;
    gap: 12px;
  }
  .process--scroll .process__visual { height: 64px; }
  .process--scroll .process__icon { width: 58px; height: 58px; }
  .process--scroll .process__visual, .process--scroll .process__panels { translate: none; }
  .process--scroll .process__title { font-size: 1.4rem; }
  .process--scroll .process__text { font-size: 1rem; line-height: 1.65; margin-top: .5rem; }
  .process--scroll .process__controls { margin-top: 12px; }
  .process--scroll .process__control { min-height: 44px; padding-block: .4rem; }
  .process--scroll .process__hint { margin-top: 6px; }
}
@media (max-width: 360px) and (max-height: 620px),
       (min-width: 361px) and (max-width: 430px) and (max-height: 580px) {
  .process--scroll > .process__pin { padding-block: 64px 8px; }
  .process--scroll .process__intro .section__title { font-size: 1.45rem; line-height: 1.25; }
  .process--scroll .process-stepper { margin-top: 8px; }
  .process--scroll .process__tab { width: 44px; height: 44px; }
  .process--scroll .process__rail { top: 21px; }
  .process--scroll .process__stage { margin-top: 6px; padding: 10px; grid-template-rows: 48px auto; gap: 6px; }
  .process--scroll .process__visual { height: 48px; }
  .process--scroll .process__icon { width: 46px; height: 46px; }
  .process--scroll .process__title { font-size: 1.3rem; }
  .process--scroll .process__text { margin-top: .3rem; line-height: 1.5; }
  .process--scroll .process__controls { margin-top: 8px; }
  .process--scroll .process__hint { display: none; }
}

@media (max-width: 899px) {
  .hero__content { padding-top: calc(var(--mobile-leaf-top) + var(--mobile-leaf-height) + 16px); padding-bottom: 24px; }
  .hero__lede { margin-top: 1.2rem; }
  .hero__tag { margin-top: 1.25rem; }
  .hero .btn-row { margin-top: 1.25rem; gap: .6rem; }
  .hero .btn { padding-block: .8rem; }
}
/* Only actual pages live in the header; the current page has a persistent mark. */
.header__nav a[aria-current="page"] { color:var(--turquoise); }
.header__nav a[aria-current="page"]::after { transform:scaleX(1); }

/* ==========================================================================
   404 — huge numerals fading into the background, one line, two ways out.
   ========================================================================== */

.notfound {
  display: grid; place-content: center; justify-items: center; gap: 1.6rem;
  min-height: 100svh; padding: 120px var(--gutter) 80px;
  background: var(--ink); text-align: center;
}
.notfound__code {
  margin: 0; font-size: clamp(8rem, 5rem + 18vw, 17rem); font-weight: 700; line-height: 1;
  background: linear-gradient(180deg, var(--white) 22%, rgb(255 255 255 / .03) 86%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.notfound__text {
  max-width: 26ch; margin: -0.6rem 0 0;
  color: var(--muted); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 500; line-height: 1.8;
}
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.notfound .btn { padding: .75rem 1.4rem; }
.notfound .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notfound .btn:hover svg { transform: none; }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--turquoise); transform: translateY(-2px); }

/* ==========================================================================
   Cookie consent. Accept and reject carry equal weight.
   ========================================================================== */

.consent {
  position: fixed; z-index: 60; inset-inline: 16px; bottom: 16px;
  max-width: 460px; margin-inline-start: auto;
  padding: 1.1rem 1.2rem; border: 1px solid rgb(159 196 194 / .25); border-radius: 14px;
  background: rgb(3 38 40 / .97); color: var(--white);
  box-shadow: 0 18px 50px rgb(0 0 0 / .35);
  font-size: .92rem; line-height: 1.75;
}
.consent[hidden] { display: none; }
.consent__text { margin: 0; color: var(--muted); }
.consent__text a { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.consent__options { display: grid; gap: .65rem; margin-top: .9rem; }
.consent__options[hidden] { display: none; }
.consent__option { display: flex; align-items: flex-start; gap: .6rem; color: var(--muted); cursor: pointer; }
.consent__option strong { color: var(--white); }
.consent__option input { flex: none; width: 17px; height: 17px; margin-top: .3rem; accent-color: var(--turquoise); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1rem; }
.consent__btn {
  flex: 1 1 0; min-height: 42px; padding: 0 1rem; border: 1px solid rgb(159 196 194 / .45); border-radius: 9px;
  background: transparent; color: var(--white); font: inherit; font-weight: 700; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.consent__btn:hover { border-color: var(--turquoise); color: var(--turquoise); }
.consent__btn[hidden], .consent__link[hidden] { display: none; }
.consent__link { flex-basis: 100%; padding: .2rem 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.consent__link:hover { color: var(--white); }

.footer__base { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.4rem; }
.footer__legal { display: flex; gap: 1.2rem; }
.footer__legal a, .footer__legal button { padding: 0; border: 0; background: none; color: inherit; font: inherit; opacity: .8; cursor: pointer; }
.footer__legal a:hover, .footer__legal button:hover { opacity: 1; color: var(--turquoise); }

@media (max-width: 520px) {
  .consent { inset-inline: 10px; bottom: 10px; max-width: none; }
}

/* Legal pages: one readable column. */
.legal { max-width: 760px; margin-inline: auto; padding: 140px var(--gutter) 96px; color: var(--muted); line-height: 1.95; }
.legal h1 { margin: 0; color: var(--white); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); line-height: 1.3; }
.legal__updated { margin: .6rem 0 2.4rem; font-size: .9rem; }
.legal h2 { margin: 2.4rem 0 .6rem; color: var(--white); font-size: 1.35rem; line-height: 1.5; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-inline-start: 1.3rem; }
.legal li + li { margin-top: .4rem; }
.legal strong { color: var(--white); }
.legal a, .legal__link { padding: 0; border: 0; background: none; color: var(--turquoise); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }