@font-face{
    font-family:'Tajawal';
    src:url('../fonts/Tajawal-Regular.ttf') format('truetype');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Tajawal';
    src:url('../fonts/Tajawal-Medium.ttf') format('truetype');
    font-weight:500; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Tajawal';
    src:url('../fonts/Tajawal-Bold.ttf') format('truetype');
    font-weight:700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Tajawal';
    src:url('../fonts/Tajawal-ExtraBold.ttf') format('truetype');
    font-weight:800; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Tajawal';
    src:url('../fonts/Tajawal-Black.ttf') format('truetype');
    font-weight:900; font-style:normal; font-display:swap;
  }
  :root{
    color-scheme:light;
    --navy:#0000aa;
    --navy-deep:#000032;
    --black:#000000;
    --steel:#164dcc;
    --orange:#fd572b;
    --white:#ffffff;
    --tint:#eef1f9;
    --tint-2:#dfe5f6;
    --ink:#0a0d1f;
    --ink-soft:#4d5680;
    --line:rgba(10,13,31,0.12);
    --line-strong:rgba(10,13,31,0.28);
    --font-display:'Tajawal', sans-serif;
    --font-body:'Tajawal', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --ease:cubic-bezier(.22,.9,.32,1);

    /* ---- theme-aware roles (light = default) ----
       Everything below maps to the palette above. Dark mode (further down)
       only re-points these roles at the site's existing dark-navy tones
       (the same colors already used in the hero / footer / "why us"
       section) — no new colors are introduced. */
    --page-bg:var(--white);
    --surface:var(--white);
    --surface-2:var(--tint);
    --text:var(--ink);
    --text-soft:var(--ink-soft);
    --heading:var(--navy-deep);
    --border:var(--line);
    --border-strong:var(--line-strong);
    --header-bg:rgba(255,255,255,0.72);
    --qa-item-border:rgba(10,13,31,0.08);
    --theme-toggle-transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  }

  html[data-theme="dark"]{
    color-scheme:dark;
    --page-bg:#000032;      /* existing --navy-deep */
    --surface:#04044a;      /* existing shade used in the "why us" cards */
    --surface-2:#020230;    /* existing shade used in the "why us" cards */
    --text:#ffffff;
    --text-soft:#b7bcd6;    /* existing shade already used for footer text */
    --heading:#ffffff;
    --border:rgba(255,255,255,0.12);
    --border-strong:rgba(255,255,255,0.24);
    --header-bg:rgba(6,10,32,0.78); /* existing hero background shade */
    --qa-item-border:rgba(255,255,255,0.14);
  }

  /* Smooth crossfade whenever the theme flips (kept lightweight; each
     component's own transition rule further down still governs its
     other properties, this just adds the color/background easing). */
  body{ transition:var(--theme-toggle-transition); }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  body{
    font-family:var(--font-body);
    font-weight:400;
    font-size:18px;
    color:var(--text);
    background:var(--page-bg);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* Ambient 3D pipe-rack background: fixed behind every section, full
     viewport, sitting further back than the sparks layer so the sparks
     read as flying in front of the steelwork. */
  #pipeRackCanvas{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:-2;
    pointer-events:none;
    opacity:0.95;
  }
  /* Ambient "nebula" glow: large, soft, blurred brand-colored blobs
     sitting furthest back of all — the broad wash of light behind
     the pinpoint glow-dots and pipe-rack layers. Barely visible in
     light mode, reads as a soft cosmic wash once dark mode is on. */
  #ambientGlow{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:-3;
    pointer-events:none;
    opacity:0.5;
    background:
      radial-gradient(680px 520px at 88% 8%, rgba(253,87,43,0.16), transparent 70%),
      radial-gradient(720px 560px at 6% 92%, rgba(22,77,204,0.14), transparent 70%);
  }
  html[data-theme="dark"] #ambientGlow{
    opacity:0.9;
    background:
      radial-gradient(680px 520px at 88% 8%, rgba(253,87,43,0.22), transparent 70%),
      radial-gradient(720px 560px at 6% 92%, rgba(22,77,204,0.2), transparent 70%);
  }
  @media (prefers-reduced-motion: reduce){
    #ambientGlow{ opacity:0.4; }
  }

  html[data-theme="dark"] #pipeRackCanvas{ opacity:1; }
  @media (prefers-reduced-motion: reduce){
    #pipeRackCanvas{ display:none; }
  }

  /* Ambient glow-dots background: soft twinkling brand-colored dots,
     sitting between the pipe-rack (further back) and sparks (in
     front) layers. Barely-there in light mode, more visible once
     the page goes dark — echoes the reference site's starfield feel
     without leaning on it visually. */
  #glowDotsCanvas{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:-2;
    pointer-events:none;
    opacity:0.35;
  }
  html[data-theme="dark"] #glowDotsCanvas{ opacity:0.9; }
  @media (prefers-reduced-motion: reduce){
    #glowDotsCanvas{ display:none; }
  }

  /* Ambient welding-sparks background: fixed behind every section, full
     viewport. Sits above the pipe-rack layer but below all page
     content (header/modals/etc. all sit in the hundreds/thousands). */
  #sparksCanvas{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:-1;
    pointer-events:none;
    opacity:0.85;
  }
  html[data-theme="dark"] #sparksCanvas{ opacity:1; }
  @media (prefers-reduced-motion: reduce){
    #sparksCanvas{ display:none; }
  }

  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block;max-width:100%;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}

  /* ---------- scroll progress bar ---------- */
  .scroll-progress{
    position:fixed;
    inset-block-start:0; inset-inline-start:0;
    width:0%;
    height:3px;
    z-index:2000;
    background:linear-gradient(90deg, var(--orange), #ff8a5c 55%, var(--steel));
    box-shadow:0 0 10px rgba(253,87,43,0.55);
    transform-origin:0 50%;
    pointer-events:none;
    will-change:width;
  }
  @media (prefers-reduced-motion: reduce){
    .scroll-progress{transition:none;}
  }

  /* ---------- magnetic buttons ---------- */
  /* JS nudges these with a small transform on pointermove; this transition
     is what makes them spring back to place on pointerleave. Kept separate
     from each button's own hover transition so the two don't fight. */
  [data-magnetic]{
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  }

  /* ---------- click ripple ---------- */
  [data-ripple]{ position:relative; overflow:hidden; isolation:isolate; }
  .ripple-dot{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,0.55);
    transform:scale(0);
    opacity:.6;
    pointer-events:none;
    animation:rippleOut .6s cubic-bezier(.16,.84,.44,1) forwards;
    z-index:0;
  }
  .btn-ghost .ripple-dot,
  .spec-pill .ripple-dot{ background:rgba(253,87,43,0.35); }
  @keyframes rippleOut{
    0%{transform:scale(0); opacity:.55;}
    100%{transform:scale(1); opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){
    [data-magnetic]{transition:none;}
    .ripple-dot{display:none;}
  }

  .wrap{
    width:min(1240px, 92%);
    margin-inline:auto;
  }

  ::selection{background:var(--orange); color:var(--white);}

  :focus-visible{
    outline:3px solid var(--orange);
    outline-offset:3px;
  }

  /* ---------- eyebrow / labels ---------- */
  .eyebrow{
    font-family:var(--font-mono);
    font-size:14px;
    letter-spacing:.16em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--steel);
    font-weight:500;
  }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;
    border:1.6px solid var(--orange);
    background:transparent;
    transform:rotate(45deg);
    display:inline-block;
    flex-shrink:0;
  }
  .eyebrow-brand{
    font-family:var(--font-body);
    font-size:14px;
    font-weight:800;
    letter-spacing:.12em;
    color:var(--steel);
  }
  .eyebrow-brand::before{
    width:9px;height:9px;
  }

  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:-0.01em;
    color:var(--heading);
  }

  /* ---------- header ---------- */
  header{
    position:fixed;
    inset-inline:0;
    top:0;
    z-index:100;
    padding:18px 0;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease), background .3s var(--ease), padding .3s var(--ease), backdrop-filter .3s var(--ease);
  }
  header.scrolled{
    background:var(--header-bg);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom-color:var(--border);
    padding:12px 0;
  }

  /* Over the hero (not yet scrolled) the header is fully transparent, so
     force light/white text & controls regardless of the light/dark theme,
     since the hero background underneath is always the same dark navy. */
  header:not(.scrolled) nav.primary a{ color:#fff; }
  header:not(.scrolled) .nav-icon{ color:#a9b3dd; }
  header:not(.scrolled) nav.primary a:hover .nav-icon,
  header:not(.scrolled) nav.primary a.active .nav-icon{ color:var(--orange); }
  header:not(.scrolled) .btn-ghost{ color:#fff; border-color:rgba(255,255,255,0.35); }
  header:not(.scrolled) .btn-ghost:hover{ background:rgba(255,255,255,0.16); color:#fff; border-color:rgba(255,255,255,0.55); }
  header:not(.scrolled) .nav-toggle{ border-color:rgba(255,255,255,0.35); }
  header:not(.scrolled) .nav-toggle span{ background:#fff; }
  header:not(.scrolled) .logo-shake-hint{ color:var(--orange); }
  header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }

  .logo{
    display:flex;
    align-items:center;
    perspective:600px;
    flex-shrink:0;
    position:relative;
  }
  .logo-img{
    height:42px;
    width:auto;
    max-width:none;
    display:block;
    transition:transform .4s cubic-bezier(.16,.84,.44,1);
    transform-style:preserve-3d;
  }
  .logo:hover .logo-img{
    transform:rotateY(-14deg) rotateX(4deg) translateZ(4px);
  }

  /* ---------- logo shake easter egg ---------- */
  .logo-shake-hint{
    position:absolute;
    top:calc(100% + 10px);
    inset-inline-start:0;
    max-width:calc(100vw - 32px);
    transform:none;
    font-family:var(--font-body);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    color:var(--orange);
    background:color-mix(in srgb, var(--navy-deep) 88%, transparent);
    border:1px solid rgba(253,87,43,0.35);
    padding:4px 10px;
    border-radius:999px;
    pointer-events:none;
    opacity:0;
    animation:logoHintPulse 2.6s ease-in-out .8s infinite;
    transition:opacity .3s var(--ease);
  }
  .logo-shake-hint::before{
    content:"";
    position:absolute;
    top:-5px;
    inset-inline-start:16px;
    transform:rotate(45deg);
    width:8px;height:8px;
    background:inherit;
    border-inline-start:1px solid rgba(253,87,43,0.35);
    border-block-start:1px solid rgba(253,87,43,0.35);
  }
  .logo-shakeable.hint-dismissed .logo-shake-hint{
    opacity:0 !important;
    animation:none;
  }
  @keyframes logoHintPulse{
    0%, 100%{opacity:0; transform:translateY(0);}
    15%, 40%{opacity:1; transform:translateY(2px);}
    55%{opacity:0; transform:translateY(0);}
  }

  .logo-img.is-shaking{
    animation:logoShakeAnim .6s cubic-bezier(.36,.07,.19,.97) both;
  }
  @keyframes logoShakeAnim{
    0%,100%{transform:translateX(0) rotate(0);}
    10%{transform:translateX(-6px) rotate(-9deg);}
    20%{transform:translateX(5px) rotate(8deg);}
    30%{transform:translateX(-5px) rotate(-7deg);}
    40%{transform:translateX(4px) rotate(6deg);}
    50%{transform:translateX(-4px) rotate(-5deg);}
    60%{transform:translateX(3px) rotate(4deg);}
    70%{transform:translateX(-2px) rotate(-2deg);}
    80%{transform:translateX(2px) rotate(1deg);}
    90%{transform:translateX(-1px) rotate(0);}
  }

  .logo-emoji-burst{
    position:absolute;
    top:50%;
    inset-inline-start:50%;
    width:0;
    height:0;
    pointer-events:none;
    z-index:5;
  }
  .logo-emoji{
    position:absolute;
    top:0;
    left:0;
    font-size:18px;
    line-height:1;
    transform:translate(-50%,-50%) scale(.4);
    opacity:0;
    animation:logoEmojiBurst .9s cubic-bezier(.2,.7,.3,1) forwards;
    will-change:transform, opacity;
  }
  @keyframes logoEmojiBurst{
    0%{ transform:translate(-50%,-50%) scale(.3) rotate(0deg); opacity:0; }
    18%{ transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg)); opacity:1; }
    100%{
      transform:translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(.7) rotate(var(--rot,0deg));
      opacity:0;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .logo-img.is-shaking{ animation:none; }
    .logo-emoji{ animation:none; display:none; }
    .logo-shake-hint{ animation:none; opacity:.9; }
  }

  nav.primary{
    display:flex;
    align-items:center;
    gap:36px;
  }
  nav.primary a{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-size:16.5px;
    font-weight:700;
    color:var(--text);
    position:relative;
    padding:4px 0;
  }
  .nav-icon{
    display:flex;
    color:#9aa3c9;
    transition:color .3s ease, transform .3s ease;
  }
  .nav-icon svg{width:18px; height:18px;}
  nav.primary a:hover .nav-icon,
  nav.primary a.active .nav-icon{color:var(--orange); transform:scale(1.08);}
  nav.primary a::after{
    content:"";
    position:absolute;
    left:0;right:100%;
    bottom:0;
    height:2px;
    background:var(--orange);
    transition:right .28s var(--ease);
  }
  nav.primary a:hover::after,
  nav.primary a.active::after{ right:0; }

  /* "Our Focus" nav entry: mobile menu only, hidden on the desktop bar */
  nav.primary a.nav-link-mobile-only{display:none;}

  .header-actions{display:flex;align-items:center;gap:14px;}

  .lang-toggle{
    padding:10px 16px;
    font-size:14px;
    gap:8px;
  }
  .lang-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;}

  /* ---------- theme toggle (light / dark) ---------- */
  .theme-toggle{
    width:42px; height:42px;
    padding:0;
    border-radius:50%;
    justify-content:center;
    position:relative;
    flex:none;
  }
  .theme-icon{
    position:absolute;
    width:18px; height:18px;
    stroke:currentColor;
    transition:opacity .3s var(--ease), transform .4s var(--ease);
  }
  .theme-icon-sun{ opacity:1; transform:rotate(0deg) scale(1); }
  .theme-icon-moon{ opacity:0; transform:rotate(-60deg) scale(.6); }
  html[data-theme="dark"] .theme-icon-sun{ opacity:0; transform:rotate(60deg) scale(.6); }
  html[data-theme="dark"] .theme-icon-moon{ opacity:1; transform:rotate(0deg) scale(1); }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:999px;
    font-size:16px;
    font-weight:600;
    font-family:var(--font-body);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    position:relative;
    overflow:hidden;
    background:var(--orange);
    color:var(--white);
    box-shadow:0 8px 20px -8px rgba(253,87,43,0.6);
  }
  .btn-primary::before{
    content:"";
    position:absolute;
    inset-block:0;
    inset-inline-start:-60%;
    width:45%;
    background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    transition:inset-inline-start .65s var(--ease);
    pointer-events:none;
  }
  .btn-primary:hover::before{ inset-inline-start:130%; }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(253,87,43,0.65); }
  .btn-ghost{
    background:transparent;
    color:var(--heading);
    border:1px solid var(--border-strong);
  }
  .btn-ghost:hover{ background:var(--navy-deep); color:var(--white); border-color:var(--navy-deep); }
  .btn-light{
    background:var(--surface);
    color:var(--heading);
  }
  .btn-light:hover{ transform:translateY(-2px); }
  .btn svg{width:15px;height:15px;flex:none;}

  .nav-toggle{
    display:none;
    width:38px;height:38px;
    border-radius:8px;
    border:1px solid var(--border-strong);
    align-items:center;justify-content:center;
    flex-direction:column;
    gap:4px;
  }
  .nav-toggle span{
    width:16px;height:2px;background:var(--heading);
    transition:transform .25s var(--ease), opacity .25s var(--ease), background .25s var(--ease);
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  /* Explicit close (X) button inside the mobile drawer itself */
  .nav-close{
    display:none;
    align-items:center;
    justify-content:center;
    width:38px;height:38px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.18);
    color:var(--white);
    background:rgba(255,255,255,0.06);
    transition:background .25s ease, transform .2s ease;
  }
  .nav-close svg{width:18px;height:18px;}
  .nav-close:hover{background:rgba(255,255,255,0.14); transform:rotate(90deg);}

  /* Dim overlay behind the mobile drawer */
  .nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(6,9,26,0.55);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    z-index:98;
    opacity:0;
    transition:opacity .3s ease;
  }
  .nav-overlay.open{opacity:1;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:168px 0 96px;
    color:var(--white);
    overflow:hidden;
    border-top:3px solid var(--orange);
  }
  .hero-bg-wrap{
    position:absolute; inset:0;
    overflow:hidden;
    z-index:0;
    will-change:transform;
  }
  .hero-bg{
    position:absolute; inset:-4%;
    width:108%; height:108%;
    object-fit:cover;
    object-position:center 22%;
    animation:heroZoom 24s ease-in-out infinite alternate;
    background:#060a20;
  }
  .hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(175deg, rgba(6,10,32,0.94) 0%, rgba(9,15,48,0.88) 55%, rgba(9,15,48,0.7) 100%);
    z-index:1;
  }
  @keyframes heroZoom{
    from{transform:scale(1);}
    to{transform:scale(1.09);}
  }
  .hero::before{
    content:"";
    position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,0.55), transparent 85%);
    pointer-events:none;
    z-index:2;
  }
  .hero .wrap{
    position:relative;
    z-index:3;
    perspective:1200px;
  }
  .hero-content{
    max-width:640px;
    margin-inline-start:0;
    margin-inline-end:auto;
    transform-style:preserve-3d;
    will-change:transform;
  }
  @keyframes heroUp{
    from{opacity:0; transform:translateY(26px) rotateX(-16deg) translateZ(-40px);}
    to{opacity:1; transform:translateY(0) rotateX(0) translateZ(0);}
  }
  .hero-content > *{
    opacity:0;
    animation:heroUp .9s var(--ease) forwards;
    transform-style:preserve-3d;
  }
  .hero-content > .hero-eyebrow{animation-delay:.05s;}
  .hero-content > h1{animation-delay:.18s;}
  .hero-content > p.lede{animation-delay:.34s;}
  .hero-content > .hero-actions{animation-delay:.5s;}
  .hero-eyebrow{
    font-family:var(--font-body);
    font-size:14px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#a9c1f5;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    font-weight:700;
    white-space:nowrap;
    width:max-content;
    max-width:none;
  }
  .hero-eyebrow::before{content:"";width:22px;height:1px;background:var(--orange);}
  .hero h1{
    color:var(--white);
    font-size:clamp(44px, 5.6vw, 70px);
    line-height:1.06;
    letter-spacing:-0.02em;
    max-width:15ch;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--orange);
  }
  .hero p.lede{
    margin-top:22px;
    font-size:20px;
    line-height:1.7;
    color:#cbd7f6;
    max-width:46ch;
  }
  .hero-actions{
    margin-top:34px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }

  @media (prefers-reduced-motion: reduce){
    .hero-bg{animation:none;}
    .hero-content > *{animation:none; opacity:1; transform:none;}
  }

  /* ---------- ticker ---------- */
  .ticker{
    background:var(--navy-deep);
    border-top:1px solid rgba(255,255,255,0.1);
    padding:14px 0;
    overflow:hidden;
    white-space:nowrap;
    direction:ltr;
  }
  .ticker-track{
    display:inline-flex;
    gap:0;
    direction:ltr;
    animation:scroll 26s linear infinite;
  }
  .ticker-track span{
    font-family:var(--font-mono);
    font-size:16px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#93a8de;
    padding:0 26px;
    display:inline-flex;
    align-items:center;
    gap:26px;
  }
  .ticker-track span::after{content:"◆"; color:var(--orange); font-size:8px;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- section shell ---------- */
  section{padding:110px 0; background:var(--surface-2);}
  #services{background:color-mix(in srgb, var(--surface-2) 82%, transparent);}
  html[data-theme="dark"] #services{background:color-mix(in srgb, var(--surface-2) 40%, transparent);}

  /* dot-particle background removed per request; .dot-field kept as a
     structural class (position/overflow + z-index context for .wrap) so
     no HTML changes are needed elsewhere. */
  .dot-field{position:relative; overflow:hidden;}
  .dot-field > .wrap{position:relative; z-index:1; perspective:1400px;}
  .section-head{
    max-width:640px;
    margin-bottom:56px;
  }
  .section-head h2{
    font-size:clamp(33px,3.9vw,46px);
    margin-top:16px;
    line-height:1.15;
    position:relative;
  }
  .section-head p{
    margin-top:16px;
    font-size:20.5px;
    color:var(--text-soft);
    line-height:1.75;
  }

  /* Underline that draws itself under the heading once the section-head has revealed */
  .section-head h2::after{
    content:"";
    display:block;
    margin-top:14px;
    height:3px;
    width:64px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--orange), color-mix(in srgb, var(--orange) 30%, transparent));
    transform:scaleX(0);
    transform-origin:right center;
    transition:transform .7s .25s var(--ease);
  }
  html[lang="en"] .section-head h2::after{transform-origin:left center;}
  .section-head.reveal.in h2::after{transform:scaleX(1);}

  /* reveal (3D) */
  .reveal{
    opacity:0;
    transform:translateY(48px) rotateX(-16deg) translateZ(-50px);
    transform-origin:top center;
    transition:opacity .95s var(--ease), transform .95s var(--ease);
    will-change:transform, opacity;
  }
  .reveal.in{opacity:1; transform:translateY(0) rotateX(0) translateZ(0);}

  /* ---------- Our Focus ---------- */
  .focus{
    background:var(--surface);
  }
  html[data-theme="dark"] .focus{
    background:color-mix(in srgb, var(--surface-2) 40%, transparent);
  }
  .focus .wrap{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:48px;
  }
  .focus-copy{max-width:680px; flex:1 1 460px;}
  .focus-copy h2{
    font-size:clamp(30px,3.6vw,42px);
    margin-top:16px;
    line-height:1.2;
  }
  .focus-copy p{
    margin-top:18px;
    font-size:18px;
    color:var(--text-soft);
    line-height:1.8;
  }
  .focus-highlight{
    margin-top:32px !important;
    padding:20px 26px;
    border-radius:16px;
    display:inline-flex;
    width:fit-content;
    max-width:100%;
    align-items:center;
    gap:16px;
    position:relative;
    overflow:hidden;
    background:rgba(253,87,43,0.08);
    border:1px solid rgba(253,87,43,0.25);
    box-shadow:0 12px 28px -14px rgba(253,87,43,0.35);
    color:var(--heading) !important;
    font-size:17.5px !important;
    font-weight:700;
    line-height:1.6 !important;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .focus-highlight::before{
    content:"";
    position:absolute;
    inset-inline-start:0;
    top:0; bottom:0;
    width:4px;
    background:var(--orange);
  }
  .focus-highlight:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px -14px rgba(253,87,43,0.45);
  }
  .focus-highlight-icon{
    flex-shrink:0;
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(253,87,43,0.14);
    color:var(--orange);
  }
  .focus-highlight-icon svg{width:18px; height:18px;}
  html[data-theme="dark"] .focus-highlight{
    background:rgba(253,87,43,0.12);
    border-color:rgba(253,87,43,0.32);
  }

  /* animated "camera autofocus" graphic: corner brackets breathing
     in and out, echoing the section's message — locking in on focus */
  .focus-visual{
    flex:0 0 auto;
    width:240px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .focus-frame{
    position:relative;
    width:190px;
    height:190px;
  }
  .focus-ring{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
  }
  .focus-ring-outer{
    inset:0;
    border:2px dashed rgba(253,87,43,0.55);
    animation:focusSpin 14s linear infinite;
  }
  .focus-ring-mid{
    inset:16px;
    border:1.5px dashed rgba(253,87,43,0.4);
    animation:focusSpin 11s linear infinite reverse;
  }
  .focus-ring-inner{
    inset:32px;
    border:1.5px solid rgba(253,87,43,0.28);
    animation:focusSpin 10s linear infinite reverse;
  }
  .focus-ring-core{
    inset:48px;
    border:1px solid rgba(253,87,43,0.4);
    animation:focusSpin 7s linear infinite;
  }
  .focus-orbit{
    position:absolute;
    inset:0;
    animation:focusSpin 6s linear infinite;
  }
  .focus-orbit-dot{
    position:absolute;
    top:0; left:50%;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--orange);
    transform:translate(-50%,-50%);
    box-shadow:0 0 12px 2px rgba(253,87,43,0.6);
  }
  .focus-orbit-2{
    position:absolute;
    inset:16px;
    animation:focusSpin 9s linear infinite reverse;
  }
  .focus-orbit-2-dot{
    position:absolute;
    top:0; left:50%;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--orange);
    opacity:.75;
    transform:translate(-50%,-50%);
    box-shadow:0 0 8px 1px rgba(253,87,43,0.5);
  }
  @keyframes focusSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .focus-center-dot{
    position:absolute;
    top:50%; left:50%;
    width:10px; height:10px;
    border-radius:50%;
    background:var(--orange);
    transform:translate(-50%,-50%);
    animation:focusBlink 3.2s ease-in-out infinite;
  }
  @keyframes focusBreathe{
    0%,100%{transform:scale(1);}
    50%{transform:scale(.82);}
  }
  @keyframes focusBlink{
    0%,100%{opacity:1; box-shadow:0 0 0 6px rgba(253,87,43,0.12);}
    50%{opacity:.5; box-shadow:0 0 0 10px rgba(253,87,43,0.06);}
  }
  @media (prefers-reduced-motion: reduce){
    .focus-ring-outer,.focus-ring-mid,.focus-ring-inner,.focus-ring-core,.focus-orbit,.focus-orbit-2,.focus-center-dot{animation:none;}
  }
  @media (max-width:900px){
    .focus .wrap{flex-direction:column-reverse; align-items:stretch; gap:20px;}
    .focus-visual{width:100%;}
    .focus-frame{width:150px; height:150px; margin:0 auto;}
    .focus-ring-mid{inset:18px;}
    .focus-ring-inner{inset:32px;}
    .focus-ring-core{inset:50px;}
    .focus{padding-top:44px;}
  }


  /* ---------- nested stagger reveal ----------
     Applies a soft fade+rise to the direct children of a .reveal element,
     one after another, once the parent has scrolled into view. Used for
     .about-copy and .contact-list so text/rows feel alive while scrolling
     instead of arriving as one flat block — most noticeable on phones
     where each block fills more of the viewport. */
  .stagger-children > *{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  .reveal.in.stagger-children > *{opacity:1; transform:translateY(0);}
  .reveal.in.stagger-children > *:nth-child(1){transition-delay:.05s;}
  .reveal.in.stagger-children > *:nth-child(2){transition-delay:.16s;}
  .reveal.in.stagger-children > *:nth-child(3){transition-delay:.27s;}
  .reveal.in.stagger-children > *:nth-child(4){transition-delay:.38s;}
  .reveal.in.stagger-children > *:nth-child(5){transition-delay:.49s;}
  @media (prefers-reduced-motion: reduce){
    .stagger-children > *{opacity:1; transform:none; transition:none;}
    .section-head h2::after{transition:none;}
  }

  /* ---------- about ---------- */
  .about{background:color-mix(in srgb, var(--surface-2) 70%, transparent);}
  html[data-theme="dark"] .about{background:color-mix(in srgb, var(--surface-2) 30%, transparent);}
  .about .wrap{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:48px;
    perspective:1400px;
  }
  .about-copy{max-width:760px; flex:1 1 480px;}
  .about-kicker{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
  }
  .about-kicker--stacked{
    position:relative;
    flex-direction:column;
    align-items:center;
    gap:90px;
    text-align:center;
    width:auto;
    flex:0 0 auto;
    margin-top:0;
  }
  .about-kicker--stacked > *{position:relative; z-index:1;}
  .about-kicker-sub{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:56px;
  }
  .about-kicker-sub .spec-pill{
    justify-content:center;
  }
  .about-kicker-sub .spec-pill-label{font-size:19px;}
  @media (max-width:900px){
    .about .wrap{flex-direction:column; align-items:stretch; gap:24px;}
    .about-copy{order:2;}
    .about-kicker--stacked{align-items:center; margin-top:0; margin-bottom:36px; gap:48px; order:1; width:100%;}
    .about-kicker-sub{gap:10px; flex-wrap:nowrap; width:100%; justify-content:space-between;}
    .about-kicker-sub .spec-pill{flex:1 1 0; min-width:0; justify-content:center;}
    .about-kicker--stacked .spec-pill-label{font-size:16px;}
    .about-kicker--stacked .spec-pill[data-anchor] .spec-pill-label{font-size:25px;}
    .about-kicker--stacked .spec-pill-icon{width:24px; height:24px;}
    .about-kicker--stacked .spec-pill-icon svg{width:12px; height:12px;}
    .about-kicker--stacked .spec-pill[data-anchor] .spec-pill-icon{width:28px; height:28px;}
    .about-kicker--stacked .spec-pill[data-anchor] .spec-pill-icon svg{width:14px; height:14px;}
    .about-kicker-sub .spec-pill{padding-block:5px; padding-inline:8px 4px; gap:5px;}
    .about{padding-bottom:0;}
    .why{padding-top:0;}
  }
  @media (max-width:380px){
    .about-kicker-sub{gap:8px;}
    .about-kicker--stacked .spec-pill-label{font-size:14px;}
    .about-kicker--stacked .spec-pill[data-anchor] .spec-pill-label{font-size:22px;}
    .about-kicker-sub .spec-pill{padding-inline:6px 3px;}
  }
  .kicker-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    z-index:0;
  }
  .kicker-lines path{
    fill:none;
    stroke:rgba(253,87,43,0.55);
    stroke-width:2;
    stroke-linecap:round;
  }
  .kicker-lines circle{
    fill:var(--orange);
  }
  @media (prefers-reduced-motion: no-preference){
    .kicker-lines path{
      animation:kickerFlow 2.4s linear infinite;
    }
  }
  @keyframes kickerFlow{
    0%,100%{opacity:.55;}
    50%{opacity:.9;}
  }
  .about-copy p{
    font-size:19.5px;
    color:var(--text-soft);
    line-height:1.8;
    margin-top:18px;
  }
  .about-copy p:first-of-type{margin-top:16px;}

  /* ---------- interactive capability panel (pill tabs) ---------- */
  .spec-panel{
    position:relative;
  }
  .spec-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:22px;
  }
  .spec-pill{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    flex-direction:row-reverse;
    padding-block:8px;
    padding-inline:22px 8px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
    cursor:pointer;
    font-family:var(--font-body);
    color:var(--text-soft);
    overflow:hidden;
    transition:color .3s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .2s ease, opacity .5s cubic-bezier(.16,.84,.44,1);
  }
  /* Entrance: pills pop in one after another once the panel scrolls into view */
  .spec-panel.reveal .spec-pill{
    opacity:0;
    transform:translateY(14px) scale(.9);
  }
  .spec-panel.reveal.in .spec-pill{
    opacity:1;
    transform:translateY(0) scale(1);
    transition:opacity .55s cubic-bezier(.16,.84,.44,1), transform .55s cubic-bezier(.16,.84,.44,1), color .3s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .spec-panel.reveal.in .spec-pill:nth-of-type(1){transition-delay:.05s;}
  .spec-panel.reveal.in .spec-pill:nth-of-type(2){transition-delay:.16s;}
  .spec-panel.reveal.in .spec-pill:nth-of-type(3){transition-delay:.27s;}
  .spec-panel.reveal.in .spec-pill:nth-of-type(4){transition-delay:.38s;}
  .spec-pill-icon{
    width:32px; height:32px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(253,87,43,0.1);
    color:var(--orange);
    flex-shrink:0;
    transition:background .35s ease, color .35s ease;
  }
  .spec-pill-icon svg{width:16px; height:16px;}
  .spec-pill-label{font-size:16.5px; font-weight:700; white-space:nowrap; line-height:1.4;}
  .spec-pill:hover{border-color:rgba(253,87,43,0.4); color:var(--heading);}
  .spec-pill:hover .spec-pill-icon{background:rgba(253,87,43,0.18);}
  .spec-pill:active{transform:scale(.95);}
  .spec-pill.is-active:active{transform:translateY(-1px) scale(.97);}
  .spec-pill:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
  .spec-pill.is-active{
    background:linear-gradient(135deg, var(--orange), #ff7a48);
    background-size:220% 220%;
    border-color:transparent;
    color:var(--white);
    box-shadow:0 14px 28px -14px rgba(253,87,43,0.6);
    transform:translateY(-1px);
    animation:pillGlow 2.8s ease-in-out infinite, pillGradient 4.5s ease infinite;
  }
  .spec-pill.is-active .spec-pill-icon{
    background:rgba(255,255,255,0.22);
    color:var(--white);
    animation:pillIconPop .5s cubic-bezier(.34,1.56,.64,1);
  }
  /* Soft light sweep across the active pill */
  .spec-pill.is-active::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 42%, transparent 64%);
    background-size:220% 100%;
    background-position:150% 0;
    animation:pillSheen 3.2s ease-in-out .3s infinite;
    pointer-events:none;
  }
  @media (prefers-reduced-motion: reduce){
    .spec-pill.is-active{animation:none;}
    .spec-pill.is-active .spec-pill-icon{animation:none;}
    .spec-pill.is-active::after{animation:none; display:none;}
    .spec-panel.reveal .spec-pill,
    .spec-panel.reveal.in .spec-pill{opacity:1; transform:none; transition:none;}
  }
  @keyframes pillGlow{
    0%,100%{box-shadow:0 14px 28px -14px rgba(253,87,43,0.6);}
    50%{box-shadow:0 18px 34px -10px rgba(253,87,43,0.85);}
  }
  @keyframes pillGradient{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
  }
  @keyframes pillIconPop{
    0%{transform:scale(.55) rotate(-18deg); opacity:.5;}
    60%{transform:scale(1.18) rotate(6deg); opacity:1;}
    100%{transform:scale(1) rotate(0);}
  }
  @keyframes pillSheen{
    0%{background-position:150% 0;}
    55%,100%{background-position:-50% 0;}
  }

  /* ---------- anchor label: "مقاولات عامة" reads as the parent, as plain black text (no pill container) ---------- */
  .spec-pill[data-anchor]{
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
    transform:none;
    animation:anchorBounce 5s ease-in-out infinite;
    cursor:default;
    gap:10px;
    overflow:visible;
  }
  @keyframes anchorBounce{
    0%{transform:translateY(0);}
    5%{transform:translateY(-38px);}
    11%{transform:translateY(0);}
    14%{transform:translateY(-14px);}
    17%{transform:translateY(0);}
    100%{transform:translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .spec-pill[data-anchor]{animation:none;}
  }
  .spec-pill[data-anchor]:hover{border-color:transparent; color:inherit;}
  .spec-pill[data-anchor]:active{transform:none;}
  .spec-pill[data-anchor]::after{display:none;}
  .spec-pill[data-anchor] .spec-pill-icon{
    width:34px; height:34px;
    background:rgba(253,87,43,0.12);
    color:var(--orange);
    animation:none;
  }
  .spec-pill[data-anchor] .spec-pill-icon svg{width:17px; height:17px;}
  .spec-pill[data-anchor] .spec-pill-label{
    font-size:26px;
    font-weight:800;
    letter-spacing:.01em;
    line-height:1.4;
    color:#000;
  }
  html[data-theme="dark"] .spec-pill[data-anchor] .spec-pill-label{color:#fff;}
  .spec-pill[data-anchor]::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:999px;
    border:1.4px solid rgba(253,87,43,0.4);
    animation:anchorPulse 2.6s ease-out infinite;
    pointer-events:none;
  }
  @keyframes anchorPulse{
    0%{transform:scale(.94); opacity:.9;}
    75%{transform:scale(1.14); opacity:0;}
    100%{transform:scale(1.14); opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){
    .spec-pill[data-anchor]::before{animation:none; display:none;}
  }

  .spec-viewport{
    display:grid;
    padding:36px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 30px 60px -38px rgba(0,0,50,0.24);
  }
  .spec-view{
    grid-area:1 / 1;
    display:flex;
    flex-direction:column;
    opacity:0;
    transform:translateY(16px) scale(.98);
    transition:opacity .45s cubic-bezier(.16,.84,.44,1), transform .5s cubic-bezier(.16,.84,.44,1);
    pointer-events:none;
    will-change:opacity, transform;
  }
  .spec-view.is-active{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    position:relative;
  }
  /* Outgoing view: fades/slides away instead of vanishing instantly,
     so it briefly crossfades with the incoming one (JS adds/removes
     this class and delays the hidden attribute to match). */
  .spec-view.is-leaving{
    opacity:0;
    transform:translateY(-14px) scale(.97);
    transition:opacity .32s ease, transform .38s cubic-bezier(.55,0,1,.45);
    pointer-events:none;
    position:relative;
  }
  @media (prefers-reduced-motion: reduce){
    .spec-view{transition:opacity .01s linear; transform:none;}
    .spec-view.is-leaving{transition:none;}
  }
  .spec-view-head{
    display:flex;
    align-items:center;
    gap:16px;
    flex-direction:row-reverse;
    justify-content:flex-end;
    margin-bottom:18px;
  }
  .spec-view-icon{
    width:54px; height:54px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(253,87,43,0.1);
    color:var(--orange);
    flex-shrink:0;
  }
  .spec-view.is-active .spec-view-icon{
    animation:specIconPop .55s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes specIconPop{
    0%{transform:scale(.4) rotate(-16deg); opacity:0;}
    60%{transform:scale(1.14) rotate(5deg); opacity:1;}
    100%{transform:scale(1) rotate(0);}
  }
  .spec-view.is-active h4,
  .spec-view.is-active > p{
    animation:specFadeUp .5s cubic-bezier(.16,.84,.44,1) both;
  }
  .spec-view.is-active > p{animation-delay:.06s;}
  @keyframes specFadeUp{
    0%{opacity:0; transform:translateY(10px);}
    100%{opacity:1; transform:translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .spec-view.is-active .spec-view-icon,
    .spec-view.is-active h4,
    .spec-view.is-active > p{animation:none;}
  }
  .spec-view-icon svg{width:25px; height:25px;}
  .spec-tag{
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:600;
    color:var(--text-soft);
    letter-spacing:.06em;
    display:block;
    margin-bottom:4px;
  }
  .spec-view h4{font-size:22px;color:var(--heading);font-family:var(--font-body);font-weight:700;}
  .spec-view > p{font-size:17.5px;color:var(--text-soft);line-height:1.8; max-width:640px;}

  .spec-view-list{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .spec-view-list li{
    position:relative;
    padding-inline-start:22px;
    font-size:15.5px;
    color:var(--text-soft);
    line-height:1.7;
    opacity:0;
    transform:translateY(8px);
  }
  .spec-view.is-active .spec-view-list li{
    animation:specFadeUp .5s cubic-bezier(.16,.84,.44,1) both;
    animation-delay:calc(.12s + (var(--li-i, 0) * 70ms));
  }
  .spec-view-list li:nth-child(1){--li-i:0;}
  .spec-view-list li:nth-child(2){--li-i:1;}
  .spec-view-list li:nth-child(3){--li-i:2;}
  .spec-view-list li:nth-child(4){--li-i:3;}
  .spec-view-list li:nth-child(5){--li-i:4;}
  @media (prefers-reduced-motion: reduce){
    .spec-view-list li{opacity:1; transform:none;}
    .spec-view.is-active .spec-view-list li{animation:none;}
  }
  .spec-view-list li::before{
    content:"";
    position:absolute;
    inset-inline-start:0; top:.65em;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--orange);
  }

  /* ---------- services ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    perspective:1400px;
    align-items:start;
  }
  .service-reveal{
    opacity:0;
    transform:translateY(50px) rotateX(-22deg) scale(.9);
    transform-origin:bottom center;
    will-change:transform, opacity;
  }
  .service-reveal.in{
    opacity:1;
    transform:translateY(0) rotateX(0) scale(1);
    transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .75s cubic-bezier(.16,.84,.44,1);
  }
  .service-card{
    position:relative;
    perspective:1400px;
  }
  .service-card-inner{
    position:relative;
    width:100%;
    height:390px;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    will-change:transform;
    transition:transform .7s cubic-bezier(.16,.84,.44,1);
  }
  .service-card.is-open .service-card-inner{transform:rotateY(180deg);}
  .service-card-face{
    position:absolute;
    inset:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:34px 26px 28px;
    display:flex;
    flex-direction:column;
    gap:14px;
    overflow:hidden;
    isolation:isolate;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transition:box-shadow .35s ease, border-color .35s ease;
  }
  .service-card-front::before{
    content:"";
    position:absolute;
    inset-inline-start:0; top:0;
    height:3px; width:0;
    background:linear-gradient(90deg, var(--orange), #ff8a5c);
    transition:width .6s cubic-bezier(.16,.84,.44,1) .15s;
  }
  .service-reveal.in .service-card-front::before{width:100%;}
  .service-card-back{
    transform:rotateY(180deg);
  }
  .service-card:hover .service-card-face{
    border-color:rgba(253,87,43,0.4);
    box-shadow:0 26px 50px -26px rgba(0,0,50,0.28);
  }
  .service-tag{
    position:absolute;
    inset-inline-end:22px; top:24px;
    font-family:var(--font-mono);
    font-size:34px;
    font-weight:700;
    color:var(--tint-2);
    z-index:0;
    transition:color .35s ease;
    user-select:none;
  }
  .service-card:hover .service-tag{color:rgba(253,87,43,0.18);}
  .service-card-back .service-tag{position:static; display:block; margin-bottom:2px; color:var(--tint-2);}
  .service-card-body{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:14px;
    height:100%;
  }
  .service-card .icon{
    position:relative;
    width:52px;height:52px;
    border-radius:14px;
    background:rgba(253,87,43,0.1);
    display:flex;align-items:center;justify-content:center;
    color:var(--orange);
    transition:background .35s ease, transform .35s ease, color .35s ease;
  }
  .service-card:hover .icon{background:var(--orange); color:var(--white); transform:rotate(-8deg) scale(1.06);}

  /* clear, always-on 2D motion: a pulsing ring "breathing" around each icon */
  .service-card .icon::before{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:18px;
    border:2px solid rgba(253,87,43,0.5);
    opacity:0;
    animation:iconPulse 2.6s ease-out infinite;
    animation-delay:calc(var(--i, 0) * .35s);
    pointer-events:none;
  }
  @keyframes iconPulse{
    0%{transform:scale(.82); opacity:.65;}
    75%,100%{transform:scale(1.38); opacity:0;}
  }

  /* glass "shine" sweep — plays once when the card enters view, replays on hover */
  .service-card-face::after{
    content:"";
    position:absolute;
    inset-block:0;
    inset-inline-start:-60%;
    width:38%;
    background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 70%, transparent 100%);
    transform:skewX(-20deg);
    z-index:2;
    pointer-events:none;
  }
  html[data-theme="dark"] .service-card-face::after{
    background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  }
  @keyframes cardShine{
    from{inset-inline-start:-60%;}
    to{inset-inline-start:130%;}
  }
  .service-reveal.in .service-card-face::after{
    animation:cardShine 1.15s ease-out calc(.3s + var(--i, 0) * .12s) 1;
  }
  .service-card:hover .service-card-face::after{
    animation:cardShine .9s ease-out;
  }
  @media (prefers-reduced-motion: reduce){
    .service-card .icon::before{animation:none; opacity:0;}
    .service-reveal.in .service-card-face::after,
    .service-card:hover .service-card-face::after{animation:none; opacity:0;}
  }
  .service-card .icon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.6;}
  .service-card-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
  }
  .service-name{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--orange);
  }
  .service-name-lg{
    font-size:26px;
    font-weight:800;
    letter-spacing:.04em;
    line-height:1.2;
  }
  .service-card h3{font-size:20px;color:var(--heading);line-height:1.35; margin-top:4px;}
  .service-card h3.service-subtitle{
    font-size:16px;
    font-weight:600;
    color:var(--heading);
    line-height:1.5;
    margin-top:-4px;
  }
  .service-card p{font-size:16px;color:var(--text-soft);line-height:1.7;}
  html[data-theme="dark"] .service-tag{color:rgba(255,255,255,0.06);}
  html[data-theme="dark"] .service-card-back .service-tag{color:rgba(255,255,255,0.5);}

  /* click-to-flip service detail */
  .service-card{cursor:pointer;}
  .service-card:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}

  .service-card-back ul{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1;}
  .service-card-back li{
    position:relative;
    padding-inline-start:20px;
    font-size:14px;
    color:var(--text-soft);
    line-height:1.6;
  }
  .service-card-back li::before{
    content:"";
    position:absolute;
    inset-inline-start:0; top:.55em;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--orange);
  }

  .service-expand-hint{
    display:flex; align-items:center; gap:7px;
    margin-top:14px;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--orange);
  }

  /* center the front face content only; back face stays as-is */
  .service-card-front .service-card-body{
    align-items:center;
    text-align:center;
  }
  .service-card-front .service-card-head{
    justify-content:center;
  }
  .service-card-front .service-expand-hint{
    align-self:center;
  }

  /* center the back face content too */
  .service-card-back{
    align-items:center;
    text-align:center;
  }
  .service-card-back ul{
    width:fit-content;
    margin-inline:auto;
  }
  .service-card-back .service-expand-hint{
    align-self:center;
  }
  .service-expand-hint svg{width:14px; height:14px;}
  .service-card-front .service-expand-hint{margin-top:auto; padding-top:14px;}
  .service-back-hint{margin-top:auto; padding-top:14px;}

  /* ---------- Quality, Capabilities, Journey & Ambition ---------- */
  /* Same visual language as "why-list": a flowing, full-width index list —
     not a card grid. Numbers + hairline dividers, background stays fully
     transparent throughout. */
  .values{background:color-mix(in srgb, var(--surface-2) 70%, transparent);}
  html[data-theme="dark"] .values{background:color-mix(in srgb, var(--surface-2) 30%, transparent);}

  .values-list{
    display:flex;
    flex-direction:column;
    margin-top:44px;
    border-top:1px solid var(--border);
  }
  .value-reveal{
    opacity:0;
    transform:translateY(44px) scale(.97);
    will-change:transform, opacity;
  }
  .value-reveal.in{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  .value-row{
    position:relative;
    background:transparent;
    padding:44px 4px;
    border-bottom:1px solid var(--border);
    transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .75s cubic-bezier(.16,.84,.44,1), padding-inline-end .35s var(--ease);
    overflow:hidden;
  }
  /* Accent panel sweeping in from the trailing edge on hover, matching
     the why-row treatment instead of a card border-glow. */
  .value-row::before{
    content:"";
    position:absolute;
    inset-block:0; inset-inline-start:0;
    width:0;
    background:linear-gradient(90deg, rgba(253,87,43,0.06), transparent);
    transition:width .5s var(--ease);
    pointer-events:none;
  }
  .value-head{
    position:relative;
    display:flex;
    align-items:center;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:22px;
    margin-bottom:22px;
  }
  .value-index{
    font-family:var(--font-display);
    font-size:44px;
    font-weight:800;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:1.4px var(--border-strong);
    flex-shrink:0;
    width:64px;
    text-align:center;
    transition:color .35s ease, -webkit-text-stroke-color .35s ease, text-shadow .35s ease, transform .35s var(--ease);
  }
  @supports not (-webkit-text-stroke: 1px black){
    .value-index{ color:var(--text-soft); }
  }
  .value-icon{
    width:58px; height:58px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(253,87,43,0.1);
    color:var(--orange);
    flex-shrink:0;
    transition:background .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1), color .35s ease, box-shadow .4s ease;
  }
  .value-icon svg{width:27px; height:27px;}
  .value-head h3{font-size:27px; color:var(--heading); line-height:1.3; margin:0;}

  .value-body{
    max-width:820px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .value-lead{
    font-size:19.5px;
    font-weight:700;
    color:var(--heading) !important;
  }
  .value-body > p{font-size:17.5px; color:var(--text-soft); line-height:1.8; margin:0;}
  .value-note{font-size:16.5px; font-style:italic; color:var(--text-soft) !important;}

  .value-checklist{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .value-checklist li{
    position:relative;
    padding-inline-start:24px;
    font-size:17px;
    font-weight:600;
    color:var(--heading);
    line-height:1.6;
  }
  .value-checklist li::before{
    content:"";
    position:absolute;
    inset-inline-start:0; top:.55em;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--orange);
    transition:transform .3s var(--ease);
  }
  .value-row:hover .value-checklist li::before{transform:scale(1.35);}

  .value-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:2px 0 4px;
  }
  .value-pill{
    font-family:var(--font-mono);
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.01em;
    color:var(--heading);
    background:rgba(253,87,43,0.08);
    border:1px solid rgba(253,87,43,0.22);
    border-radius:999px;
    padding:7px 16px;
    direction:ltr;
    display:inline-block;
    transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  }
  .value-pill:hover{
    transform:translateY(-3px);
    background:rgba(253,87,43,0.18);
    border-color:rgba(253,87,43,0.4);
  }

  .value-row .focus-highlight{margin-top:6px !important; font-size:17.5px;}

  @media (max-width:760px){
    .value-row{padding:32px 4px;}
    .value-head{gap:14px; margin-bottom:16px;}
    .value-index{font-size:30px; width:44px;}
    .value-icon{width:46px; height:46px;}
    .value-icon svg{width:21px; height:21px;}
    .value-head h3{font-size:22px;}
    .value-lead{font-size:18px;}
    .value-body > p{font-size:16.5px;}
    .value-checklist li{font-size:16px;}
  }

  /* Hover-only enhancements, scoped to real hover-capable pointers so a tap
     on touchscreens never leaves the row "stuck" in a glowing state. */
  @media (hover:hover) and (pointer:fine){
    .value-row:hover::before{width:100%;}
    .value-row:hover{padding-inline-end:14px;}
    .value-row:hover .value-index{
      color:var(--orange);
      -webkit-text-stroke:1.4px var(--orange);
      text-shadow:0 0 20px rgba(253,87,43,0.4);
      transform:scale(1.06);
    }
    .value-row:hover .value-icon{
      background:var(--orange);
      color:var(--white);
      transform:rotate(-10deg) scale(1.08);
      box-shadow:0 0 0 8px rgba(253,87,43,0.14), 0 10px 24px -8px rgba(253,87,43,0.55);
    }
  }

  /* Touch/coarse-pointer equivalent, triggered once by JS via .is-active as
     each row scrolls into view (no hover on touch devices). */
  @media (hover:none), (pointer:coarse){
    .value-row.is-active::before{width:100%;}
    .value-row.is-active{padding-inline-end:14px;}
    .value-row.is-active .value-index{
      color:var(--orange);
      -webkit-text-stroke:1.4px var(--orange);
      text-shadow:0 0 20px rgba(253,87,43,0.4);
      transform:scale(1.06);
    }
    .value-row.is-active .value-icon{
      background:var(--orange);
      color:var(--white);
      transform:rotate(-10deg) scale(1.08);
      box-shadow:0 0 0 8px rgba(253,87,43,0.14), 0 10px 24px -8px rgba(253,87,43,0.55);
    }
  }

  /* ---------- gallery / our work (bento) ---------- */
  .gallery{position:relative; overflow:hidden; background:color-mix(in srgb, var(--surface-2) 82%, transparent);}
  html[data-theme="dark"] .gallery{background:color-mix(in srgb, var(--surface-2) 40%, transparent);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:150px;
    gap:18px;
    perspective:1600px;
  }
  .gallery-item{
    position:relative;
    grid-column:span 1;
    grid-row:span 1;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    isolation:isolate;
    background:var(--surface-2);
    border:1px solid var(--border);
    outline:none;
  }
  .gallery-item.g-big{grid-column:span 2; grid-row:span 2;}
  .gallery-item.g-wide{grid-column:span 2; grid-row:span 1;}

  .gallery-reveal{
    opacity:0;
    transform:translateY(46px) rotateX(-18deg) scale(.91);
    transform-origin:bottom center;
    will-change:transform, opacity;
  }
  .gallery-reveal.in{
    opacity:1;
    transform:translateY(0) rotateX(0) scale(1);
    transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1);
  }

  .gallery-item img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    /* --py is updated continuously on scroll (JS) for a soft parallax drift;
       the transition below smooths/lerps those frequent updates instead of
       jumping, and still handles the hover zoom below. */
    transform:translateY(var(--py, 0px)) scale(1.06);
    filter:saturate(0.94) contrast(1.02);
    transition:transform .5s linear, filter .6s ease;
  }
  /* slow, always-on Ken Burns drift so the photos feel alive even without hover */
  .gallery-reveal.in img{
    animation:kenBurns 9s ease-in-out calc(var(--i, 0) * .25s) infinite alternate;
  }
  @keyframes kenBurns{
    from{transform:translateY(var(--py, 0px)) scale(1.05) rotate(0deg);}
    to{transform:translateY(var(--py, 0px)) scale(1.14) rotate(.6deg);}
  }
  .gallery-item:hover img,
  .gallery-item:focus-visible img{
    animation-play-state:paused;
    transform:translateY(var(--py, 0px)) scale(1.16) rotate(-0.4deg);
    filter:saturate(1.08) contrast(1.05);
    transition:transform .9s cubic-bezier(.16,.84,.44,1), filter .6s ease;
  }
  @media (prefers-reduced-motion: reduce){
    .gallery-item img{transform:scale(1.06) !important; transition:filter .6s ease !important; animation:none !important;}
    .gallery-reveal.in .gallery-tag,
    .gallery-expand::after{animation:none;}
  }

  .gallery-item::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,50,0) 35%, rgba(0,0,50,0.78) 100%);
    z-index:1;
    transition:opacity .4s ease;
  }
  .gallery-item::after{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
    z-index:2;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
  }
  .gallery-item:hover::after,
  .gallery-item:focus-visible::after{opacity:1; box-shadow:inset 0 0 0 2px rgba(253,87,43,0.55);}

  .gallery-caption{
    position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0;
    z-index:3;
    padding:20px;
    display:flex; flex-direction:column; gap:4px;
    transform:translateY(14px);
    transition:transform .45s cubic-bezier(.16,.84,.44,1);
  }
  .gallery-item:hover .gallery-caption,
  .gallery-item:focus-visible .gallery-caption{transform:translateY(0);}
  .gallery-tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.14em;
    color:var(--orange);
    opacity:0;
    transform:translateY(6px);
    transition:opacity .4s ease .05s, transform .4s ease .05s;
  }
  .gallery-item:hover .gallery-tag,
  .gallery-item:focus-visible .gallery-tag{opacity:1; transform:translateY(0);}
  /* clear pop-in bounce for the number badge, independent of hover */
  .gallery-reveal.in .gallery-tag{
    animation:tagPop .6s cubic-bezier(.34,1.56,.64,1) calc(.5s + var(--i, 0) * .12s) both;
  }
  @keyframes tagPop{
    0%{transform:translateY(6px) scale(.6); opacity:0;}
    60%{transform:translateY(0) scale(1.15); opacity:1;}
    100%{transform:translateY(0) scale(1); opacity:1;}
  }
  .gallery-caption h4{
    color:var(--white);
    font-size:17px;
    line-height:1.3;
  }
  .gallery-item.g-big .gallery-caption h4{font-size:22px;}
  .gallery-caption p{
    color:rgba(255,255,255,0.82);
    font-size:13.5px;
    line-height:1.5;
    max-width:34ch;
    opacity:0;
    max-height:0;
    overflow:hidden;
    transition:opacity .4s ease .08s, max-height .4s ease;
  }
  .gallery-item:hover .gallery-caption p,
  .gallery-item:focus-visible .gallery-caption p{opacity:1; max-height:80px;}

  .gallery-expand{
    position:absolute; top:14px; inset-inline-end:14px;
    z-index:3;
    width:34px; height:34px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.14);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:var(--white);
    opacity:0;
    transform:scale(.7) rotate(-20deg);
    transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease;
  }
  .gallery-expand svg{width:15px; height:15px;}
  .gallery-item:hover .gallery-expand,
  .gallery-item:focus-visible .gallery-expand{opacity:1; transform:scale(1) rotate(0);}
  .gallery-item:hover .gallery-expand:hover{background:var(--orange);}
  /* soft attention pulse so the expand cue reads clearly even before hover */
  .gallery-expand::after{
    content:"";
    position:absolute; inset:-5px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.55);
    opacity:0;
    animation:expandPulse 2.4s ease-out calc(1.4s + var(--i, 0) * .3s) infinite;
  }
  @keyframes expandPulse{
    0%{transform:scale(.8); opacity:.6;}
    75%,100%{transform:scale(1.35); opacity:0;}
  }

  html[data-theme="dark"] .gallery-item{background:var(--surface-2); border-color:var(--border);}
  html[data-theme="dark"] .gallery-item::before{background:linear-gradient(180deg, rgba(0,0,20,0) 30%, rgba(0,0,20,0.86) 100%);}

  @media (prefers-reduced-motion: reduce){
    .gallery-item img{transition:none;}
    .gallery-item:hover img,
    .gallery-item:focus-visible img{transform:none;}
  }

  @media (max-width:1024px){
    .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:180px;}
    .gallery-item.g-big{grid-column:span 2; grid-row:span 2;}
    .gallery-item.g-wide{grid-column:span 2; grid-row:span 1;}
  }
  @media (max-width:640px){
    .gallery-grid{grid-template-columns:1fr; grid-auto-rows:220px; gap:14px;}
    .gallery-item,
    .gallery-item.g-big,
    .gallery-item.g-wide{grid-column:span 1; grid-row:span 1;}
    .gallery-item.g-big{grid-row:span 2;}
    .gallery-caption{transform:translateY(0);}
    .gallery-tag,
    .gallery-caption p{opacity:1; transform:none; max-height:80px;}
    .gallery-expand{opacity:1; transform:scale(1);}
  }

  /* ---------- lightbox ---------- */
  .lightbox-overlay{
    position:fixed; inset:0;
    z-index:1500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(2,4,18,0.88);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .lightbox-overlay.open{
    opacity:1;
    visibility:visible;
    transition:opacity .3s var(--ease), visibility 0s linear 0s;
  }
  .lightbox-box{
    position:relative;
    width:min(920px, 100%);
    max-height:88vh;
    transform:translateY(20px) scale(.97);
    opacity:0;
    transition:transform .4s var(--ease), opacity .35s var(--ease);
  }
  .lightbox-overlay.open .lightbox-box{transform:translateY(0) scale(1); opacity:1;}
  .lightbox-box img{
    width:100%;
    max-height:70vh;
    object-fit:cover;
    border-radius:16px;
    border-top:3px solid var(--orange);
    display:block;
  }
  .lightbox-box figcaption{
    padding:18px 4px 0;
    color:var(--white);
  }
  .lightbox-box figcaption h4{color:var(--white); font-size:20px; margin-bottom:6px;}
  .lightbox-box figcaption p{color:rgba(255,255,255,0.78); font-size:15px; line-height:1.7;}
  .lightbox-close{
    position:absolute; top:-46px; inset-inline-end:0;
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center;
    color:var(--white);
    cursor:pointer;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .lightbox-close:hover{background:var(--orange); transform:rotate(90deg);}
  .lightbox-close svg{width:16px; height:16px;}
  @media (max-width:640px){
    .lightbox-close{top:-42px;}
    .lightbox-box img{max-height:52vh;}
  }

  /* ---------- why us ---------- */
  .why{background:color-mix(in srgb, var(--surface-2) 72%, transparent);color:var(--heading);position:relative;overflow:hidden;}
  html[data-theme="dark"] .why{background:color-mix(in srgb, var(--navy-deep) 32%, transparent);color:var(--white);}
  #whyCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    display:block;
    pointer-events:none;
    opacity:0.2;
  }
  .why .wrap{position:relative;z-index:2;}
  .why .section-head h2{color:var(--heading);}
  .why .section-head p{color:var(--text-soft);}
  .why-caption{
    color:var(--heading);
    font-size:clamp(19px,1.9vw,22px);
    font-weight:800;
    line-height:1.6;
    margin-top:8px;
    margin-bottom:40px;
    padding-inline-start:18px;
    border-inline-start:3px solid var(--orange);
  }
  .why-closing{
    color:var(--heading);
    font-size:clamp(22px,2.2vw,28px);
    font-weight:800;
    line-height:1.5;
    letter-spacing:-.01em;
    text-align:center;
    max-width:640px;
    margin:64px auto 0;
    padding-top:32px;
    position:relative;
  }
  .why-closing::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:64px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--orange), color-mix(in srgb, var(--orange) 30%, transparent));
  }
  @media (max-width:760px){
    .why-closing{margin-top:44px; padding-top:26px;}
  }

  /* ---------- how we work (process) ---------- */
  .process{background:color-mix(in srgb, var(--surface-2) 72%, transparent);}
  html[data-theme="dark"] .process{background:color-mix(in srgb, var(--navy-deep) 32%, transparent);}
  html[data-theme="dark"] .process{background:color-mix(in srgb, var(--surface-2) 82%, transparent);}

  .process-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
  }
  .process-step{
    display:flex;
    flex-direction:row-reverse;
    gap:28px;
    opacity:0;
    transform:translateY(40px);
    transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1);
    transition-delay:calc(var(--i) * .08s);
  }
  .process-step.in{opacity:1; transform:translateY(0);}
  .process-step-rail{
    flex-shrink:0;
    width:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .process-step-node{
    width:56px; height:56px;
    border-radius:50%;
    background:var(--surface-2);
    border:2px solid var(--orange);
    color:var(--orange);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    position:relative;
    z-index:2;
    box-shadow:0 0 0 6px color-mix(in srgb, var(--orange) 8%, transparent);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
  }
  .process-step-node::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;
    border:1.6px solid var(--orange);
    opacity:0;
    animation:processPulse 2.6s ease-out infinite;
    animation-delay:calc(var(--i) * .35s);
    pointer-events:none;
  }
  .process-step.in .process-step-node::before{opacity:1;}
  @keyframes processPulse{
    0%{transform:scale(1); opacity:.55;}
    100%{transform:scale(1.55); opacity:0;}
  }
  .process-step-node svg{width:24px; height:24px; transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
  .process-step.in .process-step-node svg{
    animation:processIconPop .55s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay:calc(var(--i) * .08s + .2s);
  }
  @keyframes processIconPop{
    0%{transform:scale(.4) rotate(-25deg); opacity:0;}
    100%{transform:scale(1) rotate(0); opacity:1;}
  }
  .process-step:hover .process-step-node{
    transform:scale(1.08);
    box-shadow:0 0 0 8px color-mix(in srgb, var(--orange) 14%, transparent);
  }
  .process-step-connector{
    width:2px;
    flex:1;
    min-height:36px;
    margin-top:6px;
    background-image:repeating-linear-gradient(to bottom, var(--border-strong) 0 6px, transparent 6px 12px);
    background-size:2px 24px;
    animation:processDashFlow 1.4s linear infinite;
  }
  @keyframes processDashFlow{
    from{background-position:0 0;}
    to{background-position:0 24px;}
  }
  .process-step-body{
    flex:1;
    min-width:0;
    padding-bottom:44px;
  }
  .process-step:last-child .process-step-body{padding-bottom:0;}
  .process-step-head{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-bottom:10px;
  }
  .process-step-num{
    font-family:var(--font-display);
    font-weight:800;
    font-size:15px;
    color:var(--orange);
    letter-spacing:.02em;
  }
  .process-step-head h4{font-size:22px; font-weight:800; color:var(--heading); letter-spacing:-.01em;}
  .process-step-body p{color:var(--text-soft); font-size:17px; line-height:1.75; max-width:620px; margin:0;}

  .process-flow{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px 12px;
    text-align:center;
    margin:64px auto 0;
    padding:0;
    max-width:820px;
    border-radius:0;
    background:none;
    border:none;
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(14px,1.6vw,16px);
    color:var(--heading);
    letter-spacing:-.01em;
  }
  .process-flow-arrow{width:14px; height:14px; color:var(--orange); flex-shrink:0; animation:processArrowNudge 3.5s ease-in-out infinite;}
  html[dir="rtl"] .process-flow-arrow{animation-name:processArrowNudgeRtl;}
  .process-flow span{
    position:relative;
    padding:4px 2px;
    animation:processFlowGlow 3.5s ease-in-out infinite;
  }
  .process-flow span:nth-child(1){animation-delay:0s;}
  .process-flow span:nth-child(3){animation-delay:.7s;}
  .process-flow span:nth-child(5){animation-delay:1.4s;}
  .process-flow span:nth-child(7){animation-delay:2.1s;}
  .process-flow span:nth-child(9){animation-delay:2.8s;}
  @keyframes processFlowGlow{
    0%, 84%, 100%{color:var(--heading);}
    8%, 30%{color:var(--orange);}
  }
  @keyframes processArrowNudge{
    0%, 100%{transform:translateX(0);}
    50%{transform:translateX(3px);}
  }
  @keyframes processArrowNudgeRtl{
    0%, 100%{transform:scaleX(-1) translateX(0);}
    50%{transform:scaleX(-1) translateX(3px);}
  }
  .process-closing{
    color:var(--heading);
    font-size:clamp(22px,2.2vw,28px);
    font-weight:800;
    line-height:1.5;
    letter-spacing:-.01em;
    text-align:center;
    max-width:640px;
    margin:56px auto 0;
    padding-top:32px;
    position:relative;
  }
  .process-closing::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:64px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--orange), color-mix(in srgb, var(--orange) 30%, transparent));
  }
  @media (max-width:760px){
    .process-step{gap:18px;}
    .process-step-rail{width:44px;}
    .process-step-node{width:44px; height:44px;}
    .process-step-node svg{width:19px; height:19px;}
    .process-step-body{padding-bottom:32px;}
    .process-step-head h4{font-size:19px;}
    .process-step-body p{font-size:16px;}
    .process-flow{
      margin:44px auto 0;
      padding:0;
      font-size:14.5px;
      border-radius:0;
      background:none;
      border:none;
      gap:6px 8px;
      flex-wrap:nowrap;
      overflow-x:auto;
      width:fit-content;
      max-width:100%;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }
    .process-flow::-webkit-scrollbar{display:none;}
    .process-flow span{white-space:nowrap; flex-shrink:0;}
    .process-flow-arrow{width:13px; height:13px; flex-shrink:0;}
    .process-closing{margin-top:40px; padding-top:26px;}
  }
  @media (prefers-reduced-motion: reduce){
    .process-step-connector{animation:none;}
    .process-step-node::before{animation:none; opacity:0;}
    .process-step.in .process-step-node svg{animation:none;}
    .process-flow span{animation:none;}
    .process-flow-arrow{animation:none;}
  }

  /* Deliberately NOT a card grid — services already owns that pattern.
     "Why us" reads as a numbered index list instead: big mono numerals,
     full-width rows, hairline dividers. Distinct silhouette at a glance. */
  .why-list{
    display:flex;
    flex-direction:column;
    border-top:1px solid var(--border);
  }
  .why-reveal{
    opacity:0;
    transform:translateY(44px) scale(.97);
    will-change:transform, opacity;
  }
  .why-reveal.in{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  .why-row{
    position:relative;
    display:flex;
    align-items:center;
    flex-direction:row-reverse;
    gap:28px;
    padding:34px 4px;
    border-bottom:1px solid var(--border);
    transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .75s cubic-bezier(.16,.84,.44,1), padding-inline-end .35s var(--ease);
    overflow:hidden;
  }
  /* Accent panel that sweeps in from the trailing (start) edge on hover —
     replaces the card border-glow language used elsewhere with a fill wipe. */
  .why-row::before{
    content:"";
    position:absolute;
    inset-block:0; inset-inline-start:0;
    width:0;
    background:linear-gradient(90deg, rgba(253,87,43,0.08), transparent);
    transition:width .5s var(--ease);
    pointer-events:none;
  }
  /* Diagonal light sweep that glides across the row on hover — a quick
     shimmer, not a loop, so it reads as a one-time flourish per hover. */
  .why-row::after{
    content:"";
    position:absolute;
    inset-block:0;
    inset-inline-start:-60%;
    width:45%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55) 45%, transparent 90%);
    transform:skewX(-18deg);
    opacity:0;
    pointer-events:none;
    mix-blend-mode:overlay;
  }
  html[data-theme="dark"] .why-row::after{
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.16) 45%, transparent 90%);
  }
  @keyframes whySheen{
    0%{inset-inline-start:-60%; opacity:0;}
    12%{opacity:1;}
    85%{opacity:1;}
    100%{inset-inline-start:130%; opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){
    .why-row::after{display:none;}
  }
  .why-index{
    font-family:var(--font-display);
    font-size:38px;
    font-weight:800;
    line-height:1;
    letter-spacing:0;
    color:transparent;
    -webkit-text-stroke:1.4px var(--border-strong);
    flex-shrink:0;
    width:56px;
    text-align:center;
    transition:color .35s ease, -webkit-text-stroke-color .35s ease, text-shadow .35s ease, transform .35s var(--ease);
  }
  @supports not (-webkit-text-stroke: 1px black){
    .why-index{ color:var(--text-soft); }
  }
  .why-icon{
    width:56px; height:56px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(253,87,43,0.1);
    color:var(--orange);
    flex-shrink:0;
    transition:background .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1), color .35s ease, box-shadow .4s ease;
  }
  .why-icon svg{width:26px;height:26px;}
  .why-row-body{flex:1; min-width:0; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;}
  .why-row h4{color:var(--heading); font-size:21px; font-weight:800; letter-spacing:-.01em; flex-shrink:0; min-width:210px;}
  .why-row p{color:var(--text-soft); font-size:17px; font-weight:400; line-height:1.75; margin:0; flex:1; min-width:220px;}
  .why-row-arrow{
    flex-shrink:0;
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-soft);
    opacity:0;
    transform:translateX(8px);
    transition:opacity .35s ease, transform .35s ease, color .35s ease;
  }
  html[dir="rtl"] .why-row-arrow{transform:translateX(-8px);}
  .why-row-arrow svg{width:16px; height:16px;}
  @media (max-width:760px){
    .why-row{flex-wrap:wrap; gap:16px; padding:26px 4px;}
    .why-row-body{gap:6px;}
    .why-row h4{min-width:0; width:100%; font-size:21px;}
    .why-row p{font-size:17px; line-height:1.75;}
    .why-row-arrow{display:none;}
    .why-index{font-size:28px; width:40px;}
    .why-icon{width:44px; height:44px;}
    .why-icon svg{width:20px; height:20px;}
  }

  /* Hover-only enhancements — scoped to real hover-capable pointers (mouse)
     so tapping a row on touchscreens never leaves it "stuck" in a glowing
     hover state (there's no pointerleave event to undo it there). */
  @media (hover:hover) and (pointer:fine){
    .why-row:hover::before{width:100%;}
    .why-row:hover{padding-inline-end:14px;}
    .why-row:hover::after{
      opacity:1;
      animation:whySheen .9s cubic-bezier(.16,.84,.44,1);
    }
    .why-row:hover .why-index{
      color:var(--orange);
      -webkit-text-stroke:1.4px var(--orange);
      text-shadow:0 0 20px rgba(253,87,43,0.4);
      transform:scale(1.06);
    }
    .why-row:hover .why-icon{
      background:var(--orange);
      color:var(--white);
      transform:rotate(-10deg) scale(1.08);
      box-shadow:0 0 0 8px rgba(253,87,43,0.14), 0 10px 24px -8px rgba(253,87,43,0.55);
    }
    .why-row:hover .why-row-arrow{opacity:1; transform:translateX(0); color:var(--orange);}
  }

  /* Touch/coarse-pointer equivalent — same accent sweep, sheen and glow as
     the desktop hover state above, but triggered once by JS (via .is-active)
     as each row scrolls into view, since touch devices have no hover to
     trigger it with. Kept as a separate rule (not merged into the hover
     query) so desktop behaviour is untouched. */
  @media (hover:none), (pointer:coarse){
    .why-row.is-active::before{width:100%;}
    .why-row.is-active{padding-inline-end:14px;}
    .why-row.is-active::after{
      opacity:1;
      animation:whySheen .9s cubic-bezier(.16,.84,.44,1);
    }
    .why-row.is-active .why-index{
      color:var(--orange);
      -webkit-text-stroke:1.4px var(--orange);
      text-shadow:0 0 20px rgba(253,87,43,0.4);
      transform:scale(1.06);
    }
    .why-row.is-active .why-icon{
      background:var(--orange);
      color:var(--white);
      transform:rotate(-10deg) scale(1.08);
      box-shadow:0 0 0 8px rgba(253,87,43,0.14), 0 10px 24px -8px rgba(253,87,43,0.55);
    }
    .why-row.is-active .why-row-arrow{opacity:1; transform:translateX(0); color:var(--orange);}
  }
  @media (prefers-reduced-motion: reduce){
    .why-row.is-active::after{animation:none; opacity:0;}
  }

  /* ---------- contact ---------- */
  .contact{background:color-mix(in srgb, var(--surface-2) 70%, transparent);}
  html[data-theme="dark"] .contact{background:color-mix(in srgb, var(--surface-2) 30%, transparent);}
  .contact .wrap{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:56px;
    perspective:1400px;
  }
  .contact-info h2{font-size:clamp(32px,3.8vw,44px); line-height:1.15;}
  .contact-info p{margin-top:16px; color:var(--text-soft); font-size:19px; line-height:1.75; max-width:42ch;}

  .contact-signature{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .contact-signature-sub{
    font-family:var(--font-body);
    font-size:14px;
    color:var(--text-soft);
    letter-spacing:.01em;
    display:block;
  }

  .contact-highlight{
    margin-top:22px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(253,87,43,0.08);
    border:1px solid rgba(253,87,43,0.22);
    color:var(--heading);
    font-size:14.5px;
  }
  .contact-highlight svg{width:17px;height:17px;flex:none;color:var(--orange);}
  .contact-highlight strong{color:var(--orange); font-weight:800;}

  .contact-list{margin-top:30px; display:flex; flex-direction:column; gap:10px;}
  .contact-list .row{
    display:flex; align-items:center; gap:14px;
    padding:10px 10px;
    margin-inline:-10px;
    border-radius:14px;
    color:inherit;
    transition:background .3s var(--ease), transform .3s var(--ease);
  }
  .contact-list .row .ic{
    width:44px;height:44px;border-radius:12px;
    background:var(--surface); border:1px solid var(--border-strong);
    display:flex;align-items:center;justify-content:center;flex:none;
    transition:background .3s var(--ease), border-color .3s var(--ease), transform .35s cubic-bezier(.34,1.56,.64,1), color .3s var(--ease);
  }
  .contact-list .row .ic svg{width:19px;height:19px;stroke:var(--navy); fill:none; stroke-width:1.7; transition:stroke .3s ease;}
  /* Each label/value stretches to the row's full width and is aligned with
     text-align (not shrink-wrapped via align-items) so a value with its own
     dir="ltr" — like the phone number, which needs its digits left-to-right —
     still lines up flush with the label above it instead of drifting to the
     opposite side of the row. */
  .contact-list .row div{display:flex;flex-direction:column; flex:1; min-width:0;}
  .contact-list .row span.lbl{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; color:var(--steel); text-transform:uppercase; text-align:right;}
  .contact-list .row span.val{font-size:17px; color:var(--heading); font-weight:600; margin-top:2px; transition:color .3s ease; text-align:right;}
  html[dir="ltr"] .contact-list .row span.lbl,
  html[dir="ltr"] .contact-list .row span.val{text-align:left;}
  .contact-list .row-arrow{
    flex:none;
    width:20px;height:20px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-soft);
    opacity:0;
    transform:translateX(6px);
    transition:opacity .3s ease, transform .3s ease, color .3s ease;
  }
  html[dir="rtl"] .contact-list .row-arrow{transform:translateX(-6px);}
  .contact-list .row-arrow svg{width:15px;height:15px;}
  @media (hover:hover) and (pointer:fine){
    .contact-list .row:hover{background:rgba(253,87,43,0.06);}
    .contact-list .row:hover .ic{
      background:var(--orange); border-color:var(--orange);
      transform:rotate(-8deg) scale(1.06);
    }
    .contact-list .row:hover .ic svg{stroke:var(--white);}
    .contact-list .row:hover span.val{color:var(--orange);}
    .contact-list .row:hover .row-arrow{opacity:1; transform:translateX(0); color:var(--orange);}
  }

  .contact-form{
    background:var(--surface);
    border:2px solid var(--border-strong);
    border-radius:18px;
    padding:36px;
    position:relative;
    overflow:hidden;
    box-shadow:0 18px 44px -30px rgba(10,13,31,0.35);
    transition:box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  }
  .contact-form::before{
    content:"";
    position:absolute; inset-block-start:0; inset-inline:0;
    height:4px;
    background:linear-gradient(90deg, var(--orange), var(--navy) 70%);
    opacity:.85;
  }
  .contact-form:focus-within{
    border-color:rgba(253,87,43,0.5);
    box-shadow:0 24px 54px -28px rgba(253,87,43,0.28);
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
  .field{display:flex; flex-direction:column; gap:8px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft);}
  .field input, .field select, .field textarea{
    border:1px solid var(--border-strong);
    border-radius:9px;
    padding:12px 14px;
    font-family:var(--font-body);
    font-size:16.5px;
    color:var(--text);
    background:var(--surface);
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .field textarea{resize:vertical; min-height:96px;}
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(253,87,43,0.14);
    outline:none;
  }
  .contact-form .btn-primary{width:100%; justify-content:center; margin-top:6px;}
  .form-note{font-size:14px; color:var(--text-soft); margin-top:14px; text-align:center;}
  .form-success{
    display:none;
    align-items:center;
    gap:12px;
    background:var(--surface-2);
    border:1px solid var(--border-strong);
    border-radius:12px;
    padding:16px 18px;
    margin-bottom:18px;
    font-size:16px;
    color:var(--heading);
    font-weight:600;
  }
  .form-success.show{display:flex;}
  .form-success svg{width:20px;height:20px;stroke:var(--orange); flex:none;}

  /* ---------- quick actions (floating) ---------- */
  /* ===== Quick Actions: single FAB that expands into a small menu ===== */
  .quick-actions{
    position:fixed;
    inset-inline-end:20px; bottom:20px;
    z-index:500;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:14px;
    animation:qaDropIn .8s cubic-bezier(.16,.84,.44,1) both;
  }
  @keyframes qaDropIn{
    0%{ opacity:0; transform:translateY(-130px); }
    100%{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .quick-actions{ animation:none; }
  }

  /* The expandable menu, stacked above the FAB */
  .qa-menu{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    perspective:900px;
  }
  .qa-item{
    display:flex; align-items:center;
    gap:12px;
    height:50px;
    padding-inline:8px 8px;
    border-radius:25px;
    border:1px solid var(--qa-item-border);
    cursor:pointer;
    background:var(--surface);
    box-shadow:0 14px 30px -12px rgba(10,13,31,0.28);
    font-family:var(--font-body);
    font-size:14.5px;
    font-weight:800;
    color:var(--text);
    transition:transform .35s cubic-bezier(.16,.84,.44,1), opacity .3s ease, box-shadow .25s ease, background .25s ease;
    transform-style:preserve-3d;
    will-change:transform;
    /* Collapsed by default: hidden below the FAB, non-interactive */
    opacity:0;
    transform:translateY(14px) scale(.9);
    pointer-events:none;
  }
  .qa-item-label{ white-space:nowrap; padding-inline-start:6px; }
  .qa-item-icon{
    width:34px; height:34px;
    flex:none;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .qa-item-icon svg{ width:17px; height:17px; }
  .qa-item{ position:relative; overflow:visible; z-index:1; }
  .qa-item::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:30px;
    z-index:-1;
    filter:blur(9px);
    opacity:.28;
    animation:qaGlowPulse 2.6s ease-in-out infinite;
  }
  .qa-request::before{ background:var(--orange); }
  .qa-inquiry::before{ background:#164dcc; animation-delay:.5s; }
  @keyframes qaGlowPulse{
    0%, 100%{ opacity:.18; transform:scale(.94); }
    50%{ opacity:.4; transform:scale(1.04); }
  }
  @media (prefers-reduced-motion: reduce){
    .qa-item::before{ animation:none; opacity:.4; }
  }
  .qa-request{ background:var(--orange); color:var(--white); }
  .qa-request .qa-item-icon{ background:rgba(255,255,255,0.22); color:var(--white); }
  .qa-inquiry{ background:#164dcc; color:var(--white); }
  .qa-inquiry .qa-item-icon{ background:rgba(255,255,255,0.22); color:var(--white); }
  .qa-item:hover{ box-shadow:0 18px 36px -12px rgba(10,13,31,0.34); }
  .qa-request:hover{ background:#e04a24; }
  .qa-inquiry:hover{ background:#1140ad; }

  /* Always-on attention motion: each pill breathes in its own brand
     color and gives a punchy 3D wobble so both options stay noticeable
     without needing a click. */
  .qa-request{ animation:qaPulseOrange 2.6s ease-in-out infinite, qaShake3D 3.6s ease-in-out infinite; }
  .qa-inquiry{ animation:qaPulseBlue 2.6s ease-in-out .5s infinite, qaShake3D 3.6s ease-in-out .7s infinite; }
  @keyframes qaShake3D{
    0%, 62%, 100%{ transform:translateX(0) translateY(0) rotate(0) rotateX(0) rotateY(0) scale(1); }
    64%{  transform:translateX(-10px) translateY(-3px) rotate(-8deg)  rotateX(8deg)  rotateY(-28deg) scale(1.07); }
    66%{  transform:translateX(10px)  translateY(2px)  rotate(8deg)   rotateX(-8deg) rotateY(28deg)  scale(1.07); }
    68%{  transform:translateX(-8px)  translateY(-2px) rotate(-6deg)  rotateX(6deg)  rotateY(-22deg) scale(1.05); }
    70%{  transform:translateX(8px)   translateY(1px)  rotate(6deg)   rotateX(-6deg) rotateY(22deg)  scale(1.05); }
    72%{  transform:translateX(-6px) rotate(-4deg) rotateX(4deg)  rotateY(-14deg) scale(1.03); }
    74%{  transform:translateX(6px)  rotate(4deg)  rotateX(-4deg) rotateY(14deg)  scale(1.03); }
    76%{  transform:translateX(-3px) rotate(-2deg) rotateY(-7deg) scale(1.01); }
    78%{  transform:translateX(3px)  rotate(2deg)  rotateY(7deg)  scale(1.01); }
    80%{  transform:translateX(-1px) rotate(-0.5deg) rotateY(-2deg); }
  }
  .qa-request:hover, .qa-inquiry:hover{ animation-play-state:paused; }
  @keyframes qaPulseOrange{
    0%, 100%{ box-shadow:0 14px 30px -12px rgba(10,13,31,0.28), 0 0 0 0 rgba(253,87,43,0.22); }
    50%{ box-shadow:0 14px 30px -12px rgba(10,13,31,0.28), 0 0 0 5px rgba(253,87,43,0); }
  }
  @keyframes qaPulseBlue{
    0%, 100%{ box-shadow:0 14px 30px -12px rgba(10,13,31,0.28), 0 0 0 0 rgba(22,77,204,0.2); }
    50%{ box-shadow:0 14px 30px -12px rgba(10,13,31,0.28), 0 0 0 5px rgba(22,77,204,0); }
  }
  @media (prefers-reduced-motion: reduce){
    .qa-request, .qa-inquiry{ animation:none; }
  }

  /* Open state: menu items pop into place, staggered */
  .quick-actions.open .qa-item{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .quick-actions.open .qa-menu .qa-item:nth-child(1){ transition-delay:.06s; }
  .quick-actions.open .qa-menu .qa-item:nth-child(2){ transition-delay:0s; }

  /* The main circular trigger button, plus its wrapper so the tooltip
     label can be positioned relative to it. */
  .qa-fab-wrap{ position:relative; display:flex; align-items:center; }
  .qa-fab{
    width:60px; height:60px;
    border-radius:50%;
    border:1.5px solid var(--qa-item-border);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    background:var(--surface);
    color:var(--orange);
    box-shadow:0 14px 32px -12px rgba(10,13,31,0.35);
    transition:transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, background .3s ease, color .3s ease;
    animation:qaFabPulse 2.6s ease-in-out infinite;
  }
  .qa-fab:hover{ transform:translateY(-3px) scale(1.05); background:var(--orange); color:var(--white); }
  .qa-fab:active{ transform:translateY(0) scale(.96); }
  .qa-fab-icon{
    position:absolute;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .25s ease, transform .35s cubic-bezier(.16,.84,.44,1);
  }
  .qa-fab-icon svg{width:30px;height:30px;}
  .qa-fab-icon-plus{ opacity:1; transform:rotate(0deg); }
  .qa-fab-icon-close{ opacity:0; transform:rotate(-45deg); }
  .quick-actions.open .qa-fab{ animation:none; }
  .quick-actions.open .qa-fab-icon-plus{ opacity:0; transform:rotate(45deg); }
  .quick-actions.open .qa-fab-icon-close{ opacity:1; transform:rotate(0deg); }

  @keyframes qaFabPulse{
    0%, 100%{ box-shadow:0 14px 32px -12px rgba(10,13,31,0.35), 0 0 0 0 rgba(253,87,43,0.22); }
    50%{ box-shadow:0 14px 32px -12px rgba(10,13,31,0.35), 0 0 0 6px rgba(253,87,43,0); }
  }

  /* Persistent tooltip bubble: tells the visitor to tap the button,
     without expanding into the full menu or taking up screen space. */
  .qa-tooltip{
    position:absolute;
    top:50%;
    inset-inline-end:calc(100% + 14px);
    transform:translateY(-50%);
    white-space:nowrap;
    background:var(--surface);
    color:var(--heading);
    font-family:var(--font-body);
    font-size:13.5px;
    font-weight:800;
    padding:9px 16px;
    border-radius:20px;
    border:1px solid var(--qa-item-border);
    box-shadow:0 10px 24px -10px rgba(10,13,31,0.3);
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
  }
  .qa-tooltip::after{
    content:"";
    position:absolute;
    top:50%; inset-inline-start:100%;
    transform:translateY(-50%);
    border:6px solid transparent;
    border-inline-start-color:var(--surface);
  }
  .quick-actions.open .qa-tooltip{
    opacity:0;
    visibility:hidden;
    transform:translateY(-50%) translateX(6px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }

  /* Past the hero: kept for potential future state, no visual change now
     since the FAB is white throughout the site. */
  .quick-actions.past-hero .qa-fab{}
  .quick-actions.past-hero .qa-fab:hover{
    background:var(--orange);
    color:var(--white);
  }

  @media (prefers-reduced-motion: reduce){
    .qa-fab{ animation:none; }
  }

  @media (max-width:720px){
    .quick-actions{ inset-inline-end:14px; bottom:16px; gap:12px; }
    .qa-fab{ width:54px; height:54px; }
    .qa-item{ height:46px; font-size:13.5px; }
    .qa-item-icon{ width:30px; height:30px; }
    .qa-item-icon svg{ width:15px; height:15px; }
    .qa-tooltip{ font-size:12.5px; padding:8px 13px; }
    .qa-badge{ top:-9px; font-size:9.5px; padding:3px 7px; }
  }

  @media (max-width:460px){
    .logo-img{height:28px;}
    .lang-toggle .lang-toggle-label{display:none;}
    .lang-toggle{padding:9px; width:38px; height:38px; justify-content:center;}

    /* Not enough room beside the FAB on very small screens: tuck the
       tooltip above it instead, so it never runs off-screen. Anchored to
       the same edge as the FAB itself (inline-end) so it can only grow
       inward toward the middle of the screen, never past the far edge. */
    .qa-tooltip{
      inset-inline-start:auto;
      inset-inline-end:0;
      top:auto;
      bottom:calc(100% + 12px);
      transform:none;
      max-width:calc(100vw - 40px);
      white-space:normal;
      text-align:center;
    }
    .qa-tooltip::after{
      inset-inline-start:auto;
      inset-inline-end:22px;
      top:100%;
      transform:none;
      border-color:transparent;
      border-inline-end-color:transparent;
      border-top-color:var(--surface);
    }
    .quick-actions.open .qa-tooltip{ transform:translateY(6px); }
  }


  /* ---------- modal popups ---------- */
  .modal-overlay{
    position:fixed; inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(6,10,32,0.7);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .modal-overlay.open{
    opacity:1;
    visibility:visible;
    transition:opacity .3s var(--ease), visibility 0s linear 0s;
  }
  .modal-box{
    position:relative;
    width:100%;
    max-width:480px;
    max-height:88vh;
    overflow-y:auto;
    background:var(--surface);
    border-radius:18px;
    padding:38px 34px 32px;
    transform:translateY(24px) scale(.97);
    opacity:0;
    transition:transform .38s var(--ease), opacity .3s var(--ease);
    border-top:3px solid var(--orange);
  }
  .modal-overlay.open .modal-box{
    transform:translateY(0) scale(1);
    opacity:1;
  }

  .modal-close{
    position:absolute; top:16px; inset-inline-end:16px;
    width:34px; height:34px;
    border:1px solid var(--border-strong);
    border-radius:50%;
    background:var(--surface);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    color:var(--text-soft);
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
    z-index:3;
  }
  .modal-close svg{width:16px;height:16px;}
  .modal-close:hover{ background:var(--navy-deep); color:var(--white); transform:rotate(90deg); }

  .modal-head{ position:relative; z-index:1; margin-bottom:22px; }
  .modal-head .eyebrow{ margin-bottom:12px; }
  .modal-head h3{ font-size:24px; color:var(--heading); line-height:1.3; }
  .modal-head p{ font-size:15px; color:var(--text-soft); margin-top:8px; }

  .modal-form{ position:relative; z-index:1; }
  .modal-form .field{ margin-bottom:16px; }
  .modal-form .form-row{ margin-bottom:0; }
  .modal-form .btn-primary{ width:100%; justify-content:center; margin-top:4px; }

  @media (max-width:520px){
    .modal-box{ padding:30px 22px 26px; }
    .modal-form .form-row{ grid-template-columns:1fr; gap:16px; margin-bottom:16px; }
  }

  /* ---------- footer ---------- */
  footer{
    background:color-mix(in srgb, var(--black) 68%, transparent);
    color:#b7bcd6;
    padding:56px 0 26px;
  }
  html[data-theme="dark"] footer{background:color-mix(in srgb, var(--black) 34%, transparent);}
  footer .wrap{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:40px;
    padding-bottom:36px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    perspective:1400px;
  }
  .footer-brand .logo{color:var(--white);}
  .footer-logo-img{height:78px;}
  .footer-brand p{margin-top:16px; font-size:17px; line-height:1.7; max-width:36ch; color:#8b91ad;}
  footer h5{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#7d84a3;
    margin-bottom:16px;
  }
  footer ul{display:flex; flex-direction:column; gap:11px;}
  footer ul a{font-size:16px; color:#c7cbe2; transition:color .2s var(--ease);}
  footer ul a:hover{color:var(--orange);}
  .footer-bottom{
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    color:#6f7492;
    flex-wrap:wrap;
    gap:10px;
  }
  .footer-bottom span.dot{color:var(--orange);}

  /* ---------- Arabic (RTL) typography fix ----------
     .eyebrow, .hero-eyebrow, ticker text, form labels and footer headings
     use the Latin mono font by default. It has no Arabic glyphs and its
     wide letter-spacing breaks Arabic letter-joining, so when the page is
     in Arabic these elements fall back to Tajawal with normal spacing. */
  html[dir="rtl"] .eyebrow,
  html[dir="rtl"] .hero-eyebrow,
  html[dir="rtl"] .ticker-track span,
  html[dir="rtl"] .contact-list .row span.lbl,
  html[dir="rtl"] .field label,
  html[dir="rtl"] footer h5{
    font-family:var(--font-body);
    letter-spacing:0;
    text-transform:none;
  }

  /* ---------- responsive ---------- */
  @media (max-width:980px){

    .services-grid{grid-template-columns:repeat(2,1fr);}
    .contact .wrap{grid-template-columns:1fr;}
    footer .wrap{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:760px){
    nav.primary{
      position:fixed;
      top:0; right:0;
      height:100vh;
      height:100dvh;
      width:min(320px, 82vw);
      background:var(--navy-deep);
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      gap:2px;
      padding:22px 24px 40px;
      transform:translateX(100%);
      transition:transform .35s var(--ease);
      z-index:99;
      overflow-y:auto;
      box-shadow:-24px 0 60px -20px rgba(0,0,0,0.5);
    }
    nav.primary.open{transform:translateX(0);}
    .nav-close{display:flex; align-self:flex-end; margin-bottom:26px; flex-shrink:0;}
    nav.primary a{
      color:var(--white);
      font-size:18px;
      flex-direction:row-reverse;
      justify-content:flex-end;
      gap:14px;
      padding:16px 6px;
      border-bottom:1px solid rgba(255,255,255,0.1);
      border-radius:0;
    }
    nav.primary a:first-of-type{border-top:1px solid rgba(255,255,255,0.1);}
    nav.primary a::after{display:none;}
    nav.primary a:hover,
    nav.primary a.active{color:var(--orange);}
    nav.primary a.nav-link-mobile-only{display:flex;}
    .nav-icon{color:#8b95c9; flex-shrink:0;}
    .nav-icon svg{width:20px; height:20px;}
    .nav-toggle{display:flex;}
    .header-actions .btn-primary{display:none;}
    .header-actions{gap:10px;}
    .lang-toggle{padding:9px 12px; font-size:13px; gap:6px;}
    .lang-toggle svg{width:16px;height:16px;}
    .logo-img{height:32px;}

    /* About / capability panel: scrollable pill row on phone */
    .spec-pills{
      flex-wrap:nowrap;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      margin-inline:-4px;
      padding:4px 4px 6px;
    }
    .spec-pills::-webkit-scrollbar{display:none;}
    .spec-pill{padding-block:7px; padding-inline:18px 7px; scroll-snap-align:start; flex-shrink:0;}
    .spec-pill-icon{width:28px; height:28px;}
    .spec-pill-icon svg{width:14px; height:14px;}
    .spec-pill-label{font-size:15.5px;}
    .spec-viewport{border-radius:18px; padding:26px 22px;}
    .spec-view-head{gap:12px;}
    .spec-view-icon{width:44px; height:44px;}
    .spec-view-icon svg{width:21px; height:21px;}
    .spec-view h4{font-size:19px;}
    .spec-view > p{font-size:16px;}
    .service-card-inner{height:340px;}
    .service-card-front .service-card-body{justify-content:center;}
    .service-card-front .service-expand-hint{margin-top:22px; padding-top:0;}
    .services-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    footer .wrap{grid-template-columns:1fr 1fr; gap:28px 20px;}
    .footer-brand{grid-column:1 / -1;}
    .footer-bottom{flex-direction:column; align-items:flex-start; gap:8px;}
    section{padding:76px 0;}
    .hero{padding-top:130px; min-height:560px;}
    .hero::before{display:none;}
    .hero-bg{
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
      animation:none;
    }
    .hero-eyebrow{white-space:normal; width:auto; max-width:100%;}
    .hero-actions{flex-wrap:nowrap; gap:10px;}
    .hero-actions .btn{
      flex:1 1 0;
      min-width:0;
      justify-content:center;
      padding:13px 10px;
      font-size:14px;
      white-space:normal;
      text-align:center;
    }
    .hero-actions .btn svg{display:none;}

    /* Lighter 3D on small screens: keep the effect, cut the GPU cost */
    .reveal{transform:translateY(34px) rotateX(-8deg) translateZ(0);}
    .service-reveal{transform:translateY(38px) rotateX(-10deg) scale(.93);}
    .why-reveal{transform:translateY(40px) rotateX(-12deg) scale(.93);}
    .gallery-reveal{transform:translateY(36px) rotateX(-10deg) scale(.93);}
    .value-reveal{transform:translateY(36px) scale(.95);}
    .process-step{transform:translateY(30px);}
    .hero-content{will-change:auto;}
  }
  @media (hover:none), (pointer:coarse){
    /* No pointer-driven tilt on touch devices; keep simple tap/hover fallbacks light */
    .service-card, .why-row, .logo-img{ transition-duration:.3s; }
  }

  /* ---------- custom cursor: mini MiArabia mark (desktop, fine pointer) ---------- */
  html.has-custom-cursor, html.has-custom-cursor body, html.has-custom-cursor a, html.has-custom-cursor button{
    cursor:none;
  }
  html.has-custom-cursor input, html.has-custom-cursor textarea, html.has-custom-cursor select{
    cursor:auto;
  }
  .cursor-dot, .cursor-ring{
    position:fixed;
    top:0; left:0;
    z-index:9999;
    pointer-events:none;
    transform:translate(-50%, -50%);
    opacity:0;
  }
  .cursor-dot{
    width:22px; height:22px;
    background-image:url('../mijdaf-mark-orange.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    filter:drop-shadow(0 2px 6px rgba(10,13,31,0.35));
    transition:opacity .2s ease, width .25s var(--ease), height .25s var(--ease), transform .18s var(--ease);
  }
  .cursor-ring{
    width:44px; height:44px;
    border-radius:50%;
    border:1.4px solid rgba(253,87,43,0.4);
    transition:opacity .25s ease, width .3s var(--ease), height .3s var(--ease), border-color .3s ease, background .3s ease;
  }
  html.has-custom-cursor .cursor-dot,
  html.has-custom-cursor .cursor-ring{opacity:1;}
  .cursor-ring.is-hovering{
    width:60px; height:60px;
    background:rgba(253,87,43,0.06);
    border-color:rgba(253,87,43,0.7);
  }
  .cursor-dot.is-hovering{transform:translate(-50%, -50%) scale(1.18) rotate(-8deg);}
  @media (hover:none), (pointer:coarse){
    .cursor-dot, .cursor-ring{display:none;}
  }

/* ---------- easter egg: logo mashing ---------- */
.egg-emoji{
  position: fixed;
  top: -48px;
  z-index: 9999;
  pointer-events: none;
  line-height: 1;
  animation-name: egg-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}
@keyframes egg-fall{
  0%{ transform: translateY(0) rotate(0deg); opacity:1; }
  100%{ transform: translateY(112vh) rotate(340deg); opacity:0.85; }
}
.egg-shake{ animation: egg-shake-kf .5s ease; }
@keyframes egg-shake-kf{
  0%,100%{ transform: translateX(0) rotate(0); }
  20%{ transform: translateX(-8px) rotate(-.6deg); }
  40%{ transform: translateX(8px) rotate(.6deg); }
  60%{ transform: translateX(-5px) rotate(-.3deg); }
  80%{ transform: translateX(5px) rotate(.3deg); }
}
header .logo{ cursor: pointer; }
@media (prefers-reduced-motion: reduce){
  .egg-emoji{ display: none; }
  .egg-shake{ animation: none; }
}

/* ---------- easter egg: request button dodge ---------- */
.qa-request{ will-change: transform; }
.qa-caught{ animation: qa-caught-flash .5s ease; }
@keyframes qa-caught-flash{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 55%, transparent); }
  70%{ box-shadow: 0 0 0 14px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}