/* =========================================================
   Increment — Landing Page styles
   ========================================================= */
:root{
  --dark:#1A1A1A; --offwhite:#FAF8F5; --linen:#EAE4D8;
  --terra:#C9785C; --terra-deep:#A05C45; --sage:#A7BEAE;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: Helvetica, 'Helvetica Neue', 'Gill Sans MT', Arial, sans-serif;
  --ink:#1A1A1A; --ink-70:rgba(26,26,26,0.7); --ink-55:rgba(26,26,26,0.55); --ink-12:rgba(26,26,26,0.12);
  --mx: clamp(22px, 7vw, 130px);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--offwhite); color:var(--ink); font-family:var(--serif);
      -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.loading{ overflow:hidden; height:100vh; }

/* ---------- type primitives ---------- */
.wm{ font-family:var(--serif); font-weight:400; letter-spacing:-0.005em; line-height:1; white-space:nowrap; }
.wm .plus{ color:var(--terra); font-size:0.75em; font-weight:700; display:inline-block; transform:translateY(-0.30em); margin-right:.02em; }
.label{ font-family:var(--sans); font-weight:600; font-size:clamp(10px,1vw,12px); letter-spacing:.26em; text-transform:uppercase; color:var(--terra); }
.display{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-0.015em; font-size:clamp(32px,4.4vw,62px); }
.display.lg{ font-size:clamp(30px,4.6vw,66px); }
.maxw-14{ max-width:14ch; } .maxw-18{ max-width:18ch; }
.lead{ font-family:var(--serif); font-size:clamp(16px,1.5vw,20px); line-height:1.62; color:var(--ink-70); }
.body{ font-family:var(--serif); font-size:clamp(14px,1.15vw,16.5px); line-height:1.68; color:var(--ink-70); }
.small{ font-family:var(--sans); font-size:clamp(11px,1vw,13px); letter-spacing:.02em; line-height:1.55; color:var(--ink-55); }
em{ font-style:italic; }

/* ---------- layout ---------- */
section{ padding-block: clamp(72px,9vw,140px); padding-inline: var(--mx); position:relative; }
.eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.eyebrow::after{ content:""; height:1px; flex:1; max-width:90px; background:currentColor; opacity:.35; color:var(--terra); }

/* ---------- section + helper variants (replaces former inline styles) ---------- */
.sec-linen{ background:var(--linen); }
.sec-offwhite{ background:var(--offwhite); }
.hero-inner{ position:relative; z-index:2; }
.twocol.bottom{ align-items:end; }
.ctx-copy{ padding-top:8px; }
.lead.ink{ margin-top:20px; color:var(--ink); }
.stats-note{ margin-top:24px; }

/* ---------- loading screen ---------- */
#loader{ position:fixed; inset:0; z-index:200; background:var(--dark);
         display:flex; align-items:center; justify-content:center; flex-direction:column; gap:26px;
         transition:opacity .7s ease, visibility .7s ease; }
#loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
#loader .mono{ width:clamp(78px,11vw,118px); height:auto; opacity:0; transform:scale(.9);
               animation:loaderIn .8s cubic-bezier(.2,.7,.2,1) forwards, loaderPulse 1.8s ease-in-out .8s infinite; }
#loader .loadbar{ width:clamp(120px,20vw,180px); height:2px; background:rgba(255,255,255,0.12); overflow:hidden; border-radius:2px; }
#loader .loadbar span{ display:block; height:100%; width:40%; background:var(--terra); border-radius:2px;
                       animation:loadbar 1.2s cubic-bezier(.5,.05,.2,1) infinite; }
@keyframes loaderIn{ to{ opacity:1; transform:scale(1); } }
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
@keyframes loadbar{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }

/* ---------- header ---------- */
header{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
        padding:18px var(--mx); transition:background .4s ease, padding .4s ease, box-shadow .4s ease; }
header.solid{ background:rgba(250,248,245,0.88); backdrop-filter:saturate(150%) blur(12px); padding-block:13px; box-shadow:0 1px 0 var(--ink-12); }
/* Both logos share one grid cell so swapping white<->black never shifts layout. */
header .brand{ display:inline-grid; align-items:center; text-decoration:none; }
header .brand img{ grid-area:1 / 1; height:26px; width:auto; display:block; transition:opacity .4s ease; }
header .brand .logo-white{ opacity:1; }
header .brand .logo-black{ opacity:0; }
header.solid .brand .logo-white{ opacity:0; }
header.solid .brand .logo-black{ opacity:1; }
.head-actions{ display:flex; align-items:center; gap:16px; }
.lang-toggle{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; cursor:pointer;
              background:none; border:0; color:var(--offwhite); padding:6px 2px; transition:color .3s ease; }
header.solid .lang-toggle{ color:var(--ink); }
.lang-toggle:hover{ color:var(--terra); }
.hidden{ display:none !important; }
header .cta{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.04em; text-decoration:none;
             color:var(--offwhite); border:1px solid rgba(255,255,255,0.4); padding:9px 18px; border-radius:2px;
             background-image:linear-gradient(var(--terra),var(--terra)); background-repeat:no-repeat;
             background-position:left center; background-size:0% 100%;
             transition:background-size .4s cubic-bezier(.2,.7,.2,1), color .35s ease, border-color .35s ease; }
header.solid .cta{ color:var(--ink); border-color:var(--ink-12); }
header .cta:hover{ background-size:100% 100%; border-color:var(--terra); color:#fff; }

/* ---------- inline SVG icons ---------- */
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.125em; flex:0 0 auto; }

/* ---------- hero ---------- */
.hero{ min-height:100svh; background:var(--dark); color:var(--offwhite); display:flex; flex-direction:column; justify-content:center;
       padding-top:140px; padding-bottom:64px; overflow:hidden; }
.hero .label{ color:var(--terra); font-size:clamp(12px,1.35vw,16px); letter-spacing:.28em; }
.hero h1{ font-family:var(--serif); font-weight:400; line-height:1.0; letter-spacing:-0.02em;
          font-size:clamp(40px,6.6vw,106px); color:var(--offwhite); margin:26px 0 0; max-width:18ch; }
/* C-Suite color-wipe: terracotta fill sweeps left→right on reveal */
.csuite{ position:relative; display:inline-block; color:var(--offwhite); }
/* Negative top/bottom insets keep descenders (g, y) and Arabic diacritics inside the clip region. */
.csuite::after{ content:attr(data-text); position:absolute; inset:0; color:var(--terra-deep); line-height:inherit;
                clip-path:inset(-0.3em 100% -0.35em 0); transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1) .35s; }
.csuite.wiped::after{ clip-path:inset(-0.3em 0 -0.35em 0); }
.hero .herolead{ display:flex; align-items:center; gap:18px; margin-top:36px; font-family:var(--serif);
                 font-size:clamp(18px,2.1vw,30px); color:rgba(250,248,245,0.86); max-width:32ch; }
.hero .sagebar{ width:48px; height:2px; background:var(--sage); flex:0 0 auto; }
.hero .scrollcue{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
                  background:none; border:0; cursor:pointer; padding:6px;
                  display:flex; align-items:center; justify-content:center; }
.hero .scrollcue .mouse{ width:26px; height:42px; border:2px solid rgba(255,255,255,0.45); border-radius:14px;
                         display:block; position:relative; transition:border-color .3s ease; }
.hero .scrollcue .wheel{ position:absolute; top:7px; left:50%; width:3px; height:7px; border-radius:2px;
                         background:rgba(255,255,255,0.8); transform:translateX(-50%); transition:background .3s ease;
                         animation:mouseWheel 1.7s ease-in-out infinite; }
.hero .scrollcue:hover .mouse{ border-color:var(--terra); }
.hero .scrollcue:hover .wheel{ background:var(--terra); }
@keyframes mouseWheel{ 0%{ opacity:0; transform:translate(-50%,0); } 20%{ opacity:1; }
                       70%{ opacity:1; transform:translate(-50%,12px); } 100%{ opacity:0; transform:translate(-50%,12px); } }
.heroPlus{ position:absolute; right:clamp(-40px,2vw,40px); top:50%; transform:translateY(-50%); font-family:var(--serif); font-weight:700;
           font-size:clamp(360px,52vw,760px); line-height:.7; color:rgba(201,120,92,0.13); pointer-events:none; user-select:none;
           animation:floatY 7s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(-50%); } 50%{ transform:translateY(calc(-50% - 26px)); } }

/* ---------- context + stats ---------- */
.twocol{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(34px,5vw,90px); align-items:start; }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ink-12); border:1px solid var(--ink-12); margin-top:clamp(46px,5vw,72px); }
.stat{ background:var(--offwhite); padding:clamp(22px,2.5vw,34px); transition:background .35s ease, transform .35s ease; }
.stat:hover{ background:var(--linen); transform:translateY(-3px); }
.stat .n{ font-family:var(--serif); font-size:clamp(34px,4.4vw,58px); line-height:1; color:var(--terra-deep); letter-spacing:-0.02em; }
.stat .k{ font-family:var(--sans); font-size:clamp(11px,1vw,13px); line-height:1.5; color:var(--ink-55); margin-top:12px; max-width:30ch; }
.stat .src{ font-family:var(--sans); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--terra); margin-top:10px; }

/* ---------- pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3vw,54px); margin-top:clamp(44px,4vw,68px); }
.pillar{ transition:transform .35s ease; }
.pillar:hover{ transform:translateY(-4px); }
.pillar .pn{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; color:var(--terra); }
.pillar h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.3vw,30px); margin:16px 0 14px; line-height:1.12; }
.pillar .rule{ height:1px; background:var(--sage); margin-bottom:20px; transition:background .35s ease, height .35s ease; }
.pillar:hover .rule{ background:var(--terra); height:2px; }

/* ---------- modes ---------- */
.modes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,34px); margin-top:clamp(44px,4vw,68px); }
.mode{ padding:clamp(30px,3.2vw,52px); border:1px solid var(--ink-12); display:flex; flex-direction:column; min-height:340px;
       transition:transform .35s ease, box-shadow .35s ease; }
.mode:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(26,26,26,0.10); }
.mode.lin{ background:var(--linen); border-color:transparent; }
.mode.light{ background:var(--offwhite); }
.mode.dark{ background:var(--dark); border-color:transparent; }
.mode.dark h3{ color:var(--offwhite); }
.mode.dark .body{ color:rgba(255,255,255,0.72); }
.mode.dark .tag{ color:var(--terra); border-color:rgba(201,120,92,0.5); }
.mode .mn{ font-family:var(--serif); font-size:clamp(40px,4vw,60px); color:var(--terra); line-height:1; }
.mode h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,36px); margin:18px 0 16px; line-height:1.08; }
.mode .tags{ margin-top:auto; padding-top:26px; display:flex; flex-wrap:wrap; gap:8px; }
.mode .tag{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-deep); border:1px solid rgba(160,92,69,0.3); padding:6px 12px; border-radius:2px; }

/* ---------- serve ---------- */
.serve{ background:var(--linen); }
.criteria{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(26,26,26,0.1); border:1px solid rgba(26,26,26,0.1); margin-top:clamp(40px,4vw,60px); }
.crit{ background:var(--linen); padding:clamp(20px,2vw,28px); transition:background .35s ease; }
.crit:hover{ background:var(--offwhite); }
.crit .ck{ font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); margin-bottom:12px; }
.crit .cv{ font-family:var(--serif); font-size:clamp(15px,1.4vw,19px); line-height:1.25; }
.fitlist{ margin-top:clamp(34px,3vw,48px); display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 40px; }
.fititem{ display:flex; gap:14px; align-items:baseline; font-family:var(--serif); font-size:clamp(15px,1.3vw,18px); line-height:1.4; color:var(--ink-70); transition:color .3s ease; }
.fititem:hover{ color:var(--ink); }
.fititem .pl{ color:var(--terra); font-weight:700; flex:0 0 auto; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-12); border-block:1px solid var(--ink-12); margin-top:clamp(44px,4vw,68px); }
.step{ background:var(--offwhite); padding:clamp(26px,2.6vw,40px) clamp(20px,2vw,30px); transition:background .35s ease; }
.step:hover{ background:var(--linen); }
.step .body{ font-size:14px; }
.steps.linen{ background:rgba(26,26,26,0.12); }
.step.linen{ background:var(--linen); }
.step .sn{ font-family:var(--serif); font-size:clamp(30px,3vw,44px); color:var(--ink-12); line-height:1; transition:color .35s ease; }
.step:hover .sn{ color:var(--terra); }
.step .sw{ font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); margin:18px 0 8px; }
.step h3{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.9vw,26px); margin-bottom:12px; }

/* ---------- different / compare ---------- */
.different{ background:var(--dark); color:var(--offwhite); }
.different .label{ color:var(--terra); }
.different h2{ color:var(--offwhite); }
.compare{ width:100%; border-collapse:collapse; margin-top:clamp(40px,4vw,64px); font-family:var(--sans); }
.compare th, .compare td{ text-align:left; padding:clamp(13px,1.5vw,20px) 18px; border-bottom:1px solid rgba(255,255,255,0.12); }
.compare thead th{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.compare thead th.us{ color:var(--terra); }
.compare td:first-child{ font-family:var(--serif); font-size:clamp(15px,1.4vw,18px); color:var(--offwhite); }
.compare td{ font-size:clamp(13px,1.2vw,15px); color:rgba(255,255,255,0.6); }
.compare tbody tr{ transition:background .3s ease; }
.compare tbody tr:hover{ background:rgba(255,255,255,0.03); }
.compare .yes{ color:var(--terra); font-weight:700; }
.compare col.uscol, .compare td.usc{ background:rgba(201,120,92,0.08); }
.compare td.usc{ color:var(--offwhite); }
.standard-wrap{ margin-top:clamp(56px,6vw,90px); }
.standard-wrap .label{ margin-bottom:24px; }
.standard{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.14); margin-top:clamp(40px,4vw,64px); }
.std{ background:var(--dark); padding:clamp(20px,2vw,28px); transition:background .35s ease; }
.std:hover{ background:#222; }
.std .st{ font-family:var(--serif); font-size:clamp(17px,1.6vw,21px); color:var(--terra); margin-bottom:8px; }
.std .sd{ font-family:var(--sans); font-size:11.5px; line-height:1.5; color:rgba(255,255,255,0.6); }
.std.statement{ display:flex; align-items:center; }
.std.statement em{ font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.7vw,23px); line-height:1.18; color:var(--sage); }

/* ---------- outcomes ---------- */
.outcomes{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,2.4vw,40px); margin-top:clamp(44px,4vw,68px); }
.outcome{ transition:transform .35s ease; }
.outcome:hover{ transform:translateY(-4px); }
.outcome h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.2vw,30px); margin-bottom:8px; }
.outcome .od{ font-family:var(--serif); font-size:clamp(13.5px,1.1vw,15.5px); line-height:1.5; color:var(--ink-55); margin-bottom:22px; min-height:4.8em; }
.outcome ul{ list-style:none; }
.outcome li{ font-family:var(--sans); font-size:clamp(12px,1.05vw,13.5px); line-height:1.5; padding:11px 0; border-top:1px solid var(--ink-12); color:var(--ink-70); transition:color .3s ease, padding-left .3s ease; }
.outcome li:hover{ color:var(--terra-deep); padding-left:6px; }

/* ---------- CTA ---------- */
.cta-sec{ background:var(--terra-deep); color:var(--offwhite); text-align:left; position:relative; overflow:hidden; }
.cta-sec > *{ position:relative; z-index:2; }
.ctaPlus{ position:absolute; z-index:0; right:clamp(-30px,3vw,70px); bottom:-14%; font-family:var(--serif); font-weight:700;
          font-size:clamp(300px,42vw,580px); line-height:.7; color:rgba(255,255,255,0.07); pointer-events:none; user-select:none;
          animation:floatY2 8s ease-in-out infinite; }
@keyframes floatY2{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-30px) rotate(2deg); } }
.cta-sec .label{ color:rgba(255,255,255,0.7); }
.cta-sec h2{ font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-0.015em;
             font-size:clamp(32px,4.6vw,64px); color:var(--offwhite); max-width:18ch; margin-bottom:6px; }
.cta-sec .closing{ font-style:italic; font-size:clamp(16px,1.6vw,21px); color:rgba(255,255,255,0.82); margin-top:clamp(34px,4vw,52px); max-width:46ch; }

/* ---------- contact form ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px); margin-top:clamp(26px,3vw,40px); align-items:start; }
.contact-aside .cline{ display:flex; align-items:center; gap:12px; margin-top:16px; font-family:var(--sans); font-size:clamp(14px,1.3vw,17px);
                       color:var(--offwhite); text-decoration:none; transition:color .3s ease; }
.contact-aside .cline .icon{ width:1.2em; height:1.2em; color:rgba(255,255,255,0.7); transition:color .3s ease; }
.contact-aside .cline:hover{ color:#fff; }
.contact-aside .cline:hover .icon{ color:#fff; }
.contact-form{ display:grid; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,0.7); }
.field input, .field textarea{ font-family:var(--serif); font-size:16px; color:var(--offwhite); background:rgba(255,255,255,0.06);
                               border:1px solid rgba(255,255,255,0.25); border-radius:2px; padding:13px 15px; transition:border-color .3s ease, background .3s ease; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,0.4); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--offwhite); background:rgba(255,255,255,0.10); }
.field textarea{ resize:vertical; min-height:120px; line-height:1.5; }
.form-submit{ font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.03em; cursor:pointer; border:0;
              padding:16px 32px; border-radius:2px; background-color:var(--offwhite); color:var(--ink); justify-self:start;
              background-image:linear-gradient(var(--terra),var(--terra)); background-repeat:no-repeat;
              background-position:left center; background-size:0% 100%;
              transition:background-size .4s cubic-bezier(.2,.7,.2,1), color .35s ease, transform .3s ease; }
.form-submit:hover{ background-size:100% 100%; color:#fff; transform:translateY(-2px); }
.form-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.field-error{ font-family:var(--sans); font-size:12px; line-height:1.4; color:#F2C2B3; display:block; }
.field-error:empty{ display:none; }
.field input.invalid, .field textarea.invalid{ border-color:#F2C2B3; background:rgba(242,194,179,0.10); }
.form-note{ font-family:var(--sans); font-size:13px; line-height:1.5; min-height:1.2em; margin-top:2px; }
.form-note.ok{ color:var(--sage); }
.form-note.err{ color:#F2C2B3; }
.closing-tight{ margin-top:0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.cta-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:46px; align-items:center; }
.cta-row.center{ justify-content:center; }
.btn{ font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.03em; text-decoration:none; padding:16px 32px; border-radius:2px; transition:all .3s ease; }
.btn-primary{ background:var(--offwhite); color:var(--ink); }
.btn-primary:hover{ background:#fff; transform:translateY(-2px); }
.btn-ghost{ color:var(--offwhite); border:1px solid rgba(255,255,255,0.4); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }

/* ---------- footer ---------- */
footer{ background:var(--dark); color:rgba(255,255,255,0.55); padding:clamp(48px,5vw,72px) var(--mx); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,0.12); }
.foot-top .brand img{ height:34px; width:auto; display:block; }
.foot-top .tl{ display:block; white-space:normal; font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); margin-top:14px; }
.foot-right{ display:flex; flex-direction:column; align-items:flex-end; gap:20px; }
.foot-links{ display:flex; gap:30px; flex-wrap:wrap; justify-content:flex-end; }
.foot-links a{ font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,0.6); text-decoration:none; transition:color .3s ease; }
.foot-links a:hover{ color:var(--terra); }
.foot-social{ display:flex; gap:14px; }
.foot-social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
                border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.65); font-size:20px; text-decoration:none;
                transition:all .3s ease; }
.foot-social a:hover{ color:#fff; border-color:var(--terra); background:var(--terra); transform:translateY(-3px); }
.foot-bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:26px; font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,0.4); }

/* ---------- back to top ---------- */
#toTop{ position:fixed; right:clamp(18px,3vw,34px); bottom:clamp(18px,3vw,34px); z-index:60;
        width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; background:var(--terra-deep); color:var(--offwhite);
        font-size:20px; display:flex; align-items:center; justify-content:center;
        opacity:0; visibility:hidden; transform:translateY(14px);
        transition:opacity .35s ease, transform .35s ease, visibility .35s ease, background .3s ease; box-shadow:0 8px 22px rgba(26,26,26,0.25); }
#toTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#toTop:hover{ background:var(--terra); transform:translateY(-3px); }

/* ---------- reveal (progressive enhancement: visible by default) ---------- */
.reveal{ opacity:1; transform:none; }
html.anim .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
html.anim .reveal.in{ opacity:1; transform:none; }
html.anim .reveal.d1{ transition-delay:.08s; } html.anim .reveal.d2{ transition-delay:.16s; } html.anim .reveal.d3{ transition-delay:.24s; } html.anim .reveal.d4{ transition-delay:.32s; }

/* Hero is always rendered visible: this environment may not advance transitions/animations, so the hero must never depend on them. */
html.anim .hero .reveal{ opacity:1; transform:none; animation:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .heroPlus, .ctaPlus, .scrollcue .wheel, #loader .mono, #loader .loadbar span{ animation:none !important; }
  .csuite::after{ transition:none; clip-path:inset(0 0 0 0); }
}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .twocol{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .modes{ grid-template-columns:1fr; }
  .criteria{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr 1fr; }
  .outcomes{ grid-template-columns:1fr 1fr; }
  .standard{ grid-template-columns:repeat(2,1fr); }
  .heroPlus{ font-size:clamp(300px,80vw,560px); opacity:.7; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .stats{ grid-template-columns:1fr; }
  .criteria{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .outcomes{ grid-template-columns:1fr; }
  .standard{ grid-template-columns:1fr; }
  header .cta{ display:none; }

  /* Keep the FULL comparison readable on phones (all columns, just tighter) */
  .compare th, .compare td{ padding:11px 6px; }
  .compare thead th{ font-size:9.5px; letter-spacing:.03em; }
  .compare td:first-child{ font-size:13px; }
  .compare td{ font-size:11.5px; }

}

/* Center the whole footer on mobile / small tablets */
@media (max-width: 768px){
  .foot-top{ flex-direction:column; align-items:center; text-align:center; gap:24px; }
  .foot-top > div{ display:flex; flex-direction:column; align-items:center; width:100%; }
  .foot-top .brand{ display:inline-grid; justify-self:center; }
  .foot-top .brand img{ margin:0 auto; }
  .foot-right{ align-items:center; width:100%; }
  .foot-links{ justify-content:center; }
  .foot-social{ justify-content:center; }
  .foot-bot{ flex-direction:column; align-items:center; text-align:center; }
}

/* ---------- 404 ---------- */
.errpage{ min-height:100svh; background:var(--dark); color:var(--offwhite); display:flex; flex-direction:column;
          align-items:center; justify-content:center; text-align:center; padding:40px var(--mx); position:relative; overflow:hidden; }
.errpage .ePlus{ position:absolute; font-family:var(--serif); font-weight:700; font-size:clamp(360px,60vw,820px); line-height:.7;
                 color:rgba(201,120,92,0.10); pointer-events:none; user-select:none; animation:floatY3 8s ease-in-out infinite; }
@keyframes floatY3{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-28px); } }
.errpage .ec{ position:relative; z-index:2; }
.errpage .ecode{ font-family:var(--serif); font-size:clamp(80px,16vw,200px); line-height:1; color:var(--offwhite); letter-spacing:-0.02em; }
.errpage .ecode .plus{ color:var(--terra); }
.errpage h1{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,46px); margin:18px 0 14px; }
.errpage p{ font-family:var(--serif); font-size:clamp(15px,1.5vw,19px); color:rgba(250,248,245,0.72); max-width:46ch; margin:0 auto 34px; line-height:1.6; }
.errpage .label{ color:var(--terra); }

/* =========================================================
   RTL / Arabic support
   ========================================================= */
[dir="rtl"]{
  /* Arabic-friendly stacks; fall back to system Arabic if these aren't installed */
  --serif: 'Noto Naskh Arabic', 'Amiri', 'Times New Roman', Georgia, serif;
  --sans: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif;
}
/* Letter-spacing breaks connected Arabic script — neutralise it */
[dir="rtl"] body{ letter-spacing:normal; }
[dir="rtl"] .label, [dir="rtl"] .small, [dir="rtl"] .src, [dir="rtl"] .ck, [dir="rtl"] .sw,
[dir="rtl"] .pn, [dir="rtl"] .tag, [dir="rtl"] .compare thead th, [dir="rtl"] .std .sd,
[dir="rtl"] .tl, [dir="rtl"] .foot-bot, [dir="rtl"] .foot-links a, [dir="rtl"] .cta,
[dir="rtl"] .btn, [dir="rtl"] .form-submit, [dir="rtl"] .field label, [dir="rtl"] .scrollcue,
[dir="rtl"] .lang-toggle, [dir="rtl"] .form-note, [dir="rtl"] .stat .k, [dir="rtl"] .std .st,
[dir="rtl"] .crit .cv, [dir="rtl"] .outcome li, [dir="rtl"] .mode .mn, [dir="rtl"] .hero .label{ letter-spacing:normal; }

/* Mirror absolutely-positioned decorative elements */
[dir="rtl"] .hero .scrollcue{ left:50%; right:auto; }
[dir="rtl"] .heroPlus{ right:auto; left:clamp(-40px,2vw,40px); }
[dir="rtl"] .ctaPlus{ right:auto; left:clamp(-30px,3vw,70px); }
[dir="rtl"] #toTop{ right:auto; left:clamp(18px,3vw,34px); }

/* Wipe travels with the reading direction (right -> left in Arabic) */
[dir="rtl"] .csuite::after{ clip-path:inset(-0.3em 0 -0.35em 100%); }
[dir="rtl"] .csuite.wiped::after{ clip-path:inset(-0.3em 0 -0.35em 0); }

/* Text alignment for blocks that were hard-set to left */
[dir="rtl"] .compare th, [dir="rtl"] .compare td{ text-align:right; }
[dir="rtl"] .cta-sec{ text-align:right; }
[dir="rtl"] .outcome li:hover{ padding-left:0; padding-right:6px; }
[dir="rtl"] .wm .plus{ margin-right:0; margin-left:.02em; }
/* hover colour-fill sweeps from the reading start (right) in Arabic */
[dir="rtl"] header .cta, [dir="rtl"] .form-submit{ background-position:right center; }