/* Franic Digital
   Layout: a cool paper ground taken from the logo plate (deep night in dark
   mode), navy ink from the wordmark, and the cyan > blue > violet ribbon kept
   for the mark itself and a few deliberate moments. The hero is a design-tool
   canvas, services are a typographic index, the lab is a blueprint workbench. */

/* ---------- Fonts (self-hosted, Latin and Latin Extended) ----------
   Variable fonts from Google Fonts (SIL Open Font License), one file per
   family and subset. The "Fallback" faces are local fonts resized to the
   same metrics, so text barely moves when the real font arrives. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../assets/fonts/unbounded-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../assets/fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial Black"), local("ArialMT-Black"); size-adjust: 115.87%; ascent-override: 85.44%; descent-override: 20.71%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 102.08%; ascent-override: 98.95%; descent-override: 28.41%; line-gap-override: 0%; }

/* ---------- Tokens: light ---------- */
:root {
  color-scheme: light;
  --bg: #F2F4FA;
  --surface: #FFFFFF;
  --ink: #0A0F2C;
  --ink-soft: #4A5275;
  --ink-faint: #767D9C;
  --line: rgba(10, 15, 44, 0.12);
  --line-strong: rgba(10, 15, 44, 0.24);
  --accent: #1F4FFF;
  --accent-ink: #FFFFFF;
  --btn-bg: #0A0F2C;
  --btn-fg: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-line: rgba(10, 15, 44, 0.2);
  --dot: rgba(10, 15, 44, 0.16);
  --shadow-ink: rgba(20, 30, 110, 0.3);
  --nav-bg: rgba(242, 244, 250, 0.985);
  --ok: #0F7A55;
  --warn: #8A5A00;
  --danger: #C4314B;
  --lab-bg: #070B22;
  --lab-ink: #EEF1FA;
  --lab-soft: #A4ADCF;
  --lab-line: rgba(238, 241, 250, 0.16);
  --lab-grid: rgba(238, 241, 250, 0.06);
  --signal: #3DDCF7;
  --footer-bg: #070B22;
  --footer-ink: #EEF1FA;
  --footer-soft: #A4ADCF;
  --show-light: block;
  --show-dark: none;
  --ribbon: linear-gradient(100deg, #18CFF2 0%, #1F4FFF 48%, #8A2BF5 100%);

  --font-display: "Unbounded", "Unbounded Fallback", "Arial Black", system-ui, sans-serif;
  --font-text: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --track-display: -0.035em;

  --t-hero: clamp(2.35rem, 4.3vw, 4.25rem);
  --t-h2: clamp(2rem, 4.4vw, 3.9rem);
  --t-h3: clamp(1.45rem, 2.3vw, 2.1rem);
  --t-lead: clamp(1.08rem, 1.35vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;

  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(5rem, 11vw, 9.5rem);
  --nav-h: 72px;
  --radius: 18px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --e1: 0 1px 2px rgba(10, 15, 60, 0.06), 0 4px 12px rgba(10, 15, 60, 0.05);
  --e2: 0 2px 6px rgba(10, 15, 60, 0.06), 0 18px 40px -12px rgba(16, 30, 110, 0.22);
  --e3: 0 30px 70px -20px rgba(20, 30, 120, 0.35);
}

/* ---------- Tokens: dark (system preference, unless light was chosen) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #070A1C;
    --surface: #0D1230;
    --ink: #EDF0FA;
    --ink-soft: #A7AFCE;
    --ink-faint: #69719A;
    --line: rgba(237, 240, 250, 0.12);
    --line-strong: rgba(237, 240, 250, 0.26);
    --accent: #6F96FF;
    --accent-ink: #070A1C;
    --btn-bg: #EDF0FA;
    --btn-fg: #070A1C;
    --field-bg: #0A0F27;
    --field-line: rgba(237, 240, 250, 0.22);
    --dot: rgba(237, 240, 250, 0.14);
    --shadow-ink: rgba(0, 0, 0, 0.55);
    --nav-bg: rgba(7, 10, 28, 0.98);
    --ok: #4FD6A2;
    --warn: #F2C063;
    --danger: #FF7A8F;
    --lab-bg: #0B1640;
    --lab-ink: #EEF1FA;
    --lab-soft: #A9B6E0;
    --lab-line: rgba(160, 200, 255, 0.2);
    --lab-grid: rgba(160, 200, 255, 0.07);
    --signal: #5BE3FA;
    --footer-bg: #03050F;
    --footer-ink: #EEF1FA;
    --footer-soft: #9AA3C6;
    --show-light: none;
    --show-dark: block;
    --e1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --e2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    --e3: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  }
}
/* ---------- Tokens: dark (chosen with the toggle) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070A1C;
  --surface: #0D1230;
  --ink: #EDF0FA;
  --ink-soft: #A7AFCE;
  --ink-faint: #69719A;
  --line: rgba(237, 240, 250, 0.12);
  --line-strong: rgba(237, 240, 250, 0.26);
  --accent: #6F96FF;
  --accent-ink: #070A1C;
  --btn-bg: #EDF0FA;
  --btn-fg: #070A1C;
  --field-bg: #0A0F27;
  --field-line: rgba(237, 240, 250, 0.22);
  --dot: rgba(237, 240, 250, 0.14);
  --shadow-ink: rgba(0, 0, 0, 0.55);
  --nav-bg: rgba(7, 10, 28, 0.98);
  --ok: #4FD6A2;
  --warn: #F2C063;
  --danger: #FF7A8F;
  --lab-bg: #0B1640;
  --lab-ink: #EEF1FA;
  --lab-soft: #A9B6E0;
  --lab-line: rgba(160, 200, 255, 0.2);
  --lab-grid: rgba(160, 200, 255, 0.07);
  --signal: #5BE3FA;
  --footer-bg: #03050F;
  --footer-ink: #EEF1FA;
  --footer-soft: #9AA3C6;
  --show-light: none;
  --show-dark: block;
  --e1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --e2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  --e3: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}

/* ---------- Arabic type ---------- */
:root[lang="ar"] {
  --font-display: "Noto Kufi Arabic", "Unbounded", system-ui, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;
  --track-display: 0;
}
:root[lang="ar"] body { line-height: 1.75; }
:root[lang="ar"] .hero__title, :root[lang="ar"] .section-title, :root[lang="ar"] .contact__title { line-height: 1.3; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Lenis smooth scroll: recommended CSS from the Lenis package (v1.3.26) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
/* No native image dragging or ghost images anywhere (main.js also blocks dragstart) */
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--btn-bg); color: var(--btn-fg); padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.noscript { padding: 16px; text-align: center; background: var(--btn-bg); color: var(--btn-fg); }
.label {
  font-family: var(--font-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
:root[lang="ar"] .label { letter-spacing: 0; text-transform: none; font-size: 0.875rem; }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 1.5px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform 140ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--ribbon); transform: translateY(101%); transition: transform 320ms var(--ease-out);
}
.btn span { position: relative; }
.btn:active { transform: scale(0.97); }
/* The magnetic button is moved by GSAP every frame: keep transform out of its transitions */
.btn[data-magnet] { transition-property: color, border-color, box-shadow, background-color; }
.btn[data-magnet]:active { transform: none; }
.btn--primary { --b-bg: var(--btn-bg); --b-fg: var(--btn-fg); --b-bd: var(--btn-bg); box-shadow: var(--e1); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.btn--lg { min-height: 58px; padding: 0 34px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { --b-fg: #FFFFFF; border-color: transparent; box-shadow: var(--e2); }
  .btn--primary:hover::before { transform: translateY(0); }
  .btn--ghost:hover { --b-bg: var(--btn-bg); --b-fg: var(--btn-fg); --b-bd: var(--btn-bg); }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.nav.is-solid, .menu-open .nav { background: var(--nav-bg); box-shadow: 0 1px 0 var(--line); }
.nav__inner {
  max-width: 1320px; margin-inline: auto; height: var(--nav-h);
  display: flex; align-items: center; gap: 20px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-inline-end: auto; flex-shrink: 0; }
.nav__mark { width: 34px; height: auto; }
.nav__word { width: 112px; height: auto; }
.nav__word--light { display: var(--show-light); }
.nav__word--dark { display: var(--show-dark); }
.nav__links { display: flex; gap: 2px; }
.nav__links a {
  padding: 8px 12px; border-radius: 999px;
  font-weight: 500; font-size: 0.9375rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); background: var(--line); }
.nav__tools { display: flex; align-items: center; gap: 10px; }

/* Theme switch */
.theme { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; flex-shrink: 0; }
.theme__track {
  position: relative; display: block; width: 60px; height: 34px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line-strong);
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.theme__knob {
  --knob-x: 26px;
  position: absolute; top: 3px; inset-inline-start: 3px; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform 320ms var(--ease-out), background-color 240ms var(--ease-out);
}
[dir="rtl"] .theme__knob { --knob-x: -26px; }
.theme[aria-checked="true"] .theme__knob { transform: translateX(var(--knob-x)); }
.theme__icon { position: absolute; width: 15px; height: 15px; transition: opacity 200ms var(--ease-out), transform 320ms var(--ease-out); }
.theme__icon--moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }
.theme[aria-checked="true"] .theme__icon--sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
.theme[aria-checked="true"] .theme__icon--moon { opacity: 1; transform: none; }
.theme:hover .theme__track { border-color: var(--ink-soft); }

/* Menu button */
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface);
  font-weight: 600; font-size: 0.9375rem; cursor: pointer;
  transition: border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.menu-btn:hover { border-color: var(--ink-soft); }
.menu-btn:active { transform: scale(0.97); }
.menu-btn__icon { display: grid; gap: 5px; width: 16px; }
.menu-btn__icon i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform 240ms var(--ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1140px) { .nav__links { display: none; } }
@media (max-width: 640px) {
  .nav__cta { display: none; }
  .nav__inner { gap: 10px; }
  .nav__word { width: 96px; }
  .nav__mark { width: 30px; }
  .menu-btn { width: 42px; padding: 0; justify-content: center; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
}
.menu__inner {
  max-width: 1320px; margin-inline: auto; min-height: 100%;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 32px clamp(32px, 6vw, 96px);
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(24px, 5vh, 56px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.menu__nav { display: flex; flex-direction: column; align-self: start; }
.menu__nav a {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem); line-height: 1.08;
  text-decoration: none; padding-block: 6px; color: var(--ink);
  transition: color 160ms var(--ease-out);
}
/* GSAP moves the link; hover moves the inner span, so the two never fight */
.menu__nav a span { display: inline-block; transition: transform 260ms var(--ease-out); }
:root[lang="ar"] .menu__nav a { letter-spacing: 0; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
  .menu__nav:hover a { color: var(--ink-faint); }
  .menu__nav a:hover { color: var(--ink); }
  .menu__nav a:hover span { transform: translateX(10px); }
  [dir="rtl"] .menu__nav a:hover span { transform: translateX(-10px); }
}
.menu__cta { grid-column: 1; align-self: end; justify-self: start; }

.lang { display: grid; gap: 14px; align-content: start; padding-top: 10px; }
.lang__title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.lang__search {
  position: relative; display: flex; align-items: center;
}
.lang__search svg { position: absolute; inset-inline-start: 16px; width: 18px; height: 18px; color: var(--ink-soft); pointer-events: none; }
.lang__search input {
  width: 100%; min-height: 50px; padding-block: 10px; padding-inline: 46px 16px; border-radius: 12px;
  border: 1.5px solid var(--field-line); background: var(--field-bg); font-size: 1rem;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.lang__search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.lang__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Every option centres its two lines in the box, whatever the script or direction */
.lang__opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 72px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface);
  text-align: center;
  cursor: pointer; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.lang__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lang__native { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.lang__en { display: block; font-size: 0.8125rem; line-height: 1.3; color: var(--ink-soft); }
/* Arabic in its own typeface, with leading matched so the line sits optically centred */
.lang__native:lang(ar) { font-family: "IBM Plex Sans Arabic", "Noto Kufi Arabic", system-ui, sans-serif; font-size: 1.125rem; line-height: 1.25; }
.lang__opt:hover { border-color: var(--ink-soft); }
.lang__opt:active { transform: scale(0.98); }
.lang__opt:has(input:checked) { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.lang__opt:has(input:checked) .lang__en { color: inherit; opacity: 0.72; }
.lang__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.lang__empty { color: var(--ink-soft); font-size: 0.9375rem; }

@media (max-width: 860px) {
  .menu__inner { grid-template-columns: 1fr; grid-template-rows: auto; gap: 28px; }
  .menu__cta { grid-column: auto; justify-self: stretch; }
  .lang { padding-top: 20px; border-top: 1px solid var(--line); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: clip;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(2rem, 6vw, 4.5rem));
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.hero__canvas {
  position: absolute; inset: -10% -5%;
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000 15%, transparent 72%);
  pointer-events: none;
}
[dir="rtl"] .hero__canvas {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 28% 45%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 28% 45%, #000 15%, transparent 72%);
}
/* Background video. Rendered on white (light) or black (dark) and blended,
   so only the ribbons and line drawings remain over the page and its dots.
   GSAP animates .hero__media (scroll exit), so it has no CSS transitions;
   the mirror for right-to-left lives on .hero__frame instead. */
.hero__media { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transform-origin: 70% 40%; }
.hero__frame {
  position: absolute; inset: 0;
  background: url("../assets/video/hero-light-wide.jpg") 70% 50% / cover no-repeat;
  /* soft bottom edge, so the scroll exit melts into the next section */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 90%);
}
[dir="rtl"] .hero__frame { transform: scaleX(-1); }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
  opacity: 0; transition: opacity 700ms var(--ease-out);
}
.hero__video.is-playing { opacity: 1; }
/* Keeps the headline and buttons crisp over the moving side */
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 34%, transparent 58%);
}
[dir="rtl"] .hero__veil { background: linear-gradient(270deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 34%, transparent 58%); }
.hero__toggle {
  position: absolute; z-index: 4; bottom: clamp(14px, 2.4vw, 26px); inset-inline-start: max(var(--gutter), env(safe-area-inset-left, 0px));
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--ink-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.hero__toggle:hover { color: var(--ink); border-color: var(--ink); }
.hero__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero__toggle svg { width: 16px; height: 16px; fill: currentColor; grid-area: 1 / 1; }
.hero__toggle .hero__toggle-play, .hero__toggle.is-paused .hero__toggle-pause { display: none; }
.hero__toggle.is-paused .hero__toggle-play { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__media { mix-blend-mode: screen; }
  :root:not([data-theme="light"]) .hero__frame { background-image: url("../assets/video/hero-dark-wide.jpg"); }
}
:root[data-theme="dark"] .hero__media { mix-blend-mode: screen; }
:root[data-theme="dark"] .hero__frame { background-image: url("../assets/video/hero-dark-wide.jpg"); }
@media (max-width: 900px) {
  .hero__media { transform-origin: 50% 70%; }
  .hero__frame { background-image: url("../assets/video/hero-light-tall.jpg"); background-position: 50% 50%; }
  .hero__video { object-position: 50% 50%; }
  /* phones: text sits above the logo, so the veil is fully opaque behind it */
  .hero__veil, [dir="rtl"] .hero__veil { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 42%, color-mix(in srgb, var(--bg) 70%, transparent) 52%, transparent 66%); }
}
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__frame { background-image: url("../assets/video/hero-dark-tall.jpg"); }
}
@media (max-width: 900px) {
  :root[data-theme="dark"] .hero__frame { background-image: url("../assets/video/hero-dark-tall.jpg"); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center; gap: clamp(2rem, 4vw, 4rem);
  min-height: min(calc(100svh - var(--nav-h) - 9rem), 720px);
}
.hero__copy { min-width: 0; display: grid; gap: 28px; }
.hero__title { font-size: var(--t-hero); line-height: 1.02; max-width: 18ch; }
.hero__sub { font-size: var(--t-lead); color: var(--ink-soft); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.stage { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; }

.logo { position: absolute; left: 16%; top: 14%; width: 68%; aspect-ratio: 646 / 640; transform-style: preserve-3d; perspective: 900px; }
.logo__plane { position: absolute; inset: 0; pointer-events: none; }
.logo__layer, .logo__shadow { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.logo__shadow { inset: auto 14% -8% 14%; height: 10%; width: auto; background: radial-gradient(closest-side, var(--shadow-ink), transparent); filter: blur(10px); }
.logo__layer--upper { filter: drop-shadow(0 18px 22px rgba(20, 40, 160, 0.22)); }
.logo__layer--lower { filter: drop-shadow(0 14px 18px rgba(70, 20, 160, 0.2)); }
.logo__hit {
  position: absolute; inset: -4%; border: 0; border-radius: 12px; background: transparent;
  cursor: grab; touch-action: none; z-index: 3; -webkit-tap-highlight-color: transparent;
}
.logo__hit:active { cursor: grabbing; }
.logo__hit:focus-visible { outline-offset: 10px; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 3.25rem; }
  .stage { width: min(100%, 400px); }
  .hero__title { max-width: 16ch; }
}
@media (max-width: 520px) {
  .hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 1.75rem); }
  .hero__copy { gap: 20px; }
  .hero__title { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .hero__sub { font-size: 1rem; }
  .hero__actions { gap: 10px; }
  /* side by side when they fit, one per row when a translation is longer */
  .hero__actions .btn { flex: 1 0 auto; padding: 0 18px; font-size: 0.9375rem; min-height: 50px; }
  .stage { width: min(86%, 330px); }
}

/* ---------- Shared section type ---------- */
.section-title { font-size: var(--t-h2); line-height: 1.02; }
.section-intro { font-size: var(--t-lead); color: var(--ink-soft); max-width: 56ch; }

/* ---------- Services ----------
   Default (every width, reduced motion): an editorial list, one row per
   service, name beside its details from 760px up, stacked below.
   Pinned (.services.is-pinned, added by main.js at >= 1100 x 700 with motion):
   the index of names on the left, the details stacked on the right and
   scrubbed through as the section is scrolled. */
.services { padding-block: var(--section); }
.services__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.services__head { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.svc { display: contents; }
.svc__tabs { display: none; }
.svc__panels { display: grid; min-width: 0; }
.svc__panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; min-width: 0;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--line);
}
.svc__panel:last-child { border-bottom: 1px solid var(--line); }
.svc__panel > * { min-width: 0; }
.svc__name { font-size: clamp(1.55rem, 2.6vw, 2.25rem); line-height: 1.1; will-change: transform; }
.svc__body { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); min-width: 0; }
.svc__lead { font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); max-width: 40ch; }
:root[lang="ar"] .svc__lead { letter-spacing: 0; line-height: 1.7; }
.svc__block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* three benefits: one row when the details column can fit three readable
   columns, otherwise a single column (never two plus an orphan) */
.svc__body { container-type: inline-size; }
.svc__outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 20px; }
@container (min-width: 38rem) { .svc__outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc__outcomes li { padding-top: 12px; border-top: 1.5px solid var(--ink); font-weight: 500; line-height: 1.45; }
.svc__includes { color: var(--ink-soft); line-height: 1.7; }
/* separators trail each item, so a line never starts with an orphaned slash */
.svc__includes span, .project__tags span { white-space: nowrap; }
.svc__includes span:not(:last-child)::after { content: "/"; margin-inline: 0.45em 0.1em; color: var(--ink-faint); }
@media (min-width: 760px) {
  .svc__panel { grid-template-columns: minmax(10rem, 4fr) minmax(0, 8fr); column-gap: clamp(1.5rem, 4vw, 4rem); }
}

/* Pinned scene */
.services.is-pinned { padding-block: 0; }
.services.is-pinned .services__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head panel" "tabs panel";
  /* two auto rows so the composition centres in the pinned screen instead of stretching */
  grid-template-rows: auto auto; column-gap: clamp(2rem, 5vw, 5rem);
  min-height: 100svh; align-content: center;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 2vh); padding-bottom: 4vh;
}
.services.is-pinned .services__head { grid-area: head; }
.services.is-pinned .svc__tabs { grid-area: tabs; position: relative; display: flex; flex-direction: column; align-items: flex-start; align-self: start; }
.services.is-pinned .svc__panels { grid-area: panel; grid-template-areas: "stack"; align-self: center; padding-top: clamp(1rem, 4vh, 3rem); }
.services.is-pinned .svc__panel { grid-area: stack; grid-template-columns: minmax(0, 1fr); border: 0; padding-block: 0; }
.services.is-pinned .svc__name { display: none; }
.services.is-pinned .svc__lead { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.3; max-width: 30ch; }
.svc__tab {
  position: relative; padding-block: 8px; padding-inline: 46px 0; border: 0; background: none; cursor: pointer; text-align: start;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem); line-height: 1.12; color: var(--ink);
  text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 0.18em;
  transition: text-decoration-color 200ms var(--ease-out);
}
:root[lang="ar"] .svc__tab { letter-spacing: 0; line-height: 1.5; }
.svc__tab:hover { text-decoration-color: var(--line-strong); }
.svc__marker { position: absolute; top: 0; inset-inline-start: 0; width: 32px; pointer-events: none; will-change: transform; }
.svc__marker img { width: 32px; height: auto; }
[dir="rtl"] .svc__marker img { transform: scaleX(-1); }

/* ---------- Work ---------- */
.work { padding-block: var(--section); background: var(--surface); }
.work__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.work__intro { display: grid; gap: 18px; max-width: 720px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-strong);
  background: transparent; font-weight: 500; font-size: 0.9375rem; color: var(--ink-soft); cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:active { transform: scale(0.97); }
.chip.is-active { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
@media (max-width: 860px) { .work__head { grid-template-columns: 1fr; } }

/* position: relative keeps Flip's absolutely positioned cards inside the grid */
.work__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.project { grid-column: span 6; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.project--wide { grid-column: span 7; }
.project--std { grid-column: span 5; }
.project--full { grid-column: span 12; }
.work__grid[data-filtered] .project { grid-column: span 6; }
.work__grid[data-count="1"] .project { grid-column: span 12; }
.project__media {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11; isolation: isolate;
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
/* The client card's window is scaled by a scroll scrub, so transform stays out of its transitions */
.project--client .project__media { transition: box-shadow 300ms var(--ease-out); }
.project--wide .project__media { aspect-ratio: 16 / 10.4; }
.project--full .project__media, .work__grid[data-count="1"] .project__media { aspect-ratio: 21 / 9; }
.project__art { position: absolute; inset: -6%; will-change: transform; }
.project__art svg { width: 100%; height: 100%; display: block; direction: ltr; }
.project__tag {
  position: absolute; z-index: 2; top: 14px; inset-inline-start: 14px;
  padding: 5px 10px; border-radius: 6px; background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
/* bottom corner, so the label never covers the client's own logo in the screenshot */
.project__tag--client { top: auto; bottom: 14px; background: var(--accent); color: var(--accent-ink); }

/* Client work: the real desktop screenshot with the phone view laid over it */
.project__art--shots { inset: -3%; background: #0B0D12; }
.project__shot--desktop { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.project__shot--mobile {
  position: absolute; top: 14%; inset-inline-end: 7%; width: 15%; height: auto;
  border-radius: 18px; border: 4px solid #0B0D12; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.6);
  will-change: transform;
}
.project__host { font-size: var(--t-small); color: var(--ink-soft); }
.project--client .project__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 72px); align-items: start; }
.project--client .project__meta, .project--client .project__title { grid-column: 1; }
.project--client .project__summary, .project--client .project__tags, .project--client .project__actions { grid-column: 2; }
.project--client .project__summary { grid-row: 1 / span 2; font-size: var(--t-lead); }
.work__grid[data-filtered] .project--client .project__body { grid-template-columns: minmax(0, 1fr); }
.work__grid[data-filtered] .project--client .project__body > * { grid-column: 1; grid-row: auto; }
.work__grid[data-filtered] .project--client .project__summary { font-size: inherit; }
.work__grid[data-filtered]:not([data-count="1"]) .project__shot--mobile { width: 24%; }

@media (max-width: 860px) {
  .project--client .project__body { grid-template-columns: minmax(0, 1fr); }
  .project--client .project__body > * { grid-column: 1; grid-row: auto; }
  .project--client .project__summary { font-size: inherit; }
  .project__shot--mobile, .work__grid[data-filtered]:not([data-count="1"]) .project__shot--mobile { width: 27%; top: 10%; border-width: 3px; border-radius: 12px; }
}

.project__body { display: grid; gap: 10px; }
.project__meta { color: var(--accent); }
.project__title { font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.1; }
.project__summary { color: var(--ink-soft); max-width: 56ch; }
.project__tags { font-size: var(--t-small); color: var(--ink-soft); }
.project__tags span:not(:last-child)::after { content: "/"; margin-inline: 0.4em 0.1em; color: var(--ink-faint); }
.project__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 4px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--ink);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.link-btn:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.link-btn:active { transform: scale(0.97); }
/* Solid variant must come after the base rule: with equal specificity the base
   rule won, which made the label the same colour as the fill (an all-white button in dark mode) */
.link-btn--solid { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); box-shadow: var(--e1); }
.link-btn--solid:hover { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.link-btn--solid:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.link-soon { font-size: 0.875rem; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .project:hover .project__media { box-shadow: var(--e3); transform: translateY(-4px); }
}
@media (max-width: 860px) {
  .work__grid .project, .work__grid[data-filtered] .project { grid-column: span 12; }
  .project__media, .project--wide .project__media, .project--full .project__media, .work__grid[data-count="1"] .project__media { aspect-ratio: 16 / 11; }
}

/* ---------- Lab: blueprint workbench ---------- */
.lab {
  position: relative; overflow: clip; isolation: isolate;
  padding-block: var(--section);
  background: var(--lab-bg); color: var(--lab-ink);
  --ink: var(--lab-ink); --ink-soft: var(--lab-soft); --line: var(--lab-line); --accent: var(--signal); --accent-ink: var(--lab-bg);
}
.lab__bg {
  position: absolute; inset: -8% 0; z-index: -1;
  background-image:
    linear-gradient(var(--lab-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lab-line) 1px, transparent 1px),
    linear-gradient(var(--lab-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lab-grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  opacity: 0.55;
}
.lab__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title stamp" "intro stamp";
  gap: 18px 40px; align-items: start; margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.lab__head .section-title { grid-area: title; }
.lab__head .section-intro { grid-area: intro; }
.lab__stamp {
  grid-area: stamp; align-self: center;
  padding: 10px 16px; border: 2px solid var(--signal); border-radius: 4px; outline: 1px solid var(--signal); outline-offset: 3px;
  color: var(--signal); font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(-4deg); white-space: nowrap;
}
:root[lang="ar"] .lab__stamp { letter-spacing: 0; font-size: 0.9375rem; }
.lab__list { list-style: none; margin: 0; padding: 0; display: grid; }
.lab-item {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(170px, 0.6fr); gap: 16px clamp(24px, 4vw, 56px); align-items: start;
  padding-block: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px dashed var(--lab-line);
}
.lab-item:last-child { border-bottom: 1px dashed var(--lab-line); }
.lab-item__title { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; margin-bottom: 8px; }
.lab-item__body { color: var(--lab-soft); }
.lab-item__col { display: grid; gap: 8px; }
.lab-item .label { color: var(--lab-soft); }
.meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 200px; }
.meter span { height: 6px; border-radius: 2px; background: var(--lab-line); transform-origin: left center; }
[dir="rtl"] .meter span { transform-origin: right center; }
.meter span.is-on { background: var(--signal); }
.meter__name { color: var(--signal); font-weight: 600; font-size: 0.9375rem; }
@media (max-width: 860px) {
  .lab__head { grid-template-columns: 1fr; grid-template-areas: "title" "intro" "stamp"; }
  .lab__stamp { justify-self: start; margin-top: 8px; }
  .lab-item { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Process ---------- */
.process { padding-block: var(--section); }
.process__head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(24px, 5vw, 72px); align-items: end;
  padding-block: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__lead { display: grid; gap: 8px; min-width: 0; }
.step__mask { display: block; overflow: clip; padding-bottom: 0.08em; }
.step__word { display: block; font-size: clamp(2.6rem, 6.5vw, 5.5rem); line-height: 1; letter-spacing: -0.045em; }
:root[lang="ar"] .step__word { letter-spacing: 0; line-height: 1.35; }
.step__text { display: grid; gap: 16px; max-width: 46ch; }
.step__body { color: var(--ink-soft); }
.step__gets { display: grid; gap: 4px; font-weight: 500; }

.process.is-stage .process__pin { min-height: 100svh; display: flex; align-items: center; }
.process.is-stage .process__pin > .wrap { width: 100%; }
.process.is-stage .steps { grid-template-areas: "stack"; }
.process.is-stage .step {
  grid-area: stack; border: 0; padding-block: 0; align-content: start;
  grid-template-areas: "lead lead" ". text"; row-gap: clamp(1rem, 2.5vh, 2rem);
}
.process.is-stage .step__lead { grid-area: lead; }
.process.is-stage .step__text { grid-area: text; }
.process.is-stage .step__word { font-size: clamp(3.5rem, 8.2vw, 8.4rem); white-space: nowrap; }
.process__nav { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: clamp(2rem, 5vh, 3.5rem); padding-top: 18px; position: relative; }
.process__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
.process__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(0); }
[dir="rtl"] .process__fill { transform-origin: right center; }
.process__nav button {
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--ink-soft);
  transition: color 200ms var(--ease-out);
}
.process__nav button:hover { color: var(--ink-soft); }
.process__nav button[aria-current="step"] { color: var(--ink); }
@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; align-items: start; }
  .step__word { font-size: clamp(2rem, 8.4vw, 3.4rem); }
}

/* ---------- Contact ---------- */
.contact { padding-block: var(--section); background: var(--surface); position: relative; overflow: clip; }
/* Contact as its own page: clear the fixed nav and fill the first screen */
.contact--page { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.contact__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
/* Static on purpose: a sticky column on this short page ran out of room and slid under the nav */
.contact__copy { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); align-content: start; max-width: 36rem; }
.contact__title { font-size: clamp(2.1rem, 4.3vw, 4rem); line-height: 1.02; }
.contact__lead { font-size: var(--t-lead); color: var(--ink-soft); max-width: 40ch; }
.contact__next { display: grid; gap: 14px; margin-top: clamp(0.5rem, 1.5vw, 1rem); }
.next { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: next; }
.next__item {
  counter-increment: next; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 14px; row-gap: 4px;
  padding-block: 18px; border-top: 1px solid var(--line);
}
.next__item:last-child { border-bottom: 1px solid var(--line); }
.next__item::before {
  content: counter(next, decimal-leading-zero); grid-row: span 2;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--accent);
}
.next__title { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.02em; }
.next__body { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }
:root[lang="ar"] .next__title { letter-spacing: 0; line-height: 1.5; }
.contact__email { font-weight: 600; }

.form {
  display: grid; gap: 22px; padding: clamp(20px, 3.5vw, 40px); border-radius: 24px;
  background: var(--bg); border: 1px solid var(--line);
}
.form__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-weight: 600; font-size: 0.9375rem; padding: 0; }
.field legend { margin-bottom: 10px; }
.opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--field-line); background: var(--field-bg); font-size: 1rem; line-height: 1.4;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: var(--t-small); font-weight: 500; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; inset-inline-end: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); pointer-events: none;
}
.needs { display: flex; flex-wrap: wrap; gap: 8px; }
.need { position: relative; }
.need input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.need span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--field-line); background: var(--field-bg); font-weight: 500; font-size: 0.9375rem; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.need span:active { transform: scale(0.97); }
.need input:checked + span { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.need input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__status { font-size: 0.9375rem; color: var(--ink-soft); flex: 1 1 240px; }
.form__status.is-ok { color: var(--ok); font-weight: 500; }
.form__status.is-warn { color: var(--warn); font-weight: 500; }
.form__status.is-err { color: var(--danger); font-weight: 500; }
@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form__row--two { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.footer { background: var(--footer-bg); overflow: clip; color: var(--footer-ink); padding-block: clamp(3.5rem, 7vw, 5.5rem) calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom, 0px)); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: end; }
.footer__logo { position: relative; width: min(100%, 260px); aspect-ratio: 1125 / 935; }
/* Layer positions measured from the original lockup: mark box 646x640 at x 328 of 1125; wordmark 1125x281 at y 654 of 935 */
.footer__mark { position: absolute; left: 29.156%; top: 0; width: 57.422%; height: auto; will-change: transform; }
.footer__word { position: absolute; left: 0; top: 69.947%; width: 100%; height: auto; will-change: transform; }
.footer__cols { display: grid; gap: 18px; justify-items: end; text-align: end; }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: flex-end; }
.footer nav a { text-decoration: none; font-weight: 500; }
.footer nav a:hover { color: var(--signal); }
.footer__line, .footer__legal { color: var(--footer-soft); }
.footer__legal { font-size: var(--t-small); }
.footer :focus-visible { outline-color: var(--signal); }
@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { justify-items: start; text-align: start; }
  .footer nav { justify-content: flex-start; }
  .footer__logo { width: 200px; }
}

/* ---------- Motion and switching helpers ---------- */
.js-intro .nav, .js-intro [data-hero-title], .js-intro [data-hero-fade], .js-intro .stage { visibility: hidden; }
.lang-pending .nav, .lang-pending main, .lang-pending footer { visibility: hidden; }
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color 360ms var(--ease-out), color 360ms var(--ease-out), border-color 360ms var(--ease-out), fill 360ms var(--ease-out) !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn::before, .theme__knob, .theme__icon, .menu__nav a { transition: none !important; }
}

/* ---------- Privacy page ---------- */
.legal { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: var(--section); }
.legal__inner { max-width: calc(46rem + 2 * var(--gutter)); }
.legal__title { margin: 12px 0 14px; font-size: clamp(2.1rem, 4.3vw, 3.4rem); line-height: 1.05; }
.legal__lead { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); color: var(--ink-soft); font-size: var(--t-lead); }
.legal h2 { margin: clamp(1.8rem, 3vw, 2.4rem) 0 10px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.02em; }
.legal p { margin: 0; line-height: 1.65; color: var(--ink-soft); max-width: 68ch; }
.legal a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- Customer reviews (js/reviews.js) ----------
   GSAP animates cards, stars, the dialog panel and its scrim (opacity,
   visibility, transform), so none of those carry CSS transitions. */
.reviews--page { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: var(--section); min-height: 70vh; }
.reviews--teaser { padding-block: var(--section); background: var(--surface); }
.reviews__head { display: grid; gap: clamp(1rem, 2vw, 1.4rem); max-width: 46rem; }
.reviews__head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.reviews__head--row > div:first-child { display: grid; gap: 14px; }
.reviews__title { font-size: clamp(2.1rem, 4.3vw, 4rem); line-height: 1.02; }
:root[lang="ar"] .reviews__title { line-height: 1.3; }
.reviews__lead { font-size: var(--t-lead); color: var(--ink-soft); max-width: 44ch; }
.reviews__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }
.reviews__summary { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; color: var(--ink-soft); font-weight: 500; }
.reviews__links { display: flex; flex-wrap: wrap; gap: 10px; }

.stars { display: inline-flex; gap: 3px; }
.star { display: inline-grid; }
.star svg { width: 18px; height: 18px; fill: var(--line-strong); }
.star.is-on svg { fill: var(--accent); }

.reviews__list {
  list-style: none; margin: clamp(2.25rem, 5vw, 3.75rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: clamp(14px, 2vw, 22px); align-items: start;
}
.reviews--teaser .reviews__list { margin-top: clamp(2rem, 4vw, 3rem); }
.review-card {
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
  padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--e1);
}
.reviews--teaser .review-card { background: var(--bg); box-shadow: none; }
.review-card__text { margin: 0; display: grid; gap: 0.7em; font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; }
.review-card__text p { margin: 0; text-wrap: pretty; }
.review-card__by { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 0.9375rem; }
.review-card__name { font-weight: 600; overflow-wrap: anywhere; }
.review-card__date { color: var(--ink-faint); }
.review-card--ghost { min-height: 220px; box-shadow: none; background: linear-gradient(100deg, var(--surface) 30%, var(--bg) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: review-ghost 1.6s linear infinite; }
@keyframes review-ghost { to { background-position: -150% 0; } }

.reviews__state:empty { display: none; }
.reviews__state { margin-top: clamp(2.25rem, 5vw, 3.75rem); }
.reviews__state.is-empty {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: clamp(32px, 6vw, 56px) 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
}
.reviews__state.is-empty .star svg { width: 26px; height: 26px; }
.reviews__empty-title { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.02em; }
.reviews__empty-body { margin: 0; color: var(--ink-soft); max-width: 42ch; }
.reviews__state.is-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; color: var(--danger); font-weight: 500; }
.reviews__state.is-error p { margin: 0; }

/* The form dialog: native <dialog> for focus trapping and Escape, with our own scrim */
.review-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: transparent; color: var(--ink); overflow: hidden;
  display: grid; place-items: center;
}
.review-dialog:not([open]) { display: none; }
.review-dialog::backdrop { background: transparent; }
.review-dialog__scrim { position: absolute; inset: 0; background: rgba(4, 7, 24, 0.58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.review-dialog__panel {
  position: relative; width: min(580px, 100%); max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: 26px;
  background: var(--surface); box-shadow: var(--e3);
}
.review-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.review-dialog__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; }
.review-dialog__close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -8px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.review-dialog__close svg { width: 22px; height: 22px; }
.review-dialog__close:hover { background: var(--bg); color: var(--ink); }
.review-dialog__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.review-form { display: grid; gap: 22px; }
.review-form__intro, .review-form__note { margin: 0; color: var(--ink-soft); }
.review-form__note { font-size: var(--t-small); }
.review-form__meta { display: flex; align-items: start; gap: 12px; }
.review-form__count { margin: 0; margin-inline-start: auto; font-size: var(--t-small); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.review-form__count.is-near { color: var(--warn); }

.stars-input { display: flex; gap: 2px; margin-inline-start: -6px; }
.star-pick { position: relative; display: inline-grid; padding: 6px; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.star-pick__face { display: inline-grid; }
.star-pick__face svg { width: 38px; height: 38px; fill: transparent; stroke: var(--line-strong); stroke-width: 1.6; stroke-linejoin: round; transition: fill 140ms var(--ease-out), stroke 140ms var(--ease-out); }
.star-pick.is-on .star-pick__face svg { fill: var(--accent); stroke: var(--accent); }
.star-pick.is-preview .star-pick__face svg { fill: color-mix(in srgb, var(--accent) 45%, transparent); stroke: var(--accent); }
.star-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.stars-field__value { margin: 0; min-height: 1.4em; font-weight: 600; color: var(--ink-soft); }
.stars-field.has-error .star-pick__face svg { stroke: var(--danger); }

.btn.is-loading { pointer-events: none; }
.btn.is-loading span::after {
  content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-inline-start: 10px; vertical-align: -0.12em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: review-spin 0.7s linear infinite;
}
@keyframes review-spin { to { transform: rotate(360deg); } }

.review-done { display: grid; justify-items: center; gap: 14px; padding: 18px 0 6px; text-align: center; }
.review-done:focus { outline: none; }
.review-done__stars { display: flex; gap: 6px; }
.review-done__stars .star svg { width: 34px; height: 34px; }
.review-done__title { margin: 6px 0 0; max-width: 24ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; }
.review-done__body { margin: 0 0 8px; color: var(--ink-soft); max-width: 40ch; }

@media (max-width: 599px) {
  /* The form rises as a sheet from the bottom on phones */
  .review-dialog { padding: 0; place-items: end stretch; }
  .review-dialog__panel { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; border-bottom: 0; padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
  .star-pick__face svg { width: 40px; height: 40px; }
  .reviews__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .review-card--ghost, .btn.is-loading span::after { animation: none; }
}

/* ---------- Review moderation (admin.html) ---------- */
.admin { min-height: 100vh; }
.admin__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); background: var(--surface); }
.admin__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.admin__brand img { width: 30px; height: auto; }
.admin__tools { display: flex; gap: 8px; }
.admin__main { width: min(860px, 100%); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter) 80px; }
.admin__login { display: grid; gap: 20px; max-width: 440px; }
.admin__title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; }
.admin__hint, .admin__note { margin: 0; color: var(--ink-soft); }
.admin__hint code { font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.admin__panel { display: grid; gap: 16px; }
.admin__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.admin__tabs button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink);
  font: 600 0.9375rem var(--font-text); cursor: pointer;
}
.admin__tabs button span { min-width: 1.6em; padding: 1px 7px; border-radius: 999px; background: var(--bg); font-size: 0.8125rem; text-align: center; }
.admin__tabs button[aria-selected="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.admin__tabs button[aria-selected="true"] span { background: color-mix(in srgb, var(--btn-fg) 18%, transparent); }
.admin__tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.admin__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.admin-card { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--e1); overflow: hidden; }
.admin-card__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.admin-card__stars { color: var(--accent); letter-spacing: 2px; font-size: 1.05rem; }
.admin-card__meta { color: var(--ink-faint); font-size: var(--t-small); margin-inline-start: auto; }
.admin-card__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.admin-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin__empty { padding: 32px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); text-align: center; color: var(--ink-soft); }

/* ---------- "Start project" pop-up (js/promo.js) ----------
   GSAP animates the panel, scrim, ribbon and mark (opacity, visibility,
   transform), so none of those carry CSS transitions. */
.promo {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: transparent; color: var(--ink); overflow: hidden;
  display: grid; place-items: center;
}
.promo:not([open]) { display: none; }
.promo::backdrop { background: transparent; }
.promo__scrim { position: absolute; inset: 0; background: rgba(4, 7, 24, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.promo__panel {
  position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  display: grid; justify-items: start; gap: 14px;
  padding: clamp(28px, 5vw, 44px); padding-top: clamp(34px, 5vw, 48px);
  border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--e3);
  overflow-x: hidden;
}
.promo__ribbon { position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--ribbon); transform-origin: 0 50%; }
[dir="rtl"] .promo__ribbon { transform-origin: 100% 50%; }
.promo__close {
  position: absolute; top: 14px; inset-inline-end: 14px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.promo__close svg { width: 20px; height: 20px; }
.promo__close:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.promo__close:focus-visible, .promo__later:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.promo__mark { width: 52px; height: auto; margin-bottom: 4px; }
.promo__eyebrow { margin: 0; }
.promo__title { margin: 0; padding-inline-end: 44px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.05; }
:root[lang="ar"] .promo__title { line-height: 1.3; }
.promo__body { margin: 0; color: var(--ink-soft); font-size: var(--t-lead); max-width: 38ch; }
.promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 10px; }
.promo__start { min-width: 12rem; }
.promo__later {
  padding: 10px 4px; border: 0; background: none; color: var(--ink-soft); cursor: pointer;
  font: 600 0.9375rem var(--font-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
.promo__later:hover { color: var(--ink); }
@media (max-width: 599px) {
  /* a sheet from the bottom on phones, with full-width buttons */
  .promo { padding: 0; place-items: end stretch; }
  .promo__panel { width: 100%; border-radius: 26px 26px 0 0; border-bottom: 0; padding-bottom: max(26px, env(safe-area-inset-bottom, 0px)); }
  .promo__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .promo__start { width: 100%; }
}

/* ---------- Website assistant (js/assistant.js) ----------
   GSAP animates the launcher and panel (opacity, visibility, transform), so
   neither has CSS transitions on those properties. */
.assist__launch {
  position: fixed; z-index: 35;
  inset-inline-end: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding-block: 8px; padding-inline: 8px 22px;
  --launch-ring: transparent;
  border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg);
  font: 600 0.9875rem/1 var(--font-text); letter-spacing: -0.01em; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--launch-ring), var(--e2);
  transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.assist__launch:hover { box-shadow: inset 0 0 0 1px var(--launch-ring), var(--e3); }
/* In dark mode the button sits in the page's own dark tone, not as a white pill */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .assist__launch { background: var(--surface); color: var(--ink); --launch-ring: var(--line-strong); }
  :root:not([data-theme="light"]) .assist__launch:hover { background: #141A40; }
}
:root[data-theme="dark"] .assist__launch { background: var(--surface); color: var(--ink); --launch-ring: var(--line-strong); }
:root[data-theme="dark"] .assist__launch:hover { background: #141A40; }
.assist__launch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.assist__launch img, .assist__avatar img { width: 26px; height: auto; }
.assist__launch img { box-sizing: content-box; padding: 7px; border-radius: 50%; background: #FFFFFF; }
.assist:not(.is-ready) .assist__launch { visibility: hidden; }

.assist__panel {
  position: fixed; z-index: 60;
  inset-inline-end: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 40px));
  height: min(640px, calc(100dvh - 112px));
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--e3);
  overflow: hidden;
}
.assist__panel[hidden] { display: none; }

.assist__head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--line); }
.assist__avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.assist__id { flex: 1; min-width: 0; }
.assist__title { font-size: 1rem; letter-spacing: -0.02em; line-height: 1.2; }
.assist__sub { margin: 2px 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--ink-soft); }
.assist__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.assist__icon svg { width: 20px; height: 20px; }
.assist__icon:hover { background: var(--bg); color: var(--ink); }
.assist__icon:focus-visible, .assist__send:focus-visible, .assist__starter:focus-visible, .assist__action:focus-visible, .assist__retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.assist__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 20px;
  scrollbar-width: thin;
}
.assist__log:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.assist__msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.assist__msg--user { align-items: flex-end; }
.assist__bubble { max-width: 92%; font-size: 0.975rem; line-height: 1.55; overflow-wrap: anywhere; }
.assist__msg--bot .assist__bubble { padding: 10px 14px; border-radius: 18px; border-end-start-radius: 6px; background: var(--bg); }
.assist__msg--user .assist__bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; border-end-end-radius: 6px; background: var(--btn-bg); color: var(--btn-fg); white-space: pre-wrap; }
.assist__bubble p { margin: 0 0 0.6em; }
.assist__bubble p:last-child, .assist__bubble ul:last-child, .assist__bubble ol:last-child { margin-bottom: 0; }
.assist__bubble ul, .assist__bubble ol { margin: 0 0 0.6em; padding-inline-start: 1.2em; }
.assist__bubble li + li { margin-top: 0.25em; }
.assist__bubble strong { font-weight: 650; }
.assist__bubble.is-error { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.assist__bubble.is-note { color: var(--ink-soft); }
.assist__bubble:empty { display: none; } /* a reply that is only a button */

.assist__typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
.assist__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); opacity: 0.55; }

.assist__starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -2px; }
.assist__starter {
  padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink); font: 500 0.9rem/1.3 var(--font-text); text-align: start; cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.assist__starter:hover { border-color: var(--ink); background: var(--bg); }

.assist__action {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  min-height: 42px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); font: 600 0.9rem/1.2 var(--font-text); text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.assist__action svg { width: 16px; height: 16px; flex: none; }
[dir="rtl"] .assist__action svg { transform: scaleX(-1); }
.assist__action:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.assist__action--solid { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.assist__action--solid:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.assist__enquiry { display: flex; flex-direction: column; align-items: flex-start; }
.assist__enquiry-note { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft); max-width: 92%; }
.assist__retry { margin-top: 8px; padding: 4px 2px; border: 0; background: none; color: var(--accent); font: 600 0.9rem var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.assist__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 8px; border-top: 1px solid var(--line); }
.assist__form textarea {
  flex: 1; min-width: 0; max-height: 140px; resize: none;
  padding: 11px 16px; border: 1px solid var(--field-line); border-radius: 22px;
  background: var(--field-bg); color: var(--ink); font: 400 1rem/1.4 var(--font-text);
}
.assist__form textarea::placeholder { color: var(--ink-faint); }
.assist__form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.assist__send {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
}
.assist__send svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.assist__send svg + svg, .assist__send.is-busy svg:first-child { display: none; }
.assist__send.is-busy svg + svg { display: block; }
.assist__note { margin: 0; padding: 0 16px 12px; font-size: 0.72rem; line-height: 1.4; color: var(--ink-faint); text-align: center; }

html.assist-lock, html.assist-lock body { overflow: hidden; }
/* Room under the footer so its last line ("Back to top") always scrolls clear of the chat button */
.has-assist .footer { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 76px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 599px) {
  /* Compact pill on phones, label still visible */
  .assist__launch {
    min-height: 46px; gap: 8px; padding-block: 5px; padding-inline: 5px 16px; font-size: 0.9rem;
    inset-inline-end: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }
  .assist__launch img { width: 22px; padding: 6px; }
  .has-assist .footer { padding-bottom: calc(2rem + 62px + env(safe-area-inset-bottom, 0px)); }
  .assist__panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .assist__head { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .assist__form { padding-bottom: 8px; }
  .assist__note { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}
@media print { .assist { display: none; } }