/* ═══════════════════════════════════════════════════════════
   THS-ME — الشركة التقنية لخدمات الهيدروليك والمعدات الصناعية
   Aesthetic: industrial spec-sheet · graphite + signal red
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:        #14161a;
  --ink-2:      #1c1f25;
  --ink-3:      #242830;
  --paper:      #f3efe6;
  --paper-2:    #ece7da;
  --red:     #e8362a;
  --red-d:   #c22419;
  --steel:      #8a93a0;
  --line-d:     rgba(243,239,230,.14);
  --line-l:     rgba(20,22,26,.16);
  --white:      #fbfaf7;

  --font-display: "Changa", system-ui, sans-serif;
  --font-body:    "Tajawal", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1280px;
  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.4,.44,1);
}

/* ── reset ── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:96px }
body{
  font-family:var(--font-body);
  -webkit-overflow-scrolling:touch;
  background:var(--paper);
  color:var(--ink);
  line-height:1.75;
  font-size:1.02rem;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit }
::selection{ background:var(--red); color:#fff }

.wrap{ width:min(var(--wrap), 92%); margin-inline:auto }
.mono{ font-family:var(--font-mono); letter-spacing:.06em }
em{ font-style:normal; color:var(--red) }
section{ position:relative }

/* ── scroll progress ── */
.progress{ position:fixed; top:0; right:0; left:0; height:3px; z-index:200; background:transparent }
.progress span{ display:block; height:100%; width:0; background:var(--red); transition:width .1s linear }

/* ── hazard stripe motif ── */
.hazard{
  height:8px;
  background:repeating-linear-gradient(-45deg, var(--red) 0 14px, var(--ink) 14px 28px);
}

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  padding:.72rem 1.5rem; border:2px solid var(--ink); border-radius:4px;
  position:relative; overflow:hidden; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
}
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease-spring) }
.btn:hover svg{ transform:translateX(-5px) }
[dir="ltr"] .btn:hover svg{ transform:translateX(5px) }
[dir="ltr"] .btn:hover .icon-flip{ transform:scaleX(-1) translateX(5px) }
.btn-primary{ background:var(--red); border-color:var(--red); color:#fff }
.btn-primary:hover{ background:var(--red-d); border-color:var(--red-d); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(232,54,42,.55) }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--paper) }
.btn-ghost:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px) }
.btn-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn-dark:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px) }
.btn-lg{ padding:.95rem 2.1rem; font-size:1.05rem }
.btn-block{ width:100%; justify-content:center }

/* ═══════════════════ TOPBAR ═══════════════════ */
.topbar{ background:var(--ink); color:var(--steel); font-size:.85rem; position:relative; z-index:60 }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:40px }
.topbar-contacts{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap }
.tb-item{ display:inline-flex; align-items:center; gap:.45rem; transition:color .25s }
a.tb-item:hover{ color:var(--red) }
.tb-item svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.topbar-side{ display:flex; align-items:center; gap:1.1rem }
.tb-loc{ display:inline-flex; align-items:center; gap:.45rem }
.tb-loc svg{ width:15px; height:15px; fill:none; stroke:var(--red); stroke-width:1.8 }
.tb-fb{ display:inline-flex; padding:.2rem; border:1px solid var(--line-d); border-radius:3px; transition:all .25s }
.tb-fb svg{ width:16px; height:16px; fill:currentColor; stroke:none }
.tb-fb:hover{ background:var(--red); border-color:var(--red); color:#fff }

/* ═══════════════════ HEADER ═══════════════════ */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(243,239,230,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:box-shadow .3s, background .3s;
}
.header.is-scrolled{ box-shadow:0 8px 30px -12px rgba(20,22,26,.25); background:rgba(243,239,230,.98) }
.header .hazard{ position:absolute; bottom:-8px; right:0; left:0; opacity:0; transition:opacity .3s }
.header.is-scrolled .hazard{ opacity:1 }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.55rem }

.brand{ display:flex; align-items:center; gap:.8rem; flex-shrink:0 }
.brand img{ height:46px; width:auto; filter:drop-shadow(0 2px 6px rgba(20,22,26,.18)); transition:transform .3s var(--ease-spring) }
.brand:hover img{ transform:scale(1.04) }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15 }
.brand-txt strong{ font-family:var(--font-mono); font-size:1.05rem; letter-spacing:.12em; font-weight:500 }
.brand-txt small{ font-size:.72rem; color:var(--steel); font-weight:500 }

/* nav */
.nav{ flex:1; display:flex; justify-content:center }
.nav-list{ display:flex; align-items:center; gap:.15rem }
.nav-link{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:.5rem .85rem; border-radius:4px; position:relative;
  transition:color .25s, background .25s;
}
.nav-link .chev{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease) }
.nav-link::after{
  content:""; position:absolute; bottom:.2rem; right:.85rem; left:.85rem; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
[dir="ltr"] .nav-link::after{ transform-origin:left }
a.nav-link:hover, .nav-link[aria-expanded="true"]{ color:var(--red-d) }
a.nav-link:hover::after, .has-drop.open .nav-link::after{ transform:scaleX(1) }

/* dropdown */
.has-drop{ position:relative }
.has-drop.open .chev{ transform:rotate(180deg) }
.dropdown{
  position:absolute; top:calc(100% + 10px); inset-inline-start:0; min-width:300px;
  background:var(--ink); padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow:0 24px 50px -12px rgba(0,0,0,.45);
  border-top:3px solid var(--red);
}
.dropdown::before{
  content:""; position:absolute; top:-10px; right:0; left:0; height:10px;
}
.has-drop.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0) }
.dropdown a{
  display:flex; align-items:center; gap:.7rem;
  color:var(--paper); font-size:.93rem; font-weight:500;
  padding:.6rem .8rem; border-radius:3px;
  transition:background .2s, padding-right .25s var(--ease);
}
.dropdown a:hover{ background:var(--ink-3); padding-inline-start:1.2rem }
.dropdown a:hover .d-code{ color:var(--red) }
.d-code{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--steel); transition:color .2s }

/* header actions */
.header-actions{ display:flex; align-items:center; gap:.7rem }
.header .btn{ padding:.55rem 1.15rem; font-size:.9rem }
.burger{ display:none; flex-direction:column; gap:5px; padding:.6rem .4rem }
.burger span{ width:26px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

/* ── language toggle ── */
.lang-toggle{
  width:42px; height:42px; display:grid; place-items:center; flex-shrink:0;
  background:transparent; border:2px solid var(--ink); border-radius:4px;
  font-family:var(--font-mono); font-size:.85rem; font-weight:500; letter-spacing:.05em;
  color:var(--ink); cursor:pointer; transition:background .25s, color .25s, border-color .25s;
}
.lang-toggle:hover{ background:var(--ink); color:var(--paper) }
.mm-head-actions{ display:flex; align-items:center; gap:.6rem }
.mm-head .lang-toggle{ border-color:var(--line-d); color:var(--paper) }
.mm-head .lang-toggle:hover{ background:var(--red); border-color:var(--red); color:#fff }

/* direction-aware icons (point "forward" per direction) */
[dir="ltr"] .icon-flip{ transform:scaleX(-1) }
[dir="ltr"] #slidePrev svg, [dir="ltr"] #slideNext svg{ transform:scaleX(-1) }

/* ═══════════════════ MOBILE MENU ═══════════════════ */
.mobile-menu{
  position:fixed; inset:0; z-index:150; background:var(--ink);
  display:flex; flex-direction:column;
  clip-path:circle(0 at calc(100% - 40px) 40px);
  transition:clip-path .6s var(--ease);
  visibility:hidden;
}
.mobile-menu.is-open{ clip-path:circle(140% at calc(100% - 40px) 40px); visibility:visible }
[dir="ltr"] .mobile-menu{ clip-path:circle(0 at 40px 40px) }
[dir="ltr"] .mobile-menu.is-open{ clip-path:circle(140% at 40px 40px) }
[dir="ltr"] .mm-nav > a, [dir="ltr"] .mm-sub{ transform:translateX(-30px) }
.mm-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 5% }
.mm-head img{ height:40px; filter:brightness(0) invert(1) }
.mm-close{ width:44px; height:44px; display:grid; place-items:center; color:var(--paper); border:1px solid var(--line-d); border-radius:4px }
.mm-close svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
.mm-nav{ flex:1; overflow-y:auto; padding:1rem 5%; display:flex; flex-direction:column; gap:.2rem }
.mm-nav > a{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  color:var(--paper); padding:.65rem .4rem;
  border-bottom:1px solid var(--line-d);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateX(30px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), color .25s;
}
.mobile-menu.is-open .mm-nav > a,
.mobile-menu.is-open .mm-sub{ opacity:1; transform:none }
.mm-nav > a:hover{ color:var(--red) }
.mm-sub{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  color:var(--paper); padding:.65rem .4rem; width:100%; text-align:start;
  border-bottom:1px solid var(--line-d);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateX(30px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.mm-sub .chev{ width:20px; height:20px; fill:none; stroke:var(--red); stroke-width:2.4; transition:transform .3s }
.mm-sub[aria-expanded="true"] .chev{ transform:rotate(180deg) }
.mm-sublist{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease) }
.mm-sublist > a{ font-size:1rem !important; font-weight:500 !important; color:var(--steel) !important; padding:.45rem .4rem !important; padding-inline-end:1.4rem !important; border-bottom:0 !important }
.mm-sublist > a:hover{ color:var(--red) !important }
.mm-sublist.is-open{ grid-template-rows:1fr }
.mm-sublist{ overflow:hidden }
.mm-cta{
  background:var(--red) !important; color:#fff !important;
  justify-content:center !important; margin-top:1rem;
  font-size:1.15rem !important; border:0 !important; border-radius:4px;
}
.mm-foot{ display:flex; justify-content:space-between; gap:1rem; padding:1rem 5% calc(1.4rem + env(safe-area-inset-bottom)); color:var(--steel); font-size:.9rem; border-top:1px solid var(--line-d) }
.mm-foot a:hover{ color:var(--red) }

/* stagger for mobile menu items */
.mm-nav > a, .mm-sub{ transition-delay:0s }
.mobile-menu.is-open .mm-nav > a, .mobile-menu.is-open .mm-sub{ transition-delay:calc(var(--i,0) * 45ms) }

/* ═══════════════════ HERO ═══════════════════ */
.hero{ background:var(--ink); color:var(--paper); overflow:hidden }
.hero-slider{ position:relative; min-height:min(88vh, 780px); display:flex; align-items:flex-end }
.slides{ position:absolute; inset:0 }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); z-index:1 }
.slide.is-active{ opacity:1; z-index:2 }
.slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 6s linear }
.slide.is-active img{ transform:scale(1.14) }
.slide-tag{
  position:absolute; top:18px; inset-inline-end:18px; z-index:3;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  background:var(--red); color:#fff; padding:.3rem .7rem;
  opacity:0; transform:translateY(8px); transition:opacity .6s .5s, transform .6s .5s var(--ease);
}
.slide.is-active .slide-tag{ opacity:1; transform:none }

.hero-scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(to top, rgba(13,15,18,.94) 0%, rgba(13,15,18,.55) 42%, rgba(13,15,18,.25) 70%, rgba(13,15,18,.5) 100%),
    linear-gradient(100deg, rgba(13,15,18,.85) 0%, rgba(13,15,18,.2) 55%, transparent 75%);
}
/* blueprint grid */
.hero::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(243,239,230,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,239,230,.05) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 65%);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 65%);
}

.hero-content{ position:relative; z-index:5; padding-bottom:6.5rem; padding-top:4rem }
.hero-kicker{ color:var(--red); font-size:.8rem; font-weight:500; display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem }
.hero-kicker::after{ content:""; width:64px; height:2px; background:var(--red) }
.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.18; letter-spacing:-.01em;
  max-width:16em;
}
.hero-title em{ display:inline-block; position:relative }
.hero-sub{ margin-top:1.2rem; max-width:46ch; color:rgba(243,239,230,.78); font-size:1.08rem }
.hero-cta{ display:flex; gap:.9rem; margin-top:2.1rem; flex-wrap:wrap }

.hero-ui{ position:absolute; inset:0; z-index:6; pointer-events:none }
.hero-progress{ position:absolute; top:0; right:0; left:0; height:3px; background:rgba(243,239,230,.12) }
.hero-progress span{ display:block; height:100%; width:0; background:var(--red) }
.hero-ui-row{ position:absolute; bottom:0; right:0; left:0; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:0 4% 1.6rem }
.hero-counter, .hero-dots, .hero-arrows{ pointer-events:auto }
.hero-counter{ font-size:1rem; color:var(--steel); letter-spacing:.15em }
.hero-counter #slideNow{ color:var(--red); font-size:1.5rem; font-weight:500 }
.hero-dots{ display:flex; gap:.5rem; align-items:center }
.hero-dots button{
  width:26px; height:4px; background:rgba(243,239,230,.25); border-radius:2px;
  transition:background .3s, width .3s var(--ease);
}
.hero-dots button:hover{ background:rgba(243,239,230,.55) }
.hero-dots button.is-active{ background:var(--red); width:44px }
.hero-arrows{ display:flex; gap:.55rem }
.arrow{
  width:48px; height:48px; display:grid; place-items:center;
  border:1.5px solid rgba(243,239,230,.35); color:var(--paper); border-radius:4px;
  transition:all .25s var(--ease);
}
.arrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.arrow:hover{ background:var(--red); border-color:var(--red); transform:translateY(-2px) }

/* ═══════════════════ BRANDS / MARQUEE ═══════════════════ */
.brands{ background:var(--paper); padding:4.5rem 0 0; overflow:hidden }
.brands-head{ max-width:640px }
.sec-kicker{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.25;
  display:flex; flex-direction:column; gap:.4rem;
}
.sec-kicker .mono{ font-size:.78rem; color:var(--steel); font-weight:500; letter-spacing:.14em }
.brands-head p{ color:rgba(20,22,26,.65); margin-top:.6rem }
.marquee{
  margin-top:3rem; position:relative;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 40s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes marquee{ to{ transform:translateX(50%) } }
@keyframes marqueeLtr{ to{ transform:translateX(-50%) } }
[dir="ltr"] .marquee-track{ animation-name:marqueeLtr }
.mq-item{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:1.4rem 2.2rem; margin-inline-end:2.4rem; border:1px solid var(--line-l); background:var(--white);
  flex-shrink:0; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.mq-item:hover{ transform:translateY(-4px); border-color:var(--red); box-shadow:0 14px 30px -14px rgba(20,22,26,.25) }
.mq-item img{ height:52px; width:auto; max-width:130px; object-fit:contain; filter:grayscale(1) contrast(1.05); opacity:.85; transition:filter .35s, opacity .35s }
.mq-item:hover img{ filter:none; opacity:1 }
.mq-item span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; color:var(--steel) }

/* ═══════════════════ ABOUT ═══════════════════ */
.about{ padding:6.5rem 0 5rem; background:var(--paper) }
.about-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:4rem; align-items:start }
.sec-tag{ font-size:.78rem; letter-spacing:.14em; color:var(--red-d); font-weight:500; margin-bottom:1rem }
.sec-title{
  font-family:var(--font-display); font-weight:800; line-height:1.22;
  font-size:clamp(2rem, 4.2vw, 3.3rem);
  margin-bottom:1.4rem;
}
.sec-title em{ position:relative; white-space:nowrap }
.lead{ color:rgba(20,22,26,.75); margin-bottom:1.1rem; font-size:1.05rem }
.lead strong{ color:var(--ink) }
.about-cta{ margin-top:1.8rem }

.about-points{ display:grid; gap:0; position:relative }
.about-points::before{
  content:""; position:absolute; top:0; bottom:0; inset-inline-start:26px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--line-l) 0 8px, transparent 8px 16px);
}
.point{
  position:relative; padding-block:1.15rem; padding-inline-start:3.4rem;
  border-bottom:1px solid var(--line-l);
}
.point:first-child{ border-top:1px solid var(--line-l) }
.p-num{
  position:absolute; inset-inline-start:0; top:1.35rem;
  font-size:.8rem; color:var(--red-d);
  background:var(--paper); padding:0 .35rem;
}
.point h3{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin-bottom:.25rem }
.point p{ font-size:.93rem; color:rgba(20,22,26,.65) }
.point::before{
  content:""; position:absolute; inset-inline-start:20px; top:1.65rem; width:14px; height:14px;
  background:var(--paper); border:2.5px solid var(--red); border-radius:50%;
  transition:background .3s, transform .3s var(--ease-spring);
}
.point:hover::before{ background:var(--red); transform:scale(1.25) }

/* stats */
.stats{
  margin-top:4.5rem; display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--ink); color:var(--paper);
  border-top:6px solid var(--red);
}
.stat{ padding:2.2rem 1.5rem; text-align:center }
.stat + .stat{ border-inline-start:1px solid var(--line-d) }
.stat-num{
  display:block; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:500; color:var(--red);
  line-height:1.1; letter-spacing:.02em;
}
.stat-label{ color:var(--steel); font-size:.92rem; margin-top:.3rem; display:block }

/* ═══════════════════ SERVICES ═══════════════════ */
.services{ background:var(--paper-2); padding:6.5rem 0 }
.services::before{
  content:""; position:absolute; top:0; right:0; width:100%; height:100%;
  background-image:radial-gradient(rgba(20,22,26,.06) 1px, transparent 1px);
  background-size:26px 26px; pointer-events:none;
}
.sec-head{ max-width:620px; margin-bottom:3.5rem; position:relative }
.sec-desc{ color:rgba(20,22,26,.65) }

.srv-list{ display:flex; flex-direction:column; position:relative }
.srv{
  display:grid; grid-template-columns:110px 92px 1fr 64px; align-items:center; gap:1.6rem;
  padding:2rem 1.2rem; background:transparent;
  border-bottom:1px solid var(--line-l);
  position:relative; transition:background .35s var(--ease);
}
.srv:first-child{ border-top:2px solid var(--ink) }
.srv::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
[dir="ltr"] .srv::before{ transform-origin:left }
.srv:hover::before{ transform:scaleX(1) }
.srv > *{ position:relative; z-index:1; transition:color .35s }
.srv:hover .srv-code, .srv:hover h3, .srv:hover .srv-icon, .srv:hover .srv-tags span{ color:var(--paper) }
.srv:hover .srv-icon svg{ stroke:var(--red) }
.srv:hover .srv-tags span{ border-color:rgba(243,239,230,.3); color:var(--paper) }
.srv:hover .srv-brands{ color:var(--steel) }

.srv-code{ font-size:.85rem; letter-spacing:.1em; color:var(--red-d); font-weight:500 }
.srv-icon svg{ width:52px; height:52px; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s, transform .4s var(--ease-spring) }
.srv:hover .srv-icon svg{ transform:scale(1.08) rotate(-4deg) }
.srv-body h3{ font-family:var(--font-display); font-weight:700; font-size:1.45rem; margin-bottom:.35rem }
.srv-body p{ color:rgba(20,22,26,.7); font-size:.97rem; max-width:70ch }
.srv-tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem }
.srv-tags span{
  font-size:.78rem; font-weight:500; padding:.18rem .7rem;
  border:1px solid var(--line-l); border-radius:2px; color:rgba(20,22,26,.7);
  transition:all .35s;
}
.srv-brands{ margin-top:.7rem; font-size:.72rem; letter-spacing:.08em; color:var(--steel) }
.srv-brands b{ color:var(--red-d); margin-left:.4rem }
.srv:hover .srv-brands b{ color:var(--red) }

.srv-cta{
  width:52px; height:52px; display:grid; place-items:center;
  border:2px solid var(--ink); border-radius:4px;
  transition:all .3s var(--ease);
}
.srv-cta svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.srv:hover .srv-cta{ background:var(--red); border-color:var(--red); color:#fff; transform:rotate(-90deg) }

/* flash highlight when jumping from menu */
.srv.flash{ }
.srv.flash::before{ transform:scaleX(1) }
.srv.flash .srv-code{ color:var(--red) }
.srv.flash h3{ color:var(--paper) }
.srv.flash .srv-body p{ color:rgba(243,239,230,.75) }
.srv.flash .srv-icon svg{ stroke:var(--red) }
.srv.flash .srv-tags span{ border-color:rgba(243,239,230,.35); color:var(--paper) }
.srv.flash .srv-brands{ color:var(--steel) }
.srv.flash .srv-cta{ background:var(--red); border-color:var(--red); color:#fff }

/* ═══════════════════ MOBILE BAND ═══════════════════ */
.mobile-band{
  background:var(--ink); color:var(--paper); padding:6rem 0; overflow:hidden; position:relative;
}
.mobile-glow{
  position:absolute; width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,54,42,.22), transparent 62%);
  top:-250px; left:-180px; pointer-events:none;
}
[dir="ltr"] .mobile-glow{ left:auto; right:-180px }
.mobile-band::after{
  content:""; position:absolute; bottom:0; right:0; left:0; height:140px; pointer-events:none;
  background:
    repeating-linear-gradient(-45deg, rgba(243,239,230,.04) 0 12px, transparent 12px 24px);
  mask-image:linear-gradient(to top, #000, transparent);
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
}
.mobile-inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; position:relative; z-index:1 }
.mobile-art{ display:grid; place-items:center; padding:2rem }
.mobile-art svg{ width:min(420px,100%); color:var(--red); filter:drop-shadow(0 10px 30px rgba(232,54,42,.25)) }
.mobile-copy .lead{ color:rgba(243,239,230,.75) }
.mobile-copy .sec-tag{ color:var(--red) }

/* ═══════════════════ GALLERY ═══════════════════ */
.gallery{ background:var(--paper); padding:6.5rem 0 }
.gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:14px }
.gal-item{
  position:relative; overflow:hidden; cursor:zoom-in; background:var(--ink);
  border:1px solid var(--line-l);
}
.gal-item:nth-child(3n+1){ grid-row:span 2 }
.gal-item:nth-child(4n){ grid-column:span 2 }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s }
.gal-item:hover img{ transform:scale(1.07); filter:saturate(1.1) }
.gal-item figcaption{
  position:absolute; bottom:0; right:0; left:0;
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1rem; color:var(--paper); font-size:.88rem; font-weight:500;
  background:linear-gradient(to top, rgba(13,15,18,.92), transparent);
  transform:translateY(100%); transition:transform .4s var(--ease);
}
.gal-item:hover figcaption{ transform:none }
.gal-item figcaption .mono{ color:var(--red); font-size:.72rem; letter-spacing:.1em }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(13,15,18,.96);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible }
.lightbox img{
  max-width:88vw; max-height:82vh; object-fit:contain;
  transform:scale(.92); transition:transform .4s var(--ease-spring);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox.is-open img{ transform:scale(1) }
.lb-close{ position:absolute; top:1.2rem; inset-inline-end:1.2rem; width:52px; height:52px; display:grid; place-items:center; color:var(--paper); border:1.5px solid var(--line-d); border-radius:4px; transition:all .25s }
.lb-close:hover{ background:var(--red); border-color:var(--red) }
.lb-close svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; display:grid; place-items:center; color:var(--paper); border:1.5px solid var(--line-d); border-radius:4px; background:rgba(13,15,18,.5); transition:all .25s }
.lb-nav:hover{ background:var(--red); border-color:var(--red) }
.lb-nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
#lbPrev{ inset-inline-start:1.2rem } #lbNext{ inset-inline-end:1.2rem }
.lb-count{ position:absolute; bottom:1.4rem; inset-inline-start:1.6rem; color:var(--steel); letter-spacing:.15em; font-size:.85rem }

/* ═══════════════════ CONTACT ═══════════════════ */
.contact{ background:var(--paper-2); padding:6.5rem 0; position:relative }
.contact::before{
  content:""; position:absolute; top:0; right:0; width:100%; height:100%;
  background-image:radial-gradient(rgba(20,22,26,.05) 1px, transparent 1px);
  background-size:26px 26px; pointer-events:none;
}
.contact-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; position:relative;
  align-items:start;
}
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.c-card{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--white); border:1px solid var(--line-l); padding:1.3rem 1.2rem;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
a.c-card:hover{ transform:translateY(-4px); border-color:var(--red); box-shadow:0 14px 28px -14px rgba(20,22,26,.3) }
.c-icon{
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--ink); color:var(--red); border-radius:4px;
  transition:background .3s, color .3s, transform .3s var(--ease-spring);
}
a.c-card:hover .c-icon{ background:var(--red); color:#fff; transform:rotate(-6deg) }
.c-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.c-card small{ color:var(--steel); font-size:.8rem }
.c-card b{ font-family:var(--font-display); font-size:1.02rem; font-weight:700; line-height:1.4 }

.contact-form{
  background:var(--white); border:1px solid var(--line-l); border-top:5px solid var(--red);
  padding:2rem; display:grid; gap:1.1rem;
}
.contact-form label{ display:flex; flex-direction:column; gap:.35rem }
.contact-form label span{ font-family:var(--font-display); font-weight:600; font-size:.92rem }
.contact-form input, .contact-form select, .contact-form textarea{
  font:inherit; font-size:.95rem;
  padding:.75rem .9rem; border:1.5px solid var(--line-l); border-radius:3px;
  background:var(--paper); color:var(--ink);
  transition:border-color .25s, box-shadow .25s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(232,54,42,.18);
}
.contact-form textarea{ resize:vertical }
.form-note{ font-size:.8rem; color:var(--steel) }

.contact-map{
  grid-column:1 / -1; position:relative; border:1px solid var(--line-l); background:var(--white);
}
.contact-map iframe{ display:block; width:100%; height:340px; border:0; filter:grayscale(.35) contrast(1.05) }
.map-badge{
  position:absolute; top:14px; inset-inline-start:14px;
  background:var(--ink); color:var(--paper); padding:.5rem .9rem;
  display:flex; flex-direction:column; gap:.1rem; line-height:1.3;
  border-top:3px solid var(--red);
}
.map-badge .mono{ color:var(--red); font-size:.72rem; letter-spacing:.14em }
.map-badge{ font-size:.82rem }

/* ═══════════════════ FOOTER ═══════════════════ */
.footer{ background:var(--ink); color:var(--steel) }
.footer-grid{
  display:grid; grid-template-columns:1.4fr .8fr 1fr 1fr; gap:2.5rem;
  padding:4.5rem 0 3rem;
}
.f-brand img{ height:54px; margin-bottom:1.2rem; filter:brightness(0) invert(1); opacity:.95 }
.f-brand p{ font-size:.92rem; max-width:32ch }
.f-fb{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.3rem;
  color:var(--paper); font-weight:500; font-size:.92rem;
  border:1px solid var(--line-d); padding:.55rem 1.1rem; border-radius:3px;
  transition:all .25s;
}
.f-fb svg{ width:18px; height:18px; fill:currentColor }
.f-fb:hover{ background:var(--red); border-color:var(--red); color:#fff }
.f-col h4{
  font-family:var(--font-display); color:var(--paper); font-weight:700; font-size:1.02rem;
  margin-bottom:1.1rem; display:flex; align-items:center; gap:.6rem;
}
.f-col h4::after{ content:""; flex:1; height:1px; background:var(--line-d) }
.f-col li{ margin-bottom:.55rem }
.f-col a{ font-size:.92rem; transition:color .25s, padding-right .25s var(--ease) }
.f-col a:hover{ color:var(--red); padding-inline-start:5px }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.3rem 0; border-top:1px solid var(--line-d); font-size:.85rem;
}
.footer-bottom .mono{ font-size:.72rem; letter-spacing:.16em; color:rgba(138,147,160,.7) }

/* ═══════════════════ REVEAL ═══════════════════ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--d,0) * 90ms) }
[data-reveal].is-in{ opacity:1; transform:none }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1080px){
  .srv{ grid-template-columns:80px 1fr 56px; }
  .srv-icon{ display:none }
  .gal-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:200px }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .about-grid{ grid-template-columns:1fr; gap:3rem }
  .mobile-inner{ grid-template-columns:1fr; }
  .mobile-art{ order:2; padding:0 }
}
@media (max-width: 900px){
  .nav{ display:none }
  .burger{ display:flex }
  .header .btn{ display:none }
  .topbar-contacts .tb-item:nth-child(2){ display:none }
  .topbar-side .tb-loc{ display:none }
  .stats{ grid-template-columns:1fr 1fr }
  .stat{ border-top:1px solid var(--line-d) }
  .stat:nth-child(-n+2){ border-top:0 }
  .stat:nth-child(3){ border-inline-start:0 }
  .contact-grid{ grid-template-columns:1fr }
  .hero-slider{ min-height:min(78vh, 640px) }
  .hero-content{ padding-bottom:7.5rem }
}
@media (max-width: 620px){
  .gal-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:170px }
  .gal-item:nth-child(4n){ grid-column:span 1 }
  .gal-item:nth-child(3n+1){ grid-row:span 1 }
  .gal-item:nth-child(2n+1){ grid-row:span 2 }
  /* services: code + CTA row, body below (RTL-safe placement) */
  .srv{ grid-template-columns:1fr 48px; padding:1.5rem .9rem; gap:.9rem; grid-auto-rows:auto }
  .srv-code{ grid-column:1; grid-row:1 }
  .srv-cta{ grid-column:2; grid-row:1; width:44px; height:44px; align-self:start }
  .srv-body{ grid-column:1 / -1; grid-row:2 }
  .srv-body h3{ font-size:1.25rem }

  .topbar{ min-height:36px; font-size:.8rem }
  .topbar-inner{ min-height:36px }
  .topbar-contacts{ gap:.9rem }
  .topbar-contacts .tb-item:nth-child(3){ display:none }
  .tb-item{ font-size:.78rem }

  /* hero mobile */
  .hero-slider{ min-height:min(72vh, 560px) }
  .hero-content{ padding-bottom:6.8rem; padding-top:3rem }
  .hero-title{ font-size:2rem }
  .hero-sub{ font-size:.98rem; margin-top:1rem }
  .hero-cta{ margin-top:1.6rem; flex-direction:column; align-items:stretch }
  .hero-cta .btn{ justify-content:center; padding:.75rem 1.2rem; font-size:.95rem }
  .hero-counter{ display:none }
  .hero-ui-row{ gap:.7rem; padding:0 3.5% 1.2rem; align-items:center }
  .hero-dots{ flex:1; justify-content:center; flex-wrap:wrap; gap:5px }
  .hero-dots button{ width:13px; height:3.5px }
  .hero-dots button.is-active{ width:26px }
  .hero-arrows{ flex-shrink:0 }
  .arrow{ width:40px; height:40px }

  .brand-txt{ display:none }
  .brand img{ height:40px }

  /* sections tighter */
  .about{ padding:4.5rem 0 3.5rem }
  .brands{ padding:4rem 0 0 }
  .services{ padding:4.5rem 0 }
  .mobile-band{ padding:4.5rem 0 }
  .gallery{ padding:4.5rem 0 }
  .contact{ padding:4.5rem 0 }
  .stats{ margin-top:3rem; padding:0 }
  .stat{ padding:1.6rem 1rem }
  .sec-head{ margin-bottom:2.5rem }
  .gal-grid{ gap:10px }
  .mq-item{ padding:1.1rem 1.4rem; margin-inline-end:1.4rem }
  .mq-item img{ height:44px }
  .point{ padding:1rem 3rem 1rem 0 }
  .contact-cards{ grid-template-columns:1fr 1fr; gap:10px }
  .c-card{ padding:1.1rem 1rem }
  .contact-form{ padding:1.3rem; gap:1rem }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; padding:3.5rem 0 2rem }
  .footer-bottom{ padding-bottom:calc(1.3rem + env(safe-area-inset-bottom)) }
}
@media (max-width: 400px){
  .contact-cards{ grid-template-columns:1fr }
  .hero-dots button{ width:11px }
  .arrow{ width:38px; height:38px }
}

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001s !important; transition-duration:.001s !important }
  html{ scroll-behavior:auto }
  .marquee-track{ animation:none }
  [data-reveal]{ opacity:1; transform:none }
  .slide.is-active img{ transform:none }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--red); outline-offset:2px;
}