/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --bg:#0A0C16;          /* page background, dark navy */
  --line:#232842;        /* grid lines */
  --pad:6vw;             /* shared horizontal gutter */

  --ivory:#f1f1f1;       /* headings */
  --light:#EDEAE0;       /* misc light */
  --muted:#767C99;       /* body copy */
  --faint:#4a5170;       /* labels / logo placeholders */
  --amber:#ffd700;       /* single gold: eyebrows, underline, hovers */
  --panel:#1d252d;       /* overlay / menu-open pill */
  --hair:rgba(255,255,255,.12);
  --hair-2:rgba(255,255,255,.14);
  --text-main:clamp(calc(1rem + 4px), calc(1.4vw + 4px), calc(1.15rem + 4px));
  --text-small:.9375rem;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:auto;}         /* GSAP owns scrolling */
body{
  background:var(--bg);
  color:var(--ivory);
  font-family:'Poppins',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- The engineering grid (fixed, fades toward edges) -------- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.22;
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 30%, transparent 85%);
          mask-image:radial-gradient(circle at 50% 38%, #000 30%, transparent 85%);
}

/* Shared, visible keyboard focus (quality floor) */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:4px;
  border-radius:4px;
}

/* ============================================================
   3. TYPE DESIGN SYSTEM  (used everywhere, identical)
   ============================================================ */
.eyebrow{
  font-family:'Poppins',sans-serif; font-weight:400;
  text-transform:capitalize;
  font-size:clamp(0.8rem, 2.4vw, 1.1rem); color:var(--amber); margin:0;
}
.h1{
  font-family:'Barlow Condensed',sans-serif; font-weight:500;
  text-transform:uppercase; font-size:clamp(2.5rem, 8.8vw, 11rem);
  line-height:.92; color:var(--ivory); margin:0;
}
.h2{
  font-family:'Barlow Condensed',sans-serif; font-weight:500;
  text-transform:uppercase; font-size:clamp(2rem, 4.5vw, 6rem);
  line-height:1; color:var(--ivory); margin:0;
}
.h3{
  font-family:'Barlow Condensed',sans-serif; font-weight:500;
  text-transform:uppercase; font-size:clamp(1.5rem, 3vw, 2.8rem);
  line-height:1; color:var(--ivory); margin:0;
}
.p{
  font-family:'Poppins',sans-serif; font-weight:300;
  font-size:var(--text-main); line-height:1.6;
  color:var(--muted); margin:0;
}

/* ============================================================
   6. FIXED UI  (siblings of the smooth wrapper)
   ============================================================ */
.logo{
  position:fixed; top:30px; left:var(--pad);
  height:64px; width:auto; z-index:2;
  line-height:0; display:block; text-decoration:none;
}
.logo img{ height:100%; width:auto; display:block; filter:brightness(0) invert(1); }

/* Dev guides — delete for production */
.guide{ display:none!important; position:fixed; top:0; bottom:0; width:1px; background:red; z-index:9999; pointer-events:none; }
.guide.left{ left:var(--pad); }
.guide.right{ right:var(--pad); }

.menu-btn{
  position:fixed; top:62px; right:var(--pad); transform:translateY(-50%);
  z-index:60; background:#f1f1f1; color:#111; border:0;
  border-radius:999px; padding:9px 26px;
  font-family:'Poppins',sans-serif; font-weight:600; text-transform:lowercase;
  font-size:1rem; cursor:pointer; overflow:hidden;
  opacity:0; pointer-events:none;               /* revealed by intro */
  transition:top .3s ease, width .3s ease, height .3s ease, background .3s ease, color .3s ease;
}
.menu-btn::before,.menu-btn::after{
  content:""; position:absolute; left:20px; top:50%;
  width:80px; height:4px; border-radius:999px; background:currentColor;
  opacity:0; transform:translateY(-50%) rotate(0deg) scaleX(0);
  transition:transform .35s ease, opacity .2s ease;
}
.menu-btn.open{
  top:calc(env(safe-area-inset-top) + 68px);
  width:120px; height:120px; padding:0; border-radius:50%;
  background:transparent; color:var(--panel); font-size:0;
}
.menu-btn.open::before{ opacity:1; transform:translateY(-50%) rotate(45deg) scaleX(1); }
.menu-btn.open::after{ opacity:1; transform:translateY(-50%) rotate(-45deg) scaleX(1); }
.menu-btn.open:hover,.menu-btn.open:focus-visible{ color:#fff; }

.overlay{
  position:fixed; inset:0; z-index:55; background:var(--amber);
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s ease;
  display:flex; align-items:center; justify-content:center; padding:0 var(--pad);
}
.overlay.open{ opacity:1; visibility:visible; }
.overlay nav{
  width:100%; max-width:1400px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start; justify-content:center; gap:clamp(48px,8vw,150px); text-align:left;
}
.menu-column{
  min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-start; gap:20px;
}
.overlay a{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; font-size:clamp(calc(1.8rem + 15px), calc(3vw + 15px), calc(3.3rem + 15px));
  color:var(--panel); text-decoration:none; line-height:1; width:max-content;
  transform:translateX(0);
  transition:color .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.overlay a:hover, .overlay a:focus-visible{ color:#fff; transform:translateX(14px); }
.overlay a:active{ transform:translateX(9px); }
.overlay a:focus-visible{ outline-color:var(--panel); }

/* All pages: directional menu transition. */
body:has(.page-main) .overlay,
body:has(.hero#home) .overlay{
  opacity:1; visibility:hidden; transform:translateX(100%);
  transition:none; will-change:transform;
}
body:has(.page-main) .overlay.open,
body:has(.hero#home) .overlay.open{
  opacity:1; visibility:visible; transform:translateX(0);
}
body:has(.page-main) .overlay a,
body:has(.hero#home) .overlay a{ opacity:0; }
body:has(.page-main) .overlay.open a,
body:has(.hero#home) .overlay.open a{ opacity:1; }

/* ---- Scroll cue ---------------------------------------------- */
.scroll-cue{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:40; display:flex; flex-direction:column; align-items:center; gap:9px;
  transition:opacity .4s ease;
}
.scroll-cue.hide{ opacity:0; pointer-events:none; }
.mouse{
  width:24px; height:38px; border:2px solid var(--muted); border-radius:14px;
  display:flex; justify-content:center; padding-top:6px;
}
.wheel{ width:4px; height:8px; border-radius:2px; background:var(--amber); animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel{ 0%{transform:translateY(0);opacity:1;} 70%{opacity:0;} 100%{transform:translateY(12px);opacity:0;} }
.scroll-cue small{ font-family:'Poppins',sans-serif; font-size:.68rem; color:var(--muted); text-transform:uppercase; }

/* ============================================================
   7. LOADER
   ============================================================ */
#loader{ position:fixed; inset:0; z-index:55; overflow:hidden; }
.bgPanel{ position:absolute; inset:0; background:#001E36; }
.loader-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:110px; height:110px; border-radius:16px; object-fit:cover;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.loader-counter{
  position:absolute; left:4vw; bottom:3vw;
  font-family:'Barlow Condensed',sans-serif; font-weight:400;
  font-size:13rem; line-height:.8; color:var(--ivory);
  font-variant-numeric:tabular-nums; user-select:none;
}
.loader-bar{ position:absolute; left:0; bottom:0; width:100%; height:6px; background:rgba(255,255,255,.15); }
.loader-bar-fill{ position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left center; }
.loader-skip{
  position:absolute; right:4vw; bottom:3vw; z-index:2;
  background:transparent; border:1px solid #fff; color:#fff;
  font-family:'Poppins',sans-serif; text-transform:uppercase;
  font-size:.8rem; padding:10px 22px; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.loader-skip:hover{ background:#fff; color:#111; }

/* ============================================================
   SMOOTH WRAPPER + SECTION SHELLS
   ============================================================ */
#smooth-wrapper{ position:relative; z-index:1; }
section{ position:relative; }

/* -------- 8. HERO -------------------------------------------- */
.hero{
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; padding:0 var(--pad);
}
.hero .eyebrow{ margin-bottom:16px; }
.hero-head{ margin:6px 0 22px; }
.headline{ display:none; white-space:nowrap; }
.headline.active{ display:block; }
.underline{
  height:.65px; width:88vw; background:var(--amber);
  border:0; margin:0; padding:0; transform-origin:left center;
}
#desc{ margin-top:28px; max-width:100%; min-height:4.8em; }
.trustbar{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  width:100%; margin-top:153px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border-radius:999px; text-decoration:none;
  font-family:'Poppins',sans-serif; font-weight:500; font-size:.95rem;
  border:1px solid var(--amber); transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{ background:var(--amber); color:#0A0C16; }
.btn-primary:hover{ background:transparent; color:var(--amber); }
.btn-ghost{ background:transparent; color:var(--ivory); border-color:var(--hair); }
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); }
.trust-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 76px; border-right:1px solid var(--hair);
}
.trust-item:last-child{ border-right:0; }
.trust-item b{
  font-family:'Barlow Condensed',sans-serif; font-weight:200;
  font-size:5rem; line-height:1; color:var(--ivory);
}
.trust-item span{
  font-family:'Poppins',sans-serif; font-weight:300;
  color:var(--amber); font-size:.95rem; margin-top:4px;
}

/* -------- 10. CLIENTS ---------------------------------------- */
.clients{
  padding:4vh var(--pad) 12vh;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.clients .eyebrow{ margin-bottom:18px; }
.clients-head{ max-width:100%; margin:0 auto; min-height:1.1em; }
.clients-sub{ margin:26px auto 0; }
.industries{
  margin-top:150px; margin-bottom:150px; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:40px;
}
.ind-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; row-gap:22px; line-height:1.35; }
.ind-row span{ padding:0 26px; border-right:1px solid var(--hair-2); color:var(--amber); }
.ind-row span:last-child{ border-right:0; }
.section-label{
  display:flex; align-items:center; justify-content:center; gap:20px;
  width:100%; max-width:880px; margin:0 auto 18px;
  color:var(--amber); text-transform:uppercase;
  font-family:'Poppins',sans-serif; font-weight:400; font-size:.82rem;
  line-height:1.4; white-space:normal; text-align:center;
}
.section-label::before, .section-label::after{ content:""; flex:1; height:1px; background:var(--hair); }
.logo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, 250px);
  justify-content:center; gap:40px; width:100%;
}
.section-label + .logo-grid{ margin-top:20px; }
.logo-box{
  width:250px; height:160px; border:1px solid var(--hair); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--faint);
  font-family:'Barlow Condensed',sans-serif; font-size:1rem;
  background:rgba(255,255,255,.02);
  transition:border-color .3s ease, background .3s ease;
}
.logo-box:hover{ border-color:var(--amber); background:rgba(255,255,255,.045); }

.logo-box img {  max-width: 80%;  max-height: 80%;  object-fit: contain;}
.clients-note{ margin-top:32px; max-width:100%; color:var(--faint); font-size:var(--text-small); font-family:'Poppins',sans-serif; }
.clients-btn{ margin-top:28px; }

/* -------- 11. SKILLS (pinned horizontal) --------------------- */
.skills{
  height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:2.5vh; padding:4vh 0 calc(4vh + 100px);   /* extra bottom space lifts the deck off the screen bottom */
}
.skills-head{
  flex:0 0 auto; width:100%;                      /* header keeps its natural height */
  text-align:center; max-width:100%; padding:0 var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.skills-head .h1{ font-size:clamp(2rem, 4.5vw, 4.5rem); }   /* reduced ONLY here so it fits beside the cards */
.skills-track{
  flex:1 1 auto; min-height:0;                    /* deck fills the leftover height */
  align-self:flex-start;                          /* start at card 1, not centered */
  display:flex; align-items:center; gap:32px; width:max-content; padding:0 var(--pad);
}
.skill-card{
  width:460px; flex:0 0 460px;
  height:min(600px, 100%);                        /* never taller than the viewport allows */
  border:1px solid var(--hair); border-radius:16px; background:rgba(255,255,255,.02);
  padding:44px; display:flex; flex-direction:column; justify-content:flex-end; gap:16px;
  color:inherit; text-decoration:none;
  transition:border-color .3s ease, background .3s ease;
}
.skill-card:not(.blog-card){
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto auto;
  align-items:end;
}
.skill-card:not(.blog-card) > img{
  display:block;
  width:auto;
  max-width:100%;
  height:250px;
  align-self:center;
  justify-self:center;
  object-fit:contain;
}
.skill-card:not(.blog-card) > .h3{
  width:100%;
  min-height:1em;
  font-size:clamp(1.55rem, 2.2vw, 2.2rem);
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.skill-card:hover{ border-color:var(--amber); background:rgba(255,255,255,.045); }
.skill-card .p{
  font-size:var(--text-small); line-height:1.6;
  height:4.8em; min-height:4.8em;                 /* equal three-line description row */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

/* Blog cards: cover image on top, body below */
.blog-card{ padding:0; overflow:hidden; justify-content:flex-start; text-decoration:none; }
.blog-img{
  display:block; width:100%; height:56%; flex:0 0 56%; object-fit:cover; object-position:center; background-color:#12141f;
  filter:none;
}
.blog-body{ padding:26px 32px 32px; display:flex; flex-direction:column; gap:12px; }
.blog-body .h3{ min-height:2.1em; }
.blog-cat{
  font-family:'Poppins',sans-serif; font-weight:500; text-transform:uppercase;
  font-size:.72rem; color:var(--amber);
}
.blog-card .p{ display:block; min-height:0; font-size:var(--text-small); line-height:1.6; color:var(--muted); }
.blog-card:hover{ border-color:var(--amber); background:rgba(255,255,255,.045); }

/* -------- 11.5 WORK (bento grid) ----------------------------- */
.work{
  margin-top:10vh;                 /* breathing room under the pinned Services deck */
  padding:8vh var(--pad) 12vh;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.work .eyebrow{ margin-bottom:18px; }
.work-head{ margin:0 auto 48px; }
.work-grid{
  --cols:4; --gap:16px;
  width:100%; display:grid; grid-auto-flow:dense;
  grid-template-columns:repeat(var(--cols), 1fr);
  gap:var(--gap);
  /* base tile is a 16:9 landscape: row height = column width * 9/16.
     column width is derived from the section's live content width. */
  grid-auto-rows:calc((100vw - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols) * 9 / 16);
}
.wbox{
  position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--hair);
  background-color:#12141f; background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:flex-end; text-decoration:none;
  filter:none;
}
.wbox::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:none;
}
.wbox span{
  position:relative; z-index:1; padding:16px 18px;
  color:#1d252d; font-family:'Barlow Condensed',sans-serif; font-weight:500;
  text-transform:uppercase; font-size:clamp(1rem, 1.4vw, 1.5rem);
}
.wbox.lg{ grid-column:span 2; grid-row:span 2; }   /* big feature tile — stays 16:9 */
.work-btn{
  margin-top:50px; display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--hair); border-radius:999px; padding:14px 34px;
  font-family:'Poppins',sans-serif; font-weight:500; font-size:.85rem;
  text-transform:uppercase; color:var(--ivory); text-decoration:none;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.work-btn:hover{ border-color:var(--amber); color:var(--amber); background:rgba(255,215,0,.06); }
.work-btn .arrow{ display:inline-block; transition:transform .25s ease; }
.work-btn:hover .arrow{ transform:translateX(5px); }

/* -------- 11.8 FAQ ------------------------------------------- */
.faq{
  padding:10vh var(--pad) 12vh;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.faq .eyebrow{ margin-bottom:18px; }
.faq-head{ margin:0 auto 48px; }
.faq-list{ width:100%; max-width:880px; text-align:left; }
.faq-item{ border-top:1px solid var(--hair); }
.faq-item:last-child{ border-bottom:1px solid var(--hair); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:42px 44px 42px 4px; position:relative;
  font-family:'Barlow Condensed',sans-serif; font-weight:500; text-transform:uppercase;
  font-size:clamp(1.1rem, 2.4vw, 1.7rem); color:var(--ivory);
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:'Poppins',sans-serif; font-weight:300; font-size:1.8rem; color:var(--amber);
  transition:transform .3s ease;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item summary:hover{ color:var(--amber); }
.faq-a{ padding:0 44px 26px 4px; }
.faq-a .p{ font-size:var(--text-main); }

/* -------- 12. FOOTER CTA ------------------------------------- */
.cta{
  display:flex; flex-direction:column; justify-content:center;
  padding:10vh var(--pad) 5vh;
}
.site-footer{ border-top:1px solid var(--line); }
.cta-eyebrow{
  font-family:'Poppins',sans-serif; text-transform:uppercase;
  color:var(--muted); font-size:.9rem; margin:0 0 22px;
}
.cta-main{
  display:grid; grid-template-columns:1fr 1fr; gap:30px 50px; align-items:end;
}
.cta-head{ text-decoration:none; display:inline-block; }   /* type styling comes from .h1 */
.cta-head .arrow{ display:inline-block; transition:none; }
.cta-head:hover .arrow{ transform:none; }
.cta-contact{ display:flex; flex-direction:column; gap:22px; padding-bottom:8px; }
.cc-item{ display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.cc-label{
  font-family:'Poppins',sans-serif; text-transform:uppercase;
  font-size:.72rem; color:var(--amber);
}
.cc-value{
  display:inline-block; color:var(--ivory); overflow-wrap:anywhere;
  transition:transform .24s ease-out, color .24s ease-out;
  font-size:clamp(1.6rem, 4.2vw, 4.5rem); line-height:1; text-transform:none;
}
.cc-item:hover .cc-value, .cc-item:focus-visible .cc-value{
  color:var(--amber); transform:translateX(12px);
}
.footer-directory{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,6vw,96px); margin-top:10vh; padding-top:40px;
  border-top:1px solid var(--hair);
}
.footer-column{
  display:flex; flex-direction:column; align-items:flex-start;
}
.footer-column h2{
  margin:0 0 18px; color:var(--amber);
  font-family:'Poppins',sans-serif; font-size:.82rem; font-weight:500;
  line-height:1.4; text-transform:uppercase;
}
.footer-column a{
  display:flex; align-items:center; min-height:36px;
  color:var(--muted); text-decoration:none;
  font-family:'Poppins',sans-serif; font-size:.95rem; font-weight:400; line-height:1.3;
  transition:color .25s ease, transform .25s ease;
}
.footer-column a:hover,.footer-column a:focus-visible{
  color:var(--amber); transform:translateX(8px);
}
.cta-bottom{
  margin-top:40px; border-top:1px solid var(--hair); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-family:'Poppins',sans-serif; text-transform:uppercase;
  color:var(--muted); font-size:.85rem;
}
.cta-bottom a{ color:var(--muted); text-decoration:none; transition:none; }
.cta-bottom a:hover{ color:var(--ivory); }
.cta-social{ display:flex; gap:24px; }
.cta-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px;
  margin-top:10vh; padding-top:32px; border-top:1px solid var(--hair);
  font-family:'Poppins',sans-serif; font-weight:400; font-size:.95rem;
}
.cta-links a{ color:var(--muted); text-decoration:none; transition:none; }
.cta-links a:hover, .cta-links a:focus-visible{ color:var(--amber); }

/* ============================================================
   Degraded modes: no-ScrollTrigger / reduced-motion make the
   pinned deck a normal horizontal scroll so all cards stay reachable.
   ============================================================ */
body.static-skills .skills{
  height:auto; min-height:auto; overflow-x:auto; overflow-y:hidden;
  justify-content:flex-start; padding:8vh 0;
  scrollbar-width:thin;
}
body.static-skills .skills-track{ flex:0 0 auto; align-self:auto; padding-bottom:18px; }
body.static-skills .skill-card{ height:min(600px, 70vh); }

@media (prefers-reduced-motion: reduce){
  .wheel{ animation:none; }
  .cc-value{transition:none;}
  .cc-item:hover .cc-value, .cc-item:focus-visible .cc-value{transform:none;}
  .overlay a,.overlay a:hover,.overlay a:focus-visible,.overlay a:active{transition:none;transform:none;}
  .footer-column a,.footer-column a:hover,.footer-column a:focus-visible{transition:none;transform:none;}
  .menu-btn,.menu-btn::before,.menu-btn::after{transition:none;}
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .ind-row span{ padding:0 16px; }
  .trust-item{ border-right:0; }
}
@media (max-width:768px){
  :root{ --pad:5vw; }
  .logo{ height:44px; top:22px; }
  .menu-btn{ top:44px; padding:7px 20px; font-size:.9rem; }
  .loader-counter{ font-size:6rem; }
  .loader-icon{ width:84px; height:84px; }
  .headline{ font-size:6.8vw; }               /* keep nowrap titles on-screen */

  /* hero stats: tight, consistent 2-column grid (last item centered) */
  .trustbar{
    margin-top:64px; display:grid; grid-template-columns:1fr 1fr;
    gap:26px 10px; justify-items:center;
  }
  .trust-item{ border-right:0; padding:0 6px; }
  .trust-item:last-child{ grid-column:1 / -1; }
  .trust-item b{ font-size:2.6rem; }

  /* clients: tighter vertical rhythm + cleaner industries */
  .clients{ padding:4vh var(--pad) 8vh; }
  .clients-head, .clients-sub{ max-width:100%; }
  .clients-sub{ margin-top:20px; }
  .industries{ margin-top:56px; margin-bottom:56px; gap:20px; }
  .ind-row{ gap:2px 0; }
  .ind-row span{ border-right:0; padding:2px 12px; }
  .ind-row .h3{ font-size:1.4rem; }
  .section-label{ font-size:.72rem; }
  .logo-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .logo-box{ width:100%; height:120px; }

  /* services + footer */
  .skills-head .h1{ font-size:clamp(1.8rem, 7vw, 2.6rem); }
  .skills-head .p{ font-size:var(--text-main); }
  .skill-card{ width:80vw; flex-basis:80vw; padding:28px; }
  .cta-main{ grid-template-columns:1fr; gap:24px; }
  .footer-directory{grid-template-columns:1fr;gap:36px;margin-top:64px;padding-top:32px;}
  .footer-column a{min-height:44px;}
  .cta-bottom{ flex-direction:column; align-items:flex-start; }
  .work-grid{ --cols:2; --gap:12px; }
  .work-head{ margin-bottom:34px; }
}
@media (max-width:420px){
  .trust-item b{ font-size:2.1rem; }
  .loader-counter{ font-size:4.5rem; }
  .skill-card{ width:84vw; flex-basis:84vw; }
  .ind-row .h3{ font-size:1.2rem; }
  .section-label{ font-size:.62rem; }
}

/* Presentation values moved from HTML; visual output is unchanged. */
.work-art-01{background-image:url('img/portfolio/Branding/Albilad-Brand-Guidlines.jpg')}.work-art-02{background-image:url('img/portfolio/Branding/mezaj-maghribi.jpg')}.work-art-03{background-image:url('img/portfolio/Branding/SIS-Flyer.jpg')}.work-art-04{background-image:url('img/portfolio/3D/KIRI-DISPLAY-CART-DESIGN.jpg')}.work-art-05{background-image:url('img/portfolio/UI-UX/UI-UX-1.jpg')}.work-art-06{background-image:url("img/portfolio/3D/Law-Students'-Club-Event-Stands.jpg")}.work-art-07{background-image:url('img/portfolio/Branding/ASFOURA-SM.jpg')}.work-art-08{background-image:url('img/portfolio/Branding/ALBilad-Co.-for-Consultancies-&-Solutions.jpg')}.work-art-09{background-image:url('img/portfolio/3D/Whites-Exhibition-Stand.jpg')}.work-art-10{background-image:url('img/portfolio/Branding/ASFOURA-SM.jpg')}.work-art-11{background-image:url('img/portfolio/UI-UX/Gamma-Factory-Website.jpg')}.work-art-12{background-image:url('img/portfolio/3D/Brand-End-Gondola.jpg')}.work-art-13{background-image:url('img/portfolio/profiles/KunoozMagazine.jpg')}.work-art-14{background-image:url('img/portfolio/Branding/SIS-Flyer.jpg')}.work-art-15{background-image:url('img/portfolio/UI-UX/UI-UX-6.jpg')}

/* Responsive stability — desktop presentation remains unchanged. */
img{max-width:100%;}
a,button,summary{touch-action:manipulation;}

@media (max-width:768px){
  html,body{width:100%;max-width:100%;}
  body{overflow-x:clip;}
  body::before{background-size:48px 48px;}

  .logo{top:max(22px, env(safe-area-inset-top));}
  .menu-btn{
    top:calc(max(22px, env(safe-area-inset-top)) + 22px);
    min-width:44px;min-height:44px;padding:7px 18px;
  }
  .overlay{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow-y:auto;}
  .overlay{align-items:flex-start;}
  .overlay nav{width:100%;grid-template-columns:1fr;gap:36px;padding:110px 0 44px;}
  .overlay a{width:fit-content;max-width:100%;}
  .scroll-cue{bottom:calc(18px + env(safe-area-inset-bottom));}

  .hero{
    min-height:100svh;height:auto;justify-content:flex-start;
    padding-top:clamp(112px,24vh,150px);padding-bottom:64px;
  }
  .hero-head{width:100%;margin:8px 0 20px;}
  .headline{font-size:clamp(2.1rem,10.6vw,3.7rem);max-width:100%;}
  .underline{width:100%;}
  #desc{max-width:65ch;min-height:0;margin-top:22px;font-size:var(--text-main);}
  .hero-cta{width:100%;margin-top:28px;gap:12px;}
  .hero-cta .btn{min-height:48px;flex:1 1 150px;padding:12px 20px;}
  .trustbar{width:100%;margin-top:48px;gap:24px 8px;}
  .trust-item{min-width:0;width:100%;}
  .trust-item b{font-size:clamp(2.1rem,11vw,3rem);}
  .trust-item span{font-size:.78rem;line-height:1.35;}

  .clients{padding-top:64px;padding-bottom:72px;}
  .clients-sub{font-size:var(--text-main);}
  .section-label{max-width:100%;gap:12px;}
  .logo-grid{align-items:stretch;}
  .logo-box{min-width:0;}

  body.mobile-layout .skills{
    height:auto;min-height:0;overflow:visible;justify-content:flex-start;
    gap:36px;padding:72px 0;
  }
  body.mobile-layout .skills-track{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;max-width:100%;align-self:stretch;gap:16px;padding:0 var(--pad);
    transform:none!important;
  }
  body.mobile-layout .skill-card{
    width:100%;max-width:100%;height:auto;min-height:360px;flex-basis:auto;padding:28px;
  }
  body.mobile-layout .blog-card{min-height:480px;padding:0;}
  body.mobile-layout .blog-img{height:clamp(230px,56vw,340px);min-height:0;flex:0 0 auto;}
  body.mobile-layout .blog-body{padding:22px;}

  .work{margin-top:0;padding-top:72px;padding-bottom:80px;}
  .wbox span{padding:12px;font-size:1rem;}
  .work-btn{min-height:48px;}

  .faq{padding-top:72px;padding-bottom:80px;}
  .faq-head{margin-bottom:32px;}
  .faq-item summary{min-height:76px;padding:26px 48px 26px 0;font-size:clamp(1.1rem,5.8vw,1.45rem);line-height:1.15;}
  .faq-a{padding:0 36px 24px 0;}

  .cta{padding-top:72px;padding-bottom:calc(36px + env(safe-area-inset-bottom));}
  .cta-main{min-width:0;}
  .cta-head{font-size:clamp(3rem,19vw,5rem);}
  .cc-value{font-size:clamp(1.35rem,7.2vw,2.5rem);line-height:1.15;}
  .cta-links{margin-top:64px;gap:6px 18px;}
  .cta-links a{display:inline-flex;align-items:center;min-height:44px;}
  .cta-social{flex-wrap:wrap;gap:12px 22px;}
}

@media (max-width:560px){
  body.mobile-layout .skills-track{grid-template-columns:1fr;}
  body.mobile-layout .skill-card{min-height:340px;}
  .logo-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .logo-box{height:105px;}
  .work-grid{--cols:1;--gap:12px;}
  .wbox.lg{grid-column:span 1;grid-row:span 1;}
  .cta-bottom{align-items:stretch;}
  .cta-bottom>a{overflow-wrap:anywhere;}
}

@media (max-width:360px){
  :root{--pad:18px;}
  .headline{font-size:clamp(1.95rem,10.4vw,2.35rem);}
  .hero-cta{display:grid;grid-template-columns:1fr;}
  .trustbar{grid-template-columns:1fr 1fr;}
  .ind-row span{padding-inline:8px;}
  .faq-item summary{font-size:1.08rem;}
  .cta-head{font-size:3.2rem;}
  .cc-value{font-size:1.25rem;}
}

@media (max-width:900px) and (orientation:landscape) and (max-height:560px){
  .hero{padding-top:100px;justify-content:flex-start;}
  .scroll-cue{display:none;}
  .overlay{align-items:center;}
  .overlay nav{gap:.12rem;}
  body.mobile-layout .skills-track{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Balanced statistics layout at every viewport width. */
@media (min-width:1201px){
  .trustbar{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    width:100%;
    max-width:1600px;
  }
  .trust-item{
    min-width:0;
    padding:0 clamp(18px,2.5vw,48px);
    border-right:1px solid var(--hair);
  }
  .trust-item:last-child{border-right:0;}
}

@media (min-width:769px) and (max-width:1200px){
  .trustbar{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    align-items:stretch;
    width:100%;
    gap:0;
    margin-top:clamp(72px,10vw,120px);
  }
  .trust-item{
    width:100%;
    min-width:0;
    padding:28px 16px;
    border-right:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
  }
  .trust-item:nth-child(-n+3){grid-column:span 2;}
  .trust-item:nth-child(n+4){grid-column:span 3;border-bottom:0;}
  .trust-item:nth-child(3),
  .trust-item:nth-child(5){border-right:0;}
  .trust-item b{font-size:clamp(3rem,6vw,4.5rem);}
  .trust-item span{font-size:clamp(.78rem,1.4vw,.95rem);line-height:1.35;}
}

@media (max-width:768px){
  .trustbar{
    gap:0;
    align-items:stretch;
    border-top:1px solid var(--hair);
  }
  .trust-item{
    padding:24px 10px;
    border-right:1px solid var(--hair)!important;
    border-bottom:1px solid var(--hair);
  }
  .trust-item:nth-child(even){border-right:0!important;}
  .trust-item:last-child{
    grid-column:1 / -1;
    border-right:0!important;
    border-bottom:0;
  }

  /* Let the hero end after its content instead of reserving another viewport. */
  .hero{
    min-height:0;
    height:auto;
    padding-bottom:32px;
  }
  .clients{padding-top:40px;}
}