/* =====================================================================
   EIGHT TECH · tech.css
   Additions on top of base.css (the eight8.sa brand stylesheet).
   Same tokens, same skeuomorphism; new: laptop lab, security band,
   process strip, dual-submit form.
   ===================================================================== */

:root{
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* laptop pose (GSAP animates these; defaults = open laptop, no-JS safe) */
  --lap-ry:24deg;
  --lap-rx:19deg;
  --lap-lid:10deg;
  --lap-scale:1;
  /* screen syntax palette — brand-tinted, on dark slate */
  --code-bg:#131a18;
  --code-key:#a2afa6;
  --code-str:#d3dcd5;
  --code-fn:#eef2f0;
  --code-num:#bccabf;
  --code-com:#5b6963;
  --code-pun:#7d8b85;
  --code-ok:#9ccfad;
}

/* ============================== MOTION COST TRIMS ==============================
   Blur transitions and unpromoted 3-D layers are what make scrolling feel heavy;
   reveals here run on opacity/transform only, and the laptop gets its own layers. */
.reveal{filter:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal--zoom,.reveal--left,.reveal--right{filter:none}
.laptop,.laptop__lid,.screen__term{will-change:transform}
.hero-glow{will-change:transform}
/* the soft-light grain forces the whole page through a blend every frame;
   plain low opacity keeps the texture at a fraction of the cost */
.grain{mix-blend-mode:normal;opacity:.09}
/* remove the small leading dash on every eyebrow (it read as an em dash) */
.eyebrow::before{display:none}
/* backdrop blur re-renders on every scrolled frame; a deeper solid gradient
   keeps the glassy look without the per-frame cost */
.nav__pill{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(180deg,rgba(66,78,73,.93),rgba(38,47,44,.92))}
.nav.is-scrolled .nav__pill{background:linear-gradient(180deg,rgba(56,68,63,.97),rgba(30,38,35,.96))}

/* ============================== NAV ==============================
   The tech nav carries more items (brand + TECH chip + 5 links + lang + CTA),
   so it gets a wider, slightly taller pill, tighter internal spacing, and it
   never wraps: below 1040px it collapses straight to the burger menu. */
.tech .nav__pill{
  max-width:1320px;flex-wrap:nowrap;gap:.55rem;
  padding-block:calc(.6rem + 5px);
}
.tech .nav__links{gap:.1rem;flex-wrap:nowrap}
.tech .nav__link{padding:.5rem .7rem;font-size:.9rem;white-space:nowrap}
.tech .nav__cta{white-space:nowrap}
.tech .nav__cta span[data-i18n]{white-space:nowrap}
.tech .nav__lang{white-space:nowrap;padding:.5rem .68rem}

/* link to the main creative-agency site — styled to match the language toggle */
.tech .nav__site{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;white-space:nowrap;
  padding:.5rem .68rem;border-radius:var(--r-pill);
  color:#e3eae6;font-family:var(--font-ar);font-weight:600;font-size:.82rem;letter-spacing:.01em;line-height:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.tech .nav__site:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-1px)}
.tech .nav__site-ic{opacity:.85;flex:none}

@media (max-width:1200px){ /* medium widths: keep the site link as an icon only */
  .tech .nav__site-label{display:none}
  .tech .nav__site{padding:.5rem .56rem}
}
@media (max-width:1040px){
  .tech .nav__links,.tech .nav__cta,.tech .nav__lang,.tech .nav__site{display:none}
  .tech .nav__burger{display:flex}
  .tech .nav__pill{padding:.55rem .6rem .55rem 1.1rem}
}

/* ============================== NAV: TECH chip ============================== */
.nav__brand{gap:.6rem}
.nav__tag{
  font-family:var(--font-lat);font-weight:700;font-size:.66rem;letter-spacing:.3em;
  color:#dfe7e3;padding:.34rem .62rem .3rem .72rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset;
  translate:0 1px;
}
.nav__tag--footer{font-size:.72rem;padding:.42rem .7rem .38rem .82rem}
.footer__brandlink{display:flex;align-items:center;gap:.9rem}

/* ============================== HERO (tech variant) ============================== */
.hero--tech{background:#141917}
.hero--tech .hero__bg{background:#141917}
.hero-grid{
  position:absolute;inset:-2%;opacity:.5;
  background-image:
    linear-gradient(rgba(162,175,166,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(162,175,166,.07) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask:radial-gradient(75% 65% at 50% 42%,#000 30%,transparent 78%);
          mask:radial-gradient(75% 65% at 50% 42%,#000 30%,transparent 78%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.hero-glow--a{width:44vw;height:44vw;inset-block-start:-14%;inset-inline-end:-8%;
  background:radial-gradient(circle,rgba(162,175,166,.24),transparent 65%)}
.hero-glow--b{width:36vw;height:36vw;inset-block-end:-16%;inset-inline-start:-6%;
  background:radial-gradient(circle,rgba(106,121,116,.28),transparent 65%)}
.hero--tech .hero__inner{max-width:1100px}
.hero--tech .eyebrow{margin-block-end:1.9rem}
.hero--tech .hero__title{font-size:clamp(2.3rem,5.6vw,4.35rem);line-height:1.22}
.hero--tech .hero__title .hero__title-accent{display:inline-block;margin-block-start:.35em}
/* Arabic stacks a tanwin above أحدٌ; give the title extra line box + top room so
   the diacritic is never clipped */
[dir="rtl"] .hero--tech .hero__title{line-height:1.5;padding-block-start:.12em}
[dir="rtl"] .hero--tech .hero__title .hero__title-accent{margin-block-start:.2em;padding-block-start:.08em}
.hero--tech .hero__lead{max-width:56ch;margin-block-start:1.8rem}
.eyebrow__dot{width:5px;height:5px;border-radius:50%;background:var(--sage);flex:none;
  box-shadow:0 0 0 3px rgba(162,175,166,.22)}

/* ============================== CAPABILITY RIBBON (sage, not white) ============================== */
.tech .marquee{
  background:linear-gradient(180deg,var(--slate-600),var(--slate-700));
  border-block-color:rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 -1px 0 rgba(0,0,0,.18) inset;
  padding-block:1.25rem;
}
.tech .marquee__item{font-family:var(--font-lat);font-weight:700;letter-spacing:.02em;color:#dfe7e3}
.tech .marquee__item::after{background:var(--sage);box-shadow:0 0 0 4px rgba(162,175,166,.22)}

/* scroll cue */
.hero__scrollcue{position:absolute;inset-block-end:2.4rem;inset-inline-start:50%;translate:-50% 0;z-index:3;opacity:.8;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
[dir="rtl"] .hero__scrollcue{translate:50% 0}
.hero__scrollcue:hover{opacity:1;transform:translateY(-3px)}
.hero__mouse{display:block;width:26px;height:42px;border-radius:14px;border:1.6px solid rgba(255,255,255,.45);position:relative}
.hero__mouse i{position:absolute;inset-inline-start:50%;translate:-50% 0;inset-block-start:7px;width:3px;height:8px;border-radius:2px;
  background:rgba(255,255,255,.75);animation:mousewheel 1.8s var(--ease) infinite}
@keyframes mousewheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ============================== LAB (pinned laptop scene) ============================== */
.lab{position:relative;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.lab__sticky{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-block:clamp(4rem,7vh,6rem)}
.lab__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:center;width:100%}
/* English mirrors the Arabic composition the client approved: laptop left, text right.
   Scoped to desktop so it can't override the single-column mobile stack below. */
@media (min-width:1025px){
  [dir="ltr"] .lab__grid{grid-template-columns:1.1fr .9fr}
  [dir="ltr"] .lab__copy{order:2}
}

.lab__copy{display:flex;flex-direction:column;gap:1.6rem}
.lab__steps{position:relative;min-height:15rem}
.lab-step{position:absolute;inset:0;opacity:0;transform:translateY(26px);pointer-events:none;
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.lab-step.is-active{opacity:1;transform:none;pointer-events:auto}
.lab-step__k{
  font-family:var(--font-lat);font-weight:800;font-size:.85rem;letter-spacing:.3em;color:var(--slate-650);
  display:inline-flex;align-items:center;gap:.6rem;
}
.lab-step__k::after{content:"";width:34px;height:1.5px;background:var(--sage);border-radius:2px}
.lab-step__t{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;color:var(--ink);line-height:1.2;margin-block-start:.7rem}
.lab-step__d{margin-block-start:.8rem;color:var(--muted);font-size:1.05rem;line-height:1.9;max-width:44ch}

/* progress scrubber: a scene-level control centred at the bottom of the pinned
   lab, decoupled from the text column entirely (in either language) so it can
   never read as an underline of the paragraph */
.lab__meter{position:absolute;inset-block-end:clamp(1.1rem,3.5vh,2.4rem);left:50%;translate:-50% 0;
  width:min(420px,68vw);height:6px;border-radius:var(--r-pill);
  background:rgba(90,105,99,.2);
  box-shadow:inset 0 1px 3px rgba(var(--sh),.22),0 1px 0 rgba(255,255,255,.5)}
.lab__meter::before{ /* centred caption above the track */
  content:"SCROLL TO EXPLORE";position:absolute;inset-block-end:calc(100% + .7rem);left:50%;translate:-50% 0;
  white-space:nowrap;text-align:center;
  font-family:var(--font-lat);font-size:.6rem;font-weight:700;letter-spacing:.22em;color:var(--muted-2)}
[dir="rtl"] .lab__meter::before{content:"مرّر لاكتشاف المزيد";font-family:var(--font-ar);letter-spacing:normal;font-size:.72rem}
.lab__meter span{position:relative;display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--sage),var(--slate-650));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.lab__meter span::after{ /* knob at the growing edge (logical, works in RTL) */
  content:"";position:absolute;inset-inline-end:-3px;inset-block-start:50%;translate:0 -50%;
  width:13px;height:13px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#dfe6e1);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 5px rgba(var(--sh),.35);
  border:1px solid rgba(255,255,255,.8)}

/* ---------- stage & laptop (true 3-D: every face has thickness) ---------- */
.lab__stage{perspective:1300px;perspective-origin:50% 24%;display:grid;place-items:center;min-height:56vh}
.laptop{
  position:relative;width:min(520px,86vw);
  margin-inline-end:clamp(0px,9vw,8.5rem); /* the near corner projects far to the end side */
  transform-style:preserve-3d;
  transform:rotateY(var(--lap-ry)) rotateX(var(--lap-rx)) scale(var(--lap-scale));
}
.laptop__hinge{position:relative;width:100%;aspect-ratio:16/10.4;transform-style:preserve-3d}
.laptop__lid{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:50% 100%;
  transform:translateZ(3px) rotateX(var(--lap-lid));
}
/* lid edges — left + top strips give the panel its 6px of metal
   (the pose turns the LEFT side toward the camera) */
.laptop__lid::before{
  content:"";position:absolute;inset-block:6px 0;inset-inline-start:0;width:6px;
  transform-origin:left;transform:rotateY(90deg);
  background:linear-gradient(180deg,#93a098,#6f7d75);
}
.laptop__lid::after{
  content:"";position:absolute;inset-inline:10px;inset-block-start:0;height:6px;
  transform-origin:top;transform:rotateX(-90deg);
  background:linear-gradient(90deg,#7c8981,#a2afa6 50%,#7c8981);border-radius:3px;
}
.laptop__screen{
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px 14px 4px 4px;
  padding:2% 1.9% 2.6%;
  background:linear-gradient(180deg,#242c29,#161c1a 55%,#101514);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,0,0,.4) inset;
  backface-visibility:hidden;
}
.laptop__screen::before{ /* webcam */
  content:"";position:absolute;inset-block-start:5px;inset-inline-start:50%;translate:-50% 0;
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3d4a45,#0a0e0d 65%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.05);
}
.laptop__lidback{
  position:absolute;inset:0;display:grid;place-items:center;
  border-radius:14px 14px 4px 4px;
  background:
    radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.5),transparent 55%),
    linear-gradient(165deg,#cdd7cf,#a9b6ae 55%,#8d9c93);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -8px 18px rgba(var(--sh),.22) inset;
  transform:rotateY(180deg) translateZ(6px);
  backface-visibility:hidden;
}
.laptop__lidback img{width:24%;height:auto;opacity:.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}

/* screen chrome */
.screen__bar{display:flex;align-items:center;gap:6px;padding:.55rem .8rem .5rem;flex:none}
.screen__bar i{width:9px;height:9px;border-radius:50%;background:#5b6963;opacity:.9}
.screen__bar i:nth-child(1){background:#c48a7f}
.screen__bar i:nth-child(2){background:#c9b984}
.screen__bar i:nth-child(3){background:#8fae94}
.screen__tab{
  margin-inline-start:.7rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:#aebbb3;
  background:rgba(255,255,255,.07);padding:.22rem .6rem;border-radius:6px 6px 0 0;
  border:1px solid rgba(255,255,255,.08);border-bottom:none;
}
.screen__badge{
  margin-inline-start:auto;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:#7d8b85;white-space:nowrap;
}
.screen__code{
  flex:1;margin:0 .35rem .35rem;padding:.7rem .9rem;overflow:hidden;border-radius:8px;
  background:var(--code-bg);
  font-family:var(--mono);font-size:clamp(.4rem,.92vw,.55rem);line-height:1.52;color:#cfd9d3;
  box-shadow:inset 0 1px 6px rgba(0,0,0,.4);
  white-space:pre;text-align:left;
}
.screen__code .ln{display:block;position:relative}
.screen__code .ln[data-hidden="true"]{visibility:hidden}
.screen__code .tk-k{color:var(--code-key);font-weight:600}
.screen__code .tk-s{color:var(--code-str)}
.screen__code .tk-f{color:var(--code-fn);font-weight:600}
.screen__code .tk-n{color:var(--code-num)}
.screen__code .tk-c{color:var(--code-com);font-style:italic}
.screen__code .tk-p{color:var(--code-pun)}
.screen__caret{display:inline-block;width:.55em;height:1.05em;translate:1px 3px;background:var(--code-ok);
  animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

/* editor status bar */
.screen__status{
  flex:none;display:flex;justify-content:space-between;align-items:center;
  margin:0 .35rem .35rem;padding:.18rem .6rem;border-radius:0 0 8px 8px;
  background:#0e1412;border-top:1px solid rgba(162,175,166,.12);
  font-family:var(--mono);font-size:.44rem;letter-spacing:.06em;color:#6d7b74;
}

/* terminal overlay (phase 2) */
.screen__term{
  position:absolute;inset-inline:calc(.35rem + 1.9%);inset-block-end:calc(.35rem + 2.6%);
  height:56%;translate:0 110%;border-radius:8px;overflow:hidden;
  background:rgba(10,14,13,.94);border:1px solid rgba(162,175,166,.18);
  box-shadow:0 -10px 30px rgba(0,0,0,.45);
  font-family:var(--mono);font-size:clamp(.42rem,1.2vw,.66rem);line-height:1.9;color:#b9c6bf;
  padding:.7rem .9rem;text-align:left;
}
.screen__term .tl{display:block;opacity:0;transform:translateY(6px);white-space:pre;
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.screen__term .tl.is-on{opacity:1;transform:none}
.screen__term .tl-cmd{color:#eef2f0}
.screen__term .tl-cmd::before{content:"❯ ";color:var(--code-ok)}
.screen__term .tl-ok{color:#9ccfad}
.screen__term .tl-dim{color:#7d8b85}
.screen__term .tl-final{color:#dff0e2;font-weight:600;margin-top:.2em}

/* dark screen while lid is closed / opening */
.screen__off{position:absolute;inset:0;z-index:3;background:linear-gradient(160deg,#171d1b,#0d1110 70%);
  display:grid;place-items:center;pointer-events:none}
.screen__glare{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.075) 42%,rgba(255,255,255,.02) 55%,transparent 62%)}

/* base — a real slab: deck on top, belly below, edge faces joining them */
.laptop__base{
  position:absolute;inset-block-start:100%;inset-inline-start:50%;width:103%;aspect-ratio:16/10;
  transform-origin:50% 0;
  /* +74deg swings the deck TOWARD the camera: keyboard in front of the screen.
     (negative folds it behind the hinge, which reads as a broken laptop) */
  transform:translateX(-50%) rotateX(74deg);
  transform-style:preserve-3d;
}
.laptop__deck{
  position:absolute;inset:0;border-radius:10px 10px 24px 24px;
  background:linear-gradient(178deg,#e3e9e2,#c4cfc6 55%,#aebbb2);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 -10px 22px rgba(var(--sh),.14) inset;
  display:flex;flex-direction:column;align-items:center;gap:3.4%;
  padding:3% 4.2% 3.4%;
}
.laptop__deck::after{ /* directional light across the aluminum */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(245deg,rgba(255,255,255,.35),transparent 42%,rgba(40,50,46,.14) 92%);
}
.laptop__belly{
  position:absolute;inset:0;border-radius:12px 12px 28px 28px;
  transform:translateZ(-14px);
  background:linear-gradient(180deg,#8b988f,#67756c 60%,#57655c);
}
/* front edge (near the viewer) */
.laptop__base::before{
  content:"";position:absolute;inset-inline:14px;inset-block-start:100%;height:14px;
  transform-origin:top;transform:rotateX(-90deg);
  background:linear-gradient(180deg,#aab7ae,#7d8b82 70%,#6a786f);
  border-radius:0 0 6px 6px;
}
/* left edge (toward the camera) */
.laptop__base::after{
  content:"";position:absolute;inset-block:4px 16px;inset-inline-start:0;width:14px;
  transform-origin:left;transform:rotateY(90deg);
  background:linear-gradient(180deg,#98a59c,#727f76);
}
.laptop__hingebar{
  position:absolute;inset-inline:9%;inset-block-start:-5px;height:10px;
  transform:translateZ(-4px);
  border-radius:5px;
  background:linear-gradient(180deg,#5f6d64,#3d4a43 60%,#333f39);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
}
.laptop__speaker{
  position:absolute;inset-block-start:6%;height:52%;width:2.4%;border-radius:3px;
  background-image:radial-gradient(circle at 50% 50%,rgba(40,50,46,.4) 22%,transparent 26%);
  background-size:4px 4px;
  box-shadow:inset 0 1px 2px rgba(var(--sh),.2);
}
.laptop__speaker--l{inset-inline-start:1.4%}
.laptop__speaker--r{inset-inline-end:1.4%}
.laptop__notch{
  position:absolute;inset-block-end:-1px;inset-inline-start:50%;translate:-50% 0;
  width:15%;height:7px;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#93a098,#7d8b82);
  box-shadow:inset 0 -1px 2px rgba(var(--sh),.3);
}
.laptop__keys{
  width:100%;height:56%;display:grid;grid-template-rows:.65fr repeat(4,1fr);gap:4px;
  border-radius:8px;padding:5px;
  background:linear-gradient(180deg,#8b9a91,#7e8c83);
  box-shadow:inset 0 2px 5px rgba(var(--sh),.4),inset 0 -1px 0 rgba(255,255,255,.3);
}
.laptop__keys .krow{display:flex;gap:4px;min-height:0}
.laptop__keys .key{
  flex:1;border-radius:3px;
  background:linear-gradient(180deg,#e9efe8,#cfd9d1 70%,#c2cdc4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 -1px 0 rgba(var(--sh),.12) inset,
    0 1.5px 1.5px rgba(40,50,46,.3);
}
.laptop__keys .key--wide{flex:1.6}
.laptop__keys .key--space{flex:6}
.laptop__trackpad{
  width:40%;height:32%;border-radius:7px;flex:none;
  background:linear-gradient(180deg,#cdd7cf,#b7c3ba);
  box-shadow:var(--inset-well);
  border:1px solid rgba(255,255,255,.4);
}
/* soft ground shadow, lying in the floor plane under the slab */
.laptop__shadow{
  position:absolute;inset-inline:-9% -14%;inset-block:8% -12%;
  transform:translateZ(-17px);
  border-radius:50%;
  background:radial-gradient(58% 55% at 56% 58%,rgba(var(--sh),.4),rgba(var(--sh),.16) 55%,transparent 76%);
  filter:blur(13px);
}

/* ============================== SECURITY (dark band reuse) ============================== */
.section__sub--light{color:#c2ccc7}
.sec-grid{grid-template-columns:repeat(3,1fr)}
.sec-card__inner{padding:clamp(1.8rem,3vw,2.4rem) clamp(1.3rem,2vw,1.8rem);display:flex;flex-direction:column;gap:.9rem;height:100%}
.sec-card__title{font-size:var(--fs-h3);font-weight:800;color:#fff;line-height:1.4}
.sec-card__text{font-size:.98rem;color:#c2ccc7;line-height:1.9;flex:1}
.sec-card__flag{
  align-self:flex-start;font-family:var(--font-lat);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#dff0e2;background:rgba(156,207,173,.14);border:1px solid rgba(156,207,173,.3);
  padding:.4rem .8rem;border-radius:var(--r-pill);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset;
}
.sec-card--star .bezel__inner{outline:1.5px solid rgba(156,207,173,.35);outline-offset:-6px}

/* ============================== PROCESS ============================== */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);list-style:none;margin:0;padding:0}
.proc__inner{padding:1.7rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;min-height:200px;height:100%}
.proc__num{
  font-family:var(--font-lat);font-weight:800;font-size:2rem;line-height:1;color:var(--sage-200);
  -webkit-text-stroke:1.2px var(--sage-300);
}
.proc__t{font-size:1.2rem;font-weight:800;color:var(--ink)}
.proc__d{font-size:.96rem;color:var(--muted);line-height:1.8;flex:1}
.proc__step{will-change:transform;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.proc__step:hover{transform:translateY(-7px);box-shadow:var(--shadow-pop)}
.proc__step--break .proc__t{color:#fff}
.proc__step--break .proc__d{color:#c2ccc7}
.proc__step--break .proc__num{color:rgba(255,255,255,.2);-webkit-text-stroke:1.2px rgba(156,207,173,.6)}
.proc__flag{
  align-self:flex-start;font-family:var(--font-lat);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#dff0e2;background:rgba(156,207,173,.14);border:1px solid rgba(156,207,173,.3);
  padding:.35rem .7rem;border-radius:var(--r-pill);
}

/* ============================== SERVICES (4-up) ============================== */
.service-grid--four .service{flex:0 1 300px;max-width:calc(25% - var(--gap)*3/4)}
@media (max-width:1024px){.service-grid--four .service{max-width:calc(50% - var(--gap)/2)}}
@media (max-width:680px){.service-grid--four .service{max-width:100%;flex-basis:100%}}

/* ============================== CONTACT additions ============================== */
.form__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-block-start:.5rem}
.form__actions .btn{flex:none}
.field--hp{position:absolute !important;inset-inline-start:-9999px;opacity:0;pointer-events:none;height:0;overflow:hidden}
.contact__promise-inner{padding:1.4rem 1.5rem;display:flex;align-items:flex-start;gap:1rem}
.contact__promise-inner .medallion{flex:none;margin-block-start:.15rem}
.contact__promise-inner p{color:#c2ccc7;font-size:.95rem;line-height:1.9;margin:0}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1024px){
  .lab__grid{grid-template-columns:1fr;gap:1.5rem}
  .lab__stage{min-height:auto;order:-1;perspective:1100px;padding-block-end:clamp(3rem,10vw,5rem)}
  .laptop{width:min(440px,80vw)}
  .lab__steps{min-height:12rem}
  .sec-grid{grid-template-columns:1fr;gap:1rem}
  .proc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .proc{grid-template-columns:1fr}
  .lab__sticky{padding-block:5.5rem 3rem}
  .laptop{width:min(258px,70vw);margin-inline-end:17vw}
  .hero--tech .eyebrow{flex-wrap:wrap;justify-content:center;letter-spacing:.18em}
  .lab-step__d{font-size:.98rem}
  .form__actions{flex-direction:column}
  .form__actions .btn{width:100%}
  .hero__scrollcue{display:none}
}

/* ============================== RTL ============================== */
[dir="rtl"] .screen__tab{margin-inline-start:.7rem}
[dir="rtl"] .screen__badge{margin-inline-start:auto}
[dir="rtl"] .lab-step__k{flex-direction:row}
/* keep the whole laptop LTR internally — code is LTR content */
.lab__stage,.lab__stage *{direction:ltr}

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion:reduce){
  .lab__sticky{min-height:auto}
  .lab-step{position:static;opacity:1;transform:none;margin-block-end:1.4rem}
  .lab__steps{min-height:auto}
  .screen__off{display:none}
  .screen__term{translate:0 0;position:static;height:auto;margin:.35rem}
  .screen__term .tl{opacity:1;transform:none}
  .hero__mouse i{animation:none}
}