/*
Theme Name: AlAzur_Original
Theme URI: https://www.alazur.ae
Author: Al Azur
Author URI: https://www.alazur.ae
Description: Al Azur "Beauty Growth Platform" landing — ink-black ground, silver accents, a canvas-particle hero, a horizontal-scroll story, and an animated West↔GCC network map. Every headline, paragraph, stat, and list is editable from Appearance → Customize in both English and Arabic, with no plugin. Bilingual by design: the English front page and a separate Arabic (RTL) page share one template, with an automatic language switch in the nav.
Version: 2.2.9
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alazur-original
Tags: one-column, full-width-template, custom-logo
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#060608;
  --s1:#0b0b10;
  --s2:#111118;
  --s3:#18181f;
  --silver:#b8bcc8;
  --silver2:#d4d8e4;
  --silver3:#e8eaf0;
  --silver-soft:rgba(184,188,200,0.1);
  --silver-line:rgba(184,188,200,0.18);
  --silver-dim:rgba(184,188,200,0.07);
  --white:rgba(255,255,255,0.92);
  --mid:rgba(255,255,255,0.38);
  --dim:rgba(255,255,255,0.38);
  --line:rgba(255,255,255,0.07);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",system-ui,sans-serif;
}
/* No global scroll-behavior:smooth — it turned the post-submit jump to #contact
   into a long animated scroll from the top of the page. The nav and hero buttons
   request smooth explicitly in JS (scrollIntoView), so they still animate. */
body{background:var(--bg);color:var(--white);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;
  transition:background .4s,border-color .4s;
  background:transparent;border-bottom:1px solid transparent;
}
nav.scrolled{background:rgba(6,6,8,.92);backdrop-filter:blur(20px);border-bottom-color:var(--line)}
.nav-logo img{height:26px;width:auto;display:block;opacity:.92}
.nav-cta{font-size:.75rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--silver2);text-decoration:none;border:1px solid var(--silver-line);padding:.5rem 1.25rem;transition:all .2s;cursor:pointer;background:none;font-family:var(--sans)}
.nav-cta:hover{background:var(--silver-soft)}

/* HERO */
.hero{
  height:100vh;min-height:700px;
  display:flex;flex-direction:column;justify-content:flex-start;
  position:relative;overflow:hidden;padding:0 3rem 5rem;
}
/* The copy used to be pinned to the bottom of a box that is always exactly one
   viewport tall, so every leftover pixel of height collected in a single lump
   above the eyebrow. The h1 scales on WIDTH (9.5vw) while the box is sized by
   HEIGHT, so a window that is narrow for its height left an enormous void —
   490px on a 768x1024 tablet, 362px at 1278x905, i.e. 40-48% of the screen.
   This spacer absorbs the slack instead and stops growing at 18rem, which holds
   the gap below the fixed 64px nav to ~224px at any size. Whatever is left over
   falls below the copy, where the scroll hint already lives.
   Proportions that were already good are untouched: at 1440x790 the free space
   is under the cap, so the spacer takes all of it and the result is identical to
   the old bottom-pinned layout.
   It also fixes an overflow: at short wide windows (1920x700) the old flex-end
   pushed the eyebrow 30px past the top of an overflow:hidden box and clipped it.
   Inert on phones — the max-width:600px block sets .hero to height:auto, so
   there is no free space for the spacer to claim. */
.hero::before{content:"";display:block;flex:1 1 auto;max-height:18rem}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-copy{position:relative;z-index:2;max-width:1100px;width:100%}
.hero-tag{font-size:.625rem;font-weight:300;letter-spacing:.26em;text-transform:uppercase;color:var(--silver);margin-bottom:2.5rem;display:flex;align-items:center;gap:.875rem;opacity:.8}
.hero-tag::before{content:"";display:block;width:24px;height:1px;background:var(--silver)}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(4.5rem,9.5vw,11rem);
  font-weight:300;line-height:.88;letter-spacing:-.03em;
  color:var(--white);margin-bottom:3rem;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--white)}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.hero-desc{font-size:.9375rem;font-weight:300;line-height:1.85;color:var(--mid);max-width:380px}
.hero-desc strong{color:var(--white);font-weight:400}
.hero-actions{display:flex;gap:1rem;align-items:center;flex-shrink:0}
.btn-primary{background:var(--silver2);color:#06060A;padding:.875rem 2.25rem;font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-block;transition:all .2s;border:none;cursor:pointer;font-family:var(--sans)}
.btn-primary:hover{background:var(--silver3)}
.scroll-hint{position:absolute;bottom:2.5rem;right:3rem;z-index:2;display:flex;align-items:center;gap:.625rem;opacity:.35}
.scroll-hint span{font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
.scroll-line{width:40px;height:1px;background:var(--white);transform-origin:left;animation:sp 2s ease infinite}
@keyframes sp{0%,100%{transform:scaleX(1);opacity:.4}50%{transform:scaleX(.35);opacity:.9}}

/* ROUTE STRIP */
.route-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--s1);padding:2rem 3rem}
.route-strip-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.rt-node{text-align:center;padding:0 1.75rem;flex-shrink:0}
.rt-dot{width:7px;height:7px;background:var(--silver);border-radius:50%;margin:0 auto .625rem;box-shadow:0 0 14px rgba(184,188,200,.4)}
.rt-city{font-family:var(--serif);font-size:.9375rem;font-weight:300;color:var(--white);letter-spacing:.04em}
.rt-tag{font-size:.45rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:.2rem}
.rt-arrow{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1;max-width:100px}
.rt-arrow-line{width:100%;height:1px;background:linear-gradient(90deg,var(--silver-line),rgba(184,188,200,.25))}
.rt-arrow-both{font-size:.45rem;color:var(--silver);opacity:.4;letter-spacing:.04em;white-space:nowrap}

/* Route strip — phone-only vertical rail, swapped in for .route-strip-inner at
   the 600px breakpoint. Four nodes plus arrows never fit across a phone; going
   vertical buys the room to print the direction labels as words again. */
.route-rail{display:none}
.rr-item{display:grid;grid-template-columns:24px 1fr;column-gap:1.125rem}
.rr-mark{position:relative;display:flex;justify-content:center}
.rr-dot{flex:0 0 11px;align-self:flex-start;width:11px;height:11px;margin-top:5px;border-radius:50%;background:var(--silver);box-shadow:0 0 0 5px var(--silver-dim),0 0 14px rgba(184,188,200,.4)}
/* Spans the row, whose height the body cell's padding sets. */
.rr-line{position:absolute;top:21px;bottom:-5px;left:50%;width:1px;margin-left:-.5px;background:var(--silver-line)}
.rr-body{padding-bottom:1.625rem}
.rr-item:last-child .rr-body{padding-bottom:0}
.rr-city{font-family:var(--serif);font-size:1.625rem;font-weight:300;line-height:1.05;letter-spacing:-.005em;color:var(--white)}
.rr-role{margin-top:.5rem;font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.rr-flow{margin-top:1.375rem;display:flex;flex-direction:column;gap:.4375rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.6875rem 0}
.rr-flow-row{display:flex;align-items:center;gap:.625rem;font-size:.6875rem;letter-spacing:.05em;color:var(--dim)}
.rr-glyph{font-size:.75rem;color:var(--silver);opacity:.65}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-cell{padding:2.5rem 3rem;border-right:1px solid var(--line)}
.stat-cell:last-child{border-right:none}
.stat-n{font-family:var(--serif);font-size:3.75rem;font-weight:300;letter-spacing:-.04em;color:var(--white)}
.stat-l{font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:.375rem}

/* MARQUEE */
.marquee-sec{border-bottom:1px solid var(--line);overflow:hidden;height:44px;display:flex;align-items:center;background:var(--bg)}
.marquee-inner{display:flex;animation:mq 40s linear infinite;white-space:nowrap}
.mq-item{padding:0 2.5rem;font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.75rem}
.mq-sep{color:var(--silver);font-size:.375rem;opacity:.4}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HSCROLL */
.hscroll-outer{position:relative;height:400vh}
.hscroll-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hscroll-track{display:flex;will-change:transform}
.hscroll-slide{min-width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 3rem;flex-shrink:0;position:relative}
.hs-label{font-size:.5625rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--silver);margin-bottom:2.5rem;display:flex;align-items:center;gap:.75rem}
.hs-label::before{content:"";width:20px;height:1px;background:var(--silver)}
.hs-ghost-num{font-family:var(--serif);font-size:clamp(6rem,15vw,18rem);font-weight:300;line-height:.85;color:rgba(184,188,200,.35);position:absolute;right:3rem;bottom:4rem;letter-spacing:-.04em;pointer-events:none;user-select:none}
.hs-h{font-family:var(--serif);font-size:clamp(3.25rem,6vw,7rem);font-weight:300;line-height:.92;letter-spacing:-.035em;color:var(--white);max-width:700px;margin-bottom:1.75rem}
.hs-h em{font-style:italic;font-weight:400;color:var(--white)}
.hs-body{font-size:.9375rem;font-weight:300;line-height:1.9;color:var(--mid);max-width:520px}
.hs-tag{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--silver-line);padding:.3125rem .875rem;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);margin-bottom:1.5rem}
.hs-slide-rule{position:absolute;top:0;left:3rem;right:3rem;height:1px;background:var(--line)}
.hs-progress{position:absolute;bottom:3rem;left:3rem;display:flex;align-items:center;gap:1.5rem}
.hs-prog-track{width:100px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hs-prog-fill{position:absolute;top:0;left:0;height:100%;background:var(--silver);width:20%;transition:width .08s linear}
.hs-prog-count{font-size:.5rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}

/* SECTIONS */
section{padding:8rem 3rem}
.inner{max-width:1100px;margin:0 auto}
.s-label{font-size:.5625rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--silver);margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem}
.s-label::before{content:"";width:20px;height:1px;background:var(--silver)}
h2.sh{font-family:var(--serif);font-size:clamp(2.75rem,4.5vw,5.25rem);font-weight:300;line-height:.98;letter-spacing:-.03em;color:var(--white);margin-bottom:1.5rem}
h2.sh em{font-style:italic;font-weight:400;color:var(--white)}
.s-body{font-size:.9375rem;font-weight:300;line-height:1.85;color:var(--mid);max-width:480px}

/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:5rem}
.feat-stack{display:flex;flex-direction:column}
.feat-item{display:flex;gap:1.5rem;padding:1.75rem 0;border-bottom:1px solid var(--line)}
.feat-item:first-child{border-top:1px solid var(--line)}
.feat-n{font-family:var(--serif);font-size:1.125rem;font-weight:300;color:var(--silver);opacity:.45;flex-shrink:0;width:2rem;padding-top:.15rem}
.feat-h{font-family:var(--serif);font-size:1.125rem;font-weight:400;color:var(--white);margin-bottom:.375rem;letter-spacing:-.01em}
.feat-p{font-size:.8125rem;font-weight:300;color:var(--mid);line-height:1.8}

/* DASHBOARD */
.db-wrap{background:var(--s1);border:1px solid var(--line);overflow:hidden}
.db-top{background:var(--s2);border-bottom:1px solid var(--line);padding:1.1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.db-title-t{font-size:.875rem;font-weight:400;letter-spacing:.01em;color:var(--silver2)}
.db-internal{display:flex;align-items:center;gap:.45rem;font-size:.6875rem;letter-spacing:.06em;color:#e5484d;white-space:nowrap}
.db-live-dot{width:6px;height:6px;background:#e5484d;border-radius:50%;animation:bl 2s step-end infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.2}}
.db-body{padding:1.75rem 1.5rem 1.5rem}
/* Decorative growth curve — hollow ascending bars; the labelled data is the list below */
.db-graph{display:flex;align-items:flex-end;gap:.5rem;height:180px;margin-bottom:1.5rem}
.db-bar{flex:1;min-width:0;border:1px solid var(--silver-line);border-radius:2px;background:linear-gradient(180deg,rgba(184,188,200,.05),transparent)}
/* Brand status list: one row per db_bars line, ↑ Strong (green) / ! Attention (amber) */
.db-list{display:flex;flex-direction:column}
.db-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 0;border-top:1px solid var(--line)}
.db-row:first-child{border-top:none}
.db-row-label{font-size:.9375rem;font-weight:400;color:var(--silver2)}
.db-row-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:400;white-space:nowrap}
.db-row-icon{font-weight:600;font-size:.875rem;line-height:1}
.db-row.is-strong .db-row-status{color:#6ee7b7}
.db-row.is-attention .db-row-status{color:#e8c478}

/* MARKETING */
.mktg-sec{background:var(--s1);border-top:1px solid var(--line)}
.mktg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:4rem}
.mktg-card{background:var(--s1);padding:2.25rem 2rem;transition:background .2s}
.mktg-card:hover{background:var(--s2)}
.mktg-card-n{font-family:var(--serif);font-size:2.5rem;font-weight:300;color:var(--white);letter-spacing:-.03em;margin-bottom:.5rem}
.mktg-card-l{font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);margin-bottom:.875rem}
.mktg-card-p{font-size:.8125rem;font-weight:300;color:var(--mid);line-height:1.8}

/* DIFF */
.diff-sec{background:var(--bg);border-top:1px solid var(--line)}
.diff-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:4rem;border:1px solid var(--line)}
.diff-col{background:var(--s1);padding:2.5rem}
.diff-col.right{background:var(--s2)}
.diff-head{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.diff-col:not(.right) .diff-head{color:var(--dim)}
.diff-col.right .diff-head{color:var(--silver)}
.diff-item{display:flex;align-items:flex-start;gap:.875rem;padding:.875rem 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:.875rem;font-weight:300}
.diff-item:last-child{border-bottom:none}
.diff-col:not(.right) .diff-item{color:var(--dim)}
.diff-col.right .diff-item{color:var(--white)}
.xi{width:13px;height:13px;stroke:var(--dim);fill:none;stroke-width:1.5;flex-shrink:0;margin-top:2px}
.ci{width:13px;height:13px;stroke:var(--silver);fill:none;stroke-width:1.5;flex-shrink:0;margin-top:2px}

/* NETWORK */
.net-sec{background:var(--s1);border-top:1px solid var(--line)}
.net-wrap{position:relative;height:380px;max-width:1000px;margin:4rem auto 0}
#route-c{width:100%;height:100%}
.r-nodes{position:absolute;inset:0;pointer-events:none}
.rn{position:absolute;transform:translate(-50%,-50%);text-align:center}
.rn-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;border:1px solid rgba(184,188,200,0.15);animation:rp 2.5s ease-in-out infinite}
.rn:nth-child(2) .rn-ring{animation-delay:.6s}
.rn:nth-child(3) .rn-ring{animation-delay:1.2s}
.rn:nth-child(4) .rn-ring{animation-delay:1.8s}
@keyframes rp{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.4}50%{transform:translate(-50%,-50%) scale(2);opacity:0}}
.rn-dot{width:7px;height:7px;background:var(--silver2);border-radius:50%;margin:0 auto .625rem;box-shadow:0 0 16px rgba(212,216,228,.4);position:relative;z-index:2}
.rn-city{font-family:var(--serif);font-size:.875rem;font-weight:300;color:var(--silver2);letter-spacing:.06em}
.rn-tag{font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:.2rem}

/* Network — phone-only vertical rail. Hidden here, swapped in for .net-wrap at
   the 600px breakpoint. A display:none canvas never intersects, so the route
   animation in main.js stays parked while the rail is showing. */
.net-rail{display:none;margin-top:3rem}
.nr-item{display:grid;grid-template-columns:22px 1fr;column-gap:1.125rem}
.nr-mark{position:relative;display:flex;justify-content:center}
.nr-ring{position:absolute;top:7px;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;border:1px solid rgba(184,188,200,0.15);animation:rp 2.5s ease-in-out infinite}
.nr-dot{position:relative;z-index:2;flex:0 0 7px;align-self:flex-start;width:7px;height:7px;margin-top:4px;border-radius:50%;background:var(--silver2);box-shadow:0 0 16px rgba(212,216,228,.4)}
/* Runs the full row height, which the body cell's padding sets. */
.nr-line{position:absolute;top:18px;bottom:-4px;left:50%;width:1px;margin-left:-.5px;background:linear-gradient(180deg,rgba(184,188,200,0.28),rgba(184,188,200,0.1))}
/* Each connector carries three pulses, not one, so a leg reads as continuous
   traffic rather than a single blip every 3.2s. They ride the same 3.2s
   keyframe spaced a third of it apart (3.2/3 = 1.0667s), and taper 4px→2px
   from bright to dim so the stream has depth instead of looking like three
   identical dots. The delay is composed from two indices rather than written
   out as nine nth-child rules: --nr-i staggers the leg, --nr-k the pulse
   within it. Colours are the silver tokens, so light theme flips with them. */
.nr-item{--nr-i:0}
.nr-item:nth-child(2){--nr-i:1}
.nr-item:nth-child(3){--nr-i:2}
.nr-item:nth-child(4){--nr-i:3}
.nr-ring{animation-delay:calc(var(--nr-i) * .6s)}
.nr-pulse{position:absolute;left:50%;margin-left:-2px;width:4px;height:4px;border-radius:50%;background:var(--silver3);box-shadow:0 0 8px rgba(232,234,240,.8);animation:nrt 3.2s linear infinite;animation-delay:calc(var(--nr-i) * .6s + var(--nr-k,0) * 1.0667s)}
.nr-pulse.b{--nr-k:1;margin-left:-1.5px;width:3px;height:3px;background:var(--silver2);box-shadow:0 0 7px rgba(212,216,228,.7)}
.nr-pulse.c{--nr-k:2;margin-left:-1px;width:2px;height:2px;background:var(--silver);box-shadow:0 0 6px rgba(184,188,200,.6)}
@keyframes nrt{0%{top:18px;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}}
.nr-body{padding-bottom:2.25rem}
.nr-item:last-child .nr-body{padding-bottom:0}
.nr-city{font-family:var(--serif);font-size:1.375rem;font-weight:300;letter-spacing:.04em;line-height:1.1;color:var(--silver2)}
.nr-tag{font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-top:.375rem}
.nr-leg{margin-top:1.125rem;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--silver-line);padding:.3125rem .75rem;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.nr-leg-ic{letter-spacing:0;opacity:.6}

/* QUOTE */
.quote-sec{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6rem 3rem;background:var(--bg)}
.quote-inner{max-width:820px;margin:0 auto;text-align:center}
.q-text{font-family:var(--serif);font-size:clamp(1.75rem,3vw,2.875rem);font-weight:300;font-style:italic;line-height:1.4;color:var(--white);margin-bottom:2rem;letter-spacing:-.02em}
.q-by{font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* PCA */
.pca-sec{background:var(--s1);border-top:1px solid var(--line)}
.pca-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:4rem}
.pca-stat{background:var(--s1);padding:2.5rem 2rem}
.pca-n{font-family:var(--serif);font-size:2.875rem;font-weight:300;letter-spacing:-.04em;color:var(--white)}
.pca-l{font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:.5rem}
.pca-body{font-size:.9375rem;font-weight:300;line-height:1.85;color:var(--mid);max-width:580px;margin-top:1.5rem}

/* CTA / FORM */
.cta-sec{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8rem 3rem;background:var(--bg);border-top:1px solid var(--line)}
.cta-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;pointer-events:none}
.cta-sec h2{font-family:var(--serif);font-size:clamp(3.5rem,7vw,8rem);font-weight:300;letter-spacing:-.04em;line-height:.88;margin-bottom:1.5rem;position:relative;z-index:1}
.cta-sec h2 em{font-style:italic;font-weight:400;color:var(--white)}
.cta-sec p{font-size:.9375rem;font-weight:300;color:var(--mid);max-width:420px;margin:0 auto 3rem;line-height:1.85;position:relative;z-index:1}

/* FORM */
.form-wrap{position:relative;z-index:1;width:100%;max-width:560px;background:var(--s1);border:1px solid var(--silver-line);padding:2.5rem;text-align:left}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.form-group:last-of-type{margin-bottom:1.5rem}
.form-label{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.form-input,.form-select,.form-textarea{background:var(--s2);border:1px solid var(--line);color:var(--white);padding:.75rem 1rem;font-size:.875rem;font-weight:300;font-family:var(--sans);width:100%;transition:border-color .2s;outline:none;appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--silver-line)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--dim)}
.form-textarea{min-height:100px;resize:vertical}
.form-select{color:var(--mid)}
.form-select option{background:var(--s2);color:var(--white)}
.form-submit{width:100%;background:var(--silver2);color:#06060A;padding:.875rem 2rem;font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer;font-family:var(--sans);transition:all .2s}
.form-submit:hover{background:var(--silver3)}
.form-success{display:none;text-align:center;padding:2rem}
.form-success h3{font-family:var(--serif);font-size:1.5rem;font-weight:300;color:var(--white);margin-bottom:.5rem}
.form-success p{font-size:.875rem;color:var(--mid)}

/* FOOTER */
footer{background:var(--bg);border-top:1px solid var(--line);padding:2rem 3rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.f-logo img{height:18px;width:auto;opacity:.6}
footer p{font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal-d{opacity:0;transform:translateY(18px);transition:opacity .7s ease .14s,transform .7s ease .14s}
.reveal-d.in{opacity:1;transform:none}

@media(max-width:860px){
  .hero,.cta-sec,section{padding-left:1.5rem;padding-right:1.5rem}
  .hero-bottom{flex-direction:column;align-items:flex-start}
  .split,.diff-cols,.stats-row,.mktg-grid,.pca-stats{grid-template-columns:1fr}
  .stat-cell,.pca-stat{border-right:none;border-bottom:1px solid var(--line)}
  .route-strip-inner{flex-wrap:wrap;justify-content:center}
  footer{flex-direction:column;align-items:flex-start}
  .form-row{grid-template-columns:1fr}

  /* HSCROLL on mobile: the same horizontal jack as desktop, re-sized in svh.
     A phone's 100vh is the LARGEST viewport height — the URL bar hidden — so a
     100vh panel is taller than the screen the whole time the bar is showing and
     its lower edge is cut off. svh is the small viewport height, the one value
     that does not move as the bar slides in and out, so the panel always fits.
     The progress maths that goes with this is unit-agnostic: js/main.js divides
     by the sticky element's own height rather than window.innerHeight, so p
     still reaches exactly 1 whatever the bar does. Both must stay that way —
     dividing by the window again is what stranded slides 04 and 05 and got the
     jack switched off here in the first place. vh first as the fallback. */
  .hscroll-outer{height:400vh;height:400svh}
  .hscroll-sticky{height:100vh;height:100svh}
  /* width, not just the base min-width. A slide is a non-shrinking flex item,
     so its basis is max-content, and .hs-body's max-width:520px plus 48px of
     padding makes that 568px — wider than a phone. On min-width alone the
     panels inflate to 568 while the track still steps 100vw, so every panel
     after the first lands short of the screen. An explicit width pins them to
     the viewport and the body copy wraps at 327 instead of forcing the box. */
  .hscroll-slide{width:100vw;max-width:100vw;height:100vh;height:100svh;padding:0 1.5rem}
  .hs-h{font-size:clamp(2.25rem,9vw,3.5rem);margin-bottom:1.25rem}
  .hs-body{font-size:.875rem;line-height:1.8}
  .hs-label{margin-bottom:1.75rem}
  /* Bottom-anchored, as on desktop. It was pinned to the top only because the
     old stacked mobile layout had short slides with a 6rem top pad and nothing
     to sit against at the foot; now the panels are full-height, so `top` is
     released and it returns to the corner. 3rem clears the progress row's 2rem
     — they sit at opposite ends of the same line, 67px apart even at 320px. */
  .hs-ghost-num{font-size:clamp(4rem,20vw,7rem);right:1.5rem;top:auto;bottom:3rem;opacity:.4}
  .hs-slide-rule{left:1.5rem;right:1.5rem}
  .hs-progress{bottom:2rem;left:1.5rem}
}

/* PHONES — tighten the nav so the logo sits left and the language/theme/CTA
   cluster sits right without the CTA running off-screen; lay the four route
   nodes out as a clean 2×2 (the horizontal arrows don't survive wrapping);
   drop the scroll hint — a desktop scroll affordance that's noise on touch. */
@media(max-width:600px){
  /* Nav fits the phone by budget, not by logo: keep the wordmark at its familiar
     22px (desktop's 26px is too wide to leave a gap here) and trim the CTA, so
     the logo holds the left and the lang/theme/CTA cluster sits hard-right with
     clear space between them. #nav scoping keeps these winning over the base rules. */
  #nav{padding:0 1rem;height:60px}
  #nav .nav-logo img,#nav .nav-logo .custom-logo{height:22px}
  #nav .nav-right{gap:.5rem}
  #nav .nav-cta{padding:.4rem .75rem;font-size:.625rem;letter-spacing:.04em}
  .scroll-hint{display:none}
  /* Route strip is desktop-only. The four-node row never fitted a phone, and the
     vertical rail that stood in for it repeated ground the hero and the story
     panels already cover — so the section is dropped here rather than restated.
     The rail's own rules are left in place above: putting it back on a phone is
     `.route-strip{padding:2.5rem 1.5rem}` + `.route-strip-inner{display:none}` +
     `.route-rail{display:block}` in place of this one line. */
  .route-strip{display:none}
  /* Hero was 100vh pinned flex-end, stranding ~180px of dead space above the tag.
     Let it size to content just below the fixed nav. */
  .hero{min-height:auto;height:auto;justify-content:flex-start;padding-top:6.5rem;padding-bottom:4.5rem}
  /* Phone type scale: the desktop clamp floors (72px h1, 56px CTA h2) are what
     every phone gets — far too big for a 343px column. */
  .hero h1{font-size:clamp(3rem,13vw,4.5rem);margin-bottom:2rem}
  /* Eyebrow on two lines. All three phrases on one line is ~50 characters at
     .26em tracking — it cannot fit a phone column, and letting it wrap naturally
     broke it at whatever word happened to land at the edge. Breaking at the
     first separator puts the platform name on line one and the direction on line
     two, and that separator is then redundant: the line break says it. The rule
     is spans-only, so a tag edited to something without a separator still prints
     as a single string and simply wraps as before.
     flex-start + the ::before offset keep the leading dash on the first line
     rather than floating between the two. */
  .hero-tag{margin-bottom:1.5rem;align-items:flex-start;line-height:1.9}
  .hero-tag::before{margin-top:.95em}
  .hero-tag .ht-a{display:block}
  .hero-tag .ht-sep{display:none}
  .cta-sec h2{font-size:clamp(2.5rem,11vw,3.5rem)}
  /* Full-width primary CTA — proper thumb target instead of a stranded chip. */
  .hero-actions{width:100%}
  .hero-actions .btn-primary{width:100%;text-align:center}
  /* Desktop-scale vertical rhythm tightened (class-level paddings restated
     because the element selector can't beat them). */
  section{padding-top:4.5rem;padding-bottom:4.5rem}
  .cta-sec{padding:5rem 1.5rem}
  .quote-sec{padding:4rem 1.5rem}
  .form-wrap{padding:1.5rem}
  .diff-col{padding:1.5rem}
  footer{padding:2rem 1.5rem}
  /* Stats stacked one-per-row since 860px, but still on the desktop 3rem gutter
     and a 60px numeral — brought onto the phone gutter and type scale. */
  .stat-cell{padding:1.75rem 1.5rem}
  .stat-n{font-size:2.75rem}
  .stat-l{letter-spacing:.18em}
  /* 16px inputs: anything smaller makes iOS Safari zoom-jump on focus. */
  .form-input,.form-select,.form-textarea{font-size:1rem}
  /* The four-node canvas map has no room to breathe at phone width, so the
     whole stage is replaced by the vertical rail. */
  .net-wrap{display:none}
  .net-rail{display:block}
  /* Invisible hit-area padding: keeps the 22px lang link / 28px toggle visuals
     but gives both a ~44px touch target (negative margins cancel the layout). */
  #nav .nav-lang{padding:.6rem .4rem;margin:-.6rem -.4rem}
  #nav .nav-theme{width:44px;height:44px;margin:-8px}
}

/* ============================================================
   THEME ADDITIONS — language switch + RTL/Arabic
   ============================================================ */

/* NAV: right-side cluster with the language switch */
.nav-right{display:flex;align-items:center;gap:1.25rem}
.nav-lang{display:inline-flex;align-items:center;gap:.4rem;font-size:.6875rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--silver);text-decoration:none;opacity:.85;transition:opacity .2s,color .2s}
.nav-lang:hover{opacity:1;color:var(--silver2)}
.nav-lang-ic{width:15px;height:15px;display:block;flex-shrink:0}
.nav-lang-code{line-height:1}
.nav-lang[lang="ar"] .nav-lang-code{font-size:.875rem;letter-spacing:0}
.nav-logo .custom-logo{height:26px;width:auto;display:block;opacity:.92}

/* RTL / Arabic — Arabic display fonts + direction fixes */
[dir="rtl"]{--serif:"Amiri","Cormorant Garamond",Georgia,serif;--sans:"IBM Plex Sans Arabic",system-ui,sans-serif}

/* Keep left-to-right visual order where geography or the scroll depends on it */
[dir="rtl"] .hscroll-track,
[dir="rtl"] .marquee-inner,
[dir="rtl"] .route-strip-inner,
[dir="rtl"] .net-wrap,
[dir="rtl"] .r-nodes{direction:ltr}
[dir="rtl"] .hscroll-slide,
[dir="rtl"] .rt-node,
[dir="rtl"] .mq-item,
[dir="rtl"] .rn{direction:rtl}

/* Latin-glyph numerics stay LTR so "1,200+" / ">$1B" / "$XX M" read correctly */
[dir="rtl"] .stat-n,
[dir="rtl"] .pca-n,
[dir="rtl"] .hs-prog-count,
[dir="rtl"] .hs-ghost-num,
[dir="rtl"] .mktg-card-n{direction:ltr;unicode-bidi:isolate}
/* direction:ltr also flips text-align to left, which stranded the numeral on
   the far side of its own right-aligned label. */
[dir="rtl"] .stat-n{text-align:right}

/* Mirror the borders/positions that were pinned to one side */
[dir="rtl"] .stat-cell{border-right:none;border-left:1px solid var(--line)}
[dir="rtl"] .stat-cell:last-child{border-left:none}
[dir="rtl"] .scroll-hint{right:auto;left:3rem}
[dir="rtl"] .hs-ghost-num{right:auto;left:3rem}
[dir="rtl"] .hs-progress{left:auto;right:3rem}

/* ============================================================
   LIGHT MODE — sun/moon toggle
   Ink-black is the brand default. [data-theme="light"] on <html>
   (set pre-paint in header.php, toggled in js/main.js) swaps the
   token palette to a soft platinum/ink scheme; because the page is
   almost entirely tokenised, that one block re-skins it. A handful
   of hardcoded literals are re-stated below. The "internal platform"
   dashboard stays a dark inset in BOTH modes — a product screen on a
   light page — so its tokens are pinned back to dark.
   ============================================================ */
:root[data-theme="light"]{
  --bg:#eceef1;
  --s1:#f3f4f6;
  --s2:#f8f9fb;
  --s3:#fdfdfe;
  --silver:#5f6b78;
  --silver2:#3a424e;
  --silver3:#242a33;
  --silver-soft:rgba(60,66,78,0.08);
  --silver-line:rgba(60,66,78,0.20);
  --silver-dim:rgba(60,66,78,0.06);
  --white:rgba(20,24,32,0.90);
  --mid:rgba(20,24,32,0.55);
  --dim:rgba(20,24,32,0.55);
  --line:rgba(20,24,32,0.10);
}
/* Literals the token swap can't reach */
:root[data-theme="light"] nav.scrolled{background:rgba(244,245,247,.88)}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .form-submit{color:#f5f6f8}
:root[data-theme="light"] .hs-ghost-num{color:rgba(60,66,78,.18)}
:root[data-theme="light"] .diff-item{border-bottom-color:rgba(20,24,32,.08)}
/* Light mode logo: keep the crisp white wordmark on a dark "chip" (echoes the
   favicon's dark tile + silver mark). Filtering the wordmark to a dark colour
   instead only yields a washed-out grey — it's an 800x138 art wordmark shown at
   22px, so its thin strokes downscale to low-alpha pixels that a filter can
   recolour but can't make opaque. The chip sidesteps that entirely. */
:root[data-theme="light"] .nav-logo{background:#0c0d0e;border-radius:7px;padding:6px 11px;display:inline-flex;align-items:center}
:root[data-theme="light"] .nav-logo img{filter:none;opacity:.96}
/* Keep the platform dashboard a dark inset in light mode */
:root[data-theme="light"] .db-wrap{
  --s1:#0b0b10;--s2:#111118;
  --line:rgba(255,255,255,0.07);
  --white:rgba(255,255,255,0.92);--mid:rgba(255,255,255,0.38);--dim:rgba(255,255,255,0.38);
  --silver:#b8bcc8;--silver-line:rgba(184,188,200,0.18);
  color:rgba(255,255,255,0.92);
}

/* Toggle button — shows the mode you'll switch TO (sun in dark, moon in light) */
.nav-theme{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:none;color:var(--silver);cursor:pointer;opacity:.85;transition:opacity .2s,color .2s}
.nav-theme:hover{opacity:1;color:var(--silver2)}
.nav-theme svg{width:16px;height:16px;display:block}
.nav-theme .ic-moon{display:none}
:root[data-theme="light"] .nav-theme .ic-sun{display:none}
:root[data-theme="light"] .nav-theme .ic-moon{display:block}

/* ============================================================
   PHONE CONTRAST LIFT
   Secondary text at 0.38 alpha survives a desktop monitor but not a phone
   held outdoors, so --mid is lifted on small screens only. This block sits
   last on purpose: the light-theme tokens are declared with a higher
   specificity than :root, so each theme needs its own override, in its own
   colour space — a white --mid would be invisible on the light ground.
   ============================================================ */
@media(max-width:600px){
  :root{--mid:rgba(255,255,255,0.68)}
  :root[data-theme="light"]{--mid:rgba(20,24,32,0.75)}
  /* The dashboard stays a dark inset in light mode and pins its own tokens. */
  :root[data-theme="light"] .db-wrap{--mid:rgba(255,255,255,0.68)}
  /* The "without us" column read as disabled rather than merely secondary. */
  .diff-col:not(.right) .diff-head,
  .diff-col:not(.right) .diff-item{color:var(--mid)}
}

/* REDUCED MOTION — still the decorative animation (the canvases handle
   themselves in js/main.js) and show reveal content immediately. */
@media(prefers-reduced-motion:reduce){
  .marquee-inner,.rn-ring,.nr-ring,.nr-pulse,.db-live-dot,.scroll-line{animation:none}
  /* nr-pulse has no static position — without its keyframes it must be parked. */
  .nr-pulse{display:none}
  .reveal,.reveal-d{opacity:1;transform:none;transition:none}
}