/* Sahel website · Concept A v3 (plain facts; scroll-linked motion). Mobile first.
   overflow: clip (not hidden) on anything that holds moving parts: "hidden" makes a scroll container, which would capture the CSS view() timelines.
   Colours, fonts and type rules: brand/behance-page/specs/colour.md + type.md (read-only). */

/* ---------- fonts (self-hosted WOFF2 subsets, split by script) ---------- */
@font-face { font-family: "Rubik"; src: url(fonts/rubik.woff) format("woff"); font-weight: 300 900; font-display: swap; }


/* ---------- tokens ---------- */
:root {
  --linen: #EFE7DA;       /* SH-02 the ground */
  --linen-2: #E5DCCC;     /* framed-story panel (Linen ramp, toward Evergreen) */
  --linen-3: #D8CDBA;
  --ever: #002626;        /* SH-01 the brand */
  --ever-2: #0B3131;
  --teal: #0E4749;        /* SH-03 depth, used sparingly */
  --yes: #95C623;         /* SH-04 the small "yes": the booking pill, the progress line */
  --yes-hi: #C6D996;
  --film: #032A25;        /* the brand films' own ground, so the film edges disappear */
  --ink: var(--ever);
  --ink-2: rgb(0 38 38 / .74);
  --ink-3: rgb(0 38 38 / .56);   /* large text only: 3.6:1 on Linen */
  --paper: var(--linen);
  --paper-2: rgb(239 231 218 / .76);
  --paper-3: rgb(239 231 218 / .56);

  --m: 20px;              /* the one side margin (8vw on desktop) */
  --edge: 8px;            /* photos hang outside the text margin */
  --r: 16px;              /* card radius */
  --pad: 72px;            /* section padding (two steps: --pad, --pad-s) */
  --pad-s: 48px;
  --hdr: 64px;
  --dir: 1;               /* reading direction for sideways motion: 1 = left to right, -1 = right to left */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --display: "Rubik", "Noto Sans Arabic", system-ui, sans-serif;   /* Zaid 30 Oct: the brand typeface (kit 04-type), Arabic and English */
  --text: "Rubik", "Noto Sans Arabic", system-ui, sans-serif;
  color-scheme: light;
}
html[dir="rtl"] { --dir: -1; }
@media (min-width: 900px) {
  :root { --m: 8vw; --edge: 1.53vw; --r: 18px; --pad: 7.8vw; --pad-s: 5.2vw; --hdr: 76px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--linen); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
:lang(ar) body, html[lang="ar"] body { font-size: 18px; line-height: 1.7; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.wrap { padding-inline: var(--m); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 99; background: var(--ever); color: var(--linen); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--yes); outline-offset: 3px; border-radius: 4px; }
[data-theme="light"] :focus-visible, body:not(.menu-open) .hdr[data-ink="dark"] :focus-visible { outline-color: var(--ever); }
html { scroll-padding-top: var(--hdr); }
body.menu-open { overflow: hidden; }

/* ---------- type (Arabic leads; never letter-spaced; display line height >= 1.25 in Arabic) ---------- */
.d1, .d2, .h2, .h3, .h4, .h5 { font-family: var(--display); font-weight: 600; letter-spacing: 0; }
html[lang="en"] .d1, html[lang="en"] .d2, html[lang="en"] .h2, html[lang="en"] .h3, html[lang="en"] .h4 { text-transform: uppercase; }
.d1 { font-size: clamp(68px, 16.5vw, 184px); line-height: 1.28; }
.d2 { font-size: clamp(44px, 8vw, 116px); line-height: 1.3; }
.h2 { font-size: clamp(38px, 5.8vw, 86px); line-height: 1.3; }
.h3 { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.32; }
.h4 { font-size: clamp(22px, 2.5vw, 34px); line-height: 1.35; }
.h5 { font-size: 22px; line-height: 1.35; }
html[lang="en"] .d1 { font-size: clamp(58px, 14.6vw, 168px); line-height: .98; }
html[lang="en"] .d2 { font-size: clamp(40px, 7.4vw, 108px); line-height: 1; }
html[lang="en"] .h2 { font-size: clamp(36px, 5.4vw, 80px); line-height: 1; }
html[lang="en"] .h3 { font-size: clamp(26px, 3.3vw, 48px); line-height: 1.04; }
html[lang="en"] .h4 { font-size: clamp(20px, 2.3vw, 31px); line-height: 1.1; }
html[lang="en"] .h5 { font-size: 20px; line-height: 1.2; }
@media (max-width: 600px) {
  .d2 { font-size: 56px; } .h2 { font-size: 44px; } .h3 { font-size: 32px; }
  html[lang="en"] .d2 { font-size: 50px; } html[lang="en"] .h2 { font-size: 40px; } html[lang="en"] .h3 { font-size: 30px; }
}
.lead { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.6; }
html[lang="en"] .lead { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; }
.body { font-size: 18px; line-height: 1.7; max-width: 34em; }
html[lang="en"] .body { font-size: 16px; line-height: 1.55; max-width: 32em; }
@media (min-width: 900px) { .body { font-size: 19px; } html[lang="en"] .body { font-size: 17px; } }
.small { font-size: 15px; line-height: 1.6; }
html[lang="en"] .small { font-size: 14px; line-height: 1.45; }
.eyebrow { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.4; margin-block-end: 12px; font-variant-numeric: tabular-nums; }
html[lang="en"] .eyebrow { text-transform: uppercase; font-size: clamp(14px, 1.3vw, 19px); letter-spacing: .06em; }
.muted { color: var(--ink-2); }
[data-theme="dark"] .muted { color: var(--paper-2); }
.ln { display: block; }
.split .ln, .d2, .h3, .h4, .h5 { text-wrap: balance; }
.body, .lead, .small, .legal span { text-wrap: pretty; }
bdi, .ltr { unicode-bidi: isolate; direction: ltr; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .26em; margin-block: -.26em; }
html[lang="en"] .split .w { padding-block: .08em; margin-block: -.08em; }
.split .wi { display: inline-block; }

/* ---------- buttons: one pill shape; filled = the action here, outline = global ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 18px; border-radius: 999px; font-family: var(--text);
  font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
html[dir="rtl"] .pill { padding: 0 18px 0 8px; }
html[lang="en"] .pill { font-size: 14px; }
@media (min-width: 900px) { .pill { min-height: 40px; } }
.pill .soon { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: rgb(0 38 38 / .1); }
@media (min-width: 900px) { .pill .soon { min-height: 26px; } }
.pill--fill { background: var(--yes); color: var(--ever); }
.pill--fill .soon { background: rgb(0 38 38 / .12); }
.pill--fill:hover { background: var(--yes-hi); }
.pill--line { border: 1px solid currentColor; }
.pill--line .soon { color: inherit; background: rgb(127 127 127 / .2); }
.pill:active { transform: scale(.98); }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 6px; font-size: 13px; line-height: 1.3;
  border: 1px dashed rgb(0 38 38 / .45); color: var(--ink-2); }
.chip--dark { border-color: rgb(239 231 218 / .5); color: var(--paper-2); }
.tag { display: inline-block; padding: 4px 8px; border-radius: 5px; font-size: 12px; line-height: 1.3; font-family: var(--text);
  background: rgb(239 231 218 / .9); color: var(--ever); }
html[lang="en"] .tag { letter-spacing: .02em; }
.tag--solid { background: var(--linen); color: var(--ever); box-shadow: 0 0 0 1px rgb(0 38 38 / .14); }
html[lang="ar"] .tag, html[lang="ar"] .legal { font-size: 13px; line-height: 1.55; }
@media (min-width: 900px) { html[lang="ar"] .tag { font-size: 14px; } }

/* ---------- header: menu circle + language circle | logo centred | outline pill; a hairline shows how far you've read ---------- */
.hdr { position: fixed; inset-inline: 0; top: 0; z-index: 50; height: var(--hdr); padding-inline: var(--m); display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--linen); transition: transform .45s var(--ease), color .3s, background .3s; }
.hdr[data-ink="dark"] { color: var(--ever); }
.hdr.solid { background: rgb(239 231 218 / .96); }   /* no backdrop blur: it re-blurred the page under the header on every scroll frame */
.hdr.solid[data-ink="light"] { background: rgb(0 38 38 / .95); }
.hdr.hide { transform: translateY(-110%); }
.hdr:focus-within { transform: none; }
.hdr-side { display: flex; align-items: center; gap: 8px; }
.hdr-end { justify-content: flex-end; }
.hdr-prog { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--yes); transform-origin: left; transform: scaleX(0); pointer-events: none; }
html[dir="rtl"] .hdr-prog { transform-origin: right; }
.circ { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; background: transparent; display: inline-grid;
  place-content: center; text-decoration: none; cursor: pointer; padding: 0; font-size: 14px; font-weight: 500; }
.circ.lang { font-family: var(--text); }
html[lang="en"] .circ.lang { font-size: 17px; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease); }
.menu-btn span + span { margin-top: 5px; }
.menu-open .menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.hdr-logo { display: block; color: inherit; }
.logo-wide { display: none; height: 26px; width: auto; }
.logo-compact { height: 28px; width: auto; }
@media (min-width: 900px) { .logo-wide { display: block; height: 30px; } .logo-compact { display: none; } }
@media (max-width: 420px) { .hdr .pill { font-size: 13px; gap: 6px; } .hdr .pill .soon { padding: 0 7px; font-size: 11px; min-height: 26px; } .hdr-side { gap: 6px; } .circ { width: 40px; height: 40px; } }
@media (max-width: 370px) { .hdr .pill .soon { display: none; } }

/* menu */
.menu { position: fixed; inset: 0; z-index: 40; background: var(--ever); color: var(--linen); display: flex; flex-direction: column;
  justify-content: space-between; padding: calc(var(--hdr) + 40px) var(--m) calc(28px + env(safe-area-inset-bottom)); }
.menu[hidden] { display: none; }
.menu-nav { display: flex; flex-direction: column; gap: 6px; }
.menu-link { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 9vw, 88px); line-height: 1.3; text-decoration: none; }
html[lang="en"] .menu-link { text-transform: uppercase; line-height: 1.08; }
.menu-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-lang { font-size: 17px; }
button.menu-lang, button.util-lang { background: none; border: 0; padding: 10px 4px; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
button.util-lang { font-size: 15px; padding-block: 8px; }
.js .menu .menu-link { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .menu.open .menu-link { opacity: 1; transform: none; }
.menu.open .menu-link:nth-child(2) { transition-delay: .05s; } .menu.open .menu-link:nth-child(3) { transition-delay: .1s; }
.menu-open .hdr { color: var(--linen); background: transparent; }
.menu-open .hdr .pill, .menu-open .hdr-prog { visibility: hidden; }

/* ---------- photo placeholders: honest frames at the final shot's shape (photos come from the Brand Kit session) ---------- */
.ph { position: relative; overflow: hidden; overflow: clip; aspect-ratio: var(--ar); border-radius: var(--r); background: #3b3a31; isolation: isolate; color: var(--linen); }
.ph-art, .ph-art i { position: absolute; inset: 0; }
.ph-art { background: var(--ph-bg); }
.ph-art::after { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ph-c { position: absolute; inset: 14px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(currentColor, currentColor) top left / 18px 1px no-repeat, linear-gradient(currentColor, currentColor) top left / 1px 18px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 18px 1px no-repeat, linear-gradient(currentColor, currentColor) top right / 1px 18px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 18px 1px no-repeat, linear-gradient(currentColor, currentColor) bottom left / 1px 18px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 18px 1px no-repeat, linear-gradient(currentColor, currentColor) bottom right / 1px 18px no-repeat;
  opacity: .5; }
.ph figcaption { position: absolute; inset-inline: 22px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 2; }
.ph--bleed { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.ph--bleed figcaption { top: calc(var(--hdr) + 14px); bottom: auto; }
/* each planned shot gets its own light, drawn (not a photo) */
.ph--hero { --ph-bg: linear-gradient(180deg, rgb(0 0 0 / .0) 55%, rgb(0 20 20 / .55)), linear-gradient(100deg, #182621 0%, #22302a 52%, #2d2a21 100%); }
.ph--hero .ph-l1 { inset-inline-start: auto; inset-inline-end: 27%; width: 2px; background: linear-gradient(180deg, rgb(255 233 196 / 0), rgb(255 233 196 / .95) 30%, rgb(255 233 196 / .8) 78%, rgb(255 233 196 / 0));
  box-shadow: 0 0 22px 6px rgb(255 214 150 / .28); }
.ph--hero .ph-l2 { background: radial-gradient(34% 16% at 74% 80%, rgb(255 222 170 / .16), transparent 72%); }
html[dir="rtl"] .ph--hero .ph-l2 { background: radial-gradient(34% 16% at 26% 80%, rgb(255 222 170 / .16), transparent 72%); }
.ph--marble { --ph-bg: linear-gradient(135deg, #e9e3d8 0%, #d9d1c3 45%, #c9bfae 100%); color: var(--ever); }
.ph--marble .ph-l1 { background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .55) 46%, transparent 62%); }
.ph--room { --ph-bg: linear-gradient(180deg, rgb(0 20 20 / .1), rgb(0 20 20 / .5)), linear-gradient(160deg, #0f2a27 0%, #2f3a30 52%, #7d6a4c 100%); }
.ph--room .ph-l1 { inset-inline-start: 14%; width: 16%; inset-inline-end: auto; top: 10%; bottom: 34%; background: linear-gradient(180deg, rgb(255 220 160 / .3), rgb(255 220 160 / .08)); filter: blur(2px); }
.ph--room .ph-l2 { inset-inline-start: 34%; width: 16%; inset-inline-end: auto; top: 10%; bottom: 34%; background: linear-gradient(180deg, rgb(255 220 160 / .26), rgb(255 220 160 / .06)); filter: blur(2px); }
.ph--sofa { --ph-bg: linear-gradient(180deg, #e7ddcc 0%, #ded2bd 60%, #cbbfa9 100%); color: var(--ever); }
.ph--sofa .ph-l1 { top: 42%; bottom: 26%; inset-inline-start: 16%; inset-inline-end: 16%; border-radius: 18px 18px 8px 8px; background: linear-gradient(180deg, #0e4749, #0b3131); opacity: .85; }
.ph--car { --ph-bg: linear-gradient(180deg, #23221e 0%, #2f2c26 48%, #d9cdb6 49%, #c8b99c 100%); }
.ph--car .ph-l1 { top: 30%; height: 18%; inset-inline-start: 18%; inset-inline-end: 18%; border-radius: 40% 40% 12px 12px; background: linear-gradient(180deg, #3a3832, #191815); opacity: .9; }

/* ---------- 01 hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--linen); background: var(--ever); overflow: hidden; overflow: clip; }
.hero-in { position: relative; z-index: 2; width: 100%; padding-bottom: calc(36px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; }
.hero .d1 { order: 1; margin-block-end: 10px; font-size: clamp(44px, 12vw, 168px); }
html[lang="en"] .hero .d1 { font-size: clamp(32px, 9.6vw, 150px); }   /* the longer English line (Zaid 30 Oct) */
.ghost { order: 0; font-family: var(--display); font-weight: 600; font-size: clamp(60px, 24vw, 150px); line-height: 1.3; color: rgb(239 231 218 / .16); margin-block: 0 -.34em; white-space: nowrap; }
html[lang="en"] .ghost { text-transform: uppercase; line-height: 1; margin-block: 0 -.06em; }
.hero-p { order: 2; max-width: 24em; margin-block-end: 24px; color: var(--paper-2); }
.hero .pill { order: 3; }
@media (min-width: 900px) {
  .hero-in { padding-bottom: 68px; }
  .hero .d1 { margin: 0; font-size: clamp(60px, 9.6vw, 168px); }
  html[lang="en"] .hero .d1 { font-size: clamp(48px, 6.4vw, 112px); }
  .hero .d1 .ln { white-space: nowrap; }
  .ghost { font-size: clamp(80px, 14vw, 230px); margin-block-end: -.42em; }
  html[lang="en"] .ghost { margin-block-end: -.1em; }
  .hero-p { margin: 22px 0 22px; }
}

/* ---------- 02 the die cut (Zaid 29 Oct, the brand kit's Die-Cut rebuilt on the v5 logo): the page is the board, so the section
   keeps its Linen ground. A small Yellow Green knife cuts the Hanger out in one pass, the piece lifts free with a soft shadow,
   settles into the signature and turns Evergreen, then سهل and Sahel arrive. At rest (and with reduced motion): the finished signature. ---------- */
.hang { position: relative; min-height: 86svh; display: grid; place-items: center; overflow: hidden; overflow: clip; padding-block: var(--pad-s); }
.dc-wrap { width: min(92vw, 680px); }
.dc { display: block; width: 100%; height: auto; overflow: visible; }
.dc-paper { fill: var(--linen); }
.dc-ink, .dc-name { fill: var(--ever); }
.dc-shadow path { fill: #002020; }
.dc-cut { fill: none; stroke: var(--ever); stroke-width: 2.03; stroke-linejoin: round; }
.dc-knife .tip { fill: var(--yes); }
.dc-knife .halo { fill: var(--yes); opacity: .28; }
.dc-cut, .dc-knife, .dc-shadow { opacity: 0; }
@media (min-width: 900px) { .hang { min-height: 100vh; } }

/* ---------- 03 services in the framed panels ---------- */
.story { padding: 6px; display: grid; gap: 6px; background: var(--linen-3); }
.frame { background: var(--linen-3); }
.panel { background: var(--linen); min-height: 88svh; padding: 64px var(--m) 40px; display: flex; flex-direction: column; gap: 28px; transform-origin: 50% 100%; }
.panel--open { justify-content: center; align-items: flex-start; min-height: 64svh; }
.panel--soon { min-height: 56svh; }
.panel-txt--solo { margin-block: auto; }
.panel--open .ln { display: block; }
.panel-txt .h3 { margin-block-end: 14px; max-width: 12em; }
.panel-txt .body { color: var(--ink-2); }
.panel-txt .body + .body { margin-top: .6em; }
.panel-txt .chip { margin-top: 18px; }
.panel-media { margin-top: auto; align-self: center; width: 100%; max-width: 420px; }
.types { display: grid; gap: 6px; margin-block: 10px 16px; }
.types li { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.4; }
html[lang="en"] .types li { font-size: 18px; }
.types li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yes); flex: none; box-shadow: 0 0 0 3px rgb(149 198 35 / .22); }
/* the four services as Sahel door-hanger tags (Zaid 30 Oct; the brand kit's tag: the hanger's outline, no hole), hanging from a rail on
   threads. They drop in one after another and swing to rest; tap or hover lights the tag lime ("make up the room") and goes to the card. */
.panel--open { gap: 32px; }
.svc-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; width: 100%; max-width: 520px; padding-top: 34px; border-top: 2px solid rgb(0 38 38 / .18); }
.svc-btn { position: relative; display: block; text-decoration: none; transform-origin: 50% -34px; -webkit-tap-highlight-color: transparent; }
.svc-btn::before { content: ""; position: absolute; left: 50%; top: -34px; width: 1.5px; height: 34px; margin-left: -.75px; background: rgb(0 38 38 / .45); }   /* the thread */
.svc-tag { display: grid; align-content: end; justify-items: start; gap: 14px; aspect-ratio: 200 / 320; padding: 22% 13% 14%; background: var(--ever); color: var(--linen);
  font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.3; transition: background-color .35s var(--ease), color .35s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320' preserveAspectRatio='none'%3E%3Cpath d='M14 0 L100 0 A100 100 0 0 1 200 100 L200 306 A14 14 0 0 1 186 320 L14 320 A14 14 0 0 1 0 306 L0 14 A14 14 0 0 1 14 0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320' preserveAspectRatio='none'%3E%3Cpath d='M14 0 L100 0 A100 100 0 0 1 200 100 L200 306 A14 14 0 0 1 186 320 L14 320 A14 14 0 0 1 0 306 L0 14 A14 14 0 0 1 14 0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html[lang="en"] .svc-tag { font-size: 16px; text-transform: uppercase; line-height: 1.15; }
.svc-ic { width: 42px; height: 42px; }
.svc-tag [stroke="#002626"] { stroke: var(--linen); transition: stroke .35s var(--ease); }
.svc-btn:hover .svc-tag, .svc-btn:focus-visible .svc-tag { background: var(--yes); color: var(--ever); }
.svc-btn:hover .svc-tag [stroke="#002626"], .svc-btn:focus-visible .svc-tag [stroke="#002626"] { stroke: var(--ever); }
.svc-btn:focus-visible { outline: none; } .svc-btn:focus-visible::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--yes); border-radius: 18px; }
@media (min-width: 900px) { .svc-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; gap: 34px 26px; } .svc-tag { font-size: 22px; } .svc-ic { width: 50px; height: 50px; } }
/* car cleaning: three tiers, name then what it is */
.tiers { display: grid; gap: 14px; margin-block: 12px 16px; }
.tiers li { display: grid; gap: 2px; padding-inline-start: 19px; position: relative; }
.tiers li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--yes); box-shadow: 0 0 0 3px rgb(149 198 35 / .22); }
.tiers b { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.35; }
html[lang="en"] .tiers b { font-size: 19px; }
.tiers span { color: var(--ink-2); font-size: 17px; line-height: 1.55; }
html[lang="en"] .tiers span { font-size: 15.5px; }
/* coming soon: four quiet pills */
.soon-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.soon-list li { padding: 9px 16px; border-radius: 999px; border: 1px dashed rgb(0 38 38 / .4); color: var(--ink-2); font-size: 16px; }
@media (min-width: 900px) {
  .story { padding: 9px; gap: 9px; }
  .panel { min-height: 100vh; padding: 9vh var(--m); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; }
  .panel--open, .panel--soon { display: flex; min-height: 70vh; }
  .panel-media { margin: 0; justify-self: center; max-width: 440px; }
}

/* ---------- 04 film pause (pinned; the film follows the scroll) ---------- */
.pause { background: var(--film); }
.pause .pin-stage { display: grid; place-items: center; overflow: hidden; overflow: clip; }
.seq-box { position: relative; aspect-ratio: 16/9; width: 100%; }
.seq-box > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq-poster { object-fit: cover; }
.pause .seq-box { width: 140%; max-width: none; }
@media (min-width: 900px) { .pause .seq-box { width: max(100vw, 177.8vh); } }

/* ---------- 05 the team ---------- */
.truth { background: var(--ever); color: var(--linen); min-height: 90svh; display: grid; place-items: center; text-align: center; padding-block: var(--pad); }
.truth-in { display: grid; justify-items: center; gap: 28px; }
.truth .d2 { max-width: 15em; font-size: clamp(36px, 6.4vw, 100px); }
html[lang="en"] .truth .d2 { font-size: clamp(32px, 5.6vw, 88px); }
.truth-p { color: var(--paper-2); max-width: 26em; }

/* ---------- 06 pictures in the logo's shape ---------- */
.shapes { background: var(--ever); color: var(--linen); padding-block: 0 var(--pad); overflow: hidden; overflow: clip; }
.shapes-in { display: grid; gap: 56px; justify-items: center; }
.mask { width: min(70vw, 300px); display: grid; justify-items: center; gap: 12px; transform-origin: 50% 24%; will-change: transform; }
.mask-in { width: 100%; aspect-ratio: 200/320; filter: drop-shadow(0 24px 40px rgb(0 0 0 / .35)); }
.mask-in > img, .mask-in > .ph { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
.mask-in > img { object-position: 50% 0; }
.mask--face .mask-in > img { transform: scale(1.4); transform-origin: 50% 0; }   /* portraits (Zaid 30 Oct, "who's coming"): the face sits below the hanger's hole */   /* team photos (Higgsfield, 30 Oct): faces and hands clear of the frame's hole */
.mask-in { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320' preserveAspectRatio='none'%3E%3Cpath d='M0 81.39 L0 306 A14 14 0 0 0 14 320 L186 320 A14 14 0 0 0 200 306 L200 100 A100 100 0 0 0 100 0 L14 0 A14 14 0 0 0 0 14 L0 49.46 A5 5 0 0 0 3.29 54.16 L68.97 78.06 A38 38 0 1 1 62.13 96.86 L6.71 76.69 A5 5 0 0 0 0 81.39 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320' preserveAspectRatio='none'%3E%3Cpath d='M0 81.39 L0 306 A14 14 0 0 0 14 320 L186 320 A14 14 0 0 0 200 306 L200 100 A100 100 0 0 0 100 0 L14 0 A14 14 0 0 0 0 14 L0 49.46 A5 5 0 0 0 3.29 54.16 L68.97 78.06 A38 38 0 1 1 62.13 96.86 L6.71 76.69 A5 5 0 0 0 0 81.39 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask .ph figcaption { inset-inline: 12%; bottom: 9%; }
.mask .ph .ph-c { display: none; }
@media (min-width: 900px) {
  .shapes-in { grid-template-columns: repeat(3, 1fr); gap: 3vw; align-items: start; padding-block-start: 4vw; }
  .mask { width: 100%; max-width: 340px; }
  .mask:nth-child(2) { margin-top: 9vw; }
}

/* ---------- pinned sequences (the film pause and booking) ---------- */
.pin-stage { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .js .pin { height: calc(var(--n) * 80svh + 100svh); scroll-margin-top: calc(var(--hdr) * -1); }
  .js .pause.pin { height: 190svh; }
  .js .pin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip; }
  .js .how .rail { display: flex; }
}
.rail { display: none; position: absolute; inset-inline-start: 8px; bottom: 20px; flex-direction: column; gap: 8px; z-index: 3; }
.rail i { display: block; width: 3px; height: 16px; border-radius: 3px; background: currentColor; opacity: .3; position: relative; overflow: hidden; }
.rail i.on { height: 64px; opacity: 1; background: rgb(0 38 38 / .2); }
.rail i.on::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: top; transform: scaleY(var(--f, 0)); }
@media (min-width: 900px) { .rail { inset-inline-start: 20px; } .rail i { width: 4px; } .rail i.on { height: 75px; } }

/* ---------- 07 booking ---------- */
.how { background: var(--linen); }
.how-in { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding-block: calc(var(--hdr) + 8px) 28px; }
.how-h { line-height: 1.3; }
html[lang="en"] .how-h { line-height: 1; }
.how-h .ln { display: inline; }
.how-h .ln + .ln::before { content: " "; }
.how-p { margin-top: 6px; }
.how-vis { position: relative; display: grid; place-items: center; min-height: 0; }
.vis { display: grid; justify-items: center; gap: 14px; }
@media (prefers-reduced-motion: no-preference) { .js .vis { grid-area: 1 / 1; will-change: transform, opacity; } }   /* stacked only while pinned */
.app-icon { width: min(40vw, 176px); height: auto; border-radius: 23%; }   /* no shadow under the icon (Zaid 30 Oct: it looked odd) */
.slots { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; }
.slots li { --on: clamp(0, var(--g1, 1) * 19 - var(--k), 1); min-width: 66px; text-align: center; padding: 9px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 500; background: #fff; color: var(--ever); box-shadow: 0 0 0 1px rgb(0 38 38 / .1);
  opacity: calc(.18 + .82 * var(--on)); transform: scale(calc(.86 + .14 * var(--on))); }
.slots li:first-child, .slots li:last-child { background: var(--ever); color: var(--linen); }
.days { display: grid; grid-template-columns: repeat(7, auto); gap: 6px; }
.days li { --on: clamp(0, var(--g2, 1) * 8 - var(--k), 1); display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 42px; min-height: 76px; padding: 8px 4px;
  border-radius: 999px; background: var(--ever); color: var(--linen); font-size: 13px; line-height: 1.3; writing-mode: horizontal-tb;
  opacity: calc(.18 + .82 * var(--on)); transform: translate3d(0, calc((1 - var(--on)) * 14px), 0); }
html[lang="en"] .days li { font-size: 13px; min-width: 40px; }
.days li.off { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgb(0 38 38 / .3); }
.days li.off span { text-decoration: line-through; }
.days li small { font-size: 11px; }
@media (max-width: 600px) { .days { grid-template-columns: repeat(4, auto); gap: 8px; } .days li { min-height: 0; min-width: 72px; padding: 10px 12px; font-size: 14px; } .days li small { font-size: 11px; } }
.how-steps { display: grid; }
@media (prefers-reduced-motion: no-preference) { .js .how-steps li { grid-area: 1 / 1; will-change: transform, opacity; } }
html:not(.js) .how-in, html:not(.js) .how-vis, html:not(.js) .how-steps { gap: 36px; }
.how-steps .no { font-size: 14px; color: var(--ink-2); display: block; margin-block-end: 4px; font-variant-numeric: tabular-nums; }
.how-steps .h3 { font-size: clamp(26px, 3vw, 44px); }
html[lang="en"] .how-steps .h3 { font-size: clamp(24px, 2.8vw, 40px); }
.how-steps .body { color: var(--ink-2); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .how-in { grid-template-rows: auto; padding-block: var(--pad); gap: 36px; }
  .how-vis, .how-steps { display: grid; gap: 36px; }
  .vis, .how-steps li { grid-area: auto; }
}
@media (min-width: 900px) {
  html[dir="rtl"] .how-steps { text-align: start; }
  .how-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; gap: 4vw; padding-block: 0; }
  .how-h { font-size: clamp(38px, 4.2vw, 72px); }
  html[lang="en"] .how-h { font-size: clamp(32px, 3.4vw, 60px); }
  .how-h .ln { display: block; }
  .how-h .ln + .ln::before { content: none; }
  .how-steps { text-align: end; justify-items: end; }
  .how-steps .body { margin-inline-start: auto; }
  .slots li { min-width: 76px; font-size: 16px; padding: 11px 12px; }
  .days li { min-width: 50px; min-height: 92px; font-size: 14px; }
  .app-icon { width: 200px; }
}

/* ---------- 08 the logo film ---------- */
.name { padding-block: var(--pad); }
.film { display: grid; gap: 10px; }
.film .seq-box { border-radius: var(--r); overflow: hidden; overflow: clip; background: var(--film); }
@media (min-width: 900px) { .name .wrap { padding-inline: calc(var(--m) * 1.6); } }

/* ---------- 09 footer = the last hero ---------- */
.end { position: relative; min-height: 100svh; color: var(--linen); background: var(--ever); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; overflow: clip; }
.end .ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 38 38 / .35), rgb(0 38 38 / .7)); }
.end-in { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding-top: calc(var(--hdr) + 40px); }
.end-mark { display: grid; justify-items: center; gap: 30px; }
.end-logo { width: min(74vw, 520px); height: auto; color: var(--linen); will-change: transform, opacity; }
.util { position: relative; z-index: 2; display: grid; gap: 14px; padding-block: 22px; border-top: 1px solid rgb(239 231 218 / .22); justify-items: start; }
.util-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; align-items: center; }
.util-nav a { text-decoration: none; padding-block: 8px; }
.util-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legal { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12px; line-height: 1.6;
  color: var(--paper-2); padding-block: 0 calc(20px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .util { grid-template-columns: 1fr auto; align-items: center; }
}

/* =====================================================================================================
   SCROLL-LINKED MOTION. Every move is a function of where the page is: scroll down and it plays forward,
   scroll up and it plays back, stop and it stops. Nothing runs on a timer and nothing loops.
   --p is each .sd element's view progress: 0 = its top just entering at the bottom, 1 = its bottom gone off the top.
   Every piece is designed so that --p = .5 is its finished, resting state (that is what "reduce motion" shows).
   Where the browser has CSS scroll-driven animations, CSS moves --p itself; elsewhere site.js sets it (rAF, read then write).
   ===================================================================================================== */
@property --p { syntax: "<number>"; inherits: true; initial-value: .5; }
@keyframes sd-p { from { --p: 0; } to { --p: 1; } }
@keyframes sd-pg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .sda .sd, .sda [data-reveal] { animation: sd-p linear both; animation-timeline: view(block 0px); }   /* 0px: ignore scroll-padding, like site.js */
  .sda .hdr-prog { animation: sd-pg linear both; animation-timeline: scroll(root block); }
  @supports (animation-timeline: scroll()) { .js .hdr-prog { animation: sd-pg linear both; animation-timeline: scroll(root block); } }   /* site.js then leaves it alone */

  /* words rise through their masks, one after another */
  .js .split.sd:not(.ink) .wi { --t: clamp(0, (var(--p) - .03) / .27, 1); --q: clamp(0, var(--t) * (var(--n) + 2) - var(--i), 2);
    transform: translate(0, calc((1 - var(--q) / 2) * 108%)); opacity: calc(.3 + var(--q) * .35); }
  /* lines and labels fade up */
  .js [data-reveal] { --t: clamp(0, (var(--p) - .02) / .22, 1); opacity: var(--t); transform: translate(0, calc((1 - var(--t)) * 22px)); }

  /* 01 hero: leaving it zooms the frame, the lines drift apart, Amman slides away in the reading direction */
  .js .hero { --e: clamp(0, (var(--p) - .5) * 2.2, 1); }
  .js .hero .ph-art { transform: translate(0, calc(var(--e) * 10%)) scale(calc(1.02 + var(--e) * .16)); }
  .js .hero .ph-c { transform: scale(calc(1 - var(--e) * .06)); opacity: calc(.5 - var(--e) * .5); }
  .js .hero .d1 .ln { transform: translate(0, calc(var(--e) * (3 - var(--l)) * -7vh)); }   /* the first line leads, so the lines part */
  .js .hero .ghost { transform: translate(calc(var(--e) * var(--dir) * 26vw), 0); }
  .js .hero-p, .js .hero .pill { opacity: calc(1 - var(--e) * 1.8); transform: translate(0, calc(var(--e) * -4vh)); }

  /* 02 the die cut: its animations wait at their first frame; site.js plays them once the drawing reaches its point and plays
     them backwards when you scroll back above it (the clock and the knife's path: die_cut_css in build.py) */
  .js .dc-card { transform-box: view-box; transform-origin: 0 0; }
  .js .dc-card { animation: dc-card 2.2s linear .1s both paused; }
  .js .dc-cut { animation: dc-cut 2.2s linear .1s both paused; }
  .js .dc-knife { animation: dc-knife 2.2s linear .1s both paused; }
  .js .dc-shadow { animation: dc-shadow 2.2s linear .1s both paused; }
  .js .dc-ink { animation: dc-ink 2.2s linear .1s both paused; }
  .js .dc-ar { animation: dc-ar 2.2s linear .1s both paused; }
  .js .dc-en { animation: dc-en 2.2s linear .1s both paused; }
  .js .dc-static :is(.dc-card, .dc-cut, .dc-knife, .dc-shadow, .dc-ink, .dc-ar, .dc-en) { animation: none; }   /* a browser that can't steer them: the signature */
  @keyframes dc-shadow {   /* the lift's soft shadow: in with the lift, out as the card settles */
    0%, 40% { opacity: 0; transform: translate(0, 0); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    50.5% { opacity: .34; transform: translate(0, 14px); }
    51.5% { opacity: .34; transform: translate(0, 14px); animation-timing-function: cubic-bezier(.42, 0, .25, 1); }
    78.1818%, 100% { opacity: 0; transform: translate(0, 14px); }
  }
  @keyframes dc-ink {   /* the cut piece (Linen, like the page) turns Evergreen while it settles */
    0%, 52% { opacity: 0; animation-timing-function: cubic-bezier(.42, 0, .25, 1); }
    60%, 100% { opacity: 1; }   /* quick, so the in-between grey hardly shows */
  }
  @keyframes dc-ar { 0%, 59.0909% { opacity: 0; transform: translateX(16px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 87%, 100% { opacity: 1; transform: none; } }
  @keyframes dc-en { 0%, 67.2727% { opacity: 0; transform: translateX(16px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 96%, 100% { opacity: 1; transform: none; } }

  /* 03 each frame opens like a window as it arrives; the picture inside drifts slower than the page */
  .js .frame.sd > .panel { --o: clamp(0, var(--p) / .3, 1); transform: scale(calc(.92 + .08 * var(--o))); }
  .js .ph.sd { --o: clamp(0, (var(--p) - .02) / .3, 1); transform: translate(0, calc((1 - var(--o)) * 48px)); }
  .js .ph.sd .ph-art { transform: translate(0, calc((var(--p) - .5) * -16%)) scale(1.2); }
  .js .ph.sd .ph-c { transform: scale(calc(.82 + .18 * var(--o))); }
  .js .types.sd li, .js .tiers.sd li, .js .soon-list.sd li { --t: clamp(0, (var(--p) - .03) / .25, 1); --q: clamp(0, var(--t) * 6 - var(--k), 1);
    opacity: calc(.12 + .88 * var(--q)); transform: translate(calc((1 - var(--q)) * -22px * var(--dir)), 0); }

  /* the four service buttons rise one after another */
  .js .svc-btns.sd:not(.is-in) .svc-btn { opacity: 0; transform: translateY(-48px); }
  .js .svc-btns.sd.is-in .svc-btn { animation: tag-drop 1.6s cubic-bezier(.3, .1, .3, 1) calc(.25s + var(--k) * .16s) both; }
  .svc-btn:hover .svc-tag { transform-origin: 50% 0; animation: tag-nudge .9s ease-out; }
  @keyframes tag-drop { 0% { opacity: 0; transform: translateY(-48px) rotate(0); } 30% { opacity: 1; } 45% { transform: translateY(0) rotate(7deg); }
    60% { transform: rotate(-4.5deg); } 74% { transform: rotate(2.4deg); } 87% { transform: rotate(-1deg); } 100% { opacity: 1; transform: none; } }
  @keyframes tag-nudge { 30% { transform: rotate(4deg); } 60% { transform: rotate(-2.5deg); } 85% { transform: rotate(1deg); } 100% { transform: none; } }

  /* 05 the sentence lights word by word as you read it */
  .js .split.ink .wi { --t: clamp(0, (var(--p) - .1) / .34, 1); --q: clamp(0, var(--t) * (var(--n) + 1) - var(--i), 1); opacity: calc(.18 + .82 * var(--q)); }

  /* 06 each picture in the logo's shape comes down and settles like the hanger */
  .js .mask.sd { --d: clamp(0, (var(--p) - .03 - var(--k) * .035) / .36, 1); --u: calc(1 - var(--d));
    transform: translate3d(0, calc(var(--u) * var(--u) * var(--fall, -16vh)), 0) rotate(calc(sin(var(--d) * 7.4) * var(--u) * var(--sw))); opacity: calc(var(--d) * 3); }
  @media (min-width: 900px) { .js .mask.sd { --fall: -30vh; } }

  /* 08 the logo film card rises a little */

  /* 09 the footer: the photo drifts, the logo rises into place, then the pill */
  .js .end { --t: clamp(0, (var(--p) - .04) / .34, 1); --e: calc(1 - (1 - var(--t)) * (1 - var(--t)) * (1 - var(--t))); }
  .js .end .ph-art { transform: translate(0, calc((var(--p) - .5) * -14%)) scale(1.16); }
  .js .end-logo { transform: translate(0, calc((1 - var(--e)) * 22vh)) scale(calc(.84 + .16 * var(--e))); opacity: var(--e); }
  .js .end .end-pill { opacity: clamp(0, var(--t) * 2 - .9, 1); transform: translate(0, calc((1 - var(--e)) * 40px)); }
}

/* ---------- reduced motion: everything in its final state, nothing pinned ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sd, [data-reveal] { --p: .5 !important; animation: none !important; }
  .hdr, .hdr-prog { transition: none; }
  .hdr-prog { display: none; }
  .pause .seq-box { width: 100%; }
}

/* ---------- English on a phone: the wider capitals need a little more room ---------- */
@media (max-width: 600px) {
  html[lang="en"] .ghost { font-size: 18.5vw; }
}
@media (max-width: 420px) {
  html[lang="en"] .hdr .pill { font-size: 12.5px; gap: 5px; padding-inline: 12px 6px; }
  html[lang="en"] .hdr .pill .soon { padding: 0 6px; }
}

/* ---------- small screens, reduce motion, no script ---------- */
@media (max-width: 360px) { .days { gap: 6px; } .days li { min-width: 0; padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .js .menu .menu-link { transform: none; opacity: 1; transition: none; }
  .menu-btn span { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) { .how-in { padding-block: var(--pad); } }

/* ---------- phone header: the sides take what they need, the logo centres in what is left (never touching the button) ---------- */
@media (max-width: 600px) {
  .hdr { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; }
  .hdr-logo { justify-self: center; }
}

/* =====================================================================================================
   THE REAL SITE (production build): quiet photo frames, the company footer, and the legal / help pages
   ===================================================================================================== */
.ph--quiet .ph-c, .ph--quiet figcaption { display: none; }
.util-legal { font-size: 14px; opacity: .9; }
.company { position: relative; z-index: 2; display: grid; gap: 4px; padding-block: 0 calc(22px + env(safe-area-inset-bottom)); font-size: 13px; line-height: 1.7; color: var(--paper-2); }
.company p { margin: 0; }
.company a { color: inherit; text-underline-offset: 3px; }
html[lang="ar"] .company { font-size: 14px; }
@media (min-width: 900px) { .util:has(.util-legal) { grid-template-columns: 1fr auto; } }

/* legal and help pages: quiet, readable, the brand's type and colours */
.docpage { background: var(--linen); }
.dhdr { display: flex; align-items: center; justify-content: space-between; min-height: var(--hdr); color: var(--ever); border-bottom: 1px solid rgb(0 38 38 / .12); }
.dhdr .logo-compact, .dhdr .logo-wide { color: var(--ever); }
.dlang { font-size: 15px; text-underline-offset: 4px; }
.doc { max-width: calc(46rem + 2 * var(--m)); margin-inline: auto; padding-block: 44px 72px; display: grid; gap: 14px; }
.doc h1 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 5vw, 56px); line-height: 1.25; text-wrap: balance; }
html[lang="en"] .doc h1 { line-height: 1.05; }
.doc-lead { font-size: 19px; line-height: 1.7; color: var(--ink-2); }
html[lang="en"] .doc-lead { font-size: 17px; line-height: 1.55; }
.doc-date { font-size: 14px; color: var(--ink-2); }
.doc-review { padding: 12px 16px; border-radius: 12px; background: #fff4c2; color: #4a3b00; font-size: 15px; border: 1px solid #e6cf6a; }
.doc section { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid rgb(0 38 38 / .12); margin-top: 8px; }
.doc h2 { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.4; }
html[lang="en"] .doc h2 { font-size: 20px; line-height: 1.25; }
.doc p, .doc li { font-size: 17px; line-height: 1.8; max-width: 44em; }
html[lang="en"] .doc p, html[lang="en"] .doc li { font-size: 16px; line-height: 1.6; }
.doc ul, .doc ol { padding-inline-start: 1.3em; display: grid; gap: 6px; }
.doc ul { list-style: disc; } .doc ol { list-style: decimal; }
.doc ul li::marker { color: var(--yes); }
.doc a { color: var(--ever); text-underline-offset: 3px; }
.doc-note { padding: 12px 16px; border-radius: 12px; background: var(--linen-2); }
.dfoot { background: var(--ever); color: var(--linen); padding-top: 8px; }
.dfoot .util { border-top: 0; }
/* 404 */
.nfpage { background: var(--ever); color: var(--linen); min-height: 100svh; display: grid; place-items: center; }
.nf { display: grid; gap: 28px; justify-items: start; padding-block: 48px; }
.nf-logo { width: min(60vw, 280px); height: auto; color: var(--linen); }
.nf h1 { font-family: var(--display); font-weight: 600; font-size: 28px; }
.nf a { color: var(--yes); }

/* ---------- ambient backgrounds (site.js adds .amb layers): hanger wall (hero), floating hangers (team + logo-shape run), icons drawing (coming soon) ---------- */
.amb { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .live-run, .panel--soon, .name, .end { position: relative; isolation: isolate; }
  .live-run > :not(.amb), .panel--soon > :not(.amb), .name > :not(.amb), .end > :not(.amb) { position: relative; z-index: 1; }
  .live-run > :not(.amb) { background: transparent !important; }   /* the floating hangers show through both sections */
  .hero > .amb-tags { z-index: 1; opacity: .9; }
  .amb { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; overflow: clip; }
  /* tag wall */
  .amb-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 24px 18px; padding: 24px; align-content: start; }
  .amb-tags svg { width: 100%; aspect-ratio: 1 / 1.6; overflow: visible; }
  .amb-tags path { fill: transparent; stroke: rgb(239 231 218 / .12); stroke-width: 1.5; }
  .amb-tags path.lit { fill: var(--yes); stroke: none; opacity: 0; transition: opacity 1.6s ease; }
  .amb-tags .on path.lit { opacity: .9; }
  /* floating hangers */
  .amb-hangers span { position: absolute; display: block; transform-origin: 50% 0; animation: amb-float calc(var(--d) * 2) ease-in-out var(--w) infinite alternate; }
  .amb-hangers svg { display: block; width: 100%; height: auto; }
  .amb-hangers path { fill: rgb(239 231 218 / .07); }
  @keyframes amb-float { 0% { transform: translate3d(0, 24px, 0) rotate(-7deg); } 50% { transform: translate3d(0, 0, 0) rotate(7deg); } 100% { transform: translate3d(0, -24px, 0) rotate(-4deg); } }
  /* icons drawing themselves */
  .amb-draw svg { position: absolute; height: auto; aspect-ratio: 1; overflow: visible; fill: none; stroke: rgb(0 38 38 / .2); stroke-linecap: round; stroke-linejoin: round; }   /* placed at random by site.js, in the free lower part */
}

/* ---------- triggered motion: --p eases to its goal on its own, after a short pause ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* most pieces: --p jumps to its goal and the browser's own transform/opacity transitions carry the motion (compositor, not main thread).
     Only the logo-shape pictures still glide --p itself, because their swing is a curve along --p. */
  .t-ready .mask.sd { transition: --p 1.3s cubic-bezier(.25, .6, .3, 1) .22s; }
  .t-ready :is(.wi, [data-reveal], .ph.sd, .ph.sd .ph-art, .ph.sd .ph-c, .types li, .tiers li, .frame.sd > .panel) {
    transition: transform 1.2s cubic-bezier(.25, .6, .3, 1) calc(.22s + var(--i, var(--k, 0)) * 70ms), opacity 1s ease calc(.22s + var(--i, var(--k, 0)) * 70ms); }
  .t-ready .soon-list li { transition: transform 1.2s cubic-bezier(.25, .6, .3, 1) calc(.22s + var(--k, 0) * 70ms), opacity 1s ease calc(.22s + var(--k, 0) * 70ms); }
  .t-ready .t-out :is(.wi, .types li, .tiers li, .soon-list li), .t-ready .t-out:is([data-reveal], .ph.sd) { transition-delay: 0s; transition-duration: .5s; }
  .t-ready .mask.sd { transition-duration: 2s; transition-delay: .28s; }
  .t-ready .t-out { transition-duration: 1s; transition-delay: 0s; }   /* going back above the point: a calm rewind, no wait */
}
.live-run { background: var(--ever); }

/* ---------- cleaning theme: a shine sweeps across pictures and cards ---------- */
.shine { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .svc-btn { position: relative; overflow: hidden; overflow: clip; }
  .shine { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }   /* clipped by its picture or button, not by itself */
  .shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: 0;
    background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 0) 20%, rgb(255 255 255 / .28) 50%, rgb(255 255 255 / 0) 80%, transparent 100%);
    transform: translateX(-140%) skewX(-18deg); animation: shine-sweep var(--d, 7s) ease-in-out var(--w, 0s) infinite; }
  .svc-btn .shine::before { background: linear-gradient(100deg, transparent 20%, rgb(149 198 35 / .16) 50%, transparent 80%); }
  @keyframes shine-sweep { 0% { transform: translateX(-140%) skewX(-18deg); } 16%, 100% { transform: translateX(300%) skewX(-18deg); } }   /* transform only: no layout per frame */
}

/* header logo (Zaid 29 Oct): one language only, with the hanger: سهل + hanger on the Arabic page, Sahel + hanger on the English page, at every width */
.hdr .logo-wide { display: none; } .hdr .logo-compact { display: block; }
@media (min-width: 900px) { .hdr .logo-wide { display: none; } .hdr .logo-compact { display: block; height: 32px; } }

/* ---------- the app, coming soon (Zaid 29 Oct): the app icon above the App Store and Google Play badges (it replaced the animated logo).
   The tile rises in with a little spring, the Hanger drops into it and swings to rest, one shine crosses it, then the badges. ---------- */
.ai { position: relative; width: min(44vw, 190px); aspect-ratio: 1; margin: 4vh auto 0; border-radius: 23%; overflow: hidden; overflow: clip;
  box-shadow: 0 24px 40px rgb(0 38 38 / .22), 0 2px 4px rgb(0 38 38 / .2); }   /* same corners and shadow as the app icon in "how to book" */
.ai-svg { display: block; width: 100%; height: 100%; }
.ai-shine { position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 900px) { .ai { width: 220px; } }
/* the wordmark under the icon (Zaid 29 Oct): سهل or Sahel, in the icon's own deep green; it writes itself in once the Hanger has settled */
.ai-word { display: block; height: clamp(44px, 12vw, 64px); width: auto; margin: 22px auto 0; fill: #04352F; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .ai-svg g { transform-box: fill-box; transform-origin: 50% 0; }
  .js .name:not(.is-in) .ai { opacity: 0; transform: translateY(40px) scale(.72); }
  .js .name:not(.is-in) .ai-svg g { transform: translateY(-140%); }
  .name.is-in .ai { animation: ai-pop .9s cubic-bezier(.34, 1.45, .64, 1) .2s both; }
  .name.is-in .ai-svg g { animation: ai-drop 1.7s cubic-bezier(.3, .1, .3, 1) .55s both; }
  .ai-shine::before { content: ""; position: absolute; top: -10%; bottom: -10%; width: 45%; left: 0; transform: translateX(-160%) skewX(-18deg);
    background: linear-gradient(100deg, transparent, rgb(239 231 218 / .3), transparent); }
  .name.is-in .ai-shine::before { animation: ai-sh 1.1s ease-in-out 2.1s both; }
  .js .name:not(.is-in) .ai-word { clip-path: inset(0 0 0 100%); }
  html[dir="ltr"].js .name:not(.is-in) .ai-word { clip-path: inset(0 100% 0 0); }
  .name.is-in .ai-word { animation: ai-w-ar 1.1s cubic-bezier(.6, 0, .2, 1) 1.5s both; }
  html[dir="ltr"] .name.is-in .ai-word { animation-name: ai-w-en; }
  @keyframes ai-w-ar { from { clip-path: inset(0 0 0 100%); transform: translateY(10px); } to { clip-path: inset(0 0 0 0); transform: none; } }   /* Arabic writes in from the right */
  @keyframes ai-w-en { from { clip-path: inset(0 100% 0 0); transform: translateY(10px); } to { clip-path: inset(0 0 0 0); transform: none; } }   /* English from the left */
  @keyframes ai-pop { from { opacity: 0; transform: translateY(40px) scale(.72); } to { opacity: 1; transform: none; } }
  @keyframes ai-drop {   /* the Hanger drops into the tile and swings to rest, like the hanger on its thread did */
    0% { transform: translateY(-140%) rotate(0); }
    45% { transform: translateY(0) rotate(7deg); }
    60% { transform: translateY(0) rotate(-4.5deg); }
    74% { transform: translateY(0) rotate(2.6deg); }
    87% { transform: translateY(0) rotate(-1deg); }
    100% { transform: translateY(0) rotate(0); }
  }
  @keyframes ai-sh { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(340%) skewX(-18deg); } }
}
.name { overflow: clip; }

/* store badges under the app icon (Zaid 29 Oct): they arrive once the Hanger has settled in the icon */
.lm-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.store { display: grid; min-width: 150px; padding: 10px 18px; border-radius: 14px; background: var(--ever); color: var(--linen);
  font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.15; direction: ltr; text-align: start; position: relative; overflow: hidden; overflow: clip; }
.store small { font-family: var(--text); font-weight: 400; font-size: 12px; color: var(--paper-2); }
html[dir="rtl"] .store small { direction: rtl; text-align: left; }
.end--plain { min-height: 0; padding-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .js .name:not(.is-in) .store { opacity: 0; transform: translateY(26px) scale(.92); }
  .name.is-in .store { animation: st-in .9s cubic-bezier(.34, 1.5, .64, 1) calc(2.4s + var(--k) * .15s) both; }
  @keyframes st-in { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
  .store::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; transform: translateX(-160%) skewX(-18deg); will-change: transform;
    background: linear-gradient(100deg, transparent, rgb(239 231 218 / .28), transparent); }
  .name.is-in .store::after { animation: st-sh 1.1s ease-in-out calc(3.6s + var(--k) * .2s) both, st-sh 1.1s ease-in-out calc(10s + var(--k) * .2s) infinite; }
  @keyframes st-sh { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(340%) skewX(-18deg); } }
}

/* ---------- the zoom into the Hanger's hole, as vectors (replaces the window film) ---------- */
.zm { position: relative; width: 100%; height: 100svh; overflow: hidden; overflow: clip; background: var(--ever); color: var(--linen); }
.zm-room { position: absolute; inset: 0; width: 100%; height: 100%; }
.zm-room img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.zm { --W: min(70vw, 620px); }
.zm-logo { position: absolute; left: 50%; top: 50%; width: var(--W); aspect-ratio: 896.15 / 395.8; transform: translate(-50%, -50%); }
.zm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: var(--ox) var(--oy); }
@media (prefers-reduced-motion: no-preference) {
  /* one compositor transform per layer, fixed raster (will-change): no redrawing while it zooms, in or out */
  .zm-svg { will-change: transform; transition: transform 2.6s linear(0, 0.1942 5%, 0.3511 10%, 0.4781 15%, 0.5808 20%, 0.6638 25%, 0.7309 30%, 0.7852 35%, 0.8291 40%, 0.8645 45%, 0.8932 50%, 0.9164 55%, 0.9352 60%, 0.9504 65%, 0.9627 70%, 0.9726 75%, 0.9806 80%, 0.9871 85%, 0.9923 90%, 0.9966 95%, 1); }
  .pause.zin .zm-svg { transform: scale(70); transition-timing-function: linear(0, 0.0034 5%, 0.0077 10%, 0.0129 15%, 0.0194 20%, 0.0274 25%, 0.0373 30%, 0.0496 35%, 0.0648 40%, 0.0836 45%, 0.1068 50%, 0.1355 55%, 0.1709 60%, 0.2148 65%, 0.2691 70%, 0.3362 75%, 0.4192 80%, 0.5219 85%, 0.6489 90%, 0.8058 95%, 1); }
  .zm-logo { transition: transform 2.6s cubic-bezier(.65, 0, .25, 1); }
  .pause.zin .zm-logo { transform: translate(-50%, -50%) translate(calc(var(--W) * var(--hx) * -1), calc(var(--W) * var(--hy) * -1)); }
  .zm-room { transform: scale(1.25); transition: transform 2.6s cubic-bezier(.65, 0, .25, 1); }
  .pause.zin .zm-room { transform: scale(1); }
  .zm-ink { transition: transform 2.6s linear(0, 0.1942 5%, 0.3511 10%, 0.4781 15%, 0.5808 20%, 0.6638 25%, 0.7309 30%, 0.7852 35%, 0.8291 40%, 0.8645 45%, 0.8932 50%, 0.9164 55%, 0.9352 60%, 0.9504 65%, 0.9627 70%, 0.9726 75%, 0.9806 80%, 0.9871 85%, 0.9923 90%, 0.9966 95%, 1), opacity .6s cubic-bezier(.4, 0, .2, 1) 1.5s; }
  .pause.zin .zm-ink { opacity: 0; transition: transform 2.6s linear(0, 0.0034 5%, 0.0077 10%, 0.0129 15%, 0.0194 20%, 0.0274 25%, 0.0373 30%, 0.0496 35%, 0.0648 40%, 0.0836 45%, 0.1068 50%, 0.1355 55%, 0.1709 60%, 0.2148 65%, 0.2691 70%, 0.3362 75%, 0.4192 80%, 0.5219 85%, 0.6489 90%, 0.8058 95%, 1), opacity .5s cubic-bezier(.4, 0, .2, 1) .15s; }
}

/* "four services at launch" headline (Zaid 29 Oct): typewriter (site.js types it letter by letter with a caret) */
.tw-caret { display: inline-block; width: .08em; height: .9em; margin-inline-start: .04em; vertical-align: -.08em; background: var(--yes); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .js .panel--open .split.sd .wi { transform: none; opacity: 1; }
  .tw-caret { animation: tw-blink .9s steps(1) infinite; }
  .tw-caret.typing { animation: none; }
  .split.sd:not(.is-vis) .tw-caret { animation-play-state: paused; }   /* off screen: no blinking (site.js adds .is-vis) */
  @keyframes tw-blink { 50% { opacity: 0; } }
}

.ph--hero .ph-l1 { display: none; }   /* Zaid 29 Oct: no light line on the hero */
/* Zaid 29 Oct: no warm/yellow cast on the hero: plain Evergreen, no warm glow, no overlay tint */
.ph--hero { --ph-bg: var(--ever); }
.ph--hero .ph-l2, .ph--hero .ph-art::after { display: none; }

.slots .mer { font-size: .72em; font-weight: 500; opacity: .75; }   /* AM / PM, smaller than the time */

/* coming soon: the big morphing line + the lit chip (SmoothUI-style text morph); without motion the list shows as before */
.soon-morph { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .soon-morph { display: grid; margin: 6px 0 14px; min-height: 1.4em; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 7vw, 64px); line-height: 1.3; color: var(--ever); }
  /* fade + slide only: a blur on this big line was redrawn on the main thread every frame of every swap (lag at coming soon) */
  .soon-morph span { grid-area: 1 / 1; opacity: 0; transform: translateY(.35em) scale(.98);
    transition: opacity .7s var(--ease), transform .8s cubic-bezier(.2, .8, .2, 1); }
  .soon-morph span.in { opacity: 1; transform: none; }
  .soon-morph span.out { opacity: 0; transform: translateY(-.35em) scale(1.02); }
  .soon-list li { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }   /* the chip's colour switches at once; its bounce stays */
  .soon-list li.now { background: var(--ever); color: var(--linen); border-color: var(--ever); border-style: solid; transform: scale(1.05); }
}

/* stacking service cards: sticky + a dim layer on the card underneath, driven by the NEXT card's arrival (scroll-driven, compositor-only).
   Lag fix (Zaid 29 Oct): each card clips with a plain rectangle (a rounded clip made the browser draw every stuck card in an extra
   offscreen pass, every frame, so it got worse with each card: smooth at 1-2, laggy at 3-4). The panel and the dim paint the
   rounded corners themselves instead, so the look is the same. */
@media (prefers-reduced-motion: no-preference) {
  .js .frame.stk { position: sticky; z-index: 1; background: none; overflow: hidden; overflow: clip; }
  .js .frame.stk > .panel { transform: none !important; border-radius: var(--r); }   /* no grow-in on stacked cards: it read as a jump when a card arrived */
  .js .frame.stk::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); background: var(--ever); pointer-events: none; z-index: 3;
    opacity: 0; transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
  .js .frame.stk.stk-dim::after { opacity: .22; }
  .js .frame.stk[id$="svc-soon"]::after { content: none; }
}

/* decorative loops run only while their area is on screen (site.js adds .is-vis); off screen they cost nothing */
.amb-hangers span, .shine::before, .store::after { animation-play-state: paused; }
.is-vis .amb-hangers span, .is-vis.amb-hangers span, .is-vis .shine::before, .is-vis.shine::before, .is-vis .store::after { animation-play-state: running; }

/* ---------- service cards: before / after (Zaid 30 Oct; photos from Higgsfield, the same scene before and after) ----------
   --x = how much of the "before" shows, from the reading side (100 = all before). It wipes from 100 to 50 once the card arrives;
   drag (the invisible range input) to compare. Nothing here is composited for good: no rounded clip around a moving layer. */
/* the v43 look (Zaid 30 Oct: v44 looked cheap). Still: the line rests in the middle, no sweep (the sweep repainted the photo
   every frame = the lag); drag to compare. */
.ba { position: relative; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--r); overflow: hidden; overflow: clip; background: var(--linen-3); --x: 50; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-b { clip-path: inset(0 calc(100% - var(--x) * 1%) 0 0); }
html[dir="rtl"] .ba-b { clip-path: inset(0 0 0 calc(100% - var(--x) * 1%)); }
.ba-line { position: absolute; inset: 0; pointer-events: none; transform: translateX(calc(var(--x) * 1% * var(--dir))); }
.ba-line::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: var(--linen); }
.ba-line i { position: absolute; top: 50%; inset-inline-start: -21px; width: 42px; height: 42px; margin-top: -21px; display: grid; place-items: center;
  border-radius: 50%; background: var(--linen); box-shadow: 0 4px 14px rgb(0 38 38 / .25); }
.ba-line svg { width: 20px; height: 20px; fill: none; stroke: var(--ever); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-tag { position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; background: rgb(239 231 218 / .92); color: var(--ever); font-size: 13px; font-weight: 600; line-height: 1.2; pointer-events: none; }
.ba-tag--b { inset-inline-start: 14px; }
.ba-tag--a { inset-inline-end: 14px; }
.ba-r { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba:has(.ba-r:focus-visible) .ba-line i { outline: 2px solid var(--yes); outline-offset: 2px; }

/* ---------- hero photos (Zaid 30 Oct, brand kit 11-hero): home -> car -> kitchen with the car outside; plays once (about 9 s) and holds
   the last photo. Without motion: the last photo only. A soft shade keeps the words readable. ---------- */
.hx { position: absolute; inset: 0; z-index: 0; }
.hx-f { position: absolute; inset: 0; }
.hx-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-car img { object-position: 40% 55%; }
.hx-final img { object-position: 30% 50%; }
.hx-home, .hx-car { opacity: 0; }
.hx-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 30 28 / .82) 0%, rgb(0 30 28 / .5) 38%, rgb(0 30 28 / .12) 70%, rgb(0 30 28 / .28) 100%); }
.hero > .amb-tags { display: none; }   /* the photos replace the hanger wall here */
@media (prefers-reduced-motion: no-preference) {
  /* Zaid 30 Oct: a loop, never stops: each photo ~6 s with a slow zoom, then a 1.2 s cross-fade (18 s round) */
  .js .hx-f { opacity: 0; animation: hx-cycle 18s linear infinite; }
  .js .hx-f img { animation: hx-zoom 18s linear infinite; }
  .js .hx-home, .js .hx-home img { animation-delay: -1.2s; }   /* the first photo is already showing on arrival */
  .js .hx-car, .js .hx-car img { animation-delay: 4.8s; }
  .js .hx-final, .js .hx-final img { animation-delay: 10.8s; }
  .hx:not(.is-vis) .hx-f, .hx:not(.is-vis) .hx-f img { animation-play-state: paused; }   /* off screen: nothing runs */
  @keyframes hx-cycle { 0% { opacity: 0; } 6.67% { opacity: 1; } 33.33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes hx-zoom { 0% { transform: scale(1.06); } 40% { transform: scale(1); } 100% { transform: scale(1); } }
}

/* ---------- opening loader (Zaid 30 Oct; brand kit 05-motion): the Hanger sways with its light off while the page loads ("waiting"),
   switches on Lime when it is ready ("switch-on"), then the screen fades into the site. Only with JS; ends after 10 s whatever happens. ---------- */
.ld { display: none; }
.js .ld { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #04352F; transition: opacity .45s cubic-bezier(.4, 0, .2, 1), visibility 0s .45s; }
.ld-h { width: 54px; height: auto; overflow: visible; }
.ld-h path { fill: #245F52; transition: fill .4s cubic-bezier(.4, 0, .2, 1); }
.ld.on .ld-h path { fill: #B2DC38; }
.ld.out { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ld-h { transform-origin: 50% 0; animation: ld-sway 1.2s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
  .ld.on .ld-h { animation: ld-rest .5s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes ld-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
  @keyframes ld-rest { to { transform: rotate(0); } }
}

/* "coming soon" badges (Zaid 30 Oct, SmoothUI "shimmer text"): a calm pill whose words carry a slow light sweep */
.soon { position: relative; }
.soon--badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 16px; border-radius: 999px; background: var(--ever); color: var(--linen);
  font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.soon--badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yes); }
@media (prefers-reduced-motion: no-preference) {
  .soon { background-image: linear-gradient(100deg, currentColor 0 38%, var(--yes) 50%, currentColor 62% 100%); background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: soon-shine 3.6s ease-in-out infinite; }
  .pill .soon, .soon--badge { background-color: transparent; }
  .pill--fill .soon { background-image: linear-gradient(100deg, var(--ever) 0 38%, #fff 50%, var(--ever) 62% 100%), linear-gradient(rgb(0 38 38 / .12), rgb(0 38 38 / .12)); background-size: 260% 100%, 100% 100%; -webkit-background-clip: text, padding-box; background-clip: text, padding-box; }
  .soon--badge { background-image: linear-gradient(100deg, var(--linen) 0 38%, var(--yes) 50%, var(--linen) 62% 100%), linear-gradient(var(--ever), var(--ever)); background-size: 260% 100%, 100% 100%; -webkit-background-clip: text, padding-box; background-clip: text, padding-box; }
  .soon--badge::before { -webkit-text-fill-color: initial; animation: soon-dot 1.8s ease-in-out infinite; }
  .pill--line .soon { background-image: linear-gradient(100deg, currentColor 0 38%, var(--yes) 50%, currentColor 62% 100%), linear-gradient(rgb(127 127 127 / .2), rgb(127 127 127 / .2)); background-size: 260% 100%, 100% 100%; -webkit-background-clip: text, padding-box; background-clip: text, padding-box; }
  @keyframes soon-shine { 0%, 30% { background-position: 100% 0, 0 0; } 70%, 100% { background-position: 0 0, 0 0; } }
  @keyframes soon-dot { 50% { opacity: .35; } }
}

/* the name, wherever it is written (Zaid 30 Oct): a soft Lime highlighter stroke behind it on light ground, Lime itself on dark ground */
.bw { font-weight: 700; color: var(--ever); background: linear-gradient(transparent 58%, rgb(178 220 56 / .6) 58% 90%, transparent 90%); padding-inline: .06em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-theme="dark"] .bw, .hero .bw, .end .bw { color: var(--yes); background: none; }

/* the three hangers after the team (Zaid 30 Oct): information tags, no photos: how long the team stays with you */
.mt { display: grid; align-content: end; gap: 4px; width: 100%; height: 100%; padding: 0 12% 13%; color: var(--ever); font-family: var(--display); }
.mt--lime { background: var(--yes); }
.mt--linen { background: var(--linen); }
.mt--teal { background: #0E4A44; color: var(--linen); }
.mt-h { font-size: clamp(16px, 4.6vw, 20px); font-weight: 600; opacity: .85; }
.mt-n { font-size: clamp(54px, 17vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -.02em; direction: ltr; text-align: start; }
html[dir="rtl"] .mt-n { text-align: right; }
.mt-u { font-family: var(--text); font-size: clamp(14px, 3.8vw, 17px); line-height: 1.35; opacity: .8; }

/* the page never moves sideways (Zaid 30 Oct): nothing that swings or slides in can widen it. clip (not hidden) keeps sticky working */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }

/* stacked service cards: their contents never move (Zaid 30 Oct, iPhone Safari twitch). Only the cards slide and stack. */
.js .frame.stk :is(.sd, [data-reveal], .wi, li, .ph-art, .ph-c, .chip) { transform: none !important; opacity: 1 !important; transition: none !important; animation: none !important; }

.zm-cover { fill: var(--ever); }

/* ---------- the die cut: keyframes computed from the v5 logo by build.py (die_cut_css) ---------- */
.dc-cut { stroke-dasharray: 1310.22 1314.22; }
@keyframes dc-knife {
  0% { opacity: 0; transform: translate(697.20px, 154.72px) }
  3.636% { opacity: 0.000; transform: translate(697.20px, 154.72px) }
  3.75% { opacity: 0.062; transform: translate(697.20px, 154.77px) }
  4% { opacity: 0.191; transform: translate(697.20px, 155.25px) }
  4.25% { opacity: 0.311; transform: translate(697.20px, 156.23px) }
  4.5% { opacity: 0.421; transform: translate(697.20px, 157.71px) }
  4.75% { opacity: 0.521; transform: translate(697.20px, 159.69px) }
  5% { opacity: 0.612; transform: translate(697.20px, 162.17px) }
  5.25% { opacity: 0.694; transform: translate(697.20px, 165.15px) }
  5.5% { opacity: 0.765; transform: translate(697.20px, 168.63px) }
  5.75% { opacity: 0.828; transform: translate(697.20px, 172.62px) }
  6% { opacity: 0.880; transform: translate(697.20px, 177.10px) }
  6.25% { opacity: 0.923; transform: translate(697.20px, 182.09px) }
  6.5% { opacity: 0.957; transform: translate(697.20px, 187.57px) }
  6.75% { opacity: 0.981; transform: translate(697.20px, 193.56px) }
  7% { opacity: 0.995; transform: translate(697.20px, 200.05px) }
  7.25% { opacity: 1.000; transform: translate(697.20px, 207.04px) }
  7.5% { opacity: 1.000; transform: translate(697.20px, 214.53px) }
  7.75% { opacity: 1.000; transform: translate(697.20px, 222.52px) }
  8% { opacity: 1.000; transform: translate(697.20px, 231.01px) }
  8.25% { opacity: 1.000; transform: translate(697.20px, 240.00px) }
  8.5% { opacity: 1.000; transform: translate(697.20px, 249.49px) }
  8.75% { opacity: 1.000; transform: translate(697.20px, 259.49px) }
  9% { opacity: 1.000; transform: translate(697.20px, 269.98px) }
  9.25% { opacity: 1.000; transform: translate(697.20px, 280.69px) }
  9.5% { opacity: 1.000; transform: translate(697.20px, 291.40px) }
  9.75% { opacity: 1.000; transform: translate(697.20px, 302.11px) }
  10% { opacity: 1.000; transform: translate(697.20px, 312.81px) }
  10.25% { opacity: 1.000; transform: translate(697.20px, 323.52px) }
  10.5% { opacity: 1.000; transform: translate(697.20px, 334.23px) }
  10.75% { opacity: 1.000; transform: translate(697.20px, 344.94px) }
  11% { opacity: 1.000; transform: translate(697.20px, 355.65px) }
  11.25% { opacity: 1.000; transform: translate(697.20px, 366.36px) }
  11.5% { opacity: 1.000; transform: translate(697.20px, 377.07px) }
  11.75% { opacity: 1.000; transform: translate(697.74px, 387.72px) }
  12% { opacity: 1.000; transform: translate(704.09px, 396.04px) }
  12.25% { opacity: 1.000; transform: translate(714.42px, 398.10px) }
  12.5% { opacity: 1.000; transform: translate(725.13px, 398.10px) }
  12.75% { opacity: 1.000; transform: translate(735.84px, 398.10px) }
  13% { opacity: 1.000; transform: translate(746.55px, 398.10px) }
  13.25% { opacity: 1.000; transform: translate(757.25px, 398.10px) }
  13.5% { opacity: 1.000; transform: translate(767.96px, 398.10px) }
  13.75% { opacity: 1.000; transform: translate(778.67px, 398.10px) }
  14% { opacity: 1.000; transform: translate(789.38px, 398.10px) }
  14.25% { opacity: 1.000; transform: translate(800.09px, 398.10px) }
  14.5% { opacity: 1.000; transform: translate(810.80px, 398.10px) }
  14.75% { opacity: 1.000; transform: translate(821.51px, 398.10px) }
  15% { opacity: 1.000; transform: translate(832.21px, 398.10px) }
  15.25% { opacity: 1.000; transform: translate(842.92px, 398.10px) }
  15.5% { opacity: 1.000; transform: translate(853.63px, 398.10px) }
  15.75% { opacity: 1.000; transform: translate(864.34px, 398.10px) }
  16% { opacity: 1.000; transform: translate(875.05px, 398.10px) }
  16.25% { opacity: 1.000; transform: translate(885.76px, 398.10px) }
  16.5% { opacity: 1.000; transform: translate(895.77px, 395.03px) }
  16.75% { opacity: 1.000; transform: translate(901.03px, 385.99px) }
  17% { opacity: 1.000; transform: translate(901.20px, 375.29px) }
  17.25% { opacity: 1.000; transform: translate(901.20px, 364.58px) }
  17.5% { opacity: 1.000; transform: translate(901.20px, 353.87px) }
  17.75% { opacity: 1.000; transform: translate(901.20px, 343.16px) }
  18% { opacity: 1.000; transform: translate(901.20px, 332.45px) }
  18.25% { opacity: 1.000; transform: translate(901.20px, 321.75px) }
  18.5% { opacity: 1.000; transform: translate(901.20px, 311.04px) }
  18.75% { opacity: 1.000; transform: translate(901.20px, 300.33px) }
  19% { opacity: 1.000; transform: translate(901.20px, 289.62px) }
  19.25% { opacity: 1.000; transform: translate(901.20px, 278.91px) }
  19.5% { opacity: 1.000; transform: translate(901.20px, 268.20px) }
  19.75% { opacity: 1.000; transform: translate(901.20px, 257.49px) }
  20% { opacity: 1.000; transform: translate(901.20px, 246.79px) }
  20.25% { opacity: 1.000; transform: translate(901.20px, 236.08px) }
  20.5% { opacity: 1.000; transform: translate(901.20px, 225.37px) }
  20.75% { opacity: 1.000; transform: translate(901.20px, 214.66px) }
  21% { opacity: 1.000; transform: translate(901.20px, 203.95px) }
  21.25% { opacity: 1.000; transform: translate(901.20px, 193.24px) }
  21.5% { opacity: 1.000; transform: translate(901.20px, 182.53px) }
  21.75% { opacity: 1.000; transform: translate(901.18px, 171.83px) }
  22% { opacity: 1.000; transform: translate(900.42px, 161.15px) }
  22.25% { opacity: 1.000; transform: translate(898.55px, 150.61px) }
  22.5% { opacity: 1.000; transform: translate(895.59px, 140.33px) }
  22.75% { opacity: 1.000; transform: translate(891.56px, 130.41px) }
  23% { opacity: 1.000; transform: translate(886.51px, 120.97px) }
  23.25% { opacity: 1.000; transform: translate(880.51px, 112.11px) }
  23.5% { opacity: 1.000; transform: translate(873.60px, 103.93px) }
  23.75% { opacity: 1.000; transform: translate(865.88px, 96.52px) }
  24% { opacity: 1.000; transform: translate(857.43px, 89.95px) }
  24.25% { opacity: 1.000; transform: translate(848.33px, 84.31px) }
  24.5% { opacity: 1.000; transform: translate(838.69px, 79.66px) }
  24.75% { opacity: 1.000; transform: translate(828.62px, 76.04px) }
  25% { opacity: 1.000; transform: translate(818.22px, 73.49px) }
  25.25% { opacity: 1.000; transform: translate(807.62px, 72.05px) }
  25.5% { opacity: 1.000; transform: translate(796.92px, 71.70px) }
  25.75% { opacity: 1.000; transform: translate(786.21px, 71.70px) }
  26% { opacity: 1.000; transform: translate(775.50px, 71.70px) }
  26.25% { opacity: 1.000; transform: translate(764.79px, 71.70px) }
  26.5% { opacity: 1.000; transform: translate(754.09px, 71.70px) }
  26.75% { opacity: 1.000; transform: translate(743.38px, 71.70px) }
  27% { opacity: 1.000; transform: translate(732.67px, 71.70px) }
  27.25% { opacity: 1.000; transform: translate(721.96px, 71.70px) }
  27.5% { opacity: 1.000; transform: translate(711.25px, 71.70px) }
  27.75% { opacity: 1.000; transform: translate(701.58px, 75.69px) }
  28% { opacity: 1.000; transform: translate(697.22px, 85.20px) }
  28.25% { opacity: 1.000; transform: translate(697.20px, 95.90px) }
  28.5% { opacity: 1.000; transform: translate(697.20px, 106.61px) }
  28.75% { opacity: 1.000; transform: translate(697.20px, 117.32px) }
  29% { opacity: 1.000; transform: translate(700.23px, 126.81px) }
  29.25% { opacity: 1.000; transform: translate(710.29px, 130.48px) }
  29.5% { opacity: 1.000; transform: translate(720.35px, 134.15px) }
  29.75% { opacity: 1.000; transform: translate(730.41px, 137.81px) }
  30% { opacity: 1.000; transform: translate(740.48px, 141.47px) }
  30.25% { opacity: 1.000; transform: translate(750.54px, 145.13px) }
  30.5% { opacity: 1.000; transform: translate(760.60px, 148.79px) }
  30.75% { opacity: 1.000; transform: translate(769.58px, 148.70px) }
  31% { opacity: 1.000; transform: translate(777.52px, 141.57px) }
  31.25% { opacity: 1.000; transform: translate(787.10px, 136.87px) }
  31.5% { opacity: 1.000; transform: translate(797.61px, 134.97px) }
  31.75% { opacity: 1.000; transform: translate(808.23px, 136.00px) }
  32% { opacity: 1.000; transform: translate(818.17px, 139.89px) }
  32.25% { opacity: 1.000; transform: translate(826.67px, 146.35px) }
  32.5% { opacity: 1.000; transform: translate(833.09px, 154.88px) }
  32.75% { opacity: 1.000; transform: translate(836.94px, 164.84px) }
  33% { opacity: 1.000; transform: translate(837.92px, 175.47px) }
  33.25% { opacity: 1.000; transform: translate(835.97px, 185.96px) }
  33.5% { opacity: 1.000; transform: translate(831.23px, 195.53px) }
  33.75% { opacity: 1.000; transform: translate(824.06px, 203.43px) }
  34% { opacity: 1.000; transform: translate(815.00px, 209.09px) }
  34.25% { opacity: 1.000; transform: translate(804.75px, 212.05px) }
  34.5% { opacity: 1.000; transform: translate(794.07px, 212.11px) }
  34.75% { opacity: 1.000; transform: translate(783.79px, 209.26px) }
  35% { opacity: 1.000; transform: translate(774.67px, 203.71px) }
  35.25% { opacity: 1.000; transform: translate(767.55px, 196.07px) }
  35.5% { opacity: 1.000; transform: translate(762.91px, 187.30px) }
  35.75% { opacity: 1.000; transform: translate(760.70px, 178.19px) }
  36% { opacity: 1.000; transform: translate(759.48px, 170.10px) }
  36.25% { opacity: 1.000; transform: translate(751.65px, 167.25px) }
  36.5% { opacity: 1.000; transform: translate(744.33px, 164.59px) }
  36.75% { opacity: 1.000; transform: translate(737.51px, 162.10px) }
  37% { opacity: 1.000; transform: translate(731.20px, 159.81px) }
  37.25% { opacity: 1.000; transform: translate(725.39px, 157.69px) }
  37.5% { opacity: 1.000; transform: translate(720.09px, 155.76px) }
  37.75% { opacity: 1.000; transform: translate(715.29px, 154.02px) }
  38% { opacity: 1.000; transform: translate(711.00px, 152.46px) }
  38.25% { opacity: 1.000; transform: translate(707.21px, 151.08px) }
  38.5% { opacity: 1.000; transform: translate(703.93px, 149.88px) }
  38.75% { opacity: 1.000; transform: translate(701.02px, 149.78px) }
  39% { opacity: 1.000; transform: translate(698.91px, 150.91px) }
  39.25% { opacity: 1.000; transform: translate(697.76px, 152.39px) }
  39.5% { opacity: 1.000; transform: translate(697.31px, 153.65px) }
  39.75% { opacity: 1.000; transform: translate(697.21px, 154.45px) }
  40% { opacity: 1.000; transform: translate(697.20px, 154.72px) }
  44.5455%, 100% { opacity: 0; transform: translate(697.20px, 154.72px) }
}
@keyframes dc-cut {
  0% { stroke-dashoffset: 1310.22; opacity: 1 }
  3.636% { stroke-dashoffset: 1310.22 }
  3.75% { stroke-dashoffset: 1310.17 }
  4% { stroke-dashoffset: 1309.70 }
  4.25% { stroke-dashoffset: 1308.74 }
  4.5% { stroke-dashoffset: 1307.29 }
  4.75% { stroke-dashoffset: 1305.35 }
  5% { stroke-dashoffset: 1302.92 }
  5.25% { stroke-dashoffset: 1299.99 }
  5.5% { stroke-dashoffset: 1296.58 }
  5.75% { stroke-dashoffset: 1292.67 }
  6% { stroke-dashoffset: 1288.28 }
  6.25% { stroke-dashoffset: 1283.39 }
  6.5% { stroke-dashoffset: 1278.01 }
  6.75% { stroke-dashoffset: 1272.14 }
  7% { stroke-dashoffset: 1265.78 }
  7.25% { stroke-dashoffset: 1258.93 }
  7.5% { stroke-dashoffset: 1251.58 }
  7.75% { stroke-dashoffset: 1243.75 }
  8% { stroke-dashoffset: 1235.43 }
  8.25% { stroke-dashoffset: 1226.61 }
  8.5% { stroke-dashoffset: 1217.30 }
  8.75% { stroke-dashoffset: 1207.51 }
  9% { stroke-dashoffset: 1197.22 }
  9.25% { stroke-dashoffset: 1186.72 }
  9.5% { stroke-dashoffset: 1176.22 }
  9.75% { stroke-dashoffset: 1165.72 }
  10% { stroke-dashoffset: 1155.22 }
  10.25% { stroke-dashoffset: 1144.72 }
  10.5% { stroke-dashoffset: 1134.23 }
  10.75% { stroke-dashoffset: 1123.73 }
  11% { stroke-dashoffset: 1113.23 }
  11.25% { stroke-dashoffset: 1102.73 }
  11.5% { stroke-dashoffset: 1092.23 }
  11.75% { stroke-dashoffset: 1081.73 }
  12% { stroke-dashoffset: 1071.24 }
  12.25% { stroke-dashoffset: 1060.74 }
  12.5% { stroke-dashoffset: 1050.24 }
  12.75% { stroke-dashoffset: 1039.74 }
  13% { stroke-dashoffset: 1029.24 }
  13.25% { stroke-dashoffset: 1018.74 }
  13.5% { stroke-dashoffset: 1008.24 }
  13.75% { stroke-dashoffset: 997.75 }
  14% { stroke-dashoffset: 987.25 }
  14.25% { stroke-dashoffset: 976.75 }
  14.5% { stroke-dashoffset: 966.25 }
  14.75% { stroke-dashoffset: 955.75 }
  15% { stroke-dashoffset: 945.25 }
  15.25% { stroke-dashoffset: 934.75 }
  15.5% { stroke-dashoffset: 924.26 }
  15.75% { stroke-dashoffset: 913.76 }
  16% { stroke-dashoffset: 903.26 }
  16.25% { stroke-dashoffset: 892.76 }
  16.5% { stroke-dashoffset: 882.26 }
  16.75% { stroke-dashoffset: 871.76 }
  17% { stroke-dashoffset: 861.26 }
  17.25% { stroke-dashoffset: 850.77 }
  17.5% { stroke-dashoffset: 840.27 }
  17.75% { stroke-dashoffset: 829.77 }
  18% { stroke-dashoffset: 819.27 }
  18.25% { stroke-dashoffset: 808.77 }
  18.5% { stroke-dashoffset: 798.27 }
  18.75% { stroke-dashoffset: 787.77 }
  19% { stroke-dashoffset: 777.28 }
  19.25% { stroke-dashoffset: 766.78 }
  19.5% { stroke-dashoffset: 756.28 }
  19.75% { stroke-dashoffset: 745.78 }
  20% { stroke-dashoffset: 735.28 }
  20.25% { stroke-dashoffset: 724.78 }
  20.5% { stroke-dashoffset: 714.28 }
  20.75% { stroke-dashoffset: 703.79 }
  21% { stroke-dashoffset: 693.29 }
  21.25% { stroke-dashoffset: 682.79 }
  21.5% { stroke-dashoffset: 672.29 }
  21.75% { stroke-dashoffset: 661.79 }
  22% { stroke-dashoffset: 651.29 }
  22.25% { stroke-dashoffset: 640.79 }
  22.5% { stroke-dashoffset: 630.30 }
  22.75% { stroke-dashoffset: 619.80 }
  23% { stroke-dashoffset: 609.30 }
  23.25% { stroke-dashoffset: 598.80 }
  23.5% { stroke-dashoffset: 588.30 }
  23.75% { stroke-dashoffset: 577.80 }
  24% { stroke-dashoffset: 567.30 }
  24.25% { stroke-dashoffset: 556.81 }
  24.5% { stroke-dashoffset: 546.31 }
  24.75% { stroke-dashoffset: 535.81 }
  25% { stroke-dashoffset: 525.31 }
  25.25% { stroke-dashoffset: 514.81 }
  25.5% { stroke-dashoffset: 504.31 }
  25.75% { stroke-dashoffset: 493.81 }
  26% { stroke-dashoffset: 483.32 }
  26.25% { stroke-dashoffset: 472.82 }
  26.5% { stroke-dashoffset: 462.32 }
  26.75% { stroke-dashoffset: 451.82 }
  27% { stroke-dashoffset: 441.32 }
  27.25% { stroke-dashoffset: 430.82 }
  27.5% { stroke-dashoffset: 420.32 }
  27.75% { stroke-dashoffset: 409.83 }
  28% { stroke-dashoffset: 399.33 }
  28.25% { stroke-dashoffset: 388.83 }
  28.5% { stroke-dashoffset: 378.33 }
  28.75% { stroke-dashoffset: 367.83 }
  29% { stroke-dashoffset: 357.33 }
  29.25% { stroke-dashoffset: 346.83 }
  29.5% { stroke-dashoffset: 336.34 }
  29.75% { stroke-dashoffset: 325.84 }
  30% { stroke-dashoffset: 315.34 }
  30.25% { stroke-dashoffset: 304.84 }
  30.5% { stroke-dashoffset: 294.34 }
  30.75% { stroke-dashoffset: 283.84 }
  31% { stroke-dashoffset: 273.34 }
  31.25% { stroke-dashoffset: 262.85 }
  31.5% { stroke-dashoffset: 252.35 }
  31.75% { stroke-dashoffset: 241.85 }
  32% { stroke-dashoffset: 231.35 }
  32.25% { stroke-dashoffset: 220.85 }
  32.5% { stroke-dashoffset: 210.35 }
  32.75% { stroke-dashoffset: 199.85 }
  33% { stroke-dashoffset: 189.36 }
  33.25% { stroke-dashoffset: 178.86 }
  33.5% { stroke-dashoffset: 168.36 }
  33.75% { stroke-dashoffset: 157.86 }
  34% { stroke-dashoffset: 147.36 }
  34.25% { stroke-dashoffset: 136.86 }
  34.5% { stroke-dashoffset: 126.36 }
  34.75% { stroke-dashoffset: 115.87 }
  35% { stroke-dashoffset: 105.37 }
  35.25% { stroke-dashoffset: 95.10 }
  35.5% { stroke-dashoffset: 85.35 }
  35.75% { stroke-dashoffset: 76.13 }
  36% { stroke-dashoffset: 67.44 }
  36.25% { stroke-dashoffset: 59.27 }
  36.5% { stroke-dashoffset: 51.63 }
  36.75% { stroke-dashoffset: 44.52 }
  37% { stroke-dashoffset: 37.93 }
  37.25% { stroke-dashoffset: 31.87 }
  37.5% { stroke-dashoffset: 26.34 }
  37.75% { stroke-dashoffset: 21.34 }
  38% { stroke-dashoffset: 16.86 }
  38.25% { stroke-dashoffset: 12.91 }
  38.5% { stroke-dashoffset: 9.48 }
  38.75% { stroke-dashoffset: 6.59 }
  39% { stroke-dashoffset: 4.21 }
  39.25% { stroke-dashoffset: 2.37 }
  39.5% { stroke-dashoffset: 1.05 }
  39.75% { stroke-dashoffset: 0.26 }
  40% { stroke-dashoffset: 0.00 }
  40% { stroke-dashoffset: 0; opacity: 1 }
  44%, 100% { stroke-dashoffset: 0; opacity: 0 }
}
@keyframes dc-card {   /* cut at 1.3x in the middle; lifts 3.2 % (0.88-1.12 s); settles into the signature (1.12-1.72 s) */
  0%, 40% { transform: matrix(1.30000, 0, 0, 1.30000, -574.885, -90.970); animation-timing-function: cubic-bezier(.22, 1, .36, 1) }
  50.9091% { transform: matrix(1.34160, 0, 0, 1.34160, -608.132, -100.742); animation-timing-function: cubic-bezier(.42, 0, .25, 1) }
  78.1818%, 100% { transform: matrix(1, 0, 0, 1, 0, 0) }
}