/* ============================================================
   Wajh main stylesheet v4
   Dark, editorial, bilingual (EN/AR, RTL-aware).
   Design language: extreme typographic contrast, asymmetric
   composition, layered depth, weighted micro-interactions.
   ============================================================ */

/* ---------- Fonts (self-hosted, subset) ---------- */
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PlexArabic'; src: url('../fonts/PlexArabic-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'PlexArabic'; src: url('../fonts/PlexArabic-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PlexArabic'; src: url('../fonts/PlexArabic-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'PlexArabic'; src: url('../fonts/PlexArabic-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'PlexArabic'; src: url('../fonts/PlexArabic-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* brand */
  --bg: #131312;
  --bg-2: #1a1a19;
  --bg-3: #222221;
  --line: #2c2c2a;
  --hairline: rgba(239, 236, 229, .09);
  --hairline-strong: rgba(239, 236, 229, .16);
  --fg: #efece5;
  --fg-dim: #a7a7a7;
  --fg-faint: #6f6f6c;
  --orange: #ff590b;
  --orange-soft: #ff7a3d;
  --teal: #378d93;

  /* header height; everything that has to clear the fixed bar reads this */
  --nav-h: 76px;
  /* iPhone notch / Dynamic Island. Declared twice on purpose: browsers
     without env() keep the 0px line instead of invalidating every calc()
     that mentions the variable downstream. */
  --safe-top: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  /* distance from the physical top edge to the bottom of the fixed bar */
  --nav-clear: calc(var(--nav-h) + var(--safe-top));

  /* type scale */
  --font: 'Poppins', 'PlexArabic', system-ui, sans-serif;
  --text-xs: .72rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: clamp(1.05rem, .95rem + .5vw, 1.25rem);
  --text-h3: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  --text-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  --text-display: clamp(2.9rem, 1.5rem + 6.8vw, 6.2rem);

  --radius: 20px;
  --radius-sm: 12px;

  /* layered depth */
  --surface: linear-gradient(180deg, #1d1d1c 0%, #181817 100%);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .045);
  --shadow-rest: var(--edge-light), 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lift: var(--edge-light), 0 2px 6px rgba(0, 0, 0, .3), 0 28px 60px -24px rgba(0, 0, 0, .65);

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .45, 1);
  --dur: .32s;
}
[dir="rtl"] { --font: 'PlexArabic', 'Poppins', system-ui, sans-serif; }
[dir="rtl"] body { line-height: 1.85; }

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--text-md);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* landscape on a notched phone: content clears the island, backgrounds don't */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* film grain: kills the "flat digital" look at nearly zero cost */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 2147483646; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .028;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(255, 89, 11, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.container { width: min(1200px, 100% - clamp(2rem, 8vw, 6rem)); margin-inline: auto; }
.center { text-align: center; }
.muted { color: var(--fg-dim); }
.accent { color: var(--orange); }
.skip-link { position: absolute; top: -60px; inset-inline-start: 8px; background: var(--orange); color: #fff; padding: 8px 16px; border-radius: 8px; z-index: 2147483647; }
.skip-link:focus { top: 8px; }

/* ---------- Typographic hierarchy ---------- */
h1, h2, h3 { line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.25; }

.kicker {
  display: flex; align-items: center; gap: .7rem;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: 1.1rem;
}
/* Not a rule but a pixel trail: three squares stepping down in width, the
   same motif as the hero mark assembling out of pixels. */
.kicker::before {
  content: ''; width: 17px; height: 6px; flex-shrink: 0;
  background: linear-gradient(90deg,
    var(--orange) 0 6px, transparent 6px 9px,
    #d4a24e 9px 13px, transparent 13px 15px,
    var(--teal) 15px 17px, transparent 17px);
}
[dir="rtl"] .kicker::before { transform: scaleX(-1); }
[dir="rtl"] .kicker { letter-spacing: .06em; }

/* the "wajh." / "وجه" wordmark: the logo artwork itself, scaled so its
   letter body matches the sentence's cap height, sitting on the text baseline.
   The kicker row aligns by baseline; an img's flex baseline is its bottom edge,
   so we push it down by the artwork's own descender share. */

.lead { font-size: var(--text-lg); font-weight: 300; line-height: 1.8; max-width: 42rem; }
[dir="ltr"] .lead { letter-spacing: .005em; }

/* ---------- Buttons: weight, sheen, spring ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border: 1px solid transparent; border-radius: 999px;
  padding: .72rem 1.6rem; min-height: 44px;
  font: 600 var(--text-sm)/1 var(--font);
  letter-spacing: .01em;
  cursor: pointer; user-select: none;
  transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(.965); transition-duration: .1s; }
.btn-primary {
  background: linear-gradient(180deg, #ff6a24 0%, var(--orange) 55%, #ef4d02 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .3), 0 10px 28px -8px rgba(255, 89, 11, .55);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-130%); transition: transform .7s var(--ease);
}
[dir="rtl"] .btn-primary::after { transform: translateX(130%); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .3), 0 16px 38px -8px rgba(255, 89, 11, .6); }
.btn-primary:hover::after { transform: translateX(130%); }
[dir="rtl"] .btn-primary:hover::after { transform: translateX(-130%); }
.btn-ghost { border-color: var(--hairline-strong); color: var(--fg); background: rgba(255, 255, 255, .015); }
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(239, 236, 229, .4); background: rgba(255, 255, 255, .05); }
.btn-danger { background: #7c2d12; color: #fecaca; border-color: rgba(254, 202, 202, .18); }
.btn-lg { padding: .95rem 2.1rem; font-size: var(--text-md); min-height: 52px; }
.btn-sm { padding: .42rem 1.05rem; font-size: .82rem; min-height: 36px; }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--bg-3); border: 1px solid var(--hairline); color: var(--fg);
  border-radius: 999px; padding: .55rem 1.15rem; min-height: 42px;
  font: 500 var(--text-sm) var(--font);
  cursor: pointer;
  transition: transform .25s var(--ease-spring), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.chip:hover { border-color: rgba(255, 89, 11, .55); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.chip:active { transform: scale(.96); }
.chip.active, .chip.selected {
  background: linear-gradient(180deg, #ff6a24, var(--orange));
  border-color: rgba(255, 255, 255, .25); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -6px rgba(255, 89, 11, .6);
}
@media (pointer: coarse) {
  .chip { min-height: 48px; padding-block: .7rem; }
  .btn { min-height: 48px; }
  .nav-burger { padding: 14px; }
  .filters .chip { min-height: 48px; }
}

.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease);
  /* the bar owns the notch area: its blur must reach the physical edges */
  padding-top: var(--safe-top);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* The scrolled backdrop lives on its own always-composited layer and only
   fades in. Toggling backdrop-filter on the bar itself made iOS Safari
   intermittently drop taps on it until the next repaint. The transform is
   on the pseudo, never the bar: a transformed bar would become the
   containing block for the fixed-position phone menu. */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  opacity: 0; transition: opacity .35s var(--ease);
  transform: translateZ(0);
}
.nav.scrolled { border-bottom-color: var(--hairline); }
.nav.scrolled::before { opacity: 1; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.nav-logo img { height: 27px; width: auto; transition: opacity .2s; }
.nav-logo:hover img { opacity: .85; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; font-size: var(--text-sm); }
.nav-links a:not(.btn) { color: var(--fg-dim); transition: color .2s; position: relative; padding-block: .3rem; }
.nav-links a:not(.btn):hover, .nav-links a.active:not(.btn) { color: var(--fg); }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; bottom: 0; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: var(--tx-origin, left);
  transition: transform .35s var(--ease);
}
[dir="rtl"] .nav-links a:not(.btn)::after { --tx-origin: right; }
.nav-links a:not(.btn):hover::after, .nav-links a.active:not(.btn)::after { transform: scaleX(1); }
.nav-lang { font-weight: 500; }

/* The journey CTA lives outside the burger so it is one tap from anywhere. */
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.nav-cta {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .55rem 1.05rem; border-radius: 999px;
  background: linear-gradient(180deg, #ff6a24, var(--orange)); color: #fff;
  font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 18px -8px rgba(255, 89, 11, .55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -10px rgba(255,89,11,.7); }
.nav-cta:active { transform: scale(.97); }
@media (max-width: 900px) {
  /* Shorter bar: on a phone the 76px version reads as dead space above the
     logo rather than as breathing room. */
  :root { --nav-h: 58px; }
  .nav-cta { padding: .5rem .85rem; font-size: .82rem; }
  .nav-cta .pulse-dot { display: none; }
  .nav-logo img { height: 24px; }
}
/* The CTA is the only one on the page now, so it stays whatever the screen.
   Below 420px it drops to the short label rather than crowding the logo. */
.nav-logo { flex: none; }
.nav-cta .cta-short { display: none; }
@media (max-width: 420px) {
  .nav-cta { padding: .45rem .72rem; font-size: .74rem; letter-spacing: 0; }
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
  .nav-burger { padding: 10px 0 10px 10px; }
  [dir="rtl"] .nav-burger { padding: 10px 10px 10px 0; }
}
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--fg); margin: 5px 0; border-radius: 2px; transition: .3s var(--ease); }

@media (max-width: 880px) {
  .nav-burger { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-clear); inset-inline: 0; bottom: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
    padding: 1.6rem clamp(1.2rem, 6vw, 3rem) 2.4rem; gap: .2rem;
    overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease), visibility 0s .35s;
  }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s var(--ease); }
  .nav-links a:not(.btn) { padding: 1rem .2rem; font-size: 1.35rem; font-weight: 500; border-bottom: 1px solid var(--hairline); }
  .nav-links a:not(.btn)::after { content: none; }
  /* The underline cue is gone here, so mark the current page another way. */
  .nav-links a.active:not(.btn) { color: var(--orange); }
  .nav-links a.active:not(.btn)::before {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange); margin-inline-end: .6rem; vertical-align: middle;
  }
  .nav-links > * { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .nav-links.open > * { opacity: 1; transform: none; }
  .nav-links.open > *:nth-child(1) { transition-delay: .05s; }
  .nav-links.open > *:nth-child(2) { transition-delay: .1s; }
  .nav-links.open > *:nth-child(3) { transition-delay: .15s; }
  .nav-links.open > *:nth-child(4) { transition-delay: .2s; }
  .nav-links.open > *:nth-child(5) { transition-delay: .26s; }
  .nav-links.open > *:nth-child(6) { transition-delay: .32s; }

  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero: the mark assembles out of pixels, then the sentence ---------- */
.hero { position: relative; min-height: 96vh; display: flex; align-items: center; padding-top: var(--nav-clear); overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(52% 44% at 82% 12%, rgba(255, 89, 11, .12), transparent 68%),
    radial-gradient(40% 40% at 8% 88%, rgba(55, 141, 147, .09), transparent 62%),
    url('../img/silk.webp') center/cover no-repeat var(--bg);
  background-blend-mode: normal, normal, luminosity;
  opacity: .96;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19, 19, 18, .4), rgba(19, 19, 18, .72) 72%, var(--bg));
}
/* A faint pixel grid over the darkening wash: the surface the mark's own
   pixels seem to come from. Masked so it breathes out toward the edges. */
.hero-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(rgba(239, 236, 229, .07) 1px, transparent 1.45px);
  background-size: 27px 27px;
  -webkit-mask-image: radial-gradient(75% 80% at 42% 40%, #000, transparent 78%);
  mask-image: radial-gradient(75% 80% at 42% 40%, #000, transparent 78%);
}
[dir="rtl"] .hero-bg::before {
  -webkit-mask-image: radial-gradient(75% 80% at 58% 40%, #000, transparent 78%);
  mask-image: radial-gradient(75% 80% at 58% 40%, #000, transparent 78%);
}
.hero-open-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-block: clamp(3.5rem, 9vh, 6rem);
}

/* The mark is a raster file: its pixels are sampled onto a canvas, scattered
   across the screen and flown back together while the camera pulls out. The
   real image then fades in over the settled particles, so the end state is
   always the crisp artwork. Without JS the image simply shows. */
.hero-mark { position: relative; display: inline-block; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.hero-mark img { height: clamp(52px, 8.5vw, 132px); width: auto; }
html.js .hero-mark img { opacity: 0; transition: opacity .5s var(--ease); }
html.js .hero-mark.mark-in img { opacity: 1; }
/* width/height matter: a canvas is a replaced element, so inset alone would
   leave it at its intrinsic (attribute) size instead of filling the hero. */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.hero-canvas.settled { opacity: 0; }

.hero-title {
  font-size: var(--text-display);
  line-height: .98; letter-spacing: -0.035em;
  opacity: 0; animation: hero-in .9s var(--ease) .35s forwards;
}
[dir="rtl"] .hero-title { line-height: 1.18; letter-spacing: 0; }
.hero-title .dot { color: var(--orange); }
.hero-sub {
  max-width: 34rem; margin-top: 1.5rem;
  font-size: var(--text-lg); font-weight: 300; line-height: 1.85; color: var(--fg-dim);
  opacity: 0; animation: hero-in .9s var(--ease) .55s forwards;
}
@keyframes hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-cue {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: clamp(2.4rem, 5vh, 4rem);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint);
  opacity: 0; animation: hero-in .9s var(--ease) .75s forwards;
  transition: color .25s var(--ease);
}
/* With JS the words hold until the mark has actually finished assembling:
   main.js flips .words-in on the hero at the moment of the crossfade, however
   long the intro really took (slow image, background tab), and immediately on
   any path where the intro can't run at all. */
html.js .hero-title, html.js .hero-sub, html.js .hero-cue { animation: none; }
html.js .words-in .hero-title { animation: hero-in .9s var(--ease) .05s forwards; }
html.js .words-in .hero-sub { animation: hero-in .9s var(--ease) .3s forwards; }
html.js .words-in .hero-cue { animation: hero-in .9s var(--ease) .55s forwards; }
[dir="rtl"] .hero-cue { letter-spacing: .04em; }
.hero-cue:hover { color: var(--orange); }
.hero-cue-arrow { display: inline-block; animation: cue-bob 2.2s var(--ease) infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* The proof line, out of the hero and on its own rule. */
.strip { border-block: 1px solid var(--hairline); background: rgba(255, 255, 255, .012); }
.strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem 2rem; padding-block: 1.1rem;
}
.strip-status {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim);
}
[dir="rtl"] .strip-status { letter-spacing: .03em; }
.strip-status .pulse-dot { background: #6ede8a; flex-shrink: 0; }
.strip-where { color: var(--fg-faint); }
.strip-stats { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; list-style: none; }
.strip-stats li {
  font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint);
}
[dir="rtl"] .strip-stats li { letter-spacing: .03em; }
.strip-stats strong {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg); margin-inline-end: .3rem;
  /* the numbers count up when the strip scrolls in; equal-width digits keep
     the labels from shuffling underneath them */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 880px) {
  .hero { min-height: 88vh; }
  .hero-open-inner { padding-block: 3.5rem 3rem; }
}
@media (max-width: 720px) {
  /* Left as a wrapping row the three stats stack into a 200px band, which is
     no longer a strip. Three columns, number over label. */
  .strip-inner { justify-content: flex-start; gap: .9rem; padding-block: .9rem; }
  .strip-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .5rem; width: 100%;
  }
  .strip-stats li { display: flex; flex-direction: column; gap: .15rem; font-size: .6rem; line-height: 1.35; }
  .strip-stats strong { font-size: .95rem; margin-inline-end: 0; }
}
@media (max-width: 560px) { .strip-where { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .hero-mark img { opacity: 1; transition: none; }
  .hero-canvas { display: none; }
  /* !important: these must beat the higher-specificity html.js hold rules */
  .hero-title, .hero-sub, .hero-cue { opacity: 1 !important; animation: none !important; }
  .hero-cue-arrow { animation: none; }
}

/* ---------- Sections & rhythm ---------- */
.section { padding-block: clamp(4.5rem, 11vw, 8.5rem); position: relative; }
.section + .section { padding-top: 0; }
.section-head {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: end; gap: 1.2rem 3rem; margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.section-head h2 { max-width: 24ch; }
.section-head .link-more { justify-self: end; margin-bottom: .5rem; }
@media (max-width: 640px) { .section-head { grid-template-columns: 1fr; } .section-head .link-more { justify-self: start; } }

.link-more {
  position: relative; color: var(--fg); font-weight: 600; font-size: var(--text-sm);
  padding-bottom: .2rem;
}
.link-more::after {
  content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; height: 1px;
  background: var(--orange); transform: scaleX(.35); transform-origin: var(--tx-origin, left);
  transition: transform .35s var(--ease);
}
[dir="rtl"] .link-more::after { --tx-origin: right; }
.link-more:hover::after { transform: scaleX(1); }
.note { margin-top: 2.6rem; text-align: center; font-size: var(--text-sm); color: var(--fg-faint); }
.section .center { margin-top: 2.4rem; }

/* ---------- Grids: asymmetric stagger ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 1021px) {
  .grid-4:not(.steps) > *:nth-child(even) { transform: translateY(2.2rem); }
  .grid-3 > *:nth-child(3n-1) { transform: translateY(2.6rem); }
  .grid-4:not(.steps):has(> :nth-child(even)), .grid-3:has(> :nth-child(3n-1)) { padding-bottom: 2.6rem; }
  /* staggered items still lift on hover */
  .grid-4:not(.steps) > *:nth-child(even):hover { transform: translateY(calc(2.2rem - 6px)); }
  .grid-3 > *:nth-child(3n-1):hover { transform: translateY(calc(2.6rem - 6px)); }
}
@media (max-width: 1020px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-4, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Cards: layered surfaces, restrained lighting ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--shadow-rest);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-card::before, .work-card::before {
  content: ''; position: absolute; top: -1px; inset-inline-start: clamp(1.4rem, 2.5vw, 1.9rem);
  width: 34px; height: 2px; border-radius: 2px;
  background: var(--accent, var(--orange));
  opacity: .85; transition: width .45s var(--ease);
}
.service-card:hover, .work-card:hover {
  transform: translateY(-6px);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-lift);
}
.service-card:hover::before, .work-card:hover::before { width: 72px; }

.service-card h3 { margin-bottom: .55rem; }
.service-card p { color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.75; }
.service-card .price { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--hairline); color: var(--fg-dim); font-size: var(--text-sm); }
.service-card .price strong { color: var(--fg); font-size: 1.35rem; letter-spacing: -0.01em; }
.service-card .price strong::before { content: ''; }

.icon {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1.2rem; position: relative;
  background: linear-gradient(150deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .015) 55%, rgba(255, 89, 11, .07) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -10px 18px -10px rgba(255, 89, 11, .35),
              0 8px 20px -8px rgba(0, 0, 0, .6);
}
.icon::after {
  content: ''; position: absolute; inset: 1px; border-radius: 13px;
  background: radial-gradient(60% 45% at 30% 0%, rgba(255, 255, 255, .14), transparent 70%);
  pointer-events: none;
}
.icon::before { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: var(--orange); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.icon-globe { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z'/%3E%3C/svg%3E"); }
.icon-cart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1.6'/%3E%3Ccircle cx='19' cy='21' r='1.6'/%3E%3Cpath d='M2 2h3l3 13h11l3-9H7'/%3E%3C/svg%3E"); }
.icon-star { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l3 7 7 .8-5.2 4.8 1.5 7L12 18l-6.3 3.6 1.5-7L2 9.8 9 9z'/%3E%3C/svg%3E"); }
.icon-refresh { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7M21 3v6h-6'/%3E%3C/svg%3E"); }
.icon-rocket { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 15l-2 6 6-2M9 15l6-11 5 5-11 6-1.5 4z'/%3E%3C/svg%3E"); }
.icon-lang { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 5h8M8 3v2m3 0c-1 5-4 8-7 10m2-5c1 2 3 4 6 5M13 21l4-10 4 10m-7-3h6'/%3E%3C/svg%3E"); }
.icon-shield { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3C/svg%3E"); }

/* ---------- Work cards & live previews ---------- */
.work-card { padding: 0; overflow: hidden; }
.work-card img { width: 100%; aspect-ratio: 800/560; object-fit: cover; }
.work-logo {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 2 / 1; overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(70% 110% at 50% 0%, color-mix(in srgb, var(--accent, var(--orange)) 11%, transparent), transparent 72%),
    linear-gradient(180deg, #1e1e1d, #191918);
}
/* The logo sits straight on the panel. A halo in the project's own colour
   lifts it off the dark instead of a plate boxing it in. */
.work-logo::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 52% at 50% 50%,
    color-mix(in srgb, var(--accent, var(--orange)) 30%, transparent), transparent 70%);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.work-card:hover .work-logo::after { transform: scale(1.12); }
.work-logo img { position: relative; z-index: 1; width: auto; height: auto; max-width: min(56%, 220px); max-height: 52%; object-fit: contain; transition: transform .6s var(--ease); }
.work-logo img.work-upload {
  max-width: min(62%, 240px); max-height: 62%;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .5));
}
/* Client logos arrive in every colour. main.js measures each one's opaque
   pixels; a near-black mark would vanish into the panel, so it gets a light
   plate to sit on instead. */
.work-logo img.logo-dark {
  background: #eceae3;
  padding: clamp(10px, 1.8vw, 16px);
  border-radius: 14px;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55);
  filter: none;
}
.work-logo .logo-lockup {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  transition: transform .6s var(--ease);
}
.work-card:hover .work-logo img,
.work-card:hover .work-logo .logo-lockup { transform: scale(1.04); }
.logo-mono {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--accent, var(--orange));
  border: 1px solid color-mix(in srgb, var(--accent, var(--orange)) 55%, transparent);
  background: color-mix(in srgb, var(--accent, var(--orange)) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.logo-word { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; color: var(--fg); line-height: 1.2; }
[dir="rtl"] .logo-word { letter-spacing: 0; }
.logo-word i { color: var(--accent, var(--orange)); font-style: normal; }
.logo-cat { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--fg-faint); }
[dir="rtl"] .logo-cat { letter-spacing: .06em; }
.work-card-body { padding: 1.5rem clamp(1.4rem, 2.5vw, 1.8rem) 1.8rem; }
.work-card .badge {
  display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent, var(--orange));
  border: 1px solid color-mix(in srgb, var(--accent, var(--orange)) 45%, transparent);
  background: color-mix(in srgb, var(--accent, var(--orange)) 8%, transparent);
  padding: .2rem .65rem; border-radius: 99px; margin-bottom: .85rem;
}
[dir="rtl"] .work-card .badge { letter-spacing: .04em; }
.work-card h3 { margin-bottom: .35rem; }
.work-card p { font-size: var(--text-sm); color: var(--fg-dim); }
.work-links { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.work-links .link-more { display: inline-block; margin-top: .85rem; }

/* ---------- Steps: staggered timeline ---------- */
.steps { align-items: start; }
.steps .step {
  position: relative; padding: 1.6rem 0 0;
  border-top: 1px solid var(--hairline);
  transition: border-color .4s var(--ease);
}
.steps .step::before {
  content: ''; position: absolute; top: -1px; inset-inline-start: 0; width: 34px; height: 2px;
  background: var(--orange); border-radius: 2px; transition: width .45s var(--ease);
}
.steps .step:hover { border-color: var(--hairline-strong); }
.steps .step:hover::before { width: 72px; }
.step-num {
  display: block;
  font-size: .8rem; font-weight: 600; line-height: 1;
  letter-spacing: .22em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1rem;
  transition: color .35s var(--ease);
}
.steps .step:hover .step-num { color: var(--accent, var(--orange)); }
.step h3 { margin: .3rem 0 .5rem; }
.step p { color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.75; }
@media (min-width: 1021px) {
  .steps .step:nth-child(2) { margin-top: 2.2rem; }
  .steps .step:nth-child(3) { margin-top: 4.4rem; }
  .steps .step:nth-child(4) { margin-top: 6.6rem; }
}

/* ---------- Journey banner ---------- */
.journey-banner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 28px;
  padding: clamp(2rem, 5vw, 3.5rem);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-rest);
}
.journey-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(42% 60% at 88% 12%, rgba(255, 89, 11, .13), transparent 70%);
  pointer-events: none;
}
.journey-banner::after {
  content: ''; position: absolute; top: 0; inset-inline-start: clamp(2rem, 5vw, 3.5rem);
  width: 64px; height: 2px; background: var(--orange); border-radius: 2px;
}
.journey-banner h2 { margin-bottom: .9rem; max-width: 18ch; }
.journey-banner .muted { margin-bottom: 1.9rem; font-weight: 300; font-size: var(--text-lg); line-height: 1.8; }
@media (max-width: 900px) { .journey-banner { grid-template-columns: 1fr; } }

@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* The banner's miniature of the journey's ending: full progress, the pixel
   emblem, the archetype, the range. A postcard from the reveal. */
.jd { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.jd-progress { display: inline-flex; align-items: center; gap: .5rem; }
.jd-progress i {
  display: block; width: 72px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), #d4a24e);
}
[dir="rtl"] .jd-progress i { background: linear-gradient(270deg, var(--orange), #d4a24e); }
.jd-progress em { font-style: normal; font-size: .72rem; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.jd-card {
  position: relative; text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 89, 11, .15), transparent 62%),
    linear-gradient(160deg, #262019 0%, #1c1a18 55%, #191918 100%);
  border: 1px solid rgba(255, 89, 11, .5); border-radius: 18px;
  padding: 1.5rem 2.2rem 1.4rem;
  box-shadow: var(--edge-light), 0 18px 44px -18px rgba(0, 0, 0, .6),
              0 0 44px -16px rgba(255, 89, 11, .45);
}
.jd-emblem { display: block; width: 78px; height: 78px; margin: 0 auto .8rem; }
.jd-head {
  display: block; color: var(--orange); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .2em; margin-bottom: .35rem;
}
[dir="rtl"] .jd-head { letter-spacing: .05em; }
.jd-name { display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
[dir="rtl"] .jd-name { letter-spacing: 0; }
.jd-est { display: block; margin-top: .45rem; color: var(--fg-dim); font-size: .92rem; font-variant-numeric: tabular-nums; }
.jd-est small { color: var(--fg-faint); }

/* ---------- Page head (inner pages) ---------- */
.page-head { padding: calc(var(--nav-clear) + clamp(3.5rem, 9vw, 6.5rem)) 0 clamp(1rem, 3vw, 2rem); }
.page-head h1 { margin-bottom: 1.2rem; }
.page-head .lead { color: var(--fg-dim); }

/* Back link at the top of a deeper page, so leaving doesn't mean scrolling. */
.crumb-back {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--fg-faint); font-size: .85rem; letter-spacing: .04em;
  margin-bottom: 1.1rem; transition: color .2s;
}
.crumb-back:hover { color: var(--orange); }
.crumb-back span { transition: transform .2s var(--ease); }
.crumb-back:hover span { transform: translateX(-3px); }
[dir="rtl"] .crumb-back:hover span { transform: translateX(3px); }
.filters { display: flex; gap: .6rem; margin-top: 2rem; flex-wrap: wrap; }
.svc-jumps { gap: .5rem; }
.svc-jumps .chip { font-size: .84rem; padding: .5rem .9rem; }
.svc-jumps .chip-quiet { color: var(--fg-faint); }
.svc-jumps .chip-quiet:hover { color: var(--fg); }
/* Anchored rows shouldn't land under the fixed header. */
.svc-row, .faq { scroll-margin-top: calc(var(--nav-clear) + 20px); }

.page-head + .section, .page-head ~ .section:first-of-type { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form { display: flex; flex-direction: column; gap: 1.15rem; }
.contact-form label { display: flex; flex-direction: column; gap: .4rem; font-size: var(--text-xs); color: var(--fg-dim); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
[dir="rtl"] .contact-form label { letter-spacing: .04em; }
input, textarea, select {
  background: rgba(0, 0, 0, .25); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  color: var(--fg); padding: .8rem 1rem; font: 400 var(--text-md) var(--font);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
input:hover, textarea:hover { border-color: var(--hairline-strong); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: rgba(255, 89, 11, .7); background: rgba(0, 0, 0, .35);
  box-shadow: 0 0 0 3px rgba(255, 89, 11, .14), inset 0 1px 2px rgba(0, 0, 0, .3);
}
.hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.alert { border-radius: var(--radius-sm); padding: .85rem 1.05rem; font-size: var(--text-sm); }
.alert.ok { background: rgba(76, 175, 109, .1); border: 1px solid rgba(76, 175, 109, .35); color: #9ed9b2; }
.alert.err { background: rgba(220, 60, 60, .1); border: 1px solid rgba(220, 60, 60, .35); color: #f1a5a5; }
.contact-side { padding-top: .4rem; }
.contact-side h3 { margin-bottom: 1rem; }
.contact-side p { padding-block: .8rem; border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); }
.contact-side p:first-of-type { border-top: 1px solid var(--hairline); }
.contact-side a { color: var(--fg); font-weight: 600; transition: color .2s; }
.contact-side a:hover { color: var(--orange); }
.contact-art {
  margin-top: 2rem; height: 220px; border-radius: var(--radius);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255, 89, 11, .2), transparent 70%),
    radial-gradient(50% 50% at 75% 75%, rgba(55, 141, 147, .2), transparent 70%),
    var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-rest);
}

/* ---------- Journey page ---------- */
.page-journey .footer { display: none; }
.journey-wrap { padding: calc(var(--nav-clear) + clamp(2.5rem, 7vw, 4.5rem)) 0 3rem; min-height: 100vh; }

/* Quiet ways out of the journey: visible, never competing with the chat. */
.journey-exits {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem; margin-top: 1.4rem; font-size: .85rem; color: var(--fg-faint);
}
.journey-exits a { color: var(--fg-dim); text-decoration: underline;
                   text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.journey-exits a:hover { color: var(--orange); text-decoration-color: currentColor; }
.journey-exits .sep { color: var(--hairline); }

/* On a narrow phone every pixel above the cards counts. */
@media (max-width: 560px) {
  .page-journey .journey-wrap { padding-top: calc(var(--nav-clear) + 1.2rem); }
}

.estimate-card {
  align-self: stretch; position: relative;
  background: linear-gradient(155deg, #241c16 0%, #1c1a18 55%, #191918 100%);
  border: 1px solid rgba(255, 89, 11, .35); border-radius: 18px;
  padding: 1.4rem 1.6rem;
  box-shadow: var(--edge-light), 0 18px 44px -18px rgba(0, 0, 0, .6);
  animation: bubbleIn .6s var(--ease) both;
  overflow: hidden;
}
.estimate-card::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 1.6rem;
  width: 44px; height: 2px; background: var(--orange); border-radius: 2px;
}
.estimate-card h4 { color: var(--orange); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .2em; margin-bottom: .7rem; }
[dir="rtl"] .estimate-card h4 { letter-spacing: .05em; }
.estimate-card .figure { font-size: clamp(1.8rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.estimate-card .figure small { font-size: 1rem; color: var(--fg-dim); font-weight: 500; letter-spacing: 0; }
.estimate-card .est-row { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; font-size: var(--text-sm); color: var(--fg-dim); }
.estimate-card .est-note { margin-top: .9rem; font-size: .78rem; color: var(--fg-faint); border-top: 1px solid var(--hairline); padding-top: .9rem; }

/* device preview */
.preview-panel h2 { margin-bottom: .4rem; }
.preview-panel > .muted { margin-bottom: 1.3rem; font-weight: 300; }
.device {
  border: 1px solid var(--hairline-strong); border-radius: 18px; overflow: hidden;
  box-shadow: var(--edge-light), 0 30px 70px -25px rgba(0, 0, 0, .75);
  animation: bubbleIn .6s var(--ease) both;
}
.device-chrome { display: flex; align-items: center; gap: 6px; background: #0e0e0d; padding: 11px 15px; border-bottom: 1px solid var(--hairline); }
.device-chrome span { width: 10px; height: 10px; border-radius: 50%; background: #333; }
.device-chrome span:nth-child(1) { background: #ff5f57; } .device-chrome span:nth-child(2) { background: #febc2e; } .device-chrome span:nth-child(3) { background: #28c840; }
.device-chrome em { margin-inline: auto; font: 400 .74rem/1 var(--font); color: #8a8a88; background: #1b1b1a; border: 1px solid var(--hairline); border-radius: 99px; padding: .35rem 1.15rem; font-style: normal; direction: ltr; }
.device-screen { min-height: 380px; }
.preview-actions { display: flex; gap: .8rem; margin-top: 1.3rem; flex-wrap: wrap; }

/* mini prototype inside the device */
.pv { --pv-bg: #101014; --pv-fg: #f2f2f2; --pv-dim: #9a9aa5; --pv-card: #1a1a22; --pv-acc: #ff590b; --pv-btn-fg: #fff;
  background: var(--pv-bg); color: var(--pv-fg); padding: 1.2rem 1.4rem 1.6rem; font-family: var(--font); min-height: 380px; animation: pvFade .8s var(--ease) both; }
@keyframes pvFade { from { opacity: 0; } to { opacity: 1; } }
.pv-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.pv-brand { font-weight: 700; font-size: 1.05rem; }
.pv-brand i { color: var(--pv-acc); font-style: normal; }
.pv-links { display: flex; gap: .9rem; font-size: .72rem; color: var(--pv-dim); }
.pv-hero { margin-bottom: 1.5rem; }
.pv-hero h1 { font-size: 1.6rem; line-height: 1.2; margin-bottom: .4rem; letter-spacing: -0.02em; }
.pv-hero h1 b { color: var(--pv-acc); }
.pv-hero p { color: var(--pv-dim); font-size: .82rem; margin-bottom: .9rem; }
.pv-cta { display: inline-block; background: var(--pv-acc); color: var(--pv-btn-fg); font-size: .8rem; font-weight: 600; border-radius: 99px; padding: .5rem 1.2rem; }
.pv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.pv-card { background: var(--pv-card); border-radius: 12px; padding: .8rem; font-size: .72rem; border: 1px solid color-mix(in srgb, var(--pv-fg) 8%, transparent); }
.pv-card .pv-ico { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--pv-acc) 25%, transparent); margin-bottom: .5rem; display: flex; align-items: center; justify-content: center; }
.pv-footer { margin-top: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--pv-fg) 12%, transparent); padding-top: .8rem; font-size: .65rem; color: var(--pv-dim); display: flex; justify-content: space-between; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hairline); padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; margin-top: clamp(2rem, 5vw, 3.5rem); position: relative; }
.footer::before {
  content: ''; position: absolute; top: -1px; inset-inline-start: 0;
  width: 120px; height: 1px;
  background: linear-gradient(90deg, var(--orange), transparent);
}
.footer-inner { display: flex; flex-direction: column; gap: 1.8rem; }
.footer-brand { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.footer-brand p { color: var(--fg-dim); font-size: var(--text-sm); font-weight: 300; }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-dim); }
.footer-links a { transition: color .2s; }
.footer-links a:hover { color: var(--fg); }
.footer-copy { color: var(--fg-faint); font-size: .8rem; border-top: 1px solid var(--hairline); padding-top: 1.4rem; }

/* ---------- Reveal on scroll (JS-gated) ---------- */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
html.js .reveal.in { opacity: 1; transform: none; }
/* keep stagger offsets composable with reveal */
@media (min-width: 1021px) {
  html.js .grid-4:not(.steps) > .reveal:nth-child(even) { transform: translateY(calc(2.2rem + 28px)); }
  html.js .grid-4:not(.steps) > .reveal.in:nth-child(even) { transform: translateY(2.2rem); }
  html.js .grid-4:not(.steps) > .reveal.in:nth-child(even):hover { transform: translateY(calc(2.2rem - 6px)); }
  html.js .grid-3 > .reveal:nth-child(3n-1) { transform: translateY(calc(2.6rem + 28px)); }
  html.js .grid-3 > .reveal.in:nth-child(3n-1) { transform: translateY(2.6rem); }
  html.js .grid-3 > .reveal.in:nth-child(3n-1):hover { transform: translateY(calc(2.6rem - 6px)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Craft layer: ambient life, status, CTA strip, journey extras
   ============================================================ */

/* ---------- Ambient drifting light ---------- */
.page-glow { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.page-glow::before, .page-glow::after {
  content: ''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(70px); will-change: transform;
}
.page-glow::before {
  background: radial-gradient(circle, rgba(255, 89, 11, .07), transparent 62%);
  top: -18vmax; inset-inline-end: -14vmax;
  animation: drift-a 34s ease-in-out infinite alternate;
}
.page-glow::after {
  background: radial-gradient(circle, rgba(55, 141, 147, .06), transparent 62%);
  bottom: -22vmax; inset-inline-start: -16vmax;
  animation: drift-b 44s ease-in-out infinite alternate;
}
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vmax, 10vmax, 0) scale(1.15); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(10vmax, -8vmax, 0) scale(.95); } }

/* ---------- Plain answers: what the client actually has to do ---------- */
.plain-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.4rem); margin-top: 2rem;
}
@media (max-width: 760px) { .plain-grid { grid-template-columns: 1fr; } }
.plain-card { display: flex; flex-direction: column; gap: .6rem; }
.plain-card h3 {
  font-size: 1.02rem; line-height: 1.35;
  padding-inline-start: 1.1rem; position: relative;
}
.plain-card h3::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, var(--orange));
}
.plain-card p { color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.8; }
.plain-grid > .plain-card:nth-child(2) { --accent: var(--teal); }
.plain-grid > .plain-card:nth-child(3) { --accent: #d4a24e; }
.plain-grid > .plain-card:nth-child(4) { --accent: #7fb069; }

/* ---------- One-page sections: unfolding lists ---------- */
/* The nav scrolls rather than navigates, so a section has to clear the fixed
   header when it lands. */
#top, #services, #work, #contact { scroll-margin-top: calc(var(--nav-clear) + 8px); }

[data-expandable] { scroll-margin-top: calc(var(--nav-clear) + 20px); }
.is-extra { display: none; }
[data-expandable].open > .is-extra { display: block; }
.expand-row { display: flex; justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.expand-row .link-more { background: none; border: 0; cursor: pointer; font: inherit; }
.expand-chev { display: inline-block; transition: transform .3s var(--ease); }
[aria-expanded="true"] .expand-chev { transform: rotate(180deg); }

.home-contact { margin-top: clamp(2rem, 5vw, 3.2rem); }

/* ---------- CTA: centered brand statement ---------- */
.cta-final {
  position: relative; text-align: center;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  overflow: visible;
}
.cta-ghost {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  height: clamp(200px, 32vw, 360px); width: auto;
  opacity: .045; pointer-events: none; user-select: none;
}
.cta-final .cta-title {
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.4rem);
  letter-spacing: -0.03em; max-width: 22ch; line-height: 1.06;
}
[dir="rtl"] .cta-final .cta-title { letter-spacing: 0; line-height: 1.25; }
.cta-sub { font-weight: 300; font-size: var(--text-lg); max-width: 34rem; }
.cta-final .btn { margin-top: 1rem; }
.cta-final .btn .arr { display: inline-block; transition: transform .35s var(--ease); margin-inline-start: .2rem; }
[dir="rtl"] .cta-final .btn .arr { transform: scaleX(-1); }
.cta-final .btn:hover .arr { transform: translateX(4px); }
[dir="rtl"] .cta-final .btn:hover .arr { transform: scaleX(-1) translateX(4px); }
/* two tiny drifting brand sparks */
.cta-final::before, .cta-final::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.cta-final::before {
  width: 9px; height: 9px; background: var(--orange);
  top: 22%; inset-inline-start: 16%;
  box-shadow: 0 0 14px 2px rgba(255, 89, 11, .5);
  animation: spark-a 7s ease-in-out infinite alternate;
}
.cta-final::after {
  width: 7px; height: 7px; background: var(--teal);
  bottom: 24%; inset-inline-end: 15%;
  box-shadow: 0 0 12px 2px rgba(55, 141, 147, .5);
  animation: spark-b 9s ease-in-out infinite alternate;
}
@keyframes spark-a { from { transform: translate(0, 0); } to { transform: translate(14px, -18px); } }
@keyframes spark-b { from { transform: translate(0, 0); } to { transform: translate(-16px, 14px); } }

/* ---------- Journey: live estimate pill ---------- */
.live-est {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-size: .78rem; color: var(--fg-dim);
  background: rgba(255, 89, 11, .07);
  border: 1px solid rgba(255, 89, 11, .3);
  border-radius: 999px; padding: .32rem .85rem;
}
.live-est strong { color: var(--fg); font-size: .92rem; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.live-est small { color: var(--fg-faint); }

/* Quiet helper chips ("what do these mean?" / "back"): present, not competing. */
.chip-ghost { border-style: dashed; color: var(--fg-dim); background: transparent; }
.chip-ghost:hover { color: var(--fg); border-color: var(--hairline-strong); }

/* ---------- Journey: the staged experience ---------- */
/* One scene at a time in a full-height frame; scenes rise in and lift out.
   Vertical motion only, so nothing needs mirroring for RTL. The extra bottom
   padding is the fixed estimate pill's lane: content scrolls clear of it
   instead of underneath it. */
.jx-wrap {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
.jx-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.jx-stage-box { flex: 1; display: flex; width: 100%; }
.jx-stage { width: 100%; display: flex; align-items: safe center; }
.jx-scene {
  width: 100%; max-width: 900px; margin-inline: auto; text-align: center;
  padding-block: clamp(1.2rem, 4vh, 3rem);
  animation: jx-in .55s var(--ease) both;
}
.jx-scene.leaving { animation: jx-out .2s var(--ease) both; }
@keyframes jx-in { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes jx-out { to { opacity: 0; transform: translateY(-18px) scale(.99); } }

.jx-title { font-size: clamp(2rem, 1.2rem + 4vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.1; max-width: 18ch; margin-inline: auto; }
[dir="rtl"] .jx-title { letter-spacing: 0; line-height: 1.3; }
.jx-sub { margin-top: 1.1rem; font-size: var(--text-lg); font-weight: 300; line-height: 1.8; max-width: 36rem; margin-inline: auto; }
.jx-q {
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.4rem);
  letter-spacing: -0.02em; line-height: 1.2;
  max-width: 26ch; margin: 0 auto clamp(1.6rem, 4vh, 2.6rem);
  text-wrap: balance;
}
[dir="rtl"] .jx-q { letter-spacing: 0; line-height: 1.4; }

.jx-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.jx-cards.compact { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.jx-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.05rem .95rem;
  min-height: 62px;
  display: flex; align-items: center; justify-content: center;
  font: 600 .95rem/1.4 var(--font); color: var(--fg);
  cursor: pointer;
  box-shadow: var(--shadow-rest);
  transition: transform .25s var(--ease-spring), border-color .25s var(--ease),
              box-shadow .25s var(--ease), background .25s var(--ease);
}
/* the option's colour lives in a top bar, like the cards elsewhere on the site */
.jx-card::before {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 2px; border-radius: 2px;
  background: var(--hue, var(--orange));
  opacity: 0; transition: opacity .25s var(--ease), width .35s var(--ease);
}
.jx-card:hover { transform: translateY(-3px); border-color: var(--hairline-strong); box-shadow: var(--shadow-lift); }
.jx-card:hover::before { opacity: .9; width: 54px; }
.jx-card:active { transform: scale(.97); }
.jx-card.selected {
  border-color: color-mix(in srgb, var(--hue, var(--orange)) 70%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hue, var(--orange)) 16%, #1d1d1c),
    color-mix(in srgb, var(--hue, var(--orange)) 7%, #181817));
  box-shadow: var(--edge-light), 0 8px 24px -10px color-mix(in srgb, var(--hue, var(--orange)) 55%, transparent);
}
.jx-card.selected::before { opacity: 1; width: 54px; }
.jx-card-label { pointer-events: none; }
.jx-why {
  position: absolute; top: 6px; inset-inline-end: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--hairline);
  color: var(--fg-faint); font: 600 .72rem/1 var(--font);
  cursor: help;
  transition: color .2s, border-color .2s;
}
.jx-why:hover { color: var(--orange); border-color: rgba(255, 89, 11, .5); }

.jx-actions { margin-top: clamp(1.8rem, 4vh, 2.6rem); display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }

.jx-beat .jx-line { font-size: clamp(1.05rem, .9rem + 1vw, 1.35rem); font-weight: 300; line-height: 1.9; max-width: 42rem; margin-inline: auto; }
.jx-reading { color: var(--fg-dim); }
.jx-swirl { display: block; margin: 0 auto 1.2rem; }

/* the reveal: emblem + face card + estimate, stacked with a beat between */
.jx-reveal .face-card { max-width: 640px; margin-inline: auto; }
.jx-emblem { display: block; margin: 0 auto .9rem; }
.jx-estcard { max-width: 640px; margin: 1rem auto 0; text-align: start; animation-delay: .25s; }
.jx-estcard .est-row { margin-top: .6rem; font-size: var(--text-sm); color: var(--fg-dim); line-height: 1.75; }

/* contact + code */
.jx-contact .jx-form { max-width: 430px; margin-inline: auto; text-align: start; }
.jx-field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.jx-field span {
  font-size: var(--text-xs); color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
}
[dir="rtl"] .jx-field span { letter-spacing: .04em; }
.jx-err { min-height: 1.3em; margin-top: .2rem; color: #f1a5a5; font-size: .85rem; }
.jx-code { width: 100%; text-align: center; font-size: 1.3rem; letter-spacing: .4em; }
.jx-contact .jx-line { font-size: 1.05rem; line-height: 1.8; max-width: 34rem; margin: 0 auto 1.4rem; }

/* fixed chrome: live estimate pill and the explain sheet */
.jx-est {
  position: fixed; z-index: 80;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 16px;
}
.jx-explain {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--hairline-strong);
  padding: 1.3rem clamp(1.2rem, 6vw, 3rem) calc(1.3rem + env(safe-area-inset-bottom, 0px));
  animation: jx-sheet .35s var(--ease) both;
}
@keyframes jx-sheet { from { transform: translateY(100%); } to { transform: none; } }
.jx-explain-in { max-width: 680px; margin-inline: auto; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.jx-explain-in p { font-size: .95rem; line-height: 1.8; color: var(--fg); }

.jx-consent { font-size: .78rem; line-height: 1.7; margin-top: .8rem; text-align: center; }
.jx-done .jx-emblem { margin-bottom: 1.4rem; }

@media (max-width: 620px) {
  .jx-cards, .jx-cards.compact { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .jx-card { min-height: 56px; padding: .85rem .6rem; font-size: .86rem; }
  /* centred on a phone: a corner pill sat on top of the bottom row of cards */
  .jx-est {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    inset-inline: 0; width: max-content; margin-inline: auto;
    max-width: calc(100vw - 20px);
  }
}

/* journey progress: a quiet game-like tracker in the chat header */
.j-progress { display: inline-flex; align-items: center; gap: .5rem; }
.j-progress i {
  display: block; width: 72px; height: 4px; border-radius: 99px;
  background: var(--bg-3); position: relative; overflow: hidden;
}
.j-progress i::after {
  content: ''; position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), #d4a24e);
  transform: scaleX(var(--p, 0)); transform-origin: var(--tx-origin, left);
  transition: transform .5s var(--ease);
}
[dir="rtl"] .j-progress i::after { --tx-origin: right; background: linear-gradient(270deg, var(--orange), #d4a24e); }
.j-progress em {
  font-style: normal; font-size: .72rem; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* The reveal: your website's face. One card, a little ceremony. */
.face-card {
  position: relative; margin-block: .4rem; text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 89, 11, .15), transparent 62%),
    linear-gradient(160deg, #262019 0%, #1c1a18 55%, #191918 100%);
  border: 1px solid rgba(255, 89, 11, .5); border-radius: 18px;
  padding: 1.5rem 1.6rem 1.35rem;
  box-shadow: var(--edge-light), 0 18px 44px -18px rgba(0, 0, 0, .6),
              0 0 44px -16px rgba(255, 89, 11, .45);
  animation: face-in .7s var(--ease-spring) both;
  overflow: hidden;
}
@keyframes face-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.face-card h4 {
  color: var(--orange); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .2em; margin-bottom: .5rem;
}
[dir="rtl"] .face-card h4 { letter-spacing: .05em; }
.face-card .face-name {
  font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; margin-bottom: .55rem;
}
[dir="rtl"] .face-card .face-name { letter-spacing: 0; }
.face-card p { color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.75; max-width: 34rem; margin-inline: auto; }
.face-card .face-vibe { margin-top: .55rem; color: var(--fg-faint); font-size: .8rem; }
/* two pixel sparks, same family as the closing CTA's */
.face-card::before, .face-card::after { content: ''; position: absolute; width: 6px; height: 6px; }
.face-card::before {
  top: 18%; inset-inline-start: 9%; background: var(--orange);
  box-shadow: 0 0 12px 2px rgba(255, 89, 11, .5);
  animation: spark-a 6s ease-in-out infinite alternate;
}
.face-card::after {
  bottom: 16%; inset-inline-end: 8%; background: var(--teal);
  box-shadow: 0 0 10px 2px rgba(55, 141, 147, .5);
  animation: spark-b 8s ease-in-out infinite alternate;
}

/* chip selection ring pulse */
.chip.pop { animation: chip-ring .55s var(--ease); }
@keyframes chip-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 89, 11, .5); }
  100% { box-shadow: 0 0 0 14px rgba(255, 89, 11, 0); }
}

/* mood swatches in the preview panel */
.mood-dots { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.mood-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  background: var(--sw, #333); box-shadow: inset 0 0 0 3px var(--bg);
  transition: transform .3s var(--ease-spring), border-color .3s var(--ease);
}
.mood-dot:hover { transform: scale(1.15); }
.mood-dot.active { border-color: var(--fg); }
@media (pointer: coarse) { .mood-dot { width: 38px; height: 38px; } }

/* ---------- Accent-color life: cycle brand-adjacent hues ---------- */
.grid > .service-card:nth-child(4n+2) { --accent: var(--teal); }
.grid > .service-card:nth-child(4n+3) { --accent: #d4a24e; }
.grid > .service-card:nth-child(4n+4) { --accent: #7fb069; }
.service-card .icon {
  background: linear-gradient(150deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .015) 55%,
              color-mix(in srgb, var(--accent, var(--orange)) 10%, transparent) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
              inset 0 -10px 18px -10px color-mix(in srgb, var(--accent, var(--orange)) 40%, transparent),
              0 8px 20px -8px rgba(0, 0, 0, .6);
}
.service-card .icon::before { background: var(--accent, var(--orange)); }
.service-card .price strong { color: var(--accent, var(--orange)); }
.steps .step:nth-child(2) { --accent: var(--teal); }
.steps .step:nth-child(3) { --accent: #d4a24e; }
.steps .step:nth-child(4) { --accent: #7fb069; }
.steps .step::before { background: var(--accent, var(--orange)); }
.steps .step:hover .step-num { color: var(--accent, var(--orange)); }

/* ---------- Services: editorial numbered accordion ---------- */
.svc-list { border-top: 1px solid var(--hairline); }
.svc-row { position: relative; border-bottom: 1px solid var(--hairline); transition: background .35s var(--ease); }
.svc-row::before {
  content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
  width: 2px; background: var(--accent, var(--orange));
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease);
}
.svc-row:hover, .svc-row.open { background: rgba(255, 255, 255, .018); }
.svc-row:hover::before, .svc-row.open::before { transform: scaleY(1); }
.svc-list > .svc-row:nth-child(4n+2) { --accent: var(--teal); }
.svc-list > .svc-row:nth-child(4n+3) { --accent: #d4a24e; }
.svc-list > .svc-row:nth-child(4n+4) { --accent: #7fb069; }
.svc-head {
  width: 100%; background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: start;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(.4rem, 1.5vw, 1.2rem);
}
.svc-num {
  font-size: .78rem; font-weight: 600; line-height: 1;
  letter-spacing: .2em; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  min-width: 2.6ch;
  transition: color .35s var(--ease);
}
.svc-row:hover .svc-num, .svc-row.open .svc-num { color: var(--accent, var(--orange)); }
.svc-main h3 { margin-bottom: .25rem; transition: transform .35s var(--ease); }
.svc-row:hover .svc-main h3 { transform: translateX(4px); }
[dir="rtl"] .svc-row:hover .svc-main h3 { transform: translateX(-4px); }
.svc-main p { color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.7; max-width: 52ch; }
.svc-price { text-align: end; font-size: var(--text-sm); color: var(--fg-dim); white-space: nowrap; }
.svc-price strong { display: block; color: var(--fg); font-size: 1.25rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; transition: color .35s var(--ease); }
.svc-row:hover .svc-price strong, .svc-row.open .svc-price strong { color: var(--accent, var(--orange)); }
/* plus / minus indicator */
.svc-chev { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.svc-chev::before, .svc-chev::after {
  content: ''; position: absolute; background: var(--fg-faint); border-radius: 2px;
  transition: background .3s var(--ease), transform .35s var(--ease);
}
.svc-chev::before { inset-inline: 0; top: 6px; height: 2px; }
.svc-chev::after { inset-block: 0; inset-inline-start: 6px; width: 2px; }
.svc-row.open .svc-chev::after { transform: scaleY(0); }
.svc-row.open .svc-chev::before, .svc-row.open .svc-chev::after { background: var(--accent, var(--orange)); }
/* expandable overview */
.svc-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.svc-row.open .svc-detail { grid-template-rows: 1fr; }
.svc-detail-in { overflow: hidden; padding-inline: clamp(.4rem, 1.5vw, 1.2rem); }
.svc-detail-in > p {
  color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.8;
  max-width: 62ch; padding-inline-start: calc(2.6ch + clamp(1rem, 3vw, 2.5rem));
}
.svc-detail-meta {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  padding: 1.1rem 0 1.6rem;
  padding-inline-start: calc(2.6ch + clamp(1rem, 3vw, 2.5rem));
}
.svc-detail-range { font-size: var(--text-sm); color: var(--fg-dim); }
.svc-detail-range strong { color: var(--fg); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .svc-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .svc-price { display: none; }
  .svc-detail-in > p, .svc-detail-meta { padding-inline-start: 0; }
}

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-top: 1.8rem; }
.testi { padding: 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; }
.testi blockquote { font-size: 1.02rem; line-height: 1.85; font-weight: 300; flex: 1; }
.testi blockquote::before { content: '“'; display: block; font-size: 2.6rem; line-height: 1; color: var(--orange); font-weight: 700; margin-bottom: .3rem; }
[dir="rtl"] .testi blockquote::before { content: '”'; }
.testi figcaption { color: var(--fg-dim); font-size: .88rem; font-weight: 600; }

/* ---------- Journey: restart inside the chat header ---------- */
.chat-restart {
  margin-inline-start: auto;
  background: none; border: 0; cursor: pointer;
  font: 500 .78rem var(--font); color: var(--fg-faint);
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .5rem; border-radius: 8px; min-height: 32px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.chat-restart:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.chat-restart span { border-bottom: 1px dotted var(--fg-faint); }