/* ---- tokens/colors.css ---- */
/* ============================================================
   evenclo — COLOR
   "Deep purple. Starved orange." Premium comes from pushing the
   purple almost to black and rationing the ember until it means
   something. Neutrals carry a trace of the brand hue — never a
   pure grey, never a pure white.
   ============================================================ */
:root {
  /* ---- Brand core (identity v1, canonical) ---- */
  --ev-ink:            #14101B; /* near-black aubergine — body bg, text on light */
  --ev-aubergine:      #2A1B3D; /* primary dark surface, cards on dark */
  --ev-purple:         #6B3FA0; /* brand purple — UI, secondary, charts */
  --ev-purple-dark:    #4A2F66; /* pressed / deep header */
  --ev-purple-lift:    #9A6BD0; /* eyebrows, links, accents on dark */
  --ev-ember:          #E8722C; /* THE accent. The live thing. Under 10% of any surface. */
  --ev-ember-lift:     #F4995A; /* ember hover on dark */
  --ev-bone:           #F1EDF3; /* violet-cast white — light surfaces, text on dark */

  /* ---- Neutrals (light UI — violet-tinted, never pure grey) ---- */
  --ev-surface:        #FFFFFF; /* admin/attendee page cards */
  --ev-surface-raised: #F8F7FA; /* subtle raised fill */
  --ev-surface-sunken: #F1EDF3; /* bone — sunken wells, hovers */
  --ev-overlay:        #F0EDF5; /* row hover, selected fills */
  --ev-border:         #E3E0EA; /* default hairline on light */
  --ev-border-subtle:  #EDE9F2; /* faint divider */

  /* ---- Text (light surfaces) ---- */
  --ev-text:           #1A1523; /* primary text */
  --ev-text-secondary: #5C5470; /* secondary / meta */
  --ev-text-muted:     #9B93A8; /* muted / placeholder */
  --ev-text-inverse:   #F1EDF3; /* text on dark/brand surfaces (bone, not white) */

  /* ---- Light canvas tints (marketing scroll stages — soft brand-cast washes
     that ride under transparent content; each is a near-white with a whisper of
     the brand hue, so the page reads warm/airy, never a flat white) ---- */
  --ev-tint-paper:     #F6F2EB; /* warm paper — default light canvas */
  --ev-tint-lilac:     #F1ECF5; /* faint purple wash */
  --ev-tint-cream:     #FBF4ED; /* soft cream */
  --ev-tint-blush:     #FBEEE4; /* ember-adjacent blush */
  --ev-tint-mint:      #EBF3EF; /* cool mint breather */
  --ev-tint-orchid:    #F3EEF6; /* light orchid */
  --ev-tint-peach:     #FCEEE3; /* warm peach */
  --ev-card:           #FFFFFF; /* opaque card surface on the light canvas */
  --ev-card-soft:      #FBF7F2; /* soft card fill */

  /* ---- Dark-surface hairlines & dims (identity) ---- */
  --ev-hair:           rgba(241,237,243,0.14); /* hairline on ink/aubergine */
  --ev-hair-strong:    rgba(241,237,243,0.24);
  --ev-dim:            rgba(241,237,243,0.58); /* muted text on dark */
  --ev-dim-soft:       rgba(241,237,243,0.38);

  /* ---- Semantic (functional, product) ---- */
  --ev-success:        #22C55E;
  --ev-success-bg:     #E9F7EE;
  --ev-success-ink:    #1E7E3A;
  --ev-warning:        #F59E0B;
  --ev-warning-bg:     #FDF3E7;
  --ev-warning-ink:    #B3691B;
  --ev-error:          #EF4444;
  --ev-error-bg:       #FDECEA;
  --ev-error-ink:      #C0392B;
  --ev-info:           #3B82F6;
  --ev-info-bg:        #E8F0FE;
  --ev-info-ink:       #1D4ED8;

  /* ---- Ember bloom / glow (expressive layer, dark surfaces only) ---- */
  --ev-glow-ember:     0 0 22px 7px rgba(232,114,44,0.40); /* @kind shadow */
  --ev-bloom-ember:    radial-gradient(circle, rgba(232,114,44,0.55) 0%, rgba(232,114,44,0.16) 32%, transparent 68%); /* @kind other */

  /* ---- Gradients (marketing / hero) ---- */
  --ev-gradient-surface: linear-gradient(180deg, #14101B 0%, #1F1330 100%); /* @kind other */
  --ev-gradient-stage:   radial-gradient(120% 80% at 50% 0%, #2A1B3D 0%, #14101B 60%); /* @kind other */

  /* =========================================================
     SEMANTIC ALIASES — reach for these in product UI
     ========================================================= */
  --brand:               var(--ev-purple);
  --brand-strong:        var(--ev-purple-dark);
  --accent:              var(--ev-ember);

  --surface-page:        var(--ev-surface-raised);
  --surface-card:        var(--ev-surface);
  --surface-well:        var(--ev-surface-sunken);
  --surface-dark:        var(--ev-ink);
  --surface-dark-raised: var(--ev-aubergine);

  --border-default:      var(--ev-border);
  --border-faint:        var(--ev-border-subtle);

  --ev-text-heading:     var(--ev-text);
  --text-heading:        var(--ev-text);
  --text-body:           var(--ev-text-secondary);
  --ev-text-body:        var(--ev-text-secondary);
  --text-subtle:         var(--ev-text-muted);
  --text-on-brand:       var(--ev-text-inverse);
  --link:                var(--ev-purple);
  --link-hover:          var(--ev-purple-dark);
  --ev-link:             var(--ev-purple);
  --ev-link-hover:       var(--ev-purple-dark);
}

/* ---- tokens/typography.css ---- */
/* ============================================================
   evenclo — TYPE
   One family, both scripts: IBM Plex Sans Arabic. Mono for
   captions/labels/data (IBM Plex Mono). Light weights carry the
   premium tone: display 200, body 300.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --ev-font-sans:  'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ev-font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Arabic renders on the same superfamily; Cairo/Tajawal are the product fallback */
  --ev-font-arabic: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', sans-serif;

  /* ---- Weights ---- */
  --ev-w-thin:     200; /* @kind font */
  --ev-w-light:    300; /* @kind font */
  --ev-w-regular:  400; /* @kind font */
  --ev-w-medium:   500; /* @kind font */
  --ev-w-semibold: 600; /* @kind font */
  --ev-w-bold:     700; /* @kind font */

  /* ---- Size scale ---- */
  --ev-text-xs:    0.75rem;   /* 12 — mono captions */
  --ev-text-sm:    0.875rem;  /* 14 */
  --ev-text-base:  1rem;      /* 16 — body */
  --ev-text-lg:    1.125rem;  /* 18 */
  --ev-text-xl:    1.25rem;   /* 20 */
  --ev-text-2xl:   1.5rem;    /* 24 */
  --ev-text-3xl:   1.875rem;  /* 30 */
  --ev-text-4xl:   2.25rem;   /* 36 */
  --ev-text-display: clamp(2.25rem, 6vw, 4rem);

  /* ---- Line heights ---- */
  --ev-leading-tight:  1.15; /* @kind other */
  --ev-leading-snug:   1.35; /* @kind other */
  --ev-leading-normal: 1.6;  /* @kind other */
  --ev-leading-arabic: 1.8;  /* @kind other */

  /* ---- Tracking (identity hand-corrections) ---- */
  --ev-track-display: -0.03em;  /* @kind font */
  --ev-track-title:   -0.015em; /* @kind font */
  --ev-track-wordmark:-0.045em; /* @kind font */
  --ev-track-normal:  0;         /* @kind font */
  --ev-track-caption: 0.14em;   /* @kind font */
  --ev-track-eyebrow: 0.2em;    /* @kind font */
}

/* ---- tokens/spacing.css ---- */
/* ============================================================
   evenclo — SPACING & RADII  (4px base grid)
   ============================================================ */
:root {
  --ev-space-0:  0;
  --ev-space-1:  0.25rem; /* 4 */
  --ev-space-2:  0.5rem;  /* 8 */
  --ev-space-3:  0.75rem; /* 12 */
  --ev-space-4:  1rem;    /* 16 */
  --ev-space-5:  1.25rem; /* 20 */
  --ev-space-6:  1.5rem;  /* 24 */
  --ev-space-8:  2rem;    /* 32 */
  --ev-space-10: 2.5rem;  /* 40 */
  --ev-space-12: 3rem;    /* 48 */
  --ev-space-16: 4rem;    /* 64 */
  --ev-space-20: 5rem;    /* 80 */
  --ev-space-24: 6rem;    /* 96 */
  --ev-space-32: 8rem;    /* 128 */

  /* ---- Radii ---- */
  --ev-radius-sm:   4px;
  --ev-radius-md:   8px;   /* buttons, inputs */
  --ev-radius-lg:   12px;  /* cards (admin) */
  --ev-radius-xl:   16px;  /* large cards, stat tiles */
  --ev-radius-2xl:  24px;  /* hero panels */
  --ev-radius-full: 9999px;/* pills, dots */

  /* ---- Containers ---- */
  --ev-container-form:  560px;  /* @kind other */
  --ev-container-admin: 1000px; /* @kind other */
  --ev-container-prose: 820px;  /* @kind other */
}

/* ---- tokens/effects.css ---- */
/* ============================================================
   evenclo — SHADOWS, MOTION, LAYERS
   Shadows are purple-tinted, never neutral black.
   Motion is calm and confident: a long ease-out, no bounce.
   ============================================================ */
:root {
  /* ---- Shadows (purple-cast) ---- */
  --ev-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --ev-shadow-md: 0 4px 12px rgba(98,65,133,0.08);
  --ev-shadow-lg: 0 8px 24px rgba(98,65,133,0.12);
  --ev-shadow-xl: 0 16px 40px rgba(98,65,133,0.16);
  --ev-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ev-purple) 22%, transparent);

  /* ---- Motion ---- */
  --ev-dur-fast:   150ms; /* @kind other */
  --ev-dur-normal: 300ms; /* @kind other */
  --ev-dur-slow:   500ms; /* @kind other */
  --ev-dur-bloom:  2200ms;/* @kind other */
  --ev-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ev-ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);   /* @kind other */
  --ev-ease-bloom:  cubic-bezier(0.2, 0.7, 0.3, 1);   /* @kind other */

  /* ---- Z-index ---- */
  --ev-z-dropdown:  1000; /* @kind other */
  --ev-z-sticky:    1020; /* @kind other */
  --ev-z-fixed:     1030; /* @kind other */
  --ev-z-backdrop:  1040; /* @kind other */
  --ev-z-modal:     1050; /* @kind other */
  --ev-z-popover:   1060; /* @kind other */
  --ev-z-toast:     1080; /* @kind other */
}

/* Signature motions — the expressive layer. Dark surfaces, large sizes only. */
@keyframes ev-bloom {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ev-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.6); opacity: 0; }
}
@keyframes ev-skeleton {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ---- website.css ---- */
/* evenclo homepage — three.js immersive scroll journey.
   A WebGL scene (scene3d.js) is the fixed background; HTML content rides on
   top, scroll-synced. Identity palette only. Dark stage by default. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--ev-font-sans);font-weight:var(--ev-w-light);color:var(--ev-bone);-webkit-font-smoothing:antialiased;overflow-x:clip;background:var(--ev-ink)}
@media (max-height:680px){.ev-hero__cue{display:none}}
a{color:var(--ev-purple-lift);text-decoration:none}
a:hover{color:var(--ev-ember)}
::selection{background:var(--ev-ember);color:var(--ev-ink)}

/* ---- WebGL stage ---- */
:root{--ev-stage-c:#14101B}
.ev-stage{position:fixed;inset:0;z-index:0;pointer-events:none}
.ev-stage canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
.ev-stage::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ev-stage-c)}
.ev-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
html[data-tone="bone"] .ev-stage::after{display:none}
html[data-tone="aubergine"] .ev-stage::before{background:var(--ev-stage-c)}
html[data-tone="bone"] body{background:var(--ev-bone)}
html[data-tone="bone"] .ev-stage::before{background:var(--ev-stage-c)}
/* WebGL-failed fallback keeps the gradient stage */
html.ev-nowebgl .ev-stage canvas{display:none}

.ev-shell{max-width:1240px;margin:0 auto;padding:0 40px}
.ev-content{position:relative;z-index:1}
.ev-display{font-weight:var(--ev-w-thin);letter-spacing:var(--ev-track-display);line-height:1.02;text-wrap:balance;margin:0}
.ev-h2{font-weight:var(--ev-w-thin);letter-spacing:-0.025em;line-height:1.06;margin:0;font-size:clamp(2rem,4.4vw,3.4rem)}
.ev-lede{font-weight:var(--ev-w-light);line-height:1.6;color:var(--ev-dim);text-wrap:pretty}
.ital{font-style:italic}
.emberword{color:var(--ev-ember)}
.purpleword{color:var(--ev-purple-lift)}
.ev-eyebrow{font-family:var(--ev-font-mono);font-size:12px;font-weight:var(--ev-w-medium);letter-spacing:var(--ev-track-eyebrow);text-transform:uppercase;color:var(--ev-purple-lift);display:inline-flex;align-items:center;gap:11px}
.ev-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ev-ember);flex:0 0 auto}

/* bone tone: dark text on light stage */
html[data-tone="bone"] body{color:var(--ev-text-heading)}
html[data-tone="bone"] .ev-lede{color:var(--ev-text-body)}
html[data-tone="bone"] .ev-eyebrow{color:var(--ev-purple)}
html[data-tone="bone"] .ev-hero__mark,html[data-tone="bone"] .ev-hero__tag{color:var(--ev-ink)}
html[data-tone="bone"] a{color:var(--ev-purple)}

/* ---- NAV ---- */
.ev-nav{position:fixed;top:0;left:0;right:0;z-index:var(--ev-z-fixed);transition:background var(--ev-dur-normal) var(--ev-ease-out),border-color var(--ev-dur-normal),backdrop-filter var(--ev-dur-normal)}
.ev-nav__in{display:flex;align-items:center;justify-content:space-between;height:74px}
.ev-nav--scrolled{background:color-mix(in srgb,var(--ev-ink) 55%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--ev-hair)}
html[data-tone="bone"] .ev-nav--scrolled{background:color-mix(in srgb,var(--ev-bone) 80%,transparent);border-bottom:1px solid var(--ev-border-subtle)}
.ev-nav__links{display:flex;gap:32px;align-items:center}
.ev-nav__links a{color:var(--ev-bone);font-size:15px;font-weight:var(--ev-w-light);letter-spacing:-0.01em;transition:color var(--ev-dur-fast) var(--ev-ease-out);opacity:.85}
.ev-nav__links a:hover{color:var(--ev-ember);opacity:1}
html[data-tone="bone"] .ev-nav__links a{color:var(--ev-text-heading)}
.ev-nav__right{display:flex;align-items:center;gap:20px}
.ev-lang{display:flex;gap:2px;font-family:var(--ev-font-mono);font-size:12px;letter-spacing:.08em;color:var(--ev-dim)}
.ev-lang button{background:none;border:none;cursor:pointer;font:inherit;color:var(--ev-dim);padding:2px 4px;transition:color var(--ev-dur-fast)}
.ev-lang button.on{color:var(--ev-bone)}
html[data-tone="bone"] .ev-lang button.on{color:var(--ev-ink)}
.ev-lang button:hover{color:var(--ev-ember)}

/* ---- HERO ---- */
.ev-hero{position:relative;min-height:min(100vh,780px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 96px}
.ev-hero__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px}
.ev-hero__mark{font-weight:var(--ev-w-medium);letter-spacing:var(--ev-track-wordmark);line-height:.9;font-size:clamp(4.5rem,17vw,15rem);color:var(--ev-bone);text-shadow:0 8px 60px rgba(20,16,27,.6)}
.ev-hero__mark .d{color:var(--ev-ember)}
.ev-hero__tag{font-weight:var(--ev-w-thin);letter-spacing:-0.03em;font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.05;color:var(--ev-bone);margin:0}
.ev-hero__sub{max-width:520px;font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ev-dim)}
.ev-hero__cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
@media (max-height:760px){.ev-hero__cue{display:none}}
.ev-hero__cue .lbl{font-family:var(--ev-font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ev-dim)}
.ev-hero__cue .dash{stroke:var(--ev-purple-lift);stroke-width:2;stroke-dasharray:2 8;stroke-linecap:round;opacity:.6;animation:ev-march 1.1s linear infinite}
.ev-hero__cue .bead{fill:var(--ev-ember);animation:ev-bead 2.4s var(--ev-ease-in-out) infinite}
@keyframes ev-march{to{stroke-dashoffset:-10}}
@keyframes ev-bead{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(74px);opacity:0}}

/* ---- JOURNEY ---- */
.ev-journey{position:relative}
.ev-wp{position:relative;min-height:auto;display:flex;align-items:center;padding:clamp(48px,7vh,88px) 0}
.ev-wp[data-side="left"]{justify-content:flex-start}
.ev-wp[data-side="right"]{justify-content:flex-end}
.ev-wp__card{width:min(500px,90%)}
@supports (animation-timeline: view()){
  .ev-wp__card{animation:ev-cardin linear both;animation-timeline:view();animation-range:entry 4% entry 46%}
  html[data-reveal="zoom"] .ev-wp__card{animation-name:ev-cardzoom}
  html[data-reveal="fade"] .ev-wp__card{animation-name:ev-cardfade}
}
@keyframes ev-cardin{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes ev-cardzoom{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes ev-cardfade{from{opacity:0}to{opacity:1}}
.ev-wp[data-side] .ev-wp__card{padding:38px;border-radius:var(--ev-radius-2xl);background:color-mix(in srgb,var(--ev-aubergine) 62%,transparent);backdrop-filter:blur(16px);border:1px solid var(--ev-hair);box-shadow:0 30px 80px rgba(0,0,0,.35)}
html[data-tone="bone"] .ev-wp[data-side] .ev-wp__card{background:color-mix(in srgb,var(--ev-surface) 78%,transparent);border-color:var(--ev-border);box-shadow:var(--ev-shadow-lg)}
.ev-wp[data-side="right"] .ev-wp__card{text-align:right}
.ev-wp[data-side="right"] .ev-eyebrow{flex-direction:row-reverse}
.ev-wp__title{margin:18px 0 20px}
.ev-wp__body{font-size:1.1rem}
.ev-wp__media{position:relative;width:100%;height:260px;border-radius:var(--ev-radius-lg);overflow:hidden;margin-top:28px;background:var(--ev-ink)}
/* editorial split (stops 1 & 2) — no glass card, big ghost number */
.ev-wp--split{justify-content:center!important}
.ev-split{width:min(1140px,94%);background:transparent!important;backdrop-filter:none!important;border:none!important;box-shadow:none!important;padding:0!important;display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(32px,6vw,80px);align-items:center;position:relative;text-align:left!important}
.ev-split--rev{grid-template-columns:0.95fr 1.05fr}
.ev-split--rev .ev-split__text{order:2}
.ev-split--rev .ev-split__media{order:1}
.ev-split__ghost{position:absolute;top:-0.42em;left:-0.06em;font-family:var(--ev-font-mono);font-weight:var(--ev-w-thin);font-size:clamp(7rem,15vw,13rem);line-height:1;color:var(--ev-bone);opacity:.06;pointer-events:none;z-index:0}
.ev-split__text{position:relative;z-index:1}
.ev-split__ghost--right{left:auto;right:-0.06em}
/* #offer is the only data-side="right" section, so its eyebrow dot was trailing —
   the ember dot leads every eyebrow on the page. */
#offer .ev-eyebrow{flex-direction:row}
.ev-split__text .ev-eyebrow{margin-bottom:20px}
.ev-split__text .ev-wp__body{margin-top:22px;font-size:1.12rem;max-width:460px}
.ev-split__media{position:relative;z-index:1;width:100%;height:clamp(320px,46vh,460px);border-radius:var(--ev-radius-2xl);overflow:hidden;background:var(--ev-ink);border:1px solid var(--ev-hair)}
@media(max-width:900px){
  .ev-split,.ev-split--rev{grid-template-columns:1fr;gap:26px}
  .ev-split--rev .ev-split__text{order:1}
  .ev-split--rev .ev-split__media{order:2}
  .ev-split__media{height:300px}
  .ev-split__ghost{font-size:6rem}
}

/* wide waypoints */
.ev-wp--wide{justify-content:center}
.ev-wp--wide .ev-wp__card{width:min(1140px,94%);text-align:center;padding:48px 40px;background:color-mix(in srgb,var(--ev-ink) 46%,transparent);backdrop-filter:blur(14px);border-radius:var(--ev-radius-2xl);border:1px solid var(--ev-hair)}
html[data-tone="bone"] .ev-wp--wide .ev-wp__card{background:color-mix(in srgb,var(--ev-surface) 72%,transparent);border-color:var(--ev-border)}
.ev-wp--wide .ev-eyebrow{justify-content:center}
.ev-wp--wide .ev-wp__body{margin-left:auto;margin-right:auto;max-width:560px}

/* services — separate items on a horizontal scroll-snap track (a second
   scroll style alongside the vertical journey) */
.ev-wp--services{flex-direction:column;justify-content:center;gap:0}
.ev-svc-head{width:min(1140px,94%);text-align:center;background:transparent!important;backdrop-filter:none!important;border:none!important;box-shadow:none!important;padding:0 20px!important}
.ev-svc-hint{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-family:var(--ev-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ev-dim)}
.ev-svc-hint .ar{color:var(--ev-ember);font-size:15px;animation:ev-nudge 1.4s var(--ev-ease-in-out) infinite}
@keyframes ev-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.ev-svctrack{display:flex;gap:18px;width:100%;max-width:100vw;box-sizing:border-box;overflow-x:auto;scroll-snap-type:x mandatory;padding:44px max(24px,calc((100vw - 1140px)/2)) 30px;scrollbar-width:thin;scrollbar-color:var(--ev-hair) transparent}
.ev-svctrack::-webkit-scrollbar{height:8px}
.ev-svctrack::-webkit-scrollbar-track{background:transparent}
.ev-svctrack::-webkit-scrollbar-thumb{background:var(--ev-hair);border-radius:9999px}
.ev-svc-item{flex:0 0 clamp(258px,78vw,330px);scroll-snap-align:center;border:1px solid var(--ev-hair);border-radius:var(--ev-radius-xl);padding:30px;color:var(--ev-bone);transition:transform var(--ev-dur-normal) var(--ev-ease-out),box-shadow var(--ev-dur-normal)}
.ev-svc-item:hover{transform:translateY(-6px);box-shadow:var(--ev-shadow-xl)}
.ev-svctrack .ev-svc-item:nth-child(odd){background:var(--ev-aubergine)}
.ev-svctrack .ev-svc-item:nth-child(even){background:var(--ev-purple)}
.ev-svctrack .ev-svc-item:nth-child(6n+4){background:var(--ev-ember);color:var(--ev-ink)}
.ev-svctrack .ev-svc-item:nth-child(6n+4) .ev-svc-card__ic{background:var(--ev-ink);color:var(--ev-ember)}
.ev-svctrack .ev-svc-item:nth-child(6n+4) p,.ev-svctrack .ev-svc-item:nth-child(6n+4) .ev-svc-card__n{color:rgba(20,16,27,.72)}
html[data-cards="aubergine"] .ev-svctrack .ev-svc-item{background:var(--ev-aubergine)!important;color:var(--ev-bone)!important}
html[data-cards="purple"] .ev-svctrack .ev-svc-item{background:var(--ev-purple)!important;color:var(--ev-bone)!important}
html[data-cards="ink"] .ev-svctrack .ev-svc-item{background:var(--ev-ink)!important;color:var(--ev-bone)!important}
html[data-cards] .ev-svctrack .ev-svc-item p{color:var(--ev-dim)!important}
html[data-cards] .ev-svctrack .ev-svc-item .ev-svc-card__n{color:var(--ev-dim-soft)!important}
html[data-cards] .ev-svctrack .ev-svc-item .ev-svc-card__ic{background:rgba(241,237,243,.12)!important;color:var(--ev-ember)!important}
.ev-svc-card__ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(241,237,243,.12);color:var(--ev-ember);margin-bottom:20px}
.ev-svc-card__ic svg{width:23px;height:23px}
/* values row — Station-style: icon over a big lowercase word */
.ev-values{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:52px 60px;margin-top:64px;width:min(1140px,94%)}
.ev-value{display:flex;flex-direction:column;align-items:center;gap:18px;width:180px;text-align:center}
.ev-value__ic{color:var(--ev-ember);transition:transform var(--ev-dur-normal) var(--ev-ease-out)}
.ev-value__ic svg{width:40px;height:40px;stroke-width:1.4}
.ev-value:hover .ev-value__ic{transform:translateY(-6px)}
.ev-value__word{font-size:clamp(1.5rem,2.4vw,2.15rem);font-weight:var(--ev-w-thin);letter-spacing:-0.02em;line-height:1;color:var(--ev-bone);transition:color var(--ev-dur-fast) var(--ev-ease-out)}
html[data-tone="bone"] .ev-value__word{color:var(--ev-ink)}
.ev-value:hover .ev-value__word{color:var(--ev-ember)}
.ev-value__desc{font-size:0.85rem;font-weight:var(--ev-w-light);line-height:1.55;color:var(--ev-dim)}
@supports (animation-timeline: view()){
  .ev-value{animation:ev-cardfade linear both;animation-timeline:view();animation-range:entry 2% entry 34%}
}
/* each service = its own full-height moment in the momentum scroll */
.ev-svc-moment{width:min(560px,90%)}
.ev-svc-moment__top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.ev-svc-moment__ic{width:60px;height:60px;flex:0 0 auto;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--ev-ember);color:var(--ev-ink)}
.ev-svc-moment__ic svg{width:28px;height:28px;stroke-width:1.6}
.ev-svc-moment__n{font-family:var(--ev-font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ev-dim)}
.ev-svc-moment__word{font-size:clamp(2.4rem,5vw,3.6rem);margin:0 0 18px;text-transform:lowercase}
.ev-svc-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.ev-svc-points li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--ev-hair);font-size:1rem;font-weight:var(--ev-w-light);color:var(--ev-bone)}
html[data-tone="bone"] .ev-svc-points li{border-top-color:var(--ev-border);color:var(--ev-text-heading)}
.ev-svc-points li .k{color:var(--ev-ember);font-family:var(--ev-font-mono);flex:0 0 auto}
/* dedicated pinned horizontal momentum-scroll section for services */
.ev-svc-scroll{position:relative}
.ev-svc-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.ev-svc-strip{display:flex;height:100%;will-change:transform}
.ev-svc-panel{position:relative;flex:0 0 100vw;height:100%;display:flex;align-items:center;justify-content:center;padding:0 clamp(24px,8vw,120px);box-sizing:border-box}
.ev-svc-ghost{position:absolute;left:clamp(10px,4vw,80px);top:50%;transform:translateY(-58%);font-family:var(--ev-font-mono);font-size:clamp(9rem,26vw,22rem);font-weight:var(--ev-w-thin);color:var(--ev-bone);opacity:.05;pointer-events:none;line-height:1}
.ev-svc-panel .ev-svc-moment{position:relative;z-index:1;width:min(620px,100%)}
.ev-svc-intro{width:min(720px,100%)}
.ev-svc-intro .ev-lede{font-size:1.15rem;max-width:520px;margin-top:6px}
.ev-svc-cue{margin-top:34px;display:inline-flex;align-items:center;gap:10px;font-family:var(--ev-font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ev-dim)}
.ev-svc-cue .ar{color:var(--ev-ember);font-size:15px;animation:ev-nudge 1.4s var(--ev-ease-in-out) infinite}
.ev-svc-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--ev-hair)}
.ev-svc-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--ev-ember)}
@media(max-width:900px){
  .ev-svc-panel{padding:0 24px}
  .ev-svc-ghost{font-size:14rem}
}
.ev-svc-item h3{margin:0 0 9px;font-size:1.28rem;font-weight:var(--ev-w-medium);letter-spacing:-0.02em}
.ev-svc-item p{margin:0;font-size:0.96rem;font-weight:var(--ev-w-light);line-height:1.6;color:var(--ev-dim)}
.ev-svc-card__n{font-family:var(--ev-font-mono);font-size:11px;letter-spacing:.1em;color:var(--ev-dim-soft);display:block;margin-bottom:16px}

/* platform */
.ev-plat{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;margin-top:48px;text-align:left}
.ev-plat__media{position:relative;width:100%;height:460px;border-radius:var(--ev-radius-2xl);overflow:hidden;background:var(--ev-ink)}
.ev-plat__list{list-style:none;margin:28px 0 0;padding:0}
.ev-plat__list li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--ev-hair)}
html[data-tone="bone"] .ev-plat__list li{border-top-color:var(--ev-border)}
.ev-plat__list li .k{color:var(--ev-ember);font-family:var(--ev-font-mono);font-size:13px;padding-top:3px}
.ev-plat__list li .t b{display:block;font-weight:var(--ev-w-medium);font-size:1.04rem;letter-spacing:-0.01em;margin-bottom:4px;color:var(--ev-bone)}
html[data-tone="bone"] .ev-plat__list li .t b{color:var(--ev-text-heading)}
.ev-plat__list li .t span{font-weight:var(--ev-w-light);font-size:0.95rem;color:var(--ev-dim)}
/* stop 5 — gallery grid (fresh) */
.ev-grid{width:min(1180px,94%);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:14px;margin-top:44px}
.ev-grid__cell{position:relative;margin:0;overflow:hidden;border-radius:var(--ev-radius-lg);background:var(--ev-ink)}
.ev-grid__cell--a{grid-column:span 4;grid-row:span 2}
.ev-grid__cell--b{grid-column:span 2;grid-row:span 1}
.ev-grid__cell--c{grid-column:span 2;grid-row:span 1}
.ev-grid__cell--d{grid-column:span 6;grid-row:span 1}
/* stop 6 — numbers (fresh) */
@media(max-width:900px){
  .ev-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .ev-grid__cell--a{grid-column:span 2;grid-row:span 2}
  .ev-grid__cell--b,.ev-grid__cell--c{grid-column:span 1}
  .ev-grid__cell--d{grid-column:span 2}
}
/* reveal-on-scroll base (details animate in) */
.ev-anim{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ev-ease-out),transform .7s var(--ev-ease-out)}
.ev-anim.in{opacity:1;transform:none}
/* stop 4 — open, box-free platform layout */
.ev-platform-open{width:min(1180px,94%);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,5vw,60px);row-gap:28px;align-items:center;text-align:left}
.ev-platform-open__head{grid-column:1;grid-row:1}
.ev-platform-open__head .ev-eyebrow{margin-bottom:14px}
.ev-platform-open__head .ev-lede{margin:16px 0 0;max-width:440px}
.ev-platform-open__media{position:relative;grid-column:2;grid-row:1 / span 2;height:clamp(340px,46vh,480px);border-radius:var(--ev-radius-2xl);overflow:hidden;background:var(--ev-ink);border:1px solid var(--ev-hair)}
.ev-platform-open__list{grid-column:1;grid-row:2;margin:0}
.ev-platform-open__list li:first-child{border-top:none}
/* stop 5 — full-bleed edge-to-edge photo band (no boxes, no radius) */
/* stop 6 — editorial number ledger (box-free, no dividers) */
@media(max-width:900px){
  .ev-platform-open{grid-template-columns:1fr}
  .ev-platform-open__head,.ev-platform-open__media,.ev-platform-open__list{grid-column:1}
  .ev-platform-open__media{grid-row:auto;height:300px}
  .ev-platform-open__list{grid-row:auto}
}

/* stats */

/* gallery */

/* ---- FOOTER ---- */
.ev-foot{position:relative;z-index:1;background:var(--ev-ink);color:var(--ev-bone);padding:170px 0 40px;margin-top:40px;border-top:1px solid var(--ev-hair)}
.ev-foot__cta{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:var(--ev-w-thin);letter-spacing:-0.03em;line-height:1.02;max-width:760px;margin:0 auto 40px;text-align:center;color:var(--ev-bone)}
.ev-foot__btnrow{display:flex;justify-content:center;margin-bottom:96px}
.ev-foot__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--ev-hair)}
.ev-foot__col h4{font-family:var(--ev-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ev-dim);margin:0 0 20px;font-weight:var(--ev-w-medium)}
.ev-foot__col a,.ev-foot__col p{display:block;color:var(--ev-bone);font-weight:var(--ev-w-light);font-size:1rem;margin:0 0 13px;line-height:1.5;opacity:.86}
.ev-foot__col a:hover{opacity:1;color:var(--ev-ember)}
.ev-foot__mark{font-weight:var(--ev-w-medium);letter-spacing:var(--ev-track-wordmark);font-size:clamp(3rem,10vw,7rem);line-height:1;color:var(--ev-bone)}
.ev-foot__mark .d{color:var(--ev-ember)}
.ev-foot__bottom{display:flex;justify-content:space-between;align-items:flex-end;padding-top:40px;flex-wrap:wrap;gap:16px}
.ev-foot__bottom span{font-family:var(--ev-font-mono);font-size:12px;letter-spacing:.06em;color:var(--ev-dim)}

@media(max-width:900px){
  .ev-shell{padding:0 22px}
  .ev-nav__links{display:none}
  .ev-wp{min-height:auto;padding:70px 0}
  .ev-wp[data-side] .ev-wp__card,.ev-wp[data-side="right"] .ev-wp__card{width:100%;text-align:left;padding:30px}
  .ev-wp[data-side="right"] .ev-eyebrow{flex-direction:row}
  .ev-svcgrid{grid-template-columns:1fr}
  .ev-plat{grid-template-columns:1fr;gap:32px}
  .ev-plat__media{height:340px}
  .ev-foot__top{grid-template-columns:1fr;gap:40px}
}

/* ============================================================
   LIGHT CONTENT THEME (transparent over the transitioning stage)
   The nav goes white; the whole journey is TRANSPARENT so the
   fixed ember route + travelling dot stay visible the whole way
   down, and the creative background colour transition (driven by
   scene3d.js via --ev-stage-c) shows through. Only real surfaces
   (media, cards) are opaque; brand accent is ember, purple is
   rationed hard.
   ============================================================ */
/* --ev-card / --ev-card-soft now live in the design-system color tokens */

/* NAV → white */
.ev-nav{background:#fff;border-bottom:1px solid var(--ev-border)}
.ev-nav--scrolled{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--ev-border);box-shadow:0 1px 22px rgba(20,16,27,.07)}
.ev-nav__links a{color:var(--ev-text)}
.ev-nav__links a:hover{color:var(--ev-ember)}
.ev-lang,.ev-lang button{color:var(--ev-text-muted)}
.ev-lang button.on{color:var(--ev-text)}
.ev-lang button:hover{color:var(--ev-ember)}

/* JOURNEY → transparent; dark text on the light stage; ember accents */
.ev-journey{background:transparent;color:var(--ev-text)}
.ev-wp[data-bg]{background:transparent}
.ev-journey .ev-h2,.ev-journey .ev-wp__title{color:var(--ev-text)}
.ev-journey .ev-lede{color:var(--ev-text-secondary)}
.ev-journey .ev-eyebrow{color:var(--ev-text-secondary)}
.ev-journey .purpleword{color:var(--ev-ember)}
.ev-journey .ev-split__ghost{color:var(--ev-ink);opacity:.06}
.ev-journey .ev-split__media{background:var(--ev-card);border-color:var(--ev-border);box-shadow:0 26px 60px rgba(20,16,27,.10)}
/* neutralise the old dark glass on wide cards (gallery heading etc.) */
.ev-journey .ev-wp--wide .ev-wp__card{background:transparent;border:none;backdrop-filter:none;box-shadow:none;padding:0}

/* NEW — how it works (process steps) */
.ev-process{width:min(1140px,94%)}
.ev-process__head{text-align:center;margin-bottom:clamp(32px,4.4vw,50px)}
.ev-process__head .ev-eyebrow{justify-content:center;margin-bottom:16px}
.ev-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px)}
.ev-step{position:relative;padding:clamp(30px,3vw,40px);border-radius:var(--ev-radius-2xl);background:var(--ev-card);border:1px solid var(--ev-border);box-shadow:0 20px 50px rgba(20,16,27,.09)}
.ev-step__n{font-family:var(--ev-font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ev-text-muted);display:block;margin-bottom:22px}
.ev-step__ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--ev-ink);color:var(--ev-ember);margin-bottom:22px;box-shadow:0 8px 20px rgba(20,16,27,.16)}
.ev-step__ic svg{width:25px;height:25px;stroke-width:1.6}
.ev-step h3{margin:0 0 10px;font-size:clamp(1.2rem,1.7vw,1.4rem);font-weight:var(--ev-w-medium);letter-spacing:-0.02em;color:var(--ev-text)}
.ev-step p{margin:0;font-size:1rem;line-height:1.6;color:var(--ev-text-secondary);font-weight:var(--ev-w-light)}
@media(max-width:900px){.ev-steps{grid-template-columns:1fr}}

/* SERVICES → transparent band; image on every card */
.ev-svc-scroll{background:transparent}
.ev-svc-ghost{color:var(--ev-ink);opacity:.06}
.ev-svc-panel .ev-svc-moment--media{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,60px);align-items:center;width:min(1080px,100%)}
.ev-svc-media{position:relative;height:clamp(300px,54vh,450px);border-radius:var(--ev-radius-2xl);overflow:hidden;background:var(--ev-card);border:1px solid var(--ev-border);box-shadow:0 26px 60px rgba(20,16,27,.12)}
.ev-svc-moment__word{color:var(--ev-text)}
.ev-svc-moment__n{color:var(--ev-text-muted)}
.ev-svc-points li{border-top-color:var(--ev-border);color:var(--ev-text)}
.ev-svc-intro .ev-lede{color:var(--ev-text-secondary)}
@media(max-width:900px){.ev-svc-panel .ev-svc-moment--media{grid-template-columns:1fr;gap:22px}.ev-svc-media{height:240px}}

/* PLATFORM → light */
.ev-platform-open__media{background:var(--ev-card);border-color:var(--ev-border);box-shadow:0 26px 60px rgba(20,16,27,.10)}
.ev-journey .ev-plat__list li{border-top-color:var(--ev-border)}
.ev-journey .ev-plat__list li .t b{color:var(--ev-text)}
.ev-journey .ev-plat__list li .t span{color:var(--ev-text-secondary)}

/* GALLERY → light */
.ev-grid__cell{background:var(--ev-card)}

/* NUMBERS → dark text on the transitioning stage */

/* NEW — testimonials → floating cards (transparent section, dot shows through) */
.ev-wp--band{padding:clamp(56px,8vh,96px) 0;display:flex;justify-content:center}
@media(max-width:900px){.ev-testi__grid{grid-template-columns:1fr}}

/* ---- TRUSTED ON THE GROUND — the closing argument.
   An ink stage: the one dark moment in the scroll, ramping the page into the
   sunset and footer. Structure is drawn with light, never a solid border. ---- */
.ev-trust{position:relative;padding:clamp(90px,13vh,150px) 0}
.ev-trust__in{width:min(1180px,94%);margin:0 auto;position:relative;z-index:1}
.ev-trust__head{margin-bottom:clamp(34px,4.6vw,54px);max-width:22ch}
.ev-trust .ev-eyebrow{color:rgba(241,237,243,.62)}
.ev-trust .ev-eyebrow .dot{background:var(--ev-ember)}
.ev-trust__title{font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:var(--ev-w-thin);letter-spacing:-0.035em;line-height:1;margin:18px 0 0;color:var(--ev-bone);text-wrap:balance}
.ev-trust__title .ital{font-style:italic}
.ev-trust__title .emberword{color:var(--ev-ember)}
.ev-trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);align-items:start}
/* Alternating drop gives the row rhythm instead of four identical boxes. */
.ev-trust__card:nth-child(even){margin-top:clamp(24px,4vw,56px)}
.ev-trust__card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,2.4vw,34px) clamp(22px,2vw,28px) clamp(30px,2.6vw,38px);border-radius:var(--ev-radius-2xl);background:rgba(241,237,243,.045);border:1px solid rgba(241,237,243,.11);backdrop-filter:blur(8px);overflow:hidden;transition:transform var(--ev-dur-reveal,300ms) var(--ev-ease,cubic-bezier(.22,1,.36,1)),background 150ms linear,border-color 150ms linear}
.ev-trust__card:hover{transform:translateY(-6px);background:rgba(241,237,243,.075);border-color:rgba(232,114,44,.42)}
.ev-trust__n{font-family:var(--ev-font-mono);font-size:11px;letter-spacing:.18em;color:rgba(241,237,243,.4)}
.ev-trust__ic{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(232,114,44,.14);color:var(--ev-ember);flex:0 0 auto}
.ev-trust__ic svg{width:21px;height:21px;stroke-width:1.5}
.ev-trust__card h3{margin:6px 0 0;font-size:1.14rem;font-weight:var(--ev-w-medium,500);letter-spacing:-0.015em;line-height:1.25;color:var(--ev-bone);text-wrap:balance}
.ev-trust__card p{margin:0;font-size:.95rem;font-weight:var(--ev-w-light);line-height:1.55;color:rgba(241,237,243,.6);text-wrap:pretty}
/* Ember rule sweeps in on hover — the only motion, and it earns it. */
.ev-trust__rule{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ev-ember);transform:scaleX(0);transform-origin:left;transition:transform 300ms cubic-bezier(.22,1,.36,1)}
.ev-trust__card:hover .ev-trust__rule{transform:scaleX(1)}
@media(max-width:1080px){
  .ev-trust__grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .ev-trust__card:nth-child(even){margin-top:0}
  .ev-trust__card:nth-child(2),.ev-trust__card:nth-child(4){margin-top:clamp(20px,4vw,44px)}
}
@media(max-width:620px){
  .ev-trust__grid{grid-template-columns:1fr}
  .ev-trust__card,.ev-trust__card:nth-child(even),.ev-trust__card:nth-child(2),.ev-trust__card:nth-child(4){margin-top:0}
}

/* Arabic wordmark set as type (the Latin Wordmark component is Latin-only).
   Ember nuqta-as-dot keeps the two lockups at the same optical weight. */
.ev-nav__markar{font-size:22px;font-weight:var(--ev-w-medium);letter-spacing:0;color:var(--ev-text);line-height:1}
.ev-nav__markar .d,.ev-foot__sig .d{color:var(--ev-ember)}
.ev-foot__sig{font-size:20px;font-weight:var(--ev-w-medium);letter-spacing:var(--ev-track-wordmark);color:var(--ev-bone);line-height:1}

/* ============================================================
   ARABIC / RTL — a sibling layout, not a mirrored afterthought.
   Three rules govern it: (1) Arabic is never letter-spaced or
   uppercased (it breaks the joins), (2) there is no italic —
   emphasis is weight, (3) IBM Plex Sans Arabic carries both
   scripts, so mono labels fall back to sans when they hold
   Arabic while digits stay mono.
   ============================================================ */
[dir=rtl] body{line-height:var(--ev-leading-arabic,1.8)}
[dir=rtl] .ital{font-style:normal;font-weight:var(--ev-w-medium)}
[dir=rtl] .ev-h2,[dir=rtl] .ev-hero__tag,[dir=rtl] .ev-trust__title,[dir=rtl] .ev-foot__cta{font-weight:var(--ev-w-light);letter-spacing:0;line-height:1.3}
[dir=rtl] .ev-hero__mark,[dir=rtl] .ev-foot__mark{letter-spacing:0;line-height:1.15}
[dir=rtl] .ev-hero__mark{font-size:clamp(3.4rem,12vw,10rem)}
[dir=rtl] .ev-eyebrow,[dir=rtl] .ev-step__n,[dir=rtl] .ev-svc-moment__n,[dir=rtl] .ev-svc-cue,[dir=rtl] .ev-hero__cue .lbl,[dir=rtl] .ev-grid__cell figcaption,[dir=rtl] .ev-foot__col h4,[dir=rtl] .ev-foot__bottom span,[dir=rtl] .ev-trust__n,[dir=rtl] .ev-modal__close{font-family:var(--ev-font-sans);letter-spacing:0;text-transform:none}
[dir=rtl] .ev-lede,[dir=rtl] .ev-svc-points li,[dir=rtl] .ev-step p,[dir=rtl] .ev-trust__card p{line-height:1.85}
[dir=rtl] .ev-svc-moment__word{text-transform:none}
/* mirrored asymmetries */
[dir=rtl] .ev-split,[dir=rtl] .ev-svc-wp .ev-wp__card,[dir=rtl] .ev-plat,[dir=rtl] .ev-nums,[dir=rtl] .ev-platform-open,[dir=rtl] .ev-stat{text-align:right!important}
[dir=rtl] .ev-wp[data-side="right"] .ev-wp__card{text-align:left}
[dir=rtl] .ev-split__ghost{left:auto;right:-0.06em}
[dir=rtl] .ev-split__ghost--right{right:auto;left:-0.06em}
[dir=rtl] .ev-svc-ghost{left:auto;right:clamp(10px,4vw,80px)}
[dir=rtl] .ev-svc-progress span,[dir=rtl] .ev-trust__rule{transform-origin:right}
[dir=rtl] .ev-hero__cue,[dir=rtl] .ev-svc-embed__cue{left:auto;right:50%;transform:translateX(50%)}
[dir=rtl] .ev-svc-embed__cue{transform:translateX(50%) translateY(6px)}
[dir=rtl] .ev-svc-embed:hover .ev-svc-embed__cue,[dir=rtl] .ev-svc-embed:focus-visible .ev-svc-embed__cue{transform:translateX(50%) translateY(0)}
[dir=rtl] .ev-foot__col a[dir=ltr]{text-align:right;direction:ltr;unicode-bidi:embed}

/* Artwork. Every media container (.ev-split__media, .ev-grid__cell,
   .ev-platform-open__media, .ev-svc-media) is already position:relative with a
   fixed height and overflow:hidden, so one absolute rule covers all of them —
   this is what the old `image-slot` selectors did, minus the component. */
.ev-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* embedded page preview + modal */
.ev-svc-embed{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.ev-svc-embed__cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(6px);opacity:0;transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1);font-family:var(--ev-font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:8px 16px;border-radius:999px;background:var(--ev-ember,#E8722C);color:#fff;white-space:nowrap}
.ev-svc-embed:hover .ev-svc-embed__cue,.ev-svc-embed:focus-visible .ev-svc-embed__cue{opacity:1;transform:translateX(-50%) translateY(0)}
.ev-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);background:rgba(20,16,27,.72);backdrop-filter:blur(6px);animation:evModalIn .24s cubic-bezier(.22,1,.36,1) both}
@keyframes evModalIn{from{opacity:0}to{opacity:1}}
.ev-modal__panel{display:flex;flex-direction:column;width:min(1340px,100%);height:min(92vh,100%);border-radius:var(--ev-radius-2xl,20px);overflow:hidden;background:var(--ev-card,#fff);box-shadow:0 40px 100px rgba(20,16,27,.45);animation:evPanelIn .3s cubic-bezier(.22,1,.36,1) both}
@keyframes evPanelIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ev-modal__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--ev-border,rgba(20,16,27,.1));background:var(--ev-bone,#F6F2EB)}
.ev-modal__title{font-size:15px;font-weight:500;color:var(--ev-text,#1A1523)}
.ev-modal__close{font-family:var(--ev-font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px;border-radius:999px;border:1px solid var(--ev-border,rgba(20,16,27,.14));background:none;color:var(--ev-text,#1A1523);cursor:pointer;transition:background .2s,color .2s}
.ev-modal__close:hover{background:var(--ev-ember,#E8722C);border-color:var(--ev-ember,#E8722C);color:#fff}
.ev-modal__frame{flex:1;width:100%;border:0;display:block}

/* demo request form — narrow panel variant of the same modal.
   The default panel is sized for the full-page iframe preview; a form wants to
   be its own height, not 92vh of empty white. */
.ev-modal__panel--form{width:min(560px,100%);height:auto;max-height:92vh}
.ev-dform{flex:1;overflow-y:auto;padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:16px}
.ev-dform__lede{font-size:14px;line-height:1.6;color:var(--ev-text-secondary,#4A4453);margin:0}
.ev-df{display:flex;flex-direction:column;gap:7px}
.ev-df__lbl{display:flex;align-items:baseline;gap:8px;font-family:var(--ev-font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ev-text-muted,#6B6472)}
.ev-df__opt{font-size:9px;letter-spacing:.1em;opacity:.7;text-transform:none}
.ev-df__in{width:100%;font:inherit;font-size:15px;color:var(--ev-text,#1A1523);background:var(--ev-surface,#FBFAFC);border:1px solid var(--ev-border,rgba(20,16,27,.14));border-radius:var(--ev-radius-md,10px);padding:11px 13px;transition:border-color .18s,box-shadow .18s;resize:vertical}
.ev-df__in::placeholder{color:var(--ev-text-muted,#6B6472);opacity:.6}
.ev-df__in:focus{outline:none;border-color:var(--ev-purple,#6B3FA0);box-shadow:var(--ev-shadow-focus,0 0 0 3px rgba(107,63,160,.16))}
.ev-df__in:user-invalid{border-color:var(--ev-error,#C0392B)}
/* Honeypot: out of the layout, off the tab order, invisible to a human. */
.ev-df__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ev-dform__err{margin:0;font-size:13px;line-height:1.5;color:var(--ev-error-ink,#8C2A1E);background:var(--ev-error-bg,#FDECEA);border-radius:var(--ev-radius-md,10px);padding:10px 12px}
.ev-dform__go{margin-top:2px;font-family:var(--ev-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:14px 22px;border:0;border-radius:999px;background:var(--ev-purple,#6B3FA0);color:#fff;cursor:pointer;transition:background .2s,transform .2s}
.ev-dform__go:hover:not(:disabled){background:var(--ev-ember,#E8722C);transform:translateY(-1px)}
.ev-dform__go:disabled{opacity:.6;cursor:default}
.ev-dform--ok{justify-content:center;text-align:center;padding:clamp(34px,6vw,56px) clamp(20px,3vw,30px);gap:10px}
.ev-dform__oktitle{margin:0;font-size:clamp(1.4rem,3vw,26px);font-weight:500;color:var(--ev-text,#1A1523)}
/* Arabic: no tracking, no uppercase, looser leading — same rule as everywhere else. */
[dir=rtl] .ev-df__lbl,[dir=rtl] .ev-dform__go{font-family:var(--ev-font-sans);letter-spacing:0;text-transform:none}
[dir=rtl] .ev-dform__go{font-size:14px}
[dir=rtl] .ev-dform__lede,[dir=rtl] .ev-dform__err{line-height:1.85}
/* Email and phone stay LTR even in an RTL form, like the footer's tel:/mailto:. */
[dir=rtl] .ev-df__in[dir=ltr]{text-align:right;direction:ltr;unicode-bidi:embed}

/* ---------------------------------------------------------------------------
   Mobile-only adjustments. 900px is the breakpoint the rest of this file
   already uses. Nothing here applies above it — the desktop layout is
   deliberately untouched.
   --------------------------------------------------------------------------- */
@media(max-width:900px){
  /* The header stops following the scroll. `absolute` rather than `static`:
     there is no positioned ancestor, so it anchors to the top of the document
     and keeps overlaying the hero exactly as it does now — it just scrolls
     away instead of pinning. `static` would put it back in flow and push the
     hero down. .ev-nav--scrolled still toggles, but by the time it does the
     bar is off-screen, so it costs nothing. */
  .ev-nav{position:absolute}

  /* Gallery: heading above the images. .ev-wp is a flex row, and the gallery
     is the one --wide section with two children (the heading card and the
     image grid), so they sit side by side. Scoped to this section — the other
     --wide sections have a single child and already read correctly. */
  #ground{flex-direction:column;align-items:center}

  /* Service cards at 85%. `zoom`, not `transform:scale`: zoom participates in
     layout, so the card's footprint shrinks with it. A transform would leave
     the original box behind and open a gap around every card. The panel is
     flex:0 0 100vw, so the strip's scrollWidth — and the travel maths in
     journey.jsx that reads it — are unaffected either way. */
  .ev-svc-panel .ev-svc-moment{zoom:.85}

  /* The split sections lost their gutter on mobile: .ev-wp[data-side] .ev-wp__card
     sets width:100%, and .ev-split answers with padding:0!important, so the body
     copy ran flush to both screen edges. !important is needed to beat that. */
  .ev-wp--split .ev-split{padding-left:24px!important;padding-right:24px!important}
}

/* ---------------------------------------------------------------------------
   Contrast. This page floats content over a live 3D scene, so anything resting
   on a translucent scrim inherits whatever the scene is doing underneath — the
   trust copy measured 3.9:1 at the median and 1.6:1 at its worst frame. Text
   legibility cannot be a function of an animation frame, so these surfaces get
   real opacity and the copy gets its own back.
   --------------------------------------------------------------------------- */
.ev-trust__card{background:color-mix(in srgb,var(--ev-ink) 66%,transparent);border-color:rgba(241,237,243,.16)}
.ev-trust__card:hover{background:color-mix(in srgb,var(--ev-ink) 74%,transparent)}
.ev-trust__card p{color:rgba(241,237,243,.86)}
.ev-foot__col h4{color:rgba(241,237,243,.78)}

/* White on ember is 3.1:1, below AA at these sizes. Ink on ember is 7.4:1 —
   and it is already what the design system's primary button uses, so this is a
   consistency fix as much as a contrast one. */
.ev-svc-embed__cue,.ev-modal__close:hover,.ev-dform__go:hover:not(:disabled){color:var(--ev-ink)}

/* ---------------------------------------------------------------------------
   Type floor. Nothing functional below 11px, and the section eyebrow size moves
   out of eight inline 30px literals into a role that can actually scale — which
   also stops the kicker rivalling its own heading on a phone.
   --------------------------------------------------------------------------- */
.ev-eyebrow--lg{font-size:clamp(17px,2.1vw,30px)}
.ev-hero__cue .lbl,.ev-svc-embed__cue,.ev-modal__close{font-size:11px}
/* 16px is the floor that stops iOS Safari force-zooming a focused field. */
.ev-df__in{font-size:16px}

/* ---------------------------------------------------------------------------
   Touch, keyed to pointer type rather than width: a touchscreen laptop needs
   these as much as a phone does, and a mouse in a narrow window does not.
   --------------------------------------------------------------------------- */
@media (pointer:coarse){
  .ev-lang{gap:2px}
  .ev-lang button{min-width:44px;min-height:44px;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
  .ev-nav__links a,.ev-foot__col a{min-height:44px;display:inline-flex;align-items:center}
  .ev-btn,.ev-modal__close{min-height:44px}
  .ev-modal__close{display:inline-flex;align-items:center}
  .ev-dform__go{min-height:48px}
  .ev-df__in{min-height:44px}
}

/* ---------------------------------------------------------------------------
   Focus. Every interactive element had none — keyboard users could not see
   where they were anywhere on the page. Ember passes 4.6:1 on the dark
   sections; the outer ink halo is what keeps the ring visible on the light
   ones, where ember alone would sit at 2.6:1.
   --------------------------------------------------------------------------- */
:focus-visible{outline:3px solid var(--ev-ember);outline-offset:2px;box-shadow:0 0 0 6px rgba(20,16,27,.28)}
.ev-modal__panel:focus{outline:none}

/* Skip link: hidden until focused, then pinned top-left over everything. */
.ev-skip{position:fixed;top:10px;left:10px;z-index:1000;padding:12px 20px;border-radius:var(--ev-radius-full);background:var(--ev-ember);color:var(--ev-ink);font-family:var(--ev-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transform:translateY(-160%);transition:transform .2s var(--ev-ease-out)}
.ev-skip:focus{transform:none}
[dir=rtl] .ev-skip{left:auto;right:10px;font-family:var(--ev-font-sans);letter-spacing:0;text-transform:none}

/* ---------------------------------------------------------------------------
   Reduced motion. Order matters here: the blanket kill comes first, then the
   content is explicitly restored to its finished state. The reveal system
   starts at opacity:0 and is animated in, so disabling animation alone would
   leave a blank page — the classic "accessible" fix that hides the site.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}

  /* Restore, don't hide. */
  .ev-anim{opacity:1!important;transform:none!important}
  .ev-wp__card{animation:none!important;opacity:1!important;transform:none!important}

  /* Decorative loops stop outright — these carry no state. */
  .ev-hero__cue .dash,.ev-hero__cue .bead,.ev-svc-cue .ar,.ev-eyebrow .dot{animation:none!important}

  /* The services strip is READ by travelling sideways, so freezing it would
     strand seven of eight panels off-screen. Un-pin it instead and let the
     panels stack into ordinary vertical scroll — same content, same order,
     no scroll-jacking. journey.jsx skips its rAF loop under the same query. */
  .ev-svc-scroll{height:auto!important}
  .ev-svc-sticky{position:static;height:auto;display:block;overflow:visible}
  .ev-svc-strip{flex-direction:column;transform:none!important;height:auto;will-change:auto}
  .ev-svc-panel{flex:none;width:100%;height:auto;padding-top:56px;padding-bottom:56px}
  .ev-svc-panel--intro{padding-bottom:0}
  .ev-svc-progress{display:none}
  .ev-svc-moment,.ev-svc-panel .ev-svc-moment--media{width:min(1080px,92%);margin-inline:auto}
}