:root{
    --bg:#EFEFEF;
    --surface:#E4E8ED;
    --surface2:#D9DFE6;
    --text:#142E53;
    --muted:#4C5D77;
    --accent:#3982AF;
    --accent2:#142E53;
    --line: rgba(20,46,83,0.14);
    --btn-text:#F5F7F9;
    --flow: #3982AF;
    --flow-dim: rgba(20,46,83,0.3);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }
  .display{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.5px;
    line-height:0.95;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}

  /* Nav */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(239,239,239,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 6vw;
    max-width:1400px; margin:0 auto;
    gap:24px;
  }
  .logo-svg{ height:26px; width:auto; display:block; }
  .navlinks{ display:flex; gap:28px; font-size:14.5px; flex-wrap:wrap; }
  .navlinks a{ position:relative; padding-bottom:4px; transition:color .2s; }
  .navlinks a:hover{ color:var(--accent); }
  .navlinks a:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
  .navcta{
    background:var(--accent);
    color:var(--btn-text);
    padding:10px 20px;
    border-radius:999px;
    font-weight:600;
    font-size:13.5px;
    white-space:nowrap;
    transition:background .2s;
  }
  .navcta:hover{ background:var(--accent2); }
  .navtoggle{
    display:none;
    background:none;
    border:none;
    padding:0;
    width:26px; height:20px;
    position:relative;
    cursor:pointer;
  }
  .navtoggle-line{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:var(--text);
    border-radius:2px;
    transition:transform .3s ease, opacity .3s ease, top .3s ease;
  }
  .navtoggle-line:nth-child(1){ top:0; }
  .navtoggle-line:nth-child(2){ top:9px; }
  .navtoggle-line:nth-child(3){ top:18px; }
  .navtoggle.open .navtoggle-line:nth-child(1){
    top:9px;
    transform:rotate(45deg);
  }
  .navtoggle.open .navtoggle-line:nth-child(2){
    opacity:0;
  }
  .navtoggle.open .navtoggle-line:nth-child(3){
    top:9px;
    transform:rotate(-45deg);
  }

  @media(max-width:900px){
    .navlinks{
      display:none;
      position:absolute; top:100%; left:0; right:0;
      background:var(--bg);
      flex-direction:column;
      gap:0;
      padding:8px 6vw 18px;
      border-bottom:1px solid var(--line);
    }
    .navlinks.open{ display:flex; }
    .navlinks a{ padding:12px 0; border-bottom:1px solid var(--line); }
    .navlinks a:last-child{ border-bottom:none; }
    .navtoggle{ display:block; }
  }
  header{ position:sticky; }
  nav{ position:relative; }

  /* Page header (non-home pages) */
  .page-header{
    padding:16vh 6vw 8vh;
    max-width:1400px; margin:0 auto;
    text-align:center;
  }
  .page-header .eyebrow{
    font-size:13px; letter-spacing:1.2px; color:var(--muted); margin-bottom:14px;
  }
  .page-header h1{
    font-size:clamp(40px,7vw,88px);
  }
  .page-header p{
    color:var(--muted); max-width:52ch; margin:20px auto 0; font-size:17px;
  }
  .back-link{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--muted); font-size:14px; margin-bottom:18px;
    transition:color .2s;
  }
  .back-link:hover{ color:var(--accent); }

  /* Project cards (Projects listing page) */
  .project-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:2px;
    background:var(--line);
  }
  .project-card{
    background:var(--bg);
    scroll-margin-top:100px;
  }
  .project-card-img{
    aspect-ratio:4/3;
    position:relative;
    overflow:hidden;
    background:var(--surface);
    display:flex; align-items:center; justify-content:center;
    padding:12%;
  }
  .project-card-img .thumb{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
  }
  .project-logo{
    max-width:100%;
    max-height:100%;
    width:auto; height:auto;
    object-fit:contain;
  }
  .project-card-img .ph{
    font-family:'Bebas Neue'; font-size:13vw; opacity:0.14; letter-spacing:2px; color:var(--text);
  }
  .project-card-body{
    padding:26px 4px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  }
  .project-card-body h3{ font-size:24px; font-weight:600; }
  .project-card-body span{ font-size:13px; color:var(--muted); }
  .see-more{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--accent); font-size:14px; font-weight:600;
    transition:gap .2s;
  }
  .see-more:hover{ gap:10px; }
  @media(max-width:700px){ .project-grid{ grid-template-columns:1fr; } }

  /* Projects page — real 3D coverflow carousel */
  .carousel-3d{ padding:4vh 0 2vh; }
  .carousel-3d-stage{
    position:relative;
    height:540px;
    perspective:1200px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:grab;
    touch-action:pan-y;
  }
  .carousel-3d-stage .carousel-3d-track{
    position:absolute; inset:0;
  }
  .carousel-3d-stage.is-dragging{ cursor:grabbing; }
  .carousel-card{
    position:absolute;
    top:50%; left:50%;
    width:320px;
    aspect-ratio:3/4;
    border-radius:20px;
    user-select:none;
    -webkit-user-drag:none;
    touch-action:pan-y;
    overflow:hidden;
    background:var(--surface);
    box-shadow:0 25px 50px rgba(20,46,83,0.35);
    cursor:pointer;
    will-change:transform;
    display:flex;
    flex-direction:column;
  }
  .carousel-card-logo-wrap{
    flex:1;
    display:flex; align-items:center; justify-content:center;
    padding:15%;
  }
  .carousel-card-logo{
    max-width:100%; max-height:100%;
    object-fit:contain;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  .carousel-card-caption{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:0 8% 8%;
  }
  .carousel-card-caption h3{
    color:var(--text);
    font-size:15px;
    font-weight:600;
  }
  /* photo-style cards (real project photography instead of a logo) —
     the photo covers the whole card, caption overlays on a gradient */
  .carousel-card.has-photo{ display:block; }
  .carousel-card-photo-wrap{
    position:absolute; inset:0;
  }
  .carousel-card-photo{
    width:100%; height:100%;
    object-fit:cover;
    pointer-events:none;
    -webkit-user-drag:none;
  }
  .carousel-card.has-photo .carousel-card-caption{
    position:absolute; left:0; right:0; bottom:0;
    padding:60px 8% 8%;
    background:linear-gradient(to top, rgba(10,14,20,0.75), transparent);
  }
  .carousel-card.has-photo .carousel-card-caption h3{
    color:#fff;
  }
  .carousel-3d-arrow{
    position:absolute; top:50%;
    transform:translateY(-50%);
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(20,46,83,0.06);
    border:1px solid var(--line);
    font-size:20px;
    color:var(--text);
    cursor:pointer;
    z-index:1000;
    transition:background .2s;
  }
  .carousel-3d-arrow:hover{ background:var(--surface); }
  .carousel-3d-prev{ left:2%; }
  .carousel-3d-next{ right:2%; }
  .carousel-3d-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:24px;
  }
  .carousel-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:var(--line);
    border:none;
    padding:0;
    cursor:pointer;
    transition:background .2s, width .2s;
  }
  .carousel-dot.active{ background:var(--accent); width:22px; border-radius:4px; }
  @media(max-width:700px){
    .carousel-3d-stage{ height:480px; }
    .carousel-card{ width:76vw; max-width:300px; }
  }

  /* Project detail page */
  .project-hero-img{
    aspect-ratio:21/9;
    background:var(--surface);
    display:flex; align-items:center; justify-content:center;
    margin:0 6vw;
    max-width:1400px;
    margin-inline:auto;
    padding:6%;
    overflow:hidden;
    position:relative;
  }
  .project-hero-img .thumb{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
  }
  .project-logo-lg{
    max-width:60%;
    max-height:55%;
    width:auto; height:auto;
    object-fit:contain;
  }
  .project-hero-img .ph{
    font-family:'Bebas Neue'; font-size:10vw; opacity:0.14; letter-spacing:2px; color:var(--text);
  }
  .project-detail-body{
    max-width:800px; margin:0 auto; padding:8vh 6vw;
  }
  .project-detail-body p{ color:var(--muted); font-size:17px; margin-bottom:20px; }
  .project-meta-row{
    display:flex; gap:40px; flex-wrap:wrap; margin-top:36px; padding-top:28px; border-top:1px solid var(--line);
  }
  .project-meta-row div strong{ display:block; color:var(--text); font-size:15px; margin-bottom:4px; }
  .project-meta-row div span{ color:var(--muted); font-size:14px; }

  /* Simple placeholder section (stub pages) */
  .stub-note{
    color:var(--muted);
    font-size:15px;
    border:1px dashed var(--line);
    padding:20px 24px;
    max-width:56ch;
    margin:0 auto;
    text-align:center;
  }

  /* Hero */
  .hero{
    position:relative;
    padding:10vh 6vw 8vh;
    max-width:1400px; margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden;
    isolation:isolate;
    min-height:82vh;
    justify-content:center;
  }
  .hero-glow{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-54%);
    width:min(1400px, 150vw);
    height:auto;
    aspect-ratio:1200/620;
    z-index:0;
    pointer-events:none;
    opacity:0.9;
  }
  .hero-glow svg{ width:100%; height:100%; display:block; }
  .hero-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }

  @media(prefers-reduced-motion: reduce){
    .hero-glow *{ animation:none !important; }
  }
  .hero h1{
    font-size:clamp(34px, 5.6vw, 76px);
    text-transform:none;
    max-width:16ch;
  }
  .hero h1 .lineb{ color:var(--accent); }

  /* word reveal — clear fade + rise, no clipping */
  .word-mask{ display:inline-block; vertical-align:top; padding:0 2px;}
  .word-mask .word{
    display:inline-block;
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.16,.84,.24,1), transform .8s cubic-bezier(.16,.84,.24,1);
    transition-delay:var(--wd, 0s);
  }
  .hero-reveal.in-view .word-mask .word{ opacity:1; transform:translateY(0); }

  .hero-sub{
    font-size:18px;
    color:var(--muted);
    max-width:46ch;
    margin:26px auto 0;
  }
  .hero-meta{
    position:relative; z-index:1;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    max-width:900px;
    width:100%;
    margin-top:44px;
    padding-top:28px;
    border-top:1px solid var(--line);
    font-size:13.5px;
    color:var(--muted);
  }
  .hero-meta > div{
    padding:0 18px;
    border-left:1px solid var(--line);
  }
  .hero-meta > div:first-child{ border-left:none; }
  .hero-meta strong{ color:var(--text); display:block; font-size:15.5px; margin-bottom:6px; font-weight:600;}
  .hero-cta{
    margin-top:30px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--accent);
    color:var(--btn-text);
    font-weight:700;
    padding:14px 26px;
    border-radius:999px;
    font-size:15px;
    width:fit-content;
    transition:transform .2s, background .2s;
  }
  .hero-cta:hover{ background:var(--accent2); transform:translateY(-2px); }

  /* WhatsApp floating button */
  .float-group{
    position:fixed;
    right:26px;
    width:64px; /* matches the larger (chat) button so both circles share one centerline */
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    z-index:80;
  }
  .wa-group{ bottom:26px; }
  .float-label{
    color:var(--text);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    text-shadow:0 1px 3px rgba(239,239,239,0.9), 0 1px 6px rgba(239,239,239,0.7);
  }
  .wa-float{
    width:56px; height:56px;
    border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(20,46,83,0.28);
    transition:transform .2s ease;
  }
  .wa-float:hover{ transform:scale(1.08); }
  @media(max-width:700px){
    .float-group{ right:18px; width:56px; }
    .wa-group{ bottom:18px; }
    .wa-float{ width:50px; height:50px; }
    .float-label{ font-size:11px; padding:5px 10px; }
  }

  @media(max-width:800px){
    .hero{ min-height:auto; padding:14vh 6vw 8vh; }
    .hero-meta{ grid-template-columns:repeat(2,1fr); row-gap:24px; max-width:520px; }
    .hero-meta > div:nth-child(2){ border-left:1px solid var(--line); }
    .hero-meta > div:nth-child(odd){ border-left:none; }
  }

  .brands-label{
    text-align:center;
    font-size:13px;
    letter-spacing:1.2px;
    color:var(--muted);
    margin-bottom:36px;
  }

  /* Featured Works — tilted photo wall (matches reference layout) */
  .fw-dark{
    background:var(--bg);
    color:var(--text);
    overflow:hidden;
    padding:0;
    max-width:100%;
  }
  .fw-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    max-width:1700px;
    margin:0 auto;
    min-height:92vh;
  }
  .fw-text{ padding:6vh 6vw; position:relative; z-index:2; }
  .fw-text h2{
    color:var(--text);
    font-size:clamp(42px, 5vw, 74px);
    text-transform:none;
  }
  .fw-text p{
    color:var(--muted);
    max-width:38ch;
    margin-top:20px;
    font-size:16px;
    line-height:1.6;
  }
  .fw-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:30px;
    background:var(--accent);
    color:var(--btn-text);
    font-weight:700;
    padding:14px 26px;
    border-radius:999px;
    font-size:15px;
    transition:transform .2s, background .2s;
  }
  .fw-cta:hover{ background:var(--accent2); transform:translateY(-2px); }

  .fw-photos{
    position:relative;
    height:92vh;
    overflow:hidden;
    padding-right:4vw;
    perspective:1400px;
  }
  .fw-photos::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:32%;
    background:linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
    z-index:5; pointer-events:none;
  }
  .fw-photos::after{
    content:"";
    position:absolute; bottom:0; left:0; right:0; height:32%;
    background:linear-gradient(to top, var(--bg) 0%, transparent 100%);
    z-index:5; pointer-events:none;
  }
  .fw-photos-inner{
    position:absolute;
    top:-8%; left:11%;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    width:78%;
    height:120%;
    transform-style:preserve-3d;
    transform:rotate(6deg) rotateY(-12deg) rotateX(8deg);
  }
  .river-col{
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
    will-change:transform;
  }
  .river-col:nth-child(2){ margin-top:64px; }
  .river-col.river-up{ animation:riverUp 34s linear infinite; }
  .river-col.river-down{ animation:riverDown 34s linear infinite; transform:translateY(-50%); }
  @keyframes riverUp{
    from{ transform:translateY(0); }
    to{ transform:translateY(-50%); }
  }
  @keyframes riverDown{
    from{ transform:translateY(-50%); }
    to{ transform:translateY(0); }
  }
  .river-item{
    aspect-ratio:3/4;
    border-radius:20px;
    flex-shrink:0;
    background:linear-gradient(160deg, #2c2c2c, #161616);
    box-shadow:0 6px 24px rgba(20,46,83,0.10);
    overflow:hidden;
  }
  .river-item img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

  @media(prefers-reduced-motion: reduce){
    .river-col{ animation:none !important; transform:none !important; }
  }
  @media(max-width:900px){
    .fw-inner{ grid-template-columns:1fr; min-height:auto; }
    .fw-text{ padding:8vh 6vw 4vh; text-align:center; }
    .fw-text p{ margin-inline:auto; }
    .fw-photos{ height:55vh; padding-right:4vw; margin-bottom:6vh; }
    .fw-photos-inner{
      width:78%; height:120%; top:-8%; left:11%;
      gap:10px;
    }
    .river-col{ gap:10px; }
    .river-col:nth-child(2){ margin-top:32px; }
  }

  /* Why Choose — animated process path */
  .process-path{
    position:relative;
    max-width:760px;
    margin:0 auto;
    padding-left:76px;
  }
  .process-line{
    position:absolute;
    left:23px; top:6px; bottom:6px;
    width:2px;
    background:var(--line);
  }
  .process-line-fill{
    position:absolute;
    top:0; left:0; width:100%;
    height:0%;
    background:var(--accent);
    transition:height 1.6s cubic-bezier(.16,.84,.24,1);
  }
  .line-reveal.in-view .process-line-fill{ height:100%; }
  @media(prefers-reduced-motion: reduce){
    .process-line-fill{ transition:none; height:100%; }
  }
  .process-step{
    position:relative;
    padding-bottom:56px;
  }
  .process-step:last-child{ padding-bottom:0; }
  .step-marker{
    position:absolute;
    left:-76px; top:0;
    width:48px; height:48px;
    border-radius:50%;
    background:var(--accent);
    color:var(--btn-text);
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue';
    font-size:18px;
    letter-spacing:0.5px;
    z-index:1;
  }
  .step-content h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:8px;
  }
  .step-content p{
    color:var(--muted);
    font-size:15px;
    max-width:52ch;
  }
  @media(max-width:700px){
    .process-path{ padding-left:64px; }
    .process-line{ left:19px; }
    .step-marker{ left:-64px; width:40px; height:40px; font-size:15px; }
  }

  /* Who We Are — scroll text fade */
  .fade-text-list{
    max-width:820px;
    margin:0 auto;
  }
  .fade-item{
    padding:44px 0;
  }
  /* The "coming into focus" effect used to be done by fading the whole
     item down to opacity:0.15 at rest. That's exactly what Lighthouse's
     contrast audit flags: at page load these items sit far below the
     fold, so it samples them at that near-invisible resting opacity and
     reports a real (if impractical) contrast failure. Fixed by splitting
     the effect: the heading dims only down to a floor (0.6) that still
     clears WCAG's 3:1 minimum for large/bold text, and the paragraph
     keeps its color at full, always-compliant contrast and instead comes
     into focus via blur — same "sharpens as it centers" feeling, but the
     text itself is never actually low-contrast. */
  .fade-item h3{
    position:relative;
    font-size:clamp(24px,3vw,32px);
    font-weight:700;
    margin-bottom:14px;
    opacity:0.6;
    will-change:opacity;
  }
  .fade-item h3::after{
    content:"";
    display:block;
    margin-top:12px;
    height:2px;
    width:calc(var(--r, 0) * 110px);
    background:linear-gradient(to right, var(--accent), transparent);
  }
  .fade-item p{
    color:var(--muted);
    font-size:16px;
    max-width:58ch;
    line-height:1.6;
    filter:blur(4px);
    will-change:filter;
  }
  @media(prefers-reduced-motion: reduce){
    .fade-item h3{ opacity:1 !important; }
    .fade-item p{ filter:none !important; }
    .fade-item h3::after{ width:110px; }
  }

  /* Numbers That Speak — stat counters */
  .stats-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
    max-width:900px;
    margin:0 auto;
    text-align:center;
  }
  .stat-item{ padding:0 12px; }
  .stat-number{
    font-family:'Bebas Neue';
    font-size:clamp(48px, 6vw, 76px);
    color:var(--text);
    line-height:1;
  }
  .stat-suffix{ color:var(--accent); }
  .stat-label{
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:12px;
  }
  @media(max-width:700px){
    .stats-row{ grid-template-columns:1fr; gap:44px; }
  }

  /* Numbers That Speak — real 3D image tunnel (translateZ depth) */
  .tunnel-section{
    background:#05070C;
    overflow:hidden;
    padding:0;
    max-width:100%;
  }
  .tunnel-stage{
    position:relative;
    width:100%;
    height:92vh;
    perspective:1000px;
    perspective-origin:50% 50%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tunnel-rings, .tunnel-walls, .tunnel-photos{
    position:absolute; inset:0;
    transform-style:preserve-3d;
    pointer-events:none;
  }
  .tunnel-ring{
    position:absolute;
    top:50%; left:50%;
    width:700px; height:460px;
    margin:-230px 0 0 -350px;
    border:1px solid rgba(57,130,175,0.35);
    border-radius:4px;
    opacity:0;
    animation:tunnelRingFly 11s linear infinite;
  }
  @keyframes tunnelRingFly{
    0%{ transform:translateZ(-3200px); opacity:0; }
    14%{ opacity:1; }
    78%{ opacity:0.5; }
    100%{ transform:translateZ(500px); opacity:0; }
  }
  .tunnel-corner{
    position:absolute; top:50%; left:50%;
    width:1px; height:4200px;
    background:linear-gradient(rgba(57,130,175,0), rgba(57,130,175,0.22) 20%, rgba(57,130,175,0.22) 80%, rgba(57,130,175,0));
  }
  .tunnel-photo-orbit{
    position:absolute; inset:0;
    transform-style:preserve-3d;
    opacity:0;
    animation:tunnelPhotoFly 11s linear infinite;
  }
  @keyframes tunnelPhotoFly{
    0%{ transform:translateZ(-3200px); opacity:0; }
    14%{ opacity:1; }
    78%{ opacity:0.55; }
    100%{ transform:translateZ(500px); opacity:0; }
  }
  .tunnel-photo{
    position:absolute; top:50%; left:50%;
    width:150px; height:200px;
    margin:-100px 0 0 -75px;
    border-radius:8px;
    overflow:hidden;
    background:#F0F2F5;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    box-shadow:0 0 40px rgba(57,130,175,0.25);
  }
  .tunnel-photo img{ max-width:100%; max-height:100%; object-fit:contain; }
  .tphoto-left{ transform:translateX(-260px) rotateY(28deg); }
  .tphoto-right{ transform:translateX(260px) rotateY(-28deg); }
  .tunnel-center{
    position:relative;
    z-index:5;
    text-align:center;
    padding:0 6vw;
    pointer-events:none;
  }
  .tunnel-heading{
    color:#F5F7F9;
    font-size:clamp(32px,4.2vw,52px);
    margin-bottom:40px;
  }
  .tunnel-stats{ pointer-events:auto; }
  .tunnel-stats .stat-number{ color:#F5F7F9; }
  .tunnel-stats .stat-label{ color:rgba(245,247,249,0.55); }
  .tunnel-stats .stat-suffix{ color:var(--accent); }
  @media(prefers-reduced-motion: reduce){
    .tunnel-ring, .tunnel-photo-orbit{ animation:none; opacity:0.4; transform:translateZ(-400px); }
  }
  @media(max-width:800px){
    .tunnel-stage{ height:80vh; perspective:700px; }
    .tunnel-ring{ width:340px; height:260px; margin:-130px 0 0 -170px; }
    .tunnel-photo{ width:100px; height:132px; margin:-66px 0 0 -50px; padding:14px; }
    .tunnel-stats{ grid-template-columns:1fr; gap:32px; }
  }

  /* Testimonials */
  .testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    max-width:1100px;
    margin:0 auto;
  }
  .testimonial-card{
    background:var(--surface);
    border-radius:8px;
    padding:32px 28px;
  }
  .testimonial-stars{
    color:var(--accent);
    font-size:15px;
    letter-spacing:2px;
    margin-bottom:16px;
  }
  .testimonial-quote{
    font-size:15.5px;
    line-height:1.7;
    color:var(--text);
    margin-bottom:22px;
  }
  .testimonial-author strong{ display:block; font-size:15px; }
  .testimonial-author span{ font-size:13px; color:var(--muted); }
  .testimonial-note{
    text-align:center;
    color:var(--muted);
    font-size:12.5px;
    margin-top:28px;
    font-style:italic;
  }
  @media(max-width:800px){
    .testimonial-grid{ grid-template-columns:1fr; }
  }

  /* Final CTA band */
  .cta-band{
    background:var(--accent2);
    max-width:100%;
    padding:0;
  }
  .cta-band-inner{
    max-width:700px;
    margin:0 auto;
    padding:10vh 6vw;
    text-align:center;
  }
  .cta-band-inner h2{ color:#F5F7F9; font-size:clamp(32px,4.4vw,54px); }
  .cta-band-inner p{ color:rgba(245,247,249,0.7); margin-top:16px; font-size:16px; }
  .cta-band-inner .hero-cta{ margin-top:28px; background:var(--accent); }
  .cta-band-inner .hero-cta:hover{ background:#F5F7F9; color:var(--accent2); }

  /* Bubble-wipe transition gallery (test — HeartWise project page):
     a growing circle reveals the next image, with chromatic (red/green/
     blue) rings riding its edge, warped by a water-ripple SVG filter for
     an organic, marbled look. Purely CSS-keyframe driven. */
  .liquid-gallery{
    position:relative;
    height:70vh;
    max-height:640px;
    overflow:hidden;
    border-radius:16px;
    background:#0A0A0A;
  }
  .liquid-fullscreen{
    height:100vh;
    height:100dvh;
    max-height:none;
    border-radius:0;
    width:100%;
  }
  .liquid-slides{ position:absolute; inset:0; }
  .liquid-slide{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    z-index:1;
    clip-path:circle(0px at 50% 50%);
  }
  .liquid-slide.active{
    opacity:1;
    z-index:2;
    clip-path:circle(150vmax at 50% 50%);
  }
  .liquid-slide.active.entering{
    animation:bubbleReveal 1.3s cubic-bezier(.19,.84,.32,1) forwards;
  }
  @keyframes bubbleReveal{
    from{ clip-path:circle(0px at 50% 50%); }
    to{ clip-path:circle(150vmax at 50% 50%); }
  }
  /* the orb itself — a full colorful, marbled sphere (not just a thin
     ring) that rides along with the reveal. Two layers: the marbled
     rainbow texture (warped by the ripple filter), plus a radial shading
     pass on top so it reads as a lit glass/soap-bubble sphere rather
     than a flat tinted disc. */
  /* the wavy, chromatic edge riding the boundary of the growing circle.
     The new image stays sharp and clear in the center — only this thin
     ring band is colorful and liquid/wavy (via the ripple filter). */
  .liquid-ring{
    position:absolute; top:50%; left:50%;
    width:0; height:0;
    border-radius:50%;
    border-style:solid;
    border-width:0;
    background:transparent;
    filter:blur(1.5px) url(#liquidRipple);
    opacity:0;
    z-index:4;
    pointer-events:none;
    mix-blend-mode:screen;
  }
  .liquid-ring-r{ border-color:#ff2b4d; transform:translate(-50%,-50%) translate(-3px,0); }
  .liquid-ring-g{ border-color:#2bff7a; transform:translate(-50%,-50%); }
  .liquid-ring-b{ border-color:#2b8bff; transform:translate(-50%,-50%) translate(3px,0); }
  .liquid-ring.firing{
    animation:ringGrow 1.3s cubic-bezier(.19,.84,.32,1) forwards,
              ringWidth 1.3s cubic-bezier(.19,.84,.32,1) forwards,
              ringFade 1.3s ease forwards;
  }
  @keyframes ringGrow{
    0%{ width:0; height:0; }
    100%{ width:150vmax; height:150vmax; }
  }
  @keyframes ringWidth{
    0%{ border-width:10px; }
    100%{ border-width:2px; }
  }
  @keyframes ringFade{
    0%{ opacity:0; }
    8%{ opacity:1; }
    100%{ opacity:0; }
  }
  /* the magnifying glass lens — a circular window whose backdrop-filter
     radially displaces whatever's rendered behind it, the way a real
     curved-glass lens bends and offsets the scene behind it */
  .liquid-lens{
    position:absolute; top:50%; left:50%;
    width:0; height:0;
    border-radius:50%;
    transform:translate(-50%,-50%);
    -webkit-backdrop-filter:url(#lensDistort);
    backdrop-filter:url(#lensDistort);
    border:1px solid rgba(255,255,255,0.35);
    box-shadow:0 0 50px rgba(255,255,255,0.12) inset;
    z-index:5;
    pointer-events:none;
    opacity:0;
  }
  .liquid-lens.firing{
    animation:lensGrow 1.3s cubic-bezier(.19,.84,.32,1) forwards,
              lensFade 1.3s ease forwards;
  }
  @keyframes lensGrow{
    0%{ width:0; height:0; }
    100%{ width:150vmax; height:150vmax; }
  }
  @keyframes lensFade{
    0%{ opacity:0; }
    8%{ opacity:1; }
    85%{ opacity:1; }
    100%{ opacity:0; }
  }
  .liquid-scanlines{
    position:absolute; inset:0;
    z-index:6;
    pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.08) 0px,
      rgba(255,255,255,0.08) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode:overlay;
  }
  .liquid-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.25);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    z-index:7;
    backdrop-filter:blur(6px);
    transition:background .2s;
  }
  .liquid-arrow:hover{ background:rgba(255,255,255,0.25); }
  .liquid-prev{ left:20px; }
  .liquid-next{ right:20px; }
  .liquid-dots{
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px;
    z-index:7;
  }
  .liquid-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.35);
    border:none;
    padding:0;
    cursor:pointer;
    transition:background .2s, width .2s;
  }
  .liquid-dot.active{ background:#fff; width:22px; border-radius:4px; }
  .liquid-hint{
    position:absolute; top:24px; left:50%; transform:translateX(-50%);
    z-index:7;
    color:rgba(255,255,255,0.6);
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    pointer-events:none;
  }
  @media(max-width:700px){
    .liquid-gallery{ height:52vh; border-radius:10px; }
    .liquid-fullscreen{ height:100vh; height:100dvh; border-radius:0; }
  }

  /* Section shell */
  section{ padding:9vh 6vw; max-width:1400px; margin:0 auto; }
  .sec-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:48px; gap:24px; flex-wrap:wrap;
  }
  .sec-head h2{ font-size:clamp(32px,4.4vw,56px); text-transform:none;}
  .sec-num{ font-family:'IBM Plex Sans',monospace; color:var(--muted); font-size:14px; }
  .sec-desc{ color:var(--muted); max-width:46ch; font-size:15px; }

  /* Scroll reveal */
  .reveal{
    opacity:0;
    transform:translateY(42px) scale(0.97);
    transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
    transition-delay:var(--d, 0s);
  }
  .reveal.in-view{ opacity:1; transform:none; }
  @media(prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* Brands / clients logo marquee */
  .logo-marquee{
    position:relative;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-track{
    display:flex;
    align-items:center;
    gap:0;
    width:max-content;
    animation:marquee 32s linear infinite;
    will-change:transform;
    backface-visibility:hidden;
  }
  .logo-track:hover{ animation-play-state:paused; }
  @keyframes marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .client-logo{
    display:flex; align-items:center; justify-content:center;
    padding:0 52px;
    height:110px;
    flex-shrink:0;
    border-left:1px solid var(--line);
  }
  .client-logo img{
    max-height:56px;
    max-width:210px;
    width:auto;
    height:auto;
    filter:grayscale(1) contrast(1.15);
    opacity:0.85;
    transition:opacity .25s ease, filter .25s ease;
  }
  .client-logo:hover img{ opacity:1; filter:grayscale(0); }
  @media(prefers-reduced-motion: reduce){
    .logo-track{ animation:none; flex-wrap:wrap; width:auto; }
  }
  @media(max-width:700px){
    .client-logo{ padding:0 30px; height:80px; }
    .client-logo img{ max-height:42px; max-width:160px; }
  }

  footer{
    padding:10vh 6vw 6vh;
    max-width:1400px; margin:0 auto;
  }
  footer h2{ font-size:clamp(38px,6vw,80px); text-transform:none; margin-bottom:20px;}
  .contact-row{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;
    margin-top:50px; padding-top:30px; border-top:1px solid var(--line);
    color:var(--muted); font-size:14px;
  }
  .contact-link{
    font-size:22px; color:var(--text); display:inline-block; margin-top:8px;
  }
  .contact-link:hover{ color:var(--accent); }
  .foot-bottom{
    margin-top:50px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; flex-wrap:wrap; gap:10px;
  }
  .foot-legal-links{ display:flex; gap:16px; }
  .foot-legal-links a{ color:inherit; }
  @media(max-width:600px){
    .foot-bottom{ flex-direction:column; justify-content:center; text-align:center; gap:8px; }
    .foot-legal-links{ gap:12px; }
  }

  /* Preloader / logo intro */
  #preloader{
    position:fixed; inset:0; z-index:999;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    gap:18px;
  }
  #preloader .pl-logo-svg{
    width:clamp(220px,42vw,420px);
    height:auto;
    opacity:0;
    transform:scale(0.92);
    animation: plIn 0.9s cubic-bezier(.2,.8,.2,1) forwards 0.15s;
  }
  #preloader .pl-bar{
    width:180px; height:2px;
    background:var(--line);
    overflow:hidden;
    opacity:0;
    animation: plFade 0.4s ease forwards 0.5s;
  }
  #preloader .pl-bar-fill{
    width:0%; height:100%; background:var(--accent);
    animation: plLoad 1.1s cubic-bezier(.3,.7,.3,1) forwards 0.6s;
  }
  @keyframes plIn{ to{ opacity:1; transform:scale(1); } }
  @keyframes plFade{ to{ opacity:1; } }
  @keyframes plLoad{ to{ width:100%; } }

  #preloader.pl-exit{
    animation: plOut 0.6s cubic-bezier(.4,0,.2,1) forwards;
    pointer-events:none;
  }
  @keyframes plOut{
    to{ opacity:0; transform:translateY(-2%); }
  }

  body.pl-active{ overflow:hidden; }

  @media(prefers-reduced-motion: reduce){
    #preloader{ display:none; }
  }

  /* Services wheel — scroll-driven, pinned section on the Our Services page */
  .services-wheel-wrap{
    position:relative;
  }
  .services-wheel-sticky{
    position:sticky;
    top:0;
    height:100vh;
    background:#0A0E14;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 8vw;
    overflow:hidden;
  }
  .services-left{
    display:flex;
    gap:22px;
    max-width:480px;
  }
  .services-accent{
    width:3px;
    flex-shrink:0;
    border-radius:2px;
    background:var(--node-active-color, #3982AF);
    transition:background .4s ease;
  }
  .services-content{ padding-top:2px; }
  .services-badge,
  .services-title,
  .services-desc{
    transition:filter .32s ease, opacity .32s ease;
    filter:blur(0px);
    opacity:1;
  }
  .services-content.transitioning .services-badge,
  .services-content.transitioning .services-title,
  .services-content.transitioning .services-desc{
    filter:blur(8px);
    opacity:0.25;
  }
  .services-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px 6px 8px;
    border-radius:999px;
    background:color-mix(in srgb, var(--node-active-color, #3982AF) 18%, transparent);
    color:var(--node-active-color, #3982AF);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.5px;
    margin-bottom:20px;
    transition:background .4s ease, color .4s ease;
  }
  .services-badge-icon{
    width:22px; height:22px;
    border-radius:50%;
    background:var(--node-active-color, #3982AF);
    color:#0A0E14;
    display:flex; align-items:center; justify-content:center;
    transition:background .4s ease;
  }
  .services-badge-icon svg{ width:13px; height:13px; }
  .services-title{
    color:#fff;
    font-size:clamp(28px, 3.4vw, 42px);
    font-weight:700;
    line-height:1.15;
    margin-bottom:16px;
  }
  .services-desc{
    color:rgba(255,255,255,0.6);
    font-size:15px;
    line-height:1.7;
    margin-bottom:28px;
    max-width:420px;
  }
  .services-counter{
    color:rgba(255,255,255,0.35);
    font-size:13px;
    letter-spacing:1px;
  }
  .services-wheel{
    position:relative;
    width:min(38vw, 420px);
    height:min(38vw, 420px);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .services-wheel-ring{
    position:absolute; inset:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.14);
    transition:transform .6s cubic-bezier(.65,0,.35,1);
  }
  .wheel-node{
    position:absolute;
    top:50%; left:50%;
    width:56px; height:56px;
    margin:-28px 0 0 -28px;
    border-radius:50%;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.35);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .4s ease, border-color .4s ease, color .4s ease, transform .6s cubic-bezier(.65,0,.35,1);
  }
  .wheel-node svg{ width:20px; height:20px; }
  .wheel-node.active{
    background:var(--node-color);
    border-color:var(--node-color);
    color:#0A0E14;
    transform:scale(1.15);
  }
  .services-wheel-center{
    position:relative;
    width:96px; height:96px;
    border-radius:50%;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.12);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    z-index:2;
  }
  .wheel-center-num{
    color:var(--node-active-color, #3982AF);
    font-size:24px;
    font-weight:700;
    transition:color .4s ease;
  }
  .wheel-center-total{
    color:rgba(255,255,255,0.4);
    font-size:11px;
    letter-spacing:1px;
  }
  @media(max-width:900px){
    .services-wheel-sticky{
      flex-direction:column;
      justify-content:center;
      gap:48px;
      padding:0 7vw;
    }
    .services-left{ max-width:100%; }
    .services-title{ font-size:28px; }
    .services-wheel{ width:min(70vw, 320px); height:min(70vw, 320px); }
    .wheel-node{ width:46px; height:46px; margin:-23px 0 0 -23px; }
    .wheel-node svg{ width:17px; height:17px; }
  }

  /* Services accordion — Our Services page */
  .services-dark{
    background:var(--bg);
    padding:12vh 8vw 14vh;
  }
  .acc-list{
    margin-top:6vh;
    border-top:1px solid var(--line);
  }
  .acc-row{
    border-bottom:1px solid var(--line);
  }
  .acc-row-head{
    width:100%;
    display:flex;
    align-items:center;
    gap:28px;
    padding:26px 0;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
  }
  .acc-num{
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    width:24px;
    flex-shrink:0;
  }
  .acc-name{
    flex:1;
    color:var(--muted);
    font-size:clamp(20px, 2.6vw, 32px);
    font-weight:600;
    letter-spacing:0.3px;
    transition:color .3s ease;
  }
  .acc-arrow{
    width:22px; height:22px;
    color:var(--muted);
    flex-shrink:0;
    transition:transform .35s ease, color .3s ease;
  }
  .acc-arrow svg{ width:100%; height:100%; }
  .acc-row-head:hover .acc-name{ color:var(--accent2); }
  .acc-row.open .acc-name{ color:var(--accent2); }
  .acc-row.open .acc-arrow{ transform:rotate(180deg); color:var(--accent); }
  .acc-panel{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .4s ease;
  }
  .acc-row.open .acc-panel{ grid-template-rows:1fr; }
  .acc-panel-inner{ overflow:hidden; }
  .acc-desc{
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
    max-width:640px;
    padding-bottom:28px;
  }
  @media(max-width:700px){
    .acc-row-head{ gap:16px; padding:20px 0; }
    .acc-name{ font-size:18px; }
  }

  /* Our Work — square images that scroll by themselves, endlessly, no
     user scrolling needed (same seamless-loop technique as the client
     logo marquee above: the track's content is duplicated once and
     animated exactly -50%, so the loop point is invisible). */
  .sq-marquee{
    position:relative;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .sq-track{
    display:flex;
    width:max-content;
    animation:sqMarquee 50s linear infinite;
    will-change:transform;
    backface-visibility:hidden;
  }
  .sq-track:hover{ animation-play-state:paused; }
  @keyframes sqMarquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  /* Spacing lives on each item's own margin (not the track's flex `gap`)
     so every item — including the very last one of the first, duplicated
     set — carries the same trailing space. That makes the two halves of
     the track byte-for-byte equal in width, so translateX(-50%) lands
     exactly on the seam with no extra or missing gap at the loop point. */
  .sq-item{
    flex-shrink:0;
    width:240px;
    aspect-ratio:1 / 1;
    overflow:hidden;
    border-radius:6px;
    margin-right:14px;
    background:var(--surface); /* neutral placeholder color, never blank/white */
  }
  .sq-item img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  @media(prefers-reduced-motion: reduce){
    .sq-track{ animation:none; flex-wrap:wrap; width:auto; }
  }
  @media(max-width:800px){
    .sq-item{ width:150px; margin-right:10px; }
    .sq-track{ animation-duration:36s; }
  }

  /* Our Work — video reel: dark 3-col grid of Vimeo thumbnails, each
     opening a lightbox with the player embedded on click */
  .video-reel{
    background:var(--text); /* brand navy, not black */
    border-radius:18px;
    color:#fff;
    max-width:1400px;
    margin:0 6vw 9vh;
    width:auto;
    padding:7vh 5vw;
  }
  .video-reel .sec-head h2{ color:#fff; }
  .vid-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .vid-card{ cursor:pointer; }
  .vid-thumb{
    position:relative;
    aspect-ratio:16 / 9;
    border-radius:8px;
    overflow:hidden;
    background:var(--text); /* brand navy while the thumbnail loads, not black */
  }
  .vid-thumb img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s cubic-bezier(.25,.8,.4,1);
  }
  .vid-card:hover .vid-thumb img{ transform:scale(1.06); }
  .vid-play{
    position:absolute; top:50%; left:50%;
    width:52px; height:52px;
    margin:-26px 0 0 -26px;
    transition:transform .25s ease;
  }
  .vid-card:hover .vid-play{ transform:scale(1.12); }
  .vid-title{
    margin-top:14px;
    font-size:15px;
    color:#fff;
    font-weight:500;
  }
  .vid-lightbox{
    position:fixed; inset:0;
    z-index:200;
    background:rgba(20,46,83,0.95); /* brand navy overlay, not black */
    display:none;
    align-items:center;
    justify-content:center;
    padding:6vh 6vw;
  }
  .vid-lightbox.open{ display:flex; }
  .vid-lightbox-inner{
    width:100%;
    max-width:1000px;
    aspect-ratio:16 / 9;
  }
  .vid-lightbox-inner iframe{
    width:100%; height:100%;
    border:0;
    border-radius:8px;
  }
  .vid-lightbox-close{
    position:absolute; top:24px; right:28px;
    background:none; border:none;
    color:#fff;
    font-size:36px;
    line-height:1;
    cursor:pointer;
    opacity:0.8;
  }
  .vid-lightbox-close:hover{ opacity:1; }
  @media(max-width:900px){
    .vid-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  }
  @media(max-width:560px){
    .vid-grid{ grid-template-columns:1fr; }
    .video-reel{ margin:0 4vw 7vh; padding:6vh 6vw; border-radius:14px; }
  }

  /* Tic-Tac-Toe — just for fun, bottom of the Home page */
  .tictactoe-section{
    background:var(--bg);
    text-align:center;
    padding-bottom:16vh;
  }
  .ttt-wrap{
    max-width:420px;
    margin:0 auto;
  }
  .ttt-title{
    font-size:clamp(28px, 3vw, 40px);
    font-weight:700;
    color:var(--text);
    margin:8px 0 6px;
  }
  .ttt-sub{
    color:var(--muted);
    margin-bottom:36px;
  }
  .ttt-board{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin:0 auto 24px;
  }
  .ttt-cell{
    aspect-ratio:1/1;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    font-size:40px;
    font-weight:700;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s, transform .15s;
  }
  .ttt-cell:hover:not(:disabled){ background:var(--surface2); transform:translateY(-2px); }
  .ttt-cell.x{ color:var(--accent); }
  .ttt-cell.o{ color:var(--accent2); }
  .ttt-cell.win{ background:var(--accent); color:#fff; }
  .ttt-status{
    color:var(--text);
    font-weight:600;
    margin-bottom:20px;
    min-height:24px;
  }
  .ttt-reset{
    background:var(--accent2);
    color:var(--btn-text);
    border:none;
    padding:11px 28px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s;
  }
  .ttt-reset:hover{ background:var(--accent); }
  @media(max-width:500px){
    .ttt-cell{ font-size:32px; }
  }

  /* Our Workflow — half-circle switcher, Services page */
  .wf-wrap{
    max-width:640px;
    margin:14vh auto 0;
    text-align:center;
  }
  .wf-stage{
    position:relative;
    min-height:280px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    margin-top:20px;
  }
  .wf-halfcircle{
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:78%;
    max-width:480px;
    aspect-ratio:1.35 / 1;
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
    background:radial-gradient(120% 120% at 50% 0%, var(--accent) 0%, var(--surface) 70%);
    opacity:0.14;
    z-index:0;
  }
  .wf-panel{
    position:relative;
    z-index:1;
    display:none;
    flex-direction:column;
    align-items:center;
    padding-top:30px;
    animation:wfFadeIn .5s ease;
  }
  .wf-panel.active{ display:flex; }
  @keyframes wfFadeIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .wf-photo{
    width:96px; height:96px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--bg);
    box-shadow:0 8px 24px rgba(20,46,83,0.18);
    margin-bottom:28px;
  }
  .wf-icon{
    width:96px; height:96px;
    object-fit:contain;
    margin-bottom:28px;
  }
  .wf-desc{
    font-size:clamp(19px, 2.2vw, 24px);
    line-height:1.5;
    color:var(--text);
    font-weight:500;
    max-width:520px;
    margin-bottom:8px;
  }
  .wf-step-title{
    color:var(--accent);
    font-weight:700;
    font-size:14px;
    letter-spacing:0.3px;
  }
  .wf-tabs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:6px;
    position:relative;
    z-index:1;
  }
  .wf-tab{
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--muted);
    padding:10px 20px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .25s, color .25s, border-color .25s;
  }
  .wf-tab:hover{ border-color:var(--accent); }
  .wf-tab.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--btn-text);
  }
  @media(max-width:600px){
    .wf-desc{ font-size:18px; }
    .wf-tab{ padding:8px 14px; font-size:12px; }
  }

  /* Legal pages — Terms of Service, Privacy Policy */
  .legal-wrap{
    max-width:760px;
    margin:0 auto;
    border-top:1px solid var(--line);
    padding-top:24px;
  }
  .legal-block{
    padding:26px 0;
    border-bottom:1px solid var(--line);
  }
  .legal-block h3{
    font-size:18px;
    font-weight:700;
    color:var(--text);
    margin-bottom:10px;
  }
  .legal-block p{
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
  }
  .legal-block p a{
    color:var(--accent);
    text-decoration:underline;
  }

  /* About Us */
  .about-story{
    max-width:780px;
    margin:0 auto;
    text-align:center;
  }
  .about-lede{
    font-size:clamp(20px, 2.4vw, 28px);
    line-height:1.55;
    color:var(--text);
    font-weight:500;
  }
  .about-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
    max-width:1100px;
    margin:6vh auto 0;
  }
  .about-point h3{
    font-size:19px;
    font-weight:700;
    color:var(--text);
    margin-bottom:12px;
  }
  .about-point p{
    color:var(--muted);
    font-size:14.5px;
    line-height:1.7;
  }
  @media(max-width:800px){
    .about-grid{ grid-template-columns:1fr; gap:32px; }
  }

  /* Contact Us */
  .contact-primary{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;
    padding:2vh 0 6vh;
    text-align:center;
  }
  .contact-whatsapp{
    background:var(--accent2);
    color:var(--btn-text);
    padding:16px 32px;
    border-radius:999px;
    font-size:16px;
    font-weight:600;
    transition:background .2s;
  }
  .contact-whatsapp:hover{ background:var(--accent); }
  .contact-or{ color:var(--muted); font-size:14px; }
  .contact-steps{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:36px;
    max-width:1000px;
    margin:2vh auto 0;
  }
  .contact-step h3{
    font-size:17px;
    font-weight:700;
    color:var(--text);
    margin-bottom:10px;
  }
  .contact-step p{
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
  }
  @media(max-width:800px){
    .contact-steps{ grid-template-columns:1fr; gap:26px; }
    .contact-primary{ flex-direction:column; gap:14px; }
  }

  /* Contact form (Netlify Forms) */
  .contact-form-wrap{
    max-width:640px;
    margin:6vh auto 0;
    padding-top:28px;
    border-top:1px solid var(--line);
  }
  .contact-form-title{
    font-size:22px;
    font-weight:700;
    color:var(--text);
    margin-bottom:24px;
  }
  .contact-form-hidden{
    position:absolute;
    left:-9999px;
    opacity:0;
    pointer-events:none;
  }
  .contact-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  .contact-form-field{
    margin-bottom:18px;
  }
  .contact-form-field label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--text);
    margin-bottom:7px;
  }
  .contact-form-field input,
  .contact-form-field select,
  .contact-form-field textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface);
    color:var(--text);
    font-family:inherit;
    font-size:14px;
    transition:border-color .2s;
  }
  .contact-form-field input:focus,
  .contact-form-field select:focus,
  .contact-form-field textarea:focus{
    outline:none;
    border-color:var(--accent);
  }
  .contact-form-field textarea{ resize:vertical; }
  .contact-form-success,
  .contact-form-error{
    display:none;
    margin-top:16px;
    font-size:14px;
    font-weight:600;
  }
  .contact-form-success{ color:#1e8a4c; }
  .contact-form-error{ color:#c0392b; }
  .contact-form.is-success .contact-form-success{ display:block; }
  .contact-form.is-error .contact-form-error{ display:block; }
  .contact-form.is-success .contact-form-field,
  .contact-form.is-success #contact-form-submit{ opacity:0.4; pointer-events:none; }
  @media(max-width:600px){
    .contact-form-row{ grid-template-columns:1fr; }
  }

  .contact-form-phone{
    margin-top:20px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
  }
  .contact-form-phone a{
    color:var(--accent);
    font-weight:600;
  }
  .contact-form-phone a:hover{ text-decoration:underline; }

  .about-stats{
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
    max-width:700px;
    margin:5vh auto 0;
    padding-top:5vh;
    border-top:1px solid var(--line);
    text-align:center;
  }
  .about-stat{ display:flex; flex-direction:column; align-items:center; }
  .about-stat-num{
    font-family:'Bebas Neue', sans-serif;
    font-size:clamp(38px, 5vw, 56px);
    color:var(--accent);
    line-height:1;
  }
  .about-stat-label{
    color:var(--muted);
    font-size:13px;
    margin-top:8px;
  }
  @media(max-width:600px){
    .about-stats{ gap:36px; }
  }

  /* AI chat widget */
  .chat-group{ bottom:96px; }
  .chat-float{
    width:64px; height:64px;
    border-radius:50%;
    background:none;
    border:none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:transform .2s ease;
    overflow:visible;
    filter:drop-shadow(0 6px 14px rgba(20,46,83,0.35));
  }
  .chat-float:hover{ transform:scale(1.08); }
  .chat-robot-icon{
    width:100%; height:100%;
    object-fit:contain;
    animation:chatRobotLife 15s ease-in-out infinite;
    transform-origin:50% 85%;
  }
  /* one 15s cycle: a couple of gentle idle bounces, then a friendly
     side-to-side "wave" rock near the end before it settles again —
     centered in place (no lateral offset) so it sits level with the
     WhatsApp button below it */
  @keyframes chatRobotLife{
    0%, 22%, 100%{ transform:translate(0, 0) rotate(0deg); }
    8%{ transform:translate(0, -4px) rotate(0deg); }
    16%{ transform:translate(0, 0) rotate(0deg); }
    88%{ transform:translate(0, 0) rotate(0deg); }
    90.5%{ transform:translate(0, -2px) rotate(-10deg); }
    93%{ transform:translate(0, 0) rotate(9deg); }
    95.5%{ transform:translate(0, -1px) rotate(-7deg); }
    98%{ transform:translate(0, 0) rotate(4deg); }
  }
  .chat-close-icon{ display:none; }
  .chat-float.open .chat-close-icon{ display:block; }
  .chat-float.open .chat-robot-icon{ display:none; }
  @media(max-width:700px){
    .chat-group{ bottom:80px; }
    .chat-float{ width:56px; height:56px; }
  }

  .chat-panel{
    position:fixed;
    bottom:162px; right:26px;
    width:340px;
    max-width:calc(100vw - 40px);
    height:460px;
    max-height:calc(100vh - 200px);
    background:var(--bg);
    border-radius:16px;
    box-shadow:0 16px 48px rgba(20,46,83,0.28);
    z-index:80;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    transform:translateY(16px) scale(0.97);
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .chat-panel.open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .chat-header{
    background:var(--accent2);
    color:#fff;
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .chat-header span:first-child{ font-weight:700; font-size:15px; }
  .chat-header-sub{ font-size:11.5px; color:rgba(255,255,255,0.65); }
  .chat-messages{
    flex:1;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .chat-msg{
    max-width:85%;
    padding:9px 13px;
    border-radius:14px;
    font-size:13.5px;
    line-height:1.5;
    unicode-bidi:plaintext; /* keeps mixed Arabic/English text (e.g. the
      brand name "Graphex" inside an Arabic sentence) from scrambling */
  }
  .chat-msg-bot{
    background:var(--surface);
    color:var(--text);
    align-self:flex-start;
    border-bottom-left-radius:4px;
  }
  .chat-msg-user{
    background:var(--accent);
    color:#fff;
    align-self:flex-end;
    border-bottom-right-radius:4px;
  }
  .chat-msg-typing{ color:var(--muted); font-style:italic; }
  .chat-input-row{
    display:flex;
    gap:8px;
    padding:12px;
    border-top:1px solid var(--line);
    background:var(--bg);
  }
  .chat-input-row input{
    flex:1;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--surface);
    color:var(--text);
    font-family:inherit;
    font-size:13.5px;
  }
  .chat-input-row input:focus{ outline:none; border-color:var(--accent); }
  .chat-input-row button{
    width:38px; height:38px;
    border-radius:50%;
    background:var(--accent2);
    color:#fff;
    border:none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .chat-input-row button:hover{ background:var(--accent); }
  @media(max-width:700px){
    .chat-panel{ bottom:140px; right:18px; width:calc(100vw - 36px); }
  }

  .carousel-hint{
    text-align:center;
    color:var(--muted);
    font-size:12.5px;
    letter-spacing:0.3px;
    margin-bottom:24px;
  }