:root {

  --c-foam: #F5F9F8;
  --c-shallow: #E3EEEC;
  --c-limestone: #E9E5DC;
  --c-white: #FFFFFF;

  --c-ink: #0F2A31;
  --c-ink-soft: #3E5960;
  --c-sign-teal: #1D6670;
  --c-drop-deep: #0A6A96;

  --c-deep: #06202A;
  --c-deep-raised: #0D2F3A;
  --c-mist: #A9C3C8;

  --c-droplet: #3DB6EA;
  --c-spray: #8FD8DB;

  --c-salt: #E8A64A;
  --c-salt-ink: #8A5A12;
  --c-error: #B3261E;
  --c-error-on-dark: #FF9B8C;

  --c-hairline: #C9DAD8;
  --c-border: #6E878D;
  --c-deep-border: #5F8C96;

  --c-stage-sediment: #845B20;
  --c-stage-carbon: #2F383C;
  --c-stage-membrane: #0A6A96;
  --c-stage-final: #1B6E65;
  --c-stage-sediment-dark: #E0B77A;
  --c-stage-carbon-dark: #B7C3C8;
  --c-stage-membrane-dark: #5CC8F0;
  --c-stage-final-dark: #5FD0C0;

  --c-whatsapp-green-test: #25D366;

  --surface-page: var(--c-foam);
  --surface-band: var(--c-shallow);
  --surface-warm: var(--c-limestone);
  --surface-card: var(--c-white);
  --text-primary: var(--c-ink);
  --text-secondary: var(--c-ink-soft);
  --text-link: var(--c-sign-teal);
  --line-hairline: var(--c-hairline);
  --line-control: var(--c-border);
  --line-leader-colour: var(--c-ink-soft);
  --accent-thread: var(--c-drop-deep);
  --accent-light: var(--c-droplet);
  --removed-matter: var(--c-salt-ink);
  --status-error: var(--c-error);
  --focus-ring: var(--c-sign-teal);
  --selection-bg: var(--c-spray);
  --selection-fg: var(--c-ink);

  --action-bg: var(--c-ink);
  --action-fg: var(--c-foam);
  --action-bg-hover: #163844;
  --whatsapp-bg: var(--c-ink);
  --whatsapp-fg: var(--c-foam);

  --confirm-line: 1px dotted var(--c-sign-teal);
  --confirm-label: var(--c-ink-soft);

  --font-display-latin: "Alexandria", "Alexandria Fallback", "Segoe UI", system-ui, sans-serif;
  --font-display-arabic: "Alexandria", "Alexandria Fallback", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-text-latin: "IBM Plex Sans", "IBM Plex Sans Fallback", "Segoe UI", system-ui, sans-serif;
  --font-text-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans Arabic Fallback", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-display-alt-latin: var(--font-text-latin);
  --font-display-alt-arabic: var(--font-text-arabic);

  --font-display: var(--font-display-latin);
  --font-text: var(--font-text-latin);

  --numbers: "tnum" 1, "lnum" 1;

  --fs-display: clamp(2.5rem, 1.5rem + 4.444vw, 5.5rem);
  --fs-h1: clamp(2.125rem, 1.583rem + 2.407vw, 3.75rem);
  --fs-h2: clamp(1.6875rem, 1.417rem + 1.204vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 1.083rem + 0.463vw, 1.5rem);
  --fs-h4: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --fs-lead: clamp(1.125rem, 1.083rem + 0.1852vw, 1.25rem);
  --fs-body: clamp(1rem, 0.9792rem + 0.09259vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;
  --fs-readout: clamp(3rem, 2rem + 4.444vw, 6rem);

  --fw-display: 300;
  --fw-h1: 400;
  --fw-h2: 500;
  --fw-h3: 500;
  --fw-body: 400;
  --fw-strong: 600;
  --fw-label: 500;

  --lh-display: 1;
  --lh-h1: 1.04;
  --lh-h2: 1.1;
  --lh-h3: 1.3;
  --lh-lead: 1.55;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-label: 1.3;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --tracking-label: 0.06em;
  --label-case: uppercase;

  --measure-text: 66ch;
  --measure-lead: 46ch;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --gutter: clamp(1.25rem, 0.5rem + 3.333vw, 3.5rem);
  --section-pad: clamp(4.5rem, 3.375rem + 5vw, 8rem);
  --head-gap: clamp(2rem, 1.667rem + 1.481vw, 3rem);
  --stack-gap: clamp(1.5rem, 1rem + 2.222vw, 3rem);
  --content-max: 80rem;
  --grid-columns: 12;

  --header-h: 4.5rem;
  --header-h-scrolled: 4rem;
  --header-h-phone: 3.5rem;
  --bottom-bar-h: 3.5rem;
  --fixed-area-reading: 8%;
  --fixed-area-max: 15%;
  --target-min: 2.75rem;
  --target-floor: 1.5rem;
  --scroll-pad-top: calc(var(--header-h) + var(--space-4));
  --scroll-pad-bottom: calc(var(--bottom-bar-h) + var(--space-4));

  --radius-none: 0;
  --radius-panel: 2px;
  --radius-control: 4px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --line-icon: 1.5px;
  --line-thread: 1.5px;
  --line-leader: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;

  --dur-press: 120ms;
  --dur-hover: 160ms;
  --dur-ui: 240ms;
  --dur-panel: 280ms;
  --dur-live-fade: 300ms;
  --dur-reveal: 600ms;
  --stagger-line: 60ms;
  --dur-camera: 800ms;
  --dur-draw: 1200ms;
  --dur-mark-form: 1200ms;
  --dur-settle: 2000ms;
  --dur-scene-still: 5000ms;
  --reveal-rise: 12px;
  --slide-scale: 1;

  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-settle: cubic-bezier(0.22, 0.8, 0.16, 1);
  --ease-water: linear;
  --scroll-smoothing: 0.12s;

  --z-canvas: 0;
  --z-content: 1;
  --z-scene-labels: 2;
  --z-header: 50;
  --z-bottom-bar: 60;
  --z-menu: 100;

  --scene-sky: #EEF5F4;
  --scene-water-tint: #D9F3FB;
  --scene-limestone: #E9E5DC;
  --scene-caustic: #FFFDF6;
  --scene-satin: #F3F6F7;
  --scene-frost-body: #CFEFF5;
  --scene-frost-edge: #8FD8DB;
  --scene-thread: #3DB6EA;
  --scene-salt: #E8A64A;
  --scene-line: #3DB6EA;
  --scene-deep-fog: #06202A;
}

:root:lang(ar),
[lang="ar"] {
  --font-display: var(--font-display-arabic);
  --font-text: var(--font-text-arabic);

  --fs-lead: clamp(1.125rem, 1.042rem + 0.37vw, 1.3125rem);
  --fs-body: clamp(1.0625rem, 1.042rem + 0.09259vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.875rem;

  --fw-display: 400;
  --fw-h1: 500;

  --lh-display: 1.28;
  --lh-h1: 1.32;
  --lh-h2: 1.4;
  --lh-h3: 1.6;
  --lh-lead: 1.75;
  --lh-body: 1.85;
  --lh-small: 1.8;
  --lh-label: 1.6;

  --tracking-display: 0;
  --tracking-heading: 0;
  --tracking-label: 0;
  --label-case: none;

  --measure-text: 60ch;
  --measure-lead: 42ch;
}

[data-surface="depth"] {
  --surface-page: var(--c-deep);
  --surface-band: var(--c-deep-raised);
  --surface-warm: var(--c-deep-raised);
  --surface-card: var(--c-deep-raised);
  --text-primary: var(--c-foam);
  --text-secondary: var(--c-mist);
  --text-link: var(--c-droplet);
  --line-hairline: rgba(143, 216, 219, 0.18);
  --line-control: var(--c-deep-border);
  --line-leader-colour: var(--c-mist);
  --accent-thread: var(--c-droplet);
  --removed-matter: var(--c-salt);
  --status-error: var(--c-error-on-dark);
  --focus-ring: var(--c-droplet);
  --action-bg: var(--c-foam);
  --action-fg: var(--c-ink);
  --action-bg-hover: #FFFFFF;
  --whatsapp-bg: var(--c-foam);
  --whatsapp-fg: var(--c-ink);
  --c-stage-sediment: var(--c-stage-sediment-dark);
  --c-stage-carbon: var(--c-stage-carbon-dark);
  --c-stage-membrane: var(--c-stage-membrane-dark);
  --c-stage-final: var(--c-stage-final-dark);
  --confirm-line: 1px dotted var(--c-droplet);
  --confirm-label: var(--c-mist);
}

:root,
[data-surface] {
  --text-on-action: var(--action-fg);
  --border-hairline: 1px solid var(--line-hairline);
  --border-control: 1px solid var(--line-control);
  --focus-outline: var(--focus-width) solid var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-hover: 0ms;
    --dur-ui: 120ms;
    --dur-panel: 120ms;
    --dur-live-fade: 0ms;
    --dur-reveal: 0ms;
    --stagger-line: 0ms;
    --dur-camera: 0ms;
    --dur-draw: 0ms;
    --dur-mark-form: 0ms;
    --dur-settle: 0ms;
    --reveal-rise: 0px;
    --slide-scale: 0;
    --scroll-smoothing: 0s;
  }
}

:root[data-motion="paused"] {
  --dur-reveal: 0ms;
  --stagger-line: 0ms;
  --dur-draw: 0ms;
  --dur-mark-form: 0ms;
  --dur-settle: 0ms;
  --reveal-rise: 0px;
}

@media (prefers-contrast: more) {
  :root {
    --text-secondary: var(--c-ink);
    --line-control: var(--c-ink);
    --line-hairline: var(--c-border);
    --line-thread: 2px;
    --focus-width: 3px;
  }
  [data-surface="depth"] {
    --text-secondary: var(--c-foam);
    --line-control: var(--c-mist);
  }
}



@font-face {
  font-family: "Alexandria Fallback";
  src: local("Segoe UI"), local("SegoeUI"), local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 108.8%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Alexandria Fallback";
  src: local("Segoe UI"), local("SegoeUI"), local("Tahoma"), local("Arial");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
  size-adjust: 112.5%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Segoe UI"), local("SegoeUI"), local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 102%;
  ascent-override: 103%;
  descent-override: 28%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "IBM Plex Sans Arabic Fallback";
  src: local("Segoe UI"), local("SegoeUI"), local("Tahoma"), local("Arial");
  size-adjust: 91%;
  ascent-override: 109%;
  descent-override: 42%;
  line-gap-override: 0%;
}


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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--scroll-pad-top);
  scroll-padding-bottom: var(--scroll-pad-bottom);
  background: var(--surface-page);
  color: var(--text-primary);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
hr { border: 0; border-block-start: var(--border-hairline); margin: 0; }
[hidden] { display: none !important; }
main { display: block; outline: none; }
summary { cursor: pointer; }
table { border-collapse: collapse; }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

[data-surface] { color: var(--text-primary); }
[data-surface="depth"]:not(.waterline):not(.waterline-mini):not(.site-header) { background-color: var(--surface-page); }

:focus { outline: none; }
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}
main:focus-visible { outline: none; }

.display,
h1, .h1,
h2, .h2 {
  font-family: var(--font-display);
  color: var(--text-primary);
  text-wrap: balance;
  font-optical-sizing: auto;
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-heading);
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-heading);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: 0;
  color: var(--text-primary);
}

h4, .h4 {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-strong);
  line-height: var(--lh-small);
}

p, li, dd { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-secondary);
  max-width: var(--measure-lead);
}

.prose { max-width: var(--measure-text); }
.prose > * + * { margin-block-start: 1em; }

.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.secondary { color: var(--text-secondary); }

.label,
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: var(--label-case);
  color: var(--text-secondary);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
}
.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: var(--line-thread);
  background: var(--accent-thread);
  flex: none;
}

.num,
bdi.num {
  font-feature-settings: var(--numbers);
  font-variant-numeric: tabular-nums lining-nums;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--confirm-label);
  border-block-end: var(--confirm-line);
  padding-block-end: 1px;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.confirm::before {
  content: "";
  inline-size: 0.4em;
  block-size: 0.4em;
  border: 1px solid currentColor;
  border-radius: 50%;
}
:lang(ar) .confirm { font-size: 0.8125rem; letter-spacing: 0; }

:root:not([data-review="on"]) .confirm,
:root:not([data-review="on"]) [data-confirm-only] { display: none !important; }
:root:not([data-review="on"]) :is(div, li, section, dl):has(> [data-confirm-only]):not(:has(> :not([data-confirm-only], h2, h3, h4, h5, dt, .label, .eyebrow))) { display: none !important; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: calc(var(--z-menu) + 10);
  padding: var(--space-3) var(--space-4);
  background: var(--c-ink);
  color: var(--c-foam);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-control);
  transform: translateY(-200%);
  transition: transform var(--dur-ui) var(--ease-out);
}
.skip-link:focus-visible,
.skip-link:focus { transform: none; outline-color: var(--c-sign-teal); }

.icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
}
[dir="rtl"] .icon--arrow,
[dir="rtl"] .icon--chevron-side { transform: scaleX(-1); }

.container {
  inline-size: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--stack-gap);
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); }
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}
.section--band { background: var(--surface-band); }
.section--warm { background: var(--surface-warm); }
.section--card { background: var(--surface-card); }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }

.stack > * + * { margin-block-start: var(--stack-gap); }
.stack-s > * + * { margin-block-start: var(--space-4); }
.stack-m > * + * { margin-block-start: var(--space-5); }

.section-head {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
  margin-block-end: var(--head-gap);
}

.js.reveal-ready [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--reveal-rise));
}
.js.reveal-ready [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * var(--stagger-line));
}
.js.reveal-ready [data-reveal].is-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js.reveal-ready [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}
:root[data-motion="paused"].reveal-ready [data-reveal]:not(.is-in) { opacity: 1; transform: none; }

@media (forced-colors: active) {
  .scene-host { display: none !important; }
  .btn, .btn-wa, .chip, .tile { border: 1px solid ButtonText; }
}


.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  color: var(--text-primary);
  background-color: rgb(245 249 248 / 0.9);
  border-block-end: 1px solid transparent;
  transition:
    transform var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) linear,
    border-color var(--dur-ui) linear;
}
.site-header.is-solid {
  background-color: var(--surface-page);
  border-block-end-color: var(--line-hairline);
}
.site-header[data-surface="depth"] { background-color: rgb(6 32 42 / 0.9); }
.site-header[data-surface="depth"].is-solid { background-color: var(--surface-page); }
.site-header.is-hidden { transform: translateY(calc(-100% * var(--slide-scale) - 1px)); }
@media (prefers-reduced-motion: reduce) {
  .site-header.is-hidden { transform: none; opacity: 0; pointer-events: none; }
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  block-size: var(--header-h-phone);
  inline-size: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
  transition: block-size var(--dur-ui) var(--ease-out);
}
@media (min-width: 768px) {
  .site-header__bar { block-size: var(--header-h); gap: var(--space-5); }
  .site-header.is-solid .site-header__bar { block-size: var(--header-h-scrolled); }
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-primary);
  text-decoration: none;
  flex: none;
  min-block-size: var(--target-min);
  --mark-drop: var(--c-droplet);
}
.lockup__mark { block-size: 2rem; inline-size: auto; aspect-ratio: 203.05 / 299.28; }
.lockup__words { display: grid; line-height: 1; }
.lockup__name {
  font-family: var(--font-display-latin);
  font-weight: 500;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}
.lockup__descriptor {
  font-family: var(--font-text-latin);
  font-weight: 500;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-start: 0.32rem;
  color: var(--text-secondary);
}
@media (max-width: 767px) {
  .site-header .lockup__descriptor { display: none; }
  .site-header .lockup__mark { block-size: 1.75rem; }
}

.site-nav { display: none; flex: 1; }
.site-nav__list { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 1.6vw, 1.75rem); }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
}
:lang(ar) .site-nav__link { font-size: 1rem; }
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.55rem;
  block-size: var(--line-thread);
  background: var(--accent-thread);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform var(--dur-hover) var(--ease-out);
}
[dir="rtl"] .site-nav__link::after { --origin-start: right; }
.site-nav__link:hover::after,
.site-nav__link[aria-current]::after { transform: scaleX(1); }
.site-nav__toggle {
  display: inline-grid;
  place-items: center start;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  margin-inline: 0.1rem calc(1.75rem - var(--target-min));
  padding: 0;
  padding-inline-start: 0.3rem;
  border: 0;
  background: none;
  color: var(--text-secondary);
  border-radius: var(--radius-control);
}
.site-nav__toggle .icon { inline-size: 1rem; block-size: 1rem; transition: transform var(--dur-ui) var(--ease-out); }
.site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: -1rem;
  z-index: 2;
  min-inline-size: 18rem;
  padding: var(--space-4);
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-panel);
  color: var(--text-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-6px * var(--slide-scale)));
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    visibility 0s linear var(--dur-ui);
}
.nav-panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: 0.75rem;
}
.site-nav__item--panel.is-open .nav-panel,
.site-nav__item--panel:hover .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.nav-panel__links { display: grid; gap: 0.15rem; }
.nav-panel__links a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.5rem;
  min-block-size: var(--target-min);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-control);
}
.nav-panel__links a:hover { background: var(--surface-band); }
.nav-panel__links .icon { color: var(--accent-thread); }
.nav-panel__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: var(--space-3);
  padding-block: 0.4rem;
  font-weight: 500;
  font-size: var(--fs-small);
  text-decoration: none;
}
.nav-panel__all .icon { inline-size: 1rem; block-size: 1rem; }
.nav-panel--products { inline-size: min(40rem, 70vw); inset-inline-start: -12rem; }
.nav-panel__label { margin-block-end: var(--space-3); }
.nav-panel__products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.nav-panel__products a {
  display: grid;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-small);
  line-height: 1.35;
  font-weight: 500;
}
.nav-still {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--c-shallow);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.nav-still img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-ui) var(--ease-out); }
.nav-panel__products a:hover .nav-still img { transform: scale(1.03); }

.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}
.hdr-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: 0.5rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}
.hdr-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.hdr-link--lang [lang="ar"] { font-family: var(--font-text-arabic); font-size: 1rem; }
.hdr-link--lang [lang="en"] { font-family: var(--font-text-latin); }
.hdr-call {
  display: none;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--target-min);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.hdr-call .icon { inline-size: 1.05rem; block-size: 1.05rem; color: var(--accent-thread); }
.hdr-call:hover { color: var(--text-primary); text-decoration: underline; }
.site-header .btn-wa--header { display: none; }
.hdr-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.9375rem;
}
.hdr-menu:hover { background: var(--surface-band); }

@media (min-width: 768px) {
  .site-header .btn-wa--header { display: inline-flex; }
}
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-nav__item:nth-child(n + 4) { display: none; }
}
@media (min-width: 1280px) {
  .site-nav__item:nth-child(n + 4) { display: flex; }
  .hdr-menu { display: none; }
  .hdr-call { display: inline-flex; }
}
@media (max-width: 767px) {
  .hdr-menu__label { display: none; }
}

.menu-sheet {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  margin: 0;
  inline-size: min(26rem, 100%);
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  padding: 0;
  border: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  transform: translateX(calc(100% * var(--slide-scale)));
  opacity: 0;
  transition:
    transform var(--dur-panel) var(--ease-in-out),
    opacity var(--dur-panel) linear;
}
[dir="rtl"] .menu-sheet { transform: translateX(calc(-100% * var(--slide-scale))); }
.menu-sheet.is-open { transform: none; opacity: 1; }
.menu-sheet::backdrop { background: rgb(6 32 42 / 0.55); opacity: 0; transition: opacity var(--dur-panel) linear; }
.menu-sheet.is-open::backdrop { opacity: 1; }
.menu-sheet__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-block-size: 100%;
  padding: var(--space-2) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
}
.menu-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: var(--header-h-phone);
}
.menu-sheet__close {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--target-min);
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  font-weight: 500;
}
.menu-sheet__close:hover { background: var(--surface-band); }
.menu-sheet__lang { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--target-min); min-inline-size: var(--target-min); font-weight: 500; color: var(--text-primary); text-decoration: none; }
.menu-sheet__lang [lang="ar"] { font-family: var(--font-text-arabic); font-size: 1.0625rem; }
.menu-links { display: grid; }
.menu-links a {
  display: flex;
  align-items: center;
  min-block-size: 3.25rem;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
}
:lang(ar) .menu-links a { font-size: 1.375rem; line-height: 1.5; }
.menu-links a:hover { color: var(--text-link); }
.menu-links a[aria-current] { color: var(--text-link); }
.menu-sheet__customer { margin-block-start: var(--space-3); }
@media (max-height: 700px) {
  .menu-sheet__inner { gap: var(--space-4); }
  .menu-links a { min-block-size: var(--target-min); font-size: 1.375rem; }
  :lang(ar) .menu-links a { font-size: 1.25rem; }
}
.menu-sheet__contact { display: grid; gap: var(--space-2); margin-block-start: auto; }
.menu-sheet__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 3rem;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}
.menu-sheet__call .icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--accent-thread); }

.bottom-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-bottom-bar);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: var(--space-2);
  padding: var(--space-1) var(--gutter) calc(var(--space-1) + env(safe-area-inset-bottom));
  min-block-size: var(--bottom-bar-h);
  background: var(--surface-page);
  border-block-start: var(--border-hairline);
  transform: translateY(calc(100% * var(--slide-scale) + 1px));
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-ui) var(--ease-out),
    opacity var(--dur-ui) linear,
    visibility 0s linear var(--dur-ui);
}
.bottom-bar.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.bottom-bar__call {
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-block-size: 3rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}
.bottom-bar__call .icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--accent-thread); }
.bottom-bar .btn-wa { min-block-size: 3rem; justify-content: center; }
@media (min-width: 768px) {
  .bottom-bar { display: none; }
}

.waterline {
  position: fixed;
  inset-inline-start: max(0.75rem, calc((100vw - var(--content-max)) / 2 - 3.25rem));
  inset-block-start: 50%;
  z-index: 40;
  block-size: min(52vh, 30rem);
  inline-size: 1.5rem;
  transform: translateY(-50%);
  display: none;
  color: var(--text-primary);
  transition: opacity var(--dur-ui) linear;
}
@media (min-width: 1200px) { .waterline { display: block; } }
.waterline.is-hidden { opacity: 0; pointer-events: none; }
.waterline__track,
.waterline__fill {
  position: absolute;
  inset-inline-start: calc(50% - 1px);
  inline-size: 2px;
  inset-block-start: 0;
}
.waterline__track { block-size: 100%; background: var(--line-hairline); }
.waterline__fill {
  block-size: 100%;
  background: var(--accent-thread);
  transform-origin: top;
  transform: scaleY(var(--wl-fill, 0));
}
.waterline__list { position: absolute; inset: 0; }
.waterline__node {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--y) * 100%);
  transform: translateY(-50%);
}
.waterline__node a {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: inherit;
  text-decoration: none;
}
.waterline__node a::before {
  content: "";
  inline-size: 0.5625rem;
  block-size: 0.5625rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent-thread);
  background: var(--surface-page);
  transition: background-color var(--dur-hover) linear, transform var(--dur-hover) var(--ease-out);
}
.waterline__node.is-reached a::before { background: var(--accent-thread); }
.waterline__node.is-current a::before { transform: scale(1.35); }
.waterline__label {
  position: absolute;
  inset-inline-start: calc(100% + 0.5rem);
  inset-block-start: 50%;
  translate: 0 -50%;
  padding: 0.3rem 0.6rem;
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-panel);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) linear;
}
.waterline:hover .waterline__label,
.waterline__node a:focus-visible .waterline__label { opacity: 1; }
.waterline__node.is-current .waterline__label { opacity: 0; }
.waterline:hover .waterline__node.is-current .waterline__label,
.waterline__node.is-current a:focus-visible .waterline__label { opacity: 1; }

.waterline-mini {
  position: fixed;
  inset-inline-start: 0.375rem;
  inset-block: 22vh;
  z-index: 40;
  inline-size: 1px;
  pointer-events: none;
  display: block;
  transition: opacity var(--dur-ui) linear;
}
@media (min-width: 1200px) { .waterline-mini { display: none; } }
.waterline-mini.is-hidden { opacity: 0; }
.waterline-mini__track { position: absolute; inset: 0; background: var(--line-hairline); }
.waterline-mini__fill { position: absolute; inset: 0; background: var(--accent-thread); transform-origin: top; transform: scaleY(var(--wl-fill, 0)); }
.waterline-mini i {
  position: absolute;
  inset-inline-start: -2px;
  inset-block-start: calc(var(--y) * 100%);
  inline-size: 5px;
  block-size: 5px;
  margin-block-start: -2.5px;
  border-radius: 50%;
  background: var(--surface-page);
  box-shadow: 0 0 0 1px var(--accent-thread);
}
.waterline-mini i.is-reached { background: var(--accent-thread); }
@media (max-width: 767px) { .waterline-mini i { display: none; } }

.site-footer { position: relative; }

.footer-call {
  padding-block: var(--section-pad) calc(var(--section-pad) * 0.75);
  background: var(--surface-page);
}
.footer-call__grid {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}
@media (min-width: 1024px) {
  .footer-call__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); }
}
.footer-call__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin-block-end: var(--space-4);
}
.footer-call__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-secondary); max-inline-size: 30rem; }
.footer-call__actions { display: grid; gap: var(--space-2); justify-items: start; }
.footer-call__more { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.footer-call__more .icon { inline-size: 1.1rem; block-size: 1.1rem; }

.still-pool {
  position: relative;
  block-size: clamp(9rem, 5rem + 16vw, 22rem);
  overflow: hidden;
  background: var(--c-shallow);
  touch-action: pan-y;
}
.still-pool__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.footer-index {
  padding-block: var(--space-7) calc(var(--space-6) + var(--bottom-bar-h));
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: var(--fs-small);
}
@media (min-width: 768px) {
  .footer-index { padding-block-end: var(--space-6); }
}
.footer-index a { color: var(--text-primary); text-decoration: none; }
.footer-index a:hover { text-decoration: underline; }
.footer-index__grid { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .footer-index__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
}
.footer-index__id { display: grid; gap: var(--space-1); justify-items: start; align-content: start; }
.footer-index__id .lockup { margin-block-end: var(--space-4); }
.lockup--footer .lockup__mark { block-size: 2.5rem; }
.lockup--footer .lockup__name { font-size: 1.375rem; }
.lockup--footer .lockup__descriptor { font-size: 0.625rem; }
.footer-index__number a { display: inline-flex; align-items: center; min-block-size: var(--target-min); font-size: 1.125rem; font-weight: 500; }
.footer-index__shop, .footer-index__hours { color: var(--text-secondary); max-inline-size: 26rem; }
.footer-index .footer-index__maps a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--text-link); }
.footer-links ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .footer-links ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footer-links a { display: inline-flex; align-items: center; min-block-size: var(--target-min); font-size: var(--fs-body); }
.footer-base {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hairline);
  color: var(--text-secondary);
}
.footer-base__util { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); }
.footer-base__util a { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--target-min); min-inline-size: var(--target-min); color: var(--text-secondary); }
.footer-links a { min-inline-size: var(--target-min); }
.footer-base__util .motion-toggle--link,
.footer-base__util .review-toggle { color: var(--text-secondary); min-block-size: var(--target-min); }



.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: var(--target-min);
  padding: 0.55rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  transition:
    background-color var(--dur-hover) linear,
    border-color var(--dur-hover) linear,
    color var(--dur-hover) linear,
    transform var(--dur-press) var(--ease-out);
}
:lang(ar) .btn { font-size: 1rem; }
.btn:active { transform: scale(0.985); }
.btn .icon { inline-size: 1.15rem; block-size: 1.15rem; }
.btn--primary { background: var(--action-bg); color: var(--text-on-action); }
.btn--primary:hover { background: var(--action-bg-hover); }
.btn--secondary { border: var(--border-control); color: var(--text-primary); }
.btn--secondary:hover { background: var(--surface-band); }
.btn--block { inline-size: 100%; }
.btn--lg { min-block-size: 3.25rem; padding-inline: 1.5rem; font-size: 1rem; }
.btn[aria-pressed="true"] { background: var(--action-bg); color: var(--text-on-action); border-color: var(--action-bg); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--target-min);
  color: var(--text-link);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow .icon { inline-size: 1.1rem; block-size: 1.1rem; transition: translate var(--dur-hover) var(--ease-out); }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.link-arrow:hover .icon { translate: 3px 0; }
.link-wa .icon { inline-size: 1.15rem; block-size: 1.15rem; }
.link-wa:hover .icon { translate: 0 0; }
[dir="rtl"] .link-arrow:hover .icon { translate: -3px 0; }

.btn-wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 3rem;
  padding: 0.5rem 1.3rem 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  background: var(--whatsapp-bg);
  color: var(--whatsapp-fg);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-hover) linear, transform var(--dur-press) var(--ease-out);
}
[dir="rtl"] .btn-wa { padding: 0.5rem 1.05rem 0.5rem 1.3rem; }
:lang(ar) .btn-wa { font-size: 1rem; }
.btn-wa:hover { background: var(--action-bg-hover); color: var(--whatsapp-fg); }
.btn-wa:active { transform: scale(0.985); }
.btn-wa .icon { inline-size: 1.3rem; block-size: 1.3rem; }
.btn-wa:focus-visible { border-radius: var(--radius-pill); }
.btn-wa--lg { min-block-size: 3.5rem; padding-inline: 1.4rem 1.8rem; font-size: 1.0625rem; gap: 0.7rem; }
[dir="rtl"] .btn-wa--lg { padding-inline: 1.4rem 1.8rem; }
.btn-wa--lg .icon { inline-size: 1.5rem; block-size: 1.5rem; }
:lang(ar) .btn-wa--lg { font-size: 1.125rem; }
.btn-wa--block { display: flex; inline-size: 100%; justify-content: center; min-block-size: 3.25rem; }
.btn-wa--header { padding-block: 0.4rem; min-block-size: var(--target-min); }

.wa-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.wa-group--stack { display: grid; justify-items: start; gap: 0.6rem; }
.wa-number {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.wa-number .num { color: var(--text-primary); font-weight: 500; font-size: 0.9375rem; }
main .wa-number { display: none; }
.page--contact main .wa-number { display: inline-flex; }

.water-end {
  position: absolute;
  inset: -5px;
  inline-size: calc(100% + 10px);
  block-size: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
}
.water-end__rect {
  fill: none;
  stroke: var(--accent-thread);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 600ms var(--ease-in-out);
}
.is-drawn .water-end__rect { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .water-end__rect { transition: none; } }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--target-min);
  padding: 0.4rem 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surface-band);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur-ui) linear, color var(--dur-ui) linear, border-color var(--dur-ui) linear;
}
:lang(ar) .chip { font-size: 1rem; }
.chip:hover { border-color: var(--line-control); }
.chip[aria-pressed="true"],
.chip[aria-current="true"],
.chip.is-current {
  background: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--text-on-action);
}
.chip .icon { inline-size: 1.1rem; block-size: 1.1rem; }
.chip__n {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.35rem;
  block-size: 1.35rem;
  padding-inline: 0.2rem;
  border-radius: var(--radius-panel);
  background: var(--stage-key, var(--surface-band));
  color: var(--c-foam);
  font-size: 0.75rem;
  font-weight: 600;
  font-feature-settings: var(--numbers);
}
[data-surface="depth"] .chip__n { color: var(--c-deep); }
.chip[aria-current="true"] .chip__n,
.chip.is-current .chip__n { box-shadow: 0 0 0 1px var(--text-on-action); }

.chip-row--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-block: 0.25rem;
  scroll-padding-inline: var(--gutter);
}
.chip-row--scroll::-webkit-scrollbar { display: none; }

.panel {
  background: var(--surface-band);
  border-radius: var(--radius-panel);
  padding: var(--space-5);
  color: var(--text-primary);
}
.panel--quiet { background: var(--surface-page); }

.card {
  display: grid;
  background: var(--surface-band);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.fig-caption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-label);
  color: var(--text-secondary);
}
:lang(ar) .fig-caption { font-size: 0.875rem; }

.photo-frame {
  position: relative;
  display: grid;
  place-items: end start;
  aspect-ratio: 4 / 3;
  padding: var(--space-4);
  border-radius: var(--radius-panel);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgb(15 42 49 / 0.04) 11px 12px),
    var(--surface-band);
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.plate {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--plate-ground, transparent);
}
.plate__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.scene-host {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--dur-live-fade) linear;
}
.plate.is-live > .scene-host { opacity: 1; }
.scene-host > canvas { display: block; inline-size: 100%; block-size: 100%; }

.plate[data-scene-planned]:not(:has(> img, > picture, > svg, > video, > .plate__poster)) {
  background:
    radial-gradient(closest-side, transparent 58%, rgb(10 106 150 / 0.10) 60%, transparent 62%,
      transparent 78%, rgb(10 106 150 / 0.06) 80%, transparent 82%) 50% 58% / 70% 34% no-repeat,
    radial-gradient(120% 90% at 70% 24%, rgb(255 253 246 / 0.8), transparent 60%),
    linear-gradient(180deg, var(--c-shallow) 0%, var(--scene-sky) 55%, var(--scene-limestone) 100%);
}
[data-surface="depth"] .plate[data-scene-planned]:not(:has(> img, > picture, > svg, > video, > .plate__poster)),
.plate[data-scene-planned][data-surface="depth"]:not(:has(> img, > picture, > svg, > video, > .plate__poster)) {
  background:
    radial-gradient(closest-side, transparent 58%, rgb(143 216 219 / 0.16) 60%, transparent 62%,
      transparent 78%, rgb(143 216 219 / 0.08) 80%, transparent 82%) 50% 58% / 70% 34% no-repeat,
    radial-gradient(70% 60% at 50% 0%, rgb(61 182 234 / 0.18), transparent 70%),
    linear-gradient(180deg, var(--c-deep-raised), var(--c-deep));
}

.scene-controls {
  position: absolute;
  z-index: 3;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  display: flex;
  gap: var(--space-2);
}
.scene-live { display: none; }
.scene-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  padding: 0;
  border: 1px solid var(--line-hairline);
  border-radius: 50%;
  background: var(--surface-page);
  background: color-mix(in srgb, var(--surface-page) 86%, transparent);
  color: var(--text-primary);
  transition: background-color var(--dur-hover) linear;
}
.scene-btn:hover { background: var(--surface-page); }
.scene-btn:focus-visible { border-radius: 50%; }
.scene-btn .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.scene-btn > span {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.scene-btn[hidden] { display: none; }

.ripple {
  position: absolute;
  inline-size: 6px;
  block-size: 2px;
  border: 1.5px solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  animation: ripple-grow var(--dur-settle) cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}
.ripple--late { animation-delay: 180ms; opacity: 0; border-color: rgb(255 255 255 / 0.6); }
@keyframes ripple-grow {
  0% { inline-size: 6px; block-size: 2px; opacity: 0.95; }
  100% { inline-size: 26rem; block-size: 7.5rem; opacity: 0; }
}

.proof-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-secondary);
}
.proof-line > li { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 0.4rem; }
.proof-line > li + li::before {
  content: "";
  inline-size: 3px;
  block-size: 3px;
  margin-inline: 0.85rem;
  border-radius: 50%;
  background: var(--line-control);
}
.proof-line a { color: var(--text-primary); font-weight: 500; text-decoration-color: var(--line-control); }
.proof-line a:hover { text-decoration-color: currentColor; }
.proof-line a,
.ledger__text a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.rating-score { font-weight: 600; color: var(--text-primary); font-feature-settings: var(--numbers); }
.proof-line.proof-strip { display: block; }
.proof-line__date { white-space: nowrap; }
.proof-line__record { white-space: nowrap; }
@media (max-width: 599px) {
  .proof-line__meta { display: block; margin-block-start: 0.2rem; }
}
@media (max-width: 339px) {
  .proof-line__sep { display: none; }
  .proof-line__record { display: block; }
}
.proof-themes { font-size: var(--fs-small); color: var(--text-secondary); max-width: 36rem; }

.ledger {
  border-block-start: var(--border-hairline);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding-block: 0.95rem;
  border-block-end: var(--border-hairline);
  align-items: baseline;
}
.ledger__date {
  font-weight: 600;
  font-feature-settings: var(--numbers);
  color: var(--text-primary);
  white-space: nowrap;
}
.ledger__text { color: var(--text-primary); }
.ledger__row--now .ledger__date { color: var(--text-link); }
@media (max-width: 479px) {
  .ledger__row { grid-template-columns: 1fr; }
}

.field { display: grid; gap: 0.5rem; align-content: start; }
.field__label { font-weight: 600; font-size: var(--fs-body); color: var(--text-primary); }
.field__hint { font-size: var(--fs-small); color: var(--text-secondary); }
.input {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.5rem 0.9rem;
  border: var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: var(--fs-body);
}
.input::placeholder { color: var(--text-secondary); opacity: 1; }
.input:hover { border-color: var(--text-primary); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--status-error);
  font-size: var(--fs-small);
  font-weight: 500;
}
.field-error .icon { inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.1rem; }
.input[aria-invalid="true"] { border-color: var(--status-error); box-shadow: inset 0 0 0 1px var(--status-error); }
.file-input { inline-size: 100%; max-inline-size: 100%; min-block-size: var(--target-min); font: inherit; font-size: var(--fs-small); color: var(--text-secondary); }
.file-input::file-selector-button {
  min-block-size: var(--target-min);
  margin-inline-end: var(--space-3);
  padding-inline: var(--space-4);
  border: var(--border-control);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
legend { padding: 0; }

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 1024px) {
  .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
}
.calc__inputs { display: grid; gap: var(--space-5); }
.stepper {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
  align-items: stretch;
  border: var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  overflow: hidden;
}
.stepper:focus-within { border-color: var(--text-primary); }
.stepper button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  min-block-size: 3.5rem;
}
.stepper button:hover { background: var(--surface-band); }
.stepper button:focus-visible { outline-offset: -3px; }
.stepper input {
  min-inline-size: 0;
  inline-size: 100%;
  border: 0;
  border-inline: var(--border-hairline);
  background: transparent;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;
  font-feature-settings: var(--numbers);
  color: var(--text-primary);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: none; }
.stepper:has(input:focus-visible) { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.stepper input[aria-invalid="true"] { color: var(--status-error); }
.stepper:has(input[aria-invalid="true"]) { border-color: var(--status-error); box-shadow: inset 0 0 0 1px var(--status-error); }

.calc__result {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}
.calc__year { display: grid; gap: var(--space-5); }
@media (min-width: 600px) {
  .calc__year { grid-template-columns: 1fr 1fr; }
}
.calc__figure { display: grid; gap: 0.35rem; }
.calc__readout {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-readout);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: var(--numbers);
  color: var(--text-primary);
  white-space: nowrap;
}
:lang(ar) .calc__readout { letter-spacing: 0; }
.calc__readout small { font-size: 0.4em; font-weight: 400; letter-spacing: 0; margin-inline-end: 0.3em; }
.calc__unit { font-size: var(--fs-small); color: var(--text-secondary); font-weight: 500; }
.calc__empty { color: var(--text-secondary); }
.calc__bottles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-block-size: 1.75rem;
  color: var(--accent-thread);
}
.calc__bottles .icon { inline-size: 1.5rem; block-size: 1.5rem; animation: bottle-in var(--dur-ui) var(--ease-out) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes bottle-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.calc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.calc__notes { font-size: var(--fs-small); color: var(--text-secondary); max-inline-size: 26rem; }
.calc__copy { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.calc__status { font-size: var(--fs-small); color: var(--text-secondary); min-block-size: 1.4em; }

.steps { position: relative; }
.steps__list {
  display: grid;
  gap: var(--space-6);
}
.steps__line {
  position: absolute;
  inset-inline-start: calc(1rem - 1px);
  inset-block: 1rem;
  inline-size: 2px;
  background: var(--line-hairline);
}
.steps__fill {
  position: absolute;
  inset: 0;
  background: var(--accent-thread);
  transform-origin: top;
  transform: scaleY(var(--steps-fill, 0));
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent-thread);
  background: var(--surface-page);
  color: var(--accent-thread);
  font-size: 0.875rem;
  font-weight: 600;
  font-feature-settings: var(--numbers);
  transition: background-color var(--dur-ui) linear, color var(--dur-ui) linear;
}
.step.is-reached .step__node { background: var(--accent-thread); color: var(--c-foam); }
[data-surface="depth"] .step.is-reached .step__node { color: var(--c-deep); }
.step__body { display: grid; gap: 0.25rem; padding-block-start: 0.1rem; }
.step__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; }
.step__text { color: var(--text-secondary); max-width: 32rem; }
.step:not(.is-reached) .step__title { color: var(--text-primary); }

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-start: var(--border-hairline);
}
@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); border: 0; }
}
.tile {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: var(--space-4);
  min-block-size: 3.75rem;
  padding: var(--space-3) 0;
  border: 0;
  border-block-end: var(--border-hairline);
  border-radius: 0;
  background: none;
  color: var(--text-primary);
  text-align: start;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-hover) linear;
}
@media (min-width: 768px) {
  .tile {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    align-content: space-between;
    min-block-size: 8.5rem;
    padding: var(--space-5) 0 var(--space-4);
    border-block-start: var(--border-hairline);
  }
  .tile > .icon { grid-column: 1 / -1; }
}
.tile .icon { inline-size: 1.75rem; block-size: 1.75rem; color: var(--accent-thread); }
.tile__label {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.25;
  padding-block-end: 0.35rem;
}
:lang(ar) .tile__label { line-height: 1.45; }
.tile__label::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 2.5rem;
  block-size: var(--line-thread);
  background: var(--accent-thread);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform var(--dur-ui) var(--ease-out);
}
[dir="rtl"] .tile__label::after { --origin-start: right; }
.tile:hover { background: var(--surface-band); }
.tile:hover .tile__label::after,
.tile:focus-visible .tile__label::after,
.tile[aria-pressed="true"] .tile__label::after { transform: scaleX(1); }
.tile[aria-pressed="true"] .tile__label { font-weight: 500; }
.tile__check {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--action-bg);
  color: var(--text-on-action);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-ui) linear, transform var(--dur-ui) var(--ease-out);
}
.tile__check .icon { inline-size: 0.95rem; block-size: 0.95rem; color: inherit; }
.tile[aria-pressed="true"] .tile__check { opacity: 1; transform: none; }
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/caustic-sweep.webp") center / 220px 220px repeat;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  opacity: 0;
}
@media (hover: hover) {
  .tile:hover::before { animation: caustic-sweep 900ms var(--ease-in-out) 1; }
}
@keyframes caustic-sweep {
  0% { opacity: 0.9; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { opacity: 0.9; -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .tile:hover::before { animation: none; } }
:root[data-motion="paused"] .tile:hover::before { animation: none; }

.picker__next {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-6);
  animation: slide-in var(--dur-panel) var(--ease-settle) both;
}
@media (min-width: 768px) {
  .picker__next { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(calc(12px * var(--slide-scale))); }
  to { opacity: 1; transform: none; }
}
.picker__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin-block-end: var(--space-4);
  outline: none;
}
.picker__q:focus-visible { outline: var(--focus-outline); outline-offset: 4px; }
.picker__group + .picker__group { margin-block-start: var(--space-5); }
.picker__send { display: grid; gap: var(--space-4); align-content: start; }
.message-preview {
  position: relative;
  padding-inline-start: var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-secondary);
  white-space: pre-wrap;
  border-inline-start: var(--line-thread) solid var(--accent-thread);
}
.message-preview__label { display: block; margin-block-end: 0.25rem; color: var(--text-primary); font-weight: 600; }
.picker__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.photo-hint {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.photo-hint strong { color: var(--text-primary); }
.photo-hint .icon { grid-row: span 2; inline-size: 1.5rem; block-size: 1.5rem; color: var(--accent-thread); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}
.product-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
.lens {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--c-shallow);
  --lens-r: 0px;
  --lx: 50%;
  --ly: 50%;
}
.lens img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.lens__inside {
  -webkit-mask-image: radial-gradient(circle var(--lens-r) at var(--lx) var(--ly), #000 calc(100% - 14px), transparent 100%);
  mask-image: radial-gradient(circle var(--lens-r) at var(--lx) var(--ly), #000 calc(100% - 14px), transparent 100%);
}
.lens.is-tracking { --lens-r: 92px; }
.lens.is-inside .lens__inside { -webkit-mask-image: none; mask-image: none; }
.lens__ring {
  position: absolute;
  top: var(--ly);
  left: var(--lx);
  inline-size: calc(var(--lens-r) * 2);
  block-size: calc(var(--lens-r) * 2);
  margin: calc(var(--lens-r) * -1);
  border-radius: 50%;
  border: 1px solid rgb(143 216 219 / 0.7);
  pointer-events: none;
  opacity: 0;
}
.lens.is-tracking:not(.is-inside) .lens__ring { opacity: 1; }
.lens__toggle {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  z-index: 2;
  display: inline-grid;
  place-items: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  padding: 0;
  border: 1px solid var(--line-hairline);
  border-radius: 50%;
  background: rgb(245 249 248 / 0.9);
  color: var(--c-ink);
}
.lens__toggle > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lens__toggle[aria-pressed="true"] { background: var(--c-ink); color: var(--c-foam); border-color: var(--c-ink); }
.lens__toggle:focus-visible { border-radius: 50%; }
.lens__toggle .icon { inline-size: 1.1rem; block-size: 1.1rem; }
.lens .fig-caption {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-3);
  z-index: 2;
  color: var(--c-ink-soft);
  font-size: 0.75rem;
}
:lang(ar) .lens .fig-caption { font-size: 0.8125rem; }
.lens.is-inside .fig-caption { color: var(--c-mist); }
.product-card__body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
}
.product-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: 1.25; }
.product-card__text { color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-small); }
.product-card__actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-block-start: auto; }
.product-card__actions a { font-size: var(--fs-small); }
.product-card__actions .link-wa { display: none; }
.product-card__link { color: inherit; text-decoration: none; }
.product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card__link:hover .product-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.product-card:has(.product-card__link:focus-visible) { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: var(--radius-panel); }
.product-card__link:focus-visible { outline: none; }
.lens-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--target-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-link);
  font-weight: 600;
}
.lens-all .icon { inline-size: 1.15rem; block-size: 1.15rem; }
.lens-all[aria-pressed="true"] { color: var(--text-primary); }

@media (max-width: 479px) {
  .btn-wa--lg { white-space: normal; text-align: start; line-height: 1.25; }
  .btn-wa--lg > span { text-wrap: balance; }
  .btn-wa[data-hero-cta] { display: flex; inline-size: 100%; justify-content: center; text-align: center; }
}
@media (max-width: 379px) {
  .chip-row--scroll { gap: 0.375rem; }
  .chip-row--scroll .chip { padding-inline: 0.7rem; }
}

.calc__empty {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.3;
  color: var(--text-secondary);
  max-inline-size: 22rem;
}
.calc:not(.has-result) .calc__year,
.calc:not(.has-result) .calc__result > .label { display: none; }
.calc:not(.has-result) .calc__bottles,
.calc:not(.has-result) .calc__result > .small { display: none; }

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--target-min);
  padding: 0.4rem 0.8rem;
  border: var(--border-control);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 500;
}
.motion-toggle:hover { background: var(--surface-band); }
.motion-toggle .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.motion-toggle[aria-pressed="true"] { border-color: var(--text-primary); }
.motion-toggle--link {
  min-block-size: 2.25rem;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: 400;
}
.motion-toggle--link:hover { background: none; text-decoration: underline; }
.review-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--target-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.review-toggle::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 1rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: radial-gradient(circle at 30% 50%, currentColor 0 0.28rem, transparent 0.3rem);
  opacity: 0.7;
}
[dir="rtl"] .review-toggle::before { background-position: 100% 0; transform: scaleX(-1); }
.review-toggle[aria-pressed="true"]::before { background: radial-gradient(circle at 70% 50%, currentColor 0 0.28rem, transparent 0.3rem); opacity: 1; }
.review-toggle:hover { text-decoration: underline; }

.more { margin-block-start: var(--space-3); }
.more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--target-min);
  color: var(--text-link);
  font-weight: 600;
  list-style: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.45rem;
  margin-block-start: -0.2rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-out);
}
.more[open] > summary::after { transform: rotate(-135deg); margin-block-start: 0.2rem; }
[dir="rtl"] .more > summary::after { transform: rotate(-45deg); }
[dir="rtl"] .more[open] > summary::after { transform: rotate(135deg); }
.more__body { padding-block: var(--space-2) var(--space-3); }
@media (min-width: 768px) {
  .more.is-wide { margin-block-start: 0; }
  .more.is-wide > summary { display: none; }
}

.picker__ask { display: grid; gap: var(--space-5); align-content: start; }
.picker__ask .picker__q { margin-block-end: var(--space-3); }
.picker__group + .picker__group { margin-block-start: 0; }
.picker__q:focus-visible { outline-offset: 6px; }


.skip-scene {
  position: fixed;
  inset-block-start: calc(var(--header-h) + var(--space-3));
  inset-inline-start: var(--space-3);
  z-index: calc(var(--z-menu) + 5);
  padding: var(--space-3) var(--space-4);
  background: var(--c-ink);
  color: var(--c-foam);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-control);
}
.skip-scene:not(:focus):not(:focus-visible) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main :is([data-surface="depth"] + [data-surface="depth"], [data-surface="depth"] + .skip-scene + [data-surface="depth"]) { margin-block-start: -1px; }

.pinned {
  position: relative;
  --pin-step: 48svh;
  block-size: calc(100svh + var(--pin-steps, 2) * var(--pin-step));
}
@media (min-width: 1024px) {
  .pinned { --pin-step: 46svh; }
}
.no-js .pinned { block-size: auto; }
.pinned__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  min-block-size: 32rem;
  overflow: hidden;
  background: var(--surface-page);
  color: var(--text-primary);
}
.no-js .pinned__stage { position: relative; block-size: auto; min-block-size: 100svh; }
.pinned__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pinned__plate .plate__poster {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: opacity var(--dur-ui) linear;
}
.js .plate__poster[data-poster-range]:not(.is-shown) { opacity: 0; }
.no-js .plate__poster[data-poster-range] ~ .plate__poster[data-poster-range] { display: none; }
.plate.is-live .plate__poster,
.plate.is-live .poster-box { opacity: 0; transition: opacity var(--dur-ui) linear var(--dur-live-fade); }
.poster--tall { display: none; }
@media (max-width: 767px) {
  .poster--wide { display: none; }
  .poster--tall { display: block; }
}

.poster-box {
  position: absolute;
  inset-block: 4.5rem 1rem;
  inset-inline: 0;
  display: grid;
  place-items: center;
  container-type: size;
  transition: opacity var(--dur-ui) linear;
}
@media (min-width: 1024px) {
  .poster-box { inset-block: 5rem 3rem; inset-inline: 36% 2%; }
}
.poster-frame {
  position: relative;
  inline-size: min(100cqw, 100cqh * var(--ar, 1.5));
  aspect-ratio: var(--ar, 1.5);
}
.poster-frame__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

.pinned__intro,
.pinned__text,
.pinned__card {
  position: absolute;
  z-index: 3;
  inset-inline: var(--gutter);
  transition: opacity var(--dur-ui) linear, visibility 0s linear var(--dur-ui), transform var(--dur-ui) var(--ease-out);
}
.pinned__intro {
  inset-block-end: 6.5rem;
  display: grid;
  gap: var(--space-4);
  max-inline-size: 34rem;
  padding: var(--space-5);
  background: var(--surface-page);
  border-radius: var(--radius-panel);
}
@media (min-width: 1024px) {
  .pinned__intro {
    inset-block-end: auto;
    inset-block-start: 26svh;
    inset-inline-start: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
    padding: 0;
    background: none;
    max-inline-size: 30rem;
  }
}
.pinned__card {
  inset-block-end: 6.75rem;
  display: grid;
  gap: var(--space-3);
  max-inline-size: 30rem;
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-panel);
}
@media (min-width: 1024px) {
  .pinned__card {
    inset-block-end: auto;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inset-inline-start: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
    inset-inline-end: auto;
    inline-size: min(28rem, 34vw);
    padding: var(--space-6);
  }
}
.is-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.js .pinned__card:not(:has(> .stage-card.is-current)) { opacity: 0; visibility: hidden; }
.stage-card { display: none; gap: var(--space-3); }
.stage-card.is-current { display: grid; animation: stage-in var(--dur-ui) var(--ease-out) both; }
.no-js .stage-card { display: grid; }
@keyframes stage-in { from { opacity: 0; transform: translateY(calc(6px * var(--slide-scale))); } to { opacity: 1; transform: none; } }
.stage-card__head { display: flex; align-items: center; gap: var(--space-3); }
.stage-card__n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-panel);
  background: var(--stage-key, var(--accent-thread));
  color: var(--c-deep);
  font-weight: 600;
  font-size: 0.875rem;
  font-feature-settings: var(--numbers);
  flex: none;
}
.stage-card__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.2; text-wrap: balance; }
.stage-card__text { color: var(--text-secondary); }
.stage-card__big { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; color: var(--text-primary); text-wrap: balance; }
:lang(ar) .stage-card__big { line-height: var(--lh-h2); }
:lang(ar) :is(.stage-card__name, .picker__q, .product-card__title, .step__title, .visit__title, .px-ask__q, .pd-links a) { line-height: var(--lh-h3); }
.stage-card__actions { display: grid; gap: var(--space-3); justify-items: start; margin-block-start: var(--space-2); }

.pinned__chips {
  position: absolute;
  z-index: 3;
  inset-block-end: 1.25rem;
  inset-inline: 0;
  padding-inline: var(--gutter);
}
@media (min-width: 1024px) {
  .pinned__chips {
    inset-block-end: 2rem;
    inset-inline: max(var(--gutter), calc((100vw - var(--content-max)) / 2)) auto;
    padding-inline: 0;
    flex-wrap: wrap;
    max-inline-size: min(64rem, 100vw - 2 * var(--gutter));
  }
}
.pinned__fig {
  position: absolute;
  z-index: 3;
  inset-block-start: calc(var(--header-h-phone) + var(--space-3));
  inset-inline-end: var(--gutter);
  padding: 0.2rem 0.5rem;
  background: var(--surface-page);
  border-radius: var(--radius-panel);
  max-inline-size: calc(100% - 2 * var(--gutter) - 3.5rem);
}
@media (min-width: 1024px) {
  .pinned__fig { inset-block-start: auto; inset-block-end: 2.4rem; }
}
.pinned .scene-controls {
  inset-block-end: auto;
  inset-block-start: calc(var(--header-h-phone) + var(--space-1));
  inset-inline: auto var(--gutter);
}
@media (min-width: 1024px) {
  .pinned .scene-controls { inset-block-start: calc(var(--header-h) + var(--space-3)); }
  .pinned__fig { inset-inline-end: var(--gutter); }
}

.pinned--lights .pinned__stage {
  background-color: var(--c-foam);
  background-color: color-mix(in srgb, var(--c-deep) calc(var(--lights, 0) * 100%), var(--c-foam));
}

.lights-up {
  position: relative;
  block-size: 160svh;
  background-color: var(--c-deep);
  background-color: color-mix(in srgb, var(--c-foam) calc(var(--lights-up, 0) * 100%), var(--c-deep));
}
.lights-up__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
}
.lights-up__plate {
  inline-size: min(100%, 72rem, (100svh - 8rem) * 1.6);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-none);
}
.lights-up__plate .plate__poster,
.lights-up__plate .scene-host {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 84%, transparent);
  mask-composite: intersect;
}
.lights-up__controls { inset-block-end: var(--space-3); inset-inline-start: 10%; }
@media (max-width: 767px) {
  .lights-up { block-size: 130svh; }
  .lights-up__plate { aspect-ratio: 4 / 5; inline-size: 100%; }
  .lights-up__plate .plate__poster,
  .lights-up__plate .scene-host {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 88%, transparent);
  }
  .lights-up__controls { inset-inline-start: var(--space-3); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--head-gap);
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split__sticky { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-7)); }
}
.split .section-head { margin-block-end: 0; }

.facts {
  display: grid;
  gap: 0;
  border-block-start: var(--border-hairline);
}
@media (min-width: 1024px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fact {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--line-hairline);
}
@media (min-width: 1024px) {
  .fact { padding-inline-end: var(--space-6); border-block-end: 0; }
  .fact + .fact { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--line-hairline); }
}
.fact__big {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  font-feature-settings: normal;
  font-variant-numeric: lining-nums proportional-nums;
  text-wrap: balance;
}
.fact__big .num { font-variant-numeric: inherit; }
@media (min-width: 1024px) {
  .fact { align-content: stretch; grid-template-rows: 1fr auto; }
}
:lang(ar) .fact__big { line-height: 1.3; }
.fact__big small { font-size: 0.42em; font-weight: 400; letter-spacing: 0; }
.fact__sub { color: var(--text-secondary); font-size: var(--fs-small); }
.fact a { font-weight: 500; }

.photo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.visit {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.visit__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; }
.visit__lines { display: grid; gap: var(--space-2); color: var(--text-secondary); }
.visit__lines strong { color: var(--text-primary); font-weight: 600; }
.visit__map {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--c-shallow);
}
.visit__map img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

[dir="rtl"] .poster-frame__img { transform: scaleX(-1); }
[dir="rtl"] .hotspot-pin { left: calc(100% - var(--x)); }
.lights-up__plate .plate__poster { object-position: 50% 70%; }
@media (max-aspect-ratio: 1/1) { .lights-up__plate .plate__poster { object-position: 50% 74%; } }

@media (max-width: 1023px) {
  .pinned__fig { inset-inline: var(--gutter) auto; font-size: var(--fs-label); }
  .pinned__fig,
  .pinned .scene-controls { transition: transform var(--dur-ui) var(--ease-out); }
  .header-hidden .pinned__fig,
  .header-hidden .pinned .scene-controls { transform: translateY(calc(-1 * var(--header-h-phone))); }
}
:lang(ar) .pinned__fig { font-size: 0.875rem; }
@media (min-width: 1024px) {
  .pinned__fig--top {
    inset-block: calc(var(--header-h) + var(--space-4)) auto;
    inset-inline: max(var(--gutter), calc((100vw - var(--content-max)) / 2)) auto;
  }
}

@media (max-width: 767px) {
  .pinned__stage {
    --stage-floor: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom) + 0.5rem);
    --scene-bottom-inset: calc(var(--stage-floor) + 3.5rem);
  }
  .pinned__chips { inset-block-end: var(--stage-floor); }
  .pinned__card,
  .pinned__intro { inset-block-end: calc(var(--stage-floor) + 3.25rem); }
  .home-membrane .pinned__text,
  .home-scale .pinned__text { inset-block-end: var(--stage-floor); }
}

.beats { display: grid; gap: var(--space-2); }
.beat {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  color: var(--text-secondary);
}
.beat.is-current { display: grid; color: var(--text-primary); }
.no-js .beat { display: grid; }
@media (min-width: 1024px) {
  .beat { display: grid; transition: color var(--dur-ui) linear; }
}
@media (max-width: 1023px) { .beat__n { display: none; } }
.beat__n { font-size: var(--fs-label); font-weight: 600; font-feature-settings: var(--numbers); color: var(--text-secondary); }
.beat.is-current .beat__n { color: var(--accent-thread); }
.beat__text { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.beat.is-current .beat__text { font-weight: 500; }
.membrane__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--fs-small); color: var(--text-secondary); }
.legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.legend__water { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--c-spray); }
.legend__salt { inline-size: 0.6rem; block-size: 0.6rem; border: 1.5px solid var(--c-salt); transform: rotate(45deg); }
.pinned__stage:has(> .plate.is-live) .legend { display: none; }

.hotspots { display: grid; border-block-start: var(--border-hairline); }
.hotspot {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-2);
  border-block-end: var(--border-hairline);
}
.hotspot__n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 1.5px solid var(--accent-thread);
  border-radius: 50%;
  color: var(--accent-thread);
  font-size: 0.8125rem;
  font-weight: 600;
  font-feature-settings: var(--numbers);
}
.hotspot.is-current .hotspot__n { background: var(--accent-thread); color: var(--c-deep); }
.hotspot__name { font-weight: 600; display: block; }
.hotspot__text { display: block; font-size: var(--fs-small); color: var(--text-secondary); }
.hotspot__show {
  min-block-size: var(--target-min);
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--text-link);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
}
.hotspot__show:hover { text-decoration: underline; }
.hotspot__show[aria-pressed="true"] { color: var(--text-primary); }
.hotspot__show:has(> .icon) {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--target-min);
  padding: 0;
  border: 1px solid var(--line-hairline);
  border-radius: 50%;
  color: var(--text-primary);
}
.hotspot__show:has(> .icon) > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hotspot__show:has(> .icon)[aria-pressed="true"] { background: var(--action-bg); color: var(--text-on-action); border-color: var(--action-bg); }
.hotspot__show .icon { inline-size: 1.05rem; block-size: 1.05rem; }

.hotspot-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hotspot-pin {
  position: absolute;
  top: var(--y);
  left: var(--x);
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin: -0.875rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--c-droplet);
  background: rgb(6 32 42 / 0.85);
  color: var(--c-foam);
  font-size: 0.75rem;
  font-weight: 600;
  font-feature-settings: var(--numbers);
}
.hotspot-pin.is-current { background: var(--c-droplet); color: var(--c-deep); box-shadow: 0 0 0 6px rgb(61 182 234 / 0.2); }


.page--home { --hero-calm: 207 221 219; }
.page--home .site-header:not(.is-solid):not([data-surface="depth"]) { background-color: rgb(var(--hero-calm) / 0.92); }
.hero {
  position: relative;
  display: grid;
  min-block-size: 100svh;
  isolation: isolate;
  background: rgb(var(--hero-calm));
}
.hero__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  --plate-ground: var(--scene-sky);
  touch-action: pan-y;
}
.hero__plate .plate__poster { object-position: 50% 76%; }
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  padding-block-start: var(--header-h-phone);
  pointer-events: none;
}
.hero__text {
  pointer-events: auto;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--gutter) var(--space-4);
  background: rgb(var(--hero-calm) / 0.92);
}
.hero__title { max-inline-size: 11ch; }
:lang(ar) .hero__title { max-inline-size: 12ch; }
.hero__lead { max-inline-size: 34rem; }
.hero__actions { display: grid; gap: var(--space-1); justify-items: start; margin-block-start: var(--space-2); }
.hero__actions .btn-wa { justify-content: center; }
.hero__proof .proof-line { color: var(--text-secondary); }

.hero__plate .scene-controls { inset-block-end: var(--space-4); inset-inline-end: var(--gutter); }

@media (max-aspect-ratio: 1/1) {
  .hero { grid-template-rows: auto minmax(18.5rem, 1fr); grid-template-columns: minmax(0, 1fr); }
  .hero__inner { grid-row: 1; grid-column: 1; }
  .hero__plate { position: relative; inset: auto; grid-row: 2; grid-column: 1; }
  .hero__text { background: rgb(var(--hero-calm)); }
  .hero__actions { justify-items: stretch; }
  .hero__actions .link-arrow { justify-self: start; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 599px) {
  .hero__lead { font-size: 1.0625rem; line-height: 1.5; }
  :lang(ar) .hero__lead { font-size: var(--fs-lead); line-height: 1.7; }
  :lang(ar) .hero__title { font-size: 2.375rem; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 720px) {
  .hero__text { gap: var(--space-2); padding-block: var(--space-3); }
  .hero__text .eyebrow { display: none; }
  .hero__title { font-size: 2.25rem; }
  :lang(ar) .hero__title { font-size: 2.125rem; }
  .hero { grid-template-rows: auto minmax(15rem, 1fr); }
}

@media (min-aspect-ratio: 1/1) {
  .hero__plate .plate__poster { object-position: 70% 68%; }
  [dir="rtl"] .hero__plate .plate__poster { object-position: 30% 68%; }
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .hero__inner {
    align-content: center;
    inline-size: min(100% - 2 * var(--gutter), var(--content-max));
    margin-inline: auto;
    padding-block: calc(var(--header-h) + var(--space-5)) var(--space-8);
  }
  .hero__text {
    position: relative;
    isolation: isolate;
    max-inline-size: min(40rem, 52vw);
    gap: var(--space-5);
    padding: var(--space-7);
    margin-inline-start: calc(-1 * var(--space-7));
    background: none;
    border-radius: var(--radius-panel);
  }
  .hero__text::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(var(--hero-calm) / 0.92);
    border-radius: inherit;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 3.5rem), linear-gradient(to top, transparent, #000 3rem);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to left, transparent, #000 3.5rem), linear-gradient(to top, transparent, #000 3rem);
    mask-composite: intersect;
  }
  [dir="rtl"] .hero__text::before {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem), linear-gradient(to top, transparent, #000 3rem);
    mask-image: linear-gradient(to right, transparent, #000 3.5rem), linear-gradient(to top, transparent, #000 3rem);
  }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-block-start: 0; }
  :lang(ar) .hero__title { font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem); }
  .hero__plate .scene-controls { inset-block-end: var(--space-5); inset-inline-end: max(var(--gutter), calc((100vw - var(--content-max)) / 2)); }
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) and (max-height: 820px) {
  .hero__title { font-size: clamp(2.75rem, 1.5rem + 3.2vw, 4.5rem); }
  :lang(ar) .hero__title { font-size: clamp(2.5rem, 1.4rem + 2.8vw, 3.75rem); }
  .hero__text { gap: var(--space-4); padding-block: var(--space-6); }
}

.picker__fallback { display: none; }
.no-js .picker .tiles,
.no-js .picker__next { display: none; }
.no-js .picker__fallback { display: grid; gap: var(--space-2); }

.home-install__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); max-inline-size: none; }
.home-install__note { margin-block-start: var(--space-3); font-size: var(--fs-small); color: var(--text-secondary); max-inline-size: 36rem; }
@media (max-width: 599px) {
  .home-install .product-card__text { font-size: var(--fs-small); }
}

.home-inside { --pin-steps: 12.7; }
.home-inside .pinned__intro .lead { max-inline-size: 26rem; }
@media (min-width: 1024px) {
  .home-inside .pinned__stage { --scene-label-floor: 112px; --scene-label-ceiling: 132px; }
  .home-inside .pinned__chips { gap: 0.4rem; max-inline-size: min(var(--content-max), 100vw - 2 * var(--gutter)); }
  .home-inside .pinned__chips .chip { padding: 0.35rem 0.8rem; font-size: 0.875rem; }
  :lang(ar) .home-inside .pinned__chips .chip { font-size: 0.9375rem; }
  .home-inside .pinned__card { inline-size: auto; max-inline-size: min(28rem, 34vw); }
  .home-inside .pinned__stage:has(> .plate.is-live) .stage-card:not(.stage-card--keep) .stage-card__text,
  .home-inside .pinned__stage:has(> .plate.is-live) .stage-card:not(.stage-card--keep) .stage-card__big { display: none; }
}
@media (min-width: 1280px) { .home-inside .pinned__chips { flex-wrap: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279px) { .home-inside .pinned__stage { --scene-label-floor: 160px; } }
@media (max-width: 1023px) {
  .home-inside .pinned__stage:has(> .plate.is-live) .pinned__card:not(:has(.stage-card--keep.is-current)) { opacity: 0; visibility: hidden; }
}

.home-membrane { --pin-steps: 3.6; }
.home-scale { --pin-steps: 5.3; }
.home-membrane .pinned__text,
.home-scale .pinned__text {
  inset-block-end: var(--space-4);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-panel);
}
@media (min-width: 1024px) {
  .home-membrane .pinned__text,
  .home-scale .pinned__text {
    inset-block-end: auto;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inset-inline-start: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
    inset-inline-end: auto;
    inline-size: min(30rem, 36vw);
    padding: var(--space-6);
    gap: var(--space-5);
  }
}
@media (max-width: 767px) {
  .home-membrane .pinned__text,
  .home-scale .pinned__text { inset-block-end: var(--stage-floor, 4.5rem); }
}
.home-membrane__fig { display: none; }
@media (max-width: 1023px) { html[data-water="live"] .home-membrane__fig { display: block; } }
.home-proof .ledger__row--now { display: none; }
.scale__actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
@media (max-width: 1023px) {
  .home-scale .pinned__stage:has(> .plate.is-live) .hotspots { display: none; }
}
@media (max-width: 767px) {
  .home-scale .hotspot__text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.home-scale .pinned__stage:has(> .plate.is-still) .hotspot__show,
html[data-tier="c"] .home-scale .hotspot__show { display: none; }

.home-next .split { align-items: start; }
.home-proof .facts { margin-block-end: var(--space-4); }
.home-proof__themes { color: var(--text-secondary); max-inline-size: 36rem; }
.home-proof__record { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
  .home-proof__record { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; padding-block-start: var(--space-6); }
}


:root {
  --glass-light: rgb(255 255 255 / 0.56);
  --glass-light-hi: rgb(255 255 255 / 0.74);
  --glass-dark: rgb(7 38 48 / 0.58);
  --glass-dark-hi: rgb(10 52 64 / 0.72);
  --glass-edge-light: rgb(255 255 255 / 0.7);
  --glass-edge-dark: rgb(143 216 219 / 0.2);
  --glass-blur: blur(16px) saturate(1.3);
  --glass-blur-bar: var(--glass-blur);
  --glass-radius: 16px;
  --glass-shadow: 0 18px 40px -22px rgb(6 32 42 / 0.45), 0 1px 0 rgb(255 255 255 / 0.55) inset;
  --glass-shadow-dark: 0 18px 40px -22px rgb(0 0 0 / 0.6), 0 1px 0 rgb(143 216 219 / 0.12) inset;
  --focus-lift: translateY(-4px);
  --star-gold: #F2B01E;
  --star-empty: rgb(15 42 49 / 0.18);
}
@media (hover: none), (pointer: coarse) {
  :root {
    --glass-blur: none;
    --glass-blur-bar: blur(12px) saturate(1.25);
    --glass-light: rgb(255 255 255 / 0.72);
    --glass-light-hi: rgb(255 255 255 / 0.86);
    --glass-dark: rgb(7 38 48 / 0.74);
    --glass-dark-hi: rgb(10 52 64 / 0.84);
  }
}

.water {
  position: fixed;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms linear;
}
.water.is-on { opacity: 1; }

html[data-water="live"] { background: #d5e4e2; }
html[data-water="live"] body { background: transparent; }
html[data-water="live"] :is(
  main, .section, .section--band, .section--warm, .co-hero--warm, .hero, .pinned__stage, .lights-up__stage,
  .site-footer, .footer-call, .footer-index, .ro-intro
) { background: transparent !important; }
html[data-water="live"] main [data-surface="depth"]:not(.plate):not(.chip):not(.site-header) { background: transparent !important; }
html[data-water="live"] .pinned--lights .pinned__stage { background: transparent !important; }
html[data-water="live"] .still-pool { display: none; }
html[data-water="live"] .plate:not(.is-still) .plate__poster,
html[data-water="live"] .plate:not(.is-still) .poster-box { opacity: 0 !important; }
html[data-water="live"] .plate { --plate-ground: transparent; background: transparent; }
html[data-water="live"] .scene-host { transition-duration: 900ms; }
html[data-water="live"] .plate.is-still:not(.pinned__plate):not(.lights-up__plate),
html[data-water="live"] .plate[data-scene-planned]:not(.pinned__plate):not(.lights-up__plate) {
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

html[data-water="live"] .site-header,
html[data-water="live"] .site-header.is-solid {
  background-color: rgb(236 244 243 / 0.55);
  -webkit-backdrop-filter: var(--glass-blur-bar);
  backdrop-filter: var(--glass-blur-bar);
  border-block-end-color: rgb(255 255 255 / 0.45);
}
html[data-water="live"] .site-header[data-surface="depth"],
html[data-water="live"] .site-header[data-surface="depth"].is-solid {
  background-color: rgb(6 32 42 / 0.5);
  border-block-end-color: rgb(143 216 219 / 0.14);
}
html[data-water="live"] .page--home .site-header:not(.is-solid):not([data-surface="depth"]) {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-block-end-color: transparent;
}
html[data-water="live"] .bottom-bar {
  background: rgb(236 244 243 / 0.62);
  -webkit-backdrop-filter: var(--glass-blur-bar);
  backdrop-filter: var(--glass-blur-bar);
  border-block-start-color: rgb(255 255 255 / 0.5);
}

html[data-water="live"] :is(.product-card, .fact, .panel, .psh-panel, .hw-card, .co-card, .hb-card, .visit-card, .pinned__intro, .pinned__card) {
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge-light);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}
html[data-water="live"] [data-surface="depth"] :is(.product-card, .fact, .panel, .psh-panel, .hw-card, .co-card, .pinned__intro, .pinned__card, .pinned__text),
html[data-water="live"] .pinned__stage[data-surface="depth"] :is(.pinned__intro, .pinned__card) {
  background: var(--glass-dark);
  border-color: var(--glass-edge-dark);
  box-shadow: var(--glass-shadow-dark);
}
html[data-water="live"] .pinned__text { border-radius: var(--glass-radius); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

html[data-water="live"] .product-card { padding: 0.6rem 0.6rem 0.9rem; }
html[data-water="live"] .product-card .lens { border-radius: calc(var(--glass-radius) - 6px); background: rgb(227 238 236 / 0.8); }
html[data-water="live"] .product-card__body { padding-inline: 0.35rem; }

html[data-water="live"] main .section + .section,
html[data-water="live"] .footer-call { padding-block-start: calc(var(--section-pad) * 0.5); }

html[data-water="live"] .facts { gap: var(--space-4); border: 0; }
html[data-water="live"] .fact { padding: var(--space-5); border: 1px solid var(--glass-edge-light); }
@media (max-width: 767px) {
  html[data-water="live"] .fact { padding: var(--space-4); }
}
@media (min-width: 1024px) {
  html[data-water="live"] .fact + .fact { padding-inline-start: var(--space-5); border-inline-start: 1px solid var(--glass-edge-light); }
}

html[data-water="live"] .tiles { gap: var(--space-2); border: 0; }
html[data-water="live"] .tile {
  padding-inline: var(--space-4);
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge-light);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  transition: background-color var(--dur-hover) linear, transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
html[data-water="live"] .tile:hover { background: var(--glass-light-hi); }
@media (min-width: 768px) {
  html[data-water="live"] .tiles { gap: var(--space-3); }
  html[data-water="live"] .tile { border-block-start: 1px solid var(--glass-edge-light); padding-inline: var(--space-5); }
}

html[data-water="live"] .step__node { background: rgb(236 244 243 / 0.85); }

html[data-water="live"] .chip:not(.is-current):not([aria-pressed="true"]):not([aria-current="true"]) {
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge-light);
}
html[data-water="live"] [data-surface="depth"] .chip:not(.is-current):not([aria-pressed="true"]):not([aria-current="true"]) {
  background: var(--glass-dark);
  border-color: var(--glass-edge-dark);
}
html[data-water="live"] .scene-btn {
  background: rgb(236 244 243 / 0.6);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

:is(.product-card, .fact, .tile, .hw-card, .co-card, .step) {
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out), background-color 300ms linear, border-color 300ms linear;
}
@media (hover: hover) {
  html[data-water="live"] :is(.product-card, .fact, .hw-card, .co-card):hover { transform: var(--focus-lift); background: var(--glass-light-hi); }
}
html[data-water="live"] :is(.product-card, .fact, .tile, .hw-card, .co-card).is-focus {
  transform: var(--focus-lift);
  background: var(--glass-light-hi);
  border-color: rgb(255 255 255 / 0.95);
  box-shadow: 0 26px 46px -24px rgb(6 32 42 / 0.55), 0 0 0 1px rgb(61 182 234 / 0.25), 0 1px 0 rgb(255 255 255 / 0.7) inset;
}
html[data-water="live"] .step.is-focus .step__node { background: var(--accent-thread); color: var(--c-foam); transform: scale(1.12); }
html[data-water="live"] .step .step__node { transition: background-color 300ms linear, color 300ms linear, transform 420ms var(--ease-out); }
@property --lens-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
.lens { transition: --lens-r 650ms var(--ease-out); }
.product-card.is-focus .lens { --lens-r: 150px; }
.product-card.is-focus .lens__ring { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  :is(.product-card, .fact, .tile, .hw-card, .co-card, .step) { transition: none; }
  html[data-water="live"] :is(.product-card, .fact, .tile, .hw-card, .co-card).is-focus { transform: none; }
  .lens { transition: none; }
}

@media (max-width: 767px) {
  .home-install .product-grid {
    display: flex;
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--space-3) var(--gutter) var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .home-install .product-grid::-webkit-scrollbar { display: none; }
  .home-install .product-card { flex: 0 0 72%; scroll-snap-align: center; }
  .home-install .product-card__text { font-size: var(--fs-small); }
}

.stars {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.12 6.57L12 17.47l-5.9 3.1 1.12-6.57-4.77-4.65 6.6-.96z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: -0.12em;
  inline-size: 5.5em;
  block-size: 1.05em;
  margin-inline-end: 0.35em;
  background: linear-gradient(90deg, var(--star-gold) calc(var(--rating, 5) / 5 * 100%), var(--star-empty) 0);
  -webkit-mask: var(--star) 0 50% / 1.1em 1em repeat-x;
  mask: var(--star) 0 50% / 1.1em 1em repeat-x;
}
[dir="rtl"] .stars { background: linear-gradient(270deg, var(--star-gold) calc(var(--rating, 5) / 5 * 100%), var(--star-empty) 0); -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
.stars--big { display: block; font-size: 1.6rem; margin-block: -0.2rem 0.1rem; }
[data-surface="depth"] .stars { --star-empty: rgb(245 249 248 / 0.22); }

.hero--water {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-block-size: 100svh;
  background: linear-gradient(180deg, #d6e5e3 0%, #d2e1df 46%, #c3d7d3 100%);
}
html:not([data-water]) .hero--water { background: #cfdedb url("../img/posters/hero-tall.webp") 50% 100% / cover no-repeat; }
@media (min-aspect-ratio: 1/1) {
  html:not([data-water]) .hero--water { background-image: url("../img/posters/hero-wide.webp"); background-position: 70% 68%; }
  html:not([data-water])[dir="rtl"] .hero--water { background-image: url("../img/posters/hero-wide-rtl.webp"); background-position: 30% 68%; }
}
html[data-water="live"] .hero--water { background: transparent; }
.hero--water .hero__inner {
  align-content: start;
  padding-block-start: calc(var(--header-h-phone) + clamp(0.5rem, 3svh, 2rem));
}
.hero--water .hero__text {
  background: none;
  padding: var(--space-3) var(--gutter) var(--space-4);
  gap: var(--space-3);
}
.hero--water .hero__title { font-size: var(--fs-display); letter-spacing: var(--tracking-display); }
.hero--water .hero__title--slogan { max-inline-size: 12ch; }
.hero__amp { color: var(--text-link); }
:lang(ar) .hero--water .hero__title { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem); }
.hero--water .hero__actions { justify-items: stretch; }
.hero--water .hero__actions .link-arrow { justify-self: start; }
.hero__drop {
  position: absolute;
  z-index: 1;
  inset-inline-start: 50%;
  inset-block-start: 63%;
  inline-size: 70px;
  block-size: 70px;
  translate: -50% -50%;
  pointer-events: none;
}
[dir="rtl"] .hero__drop { translate: 50% -50%; }
.hero__cue {
  position: absolute;
  z-index: 1;
  inset-block-end: calc(var(--bottom-bar-h) + 1.25rem);
  inset-inline-start: 50%;
  inline-size: 1px;
  block-size: 2.75rem;
  translate: -50% 0;
  background: linear-gradient(to bottom, rgb(15 42 49 / 0), rgb(15 42 49 / 0.45));
  overflow: hidden;
}
.hero__cue::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 40%;
  background: var(--c-ink);
  animation: hero-cue 2.4s var(--ease-in-out) infinite;
}
@keyframes hero-cue { from { transform: translateY(-110%); } to { transform: translateY(260%); } }
.hero__cue { transition: opacity 400ms linear; }
.site-header.is-solid ~ main .hero__cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero__cue::after { animation: none; transform: translateY(80%); } }
html[data-motion="paused"] .hero__cue::after { animation-play-state: paused; }
@media (max-aspect-ratio: 1/1) {
  .hero--water { grid-template-rows: auto minmax(8rem, 1fr); }
  .hero--water .hero__inner { grid-row: 1; grid-column: 1; }
  .hero--water .hero__drop {
    position: relative;
    grid-row: 2; grid-column: 1;
    inset: auto;
    translate: none;
    justify-self: center;
    align-self: start;
    margin-block-start: clamp(0.75rem, 4svh, 2.5rem);
  }
}
@media (max-aspect-ratio: 1/1) and (max-width: 599px) {
  .hero--water .hero__text .eyebrow { display: none; }
  .hero--water .hero__text { gap: var(--space-4); }
  .hero--water .hero__actions { margin-block-start: var(--space-3); }
  .hero--water .hero__proof { margin-block-start: calc(-1 * var(--space-1)); }
}
@media (max-aspect-ratio: 1/1) and (max-height: 720px) {
  .hero--water .hero__text .eyebrow { display: none; }
  .hero--water .hero__title { font-size: 2.3rem; }
  .hero--water .hero__drop { inline-size: 56px; block-size: 56px; margin-block-start: 0.5rem; }
  .hero__cue { display: none; }
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .hero--water .hero__inner { align-content: center; padding-block: calc(var(--header-h) + var(--space-5)) var(--space-8); }
  .hero--water .hero__text { max-inline-size: min(40rem, 52vw); padding: 0; gap: var(--space-5); margin-inline-start: 0; }
  .hero--water .hero__text::before { content: none; }
  .hero--water .hero__actions { display: flex; }
  .hero__drop { inset-inline-start: 72%; inset-block-start: 38%; inline-size: clamp(110px, 9vw, 150px); block-size: clamp(110px, 9vw, 150px); }
  .hero__cue { inset-block-end: 1.75rem; }
}

@media (max-width: 1023px) {
  html[data-water="live"] .pinned__chips { display: none; }
  html[data-water="live"] :is(.pinned__intro, .pinned__card, .pinned__text) {
    inset-block-end: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom) + 0.75rem);
    inset-inline: var(--gutter);
    padding: var(--space-4) var(--space-4) var(--space-4);
    max-block-size: 46svh;
    overflow-y: auto;
  }
  html[data-water="live"] .home-membrane .legend,
  html[data-water="live"] .home-membrane .pinned__text .fig-caption { display: none; }
  html[data-water="live"] .pinned__fig { background: rgb(236 244 243 / 0.6); border-radius: 999px; padding-inline: 0.65rem; }
  html[data-water="live"] [data-surface="depth"] .pinned__fig { background: rgb(6 32 42 / 0.55); }
}
@media (max-width: 1023px) and (max-height: 700px) {
  html[data-water="live"] :is(.pinned__intro, .pinned__card, .pinned__text) { max-block-size: 52svh; }
}



.co-hero {
  padding-block: calc(var(--header-h-phone) + var(--space-6)) var(--section-pad);
}
@media (min-width: 768px) {
  .co-hero { padding-block-start: calc(var(--header-h) + var(--space-8)); }
}
.co-hero--warm { background: var(--surface-warm); }
.co-hero--doc { padding-block-end: 0; }
.co-hero__grid { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .co-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; }
}
.co-hero__text { display: grid; gap: var(--space-5); align-content: start; }
.co-hero__text > h1 { max-inline-size: 18ch; }
.co-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }

.co-measure { max-inline-size: 44rem; }
.co-doc__body { display: grid; gap: var(--space-8); }
.co-sec { display: grid; gap: var(--space-4); }

.co-list { border-block-start: var(--border-hairline); }
.co-list > li { padding-block: var(--space-4); border-block-end: var(--border-hairline); }
.co-list--strong > li { font-weight: 500; color: var(--text-primary); }
.co-sec .more .co-list { border-block-start: 0; padding-block: 0; }
.co-sec .more.is-wide { margin-block-start: calc(-1 * var(--space-4)); }


.page--about .site-header:not(.is-solid):not([data-surface="depth"]) {
  background-color: color-mix(in srgb, var(--surface-warm) 90%, transparent);
}
.about-hero__figure,
.about-story__fig,
.contact-map { display: grid; gap: var(--space-3); margin: 0; }
.about-hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-shallow);
}
@media (min-width: 1024px) { .about-hero__frame { aspect-ratio: 4 / 5; } }
.about-hero__frame img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.about-story .plate__poster {
  --mark-h: clamp(5.5rem, 24vw, 10rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  block-size: auto;
  padding-block: var(--space-5);
}
.about-story__mark { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.about-story__mark svg { block-size: var(--mark-h); inline-size: auto; max-inline-size: 100%; overflow: visible; }
.about-story__mark > span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.about-story__op {
  display: grid;
  place-items: center;
  block-size: var(--mark-h);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  color: var(--accent-thread);
}
.about-story__ink { fill: var(--c-ink); }
.about-story__teal { fill: var(--c-sign-teal); }
.about-story__light { fill: var(--c-droplet); }
.about-story__held { color: var(--c-ink); --mark-drop: var(--c-droplet); }

.about-work__list > li {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--text-primary);
}
:lang(ar) .about-work__list > li { line-height: 1.7; }
.about-work__photo { aspect-ratio: 3 / 2; }
@media (max-width: 599px) { .about-work__photo { aspect-ratio: 3 / 1; } }
@media (min-width: 1024px) {
  .about-work__list { grid-column: 2; grid-row: span 2; }
}


.contact-hero__inner { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .contact-hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
}
.contact-wa { display: grid; gap: var(--space-3); }
.contact-wa__q { font-weight: 600; color: var(--text-primary); }
.contact-wa .tile { text-decoration: none; }
.contact-wa__go { display: grid; place-items: center; color: var(--text-primary); }
.contact-wa .tile .contact-wa__go .icon { inline-size: 1.5rem; block-size: 1.5rem; color: inherit; }
.contact-call { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--text-secondary); }
.contact-call > .icon { color: var(--accent-thread); }
.contact-call a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  font-weight: 600;
  color: var(--text-primary);
}

.contact-visit__text > p:not(.lead) { color: var(--text-secondary); }
.contact-visit__address { color: var(--text-primary); text-wrap: balance; }
.contact-map__plate { aspect-ratio: 16 / 7; }
.contact-map__pulse {
  position: absolute;
  z-index: 1;
  top: 53.6%;
  left: 50%;
  inline-size: 20%;
  aspect-ratio: 3 / 1;
  border: 1.5px solid var(--accent-thread);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
}
.contact-map.is-in .contact-map__pulse { animation: contact-pulse 1.6s var(--ease-out) 0.3s both; }
.contact-map.is-in .contact-map__pulse--late { animation-delay: 0.75s; }
@keyframes contact-pulse {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-map.is-in .contact-map__pulse { animation: none; }
}
:root[data-motion="paused"] .contact-map.is-in .contact-map__pulse { animation: none; }

.contact-write__email bdi { font-weight: 600; color: var(--text-primary); }
.contact-write__note { color: var(--text-secondary); }
.contact-more { margin-block-start: 0; }
.contact-form { display: grid; gap: var(--space-5); max-inline-size: 36rem; }
.contact-form textarea.input { min-block-size: 8rem; padding-block: var(--space-3); resize: vertical; line-height: var(--lh-body); }
:lang(ar) .contact-form .input[dir="ltr"] { text-align: end; }
.contact-choices { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.contact-choice { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); cursor: pointer; }
.contact-choice input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--action-bg); }
.contact-form:has(input[value="plant"]:checked) .contact-branch { color: var(--text-primary); font-weight: 500; }
.contact-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.contact-form .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.contact-form .btn[aria-disabled="true"]:active { transform: none; }

.cost-how__body { display: grid; gap: var(--space-5); max-inline-size: 40rem; }
.cost-how__sum {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--text-primary);
  text-wrap: balance;
}


.a11y-motion { display: grid; justify-items: start; gap: var(--space-3); }
.a11y-motion .motion-toggle { padding-inline: var(--space-4); font-weight: 600; }
.a11y-motion .motion-toggle[aria-pressed="true"] { background: var(--action-bg); border-color: var(--action-bg); color: var(--text-on-action); }


.page--not-found .still-pool { display: none; }
.nf__text {
  display: grid;
  gap: var(--space-5);
  padding-block: calc(var(--header-h-phone) + var(--space-6)) var(--space-7);
}
@media (min-width: 768px) {
  .nf__text { padding-block: calc(var(--header-h) + var(--space-8)) var(--space-8); }
}
.nf__text > h1 { max-inline-size: 14ch; }
.nf__doors { max-inline-size: 36rem; border-block-start: var(--border-hairline); }
.nf__doors a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 3.5rem;
  border-block-end: var(--border-hairline);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-primary);
  text-decoration: none;
}
.nf__doors .icon { color: var(--text-secondary); transition: translate var(--dur-hover) var(--ease-out); }
.nf__doors a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.nf__doors a:hover .icon { translate: 3px 0; }
[dir="rtl"] .nf__doors a:hover .icon { translate: -3px 0; }
.nf__pool { position: relative; overflow: hidden; margin: 0; aspect-ratio: 13 / 10; background: var(--c-shallow); }
@media (min-aspect-ratio: 1/1) { .nf__pool { aspect-ratio: 15 / 4; } }
.nf__pool img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.nf__pool .fig-caption {
  position: absolute;
  z-index: 3;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
}


.hb-hero { padding-block: calc(var(--header-h-phone) + var(--space-5)) var(--space-7); }
.hb-hero__grid { display: grid; gap: var(--space-6); }
.hb-hero__text { display: grid; gap: var(--space-4); justify-items: start; align-content: center; }
.hb-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-1); }
.hb-hero__figure { display: grid; gap: var(--space-3); min-inline-size: 0; }
.hb-hero .hb-scene { overflow: visible; }
@media (min-width: 1024px) {
  .hb-hero { padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8); }
  .hb-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); align-items: center; }
}
@media (max-width: 479px) {
  .hb-hero__actions { justify-self: stretch; }
  .hb-hero__actions .btn-wa { inline-size: 100%; justify-content: center; }
}

.hb-hero__plate { aspect-ratio: 1; --plate-ground: var(--surface-page); }
.hb-hero__plate .plate__poster { object-position: 50% 19%; }
.hb-hero__plate :is(.plate__poster, .scene-host) {
  mask-image: linear-gradient(90deg, transparent, #000 4% 96%, transparent), linear-gradient(transparent, #000 4% 96%, transparent);
  mask-composite: intersect;
}
@media (min-width: 768px) {
  .hb-hero__plate { aspect-ratio: 23 / 20; }
  .hb-hero__plate .plate__poster { object-position: 100% 52%; }
  [dir="rtl"] .hb-hero__plate .plate__poster { object-position: 0 52%; }
}

.hb-scene { aspect-ratio: 4 / 3; }
.hb-draw {
  display: block; inline-size: 100%; block-size: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round;
  --d-k: 1; --d-line: var(--c-ink-soft); --d-hair: rgb(62 89 96 / 0.4); --d-fill: var(--c-white); --d-stone: var(--c-limestone);
  --d-water: var(--c-drop-deep); --d-halo: rgb(61 182 234 / 0.2); --d-flow: rgb(245 249 248 / 0.95); --d-drain: var(--c-salt-ink);
  --d-ground: var(--c-hairline); --d-record: var(--c-sign-teal);
}
.hb-draw--light, [data-surface="depth"] .hb-draw {
  --d-line: var(--c-spray); --d-hair: rgb(143 216 219 / 0.3); --d-fill: rgb(13 47 58 / 0.9); --d-stone: rgb(143 216 219 / 0.07);
  --d-water: var(--c-droplet); --d-halo: rgb(61 182 234 / 0.3); --d-flow: rgb(236 250 252 / 0.95); --d-drain: var(--c-salt);
  --d-ground: rgb(143 216 219 / 0.26); --d-record: var(--c-spray);
}
@media (max-width: 599px) { .hb-draw { --d-k: 1.45; } }
@media (min-width: 768px) { .hb-doors .hb-draw { --d-k: 1.3; } }
.hb-draw .dl { stroke: var(--d-line); stroke-width: calc(1.35 * var(--d-k)); }
.hb-draw .dh { stroke: var(--d-hair); stroke-width: var(--d-k); }
.hb-draw :is(.dfill, .drf) { fill: var(--d-fill); }
.hb-draw .dstone { fill: var(--d-stone); stroke: var(--d-line); stroke-width: calc(1.2 * var(--d-k)); }
.hb-draw .dg { stroke: var(--d-ground); stroke-width: var(--d-k); }
.hb-draw .dwh { stroke: var(--d-halo); stroke-width: calc(7 * var(--d-k)); }
.hb-draw :is(.dw, .df) { stroke: var(--d-water); stroke-width: calc(2.2 * var(--d-k)); }
.hb-draw .df { stroke: var(--d-flow); stroke-dasharray: 2 16; opacity: 0; }
.hb-draw :is(.dd, .dc, .ddc, .dr) { stroke: var(--d-water); stroke-width: calc(1.6 * var(--d-k)); }
.hb-draw :is(.dd, .ddc) { stroke: var(--d-drain); }
.hb-draw .dd { stroke-dasharray: 5 4; }
.hb-draw .dr { stroke: var(--d-record); }
.hb-draw .dlevel { stroke: var(--d-halo); stroke-width: calc(5 * var(--d-k)); }
[dir="rtl"] .hb-draw { transform: scaleX(-1); }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="paused"]).reveal-ready [data-reveal]:not(.is-in) .hb-draw { clip-path: inset(0 100% 0 0); }
  :root:not([data-motion="paused"]) .is-in .hb-draw { animation: hb-sweep var(--dur-draw) var(--ease-in-out) both; }
  :root:not([data-motion="paused"]) .is-in .hb-draw :is(.dw, .dwh) { stroke-dasharray: 1; animation: hb-line var(--dur-camera) var(--ease-in-out) var(--dur-reveal) both; }
  :root:not([data-motion="paused"]) .is-in .hb-draw :is(.dd, .dc, .ddc) { animation: hb-fade var(--dur-ui) linear var(--dur-draw) both; }
  :root:not([data-motion="paused"]) .is-in .hb-draw .df { animation: hb-flow var(--dur-draw) linear var(--dur-draw) 3, hb-life calc(3 * var(--dur-draw)) linear var(--dur-draw) both; }
}
@keyframes hb-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes hb-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hb-fade { from { opacity: 0; } }
@keyframes hb-flow { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
@keyframes hb-life { 0%, 100% { opacity: 0; } 12%, 85% { opacity: 1; } }

.hb-choice { position: relative; cursor: pointer; }
.hb-choice > input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hb-choice:has(> input:checked) { background: var(--action-bg); border-color: var(--action-bg); color: var(--text-on-action); }
.hb-choice:has(> input:focus-visible) { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.hb-q > legend { margin-block-end: var(--space-3); }
.hb-q .message-preview { margin-block: var(--space-5) var(--space-4); }

.hb-src, .hb-send, .hb-q:has(input:checked) .hb-send--none { display: none; }
.hb-send--none { display: inline-flex; }
.hb-q:has([value="network"]:checked) .hb-src--network, .hb-q:has([value="tanker"]:checked) .hb-src--tanker,
.hb-q:has([value="well"]:checked) .hb-src--well, .hb-q:has([value="unsure"]:checked) .hb-src--unsure { display: inline; }
.hb-q:has([value="network"]:checked) .hb-send--network, .hb-q:has([value="tanker"]:checked) .hb-send--tanker,
.hb-q:has([value="well"]:checked) .hb-send--well, .hb-q:has([value="unsure"]:checked) .hb-send--unsure { display: inline-flex; }

.hb-helper { max-inline-size: 46rem; }
.hb-suggest { display: none; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center; margin-block-start: var(--space-6); }
.hb-suggest__fig { display: grid; gap: var(--space-1); margin: 0; }
.hb-suggest__fig .fig-caption { white-space: nowrap; }
.hb-suggest__fig img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 62%; background: var(--surface-band); border-radius: var(--radius-panel); }
.hb-suggest__body { display: contents; }
.hb-suggest__body > :not(h3), .hb-suggest > .btn-wa { grid-column: 1 / -1; justify-self: start; }
.hb-suggest__body p { color: var(--text-secondary); }
.hb-suggest--plain { grid-template-columns: minmax(0, 1fr); }
.hb-helper:has([value="taste"]:checked) [data-change="taste"], .hb-helper:has([value="scale"]:checked) [data-change="scale"],
.hb-helper:has([value="bottles"]:checked) [data-change="bottles"], .hb-helper:has([value="not-sure"]:checked) [data-change="not-sure"] {
  display: grid; animation: slide-in var(--dur-panel) var(--ease-settle) both;
}
@media (min-width: 600px) {
  .hb-suggest { grid-template-columns: 9rem minmax(0, 1fr); align-items: start; gap: var(--space-5); }
  .hb-suggest__body { display: grid; gap: var(--space-2); justify-items: start; }
  .hb-suggest__body > :not(h3) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .hb-helper .hb-suggest { animation: none; } }
:root[data-motion="paused"] .hb-helper .hb-suggest { animation: none; }

.hb-viewer__grid { display: grid; gap: var(--space-5); grid-template-areas: "head" "fig" "chips" "card" "link"; }
.hb-viewer__grid > .section-head { grid-area: head; margin: 0; }
.hb-viewer__fig { grid-area: fig; display: grid; gap: var(--space-3); min-inline-size: 0; }
.hb-viewer__chips { grid-area: chips; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.hb-viewer__chips .chip { flex: none; }
.hb-viewer__cards { grid-area: card; color: var(--text-secondary); }
.hb-viewer__cards strong { color: var(--text-primary); }
.hb-viewer__grid > .link-arrow { grid-area: link; justify-self: start; }
.hb-viewer__plate { aspect-ratio: 1; margin-inline: calc(-1 * var(--gutter)); --plate-ground: var(--surface-page); }
.hb-vstill:not(.hb-vstill--rest), .hb-vcard, .hb-viewer:has([aria-pressed="true"]) .hb-vstill--rest { display: none; }
.hb-vstill { object-position: 100% 50%; }
[dir="rtl"] .hb-vstill { object-position: 0 50%; }
.hb-viewer:has([data-hotspot-show="1"][aria-pressed="true"]) [data-n="1"], .hb-viewer:has([data-hotspot-show="2"][aria-pressed="true"]) [data-n="2"],
.hb-viewer:has([data-hotspot-show="3"][aria-pressed="true"]) [data-n="3"], .hb-viewer:has([data-hotspot-show="4"][aria-pressed="true"]) [data-n="4"],
.hb-viewer:has([data-hotspot-show="5"][aria-pressed="true"]) [data-n="5"], .hb-viewer:has([data-hotspot-show="6"][aria-pressed="true"]) [data-n="6"],
.hb-viewer:has([data-hotspot-show="7"][aria-pressed="true"]) [data-n="7"], .hb-viewer:has([data-hotspot-show="8"][aria-pressed="true"]) [data-n="8"] { display: block; }
@media (min-width: 768px) { .hb-viewer__plate { margin-inline: 0; } }
@media (min-width: 1024px) {
  .hb-viewer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "head fig" "chips fig" "card fig" "link fig"; column-gap: var(--space-8); align-items: start; }
  .hb-viewer__plate { aspect-ratio: 5 / 4; }
  .hb-viewer__chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.hb-faq { display: grid; gap: var(--space-6); }
.hb-faq__list { border-block-start: var(--border-hairline); }
.hb-faq__item { border-block-end: var(--border-hairline); }
.hb-faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--target-min); padding-block: var(--space-4);
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: 1.3; list-style: none; cursor: pointer;
}
.hb-faq__item > summary::-webkit-details-marker { display: none; }
.hb-faq__item > summary::after {
  content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; margin-inline-end: var(--space-2); transform: rotate(45deg);
  border-inline-end: var(--line-thread) solid; border-block-end: var(--line-thread) solid; transition: transform var(--dur-ui) var(--ease-out);
}
.hb-faq__item[open] > summary::after { transform: rotate(-135deg); }
[dir="rtl"] .hb-faq__item > summary::after { transform: rotate(-45deg); }
[dir="rtl"] .hb-faq__item[open] > summary::after { transform: rotate(135deg); }
.hb-faq__item > p { max-inline-size: 40rem; padding-block-end: var(--space-5); color: var(--text-secondary); }
.hb-faq__list > .more { margin: 0; }
.hb-faq__list > .more > .more__body { padding: 0; }
@media (min-width: 1024px) { .hb-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: start; } }

.hb-points { display: grid; gap: var(--space-5); }
.hb-points li { display: grid; gap: var(--space-2); align-content: start; }
.hb-points p, .hb-pair p { color: var(--text-secondary); max-inline-size: 34rem; }
@media (min-width: 768px) { .hb-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }

.hb-doors { display: grid; gap: var(--space-7); }
.hb-doors .plate { margin-block-end: var(--space-3); border-radius: var(--radius-panel); --plate-ground: var(--c-deep); }
@media (min-width: 768px) { .hb-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }

.hb-trio { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.hb-trio .product-card { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: none; gap: var(--space-4); align-items: center; }
.hb-trio .product-card__body { padding: 0; }
@media (min-width: 600px) {
  .hb-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .hb-trio .product-card { grid-template-columns: none; grid-template-rows: auto 1fr; gap: 0; align-items: start; }
  .hb-trio .product-card__body { padding-block-start: var(--space-3); }
}
.hb-note { margin-block-start: var(--space-5); }

.hb-pair > * { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }


.psh-hero { padding-block: calc(var(--header-h-phone) + var(--space-6)) var(--space-7); }
.psh-hero__text, .psh-stack { display: grid; gap: var(--space-5); justify-items: start; align-content: start; }
:is(.psh-hero__text, .pl-panel) h1 { max-inline-size: 17ch; }
.psh-back a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: inherit; text-decoration: none; }
.psh-back a:hover { text-decoration: underline; }
.psh-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.psh-big { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem); line-height: calc(var(--lh-h2) + 0.1); color: var(--text-primary); text-wrap: balance; }
.psh-big--soft { color: var(--text-secondary); }
.psh-rows { display: grid; inline-size: 100%; border-block-end: var(--border-hairline); }
.psh-rows > * { display: grid; gap: var(--space-1); align-content: start; padding-block: var(--space-4); border-block-start: var(--border-hairline); }
.psh-rows :is(h3, dt), .sv-route h2, .sv-number__title, .hw-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.psh-rows :is(p, dd) { margin: 0; color: var(--text-secondary); }
.psh-panel { display: grid; gap: var(--space-3); max-inline-size: 30rem; padding: var(--space-4); background: var(--surface-card); border-radius: var(--radius-panel); inset-block-end: calc(var(--space-4) + 3.5rem); }

.pl-top { display: grid; grid-template-columns: minmax(0, 1fr); }
.pl-top__intro { padding: calc(var(--header-h-phone) + var(--space-5)) var(--gutter) var(--space-4); }
.pl-panel { display: grid; gap: var(--space-4); justify-items: start; }
.pl-top__stage { position: relative; block-size: clamp(22rem, 58svh, 34rem); }
.pl-top__plate { position: absolute; inset: 0; --plate-ground: var(--c-deep); }
.pl-top__plate .scene-controls { inset-inline-end: var(--gutter); }
.pl-top__fig { position: absolute; z-index: 3; inset-block-end: var(--space-5); inset-inline-start: var(--gutter); padding: 0.2rem 0.5rem; background: var(--surface-page); border-radius: var(--radius-panel); }
.pl-top__parts { padding: var(--space-2) var(--gutter) 0; }
.pl-parts .more__body { display: grid; gap: var(--space-3); justify-items: start; }
.pl-parts .hotspots { inline-size: 100%; }
.pl-parts__title { display: none; font-size: var(--fs-h3); }
.pl-top .hotspot__show { display: none; }
.pl-form { inline-size: 100%; max-inline-size: 36rem; }
.pl-form form { display: grid; gap: var(--space-5); justify-items: start; padding-block-start: var(--space-4); }
.pl-form .field { inline-size: 100%; }
.pl-form .btn[disabled] { border-style: dashed; color: var(--text-secondary); cursor: not-allowed; }

.sv-hero { display: grid; gap: var(--space-7); }
.sv-hero__fig { display: grid; gap: var(--space-3); }
.sv-hero__plate { aspect-ratio: 880 / 840; border-radius: var(--radius-panel); --plate-ground: var(--c-deep); }
.sv-routes { padding-block-end: var(--section-pad); }
.sv-routes__grid { display: grid; column-gap: var(--space-7); }
.sv-route { display: grid; gap: var(--space-3); justify-items: start; align-content: start; padding-block: var(--space-6); border-block-start: var(--border-hairline); scroll-margin-block-start: calc(var(--header-h) + var(--space-5)); }
.sv-route p, .hw-card > p { color: var(--text-secondary); }
.sv-lane .chip:not([aria-pressed="true"]) { background: var(--surface-page); }
.sv-lane__fallback, .no-js .sv-lane__first { display: none; }
.no-js .sv-lane__fallback { display: block; }
.sv-number { display: grid; gap: var(--space-2); margin-block-start: var(--space-8); padding-block-start: var(--space-6); border-block-start: var(--border-hairline); }
.sv-number a { font-weight: 600; white-space: nowrap; }
.sv-plans table { inline-size: 100%; margin-block-start: var(--space-6); table-layout: fixed; font-size: var(--fs-small); }
.sv-plans :is(th, td) { padding: var(--space-3) var(--space-2); text-align: start; vertical-align: top; border-block-end: var(--border-hairline); }
.sv-plans th { color: var(--text-secondary); }
.sv-plans .confirm { white-space: normal; }

.hw-cards { padding-block-end: var(--section-pad); }
.hw-cards__grid { display: grid; gap: var(--space-7) var(--space-6); }
.hw-card { position: relative; display: grid; gap: var(--space-2); align-content: start; }
.hw-card__media { position: relative; aspect-ratio: 16 / 10; margin-block-end: var(--space-3); overflow: hidden; border-radius: var(--radius-panel); background: var(--c-deep); }
.hw-card__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hw-card__media .hw-card__img--beads { object-position: 82% 50%; }
.hw-card__media .hw-card__img--diagram { object-fit: contain; padding: 6% 4%; }
[dir="rtl"] .hw-card__img--diagram { transform: scaleX(-1); }
.hw-card__title a { color: var(--text-primary); text-decoration: none; }
.hw-card__title a::after { content: ""; position: absolute; inset: 0; }
.hw-card:hover .hw-card__title a { text-decoration: underline; }
.hw-card:has(a:focus-visible) { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.hw-card__title a:focus-visible { outline: none; }
.hw-cards__note { margin-block-start: var(--space-6); }

.ro-flow { --pin-steps: 4.2; }
.ro-gauge { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-size: var(--fs-small); color: var(--text-secondary); }
.ro-gauge__label { font-weight: 600; color: var(--text-primary); }
.ro-gauge ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ro-gauge li + li::before { content: "·"; padding-inline: var(--space-2); color: var(--text-secondary); font-weight: 400; }
.ro-gauge .is-current,
.ro-flow .pinned__stage:has(> .plate.cmd-pressure) .ro-gauge:has(.ro-gauge__low.is-current) .ro-gauge__high { color: var(--accent-thread); font-weight: 600; }
.ro-flow .pinned__stage:has(> .plate.cmd-pressure) .ro-gauge__low.is-current { color: var(--text-secondary); font-weight: 400; }
.ro-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.ro-controls > .is-off, .ro-flow .pinned__stage:has(> .plate.is-live) .ro-controls:has(> .is-off) { display: none; }
.ro-stages > li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); }
.ro-stages .stage-card__n { grid-row: span 2; margin-block-start: 0.1rem; }

.sf-hero { display: grid; gap: var(--space-6); }
.sf-hero__fig { display: grid; gap: var(--space-3); justify-items: center; }
.sf-hero__fig img { inline-size: min(100%, 18rem); aspect-ratio: 1; -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent); mask-image: radial-gradient(closest-side, #000 78%, transparent); }
.sf-beads { --pin-steps: 2.8; }
[dir="rtl"] .sf-beads .plate__poster { transform: scaleX(-1); }
.sf-key { inline-size: 0.6rem; block-size: 0.6rem; border: 1.5px solid var(--c-spray); border-radius: 50%; }
.sf-key--mineral { border-color: var(--c-salt); border-radius: 0; transform: rotate(45deg); }
.sf-key--sodium { inline-size: 0.5rem; block-size: 0.5rem; background: var(--c-spray); }
.sf-key--bead { inline-size: 0.9rem; block-size: 0.9rem; }

.wo-diagram { --pin-steps: 5.2; --wo-draw: clamp(0.12, calc(0.12 + var(--p, 1) * 0.88), 1); }
:root[data-motion="paused"] .wo-diagram, .no-js .wo-diagram { --wo-draw: 1; }
.wo-art { display: grid; place-items: center; padding: calc(var(--header-h-phone) + 7.5rem) var(--gutter) calc(var(--bottom-bar-h) + 3.5rem); container-type: size; }
.wo-frame { position: relative; --ar: 2.2143; inline-size: min(100cqw, 100cqh * var(--ar), 78rem); aspect-ratio: 1240 / 560; }
.wo-frame--tall { display: none; --ar: 0.4255; aspect-ratio: 400 / 940; }
.wo-frame img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.wo-frame__ghost { opacity: 0.16; }
.wo-frame__img { clip-path: inset(-4% calc((1 - var(--wo-draw)) * 100%) -4% -4%); }
.wo-frame--tall .wo-frame__img { clip-path: inset(-4% -40% calc((1 - var(--wo-draw)) * 100%) -40%); }
[dir="rtl"] .wo-frame img { transform: scaleX(-1); }
.wo-labels { position: absolute; inset: 0; }
.wo-label { --shift: -50%; --gap: 3.4rem; position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); display: grid; inline-size: max-content; max-inline-size: 11rem; padding: 0.3rem 0.6rem; background: var(--c-deep-raised); border-radius: var(--radius-panel); color: var(--c-foam); font-size: var(--fs-small); font-weight: 600; line-height: var(--lh-label); text-align: center; opacity: clamp(0, calc((var(--wo-draw) - var(--at)) * 12), 1); }
[dir="rtl"] .wo-label { --shift: 50%; }
.wo-label__sub { font-weight: 400; color: var(--c-mist); }
.wo-label--below { transform: translate(var(--shift), var(--gap)); }
.wo-label--above { transform: translate(var(--shift), calc(-100% - var(--gap))); }
.wo-label--key { box-shadow: 0 0 0 1px var(--c-droplet); }
.wo-label--side { inset-inline-start: calc(var(--x) * 1% + 3rem); transform: translateY(-50%); max-inline-size: 12.5rem; text-align: start; }
.wo-label--wells { transform: translate(var(--shift), calc(-100% - 2.6rem)); max-inline-size: 7.5rem; }
.wo-diagram__head { position: absolute; z-index: 3; inset-block-start: calc(var(--header-h-phone) + var(--space-4)); inset-inline: var(--gutter); display: grid; gap: var(--space-2); max-inline-size: 40rem; }
.wo-diagram__head p { font-size: var(--fs-small); color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) { .wo-diagram { --wo-draw: 1; } }
@media (max-aspect-ratio: 1/1) {
  .wo-frame--wide { display: none; }
  .wo-frame--tall { display: block; inline-size: min(100cqw, 100cqh * var(--ar)); }
  .wo-art { justify-items: start; padding-inline-start: max(var(--gutter), 8vw); }
}
@media (max-width: 599px) {
  .sv-hero__plate { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
}
@media (max-width: 767px) {
  .psh-panel { inset-block-end: calc(var(--stage-floor) + 3.5rem); }
  .ro-intro h1 { font-size: var(--fs-h2); }
  .wo-diagram .pinned__fig { inset-block-end: var(--stage-floor); }
}
@media (max-width: 1023px) {
  .pl-panel .link-arrow { display: none; }
  .wo-diagram .pinned__fig { inset-block: auto calc(var(--space-4) + 0.25rem); inset-inline: auto var(--gutter); }
}
@media (min-width: 768px) {
  .pl-parts__title { display: block; }
  .psh-rows--two { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
  .hw-cards__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .psh-hero { padding-block: calc(var(--header-h) + var(--space-8)) var(--space-8); }
  .psh-panel, .ro-intro { inset-block: 50% auto; transform: translateY(-50%); inset-inline: max(var(--gutter), calc((100vw - var(--content-max)) / 2)) auto; inline-size: min(30rem, 36vw); padding: var(--space-6); }
  .psh-panel { gap: var(--space-5); }
  .ro-intro { background: var(--surface-page); }
  .pl-top { grid-template-rows: auto auto; }
  .pl-top__stage { grid-area: 1 / 1 / 3 / 2; position: sticky; inset-block-start: 0; align-self: start; block-size: 100svh; min-block-size: 36rem; }
  .pl-top__intro, .pl-top__parts { position: relative; z-index: 1; padding: 0; pointer-events: none; }
  .pl-top__intro { grid-area: 1 / 1; display: grid; align-items: center; min-block-size: 100svh; padding-block: var(--header-h) var(--space-8); }
  .pl-top__parts { grid-area: 2 / 1; padding-block-end: var(--section-pad); }
  .pl-panel, .pl-parts { pointer-events: auto; inline-size: min(30rem, 32vw); margin-inline-start: max(var(--gutter), calc((100vw - var(--content-max)) / 2)); background: var(--surface-page); box-shadow: 0 0 2.5rem 1.25rem var(--surface-page); }
  .pl-top:has(.pl-top__plate.is-live) .hotspot__show { display: inline-grid; }
  .pl-top__fig { inset-inline: auto var(--gutter); }
  .pl-top__plate .scene-controls { inset-block: calc(var(--header-h) + var(--space-4)) auto; }
  .sv-hero, .sf-hero { grid-template-columns: 6fr 5fr; align-items: center; gap: var(--space-8); }
  .sv-routes__grid { grid-template-columns: repeat(3, 1fr); }
  .sf-hero__fig img { inline-size: min(100%, 28rem); }
  .wo-art { padding: calc(var(--header-h) + 8rem) var(--gutter) 6rem; }
  .wo-label { --gap: 3.9rem; font-size: var(--fs-body); }
  .wo-diagram__head { inset-block-start: calc(var(--header-h) + var(--space-7)); inset-inline-start: max(var(--gutter), calc((100vw - var(--content-max)) / 2)); }
}


.px-hero { padding-block: calc(var(--header-h-phone) + var(--space-5)) var(--space-6); }
.px-hero__grid { display: grid; gap: var(--space-4); justify-items: start; }
.px-hero__side { display: grid; gap: var(--space-5); justify-items: start; }
.px-hero .lead { max-inline-size: 30rem; }
.px-range { padding-block-start: var(--space-4); }
.px-range__head { display: flex; justify-content: flex-end; margin-block-end: var(--space-3); }
.px-note { margin-block-start: var(--space-6); font-size: var(--fs-small); color: var(--text-secondary); max-inline-size: 36rem; }
.px-ask { display: grid; gap: var(--space-2); align-content: center; justify-items: start; }
.px-ask__q { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; }
@media (min-width: 1024px) {
  .px-hero { padding-block: calc(var(--header-h) + var(--space-7)) var(--space-7); }
  .px-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-8); }
  .px-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .px-ask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-4); }
}

.pd-links { border-block-start: var(--border-hairline); }
.pd-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 3.5rem; padding-block: var(--space-3); border-block-end: var(--border-hairline); color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.3; text-decoration: none; }
.pd-links a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pd-links .icon { flex: none; color: var(--text-link); }

.pd-hero { padding-block: calc(var(--header-h-phone) + var(--space-5)) var(--space-7); }
.pd-hero__grid { display: grid; gap: var(--space-5); }
.pd-hero__text { display: grid; gap: var(--space-4); justify-items: start; }
.pd-hero h1 { max-inline-size: 15ch; }
:lang(ar) .pd-hero h1 { max-inline-size: 22ch; }
.pd-hero .lead { max-inline-size: 30rem; }
.pd-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-block-start: var(--space-1); }
.pd-hero__fig,
.pv__figure { margin: 0; display: grid; gap: var(--space-2); }
.pd-model,
.pv__plate { margin-inline: calc(-1 * var(--gutter)); }
.pd-model { aspect-ratio: 3 / 4; }
.pd-p6 { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--gutter); }
.pd-p6__cell { position: relative; container-type: size; display: grid; place-items: center; }
.pd-p6__cell > .pd-fig { inline-size: min(100cqw, 100cqh); }
.pd-p6__model { --pd-d: 350ms; }
@media (min-width: 768px) {
  .pd-model, .pv__plate { margin-inline: 0; border-radius: var(--radius-panel); }
  .pd-model { aspect-ratio: 3 / 2; }
  .pd-p6 { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
}
@media (min-width: 1024px) {
  .pd-hero { padding-block: calc(var(--header-h) + var(--space-9)) var(--space-8); }
  .pd-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: var(--space-8); }
  .pd-model { aspect-ratio: 16 / 10; }
}

.pd-fig { position: relative; aspect-ratio: 1 / 1; }
.pd-fig__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.pd-dwg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; color: var(--c-drop-deep); pointer-events: none; }
.pd-dwg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pd-dwg__draw path, .pd-dwg__aux path { stroke-dasharray: 1; }
.pd-dwg__aux, .pd-dwg__hidden { opacity: 0.85; }
.pd-dwg__axis { opacity: 0.5; }
.pd-dwg__axis path { stroke: var(--c-ink-soft); stroke-width: 1.1; stroke-dasharray: 14 4 2 4; }
.pd-dwg__hidden path { stroke-width: 1.3; stroke-dasharray: 5 4; }
.pd-intro .pd-dwg__draw { opacity: 0; }
.pd-ring { position: absolute; left: 50%; top: 76%; inline-size: 78%; block-size: 7%; border: 1.5px solid rgb(255 255 255 / 0.95); border-radius: 50%; transform: translate(-50%, -50%) scale(0.4); opacity: 0; pointer-events: none; }
@keyframes pd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pd-appear { from { opacity: 0; } }
@keyframes pd-hand-over { from { opacity: 1; } to { opacity: 0; } }
@keyframes pd-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  20% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}
.js.reveal-ready .pd-anim[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready:not([data-motion="paused"]) .pd-anim:not(.is-in) :is(.pd-dwg__draw, .pd-dwg__aux) path { stroke-dashoffset: 1; }
  .reveal-ready:not([data-motion="paused"]) .pd-anim:not(.is-in) :is(.pd-fig__img, .pd-dwg__axis, .pd-dwg__hidden) { opacity: 0; }
  .reveal-ready:not([data-motion="paused"]) .pd-anim:not(.is-in) .pd-intro .pd-dwg__draw { opacity: 1; }
  .reveal-ready:not([data-motion="paused"]) .pd-anim.is-in .pd-dwg__draw path { animation: pd-draw var(--dur-draw) var(--ease-in-out) var(--pd-d, 0ms) both; }
  .reveal-ready:not([data-motion="paused"]) .pd-anim.is-in .pd-dwg__aux path { animation: pd-draw var(--dur-draw) var(--ease-in-out) calc(var(--pd-d, 0ms) + 250ms) both; }
  .reveal-ready:not([data-motion="paused"]) .pd-anim.is-in :is(.pd-dwg__axis, .pd-dwg__hidden) { animation: pd-appear 500ms linear calc(var(--pd-d, 0ms) + 600ms) both; }
  .reveal-ready:not([data-motion="paused"]) .pd-anim.is-in .pd-intro .pd-fig__img { animation: pd-appear 800ms var(--ease-out) calc(var(--pd-d, 0ms) + 1000ms) both; }
  .reveal-ready:not([data-motion="paused"]) .pd-anim.is-in .pd-intro .pd-dwg__draw { animation: pd-hand-over 700ms linear calc(var(--pd-d, 0ms) + 1750ms) both; }
  .reveal-ready:not([data-motion="paused"]) .pd-anim.is-in .pd-ring { animation: pd-ring 2000ms cubic-bezier(0.15, 0.6, 0.3, 1) calc(var(--pd-d, 0ms) + 1750ms) both; }
}

.pv { display: grid; gap: var(--space-5); }
.pv__head { display: grid; gap: var(--space-3); max-inline-size: 36rem; }
.pv__head p { color: var(--text-secondary); }
.pv__plate { aspect-ratio: 1 / 1; }
.pv__plate--beads { aspect-ratio: 4 / 5; }
.pv__plate--beads .plate__poster { object-fit: contain; }
:root[data-tier="c"] .pv__plate--beads { aspect-ratio: 16 / 10; }
.pv__chips { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
@media (max-width: 1023px) {
  .section--band .pv__chips .chip:not([aria-pressed="true"]) { background: var(--surface-page); }
}
.pv__chips .chip__n { color: var(--c-foam); }
[data-surface="depth"] .pv__chips .chip__n { color: var(--c-deep); }
.pv__caps { min-block-size: 4.5rem; }
.pv-cap { display: none; }
.pv-cap--default { display: block; }
.pv-cap > p { margin-block-start: var(--space-2); color: var(--text-secondary); max-inline-size: 34rem; }
.pv__more { margin-block-start: var(--space-4); }
.pv-key__mineral { inline-size: 0.6rem; block-size: 0.6rem; border: 1.5px solid var(--c-salt); transform: rotate(45deg); }
.pv-key__sodium { inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--c-spray); }
.pv-key__bead { inline-size: 1rem; block-size: 1rem; border-radius: 50%; border: 1.5px solid var(--c-spray); }
.pd-beads:has(.plate.is-live) .pv-key { display: none; }
[dir="rtl"] .pv__plate--beads .plate__poster { transform: scaleX(-1); }
.pv__still { display: none; object-position: var(--pv-pos, 50% 50%); }
.pv__still--base { display: block; }
.pv:has(.pv__chips [aria-pressed="true"]) .pv-cap--default { display: none; }
.pv:has([data-hotspot-show="1"][aria-pressed="true"]) [data-n="1"],
.pv:has([data-hotspot-show="2"][aria-pressed="true"]) [data-n="2"],
.pv:has([data-hotspot-show="3"][aria-pressed="true"]) [data-n="3"],
.pv:has([data-hotspot-show="4"][aria-pressed="true"]) [data-n="4"],
.pv:has([data-hotspot-show="5"][aria-pressed="true"]) [data-n="5"],
.pv:has([data-hotspot-show="6"][aria-pressed="true"]) [data-n="6"],
.pv:has([data-hotspot-show="7"][aria-pressed="true"]) [data-n="7"],
.pv:has([data-hotspot-show="8"][aria-pressed="true"]) [data-n="8"] { display: block; }
.plate.is-live .pv__still:not(.pv__still--base) { display: none; }
@keyframes pv-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="paused"]) .pv__still:not(.pv__still--base),
  :root:not([data-motion="paused"]) .pv-cap:not(.pv-cap--default) { animation: pv-in var(--dur-ui) var(--ease-out) both; }
}
@media (min-width: 1024px) {
  .pv {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head fig" "chips fig" "caps fig";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-8);
    align-items: start;
  }
  .pv__head { grid-area: head; }
  .pv__figure { grid-area: fig; }
  .pv__chips { grid-area: chips; }
  .pv__caps { grid-area: caps; }
  .pv__plate { max-block-size: calc(100svh - var(--header-h) - 7rem); }
  .pv__plate--beads { aspect-ratio: 16 / 10; }
  .pv__chips { flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; overflow: visible; border-block-start: var(--border-hairline); }
  .pv__chips .chip { justify-content: flex-start; gap: 0.75rem; min-block-size: 3rem; padding-inline: var(--space-3); border: 0; border-block-end: var(--border-hairline); border-radius: 0; background: transparent; white-space: normal; text-align: start; }
  .pv__chips .chip:not([aria-pressed="true"]):hover { background: var(--surface-band); }
  .section--band .pv__chips .chip:not([aria-pressed="true"]):hover { background: var(--surface-page); }
  .pv__chips .chip[aria-pressed="true"] { background: var(--action-bg); }
}

.pd-faq__list { border-block-start: var(--border-hairline); }
.pd-faq .more { margin: 0; }
.pd-faq .more > summary { min-block-size: 3.5rem; }
.pd-faq .more__body { padding-block: 0; }
.pd-q { border-block-end: var(--border-hairline); }
.pd-q > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 3.5rem; padding-block: 0.75rem; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: 1.3; list-style: none; cursor: pointer; }
.pd-q > summary::-webkit-details-marker { display: none; }
.pd-q > summary::after { content: ""; flex: none; inline-size: 0.55rem; block-size: 0.55rem; margin-inline-end: 0.35rem; border-block-end: 1.5px solid var(--text-link); border-inline-end: 1.5px solid var(--text-link); transform: translateY(-25%) rotate(45deg); transition: transform var(--dur-ui) var(--ease-out); }
.pd-q[open] > summary::after { transform: translateY(20%) rotate(-135deg); }
[dir="rtl"] .pd-q > summary::after { transform: translateY(-25%) rotate(-45deg); }
[dir="rtl"] .pd-q[open] > summary::after { transform: translateY(20%) rotate(135deg); }
.pd-q > summary:hover { color: var(--text-link); }
.pd-q > div { display: grid; gap: var(--space-2); justify-items: start; padding-block-end: var(--space-5); color: var(--text-secondary); max-inline-size: 40rem; }
.pd-q a:not(.link-arrow) { font-weight: 500; }